/* START Custom font apercu-regular per REQ-89446. */
@font-face {
    font-family: Apercu;
    src: url(../fonts/apercu-regular.otf) format('opentype');
}

/* This is needed so that the CATA checkboxes are in-line with the CATA Option text with the new custom font.*/
div.cataOption input {
    margin-top: 4px !important;
}

body {
    background: center top;
    background-image: url(../images/bg.jpg);
    background-repeat: no-repeat;
    font-family: Apercu, Verdana, Helvetica, Arial, sans-serif;
}

    body.IndexText {
        font-family: Apercu, Verdana, Helvetica, Arial, sans-serif;
    }

/* END Custom font apercu-regular per REQ-89446. */



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

/* 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;}

div#header {background-image: url('../images/Header.png');height: 129px;}

div#middle {background-image: url('../images/Middle.png');}

div#footer {background-image: url('../images/Footer.png');height: 63px;}

div#Progress {background-image: url('../images/ProgressBar.png');}

input#NextButton {
    background-image: url('../images/Button.png');
    border-style: none;
    background-color: transparent;
    color: White;
    font-weight: bold;
    height: 41px;
    width: 130px;
}

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

.radioSimpleInput {background: url(../images/WSE_Radio_@1x.png) no-repeat;}

body.es-PR div#header {background-image: url('../images/Header_es-PR.png');}

body.es-US div#header {background-image: url('../images/Header_es-US.png');}

body.fr-CA div#header {background-image: url('../images/Header_fr-CA.png');}


/* Alt. Background Color */
.InputRowEven {background-color: #F3F3F3;}

#content {margin: 0 15px !important;}

/* Required for Privacy Policy */
#footer {padding: 15px 15px 0 15px !important;}

li#footerCR {width: 35% !important;}

#footerCR {padding: 2px 0px 0 0px !important;}

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

/* **** Defaults ***** */
div#footerframe {background-image: url(../../../Common/images/BottomLogoWhite.png);}

#footer, #footer a {color: white !important;}

/* **** IndexPage PickLanguageLinks **** */
ul.languageOption {width: 100%;text-align: left;padding: 0; margin: 0;}

ul.languageOption li {display: block;margin-right: 1em;}


/* **** 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 {padding: 15px;margin: 5px;}

.ConnectOn div#finishConnectHolder {border: solid 1px #E7E7E7;padding: 15px;margin: 5px;background-color: #F3F3F3;-moz-border-radius: .2em;border-radius: .2em;-webkit-border-radius: .2em;}

.ConnectOn div#finishIncentive {float: left;width: 67%;}

.ConnectOn div#finishConnect {float: left;width: 33%;text-align: center;}

.ConnectOn div#finishIncentive hr, .ConnectOn div#finishConnect hr {border: none;background-color: #C2C2C2;height: 1px;margin: 1em auto;}

.ConnectOn hr.connectHeaderRule {margin-top: .5em !important;}

.ConnectOn div#finishConnect div#connectContent div#connectSocial {text-align: left;padding-left: 1.5em;}

.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;}


/* Custom Index text */
/*.IndexLegalNote, .languageOption {margin:20px 0 0;}*/
.IndexLegalNote {
    float: left;
    font-size: .8em;
    font-style: italic;
    line-height: 2.5em;
}


/* Custom finish page look */
div#finishLeftFooterNote {text-align: left;font-size: .8em;font-style: italic;line-height: 1em;padding-top: 2em;}


.ConnectOn2 div#finishIncentive2 {
    float: left;
    width: 100%;
}

.ConnectOn2 div#finishIncentiveHolder2 {
    min-height: 150px !important;
    background-image: url('../images/SendGiftImg.png');
    background-repeat: no-repeat;
    background-position: 10px 20px;
    position: relative;
    border: solid 1px #e2e2e2;
    padding: 15px;
    margin: 5px;
    background-color: #f1f4f7;
    -moz-border-radius: .2em;
    border-radius: .2em;
    -webkit-border-radius: .2em;
}

/* left align the text on the page, and pad 160 px so the text displays to the right of the SendGiftImg.png image. */
p.customText {text-align: left; padding-left: 160px !important;}




/* ************************************ CUSTOM PROGRESS BAR with modern version that has a motorcycle image ************************************ */

/* Outer track */
#ProgressBarholder {
    /*background: #e5e5e5 !important;*/ /* light grey */ /* Commented out because this was displaying a large container behind the new progress bar when testing that didn't look right.*/
    border-radius: 20px !important;
    height: 20px !important;
    overflow: hidden !important;
    position: relative;
}

/* Hide useless wrapper */
#ProgressBar {
    background: none !important;
}

/* Fill bar (this is what SMG resizes with inline width) */
#Progress {
    background: #d80019 !important; /* red */
    height: 100% !important;
    border-radius: 20px 0 0 20px !important;
    position: relative !important;
}

    /* Motorcycle icon */
    #Progress::after {
        content: "";
        position: absolute;
        top: 50%;
        margin-top: 4px; /* pushes the motorcycle image down so it's level with the bottom of the red progress bar */
        right: -18px; /* aligns icon at right-edge of red progress bar fill */
        transform: translateY(-50%);
        width: 18px;
        height: 18px;
        background-image: url('../images/MotorcycleBig.png');
        background-size: contain;
        background-repeat: no-repeat;
        pointer-events: none;
    }

/* ************************************ END Replace platform progress bar with modern version that has a motorcycle image ************************************ */