body,#footer { background-color:#236192;}
#header {background-color:white;}
#footer,#header { border-color:#236192; border-bottom-style:none; background-repeat:repeat-x;}

#header	{background: center top;  background-image:url(../images/MHeaderbg.png); background-size:1px 83px;} 
#header img { width:271px; height:83px;}

#footer	{ background-image:url(../images/MFooterbg.gif);}

/* **** New Next Button styles **** */
input#NextButton {
	background-color: #e4002b !important; /* Should be same color as Desktop button */
	color:#ffffff !important;
	border: none !important; 
    /* Don't touch anything the below */
    font-size:1.4em !important;
	height:46px !important;
	width:100% !important;
    border-radius:0px !important;
    -webkit-appearance: none !important; 
}


/* Comment this line out if you have OnePage/Tiles and then un-comment the two lines below. */
.SurveyHolder {padding: .5em .7em;}

/* **** END NEW BUTTON STYLES **** */

.InputRowEven { background-color: #eeeeee; }


.MobileMode .checkboxSimpleInput { background: url(../images/WSE_Checkboxes_@2x.png) no-repeat;}


/* **** Footer ****  - WCAG - includes #footer ul li for the All rights reserved text in the footer. */
#footerPP, #footerPP a, #footerTC, #footerTC a, #footerCPP, #footerCPP a, #footerCTC, #footerCTC a , #footer ul li{ color: #ffffff; }
#footerCRT, #PwBY{ color:#ffffff !important; }


/* **** Finish Page **** */
div#finishConnect {text-align:center; margin-top: 3em; border-top: solid thin black;}
div#finishContainer hr {background-color: Transparent; border-width: 0; height: 0; margin: 0; padding: 0;}
div#connectContent {margin:1em;}
div#connectContent div ul {margin:0 !important;list-style:none;padding:0;}
div#connectContent div ul li {padding:.2em;}
.ConnectOn p.connectHeader, .ConnectOn p.FinishHeader {font-weight:bold;}


/* **** Pick Language **** */
ul.languageOption {text-align:left !important;padding-left:0;}
ul.languageOption li { display:block; padding:0; margin:0 1em 0 0;}
div.languageOption {text-align: left !important;}


/* Mobile Receipt */
body.MobileEntryImage .IndexText00 { padding:.5em 2.4em; background-repeat:no-repeat; background-position: left center;margin-bottom: 0;  }
body.MobileEntryImage .ItemOne { background-image:url('../../../Common/images/1.png');} 
body.MobileEntryImage .ItemTwo { background-image:url('../../../Common/images/2.png');} 
body.MobileEntryImage .ItemThree { background-image:url('../../../Common/images/3.png');} 
body.MobileEntryImage .ItemFour { background-image:url('../../../Common/images/4.png');} 
body.MobileEntryImage .ItemFive { background-image:url('../../../Common/images/5.png');} 
body.MobileEntryImage .IndexText01 { background-image:none;} 


/*  BEGIN WCAG Styles */

/* 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: #ec2338; /* - 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: #ec2338; /* - Controls the color of the font awesome radio buttons after they are selected */
}

/* New Global WCAG Class*/
.sr-only {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    padding: 0 !important;
    border: 0 !important;
    white-space: nowrap !important;
    clip: rect(1px 1px 1px 1px) !important; /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px) !important;
    clip-path: inset(50%) !important;
}


/* WCAG - Controls the white space in the right-margin.  Without it, the page gets "squished" to the right.  Most likely not needed for DCC */
.radioSimpleInput {
    white-space: inherit;
}


/* WCAG - For ODEO_CSI, this is needed to control the mobile ProgressBar so it is placed below the Next button within the survey. - TP 2023-01-10. */
#ProgressBar {
    margin: 5em auto 1em !important;
}

/* Experienced an issue for QQCW_DCC on mobile where the right margin was getting squished on their one page survey. This fixed the issue.*/
.question-content .SurveyHolder {
    display: inline-block;
    width: 95% !important;
}

/* PROJECTS WITH STAR SCALES ONLY FOR WCAG - othewise remove */
/* added 2022-01-31 after WCAG - Blaine says to add this to help control the Stars responses from showing on multiple lines */
.scaleTextRight {
    float: right !important;
    margin-left: 100px !important;
}

.scaleTextLeft {
    float: left !important;
    margin-right: 100px !important;
}

/* Controls the border color and thickness when the Font Awesome Stars are selected*/
.fa-custom-radio-scale-on::before {
/*    border-width: 1px; - We can use the webkit-text-stroke-width or this to control the border thickness (See MCDUK's StylesMobile.css) */
    color: #ffbc0d !important;
    -webkit-text-stroke-width: 5px; /* border thickness*/
    -webkit-text-stroke-color: #0f0; /* border color */
}


.MobileMode .rbloption span {
    width: none !important;
}

.MobileMode .rbListContainer .sr-only, .MobileMode .checkboxholder .sr-only {
    width: 1px !important;
}


.MobileMode .cataOption {
    display: block !important;
}

/*  - controls the spacing on the CATA check boxes + the text so they align.  
    - Note that you can't have the display: block line like what is documented in the code above. */
.MobileMode .cataOption {
    display: flex !important;
}
/*  **************************************************** END MOBILE CATA AND TEXT ALIGNMENT ***************************************************************************************************** */

/* Prevents the container from shrinking in on the page (right-margin) May not be needed for all projects, but needed for MCD_JP_CSI so I'm putting it in here! - TP */
.MobileMode .cataList {
    display: block;
}


/* I found that this global variable was causing the open end and contact questions to extend outside the container for FIRE_DCC. T. Perez - 2022-12-09 */
.MobileMode .NoPreOrPost {
    width: 90% !important;
}

/* I found that this global variable was causing the Next button to extend outside the container for the OpenEnd question for FIRE_DCC. T. Perez - 2022-12-09 */
.MobileMode .Buttonholder {
    width: 90% !important;
}


/* MOBILE DATE PICKER
    - Controls the position of the Date Picker icon so it aligns with the text box on the left. 
*/
.mobileDatepicker {padding-top:10px !important;}