/*<meta />*/

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

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

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.

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

:root
{
	--QLD-color-light__design-accent: #84d3ff;
	/* light blue */
	--text: #001B37;
	--bluedark: #001D74;
	--bluehover: #003E96;
	--blue: #005EB8;
	--bluelight: #D1ECFF;
	--bluepale: #E8F3FD;
	--yellow: #FFDD00;
	--yellowlight: #FFFBEB;
	--greydark: #78797E;
	--grey: #D3D3D3;
	--greylight: #F2F6FA;
}

/*==Topic General Styles==*/

*
{
	box-sizing: border-box;
}

html,
body
{
	font-family: 'Noto Sans', Arial, Helvetica, sans-serif;
	font-size: 12pt;
	line-height: 20pt;
	letter-spacing: -0.01em;
	text-wrap-style: pretty;
	color: #001B37;
	/*	background-color: #ffffff; */
	height: 100%;
	margin: 0;
	mc-hyphenate: never;
}

h1
{
	font-weight: bold;
	margin-bottom: 8px;
	margin-top: 24px;
	color: #001D74;
	background-position: center;
	width: 100%;
	font-size: 1.7em;
	line-height: 1.4em;
}

h2
{
	font-size: 15pt;
	line-height: 23pt;
	margin-bottom: 4px;
	margin-top: 5px;
	padding: 4px 6px;
	text-align: center;
	font-weight: 600;
	font-style: normal;
	color: #FFFFFF;
	background-color: #005EB8;
	mc-heading-level: 0;
}

h2:not(:first-of-type)
{
	/* Styles for all h2s except the first one */
	margin-top: 32px;
}

h3
{
	font-size: 14pt;
	line-height: 22pt;
	font-weight: 600;
	color: #001D74;
	margin-bottom: 4px;
	margin-top: 16px;
}

h4
{
	font-size: 1em;
	line-height: 20pt;
	font-weight: 700;
	color: #001D74;
	margin-bottom: 4px;
	margin-top: 16px;
	text-align: left;
}

h5
{
	font-weight: bold;
	margin-bottom: 0.2em;
	margin-top: 1em;
	font-size: 1.1em;
}

h6
{
	color: #001D74;
	font-size: 10pt;
	margin: 0.5em 0;
}

ul,
ol
{
	margin-top: 0;
	margin-bottom: 16px;
	padding-inline-start: 25px;
}

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

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

.iframe-container
{
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	/* 16:9 aspect ratio (height / width * 100) */
	height: 0;
	overflow: hidden;
}

.iframe-container iframe
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.skip-to-content
{
	display: none;
	visibility: hidden;
}

/* Add to any class to only show element on smallest resolution displays */

.mobile-only
{
	display: none;
}

@media only screen and (max-width: 767px)
{
	.mobile-only
	{
		display: unset;
	}
}

@media print
{
	.mobile-only
	{
		display: unset;
	}
}

/* Add to any class to hide element on smallest resolution displays */

@media only screen and (max-width: 767px)
{
	.sml-hide
	{
		display: none;
	}
}

/* Add to any class to hide element on print */

@media print
{
	.print-hide
	{
		display: none;
	}
}

/*==Search Results Settings==*/

#resultList > li
{
	background-color: #fff;
	border: 1px solid #ddd;
	padding: 20px;
	margin-bottom: 12px;
	border-radius: 15px;
	box-shadow: 0 5px 7px rgba(0,0,0,0.2);
}

#resultList h3.title
{
	margin-top: 0;
}

/*==Header Banner Settings==*/

.off-canvas-wrapper-inner nav.title-bar .outer-row
{
	/*	max-width: 1400px; */
	/* CHANGE MAX-WIDTH TO NONE FOR FULL WIDTH BANNER*/
	/*	margin-bottom: 58px; */
}

.navigation-wrapper
{
	justify-content: center;
}

ul.navigation
{
	width: 1400px;
}

.search-filter-content
{
	z-index: 10;
}

.topic-layout,
.top-bar
{
	max-width: 1400px;
	margin: auto;
}

.off-canvas-wrapper-inner .outer-row
{
	max-width: 100%;
}

.height-container
{
	position: unset;
	padding-bottom: 200px;
	/*MATCH TO FOOTER HEIGHT*/
}

.off-canvas-main > div
{
	/*max-width: 1400px;*/
	margin: auto;
}

p.dateid
{
	max-width: 1400px;
	margin: auto;
	padding-right: 16px !important;
	padding-top: 24px !important;
}

div.footer
{
	max-width: 100%;
	position: absolute;
	bottom: 0;
	width: 100%;
	background: url('../Images/Assets/Backgrounds/Dark-Alt-BG-Default.jpg') no-repeat left top;
	background-color: #003E96;
}

div.footer > table
{
	max-width: 1400px;
	margin: auto;
}

div.footer p
{
	font-size: 10pt;
	line-height: 14pt;
}

/*---*/

.logo-wrapper
{
	padding: 1.5em 0;
	min-height: unset !important;
}

.title-bar-layout a.logo
{
	height: 60px;
	width: 285px;
	background-size: contain;
}

nav.title-bar
{
	background: url('../Images/Assets/Backgrounds/Dark-Alt-BG-Default.jpg') no-repeat left top;
	background-color: #003E96;
	/*	background-blend-mode: luminosity;
    background-repeat: repeat-x; */
}

.menu-icon-container
{
	min-height: auto !important;
}

nav.title-bar .menu-icon
{
	top: 26px !important;
}

.navigation-wrapper
{
	background: #FFFFFF;
	/*margin-left: -1rem;
	margin-right: -1rem;*/
	position: relative;
	width: 100%;
	left: 0;
	right: 0;
	margin: auto;
	/*	margin-top: 106px; */
	border-bottom: 4px solid #84d3ff;
}

.navigation-wrapper::before
{
	content: "";
	position: fixed;
	background-color: #FFFFFF;
	border-bottom: 4px solid #84d3ff;
	width: 100%;
	height: -webkit-fill-available;
	z-index: -1;
}

ul.navigation a
{
	font-weight: 700;
}

ul.navigation li:hover
{
	border-bottom: 4px solid #005EB8;
	margin-bottom: -4px;
}

ul.navigation > li.has-children:after
{
	display: none;
}

ul.navigation ul > li:hover
{
	border-bottom: unset;
	margin-bottom: unset;
}

ul.navigation > li > ul.openRight
{
	margin-top: 4px;
}

/*== Home page settings ==*/

.home-tile h3,
.feat-tile h3
{
	font-size: 13.5pt;
	line-height: 20pt;
}

div.feat-tiles-section
{
	padding: 0 16px 32px;
	max-width: 1400px;
	margin: auto;
}

div.feat-tiles-container
{
	padding: 0;
	margin: 0 -1%;
	display: flex;
	flex-wrap: wrap;
	justify-content: left;
}

.feat-tile
{
	overflow: hidden;
	width: 31.33%;
	border: 1px solid #78797E;
	border-radius: 12px;
	margin: 8px 1%;
	background-color: #ffffff;
	position: relative;
}

.feat-tile:hover,
.home-tile:hover
{
	box-shadow: 0px 2px 3px rgba(0,0,0,.1), 0px 5px 15px rgba(0,0,0,.01), 0px 8px 6px rgba(0,0,0,.07);
	transform: scale(1.01);
	transition: transform .2s ease;
}

.feat-tile a
{
	display: flex;
	flex-wrap: wrap;
	text-decoration: none;
}

a:link
{
	color: #005EB8;
}

a:visited
{
	color: #001D74;
}

.feat-tile a:hover
{
	text-decoration: underline;
	text-decoration-color: #005EB8;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.1em;
}

div.tiles-container > a:nth-child(n):hover
{
	box-shadow: 0px 2px 3px rgba(0,0,0,.1), 0px 5px 15px rgba(0,0,0,.01), 0px 8px 6px rgba(0,0,0,.07);
	transform: scale(1.02);
	transition: transform .2s ease;
}

a:hover
{
	color: #003E96;
}

a:active
{
	color: #005EB8;
}

.tile-title
{
	order: 2;
	width: 100%;
	height: -webkit-fill-available;
	margin: 8px 16px;
	color: #005EB8;
}

.tile-image
{
	order: 1;
	padding-bottom: 55%;
	background-position: center;
	background-size: cover;
	background-color: #F2F6FA;
	width: 100%;
	border-bottom: 1px solid #78797E;
}

.diagonal-banner
{
	position: absolute;
	transform: rotate(30deg);
	width: 500px;
	text-align: center;
	right: -180px;
	top: 30px;
	padding: 5px 120px;
	background: #FFDD00;
	color: #001B37;
	font-size: 13pt;
	font-weight: 700;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
	z-index: 1;
}

div.home-tiles-section
{
	display: flex;
	flex-wrap: wrap;
	padding: 32px 16px;
	background-color: #F2F6FA;
	max-width: 1400px;
	margin: auto;
}

div.home-tiles-container
{
	display: flex;
	flex-wrap: wrap;
	width: 66.66%;
}

div.home-tiles-container > h1
{
	margin-top: 0;
}

a.home-tile
{
	overflow: hidden;
	width: 31%;
	border: 1px solid #78797E;
	border-radius: 12px;
	margin: 8px 1%;
	background-color: #ffffff;
	display: flex;
	flex-wrap: wrap;
	text-decoration: none;
}

a.home-tile > div
{
	padding: 16px;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	width: 100%;
}

a.home-tile > div > img
{
	width: 64px;
	height: 64px;
}

a.home-tile > div > h3
{
	margin: 0 0 0 16px;
	color: #005EB8;
	text-wrap-style: balance;
}

a.home-tile:hover
{
	text-decoration: underline;
	text-decoration-color: #005EB8;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.1em;
}

div.home-popular-container
{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	width: 33.33%;
	padding: 0 1%;
}

ul.related-links
{
	display: flex;
	flex-wrap: wrap;
	list-style-type: none;
	padding: 0;
	margin-top: 6px;
	font-weight: 700;
	overflow: hidden;
	color: #005EB8;
}

ul.related-links > li
{
	display: flex;
	justify-content: space-between;
	position: relative;
	flex: 0 0 100%;
	list-style: none;
	border-bottom: solid 1px;
	padding: 12px 6px 12px 12px;
	margin: 0;
	color: #005EB8;
	align-items: center;
}

ul.related-links > li a
{
	color: inherit;
	text-decoration: none;
}

ul.related-links > li:hover
{
	text-decoration: underline;
	text-decoration-color: #005EB8;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.1em;
	color: #005EB8;
}

ul.related-links > li::after
{
	background-image: url('../Images/Assets/Icons/Arrows/right-chevron.svg');
	background-blend-mode: exclusion;
	background-color: #005EB8;
	-webkit-mask-image: url('../Images/Assets/Icons/Arrows/right-chevron.svg');
	mask-image: url('../Images/Assets/Icons/Arrows/right-chevron.svg');
	-webkit-mask-repeat: no-repeat;
	width: 24px;
	height: 24px;
	content: "";
	flex: 0 0 auto;
	margin: 0 0.5rem 0 0.5rem;
}

ul.related-links > li:hover::after
{
	margin: 0 0 0 0.5rem;
	transition: margin .2s ease;
}

/* Limit top navigation dropdown height */

.topnav ul ul,
.dropdown-menu
{
	max-height: 65vh;
	/* menu height = 65% of screen */
	overflow-y: auto;
	/* allows internal scrolling */
	overflow-x: hidden;
}

/* Prevent scroll bubbling to the page */

.topnav ul ul,
.dropdown-menu
{
	overscroll-behavior: contain;
}

/* Flare default navigation */

.navigation-wrapper ul ul
{
	max-height: 65vh;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/*=== Multiple Tiles ===*/

div.tiles-container
{
	display: flex;
	flex-wrap: wrap;
}

div.tiles-container > *
{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: flex-start;
	align-content: center;
	align-items: center;
	border-radius: 12px;
	border: 1px solid #d3d3d3;
	padding: 10px 20px;
	overflow: hidden;
}

div.tiles-container > a
{
	text-decoration: none;
	cursor: pointer;
}

div.tiles1 > *:nth-child(n)
{
	width: 100%;
	margin: 5px 0;
}

div.tiles2 > *:nth-child(n)
{
	width: 49%;
	margin: 5px 0.5%;
}

div.tiles3 > *:nth-child(n)
{
	width: 32.33%;
	margin: 5px 0.5%;
}

div.tiles4 > *:nth-child(n)
{
	width: 24%;
	margin: 5px 0.5%;
}

div.tiles5 > *:nth-child(n)
{
	width: 19%;
	margin: 5px 0.5%;
}

div.tiles6 > *:nth-child(n)
{
	width: 16.16%;
	margin: 2px 0.25%;
}

@media only screen and (max-width: 1279px)
{
	div.tiles4 > *:nth-child(n)
	{
		width: 49%;
		margin: 5px 0.5%;
	}

	div.tiles5 > *:nth-child(n)
	{
		width: 49%;
		margin: 5px 0.5%;
	}

	div.tiles6 > *:nth-child(n)
	{
		width: 32.33%;
		margin: 5px 0.5%;
	}
}

@media only screen and (max-width: 767px)
{
	div.tiles-container > *:nth-child(n)
	{
		width: 100%;
		margin: 5px 0.5%;
	}
}

/*== Added by Kylie for Note boxes ==*/

div.note
{
	background-color: #FFFBEB;
	background-position: 9px 0px;
	background-repeat: no-repeat;
	background-position-y: center;
	background-position-x: 10px;
	line-height: 20pt;
	overflow: hidden;
	padding-left: 75px;
	margin-bottom: 20px;
	background-image: url('../Images/Assets/TextBox/Note-Icon.png');
	background-size: 50px;
	border-bottom: solid 2px #FFDD00;
	border-right: solid 2px #FFDD00;
	border-top: solid 2px #FFDD00;
	border-left: solid 8px #FFDD00;
	margin-top: 20px;
	min-height: 75px;
	border-radius: 8px;
	padding: 20px 20px 20px 75px;
}

div.note:first-child
{
	margin-top: 0;
}

div.note h2:first-child,
div.note h3:first-child,
div.note p:first-child,
div.note p:last-child,
div.note ul:first-child,
div.note ul:last-child
{
	margin-top: 0;
	margin-bottom: 0;
}

div.important
{
	background-color: #ffdbdb;
	background-position: 9px 0px;
	background-repeat: no-repeat;
	background-position-y: center;
	background-position-x: 10px;
	line-height: 20pt;
	overflow: hidden;
	padding-left: 75px;
	margin-bottom: 20px;
	background-image: url('../Images/Assets/TextBox/IMportant.png');
	background-size: 50px;
	border-bottom: solid 2px #ffdbdb;
	border-right: solid 2px #ffdbdb;
	border-top: solid 2px #ffdbdb;
	border-left: solid 8px #ffdbdb;
	margin-top: 20px;
	min-height: 75px;
	border-radius: 8px;
	padding: 20px 20px 20px 75px;
}

div.FGcallout
{
	background-color: #d1ecff;
	background-position: 9px 0px;
	background-repeat: no-repeat;
	background-position-y: center;
	background-position-x: 10px;
	border-left: solid 6px #072651;
	overflow: hidden;
	margin-bottom: 4px;
	padding-left: 15px;
	padding: 15px;
}

div.Activitycallout
{
	background-color: #F4F9EA;
	background-position: 9px 0px;
	background-repeat: no-repeat;
	background-position-y: center;
	background-position-x: 10px;
	overflow: hidden;
	margin-bottom: 4px;
	padding-left: 15px;
	border-left: solid 6px #75c235;
	padding: 15px;
}

div.emphasise
{
	background-repeat: no-repeat;
	background-position-y: center;
	background-position-x: 10px;
	line-height: 20pt;
	overflow: hidden;
	padding-left: 90px;
	margin-bottom: 4px;
	background-size: 30px;
	padding: 50px 75px;
	background-color: #ccddfc;
	background-image: url('../Images/Assets/TextBox/Emphasis.png');
	background-size: 50px;
	border-left: solid 6px #6188CD;
}

div.Teams
{
	background-repeat: no-repeat;
	background-position-y: 10px;
	background-position-x: 16px;
	line-height: 20pt;
	overflow: hidden;
	padding-left: 75px;
	margin-bottom: 4px;
	background-size: 30px;
	background-color: #E0EFF4;
	background-image: url('../Images/Assets/TextBox/Teams.png');
	background-size: 50px;
	border-left: solid 6px #66A4BA;
	padding: 20px 20px 20px 75px;
}

div.link
{
	background-repeat: no-repeat;
	background-position-y: center;
	overflow: hidden;
	padding-left: 75px;
	line-height: 20pt;
	background-color: #e6f7ff;
	background-image: url('../Images/Assets/TextBox/Link-Icon.png');
	background-size: 50px;
	padding: 20px 75px;
	background-position: 10px;
	background-position-x: 10px;
	margin-bottom: 20px;
	border-bottom: solid 2px #0085b3;
	border-top: solid 2px #0085b3;
	border-right: solid 2px #0085b3;
	border-left: solid 8px #0085b3;
	margin-top: 20px;
	border-radius: 8px;
}

div.link > p
{
	margin-bottom: 0;
	margin-top: 0;
}

div.rabbit
{
	background-repeat: no-repeat;
	background-position-y: center;
	background-position-x: 10px;
	overflow: hidden;
	background-image: url('../Images/Assets/TextBox/Rabbit.png');
	background-size: 50px;
	padding-left: 75px;
	margin-bottom: 20px;
	line-height: 20pt;
	background-color: #E8F3FD;
	border-left: solid 8px #003E96;
	border-bottom: solid 2px #003E96;
	border-right: solid 2px #003E96;
	border-top: solid 2px #003E96;
	margin-top: 20px;
	border-radius: 8px;
	padding: 20px 20px 20px 75px;
}

div.rabbit > p
{
	margin-top: 0;
	margin-bottom: 0;
}

img	/*Setting max-width: 100%; property makes images always fit the width of the container*/
{
	max-width: 100%;
	mc-thumbnail-max-width: 0px;
	mc-thumbnail-max-height: 48px;
}

img.thumbnail
{
	mc-thumbnail: popup;
}

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

a.MCBreadcrumbsLink
{
	font-size: inherit !important;
	font-style: italic;
	text-decoration: underline;
	color: unset !important;
}

a.MCBreadcrumbsLink:visited
{
	color: #000000;
}

a.MCBreadcrumbsLink:hover
{
	color: #000000;
	font-size: 0.7em;
}

MadCap|breadcrumbsProxy
{
	border-bottom: none;
	font-size: .7em;
	font-style: italic;
	mc-breadcrumbs-prefix: 'You are here: ';
	margin-left: 15px;
}

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

MadCap|xref:hover
{
	color: #404040;
}

MadCap|dropDownHotspot
{
	color: #001D74;
	font-size: 12pt;
	font-weight: 700;
}

MadCap|dropDownBody
{
	
}

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');
	margin-top: 10px;
}

MadCap|dropDownHead.Boxed
{
	border-left: 8px solid #001D74;
	line-height: 1.7em;
	padding: 10px;
	background-color: #E8F3FD;
}

MadCap|dropDownBody.Boxed
{
	background-color: #FFFFFF;
	line-height: 1.7em;
	margin-left: 0;
	padding: 10px 20px;
	border: solid 2px #e5eff7;
	border-left: 8px solid #e5eff7;
	border-top: none;
}

.tab-bar-section a.logo
{
	margin-left: -50px;
}

/* begin styles for tabs */

ul.tabs
{
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;
	display: flex;
	gap: 4px;
	/*margin-bottom: 16px;*/
	overflow-x: auto;
}

ul.tabs:after
{
	position: absolute;
	content: "";
	width: 100%;
	bottom: 0;
	left: 0;
	border-bottom: 1px solid #ddd;
}

ul.tabs li.tab-link
{
	color: #333;
	font-weight: normal;
	background: #F5F5F5;
	display: block;
	padding: 10px 16px;
	cursor: pointer;
	margin-left: 0;
	margin-bottom: 0;
	position: relative;
	z-index: 0;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid transparent;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
	border-radius: 10px 10px 0 0;
	flex-grow: 1;
	text-align: center;
	min-width: 200px;
}

ul.tabs li.tab-link:hover
{
	background: #E8F3FD;
	color: #000000;
	display: block;
	cursor: pointer;
	margin-left: 0px;
}

ul.tabs li.current
{
	background: #005EB8;
	font-weight: bold;
	color: #FFFFFF;
	margin-left: 0px;
	margin-right: 0px;
	border-top: 1px solid #ddd;
	border-bottom: 0px solid white;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
	z-index: 10;
}

ul.tabs li.current:hover
{
	background: #003E96;
	font-weight: bold;
	color: #FFFFFF;
	margin-left: 0px;
	margin-right: 0px;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid transparent;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
	z-index: 2;
}

.tabs + p
{
	margin: 0;
}

.tab-content
{
	display: none;
	position: relative;
	padding: 20px;
	margin-bottom: 32px;
	border: 2px solid #005EB8;
	border-radius: 0 0 10px 10px;
	background-color: #FFFFFF;
}

.tab-content > :first-child
{
	margin-top: 0;
}

.tab-content > :last-child
{
	margin-bottom: 0;
}

.tab-content.current
{
	display: block;
}

/*==Tab content animation==*/

.tab-content
{
	animation-name: slide-left;
	animation-duration: 0.5s;
	position: relative;
}

@keyframes slide-left {
	from {
		opacity: 0.1;
		right: -30px;
	}
	to {
		opacity: 1;
		right: 0;
	}
} 

/*==SideNav Menu Links==*/

ul.off-canvas-list li a
{
	font-size: 1em;
	border-bottom: solid 1px #d3d3d3;
	color: #072651;
	line-height: 1.5;
}

/*============SideNav Menu Width START============*/

.position-right
{
	right: -300px;
	width: 300px;
}

.position-left
{
	left: -300px;
	width: 300px;
}

.off-canvas-wrapper-inner.is-open-right
{
	right: 300px;
}

.off-canvas-wrapper-inner.is-open-left
{
	right: -300px;
}

.is-open-right .js-off-canvas-exit
{
	right: 300px;
}

.is-open-left .js-off-canvas-exit
{
	right: -300px;
}

/*============SideNav Menu Width END==============*/
/*highlight text from seasrch result*/

span.SearchHighlight
{
	background-color: yellow;
}

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

div.MCBreadcrumbsBox_0
{
	padding: 5px 0;
	margin: 0 16px;
}

._Skins_TopicToolbar
{
	margin: 0 16px;
}

div.search-container
{
	padding: 10px 0 20px;
	background: #072651;
	margin-bottom: 10px;
	display: none;
}

/*==Elements for the left side of Master Page layout==*/
/*This is the div that the menu proxy is contained in*/

div.side-menu
{
	padding-left: 0;
	margin-top: 0;
	background-color: #E5EFF7;
	height: -webkit-fill-available;
}

ul.sub-menu
{
	background-color: #F2F6FA;
}

ul.menu._Skins_SideMenu.mc-component ul > li > a
{
	font-weight: 700;
	font-size: 11pt;
	line-height: 1.5;
}

ul.menu._Skins_SideMenu.mc-component ul ul > li > a
{
	font-weight: normal;
	font-size: 11pt;
}

ul.menu._Skins_SideMenu.mc-component
{
	width: 100%;
}

ul.menu._Skins_SideMenu.mc-component li > a
{
	font-weight: 700;
}

ul.menu._Skins_SideMenu.mc-component li > a.selected
{
	border-left: solid 4px #005EB8;
	font-weight: 700;
}

ul.menu._Skins_SideMenu.mc-component li > a.selected:hover
{
	border-left: solid 4px #005EB8;
	font-weight: 700;
}

/*====*/

div.side-content	/*This is the div for the side-content containing "Search Tips" and the "Contact Support" button*/
{
	padding-top: 10px;
}

MadCap|dropDownHead.side-content	/*Font properties for the "Search Tips" drop-down head */
{
	font-size: 1.1em;
	font-weight: bold;
}

div.cta	/*Call to action button/Contact Support button*/
{
	-moz-border-radius: 60px;
	-webkit-border-radius: 60px;
	border-radius: 5px;
	padding: 2px 0px;
	border: 1px solid #ddd;
	color: #ffffff;
	background: #072651;
	transition: all 0.5s cubic-bezier(.25,.8,.25,1);
	/*margin-top: 16px;*/
	margin-left: 4px;
	margin-right: 4px;
}

div.cta:hover	/*When hovering over the CTA button the following properties will apply*/
{
	box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
	transform: scale(1.01);
}

a.cta:link
{
	text-decoration: underline;
	color: #ffffff;
}

a.cta:visited
{
	text-decoration: none;
	color: purple;
	font-size: 12px;
}

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;
	display: flex;
}

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: 20%;
	margin-left: 0%;
	/*border-right: 1px solid #d3d3d3;*/
	/*background-color: var(--greylight);*/
	display: flex;
	flex-direction: column;
}

div.topic-layout > div:nth-child(2)
{
	width: 80%;
	padding-left: 30px;
	padding-right: 16px;
	max-width: 1400px;
}

/*===Catalogue Filter Settings===*/

.gallery
{
	display: flex;
	flex-wrap: wrap;
	max-width: 1400px;
	background-color: #fff;
	border: 1px solid #ccc;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
	border-radius: 10px;
	overflow: hidden;
	margin: 1px;
}

.gallery p
{
	margin: 4px 0;
	line-height: 1.4rem;
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.gallery > a
{
	font-size: inherit;
}

.gallery-filters
{
	width: 20%;
	/*max-width: 200px;*/
	padding: 15px;
	background-color: #F5F5F5;
	font-size: 10pt;
}

.gallery-filters a
{
	font-size: 10pt;
	color: #072651 !important;
}

.gallery-title
{
	font-size: 14pt;
	font-weight: bold;
	margin: 10px 0;
	color: #001B37;
}

.gallery-filter-section
{
	padding-bottom: 12px;
}

.gallery-section-title
{
	font-size: 12pt;
	line-height: 16pt;
	font-weight: bold;
	color: #072651;
	margin-bottom: 8px;
}

.gallery-checkbox
{
	margin-bottom: 8px;
	line-height: 14pt;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	align-items: flex-start;
}

.gallery-checkbox input
{
	margin-right: 6px;
}

.gallery-gallery
{
	flex-grow: 1;
	padding: 10px;
	background-color: #ffffff;
	width: 80%;
}

.gallery-tabs
{
	margin-bottom: 20px;
}

.gallery-tab
{
	font-weight: bold;
	color: #333;
	/* Text color */
	margin-right: 10px;
	text-decoration: none;
	/* Remove default hyperlink underline */
}

.gallery-tab:hover
{
	text-decoration: underline;
}

.gallery-tiles
{
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 6px;
}

.gallery-tile
{
	background-color: #fff;
	border: 1px solid #ddd;
	padding: 12px;
	border-radius: 7px;
	box-shadow: 0 5px 7px rgba(0,0,0,0.2);
	display: block;
	/* Initially display all tiles */
}

.gallery-tile-header
{
	font-size: 12pt;
	font-weight: bold;
	color: #072651;
	margin-bottom: 8px;
}

.gallery-tile-content
{
	color: #404040;
	font-size: 10pt;
	line-height: 1.4rem;
}

.bar
{
	float: left;
	line-height: normal;
	margin-right: 6px;
	margin-bottom: 3px;
	background-color: #E8F3FD;
	border-radius: 6px;
	min-height: 36px;
	height: 36px;
	min-width: 36px;
	align-content: center;
	padding: 6px 6px;
}

.bar h6
{
	display: none;
}

.bar p
{
	margin: 0;
	font-weight: 700;
	text-align: center;
}

.bar span
{
	margin: 0 3px;
	font-weight: 700;
	color: #001D74;
}

.bar img
{
	margin: 1px 3px 0;
}

.leaderships
{
	display: inline-flex;
	flex-wrap: wrap;
	background-color: transparent !important;
	height: unset;
	padding: 0;
}

.leadership-tag
{
	font-size: 8pt;
	padding: 6px 6px;
	margin: 3px;
	/*border: 1px solid var(--bluedark);*/
	border-radius: 4px;
	color: #001D74;
	background-color: #E8F3FD;
}

/*===Course Catalogue Tile Layout===*/

.column
{
	float: left;
	padding: 20px;
	min-height: 600px;
}

.left
{
	width: 25%;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
}

.column.left ul
{
	width: 100%;
}

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

.right
{
	width: 20%;
}

.middle
{
	width: 55%;
	flex-grow: 1;
	padding: 0 20px;
}

.row:after
{
	content: "";
	display: table;
	clear: both;
}

/*===Course Details Page Layout===*/

.column1
{
	float: left;
	width: 20%;
}

.column1 > img
{
	width: 100%;
	border-radius: 3px;
}

.column2
{
	float: left;
	width: 60%;
	padding: 0 15px;
}

.column3
{
	float: right;
	width: 20%;
}

/*==Course Dates Dropdown button==*/

.column3 .MCDropDownHead
{
	background: #d1ecff;
	padding: 6px 12px 6px 6px;
	border-radius: 6px;
	text-align: center;
}

.column3 .MCDropDownBody
{
	margin-left: 0;
	background: #ebf7ff;
	border-bottom: none;
	padding: 10px 15px 0;
	border-radius: 0 0 6px 6px;
}

.column3 .dropDownHotspot:link
{
	font-size: 11pt;
}

.column3 .MCDropDown
{
	background: #d1ecff;
	display: inline-block;
	border-radius: 6px;
	padding: 0;
	margin: 2px 1px;
}

.column3 .dropDown
{
	width: -webkit-fill-available;
}

.column3 .dropDown:hover
{
	opacity: 0.8;
}

.column3 .MCDropDownBody > ul
{
	list-style-type: circle;
	padding-left: 14px;
}

.toolkits .column1
{
	max-height: 180px;
	overflow: hidden;
	border-radius: 3px;
	margin-bottom: 12px;
}

.toolkits .gallery-tile-content p
{
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

/*======*/

.row .row
{
	margin: 0 auto;
}

.row:after
{
	content: "";
	display: table;
	clear: both;
}

/*===Button styles===*/

button
{
	border: none;
	outline: 0;
	display: inline-block;
	padding: 6px 6px;
	color: white;
	background-color: #005EB8;
	text-align: center;
	cursor: pointer;
	width: 100%;
	font-size: 11pt;
	text-decoration: none;
	border-radius: 6px !important;
	font-family: 'Noto Sans', Arial, Helvetica, sans-serif;
}

.button-group-container-left
{
	display: flex;
	width: 100%;
	margin: 0;
}

.button.previous-topic-button
{
	margin-left: 12px;
}

.button.next-topic-button
{
	margin-right: 12px;
}

.button-text
{
	margin-left: 6px !important;
	margin-right: 6px !important;
}

.button-icon
{
	background-size: contain !important;
}

/*styles for buttons - used within the course tiles*/

.button1
{
	color: white;
	padding: 6px 6px;
	text-align: center;
	text-decoration: none;
	display: block;
	font-size: 11pt;
	margin: 2px 1px;
	width: -webkit-fill-available;
	background-color: #001D74;
}

.button2
{
	color: white;
	padding: 6px 6px;
	text-align: center;
	text-decoration: none;
	font-size: 11pt;
	margin: 2px 1px;
	width: -webkit-fill-available;
	background-color: #005EB8;
	display: block;
}

.button3
{
	color: white;
	padding: 6px 6px;
	text-align: center;
	text-decoration: none;
	font-size: 11pt;
	margin: 2px 1px;
	width: 80%;
	background-color: #006886;
	display: block;
}

.button a
{
	text-decoration: none;
	font-size: 22px;
	color: black;
}

button:hover,
a:hover
{
	opacity: 0.8;
}

a.cta
{
	color: black;
}

a:has(button)
{
	text-decoration: none;
}

/*==Images with Text==*/

div.ImageText	/*4-8 (2 cells one small, one large.)*/
{
	mc-grid-row: true;
	margin-left: auto;
	margin-right: auto;
}

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

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

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

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

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

div.IconText	/*4-8 (2 cells one small, one large.)*/
{
	display: flex;
	/* Use Flexbox for layout */
	align-items: center;
	/* Vertically align children */
	margin-left: auto;
	margin-right: auto;
}

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

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

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

div.IconText > div:nth-child(1)
{
	flex: 0 0 10%;
	/* Set the width to 10% */
}

div.IconText > div:nth-child(2)
{
	flex: 1;
	/* Take up the remaining space */
	margin-left: 0%;
}

/*===Course Video section formatting===*/

div.CourseVideos	/*8-4 (2 cells one large, one small.)*/
{
	mc-grid-row: true;
	margin-left: auto;
	margin-right: auto;
}

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

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

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

div.CourseVideos > div:nth-child(1)
{
	width: 66.66667%;
	margin-left: 0%;
	padding-right: 20px;
}

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

MadCap|popupHead
{
	color: #000000;
}

/*===Palliative Care Tiles===*/

div.palliative-tiles
{
	mc-grid-row: true;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1%;
	margin-bottom: 1%;
}

div.palliative-tiles::before
{
	content: ' ';
	display: table;
}

div.palliative-tiles::after
{
	content: ' ';
	display: table;
	clear: both;
}

div.palliative-tiles > div
{
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-color: transparent;
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	/*Adds transition animation when switching between screen sizes*/
	-moz-border-radius: 20x;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	border: 1px solid #d3d3d3;
	padding: 10px 10px;
	overflow: hidden;
	height: 420px;
}

div.palliative-tiles > div:hover	/*When hovering over a home-tile, these properties apply*/
{
	box-shadow: 0 5px 15px rgba(0,0,0,0.2), 0 3px 5px rgba(0,0,0,0.1);
	transform: scale(1.01);
}

div.palliative-tiles > div:nth-child(1)
{
	width: 23%;
	margin-left: 2%;
}

div.palliative-tiles > div:nth-child(2)
{
	width: 23%;
	margin-left: 2%;
}

div.palliative-tiles > div:nth-child(3)
{
	width: 23%;
	margin-left: 2%;
}

div.palliative-tiles > div:nth-child(4)
{
	width: 23%;
	margin-left: 2%;
}

/*=Elements for text contained within each palliative-tile=*/

p.palliative-title
{
	text-align: center;
	color: #7E8890;
	font-size: 1.4em;
}

p.palliative-content
{
	text-align: center;
	color: #7E8890;
	font-size: 0.8em;
}

p.palliative-items
{
	color: #7E8890;
	font-size: 0.7em;
	text-align: center;
}

div.palliative-tiles a	/*Complex Selector: Any anchor (links) tags that are within div.home-tiles will have the following properties*/
{
	text-decoration: none;
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

/*Single hidden Image Text*/
/*Multiple Hidden Image Text*/

.image-container
{
	display: flex;
	gap: 20px;
	justify-content: center;
}

.image-box
{
	text-align: center;
}

.image-box img
{
	cursor: pointer;
	width: 150px;
	height: auto;
}

.hidden-text
{
	display: none;
	margin-top: 10px;
	color: #333;
}

.hidden-text.show
{
	display: block;
}

/*Hidden tabs*/
/* Style tab links */

.tablink
{
	background-color: #555;
	color: white;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 14px 16px;
	font-size: 17px;
	width: 25%;
}

.tablink:hover
{
	background-color: #777;
}

/* Style the tab content (and add height:100% for full page content) */

.tabcontent
{
	color: white;
	display: none;
	padding: 100px 20px;
	height: 100%;
}

/*===========================================================================================================================================================
Styles after this point are user-made custom styles. 
===========================================================================================================================================================*/

.float-right
{
	float: right;
	padding-left: 20px;
}

a.ButtonHyperlinks
{
	font-size: 11pt;
}

a.ButtonHyperlinks:link
{
	color: #ffffff;
}

a.ButtonHyperlinks:visited
{
	color: #ffffff;
}

a.ButtonHyperlinks:hover
{
	color: #ffffff;
}

a.ButtonHyperlinks:active
{
	color: #ffffff;
}

/*===========================================================================================================================================================
Blog / Articles page styles after this point. 
===========================================================================================================================================================*/

div.blog-container
{
	max-width: 1400px;
	/*margin: 0 auto;*/
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

div.blog-main
{
	width: 100%;
	background: #FFFFFF;
	padding: 0 0;
}

div.blog-head
{
	display: block;
}

div.blog-head > h2
{
	font-weight: 600;
	font-size: 1.6em;
	margin: 0;
	padding: 10px 0;
	text-align: left;
	color: #0B397B;
	background-color: transparent;
}

div.blog-head > h1
{
	font-weight: 600;
	color: rgba(0,0,0,0.75);
	margin: 0;
	padding: 10px 0;
	text-align: center;
}

div.blog-article
{
	margin-bottom: 1rem;
	mc-grid-row: true;
	margin-left: auto;
	margin-right: auto;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 7px;
	box-shadow: 0 5px 7px rgba(0, 0, 0, 0.2);
}

.blog-article::before
{
	content: ' ';
	display: table;
}

.blog-article::after
{
	content: ' ';
	display: table;
	clear: both;
}

.blog-article > section
{
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 12px;
	margin: 0;
}

.blog-article > section:nth-child(1)
{
	width: 20%;
	max-width: 250px;
	margin: 0;
}

.blog-article > section:nth-child(2)
{
	width: 80%;
	margin: 0;
}

h3.blog
{
	margin-bottom: 4px;
	margin-top: 0;
	font-weight: bold;
	color: #072651;
}

.blog-article > section > img
{
	margin-top: 0;
	margin-bottom: 0;
	width: 100%;
}

.blog-article > section > p
{
	margin-top: 0;
	margin-bottom: 8px;
}

.blog-article > p
{
	font-size: 1rem;
	color: rgba(0,0,0,0.75);
	text-align: justify;
	margin: 0px;
	line-height: 1.75rem;
}

.blog-article > section .button1
{
	width: unset;
	margin: 6px 1px;
	padding: 12px 24px;
	font-size: 11pt;
}

.blog-aside
{
	width: 25%;
	padding: 0 1.5rem;
	background: #f0f0f0;
	margin: 0;
}

.blog-aside > section
{
	padding: 1.5rem 0;
	border-bottom: 1px solid #d3d3d3;
	margin: 0;
}

.blog-aside > section > h3
{
	font-weight: 600;
	color: #072651;
	margin-top: 0;
	padding: 0;
	text-align: left;
	background-color: transparent;
}

.blog-aside > section > ul
{
	padding-left: 0;
	list-style: none;
}

.blog-aside > section > ul > li
{
	margin-bottom: 0.75rem;
}

.blog-aside > section > ul > li > a
{
	letter-spacing: 0.5px;
	color: #072651;
	padding-left: 0.75rem;
}

/* The flip box container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */

div.flip-box
{
	background-color: transparent;
	width: 300px;
	height: 300px;
	border: 1px solid #f1f1f1;
	perspective: 1000px;
	/* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */

div.flip-box-inner
{
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	transition: transform 0.8s;
	transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */

div.flip-box:hover .flip-box-inner
{
	transform: rotateY(180deg);
}

/* Position the front and back side */

div.flip-box-front,
div.flip-box-back
{
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	/* Safari */
	backface-visibility: hidden;
	margin-bottom: 6px;
}

/* Style the front side */

div.flip-box-front
{
	background-size: 100% 100%;
	color: black;
}

div.flip-box-inner h2
{
	margin-top: 0;
	margin-bottom: 0;
}

/* Style the back side */

div.flip-box-back
{
	background-size: 100% 100%;
	color: black;
	transform: rotateY(180deg);
	padding: 4px;
	overflow-y: auto;
}

/*=========================================================================================================================================================== Code for the resizing of popup windows ===========================================================================================================================================================*/

div.MCTopicPopupContainer
{
	height: 70%;
	max-height: 570px;
	max-width: 700px;
	/*	margin-top: 100px;
	margin-left: 400px;
*/
	margin: auto;
	padding: 30px;
	left: 20px;
	right: 20px;
	border-radius: 15px;
}

iframe.MCTopicPopupBody
{
	height: 100%;
	width: 100%;
}

.CloseTopicPopupButtonContainer
{
	width: -webkit-fill-available;
	top: 15px;
	right: 15px;
	left: 15px;
}

button.CloseTopicPopupButton
{
	/*	color: #072651 */
	/*	text-align: right; */
	color: #FFF;
	margin: 0;
	padding: 0;
	width: auto;
}

button.CloseTopicPopupButton.CloseTopicOuter
{
	margin-left: auto;
	float: right;
	padding: 0;
	top: 0;
	right: 0;
	width: 40px;
	height: 40px;
	border-radius: 10px !important;
	background: #001D74;
}

button.CloseTopicPopupButton.CloseTopicInner
{
	font-size: 30px;
}

.button
{
	display: block;
}

/*=============================================================================================================================================*/
/*---ACCORDION SLIDER (HORIZONTAL)---*/

.accordion
{
	box-sizing: border-box;
	display: flex;
	overflow: hidden;
	width: 100%;
}

.accordion-select
{
	cursor: pointer;
	margin: 0;
	opacity: 0;
	z-index: 1;
}

.accordion-title
{
	position: relative;
}

.accordion-title:not(:nth-last-child(2))::after
{
	border: 1px solid transparent;
	bottom: 0;
	content: '';
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.accordion-title span
{
	bottom: 0px;
	box-sizing: border-box;
	display: block;
	white-space: nowrap;
	width: 100%;
}

.accordion-content
{
	box-sizing: border-box;
	overflow: auto;
	position: relative;
	transition: margin 0.3s ease 0.1s;
}

.accordion-select:checked + .accordion-title + .accordion-content
{
	margin-bottom: 0;
	margin-right: 0;
}

/* Generated styles starts here */

.accordion
{
	border-color: #005EB8;
	border-radius: 0px;
	border-style: solid;
	border-width: 2px;
	flex-direction: row;
	height: 300px;
}

.accordion-title,
.accordion-select
{
	background-color: #005EB8;
	color: #ffffff;
	width: 65px;
	height: 100%;
	font-size: 15px;
}

.accordion-select
{
	margin-bottom: -65px;
	margin-right: -65px;
}

.accordion-title:not(:nth-last-child(2))::after
{
	border-bottom-color: transparent;
	border-right-color: #ffffff;
}

.accordion-select:hover + .accordion-title,
.accordion-select:checked + .accordion-title
{
	background-color: #003E96;
}

.accordion-title span
{
	transform: rotate(90deg);
	-ms-writing-mode: lr-bt;
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	padding-bottom: 33px;
	padding-top: 33px;
	line-height: 65px;
}

.accordion-content
{
	background-color: #ffffff;
	color: #001B37;
	height: 100%;
	margin-bottom: 0;
	margin-right: calc(-1 * calc(100% - 390px));
	padding: 0 24px;
	width: calc(100% - 390px);
}

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

@media only screen and (max-width: 1279px)
{
	.menu-icon
	{
		width: auto;
	}

	.nav-search
	{
		width: 100%;
		margin: auto;
		padding-bottom: 1.5em;
	}

	.off-canvas-wrapper-inner nav.title-bar .outer-row
	{
		margin-bottom: unset;
	}

	div.home-tiles-container
	{
		width: 100%;
		padding-bottom: 32px;
	}

	div.home-popular-container
	{
		width: 100%;
		padding-bottom: 0;
	}

	div.left
	{
		width: 100%;
		min-height: unset;
	}

	div.left > div:nth-child(1)
	{
		max-width: 400px;
		padding-right: 20px;
	}

	div.left > div:nth-child(2)
	{
		width: 20%;
		flex-grow: 1;
	}

	div.middle
	{
		width: 70%;
		min-height: unset;
	}

	div.right
	{
		width: 30%;
		min-height: unset;
	}

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

	div.topic-layout > div:nth-child(2)
	{
		width: 100%;
		padding-left: 20px;
		padding-right: 20px;
	}

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

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

@media only screen and (max-width: 767px)
{
	.feat-tile
	{
		width: 100%;
	}

	.tile-title
	{
		width: 100%;
		padding: 8px 16px;
		margin: 0;
	}

	.feat-tile a
	{
		align-items: center;
	}

	.tile-image
	{
		width: 100%;
		padding-bottom: 150px;
	}

	a.home-tile
	{
		width: 100%;
	}

	div.top-bar
	{
		display: none;
	}

	.footer td
	{
		padding: 0 16px;
		text-align: left !important;
		text-wrap-style: balance;
	}

	.footer tbody td:nth-child(1)
	{
		display: none;
	}

	.height-container
	{
		padding-bottom: 250px;
		margin-top: 20px;
	}

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

	div.topic-layout > div:nth-child(2)
	{
		width: 100%;
		padding-left: 20px;
	}

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

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

	div.left
	{
		width: 100%;
		min-height: unset;
	}

	div.left > div:nth-child(1)
	{
		max-width: unset;
		padding-right: 0;
	}

	div.left > div:nth-child(2)
	{
		width: 20%;
		flex-grow: 1;
	}

	div.middle
	{
		width: 100%;
		min-height: unset;
	}

	div.right
	{
		width: 100%;
		min-height: unset;
	}

	.blog-article
	{
		display: flex !important;
		align-items: center;
		flex-direction: column;
	}

	.blog-article > section
	{
		width: 100% !important;
	}

	div.gallery-filters
	{
		width: 100%;
		max-width: none;
		display: flex;
		flex-wrap: wrap;
	}

	div.gallery-gallery
	{
		width: 100%;
		max-width: none;
	}

	div.gallery-filter-section
	{
		flex-grow: 1;
		padding: 0 12px 12px;
	}

	.column1
	{
		width: 100% !important;
	}

	.column1 > img
	{
		width: 100%;
		height: 150px;
		overflow: hidden;
		object-fit: cover;
	}

	.column2
	{
		width: 100% !important;
		padding: 8px;
	}

	.column3
	{
		width: 100% !important;
		padding-bottom: 8px;
	}
}

@media print
{
	.title-bar-container
	{
		min-height: 0 !important;
		/* Removes TopNav's empty height space */
	}

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

	div.topic-layout > div:nth-child(2)
	{
		width: 100%;
		margin: 0;
		padding-left: 0;
		padding-right: 0;
	}

	.column
	{
		padding: 20px;
		margin: 0;
		min-height: unset;
	}

	div.left
	{
		width: 100%;
	}

	div.left > div:nth-child(1)
	{
		max-width: 300px;
		padding-right: 20px;
	}

	div.left > div:nth-child(2)
	{
		width: 20%;
		flex-grow: 1;
	}

	div.middle
	{
		width: 100%;
	}

	div.right
	{
		width: 100%;
	}

	div.side-menu
	{
		display: none;
	}

	a.MCBreadcrumbsLink
	{
		display: none;
	}

	MadCap|breadcrumbsProxy
	{
		display: none;
	}

	div.cta
	{
		display: none;
	}

	div.search-container
	{
		display: none;
	}

	/*	.footer
	{
		display: none;
	}
*/

	div.side-content
	{
		display: none;
	}

	div.top-bar
	{
		display: none;
	}

	.tab-content
	{
		display: inline;
	}

	ul.tabs
	{
		display: none;
	}

	div.flip-box
	{
		height: 100% !important;
		min-height: 100px !important;
		flex: 100% !important;
		max-width: 100% !important;
		width: 100%;
	}

	div.flip-box-front,
	div.flip-box-back
	{
		position: relative !important;
		height: unset !important;
	}

	div.flip-box-inner
	{
		transform: none !important;
		transform-style: unset;
		border: 2px solid #00529F !important;
		padding: 10px;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
	}

	div.flip-box-front
	{
		width: 25%;
		margin: 0;
		background-size: contain;
		background-repeat: no-repeat;
		aspect-ratio: 1 / 1;
	}

	div.flip-box-back
	{
		transform: none !important;
		overflow-y: unset !important;
		margin: 0 0 0 1%;
		width: 74%;
	}

	div.flip-box-inner h2
	{
		margin-top: 0;
	}

	h1.title-page
	{
		font-size: 2em;
		line-height: 1.3em;
		font-weight: bold;
		margin-top: 0;
		margin-bottom: 0.3em;
		color: #003E96;
		border-bottom: none;
	}

	h2.title-page
	{
		font-size: 18pt;
		line-height: 1.2em;
		font-style: normal;
		font-weight: normal;
		margin-top: 1.8em;
		margin-bottom: 1em;
		text-align: left;
		background: transparent;
		padding: 0;
		color: #0070c0;
		margin: 0;
		border-bottom: none;
	}

	h1
	{
		font-size: 1.7em;
		line-height: 1.2em;
		font-weight: bold;
		color: #001D74;
		background-position: center;
		margin-bottom: 1em;
		margin-top: 0;
		padding-bottom: 0.2em;
		border-bottom: 2px solid #001D74;
	}

	h2
	{
		font-size: 1.3em;
		line-height: 1.1em;
		text-align: center;
		font-style: normal;
		font-weight: bold;
		margin-top: 1.8em;
		margin-bottom: 1em;
	}

	h3
	{
		font-size: 1.3em;
		line-height: 1.1em;
		color: #001D74;
		font-weight: bold;
		margin-bottom: 0;
		margin-top: 1.4em;
	}

	h4
	{
		font-size: 1em;
		line-height: 1.1em;
		text-align: left;
		color: #000000;
		font-weight: normal;
		margin-bottom: 0;
		margin-top: 1em;
	}

	h5
	{
		font-weight: bold;
		color: #000000;
		margin-bottom: 0.2em;
		margin-top: 1em;
		font-size: 1.1em;
	}

	p
	{
		hyphens: none;
		word-break: normal;
		overflow-wrap: normal;
		-webkit-hyphens: none;
		-moz-hyphens: none;
		-ms-hyphens: none;
		page-break-inside: avoid;
	}

	li,
	h2,
	ul,
	table,
	tr
	{
		hyphens: none;
		word-break: normal;
		overflow-wrap: normal;
		-webkit-hyphens: none;
		-moz-hyphens: none;
		-ms-hyphens: none;
	}

	ol
	{
		margin-bottom: 1.2em;
		padding-inline-start: 1.5em;
	}

	ul
	{
		margin-bottom: 1.2em;
		padding-inline-start: 1.5em;
	}

	ul ul
	{
		list-style-type: circle;
		margin-top: 0.8em;
	}

	ul ol
	{
		margin-top: 0.8em;
	}

	ol ul
	{
		margin-top: 0.8em;
	}

	li ol
	{
		margin-top: 0.8em;
	}

	li
	{
		margin-bottom: 0.8em;
		margin-top: 0.8em;
	}

	li p
	{
		margin-bottom: 0;
		margin-top: 0;
	}

	body
	{
		font-size: 11pt;
		line-height: 1.4em;
		color: #000000;
		height: unset;
	}

	div.note
	{
		background-image: url('../Images/Assets/TextBox/Note-Icon_PRINT.png');
		line-height: inherit;
		background-position: 16px center;
		min-height: 60px;
		background-size: 45px;
		padding: 20px 20px 20px 75px;
	}

	div.emphasise
	{
		background-position-x: 16px;
		padding: 20px 80px;
		line-height: inherit;
	}

	div.rabbit
	{
		line-height: inherit;
		background-size: 45px;
		padding: 20px 20px 20px 75px;
		background-position-x: 16px;
	}

	div.FGcallout
	{
		padding: 15px;
	}

	div.note p
	{
		margin-top: 0;
		margin-bottom: 0;
	}
}

@media print
{
	*,
	*::before,
	*::after
	{
		text-shadow: none !important;
		box-shadow: none !important;
	}

	a:not(.btn)
	{
		text-decoration: underline;
	}

	abbr[title]::after
	{
		content: " (" attr(title) ")";
	}

	pre
	{
		white-space: pre-wrap !important;
	}

	pre,
	blockquote
	{
		border: 1px solid #adb5bd;
		page-break-inside: avoid;
	}

	thead
	{
		display: table-header-group;
	}

	tr,
	img
	{
		page-break-inside: avoid;
	}

	p,
	h2,
	h3
	{
		orphans: 3;
		widows: 3;
	}

	h2,
	h3
	{
		page-break-after: avoid;
	}

	body
	{
		min-width: 210mm !important;
		width: 100%;
	}
}

MadCap|dropDownHead.Boxed:hover
{
	background-color: #F2F6FA;
}