/*  A N S W E R   C L O U D  */

/*  GENERAL */

/*  Overrides style.css. */
#header .header-content .header-text {
    padding: 0;
}

#wizard {
    padding-top: 40px;
}

h4 {
    font-size: 1.6em;
    font-weight: 300;
    /*  Needed for iOS. */
    font-family: 'Avenir Next Light', Lato, Arial, sans-serif;
}

h5 {
    font-size: 1.4em;
    font-weight: 300;
    /*  Needed for iOS. */
    font-family: 'Avenir Next Light', Lato, Arial, sans-serif;
    margin-bottom: 0; /*  overrides style.css */

}

.btn-default,
.btn-default:active,
.btn-default:hover,
.btn-default:visited,
.btn-default:focus {
    background-color: #6C3488;
    color: white;
    border: none;
    text-transform: uppercase;
}

/*  Overrides overrides in style.css. */
input:focus {
    /*  Color is: #6C3488. */
    outline: 2px solid rgba(98, 66, 135, 0.4) !important;
    outline-offset: 0;
}

/*
input.ng-not-empty.ng-valid:focus {
    outline: none !important;
}
*/

a:hover,
a:focus,
a:active,
a:visited {
    color: #6c3488;
}

a:hover {
    text-decoration: underline;
}
    

/*  MAIN BRANDING */

h1.nsr_brand {
    margin-top: 0 !important;
}

h1.nsr_brand span.nsr_brand_answer {
    font-variant: inherit; /* needed to override */
    text-transform: lowercase;
}

h1.nsr_brand span.nsr_brand_cloud {
    /* Note: using font-variant: small-caps instead of text-transform: uppercase gives better results with TM aligned with vertical-align: top on iOS. */
    font-size: 97%;
    font-weight: 300;
    /*  Needed for iOS. */
    font-family: 'Avenir Next Light', Lato, Arial, sans-serif;    
}

/*  Lato on Android has different size for uppercase style than Avenir Next on iOS. */
body.non-iOS h1.nsr_brand span.nsr_brand_cloud {
    /* Note: using font-variant: small-caps instead of text-transform: uppercase gives better results with TM aligned with vertical-align: top on iOS. */
    font-size: 102%;
}

h1.nsr_brand span.nsr_tm {
    font-size: 27%;
    vertical-align: top;
}

/*  FEATURES */

body.answer-cloud .col-features {
    padding-top: 0; /* override */
}

/*  TRIAL SIGNUP */

#wizard input {
    border: 0;
    border-radius: 0;
    color: #333333;
    transition: opacity 0.5s ease-in;
}

@media (max-width: 767px) {
    #wizard input {
        text-align: center;
    }
    /*  Needed to compensate for the padding-right used for the "completed" checkmark.
        text-indent + padding-left = padding-right */
    .has-feedback .form-control {
        text-indent: 30.5px;
        xpadding-left: 42.5px;
    }
}
/*  Override Slick style.css. */
#wizard input:disabled {
    background-color: white;
}

/*  Override Bootstrap. */
.has-success .form-control:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
}

/*  TO DO: Non-Safari CSS. */
#wizard input:disabled::-webkit-input-placeholder {
    transition: color 0.5s ease-in;
}

#wizard input:focus {
    text-align: left;
    text-indent: 0;
}

#wizard input:focus::-webkit-input-placeholder {
    text-align: left;
}

#wizard input:disabled:-moz-placeholder, /* Firefox 18- */
#wizard input:disabled::-moz-placeholder, /* Firefox 19+ */
#wizard input:disabled:-ms-input-placeholder {  
    transition: color 0.5s ease-in;
}

#wizard .glyphicon-ok {
    color: #6C3488; /*  overrides Bootstrap green */
    transition: opacity 0.5s ease-out;
}

/*  Dependent on status of input, show or not, using opacity. */
#wizard input.ng-empty + .glyphicon-ok,
#wizard input.ng-invalid + .glyphicon-ok {
    opacity: 0;
}

#wizard input.ng-not-empty.ng-valid + .glyphicon-ok {
    opacity: 1;
}

#wizard button {
    border-radius: 0;
    color: white !important;
    width: 175px; /* Center aligns button with App Store link button, given its padding. */
    transition: color 0.5s ease-in, background-color 0.5s ease-in, opacity 0.5s ease-in;
}

/*  Lighter color is needed given the grey background. */
#wizard button:disabled {
    /*  Based on #6C3488 with with filter: grayscale(50%). */
    background-color: rgb(118 ,100, 139);
    color: #dddddd !important;
}

/*  Used for input and button. */
#wizard .nsr_completed {
    opacity: 0.7;
}

#wizard .nsr_wizard_instructions,
#wizard .nsr_wizard_feedback,
#wizard .bottom-button {
    transition: background-color 1s ease-in-out;
}

#wizard .nsr_wizard_instructions {
    padding: 0;
    margin: 0;
    font-weight: 300;
    font-family: 'Avenir Next Light', Lato, Arial, sans-serif;
}

/*  Note: Padding needs to be in 'p' and not in enclosing 'div', since the div is animated and padding gives ugly effects when animating height. */
#wizard .nsr_wizard_instructions p {
    margin: 0;
    padding-bottom: 10px;
}

/*  Override generic style. */
#wizard .nsr_wizard_instructions a {
    color: inherit;
    font-weight: inherit;
}

#wizard .nsr_wizard_feedback {
    display: none;
    padding: 0;
    margin: 0;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

/*  Note: Padding needs to be in 'p' and not in enclosing 'div', since the div is animated and padding gives ugly effects when animating height. */
#wizard .nsr_wizard_feedback p {
    margin: 0;
    padding: 10px 20px;
}

#wizard .bottom-button {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    margin: 0;
    padding: 0 0 10px 20px;
}

@media (max-width: 767px) {
    #wizard .bottom-button {
        padding: 0 0 10px 0;
    }
}

@media (min-width: 768px) {
    #wizard .nsr_wizard_feedback,
    #wizard .bottom-button {
        xmax-width: 350px;
    }
}

.nsr_success {
    background-color: #d6e8d4;
}

#wizard .bottom-button.nsr_warning {
    display: none;
}

/*  Set radius when it's a warning since App Store button will not be shown. */
#wizard .nsr_wizard_feedback.nsr_warning {
    background-color: #ffcccc;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}



/*  Overrides */
.post-heading-center h5 {
    margin-bottom: 10px;
}

@media (max-width: 767px) {
    #header .nav-menu-mobile {
        display: none !important;
    }
}

.slick-dots li {
    padding: 0px 0 12px 0;
    background-color: rgba(0, 0, 0, 0.65);
}

.slick-dots li:first-child {
    padding-left: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.slick-dots li:last-child {
    padding-right: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

@media (max-width: 767px) {
    .post-heading {
        text-align: center;
    }
}

.wrap-bg2,
.tbl-pricing .row.wrap-bg2 {
    background-color: #CFAFDF;
}

#plans .bottom-button {
    padding:  10px 0 0 0;
}

.tbl-pricing .tbl-prc-col h4.tbl-prc-heading.tbl-prc-heading {
    font-size: 16px;
    line-height: 1.2;
}

.tbl-pricing .tbl-prc-col h4.tbl-prc-heading.tbl-prc-heading,
.tbl-pricing .tbl-prc-col h2.tbl-prc-price {
    padding: 10px;
}

.tbl-pricing .tbl-prc-col h2.tbl-prc-price,
.tbl-prc-heading .large {
    font-size: 30px;
    line-height: 1.2;
}

p.nsr_voicemail_to_email {
    display: none;
}

/*  Only show if shown as part of success feedback and not on iOS. */
body.non-iOS div.nsr_success p.nsr_voicemail_to_email {
    display: block;
}

span.nsr_iOS_only {
    display: none;
}

/*  Only show if shown as part of success feedback and not on iOS. */
body.non-iOS span.nsr_iOS_only {
    display: inline;
}

img.screenshot {
    box-shadow: -4px 8px 10px 2px #777;
    margin-bottom: 30px;
}

img.Slack_logo {
    vertical-align: -38px;
    height: 120px;   
    margin-left: -28px;
}

img.Spark_logo {
    vertical-align: -19px;
    height: 104px;
    margin-left: 7px;
}

span.nsr_tm ~ span.nsr_brand_cloud {
    font-size: 80% !important;
}