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

/*===========================================================================================================================================================

Hello! If this is your first time looking at a stylesheet within the text editor view, what you are reading right now is a "comment". Comments are added throughout this stylesheet with the purpose of making the source code easier to understand, comments will not be interpreted during the compile process. Since comments are not interpreted during the compile process, feel free to add or remove any comments.

For help with MadCap Flare go to Help Ribbon > Topics Section > Open Help. Alternatively visit the Flare Online Help at help.madcapsoftware.com

If you have any questions regarding how to work with this stylesheet or template project, please contact MadCap Technical Support. 
https://www.madcapsoftware.com/support/contact-options.aspx

NOTE: Generally, this stylesheet has elements listed out in the order that they appear in the topic from top to bottom. The exception are General styles which are at the top and the stylesheet mediums which are at the bottom.

EXAMPLE: Since the search-bar is at the top of the topic page, it will be listed closer to the top of this stylesheet.

===========================================================================================================================================================*/

/*==Topic General Styles==*/

:root
{
	--Brand1: #e90029;
	--Brand2: #CDE0E7;
	--Dark: #45494c;
	--Medium: #b9bec1;
	--Light: #d0d3d5;
	--White: #ffffff;
	--logo-height: 75px;
	/* Brand Colors */
	--pathwave-brand-color: #8d3785;
	--footer-links-color: #555555;
	/* from KSP */
	/* Background Color */
	--light-background-color: #f4f5f7;
	--table-border-color: #c1c7d0;
	--table-stripe-color: white;
	/* Red Links Color */
	--default-link-color: #e90029;
	--visited-link-color: #891518;
	/* Blue Links Color */
	--blue-default-link-color: #0000ee;
	--blue-visited-link-color: #551a8b;
	/* Dark Theme Blue Links Colors */
	--blue-dark-default-link_color: #72bcff;
	--blue-dark-visited-link-color: #d9a7ff;
	/* Codecolors */
	--code-background-color: var(--light-background-color);
	--table-heading-color: var(--light-background-color);
	/* Navigationcolors */
	--header-background-color: white;
	/* --icon-color: #4d4d4d; */
	--icon-color: #373a36;
	--icon-color-hover: #000000;
	--toolbar-background-color: #f4f5f7;
	--toolbar-top-border-color: #ccc;
	--toolbar-bottom-border-color: #ccc;
	--button-hover-color: #cdcdcd;
	/* Sidebarcolors */
	--sidebar-background-color: yellow;
	--sidebar-border-color: var(--table-border-color);
	/* Fonts */
	--base-font-size: 16px;
	--content-font-color: #343434 !important;
	--content-font-size: 15.2px;
	--non-content-font-size: 12.8px;
	--sidebar-font-size: var(--non-content-font-size);
	--toolbar-font-size: var(--non-content-font-size);
	--base-font-family: Helvetica, Arial, sans-serif !important;
	--code-font-family: Consolas, SFMono-Regular, Menlo, Monaco, "Liberation Mono", "Courier New", Courier, monospace;
	--font-display: block;
	--code-inline-font-size: 12.8px;
	--heading-color: #172b4d;
	--title-bar-height: 122;   /* fallback value you provided */
  	--header-vertical-gap: 8px; 
}

body
{
	line-height: 1.7em;
	background-color: #fff;
	color: var(--content-font-color);
	font-family: var(--base-font-family);
	font-size: var(--content-font-size);
}

h1,
h2,
h3,
h4,
h5,
h6
{
	box-sizing: border-box;
	font-family: var(--base-font-family);
	color: var( --Dark);
	margin: 10px 0px 0px 0px;
	padding: 16px 0px 0px 0px;
}

h1
{
	font-size: 24px;
	font-weight: normal;
	line-height: 1.25;
}

h2
{
	font-size: 22px;
	font-weight: normal;
	line-height: 1.5;
}

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

h4
{
	font-size: 18px;
	font-weight: normal;
	line-height: 1.4;
}

h5
{
	font-size: 16px;
	font-weight: bold;
	line-height: 1.4;
	color: #5e6c84;
}

h6
{
	font-size: 16px;
	font-weight: bold;
	line-height: 1.3;
	color: #5e6c84;
}

li
{
	margin-bottom: 6px;
	margin-top: 6px;
}

p
{
	margin-top: 8px;
	margin-bottom: 8px;
}

img	/*Setting max-width: 100%; property makes images always fit the width of the container*/
{
	max-width: 100%;
}

img.thumbnail
{
	mc-thumbnail: popup;
}

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

a.MCBreadcrumbsLink
{
	font-style: normal;
	text-decoration: none;
	font-color: var(--default-link-color);
	background-color: var(Dark1);
}

a.MCBreadcrumbsLink:visited
{
	color: var(--default-link-color);
}

a.MCBreadcrumbsLink:hover
{
	color: var(--Brand2);
}

.breadcrumbs-container
{
	padding: 10px 20px;
	font-size: 0.85em;
	background-color: transparent;
	color: #666;
}

.search-field	/*The box-shadow property is applied to style to provide shadow on the search bar*/
{
	box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

div.search-container
{
	margin-top: -36px;
	margin-bottom: 100px;
}

MadCap|breadcrumbsProxy
{
	font-size: var(--non-content-font-size);
	font-style: normal;
	mc-breadcrumbs-prefix: ' ';
	mc-breadcrumbs-divider: ' > ';
	background-color: transparent;
	border-bottom: solid 0px #f4f5f7;
}

.breadcrumb-divider::before
{
	content: ' ';
}

.breadcrumb-divider::after
{
	content: ' ';
}

MadCap|xref
{
	color: #2D8DCC;
	font-weight: bold;
	mc-format: '{para}';
	text-decoration: underline;
}

MadCap|xref:hover
{
	color: var(--default-link-color);
}

MadCap|dropDownHotspot
{
	color: var(--default-link-color);
	align-items: center;
	display: inline-block;
	gap: 0px;
	vertical-align: middle;
}

MadCap|dropDown	/*Change the "mc-open-image" and "mc-closed-image" properties to change the icons used in drop-downs*/
{
	mc-open-image: url('../Images/Assets/Icons/Arrows/arrow-down-gray.png');
	mc-closed-image: url('../Images/Assets/Icons/Arrows/arrow-right-gray.png');
}

MadCap|dropDownBody
{
	border-bottom: none;
}

.dropDownHotspot
{
	align-items: center;
	display: inline-block;
	vertical-align: middle;
}

.dropDownHotspot img,
.dropDownHotspot h1
{
	vertical-align: middle;
}

/* Ensure the H1 doesn’t break to next line */

.dropDownHotspot h1.dropdown-h1
{
	display: inline-block;
	/* inline block to sit beside icon */
	margin: 0;
	padding: 10px 10px 10px 10px;
	font-size: 24px;
	font-weight: normal;
	line-height: 1;
	/* shrink line-height to match icon */
}

.mc-open-image,
.mc-closed-image
{
	vertical-align: middle;
	margin-top: 0;
	/* remove extra top margin */
}

/*==Master Page Topic Layout==*/

nav.title-bar	/*Adds bottom border on top navigation bar*/
{
	border-bottom: 3px solid var(--default-link-color);
	padding-botton: 10px;
	max-width: none !important;
}

.logo-wrapper
{
	padding-left: 16px;
	padding-right: 16px;
}

div.top-bar	/*Contains the breadcrumbs and toolbar*/
{
	border-bottom: 0px solid #d3d3d3;
	min-height: 30px;
	/*Min-height is necessary for topics that are not included in a TOC*/
}

div.search-container
{
	padding-bottom: 20px;
}
ul.sidenav {
  display: block;
  min-width: 0;                 /* allow horizontal scroll rather than expanding the parent */
}



ul.sidenav li a
{
	font-size: var(--sidebar-font-size);
	font-color: var(--default-link-color);
	display: block;
	line-height: 1.25rem;
	overflow: hidden;
	padding: 1px 10px 1px 18px !important;
	text-overflow: ellipsis;
	white-space: normal;
}
ul.sidenav li a,
ul.sidenav li a > * {           /* also protect any inner inline elements */
  display: inline-block;        /* preserves padding/margins and enables nowrap */
  white-space: nowrap !important;/* force no-wrap for menu items */
  text-overflow: clip;          /* we want full content available via scroll */
  overflow: visible;            /* link itself won't clip — container will scroll */
}
ul.sidenav li.active > a,
ul.sidenav li.selected > a
{
	color: var(--default-link-color);
}

.is-accordion-submenu-parent > a span.submenu-toggle
{
	border: none;
	top: 16px;
}

/* Top-level menu item padding */

.menu.vertical > li
{
	padding-right: 3px;
}

/* Collapsed state: add arrow image */

/* Collapsed state: right arrow (existing) */
.is-accordion-submenu-parent > a span.submenu-toggle::after {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background-image: url('../Images/Assets/Icons/Arrows/arrow-right-gray.png');
  background-repeat: no-repeat;
  background-size: 10px 10px;
}
.is-accordion-submenu-parent > a[aria-expanded='true'] span.submenu-toggle::after,
.is-accordion-submenu-parent > a [aria-expanded='true'] span.submenu-toggle::after {
  /* same expanded styles */
  content: "";
  position: absolute;
  left: -1px;
  top: 50%;
  transform: translateY(-40%) rotate(180deg); /* center vertically */
  width: 14px;
  height: 14px;
  background-image: url('../Images/Assets/Icons/Arrows/arrow-down-gray.png');
  background-repeat: no-repeat;
  background-size: 10px 10px;
  background-position: center;
}


/* Disable flip transform on expanded state (handled by parent pseudo-elements) */

.is-accordion-submenu-parent > a [aria-expanded='true'] span.submenu-toggle
{
	/* Styles inherited from span.submenu-toggle */
}

.submenu-toggle-container
{
	left: 0px;
}

/* Padding and indentation for different levels */

ul.sidenav ul > li > a
{
	margin-left: 18px;
	padding-left: 20px;
}

ul.sidenav ul ul > li > a
{
	margin-left: 38px;
	padding-left: 20px;
}

ul.sidenav ul ul ul > li > a
{
	margin-left: 55px;
}

ul.sidenav ul ul ul ul > li > a
{
	margin-left: 60px;
}

ul.sidenav ul ul ul ul > li > a
{
	margin-left: 72px;
}

ul.sidenav ul ul ul ul ul > li > a
{
	margin-left: 90px;
}

ul.sidenav ul ul ul ul ul ul > li > a
{
	margin-left: 110px;
}

/*body layout menu*/

.hidden
{
	display: none !important;
	visibility: hidden !important;
	width: 0 !important;
	padding: 0 !important;
	border: none !important;
}

.sidenav-layout
{
	display: flex;
	flex-direction: row;
	width: 100%;
	min-width: 0;
	overflow: visible;
}

.sidenav-container
{
	flex: 1;
	max-height: calc(100vh - 173px);
	overflow: visible;
	box-sizing: border-box;
}

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

.sidenav-wrapper
{
	flex: 0 0 300px;
	width: 300px;
	min-width: 40px;
	max-height: 100%;
	border-right: solid 1px #cdcdcd;
	display: block !important;
	z-index: 1;
	flex-shrink: 0;
	position: relative;
	padding-bottom: 80px;
	overflow-x: auto !important;
	overflow-y: auto !important;
	padding-right: 20px;
	padding-top: 20px;
	background: #f4f5f7;
}

/* Collapse/Expand states controlled by JS class toggles */
.sidenav-wrapper.expanded {
	width: 300px !important;
	flex: 0 0 300px !important;
	overflow-x: auto !important;
	overflow-y: auto !important;

}

.sidenav-wrapper.collapsed {
	width: 70px !important;
	flex: 0 0 70px !important;
	overflow: hidden !important;
}

/* Keep the container as a descendant so visibility toggles target the right element */
.sidenav-wrapper.collapsed .sidenav-container {
	visibility: hidden !important;
	height: 0 !important;
	overflow: hidden !important;
	pointer-events: none !important;
}
.sidenav-wrapper.expanded .sidenav-container {
	visibility: visible !important;
	height: auto !important;
	pointer-events: auto !important;
	margin-left:-15px;
	margin-top:10px;
}

/* Helper: hide buttons by toggling .hidden (used by JS) */
.sidenav-toggle-buttons .hidden {
	display: none !important;
}


.sidenav-toggle-buttons
{
	/*
width:100%;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 100;
	*/
	width: 100%;
	position: absolute;
	top: 10px;
	left: 0;
	right: 0;
	z-index: 100;
	display: flex;
	justify-content: space-between;
	pointer-events: none;
}

button.expand-btn,
button.collapse-btn
{
	margin: 0;
	padding: 6px 16px;
	pointer-events: auto;
	/* Enable clicks on buttons */
	position: relative;
	font-weight: bold;
}

button.expand-btn
{
	margin-left: -19px;
	/* overlap into center */
}

button.collapse-btn
{
	margin-left: 255px;
	/* overlap into center */
}

.row.outer-row.sidenav-layout
{
	display: flex;
	flex-wrap: nowrap;
	width: 100%;
	overflow: visible;
}

.outer-row
{
	display: flex;
	flex-direction: row;
	width: 100%;
	overflow: visible;
}

.body-container
{
	flex: 1 1 auto;
	min-width: 0;
	overflow-y: auto;
	box-sizing: border-box;
	padding: 20px;
}

.main-content-wrapper
{
	display: flex;
	flex-direction: column;
	position: relative;
}

.main-body
{
	flex: 1;
	padding-right: 1rem;
	margin-top: 10px;
	margin-right: 26%;
	margin-bottom: 0px;
}

.right-side-menu
{
	font-size: var(--non-content-font-size);
	position: fixed;
	top: calc(var(--title-bar-height) + var(--header-vertical-gap));
	right: 0;
	width: 20%;
	max-height: calc(100vh - var(--title-bar-height) - 36px);
	overflow-y: auto;
	padding: 1rem;
	min-height: 300px;
	z-index: 999;
	display: block;
	margin-right: 2%;
	
}

.footer
{
	font-family: Arial;
	font-style: normal;
	color: #000000;
	background: #f0f0f0;
	padding: 15px 30px;
	font-size: 14px;
	line-height: 20px;
	white-space: normal;
	margin-top: 50px;
	width: 100%;
}

.footer-wrapper
{
	width: 100%;
	background-color: #f0f0f0;
}

.right-side-menu-style
{
	border-left: 1px solid #b9bec1;
	text-decoration: none;
}

.menu li a
{
	line-height: 1.5;
	/* Adjust as needed: 1.6 or even 1.7 */
	display: inline-block;
	/* Optional: Ensures proper box rendering */
}

.on-this-page-heading-with-line
{
	padding-top: 1.5rem;
	padding-left: 0.5rem;
	margin-bottom: 0.5rem;
	display: inline-block;
	justify-content: space-between;
	align-items: center;
}

.on-this-page-heading
{
	font-weight: bold;
	font-size: 1rem;
	margin-bottom: 0.5rem;
}

.on-this-page-menu
{
	border-left: 1px solid #e90029 !important;
	padding-left: 0.5rem;
}

/* Just in case, remove bullets explicitly */

.on-this-page-toolbar
{
	/*	 margin-top: 0.5rem; */
	margin-left: 2rem;
	padding-left: 0;
}

.onthispage-link
{
	color: var(--default-link-color);
	font-family: var(--base-font-family);
	font-size: var(--non-content-font-size);
	text-decoration: none;
	/* remove underline if your TOC doesn’t use it */
}

.onthispage-link:visited
{
	color: var(--visited-link-color);
}

.onthispage-link:hover
{
	text-decoration: underline;
}

/* right-side menu end*/
/* toolbar ------------*/

button.cta2
{
	display: inline-block;
	background-color: #e90029;
	color: #fff !important;
	padding: 10px 20px;
	/* increased vertical and horizontal padding */
	border-radius: 999px;
	font-size: 1em;
	/* slightly increased font size */
	text-decoration: none;
	vertical-align: middle;
	font-weight: 500;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
	border: none;
	cursor: pointer;
	transition: all 0.3s ease;
	white-space: nowrap;
}

button.cta2:hover
{
	box-shadow: 0 8px 16px rgba(0,0,0,0.2);
	transform: translateY(-2px);
}

/*a.cta:visited {
    color: #ffffff !important;
    text-decoration: none;
}
*/

.nav-search-wrapper
{
	display: flex;
	justify-content: flex-end;
	/* right-align all content inside */
	align-items: center;
	width: 100%;
}

.project-logo-wrapper
{
	display: none !important;
}

.nav-search.row
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* keeps breadcrumbs on left, buttons on right */
	width: 100%;
	gap: 12px;
	float: none;
	margin-top: 0px;
	background: var(--light-background-color);
	/* new background */
	font-size: var(--non-content-font-size);
	/* new font size */
	padding: 0px 0px;
	/* optional: add some spacing inside */
}

.search
{
	margin: 0;
	/* remove any default margin */
}

.nav-search.row form.search
{
	flex-grow: 1;
	max-width: 600px;
	/* adjust this value to what looks good */
}

.search-bar-container
{
	width: 100%;
	max-width: 100%;
	flex-grow: 1;
}

body.home-page
{
	/* Home page specific styles (if needed) */
}

.breadcrumbs-proxy
{
	display: block !important;
	margin-right: auto;
	flex-shrink: 0;
	width: 60%;
	padding-top: 20px;
	color: black !important;
	font-size: 14px;
	/* can override this if var(--non-content-font-size) is sufficient */
}

/* toolbar ------------------------------------------------------------end */

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

div.topic-layout	/*This layout was created using the Responsive Layout Editor in MadCap Flare. Go to: Home Ribbon > Styles Section > Responsive Layout*/
{
	mc-grid-row: true;
	margin-left: auto;
	margin-right: auto;
}

div.topic-layout::before
{
	content: ' ';
	display: table;
}

div.topic-layout::after
{
	content: ' ';
	display: table;
	clear: both;
}

div.topic-layout > div
{
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

div.topic-layout > div:nth-child(1)	/*Menu Proxy container*/
{
	width: 25%;
	margin-left: 0%;
	border-right: 1px solid #d3d3d3;
}

div.topic-layout > div:nth-child(2)
{
	width: 73%;
	margin-left: 2%;
}

th
{
	background: var(--light-background-color);
	font-family: var(--base-font-family);
	font-color: var(--Dark);
	font-weight: normal;
	font-size: 12pt;
	padding: 5px 5px;
	border-right: var(--light-background-color);
}

/* 2. Bottom‑border‑only table */

td.row-border
{
	border-bottom: 2px solid #d0d3d5;
}

table
{
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;

	/* Ensure there is space below every table */
	margin-bottom: 20px;

	background-color: var(--light-background-color);
	/* Clips content to border-radius */
}

th,
td
{
	border-bottom: 1px solid #d0d3d5;
	vertical-align: top;
	font-size: 14px;
	padding: 12px 16px;
	text-align: left;
	background-color: white;
}

th
{
	font-size: 16px;
	/* Corrected from 'font-color' */
	font-weight: normal;
	background-color: var(--Dark);
	font-color: white;
	color: white;
}

table[data-mc-style-name="StyleColBorder"] td
{
	border-right: 1px solid #d0d3d5;
}

table[data-mc-style-name="StyleColBorder"] td:last-child
{
	border-right: none;
}

/* Optional: row hover effect */

table[data-mc-style-name="StyleColBorder"] tr:hover
{
	background-color: #f9f9f9;
}
/* ================================
   Code Table with Copy Button
   ================================ */
table.code-table {
    width: 100%;
    border: 1px solid var(--table-border-color);
    border-radius: 8px;
    border-collapse: separate;
    border-spacing: 0;
    background-color: var(--light-background-color);
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
    margin-top: 24px;      /* spacing above table */
    margin-bottom: 28px;   /* spacing below table */
}
/* Header styling */
table.code-table thead th {
 	background-color: var(--Dark);
    color: #fff;
    font-weight: normal;
    font-size: 15px;
    padding: 10px 14px;
    position: relative;
    text-align: left;
    padding-right: 40px;
	border-bottom: 1px solid var(--table-border-color);
	
}

/* Copy button in header */
table.code-table thead th .copy-btn {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background-image: url('../Images/Assets/Icons/MainIcons/PDFs-dark-gray.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px; /* smaller and neat */
  border: none;
  outline: none;
  cursor: pointer;
  opacity: 0.85;
  border-radius: 3px;
  background-color: transparent; /* remove grey box */
  padding: 0;
}

table.code-table thead th .copy-btn svg {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    fill: #fff;
}
table.code-table thead th .copy-btn:hover {
 	opacity: 1;
    transform: translateY(-50%) scale(1.1);
}

/* Table body styling */
table.code-table tbody td {
	font-family: var(--code-font-family);
	font-size: 13px;
	background-color: #fff;
	padding: 10px 16px;
	border-top: 1px solid var(--table-border-color);
	white-space: pre-wrap;
	word-break: break-word;
}

/* Optional hover effect */
table.code-table tbody tr:hover td {
	background-color: #f9f9f9;
}
table.code-table thead th .copy-btn.copied {
	filter: brightness(1.4);
}
table.code-table thead th .copy-btn.copied svg {
    fill: var(--Brand1);
}

/* ===========================================================
   Striped Table (alternating row colors)
   =========================================================== */

table.striped-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid var(--table-border-color);
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.08);
  margin-top: 24px;
  margin-bottom: 28px;
}

table.striped-table thead th {
  background-color: var(--Dark);
  color: #fff;
  font-weight: normal;
  font-size: 15px;
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--table-border-color);
}

table.striped-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--table-border-color);
  font-size: 14px;
  color: var(--content-font-color);
  background-color: #fff; /* base color for odd rows */
}

/* Alternate row coloring */
table.striped-table tbody > tr:nth-of-type(even) > td {
  background-color: var(--light-background-color) !important;
}

/* Optional hover effect */
table.striped-table tbody > tr:hover > td {
  background-color: #f3f5f6 !important;
}




MadCap|expanding
{
	mc-open-image: url(../Images/Assets/Icons/Arrows/arrow-down-gray.png);
	mc-closed-image: url(../Images/Assets/Icons/Arrows/arrow-right-gray.png);
}

MadCap|expandingHead
{
	padding: 5px 5px;
}

MadCap|expandingBody
{
	padding: 5px 5px;
}

/* Apply to the overall snippet container */

MadCap|codeSnippet
{
	display: table;
	width: 100%;
	border: 1px solid var(--table-border-color);
	border-radius: 6px;
	overflow: hidden;
	margin: 1em 0;
	background-color: var(--light-background-color);
	box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
	font-family: var(--base-font-family);
	font-size: 16px;
	line-height: 1.5;
	position: relative;
	padding-right: 40px;
	/* space for copy button */
}

/* Caption styled as raised tab */

MadCap|codeSnippetCaption
{
	display: table-caption;
	caption-side: top;
	padding: 6px 10px;
	background-color: var(--Dark);
	color: #fff;
	font-family: var(--base-font-family);
	font-size: 16px;
	font-weight: normal;
	text-align: left;
	border-bottom: 1px solid var(--table-border-color);
	border-top-left-radius: 6px;
	/* new */
	border-top-right-radius: 6px;
	/* new */
	overflow: hidden;
}

MadCap|codeSnippetBody
{
	display: table-row;
}

MadCap|codeSnippetBody pre
{
	margin: 0;
	padding: 10px;
	background: transparent;
	overflow-x: auto;
	white-space: pre;
	border-bottom-left-radius: 6px;
	/* ensures rounded bottom corners */
	border-bottom-right-radius: 6px;
}

MadCap|codeSnippet
{
	position: relative;
	/* make it the positioning parent */
	padding-right: 40px;
	/* give space for the copy button */
}

MadCap|codeSnippetCopyButton
{
	position: absolute;
	top: 8px;
	right: 8px;
	width: 28px;
	height: 28px;
	background: url('../Images/Assets/Icons/MainIcons/PDFs-dark-gray.png') no-repeat center;
	background-size: contain;
	border: none;
	cursor: pointer;
	transition: transform 0.2s ease;
}

MadCap|codeSnippetCopyButton span
{
	display: none !important;
}

MadCap|codeSnippetCopyButton:hover
{
	opacity: 0.8;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	transform: translateY(-2px);
	/* raise effect */
}

MadCap|codeSnippetCopyButton:active
{
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	transform: translateY(0);
	/* return to default */
}

a.codeSnippetCopyButton
{
	display: inline-block;
	width: 28px;
	height: 28px;
	background-image: url('../Images/Assets/Icons/MainIcons/PDFs-dark-gray.png');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	text-indent: -9999px;
	overflow: hidden;
	border: none;
	padding: 0;
	cursor: pointer;
	position: relative;
	vertical-align: middle;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

a.codeSnippetCopyButton:hover
{
	opacity: 0.8;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	transform: translateY(-2px);
	/* raise effect */
}

a.codeSnippetCopyButton:active
{
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	transform: translateY(0);
	/* return to normal */
}

a:visited
{
	color: var(--visited-link-color);
}

/* ================================
   Expandable / Collapsible Block
   ================================ */

/* Code body area with smooth edges */
/* Full borders table */



h1.withHR
{
	border-bottom: solid 2px #000000;
	border-color: var(--Light);
	box-shadow: 2;
	padding-bottom: 10px;
	margin-bottom: 10px;
}
h2.withHR
{
	border-bottom: solid 2px #000000;
	border-color: var(--Light);
	box-shadow: 2;
	padding-bottom: 10px;
	margin-bottom: 10px;
}

/* =========================================================================
   CODE TABLE + COPY BUTTON STYLES
   (Merged from Code_Table.css -> Now authoritative single source)
   - Dark border, visible shadow
   - Copy button uses existing PNG background in project
   - Hover (raised), pressed (sunken), copied feedback (light)
   - Minimal, low-cost transitions for performance in MadCap preview
   ========================================================================= */

/* Selector list covers MadCap generated class names and custom .code-table */
table.code-table,
table.TableStyle-Code_Table,
table.TableStyle_Code_Table,
.TableStyle-Code_Table {
  /* Make the table behave like a boxed element (shadow + rounded corners) */
  border-collapse: separate !important;   /* allow outer border & shadow */
  border-spacing: 0 !important;
  border: 1px solid var(--table-border-color) !important;      /* strong outer border */
  border-radius: 8px !important;
  background-clip: padding-box !important;/* prevent background bleed under radius */
  box-shadow: 0 3px 10px rgba(0,0,0,0.12) !important; /* visible shadow */
  overflow: hiddent;           /* allow button & shadow to overflow */
  width: 100%;
  background-color: var(--light-background-color); /* keep consistent */
}

/* Internal cell separators (ensure dark) */
table.code-table th, table.code-table td,
table.TableStyle-Code_Table th, table.TableStyle-Code_Table td,
.TableStyle-Code_Table th, .TableStyle-Code_Table td {
  border-right: 1px solid var(--table-border-color) !important;
  border-bottom: 1px solid var(--table-border-color) !important;
  background-clip: padding-box !important;
  background-color: #fff; /* cells stay white for readability */
}

/* Header cell appearance */
table.code-table thead th,
table.TableStyle-Code_Table thead th,
.TableStyle-Code_Table thead th {
  background-color: var(--Dark);
  color: #fff;
  font-weight: normal;
  font-size: 14px;
  padding: 6px 14px;
  text-align: left;
  border-bottom: 1px solid var(--table-border-color) !important;
  position: relative;   /* ensure absolute-positioned button sits inside */
  overflow: visible !important; /* allow button to be visible */
  padding-right: 48px;  /* reserve space for copy button */
}

/* Body cells */
table.code-table tbody td,
table.TableStyle-Code_Table tbody td,
.TableStyle-Code_Table tbody td {
  font-family: var(--code-font-family);
  font-size: 13px;
  padding: 10px 16px;
  white-space: pre-wrap;
  word-break: break-word;
  background-color: #fff;
}

/* Optional hover for rows */
table.code-table tbody tr:hover td,
table.TableStyle-Code_Table tbody tr:hover td {
  background-color: #f9f9f9;
}

/* ========== Copy button base (uses PNG background already present in project) ========== */
/* If you previously defined .copy-btn background in Code_Table.css, keep same PNG path */
.copy-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%) translateZ(0);
  width: 28px;
  height: 28px;
  z-index: 30;
  border: none;
  background: url('../Images/Assets/Icons/MainIcons/PDFs-dark-gray.png') no-repeat center;
  background-size: 18px 18px;
  background-color: transparent;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
  will-change: transform, box-shadow, opacity;
  outline: none;
}

/* Hover: raised (lift & subtle shadow) */
.copy-btn:hover {
  transform: translateY(calc(-50% - 4px)) scale(1.03);
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
  opacity: 1;
}

/* Focus: visible ring (keyboard accessible) */
.copy-btn:focus {
  box-shadow: 0 0 0 3px rgba(34,128,255,0.14), 0 6px 14px rgba(0,0,0,0.06);
}

/* Pressed: sunken (works with :active and .pressed class) */
.copy-btn:active,
.copy-btn.pressed {
  transform: translateY(calc(-50% + 2px)) scale(0.995);
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  transition-duration: 80ms;
}

/* Copied state: subtle ring + small green dot (cheap repaint) */
/* ===== Copy Button Glow on Copy ===== */

/* Soft glow ring when copied */
.copy-btn.copied {
    box-shadow: 
        0 0 0 4px rgba(76, 175, 80, 0.25),
        0 2px 6px rgba(0,0,0,0.10);
    transform: translateY(calc(-50% - 2px)) scale(1.05);
    transition: box-shadow 180ms ease-out, transform 180ms ease-out;
}

/*.copy-btn.copied::after {
  content: '';
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(76,175,80,0.95);
  transition: opacity 160ms ease;
}*/

/* Ensure table header doesn't clip the button */
table.code-table thead th,
table.TableStyle-Code_Table thead th,
.TableStyle-Code_Table th {
  overflow: visible !important;
}
table.code-table thead th:first-child,
table.TableStyle-Code_Table thead th:first-child {
    border-top-left-radius: 8px;
}

table.code-table thead th:last-child,
table.TableStyle-Code_Table thead th:last-child {
    border-top-right-radius: 8px;
}

/* Cheap focus outline for keyboard users (applies to button, not the whole page) */
.copy-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(34,128,255,0.14);
}

/* Fallback: ensure parent containers don't inadvertently clip child overflow */
.topic-layout
{
	overflow: visible !important;
}

/* End of CODE TABLE + COPY BUTTON STYLES */

/* ==========================================================
	 Sidenav scrollbar styles
	 - Show horizontal + vertical scrollbars on `.sidenav-wrapper`
	 - Ensure `.sidenav-container` does not show scrollbars
	 - Sleek, slightly dark thumb for good contrast
	 ========================================================== */

.sidenav-container {
	/* We want scrolling inside the sidebar wrapper, not the main container */
	overflow: visible !important;
}

.sidenav-wrapper {
    height: calc(100vh - 173px) !important;   /* ensure constrained height */
    max-height: calc(100vh - 173px) !important;
    overflow-y: auto !important;               /* wrapper is scroller */
    -webkit-overflow-scrolling: touch;
}

/* Stop the UL from scrolling itself */
.sidenav-wrapper > ul.sidenav {
    max-height: none !important;
    overflow: visible !important;
}

/* Put your slim scrollbar rules on the wrapper (or keep your previous ones) */
.sidenav-wrapper::-webkit-scrollbar { width: 6px; height: 6px; }
.sidenav-wrapper::-webkit-scrollbar-thumb {
    background-color: rgba(34,34,34,0.45) !important;
    border-radius: 6px;
    border: 1px solid var(--light-background-color);
    min-height: 10px!important;
}

.radio-group-label ul ul {
  display: none;
}
		.note {
			background-color: var(--light-background-color);
			border: none;
			padding: 12px 16px;
			padding-left: 56px; /* room for icon */
			background-image: url("../Images/Assets/Icons/MainIcons/Notes.png");
			background-repeat: no-repeat;
			background-position: 16px 16px;
			background-size: 24px 24px;
			display: block;
		}
/* Notes:
	 - For the scrollbars to appear the wrapper must have constrained
		 height/width (for example the existing `flex: 0 0 300px` and
		 `max-height` / container constraints). If content still doesn't
		 scroll, adjust the wrapper or parent sizing.
*/
/* ===== Sidebar scrollbar fix (consolidated responsive queries) ===== */
/*===========================================================================================================================================================
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
===========================================================================================================================================================*/

/* Consolidated responsive media queries moved to end of file */

@media screen and (min-width: 500px) {
	.title-bar-layout .logo-wrapper {
		min-height: 55px;
		flex-basis: 100%;
	}
	.sidenav-wrapper {
		/* force a constrained height so vertical scrollbar can appear */
		height: calc(100vh - 173px) !important;
		max-height: calc(100vh - 173px) !important;
		min-height: 0 !important;
		overflow-y: auto !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
	}
}

@media only screen and (max-width: 1279px) {
	/* Keep sidebar visible on tablet so scrollbars remain available */
	div.topic-layout > div:nth-child(1) {
		display: block !important;
	}

	/* Ensure content takes remaining width when layout changes */
	div.topic-layout > div:nth-child(2) {
		width: 98%;
		margin-left: 2%;
	}

	.sidenav-wrapper {
		overflow-x: auto !important;
		overflow-y: auto !important;
		/* Force a usable fixed sidebar width on narrower viewports so
			 scrollbars appear reliably (override skin % widths) */
		width: 300px !important;
		flex: 0 0 300px !important;
		max-height: 100% !important;
		min-height: calc(100vh - 173px) !important;
		display: block !important;
		/* Keep sidenav fixed so it doesn't scroll away with page content */
		position: fixed !important;
		top: calc(var(--title-bar-height) + var(--header-vertical-gap));
		left: 0;
		height: calc(100vh - var(--title-bar-height) - var(--header-vertical-gap));
		overflow-y: auto !important;
		overflow-x: hidden !important;
		z-index: 1000;
		background: #f4f5f7;
		border-right: 1px solid #cdcdcd;
	}

	/* Ensure parent containers allow sidebar scrollbars to show */
	.topic-layout,
	.sidenav-container,
	.row.outer-row.sidenav-layout,
	.sidenav-layout,
	.outer-row {
		overflow: visible !important;
	}

	/* If you use a .collapsed class make sure it doesn't hide scrollbars */
	.sidenav-wrapper.collapsed {
		overflow-y: auto !important;
		overflow-x: auto !important;
		width: 70px !important;
		flex: 0 0 70px !important;
	}

	/* Shift body content to avoid being covered by fixed sidenav */
	.body-container {
		margin-left: 300px;
	}

	/* When collapsed, reduce left margin */
	.sidenav-wrapper.collapsed ~ .body-container,
	.sidenav-wrapper.collapsed + .body-container,
	.sidenav-wrapper.collapsed ~ .main-content-wrapper .body-container {
		margin-left: 70px;
	}

}
@media only screen and (max-width: 767px) {
	div.top-bar {
		min-height: 0;
	}

	div.topic-layout > div:nth-child(1) {
		display: block !important;
	}

	div.topic-layout > div:nth-child(2) {
		width: 98%;
		margin-left: 2%;
	}

	.sidenav-wrapper {
		overflow-x: auto !important;
		overflow-y: auto !important;
		/* Keep fixed width on small screens to avoid %-based skin rules */
		width: 300px !important;
		flex: 0 0 300px !important;
		max-height: 100% !important;
		min-height: calc(100vh - 173px) !important;
		display: block !important;
	}

	.row.outer-row.sidenav-layout,
	.sidenav-layout,
	.outer-row {
		overflow: visible !important;
	}

	/* Hide right-side menu on small screens */
	.right-side-menu {
		display: none !important;
	}
}
	/* Note block with icon */