/*** variables */
:root {

    /* Main Background */ --primary-color-background: #fff;
    /* Footer Background */ --secondary-color-background:#63bad5;
    /* Cards Background */ --alternative-color-background: #fff;
    
    /* Button Background */ --primary-color-button: #63bad5;  
    /* Button Border */ --secondary-color-button: #63bad5; 
    /* Button Text */ --primary-text-color-button: #fff; 
    /* Button Background - Hover */ --primary-color-button_hover:#af2d2c; 
    /* Button Border - Hover */ --secondary-color-button_hover:#af2d2c;  
    /* Button Text - Hover */ --primary-text-color-button_hover: #fff; 
    
    /* Cards Button */ --alternative-color-button: #af2d2c;
    /* Cards Button Text */ --alternative-text-color-button: #fff ;
    
    /* Sign-in Page Text and Terms & Conditons */ --body-color-text: #3a3a3a;
    /* Terms & Conditions Link */ --body-color-link: #3a3a3a;
    /* Terms & Conditions Link - Hover */ --body-color-link_hover:#63bad5;
    
    /* Cards Background */ --card-color-background: #fff;
    /* Cards Headline */ --card-color-headline: #3a3a3a;
    /* Cards Text*/ --card-color-text: #3a3a3a;
    
    /* Text Placeholder*/ --placeholder-color: # #909090;
    /* Page Header*/ --main-text-color: #3a3a3a;
    /* On and Off Switch */ --main-color-highlight: #af2d2c;
    /* On and Off */ --main-color-light: #fff;  } 
    
    /*** full bg layout styles */
    .background-image {
    display: none !important; }
    
    
    .container-fluid.spot .top-branding .brand .branding {
        padding-top: 50px !important; }
    
    /*** custom backgrounds*/
    body {
        background: url("/media/prod/assets/9f0f29fe-8d72-11eb-87d3-126d8eedec25.jpg") no-repeat 75% bottom;
        background-size: cover; }
    
    .container-fluid.spot .fade-out-graphic {
        background: transparent; }
    
    .container-fluid.spot .signin {
        background: transparent !important; }
    
    .container-fluid.spot-email {
        background: url("") no-repeat center top;
        background-size: cover; }
    
    .multiple-card-layout {
        background: url("/media/prod/assets/9f0f29fe-8d72-11eb-87d3-126d8eedec25.jpg") no-repeat 70% bottom;
        background-size: cover; }
    
    
    /*** body: top level container*/
    body {
        background-color: var(--primary-color-background) !important; }
    
    /*** global text style
    * will effect all text
    * in this location */
    h1, h2, h3, h4, p, button, a {
        color: var(--main-text-color);
        font: 100% "Open Sans", "Lucida Grande", Helvetica, Arial, sans-serif; }
    
    #email_suggestion {
        color: var(--main-text-color);
        padding-bottom: 0px !important; }
    
    a.suggestion{
        color: var(--body-color-link); }
    
    /*** global link hover style */
    a:hover {
        color: var(--body-color-link_hover); }
    
    /*** headline text
    * (Connect with SocialSign.in) */
    h3 {
        font-size: 18px !important;
        font-weight: 600; }
    
    h4 {
        font-size: 12px !important;
        font-weight: 500 !important; }
    
    /*** button styles */
    /*** cta green button*/
    button.btn.btn-green, a.btn.btn-green {
        border: 2px solid var(--secondary-color-button);
        color: var(--primary-text-color-button);
        background: var(--primary-color-button); }
    
    button.btn-green:hover, a.btn-green:hover {
        border-color: var(--secondary-color-button_hover) !important;
        color: var(--primary-text-color-button_hover) !important;
        background: var(--primary-color-button_hover) !important;
        box-shadow: none; }
    
    button.btn-green:active, a.btn-green:active,
    button.btn-green:focus, a.btn-green:focus {
        border-color: var(--secondary-color-button) !important;
        color: var(--primary-text-color-button) !important;
        background: var(--secondary-color-button) !important;
        box-shadow: none;
        text-decoration: none; }
    
    /*** btn-acid ***/
    button.btn-acid, a.btn-acid {
        font: 100% "Open Sans", "Lucida Grande", Helvetica, Arial, sans-serif;
        padding: 12px !important;
        font-size: 16px !important;
        height: 50px !important;
        font-weight: 600 !important; }  
    
    button.btn-fb, a.btn-fb  {
        font: 100% "Open Sans", "Lucida Grande", Helvetica, Arial, sans-serif;
        padding: 10px !important;
        font-size: 16px !important;
        height: 50px !important;
        line-height: 30px !important;
        font-weight: 600 !important;
        margin-top: 10px !important; }   
    
    .button.btn-fb img, a.btn-fb img {
        width: 30px !important;
        height: 30px !important;
        margin: 0px -30px 0px 0px !important; }
    
    /*** (email connect button) ***/
    button.btn-acid, a.btn-acid {
        border: 2px solid var(--secondary-color-button) !important;
        color: var(--primary-text-color-button) !important;
        background: var(--primary-color-button) !important;
        box-shadow: none !important; }
    
    button.btn-acid:hover, a.btn-acid:hover, 
    button.btn-acid:active, a.btn-acid:active,
    button.btn-acid:focus, a.btn-acid:focus {
        border-color: var(--secondary-color-button_hover) !important;
        color: var(--primary-text-color-button_hover) !important;
        background: var(--primary-color-button_hover) !important;
        box-shadow: none;
        text-decoration: none; }
    
    /*** fb buttons*/
    .container-fluid.spot-email .btn-fb:active,
    .container-fluid.spot .signin .signinbody .btn.fb:active,
    .container-fluid.spot-email .btn-fb:focus,
    .container-fluid.spot .signin .signinbody .btn.fb:focus {
        box-shadow: inset 0px 0px 0px 2px #5887d3; }
    
    /*** skip and access the web link*/
    button.access-the-web, a.access-the-web {
        color: #fff; }
    
    /*** wave gradient background
    * small layout only */
    .container-fluid.spot .fade-out-graphic {
        background: transparent; }
    
    /*** wave gradient background
    * large layout only */
    .container-fluid.spot .signin {
        background: transparent; }
    
    /*** sign in body text*/
    .container-fluid.spot .signin {
        background: transparent; }
        
    .signinbody h3, .signinbody h4 {
        color: var(--main-text-color) !important;
         margin-bottom: 2px !important; }
    
    .signinbody h4 {
        color: var(--main-text-color) !important;
         margin-bottom: 15px !important; }
    
    .emailsignup h3, .emailsignup p {
        color: var(--main-text-color); }
    
    /*** Or Divider ***/
    .container-fluid.spot .or p {
        color: var(--main-text-color);
        text-transform: uppercase;
        font-weight: 600;  }
    .container-fluid.spot .or .col-xs-5 {
        border-bottom: 1px solid var(--main-text-color);
        opacity: 1;
        min-height: 10px; }
    
    /*** terms style*/
    .container-fluid.spot .signin .signinbody .terms {
        color: #000000;
        opacity: 1 !important;
        font-size: 13px !important;  }
    
    .container-fluid.spot-email p {
        color: var(--body-color-text) !important;
        opacity: 1 !important;
        font-size: 13px !important; }
    
    /*** terms link style */
    .container-fluid.spot .signin .signinbody .terms a, .container-fluid.spot-email .footerp a {
        color: var(--body-color-link) !important;
        font-size: 12px !important;
        font-weight: 600; }
    .container-fluid.spot .signin .signinbody .terms a:hover, .container-fluid.spot-email .footerp a:hover {
        color: var(--body-color-link_hover) !important; }
    
        /*** help and business link styles */
        .container-fluid.spot .signin .footer .footerp a {
        color: var(--body-color-link); }
    
        .container-fluid.spot .signin .footer .footerp a:hover {
        color: var(--body-color-link_hover); }
    
    /*** help and business container styles */
    .container-fluid.spot .signin .footer .footerp {
        opacity: 1; }
    
    /*** Sign up and sign in page */
    /*** background */
    .container-fluid.spot-email {
        background-color: var(--primary-color-background); }
    
    .container-fluid.spot-email a.back-button {
        color: var(--body-color-text) !important; }  
    
    .container-fluid.spot .signin .signinbody #email_signup input::placeholder {
        border-color: var(--placeholder-color);
        color: var(--placeholder-color) !important; }
    
    .container-fluid.spot .signin .signinbody #email_signup input {
        color: var(--body-color-text); }  
    
    .container-fluid.spot .signin .signinbody #email_signup input:focus {
        border-color: var(--primary-color-button);
        color: var(--body-color-text); }
    
    input, textarea {
        border: 1px solid var(--body-color-text) !important;
        color: var(--body-color-text) !important;
        font-weight: 700 !important;  }
    
    input:hover, textarea:hover, 
    input:active, textarea:active, 
    input:focus, textarea:focus {
        border: 1px solid var(--body-color-link) !important; }
    
    .container-fluid.spot-email .darkbg {
        background: none; }
    
    .container-fluid.spot-email form button.btn-dark {
        border: 2px solid var(--secondary-color-button);
        color: var(--primary-text-color-button) !important;
        background: var(--primary-color-button); }
    
    .container-fluid.spot-email form button.btn-dark:hover, 
    .container-fluid.spot-email form button.btn-dark:active, 
    .container-fluid.spot-email form button.btn-dark:focus {
        border-color: var(--secondary-color-button_hover) !important;
        color: var(--primary-text-color-button_hover) !important;
        background: var(--primary-color-button_hover) !important;
        box-shadow: none;
        text-decoration: none; }
    
    .container-fluid.spot-email .or p {
        color: var(--main-text-color); }
    
    .container-fluid.spot-email .signin .signinbody .or .col-xs-5 {
        border-bottom: 1px solid var(--main-text-color);
        opacity: 1; }
    
    .need-help a {
        color: var(--body-color-link); }
    
        /*** mobile tabs */
    .container-fluid.spot-email-header a#email-sign-up-button.active {
        color: #fff;
        background: #222222;
        box-shadow: none; }
    
    .container-fluid.spot-email-header {
        background: #000; }
    
    .container-fluid.spot-email-header a {
        color: #FFF;
        background: #4d4d4d; }
    
    .container-fluid.spot-email-header a.active {
        background: #fff;
        color: #c00030;
        box-shadow: none; }
    
    .container-fluid.spot-email-header .col-xs-2 {
        background: #000; }
    
    .parsley-error-list li {
        text-align: left;
        color: #c00030; }  
    
    /*** terms text */
    .container-fluid.spot-email .footerp {
        opacity: 1; }
    
    .container-fluid.spot-email .footer .footerp .terms {
        opacity: 1; }
    
    .container-fluid.spot-email .footerp a {
        color: #fff; }
    
    .container-fluid.spot-email .footerp a:hover {
        color: #fff; }
    
    .container-fluid.spot-email .footerp a:active,
    .container-fluid.spot-email .footerp a:focus {
        color: #fff;
        text-decoration: none; }
    
    /*** Cards */
    /*** main container
    * includes the wave background */
    .multiple-card-layout {
        background-color: var(--alternative-color-background) !important;}
    
    /*** for sponsor image on cards page
    .multiple-card-layout {
    background: url("/media/prod/assets/f5b45436-6a3c-11eb-87d3-126d8eedec25.png"), url("/media/prod/assets/0268fbc6-67ce-11eb-87d3-126d8eedec25.jpg");
    background-repeat: no-repeat, no-repeat;
    background-position: center bottom, center;
    background-size: contain, cover;    } 
    
    /*** END -- for sponsor image on cards page */
    
    
    /*** green card button
    * NOTE: !importants are added because if an stylesheet placement
    *       they should not be normally used and will not be required
    *       after the next push (05/21/15) */
    
    .multiple-card-layout h4.message {
        color: var(--main-text-color) !important; 
        font-size: 16px !important;
        font-weight: 600 !important; }
    
    .ssi-card {
        /*border: 1px solid var(--card-color-background);*/
        -webkit-box-shadow: 0px 1px 8px 0px rgba(0,0,0,0.2);
        -moz-box-shadow: 0px 1px 8px 0px rgba(0,0,0,0.2);
        box-shadow: 0px 1px 8px 0px rgba(0,0,0,0.2);
        background: var(--card-color-background) !important; }
    
    .ssi-card .ssi-card-content-container a {
        background: var(--alternative-color-button) !important;
        border: 1px solid var(--alternative-text-color-button) !important;
        color: var(--alternative-text-color-button) !important; }
    
    .ssi-card .ssi-card-content-container a:hover, 
    .ssi-card .ssi-card-content-container a:active, 
    .ssi-card .ssi-card-content-container a:focus {
        background: var(--alternative-color-button) !important;
        border: 1px solid var(--alternative-text-color-button) !important;
        color: var(--alternative-text-color-button) !important;
        text-decoration: none; }
    
    .ssi-card .ssi-card-content-container h2 {
        color: var(--card-color-headline) !important;
        font-weight:700; }
    
    .ssi-card .ssi-card-content-container p {
        color: var(--card-color-text) !important; }
    
    /*** survey */
    .ssi-card.survey .ssi-card-content-container {
        background-color: var(--card-color-background) !important; }
    
    .ssi-card .ssi-card-content-container .card-form {
        text-align: center; }
    
    .ssi-card.survey h2 {
        font-size: 26px !important;
        line-height: 28px;
        font-weight: normal;
        flex-grow: 1;
        height: auto;
        text-align: center;
        padding: 0px 20px 0px 20px; }
    
    .ssi-card.survey p {
        font-size: 14px !important;
        line-height: 16px;
        padding: 0px 10px 0px 10px;
        margin-top: 10px;
        height: auto; }
    
    .ssi-card.survey.without-image {
        height: 270px; }
    
    .ssi-card.survey.without-image .ssi-card-content-container {
        justify-content: space-between;
        display: flex;
        flex-direction: column;
        height: 100%; }
    
    .ssi-card.survey.without-image h2 {
        font-size: 22px !important;
        line-height: 26px;
        font-weight: 600;
        flex-grow: 1;
        height: auto;
        text-align: center;
        margin: 0px !important;
        padding: 0px 20px 0px 20px;  }
    
    .ssi-card.survey.without-image p {
        font-size: 14px !important;
        line-height: 16px;
        padding: 0px 20px 0px 20px;
        margin-top: 0px;
        height: 100px !important; }
    
    .survey-button {
        background: var(--alternative-color-button) !important;
        border: 1px solid var(--alternative-color-button) !important;
        color: var(--alternative-text-color-button) !important;
        border-radius: 2px !important;
        font-size: 12px !important;
        transition: all 0.4s; }
    
    /*** survey - buttons */
    .survey-button {
        display: inline-block !important;
        height: 30px !important;
        letter-spacing: 0px !important; }  
    
    .ssi-card.option_count_2 button.survey-button {
        width: calc(50% - 5px) !important; }    
    
    .ssi-card.option_count_4 button.survey-button {
        width: calc(100% - 5px) !important; } 
    
    .survey-button:hover, 
    .survey-button:active, 
    .survey-button:focus  {
        background: var(--secondary-color-button) !important;
        border: 1px solid var(--secondary-color-button) !important;
        color: var( --primary-text-color-button_hover) !important;
        text-decoration: none !important; }
    
    .ssi-card .ssi-card-content-container a, 
    .ssi-card .ssi-card-content-container button {
        border-radius: 0px !important;
        line-height: 15px !important; }
    
    /*** checkbox */
    #custom_checkbox_container label {
        color: #000; }
    
    /*** loading screen */
    .loading-screen {
        background: #FFF; }
    
    .loading-screen .loading-icon {
        filter: invert(100%);
        -webkit-filter: invert(100%); }
    
    /*** skip and access the web button */
    button.access-the-web, a.access-the-web {
        background: rgba(0, 0, 0, 0.6);
        border: 1px solid #000;
        color: #fff; }
    
    button.access-the-web:hover, 
    a.access-the-web:hover, 
    button.access-the-web:active, 
    button.access-the-web:focus, 
    a.access-the-web:active, 
    a.access-the-web:focus {
        border-color: rgba(255, 255, 255, 0.5);
        color: #fff;
        background: rgba(0, 0, 0, 0.6); }
    
    /*** footer bar */
    .footer {
        background: var(--secondary-color-background) !important; }
    .footer p {
        color: var(--main-color-light); }
    .footer .footerp a {
        color: var(--main-color-light); }
    .footer .footerp a:hover {
        color: #000000; }
    .footer .footerp a:active, .footer .footerp a:focus {
        color: #000000; }
    .footer .footerp {
        opacity: 1;}
    
    /*** on off switch */
    .onoffswitch-label p {
        line-height: 19px;
        padding-left: 68px; }
    .onoffswitch-switch-on {
        border: 2px solid rgba(51, 51, 51, 0);
        color: var(--main-color-light) ; }
    .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch-on {
        border-color: var(--main-color-highlight);
        color: var(--main-color-light);  }
    .onoffswitch-switch-off {
        border-color: var(--main-color-highlight);
        color: var(--main-color-light) ; }
    .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch-off {
        border: 2px solid rgba(51, 51, 51, 0);
        color: var(--main-color-light)  ; }
    
    
    /*** desktop / tablet layout only */
    @media (min-width: 769px){
    .background-image {
        display: block; }
    
    .container-fluid.spot .background-image {
        width: 100%;
        background-size: cover; }
    
    .container-fluid.spot .signin {
        height: 50%; }
    
    img.custom-branding {
        zoom: 1.5;
        position: relative;
        top: -20px !important; }
    
    .container-fluid.spot .top-branding .brand .branding {
        margin-left: 0px;
        margin-top: 0px;
        bottom: 0%;
        top: 20px !important; }
    
    .container-fluid.spot .top-branding {
        height: 50%;
        position: relative;
        width: 100%;
        float: none; }
    
    .col-sm-6 {
        width: 100%; }
    
    .container-fluid.spot .signin .signinbody,
    .container-fluid.spot-email .emailsignup {
        margin-top: -70px;
        top: 0%;  }}
    
    /*** QUICK LOGIN ***/
    
    :root {
    --shapes-color: #fff;
    --header-text-color: #fff;
    --paragraph-text-color: #fff;
    --button-color: #fff;
    --button-text-color: #000;
    --button-color-hover: #FFC20E;
    --button-text-hover: #ffffff;
    --link-text-color: #FFC20E;
    --skip-text-color: #fff; }
    
    .container-fluid.spot .signin .signinbody #email_signup
    .private_address_flow_container input {
        border: 1px solid var(--shapes-color) !important; }
    
    .container-fluid.spot .signin .signinbody #email_signup
    .private_address_flow_container input::placeholder {
        color: var( --paragraph-text-color); }
    
    .container-fluid.spot .signin .signinbody #email_signup
    .private_address_flow_container label {
        color: var(--header-text-color);
        font-size: 17px;
        font-weight: 500; }      
    
    .container-fluid.spot .signin .signinbody #email_signup
    .private_address_flow_container label span {
        border: 2px solid var(--shapes-color); }
    
    .container-fluid.spot .signin .signinbody #email_signup
    .private_address_flow_container p small {
        color: var(--paragraph-text-color); }
    
    .container-fluid.spot .signin .signinbody #email_signup
    .private_address_flow_container p small a {
        color: var( --link-text-color); 
        text-decoration: underline; }
    
    .container-fluid.spot .signin .signinbody #email_signup
    .private_address_flow_container button.btn.btn-primary {
        color: var(--button-text-color);
        background: var(--button-color);
        font: 100% "Open Sans", "Lucida Grande", Helvetica, Arial, sans-serif;
        font-weight: 600; }
    
    .container-fluid.spot .signin .signinbody #email_signup
    .private_address_flow_container button.btn.btn-primary:hover {
        color: var(--button-text-hover) !important;
        background: var(--button-color-hover) !important; }
    
    .container-fluid.spot .signin .signinbody #email_signup
    .private_address_flow_container .private_address_quick_step #skip_quick_login_button {
        color: var(--skip-text-color);
        font-weight: normal;
        opacity: .8;
        font-size: 12px; }
    
    .container-fluid.spot .signin .signinbody #email_signup
    .private_address_flow_container .private_address_quick_step .steps_connecting_bar {
        background: var(--shapes-color); }
    
    /*.main-custom-container {
        overflow: scroll; } */
    
    /* Main Logo Size */
    
    .container-fluid.spot .top-branding .brand .branding img {
        zoom: 1.2; }
    
    @media (max-height: 480px) {
    .container-fluid.spot .top-branding .brand .branding img {
        zoom: 1; }}
    
    /*** Custom Policy */
    .policy_copy, .policy_copy a  {
        color: #000; }
    
    /*** Connect Button - Display on Static ***/
    button.access-the-web, a.access-the-web {
        display: inline-block !important;
        background-color: #63bad5;
        border: 1px solid #3a3a3a; }
    
    @media (min-height: 600px){
    .multiple-card-layout .cards-app-container:after {
        content: "";
        position: absolute;
        top: 310px;
        left: calc(50% - 150px);
        background: url("/media/prod/assets/a1cecba0-8ce0-11eb-87d3-126d8eedec25.png") no-repeat center;
        background-size: contain;
        width: 300px;
        height: 120px; }}
    
    /*** END ***/