/* site.css
    General CSS, loaded on every page
*/

/* Basics*/
html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    font-size: 1em;
    font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
    color: #232323;
    background-color: #fff;
}

header, footer, nav, section {
    display: block;
}

h1, h5, h6, h7 {
    color: #434343;
}

h2, h4, h8 {
    color: #7a7a77;
}

h1 {
    font-Family:Arial, Helvetica, san-sarif;
    font-size:22pt;
}

h2 {
    font-Family:Arial, Helvetica, san-sarif;
    font-size:20pt;
}

h3 {
    font-Family:Arial, Helvetica, san-sarif;
    font-size:19px;
    font-weight:500;
    color: #000000;
}

h4 {
    font-Family: Arial, Helvetica, san-sarif;
    font-size: 34px;
    margin-top: 0;
}

h5 {
    font-Family: Arial, Helvetica, san-sarif;
    font-size: 29px;
}

h6 {
    font-size: 18px;
    font-Family: Arial, Helvetica, san-sarif;
    font-weight: 100;-webkit-font-smoothing: antialiased;
}

h7 {
    font-weight: bold;
    font-size: 16px;
    font-Family: Arial, Helvetica, san-sarif;
}

h8 {
    font-weight: bold;
    font-size: 19px;
    font-Family: Arial, Helvetica, san-sarif;
}

a {
    font-Family: Arial, Helvetica, san-sarif;
    font-size: 15px;
}

a:link {font-weight:bold;
    text-decoration:none;
}

/* Styles for basic forms
-----------------------------------------------------------*/
fieldset {
    border: 1px solid #ddd;
    padding: 0 1.4em 1.4em 1.4em;
    margin: 0 0 1.5em 0;
}

legend {
    font-size: 1.2em;
    font-weight: bold;
}

textarea {
    min-height: 75px;
}

.editor-label {
    margin: 1em 0 0 0;
}

.editor-field {
    margin: 0.5em 0 0 0;
}

/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
    color: #ff0000;
}

.field-validation-valid, .validation-summary-valid {
    display: none;
}

.input-validation-error {
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors, .error {
    font-weight: bold;
    color: #ff0000;
}

.curatedError {
    margin: 20px 0;
    font-size: 1.1em;
}

/*------------ Shared Layout Rules ---------------*/
#RenderBodyContainer {
    margin-left: auto;
    margin-right: auto;
    max-width: 1600px;
}

.WideBody {
    max-width:1100px;
}

#FooterText {
    color:#777777;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    font-size:12px;
}

#LoginContainer {
    display: flex;
    justify-content: space-between;
    max-width: 1600px;
    margin: 0 auto;
    padding-bottom: 1rem;
}

#ShellLoginContainer {
    width:100%;
    max-width: 800px;
    margin: 0 auto;
    display:flex;
    align-items:flex-end;
}

#SpecialColor {
    font-Family: Arial, Helvetica, san-sarif;
    font-size: 29px;
    font-weight:bold;
    margin-top:-1.25em;
}

.darkGray {
    color: #222222;
    font-Family: Arial, Helvetica, san-sarif;
    font-size: 19px;
    font-weight:bold;
    margin-top:0;
    text-align:center;
}

#SignUpBtn,
#SignInBtn,
#LogoffBtn {
    background-repeat: repeat;
    color: #ffffff;
    border-radius: 10px;
    width: 120px;
    height: 26px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    float: right;
    margin: 2.5px;
    padding-top: 3px;
}

#LanguageSelector {
    text-align: right;
}

/*---------- Shell ---------------- */
body.ShellBody {
    margin: 0;
    background-image: url('../images/shell_bg.png');
}

#ShellBodyContainer {
    margin-left: auto;
    margin-right: auto;
    max-width: 1650px;
    background-color: white;
}

#ShellBodyPadding {
    padding: 45px 18px 12px;
}

#ShellHeader {
    width: 100%;
    background-image: url('../images/shell_header_bg.png');
}

#ShellHeaderTop {
    background-color: white;
    padding: 8px 16px;
}

.ShellContentContainer{ width:100%;
    max-width: 1036px;
    height: 100%;
    margin: 0 auto;
    padding-top: 8px;
    display:flex;
    align-items:flex-end;
    flex-wrap: wrap;
}

.ShellContentMenuContainer {
    max-width: 1136px;
}

#ShellMenuBar {
    background: #444555;
    color: white;
    min-height: 40px;
    padding-bottom: 7px;
    padding-left: 8px;
    padding-right: 8px;
}

#ShellMenuBar a.ShellMenuItem {
    padding: 18px 30px 12px 0;
    color: white;
    font-size: 1em;
    font-weight: bold;
}

#ShellMenuBar a.ShellMenuItem:last-of-type {
    padding-right: 0;
}

#ShellMenuBar a.ShellMenuItem:hover {
    color: #CCC;
}

#ShellSignInFlexContainer {
    flex:1 0 0;
    display: flex;
    justify-content: flex-end;
}

/*--- Header Logo ---*/
.header-logo {
    display: flex;
    flex-direction: column;
}
.header-logo h4 {
    margin: 0px !important;
}

.header-logo img {
    max-height: 100px;
}


/*------------- General Style & Layout--------------*/
.centered {
    text-align: center;
    margin: auto 0;
}

img.fullScaled {
    width: 100%;
    margin: auto 0;
}

.normalText {
    color: #000000;
    font-size: 14pt;
}

.leftRightPadded {
    padding: 0 20px;
}

.col500 {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.col700 {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
}

.hidden {
    display: none;
}

.clickable:hover {
    cursor: pointer;
}

.flexSpacer {
    flex: 1 1 auto;
}

.grayed {
    color: #999999;
}

input[type="submit"] {
    cursor: pointer;
}

.ui-datepicker-calendar {
    background: #FFFFFF;
}

.sectionTitle {
    font-size: 28px;
    font-weight: bold;
    margin: 0 auto 30px;;
}

.sectionHeader {
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

.sectionLargeDesc {
    font-size: 24px;
    color: #555;
}

.sectionDesc {
    font-size: 20px;
    color: #555;
}

/*------------Responsive Design Forms---------------*/
div.resp_form_dbl {
    box-sizing: border-box;
    max-width: 800px;
    margin: 0 auto;
}

div.resp_form_dbl > div.resp_form_item_subtle {
    box-sizing: border-box;
    display: inline-block;
    width: 50%;
    padding: 0 30px 0 0;
    margin-bottom: 8px;
}

div.resp_form_item_subtle:nth-of-type(2n) {
    padding: 0 0 0 30px;
}

.resp_form_title_subtle > label {
    font-weight: bold;
    color: #808080;
}

div.resp_form_title_subtle {
    box-sizing: border-box;
    display: inline-block;
    width: 40%;
}

div.resp_form {
    max-width: 400px;
    margin: 0 auto;
}

div.resp_form_item {
    box-sizing: border-box;
    margin-bottom: 8px;
}

div.resp_form_item > label {
    box-sizing: border-box;
    display: inline-block;
    width: 40%;
    font-weight: bold;
    color: #808080;
    padding-right: 6px;
}

div.resp_input {
    display: inline-block;
    width: 60%;
    min-width: 200px;
}

div.resp_input > select {
    max-width: 100%;
}

div.resp_input > input[type="text"], div.resp_input > input[type="password"] {
    width: 100%;
}

div.resp_input_shortened {
    box-sizing: border-box;
    display: inline-block;
}

div.resp_input_shortened > input[type="text"] {
    width: 80%;
    margin-right: 4px;
}

/*------------Unified Responsive Forms for Desktop/Mobile ----------------------------------------*/
div.uni_form {
    max-width: 360px;
    margin: 0 auto;
    text-align: left;
}

div.uni_form label {
    font-weight: bold;
    font-size: 1.1em;
    color: #545454;
}

div.uni_form input {
    width: 100%;
    height: 38px;
    color: #808080;
}

div.uni_form input[type=text] {
    padding-left: 4px;
    font-size: 18px;
}

.uni_questionBox {
    background-image: url(../Images/QuestionBlock.png);
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
}

.uni_form_item {
    margin-bottom: 20px;
}

.uni_input select {
    font-size: 20px;
    padding: 4px;
    max-width: 360px;
}

.uni_form_checkbox_area {
    display: flex;
    align-items: center;
}

.uni_form_checkbox_area input[type=checkbox] {
    width: 80px;
    margin-right: 8px;
 }


/*------------!Button Designs!---------------*/
.button, a.button:link, a.button:visited, span.button > a:link, span.button > a:visited {
    display:inline-block;
    margin: 2px 0;
    padding: 4px 15px 4px 15px;
    font-size: 15px;
    font-weight: bold;
    background-size: 100% 100%;
    border-radius: 8px;
    color: white;
    border: none;
}

.largeButton, a.largeButton:link, a.largeButton:visited {
    padding: 6px 18px 6px 18px;
    font-size: 18px;
    border-radius: 10px;
}

/*--- Balance on Points and Rewards! ---*/
.balanceContainer {
    margin: 4px auto;
    background-size: 100% 100%;
    color: #FFFFFF;
}

.ghost {
    width: 100%;
    display: inline-block;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.balanceHalf {
    vertical-align: middle;
    display: inline-block;
    width: 50%;
    padding: 0 4%;
    text-align: center;
}

.balanceValueArea {
    color: #666666;
}

.balanceMessage {
    font-size: 1.55em;
}

.balanceValue {
    font-size: 3em;
}

.balanceValueSmall {
    font-size: 2.6em;
}

.balanceValueXSmall {
    font-size: 2em;
}

.balanceValueXXSmall {
    font-size: 1.7em;
}

.balanceUnits {
    font-size: 1em;
}

@media (min-width: 520px) {
    .balanceContainer {
        height: 116px;
        width: 450px;
        font-size: 13pt;
    }
}

@media (min-width: 420px) and (max-width: 520px) {
    .balanceContainer {
        height: 90px;
        width: 350px;
        font-size: 11pt;
    }
}

@media (min-width: 320px) and (max-width: 420px) {
    .balanceContainer {
        height: 64.4px;
        width: 250px;
        font-size: 7.5pt;
    }
}

@media (max-width: 320px) {
    .balanceContainer {
        height: 52px;
        width: 200px;
        font-size: 6pt;
    }
}

/*--- My Rewards & BalanceInquiry ---*/
.offersContainer {
    background-color: #e1e0e0;
    padding: 30px;
    margin: 6px 0;
}

.offerBox {
    background-color: #FFFFFF;
    padding: 24px;
    margin-bottom: 16px;
}

.offerBox:last-of-type {
    margin-bottom: 0;
}

.offerName {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 1.5em;
    color: #555555;
}

.offerExpired {
    font-size: 1.2em;
    margin-top: 22px;
}

.offerDaysRemaining {
    color: #777777;
}

.offerSpendBarContainer {
    margin-top: 16px;
    position: relative;
    height: 45px;
    border-radius: 10px;
    text-align: right;
}

.offerIncomplete {
    background-color: #aaa;
}

.offerPercent {
    position: absolute;
    top: 0;
    left: 0;
    height: 45px;
    border-radius: 10px;
}

.offerSpendRemainingArea {
    position: absolute;
    top: 0;
    right: 20px;
    height: 45px;
    text-align: center;
    color: #FFFFFF;
    padding-top: 3px;
    line-height: 20px;
}

.offerSpendRemaining {
    font-size: 1.3em;
    vertical-align: middle;
}

.offerSquareBox {
    display: inline-block;
    margin-top: 6px;
    text-align: center;
}

.offerSquare {
    display: inline-block;
    height: 45px;
    width: 45px;
    margin-top: 10px;
    margin-right: 10px;
}

.offerUnitsRemaining {
    display: inline-block;
    font-weight: bold;
    font-size: 1.1em;
    margin: 4px 0 10px 0;
}

/*---Sign-In Home Page---*/
#TitleHeader {
    text-align:center;
    letter-spacing:2px;
}

#ForgotPassword {
    letter-spacing: 2px;
    text-align:center;
}

#PasswordLink {margin-top: 0;
    font-size:10px;
    text-align:right;
    width:230px;
}

#EmailLink {
    margin-top: 0;
    font-size: 1em;
}

.show_password {
    text-align: right;
}

/*---Forgot Password Page---*/
#SecondTitle {
    text-align: center;
    margin-top:-3em;
}

/*---Register Steps---*/
#StepContainer {
    text-align: center;
    margin: 0 auto;
    width: 320px;
    height: 60px;
}

.step {
    display: inline-block;
    text-align: center;
    width: 100px;
    height: 100%;
    line-height: 60px;
    margin-right: 10px;
    color: white;
    border-radius: 30px;
    font-size: 26px;
    font-weight: bold;
    background: #CCC;
}

.step:last-of-type {
    margin-right: 0;
}

#SmallNote {font-size:10px;
    margin-top:-1em;
}

#QBContainer {
    display: none;
    background: #555;
    padding: 16px;
    color: white;
}

#QuestionBoxInfo {
    margin: 16px auto 0;
    background-image: url(../Images/QuestionBlockHOVER.png);
    background-repeat: no-repeat;
    background-size: contain;
    height: 114px;
    width: 180px;
}

#RegisterSuccess {
    background-repeat: no-repeat;
    width: 800px;
    height: 373px;
    margin-left:-2.4em;
}

#SignInAction {
    margin-top: 1.75em;
}

.infoBox {
    font-size: 1.1em;
    border: 2px solid black;
    margin: 8px;
    padding: 8px;
}

.formInfo {
    margin: 20px 0 6px;
    border-left: 8px solid darkred;
    padding-left: 10px;
    font-size: 0.9em;
    text-align: left;
    color: #676767;
}

/*----Alt Reg----*/
.regExplanation {
    margin-top: 16px;
    font-size: 1.3em;
}

.bigEmphasis {
    margin-top: 16px;
    text-align: center;
    font-size: 1.8em;
    font-weight: bold
}

/*----Pets----*/
#petSection {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.petBlock {
    display: inline-block;
    border-radius: 10px;
    border: 1px solid #000000;
    width: 50%;
    max-width: 350px;
    min-width: 250px;
    margin-top: 20px;
}

.petBlock .title {
    color: white;
    font-size: 1.2em;
    padding: 4px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.petFields {
    padding: 12px;
    text-align: left;
}

.petFields label {
    display: inline-block;
    width: 30%;
    font-weight: bold;
}

/*----Coupons----*/
@media (min-width: 760px) {
    #cp_hamburger, .cp_filter_close {
        display: none;
    }
}

@media (max-width: 759px) {
    .cp_filterSection {
        display: none;
    }
}

img.cp_couponImage {
    max-height: 211px;
    max-width: 96px;
    height: auto;
    width: auto;
}

#cp_navTabContainer {
    display: flex;
}

.cp_navTab {
    flex: 1 1 200px;
    max-width: 270px;
    margin-right: 8px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    font-size: 18px;
    font-weight: bold;
    padding: 12px;
    background-color: #EEEEEE;
}

.cp_navTab:last-child {
    margin-right: 0;
}

.cp_navTabSelected {
    color: white;
}

#cp_progArea {
    position: relative;
}

#cp_prog {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
}

#cp_prog img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

#cp_controlBar {
    display: flex;
}

#cp_hamburger {
    height: 50px;
    width: 50px;
    margin-top: 8px;
    margin-right: 8px;
}

.cp_sticky {
    position: fixed;
    top: 0;
    z-index: 50;
}

#cp_helpTop {
    display: inline-block;
    margin-bottom: 4px;
    align-self: flex-end;
}

.cp_pagingArea {
    display: flex;
    justify-content: end;
}

#cp_quickNav {
    align-self: flex-end;
    display:flex;
    font-size: 32px;
    font-weight: bold;
    margin-right: 4px;
}

#cp_quickNav > * {
    padding-right: 4px;
}

.cp_pageNav {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 3px;
    border-radius: 4px;
    background: #AAA;
    height: 35px;
    min-width: 35px;
    color: white;
}

.cp_current {
    background: black;
}

#cp_page {
    align-self: center;
    font-size: 14px;
    padding: 8px;
}

#cp_overlay {
    display: none;
    position: fixed;
    overflow-y: scroll;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100;
    font-size: 20px;
}

#cp_overlay > .cp_filterSection {
    width: 60%;
}

.noscroll {
    overflow: hidden;
}

#cp_typeSelect,
#cp_sortSelect,
#cp_layoutSelect {
    font-size: 18px;
    height: 32px;
    padding: 0 8px;
}

#cp_get_coupon_error {
    padding: 20px;
    font-size: 18px;
    color: white;
    background: darkred;
    cursor: pointer;
}

#cp_couponMainArea {
    display: flex;
    align-items: flex-start;
    min-height: 210px;
    background: #EFEFEF;
}

#cp_pointBannerArea {
    margin-bottom: 10px;
}

.cp_pointBanner {
    background-image: linear-gradient(
    45deg,
    #cfcf17,
    #b8b814 10%,
    #cfcf17 20%,
    #e6e619 25%,
    #cfcf17 30%,
    #8a8a0f 55%,
    #cfcf17 85%,
    #e6e619 95%,
    #cfcf17
    );
    border: 3px solid #4d4d19;
    text-align: center;
    padding: 18px;
    color: white;
    font-size: 1.6em;
    font-weight: bold;
}

.cp_pointNotice {
    border-left: 2px solid #444449;
    border-right: 2px solid #444449;
    border-bottom: 2px solid #444449;
    padding: 4px;
    background: #E4E4E4;
    font-size: 0.9em;
    color: #444449;
}

.cp_filterSection {
    flex: 0 0 auto;
    background: #EEEEEE;
    padding: 10px;
    width: 200px;
}

.cp_filterHeader {
    display: flex;
    align-self: stretch;
}

.cp_filterHeader > span {
    font-size: 1.2em;
    font-weight: bold;
}

.cp_filter_close {
    height: 40px;
    width: 40px;
}

.cp_filterTitle {
    font-size: 1.1em;
    display: inline-block;
    text-align:center;
    width: 100%;
    background: #DDDDDD;
    margin-bottom: 4px;
}

.cp_filter {
    font-size: 1em;
}

.cp_filter_selected {
    font-weight: bold;
}

#cp_curatedCouponMainArea {
    display: flex;
    align-items: flex-start;
    min-height: 210px;
    border: 3px solid black;
    padding: 20px 0;
    background: white;
}

#cp_couponsArea {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    padding-top: 8px;
    padding-right: 8px;
    justify-content: space-around;
    width: calc(100% - 200px);
}

#cp_curatedouponsArea {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    padding-top: 8px;
    padding-right: 8px;
    justify-content: space-around;
}

#cp_noCouponMsg {
    text-align: center;
    padding: 12px;
    font-size: 32px;
    color: #555555;
    font-weight: bold;
    width: 100%;
}

.cp_coupon_prog {display: none;
    position: absolute;
    text-align: center;
    padding-top: 15%;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 60;
}

.cp_pointCostValue {
    font-size: 22px;
    font-weight: bold;
}

.cp_pointCost,
.cp_multi {
    margin: 5px;
    padding: 5px 10px;
    background: #DC1F2C;
    border-radius: 0 18px 18px 0;
    text-align: center;
    font-family: "rob-medium", sans-serif;
    font-size: 17px;
    color: white;
    text-transform: uppercase;
}

.vertical .cp_pointCost,
.vertical .cp_multi {
    border-radius: 5px;
}

.cp_coupon_title {
    padding: 4px;
    font-size: 28px;
    font-weight: bold;
}

.cp_coupon_nontitle {
    flex: 1 1 auto;
    display: flex;
    justify-content: space-around;
    min-height: 0;
}

.cp_leftCoupon {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.cp_tiny {
    display: inline-block;
    font-size: 13px;
    margin-bottom: 4px;
    margin-right: 4px;
}

.cp_magnifying {
    width: 30px;
    height: 30px;
}

.cp_coupon_main_text {
    flex-shrink: 1;
    width: 100%;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: 6px;
    text-align: left;
}

.cp_coupon_brand {
    flex: 1 0 auto;
    width: 100%;
    font-size: 24px;
    font-weight: bold;
}

.cp_coupon_longdesc {
    position: relative;
    flex: 0 1 auto;
    font-size: 13px;
    max-width: 150px;
    color: #555555;
    overflow: hidden;
}

.cp_couponFade {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 50px;
    background: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,1));
}

.cp_coupon_exp {
    margin: 4px 0;
    font-size: 12px;
    font-weight: bold;
}

#cp_bottomControlBar {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

#cp_quality {
    background: linear-gradient(#FFFFFF, #CCCCCC);
    padding: 12px;
    font-size: 16px;
    font-weight: bold;
}

#cp_faq {
    font-size: 16px;
}

.cp_helpLink {
    font-size: 18px;
}

.cp_mainHeader {
    display: inline-block;
    font-size: 20px;
    font-weight: bold;
    margin-top: 20px;
}

.cp_questionHeader {
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    margin: 6px 0 4px;
}

#cp_modalOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0,0,0);
    background: rgba(0, 0, 0, 0.5);
    z-index: 10;
}

#cp_modalOverlayInner {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 100%;
    z-index: 25;
}

#cp_modalCoupon {
    display: flex;
    flex-direction: column;
    width: 600px;
    max-height: 80%;
    overflow: auto;
    background: white;
    padding: 8px;
}

#cp_modalX {
    align-self: flex-end;
    width: 20px;
    height: 20px;
}

#cp_disclaimerHeader {
    display: inline-block;
    margin-top: 12px;
    font-weight: bold;
}

#cp_upcHeader {
    display: inline-block;
    margin-top: 12px;
    font-weight: bold;
}

/*-- coupon display --*/
#cp_display #cp_bottomControlBar {
    justify-content: flex-end;
}

/*-- curated coupons --*/
.noCuratedCoupons {
    background: #EFEFEF;
    padding: 8px 8px 0 8px;
}

.noCuratedCouponsInner {
    text-align: center;
    background: white;
    padding: 12px;
    font-size: 20px;
}

.noCuratedCoupons a {
    font-size: inherit;
}

.featuredCoupons {
    background: #ed3300;
    padding: 8px 8px 0 8px;
}

.featuredCouponsInner {
    text-align: center;
    padding: 12px;
    font-size: 2.4em;
    color: black;
    font-weight: bold;
}

.cp_login_coupon_outer {
    cursor: pointer;
    background: white;
    height: 100%;
    padding: 8px;
}

/*-- Custom Layout (Curated+) --*/
#LayoutCustomBody {
    height: 100%;
    margin: 0;
    padding: 0;
}

#LayoutCustomContainer {
    min-height: 100vh;
    background: radial-gradient( #EADAB9, #CAB99D );
}

#LayoutCustomHeader {
    position: relative;
}

.LayoutCustomLogo {
    height: 120px;
}

.LayoutCustomLogoArea {
    position: relative;
    z-index: 2;
}

#LayoutCustomFooterArea {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
}

#LayoutCustomFooterBannerArea {
    flex: 1 1 0px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

#LayoutCustomFooterSideArea {
    width: 390px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.LayoutCustomMoreSavings {
    border: 7px solid white;
    background-color: #0c4d0a;
    background-image: url('../moneyicon.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom right;
    padding: 8px;
    color: white;
    font-weight: bold;
    font-size: 30px;
}

.MoreSavingSide {
    margin: 0 0 16px 24px;
    height: 230px;
    width: 360px;
}

.MoreSavingBanner {
    margin-right: 10px;
    margin-left: 10px;
    height: 180px;
    width: 100%;
}

.BottomRightDecor {
    height: 300px;
    width: auto;
}

.LayoutCustomBannerLinkArea {
    width: 100%;
}

.LayoutCustomClientBanner {
    width: 100%;
    margin-bottom: 20px;
}

.flexSpacer {
    flex: 1 1 0px;
}

/* ROBOTO FONTS */
@font-face {
	font-family: "rob-black";
	src: url("../CouponFonts/Roboto-Black.ttf") format("opentype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "rob-meditalic";
	src: url("../CouponFonts/Roboto-MediumItalic.ttf") format("opentype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "rob-regular";
	src: url("../CouponFonts/Roboto-Regular.ttf") format("opentype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "rob-italic";
	src: url("../CouponFonts/Roboto-Italic.ttf") format("opentype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "rob-bolditalic";
	src: url("../CouponFonts/Roboto-BoldItalic.ttf") format("opentype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "rob-bold";
	src: url("../CouponFonts/Roboto-Bold.ttf") format("opentype");
	font-weight: normal;
	font-style: normal;
}
/* ROBOTO FONTS */

/* new coupon layout */

.cp_coupon_outer {
    padding: 5px;
}

.cp_coupon_outer.horizontal {
    width: 463px;
}

.cp_coupon_outer.vertical {
    width: 230px;
}

.cp_header {
    position: absolute;
    top: 0px;
    left: 0px;
}

.cp_coupon {
    position: relative;
    width: 100%;
    padding: 5px 10px;
    border: 1px solid black;
    border-radius: 6px;
    background: white;
}

.vertical .cp_coupon {
    padding: 85.5px 10px 10px;
}

.vertical .cp_header {
    width: 100%;
}

.vertical .has-point-cost,
.vertical .has-multi {
    padding-top: 120px;
}

.cp_coupon .coupon-section-left {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cp_coupon .coupon-section-right {
    width: 40%;
    display: block;
}

.cp_coupon p {
    margin: 0px;
}

.cp_coupon .coupon-description {
    width: 100%;
    text-align: center;
}

.cp_coupon .coupon-offer {
    color: #DC1F2C;
    font-family: "rob-black", sans-serif;
    font-weight: 900;
    font-size: 28.5px;
    letter-spacing: -2px;
    line-height: 110%;
}

.cp_coupon .coupon-offer sup {
    top: -0.5em;
    font-size: 23.75px;
}

.cp_coupon .coupon-brand {
    color: black;
    font-family: "rob-medium", sans-serif;
    font-weight: 700;
    font-size: 19px;
    letter-spacing: 0px;
}

.cp_coupon .coupon-offer-second {
    color: black;
    font-family: "rob-meditalic", sans-serif;
    font-style: italic;
    font-size: 17px;
    letter-spacing: 0px;
    cursor: pointer;
}

.has-point-cost.has-multi .coupon-offer {
    margin-top: 20px;
}

.has-point-cost .coupon-offer,
.has-multi .coupon-offer {
    visibility: hidden;
    height: 51.45px;
}

.vertical .has-point-cost .coupon-offer,
.vertical .has-multi .coupon-offer {
    display: none;
}

.has-point-cost .coupon-offer-second,
.has-multi .coupon-offer-second {
    color: #DC1F2C;
    font-weight: bold;
}

.cp_coupon .coupon-offer-second:hover {
    text-decoration: underline;
}

.cp_coupon .coupon-details {
    color: black;
    font-family: "rob-italic", sans-serif;
    font-weight: 400;
    font-size: 16.625px;
    letter-spacing: 0px;
}

.cp_coupon .coupon-expiration {
    color: black;
    font-family: "rob-bold", sans-serif;
    font-size: 15.04px;
    font-style: italic;
    letter-spacing: 0px;
    line-height: 100%;
}

.cp_coupon .text-overflow {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.coupon-offer,
.coupon-brand,
.coupon-offer-second,
.coupon-details,
.coupon-expiration {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.coupon-container.details .coupon-offer,
.coupon-container.details .coupon-brand,
.coupon-container.details .coupon-offer-second,
.coupon-container.details .coupon-details,
.coupon-container.details .coupon-expiration {
    text-overflow: unset;
    white-space: unset;
    overflow: unset;
}

.coupon-container.details .coupon-offer-second {
    cursor: unset;
}

.coupon-container.details .coupon-offer-second:hover {
    text-decoration: unset;
}

.coupon-container.details .horizontal,
.coupon-container.details .vertical {
    width: 100% !important;
}

.cp_coupon .image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 135px;
}

.cp_coupon .image-container img {
    max-width: 100%;
    max-height: 100%;
}

.cp_coupon .coupon-clip {
    padding: 0 12px;
    border-radius: 10px;
    font-size: 14px;
    background: #0597F2;
    text-transform: uppercase;
    font-style: italic;
    color: white;
}

.cp_coupon .coupon-clip:hover {
    background: #509fd1;
}

.cp_coupon .coupon-action {
    margin-top: 10px;
    text-align: center;
}

.coupon-body-horizontal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 175px;
}

.coupon-body-vertical {
    padding-top: 10px;
    display: block;
    width: 100%;
    height: 100%;
}

.vertical .image-container {
    margin-bottom: 20px;
    text-align: center;
}

.vertical .coupon-action {
    text-align: center;
}

.vertical .coupon-offer {
    font-size: 28.5px;
    line-height: unset;
}

.vertical .coupon-offer sup {
    font-size: 18.2px;
}

.vertical .coupon-brand {
    font-size: 17.416px;
    font-weight: bold;
}

.vertical .coupon-offer-second {
    font-size: 12px;
}

.vertical .coupon-details {
    font-size: 12px;
    letter-spacing: -1px;
    line-height: 110%;
}

.vertical .coupon-expiration {
    font-size: 12px;
    letter-spacing: -1px;
    line-height: 110%;
}

.cp_toLogin,
.cp_clip_button,
.cp_clipped_indicator,
.cp_noclip_indicator,
.cp_curated_clip_button {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 14.5px;
    font-size: 15.8px !important;
    background: #0597F2;
    text-transform: uppercase;
    font-family: "rob-meditalic", sans-serif;
    font-style: italic;
    min-width: 120px;
    line-height: 100% !important;
    color: white !important;
}

.cp_clipped_indicator {
    background: #33cc33;
}

.cp_noclip_indicator {
    background: #aaaaaa;
}

@media (max-width: 520px) {
    .cp_coupon_outer.horizontal {
        width: calc(100vw - 20px);
    }
}

.coupon-setting-options {
    display: flex;
    flex-wrap: wrap;
    padding-top: 1rem;
}

.coupon-brand-filter {
    display: flex;
}

.coupon-setting-options textarea {
    min-height: unset !important;
}

.coupon-setting-options .form-group {
    margin-left: 1rem;
    margin-right: 1rem;
}

.form-group {
    display: block;
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
}

.form-group select {
    display: block;
    min-width: 250px;
    min-height: 32px;
}

.multi-select {
    position: relative;
}

.reset-multiselect {
    position: absolute;
    top: calc(50%);
    right: 10px;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    width: 10px;
    height: 10px;
    background: url("./images/chosen-sprite.png") -42px 1px no-repeat;
}

.cp_filterSection {
    display: none;
}

.cp-scrollable {
    max-height: 500px;
    overflow-y: auto;
}

.cp-coupons-area {
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
}

.coupon-section-area {
    padding: 1rem 2rem;
    display: block;
    background: #EFEFEF;
}

.upcs-text {
    word-break: break-all;
    white-space: normal;
}

@media only screen and (max-width: 1490px) {
    .cp-coupons-area {
        justify-content: center;
    }
}

.edit-actions {
    margin-top: 2rem;
    display: flex;
    justify-content: space-between;
}

.confirm-actions {
    display: flex;
    justify-content: space-around;
}

.modal-delete form {
    padding: 0 1rem 1rem 1rem;
}

.text-error {
    font-size: 1.1em;
    background-color: red;
    color: white;
    font-weight:bold;
    margin: 8px;
    padding: 8px;
}

.redeem-coupons-header {
    display: flex;
    justify-content: space-between;
}

.nav-header {
    margin-bottom: 1rem;
}

.coupons-iframe {
    margin: 1rem 0;
    width: 100%;
    border: none;
    min-height: 800px;
}

/* Select Store */
.SSInputArea {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.SSRadio {
    width: 30px;
    height: 30px;
}
.StoreSelectAddress {
    border-radius: 15px;
    border: 1px solid #555;
    padding: 10px;
    margin-left: 15px;
    display: flex;
    flex-direction: column;
    height: 120px;
    justify-content: center;
    width: 400px;
    background: #ffd7a8;
}
.StoreSelectAddressLine {
    font-size: 1.3em;
    color: #555;
}
.firstss {
    color: black;
    font-weight: bold;
}
#selectStoreRadioArea {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.SSSubmit {
    font-size: 1.3em;
    padding: 15px;
    width: 400px;
    margin-left: 50px;
}

/* MyAccount layout */
#myaccount_2col_layout {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
#myaccount_leftcol {
    flex: 4  1 600px;
}
#myaccount_rightcol {
    flex: 1 0 470px; 
    min-width: 470px;
}

/* MyAccount Interests Section */
#interest_area {
    margin: 24px auto 12px;
    border: 1px solid black;
    max-width: 800px;
    padding: 0 20px 20px 20px;
}
#interest_options_area {
    display: flex;
    flex-wrap: wrap;
}
.interest_option {
    width: 330px;
    padding-right: 70px;
    display: flex;
    align-items: center;
}
.interest_name {
    display: inline-block;
    margin: 6px 0;
    font-size: 1.2em;
    width: 225px;
    text-align: right;
}
.interest_checkbox {
    width: 18px;
    height: 18px;
}

/* Tier Display */
.tier_amounts_area {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1.2em;   
}
.tier_next_amt {
    display: inline-block;
    margin: 9px 0 6px 0;
    font-weight: bold;  
}
table.tier_chart {  
    border: 1px solid #555555;
    border-collapse: collapse;
}
    table.tier_chart th {
        border: 1px solid #555555;
        border-collapse: collapse;
    }
    table.tier_chart td {
        border: 1px solid #555555;
        border-collapse: collapse;
        padding: 4px 12px;
    }