/*<meta />*/

:root
{
	--mainfontSize: 16pt;
	--textff: 'OpenSans Regular';
	--headerff: 'Lato Black';
}

@font-face 
{
	font-family: 'Lato Black';
	src: url(../Fonts/Lato-Black.ttf);
}

@font-face 
{
	font-family: 'OpenSans Regular';
	src: url(../Fonts/OpenSans-Regular.ttf);
}

p
{
	margin-top: 10pt;
	margin-bottom: 2pt;
	font-size: var(--mainfontSize);
	margin-bottom: 0pt;
	font-family: var(--textff);
	text-align: left;
}

ol
{
	font-family: var(--textff);
	font-size: var(--mainfontSize);
	margin-bottom: 0pt;
	margin-top: 0pt;
	margin-left: 0pt;
	margin: 0;
}

ul
{
	font-family: var(--textff);
	font-size: var(--mainfontSize);
	margin-bottom: 0pt;
	margin-top: 5pt;
	margin-left: 0pt;
}

li
{
	font-family: var(--textff);
	font-size: var(--mainfontSize);
	word-wrap: break-word;
	margin-bottom: 0pt;
	margin-top: 0pt;
	margin-left: 0pt;
}

td
{
	margin-top: 10pt;
	font-family: var(--textff);
	font-size: var(--mainfontSize);
	vertical-align: top;
}

a
{
	word-wrap: break-word;
}

p.Title
{
	page-break-after: avoid;
	page-break-inside: avoid;
	margin-top: 24pt;
	margin-bottom: 6pt;
	color: #12122D;
	font-size: 36pt;
	font-family: var(--headerff);
	font-weight: bolder;
	padding-bottom: 1em;
}

h1.title
{
	margin-top: 24pt;
	margin-bottom: 6pt;
	color: #12122D;
	font-size: 36pt;
	font-family: var(--headerff);
	font-weight: bolder;
	padding-bottom: 1em;
}

h1.title > a
{
	color: #12122D;
	font-weight: bolder;
	font-family: var(--headerff);
}

h1.tutorial
{
	color: #005AAA;
	border-top: solid 2px #000000;
	border-top-width: 1px;
	padding-top: 2em;
	font-size: 24pt;
	font-family: var(--headerff);
}

h2.tutorial
{
	color: #54C9EF;
	font-size: 18pt;
	font-family: var(--headerff);
}

h4.tutorial
{
	font-weight: normal;
	color: #005AAA;
	text-decoration: none;
	text-transform: none;
	font-size: var(--mainfontSize);
	font-family: var(--textff);
	margin-top: 0;
	margin-bottom: 0;
	margin: 0;
}

h5.tutorial
{
	color: #12122D;
	font-family: var(--textff);
	font-size: var(--mainfontSize);
	font-weight: bold;
	margin-bottom: 10pt;
	margin: 0;
	margin-top: 10pt;
}

h6.tutorial
{
	font-weight: normal;
	font-size: var(--mainfontSize);
	font-family: var(--textff);
}

td.tutorials
{
	margin-top: 10pt;
	font-size: var(--mainfontSize);
	vertical-align: top;
	border-top-style: none;
	border-left-style: none;
	border-bottom-style: none;
	border-right-style: none;
	background-color: #F3F3F3;
	padding-top: 5pt;
	padding-left: 5pt;
	padding-bottom: 5pt;
	padding-right: 5pt;
	font-family: var(--textff);
	display: table-cell;
}

table
{
	border-spacing: 0px 20px;
}

a
{
	color: #005aaa;
	text-decoration: none;
}

td.download_button
{
	color: #ffffff;
	font-weight: bold;
	background-color: #005aaa;
	height: 40px;
	text-align: center;
	vertical-align: middle;
	border-radius: 25px;
	padding-top: 0pt;
	padding-left: 30pt;
	padding-bottom: 10pt;
	padding-right: 30pt;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.16), 0 6px 12px rgba(0, 0, 0, 0.23);
}

td.download_button:hover
{
	transform: scale(1.05);
}

p.download_button
{
	font-size: var(--mainfontSize);
	margin-bottom: 0pt;
	font-family: var(--textff);
	color: #ffffff;
}

h5.tutorial_conclusion
{
	color: #12122D;
	font-family: var(--textff);
	font-size: var(--mainfontSize);
	font-weight: bold;
	margin-bottom: 1.5em;
	margin: 0;
}

ol.toc
{
	font-family: var(--textff);
	font-size: var(--mainfontSize);
	margin-bottom: 0pt;
	margin-top: 0pt;
	margin: 0;
	padding-left: 0px;
	list-style-type: decimal;
	margin-left: 36pt;
	color: #005aaa;
}

table.abstract
{
	border-spacing: 0px 20px;
	width: 100%;
	background-color: #f3F3F3;
}

td.abstract
{
	margin-top: 10pt;
	font-family: var(--textff);
	font-size: var(--mainfontSize);
	padding: 5pt;
	background-color: #f3F3F3;
}

.img-responsive
{
	max-width: 100%;
	width: auto;
	height: auto;
	mc-thumbnail-max-height: auto;
	mc-thumbnail-max-width: 100%;
	cursor: zoom-in;
	mc-thumbnail: popup;
}

.img-responsive-no-thumbnail
{
	max-width: 100%;
	width: auto;
	height: auto;
}

.StepComment
{
	margin-left: 15px;
	padding-left: 0px;
}

.StepInstruction
{
	margin-bottom: 5px;
	margin-left: 15px;
	padding-left: 0px;
}

div.abstract
{
	background-color: #F3F3F3;
	padding: 5pt;
	margin-bottom: 30pt;
	margin-top: 30pt;
}

div.grey_box
{
	background-color: #F3F3F3;
	padding: 5pt;
	margin-top: 0pt;
	margin-bottom: 0pt;
	border-spacing: 0px 20px;
}

div.grey_box > div > p
{
	word-wrap: break-word;
}

div.tutorial_row	/*This is a custom responsive layout row style (div class) in your stylesheet. To provide your own description for this style: (1) Open the stylesheet; (2) Find and select the div class with this name; and (3) In the Comment field, replace this text with your own. For more information on adding comments to styles, see the online Help.*/
{
	mc-grid-row: true;
	margin-left: auto;
	margin-right: auto;
	border-spacing: 0px 20px;
}

div.tutorial_row::before
{
	content: ' ';
	display: table;
}

div.tutorial_row::after
{
	content: ' ';
	display: table;
	clear: both;
}

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

div.tutorial_row > div:nth-child(1)
{
	width: 35%;
	margin-left: 0%;
}

div.tutorial_row > div:nth-child(2)
{
	width: 62%;
	margin-left: 3%;
}

div.further_row	/*This is a custom responsive layout row style (div class) in your stylesheet. To provide your own description for this style: (1) Open the stylesheet; (2) Find and select the div class with this name; and (3) In the Comment field, replace this text with your own. For more information on adding comments to styles, see the online Help.*/
{
	mc-grid-row: true;
	margin-left: auto;
	margin-right: auto;
	padding-top: 10pt;
}

div.further_row::before
{
	content: ' ';
	display: table;
}

div.further_row::after
{
	content: ' ';
	display: table;
	clear: both;
}

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

div.further_row > div:nth-child(1)
{
	width: 10%;
	margin-left: 0%;
}

div.further_row > div:nth-child(2)
{
	width: 88%;
	margin-left: 2%;
}

img.MCPopupFullImage
{
	cursor: zoom-out;
}

@media only screen and (max-width: 1279px)
{
	div.tutorial_row > div:nth-child(1)
	{
		width: 35%;
		margin-left: 0%;
	}

	div.tutorial_row > div:nth-child(2)
	{
		width: 62%;
		margin-left: 3%;
	}

	div.further_row > div:nth-child(1)
	{
		width: 10%;
		margin-left: 0%;
	}

	div.further_row > div:nth-child(2)
	{
		width: 88%;
		margin-left: 2%;
	}

	div.sidemenu-topics > div:nth-child(1)
	{
		width: 67%;
		margin-left: 0;
		margin-right: 8%;
	}

	div.sidemenu-topics > div:nth-child(2)
	{
		width: 25%;
		margin-left: 0;
	}
}

@media only screen and (max-width: 767px)
{
	div.tutorial_row > div:nth-child(1)
	{
		width: 100%;
		margin-left: 0%;
	}

	div.tutorial_row > div:nth-child(2)
	{
		width: 100%;
		margin-left: 0%;
	}

	div.further_row > div:nth-child(1)
	{
		width: 100%;
		margin-left: 0%;
	}

	div.further_row > div:nth-child(2)
	{
		width: 100%;
		margin-left: 2%;
	}

	div.sidemenu-topics > div:nth-child(1)
	{
		width: 99% !important;
		margin-left: 0;
		margin-right: 0%;
	}

	div.sidemenu-topics > div:nth-child(2)
	{
		width: 1%;
		margin-left: 0;
	}
}

div.download_button
{
	color: #ffffff;
	font-weight: bold;
	background-color: #005aaa;
	height: 40px;
	width: auto;
	text-align: center;
	vertical-align: middle;
	padding-left: 30pt;
	padding-bottom: 10pt;
	padding-right: 30pt;
	border-radius: 30px;
	padding-top: 3pt;
}

img.further_row
{
	width: 56px;
	height: auto;
	padding-top: 2pt;
}

img.introduction
{
	max-width: 50%;
	width: auto;
	height: auto;
	mc-thumbnail-max-height: auto;
	mc-thumbnail-max-width: 100%;
	cursor: zoom-in;
	mc-thumbnail: popup;
}

img.introduction-no-thumbnail
{
	max-width: 50%;
	width: auto;
	height: auto;
}

p.abstract
{
	font-size: var(--mainfontSize);
	margin-bottom: 5pt;
	font-family: var(--textff);
	text-align: left;
	margin-top: 0pt;
}

img.download_button
{
	vertical-align: middle;
}

span.Glossary
{
	text-decoration: underline;
}

table.grey_box_table
{
	border-spacing: 0px;
	border-collapse: collapse;
	width: 90%;
	table-layout: fixed;
	margin-left: auto;
	margin-right: auto;
	margin-top: 5px;
}

td.grey_box_table_cell
{
	padding: 5px;
	border-style: solid;
	border-width: 1pt;
	word-wrap: break-word;
	font-size: 10pt;
}

td.grey_box_table_cell > p
{
	font-size: 10pt;
}

div.TutorialList
{
	height: auto;
	max-width: 20pc;
	float: right;
	margin: 8px;
	border: solid 1px #ff8c00;
	border-radius: 7px;
	padding: 10px;
}

p.TutorialListHead
{
	margin-bottom: 5px;
	font-weight: bold;
	color: #ff8c00;
	font-size: 10pt;
}

p.TutorialList
{
	margin: 0px;
	margin-left: 15px;
	font-size: 10pt;
	padding: 3px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 20pc;
}

/*following styles are for the glossary term tooltip*/

.glossary_tooltip
{
	position: relative;
	display: inline-block;
	cursor: pointer;
}

.glossary_tooltip .tooltiptext
{
	font-family: var(--textff);
	font-size: 1rem;
	visibility: hidden;
	width: 250px;
	background-color: #12122D;
	text-decoration: none;
	color: #fff;
	text-align: left;
	border-radius: 6px;
	padding: 10px 10px;
	position: absolute;
	z-index: 1;
	top: 125%;
	left: 50%;
	margin-left: -130px;
	opacity: 0;
	transition: opacity 0.3s;
	box-shadow: 0 0 5px #aaa;
}

/* styling for tooltip arrow at top of box */

.glossary_tooltip .tooltiptext::before
{
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent transparent #12122D transparent;
}

.glossary_tooltip:hover .tooltiptext
{
	visibility: visible;
	opacity: 1;
}

div.tip_box	/*This is a custom responsive layout row style (div class) in your stylesheet. To provide your own description for this style: (1) Open the stylesheet; (2) Find and select the div class with this name; and (3) In the Comment field, replace this text with your own. For more information on adding comments to styles, see the online Help.*/
{
	mc-grid-row: true;
	margin-left: auto;
	margin-right: auto;
}

div.tip_box::before
{
	content: ' ';
	display: table;
}

div.tip_box::after
{
	content: ' ';
	display: table;
	clear: both;
}

div.tip_box > div
{
	max-width: 90%;
	margin: auto;
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

div.tip_box > div:nth-child(1)
{
	width: 7%;
	margin-right: 0%;
}

div.tip_box > div:nth-child(2)
{
	width: 93%;
	margin-left: 0%;
	font-size: var(--mainfontSize);
	font-family: var(--textff);
}

@media print
{
	img
	{
		max-width: 500px;
	}

	h1.title
	{
		page-break-before: avoid;
	}

	h1.no-break
	{
		page-break-before: avoid;
	}

	h1.tutorial
	{
		page-break-before: avoid;
	}

	h4.tutorial
	{
		page-break-after: avoid;
	}
}

/* some styles for the side menu proxy */

div.sidemenu-topics	/*This is a custom responsive layout row style (div class) in your stylesheet. To provide your own description for this style: (1) Open the stylesheet; (2) Find and select the div class with this name; and (3) In the Comment field, replace this text with your own. For more information on adding comments to styles, see the online Help.*/
{
	mc-grid-row: true;
	margin-left: auto;
	margin-right: auto;
	margin-top: 3.1rem;
	margin-bottom: 3.1rem;
}

div.sidemenu-topics::before
{
	content: ' ';
	display: table;
}

div.sidemenu-topics::after
{
	content: ' ';
	display: table;
	clear: both;
}

div.sidemenu-topics > div
{
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

div.sidemenu-topics > div:nth-child(1)
{
	width: 67%;
	margin-left: 0;
	margin-right: 8%;
}

div.sidemenu-topics > div:nth-child(2)
{
	width: 25%;
	margin-left: 0;
}

ul.menu._Skins_SideMenu.mc-component
{
	border-left: 1px solid #d3d3d3;
	overflow: visible;
}

ul.menu._Skins_SideMenu.mc-component li > a.selected
{
	position: relative;
}

ul.menu._Skins_SideMenu.mc-component li > a
{
	line-height: normal;
}

ul.menu._Skins_SideMenu.mc-component li > a.selected::before
{
	content: '';
	width: 0.66em;
	height: 0.66em;
	background: url(../Images/icons/ellipse.svg);
	background-repeat: no-repeat;
	background-position: left center;
	position: absolute;
	top: 19px;
	left: -16.5px;
}

p.download_file_size
{
	font-size: var(--mainfontSize);
	font-family: var(--textff);
	text-align: center;
	font-weight: bold;
	color: #A0AFB6;
	margin-left: 0.75em;
	vertical-align: bottom;
}

.unbold
{
	font-weight: normal;
}

code
{
	font-family: monospace;
}

pre
{
	font-size: 90%;
	font-family: monospace;
	display: block;
	padding: 9.5px;
	margin: 10px;
	white-space: nowrap;
	background-color: #f5f5f5;
	border: 1px solid #ccc;
	border-radius: 4px;
	overflow: auto;
}