.custom-bullet,
.image-list,
.no-space {
    margin: 0;
    padding: 0
}

.custom-bullet,
.image-list,
.no-bullets {
    list-style-type: none
}

.image-list {
    font-size: 0;
    text-align: center;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.image-list:after {
    display: inline-block;
    width: 100%;
    height: 0
}

.image-list li {
    display: inline-block;
    font-size: 14px;
    font-size: 1rem;
    margin: 1em;
    vertical-align: middle
}

.image-list li img {
    margin: 0 .5rem
}

.image-list li {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto
}

.custom-bullet li {
    position: relative
}

.custom-bullet li:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    display: block;
    background-position: 50%;
    background-repeat: no-repeat
}

.grayscale,
.image-list img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%)
}

.grayscale:hover,
.image-list img:hover {
    -webkit-filter: grayscale(0);
    filter: grayscale(0)
}

html {
    visibility: visible !important
}

body {
    background-color: #ccc;
    color: #fff;
    font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important
}

img {
    max-width: 100%;
    height: auto;
    -ms-interpolation-mode: bicubic
}

ol,
ul {
    list-style-type: none
}

.header {
    padding: .5em 15px;
    width: 100%;
    background-color: #fff;
    color: #fff
}

@media only screen and (min-width: 768px) {
    .logo {
        text-align: left;
        width: 77%
    }
}

@media only screen and (min-width: 768px) {
    .logo img {
        height: 50px
    }
}



.container {
    width: calc(100% - 600px);
    max-width: 600px;
}

#lower-body,
.main-headline,
.well {
    margin: 0 -15px;
    padding: 0 15px
}

@media only screen and (min-width: 768px) {

    #lower-body,
    .main-headline,
    .well {
        padding: 0
    }
}

.main {
    padding: 0;
    background: #fff;
    display: block
}

@media only screen and (min-width: 768px) {
    .main {
        padding: 0 15px
    }
}

.main-headline {
    margin: 0;
    color: #000;
    text-align: center
}

@media only screen and (min-width: 768px) {
    .main-headline {
        margin: 0 -15px;
        background: #3fadd7;
        width: auto;
        color: #fff
    }

    .main-headline>.container {
        margin: 0 auto
    }
}

.main-headline .title {
    margin: .892857em 0 .428571em;
    font-size: 1.25em;
    line-height: 1.2;
    font-weight: 600;
    display: none
}

@media only screen and (min-width: 768px) {
    .main-headline .title {
        font-size: 1.9em;
        margin-top: 12px;
        display: block
    }
}

@media only screen and (min-width: 992px) {
    .main-headline .title {
        font-size: 2em
    }
}

.main-headline .title-mobile {
    width: 100%;
    font-size: 1.2em;
    line-height: 1.2;
    font-weight: 600;
    color: #fff;
    margin: .5em 0 .5em
}

@media only screen and (min-width: 768px) {
    .main-headline .title-mobile {
        display: none
    }
}

.main-headline .site-tagline {
    font-size: .875em;
    margin: 0 0 1.25em
}

@media only screen and (min-width: 768px) {
    .main-headline .site-tagline {
        font-size: 1.2em
    }
}

.well {
    margin: 0;
    width: auto;
    background: #3fadd7 no-repeat 0 50%;
    border: none;
    padding-bottom: 30px;
    margin-bottom: 20px !important;
}

@media only screen and (min-width: 768px) {
    .well {
        padding-bottom: 0px;
        /*margin: 0px !important;*/
    }
}

@media only screen and (min-width: 992px) {
    .well {
        background-position: 50% 0
    }
}

@media only screen and (max-width: 767px) {
    .well {
        border-radius: 25px
    }
}

#lower-body {
    background: #fff;
    color: #444;
    margin: 35px -10px 0 -10px
}

@media only screen and (min-width: 768px) {
    #lower-body {
        margin: 0 -15px
    }
}

#lower-body .partners>.container {
    width: 100%;
    padding: 15px;
    position: relative
}

@media only screen and (min-width: 768px) {
    #lower-body .partners>.container {
        padding: 0 0 15px;
        width: auto !important
    }

    #lower-body .partners>.container:before {
        width: 180px;
        height: 60px;
        content: '';
        margin-top: -55px;
        border: solid #000;
        border-width: 1px 1px 0;
        display: block;
        background: #fff url(../img/ai-upsells-logo.png) no-repeat 50% 28%
    }

    #lower-body .partners>.container p {
        margin: .5em 1em 0
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width:768px),
only screen and (min--moz-device-pixel-ratio:2) and (min-width:768px),
only screen and (min-device-pixel-ratio:2) and (min-width:768px),
only screen and (min-resolution:192dpi) and (min-width:768px),
only screen and (min-resolution:2dppx) and (min-width:768px) {
    #lower-body .partners>.container:before {
        background-image: url(../img/ai-upsells-logo@2x.png);
        background-size: 140px auto
    }
}

#lower-body .partners .col-sm-4 {
    display: none
}

#lower-body .partners img {
    -webkit-filter: drop-shadow(0 0 10px rgba(0, 0, 0, .4));
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, .4))
}

#lower-body .partners p {
    margin: 0
}

@media only screen and (min-width: 768px) {
    #lower-body .section-header {
        padding: 0 0 .5em 0;
        margin: 0 0 .5em;
        text-align: center
    }
}

#lower-body .section-title {
    margin: 15px 0 15px 0;
    display: block;
    font-size: 1.2em;
    text-align: center
}

@media only screen and (min-width: 768px) {
    #lower-body .section-title {
        font-size: 2.2em
    }
}

.section-partners {
    border-bottom: 1px solid #ebebeb;
    padding: 30px 15px 15px 15px
}

@media only screen and (min-width: 768px) {
    .section-partners {
        border: none
    }
}

.section-partners .section-title {
    text-align: center;
    padding-top: 3px;
    font-size: 1.4em
}

@media only screen and (min-width: 768px) {
    .section-partners .section-title {
        font-size: 2.2em
    }
}

.section-partners .sell-customers {
    text-align: center;
    font-size: 16px
}

@media only screen and (min-width: 768px) {
    .section-partners .sell-customers {
        font-size: 24px
    }
}

.image-list li {
    margin: 0;
    font-size: 1em
}

@media only screen and (min-width: 768px) {
    .image-list li {
        margin: 1em
    }
}

.partner-item {
    width: 13%
}

.section-benefits {
    padding: 15px 0
}

.section-benefits .step-img {
    width: 10em
}

@media only screen and (min-width: 768px) {
    .section-benefits .step-img {
        width: 13em
    }
}

.section-benefits .col-md-12 {
    text-align: center
}

.section-benefits .col-md-12.step-txt {
    margin: .2em 0 2.5em 0
}

@media only screen and (min-width: 992px) {
    .section-benefits .col-md-12.step-txt {
        margin-bottom: 1em
    }
}

@media only screen and (min-width: 768px) {
    .section-benefits {
        background-color: #f8f8f8
    }
}

.section-benefits .benefits-list {
    font-size: 1.2em
}

@media only screen and (min-width: 768px) {
    .section-benefits .benefits-list {
        padding: 1em 0
    }
}

.section-benefits .custom-bullet li {
    line-height: 1.2;
    padding: .8em .8em .8em 2.8em
}

.section-benefits .custom-bullet li:before {
    width: 2em;
    background-image: url(/templates/blueline/images/tick_bullet.svg);
    background-size: 30px
}

.no-svg .section-benefits .custom-bullet li:before {
    background-image: url(/templates/blueline/images/tick_bullet.png)
}

.fat-footer {
    background: #000
}

.site-footer {
    padding: 1em;
    background-color: #000;
    color: #fff;
    text-align: center;
    font-size: .875em
}

.site-footer>.container {
    position: relative;
    display: inline-block;
    margin: 0 auto;
    padding-left: 2em;
    text-align: left
}

.site-footer a {
    color: #fff;
    white-space: nowrap
}

.cta-link h3 {
    background-color: #f15f5f;
    padding: 14px;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    border: 2px solid #bc1010;
    border-radius: 10px;
    margin-bottom: 25px;
    color: #fff;
    text-align: center;
    font-size: 2em;
    cursor: pointer
}

@media only screen and (min-width: 768px) {
    .cta-link h3 {
        width: 54%
    }
}

.cta-link h3:hover {
    background-color: #f1767b;
    border: solid 2px #9f7f7f
}

.awards-list.image-list {
    padding: 10px 0 20px 0
}

.awards-list img {
    height: 18px
}

@media only screen and (min-width: 768px) {
    .awards-list img {
        height: 42px
    }
}

.thankyou {
    color: #000;
    padding: 1.4em;
    min-height: 250px
}

.only-a-minute {
    bottom: 51px
}

.tcpa {
    font-size: .9em;
    text-align: justify
}

.tcpa-top {
    margin-bottom: 1em;
    margin-top: -10px
}

.tcpa-bottom {
    margin-top: 1em
}

.progressbar {
    position: relative;
    top: -5px;
    margin-bottom: 0;
    overflow: hidden;
    background-color: #e4e4e4;
    -webkit-box-shadow: none;
    box-shadow: none;
    height: 18px;
    border-radius: 0;
    outline: 2px solid #fff
}

@media only screen and (min-width: 992px) {
    .progressbar {
        outline: 0
    }
}

.progressbar-visual {
    width: 0;
    color: #000;
    text-align: center;
    height: 18px;
    background-color: #92c439;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-size: 10px;
    top: 0
}

.progressbar-text {
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 11px;
    line-height: 18px;
    top: 0
}

@media only screen and (min-width: 768px) {
    .webform {
        background-color: #b5e5f5;
        padding: 10px 0
    }
}

@media only screen and (min-width: 992px) {
    .webform {
        padding: 20px 0
    }
}

@media only screen and (min-width: 768px) {
    .webform .container>.row {
        background-color: #fff;
        border: 4px solid #fff;
        border-radius: 10px
    }
}

#webform-container {
    padding: 4px;
    -webkit-box-shadow: 0 5px 24px 0 #000;
    box-shadow: 0 5px 24px 0 #000;
    border: 3px solid #a8a8a8;
    border-radius: 14px;
    background-clip: padding-box;
    margin: 0 -17px -10px -17px;
    background-color: #fff;
    min-height: 390px
}

@media only screen and (max-width: 767px) {
    #webform-container {
        border: none;
        margin: 0 -15px -10px -15px;
        min-height: 350px
    }
}

#webform-container body.form-left #webform-container body {
    float: right;
    left: auto;
    right: 33.3%
}

#webform-container body.form-centre #webform-container body {
    float: none;
    left: auto;
    margin: 0 auto -10px auto
}

@media only screen and (max-width: 767px) {
    #webform-container body.form-centre #webform-container body {
        margin: 0 -17px -10px -17px
    }
}

@media only screen and (min-width: 768px) {
    #webform-container {
        border: none
    }
}

@media only screen and (max-width: 767px) {
    body.form-left #webform-container {
        left: auto;
        right: auto;
        float: none
    }
}

@media only screen and (min-width: 992px) {
    #webform-container {
        left: 31.5%;
    }

    body.form-left #webform-container {
        right: 31.5%
    }
}

#webform-container form {
    padding: 0;
    width: 100%;
    color: #000;
    background: #fff;
    margin: 0
}

#webform-container form [data-webform] {
    position: relative;
    border: solid #b3e5f6;
    border-width: 1px 0;
    border: none;
    padding: .8em .8em .5em .8em;
    background-color: #fff
}

@media only screen and (min-width: 768px) {
    #webform-container form [data-webform] {
        padding: 1.4em 1.4em 0 1.4em;
        border-width: 1px
    }
}

.form_footer {
    font-size: .875em;
    margin-top: 0
}

.form_footer .footer-message_text {
    border-bottom: 8px solid #fff;
    text-align: center;
    margin: 1.5em auto .8em auto
}

@media only screen and (max-width: 767px) {
    .form_footer .footer-message_text {
        margin: .2em auto 0 auto
    }
}

@media only screen and (min-width: 768px) {
    .form_footer .footer-message_text {
        margin-top: 0
    }
}

.form_footer .footer-message_text a {
    white-space: nowrap
}

.good-news,
.last-step {
    margin-top: 10px;
    display: block;
    font-weight: 400
}

.form-page p {
    margin: 15px 0 10px 0;
    text-align: center;
    background: #3fadd7;
    border-radius: 10px;
    color: #fff;
    padding: 4px
}

.thirdary-text-color {
    width: 100%
}

.inline-component .has-tooltip .thirdary-text-color {
    width: 85%
}

.has-tooltip .thirdary-text-color {
    width: 92%;
    float: left
}

.visibleQuestion .input-wrapper .error-message {
    display: none;
}

.visibleQuestion.has-error .input-wrapper .error-message {
    display: block;
}

.has-error label.component-label span {
    color: #e55;
}

.has-error input {
    border: 1px solid #e55 !important;
    background: url(../../img/invalid.png) no-repeat right center #FFF !important;
}

.isOk input {
    border: 1px solid #53d75e !important;
    background: url(../../img/valid-green.png) no-repeat right center #FFF !important;
}

.has-error label.component-label span.badge {
    color: #fff
}

.has-error.google-address-component input[type=email],
.has-error.google-address-component input[type=number],
.has-error.google-address-component input[type=tel],
.has-error.google-address-component input[type=text],
.has-error.text-component input[type=email],
.has-error.text-component input[type=number],
.has-error.text-component input[type=tel],
.has-error.text-component input[type=text] {
    border: 1px solid #e55
}

.has-error.google-address-component.inline-component,
.has-error.text-component.inline-component {
    position: relative
}

.has-error.google-address-component.inline-component:after,
.has-error.google-address-component.inline-component:before,
.has-error.text-component.inline-component:after,
.has-error.text-component.inline-component:before {
    content: " ";
    display: table
}

.has-error.google-address-component.inline-component:after,
.has-error.text-component.inline-component:after {
    clear: both
}

.has-error.google-address-component.inline-component .component-label,
.has-error.text-component.inline-component .component-label {
    padding: 2px 8px 8px 8px
}

.has-error.google-address-component.inline-component .error-message,
.has-error.text-component.inline-component .error-message {
    position: static;
    left: 0;
    top: 38px;
    padding-left: 8px
}

@media only screen and (min-width: 992px) {

    .has-error.google-address-component.inline-component .error-message,
    .has-error.text-component.inline-component .error-message {
        position: absolute;
        width: 170px
    }
}

.has-error .error-message {
    font-size: .75em;
    color: #e55;
    display: block !important;
}

#start {
    padding-top: 2px !important;
    padding-bottom: 0 !important
}

[data-slider-page="0"] .navigation_start em {
    display: block
}

.footer-message_text {
    color: #000;
    font-weight: normal;
}

.form-component:after,
.form-component:before {
    content: " ";
    display: table
}

.form-component:after {
    clear: both
}

.swiper-slide-visible {
    outline: 0
}

.question-mark {
    border-radius: 50%;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: 0;
    color: #999;
    background: #ddd;
    border-color: transparent;
    font-size: .8em;
    padding: 0 5px;
    margin: 2px 0 0 0
}

.form_pages {
    margin: 0 0 10px 0;
    min-height: 150px
}

@media only screen and (min-width: 768px) {
    .form_pages {
        min-height: 250px
    }
}

.form-page {
    padding-top: 1px
}

.component-label {
    display: inline-block;
    position: relative;
    padding: 8px 8px 8px 38px;
    font-weight: 700;
    line-height: 1.3;
    font-size: 1.20em;
    margin-bottom: 5px;
    width: 100%
}

.hidden-number-component .component-label {
    padding-left: 8px
}

@media only screen and (min-width: 992px) {
    .hidden-number-component .component-label {
        padding-left: 8px
    }
}

@media only screen and (min-width: 992px) {
    .inline-component .component-label {
        float: left;
        clear: both;
        margin-top: 10px
    }

    .inline-component .component-label.component-label {
        width: 32% !important
    }
}

.component-label .badge {
    font-weight: 400;
    line-height: 1.5em;
    width: 1.5em;
    height: 1.5em;
    padding: 0;
    text-align: center;
    color: #fff;
    border-radius: 50%;
    background: var(--accent);
    font-size: 14px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

@media only screen and (min-width: 992px) {

    .checkbox-component.inline-component .checkbox-group,
    .checkbox-component.inline-component .radio-group,
    .radio-component.inline-component .checkbox-group,
    .radio-component.inline-component .radio-group {
        float: left;
        width: 50% !important;
        margin-top: 10px
    }
}

.checkbox-group,
.radio-group {
    padding: 2px;
    position: relative;
    font-size: 20px;
    line-height: 1.3
}

@media only screen and (min-width: 768px) {

    .checkbox-group,
    .radio-group {
        font-size: 20px
    }
}

.checkbox-group .group-answer,
.radio-group .group-answer {
    padding: 2px;
    margin: 0 auto .4em
}

.sub-price {
    display: none;
}

.checkbox-group .group-answer.selected label,
.radio-group .group-answer.selected label {
    background-color: #d8f9cd
}

.checkbox-group .group-answer label,
.radio-group .group-answer label {
    border: 1px #c7c7c7 solid;
    position: relative;
    padding: .4em 1em .4em 40px;
    display: block;
    border-radius: .363636em;
    background: #fafafa;
    cursor: pointer;
    color: #4b4b4b;
    -webkit-box-shadow: 0 1px 0 #454545, 0 2px 2px #ccc;
    box-shadow: 0 1px 0 #454545, 0 2px 2px #ccc;
    -webkit-transition: border-color .2s ease-in-out, -webkit-box-shadow .3s ease-in-out;
    transition: border-color .2s ease-in-out, -webkit-box-shadow .3s ease-in-out;
    transition: box-shadow .3s ease-in-out, border-color .2s ease-in-out;
    transition: box-shadow .3s ease-in-out, border-color .2s ease-in-out, -webkit-box-shadow .3s ease-in-out
}

.checkbox-group .group-answer label:hover,
.radio-group .group-answer label:hover {
    -webkit-transform: translateY(.05em) scale(.996);
    transform: translateY(.05em) scale(.996);
    background-color: #fbdfda;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #004966
}

.checkbox-group .group-answer label:hover:before,
.radio-group .group-answer label:hover:before {
    background: var(--accent);
}

.checkbox-group .group-answer label:before,
.radio-group .group-answer label:before {
    position: absolute;
    top: 50%;
    display: block;
    content: '';
    background: #fff;
    left: 15px;
    box-shadow: 0 0 0 6px #fff inset, 0 0 0 6px #0000004d inset, 0 0 0 1px currentcolor, 0 0 0 1px #ccc;
}

.radio-group .group-answer:hover label:before,
.checkbox-group .group-answer:hover label:before {
    background: #ef5023;
    box-shadow: 0 0 0 3px #fff inset, 0 0 0 0 #fff inset, 0 0 0 0px #ef5023, 0 0 0 1px #ef5023;
}

.lt-ie9 .checkbox-group .group-answer label:before,
.lt-ie9 .radio-group .group-answer label:before {
    display: none
}

.checkbox-group .group-answer input[type=checkbox],
.checkbox-group .group-answer input[type=radio],
.radio-group .group-answer input[type=checkbox],
.radio-group .group-answer input[type=radio] {
    position: absolute;
    left: -9999px
}

.radio-group .group-answer label:before {
    width: 22px;
    height: 22px;
    margin-top: -11px;
    border-radius: 50%;
    -webkit-box-shadow: 0 0 0 6px #fff inset, 0 0 0 5px currentcolor inset, 0 0 0 1px currentcolor, 0 0 0 2px #ccc;
    box-shadow: 0 0 0 6px #fff inset, 0 0 0 5px currentcolor inset, 0 0 0 1px currentcolor, 0 0 0 2px #ccc
}

.radio-group .group-answer.selected label:before {

    transition-duration: .1s;
    background: #ef5023;
    box-shadow: 0 0 0 3px #fff inset, 0 0 0 0 #fff inset, 0 0 0 0px #ef5023, 0 0 0 1px #ef5023;

}

.checkbox-group .group-answer label:before {
    width: 22px;
    height: 22px;
    margin-top: -11px;
    border: 3px solid #fff;
    border-radius: 2px;
}

.checkbox-group .group-answer.selected label:before {
    -webkit-transition-duration: .1s;
    transition-duration: .1s;
    background: #ef5023 url(../images/tick.png) no-repeat 0 0;
    background-size: cover;
    border: none;
    -webkit-box-shadow: 0 0 0 1px currentcolor;
    box-shadow: 0 0 0 1px rgb(239 80 35);
}

.checkbox-group .group-answer.focused label {
    -webkit-transform: translateY(.05em) scale(.996);
    transform: translateY(.05em) scale(.996);
    background-color: #e3fbda;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #004966
}

.checkbox-group .group-answer.focused label:before {
    background: #53d75e
}

.google-address-component,
.text-component,
.textarea-component {
    padding: 2px
}

.google-address-component input[type=email],
.google-address-component input[type=number],
.google-address-component input[type=tel],
.google-address-component input[type=text],
.google-address-component textarea,
.text-component input[type=email],
.text-component input[type=number],
.text-component input[type=tel],
.text-component input[type=text],
.text-component textarea,
.textarea-component input[type=email],
.textarea-component input[type=number],
.textarea-component input[type=tel],
.textarea-component input[type=text],
.textarea-component textarea {
    margin-bottom: 0;
    width: 100% !important;
    height: 150px;
    -webkit-box-shadow: rgba(23, 168, 220, .2) 0 0 0 2px;
    box-shadow: rgba(23, 168, 220, .2) 0 0 0 2px;
    padding: 0 10px;
    margin-top: 0;
    color: #444;
    border: 1px solid #ef5023;
    border-radius: 5px;
    background-color: #f5fcff;
    background: #ffffff
}

.google-address-component input[type=email]:hover,
.google-address-component input[type=number]:hover,
.google-address-component input[type=tel]:hover,
.google-address-component input[type=text]:hover,
.google-address-component textarea:hover,
.text-component input[type=email]:hover,
.text-component input[type=number]:hover,
.text-component input[type=tel]:hover,
.text-component input[type=text]:hover,
.text-component textarea:hover,
.textarea-component input[type=email]:hover,
.textarea-component input[type=number]:hover,
.textarea-component input[type=tel]:hover,
.textarea-component input[type=text]:hover,
.textarea-component textarea:hover {
    color: #000000
}

@media only screen and (min-width: 992px) {

    .google-address-component input[type=email],
    .google-address-component input[type=number],
    .google-address-component input[type=tel],
    .google-address-component input[type=text],
    .google-address-component textarea,
    .text-component input[type=email],
    .text-component input[type=number],
    .text-component input[type=tel],
    .text-component input[type=text],
    .text-component textarea,
    .textarea-component input[type=email],
    .textarea-component input[type=number],
    .textarea-component input[type=tel],
    .textarea-component input[type=text],
    .textarea-component textarea {
        -webkit-box-shadow: none;
        box-shadow: none
    }
}

.google-address-component input[type=email],
.google-address-component input[type=number],
.google-address-component input[type=tel],
.google-address-component input[type=text],
.text-component input[type=email],
.text-component input[type=number],
.text-component input[type=tel],
.text-component input[type=text],
.textarea-component input[type=email],
.textarea-component input[type=number],
.textarea-component input[type=tel],
.textarea-component input[type=text] {
    height: 38px
}

.google-address-component.hidden-number-component input[type=email],
.google-address-component.hidden-number-component input[type=number],
.google-address-component.hidden-number-component input[type=tel],
.google-address-component.hidden-number-component input[type=text],
.google-address-component.hidden-number-component textarea,
.text-component.hidden-number-component input[type=email],
.text-component.hidden-number-component input[type=number],
.text-component.hidden-number-component input[type=tel],
.text-component.hidden-number-component input[type=text],
.text-component.hidden-number-component textarea,
.textarea-component.hidden-number-component input[type=email],
.textarea-component.hidden-number-component input[type=number],
.textarea-component.hidden-number-component input[type=tel],
.textarea-component.hidden-number-component input[type=text],
.textarea-component.hidden-number-component textarea {
    margin-top: 0
}

@media only screen and (min-width: 992px) {

    .google-address-component.inline-component input[type=email],
    .google-address-component.inline-component input[type=number],
    .google-address-component.inline-component input[type=tel],
    .google-address-component.inline-component input[type=text],
    .google-address-component.inline-component textarea,
    .text-component.inline-component input[type=email],
    .text-component.inline-component input[type=number],
    .text-component.inline-component input[type=tel],
    .text-component.inline-component input[type=text],
    .text-component.inline-component textarea,
    .textarea-component.inline-component input[type=email],
    .textarea-component.inline-component input[type=number],
    .textarea-component.inline-component input[type=tel],
    .textarea-component.inline-component input[type=text],
    .textarea-component.inline-component textarea {
        float: right;
        width: 67% !important;
        margin-top: 10px
    }
}

.navigation {
    padding-bottom: 1.4em;
    margin-bottom: .8em;
    position: relative
}

.navigation_finish,
.navigation_next,
.navigation_start {
    font-size: 1.2em;
    width: 100%;
    padding: .5em .8em;
    cursor: pointer;
    text-align: center;
    white-space: normal;
    color: #fff;
    border: 2px solid var(--accent);
    border-radius: .2em;
    background: var(--accent);
    height: 78px;
}

@media only screen and (min-width: 768px) {

    .navigation_finish,
    .navigation_next,
    .navigation_start {
        font-size: 1.2em
    }
}

.navigation_finish:active,
.navigation_finish:focus,
.navigation_finish:hover,
.navigation_next:active,
.navigation_next:focus,
.navigation_next:hover,
.navigation_start:active,
.navigation_start:focus,
.navigation_start:hover {
    background-color: var(--accent);
}

.navigation_finish em,
.navigation_next em,
.navigation_start em {
    display: block;
    text-align: center;
    font-size: 15px;
    color: #fff;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

[data-slider-page="0"] .navigation_previous {
    display: none !important
}

.navigation_previous {
    position: absolute;
    border: none;
    color: #337ab7;
    padding-left: 20px;
    display: block;
    cursor: pointer;
    background: url(/templates/blueline/images/round-arrow-left.png) no-repeat 0 0
}

@media only screen and (min-width: 768px) {
    .navigation_previous {
        margin-top: 5px
    }
}

.navigation_previous:hover {
    text-decoration: underline
}

.loading-quotes {
    background-image: url(/templates/blueline/images/loader-squares.gif);
    background-repeat: no-repeat;
    background-position: center 75px;
    width: 100%;
    height: 300px;
    font-size: 16px;
    text-align: center;
    padding: 30px 0;
    background-size: 40%;
    font-weight: 400
}

.swiper-slide-active .good-news {
    text-align: left;
    -webkit-animation: loader-fader 4s linear;
    animation: loader-fader 4s linear;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    font-size: 14px;
    width: 100%;
    margin-left: 0;
    display: block;
    font-weight: 400;
    padding: .5em 1em
}

@-webkit-keyframes loader-fader {
    0% {
        background: #fff;
        color: #fff
    }

    10% {
        background: #189d72;
        color: #fff
    }

    80% {
        background: #189d72;
        color: #fff
    }

    100% {
        background: #fff;
        color: #444
    }
}

@keyframes loader-fader {
    0% {
        background: #fff;
        color: #fff
    }

    10% {
        background: #189d72;
        color: #fff
    }

    80% {
        background: #189d72;
        color: #fff
    }

    100% {
        background: #fff;
        color: #444
    }
}

.upsells-body {
    color: #444
}

.upsells-body .logo img {
    width: auto;
    max-height: 40px
}

.upsells-body #quote-form {
    max-width: 560px;
    margin: 0 auto
}

@media only screen and (min-width: 992px) {
    .upsells-body #quote-form {
        max-width: 100%
    }
}

.upsells-body .component-label {
    font-size: 1.142857em;
    line-height: 1.3;
    margin-bottom: .2em;
    padding: .5em .5em .5em 38px
}

.upsells-body .component-label .badge {
    top: 50%;
    margin-top: -1em;
    background-color: #006080
}

@media only screen and (min-width: 768px) {
    .upsells-body .component-label {
        font-size: 1.285714em
    }

    .upsells-body .component-label .badge {
        font-size: initial
    }
}

.upsells-body .component-label+* {
    margin-top: 0 !important
}

.upsells-body .checkbox-group,
.upsells-body .radio-group {
    font-size: 1.142857em
}

@supports (display: flex) {
    .upsells-body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        min-height: 100vh
    }

    .section-upsells {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1
    }

    .fat-footer {
        width: 100%
    }
}

.upsells-confirmation {
    padding: .5em 0;
    background: #40b41d;
    -webkit-box-shadow: 0 -1px 0 rgba(0, 0, 0, .1) inset, 0 1px 0 rgba(0, 0, 0, .1) inset;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, .1) inset, 0 1px 0 rgba(0, 0, 0, .1) inset
}

@media only screen and (min-width: 768px) {
    .upsells-confirmation {
        padding: .8em 0
    }
}

.upsells-confirmation .container .row {
    position: relative
}

.upsells-confirmation .thankyou-ref {
    font-size: 1.142857em;
    font-size: 18px;
    line-height: 1.3;
    display: block;
    margin: 0 -.5em .4em;
    padding: 0 .5em;
    text-align: left
}

.upsells-confirmation .thankyou-ref:before {
    display: none !important
}

@media only screen and (min-width: 480px) {
    .upsells-confirmation .thankyou-ref {
        position: relative;
        padding-left: 40px
    }

    .upsells-confirmation .thankyou-ref:before {
        display: block !important
    }
}

@media only screen and (min-width: 768px) {
    .upsells-confirmation .thankyou-ref {
        font-size: 1.714286em;
        font-size: 22px
    }
}

@media only screen and (min-width: 992px) {
    .upsells-confirmation .thankyou-ref {
        font-size: 26px
    }
}

.icon-checkmark:before,
.upsell-complete-marker:before,
.upsells-confirmation .thankyou-ref:before {
    font-size: 6px;
    position: absolute;
    top: 50%;
    left: 1%;
    display: inline-block;
    width: 2.3em;
    height: 4.45em;
    margin-top: -.5625em;
    content: '';
    -webkit-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
    border: solid rgba(255, 255, 255, .95);
    border-width: 0 1.125em 1.25em 0;
    border-radius: .4em;
    background: 0 0
}

.upsells-confirmation-message {
    line-height: 1.2;
    margin: 0 auto;
    padding: 0 1em;
    color: #fff
}

@media only screen and (min-width: 480px) {
    .upsells-confirmation-message {
        padding: 0 1.5em
    }
}

@media only screen and (min-width: 768px) {
    .upsells-confirmation-message:before {
        display: block
    }
}

.upsells-intro {
    font-size: .857143em;
    line-height: 1.3
}

.upsells-intro>:last-child {
    margin: 0
}

.upsell-item-header,
.upsells-confirmation {
    color: #fff
}

.upsell-item-header {
    margin: 0;
    text-align: center;
    color: #fff;
    border: solid #3d515c;
    border-width: 0 0 1px;
    background: #41add8
}

@media only screen and (min-width: 768px) {
    .upsell-item-header {
        border-width: 0 0 4px
    }
}

@media only screen and (min-width: 992px) {
    .upsell-item-header {
        padding: 0
    }

    .upsell-item-header .upsell-category-label {
        border: 0
    }
}

.upsell-category-label {
    font-size: 1.8em;
    font-weight: 900;
    margin: 0;
    padding: .3em 0 0
}

@media only screen and (min-width: 768px) {
    .upsell-category-label {
        font-size: 2.2em
    }
}

.form-category {
    font-size: 1.2em;
    display: block;
    background: #002e3d
}

@media only screen and (min-width: 480px) {
    .form-category {
        font-size: 1em;
        display: inline-block
    }
}

.form-title {
    font-size: 1.285714em;
    line-height: 1.25;
    margin: 0;
    padding: .454545em
}

.section-upsells {
    padding: 0;
    border: solid #fff;
    border-width: 4px 0;
    background: #f7f7f7
}

.section-upsells .container {
    max-width: 100%;
    padding: 0
}

@media only screen and (min-width: 992px) {
    .section-upsells .container {
        max-width: 992px;
        padding: 0 15px
    }
}

.section-upsells .section-header {
    margin-bottom: -5px;
    color: #fff;
    background: #3d515c
}

@media only screen and (min-width: 992px) {
    .section-upsells .section-header {
        margin-bottom: -10px;
        padding-bottom: 5px;
        border-radius: 10px 10px 0 0
    }
}

.section-upsells .section-heading {
    font-size: 1.142857em;
    font-weight: 900;
    margin: 0;
    padding: .5em 1em;
    text-align: center
}

.upsell-item-wrapper {
    overflow: hidden;
    margin-bottom: 1em;
    border: solid #3d515c;
    border-width: 4px 0 1px;
    background: #ebf6fa
}

@media only screen and (min-width: 992px) {
    .upsell-item-wrapper {
        max-width: 992px;
        margin: 0 auto 5px;
        border-width: 4px;
        border-radius: 10px
    }
}

.hero-col {
    display: none
}

@media only screen and (min-width: 992px) {
    .hero-col {
        display: block;
        padding: 0 15px
    }
}

.hero-col .summary {
    line-height: 1.3;
    padding: 1em
}

.hero-col .summary>:last-child {
    margin: 0
}

@media only screen and (min-width: 992px) {
    .upsell-hero {
        width: 100%;
        height: 0;
        padding-top: 56%;
        border: 2px solid #fff;
        border-radius: .3em;
        background: transparent no-repeat 0 50%;
        background-size: cover
    }

    .upsell-hero.epos {
        background-image: url(/templates/blueline/images/eposupsell.jpg)
    }

    .upsell-hero.business-loan {
        background-image: url(/templates/blueline/images/businessloansupsell.jpg)
    }

    .upsell-hero.merchant-accounts {
        background-image: url(/templates/blueline/images/merchantaccountsupsell.jpg)
    }

    .upsell-hero.franking-machines {
        background-image: url(/templates/blueline/images/frankingupsell.jpg)
    }

    .upsell-hero.telephone-systems {
        background-image: url(/templates/blueline/images/telephonesystems.jpg)
    }

    .upsell-hero.business-energy {
        background-image: url(/templates/blueline/images/businessenergy.jpg)
    }

    .upsell-hero.vehicle-tracking {
        background-image: url(/templates/blueline/images/vehicletracking.jpg)
    }
}

.webform_form {
    margin: 0;
    padding: 1em !important
}

@media only screen and (min-width: 992px) {
    .webform_form {
        border-radius: 0 0 10px 10px
    }
}

.webform_form .form-strapline {
    font-size: 1.25em;
    margin-bottom: 0;
    color: #17a7dc
}

@media only screen and (min-width: 992px) {
    .webform_form .form_header {
        padding-top: 0;
        padding-bottom: 0
    }
}

@media only screen and (min-width: 768px) {
    .webform_form .form_pages {
        min-height: 220px
    }
}

@media only screen and (min-width: 992px) {
    .webform_form .form-page {
        padding-top: 0;
        padding-left: 0
    }
}

.webform_form .form_footer {
    display: none !important
}

.form-navigation {
    overflow: hidden;
    width: 100%;
    min-height: auto;
    margin-top: 10px
}

.cta-show-form,
.form-navigation button {
    display: block;
    float: right;
    width: 100%;
    margin: 0;
    padding: .5em .8em !important;
    text-align: center
}

@media only screen and (min-width: 992px) {

    .cta-show-form,
    .form-navigation button {
        font-size: 2em;
        float: none;
        margin: 0 auto
    }
}

.form-navigation button.navigation_previous {
    font-size: .875em;
    position: static;
    height: auto;
    padding: .3em .5em !important;
    border: 1px solid currentcolor;
    border-radius: .3em;
    background: 0 0
}

.form-navigation button.navigation_previous:hover {
    background-color: rgba(255, 255, 255, .5)
}

.form-pager-navigation {
    font-size: .1px;
    clear: both;
    overflow: hidden;
    padding: 4px 0;
    padding: .4rem 0;
    text-align: justify
}

.form-pager-navigation:after {
    display: inline-block;
    width: 100%;
    height: 0;
    content: ''
}

.form-pager-navigation [class^=page-] {
    font-size: 14px;
    font-size: 1.4rem;
    display: inline-block !important;
    margin: 0;
    vertical-align: middle
}

.form-pager-navigation .page-status {
    margin: auto 0 auto auto
}

.upsell-complete {
    font-size: 0;
    position: relative;
    width: 100% !important;
    padding: 0;
    text-align: center
}

@media only screen and (min-width: 992px) {
    .upsell-complete {
        float: right;
        width: 30%
    }
}

.upsell-complete-marker,
.upsell-complete-message {
    font-size: 1rem;
    font-size: 16px;
    line-height: 1.3;
    display: inline-block;
    float: none;
    padding: .6em 1em
}

.upsell-complete-message {
    font-size: 16px;
    font-size: 1.6rem;
    margin-bottom: .5em;
    padding: 0
}

.upsell-complete-marker {
    position: relative;
    margin: 0 1em;
    padding-left: 2.5em;
    color: #fff;
    border-radius: .25em;
    background: #16526a
}

.upsell-complete-marker:before {
    font-size: .3em;
    left: 3em;
    -webkit-box-shadow: none;
    box-shadow: none
}

.cta-enabled {
    overflow: hidden
}

.cta-show-form {
    display: none;
    float: none;
    max-width: 560px;
    margin: 0 auto
}

.cta-enabled .cta-show-form {
    display: block
}

.cta-enabled .cta-show-form+form {
    position: relative;
    z-index: -1000;
    height: 0
}

@media only screen and (min-width: 992px) {
    .cta-enabled .cta-show-form {
        display: none
    }

    .cta-enabled .cta-show-form+form {
        position: static;
        height: initial
    }
}

@media only screen and (min-width: 768px) {
    body .well {
        margin: 0 -15px;
    }

    body.broadband .well {
        background-image: url(/templates/blueline/images/broadband-hero.jpg);
        background-position: 30% 60%
    }

    body.accountants .well {
        background-image: url(/templates/blueline/images/accountants-hero.jpg);
        background-position: 30% 40%;
        background-size: cover
    }

    body.air-compressors .well {
        background-image: url(/templates/blueline/images/air-compressors-hero.jpg);
        background-position: 30% 40%;
        background-size: cover
    }

    body.payroll .well {
        background-image: url(/templates/blueline/images/payroll-services-hero.jpg);
        background-position: 30% 40%;
        background-size: cover
    }

    body.photocopiers .well {
        background-image: url(/templates/blueline/images/photocopiers-hero.jpg);
        background-position: 30% 40%;
        background-size: cover
    }

    body.telephones .well {
        background-image: url(/templates/blueline/images/telephones-hero.jpg);
        background-position: 30% 40%;
        background-size: cover
    }

    body.fuel-cards .well {
        background-image: url(/templates/blueline/images/ai-fuel-cards-hero.jpg);
        background-size: cover
    }

    body.vehicle-tracking .well {
        background-image: url(/templates/blueline/images/ai-vehicle-tracking-hero.jpg);
        background-size: cover
    }

    body.epos .well {
        background-image: url(/templates/blueline/images/epos-hero.jpg);
        background-size: cover
    }

    body.training .well {
        background-image: url(/templates/blueline/images/training-hero.jpg);
        background-size: cover
    }

    body.online-pay .well {
        background-image: url(/templates/blueline/images/online-pay.jpg);
        background-size: cover
    }
}

.form-progress-steps {
    list-style: none;
    padding: 0;
    text-align: center;
    margin: 0
}

.form-progress-steps li {
    display: inline-block;
    padding: 0 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #bdbdbd
}

.form-progress-steps li.active {
    color: #26a9da
}

.form-progress-steps li.step-completed {
    color: #000
}

.ui-widget-overlay {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    background: rgba(0, 0, 0, .5);
    z-index: 999
}

.ui-dialog {
    z-index: 1000;
    position: fixed !important;
    top: 2.5% !important;
    bottom: 2.5% !important;
    left: 2.5% !important;
    right: 2.5% !important;
    width: 95% !important;
    height: 95% !important;
    background: #fff;
    border-radius: 5px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.ui-dialog-titlebar {
    position: absolute;
    top: 0;
    right: 0
}

.ui-dialog-titlebar .ui-button {
    position: absolute;
    top: -19px;
    right: -21px;
    z-index: 1001;
    border: 0;
    padding: 0;
    outline: 0;
    background: 0 0
}

.ui-dialog-titlebar .ui-button-icon-primary {
    display: block;
    height: 44px;
    width: 44px;
    background: url(../imagesbutton_close.png) center no-repeat
}

.ui-dialog-titlebar .ui-button-text {
    display: none
}

.ui-dialog-content {
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important
}

.ui-dialog-content iframe {
    width: 100%;
    height: 100%;
    padding: 10px 0
}

.swiper-slide-visible {
    outline: 0
}

body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%
}

.modal-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.modal-footer,
.modal-header {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto
}

.modal-body {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    overflow: auto;
    -webkit-overflow-scroll: touch
}

.modal-body iframe {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 1px;
    min-width: 100%;
    height: auto
}

.ios.autofocus-enabled .swiper-wrapper {
    left: 0 !important
}

.ios.autofocus-enabled .swiper-slide {
    position: absolute;
    left: 0;
    top: 0
}

@supports ((-webkit-filter: grayscale(0)) or (filter:grayscale(0))) {
    button.navigation_finish.primary-bg-color.finish-btn-msg {
        -webkit-filter: grayscale(75%);
        filter: grayscale(75%);
        color: #e4e4e4;
        pointer-events: none;
        -webkit-transition: -webkit-filter .5s ease-out;
        transition: -webkit-filter .5s ease-out;
        transition: filter .5s ease-out;
        transition: filter .5s ease-out, -webkit-filter .5s ease-out
    }
}

.pdf-download-button {
    margin: 20px auto;
    width: 100%
}

@media (min-width: 320px) {
    .pdf-download-button {
        background-image: url(/templates/blueline/images/icon-download-pdf@2x.png);
        background-repeat: no-repeat;
        background-size: 42px;
        background-position: left center;
        padding: 10px 0 10px 20%
    }
}

@media (min-width: 500px) {
    .pdf-download-button {
        background-size: 50px;
        padding: 10px 0 10px 70px;
        width: 420px
    }
}

@media (min-width: 768px) {
    .pdf-download-button {
        padding: 0 0 0 80px;
        width: 430px
    }
}

@media (min-width: 992px) {
    .pdf-download-button {
        margin: 0
    }
}

.pdf-download-button button.download-button {
    border: 0;
    border-radius: 8px;
    background-color: #0097ee;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    padding: 20px;
    text-align: center;
    width: 100%;
    word-wrap: break-word
}

@media (min-width: 768px) {
    .pdf-download-button button.download-button {
        font-size: 22px;
        width: 340px
    }
}

[data-vwo-loader="1"] {
    opacity: 0 !important;
    -webkit-transition: opacity .5s;
    transition: opacity .5s
}

[data-vwo-loader="1"].vwo_initiated {
    opacity: 1 !important
}

html {
    background: #fff
}

html body {
    background: #fff
}

[data-formloader-container] {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border: 5px solid #3498db;
    border-radius: 50%;
    -webkit-animation: vwoBorderScale 1s infinite ease-in-out;
    animation: vwoBorderScale 1s infinite ease-in-out
}

[data-formloader-container] p {
    font-weight: 400;
    font-size: 2em;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.tcpa_wrapper {
    display: none
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #bbb
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #bbb
}

input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
    color: #bbb
}

input::placeholder,
textarea::placeholder {
    color: #bbb
}

[data-animated-label] [data-component-type=text] {
    position: relative
}

[data-animated-label] [data-component-type=text] #inner-editor,
[data-animated-label] [data-component-type=text] span {
    cursor: text
}

[data-animated-label] [data-component-type=text] .input-wrapper {
    padding: 0;
    background-color: #fff;
    border-radius: .5em;
    overflow: hidden;
    -webkit-box-shadow: 0 0 0 1px #c8c8c8;
    box-shadow: 0 0 0 1px #c8c8c8
}

[data-animated-label] [data-component-type=text] .input-wrapper input {
    -webkit-box-shadow: none;
    box-shadow: none;
    background: #fff no-repeat top 50% right .75rem;
    border: 0
}

[data-animated-label] [data-component-type=text] .input-wrapper,
[data-animated-label] [data-component-type=text] .input-wrapper:before {
    cursor: default
}

[data-animated-label] [data-component-type=text] label.component-label {
    position: absolute;
    padding-left: 0;
    color: #000;
    text-shadow: none;
    font-size: 12px;
    top: 5px !important;
    padding: 5px 0;
    left: 5.5rem;
    font-weight: lighter;
    cursor: text;
    text-align: left
}

[data-animated-label] [data-component-type=text] input {
    margin: 0 !important;
    height: auto !important;
    padding: 20px 2rem 7px 5.6rem;
    cursor: text;
    opacity: 1
}

[data-animated-label] [data-component-type=text] label .badge {
    display: none
}

[data-animated-label] [data-component-type=text].has-error .input-wrapper,
[data-animated-label] [data-component-type=text].has-success .input-wrapper {
    border: solid 2px;
    -webkit-box-shadow: none;
    box-shadow: none
}

[data-animated-label] [data-component-type=text].has-error input,
[data-animated-label] [data-component-type=text].has-success input {
    padding-right: 2.75rem !important;
    border: 0
}

[data-animated-label] [data-component-type=text].has-success .input-wrapper {
    border-color: #7ab55c
}

[data-animated-label] [data-component-type=text].has-success .input-wrapper input {
    background-image: url(../imagestick.png)
}

[data-animated-label] [data-component-type=text].has-error .input-wrapper {
    border-color: #fc2020;
    background: #fff
}

[data-animated-label] [data-component-type=text].has-error input {
    cursor: text;
    border: 0;
    background-image: url(../imagescross.png)
}

[data-animated-label] [data-component-type=text].has-error .error-message {
    color: #fc2020;
    background: #fbefee;
    padding: .625em
}

[data-animated-label] [data-component-type=text] .input-wrapper {
    cursor: text
}

[data-animated-label] [data-component-type=text] .input-wrapper:before {
    top: 15px;
    margin-left: 12px;
    position: absolute;
    width: 2.188rem;
    height: 2.188rem;
    content: "";
    display: block;
    z-index: 1
}

[data-animated-label] [data-component-type=text][data-component-subtype=fullname] .input-wrapper:before,
[data-animated-label] [data-component-type=text][data-placeholder=first_name] .input-wrapper:before,
[data-animated-label] [data-component-type=text][data-placeholder=last_name] .input-wrapper:before {
    content: url(../imagesicon-user.svg)
}

[data-animated-label] [data-component-type=text][data-component-subtype=email] .input-wrapper:before {
    content: url(../imagesicon-email.svg)
}

[data-animated-label] [data-component-type=text][data-component-subtype=email] .input-wrapper:before,
[data-animated-label] [data-component-type=text][data-placeholder=email1] .input-wrapper:before {
    content: url(../imagesicon-email.svg)
}

[data-animated-label] [data-component-type=text][data-placeholder=primary_address_street] .input-wrapper:before {
    content: url(../imagesicon-city.svg)
}

[data-animated-label] [data-component-type=text][data-component-subtype=postcode] .input-wrapper:before,
[data-animated-label] [data-component-type=text][data-placeholder=primary_address_postalcode] .input-wrapper:before {
    content: url(../imagesicon-postalcode.svg)
}

[data-animated-label] [data-component-type=text][data-component-subtype=gbpingphone] .input-wrapper:before,
[data-animated-label] [data-component-type=text][data-component-subtype=phoneInternational] .input-wrapper:before,
[data-animated-label] [data-component-type=text][data-component-subtype=phone] .input-wrapper:before,
[data-animated-label] [data-component-type=text][data-component-subtype=telephone] .input-wrapper:before,
[data-animated-label] [data-component-type=text][data-placeholder=phone_mobile] .input-wrapper:before,
[data-animated-label] [data-component-type=text][data-placeholder=phone_work] .input-wrapper:before {
    content: url(../imagesicon-phone.svg)
}

[data-animated-label] [data-component-type=text][data-placeholder=company_name] .input-wrapper:before {
    content: url(../imagesicon-company.svg)
}

button * {
    pointer-events: none
}

form [data-animated-label] .form-component.text-component[data-component-type=text] input {
    background-color: #fff;
    font-size: 1.2em
}

@media only screen and (min-width: 480px) {
    form [data-animated-label] .form-component.text-component[data-component-type=text] input {
        font-size: 1.6em
    }
}

form [data-animated-label] .form-component.text-component[data-component-type=text] input[type=email],
form [data-animated-label] .form-component.text-component[data-component-type=text] input[type=number],
form [data-animated-label] .form-component.text-component[data-component-type=text] input[type=tel],
form [data-animated-label] .form-component.text-component[data-component-type=text] input[type=text],
form [data-animated-label] .form-component.text-component[data-component-type=text] textarea {
    background-color: #fff
}

.form-page {
    -webkit-transform: translate3d(0, 0, 0)
}

#cookie-policy-bar {
    background-color: #444;
    bottom: 0;
    color: #ddd;
    font-weight: 400;
    left: 0;
    max-height: 999px;
    min-height: 30px;
    overflow: hidden;
    padding: 12px 0;
    position: fixed;
    text-align: center;
    width: 100%;
    z-index: 99999
}

@media only screen and (min-width: 768px) {
    #cookie-policy-bar {
        padding: 15px 0
    }
}

#cookie-policy-bar a {
    color: inherit;
    display: inline-block;
    text-decoration: underline
}

#cookie-policy-bar button {
    background-color: #f0f8ff;
    border: 1px solid #f0f8ff;
    border-radius: 4px;
    color: #33335f;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 1.3;
    margin: 0 15px;
    padding: 10px 30px;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    white-space: normal
}

#cookie-policy-bar button:hover {
    opacity: .9
}

.ctcc-left-side,
.ctcc-right-side {
    display: inline-block;
    font-size: 14px
}

.innerWrapper {
    position: relative
}

.validationSpinner {
    background-image: url(http:../imagestext-field-loader-s4.svg);
    background-repeat: no-repeat;
    background-position: center;
    width: 25px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 10px
}

#data-body-wrapper .checkbox-default,
#data-body-wrapper .opt-in {
    margin: 1em auto
}

#data-body-wrapper .checkbox-default *,
#data-body-wrapper .opt-in * {
    background: 0 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    font-size: 11px !important;
    padding: 0 !important;
    -webkit-transition: none !important;
    transition: none !important;
    -webkit-transform: none !important;
    transform: none !important
}

#data-body-wrapper .checkbox-default :not(.error-message),
#data-body-wrapper .opt-in :not(.error-message) {
    color: inherit !important
}

#data-body-wrapper .checkbox-default *,
#data-body-wrapper .checkbox-default :hover,
#data-body-wrapper .opt-in *,
#data-body-wrapper .opt-in :hover {
    -webkit-transition: none !important;
    transition: none !important;
    -webkit-transform: none !important;
    transform: none !important
}

#data-body-wrapper .checkbox-default .component-label,
#data-body-wrapper .opt-in .component-label {
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute;
    width: 1px
}

#data-body-wrapper .checkbox-default .group-answer,
#data-body-wrapper .opt-in .group-answer {
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    border-radius: .4em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

#data-body-wrapper .checkbox-default label,
#data-body-wrapper .opt-in label {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: calc(100% - 1.875em) !important
}

#data-body-wrapper .checkbox-default label:before,
#data-body-wrapper .opt-in label:before {
    display: none !important
}

#data-body-wrapper .checkbox-default input,
#data-body-wrapper .opt-in input {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    font-size: inherit !important;
    left: 0 !important;
    margin: 0 !important;
    position: relative !important;
    top: 1px !important;
    width: 1em
}

#data-body-wrapper .checkbox-default input:not(:checked),
#data-body-wrapper .opt-in input:not(:checked) {
    border: 1px solid #ccc !important
}

#data-body-wrapper .checkbox-default .error-message,
#data-body-wrapper .opt-in .error-message {
    padding: 0 1.875em !important
}

.tcpa_wrapper {
    padding-top: 1em;
    color: gray
}

.tcpa_wrapper label {
    font-size: 11px !important;
    text-align: justify !important
}

.tcpa_wrapper label * {
    font-size: inherit
}

body:not([data-webform-page]) #webform-container,
body:not([data-webform-page]) #webform-section {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important
}

#webform-container .marketing-consent-opt-in-wrapper,
#webform-container .marketing-consent-opt-out-wrapper,
#webform-section .marketing-consent-opt-in-wrapper,
#webform-section .marketing-consent-opt-out-wrapper {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-flex: wrap !important;
    -ms-flex: wrap !important;
    flex: wrap !important;
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    -webkit-box-align: baseline !important;
    -ms-flex-align: baseline !important;
    align-items: baseline !important;
    border: solid #ccc !important;
    border-width: 1px 0 0 !important;
    padding: .875em .5em !important;
    font-size: 11px !important;
    color: #777 !important;
    -webkit-box-pack: start !important;
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    margin: auto 0 0 !important;
    line-height: 1.2
}

#webform-container .marketing-consent-opt-in-wrapper label,
#webform-container .marketing-consent-opt-out-wrapper label,
#webform-section .marketing-consent-opt-in-wrapper label,
#webform-section .marketing-consent-opt-out-wrapper label {
    font-weight: 400 !important;
    margin: 0 1.5em 0 .875em !important;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

#webform-container .marketing-consent-opt-in-checkbox,
#webform-container .marketing-consent-opt-out-checkbox,
#webform-section .marketing-consent-opt-in-checkbox,
#webform-section .marketing-consent-opt-out-checkbox {
    margin: 0 !important
}

#webform-container .marketing-consent-opt-in-submit,
#webform-container .marketing-consent-opt-out-submit,
#webform-section .marketing-consent-opt-in-submit,
#webform-section .marketing-consent-opt-out-submit {
    margin: 0 0 0 auto !important;
    background: 0 0 !important;
    color: currentcolor !important;
    padding: .25em .5em !important;
    border-color: currentColor !important;
    -ms-flex-item-align: center;
    align-self: center;
    max-width: 130px !important;
    white-space: normal !important
}

@media only screen and (max-width: 480px) {

    #webform-container .marketing-consent-opt-in-wrapper,
    #webform-container .marketing-consent-opt-out-wrapper {
        -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important
    }

    #webform-container .marketing-consent-opt-in-wrapper label,
    #webform-container .marketing-consent-opt-out-wrapper label {
        margin: auto !important;
        -ms-flex-preferred-size: 100% !important;
        flex-basis: 100% !important;
        padding-left: 1.5em
    }

    #webform-container .marketing-consent-opt-in-checkbox,
    #webform-container .marketing-consent-opt-out-checkbox {
        position: absolute
    }

    #webform-container .marketing-consent-opt-in-submit,
    #webform-container .marketing-consent-opt-out-submit {
        margin: 1em auto 0 !important
    }
}

#webform-referer-confirmation-gdpr {
    max-width: 750px;
    width: 100%;
    margin: 0 auto !important;
    overflow: hidden;
    color: #444;
    font-size: 16px !important;
    text-align: left;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch
}

#webform-referer-confirmation-gdpr * {
    margin-top: 0;
    margin-bottom: 1em;
    text-align: inherit;
    font-size: inherit
}

#webform-referer-confirmation-gdpr .confirmation-title {
    text-shadow: none;
    font-weight: 700;
    font-size: 1.375em;
    line-height: inherit;
    color: inherit
}

#webform-referer-confirmation-gdpr h2,
#webform-referer-confirmation-gdpr h3,
#webform-referer-confirmation-gdpr h4 {
    margin-bottom: .7em
}

#webform-referer-confirmation-gdpr ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: steps
}

#webform-referer-confirmation-gdpr ol li {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline
}

#webform-referer-confirmation-gdpr ol li:last-child {
    margin-bottom: 0
}

#webform-referer-confirmation-gdpr ol li:before {
    content: counter(steps);
    counter-increment: steps;
    width: 25px;
    text-align: center;
    height: 25px;
    line-height: 25px;
    margin-right: .5em;
    border-radius: 50%;
    font-family: sans-serif;
    font-size: .875em;
    border: 1px solid #999;
    display: block;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto
}

@media only screen and (min-width: 568px) {
    #webform-referer-confirmation-gdpr ol li:before {
        position: absolute;
        right: 100%;
        margin-right: .9375em
    }
}

@media only screen and (max-width: 360px) {
    #webform-referer-confirmation-gdpr ol li:before {
        display: none;
        visibility: hidden
    }
}

#webform-referer-confirmation-gdpr .ref {
    padding: .125em .5em;
    border-radius: 5px;
    font-weight: 700;
    display: inline-block;
    border: 1px solid #ccc;
    background: #eee;
    margin-bottom: 0
}

#webform-referer-confirmation-gdpr .confirmation-message {
    padding: calc(15px + 1vw);
    font-size: inherit !important
}

@media only screen and (min-width: 568px) {
    #webform-referer-confirmation-gdpr .confirmation-message {
        padding-left: 3.125em
    }
}

#webform-referer-confirmation-gdpr .confirmation-message>* {
    line-height: 1.4
}

[data-webform-layout=submission] #webform-referer-confirmation-gdpr .marketing-consent-opt-out-wrapper {
    color: #999 !important;
    line-height: 1.3;
    border: 0 !important;
    padding: 1em !important;
    font-size: 12px !important
}

[data-webform-layout=submission] #webform-referer-confirmation-gdpr .marketing-consent-opt-out-wrapper>* {
    color: inherit !important;
    font-size: inherit !important
}

.tcpa_wrapper label {
    color: gray
}

[data-webform-layout=submission] #webform-container,
[data-webform-layout=submission] .thankyou {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

[data-webform-layout=submission] .thankyou {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto
}

.bbackground {
    background-color: #3fadd7;
}

@media(min-width: 750px) {
    .bbackground {
        margin-bottom: 120px;
    }
}

#finish.disabled img {
    display: block !important;
    margin: auto;
}

#finish.disabled span {
    display: none;
}

#finish.disabled {
    background-color: #aa3636;
}

.powered img {
    max-width: 220px;
}

.powered {
    text-align: center;
    gap: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 15px;
    flex-direction: column;
}

.powered span {
    color: black;
    font-size: 12px;
}

.powered img {
    max-width: 160px;
}

.header__checkatrade {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding: 5px 15px;
    float: right;
    margin-top: 10px;
}

.header_logo {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    /* keeps existing behaviour */
}

.header__checkatrade {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    padding: 5px 0;
    float: none;
    /* remove the old float */
    margin-top: 0;
    /* reset old margin */
    white-space: nowrap;
}

.header__checkatrade span {
    font-size: 10px;
    color: #9c9fa6;
    white-space: nowrap;
    text-align: right;
}

.header__checkatrade img {
    height: 20px;
    width: auto;
}

/* Always visible now — commented out mobile-only media query
@media (max-width: 996px) {
    .header__checkatrade {
        display: flex;
    }
}*/
@media (max-width:900px) {
    .container {
        width: 100%;
        max-width: 100%;
        padding: 0 20px;
    }

    #webform-container {
        margin-bottom: 25px;
    }
}

.padlock {
    width: 15px;
    height: 15px;
    display: inline-block;
    background: url(../images/padlock.png) no-repeat 0 1px
}



.navigation {
    display: flex;
    gap: 10px;
}

button#previous {
    position: relative;
    order: 1;
    color: rgb(0, 0, 0);
    background-color: rgb(237, 237, 237);
    border-radius: 6px;
    min-width: 55px !important;
    padding: 0;
    margin: 0;
    background-image: unset;
}

button#continue,
button#finish {
    order: 2;
}

button#previous span {
    font-size: 0;
}

button#previous svg {
    width: 23px;
}

.navigation_finish,
.navigation_next,
.navigation_start {
    height: 55px !important;
}

span.thirdary-text-color {
    margin: 0px;
    line-height: 1.5;
    text-align: center;
    color: rgb(0, 0, 0);
    /* font-family: "Be Vietnam Pro", sans-serif; */
    letter-spacing: inherit;
    font-size: 16px;
    font-weight: 700;
}

.checkbox-group .group-answer label,
.radio-group .group-answer label {
    font-size: 15px;
    font-weight: 700;
}

.checkbox-group .group-answer label,
.radio-group .group-answer label {
    min-height: 48px;
    display: flex;
    align-items: center;
    background: white;
    box-shadow: unset !important;
    border: unset;
    color: black !important;
    padding-left: 47px;
}

.checkbox-group .group-answer,
.radio-group .group-answer {
    border: 1px solid #0000004d;
    padding: 0;
    border-radius: 6px;
}

.group-answer.radio.selected {
    border-color: #ef5023;
}

.checkbox-group .group-answer label:hover,
.radio-group .group-answer label:hover {
    transform: unset !important;
}

.checkbox-group .group-answer.selected label,
.radio-group .group-answer.selected label {
    background: #ef50231f;
}

button#previous:hover {
    background-color: #e5e0e0;
}

button#start,
#continue,
#finish {
    border-radius: 6px;
    box-shadow: rgba(0, 0, 0, 0.25) 1px 2px 5px 1px;

    &:hover {
        background-color: #c9480c;
        border-color: #c9480c;
    }
}

/* Postcode and Email Icon Styling */
.postcode-input-wrapper,
.email-input-wrapper {
    position: relative;
}

.input-wrapper .input-icon,
.input-wrapper .input-icon {
    position: absolute;
    left: 9px;
    top: 13px;
    width: 20px;
    height: 20px;
    stroke: #000000;
    z-index: 10;
    pointer-events: none;
}

.postcode-input-wrapper input.text,
.email-input-wrapper input.text {
    padding-left: 40px !important;

}

.input-wrapper input.text {
    min-height: 48px;
    font-size: 15px;
    font-weight: 700;
    color: black !important;
    padding-right: 40px;
    padding-left: 15px;
}

.postcode-input-wrapper input.text:hover,
.email-input-wrapper input.text:hover,
.checkbox-group .group-answer:hover,
.radio-group .group-answer:hover,
.isOk input:hover,
.input-wrapper input.text:hover {
    border-color: #c9480c !important;
}

.input-icon-wrapper:focus,
.isOk input:focus,
.input-wrapper input.text:focus {
    outline: 1px solid #c9480c !important;
    border-color: #c9480c !important;

}

.input-wrapper.has-error svg {
    stroke: red;
}

.input-wrapper svg,
.input-icon-wrapper:focus+.error-message+svg {
    stroke: #c9480c;
}

.isOk input {
    border: 1px solid #92c439 !important;
}


.isOk input+.error-message+svg {
    stroke: #92c439 !important;
}

.small-text {
    font-size: 14px;
    font-weight: normal;
    line-height: 15px;
    width: 100%;
    display: block;
    text-align: center;
    margin: 10px 0 20px 0;
}