/*** variables */
:root {

/* Main Background */ --primary-color-background: #002A5E;
/* Footer Background */ --secondary-color-background:#002A5E;
/* Cards Background */ --alternative-color-background: #002A5E;

/* Button Background */ --primary-color-button: #fff;  
/* Button Border */ --secondary-color-button: #fff; 
/* Button Text */ --primary-text-color-button: #000; 
/* Button Background - Hover */ --primary-color-button_hover:#FFC20E; 
/* Button Border - Hover */ --secondary-color-button_hover:#FFC20E; 
/* Button Text - Hover */ --primary-text-color-button_hover: #000; 
/* Cards Button */ --alternative-color-button: #002A5E;
/* Cards Button Text */ --alternative-text-color-button: #fff ;

/* Sign-in Page Text and Terms & Conditons */ --body-color-text: #fff;
/* Terms & Conditions Link */ --body-color-link: #FFC20E;
/* Terms & Conditions Link - Hover */ --body-color-link_hover: #fff;

/* Cards Background */ --card-color-background: #fff;
/* Cards Headline */ --card-color-headline: #002A5E;
/* Cards Text*/ --card-color-text: #002A5E;

/* Text Placeholder*/ --placeholder-color: # #A5ACAF;
/* Page Header*/ --main-text-color: #fff;
/* On and Off Switch */ --main-color-highlight: #FFC20E;
/* On and Off */ --main-color-light: #fff;  } 

/*** full bg layout styles */
.background-image {
display: none !important; }


/*** custom backgrounds*/
body {
background: url("https://cdn.socialsign.in/media/prod/assets/133221a2-6b30-11eb-87d3-126d8eedec25.jpg") no-repeat center;
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("https://cdn.socialsign.in/media/prod/assets/133221a2-6b30-11eb-87d3-126d8eedec25.jpg") no-repeat center top;
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); }

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: 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 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; }
.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: var(--body-color-text);
    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-email form input::placeholder {
    border-color: var(--placeholder-color);
    color: var(--placeholder-color) !important; }

.container-fluid.spot-email form input {
    color: var(--body-color-text); }  

.container-fluid.spot-email form 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; }
    
.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 {
    display: flex;
    height: 100%;
    justify-content: center;
    flex-direction: column;
    }
    
.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;
    }
    
.ssi-card.survey.without-image p {
    font-size: 13px !important;
    line-height: 16px;
    padding: 0px 20px 0px 20px;
    margin-top: 0px;
    height: 100px !important;
    top: 0 !important;
    }
    
.survey-button {
    background: var(--alternative-color-button) !important;
    border: 1px solid var(--secondary-color-button) !important;
    color: var(--alternative-text-color-button) !important;
    border-radius: 2px !important;
    font-size: 12px !important;
    transition: all 0.4s; }

.ssi-card .ssi-card-content-container .card-form input {
color: #333 !important; }
    
/*** 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(--primary-color-button_hover) !important;
    border: 1px solid var(--secondary-color-button_hover) !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: 30px; }
    
    .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,
    .container-fluid.spot-email .emailsignup {
    margin-top: -100px;
    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;
    top: 50px;
    }

@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: #ffb612;
    border: 1px solid #002a5e; }

@media (min-height: 600px){
.multiple-card-layout .cards-app-container:after {
    content: "";
    position: absolute;
    top: 310px;
    left: calc(50% - 70px);
    background: url("/media/prod/assets/1ab9e2c0-6b30-11eb-87d3-126d8eedec25.png") no-repeat center;
    background-size: contain;
    width: 140px;
    height: 120px; }}
        
/*** END ***/