/*******************************  stdNatCen  *******************************
 * This css contains style definitions who are not colour and font related
 * The styles are based on
 * - Template: stdNatCen.htm
 * See
 * - stdPurple.css for all colour related styles
 * - stdFont.css for all font related styles
 * - helpLinks.css for all help-link-dialog styles 
 **
 * REVISIONS
 * - V1.0 27/02/2015 Initial Release
 * - V1.1 14/06/2015 Added .qt-section.bottom-distance to .qt-section.not-one-line
 * - V1.2 15/10/26 Commented line-height: 2; for #main-section .qure > .mrQuestionText ~ .qt-section
 * - V1.3 15/11/10 ADDED style for object, audio { position: fixed; top: 45px; right: 0; }
 * 				NOTE: The style is based on one audio per page
 * - V1.4 171006 ADDED .qt-default .qt-controls to the style:: display: block; width: 75%;}
 ****************************************************************************/

body,
html
{
	width:100%;
	height:100%;
	line-height:1.5;
	margin:0;
	padding:0;
}

button.infbutton{
	vertical-align: bottom;
	position:relative; /* Anything but static */
	width: 1.5em;
	height: 1.5em;
	text-indent: -9999em;
	display: inline-block;
	color: white;
	font-weight:bold;
	font-size:1em;
	line-height:1em;
	background-color: #00affa;
	margin-left: .25em;
	border:0;
	-webkit-appearance: none;
	-webkit-border-radius:100%;
	-moz-border-radius:100%;
	border-radius:100%;
	cursor:pointer;
	padding: 0;
}

#buttoncontainer button.infbutton{
	font-size:0.65em;
	margin-bottom: 7px;
}

span.mrQuestionTable{
margin-top:12px;
}

span.mrQuestionTable label{
	padding-left:0;
	display:inline-block;
	cursor:pointer;
}
span.mrQuestionTable label > span{
	margin-left:0 !important;
	display:inline;
}

button.infbutton:hover {
	background-color:#628cb6;
	cursor: hand; 
	cursor: pointer;
}

button.infbutton:before {
	content:"i";
	position: absolute;
	top: .30em;
	left:0;
	text-indent: 0;
	display:block;
	width:1.5em;
	text-align:center;
}

button.infbutton{
	outline:0 !important;
}

.tippy-tooltip.light-border-theme{background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,8,16,.15);color:#26323d;box-shadow:0 3px 14px -.5px rgba(0,8,16,.08)}.tippy-tooltip.light-border-theme .tippy-backdrop{background-color:#-fff}.tippy-tooltip.light-border-theme .tippy-arrow:after,.tippy-tooltip.light-border-theme .tippy-arrow:before,.tippy-tooltip.light-border-theme .tippy-roundarrow:after,.tippy-tooltip.light-border-theme .tippy-roundarrow:before{content:"";position:absolute;z-index:-1}.tippy-tooltip.light-border-theme .tippy-roundarrow{fill:#fff}.tippy-tooltip.light-border-theme .tippy-roundarrow:after{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEuNDE0IiB2aWV3Qm94PSIwIDAgMTggNyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMCA3czIuMDIxLS4wMTUgNS4yNTMtNC4yMThDNi41ODQgMS4wNTEgNy43OTcuMDA3IDkgMGMxLjIwMy0uMDA3IDIuNDE2IDEuMDM1IDMuNzYxIDIuNzgyQzE2LjAxMiA3LjAwNSAxOCA3IDE4IDd6IiBmaWxsPSIjMzMzIiBmaWxsLW9wYWNpdHk9Ii4yMzUiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvc3ZnPg==);background-size:18px 7px;width:18px;height:7px;left:0;top:0;fill:rgba(0,8,16,.15)}.tippy-tooltip.light-border-theme[x-placement^=top] .tippy-roundarrow:after{top:1px;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.tippy-tooltip.light-border-theme[x-placement^=top] .tippy-arrow{border-top-color:#fff}.tippy-tooltip.light-border-theme[x-placement^=top] .tippy-arrow:after{border-top:7px solid #fff;top:-7px}.tippy-tooltip.light-border-theme[x-placement^=top] .tippy-arrow:before{border-top:7px solid rgba(0,8,16,.2);bottom:-1px}.tippy-tooltip.light-border-theme[x-placement^=bottom] .tippy-roundarrow:after{top:-1px}.tippy-tooltip.light-border-theme[x-placement^=bottom] .tippy-arrow{border-bottom-color:#fff}.tippy-tooltip.light-border-theme[x-placement^=bottom] .tippy-arrow:after{border-bottom:7px solid #fff;bottom:-7px}.tippy-tooltip.light-border-theme[x-placement^=bottom] .tippy-arrow:before{border-bottom:7px solid rgba(0,8,16,.2);bottom:-6px}.tippy-tooltip.light-border-theme[x-placement^=left] .tippy-roundarrow:after{left:1px;top:0;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.tippy-tooltip.light-border-theme[x-placement^=left] .tippy-arrow{border-left-color:#fff}.tippy-tooltip.light-border-theme[x-placement^=left] .tippy-arrow:after{border-left:7px solid #fff;left:-7px}.tippy-tooltip.light-border-theme[x-placement^=left] .tippy-arrow:before{border-left:7px solid rgba(0,8,16,.2);left:-6px}.tippy-tooltip.light-border-theme[x-placement^=right] .tippy-roundarrow:after{left:-1px;top:0;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.tippy-tooltip.light-border-theme[x-placement^=right] .tippy-arrow{border-right-color:#fff}.tippy-tooltip.light-border-theme[x-placement^=right] .tippy-arrow:after{border-right:7px solid #fff;right:-7px}.tippy-tooltip.light-border-theme[x-placement^=right] .tippy-arrow:before{border-right:7px solid rgba(0,8,16,.2);right:-6px}.tippy-tooltip.light-border-theme[x-placement^=bottom] .tippy-arrow,.tippy-tooltip.light-border-theme[x-placement^=bottom] .tippy-roundarrow,.tippy-tooltip.light-border-theme[x-placement^=top] .tippy-arrow,.tippy-tooltip.light-border-theme[x-placement^=top] .tippy-roundarrow{-webkit-transform:translateX(-1px);transform:translateX(-1px)}.tippy-tooltip.light-border-theme[x-placement^=bottom] .tippy-arrow:after,.tippy-tooltip.light-border-theme[x-placement^=bottom] .tippy-arrow:before,.tippy-tooltip.light-border-theme[x-placement^=top] .tippy-arrow:after,.tippy-tooltip.light-border-theme[x-placement^=top] .tippy-arrow:before{left:-7px;border-left:7px solid transparent;border-right:7px solid transparent}.tippy-tooltip.light-border-theme[x-placement^=left] .tippy-arrow,.tippy-tooltip.light-border-theme[x-placement^=left] .tippy-roundarrow,.tippy-tooltip.light-border-theme[x-placement^=right] .tippy-arrow,.tippy-tooltip.light-border-theme[x-placement^=right] .tippy-roundarrow{-webkit-transform:translateY(-1px);transform:translateY(-1px)}.tippy-tooltip.light-border-theme[x-placement^=left] .tippy-arrow:after,.tippy-tooltip.light-border-theme[x-placement^=left] .tippy-arrow:before,.tippy-tooltip.light-border-theme[x-placement^=right] .tippy-arrow:after,.tippy-tooltip.light-border-theme[x-placement^=right] .tippy-arrow:before{top:-7px;border-top:7px solid transparent;border-bottom:7px solid transparent}


@media (max-width: 768px){
	.tippy-tooltip{
		max-width: 90% !important;
	}
	
	.qt-label > .mrQuestionText{
		display:block;
		max-width: 95%;
	}
	
	#main-section .content {
		padding: 15px 15px 0 15px !important;
	}
	.resp-checkbox-radio-parent span input.mrOtherEdit {
		margin-left: 1.7em !important;
		width: 75%;
	}
}

/* + + + main-section + + + */
#main-container {
	overflow: scroll; /* Overflow should scroll */
	-webkit-overflow-scrolling: touch; /* This gives us scrollbars. */
}

#main-section .sub-container {
	position: relative;
}

#main-section .header
{
	padding: 10px 15px;
	text-align: right;
}

#main-section .header p
{
	padding: 0;
	margin: 0;
}

#main-section .header a
{
	text-decoration: underline;
}

#main-section .menu-icon {
	display: none;
}

#main-section .content
{
	padding: 20px 65px 0 65px; /* BD150109 content alignment */
}
#pgbox #main-section .content
{
	padding: 20px 7px 0 65px; /* BD150109 content alignment */
}
#pgbox #main-section .pgbox-mobile-section
{
	display: none;
}

#pgbox #main-section .content-section,
#pgbox #main-section .pgbox-section
{
	display: inline-block;
	vertical-align: top;
}
/** IE7 **/
*+html #pgbox #main-section .content-section,
*+html #pgbox #main-section .pgbox-section
{
  vertical-align: sup;
}

#pgbox #main-section .content-section
{
	width: 79%;
}

#pgbox #main-section .pgbox-section
{
	width: 20%;
}

#pgbox .pgbox-menu .mrBannerText
{
	padding-bottom: 1em;
	overflow: auto;
}

#pgbox .pgbox-menu .highlight-p,
#pgbox .pgbox-menu .highlight-img,
#pgbox .pgbox-menu .highlight-img img
{
	display: inline-block;
	vertical-align: top;
}
/** IE7 **/
*+html #pgbox .pgbox-menu .highlight-p,
*+html #pgbox .pgbox-menu .highlight-img,
*+html #pgbox .pgbox-menu .highlight-img img
{
	vertical-align: sup;
}
#pgbox .pgbox-menu .highlight-p
{
	width: 75%;
}
#pgbox .pgbox-menu .highlight-img
{
	width: 10%;
	margin: 0 1%;
	text-align: right;
}
#pgbox .pgbox-menu .highlight-img img
{
	position: relative;
	top: 0.2em;
	width: 100%;
	max-width: 19px;

}

#pgbox .pgbox-menu h3,
#pgbox .pgbox-menu .mrBannerText p
{
	margin-left: 12%;
	margin-right: 12%;
}
#pgbox .pgbox-menu .mrBannerText p
{
	margin-top: 0.3em;
	margin-bottom: 0;
}

#pgbox .pgbox-menu p.highlight
{
	margin-left: 0;
	margin-right: 0;
}

#main-section .qure
{
	min-height: 300px;
	height: auto !important; 
	height: 300px;	/* IE treats "height" how "min-height" is supposed to be treated */
	margin-bottom: 20px;
}

/* #main-section .qure.threeQuarter  BD150206 QureWidth */
#main-section .qure.threeQuarter .mrBannerText, /* LabelWidth instead of QureWidth */
.qt-default .qt-header,
.qt-default .qt-label,
.qt-default .qt-controls
{
	display: block;
	width: 75%;
}

#main-section .qure.threeQuarter .qt-section .mrBannerText /* Question-Banner 100% Width */
{
	width: 100%;
}

#pgbox #main-section .qure
{
	width: 100%;
	overflow: auto;
	padding-bottom: 20px;
}


#main-section .qure > .mrQuestionText /* Page-label (multiple questions) */
{
	display: block;
	padding-bottom: 1.5em; /* BD150109 response distance */
}

#main-section .qure > .mrQuestionText ~ .qt-section /* qt-section on page (multiple questions) */
{
/*	line-height: 2; */
}

#main-section .footer
{
	border-top-width: 16px;
	border-top-style: solid;
	display: block;
	margin-top: 15px;
	padding-top: 15px;
}

#main-section .footer .img1
{
	margin-left: 2px;
}

#main-section .footer .img1,
#main-section .footer .img2,
#main-section .footer .img3,
#main-section .footer .img4
{
	margin-right: 3%;
}


/* + + + slide-section + + + */
#slide-section {
	overflow: auto;
	width: 270px;
	position: absolute;
	top: 0;
	left: -270px;
	-webkit-transition: left 0.2s ease-in;
	transition: left 0.2s ease-in;
}

#slide-section .sub-container
{
	height: 100%;
	margin: 0 4% 0 0;
	padding: 0;
	overflow: visible;
}

#slide-section .content
{
	padding: 5%;
	overflow: auto;
}

#slide-section .menu-icon
{
	width: 15%;
	padding-left: 86%;
}

#slide-section #logo-section
{
}

#slide-section #logo-section img
{
	display: block;
	margin: 0 auto 15px;
}

#slide-section #logo-section .img5
{
	margin-bottom: 0;
}

#slide-section.on {	/* ON swipe */
	left: 0px !important;
}



/* + + + Navigation + + + */
.nav
{
	overflow: hidden;
}
.nav .buttons
{
	text-align: left;
	direction: rtl;
	float: left;
	padding-bottom: 3px;
}

.nav .buttons .goto-button,
.nav input
{
	direction: ltr;
}

.nav .buttons .goto-button
{
	display: inline-block;
}

.goto-button select
{
	padding: 0.1em;
}

.secondary-nav-section
{
	padding-bottom: 3px;
}

input[type='submit']
{
	-webkit-appearance: none; /* BD150206 not platform specific styling */
	-moz-appearance: none;
	appearance: none;  

	padding: 3px 8px;
	border: 0px;
	
/* PR Added to fix new IOS issue where nav buttons looked greyed out with white text */
	background-color: #e6e6e6;
	color: black;

	-webkit-border-radius: 1px;
	-moz-border-radius: 1px;
	border-radius: 1px;

	width: auto !important;
}

input[type="submit"]:hover.disabled
{
	cursor:not-allowed;
}

input.mrNext
{
	padding-right: 130px; /* Larger button */
}

/* Adapt button-sizes to button-section >> Default size don't fit */
#main-section .nav .buttons.adapt-size input.mrNext {
	width: 63% !important;
}
#main-section .nav .buttons.adapt-size input.mrPrev {
	width: 34% !important;
}

.nav .buttons.no-prev .x,
.nav .buttons.adapt-size.no-prev .x {
	width: 100%;
}


/* + + + Progress-bars + + + */
.progress-bar
{
/*
	border-color: #00affa;
	border-style: solid;
	border-width: 1px;
*/	
	min-height: 8px;
    height: auto !important;
    height: 8px; /* IE treats "height" how "min-height" is supposed to be treated */
	overflow: hidden;
}

.progress-bar table,
.progress-bar td
{
/*	min-height: 10px;
	height: auto !important;
	height: 10px; / * IE treats "height" how "min-height" is supposed to be treated */
	height: 8px;
}

.progress-bar.top-bar
{
	display: none;
	margin-bottom: 20px;
}

.progress-bar.bottom-bar
{
	display: block;
	margin-top: 20px;
}

.progress-bar table
{
	border-spacing: 0;
}

/* + + + Banner and Error messages + + + */
.mrBannerText,
.mrErrorText
{
	display: block;
}

.qure > .mrBannerText
{
	margin-bottom: 0.3em;
}


/* + + + Help links + + + */
.help-link div,
.help-link span,
.small-help div,
.small-link span,
.long-help
{
	display: none;
}

/* + + + General menu-icon styles + + + */
/* cm removed pointer from the menu-icon 
cursor: pointer;  */
.menu-icon {
	padding: 4px;
	width: 40px;
}

.menu-icon hr {
	border: 2px solid #000;
	border-radius: 2px;
	padding: 0;
	margin: 4px;
}

object, audio
{
	position: fixed;
	top: 45px;
	right: 0;
}

/* + + + General + + + */
#logo-section img
{
	height: 75px;
}

.clearfloat {
  clear: both;
  height: 0;
}

.hidden
{
	display: none;
}

.top10-distance
{
	margin-top: 10px;
}

.seperator
{
	margin-top: 3em;
}

.sliding-wrapper
{
	display: block;
	height: auto;
	overflow: auto;
	overflow-x: auto;
	overflow-y: visible;
}

textarea,
input[type='text']
{
	border-style: solid;
}

.qt-controls span input[type='text']
{
	padding-left: 4px;
}

.qt-controls > div
{
	/*height: 1.5em; *//* BD150109 response distance */
}

.qt-section.not-one-line,
.qt-section.bottom-distance
{
	display: block;
	margin-bottom: 1.5em; /* BD150109 response distance */
}

.mrQuestionTable td /* BD150206 table-row-distance */
{
	padding: 5px 4px;
/*border-spacing: 0 20px; ** Doesn't work in IE */
}

.mrQuestionTable tbody tr .mrQuestionText,
.mrQuestionTable tbody tr .mrGridCategoryText
{
	text-align: right !important;
}
.mrQuestionTable tbody tr:first-child .mrQuestionText,
.mrQuestionTable tbody tr:first-child .mrGridCategoryText
{
/*	text-align: center !important; */
}



/* + + + Lining Up Wrapped Response Texts Control + + + */
span.mrQuestionTable span[id*='Cell']
{
	display: block;
	position:relative;
}
span.mrQuestionTable span input.mrMultiple,
.mrQuestionTable span input.mrSingle
{
	display:block;
	position:absolute;
	top: 2px;
}
span.mrQuestionTable span label span.mrMultipleText,
.mrQuestionTable span label span.mrSingleText,
span.mrQuestionTable span span span.mrShowText
{
	display:inline;
}

span.mrQuestionTable span span span.mrShowText
{
	margin-top: 1em;
}

span.mrQuestionTable span label span.mrMultipleText,
.mrQuestionTable span label span.mrSingleText
{
	margin-left:3em;
}
	  
/* + + + mrOther Style Control + + + */ 
span.mrQuestionTable span span input.mrOtherEdit
{
/** DISPLAY .otherText under the label ** display:block; */
	margin-left:1em;
}
span.mrQuestionTable span span label span.mrOtherText
{
/** DISPLAY .otherText under the label ** display:block; margin-left:3em; */
}

span.mrQuestionTable label{
	display:inline;
}

.mrQuestionTable span input[value*='Other'] ~ label .mrSingleText,
.mrQuestionTable span input[value*='other'] ~ label .mrSingleText,
.mrQuestionTable span input[value*='Other'] ~ label .mrMultipleText,
.mrQuestionTable span input[value*='other'] ~ label .mrMultipleText
{
	display: inline-block;
}


/* + + + For Table Layout + + + */
table.mrQuestionTable
{
/*	border-collapse: collapse; */
}

table.mrQuestionTable,
table.mrQuestionTable input
{
	margin-left: 0 !important;
}
table.mrQuestionTable tbody tr td
{
	position:relative;
}
table.mrQuestionTable tbody tr td input.mrMultiple,
table.mrQuestionTable tbody tr td input.mrSingle
{
	display:block;
	position:absolute;
}

/*
	MODIFIED BY DEX 2021-03-12
*/
table.mrQuestionTable tbody tr td label span.mrMultipleText,
table.mrQuestionTable tbody tr td label span.mrSingleText
{
	display: block;
	margin-left: 1.5em;
	margin-right: 2em;
}

table.mrQuestionTable tbody tr td label[for$="X0"] span.mrMultipleText,
table.mrQuestionTable tbody tr td label[for$="X1"] span.mrMultipleText,
table.mrQuestionTable tbody tr td label[for$="X0"] span.mrSingleText,
table.mrQuestionTable tbody tr td label[for$="X1"] span.mrSingleText {
    display: inline-block;
    margin-left: 0;
    margin-right: 0;
}
/*
	More general version
*/
/*
table.mrQuestionTable tbody tr td label span.mrMultipleText, table.mrQuestionTable tbody tr td label span.mrSingleText {
    display: inline-block;
    margin-left: 0;
    margin-right: 0;
}
*/

	  
/* + + + mrOther Sytle Control For Table Layout + + + */
table.mrQuestionTable tbody tr td input.mrOtherEdit
{
	display:block;
	margin-left:3.5em;
}
table.mrQuestionTable tbody tr td span label span.mrOtherText
{
	display:block;
	margin-left:3em;
}


/* + + + Clear GridCategory Control Style For Table Layout + + + */
table.mrQuestionTable tbody tr td[class~=mrGridCategoryText] ~ td input.mrSingle,
table.mrQuestionTable tbody tr td[class~=mrGridCategoryText] ~ td input.mrMultiple
{
	display:inline;
	position:static;
}

/* + + + RESPONSIVE STYLES for specific elements || classNames added by 'stdNatCen.js' + + + */

/* .resp-checkbox-radio-parent */

.resp-checkbox-radio-parent
{
	display: block;
	margin-top: 5px;
}

.resp-checkbox-radio-parent textarea ~ .mrMultiple
{
	display:block;
	position:absolute;
}
.resp-checkbox-radio-parent textarea ~ label
{
	height: 35px;
	display: block;
}
.resp-checkbox-radio-parent textarea ~ label .mrMultipleText
{
	position:relative;
	top: 1em;
	left: 4.5em;
}

span.mrQuestionTable span.resp-checkbox-radio-parent input.mrMultiple,
.mrQuestionTable span.resp-checkbox-radio-parent input.mrSingle
{
}

span.mrQuestionTable span.resp-checkbox-radio-parent label span.mrMultipleText,
.mrQuestionTable span.resp-checkbox-radio-parent label span.mrSingleText,
table.mrQuestionTable tbody tr td.resp-checkbox-radio-parent label span.mrMultipleText,
table.mrQuestionTable tbody tr td.resp-checkbox-radio-parent label span.mrSingleText
{
	margin-left: 4em;
	padding-top: 0em;
}

.resp-checkbox-radio-parent span input.mrOtherEdit
{
	height: 3em;
	margin-left: 5em !important;
	margin-top: 0.4em;
	width: 75%;
}

@media (max-width: 768px){
	.resp-checkbox-radio-parent span input.mrOtherEdit {
		margin-left: 1.7em !important;
	}
	
	#main-section .qure.threeQuarter .mrBannerText, .qt-default .qt-header, .qt-default .qt-label, .qt-default .qt-controls {
		display: block;
		width: 100%;
	}
}


.mrQuestionTable span.resp-checkbox-radio-parent input[value*='Other'] ~ label .mrSingleText,
.mrQuestionTable span.resp-checkbox-radio-parent input[value*='other'] ~ label .mrSingleText
{
	display: block;
}


/* + + + RESPONSIVE CLASSNAMES ADDED BY 'stdNatCen.js' when Browser does not support media queries + + + */
/* Large Devices, Wide Screens : 1280px | have no additional className */
body.medium-device
{}

body.tablet-device
{}

/* #main-section .qure.threeQuarter  BD150206 QureWidth */
body.tablet-device #main-section .qure.threeQuarter .mrBannerText, /* LabelWidth instead of QureWidth */
body.phone-ls-device #main-section .qure.threeQuarter .mrBannerText,
body.phone-pt-device #main-section .qure.threeQuarter .mrBannerText,
body.tablet-device .qt-default .qt-header,
body.phone-ls-device .qt-default .qt-header,
body.phone-pt-device .qt-default .qt-header,
body.tablet-device .qt-default .qt-label,
body.phone-ls-device .qt-default .qt-label,
body.phone-pt-device .qt-default .qt-label
{
	width: 100%;
}

body.tablet-device input[type='checkbox'],
body.phone-ls-device input[type='checkbox'],
body.phone-pt-device input[type='checkbox'],
body.tablet-device input[type='radio'],
body.phone-ls-device input[type='radio'],
body.phone-pt-device input[type='radio']
{
		width: 44px;
		height: 44px;
		border-style: solid;
		border-width: 1px;
}
body.tablet-device table input[type='checkbox'],
body.phone-ls-device table input[type='checkbox'],
body.phone-pt-device table input[type='checkbox'],
body.tablet-device table input[type='radio'],
body.phone-ls-device table input[type='radio'],
body.phone-pt-device table input[type='radio']
{
		width: auto;
		width: initial;
		height: auto;
		height: initial;
}

body.tablet-device input[type='checkbox'],
body.phone-ls-device input[type='checkbox'],
body.phone-pt-device input[type='checkbox']
{
		-webkit-border-radius: 2px;
		-moz-border-radius: 2px;
		border-radius: 2px;
}

body.tablet-device input[type='radio'],
body.phone-ls-device input[type='radio'],
body.phone-pt-device input[type='radio']
{
		-webkit-border-radius: 22px;
		-moz-border-radius: 22px;
		border-radius: 22px;
}

body.tablet-device #main-section .content
{
	padding-right: 0; /* BD150109 content alignment */
}
body.tablet-device .progress-bar,
body.tablet-device .nav,
body.tablet-device .secondary-nav-section
{
	margin-right: 65px; /* BD150109 content alignment */
}

body.phone-ls-device #main-section .content,
body.phone-pt-device #main-section .content
{
	padding-left: 30px; /* BD150109 content alignment */
}


/* + + + 360px + + + */
body.phone-ls-device.below360px .nav .buttons,
body.phone-pt-device .nav .buttons
{
	width: 100%;
}

body.phone-ls-device.below360px input.mrNext,
body.phone-pt-device input.mrNext,
body.phone-ls-device.below360px input.mrPrev,
body.phone-pt-device input.mrPrev
{
	padding-left: 2% !important;
	padding-right: 2% !important;
	margin: 0 !important;
	text-align: left;
}

body.phone-ls-device.below360px .nav .buttons.no-prev input.mrNext,
body.phone-pt-device .nav .buttons.no-prev input.mrNext
{
	width: 100% !important;
}

body.phone-ls-device.below360px input.mrPrev,
body.phone-pt-device input.mrPrev
{
	width: 40% !important;
}

body.phone-ls-device.below360px input.mrNext,
{
	width: 58% !important;
}

/* + + + phone ls && pt + + + */
body.phone-ls-device .progress-bar,
body.phone-ls-device .nav,
body.phone-ls-device .secondary-nav-section,
body.phone-pt-device .progress-bar,
body.phone-pt-device .nav,
body.phone-pt-device .secondary-nav-section
{
	margin-right: 30px; /* BD150109 content alignment */
}


body.phone-ls-device input[type='submit'],
body.phone-pt-device input[type='submit']
{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;  
	padding: 15px 14px;
	
/* PR Added to fix new IOS issue where nav buttons looked greyed out with white text */
	background-color: #e6e6e6;
	color: black;
}

body.phone-ls-device .goto-button select,
body.phone-pt-device .goto-button select
{
	padding: 1.1em;
}

body.phone-ls-device input.mrNext,
body.phone-pt-device input.mrNext
{
	padding-right: 80px; /* Larger button */
}

body.phone-ls-device #main-section .header,
body.phone-pt-device #main-section .header
{
	padding: 0;
	text-align: left;
}
body.phone-ls-device .progress-bar.top-bar,
body.phone-pt-device .progress-bar.top-bar,
body.phone-ls-device #main-section .menu-icon,
body.phone-pt-device #main-section .menu-icon
{
	display: block;
}

body.phone-ls-device #main-section #info-section,
body.phone-pt-device #main-section #info-section,
body.phone-ls-device #main-section .footer,
body.phone-pt-device #main-section .footer,
body.phone-ls-device .progress-bar.bottom-bar,
body.phone-pt-device .progress-bar.bottom-bar
{
	display: none;
}

body.phone-ls-device .qt-section > .qt-label label span.mrQuestionText,
body.phone-pt-device .qt-section > .qt-label label span.mrQuestionText,
body.phone-ls-device .qt-controls .mrQuestionTable,
body.phone-pt-device .qt-controls .mrQuestionTable
{
	margin-left: 0 !important;
}

body.phone-ls-device .qt-label label span.mrQuestionText,
body.phone-pt-device .qt-label label span.mrQuestionText
{
	text-align: left !important;
}

body.phone-ls-device .qt-controls,
body.phone-pt-device .qt-controls
{
	display: block;
	width: 100%;
	margin-bottom: 5px;
}

body.phone-ls-device .qt-controls span textarea,
body.phone-ls-device .qt-controls span input[type='text'],
body.phone-ls-device .qt-controls span select,
body.phone-pt-device .qt-controls span textarea,
body.phone-pt-device .qt-controls span input[type='text'],
body.phone-pt-device .qt-controls span select
{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
	margin-left: 0 !important;
	margin-right: 0;
	width: 100%;
}

body.phone-ls-device .qt-controls span input[type='text'],
body.phone-ls-device .qt-controls span select,
body.phone-pt-device .qt-controls span input[type='text'],
body.phone-pt-device .qt-controls span select
{
	height: 3em;
}

body.phone-ls-device input.mrNext
{
	padding-right: 127px;
}

body.phone-pt-device input.mrNext
{
	width: 57% !important;
}

/* + + + media queries + + + */
/* + + + Medium Devices, Desktops : 992px + + + */
@media (max-width: 992px){
}

/* + + + Tablet (portrait) : 768px + + + */
@media (max-width: 768px){

	#main-section .content
	{
		padding-right: 0; /* BD150109 content alignment -- PR update from 0 to 30px to create right margin */
	}
	#main-section .qure
	{
		min-height: 200px;
		height: auto !important; 
		height: 200px;	/* IE treats "height" how "min-height" is supposed to be treated */
	}

	/* #main-section .qure.threeQuarter / * BD150206 QureWidth */
	#main-section .qure.threeQuarter .mrBannerText,
	.qt-default .qt-header,
	.qt-default .qt-label
	{
		width: 100%;
	}

	.progress-bar,
	.nav,
	.secondary-nav-section
	{
		margin-right: 65px; /* BD150109 content alignment */
	}

	input[type='checkbox'],
	input[type='radio']
	{
		width: 44px;
		height: 44px;
		border-style: solid;
		border-width: 1px;
	}
	table input[type='checkbox'],
	table input[type='radio']
	{
		width: auto;
		width: initial;
		height: auto;
		height: initial;
	}

	input[type='checkbox']
	{
		-webkit-border-radius: 2px;
		-moz-border-radius: 2px;
		border-radius: 2px;
	}
	input[type='radio']
	{
		-webkit-border-radius: 22px;
		-moz-border-radius: 22px;
		border-radius: 22px;
	}

	#pgbox .pgbox-menu .highlight-img img
	{
		top: 0.3em;
	}

}/* END: @media (max-width: 768px) */

/* + + + Smartphones (landscape) : 480px || @media && body.phone-ls-device{} + + + */
@media (max-width: 480px){

	#main-section .content
	{
		padding-left: 30px; /* BD150109 content alignment */
	}

	.progress-bar,
	.nav,
	.secondary-nav-section
	{
		margin-right: 30px; /* BD150109 content alignment */
	}

	#main-section .qure
	{
		min-height: 150px;
		height: auto !important; 
		height: 150px;	/* IE treats "height" how "min-height" is supposed to be treated */
	}

	#main-section .header
	{
		padding: 0;
		text-align: left;
	}
	.progress-bar.top-bar,
	#main-section .menu-icon
	{
		display: block;
	}

	#main-section #info-section,
	#main-section .footer,
	.progress-bar.bottom-bar
	{
		display: none;
	}

	input[type='submit']
	{
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;  
		padding: 15px 14px;
		
	/* PR Added to fix new IOS issue where nav buttons looked greyed out with white text */
		background-color: #e6e6e6;
		color: black;
	}

	.goto-button select
	{
		padding: 1.1em;
	}

	input.mrNext
	{
		padding-right: 128px; /* Larger button */
	}


	/* FORM-DISPLAY */
	.qt-section > .qt-label label span.mrQuestionText,
	.qt-controls .mrQuestionTable
	{
		margin-left: 0 !important;
	}

	.qt-label label span.mrQuestionText
	{
		text-align: left !important;
	}

	.qt-controls
	{
		display: block;
		width: 100%;
		margin-bottom: 5px;
	}

	.qt-controls span textarea,
	.qt-controls span input[type='text'],
	.qt-controls span select
	{
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  box-sizing: border-box;
		margin-left: 0 !important;
		margin-right: 0;
		width: 100% /*!important;  PR removed to overwrite in the Risk & Return section*/
	}

	.qt-controls span input[type='text'],
	.qt-controls span select
	{
		height: 3em;
	}

	.qt-controls span input[type='text']
	{
		padding-left: 2%;
	}

	.resp-checkbox-radio-parent span input.mrOtherEdit
	{
		margin-left: 4em !important;
		margin-top: 0.4em;
		width: 75% !important;
	}
	
	@media (max-width: 768px){
		.resp-checkbox-radio-parent span input.mrOtherEdit {
			margin-left: 1.7em !important;
		}
	}

	/*** progress-box ***/
/*	PR - removed duplicate formatting below - above reduces padding further for improved mobile look/feel
	#pgbox #main-section .content
	{
		padding: 20px 65px 0 65px;
	}
*/
	#pgbox #main-section .pgbox-mobile-section,
	#pgbox #main-section .content-section
	{
		display: block;
		width: 100%;
	}
	#pgbox #main-section .pgbox-mobile-section
	{
		margin-bottom: 5px;
	}
	#pgbox #main-section .pgbox-mobile-section .pgbox-bar
	{
		height: 19px;
		padding: 0 2px;
		cursor: pointer;
	}
	#pgbox #main-section .pgbox-mobile-section .pgbox-menu
	{
		display: none;
	}
	#pgbox #main-section .pgbox-mobile-section .pgbox-menu h3
	{
		margin-top: 0;
	}
	#pgbox .pgbox-menu .highlight-img
	{
		width: 8%;
		margin: 0 3% 0 1%;
		text-align: right;
	}
	#pgbox .pgbox-menu .highlight-img img {
		top: 0.2em;
	}
	

}/* END: @media (max-width: 480px) */

/** + + + 360px + + + **/
@media (max-width: 360px){

	.progress-bar,
	.nav,
	.secondary-nav-section
	{
		margin-right: 0; /* BD150209 Adapt button-sizes */
	}

	.nav .buttons
	{
		width: 100%;
	}
	input.mrNext,
	input.mrPrev
	{
		padding-left: 2% !important;
		padding-right: 2% !important;
		margin: 0 !important;
		text-align: left;
	}
	input.mrNext
	{
		width: 58% !important;
	}
	.nav .buttons.no-prev input.mrNext
	{
		width: 100% !important;
	}
	input.mrPrev
	{
		width: 40% !important;
	}
	.nav .buttons .secondary-button-section
	{}


}

/* + + + Smartphones (portrait) : 320px + + + */
@media (max-width: 320px){

	.progress-bar,
	.nav,
	.secondary-nav-section
	{
		margin-right: 0; /* BD150209 Adapt button-sizes */
	}

	input.mrNext
	{
		width: 57% !important;
	}
}


.myLoadingDiv {
    width: 100%;
	height:100vh;
    background-color: white;
    position: fixed;
    left: 0; top: 0;
    z-index: 9999;
	padding-top:20%;
	text-align:center;
}

.loadCont{
	position:fixed;
	left:0;
	right:0;
}
.lds-grid {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.lds-grid div {
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #b053a1;
  animation: lds-grid 1.2s linear infinite;
}
.lds-grid div:nth-child(1) {
  top: 6px;
  left: 6px;
  animation-delay: 0s;
}
.lds-grid div:nth-child(2) {
  top: 6px;
  left: 26px;
  animation-delay: -0.4s;
}
.lds-grid div:nth-child(3) {
  top: 6px;
  left: 45px;
  animation-delay: -0.8s;
}
.lds-grid div:nth-child(4) {
  top: 26px;
  left: 6px;
  animation-delay: -0.4s;
}
.lds-grid div:nth-child(5) {
  top: 26px;
  left: 26px;
  animation-delay: -0.8s;
}
.lds-grid div:nth-child(6) {
  top: 26px;
  left: 45px;
  animation-delay: -1.2s;
}
.lds-grid div:nth-child(7) {
  top: 45px;
  left: 6px;
  animation-delay: -0.8s;
}
.lds-grid div:nth-child(8) {
  top: 45px;
  left: 26px;
  animation-delay: -1.2s;
}
.lds-grid div:nth-child(9) {
  top: 45px;
  left: 45px;
  animation-delay: -1.6s;
}
@keyframes lds-grid {
  0%, 100% {
    opacity: 0.8;
  }
  50% {
    opacity: 0.5;
  }
}
/* RW 16-02-2022: changed to:  content:"X"  uppercase X character, bold, 28px margin-left */
.tippy-tooltip::before{
	content:"X";
	font-weight:bold;
	margin-left: 28px;
	float:right;
	cursor:pointer;
}

.tippy-tooltip{
	padding-right:10px;
	width: 100%;
}

@media (max-width: 508px){
	.tippy-tooltip{
		margin-left: 28px;
	}
	.qt-controls{
		width:100% !important;
	}
	.tippy-tooltip {
		max-width: 87% !important;
	}
}
/*
@media screen and (min-width: 462px) and (max-width: 518px){
	.tippy-tooltip {
		margin-left: 2px;
	}
}
*/
.tippy-content{
	width:97%;
}

.tippy-popper {
    transition-timing-function: cubic-bezier(.165,.84,.44,1);
    max-width: calc(100% - 8px);
    pointer-events: all !important;
}

/*
	ADDED BY DEX 2021-03-12 - mobile label alignment fix
*/
@media screen and (max-width: 768px) {

	.resp-checkbox-radio-parent textarea ~ label {
		display: inline-block;
	}

	.resp-checkbox-radio-parent textarea ~ label .mrMultipleText {
		position: static;
	}
	
}