/*<meta />*/

/*Custom fonts*/

@import url('https://use.typekit.net/rxy4nij.css');

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

:root
{
	/*Variables. Note that changing these variables will effect any element where the variable is used.*/
	/*Colours*/
	--Dark-Blue: #224d8f;
	--TDE-Blue: #3f5673;
	--Blue: #0077C4;
	--Light-Blue: #2bacff;
	--Light-BlueGrey: #f0f8ff;
	--Light-BlueBanner: #e4f1f9;
	--Black: #000000;
	--Dark-Grey: #66676c;
	--Medium-Grey: #b9bec1;
	--Light-Grey: #ededed;
	--Code-Grey: #f6f6f6;
	--White: #ffffff;
	--Light-Red: #f8e8e8;
	--Dark-Red: #870000;
	--Red: #b40000;
	--Green: #008552;
	--Light-Green: #e6ffe6;
	--Purple: #5b2e7e;
	--Yellow: #ffff8f;
	--Yellow-Banner: #f5f5dc;
	--Yellow-Visa: #ffc107;
	--Dark-Background: #2a2f3a;
	--Dark-Heading: #1d1d1d;
	--Dark-Selected: #484c54;
	--Table-Header-Blue: #e3f3fd;
	--Table-Row-Grey: #f5f5f5;
	--TermTime-Green: #a2cf2c;
	/*Tribal logo*/
	--YourLogo: url('../Images/Logo/tribal-edge.png');
	/*Padding*/
	--Padding-Web: 39px;
	--Padding-Tablet: 26px;
	--Padding-Mobile: 13px;
	--Padding-Web-Header: 52px;
	--Padding-Tablet-Header: 39px;
	--Padding-Mobile-Header: 13px;
	--Chips: 3px;
	--Col-width1: 5%;
	--Col-width2: 20%;
	--Col-width3: 65%;
	--Col-width4: 10%;
}

/* Styles used in topic content */

img
{
	/* Generic image class */
	border-style: none;
	max-width: 100%;
}

img.person
{
	min-width: 32px;
	max-width: 38px;
	padding: 6px;
}

caption
{
	text-align: left;
	margin-top: 0px;
	margin-bottom: 6px;
	font-weight: bold;
	font-style: normal;
	color: var(--Dark-Blue);
}

p
{
	/* Paragraph margins */
	margin-top: 0.75em;
	margin-bottom: 0.75em;
}

p.header
{
	/* Paragraph headers */
	margin: 0px;
	padding-bottom: 6px;
	font-size: 0.9em;
	color: var(--White);
}

/* Headings */

h1,
h2,
h3,
h4,
h5,
h6
{
	font-family: soleil, sans-serif;
	color: var(--Dark-Heading);
}

p.h3
{
	margin-top: 6px;
	margin-bottom: 0px;
	color: var(--Dark-Heading);
	font-family: soleil, sans-serif;
	font-weight: 600;
}

h3
{
	font-size: 1.10em;
	font-weight: bold;
	font-style: normal;
	margin-top: 6px;
	margin-bottom: 6px;
}

/*Level 5 an 6 headers for the side menu skin*/

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

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

/*Decision making status chips*/

.icon-creating-file
{
	color: var(--Black);
	font-weight: normal;
	background-color: #ffc107;
	padding: 0px var(--Chips) 0px;
	border-radius: var(--Chips);
}

.icon-draft
{
	color: var(--White);
	font-weight: normal;
	background-color: var(--Blue);
	padding: 0px var(--Chips) 0px;
	border-radius: var(--Chips);
}

.icon-passed
{
	color: var(--White);
	font-weight: normal;
	background-color: var(--Green);
	padding: 0px var(--Chips) 0px;
	border-radius: var(--Chips);
}

.icon-pending
{
	color: var(--Dark-Heading);
	font-weight: normal;
	background-color: #d3d3d3;
	/* Note background-colour from UI not Flo */
	padding: 0px var(--Chips) 0px;
	border-radius: var(--Chips);
}

.icon-failed
{
	color: var(--Red);
	font-weight: normal;
	background-color: var(--White);
	padding: 0px var(--Chips) 0px;
	border-radius: var(--Chips);
	border: solid 1px var(--Red);
}

.icon-rejected
{
	color: var(--White);
	font-weight: normal;
	background-color: var(--Red);
	padding: 0px var(--Chips) 0px;
	border-radius: var(--Chips);
}

.icon-notstarted
{
	font-weight: normal;
	background-color: var(--White);
	padding: 0px var(--Chips) 0px;
	border-radius: var(--Chips);
}

.icon-license2
{
	color: white;
	background-color: #d64309;
	padding-left: 13px;
	padding-right: 13px;
	border-radius: 13px;
	border-style: none;
}

.icon-license3
{
	color: white;
	background-color: #008552;
	padding-left: 13px;
	padding-right: 13px;
	border-radius: 13px;
	border-style: none;
}

.icon-creating
{
	background-color: #ffc107;
	padding-left: 6px;
	padding-right: 6px;
	border-radius: 6px;
	border-style: none;
}

.icon-downloaded
{
	color: white;
	background-color: var(--Blue);
	padding-left: 6px;
	padding-right: 6px;
	border-radius: 6px;
	border-style: none;
}

.icon-ready
{
	color: white;
	background-color: var(--Green);
	padding-left: 6px;
	padding-right: 6px;
	border-radius: 6px;
	border-style: none;
}

/*Clearance check status chips*/

.offer-condition
{
	color: var(--White);
	font-weight: normal;
	background-color: #3F5673;
	padding: 0px var(--Chips) 0px;
	border-radius: var(--Chips);
}

/*API methods - colours from Redoc*/

.api-get
{
	color: var(--White);
	font-weight: normal;
	background-color: #2f8132;
	padding: 0px var(--Chips) 0px;
	border-radius: var(--Chips);
}

.api-put
{
	color: var(--White);
	font-weight: normal;
	background-color: #95507c;
	padding: 0px var(--Chips) 0px;
	border-radius: var(--Chips);
}

.api-patch
{
	color: var(--White);
	font-weight: normal;
	background-color: #bf581d;
	padding: 0px var(--Chips) 0px;
	border-radius: var(--Chips);
}

.api-post
{
	color: var(--White);
	font-weight: normal;
	background-color: #186faf;
	padding: 0px var(--Chips) 0px;
	border-radius: var(--Chips);
}

.api-delete
{
	color: var(--White);
	font-weight: normal;
	background-color: #cc3333;
	padding: 0px var(--Chips) 0px;
	border-radius: var(--Chips);
}

/*Borders*/

.healthy
{
	border-left: 5px solid #4cdebb;
}

.atrisk
{
	border-left: 5px solid #ffbe72;
}

.breached
{
	border-left: 5px solid #b40000;
}

/*Tables*/
/*Note that table colours are different from the standard colours used for variables. */

thead
{
	background-color: #0362A2;
	color: var(--White);
	text-align: left;
	font-weight: bold;
}

tbody
{
	border-collapse: collapse;
}

table
{
	border-collapse: collapse;
	border: 1px solid #66667c;
	padding: 3px;
}

th,
td
{
	padding: 8px;
	text-align: left;
	border: 1px solid #004B7D;
}

td.release-notes-col1
{
	vertical-align: top;
	text-align: left;
	padding-left: 6px;
	padding-right: 12px;
	padding-top: 6px;
	padding-bottom: 6px;
}

td.align-top
{
	padding-left: 6px;
	padding-top: 6px;
	padding-bottom: 6px;
	padding-right: 12px;
	vertical-align: top;
}

tr.grey
{
	background: var(--Light-Grey);
	border-bottom: none 2px var(--Black);
}

table.noborder
{
	border: none 2px var(--Black);
	width: 100%;
}

/*Unique styles for Submissions */

td.submissions-column
{
	font-weight: bold;
	font-style: normal;
	background: #0362A2;
	color: var(--White);
}

td.submissions-missing
{
	font-family: 'Open Sans';
	color: var(--White);
	font-weight: bold;
	padding: 6px;
	background-color: #C6282A;
}

/*Rowspan table styles*/

table.rowspan
{
	border-collapse: collapse;
	margin: 20px 0;
	width: auto;
	overflow: hidden;
}

table.rowspan thead tr
{
	background-color: var(--Table-Header-Blue);
	color: var(--Dark-Heading);
	text-align: left;
	font-weight: bold;
}

table.rowspan th,
table.rowspan td
{
	padding: 0px 8px;
	text-align: left;
	border: 1px solid #004B7D;
}

table.rowspan td
{
	vertical-align: top;
}

table.rowspan tbody:nth-child(odd)
{
	background: var(--Table-Row-Grey);
}

table.rowspan tbody tr.active-row,
td.active row
{
	font-weight: bold;
	color: #3F5673;
}

/*Large rowspan table styles*/

table.large-rowspan
{
	border-collapse: collapse;
	margin: 20px 0;
	width: auto;
	overflow: hidden;
}

table.large-rowspan thead tr
{
	background-color: var(--Table-Header-Blue);
	color: var(--Dark-Heading);
	text-align: left;
	font-weight: bold;
}

table.large-rowspan th,
table.large-rowspan td
{
	padding: 8px;
	text-align: left;
	border: 1px solid #004B7D;
}

table.large-rowspan td
{
	vertical-align: top;
}

table.large-rowspan tbody:nth-child(odd)
{
	background: var(--Table-Row-Grey);
}

table.large-rowspan tbody tr.active-row,
td.active row
{
	font-weight: bold;
	color: #3F5673;
}

/*Large mobile table styles*/

table.large-mobile
{
	border-collapse: collapse;
	margin-bottom: 12px;
	width: auto;
	overflow: hidden;
	border: 1px solid #004B7D;
	/* outer border */
}

/* Header row */

table.large-mobile thead tr
{
	background-color: var(--Table-Header-Blue);
	color: var(--Dark-Heading);
	text-align: left;
	font-weight: bold;
}

/* Cells */

table.large-mobile th,
table.large-mobile td
{
	padding: 8px 12px;
	/* Use padding for spacing instead of <p> margins */
	text-align: left;
	border: 1px solid #004B7D;
	vertical-align: top;
}

/* Remove margins from paragraphs inside cells */

table.large-mobile th p,
table.large-mobile td p
{
	margin: 0;
	/* Kill top/bottom margins */
}

/* Optional: spacing between multiple paragraphs in same cell */

table.large-mobile td p + p
{
	margin-top: 0.5em;
	/* Only add spacing between paragraphs */
}

/* Zebra striping */

table.large-mobile tbody tr:nth-of-type(even)
{
	background-color: var(--Table-Row-Grey);
}

/* Active row styling */

table.large-mobile tbody tr.active-row,
table.large-mobile td.active-row
{
	font-weight: bold;
	color: #3F5673;
}

/*Large release table styles*/

table.large-release
{
	border-collapse: collapse;
	margin: 20px 0;
	width: auto;
	overflow: hidden;
}

table.large-release thead tr
{
	background-color: #0362A2;
	color: var(--White);
	text-align: left;
	font-weight: bold;
}

table.large-release th,
table.large-release td
{
	padding: 0px 8px;
	text-align: left;
	border: 1px solid #004B7D;
}

table.large-release td
{
	vertical-align: top;
}

table.large-release tbody tr:nth-of-type(even)
{
	background-color: #E3F3FD;
}

table.large-release tbody tr.active-row,
td.active row
{
	font-weight: bold;
	color: #3F5673;
}

/*Alternative banding table styles */

table.alt-banding
{
	border-collapse: collapse;
	margin: 20px 0;
	width: auto;
	overflow: hidden;
}

table.alt-banding thead tr
{
	background-color: var(--Table-Header-Blue);
	color: var(--Dark-Heading);
	text-align: left;
	font-weight: bold;
}

table.alt-banding th,
table.alt-banding td
{
	padding: 8px;
	text-align: left;
	border: 1px solid #004B7D;
}

table.alt-banding td
{
	vertical-align: top;
}

table.alt-banding tbody tr:nth-of-type(even)
{
	background-color: var(--Table-Row-Grey);
}

table.alt-banding tbody tr.active-row,
td.active row
{
	font-weight: bold;
	color: #3F5673;
}

td.person
{
	text-align: center;
}

/* Defines styles for code snippets in tables. */
/*Image styles*/

figure
{
	text-align: center;
	max-height: auto;
	max-width: 100%;
	background-color: var(--Light-Grey);
	padding-top: 0px;
	padding-right: 13px;
	padding-bottom: 13px;
	padding-left: 13px;
	border-radius: 10px;
	margin-left: 0px;
	margin-right: 0px;
	display: inline-block;
}

figcaption
{
	text-align: center;
	margin-top: 0px;
	margin-bottom: 6px;
	font-weight: bold;
	font-style: normal;
	color: var(--Dark-Blue);
	padding-top: 6px;
	padding-bottom: 6px;
	background-color: var(--Light-Grey);
}

figure.nocaption
{
	text-align: center;
	max-height: auto;
	max-width: 100%;
	background-color: var(--Light-Grey);
	padding: 13px;
	border-radius: 10px;
	margin-left: 0px;
	margin-right: 0px;
}

p.image
{
	text-align: center;
}

div.tribal-cell
{
	background-color: var(--Light-Grey);
	padding-top: 0px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	margin-left: 10px;
	margin-right: 10px;
	border-radius: 10px;
	display: block;
}

img.tribal-cell
{
	background-color: var(--White);
	padding: 10px;
	border-radius: 10px;
	border-left-style: none;
	border-right-style: none;
	border-top-style: none;
	border-bottom-style: none;
	width: 100%;
	height: auto;
	max-width: 100%;
}

img.process
{
	padding-left: 10px;
	margin: 0px;
}

img.table-image
{
	border: 5px solid var(--Light-Grey);
	border-radius: 5px;
}

.inline
{
	
}

img.inline
{
	vertical-align: text-bottom;
	padding: 0px;
}

/*Gateway card*/

.card-grid
{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
	padding: 20px;
}

.card-attention-box
{
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 0px;
	padding-bottom: 0px;
}

.card-admissions
{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	/* Pushes content to top and bottom */
	height: 100%;
	/* Ensures it fills the grid cell */
	border-left: 6px solid #0077c4;
	border-right: 1px solid #ddd;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	border-radius: 5px;
	padding: 16px;
	width: 100%;
	/* Let the grid control the width */
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card-tde
{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	/* Pushes content to top and bottom */
	height: 100%;
	/* Ensures it fills the grid cell */
	border-left: 6px solid var(--TDE-Blue);
	border-right: 1px solid #ddd;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	border-radius: 5px;
	padding: 16px;
	width: 100%;
	/* Let the grid control the width */
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card-immigration
{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	/* Pushes content to top and bottom */
	height: 100%;
	/* Ensures it fills the grid cell */
	border-left: 6px solid var(--Yellow-Visa);
	border-right: 1px solid #ddd;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	border-radius: 5px;
	padding: 16px;
	width: 100%;
	/* Let the grid control the width */
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card-submissions
{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	/* Pushes content to top and bottom */
	height: 100%;
	/* Ensures it fills the grid cell */
	border-left: 6px solid green;
	border-right: 1px solid #ddd;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	border-radius: 5px;
	padding: 16px;
	width: 100%;
	/* Let the grid control the width */
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card-termtime
{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	/* Pushes content to top and bottom */
	height: 100%;
	/* Ensures it fills the grid cell */
	border-left: 6px solid var(--TermTime-Green);
	border-right: 1px solid #ddd;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	border-radius: 5px;
	padding: 16px;
	width: 100%;
	/* Let the grid control the width */
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card-generic
{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	/* Pushes content to top and bottom */
	height: 100%;
	/* Ensures it fills the grid cell */
	border-left: 6px solid black;
	border-right: 1px solid #ddd;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	border-radius: 5px;
	padding: 16px;
	width: 100%;
	/* Let the grid control the width */
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card-header
{
	background-color: #0078d4;
	color: white;
	padding: 8px;
	border-radius: 3px;
	display: inline-block;
	font-weight: bold;
}

.card-title
{
	font-weight: bold;
}

.card-description
{
	color: var(--Dark-Heading);
	margin-top: 8px;
}

.card-button
{
	display: inline-block;
	margin-top: 16px;
	padding: 10px 20px;
	background-color: white;
	color: var(--Dark-Blue);
	text-decoration: none;
	border-radius: 5px;
	border: 1px solid #ddd;
	font-size: 0.9em;
	font-weight: bold;
	text-align: center;
}

/*Gateway grid*/

div.grid-container
{
	display: grid;
	grid-template-columns: auto auto auto auto;
	padding: 20px;
	margin: 20px;
	background-color: var(--Light-Grey);
	border: 2px solid var(--Light-Grey);
	border-radius: 5px;
}

div.grid-item
{
	/*border: 1px solid rgba(0, 0, 0, 0.8);*/
	border-left: 5px solid black;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: left;
	margin: 20px;
	background-color: var(--White);
}

div.grid-admissions
{
	/*border: 1px solid rgba(0, 0, 0, 0.8);*/
	border-left: 5px solid var(--Dark-Blue);
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: left;
	margin: 20px;
	background-color: var(--White);
}

div.grid-tde
{
	/*border: 1px solid rgba(0, 0, 0, 0.8);*/
	border-left: 5px solid var(--TDE-Blue);
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: left;
	margin: 20px;
	background-color: var(--White);
}

div.grid-submissions
{
	/*border: 1px solid rgba(0, 0, 0, 0.8);*/
	border-left: 5px solid green;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: left;
	margin: 20px;
	background-color: var(--White);
}

div.grid-visa
{
	/*border: 1px solid rgba(0, 0, 0, 0.8);*/
	border-left: 5px solid var(--Yellow-Visa);
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: left;
	margin: 20px;
	background-color: var(--White);
}

/*Admissions tiles */

.tile-container
{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 20px;
	padding: 20px;
	background-color: #f9f9f9;
}

.tile
{
	display: block;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	padding: 20px;
	text-align: center;
	text-decoration: none;
	color: #333;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tile:hover
{
	transform: translateY(-5px);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.icon
{
	font-size: 40px;
	margin-bottom: 10px;
	color: #0056b3;
}

h2.content-tile
{
	font-size: 1.2em;
	margin-bottom: 10px;
}

p.content-tile
{
	font-size: 0.95em;
	color: #555;
}

/*Align block centre*/

div.block-centre
{
	text-align: center;
}

/*Code block*/

div.code-block
{
	margin-top: 0.75em;
	margin-bottom: 0.75em;
	background-color: var(--Code-Grey);
	border: solid 1px var(--Light-Grey);
	border-radius: 6px;
	overflow: hidden;
	padding-top: 6px;
	padding-left: 24px;
	padding-bottom: 6px;
	padding-right: 6px;
}

/*Attention blocks*/

div.attention
{
	margin-top: 0.75em;
	margin-bottom: 0.75em;
	background-color: var(--Light-Grey);
	background-repeat: no-repeat;
	background-position: 12px center;
	border: solid 1px var(--Dark-Blue);
	border-radius: 6px;
	overflow: hidden;
	padding: 15px 80px;
	padding-bottom: 6px;
	padding-top: 6px;
	padding-right: 6px;
	background-image: url('../Images/Edge/info-circle.png');
	padding-left: 60px;
}

div.attention-block
{
	margin-top: 0.75em;
	margin-bottom: 0.75em;
	background-color: var(--Light-Grey);
	background-repeat: no-repeat;
	background-position: 12px 12px;
	border: solid 1px var(--Dark-Blue);
	border-radius: 6px;
	overflow: hidden;
	padding: 15px 80px;
	padding-bottom: 6px;
	padding-right: 6px;
	padding-top: 6px;
	background-image: url('../Images/Edge/info-circle.png');
}

div.warning
{
	margin-top: 0.75em;
	margin-bottom: 0.75em;
	background-color: var(--Yellow);
	background-repeat: no-repeat;
	background-position: 12px 12px;
	border: solid 2px #000000;
	border-radius: 6px;
	overflow: hidden;
	padding: 15px 80px;
	padding-bottom: 6px;
	padding-right: 6px;
	padding-top: 6px;
	background-image: url('../Images/Edge/icon-warning.png');
}

/*Example blocks*/

div.example
{
	position: relative;
	margin-top: 0.75em;
	margin-bottom: 0.75em;
	background-color: var(--Light-BlueGrey);
	border-left: 5px solid var(--Dark-Blue);
	overflow: hidden;
	padding-left: 1.2rem;
	padding-bottom: 0.6rem;
	padding-right: 0.6rem;
	padding-top: 1.8em;
}

div.example::before
{
	content: "Example";
	position: absolute;
	top: 0.6rem;
	font-weight: bold;
}

/*Integration blocks*/

div.integration
{
	position: relative;
	margin-top: 0.75em;
	margin-bottom: 0.75em;
	background-color: var(--Light-Green);
	border-left: 5px solid var(--Green);
	overflow: hidden;
	padding-left: 1.2rem;
	padding-bottom: 0.6rem;
	padding-right: 0.6rem;
	padding-top: 1.8em;
}

div.integration::before
{
	content: "Integration APIs";
	position: absolute;
	top: 0.6rem;
	font-weight: bold;
}

/*Callista blocks*/

div.callista
{
	position: relative;
	margin-top: 0.75em;
	margin-bottom: 0.75em;
	background-color: var(--Light-BlueGrey);
	border-left: 5px solid #ce2e7a;
	overflow: hidden;
	padding-left: 1.2rem;
	padding-bottom: 0.6rem;
	padding-right: 0.6rem;
	padding-top: 1.8em;
}

div.callista::before
{
	content: "Callista";
	position: absolute;
	top: 0.6rem;
	font-weight: bold;
}

/*SITS block*/

div.sits
{
	position: relative;
	margin-top: 0.75em;
	margin-bottom: 0.75em;
	background-color: var(--Light-BlueGrey);
	border-left: 5px solid #ce2e7a;
	/* Colour only used for SITS block so no variable. */
	overflow: hidden;
	padding-left: 1.2rem;
	padding-right: 0.6rem;
}

/*Comms template*/

div.comms
{
	position: relative;
	margin-top: 0.75em;
	margin-bottom: 0.75em;
	background-color: var(--Light-BlueGrey);
	overflow: hidden;
	padding-left: 1.2rem;
	padding-right: 0.6rem;
	width: 520px;
	margin: 0 auto;
}

/*Banners*/

div.banner-blue
{
	margin-left: 40px;
	margin-right: 40px;
	background-color: var(--Light-BlueBanner);
	background-repeat: no-repeat;
	background-position: 12px center;
	border: solid 1px var(--Light-BlueBanner);
	border-radius: 6px;
	overflow: hidden;
	padding: 15px 80px;
	padding-bottom: 3px;
	padding-top: 3px;
	padding-right: 3px;
	background-image: url('../Images/Edge/icon-banner-blue.png');
	padding-left: 46px;
}

div.banner-embargo
{
	position: relative;
	margin-left: 1.5em;
	margin-right: 1.5em;
	margin-top: 0.75m;
	margin-bottom: 0.75em;
	background-color: var(--Yellow-Banner);
	border: 1px solid var(--Black);
	overflow: hidden;
	padding-left: 2.0rem;
	padding-right: 2.0rem;
	text-align: center;
	font-size: 0.9em;
}

div.translate-blue
{
	margin-right: 40px;
	background-color: var(--Light-BlueBanner);
	background-repeat: no-repeat;
	background-position: 12px center;
	border: solid 1px var(--Light-BlueBanner);
	border-radius: 6px;
	overflow: hidden;
	padding: 15px 80px;
	padding-bottom: 3px;
	padding-top: 3px;
	padding-right: 3px;
	background-image: url('../Images/Edge/icon-banner-blue.png');
	padding-left: 46px;
}

/*Tag styles*/

h1
{
	margin-top: 0;
}

h2
{
	padding: 0px;
}

p.home
{
	margin-top: 10px;
	color: var(--Dark-Blue);
	font-weight: bold;
	font-style: normal;
	text-align: center;
}

h1.homepage
{
	font-size: 3em;
	text-align: center;
}

/*Code block*/

div.code
{
	padding: 0.5em;
	background-color: #f6f6f6;
}

p.code
{
	font-family: Consolas, Monaco, 'Courier New', monospace;
	font-size: 9pt;
	line-height: 1em;
}

/* Output styles */

span.systemoutput
{
	font-family: soleil, sans-serif;
	color: var(--Dark-Grey);
	font-weight: normal;
}

span.red
{
	color: var(--Dark-Red);
}

/* Equation styles */

span.equation
{
	display: inline;
	vertical-align: -6px;
}

@media print
{
	h1
	{
		font-family: Calibri;
		font-size: 16pt;
		font-weight: normal;
		padding-left: 6px;
		background: var(--Dark-Blue);
		color: var(--White);
		margin-left: 0;
		margin-top: 6pt;
		margin-bottom: 12pt;
	}

	p
	{
		text-align: left;
		font-size: 11pt;
		font-family: Calibri;
		margin-left: 0;
		line-height: 13pt;
	}

	p.table
	{
		text-align: left;
		font-size: 10pt;
		font-family: Calibri;
		margin-left: 0;
		line-height: 10pt;
	}

	h2
	{
		font-size: 14pt;
		font-family: Calibri;
		font-weight: bold;
		font-style: normal;
	}

	h1.header-bar
	{
		color: var(--White);
	}

	h3
	{
		font-size: 12pt;
		font-family: Calibri;
	}

	p.title
	{
		padding-top: 172pt;
		font-size: 22pt;
		font-weight: bold;
		font-style: normal;
	}

	p.title2
	{
		padding-top: 18pt;
		font-size: 18pt;
		font-weight: bold;
		font-style: normal;
	}

	div.attention-print
	{
		margin-top: 0.75em;
		margin-bottom: 0.75em;
		background-color: var(--Light-Grey);
		border: solid 1px var(--Dark-Blue);
		border-radius: 6px;
		overflow: hidden;
		padding-top: 12px;
		padding-bottom: 6px;
		padding-left: 12px;
		padding-right: 6px;
	}

	p.print-footer
	{
		padding-bottom: 3pt;
		line-height: 9pt;
		font-size: 9pt;
		color: var(--White);
	}

	/* Not used */

	p.print-hide
	{
		font-family: Calibri;
		font-size: 16pt;
		font-weight: normal;
		color: var(--White);
		background: var(--Dark-Blue);
		mc-toc-depth: 4;
		padding-top: 6pt;
		padding-bottom: 12pt;
		line-height: 19pt;
		margin-left: 0;
	}

	caption
	{
		font-family: Calibri;
		font-size: 11pt;
		text-align: left;
		margin-bottom: 6px;
		font-weight: bold;
		font-style: normal;
		color: var(--Dark-Blue);
	}

	/*Table large release for print*/

	table.large-release
	{
		padding-left: 0px;
		padding-right: 0px;
		padding-top: 0px;
		padding-bottom: 0px;
		border-collapse: collapse;
		width: auto;
		overflow: hidden;
		mc-caption-repeat: true;
		mc-caption-continuation: ' (continued)';
	}

	table.large-release th
	{
		padding-left: 6pt;
		padding-top: 3pt;
		padding-bottom: 3pt;
		border: 1px solid var(--Dark-Blue);
		border-collapse: collapse;
		background-color: var(--Dark-Blue);
		color: var(--White);
		text-align: left;
		font-weight: bold;
	}

	table.large-release td
	{
		padding-top: 3pt;
		padding-bottom: 3pt;
		border: 1px solid var(--Dark-Blue);
		border-collapse: collapse;
		text-align: left;
		vertical-align: top;
		page-break-inside: avoid;
	}

	/*Table for the footer*/

	table.print-footer
	{
		text-align: left;
		vertical-align: middle;
		font-size: 9pt;
		font-family: Calibri;
		border-left-style: none;
		border-right-style: none;
		border-top-style: none;
		border-bottom-style: none;
		padding-left: 3pt;
		padding-right: 3pt;
		padding-top: 3pt;
		padding-bottom: 3pt;
	}

	/*Table for the footer*/

	table.print-footer
	{
		text-align: left;
		vertical-align: middle;
		font-size: 9pt;
		font-family: Calibri;
		border-left-style: none;
		border-right-style: none;
		border-top-style: none;
		border-bottom-style: none;
		padding-left: 3pt;
		padding-right: 3pt;
		padding-top: 3pt;
		padding-bottom: 3pt;
	}

	/*Table Footer - cell*/

	td.print
	{
		border: none 2px #000000;
		page-break-inside: avoid;
	}

	/*Feature and bug table styles*/

	table.print-release
	{
		padding-left: 0px;
		padding-right: 0px;
		padding-top: 0px;
		padding-bottom: 0px;
		border-collapse: collapse;
		width: auto;
		overflow: hidden;
		mc-caption-repeat: true;
		mc-caption-continuation: ' (continued)';
	}

	table.print-release th
	{
		padding-left: 3pt;
		padding-top: 3pt;
		padding-bottom: 3pt;
		border: 1px solid var(--Dark-Blue);
		border-collapse: collapse;
		background-color: var(--Dark-Blue);
		color: var(--White);
		text-align: left;
		font-weight: bold;
	}

	table.print-release td
	{
		padding-top: 3pt;
		padding-bottom: 3pt;
		border: 1px solid var(--Dark-Blue);
		border-collapse: collapse;
		text-align: left;
		vertical-align: top;
		page-break-inside: avoid;
	}

	span.systemoutput
	{
		font-family: 'Microsoft Sans Serif';
		font-size: 10pt;
	}

	code
	{
		font-family: 'Courier New';
	}

	body
	{
		font-family: Calibri;
	}

	dd
	{
		font-family: Calibri;
	}

	dt
	{
		font-family: Calibri;
	}

	h4
	{
		font-family: Calibri;
	}

	li
	{
		font-family: Calibri;
	}

	ol
	{
		font-family: Calibri;
	}

	ul
	{
		font-family: Calibri;
	}

	h2.break
	{
		column-break-before: always;
	}
}

/*Search styles */

h1 span.SearchHighlight
{
	background-color: inherit;
}

h2 span.SearchHighlight
{
	background-color: inherit;
}

span.SearchHighlight
{
	background-color: #fffacd;
}

@keyframes example {

    /* Search highlight text fade*/
    from {
        background-color: #ffd700;
    }

    to {
        background-color: #fffacd;
    }
} 

a.MCBreadcrumbsLink
{
	color: var(--White) !important;
}

/* Code snippet styles */

table.home-footer
{
	border: none 2px var(--Black);
}

/*Equation style */

p.equation
{
	font-size: 14pt;
	font-family: 'Cambria Math';
	text-align: center;
	word-spacing: -1px;
}

/* Tribal count icon */

span.tribal-count-icon
{
	font-weight: bold;
	font-style: normal;
	font-size: 0.9em;
	color: var(--White);
	background-color: var(--Blue);
	display: inline;
	line-height: 100%;
	padding-top: 1px;
	padding-bottom: 1px;
	padding-left: 6px;
	padding-right: 6px;
	border-radius: 13px;
}

/* Tribal button styles */

span.tribal-link-blue
{
	font-weight: normal;
	font-style: normal;
	color: var(--Blue);
	display: inline;
	line-height: 100%;
}

span.tribal-button-blue
{
	font-weight: bold;
	font-style: normal;
	font-size: 0.9em;
	color: var(--Blue);
	display: inline;
	line-height: 100%;
}

span.tribal-button-red
{
	font-weight: bold;
	font-style: normal;
	font-size: 0.9em;
	color: var(--Red);
	display: inline;
	line-height: 100%;
}

span.tribal-button
{
	font-weight: bold;
	font-style: normal;
	font-size: 0.9em;
	color: var(--White);
	background-color: var(--Blue);
	display: inline;
	line-height: 100%;
	padding: 1px 3px;
	border-radius: 3px;
}

span.tribal-button-failed
{
	font-weight: bold;
	font-style: normal;
	font-size: 0.9em;
	color: var(--White);
	background-color: var(--Red);
	display: inline;
	line-height: 100%;
	padding: 1px 3px;
	border-radius: 3px;
}

span.tribal-button-lower
{
	font-style: normal;
	font-size: 0.9em;
	color: var(--White);
	background-color: var(--Blue);
	display: inline;
	line-height: 100%;
	padding: 1px 3px;
	border-radius: 3px;
}

span.tribal-greyed-out
{
	font-weight: bold;
	font-style: normal;
	font-size: 0.9em;
	color: #1D1D1D;
	background-color: #DBDBDB;
	display: inline;
	line-height: 100%;
	padding: 1px 3px;
	border-radius: 3px;
}

span.tribal-banner-yellow
{
	font-weight: normal;
	font-style: normal;
	font-size: 0.9em;
	background-color: var(--Yellow);
	display: inline;
	line-height: 120%;
	border: 1px solid var(--Black);
	padding: 1px 3px;
	border-radius: 3px;
	width: 100%;
}

span.reference-data-grey
{
	font-weight: bold;
	font-style: normal;
	font-size: 0.9em;
	color: #1D1D1D;
	background-color: #DBDBDB;
	display: inline;
	line-height: 100%;
	padding: 1px 3px;
	border-radius: 3px;
}

span.reference-data-blue
{
	font-weight: bold;
	font-style: normal;
	font-size: 0.9em;
	color: #1D1D1D;
	background-color: #2BACFF;
	display: inline;
	line-height: 100%;
	padding: 1px 3px;
	border-radius: 3px;
}

span.reference-data-number
{
	color: #00B050;
}

/* Accessibility styles */

.visually-hidden
{
	/* Hides text from screen but is still read by screenreader. */
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

caption.tribal
{
	text-align: left;
	margin-top: 0px;
	margin-bottom: 6px;
	font-weight: bold;
	font-style: normal;
	color: var(--Dark-Blue);
}

/* Video styles */

#videotoc li
{
	cursor: pointer;
	color: var(--Dark-Blue);
	text-decoration: underline;
}

#videoarea
{
	max-height: auto;
	max-width: 100%;
}

/* iFrame style for Connectors - Events topic. */

iframe
{
	width: 100%;
	border: none;
	height: 80vmax;
	padding-top: 7px;
}

/* Classes used by Javascript. */

.hide-header
{
	/* Defines a class for the hide header function. */
}

.eta
{
	/* Defines a class for the estimated time to read function. */
}

table#searchable
{
	/* Defines a class to add search functionality to tables. */
}

/*Theme styles - including Home pages and Master pages. */
/* Home page styles. Note that these styles should not be changed without careful consideration.*/
/* Theme styles. Note that these styles should not be changed without careful consideration. */

body
{
	/* Defines the body text styles. */
	font-family: 'Open Sans', sans-serif;
	mc-hyphenate: never;
	font-size: 15px;
	line-height: 1.5;
}

.topic-box
{
	/*Defines the shadow around main content body. */
	padding: 6px 13px 13px 13px;
	border: solid 1px var(--Light-Grey);
	box-shadow: 0 2px 34px 0 rgba(0, 0, 0, .1) !important;
}

nav.title-bar .menu-icon
{
	/*Defines padding options for hamburger button - mobile only. */
	padding-top: 42px;
	padding-left: 13px;
}

.breadcrumb > *
{
	/* Defines the breadcrumb colour.  */
	color: var(--White);
}

.markasnew > a:after
{
	/* Defines the styles for the 'New' chip in the TOC. */
	content: "New";
	position: relative;
	left: 5px;
	color: var(--White);
	border: 3px;
	border-color: var(--Light-Grey);
	border-radius: 4px;
	background-color: var(--Light-Blue);
	font-size: smaller;
	padding: 2px 4px 2px 2px;
}

.markasnew > a:after
{
	/* Defines the styles for the 'New' chip in the TOC. */
	content: "New";
	position: relative;
	left: 5px;
	color: var(--White);
	border: 3px;
	border-color: var(--Light-Grey);
	border-radius: 4px;
	background-color: var(--Light-Blue);
	font-size: smaller;
	padding: 2px 4px 2px 2px;
}

div.home-app-container
{
	/* Container for right-hand link boxes. */
	display: inline-block;
	width: 300px;
	position: sticky;
	top: 0;
	vertical-align: top;
	margin-top: var(--Padding-Web);
}

div.home-app-link
{
	/* Grey boxes for right-hand links */
	font-size: 0.9em;
	padding: 13px;
	background-color: #c4e8ff;
	margin-left: 13px;
	margin-right: 13px;
	margin-bottom: 13px;
}

div.home-app
{
	/* Grey boxes for right-hand links */
	font-size: 0.9em;
	padding: 13px;
	background-color: var(--Light-Grey);
	margin-left: 13px;
	margin-right: 13px;
	margin-bottom: 13px;
}

div.home-app-toolbar
{
	/* Toolabar in right-hand panel */
	font-size: 0.9em;
	padding: 13px;
	background-color: var(--Light-Grey);
	margin-left: 13px;
	margin-right: 13px;
	margin-bottom: 13px;
}

div.license2
{
	/* License 2 box for right-hand info */
	font-size: 0.9em;
	padding: 13px;
	background-color: rgba(214, 67, 9, 0.2);
	margin-left: 13px;
	margin-right: 13px;
	margin-bottom: 13px;
}

div.license3
{
	/* License 3 box for right-hand info */
	font-size: 0.9em;
	padding: 13px;
	background-color: rgba(0, 133, 82, 0.2);
	margin-left: 13px;
	margin-right: 13px;
	margin-bottom: 13px;
}

div.home-layout
{
	/* Defines the position of the app image tiles on home page. */
	padding-left: 0px;
	padding-right: 0px;
	text-align: center;
}

div.accent
{
	/* Background accent colour for divs. */
	background-color: var(--Light-Grey);
}

/* Home page topic styles */

div.home-section
{
	/* Adds grey border to bottom of home section. */
	border-bottom: solid 1px var(--Light-Grey);
}

div.home-section:last-of-type
{
	/* Removes border from the last element in the home section. */
	border-bottom: none;
}

html.home-topic
{
	padding: 0;
}

img.home-tile
{
	max-width: 100%;
}

div.MCTopicPopupContainer
{
	width: calc(100vw - 660px) !important;
	padding: var(--Padding-Web) !important;
}

iframe.MCTopicPopupBody
{
	width: 100% !important;
}

/* Master page styles. Note that these styles should not be changed without careful consideration. */

div.eta
{
	/* Div for the estimated time to read function. */
	position: absolute;
	bottom: 0;
	left: 220px;
	margin: 0px;
	padding-bottom: 3px;
	font-size: 11pt;
	color: var(--White);
}

div.body-container
{
	/* Div for the topic contents and right hand link boxes. */
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
}

div.topic-header
{
	/* Topic header gradient. */
	position: relative;
	background: linear-gradient(75deg, #625eb1, #625eb1 3%, #0077c4 20%, #3f5673);
	/* Note that colours and gradient were provided by UI/UX. */
	height: 126px;
}

div.topic-header-image
{
	/* Topic header background image. */
	background-image: url('../Images/Tribal/app-style_background.png');
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 6px var(--Padding-Web-Header);
}

div.topic-header-date
{
	/* Topic last edited date. */
	display: inline-block;
	position: absolute;
	left: 0;
	bottom: 0;
	padding-left: var(--Padding-Web-Header);
	padding-right: var(--Padding-Web-Header);
}

div.topic-layout
{
	/* Defines the topic content box. */
	display: inline-block;
	width: calc(100vw - 660px);
	padding: var(--Padding-Web);
}

div.topic-layout-gw
{
	/* Defines the topic content box. */
	display: inline-block;
	width: calc(100vw - 320px);
	padding: var(--Padding-Web);
}

div.topic-layout-gw2
{
	/* Defines the topic content box. */
	display: inline-block;
	width: calc(100vw);
	padding: var(--Padding-Web);
}

h1.header-bar
{
	/*Moves H1 in header bar using readingtime.js script on master page*/
	color: var(--White);
	font-family: soleil, sans-serif;
	font-size: 2.0em;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

h1.search-header-bar
{
	/*Adjusts header for search page as no breadcrumbs*/
	color: var(--White);
	font-family: soleil, sans-serif;
	font-size: 2.0em;
	padding-top: 1.0em;
}

h1.help-centre
{
	/*Adjusts header for search page as no breadcrumbs*/
	color: var(--White);
	font-family: soleil, sans-serif;
	font-size: 2.0em;
	padding-top: 1.0em;
}

/* Footer styles for master page */

div.home-footer
{
	padding: 2% 5%;
	background-color: var(--Light-Grey);
	border: none 2px var(--Black);
}

div.footer-container
{
	display: block;
	width: 100%;
}

div.footer-left
{
	float: left;
}

div.footer-right
{
	float: right;
}

p.footer
{
	margin-top: 5px;
	margin-bottom: 5px;
	color: var(--Dark-Blue);
}

p.footer-sub
{
	margin-top: 14px;
	color: var(--Dark-Blue);
	font-weight: bold;
}

p.backtotop
{
	padding-left: var(--Padding-Web);
	font-size: 0.9em;
	text-align: left;
}

p.copyright
{
	padding-right: var(--Padding-Web);
	font-size: 0.9em;
	text-align: right;
}

div.side-content
{
	/*Used for the search-bar and menu*/
	width: 300px;
	float: right;
	margin-left: 15px;
	margin-bottom: 15px;
}

/* Breadcrumb styles */

a.MCBreadcrumbsLink:visited
{
	/* Overrides the visited link colour in breadcrumb at top of page. */
	color: var(--White);
}

/* Relationship table styles */
/* Link styles */

a
{
	color: var(--Dark-Blue);
}

a:link
{
	color: var(--Dark-Blue);
}

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

a.home-tiles
{
	color: var(--Dark-Heading);
	font-weight: bold;
	text-decoration: none;
}

/*Key for release note drop-downs */

.pipe-bug
{
	border-left: 6px solid var(--Purple);
	padding-left: 3px;
}

.pipe-added
{
	border-left: 6px solid var(--Green);
	padding-left: 3px;
}

.pipe-updated
{
	border-left: 6px solid var(--Blue);
	padding-left: 3px;
}

.pipe-removed
{
	border-left: 6px solid var(--Black);
	padding-left: 3px;
}

/* Dropdown styles for release notes*/
/* Title and  meta */

.release-title
{
	font-weight: 600;
	color: #13294b;
	padding: 12px;
	/* top/bottom | left/right */
	display: grid;
	grid-template-columns: auto 1fr auto;
	/* title | meta/badge */
	align-items: center;
	gap: 8px;
}

.release-meta
{
	font-size: 0.9375rem;
	color: #5b6670;
}

.release-hide-meta
{
	display: none;
}

/* Container for the filter UI */

.rn-filters
{
	border-bottom: 1px solid #ccc;
	margin-bottom: 1.5rem;
	padding-bottom: 1rem;
	font-size: 0;
	/* remove inline-block whitespace gaps */
}

/* Each control group (label + input) */

.rn-filter-group
{
	display: inline-block;
	vertical-align: bottom;
	margin-right: 1rem;
	margin-bottom: 0.75rem;
	font-size: 14px;
	/* restore text size inside */
}

/* Labels */

.rn-label
{
	display: block;
	font-weight: 600;
	margin-bottom: 0.25rem;
}

/* Inputs and dropdowns */

.rn-select,
.rn-input
{
	padding: 0.3rem;
	min-width: 160px;
	border: 1px solid #aaa;
	border-radius: 3px;
}

/* Buttons */

.rn-apply-btn,
.rn-clear-btn
{
	padding: 0.4rem 0.8rem;
	border: 1px solid #666;
	background: #eee;
	cursor: pointer;
	border-radius: 3px;
	margin-right: 0.5rem;
}

.rn-apply-btn:hover,
.rn-clear-btn:hover
{
	background: #ddd;
}

/* Optional highlight for invalid dates */

.rn-invalid
{
	outline: 2px solid #c00000;
}

/* Dropdown styles */
/* List styles */

ol
{
	font-family: 'Open Sans';
}

ul
{
	font-family: 'Open Sans';
}

ol,
ul
{
	letter-spacing: .25;
}

li a:focus,
a.xref:focus,
button.button.needs-pie:focus
{
	font-weight: bold;
}

li.home-app
{
	line-height: normal;
}

li
{
	margin-top: 0.75em;
	margin-bottom: 0.75em;
	font-family: 'Open Sans';
}

dd
{
	margin-bottom: 0.75em;
	margin-top: 0.75em;
	font-family: 'Open Sans';
}

dt
{
	font-weight: bold;
	margin-left: 20px;
	line-height: 1.15em;
	font-family: 'Open Sans';
	color: var(--Dark-Heading);
}

input.search-field:focus
{
	background-color: var(--Light-Grey);
}

/* Table of contents styles to add seperators. */

ul.menu li.TOCSeparator a
{
	padding-top: 0px;
	padding-bottom: 0px;
}

ul.menu li.TOCSeparator a
{
	/* Note that the next two items are being over-written by Flare classes. 
       Use important to right this. */
	/* This is the Flare class: ul.menu._Skins_SideMenu.mc-component li > a  */
	background-image: url('../Images/Flare/separator-white.png') !important;
	color: var(--White) !important;
	font-size: 0.05em !important;
	/* Set the default cursor so it doesn't look like this is a link */
	cursor: default;
}

ul.menu li.TOCSeparator > a:hover
{
	/* Flare over-writes this class too, so need to make it important 
       to avoid hover decoration. */
	background-color: var(--White) !important;
}

/* Tablet styles */

@media only screen and (max-width: 1279px)
{
	/* Home page topic */

	div.side-content	/*Removes search-bar and menu set in topic in tablet*/
	{
		display: none;
	}

	html.home-topic .body-container
	{
		margin-left: 0;
	}

	div.quick-links > div:nth-child(1)
	{
		width: 24%;
		margin-left: 0%;
	}

	div.quick-links > div:nth-child(2)
	{
		width: 24%;
		margin-left: 14%;
	}

	div.quick-links > div:nth-child(3)
	{
		width: 24%;
		margin-left: 14%;
	}

	div.quick-links > div:nth-child(4)
	{
		width: 24%;
		margin-left: 19%;
	}

	div.quick-links > div:nth-child(5)
	{
		width: 24%;
		margin-left: 14%;
	}

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

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

	div.home-tiles > div:nth-child(3)
	{
		width: 33.33333%;
		margin-left: 0%;
	}

	/*Grid*/

	div.grid-container
	{
		display: grid;
		grid-template-columns: auto auto;
		padding: 20px;
		margin: 20px;
		background-color: var(--Light-Grey);
	}

	/* Content padding for tablet*/

	div.topic-header-image
	{
		background-image: url('../Images/Tribal/app-style_background.png');
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		padding-left: var(--Padding-Tablet-Header);
		padding-right: var(--Padding-Tablet-Header);
		padding-bottom: 6px;
		padding-top: 6px;
	}

	div.topic-header-date
	{
		position: absolute;
		padding-left: var(--Padding-Tablet-Header);
		padding-right: var(--Padding-Tablet-Header);
		left: 0;
		bottom: 0;
	}

	div.topic-layout
	{
		display: inline-block;
		width: calc(100vw - 352px);
		padding-left: var(--Padding-Tablet);
		padding-right: var(--Padding-Tablet);
		padding-top: var(--Padding-Tablet);
		padding-bottom: var(--Padding-Tablet);
	}

	div.topic-layout-gw
	{
		/* Defines the topic content box. */
		display: inline-block;
		width: calc(100vw);
		padding-left: var(--Padding-Tablet);
		padding-right: var(--Padding-Tablet);
		padding-top: var(--Padding-Tablet);
		padding-bottom: var(--Padding-Tablet);
	}

	div.home-app-container
	{
		display: inline-block;
		width: 300px;
		position: sticky;
		top: 0;
		vertical-align: top;
		margin-top: var(--Padding-Tablet);
	}
}

/* Mobile styles */

@media only screen and (max-width: 1787px)
{
	:root
	{
		--Col-width1: auto;
		--Col-width2: auto;
		--Col-width3: auto;
		--Col-width4: auto;
	}

	/* Home page topic */

	div.home-layout
	{
		padding: 2% 0%;
	}

	div.home-section
	{
		padding: 10% 0;
	}

	img.home-tile
	{
		max-width: 25%;
	}

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

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

	div.home-tiles > div:nth-child(3)
	{
		width: 100%;
		margin-left: 0%;
	}

	div.quick-links > div:nth-child(1)
	{
		width: 49%;
		margin-left: 0;
	}

	div.quick-links > div:nth-child(2)
	{
		width: 49%;
		margin-left: 2%;
	}

	div.quick-links > div:nth-child(3)
	{
		width: 49%;
		margin-left: 0;
	}

	div.quick-links > div:nth-child(4)
	{
		width: 49%;
		margin-left: 2%;
	}

	div.quick-links > div:nth-child(5)
	{
		width: 49%;
		margin-left: 25.5%;
	}

	div.topic-hero
	{
		height: 360px;
	}

	div.topic-hero h1
	{
		font-size: 10vw;
		padding-bottom: 24%;
	}

	div.topic-hero h2
	{
		font-size: 15px;
	}

	/*Grid*/

	div.grid-container
	{
		display: grid;
		grid-template-columns: auto;
		padding: 20px;
		margin: 20px;
		background-color: var(--Light-Grey);
	}

	/* Content padding for mobile*/

	div.topic-header-image
	{
		background-image: url('../Images/Tribal/app-style_background.png');
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		padding-left: var(--Padding-Mobile-Header);
		padding-right: var(--Padding-Mobile-Header);
		padding-bottom: 6px;
		padding-top: 6px;
	}

	div.topic-header-date
	{
		position: absolute;
		padding-left: var(--Padding-Mobile-Header);
		padding-right: var(--Padding-Mobile-Header);
		left: 0;
		bottom: 0;
	}

	div.topic-layout
	{
		display: inline-block;
		width: 100%;
		padding-left: 0px;
		padding-right: 0px;
		padding-top: var(--Padding-Mobile);
		padding-bottom: var(--Padding-Mobile);
	}

	div.topic-layout-gw
	{
		/* Defines the topic content box. */
		display: inline-block;
		width: 100%;
		padding-left: 0px;
		padding-right: 0px;
		padding-top: var(--Padding-Mobile);
		padding-bottom: var(--Padding-Mobile);
	}

	div.home-app-container
	{
		display: none;
	}

	/*Puts h1 in header bar using script on master page*/

	h1.header-bar
	{
		color: var(--White);
		font-family: soleil, sans-serif;
		font-size: 1.8em;
		position: absolute;
		top: 30%;
		transform: translateY(-30%);
	}

	p.backtotop
	{
		padding-left: var(--Padding-Mobile);
		font-size: 0.9em;
		text-align: left;
	}

	p.copyright
	{
		padding-right: var(--Padding-Mobile);
		font-size: 0.9em;
		text-align: right;
	}

	div.breadcrumb
	{
		display: none;
	}

	/* Table styles for mobile */
	/*Large table*/

	table.large-mobile
	{
		border: 0;
	}

	table.large-mobile thead
	{
		display: none;
	}

	table.large-mobile tr
	{
		margin-bottom: 10px;
		display: block;
		border: 0;
	}

	table.large-mobile td
	{
		display: block;
		text-align: left;
		font-size: 15px;
		border: 0;
	}

	table.large-mobile td:last-child
	{
		border-bottom: 0;
	}

	table.large-mobile td:before
	{
		content: attr(data-label);
		float: left;
		font-weight: bold;
		width: 100%;
	}

	/*Large release */

	table.large-release
	{
		border: 0;
	}

	table.large-release thead
	{
		display: none;
	}

	table.large-release tr
	{
		margin-bottom: 10px;
		display: block;
		border: 0;
	}

	table.large-release td
	{
		display: block;
		text-align: left;
		font-size: 15px;
		border: 0;
	}

	table.large-release td:last-child
	{
		border-bottom: 0;
	}

	table.large-release td:before
	{
		content: attr(data-label);
		float: left;
		font-weight: bold;
		width: 100%;
	}

	/*Large rowspan*/

	table.large-rowspan
	{
		border: 0;
	}

	table.large-rowspan thead
	{
		display: none;
	}

	table.large-rowspan tr
	{
		margin-bottom: 10px;
		display: block;
		border: 0;
	}

	table.large-rowspan th,
	table.large-rowspan td
	{
		display: block;
		text-align: left;
		font-size: 15px;
		border: 0;
	}

	table.large-rowspan td:last-child
	{
		border-bottom: 0;
	}

	table.large-rowspan td:before
	{
		content: attr(data-label);
		float: left;
		font-weight: bold;
		width: 100%;
	}

	td.person
	{
		text-align: left;
	}
}