/*** variables */
:root {
    --primary-color-background: #ffffff;
    --secondary-color-background:#000;
    
    --primary-color-button: #fff;
    --secondary-color-button: #000;
    --color-button_hover:#D90EAC;
    --text-color-button: #000;
    --secondary-text-color-button: #fff;
    --text-color-button_hover: #D90EAC;
    
    --body-color-text: #000;
    --body-color-link: #000;
    --body-color-link_hover: #D90EAC;
    
    --card-color-background: #fff;
    --card-color-headline: #000;
    --card-color-text: #000;
    
    --placeholder-color: #979797;
    --main-text-color: #000;
    --main-color-dark: #000;
    --main-color-light: #ffffff;
    
    --back-button: #1a1a1a;
    --or-and-col:  #1a1a1a; }
    
    /*** full bg layout styles */
    .background-image {
    display: none !important; }
    
    img.custom-branding {
    zoom: 0;
    /* top: 100px; */
    }
    
    /*** custom backgrounds*/
    body {
    background: url("") 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: contain; }
    
    .multiple-card-layout {
    background: url("") no-repeat center top;
    background-size: contain; }
    
    /*** body: top level container*/
    body {
    background-color: var(--primary-color-background) !important; }
    
    /*** global text style 
    * will effect all text
    * in this location */
    
    p, h1, h2, h3, h4, button, a {
    color: var(--main-text-color); }
    #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, h4 {
    font-weight: 600; }
    
    /*** button styles */
    /*** cta green button*/
    button.btn.btn-green, a.btn.btn-green {
    border: 2px solid var(--secondary-color-button);
    color: var(--text-color-button);
    background: var(--primary-color-button); }
    button.btn-green:hover, a.btn-green:hover {
    border-color: var(--secondary-color-button) !important;
    color: var(--text-color-button) !important;
    background: var(--secondary-color-button) !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(--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(--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(--color-button_hover) !important;
    color: var(--text-color-button_hover) !important;
    background: var(--primary-color-button) !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; }
    .signinbody h3, .signinbody h4 {
        color: var(--body-color-text) !important;
        height: 0px !important;
        margin: 0px !important; }
    .emailsignup h3, .emailsignup p {
        color: var(--body-color-text); }
    
    /*** terms style*/
    .container-fluid.spot .signin .signinbody .terms {
    color: var(--body-color-text);
    opacity: 1 !important;
    font-size: 12px !important;   }
    .container-fluid.spot-email p {
    color: var(--body-color-text) !important;
    opacity: 1 !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; }
    
    /*** branding image (profile image) */
    /*img.custom-branding {
    display: none; }*/
    
    /*** 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(--back-button) !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);
    }
    .container-fluid.spot-email .darkbg {
    background: none;
    }
    .container-fluid.spot-email form button.btn-dark {
    border: 2px solid var(--secondary-color-button);
    color: var(--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(--color-button_hover);
    color: var(--text-color-button_hover) !important;
    background: var(--primary-color-button);
    box-shadow: none;
    }
    .container-fluid.spot-email .or p {
    color: var(--or-and-col);
    }
    .container-fluid.spot-email .or .col-xs-5 {
    border-bottom: 1px solid var(--or-and-col);
    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: #ff2344;
    box-shadow: none;
    }
    .container-fluid.spot-email-header .col-xs-2 {
    background: #000;
    }
    .parsley-error-list li {
    text-align: left;
    color: #c00030; }  
    
    /*
    .container-fluid.spot .signin .signinbody .btn.fb img {
    margin: 0px -36px 0px 0px !important; }
    button.btn-acid, a.btn-acid {
    font-size: 18px;
    padding: 18px !important; }  
    .container-fluid.spot .signin .signinbody .btn.fb {
    margin-top: -100px;
    padding: 12px !important;
    font-size: 18px; }
    */
    
    .container-fluid.spot-email .btn-fb {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 500;
    }
    input, textarea {
    border: 1px solid var(--body-color-text) !important;
    color: var(--body-color-text) !important;
    }
    input::placeholder, textarea::placeholder {
    color: var(--placeholder-color) !important;
    }
    input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    font: 100% 'Open Sans', "Lucida Grande", Helvetica, Arial, sans-serif;
    font-style: italic;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    font-weight: 300;
    text-align: left; }
    input:-moz-placeholder, textarea:-moz-placeholder {
    font: 100% 'Open Sans', "Lucida Grande", Helvetica, Arial, sans-serif;
    font-style: italic;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    font-weight: 300;
    text-align: left; }
    input::-moz-placeholder, textarea::-moz-placeholder {
    font: 100% 'Open Sans', "Lucida Grande", Helvetica, Arial, sans-serif;
    font-style: italic;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    font-weight: 300;
    text-align: left; }
    input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    font: 100% 'Open Sans', "Lucida Grande", Helvetica, Arial, sans-serif;
    font-style: italic;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    font-weight: 300;
    text-align: left; }
    input:hover, textarea:hover, 
    input:active, textarea:active, 
    input:focus, textarea:focus {
    border: 1px solid var(--body-color-link) !important;
    }
    
    /*** 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: var(--primary-color-background) !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: var(--main-color-dark) !important;
    }
    .ssi-card {
        border: 1px solid var(--secondary-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(--primary-color-button) !important;
    border: 1px solid var(--secondary-color-button) !important;
    color: var(--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(--secondary-color-button) !important;
    border: 1px solid var(--secondary-color-button) !important;
    color: var(--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: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.9) 100%);
    }
    .ssi-card .ssi-card-content-container .card-form {
        text-align: center;
    }
    
    .ssi-card.survey h2 {
    font-size: 18px !important;
        line-height: 20px;
        font-weight: normal;
        flex-grow: 1;
        height: auto;
        text-align: center;
        padding: 0px;
    }
    .ssi-card.survey p {
        font-size: 18px !important;
        line-height: 20px;
        padding: 0px 40px 0px 40px;
        margin: 0px;
        height: auto;
    }
    
    .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%;
        padding-top: 0px;
        flex-wrap: nowrap;
    }
    .ssi-card.survey.without-image h2 {font-size: 24px !important;line-height: 28px;font-weight: bold;height: auto !important;text-align: center;padding: 5px;flex-grow: 0;}
    .ssi-card.survey.without-image p {
        font-size: 10px !important;
        line-height: 12px;
        margin: 0 0 10px;
        height: auto !important;
        padding: 0px 20px;
    }
    .survey-button {
        background: transparent !important;
        border: none !important;
        color: var(--primary-text-color-button) !important;
        font-size: 12px !important;
        transition: all 0.4s;
        text-decoration: underline !important;
        font-weight: bold !important;
    }
    
    /*** survey - buttons*/
    
    .survey-button {
    display: inline-block !important;
    height: 34px !important;
    letter-spacing: 0px !important;
    }  
    .ssi-card.option_count_2 button.survey-button {
    width: calc(100% - 5px) !important;
    }    
    .ssi-card.option_count_4 button.survey-button {
    width: calc(1000% - 5px) !important;
    } 
    .survey-button:hover, 
    .survey-button:active, 
    .survey-button:focus  {
    background: transparent !important;
    border: 1px solid var(--color-button_hover) !important;
    color: var(--text-color-button_hover) !important;
    
    }
    .ssi-card .ssi-card-content-container a, 
    .ssi-card .ssi-card-content-container button {
    border-radius: 0px !important;
    line-height: 15px !important;
    }
    
    .ssi-card .ssi-card-content-container input {
    width: 80% !important;
        margin: auto;
    }
    
    /*** 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: rgb(0 0 0);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #fff;
        display: block !important;
    }
    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, .footerp p {
        color: #fff !important;
    }
    .footer .footerp a {
        color: #fff !important;
    }
    .footer .footerp a:hover {
        color: #f1f1f1 !important;
    }
    .footer .footerp a:active, .footer .footerp a:focus {
        color: #f1f1f1 !important;
    }
    /*** on off switch */
    .onoffswitch-label p {
        line-height: 19px;
    }
    .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-light);
        color: var(--main-color-light);
    }
    .onoffswitch-switch-off {
        border-color: var(--main-color-light);
        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);
    }
    .ssi-card .card-overlay {
        background-color: #00385f;
    }
    
    
    /*** 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: 80px; */
        }
    
    /*
        .container-fluid.spot .signin .signinbody .btn.fb img {
        margin: 0px -36px 3px 0px !important;   }
        button.btn-acid, a.btn-acid {
        font-size: 18px;
        padding: 18px !important;    }
        .container-fluid.spot .signin .signinbody .btn.fb {
        padding: 12px !important;
        font-size: 18px;    }    
        .container-fluid.spot-email .btn-fb {
        color: #FFFFFF;
        font-size: 18px;
        font-weight: 500;     }
    */
        input, textarea {
        border: 1px solid var(--body-color-text) !important;
        color: var(--body-color-text) !important;    }
    
        input::placeholder, textarea::placeholder {
        color: var(--placeholder-color) !important;         }
    
        input:hover, textarea:hover, 
        input:active, textarea:active, 
        input:focus, textarea:focus {
        border: 1px solid var(--body-color-link) !important;    }
    
    
        .container-fluid.spot .top-branding .brand .branding {
        margin-left: 0px;
        margin-top: 0px;
        padding-top: 50px;
        bottom: 0%;
        top: 0%;
        height: 200px;
        }
    
    .container-fluid.spot .top-branding {
    height: 40%;
    position: relative;
    width: 100%;
    float: none;    }
    
    .col-sm-6 {
    width: 100%;    }
    
    .container-fluid.spot .signin .signinbody,
    .container-fluid.spot-email .emailsignup {
        margin-top: 0px;
        top: 0%;   }
    }
    
    /*** Custom Policy */
    .policy_copy, .policy_copy a  {
        color: #000; }
    
    /*** Custom Scroll ***/
    
    .container-fluid .main-custom-container .top-branding,
    .container-fluid .main-custom-container .signin {
    position: relative !important; }
    
    .container-fluid.spot .signin .signinbody #email_signup {
    margin-top: 20px !important; }
    
    /*** Small Phones Only***/
    @media (max-height: 480px){
    .container-fluid.spot .signin .signinbody {
    padding-top: 0px !important;} }
    
    
    .container-fluid .main-custom-container {
    overflow-y: auto; }
    
    /*** 3 lines Opt-In ***/
    .onoffswitch-label p {
    padding-left: 68px; }
    
    
    
    /*** QUICK LOGIN ***/
    
    :root {
    --shapes-color: #000;
    --header-text-color: #000;
    --paragraph-text-color: #000;
    --button-color: #000;
    --button-text-color: #fff;
    --link-text-color: #D90EAC;
    --skip-text-color: #000; }
        
    .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_addraess_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); }
        
    .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); }
    
    /* END of QUICK LOGIN */


.onoffswitch {
    display: none !important;
}
main{
    padding: 0 !important;
}

.table_wrapper {
    padding: 5px;
    overflow-x: auto;
    border: 1px solid #000;
    box-shadow: inset -5px 0 10px rgba(0,0,0,.3) 
}
.table_wrapper table{
    width: 1500px;
}

.table_wrapper table tr{
  border-bottom: 1px solid #ccc;
}
.table_wrapper table tr td, .table_wrapper table tr th{
  padding: 3px;
}
    
    /* END */