/*** compiled css - make changes scss file and recompile for updates */
/*** full bg layout styles */
.background-image {
    display: none !important; }

img.custom-branding {
    position: relative;
    top: 0px; }

/*** custom backgrounds*/
body {
    background: url("/media/prod/assets/b40d2f94-8181-11e9-962b-22000b4c83e3.jpg") no-repeat center 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;
background-size: cover; }

.multiple-card-layout {
    background: url("/media/prod/assets/20778ba8-ece0-11ec-87d3-126d8eedec25.jpg") no-repeat center;
    background-color: #fff;
    background-size: cover; } 

/*** body: top level container */
body {
    background-color: #f1f1f1 !important; }

/*** global text style 
* will effect all text
* in this location  */

p, h1, h2, h3, h4, button, a {
    color: #333333;
    font: 100% "Open Sans", "Lucida Grande", Helvetica, Arial, sans-serif;  }

#email_suggestion {
    color: #333333; }

a.suggestion {
    color: #808197; }

/*** global link hover style */
a:hover {
    color: #333333; }

/*** headline text
* (Connect with SocialSign.in  */
h3 {
    font-size: 24px !important;
    font-weight: 600; }

h4 { 
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 0px 10px 0px 10px; }

/*** button styles */
/*** cta green button */
button.btn.btn-green, a.btn.btn-green {
    border: 2px solid #808197;
    color: #fff;
    background: #808197; }

button.btn-green:hover, a.btn-green:hover,
button.btn-green:active, a.btn-green:active,
button.btn-green:focus, a.btn-green:focus {
    border-color: #9797af !important;
    color: #fff !important;
    background: #9797af !important;
    box-shadow: 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,
button.btn-google, a.btn-google  {
    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,
.button.btn-google img, a.btn-google 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 #9797af !important;
    color: #fff !important;
    background: #9797af !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: #808197 !important;
    color: #fff !important;
    background: #808197 !important;
    box-shadow: none !important; }

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

/*** sign in body text */
.container-fluid.spot .signin {
    background: transparent !important; }

.container-fluid.spot .signin .signinbody h3 {
    color: #fff;
    font-weight: 600;
    font-size: 20px !important;
    margin-bottom: 4px !important;  }

.container-fluid.spot .signin .signinbody h4 {
    color: #fff;
    font-weight: 400;
    font-size: 13px !important;
    margin-bottom: 20px !important; }

.emailsignup h3, .emailsignup p {
    color: #333; }

/*** terms style */
.container-fluid.spot .signin .signinbody .terms {
    color: #ffffff;
    opacity: 1 !important;  }

.container-fluid.spot-email p {
    color: #333333;
    opacity: 1 !important; }

/*** terms link style */
.container-fluid.spot .signin .signinbody .terms a,
.container-fluid.spot-email .footerp a {
    color: #fff !important;
    font-weight: 600;  }

.container-fluid.spot .signin .signinbody .terms a:hover,
.container-fluid.spot-email .footerp a:hover {
    color: #9797af !important;  }

/*** branding image (profile image */
/*img.custom-branding {
display: none; }*/

/*** help and business link styles */
.container-fluid.spot .signin .footer .footerp a {
    color: #808197; }

.container-fluid.spot .signin .footer .footerp a:hover {
    color: #333333; }

/*** 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: #f1f1f1 !important; }

.container-fluid.spot-email a.back-button {
    color: #333 !important; }

.container-fluid.spot-email form input {
    color: #3333; }

.container-fluid.spot-email form input:focus {
    border-color: #777;
    color: #777; }

input, textarea {
    border: 1px solid #fff !important;
    color: #fff !important;
    font-weight: bold; }

input::placeholder, textarea::placeholder {
    color: #ffffff85 !important; }

input:hover, textarea:hover,
input:active, textarea:active,
input:focus, textarea:focus {
    border: 1px solid #808197 !important; }

.container-fluid.spot-email .darkbg {
    background: none; }

.container-fluid.spot-email form button.btn-dark {
    border: 2px solid #808197;
    color: #fff !important;
    background: #808197; }

.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: #9797af;
    color: #fff !important;
    background: #9797af;
    box-shadow: none; }

.container-fluid.spot-email .or p {
    color: #333333; }

.container-fluid.spot-email .or .col-xs-5 {
    border-bottom: 1px solid #333333;
    opacity: 1; }

.need-help a {
    color: #808197; }

/*** 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: #ff2344;
    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: #faff00; }

.container-fluid.spot-email .footerp a:active,
.container-fluid.spot-email .footerp a:focus {
    color: #faff00;
    text-decoration: none; }

/*** Cards */
/*** main container
* includes the wave background */
.multiple-card-layout {
    background-color: #f1f1f1 !important; }

/*** 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: #2c365a !important;
    }

.ssi-card {
 border: 1px solid #9b9bb7 !important;  
    -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: #fff !important; }

.ssi-card .ssi-card-content-container a {
    background: linear-gradient(135deg, rgba(151,151,175,1) 0%, rgba(128,129,151,1) 100%);
    border: 1px solid #9b9bb7 !important;
    color: #fff !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: #9797af !important;
    border: 1px solid #9797af !important;
    color: #fff !important;
    text-decoration: none; }

.ssi-card .ssi-card-content-container h2 {
    color: #2c365a !important; }

.ssi-card .ssi-card-content-container p {
    color: #808197 !important; }

/*** survey */
.ssi-card .ssi-card-content-container .card-form {
    text-align: center;
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    }

.ssi-card.survey.without-image {
    height: 270px; }

.ssi-card.survey.without-image .ssi-card-content-container {
    justify-content: flex-start;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #2C365A;
    padding-top: 20px;
    }

.ssi-card.survey.without-image h2 {
    font-size: 24px !important;
    line-height: 1.25em;
    font-weight: 600;
    /* flex-grow: 1; */
    height: auto !important;
    text-align: center;
    padding: 5px 15px;
    margin: 2px;
    color: #ffffff !important;
    text-transform: uppercase;
    }

.ssi-card.survey.without-image p {
    font-size: 18px !important;
    line-height: 24px;
    margin: 2px;
    color: #fff !important;
    height: auto !important;
    padding: 15px 10px;
    }

.survey-button {
    background: #fff !important;
    border: none !important;
    color: #808197 !important;
    border-radius: 2px !important;
    height: 44px !important;
    font-size: 12px !important;
    transition: all 0.4s;
    }

/*** survey - 4 buttons */

.survey-button {
    width: calc(48% - 6px) !important;
    display: inline-block !important;
    margin: 0 2px 06px !important; }

.ssi-card.option_count_2 button.survey-button {
  width: calc(90% - 5px) !important; }    
  
  .ssi-card.option_count_4 button.survey-button {
  width: calc(48% - 5px) !important; } 

.survey-button:hover,
.survey-button:active,
.survey-button:focus {
    background: #fff !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.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    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: #2c365a;
    }

.footer p, .footerp p {
    color: #ffffff; }

.footer .footerp a {
    color: #ffffff; }

.footer .footerp a:hover {
    color: #333333; }

.footer .footerp a:active, .footer .footerp a:focus {
    color: #333333; }

.footer .footerp a .icon-circle-question {
    color: #ffffff; }

.footer .footerp a .icon-circle-question:hover,
.footer .footerp a .icon-circle-question:active,
.footer .footerp a .icon-circle-question:focus {
    color: #ffffff; }

/*** on off switch */
.onoffswitch-label p {
    line-height: 19px; }

.onoffswitch-switch-on {
    border: 2px solid rgba(51, 51, 51, 0);
    color: #ffffff; }

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch-on {
    border-color: #ffffff;
    color: #ffffff; }

.onoffswitch-switch-off {
    border-color: #ffffff;
    color: #ffffff; }

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch-off {
    border: 2px solid rgba(51, 51, 51, 0);
    color: #ffffff; }

.ssi-card .card-overlay {
    background-color: #00385f; }

/*** desktop / tablet layout only */
@media (min-width: 769px) {
.background-image {
    display: none; }

.container-fluid.spot .background-image {
    width: 100%;
    background-size: cover; }

.container-fluid.spot .signin {
    height: 50%; }

img.custom-branding {
    top: 60px;
    zoom: .8;
    }

    .container-fluid.spot .top-branding .brand .branding {
    margin-left: 0px;
    margin-top: 0px;
    bottom: 0%;
    top: auto !important; }

.container-fluid.spot .top-branding {
    height: 50%;
    position: relative;
    width: 100%;
    float: none; }

.col-sm-6 {
    width: 100%; }

.container-fluid.spot .signin .signinbody {
    margin-top: -70px;
    top: 0%;
    } 

.container-fluid.spot-email .emailsignup {
    margin-top: -40px;
    top: 0%; }    }

/*** QUICK LOGIN ***/

:root {
  --shapes-color: #fff;
  --header-text-color: #fff;
  --paragraph-text-color: #fff;
  --button-color: #9797AF;
  --button-text-color: #ffffff;
  --link-text-color: #fff;
  --skip-text-color: #fff; }
    
.container-fluid.spot .signin .signinbody #email_signup
.private_address_flow_container input {
  border: 1px solid var(--shapes-color) !important;
  color: #fff !important;
  font-weight: bold; }
    
.container-fluid.spot .signin .signinbody #email_signup
.private_address_flow_container input::placeholder {
  color: #a9a9a9 !important; } 
    
.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 a.btn.btn-primary,    
.container-fluid.spot .signin .signinbody #email_signup
.private_address_flow_container button.btn.btn-primary {
  color: var(--button-text-color);
  background:  var(--button-color); }
     
.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); }

/*** Cards Page Logo ***/
@media (min-height: 600px){
.multiple-card-layout .cards-app-container:after {
    content: "";
    position: absolute;
    top: 310px;
    left: calc(50% - 100px);
    background: url("/media/prod/assets/e504642e-86bd-11e8-8f1b-22000b4c83e3.png") no-repeat center;
    background-size: contain;
    width: 200px;
    height: 120px; }}

/*** Connect Button - Display on Static ***/
button.access-the-web, a.access-the-web {
  display: inline-block !important;
  background-color: #2c365a;
  border: 1px solid #2c365a; }

/*** END ***/