﻿/* January 2017 - MTN - hide glossterm styling in UA panel temporarily 
November 2015 - MTN - additional margin for div.keygroup in stub file
August 2016 - MTN - styling for spenot th
April 2016 - MTN - adjustment to style for UA panel
March 2016 - MTN - styling for UA panel
Dec 2015 - MTN - styling for DT in WN topic
Mar 2015 - MTN - styling for standalone glossaries based on DS_Glossary.xml; fix for Chrome issue with images in table cells; fix for dt in action bar topics
Jan 2015 - corrected background position of sitemap image; corrected indentation of equations in sections
November 2014 - JWS / MTN - updated title and hyperlink styling to match 3ds.com and reduced indentation.
November 2014 - MTN - manage div.keygroup for keywords specialization
September 2014 - MTN - manage equations in sections 
August 2014 - MTN - handle table title and desc like figure title and desc; and choicetable font
May 2014 - MTN - correct bug when icon inserted in prereq element text - td.Intro2.
April 2014 - MTN - import of DSDocXMLLegacy css.
March 2014 - MTN - Moved styles in DSDocXMLLiquid here. There is no longer any compelling reason 
to maintain a Liquid and Fixed CSS. Rework vertical spacing of lists and p. */

@import url("DSDocUI_XMLDomains34.css");
@import url("DSDocUI_ShowTerm34.css");
@import url("DSDocUI_XMLLegacy34.css");
@import url("DSDocUI_XMLFonticons34.css");

body {
	font-family: Verdana, Helvetica, sans-serif;
	font-weight: normal;
	color: #000000;
	background: white;
	font-size: 8pt;
}
@-moz-document url-prefix() {
  	body {
		margin: 0;
		padding: 0;
	}
}
html:has(body.noscroll) {
  overflow: hidden;
  scrollbar-gutter: unset;
}

table.table1 {
	width: 100%;
	margin-top: 0px;
	margin-left: 5px;
	table-layout: fixed;
	margin-bottom: 20px;
}

div#layermerge {
	visibility: hidden;
}

/* -------------------------------------------------------------------------------------*/
/* Base styles commented in legacy CSS and migrated here as part of incremental clean up*/
/* ------------------------------------------------------------------------------------ */

/* DSDocXMLDomains.css */
kbd.userinput,
span.filepath {
	color: #94666D;
	font-family: Courier New, Courier;
	letter-spacing: -0.05em;
	font-weight: bold;
}



/* _________________________________________________________________________________________________ */
/*              Doc Header for UA panel                                                              */
/* _________________________________________________________________________________________________ */
.UAPAnel {
	width: 98%;
	padding-bottom: 5px;
	border-bottom: 0.1em solid #C8CCCE;
	border-collapse: separate;
	background-color: #F9F9F9;
}

.UAPAnel h1 {
	color: #72797F;
	background-color: #C8CCCE;
	padding-top: 2px;
	padding-bottom: 2px;
}

.UAPAnel p.themes {
	margin-left: 0px;
}

table.DocHeader-UAPanel {
	width: 98%;
	margin: 0px;
}

table.DocHeader-UAPanel td.DocHeader4 {
	height: 0px;
}

table.DocHeader-UAPanel td {
	padding: 0px;
}

table.DocHeader-UAPanel table.DocThemeIntro-UAPanel {
	margin-top: 0px;
}

/*table.DocHeader-UAPanel h1 { */
/* -----------------------modifier---------------------- */
/*    color: #4B575F;
    background-color: transparent;
    border-bottom: 0.05em solid #C8CCCE; 
    border-top: 0.05em solid #C8CCCE;
    }
*/
table.DocHeader-UAPanel+.nested1 h2 {
	margin-top: 0px;
}

table.DocHeader-UAPanel td p {
	color: #000000;
}

/* to hide glossary term styling in UA panel temporarily */
/*
table.DocHeader-UAPanel + div span.glossterm {
	color: #000000;
	border-bottom: none;
	}
table.DocHeader-UAPanel + div span.glossterm:hover {
	border-bottom: none;
    cursor: inherit;
	}
*/

/* _________________________________________________________________________________________________ */
/*              Doc Header                                                                           */
/* _________________________________________________________________________________________________ */
table.DocHeader {
	/* -------------------modifier------------------- */
	width: 100%;
	background-color: transparent;
	margin-top: 0px;
	margin-left: 0px;
	margin-bottom: 20px;
	margin-right: 20px;
}

/* ----------- Doc Header  ---   H1 Heading --------*/
td.DocHeader1 {
	/* -----------------------modifier---------------------- */
	/*background-color: #72797F; JWS REMOVED*/
	width: 100%;
}

/*________________________ Separator, empty cell  _______________________*/
td.DocHeader4 {
	/* ----------------- modifier ---------------    */
	background-color: transparent;
	/* height: 8px; */
}

/*  -------- Doc Header ----- Introduction   --------*/
/*    vertical-align necessary                       */
td.DocHeader3 {
	/* -----------------------modifier---------------------- */
	background-color: transparent;
	border: 0px solid white;
	height: 100%;
	width: 100%;
	vertical-align: top;
	margin-top: 20pt;
	margin-bottom: 0px;
}

table.DocHeaderIntro {
	/* -----------------------modifier---------------------- */
	width: 98%;
	vertical-align: top;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 20px;
	border-collapse: collapse;
	border-spacing: 0;
}

table.DocThemeIntro {
	width: 100%;
	vertical-align: top;
	margin-top: 0px;
	margin-left: 0px;
	/* -------------------modifier------------------ */
}

td.Intro1 {
	height: 100%;
	vertical-align: top;
	padding-top: 4px;
	/* 10px; JWS CHANGE */
	padding-right: 4px;
	border: 1px solid #C8CCCE;
	background-color: #F9F9F9;
	padding-left: 10px;
	/* HZH 6 Aug 2024 - Fix indent */
	padding-bottom: 10px;
	/* HZH 6 Aug 2024 - Fix indent */
	box-sizing: border-box;
}

td.Intro1Only,
div.Intro1Only {
	height: 100%;
	vertical-align: top;
	padding-top: 4px;
	/* 10px; JWS CHANGE */
	padding-left: 9px;
	/* HZH change 18 APR 2024 to fix table indentation */
	padding-right: 10px;
	padding-bottom: 4px;
	border: 1px solid #C8CCCE;
	background-color: #F9F9F9;
}

td.Intro2 {
	margin-top: 10px;
	height: 100%;
	color: #000000;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	background-color: #f1f5f8;
	border: 1px solid #C8CCCE;
}

/* .Intro2 > .run-in{
	color: #6caacd;
} */

td.Intro1 ul,
td.Intro2 ul,
td.Intro1Only ul {
	margin-right: 0px;
	margin-left: 15px;
	/* 10px; JWS CHANGE */
	line-height: 12px;
	color: #000000;
}

td.Intro1 ul li,
td.Intro2 ul li,
td.Intro1Only ul li {
	margin-right: 0px;
	margin-left: 15px;
	line-height: 2;
	color: #000000;
}

td.Intro1Only ul {
	margin-bottom: 0px;
}

td.Intro1 ol,
td.Intro1Only ol {
	margin-right: 0px;
	margin-left: 0px;
	margin-bottom: 0px;
	margin-top: 5px;
}

td.Intro2 ol {
	margin-top: 5px;
}

td.Intro2 dl {
	margin-left: 0px;
}

/*-------------Special para. tag for header ------------------ */
p.header {
	color: #4B575F;
	margin-left: 0px;
	margin-bottom: 0px;
	margin-right: 0px;
}

td.Intro1Only p.header,
td.Intro1 p.header {
	margin-bottom: 6px;
}

td.Intro1 p,
td.Intro2 p,
td.Intro1Only p {
	/* -----------------modifier-------------- */
	/* color: #4B575F;    */
	color: #000000;
	margin-left: 0px;
	/* HZH change 18 APR 2024 to fix table indentation */
	margin-bottom: 0px;
	margin-top: 8px;
	/* HZH change 18 APR 2024 to fix table indentation */

}

td.Intro1 ul p,
td.Intro2 ul p,
td.Intro1Only ul p {
	margin-top: 3px;
}

td.Intro2 p.themes,
td.Intro2 p.usertasks {
	margin-left: 10px;
	/* 22px; JWS CHANGE */
	/* padding-left: 15px; JWS REMOVED */
}

/* eliminates unwanted vertical space when p followed by br rather than p around br */
td.Intro1Only br,
td.Intro1 br,
td.Intro2 br {
	line-height: 0;
}

/*HDW: Add space after last p if there is one after ul in intro box in stub */
td.Intro1 ul+p {
	margin-bottom: 15px;
}

/*-------------Horizontal line in header - was 0.5px ----------------- */
hr.header {
	/* -----------------------modifier---------------------- */
	color: #C8CCCE;
	background-color: transparent;
	height: 0.1px;
	margin-top: 0px;
}

/* _________________________________________________________________ */
/*        Doc Header       Navigation box                            */
/*      vertical-align necessary for td.DocHeader2                   */
/* _________________________________________________________________ */
td.DocHeader2 {
	/* -----------------------modifier---------------------- */
	width: 26%;
	background-color: transparent;
	padding: 0px;
	vertical-align: top;
}

/*  added extra 1px to width because had to increase border width to be able to see it after setting the
	default table with a left-margin */
table.DocTopics {
	/* -----------------------modifier---------------------- */
	width: 100%;
	background-color: transparent;
	/* #EAECED; JWS CHANGE */
	border: 1px solid #C8CCCE;
	/* 5px solid #EAECED; JWS CHANGE */
	margin-top: 0px;
	margin-left: 0px;
	padding: 3px;
	/* JWS ADDED */
	border-collapse: separate;
	/* JWS ADDED */
}

table.DocTopics td {
	font-size: 8pt;
	/* 7pt; JWS CHANGE */
	padding: 2px;
	/* 1px; JWS CHANGE */
}

/* _________________________________________________________________________________________________ */
/*              Related topics title                                                                 */
/* _________________________________________________________________________________________________ */
td.TopicsTitle {
	font-weight: bold;
	color: #4B575F;
}

/* Related topics in other guides (SIMULIA request)  */
td.TopicsTitleNormal {
	margin-top: 30px;
	font-weight: normal;
	color: #4B575F;
}

/* _________________________________________________________________________________________________ */
/*              Related information for KB articles								                     */
/* _________________________________________________________________________________________________ */
div.relinfo {
	margin-top: 12px;
	margin-left: 0px;
	/* 6px; MTN CHANGE */
}

div.relinfo a {
	line-height: 15px;
}

/* _________________________________________________________________________________________________ */
/*              Headings                                                                             */
/* _________________________________________________________________________________________________ */
h1 {
	font-weight: normal;
	font-family: Arial;
	font-size: 16pt;
	color: #305164;
	/* VCH prev - #205b7a */
	/*padding: 4px; JWS REMOVED */
	margin-top: 0px;
	margin-bottom: 0px;
	/*margin-left: 4px; JWS REMOVED */
}

/*HDW: Added for class */
h1 span.uicontrol,
h1 span.menucascade,
h1 span.wintitle {
	font-size: 16pt;
	font-weight: normal;
	letter-spacing: 0em;
	color: inherit;
	/*#305164;*/
}

h2 {
	font-family: Arial Bold, sans-serif;
	font-weight: bold;
	font-size: 15pt;
	color: #3d3d3d;
	margin-top: 4pt;
	margin-bottom: 2pt;
	text-align: left;
	padding-top: 5px;
}

h2 span.uicontrol,
h2 span.menucascade,
h2 span.wintitle {
	font-size: 15pt;
	letter-spacing: 0em;
	color: inherit;
	/*#4B575F;*/
	font-weight: bold;
}

h2 cite {
	font-size: 15pt;
	letter-spacing: 0em;
	font-weight: bold;
	font-style: normal;
	color: #4B575F;
}

h3 {
	font-family: Verdana, Helvetica, sans-serif;
	font-size: 12pt;
	font-weight: bold;
	color: #828B90;
	margin-top: 2pt;
	margin-bottom: 2pt;
	text-align: left;
	margin-left: 0px;
	/* 4px; MTN CHANGE */
	padding-top: 5px;
}

h3 span.uicontrol,
h3 span.menucascade,
h3 span.wintitle {
	font-size: 12pt;
	letter-spacing: 0em;
	color: inherit;
	/*#828B90;*/
}

h3 cite {
	font-size: 12pt;
	font-style: normal;
	letter-spacing: 0em;
	color: #828B90;
}

h4 {
	font-family: Verdana, Helvetica, sans-serif;
	font-size: 10pt;
	font-weight: bold;
	color: #828B90;
	margin-top: 2pt;
	margin-bottom: 0px;
	margin-left: 0px;
	/* 4px; MTN CHANGE */
	text-align: left;
	padding-top: 5px;
}

h4 span.uicontrol,
h4 span.menucascade,
h4 span.wintitle {
	letter-spacing: 0em;
	color: inherit;
	/*#828B90;*/
}

h4 cite {
	letter-spacing: 0em;
	font-style: normal;
	color: #828B90;
}

h5 {
	font-family: Verdana, Helvetica, sans-serif;
	font-size: 10pt;
	font-weight: bold;
	font-style: italic;
	color: #4B575F;
	margin-top: 2pt;
	margin-bottom: 0px;
	margin-left: 0px;
	/* 4px; MTN CHANGE */
	text-align: left;
	padding-top: 5px;
}

h5 span.uicontrol,
h5 span.menucascade,
h5 span.wintitle {
	letter-spacing: 0em;
	color: inherit;
	/* #4B575F;*/
	font-weight: normal;
}

h5 cite {
	letter-spacing: 0em;
	color: #4B575F;
	font-weight: normal;
}

/* _________________________________________________________________________________________________ */
/*                                         le texte de base    oo                                    */
/* _________________________________________________________________________________________________ */

p {
	/* ------------------------ modifier ----------------- */
	color: #000000;
	margin-right: 0px;
	margin-top: 8px;
	margin-bottom: 10px;
	font-size: 14px;
}

p:first-of-type {
	margin-top: 0px;
}

/* HDW: Commented out. Used to use :first and not :first_child which caused rule to be ignored*/
/*p:first-child{   
    margin-top: 0;
}*/
/* removes unwanted extra space when p followed by /br - br added by XMetaL by default on publish */
p>br:first-child {
	line-height: 0;
}

/* removes unwanted extra space when p followed by /br and p around /br NEED TO CHECK NO OTHER IMPACTS - br added by XMetaL by default on publish */
div br {
	line-height: 0;
}

/*	Mario addition for Simulia */
li.dataitem ul li {
	padding-left: 20px;
}

/* Resets margin of Normal when in li - for tables in numbered lists */
li p {
	margin-left: 0px;
}

li table {
	margin-left: 0px;
}

/*   For spacing and style of Context element - appears after header box  */
span.run-in\.context {
	font-weight: bold;
	color: #4B575F;
}

/* p.result corresponds to Result element */
p.result+div.section p+ol {
	margin-top: 5px;
	margin-left: 0px;
}

/*   XMETAL - img in a p - three cases --- */
/*   use new selector for attribute containing a string - use * - to adjust for icons in tasks - */
p IMG {
	margin-top: 5px;
}

/* p IMG {
	margin-top: 0px;
	} 
p br+IMG {
	margin-top: 5px;
	} */
li.stepexpand IMG[src*="../Icons22"] {
	margin-top: 0px;
}


/* ______________________________________________________________________ */
/*                                         Numbered List                  */
/* __________________________________________________________ ___________ */
/* ________margin-bottom added to ol to reduce top margin of p.result_________*/

ol {
	margin-bottom: 10px;
	padding-left: 30px;
	/* 25px JWS ADDED - MAY STILL HAVE TO LOOK AT THIS. 0 PUSHES BULLETS LEFT OF LEFT MARGIN*/
}

ol ol {
	list-style-type: lower-alpha;
	margin-top: 5px;
	margin-bottom: 0px;
	margin-left: 30px;
	margin-right: 15px;
	padding: 0px;
}

/*   XMETAL --------------------------*/
/* HDW changed bold to normal for troubleshooting */
li.stepexpand {
	/* ---------------  modifier ---------------- */
	line-height: 20px;
	font-weight: normal;
	color: #000000;
	list-style-type: decimal;
	margin-right: 10px;
	margin-top: 15px;
	margin-bottom: 10px;
	padding: 0px;
}

/* HDW: Match vertical spacing of substeps to steps */
ol.substeps li.substep {
	margin-top: 15px;
	margin-bottom: 10px;
}

li.stepexpand ol {
	font-weight: normal;
	color: #000000;
	margin-top: 5px;
	margin-bottom: 0px;
	margin-left: 30px;
	margin-right: 15px;
	padding: 0px;
}

li.stepexpand p,
li.stepexpand ul {
	font-weight: normal;
	color: #000000;
	/* MTN ADDED */
}

/* MTN moved next item out of one above */
li.stepexpand td {
	font-weight: normal;
}

li.stepexpand table.Remark,
li.stepexpand dl,
li.stepexpand ul {
	margin-left: 0px;
	margin-top: 0px;
	margin-bottom: 5px;
}

/* HZH: Added 2023-04-21 to fix formatting of tips after choices table */
/* HZH: Tweaked 2023-04-24 to correct CSS selector */

li.stepexpand table+table.Remark {
	margin-top: 10px;
}


li.step p {
	margin-top: 7px;
	margin-bottom: 7px;
}

/*_____ adjustment for stepresult in substeps_______ */
li.substepexpand p {
	margin-top: 7px;
	margin-bottom: 7px;
}

/* HDW: Note that this is another pattern that crops up: li.stepexpand span.expandAndCollapseWrapper */
/* And this is what the not is filtering for */
li.li.step:not(.stepexpand) span.expandAndCollapseWrapper {
	display: block;
}

/* HDW: ol in substep should be numbered lower case roman */
li[class="li substep substepexpand"] ol[type='i'] {
	list-style-type: lower-roman;
}

/*_____ Troubleshooting _______ */
div[class="section tasktroubleshooting"]:before {
	content: url('IconsFont22/3ds_fonticon_tools.png');
	padding: 10px;
}

/* p[class="steptroubleshooting"]:before {		
	content: url('IconsFont22/3ds_fonticon_tools.png'); 
	padding: 10px;
}*/

*[class*=" troublebody"] *[class*=" condition"] *[class*=" sectiontitle"] {
	padding-top: 0px;
	padding-bottom: 2px;
	margin-top: 0px;
	margin-bottom: 0px;
}

*[class*=" troublebody"] *[class*=" cause"] *[class*=" sectiontitle"] {
	padding-top: 2px;
	padding-bottom: 2px;
	margin-top: 0px;
	margin-bottom: 0px;
}

*[class*=" troublebody"] *[class*=" remedy"] *[class*=" sectiontitle"] {
	padding-top: 0px;
	padding-bottom: 2px;
	margin-top: 0px;
	margin-bottom: 0px;
}

/*_____ Bulleted lists _______ */
ul {
	/* -----------------------modifier---------------------- */
	/* list-style-type: circle; */
	list-style-type: disc;
	font-style: normal;
	font-size: 16px;
	padding-top: 0px;
	padding-bottom: 5px;
	padding-left: 13px;
	padding-right: 0px;
	margin-left: 10px;
	margin-right: 0px;
	margin-top: 2px;
	margin-bottom: 0px;
}

ul ul {
	list-style-type: square;
}

ul ul ul {
	list-style-type: circle;
}

@media print {
	ul {
		list-style-type: circle;
	}
}

ul ul {
	margin-left: 0px;
	margin-top: 3px;
}

ul ul ul {
	margin-left: 0px;
	margin-top: 3px;
}

/* to increase vertical spacing in UL and OL lists in all topic types */
li {
	/* ------------------ modifier ---------------- */
	margin-top: 0px;
	line-height: 20px;
	font-size: 14px;
}

.content ul li i {
	/* ------------------ modifier --------------- */
	box-sizing: border-box;
	height: 20px;
	line-height: 20px;
	width: 10px;
	font-size: 5px;
	margin-right: 2px;
	color: #005686;
	transform: translateY(-3px);
}

/* HZH - Added 2023-07-13 to fix formatting of choices list */

.ul.choices {
	list-style-position: outside;
}

/* NB. div of class p is used elsewhere by default, see dita2htmlImpl.xsl */
/* Reworked for prereq in subtopics */
div.p {
	margin-top: 7px;
}

/* For prereqs in subtopics with ul lists */
div.p br+ul {
	margin-left: -5px;
	margin-right: 15px;
}

div.p span.run-in~p {
	margin-left: 0px;
	margin-top: 5px;
}

div.p span.run-in~ul {
	margin-left: 0px;
}

div.p span.run-in+p+ul {
	margin-left: 10px;
	margin-top: 5px;
}

div.p span.run-in+ol {
	margin-left: -10px;
	margin-top: 5px;
}

div.p span.run-in+p+ol {
	margin-left: -10px;
	margin-top: 5px;
}

div.p span.run-in+ol ul {
	margin-left: 0px;
	margin-top: 5px;
}

div.p span.run-in+p+ol ul {
	margin-left: 0px;
	margin-top: 3px;
}

/* For images in root topic prereq displayed after header and before steps */
div.p img {
	margin-top: 5px;
	margin-left: 0px;
}

/* For left margin of single steps, shown as bullets */
div.p>ul {
	margin-left: 15px;
	/* -30px; JWS CHANGE */
}

div[class="li step p"] {
	margin-left: 15px;
	display: list-item;
	list-style-type: disc;
	list-style-position: inside;
}

div.p>ul ul {
	margin-left: 0px;
}

/* For images in single steps when in a p with a br */
div.p ul>li p>img {
	margin-top: 0px;
}

/* Manages div.section to take standalone text (no tag) in result xml element into account */
/* means now have to manage tags in section */
div.section {
	/* margin-left: 10px; */
	/* 40px; JWS CHANGE */
}

div.section h2,
div.section h3,
div.section h4,
div.section h5 {
	margin-left: -10px;
	/* -27pt; JWS CHANGE */
	margin-bottom: 20px;
}

div.section p,
div.section ul,
div.section dl,
div.section table {
	margin-left: 0px;
	margin-bottom: 15px;
}

div.section ol {
	margin-left: 0px;
	/* -30px; JWS CHANGE */
	padding-left: 25px;
	/* JWS ADDED - MAY STILL HAVE TO LOOK AT THIS. 0 PUSHES BULLETS LEFT OF LEFT MARGIN*/
}

div.section ol ul {
	margin-left: 0px;
}

/* div.section dl.wn {
	margin-left: 0px; /* -26pt; JWS CHANGE 
	} */
div.section div.tablenoborder table.InterfaceDesc {
	margin-left: 0px;
	/* -26pt; JWS CHANGE */
}

div.section table.Remark {
	width: 90%;
	margin-left: 0px;
}

div.section div.equation {
	margin-left: -0.9em;
	/* -3.75em; MTN CHANGE */
	overflow-x: auto;
	/* HZH added 1 Feb 2022 to fix equation overlap */
}

/* div.keygroup for keywords specialization */
div.keygroup {
	margin-top: 10px;
	margin-left: 0px;
	/* -5px; MTN CHANGE */
}

div.keygroup+hr.header {
	margin-top: 10px;
}

/* ---------------------------------------------------- */
/* Tables                                                */
/* ---------------------------------------------------- */
/* --- top margin in table so that table after step aligns correctly ---- */
table {
	border-collapse: collapse;
	margin-top: 5px;
	margin-left: 0px;
	/* 40px; JWS CHANGE */
	/*table-layout: fixed; */
	/* HZH ADDITION */
	/*HDW REMOVED FEB 18 BECAUSE FIRST COLUMN WAS TINY*/
	width: 100%;
	/* HZH ADDITION */
	overflow-x: auto;
	/* HZH ADDITION */

}

/* needed for spenot where text is not in any tag and for table titles */
td {
	font-size: 14px;
}

@media print {
	td {
		font-size: 16px;
		overflow-x: visible;
	}
}

th.spenot {
	/* -----------------------modifier---------------------- */
	font-size: 10pt;
	background-color: transparent;
	border: none;
}

/*   XMETAL reference tables */
td.cellrowborder {
	/* -----------------------modifier---------------------- */
	border: 1px solid #C8CCCE;
	background-color: transparent;
	padding: 2px;
	padding-left: 3px;
	vertical-align: baseline;
	color: #000000;
}

td.cellrowborder p,
td.cellrowborder dl {
	margin-left: 0px;
}

td.cellrowborder ul {
	margin-left: 0px;
	/* -8px; MTN */
	margin-top: 2px;
	margin-bottom: 2px;
	margin-right: 5px;
}

td.cellrowborder ol {
	margin-left: 0px;
	/* -18px; MTN */
	margin-top: 2px;
	margin-bottom: 2px;
	margin-right: 5px;
}

td.cellrowborder li {
	margin-top: 0px;
}

/* td.cellrowborder img {
	vertical-align: bottom;  
	} MTN REMOVED */
/*   XMETAL - manage space for tables without borders --*/

td.nocellnorowborder p,
td.nocellnorowborder dl {
	margin-left: 0px;
}

td.nocellnorowborder ul {
	margin-left: 0px;
	/* -8px; MTN */
	margin-top: 2px;
	margin-bottom: 2px;
	margin-right: 5px;
}

td.nocellnorowborder ol {
	margin-left: 0px;
	/* -18px; MTN */
	margin-top: 2px;
	margin-bottom: 2px;
	margin-right: 5px;
}

td.cell-norowborder p {
	margin-left: 0px;
}

td.cell-norowborder li {
	margin-top: 0px;
}

/* HZH added 1 Feb 2022 to fix image overlap */
td>.image {
	height: auto;
	max-width: 100%;
}

/* HDW added filter for non-icon and non-animated images to handle shrinking icons */
td>.image:not(.animated)[src$=”.gif”] {
	height: auto;
	max-width: 100%;
}


/* HZH added 13 may to fix mini icons */
/* HZH modified 19 Jan 2023 to restrict to icons only */
/* HZH modified 05 Apr 2023 to add additional icons dir */

td:nth-of-type(1) .image[src^="Icons22"],
td:nth-of-type(1) .image[src^="IconsDashboardApps32"] {
	max-width: unset;
}



th {
	/* -----------------------modifier---------------------- */
	letter-spacing: -0.05em;
	font-weight: bold;
	text-align: left;
	vertical-align: middle;
	/* MTN ADDED */
	color: #4B575F;
	background-color: transparent;
	border: 1px solid #FFFFFF;
	height: 20px;
	/* padding: 2px; MTN REMOVED */
}

th.normal {}

/* ---------------------------------------------------- */
/* InterfaceDesc tables used in a number of UX topics */
/* ---------------------------------------------------- */
table.InterfaceDesc {
	margin-left: 0px;
	/* 4px; MTN CHANGE */
	width: 98%;
	margin-top: 5px;
}

/*   used in InterfaceDesc tables and spenot file */
td.padding {
	padding: 2px;
	vertical-align: top;
}

td.padding p {
	margin-left: 0px;
	margin-top: 0px;
	margin-bottom: 2pt;
}

/*  eliminates unwanted space */
td.padding br {
	line-height: 0;
}

/*  aligns dd under dt and (march 2015) manages dt font color */
table.InterfaceDesc dl {
	margin-left: 0px;
}

table.InterfaceDesc dd {
	margin-left: 0px;
}

table.InterfaceDesc dt {
	color: #757E84;
}

/* _______________________________________________________________________________ */
/*                       Information Boxes                                         */
/* Note: inside OL task and under P, the size and left-margin are same             */
/* _______________________________________________________________________________ */

table.Remark {
	background-color: #F9F9F9;
	border: 1px solid #C8CCCE;
	width: 90%;
	margin-left: 0px;
	/* 40px; JWS CHANGE */
	margin-top: 10px;
	margin-bottom: 15px;
}

td.Remark {
	color: #000000;
	text-align: left;
	margin-top: 2px;
	margin-bottom: 0px;
	margin-right: 10px;
	padding-top: 4px;
	/* 0px; JWS CHANGE */
	padding-bottom: 4px;
	padding-left: 10px;
	padding-right: 10px;
}

td.Remark p {
	color: #000000;
	margin-left: 0px;
}

td.Remark ul p {
	margin-top: 0px;
}

td.Remark ul {
	color: #000000;
	padding-bottom: 0px;
	margin-left: 15px;
	/* 10px; MTN CHANGE */
}

td.Remark ol {
	color: #000000;
	margin-left: 0px;
	list-style-type: decimal;
}

/* HZH added 05 Apr 2023 to fix indent */
td.Remark>.notecontent>ol {
	margin-left: 30px;
}

li.stepexpand td.Remark ol {
	margin-left: 30px;
	/* 40px MTN CHANGE */
}

/* to set width for information box when inside UL / OL OL - otherwise exceeds 500px */
ul table.Remark {
	width: 90%;
	margin-left: 0px;
}

ol ol table.Remark {
	width: 90%;
	margin-left: 0px;
}

p.result table.Remark {
	margin-left: 0px;
}

p table.Remark {
	margin-left: 0px;
}

div.linux {
	margin-left: 10px;
}

.notecontent {
	margin-left: 0px;
}

.run-in\.note,
.run-in\.notes,
.run-in\.tip,
.run-in\.tips,
.run-in\.important,
.run-in\.warning,
.run-in\.linux {
	font-weight: bold;
	color: #3D3D3D;
}

.run-in\.note>i,
.run-in\.tip>i,
.run-in\.tips>i,
.run-in\.important>i,
.run-in\.warning>i,
.run-in\.linux>i {
	font-size: 10px;
}

/* HZH - 14 Feb 2024 - handling for special notes in shortdescs */

.abstract~.recommendation,
.abstract~.important {
	margin-left: 9px;
}

/* Table title and desc elements */
span.tablecap {
	font-weight: bold;
	color: #4B575F;
}

caption {
	text-align: left;
	margin-bottom: 3px;
	font-size: 14px;
	white-space: nowrap;
	/* HZH 6 AUG - Fix wrap on table captions */
}

/*   XMETAL for figures - figcap same as run-in; use class on div for top/bot margins */
span.figcap {
	font-weight: bold;
	color: #4B575F;
	font-size: 14px;
	/* HZH 24 Sep 24 - changing caption to align with body */
	display: block;
	/* HZH 3 Aug 22 - adding spacing */
}

span.figdesc {
	font-weight: normal;
	color: #4B575F;
	/*	font-size: 8pt; */
}

div.fignone {
	margin-left: 10px;
	/* 40px; MTN CHANGE */
	margin-right: 20px;
	margin-top: 7px;
	margin-bottom: 0px;
}

div.fignone img {
	margin-top: 5px;
}

li>div.fignone {
	margin-left: 0px;
}

dd>div.fignone {
	margin-left: 0px;
}

div.nested1 li>div.fignone {
	margin-left: 0px;
}

div.nested1 div.fignone>p {
	margin-left: 0px;
}

div.nested2 div.fignone>p {
	margin-left: 0px;
}

div.nested2 div.fignone,
div.example div.fignone {
	margin-left: 10px;
	/* 40px; MTN CHANGE */
	margin-right: 20px;
	margin-top: 7px;
	margin-bottom: 0px;
}

div.section div.fignone {
	margin-left: 0px;
}

/* Used to highlight the Search result */
strike.search {
	font-family: Verdana, Helvetica, sans-serif;
	color: #FFFFFF;
	background: #111199;
	text-decoration: none;
}


/* Definition Lists */
/* ============================== */
/* --- general dl defined flush left - same left margin as plain text ; see below for special dl.wn and dl.uicontrol ; glossary handled differently in V6 ----- */
dl {
	margin-right: 35px;
	margin-bottom: 0px;
	margin-left: 10px;
	/* 40px; JWS CHANGE */
	margin-top: 5px;
}

dl dl {
	margin-left: 0px;
	margin-top: 5px;
}

dl table {
	margin-left: 0px;
}

/* Definition Term */
/* --------------- */
dt {
	color: #4B575F;
	font-weight: bold;
}

dt.pt {
	color: #94666D;
	font-weight: normal;
}


/* Definition Definition */
/* --------------------- */
dd {
	color: #000000;
	font-weight: normal;
	margin-bottom: 15px;
	margin-left: 15px;
	/* 30px; JWS CHANGE */
	margin-top: 5px;
}

dd p {
	margin-left: 0px;
	margin-top: 3px;
}

/* same margin-left for ul as when in a p */
dd ul {
	margin-left: 0px;
	margin-top: 3px;
}

dd ol {
	margin-left: 0px;
	/* -10px; MTN CHANGE */
	margin-top: 3px;
}

dd ol li {
	padding-left: 0px;
}

/* adjust margins and width of information boxes in dl lists */
dd table.Remark {
	margin-left: 0px;
	width: 90%;
}

dd dd table.Remark {
	width: 90%;
}

/* New WN elements */

*[class*=wnentry] {
	display: block;
	margin-bottom: 35px;
}

*[class*=wnentry] h4[class*=wntitle] {
	font-family: Verdana, Helvetica, sans-serif;
	font-size: 12pt;
	color: #005686;
	text-align: left;
	margin: 0px;
	padding-bottom: 12px;
}

*[class*=wnentry] div.Intro1Only>* {
	margin-left: 9px;
	margin-top: 5px;
}

*[class*=run-in\.wnbenefits],
*[class*=run-in\.wnmoreinfo] {
	font-weight: bold;
}

div.section[id^=content-r] div.Intro1Only>div.wnbenefits,
div.section[id^=kwa-ref-r] div.Intro1Only>div.wnbenefits,
div.section[id^=X3dwhtb-r] div.Intro1Only>div.wnbenefits {
	display: none;
}

div.wnrole[data-role]:not([data-role=""]) *[class*=run-in\.wnrole],
*[class*=wnrolecontent] {
	font-style: italic;
}

div.wnrole[data-role=""] *[class*=run-in\.wnrole],
*[class*=wnrolecontent] {
	display: none;
}

*[class*=wnentry]>*[class*=wnlongdesc],
*[class*=wnentry]>*[class*=wnmoreinfo] {
	margin-left: 0px;
	margin-top: 9px;
}

div.section .wn ul {
	margin-bottom: auto;
	padding-bottom: 0px;
}

/* HZH change 18 APR 2024 to fix table indentation */

.wnlongdesc p {
	margin-top: 8px;
}

.wnlongdesc dl.dl dd.dd {
	margin-bottom: auto;
}

.wnlongdesc dl.dl dt.dt {
	margin-top: 10px;
}

.wnmoreinfo .wnmoreinfo_content a {
	display: inline;
}

/*span.wnmoreinfo_content span.xref:not(:first-child):not(:last-child):after{
content: ", ";
}
span.wnmoreinfo_content span.xref:nth-last-child(n+3):after{
content: ", ";
}
span.wnmoreinfo_content span.xref:last-child:before {
content: "and " !important;
}
span.wnmoreinfo_content span.xref:first-child:before {
content: " " !important;
}
span.wnmoreinfo_content span.xref:last-child:after {
content: ".";
}*/

img.wnimage {
	background-color: #FFFFFF;
	border: solid 1px #77797C;
	border-radius: 4px;
	line-height: normal;
	margin: auto;
	padding: 4px;
}

.wnlongdesc p+br+img.image:not([src*="Icons"]),
.wnlongdesc p br+img.image:not([src*="Icons"]) {
	margin-top: -15px;
}

.wnlongdesc p+br+img.wnimage:not([src*="Icons"]),
.wnlongdesc p br+img.wnimage:not([src*="Icons"]) {
	margin-top: auto;
}

/* Hiding separator rule in wn expand and collapse */
div.section[id*="-r-wn__rs-"] .itemsprite {
	display: none;
}



/* used when outputclass is uicontrol in UX templates */
/* ============================== */
/* special class dl.uicontrol to set dt to uicontrol definition */
/* --------------- */

dl.uicontrol dt {
	font-weight: bold;
	color: #3D3D3D;
	margin-bottom: 0px;
}

dl.uicontrol dl dt {
	margin-bottom: 3px;
}

dl.uicontrol dd {
	margin-bottom: 8px;
}

dl.uicontrol dd.ddexpand {
	margin-top: 0px;
}

/* DS_Glossary.xml template */
body#glossary h2.topictitle2 {
	font-size: 8pt;
	font-weight: bold;
	margin-left: 10px;
	margin-right: 35px;
	margin-top: 5px;
	margin-bottom: 0px;
}

body#glossary p {
	margin-left: 25px;
	margin-top: 3px;
	margin-bottom: 3px;
}

body#glossary ul {
	margin-left: 25px;
}

/* _______________________________________________________________________________________________________ */
/*      LINKs                                                                                              */
/* _______________________________________________________________________________________________________ */

/* -------- modifier ------------ */
a:link {
	color: #005686;
	/* HZH CHANGE */
	text-decoration: underline;
	/* HZH CHANGE */
}

a:visited {
	color: #1A79B1;
	/* #BF650F; JWS CHANGE */
	text-decoration: underline;
	/* underline; JWS CHANGE */
}

/* Nielson: makes page more cluttered - but important for related topics because of small margins */
a:hover {
	/* background: #FFFFFF; JWS REMOVED */
	/* color: #562E18; JWS REMOVED */
	text-decoration: none;
}

a:link IMG {
	border: #1A79B1;
	/* #FF7900; MTN CHANGE */
	border-width: 1px;
	border-style: solid;
}

/* HZH - Removing blue border around index images */

.ix1 a img {
	border-width: unset;
	border-style: unset;
}

.ix2 a img {
	border-width: unset;
	border-style: unset;
}

a:visited IMG {
	border: #1A79B1;
	/* #BF650F; MTN CHANGE */
	border-width: 1px;
	border-style: solid;
}

a:hover IMG {
	border: #FFFFFF;
	border-width: 1px;
	/* 2px JWS CHANGE */
	border-style: solid;
}

/* March 2009 */
a:link span.uicontrol {
	color: #1A79B1;
	/* #FF7900; JWS CHANGE */
	font-weight: normal;
	letter-spacing: 0em;
}

/* Added 28-8 by HZH by request */
#toc_rg .ph.uicontrol {
	/* color:#005686; */
	color: #005686;
}

a:visited .ph.uicontrol {
	color: #1A79B1 !important;
}

a:visited span.uicontrol {
	color: #1A79B1 !uicontrol;
	/* #BF650F; JWS CHANGE */
	font-weight: normal;
	letter-spacing: 0em;
}

a:link span.menucascade {
	color: #1A79B1;
	/* #FF7900; JWS CHANGE */
	font-weight: normal;
	letter-spacing: 0em;
}

a:visited span.menucascade {
	color: #1A79B1;
	/* #BF650F; JWS CHANGE */
	font-weight: normal;
	letter-spacing: 0em;
}

a:link span.wintitle {
	color: #1A79B1;
	/* #FF7900; JWS CHANGE */
	font-weight: normal;
	letter-spacing: 0em;
}

a:visited span.wintitle {
	color: #1A79B1;
	/* #BF650F; JWS CHANGE */
	font-weight: normal;
	letter-spacing: 0em;
}

a:link cite {
	color: #1A79B1;
	/* #FF7900; JWS CHANGE */
	font-weight: normal;
	font-style: normal;
	letter-spacing: 0em;
}

a:visited cite {
	color: #1A79B1;
	/* #BF650F; JWS CHANGE */
	font-weight: normal;
	font-style: normal;
	letter-spacing: 0em;
}

/* --------------- MLP pour traiter les liens disactivated ------------------ */
a:link.disactivated {
	color: #000000;
	text-decoration: none;
	pointer-events: none;
	font-style: italic;
}

a:visited.disactivated {
	color: #000000;
	text-decoration: none;
	pointer-events: none;
	font-style: italic;
}

a:hover.disactivated {
	color: #000000;
	text-decoration: none;
	pointer-events: none;
	font-style: italic;
}

/* ------------------ fin traitement disactivated --------------------------- */

/* === Link from topic term to glossary definition ==== */
span.glossterm {
	color: #1A79B1;
	/* #0070C0; JWS CHANGE */
	border-bottom: 1px dotted #1A79B1;
	/* JWS ADDED */
	text-decoration: none;
}

/* JWS ADDED UNDERLINE FOR HOVER STATE */
span.glossterm:hover {
	border-bottom: 1px solid #1A79B1;
	cursor: help;
}

dfn.term {
	font-style: normal;
}

/* ========================================================== */
/* ====== no underline in site map ======================== */
/* ========================================================== */
p.ssm1 a:link {
	text-decoration: none;
}

p.ssm2 a:link {
	text-decoration: none;
}

p.ssm1 a:visited {
	text-decoration: none;
}

p.ssm2 a:visited {
	text-decoration: none;
}

/* JWS ADDED UNDERLINE FOR HOVER STATES */
p.ssm1 a:hover {
	text-decoration: underline;
}

p.ssm2 a:hover {
	text-decoration: underline;
}


/* Graphic for links in themes */
/* ================================================== */
p.themes a,
p.themes a:link,
p.themes a:visited

/* , p.themes a:hover JWS CHANGE */
	{
	background-repeat: no-repeat;
	background-position: left;
	margin-left: 0px;
	/* 22px; JWS CHANGE */
	text-decoration: none;
	/* underline; JWS CHANGE */
}

/* JWS ADDED UNDERLINE FOR HOVER STATE */
p.themes a:hover {
	text-decoration: underline;
}

/* used in the TOC */
/* --------------- */
p.toc {
	font-family: Verdana, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 8pt;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: -4pt;
}

/* used in the Site Map */
/* ----------------------------- */
p.ssm1 {
	font-family: Verdana, Helvetica, sans-serif;
	/* font-weight: bold; JWS REMOVED */
	background-image: url('IconsReference/minitoc.png');
	/* JWS ADDED */
	background-repeat: no-repeat;
	/* JWS ADDED */
	background-position: 15px;
	/* 2%; MTN CHANGED */
	font-size: 12px;
	/* 7pt; JWS CHANGE */
	margin-left: 0px;
	margin-top: 0px;
	/* 9pt; JWS CHANGE */
	margin-bottom: 8px;
}

p.ssm2 {
	font-family: Verdana, Helvetica, sans-serif;
	font-weight: normal;
	background-image: url('IconsReference/minitoc.png');
	/* JWS ADDED */
	background-repeat: no-repeat;
	/* JWS ADDED */
	background-position: 15px;
	/* 2%; MTN CHANGED */
	font-size: 12px;
	/* 7pt; JWS CHANGE */
	margin-left: 20px;
	/* JWS ADDED - MTN margin-left included in HTML so has no visible effect */
	margin-top: 0px;
	margin-bottom: 8px;
}

/* used in the Index */
/* ----------------- */
p.glossaryheader {
	font-family: Verdana, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 10pt;
	text-align: center;
}

p.glossaryletter {
	font-family: Verdana, Helvetica, sans-serif;
	font-size: 14pt;
	font-weight: normal;
	text-align: center;
	color: #4B575F;
	margin-top: 20px;
	margin-bottom: 0px;
}

/* td.Intro1Only p.glossaryheader 
	{
	margin-left: 10px; 
	} MTN REMOVED */
p.ix1 {
	font-family: Verdana, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 8pt;
	margin-left: 0px;
	/* 40pt; JWS CHANGE */
	margin-top: 0px;
	margin-bottom: 2pt;
}

p.ix2 {
	font-family: Verdana, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 8pt;
	margin-left: 30px;
	/* 40pt; MTN CHANGE */
	margin-top: 0px;
	margin-bottom: 2pt;
}

/* HZH - handling for inlineeqquation spacing */
span.inlineequation {
	display: inline-flex;
}

map area:focus {
	border: none;
	outline: none;
}

/* HDW: Remove pointer on titles per CEL */
#table11 .title {
	/* cursor: pointer; */
	margin-bottom: 10px;
}

#table11 .title>i {
	font-size: 12px;
	line-height: 21px;
	height: 21px;
}

table.choicetable {
	width: auto;
	margin-top: 15px;
	margin-bottom: 15px;
}

.entry,
.stentry {
	border: 1px solid #D1D4D4;
	padding: 7px;
}

thead>tr>.entry {
	position: sticky;
	top: -1px;
	background-color: #eeeeee;
	border: 1px solid #D1D4D4;
	padding: 7px;
	z-index: 1;
}

.table tr:nth-child(odd),
.simpletable tr:nth-child(odd) {
	background-color: #FFFFFF;
}

.thead tr.row,
.simpletable thead tr.sthead {
	background-color: #F9F9F9;
}

.table tr:nth-child(even),
.simpletable tr:nth-child(even) {
	background-color: #F9F9F9;
}

tbody {
	vertical-align: top;
}

.table caption span.title,
.table--title-label {
	font-weight: bold;
}

.Intro2 .wux-ui-3ds-survey-list,
div.p .wux-ui-3ds-survey-list {
	color: #005686;
	font-size: 18px;
	margin-right: 10px;

}

.Intro2 .themes>span,
.Intro2 .themes>nobr {
	margin-top: 5px;
	display: block;
}

td,
span,
p {
	line-height: 1.5;
}

/* HZH 19 Aug 2024 - Fix margin for table entries */
td.entry>p {
	margin-bottom: 10px;
}

td.entry>p:last-of-type {
	margin-bottom: 0px;
}

abbr[title] {
	text-decoration: none;
}

pre.codeblock {
	margin-left: 2em !important;
	overflow-x: auto;
}

/* Add vertical scrolling
.codeblock {  
  width: 400px;
  height: 100px;  
  overflow-y: scroll;   
} */

/* Hide scrollbar in Safari, Chrome, and Opera 
.codeblock::-webkit-scrollbar {
    display: none;
}*/

/* Hide scrollbar in Edge and Firefox */
/*.codeblock {
  -ms-overflow-style: none;  
  scrollbar-width: none;  
} */

pre.pre {
	margin-left: 2em !important;
}

.sma-topic-body {
	margin-left: 15px;
}

#table12 .Intro1Only ul {
	margin-left: 25px;
}

.datadesc {
	margin-left: 0px;
}

div.nodataconditions .datadesc {
	margin-left: 0;
}

.itemsprite {
	border-top: 1px solid #e2e4e3;
	width: 95%;
	/* height: 10px; */
	margin: 20px 0px;
	display: block;
}

/* Removes duplicate equations in print Fire and Edge */
[aria-hidden="true"] {
	display: none;
}

/* 24 July - HZH - New styles for animated GIFs */
.ff-overlay {
	width: 37px !important;
	background-image: url("FrameImages/startButton.png") !important;
	background-color: transparent !important;
}

/*HDW Updated for automatic image styles */
*.ff-container:has(img[border='1']) {
	background-color: #FFFFFF;
	border: solid 1px #77797C;
	/* padding: 4px; */
	border-radius: 4px;
}

/* HZH - Added rules for borders 2023-11-07 */

.ff-container .ff-canvas {
	padding: 4px;
	border: 0px;
	/* top: 4px !important; */
	/* left: 4px !important; */
	/* width: calc(100% - 16px) !important; */
	/* HZH - Test for manual width setting, 2024-12-03 */
}
.advancedFeaturesIllustration .ff-container .ff-canvas {
	top: 0 !important;
	left: 0 !important;
	width: calc(100% - 8px) !important;
}
.ff-container:has(img[border='1']) .ff-canvas {
	border: none;
	/*top: 0 !important; */
	/* left: 0 !important; */
	/* width: calc(100% - 8px) !important; */
}
.overview-body .ff-container:has(img[border='1']) {
	border: none;
}
.overview-body .ff-container:has(img[border='1']) .ff-canvas {
	border: none;
	object-fit: contain;
    aspect-ratio: 16 / 9;
    width: calc(100% - 8px) !important;
}

.ff-container.ff-responsive {
	width: unset !important;
	cursor: pointer !important;
}

.ff-container img {
	margin-top: 0px;
}

/*HDW Removed to use automatic global image border styles */
/*.wn .ff-image {
	 background-color: #FFFFFF;         
     border: solid 1px #77797C;
     padding: 4px;
     border-radius: 4px;
}*/

.table {
	width: unset;
}

td.align-right {
	text-align: right;
}

/*HDW image spacing in tables and prereq */
td p+br+img.image:not([src*="Icons"]) {
	margin-top: -20px;
}

div.taskbody>div.p>img.image:not([src*="Icons"]) {
	margin-top: -10px;
	margin-bottom: -10px;
}

.ua-icon {
	color: #005686;
}

/* HZH - Added rule for break images 2023-11-14 */

div.taskbody>div.p>img.image.break {
	margin-top: 5px;
	margin-bottom: unset;
}

/* Overview */
.overview .shortdesc {
	padding: 20px;
	background-color: #F4F5F6;
	border: solid 1px #E2E4E3;
	border-radius: 4px;
	margin-bottom: 20px;
}


/*img.image[border='1'] {
background-color:	#FFFFFF;	
border: solid 1px #77797C;
padding: 4px;
border-radius: 4px;
}*/

img.image:not(.animated)[border='1'],
img.image[usemap] {
	background-color: #FFFFFF;
	border: solid 1px #77797C;
	padding: 4px;
	border-radius: 4px;
}
.overview-body .featuresWrapper img.image:not(.animated)[border='1'] {
	border: none;
	/* margin: 1.5px; */
	margin-top: 1.5px;
}
.overview-body .featuresWrapper img[border='1'] {
	width: 100% !important;
}
.overview-body .featuresWrapper .ff-container:has(img[border='1']) {
	width: 100%;
}

img.image.animated {
	border: 0px #FFFFFF;
	padding: 4px;
}

image:not([border='1']) {
	border: 0px #FFFFFF;
}

/***************************************/
/*Christophe's CSS for overview */
/***************************************/
/* Was .main_section */

#modal_background {
	background: #3d3d3de0;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	cursor: pointer;
	display: none;
}
body[style*="color: rgb(255, 255, 255);"] #modal_background {
	background-color: #ffffff !important;
}
body[style*="background-color: rgb(0, 0, 0);"] #modal_background {
	background-color: #000000 !important;
}

#modal_background::before {
	font-family: '3ds-fonticon';
	content: '\e134';
	font-size: 28px;
	color: white;
	top: 20px;
	left: calc(100% - 60px);
	position: sticky;
	display: block;
	width: 38px;
	height: 38px;
	background: #00000061;
	border-radius: 5px;
	text-align: center;
	line-height: 38px;
	z-index: 100;
}

#modal_container {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	height: 100vh;
	padding: 40px;
	margin-top: -40px;
	box-sizing: border-box;
	position: sticky;
	top: 0;
}

#modal_container img {
	height: auto;
	position: sticky;
	top: 0%;
	max-width: 95%;
	max-height: 100%;
}


html:has(.DocHeader-UAPanel):has(.overview-body) {
  overflow-x: hidden;
}

.overview-body {
	container-type: inline-size;
	/* Tracks the container's width */
}

div.overview-body div.section {
	width: 100%;
	padding: 50px;
	box-sizing: border-box;
}
body:has(.DocHeader-UAPanel) div.overview-body div.section {
	width: calc(100% - 5px);
}
div.overview-body div.section:first-child {
	padding-top: 20px;
}

/* Was .section_title */
div.overview-body div.section h2 {
	font-size: 1.6em;
	color: #707070;
	font-weight: bold;
	margin-bottom: 40px;
	scroll-margin-top: 90px;
	margin-left: 0px;
	padding-top: 0px;
	margin-top: 0px;
}

div.overview-body div.section:nth-child(even) {
	background-color: #edf3f9;
	border-radius: 10px;
}

div.overview-body div.section img {
	border: solid 0px !important;
}

.popping_image {
	cursor: pointer;
}

/************ appDescription and relatedApps ************/

.appDescription {
	display: flex;
	flex-direction: row;
	flex: 1 1 auto;
}

.appDescriptionIllustration {
	max-width: 40%;
	justify-content: center;
	display: flex;
	background: #F1F1F1;
}

.appDescriptionIllustration img {
	width: 100%;
	margin: auto !important;
}

.appDescription-cards {
	padding-left: 40px;
}

.cardTitle {
	font-weight: bold;
	font-size: 1.1em;
}

.relatedApps-card {
	margin-top: 20px;
}

.overview-body br {
	display: none;
}

/*********** Workflow and Feature *****/

.workflow *.ff-container:has(img[border='1']) {
	background-color: #FFFFFF00 !important;
}

.workflow *.ff-container:has(img[border='1']) {
	padding: 0px !important;
}

.workflow img.image:not(.animated)[border='1'],
img.image[usemap] {
	padding: 2px;
}

.workflow .ff-image,
.workflow .ff-container {
	opacity: 1 !important;
	border: none !important;
}

.workflow-cards {
	/* display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
    row-gap: 20px;*/
	display: grid;
	grid-template-columns: 70px 1fr 0.5fr 0.5fr 1fr 70px;
	gap: 0;
}

.tiles_mode .workflow-cards {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 25px;
}

.workflow-cards::after {
	content: "";
	flex: auto;
}

.featuresWrapper {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 25px;
}

/* Was .using_card */
.card,
.features-cards {
	/*background:white;
    box-shadow: #0000001c 0px 1px 4px 2px;
    border-radius: 5px;*/
	display: flex;
	flex-direction: column;
	padding: 0 3px;
}

/* Newly copied */
.features-cards {
	background: white !important;
	box-shadow: #0000001c 0px 1px 4px 2px;
	border-radius: 5px;
	padding: 0;
	min-height: 300px;
	height: auto !important;
	grid-area: auto;
}

/* was .card_illustration*/
.featureIllustration {
	flex: 0 0 auto;
	cursor: pointer;
	position: relative;
	aspect-ratio: 16 / 9;
	max-width: 100%;
	text-align: center;
	box-shadow: none;
	height: auto;
	width: 100%;
}

.featureIllustration img {
	width: 100%;
	border-radius: 5px !important;
	position: relative !important;
	object-fit: contain;
	aspect-ratio: 16 / 9;
	background: white;
	padding: 2.4px !important;
	box-sizing: border-box;
}

/* was .card_content*/
.featureDescription {
	/*height: calc(50% - 15px); */
	width: 100%;
	padding: 20px;
	padding-top: 5px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	text-align: left;
}

.tiles_mode .edge_card {
	display: none;
}

.card:not(.edge_card) {
	background: linear-gradient(#d1d9e1, #d1d9e1) no-repeat center/102% 16px;
	height: 350px;
}

/*.using_card:not(.edge_card):first-child, .using_card:not(.edge_card):last-child{*/
.card:not(.edge_card):last-child {
	/*background: linear-gradient(to left, #d1d9e100 5%, #d1d9e1 5%) no-repeat center/100% 16px;*/
}

.card:not(.edge_card):first-child {
	background: linear-gradient(to right, #d1d9e100 0%, #d1d9e1b5 20%, #d1d9e1) no-repeat center/102% 16px;
}

.left_workflow_arrow .worflow_number_container:before {
	right: unset !important;
	left: -6px !important;
	transform: rotate(135deg) !important;
	-webkit-transform: rotate(135deg) !important;
}

.left_workflow_arrow {
	background: linear-gradient(to right, #d1d9e100 5%, #d1d9e1 5%) no-repeat center/100% 16px;
}

.workflowIllustration {
	flex: 0 0 auto;
	/* width: 100%;*/
	height: calc(50% - 15px);
	/* cursor:pointer; */
	position: relative;
	aspect-ratio: 16/9;
	max-width: 100%;
	text-align: center;
	background-color: transparent !important;
}

.tiles_mode .workflowIllustration {
	aspect-ratio: unset;
	height: auto;
}

.tiles_mode .workflowIllustration img {
	box-shadow: none;
	height: auto;
	width: 100%;
}

.workflowIllustration img {
	max-width: 100%;
	height: 150px;
	border-radius: 5px;
	position: relative !important;
	/*object-fit: contain;*/
	aspect-ratio: 16/9;
	box-shadow: #00000021 0 0 3px 2px;
	background: white;
	padding: 3px !important;
	box-sizing: border-box;
}

.workflowIllustration .ff-container .ff-canvas {
	width: calc(100% - 8px) !important;
    height: calc(100% - 8px) !important;
}

.worflow_number_container {
	display: flex;
	justify-content: center;
	position: relative;
	background-color: transparent !important;
}

.tiles_mode .worflow_number_container {
	display: none;
}

/*
  .using_card:first-child .worflow_number_container:before{
    content: '';
    background: #d1d9e1;
    left: 0;
    position: absolute;
    height: 25px;
    width: 25px;
    border-radius: 50%;
    border: solid 3px #edf3f9;
  }*/

.card:last-child .worflow_number_container:before {
	content: '';
	right: -6px;
	left: unset;
	top: 0px;
	position: absolute;
	border: solid #d1d9e1;
	border-width: 0 10px 10px 0;
	display: inline-block;
	padding: 10px;
	transform: rotate(315deg);
	-webkit-transform: rotate(315deg);
}

/* Worflow is used in the javaScript. Best way to foil a maintenance programmer */
.worflow_number {
	width: 30px;
	height: 30px;
	background: #edf3f9;
	border-radius: 50%;
	border: 3px solid #d1d9e1;
	box-sizing: border-box;
	color: #62676d;
	font-size: 16px;
	font-weight: bold;
	padding: 1px;
	text-align: center;
}
body[style*="background-color: rgb(0, 0, 0);"] .worflow_number {
	background-color: #000000 !important;
}

.arrow::before {
	display: none;
}
body[style*="background-color: rgb(0, 0, 0);"] .arrow::before {
	color: #000000 !important;
}
body[style*="color: rgb(255, 255, 255);"] .arrow::before {
	color: #ffffff !important;
}

.card.card_1 .arrow::before,
.card.card_2 .arrow::before,
.card.card_7 .arrow::before,
.card.card_8 .arrow::before {
	font-family: 'DSFontIcon';
	content: '\e141';
	font-size: 19px;
	color: #edf3f9;
	font-weight: bold;
	position: absolute;
	right: -8px;
	/*top: 2px;*/
	top: 1.5px;
	display: block;
}

.card.card_5 .arrow::before,
.card.card_6 .arrow::before {
	font-family: 'DSFontIcon';
	content: '\e140';
	font-size: 19px;
	color: #edf3f9;
	font-weight: bold;
	position: absolute;
	right: -8px;
	/*top: 2px;*/
	top: 1.5px;
	display: block;
}

.card:last-child .arrow::before {
	display: none;
}

.edge_card.right_edge .right_turn::before {
	font-family: 'DSFontIcon';
	content: '\e139';
	font-size: 19px;
	color: #edf3f9;
	font-weight: bold;
	position: absolute;
	/*right: -17px;*/
	right: -17.5px;
	top: calc(50% - 9px);
}
body[style*="background-color: rgb(0, 0, 0);"] .edge_card.right_edge .right_turn::before {
	color: #000000 !important;
}
body[style*="color: rgb(255, 255, 255);"] .edge_card.right_edge .right_turn::before {
	color: #ffffff !important;
}

.edge_card.left_edge .left_turn::before {
	font-family: 'DSFontIcon';
	content: '\e139';
	font-size: 19px;
	color: #edf3f9;
	font-weight: bold;
	position: absolute;
	/*left: -18px;*/
	left: -17.5px;
	top: calc(50% - 9px);
}
body[style*="background-color: rgb(0, 0, 0);"] .edge_card.left_edge .left_turn::before {
	color: #000000 !important;
}
body[style*="color: rgb(255, 255, 255);"] .edge_card.left_edge .left_turn::before {
	color: #ffffff !important;
}

.card_1 {
	grid-area: 1 / 2 / 1 / 3;
}

.card_2 {
	grid-area: 1 / 3 / 1 / 5;
}

.card_3 {
	grid-area: 1 / 5 / 1 / 6;
}

.card_4 {
	grid-area: 2 / 5 / 2 / 6;
}

.card_5 {
	grid-area: 2 / 3 / 2 / 5;
}

.card_6 {
	grid-area: 2 / 2 / 2 / 3;
}

.card_7 {
	grid-area: 3 / 2 / 3 / 3;
}

.card_8 {
	grid-area: 3 / 3 / 3 / 5;
}

.card_9 {
	grid-area: 3 / 5 / 3 / 6;
}

.right_edge {
	grid-area: 1 / 6 / 2 / 7;
	grid-row: 1 / 3;
	position: relative;
}

.left_edge {
	grid-area: 2 / 1 / 3 / 2;
	grid-row: 2 / 4;
	position: relative;
}


.five_cards .card_4 {
	grid-area: 2 / 4 / 2 / 6;
}

.five_cards .card_5 {
	grid-area: 2 / 2 / 2 / 4;
}

.four_cards .card_1 {
	grid-area: 1 / 2 / 1 / 4;
}

.four_cards .card_2 {
	grid-area: 1 / 4 / 1 / 6;
}

.four_cards .card_3 {
	grid-area: 2 / 4 / 2 / 6;
}

.four_cards .card_4 {
	grid-area: 2 / 2 / 2 / 4;
}

.edge_card div {
	height: calc(50% - 16px);
	width: 40px;
	border-style: solid;
	background: linear-gradient(#edf3f9, #edf3f9) padding-box,
		linear-gradient(to right, #d1d9e1 50%, #d1d9e1 50%) border-box;
	position: absolute;
	top: calc(25% - 8px);
}
body[style*="color: rgb(255, 255, 255);"] .edge_card div {
	background: linear-gradient(#ffffff, #ffffff) padding-box,
		linear-gradient(to right, #d1d9e1 50%, #d1d9e1 50%) border-box;
}
body[style*="background-color: rgb(0, 0, 0);"] .edge_card div {
	background: linear-gradient(#000000, #000000) padding-box,
		linear-gradient(to right, #d1d9e1 50%, #d1d9e1 50%) border-box;
}

.right_turn {
	border-top-left-radius: 0;
	border-top-right-radius: 3em;
	border-bottom-right-radius: 3em;
	border-bottom-left-radius: 0;
	border: 16px solid transparent;
	border-left-width: 0px;
	left: 0;
}

.left_turn {
	border-top-left-radius: 3em;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 3em;
	border: 16px solid transparent;
	border-right-width: 0px;
	right: 0;
}


.expand_gif:before {
	font-family: 'DSFontIcon';
	content: '\e133';
	position: absolute;
	top: 3px;
	right: 3px;
	z-index: 10;
	color: white;
	text-shadow: #000000 0px 0 3px;
	width: 32px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	background: #3d3d3d59;
	border-radius: 5px;
}

div.workflowDescription {
	/*height: calc(50% - 15px); */
	/*Add this to constraint the height of the card*/
	width: 100%;
	padding: 20px;
	padding-top: 5px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	text-align: center;
	background-color: transparent !important;
}

.tiles_mode div.workflowDescription {
	padding: 20px;
	text-align: left;
}

.card-title {
	color: #3d3d3d;
	font-weight: bold;
	font-size: 1.3em;
	flex: 0 0 auto;
	position: relative;
}

/* May need to add another tag around the concise element output to include following xref */
.concise {
	margin-top: 10px;
	flex: 1 1 auto;
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box !important;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	white-space: normal;
}

.tiles_mode .concise {
	text-overflow: unset;
	overflow: visible;
	-webkit-line-clamp: unset;
}


.ext_link {
	cursor: pointer;
}

.ext_link:hover {
	text-decoration: underline;
}

.ext_link::after {
	font-family: 'DSFontIcon';
	content: '\e132';
	color: #B4B6Ba;
	font-weight: normal;
	font-size: 12px;
	margin-bottom: 3px;
	position: absolute;
	top: 5px;
	padding-left: 8px;
}


/************interface****************/

div.interfaceIllustration {
	width: 100%;
	text-align: center;
}

div.interfaceIllustration img {
	width: 80%;
}

.interface-cards {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px 3%;
	margin-top: 40px;
}

dl.interface-card dt {
	display: flex;
	flex-direction: row;
	/* font-size: 1.5em; */
	font-size: 1.35em;
	font-weight: bold;
	line-height: 32px;
}

dl.interface-card dt span.ua-icon {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	text-align: center;
	flex: 0 0 auto;
}

.title_text {
	padding-left: 15px;
	color: #707070;
}

dl.interface-card dd {
	margin-top: 25px;
}

/******************Advanced Features*****************/

.advancedFeatures img {
	aspect-ratio: 16 / 9;
	width: 100% !important;
	object-fit: contain;
}

.advancedFeatures img.image.animated {
	padding: 0px;
}

.advancedFeatures *.ff-container:has(img[border='1']) {
	background-color: #FFFFFF;
	border: solid 0px #77797C;
	padding: 4px;
	border-radius: 4px;
	box-shadow: 0px 0px 6px 3px #00000038;
}

div.advancedFeatures-card {
	display: flex;
	flex-flow: row;
	width: 100%;
	gap: 20px;
}

div.advancedFeatures-cards {
	width: 95%;
	margin: auto;
}

div.advancedFeatures-card:not(:last-child) {
	margin-bottom: 60px;
}

div.advancedFeaturesIllustration {
	flex: 0 0 auto;
	aspect-ratio: 16/9;
	width: 40%;
    max-width: 960px;
	box-sizing: border-box;
	padding-right: 10px;
	padding-left: 0;
}

/* Image should enlarge when clicked: not yet implemented. See javaScript */
div.advancedFeaturesIllustration img.image:not(.animated)[border='1'] {
	flex: 0 1 auto;
	aspect-ratio: 16/9;
	width: 100%;
	object-fit: contain;
	border-radius: 6px;
	box-shadow: 0px 0px 6px 3px #00000038;
}

div.advancedFeatures-title {
	font-weight: bold;
	/* font-size: 1.5em; */
	/* font-size: 1.35em; */
	font-size: 1.3em;
}

div.advancedFeaturesCard-contents ul {
	margin-left: 10px;
}

.list_for_UI {
	list-style: none;
	counter-reset: my-awesome-counter;
	margin: 0;
	padding: 0;
	padding-left: 40px;
}

.list_for_UI li {
	margin: 0 0 1rem 0;
	counter-increment: my-awesome-counter;
	position: relative;
	line-height: 2;
}

.list_for_UI li::before {
	content: counter(my-awesome-counter);
	color: #ffffff;
	font-size: 1.5rem;
	font-weight: bold;
	position: absolute;
	--size: 32px;
	left: calc(-1 * var(--size) - 10px);
	line-height: var(--size);
	width: var(--size);
	height: var(--size);
	top: 0;
	background: #368EC4;
	border-radius: 50%;
	text-align: center;
}

.overview-body .ordered_list {
	list-style-type: decimal;
}

/******************Terminology**************/

.terminology-cards {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px 3%;
	margin-top: 40px;
}

.terminology-card {
	background: white;
	box-shadow: #0000001c 0px 1px 4px 2px;
	border-radius: 5px;
	padding: 20px 15px;
}
body[style*="background-color: rgb(0, 0, 0);"] .terminology-card {
	border: solid 1px #FFFFFF;
}

div.terminology-card>.dt {
	display: flex;
	flex-direction: row;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1.2em;
}

/*  .title_text{
    padding-left:15px;
    color:#707070;   
  } */

div.terminology-card>.dd {
	margin-top: 15px;
	margin-left: 0px;
	margin-inline-start: 0px;
}

/* Media declarations for Overview */

/********************************************/



@container (max-width: 1600px) {

	.workflow-cards {
		/*grid-template-columns: repeat(3, 1fr);*/
		gap: 0;
	}

	div.overview-body div.section:nth-child(odd) {
		border-radius: 0px;
	}

	.featuresWrapper {
		/*grid-template-columns: repeat(3, 1fr);*/
		/* gap: 0; */
	}

}

@container (max-width: 1400px) {

	.featuresWrapper {
		/*grid-template-columns: repeat(3, 1fr);*/
		/* gap: 0; */
	}

	.workflow-cards {
		gap: 0;
	}

	div.advancedFeatures-cards {
		/*width: 90%;*/
	}

}


@container (max-width: 1200px) {
	/* #using_container */

	.featuresWrapper {
		grid-template-columns: 1fr 1fr;
		gap: 25px;
	}

	.workflow-cards {
		grid-template-columns: 70px 1fr 0.5fr 0.5fr 1fr 70px;
		gap: 0;
	}

	.tiles_mode .workflow-cards {
		grid-template-columns: 1fr 1fr;
		gap: 25px;
	}

	#header_container {
		padding: 0 40px;
	}

	div.overview-body div.section {
		padding: 40px;
	}



	.arrow::before {
		font-family: 'DSFontIcon';
		font-size: 19px;
		color: #edf3f9;
		font-weight: bold;
		position: absolute;
		right: -8px;
		/*top: 2px;*/
		top: 1.5px;
		display: none !important;
	}

	.card.card_1 .arrow::before,
	.card.card_5 .arrow::before {
		content: '\e141';
		display: block !important;
	}

	.card.card_4 .arrow::before,
	.card.card_8 .arrow::before {
		content: '\e140';
		display: block !important;
	}

	.card_1 {
		grid-area: 1 / 2 / 1 / 4;
	}

	.card_2 {
		grid-area: 1 / 4 / 1 / 6;
	}

	.card_3 {
		grid-area: 2 / 4 / 2 / 6;
	}

	.card_4 {
		grid-area: 2 / 2 / 2 / 4;
	}

	.card_5 {
		grid-area: 3 / 2 / 3 / 4;
	}

	.card_6 {
		grid-area: 3 / 4 / 3 / 6;
	}

	.card_7 {
		grid-area: 4 / 4 / 4 / 6;
	}

	.card_8 {
		grid-area: 4 / 2 / 4 / 4;
	}

	.card_9 {
		grid-area: 5 / 2 / 5 / 4;
	}

	.three_cards .card_3 {
		grid-area: 2 / 3 / 2 / 6;
	}

	.right_edge {
		grid-area: 1 / 6 / 2 / 7;
		grid-row: 1 / 3;
		position: relative;
	}

	.right_edge:nth-child(9) {
		grid-area: 3 / 6 / 4 / 7;
		grid-row: 3 / 5;
		position: relative;
	}

	.left_edge {
		grid-area: 2 / 1 / 3 / 1;
		grid-row: 2 / 4;
		position: relative;
	}

	.left_edge:nth-child(12) {
		grid-area: 4 / 1 / 5 / 1;
		grid-row: 4 / 6;
		position: relative;
	}

	div.advancedFeatures-cards {
		/*width: 100%;*/
	}

	.card:last-child .worflow_number_container:before,
	.left_workflow_arrow .worflow_number_container:before {
		right: unset !important;
		left: -6px !important;
		transform: rotate(135deg) !important;
		-webkit-transform: rotate(135deg) !important;
	}
}

@container (max-width: 1024px) {

	.workflow-cards {
		/*grid-template-columns: repeat(2, 1fr);*/
	}

	.interface-cards,
	.terminology-cards {
		grid-template-columns: repeat(2, 1fr);
		gap: 30px 3%;
	}

	.interfaceIllustration img {
		width: 100%;

	}

	#modal_container {
		padding: 10px;
	}
}


@container (min-width: 769px) {
	div.advancedFeatures-cards {
		width: 100%;
		margin: 0;
	}
	div.advancedFeatures-card {
		width: 100%;
	}
	div.advancedFeatures-card:nth-child(odd) {
		flex-direction: row-reverse;
		width: 100%;
	}

	div.advancedFeatures-card:nth-child(odd) div.advancedFeaturesIllustration {
		padding-right: 0px;
		padding-left: 10px;
	}
	div.advancedFeatures-card:nth-child(odd) div.advancedFeatures-title {
		text-align: end;
	}
	div.overview-body div.section h2 {
		margin-bottom: 100px;
	}
	div.advancedFeatures-card:not(:last-child) {
		margin-bottom: 80px;
	}
	div.advancedFeaturesDescription {
		text-align: justify;
	}
	div.advancedFeatures-card:nth-child(odd) .div.advancedFeatures-title {
    	text-align: end;
	}
}

@container (min-width: 880px) {
	div.advancedFeatures-cards {
		width: 95%;
		margin: auto;
	}
	div.advancedFeatures-card {
		margin-right: 0;
		margin-left: 14%;
		width: 100%;
	}
	div.advancedFeatures-card:nth-child(odd) {
		margin-left: -14%;
	}
	div.advancedFeaturesDescription {
		max-width: 46%;
	}
}

@container (min-width: 1200px) {
	.left_workflow_arrow .worflow_number_container:before {
		right: -6px !important;
		left: unset !important;
		transform: rotate(315deg) !important;
		-webkit-transform: rotate(315deg) !important;
	}
}

@container (min-width: 1700px) {
	.card:last-child .worflow_number_container:before {
		right: 20px;
	}
}

@container (min-width: 2200px) {
	.card:last-child .worflow_number_container:before {
		right: 28px;
	}
	/* div.advancedFeatures-card responsive margin */
	div.advancedFeatures-card:nth-child(even) {
        margin-left: 24%;
    }
	div.advancedFeatures-card:nth-child(odd) {
        margin-left: -24%;
    }
	/*  */
}

@container (min-width: 2100px) {
	div.advancedFeatures-card:nth-child(even) {
        margin-left: 20%;
    }
	div.advancedFeatures-card:nth-child(odd) {
        margin-left: -20%;
    }
	div.advancedFeaturesDescription[style*="font-size"] {
		max-width: 40%;
	}
}
@container (min-width: 2700px) {
	div.advancedFeatures-card:nth-child(even) {
        margin-left: 30%;
    }
	div.advancedFeatures-card:nth-child(odd) {
        margin-left: -30%;
    }
	div.advancedFeaturesDescription[style*="font-size"] {
		max-width: 34%;
	}
}
@container (min-width: 3200px) {
	div.advancedFeatures-card:nth-child(even) {
        margin-left: 45%;
    }
	div.advancedFeatures-card:nth-child(odd) {
        margin-left: -45%;
    }
	div.advancedFeaturesDescription[style*="font-size"] {
		max-width: 27%;
	}
}
@container (min-width: 3800px) {
	div.advancedFeatures-card:nth-child(even) {
        margin-left: 54%;
    }
	div.advancedFeatures-card:nth-child(odd) {
        margin-left: -54%;
    }
	div.advancedFeaturesDescription[style*="font-size"] {
		max-width: 20%;
	}
}


@container (768px < width < 1000px) {
	.card:last-child .worflow_number_container:before {
		left: -6px !important;
	}
}

@container (max-width: 768px) {

	div.overview-body div.section {
		padding: 25px 15px 40px 15px;
	}
	div.overview-body div.section h2 {
		margin-bottom: 20px;
    }
	.terminology-cards {
		margin-top: 0;
	}
	.interface-cards, .terminology-cards
	{
        grid-template-columns: repeat(1, 1fr);
        gap: 25px 3%;
    }
	.featuresWrapper {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.workflow-cards {
		grid-template-columns: repeat(1, 1fr);
		gap: 0px 2%;
	}

	.tiles_mode .workflow-cards {
		grid-template-columns: 1fr;
		gap: 15px;
	}

	.interface-cards {
		grid-template-columns: repeat(1, 1fr) !important;
		gap: 30px 3%;
	}
	
	div.advancedFeatures-cards {
		width: 100%;
	}
	
	div.advancedFeatures-card {
		gap: 28px !important;
	}

	.card {
		grid-area: auto;
		position: relative;
	}

	.card:not(.edge_card) {
		background: linear-gradient(#d1d9e1, #d1d9e1) no-repeat 13px/14px 100%;
		height: 300px;
	}

	.card:not(.edge_card):last-child {
		background: linear-gradient(to top, #d1d9e100 10%, #d1d9e1 10%) no-repeat 13px/14px 100%;
	}

	.card:not(.edge_card):first-child {
		background: linear-gradient(to bottom, #d1d9e100 0%, #d1d9e1b5 20%, #d1d9e1) no-repeat 13px/14px 100%;
	}

	.worflow_number_container {
		position: absolute;
		left: 5px;
		top: 22%;
	}

	.card:last-child .worflow_number_container:before {
		right: 0 !important;
		left: unset !important;
		/*top: 108px;*/
		top: 180px;
		position: absolute;
		border: solid #d1d9e1;
		border-width: 0 10px 10px 0;
		display: inline-block;
		padding: 10px;
		transform: rotate(45deg) !important;
		-webkit-transform: rotate(45deg) !important;
	}

	.right {
		display: none;

	}

	div.workflowIllustration {
		flex: 0 0 auto;
		height: calc(50% + 20px);
	}

	div.workflowDescription {
		padding: 0px 35px;
	}

	#overview_container {
		flex-direction: column;
	}

	#main_illustration {
		max-width: 100%;
	}

	#overview_content {
		padding-top: 20px;
	}

	#page_header {
		flex-direction: column;
		padding: 15px 15px 15px 15px;
	}

	/* 
    .sticky{
      position: fixed;
      top: 0;
      width: 100%;
      padding-top:0px !important;
      box-shadow: #0000003b 0px 1px 4px 0px;
    }
    
    .stickypage{
      padding-top:116px !important;
      }
 */

	#header_tabs_container {
		justify-content: flex-start;
	}

	div.overview-body div.section h2 {
		scroll-margin-top: 110px;
	}

	div.advancedFeatures-card {
		flex-flow: column;
		padding-top: 45px;
		position: relative;
	}

	div.advancedFeatures-card:after {
		flex-flow: column;
	}

	div.advancedFeaturesIllustration {
		width: 100%;
		padding: 0 !important;
	}

	div.advancedFeatures-title {
		position: absolute;
		top: 0;
	}

	div.advancedFeatures-card:nth-child(even) {
		flex-direction: column;
	}

	div.advancedFeatures-card {
		gap: 15px;
	}
	
	div.advancedFeatures-card:nth-child(even) .advancedFeaturesIllustration {
		padding: 0;
	}
	.advancedFeaturesIllustration img.popping_image:not(.animated):not([src$=".gif"]) {
		width: calc(100% - 8px) !important;
	}
}
@container (max-width: 650px) {	
	
	/************ appDescription and relatedApps ************/

	.appDescription {
		flex-direction: column;
	}
	.appDescriptionIllustration {
		margin-bottom: 25px;
		max-width: calc(100% - 15px);
		img.popping_image {
			width: 100% !important;
		}
	}
}

/* New Thumbnail Behavior */
div.thumbnailContainer {
	position: relative;
	width: fit-content;
}

div.thumbnailContainer a>img.overlay {
	position: absolute;
	top: 5px;
	/*left:5px;*/
	right: 5px;
	background: #FFFFFF;
	padding: 5px;
	width: 14px;
	border: solid 1px #77797C;
	border-radius: 4px;
}

div.thumbnailContainer a>img.thumbnail {
	z-index: 2;
	background-color: #FFFFFF;
	border: solid 1px #77797C;
	border-radius: 4px;
	line-height: normal;
	margin: auto;
	padding: 4px;

}

div.thumbnailContainer a>img.thumbnail:hover {
	opacity: 0.33;
	filter: alpha(opacity=33);
	/* explorer */
}


/* @media only screen and (max-width: 480px) { 
  .header_tab{
    margin:auto;
    padding:0px;
  }

  .overview_shortdesc {
    padding: 15px;
  }

  #modal_container {
    padding: 5px;
}

 } */

@container (max-width: 320px) {}

/***************************************/
