body { background: center top; background-image: url(../images/bg.jpg);background-repeat: no-repeat; background-color:#FFFFFF;}

    /* the width of the outerframe must be the same as the width of your header image */
	div#outerframe { width: 822px;}
	/* comment the next line if your header should not be flush with the top of the page */
	div#headerpush {display:none;} 

    /* WCAG setup - Note that they don't begin with "div" */
	#header { background-image:url('../images/Header.png'); height: 220px;}
	#middle { background-image:url('../images/Middle.png'); }	
	#footer { background-image:url('../images/Footer.png'); height: 88px;}	

	/* New for WCAG Next Button, Back Button */
	input#NextButton {
		background-image: url('../images/Button.png');
		border-style: none;
		background-color: transparent;
		color: White;
		font-weight: bold;
		height:35px;
		width:115px;
		margin-left: 5px;
		margin-right: 5px;
	}	

/* Simple Radio Button & Checkbox */
.checkboxSimpleInput { background: url(../images/WSE_Checkboxes_@1x.png) no-repeat;}

/* Alt. Background Color */
.InputRowEven { background-color: #EEEEEE; }
#content { margin:0 15px !important;} /* Required for Privacy Policy */
h2 {font-size: 1.2em;} /* Required for ADA Compliant Header Sizing */

/* Translations will have lengthier text.  We can use this for US or en-GB text as well to help format the footer links. */
body.US #footer, body.es-US #footer, body.fr-CA #footer {padding:5px 15px 0 15px !important;}
body.US #footerCRT, body.es-US #footerCRT, body.fr-CA #footerCRT {padding:5px 0px 0 0px !important;}


#footer {padding: 17px 15px 0 15px !important;}
li#footerCR {width: 45% !important;}
body.ar div#footerCR {padding-left: 380px !important;}
body.ar-OM div#footerCR {padding-left: 580px !important;}


body.AUS #footer {padding: 8px 25px 0 0 !important;}
body.AUS li#footerCR {padding: 10px 0 0 25px !important;}



body.KOR #footer, body.SAU #footer {padding: 5px 15px 0 15px !important;}

body.KOR #footer {padding: 8px 25px 0 0 !important;}
body.KOR li#footerCR {padding: 10px 0 0 25px !important;}

#footerCRT {
	padding: 0 6px;
	margin: 0;	
}

#footerCRT li {
	list-style-type: none;
	float: left;
	text-align: right;
	/* -.3em top margin to center the copyright text. - Play around with this if your copyright needs to be moved up.  CFA_ONESI is a good example to lok at for the copyright (Baxter's setup) */
	margin: -.3em 0 0 1em;
}

body.IndexPage #surveyEntryForm, body.IndexPage div#Buttonholder {text-align:left;}

div#footerframe { background-image:url(../../../Common/images/BottomLogoBlack.png);}
#footer, #footer a { color:white !important;}

body.PreCouponEntryRTL div#content {min-height: 10px !important;}

/* **** Index page with numerical image references to receipt **** */
body.CouponEntry form {float:left;width:440px;text-align:left;padding:0 10px;}
body.CouponEntry div#content 
{
	min-height:380px !important;
	background-repeat:no-repeat;
	background-position: 470px 15px;
	position: relative;
}


/*body.CouponEntryRTL div#content {background-position: 470px 15px;}*/
/* Country-specific receipt images. */
body.CouponEntry_ARE div#content {background-image:url('../images/ARE/Receipt_ARE.png'); }
body.CouponEntry_CAN div#content {background-image:url('../images/CAN/Receipt_CAN.png');  min-height:575px !important;background-position: 470px 25px;}
body.CouponEntry_FRA div#content {background-image:url('../images/FRA/Receipt_FRA.png'); min-height:570px !important;}
body.CouponEntry_IDN div#content {background-image:url('../images/IDN/Receipt_IDN.png');}
body.CouponEntry_KWT div#content {min-height: 580px !important; background-image:url('../images/KWT/Receipt_KWT.png');}
body.CouponEntry_MEX div#content {min-height: 580px !important; background-image:url('../images/MEX/Receipt_MEX.png');}
body.CouponEntry_PRI div#content {background-image:url('../images/PRI/Receipt_PRI.png');}
/* SAU URL receipt image at end of Styles*/
body.CouponEntry_SGP div#content {background-image:url('../images/SGP/Receipt_SGP.png'); min-height:650px !important;}
body.CouponEntry_THA div#content {
	min-height: 380px !important;
	background-image: url('../images/THA/Receipt_THA.png');
	background-repeat: no-repeat;
	background-position: 480px 20px;
	position: relative;
}


body.CouponEntry .IndexHeader {font-size:1.2em;}
body.CouponEntry .IndexText span {display:block;margin:.75em 0;}
body.CouponEntry .IndexText00 { min-width:155px; float:left; padding:4px 0 4px 28px; background-repeat:no-repeat; background-position: left center;  }
/* LTR default */
body.CouponEntry .ItemOne {
	background-image: none;
}

	body.CouponEntry .ItemOne .IndexText00 {
		background-image: url('../../../Common/images/1.png');
		background-repeat: no-repeat;
		background-position: left center;
		display: inline-block;
		min-width: 155px;
		min-height: 24px;
		padding: 4px 0 4px 28px;
	}

/* RTL override */
body.CouponEntryRTL .ItemOne.IndexText,
body.PreCouponEntryRTL .ItemOne.IndexText {
	display: block;
	text-align: right;
}

body.CouponEntryRTL .ItemOne .IndexText00,
body.PreCouponEntryRTL .ItemOne .IndexText00 {
	float: right;
	display: inline-block;
	min-width: 155px;
	min-height: 24px;
	background-image: url('../../../Common/images/1.png');
	background-repeat: no-repeat;
	background-position: right center;
	padding: 4px 28px 4px 0;
	margin-left: 8px;
	text-align: right;
}

body.CouponEntryRTL .ItemOne .IndexText01,
body.PreCouponEntryRTL .ItemOne .IndexText01 {
	float: right;
	display: inline-block;
	padding: 4px 0 0 0;
}
body.CouponEntry .ItemTwo { background-image:url('../../../Common/images/2.png');} 
body.CouponEntry .ItemThree { background-image:url('../../../Common/images/3.png');} 
body.CouponEntry .ItemFour { background-image:url('../../../Common/images/4.png');} 
body.CouponEntry .ItemFive { background-image:url('../../../Common/images/5.png');} 
body.CouponEntry .IndexText01 {float:left; background-image:none; padding: 4px 5px 0;}
body.CouponEntry .IndexText00, body.IndexPage .Error {clear:both;}
body.CouponEntry div#Buttonholder {text-align:left;}

/* URL Entry without receipt */
body.CouponEntry_NoReceipt form {width:755px}
body.CouponEntry_NoReceipt .IndexText00 { padding:4px 0 4px 0px !important;}
body.CouponEntry_NoReceipt .ItemOne, body.CouponEntry_NoReceipt .ItemTwo, 
body.CouponEntry_NoReceipt .ItemThree, body.CouponEntry_NoReceipt .ItemFour, 
body.CouponEntry_NoReceipt .ItemFive { background-image: none;} 
body.CouponEntry_NoReceipt div#content {background-image: none;  min-height:310px !important;}

body.CouponEntry_id .IndexText00 { min-width:210px;}
body.CouponEntry_ar .IndexText00 { min-width:155px;}

/* **** IndexPage PickLanguageLinks - WCAG **** */
ul.languageOption {width:100%;text-align:left;padding:0;margin:0;}
ul.languageOption li {display:block;margin-right:1em;}
div.languageOption {text-align: left !important;}
body.rightToLeft div.languageOption {text-align: right !important;}

/* **** Finish Page *****/
div#finishContainer {text-align:left;margin:auto;}

div#connectContent ul {padding:0;margin:auto;}
div#connectContent ul li {display:inline;margin:0 auto;list-style:none;}

.ConnectOn p.connectHeader, .ConnectOn p.FinishHeader {font-weight:bold;font-size:1.4em;margin:auto;}
/*.ConnectOn div#finishIncentiveHolder, 
.ConnectOn div#finishConnectHolder 
{
	border:solid 1px #747474;
	padding:15px;
	margin:5px;
	background-color:#ffffff;
	-moz-border-radius:.6em;
	border-radius:.6em;
	-webkit-border-radius:.6em;
}*/

.ConnectOn div#finishIncentiveHolder
{
	padding:15px;
	margin:5px;
}
 
.ConnectOn div#finishConnectHolder 
{
	border:solid 1px #d1d1d1;
	padding:7px;
	margin:5px;
	background-color:#f0f1ed;
	-moz-border-radius:.2em;
	border-radius:.2em;
	-webkit-border-radius:.2em;
}
.ConnectOn div#finishIncentive {float:left;width:63%;}
.ConnectOn div#finishConnect {float:left;width:37%;text-align:center;}
.ConnectOn div#finishIncentive hr, .ConnectOn div#finishConnect hr {border:none;background-color:#cccccc;height:1px;margin:1em auto;}
.ConnectOn hr.connectHeaderRule {margin-top:.5em !important;}
.ConnectOn div#finishConnect div#connectContent div#connectSocial {text-align:center;}
.ConnectOn div#finishConnect div#connectContent div#connectSocial li {padding: 0 .25em;}

.ConnectOff p.connectHeader {display:none;}
.ConnectOff div#connectContent ul li {padding-right:1em;}
.ConnectOff div#finishConnect {text-align:center;}
.ConnectOff div#finishIncentive hr, .ConnectOff div#finishConnect hr {display:none;}
.SocialOff div#finishIncentive {float:none;margin:auto;}

/* RTL */
body.rightToLeft div#finishContainer { text-align: right; }
body.rightToLeft .ConnectOn p.FinishHeader { text-align: right !important; }
body.rightToLeft .ConnectOn div#finishIncentive, body.rightToLeft .ConnectOn div#finishConnect {float:right;}
body.rightToLeft .ConnectOn div#finishConnect div#connectContent div#connectSocial {text-align:right;}


body.IndexPageRTL div#Buttonholder, body.CouponEntryRTL div#Buttonholder, body.PreCouponEntryRTL, body.PreCouponEntryRTL div#Buttonholder { text-align: right; }
body.CouponEntryRTL form { float:right; text-align:right;}
/* This line controls the positioning of the receipt image */
body.CouponEntryRTL div#content { background-position: 30px 15px;}
body.CouponEntryRTL .IndexText00 { float:right; padding:4px 28px 4px 0; background-position: right center;  }
body.CouponEntryRTL .IndexText01 { float:right;}
body.CouponEntryRTL div#Buttonholder {text-align:right;}

/* WebCoup HardError Text - center align since arabic languages will go off of the right of the page. */
div#BlockPage.SurveyHolder {
	text-align: center !important;
}

/* Used to add padding to the Social buttons on the finish page for WCAG now that they use <span> */
a img {padding: 4px 4px !important;}


/* WCAG - control the color of the radio buttons (https://confluence.smg.com/pages/viewpage.action?spaceKey=WSE&title=Upgrading+to+WCAG+survey+setup) */
input[type="radio"] ~ label.radioSimpleInput:before {
	font-family: "Font Awesome 5 Pro";
	/*  content: "\f6be";*/
	color: #007A48; /* - Controls the color of the font awesome radio buttons before they are selected */
}

input[type="radio"]:checked ~ label.radioSimpleInput:before {
	font-family: "Font Awesome 5 Pro";
	font-weight: 900;
	/*  content: "\f6be";*/
	color: #007A48; /* - Controls the color of the font awesome radio buttons after they are selected */
}

.fa-custom-radio-scale-off::before, .fa-custom-radio-scale-on::before {
	color: #000000;
}

.fa-custom-radio-scale-off::before, .fa-custom-radio-scale-on::before {
	color: #000000;
}

/* All star-rating questions */
.rbList.FNSQuestion.radio-custom {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: 100%;
	gap: 18px;
}

/* The star options */
.rbList.FNSQuestion.radio-custom > .rbloption {
	flex: 0 0 auto;
	float: none;
}

/* The wrapper that holds the under-star text */
.rbList.FNSQuestion.radio-custom > .hf-custom-image-wrapper {
	flex: 0 0 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	margin-top: 6px;
}

/* The text container itself */
.rbList.FNSQuestion.radio-custom .custom-radio-scale-text-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 40px;
	width: 100%;
	text-align: center;
}

.rbList.FNSQuestion.radio-custom .custom-radio-scale-text-for-fill {
	display: block;
	float: none;
	position: static;
	text-align: center;
	white-space: nowrap;
}

body.rightToLeft div#finishContainer { text-align: right; }
body.rightToLeft .ConnectOn p.FinishHeader { text-align: right !important; }
body.rightToLeft .ConnectOn div#finishIncentive, body.rightToLeft .ConnectOn div#finishConnect {float:right;}
body.rightToLeft .ConnectOn div#finishConnect div#connectContent div#connectSocial {text-align:center;}

/* RTL support for star scales */
/* Keep the star scale centered and RTL */
body.rightToLeft .rbList.FNSQuestion.radio-custom {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: 100%;
	gap: 18px;
	direction: rtl;
}

body.rightToLeft .rbList.FNSQuestion.radio-custom > .rbloption {
	flex: 0 0 auto;
	float: none;
}

body.rightToLeft .rbList.FNSQuestion.radio-custom > .hf-custom-image-wrapper {
	flex: 0 0 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	margin-top: 6px;
	direction: rtl;
}

body.rightToLeft .rbList.FNSQuestion.radio-custom .custom-radio-scale-text-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 40px;
	width: 100%;
	text-align: center;
	direction: rtl;
}

body.rightToLeft .rbList.FNSQuestion.radio-custom .custom-radio-scale-text-for-fill {
	display: block;
	float: none;
	position: static;
	text-align: center;
	white-space: nowrap;
}

body.rightToLeft .rbList:not(.radio-custom) .radioSimpleInput {
	background-position: right center !important;
	padding-right: 28px;
	padding-left: 0;
	text-align: right;
}

body.rightToLeft .rbList:not(.radio-custom) .rbloption {
	text-align: right;
}

/* ==========================================
   PICKLISTS - LTR & RTL
   ========================================== */

/* Force picklist section to start on a new line */
app-picklist {
	display: block;
	clear: both;
	width: 100%;
	margin-top: 12px;
}

/* Each dropdown row */
.picklistGroup {
	display: block;
	clear: both;
	width: 100%;
	margin: 8px 0;
}

/* Label styling */
.picklisttext {
	display: inline-block;
	width: 110px;
	vertical-align: middle;
}

/* Dropdown styling */
.picklist {
	display: inline-block;
	vertical-align: middle;
	min-width: 200px;
}

/* ==========================================
   LEFT TO RIGHT
   ========================================== */

body:not(.rightToLeft) .picklisttext {
	text-align: left;
	margin-right: 8px;
}

body:not(.rightToLeft) .picklistGroup {
	text-align: left;
}

/* ==========================================
   RIGHT TO LEFT
   ========================================== */

body.rightToLeft .picklistGroup {
	text-align: right;
}

body.rightToLeft .picklisttext {
	text-align: right;
	margin-left: 8px;
	margin-right: 0;
}

/* Put label on the right side of dropdown */
body.rightToLeft .picklistGroup app-dropdown {
	direction: rtl;
}

/* ==========================================
   RADIO BUTTONS RTL
   ========================================== */

body.rightToLeft .rbList:not(.radio-custom) .radioSimpleInput {
	background-position: right center !important;
	padding-right: 28px;
	padding-left: 0;
	text-align: right;
}

body.rightToLeft .rbList:not(.radio-custom) .rbloption {
	text-align: right;
}

/* ==========================================
   STAR RATINGS (LTR & RTL)
   ========================================== */

.rbList.FNSQuestion.radio-custom {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: 100%;
	gap: 18px;
}

	.rbList.FNSQuestion.radio-custom > .rbloption {
		flex: 0 0 auto;
		float: none;
	}

	.rbList.FNSQuestion.radio-custom > .hf-custom-image-wrapper {
		flex: 0 0 100%;
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 6px;
	}

	.rbList.FNSQuestion.radio-custom .custom-radio-scale-text-wrapper {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 40px;
		width: 100%;
		text-align: center;
	}

	.rbList.FNSQuestion.radio-custom .custom-radio-scale-text-for-fill {
		display: block;
		float: none;
		position: static;
		text-align: center;
		white-space: nowrap;
	}

/* RTL star ratings */
body.rightToLeft .rbList.FNSQuestion.radio-custom {
	direction: rtl;
}

	body.rightToLeft .rbList.FNSQuestion.radio-custom > .hf-custom-image-wrapper,
	body.rightToLeft .rbList.FNSQuestion.radio-custom .custom-radio-scale-text-wrapper {
		direction: rtl;
	}

/* URL receipt image */
body.CouponEntry_SAU_URL div#content,
body.CouponEntry_SAU_URL_US div#content,
body.US.CouponEntry_SAU_URL div#content {
    background-image: url('../images/SAU/ReceiptURL_SAU.png') !important;
    background-repeat: no-repeat !important;
    min-height: 540px !important;
    position: relative;
}

/* QR receipt image */
body.CouponEntry_SAU_QR div#content,
body.CouponEntry_SAU_QR_US div#content,
body.US.CouponEntry_SAU_QR div#content {
    background-image: url('../images/SAU/ReceiptQR_SAU.png') !important;
    background-repeat: no-repeat !important;
    min-height: 540px !important;
    position: relative;
}

body.rightToLeft.CouponEntry_SAU_URL_ar div#content,
body.rightToLeft.CouponEntry_SAU_QR_ar div#content {
	background-position: 30px 15px !important;
}

body:not(.rightToLeft).CouponEntry_SAU_URL_US div#content,
body:not(.rightToLeft).CouponEntry_SAU_QR_US div#content,
body.US.CouponEntry_SAU_URL div#content,
body.US.CouponEntry_SAU_QR div#content {
	background-position: 460px 5px !important;
}