/*<meta />*/

@import url('Global_Styles.css');

@import url('prism.css');

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

:root
{
	--Brand1: #076685;
	--Brand2: #CDE0E7;
	--Dark: #45494c;
	--Medium: #b9bec1;
	--Light: #d0d3d5;
	--White: #ffffff;
	--FlywireBlue: #147BD1;
	--FlywireDarkBlue: #0F476B;
	--FlywireLightGreen: #48B985;
	--FlywireDarkGreen: #017043;
}

body
{
	font-family: 'Rubik';
	color: var(--Dark);
	font-family: Rubik;
	font-weight: 400;
}

.body-container
{
	padding-left: 2%;
	padding-top: 2%;
}

/* Content */

img
{
	border: none;
	max-width: 100%;
}

p,
td
{
	font-weight: 400;
	color: #474343;
	font-size: 16px;
	line-height: 22px;
	margin: 5px;
}

p.table-text
{
	
}

/* Headings */

h1
{
	color: #1B2733;
	font-size: 28px;
	line-height: 30px;
	mc-heading-level: 1;
	font-weight: 700;
}

h2
{
	color: #1B2733;
	padding-top: 5px;
	margin-top: 40px;
	font-size: 26px;
	line-height: 28px;
	mc-heading-level: 2;
	font-weight: 700;
}

h3
{
	color: #1B2733;
	font-size: 23px;
	line-height: 26px;
	margin-top: 40px;
	mc-heading-level: 3;
	font-weight: 700;
}

/* This heading can be used to bring tabs into the right side menu */

h3.tab-in-menu
{
	mc-heading-level: 3;
	font-weight: 700;
	margin-top: 00px;
	margin-bottom: 0px;
	font-size: 1rem;
}

h4
{
	margin-top: 30px;
	color: #1B2733;
	font-size: 18px;
	line-height: 24px;
	mc-heading-level: 5;
	font-weight: 700;
}

/* Home page topic */

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

div.home-section
{
	padding: 5% 0;
	border-bottom: solid 1px var(--Light);
}

div.home-section:last-of-type	/*Removes the border on the last section of the home page*/
{
	border-bottom: none;
}

div.topic-hero
{
	padding: 5%;
	background-size: cover;
	background-image: url('../Images/flywire-logo-square.svg');
	background: var(--FlywireBlue);
	background-attachment: scroll;
}

div.topic-hero h1
{
	color: var(--White);
	font-size: 3.5em;
	text-align: center;
}

html.home-topic	/*Used on home topic to override padding set in the skin*/
{
	
}

html.home-topic .body-container	/*Overrides padding set in the skin*/
{
	padding: 0;
}

html.home-topic .main-section > .outer-row	/*Overrides padding set in the skin when in tablet/mobile*/
{
	max-width: 100%;
	padding: 0;
}

/* Links */

a
{
	color: #1274C4;
	text-decoration: none;
}

a:link
{
	color: #1274C4;
}

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

a:hover
{
	font-weight: 700;
	transform: scale(1.05);
	/* Increase size */
}

div.home-tiles a:hover	/*Complex Selector: When hovering over links within the home tiles the following properties will apply.*/
{
	color: #5A687B;
}

/* ul.menu li > a:hover	/*Causes items in navigation and "On this page" menu to be underlined when hovered over.*/

/*{
	text-decoration: underline;
}
*/

a.home-button
{
	display: block;
	padding: 10px;
	text-decoration: none;
	width: 100%;
}

MadCap|dropDown
{
	mc-image-position: left;
	mc-image-spacing: 7px;
	padding-bottom: 5px;
	background-color: #f9f9f9;
	mc-closed-image: url('../Images/Plus.png');
	mc-open-image: url('../Images/Minus.png');
	padding-top: 5px;
	margin-bottom: 5px;
}

MadCap|dropDownHead
{
	margin-top: 10px;
	padding-left: 5px;
	padding-bottom: 10px;
	font-weight: 400;
}

MadCap|dropDownBody
{
	padding-left: 25px;
	padding-top: 0px;
	margin-left: 0px;
}

MadCap|dropDownHotspot
{
	cursor: pointer;
	text-decoration: none;
	border-bottom: none;
	font-size: 16px;
	color: #424242;
}

/* Second Dropdown style*/

MadCap|dropDown.WhatIs
{
	background-color: transparent;
	margin-bottom: 0px;
	margin: 0px 0px 0em;
	padding: 0px 0;
	mc-open-image: url('../Images/Arrow down small.png');
	mc-closed-image: url('../Images/Arrow right small.png');
}

MadCap|expandingBody
{
	color: #FAFAFA;
	font-style: italic;
}

MadCap|expandingHead
{
	font-style: italic;
	font-weight: normal;
	cursor: hand;
	text-decoration: none;
	color: var(--Brand1);
}

MadCap|xref
{
	mc-format: '{para}';
	color: #1274C4;
	font-weight: normal;
	text-decoration: none;
}

/* Lists */

dd,
dd p,
dt,
dt p,
li,
li p
{
	margin-bottom: 8px;
	margin-top: 8px;
}

dl,
ol,
ul
{
	letter-spacing: .25px;
	line-height: 20pt;
}

/* Master page */

div.home-footer
{
	background-color: var(--Brand1);
	padding: 2% 5%;
}

p.footer
{
	margin-top: 5px;
	margin-bottom: 5px;
	line-height: 13pt;
	color: var(--White);
}

p.footer-sub
{
	color: var(--White);
	font-size: 14pt;
	margin-top: 14px;
}

li
{
	margin-bottom: 0px;
}

td
{
	margin: 16px;
}

td p
{
	margin-top: 0;
	margin-left: 0;
}

/*These are the styles for code snippets  */

MadCap|codeSnippetBody
{
	font-size: 10pt;
	border-radius: 15px;
	background: transparent;
}

/*Responses success*/

MadCap|codeSnippet
{
	background: #ECF5E9;
	background-color: #ECF5E9;
	color: #1B2733;
	border-bottom: solid 1px #e0e0e3;
	border-left: solid 1px #e0e0e3;
	border-right: solid 1px #e0e0e3;
	width: 400px;
	border-bottom-right-radius: 15px;
	border-bottom-left-radius: 15px;
}

p.HeaderCodeSnippet
{
	margin-top: 8px;
	font-size: 11pt;
	border-top-left-radius: 15px;
	padding-left: 15px;
	border-top-right-radius: 15px;
	padding-right: 15px;
	border-bottom-width: 5px;
	width: 400px;
	padding-top: 5px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-bottom: 5px;
	background: #ECF5E9;
	background-color: #ECF5E9;
	color: #1B2733;
	border: solid 1px #e0e0e3;
	word-wrap: break-word;
	font-weight: 400;
}

/*Requests */

MadCap|codeSnippet.request
{
	background: #E4F2FF;
	background-color: #E4F2FF;
	color: #1B2733;
	border-bottom: solid 1px #e0e0e3;
	border-left: solid 1px #e0e0e3;
	border-right: solid 1px #e0e0e3;
	border-top: none;
	width: 400px;
}

p.HeaderCodeSnippetRequest
{
	margin-top: 8px;
	font-size: 11pt;
	border-top-left-radius: 15px;
	padding-left: 15px;
	border-top-right-radius: 15px;
	padding-right: 15px;
	border-bottom-width: 5px;
	width: 400px;
	padding-top: 5px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-bottom: 5px;
	background: #E4F2FF;
	background-color: #E4F2FF;
	color: #1B2733;
	border: solid 1px #e0e0e3;
	word-wrap: break-word;
	font-weight: 400;
}

/*Response Errors */

MadCap|codeSnippet.responseerror
{
	background: #FBEAE5;
	background-color: #FBEAE5;
	color: #1B2733;
	border-bottom: solid 1px #e0e0e3;
	border-left: solid 1px #e0e0e3;
	border-right: solid 1px #e0e0e3;
	border-top: none;
	width: 400px;
}

p.HeaderCodeSnippetResponseError
{
	margin-top: 8px;
	font-size: 11pt;
	border-top-left-radius: 15px;
	padding-left: 15px;
	border-top-right-radius: 15px;
	padding-right: 15px;
	border-bottom-width: 5px;
	width: 400px;
	padding-top: 5px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-bottom: 5px;
	background: #FBEAE5;
	background-color: #FBEAE5;
	color: #1B2733;
	border: solid 1px #e0e0e3;
	font-weight: 400;
}

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

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

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

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

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

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

ol
{
	line-height: 15pt;
}

ul
{
	line-height: 15pt;
}

span.SearchHighlight1
{
	background-color: #98fb98;
}

MadCap|popupBody
{
	border: none 0px transparent;
}

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

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

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

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

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

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

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

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

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

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

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

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

.current:hover
{
	display: block;
}

MadCap|slideshowCaption
{
	
}

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

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

	/* Master page */

	.footer
	{
		padding: 2% 2% 1%;
	}

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

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

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

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

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

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

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

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

@media only screen and (max-width: 767px)
{
	/* Logo without margin for mobile */

	div.home-tiles p
	{
		line-height: 1.2;
	}

	/* Home page topic */

	div.home-tiles p
	{
		line-height: 1.2;
	}

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

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

	div.topic-hero h1
	{
		font-size: 2.5em;
		text-align: center;
	}

	/* Master page */

	.footer
	{
		padding: 5% 7%;
		text-align: center;
	}

	.footer-icons
	{
		text-align: center;
	}

	.footer-logo
	{
		text-align: center;
	}

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

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

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

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

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

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

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

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

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

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

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

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

p.Separator
{
	margin-bottom: 8px;
	font-weight: 700;
	margin-top: 40px;
}

span.Code
{
	font-family: DM Mono, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	color: #1a202c;
	font-weight: 400;
	font-size: .875em;
	background-color: #f7fafc;
	padding: .25rem;
	border-width: 1px;
	border-color: #edf2f7;
	border-style: solid;
	border-radius: .25rem;
}

p.code
{
	font-family: monospace;
}

span.PaymentStatus
{
	font-style: italic;
}

p.StepResult
{
	margin-bottom: 8px;
	margin-top: 8px;
	font-weight: 400;
	color: #474343;
	font-style: italic;
	margin-left: 0px;
}

span.TermHighlight
{
	font-style: italic;
}

p.SeparatorNoMargin
{
	margin-bottom: 8px;
	font-weight: 700;
	margin-top: 0px;
}

MadCap|xref.topic-plus-heading
{
	mc-format: '{h1} - {para}';
}

img.iconBig
{
	border: none;
	max-width: 100%;
	height: auto;
	width: 60px;
}

img.in-heading-one
{
	max-width: 100%;
	width: auto;
	height: 28px;
	/* Matches the font size */
	position: relative;
	margin-right: 5px;
	/* Adds space between the icon and the text */
	top: 3px;
	/* Adjust this value to better center the image */
}

/* This brings the SVG Flywire Documentation logo in the skin, since we can't select SVG images in the skin editor */

.title-bar a.logo
{
	background-color: transparent;
	background-image: url('../Images/flywire-doc-logo.svg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	margin-left: 10px;
	width: 200px;
}

/* Logo without margin for mobile */

/*  
@media mobile
{


	.title-bar a.logo
	{
		margin-left: 0px;
	}
}
*/

span.SolutionsBaseURL
{
	color: #1e90ff;
}

span.SolutionsParameter
{
	color: #228b22;
}

span.SolutionsValue
{
	color: #ba55d3;
}

img.YesNoIcon
{
	border: none;
	max-width: 100%;
	width: auto;
	height: 12px;
}

img.FullSizeImageRightMargin
{
	border: none;
	max-width: 100%;
	width: 500px;
	height: auto;
}

p.SolutionsParameterRequired
{
	font-size: 9pt;
	color: #808080;
	margin-top: 10px;
}

iframe.APIReference
{
	float: left;
	margin-right: 10px;
	width: 100%;
	height: 1000px;
	clear: none;
	padding-bottom: 10px;
	border: transparent;
}

iframe.full
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	/* Adjust as needed */
	border: none;
	/* Remove border */
	margin: 0;
	padding: 0;
	overflow: hidden;
	/* Ensure content does not overflow */
}

img.diagram
{
	border: none;
	max-width: 100%;
	width: 500px;
	height: auto;
}

/* divs that control the positioning of any images contained within them*/

div.ImageAlignCenter
{
	text-align: center;
}

div.ImageAlignLeft
{
	text-align: left;
}

div.ImageAlignRight
{
	text-align: right;
}

p.Title
{
	margin-top: 0;
	margin-bottom: 0;
	font-weight: 700;
	font-size: 28pt;
	color: var(--FlywireBlue);
}

MadCap|xref.asSeparator
{
	font-weight: 700;
}

img.ThumbnailPOP250wide
{
	border: none;
	max-width: 100%;
	mc-thumbnail-max-width: 250px;
	mc-thumbnail-max-height: auto;
	mc-thumbnail: popup;
}

/* test for using tiles in the home section */
/*== Home-tiles section ==*/

div.home-tiles	/*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;
	text-align: left;
}

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

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

div.home-tiles > div
{
	float: left;
	background-color: #E4F2FF;
	margin-bottom: 3%;
	overflow: hidden;
	padding: 2%;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	height: 250px;
	cursor: pointer;
}

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

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

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

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

p.tile-title
{
	color: #5A687B;
	margin-top: 0px;
	font-size: 1.3em;
	font-weight: 700;
	margin-left: 10px;
}

p.tile-content
{
	color: #5A687B;
	font-size: 14px;
	line-height: 20px;
	text-alignment: left;
	margin-left: 10px;
	margin-top: 5px;
}

p.tile-button
{
	margin-top: 8px;
	float: right;
	margin-right: 8px;
}

div.home-tiles a	/*Complex Selector: Links within the home tiles will have the following properties*/
{
	text-decoration: none;
	color: #1274C4;
}

div.home-tiles > div:hover
{
	box-shadow: 0 12px 18px rgba(0,0,0,0.16), 0 12px 18px rgba(0,0,0,0.23);
	transform: scale(1.05);
}

img.TileIcon
{
	border: none;
	max-width: 100%;
	height: 60px;
	text-align: left;
	margin-left: 10px;
	margin-top: 10px;
}

img.TileIconGo
{
	border: none;
	max-width: 100%;
	height: 25px;
	margin-bottom: 10px;
	margin-top: 5px;
	margin-right: 10px;
	text-align: right;
	vertical-align: bottom;
}

.SpecialIconInDropdown
{
	max-width: 25px;
	max-height: 25px;
	width: auto;
	height: auto;
	vertical-align: text-bottom;
	/* Adjust alignment to ensure it lines up better with the text */
	margin-right: 5px;
	/* Adds space between the icon and the text */
}

img.UIExampleInTable
{
	border: none;
	max-height: auto;
	max-width: 200px;
}

img.ThumbnailPOP400wide
{
	border: none;
	max-width: 100%;
	mc-thumbnail-max-height: auto;
	mc-thumbnail-max-width: 400px;
	mc-thumbnail: popup;
}

/* Container for code and description (for all types of code examples) */

.code-and-description
{
	display: flex;
	align-items: flex-start;
	/* Ensure both sides align at the top */
}

/* Left side: parameter description description (for all types of code examples) */

.parameter-description
{
	flex: 1;
	/* Allow parameter description to take up remaining space */
	overflow-y: auto;
	/* Enable vertical scrolling */
	margin-right: 10px;
	/* Margin between code example and parameter description */
}

/* Left side: Container inside the parameter-description to define which lines in the code example will be highlighted */

div.hover-to-highlight-description
{
	cursor: default;
	margin: 10px 0;
	padding: 10px;
	background-color: transparent;
	/* No background color by default */
	border-radius: 8px;
	/* Rounded corners on all sides */
	transition: background-color 0.3s ease;
}

div.hover-to-highlight-description:hover
{
	background-color: rgba(15, 71, 107, 0.1);
	/* Very light version of the indicator color on hover */
}

/* Left side: Small code example inside the description container to keep the correct size and not be considered for the highlighting on the right side */

.code-example-prism-dont-highlight
{
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	/* Ensures padding and borders are included in the width calculation */
}

/* Right side: Code example inside the container when Flare code snippet */

.code-example
{
	flex: 0 0 425px;
	/* Fixed width of 400px for the code example plus space for possible scrollbar on small screens */
	position: sticky;
	top: 0;
	max-height: 100vh;
	/* Ensure it fills the viewport height */
	overflow-y: auto;
	/* Enable vertical scrolling */
}

/* Right side: Code example inside the container when prism code snippet */

.code-example-prism
{
	flex: 0 0 50%;
	max-width: 50vw;
	position: sticky;
	top: 0;
	/* Sticks to the top of the viewport */
	overflow-y: auto;
	/* Enable vertical scrolling */
}

/* Styles for Try me buttons in API docs */

.modern-button
{
	background-color: #147BD1;
	/* Button color */
	color: white;
	/* Text color */
	border: none;
	/* Remove default border */
	padding: 15px 30px;
	/* Padding for a larger clickable area */
	font-size: 16px;
	/* Increase font size */
	font-weight: 700;
	/* Bold text */
	border-radius: 5px;
	/* Rounded corners */
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	/* Subtle shadow */
	cursor: pointer;
	/* Pointer cursor on hover */
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
	/* Smooth transitions */
}

.modern-button:hover
{
	background-color: #1268b3;
	/* Slightly darker on hover */
	box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
	/* Slightly deeper shadow on hover */
}

.modern-button:active
{
	background-color: #10599b;
	/* Even darker when pressed */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	/* Subtle shadow when pressed */
}

div.content-inside-object
{
	padding-left: 26px;
	padding-top: 10px;
}

p.object
{
	font-weight: 700;
	padding-left: 12px;
}

/* Tagging parameters as required or optional */

div.requiredField
{
	position: relative;
}

div.requiredField::before
{
	content: "Required";
	position: absolute;
	right: 0;
	top: 0;
	font-size: 0.7rem;
	opacity: 0.7;
}

div.requiredField:hover::before
{
	opacity: 1;
	/* Change opacity on hover */
}

div.optionalField
{
	position: relative;
}

div.optionalField::before
{
	content: "Optional";
	position: absolute;
	right: 0;
	top: 0;
	font-size: 0.7rem;
	opacity: 0.7;
}

div.optionalField:hover::before
{
	opacity: 1;
	/* Change opacity on hover */
}

/* Endpoint styles */

div.endpoint
{
	display: flex;
	align-items: center;
	padding: 5px 5px;
	margin: 5px 0;
}

span.method
{
	font-weight: 500;
	color: #fff;
	padding: 5px 5px;
	border-radius: 4px;
	margin-right: 15px;
	text-transform: uppercase;
	width: 80px;
	/* Fixed width */
	text-align: center;
	font-size: 1.1em;
}

span.method.post
{
	background-color: #005f73;
	/* Darker Blue */
}

span.method.get
{
	background-color: #007f4f;
	/* Darker Green */
}

span.method.put
{
	background-color: #c18700;
	/* Darker Yellow */
}

span.method.delete
{
	background-color: #c0392b;
	/* Darker Red */
}

span.method.patch
{
	background-color: #8e44ad;
	/* Darker Purple */
}

span.url
{
	font-weight: 400;
	color: #333;
	word-break: break-all;
	flex-grow: 1;
	/* Ensure URL takes up remaining space */
}

/* End of endpoint styles */
/* Custom slideshow styles */

.carousel
{
	position: relative;
	width: 500px;
	height: 400px;
	overflow: hidden;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	/* Subtle drop shadow */
}

.carousel-item
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.5s ease;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	/* Align items to the top */
	align-items: center;
}

.carousel-item.active
{
	opacity: 1;
}

.carousel-image
{
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Ensures the image covers the entire container */
}

.carousel-text
{
	position: absolute;
	bottom: 0;
	/* Position the text at the bottom */
	width: 100%;
	text-align: center;
	background: rgba(255, 255, 255, 0.9);
	/* White opaque background */
	color: black;
	/* Ensure text color contrasts with the new background */
	padding: 10px;
	box-sizing: border-box;
	z-index: 1;
	/* Ensures the text is on top of the image */
}

.carousel-text > *
{
	margin: 5px 0;
}

.carousel-button
{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background-color: rgba(0, 0, 0, 0.5);
	border: none;
	color: white;
	font-size: 2rem;
	padding: 10px;
	cursor: pointer;
	z-index: 2;
	/* Ensure buttons are on top */
}

.carousel-button.next
{
	right: 10px;
}

.carousel-button.prev
{
	left: 10px;
}

.carousel-button.hidden
{
	display: none;
}

/* Base URL Switcher Container */

.select-container
{
	background-color: #272822;
	/* Same as code example */
	padding: 10px;
	align-items: left;
	border-radius: 0.3em 0.3em 0 0;
	/* Rounded top corners same as code example */
	margin-bottom: -11px;
	/* Overwrite the margin that is coming from the code example */
}

.select-container label
{
	color: #ffffff;
	/* White text for better contrast */
	text-transform: uppercase;
	/* Make the text in all caps */
	margin-right: 10px;
}

.select-container select
{
	background-color: #272822;
	/* Same as code example */
	color: #ffffff;
	/* White text color */
	border: 1px solid #cccccc;
	/* Light grey border */
	padding: 5px;
}

h3.h3paramlist
{
	color: #1B2733;
	font-size: 1.2rem;
	margin-top: 40px;
	mc-heading-level: 3;
	font-weight: 700;
}

img.ImageInCarousel
{
	border: none;
	max-width: 250px;
	max-height: auto;
}

iframe.externalwebsite
{
	width: 100%;
	height: 1000px;
	clear: none;
	padding-bottom: 10px;
	border: transparent;
}

/* Start styles for highlighting screenshots */
/* General Container for each block */

div.block-container
{
	margin-bottom: 0px;
}

/* Container for the form image */

div.form-container
{
	position: relative;
	width: 600px;
	/* Adjust based on the image's size */
	margin: 20px auto;
}

.form-image
{
	display: block;
	width: 100%;
}

/* General Hotspot Styling */

div.hotspot
{
	position: absolute;
	background-color: transparent;
	/* Invisible initially */
	cursor: pointer;
	transition: background-color 0.3s ease, transform 0.2s ease;
	/* Smooth transition */
}

/* Highlight color for hotspot */

.hotspot.highlight
{
	background-color: rgba(100, 120, 140, 0.4);
	/* Slightly lighter greyish blue */
	border-radius: 8px;
	/* Rounded corners for a softer look */
	box-shadow: 0 0 10px rgba(100, 120, 140, 0.5);
	/* Subtle shadow to add depth */
	transform: scale(1.05);
	/* Slight scale-up effect */
}

/* Highlight color for description */

.description.highlight
{
	background-color: rgba(100, 120, 140, 0.4);
	/* Same lighter greyish blue */
	border-radius: 6px;
	/* Rounded corners for a soft feel */
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	/* Subtle shadow */
	padding: 5px;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
	/* Smooth transition for hover effects */
}

/* Container for the whole block */

.screenshot-and-description
{
	display: flex;
	/* Flex container to align the description and screenshot side by side */
	justify-content: space-between;
	/* Space between the two columns */
	margin-bottom: 0px;
	/* Optional: Add space below each block */
}

/* Description Container */

.description-container
{
	flex: 1;
	/* Takes up remaining space */
	padding-right: 20px;
	/* Space between the description and the screenshot */
}

/* Screenshot Container */

.screenshot
{
	width: 600px;
	/* Fixed width for the screenshot */
	position: sticky;
	/* Keeps the screenshot in view when scrolling */
	top: 0px;
	/* Adjust this value to control how far from the top the screenshot sticks */
	align-self: flex-start;
	/* Keeps the screenshot aligned with the description on the left */
	height: auto;
	/* Let the image height be auto to maintain its aspect ratio */
}

/* End of styles for highlighting screenshots */
/* Beginning of styles for Pros and Cons */

div.pro
{
	margin-left: 20px;
	/* Slight indentation */
	margin-bottom: 10px;
	/* Space after the div */
	padding-left: 30px;
	/* Space for the icon */
	background: url('../Images/Icons from Marketing/Misc icons/png/tick-green.png') no-repeat left 5px;
	/* Aligns the icon with the first line */
	background-size: 16px 16px;
	/* Adjust the size of the icon */
}

div.con
{
	margin-left: 20px;
	/* Slight indentation */
	margin-bottom: 10px;
	/* Space after the div */
	padding-left: 30px;
	/* Space for the icon */
	background: url('../Images/Icons from Marketing/Misc icons/png/multiply.png') no-repeat left 5px;
	/* Aligns the icon with the first line */
	background-size: 16px 16px;
	/* Adjust the size of the icon */
}

/* End of styles for Pros and Cons */

p.long-url
{
	word-break: break-all;
	/* Forces breaking of long strings */
}

p.HeadingNotInMenu
{
	color: #1B2733;
	font-size: 1.2rem;
	margin-top: 40px;
	font-weight: 700;
}

/* Styles to turn headings into dropdown-like collapsibles */
/* Add this class to a heading */

.collapsible
{
	cursor: pointer;
	padding: 10px 10px 5px 25px;
	/* extra left padding for the arrow */
	margin: 0;
	font-size: 1.2em;
	background-image: url('../Images/Arrow right small.png');
	/* closed state image */
	background-repeat: no-repeat;
	background-position: 5px center;
}

/* When open, change the background image */

.collapsible.open
{
	background-image: url('../Images/Arrow down small.png');
	/* open state image */
}

/* Hide the content by default (add content in div "collaps-content", hiding and showing controlled by a script) */

.collapsible + .collaps-content
{
	display: none;
	padding: 10px;
}

img.ThumbnailPOP100wide
{
	border: none;
	max-width: 100%;
	mc-thumbnail-max-height: auto;
	mc-thumbnail: popup;
	mc-thumbnail-max-width: 100px;
}

/* Styles resolve accessibility issues */
/* These have been reviewed with Kerstin */

span.parameter-name-dropdown-head
{
	background-color: #f7fafc;
	padding: .25rem;
	border-width: 1px;
	border-color: #edf2f7;
	border-style: solid;
	border-radius: .25rem;
}

/* Styles resolve accessibility issues */
/* These are commented out until I've reviewed them with Kerstin */
/* This overrides the color of links in the left-hand nav that's set in the global skin (Global_Skin_Side-Nav) */
/* This is required for accessibility as it ensures enough contrast between link text colour and the background colour */

/*
ul.sidenav li a
{
	color: #000000;
}
*/

iframe.iframegoogledocs
{
	width: 100%;
	height: 600px;
	zoom: 0.4;
	/* works in all browsers except Firefox */
}