/******************************************************************************
 *
 *  Styling unique for the portals
 *
 ******************************************************************************/

/* Misc -------------------------------------------- */
/* PSIM form links */
.mno-form-link {
    background-color: transparent;
    border-width: 0;
    padding: 0;
}

.relative {
    position: relative;
}

/* Goto navigation */
.nav-goto {
    height: 26px;
}

.spacedown5 {
    margin-bottom: 5px;
}

/* Used for preprod elements only, to make them less visible */
.preprod {
    color: #acacac;
    font-size: 10px;
    text-transform: uppercase;
}

.preprod:hover {
    color: #222;
}

.page-container {
    margin: 30px 0; /* Wrapper for main page content (between top and bottom) */
}

.page-title-container {
    margin-top: 50px;
}

/* Footer */
.page-footer, #push {
    margin-top: 20px;
    height: 121px; /* #push must be the same height as .page-footer */
}

.page-footer {
    border-top: 1px solid gray;
}

.page-footer ul {
    float: left;
    list-style-type: none;
}

.page-footer ul li {
    float: left;
    margin: 0 25px 0 0;
}

.page-footer ul li a {
    color: gray;
    font-size: 80%;
    font-weight: bold;
}

.page-footer .copyright {
    text-transform: uppercase;
    font-weight: bold;
    padding-top: 10px;
}

.app-image {
    max-width: 210px;
}

/* App image used on last page of setup flows */

/* Target screens with high pixel ration (like retina) - used for subscription images */
.high-res-only {
    display: none;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (   min--moz-device-pixel-ratio: 2), only screen and (        min-device-pixel-ratio: 2), only screen and (                -webkit-min-device-pixel-ratio: 2), only screen and (                min-resolution: 192dpi), only screen and (                min-resolution: 2dppx) {
    .high-res-only {
        display: block;
    }

    .high-res-hide {
        display: none;
    }
}

/* Helper classes -------------------------------------------- */

.break-word {
    -ms-word-break: break-all;

    /* Be VERY careful with this, breaks normal words wh_erever, use for email/URL */
    word-break: break-all;

    /* Non standard for webkit */
    word-break: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

/* Margin */
.m0 {
    margin: 0 !important;
}

.mt0 {
    margin-top: 0 !important;
}

.mr0 {
    margin-right: 0 !important;
}

.mb0 {
    margin-bottom: 0 !important;
}

.ml0 {
    margin-left: 0 !important;
}

.m5 {
    margin: 5px !important;
}

.mt5 {
    margin-top: 5px !important;
}

.mr5 {
    margin-right: 5px !important;
}

.mb5 {
    margin-bottom: 5px !important;
}

.ml5 {
    margin-left: 5px !important;
}

.m10 {
    margin: 10px !important;
}

.mt10 {
    margin-top: 10px !important;
}

.mr10 {
    margin-right: 10px !important;
}

.mb10 {
    margin-bottom: 10px !important;
}

.ml10 {
    margin-left: 10px !important;
}

.m15 {
    margin: 15px !important;
}

.mt15 {
    margin-top: 15px !important;
}

.mr15 {
    margin-right: 15px !important;
}

.mb15 {
    margin-bottom: 15px !important;
}

.ml15 {
    margin-left: 15px !important;
}

.m20 {
    margin: 20px !important;
}

.mt20 {
    margin-top: 20px !important;
}

.mr20 {
    margin-right: 20px !important;
}

.mb20 {
    margin-bottom: 20px !important;
}

.ml20 {
    margin-left: 20px !important;
}

.m30 {
    margin: 30px !important;
}

.mt30 {
    margin-top: 30px !important;
}

.mr30 {
    margin-right: 30px !important;
}

.mb30 {
    margin-bottom: 30px !important;
}

.ml30 {
    margin-left: 30px !important;
}

.m40 {
    margin: 40px !important;
}

.mt40 {
    margin-top: 40px !important;
}

.mr40 {
    margin-right: 40px !important;
}

.mb40 {
    margin-bottom: 40px !important;
}

.ml40 {
    margin-left: 40px !important;
}

/* Border */
.bottom-border {
    border-bottom: 1px;
    border-style: double;
    border-top: none;
    border-left: none;
    border-right: none;
}

/* Padding */
.p0 {
    padding: 0 !important;
}

.pt0 {
    padding-top: 0 !important;
}

.pr0 {
    padding-right: 0 !important;
}

.pb0 {
    padding-bottom: 0 !important;
}

.pl0 {
    padding-left: 0 !important;
}

.p10 {
    padding: 10px !important;
}

.pt10 {
    padding-top: 10px !important;
}

.pr10 {
    padding-right: 10px !important;
}

.pb10 {
    padding-bottom: 10px !important;
}

.pl10 {
    padding-left: 10px !important;
}

.p15 {
    padding: 15px !important;
}

.pt15 {
    padding-top: 15px !important;
}

.pr15 {
    padding-right: 15px !important;
}

.pb15 {
    padding-bottom: 15px !important;
}

.pl15 {
    padding-left: 15px !important;
}

.p20 {
    padding: 20px !important;
}

.pt20 {
    padding-top: 20px !important;
}

.pr20 {
    padding-right: 20px !important;
}

.pb20 {
    padding-bottom: 20px !important;
}

.pl20 {
    padding-left: 20px !important;
}

.lineheight1-3 {
    line-height: 1.3;
}

.w100percent {
    width: 100% !important;
}

.clear {
    clear: both;
}

/* Clear-fix */

/* Hide responsive only elements */
.mob, .tab {
    display: none !important;
}

.mob-only {
    display: none !important;
}

/* Show for mobile only */

/* Table behaviour, used to align content */
.table {
    display: table;
    width: 100% !important;
}

.table-cell {
    display: table-cell;
    float: none !important;
}

.valign-middle {
    vertical-align: middle;
}

/* Add both if you want to animate the opacity */
.visibility-animate {
    opacity: 1;
    transition: opacity .25s ease-in;
    visibility: visible;
}

.visibility-hidden {
    opacity: 0;
    visibility: hidden;
}

/* Icons -------------------------------------------- */

.icon-12 {
    height: 12px;
    width: 12px;
}

.icon-12.icon-info:before {
    content: '\f05a';
    font-family: FontAwesome, sans-serif;
    font-size: 14px;
}

.icon-24-inline {
    position: relative;
    line-height: 24px;
}

.icon-24-inline:after {
    content: '';
    height: 24px;
    position: absolute;
    width: 24px;
    left: -30px;
}

.icon-24-inline.icon-loader {
    margin-left: 27px;
}

.icon-24-inline.icon-loader:after {
    background: transparent url('../images/spinner24.gif');
}

.icon-checkmark {
    background: url('../images/icon-checkmark.png') 0 0;
    display: inline-block;
    width: 14px;
    height: 11px;
}

.icon-12.icon-refresh:before {
    content: '\f021';
    font-family: FontAwesome, sans-serif;
    font-size: 14px;
}

.icon-12.icon-subscribed:before {
    content: '\f058';
    color: #309e1b;
    font-family: FontAwesome, sans-serif;
    font-size: 14px;
}

.icon-check-circle {
    color: #309e1b;
    font-family: FontAwesome, sans-serif;
    font-size: 16px;
}

.icon-check-circle:before {
    content: '\f058';
}

/* Forms -------------------------------------------- */

/* Wrapper for inputs + instructions + error msg */
.input-wrapper {
    margin-bottom: 15px;
}

.input-wrapper-wrapper {
    max-width: 330px;
}

/* Small instructions text below inputs */
.input-instr {
    display: block;
    font-size: 11px;
    margin-top: 7px;
    line-height: 15px;
}

/* Text inline next to label + input-field */
.input-inline-text {
    margin-top: 30px;
    float: left;
}

/* Text inline (with label above) next to input-field  */
.input-inline-text-with-label {
    margin-top: 11px;
    float: left;
}

/* Label next to checkbox */
.checkbox-label {
    padding: 2px 0 0 25px;
}

/* Asterisk next to label of required input */
.required {
    color: red;
}

/* Errors */
.checkbox-error-container label {
    padding-left: 25px;
}

/* Select dropdowns next to input fields
 * Used for phone prefix + number and title + firstname */
.select-and-input-left, .select-and-input-right {
    padding: 0;
}

.select-and-input-left {
    float: left;
    padding-right: 10px;
    width: 90px;
}

.select-and-input-right {
    float: none;
    margin-left: 90px;
}

/* Labels that can be two rows long without breaking alignment (i.e. keep same height) */
label.allow-two-rows {
    display: table-cell;
    height: 32px;
    vertical-align: middle;
}

/* Buttons -------------------------------------------- */

.button.small.option-button {
    font-size: 0;
    height: 80px;
    width: 280px;
    padding: 0;
}

.button.small.option-button .text-small {
    color: #8a8a8a;
    display: inline-block;
    font-size: 12px;
    margin-bottom: 8px;
    text-transform: none;
    width: 100%;
}

.button.small.option-button .text-large {
    font-size: 18px;
}

/* Vertical align center fix */
.button.small.option-button:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -.25em;
}

.button.small.option-button .centered {
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    display: inline-block;
    vertical-align: middle;
}

/* Buttons shown inline with input-field */
.button.small.button-inline {
    padding-top: 7px;
    padding-bottom: 7px;
}

/* Captcha component -------------------------------------------- */
.captcha-img-wrapper {
    background-color: #fff;
    border: 1px solid #ccc;
    margin-bottom: 5px;
    text-align: center;
}

.captcha-input-wrapper {
    float: left;
    padding-right: 47px; /* .captcha-btn-wrapper width + 5px margin */
    width: 100%;
}

.captcha-btn-wrapper {
    margin-left: -42px;
}

/* Google's ReCAPTCHA component -------------------------------------------- */
/* TODO: Remove this styling when we no longer use Googles ReCaptcha */
#recaptcha_area, #recaptcha_table {
    height: 126px;
    overflow: hidden;
}

#recaptcha_area input#recaptcha_response_field {
    display: inline-block;
    width: 153px !important;
    position: relative !important;
    bottom: 7px !important;
    padding: 0 !important;
    margin: 15px 0 0 0 !important;
    font-size: 10pt;
}

/* Chrome incognito mode fix */
#recaptcha_table td {
    line-height: 0 !important;
}

#recaptcha_privacy {
    display: none;
}

/**/
input.timeTextBox:focus {
    outline-width: 0;
}

input.antiAutoFill {
    visibility: hidden;
    height: 0;
    padding: 0;
    margin: 0;
    border: 0;
}

.reveal-modal-bg {
    background: rgba(0, 0, 0, 1);
}

.secure-mode-modal.reveal-modal p {
    margin-bottom: 15px;
}

.secure-mode-modal .editableBox.select2 {
    width: 70px;
    height: 32px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.secure-mode-modal input.timeTextBox {
    width: 36px;
    display: inline;
    margin: 0 32px 0 -68px;
    border: none;
    height: 28px;
    padding-top: 3px;
    position: relative;
}

h2.nobreak-inline-header,
h3.nobreak-inline-header,
h4.nobreak-inline-header {
    display: inline;
    white-space: nowrap;
}

/* ----- Smartphone styling */
@media only screen and (max-width: 767px) {
    #recaptcha_area, #recaptcha_table {
        height: 126px;
        overflow: hidden;
    }

    #change-pin-form .row .five.columns.end.tab50.mob100 {
        margin-top: 10px;
    }

    #security-form .row .five.columns.end.tab50.mob100 {
        margin-top: 10px;
    }

    #security-form .row .four.columns.end.tab50.mob100 {
        margin-top: 10px;
    }

    .legal-adjust-top {
        top: 20px;
        position: relative;
    }

    .legal-adjust-bottom {
        position: absolute;
        bottom: 0px;
    }

    .reveal-modal h2 {
        padding-top: inherit !important;
    }
}

@media only screen and (max-width: 348px) {
    #recaptcha_area {
        position: relative;
        margin: auto;
    }

    .reveal-modal .input-wrapper .inline-label {
        text-align: -webkit-left !important;
    }

    #recaptcha-container {
        margin-left: -15px !important;
        margin-right: -15px !important;
    }

}

/* Data-box -------------------------------------------- */

.nine.column.tab100 .journeys-enabled-confirmed-show.vehicle-stolen-hide .row.text-center {
    padding-left: 7px;
    padding-right: 7px;
}

.data-box-wrapper {
    padding-left: 7px;
    padding-right: 7px;
}

.data-box-wrapper.first {
    padding: 0 7px 0 15px;
}

.data-box-wrapper.last {
    padding: 0 15px 0 7px;
}

.data-box-wrapper.fiveBoxesInLine {
    width: 20%;
    padding-bottom: 5px;
}

.data-box-wrapper.fourBoxesInLine {
    width: 25%;
    padding-bottom: 5px;
}

.data-box-wrapper.threeBoxesInLine {
    width: 33.33333%;
    padding-bottom: 5px;
}

.data-box-wrapper.lastBoxFloat {
    float: left !important;
}

.data-box {
    margin: 0;
}

.data-box h3 {
    margin-bottom: 6px;
}

.data-box h2 {
    margin-bottom: 6px;
}

/* Vertically center title even if it's on two rows */
.data-box .center-title {
    height: 28px;
    display: table;
    margin-top: -7px;
    width: 100%;
    margin-bottom: -6px;
}

.data-box .center-title h3 {
    display: table-cell;
    vertical-align: middle;
}

/* Thatcham certificate -------------------------------------------- */

.thatcham-certificate {
    padding: 40px 100px;
}

.thatcham-certificate .logos {
    margin-bottom: 40px;
    text-align: center;
}

.thatcham-certificate .logos img {
    width: 150px;
    height: 81px;
    margin: 0 20px;
}

.thatcham-certificate h1 {
    text-align: center;
}

.thatcham-certificate ul.details-list {
    list-style-type: none;
    margin: 40px 0;
}

.thatcham-certificate .signature-box {
    padding: 10px;
    position: relative;
    margin-bottom: 20px;
    width: 330px;
    height: 60px;
}

.thatcham-certificate .signature-box img {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

.thatcham-certificate .thatcham-logo {
    margin-top: 40px;
    text-align: center;
}

.thatcham-certificate .thatcham-logo img {
    width: 155px;
    height: 72px;
}

/* Map -------------------------------------------- */

.map {
    height: 500px;
    margin: 0;
}

.map img {
    max-width: none;
}

.map.amap-container {
    height: 500px;
}

/* Step indicator -------------------------------------------- */

.five-steps {
    width: 20%;
}

.five-steps-small-text {
    font-size: 7px !important;
}

.five-steps-medium-text {
    font-size: 9px !important;
}

.four-steps {
    font-size: 9px !important;
    width: 25%;
}

.step-indicator .step .step-descr.three-steps {
    font-size: 12px;
}

.step-indicator {
    display: table;
    table-layout: fixed;
    margin: 20px 0;
    width: 100%;
}

.step-indicator .step {
    background-color: gray;
    display: table-cell;
    padding: 10px;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    border-left: 1px solid #fff;
}

.step-indicator .step:first-child {
    border-left: none;
}

.step-indicator .step.active {
    background-color: black;
}

.step-indicator .step .inner {
    display: table;
    margin: 0 auto;
}

.step-indicator .step .step-no {
    margin-right: 10px;
    vertical-align: middle;
}

.step-indicator .step .step-descr {
    padding-left: 5px;
    vertical-align: middle;
}

.step-indicator .step .step-no, .step-indicator .step .step-descr {
    padding-left: 0px;
    display: table-cell;
}

.step-indicator-substeps {
    background-color: #fff;
    border: 1px solid gray;
    border-top: 0;
    display: table;
    table-layout: fixed;
    margin: -21px 0 20px 0;
    width: 100%;
    border-spacing: 1px 0;
}

.step-indicator-substeps .step {
    display: table-cell;
    padding: 20px 10px;
    color: #bcbec0;
    text-align: center;
    text-transform: uppercase;
    font-family: lr-bold, arial, sans-serif;
    vertical-align: middle;
}

.step-indicator-substeps .step.active {
    color: gray;
}

.step-indicator-substeps .step .inner {
    position: relative;
}

.step-indicator-substeps .step .inner:before {
    font-family: FontAwesome, sans-serif;
    content: '\f105';
    font-size: 18px;
    font-weight: bold;
    line-height: 12px;
    position: absolute;
    left: -8px;
    top: 50%;
    margin-top: -6px;
}

.step-indicator-substeps .step:first-child .inner:before {
    content: '';
}

/* Login box ----------------------------------------- */
.login-box {
    background: white;
    padding: 20px;
    margin-top: 30px;
    margin-left: 4%;
    margin-right: 4%;
    position: relative;
}

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

    .login-box {
        display: inline-block;
    }

    .login-box .row {
        max-width: 300px;
    }

    #login-form .row:last-child {
        max-width: none;
    }

    #btn-yes {
        margin-bottom: 10px;
    }

    .button.small.close-reveal-modal.mr5,
    .button.small.reveal-modal-button.mr5 {
        margin-bottom: 10px;
        /*width: 90%;*/
        margin-right: 5px !important;
    }

    #btn-confirm-remove {
        /*width: 90%;*/
    }
}

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

    .button.small.right.next.ml15.mt5 {
        margin-left: 0px !important;
    }

    .small.button.btn-cancel.mr10 {
        margin-bottom: 5px;
        width: 90%;
        margin-right: 0px !important;
    }

    .button-bar .small.button.btn-ok {
        width: 90%;
    }

    #btn-yes {
        margin-bottom: 10px;
    }

    .button.small.close-reveal-modal.mr5,
    .button.small.reveal-modal-button.mr5 {
        margin-bottom: 10px;
        margin-right: 0px !important;
    }

    #btn-confirm-remove {
        width: 90%;
    }
}

/* Loader -------------------------------------------- */

body.loading {
    overflow-y: scroll;
    position: fixed;
    width: 100%;
    height: 100%;
}

/* Disable scrolling when loader shown */
.loader-wrapper {
    visibility: hidden;
}

.loader-wrapper .bg {
    background-color: #fff;
    display: block;
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 1000;
    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=40)';
    -moz-opacity: .4;
    opacity: .4;
}

.loader-wrapper .loader {
    background-color: #fff;
    border: 1px solid gray;
    width: 240px;
    position: absolute;
    padding: 20px 20px 15px 20px;
    top: 40%;
    left: 50%;
    margin-top: -50px;
    margin-left: -120px;
    text-align: center;
    z-index: 1001;
}

.loader-wrapper .loader p {
    margin: 5px 0 0 0;
}

/* Terms and conditions -------------------------------------------- */
.german-tac-checkbox {
    background-color: #eee;
    padding-top: 5px;
    padding-bottom: 5px;
}

.legal-docs-padding {
    padding-left: 7px !important;
    padding-right: 7px !important;
}

.t-c ol {
    counter-reset: item;
    font-weight: normal;
    position: relative;
    padding-left: 20px;
}

.t-c ol ol {
    margin-left: -20px;
}

.t-c ol li {
    display: block;
    margin-top: 20px;
}

.t-c ol li:before {
    content: counters(item, '.') ' ';
    counter-increment: item;
    position: absolute;
    left: -20px;
    width: 40px;
}

.t-c ol ol ol, .t-c ol ol ol ol {
    margin-left: 20px;
}

.t-c ol ol ol li:before {
    content: '(' counter(item, lower-latin) ')';
    text-align: center;
}

/* Third level lists should be "numbered" with latin chars */
.t-c ol ol ol ol li:before {
    content: '(' counter(item, lower-roman) ')';
    text-align: center;
}

/* Fourth level lists should be "numbered" with roman chars */
.t-c > ol > li {
    font-weight: bold;
}

/* Main headlines in the T&C should be bold */
.centered-image {
    margin: 0 auto;
    display: block;
}

.transition-hidden {
    opacity: 0.0;
    transition: all 0.25s ease-out;
    -webkit-transition: all 0.25s ease-out;
}

.transition-visible {
    opacity: 1.0;
    transition: all 0.25s ease-in;
    -webkit-transition: all 0.25s ease-in;
}

#legal-doc-content {
    padding: 30px;
    position: relative;
    min-height: 80px
}

#legal-doc-content > #error-wrapper {
    position: absolute;
    top: 0;
    left: 0;
}

#legal-doc-content > #loader-wrapper {
    position: absolute;
    top: 15px;
    left: calc(50% - 24px);
}

/* Privacy policy -------------------------------------------- */

.p-p ul {
    margin-left: 20px;
}

.p-p ul li {
    margin-top: 20px;
    padding-left: 20px;
}

/* Count down timer -------------------------------------------- */

.count-down-timer {
    display: inline-block;
    float: left;
    font-size: 17px;
    font-weight: bold;
    margin-right: 5px;
}

.count-down-timer-text {
    display: inline;
    line-height: 17px;
}

/* Show / hide content based on vehicle status -------------------------------------------- */

.vehicle-status .edit-details-show, .vehicle-status .service-mode-show, .vehicle-status .transport-mode-show, .vehicle-status .vehicle-stolen-show, .vehicle-status .service-mode-confirmed-show, .vehicle-status .transport-mode-confirmed-show, .vehicle-status .journeys-enabled-confirmed-show {
    display: none !important;
}

/* Show when setting in specific mode */
.vehicle-status.edit-details .edit-details-show {
    display: block !important;
}

.vehicle-status.serviceMode .service-mode-show {
    display: block !important;
}

.vehicle-status.transportMode .transport-mode-show {
    display: block !important;
}

.vehicle-status.vehicleStolen .vehicle-stolen-show {
    display: block !important;
}

/* Hide when setting in specific mode */
.vehicle-status.edit-details .edit-details-hide {
    display: none !important;
}

.vehicle-status.serviceMode .service-mode-hide {
    display: none !important;
}

.vehicle-status.transportMode .transport-mode-hide {
    display: none !important;
}

.vehicle-status.vehicleStolen .vehicle-stolen-hide {
    display: none !important;
}

/* Show when specific mode is confirmed */
.vehicle-status.serviceMode.confirmed .service-mode-confirmed-show {
    display: block !important;
}

.vehicle-status.transportMode.confirmed .transport-mode-confirmed-show {
    display: block !important;
}

.vehicle-status.enableJourneys.enableJourneysConfirmed .journeys-enabled-confirmed-show {
    display: block !important;
}

/* Hide when specific mode is confirmed */
.vehicle-status.enableJourneys.enableJourneysConfirmed .journeys-enabled-confirmed-hide {
    display: none !important;
}

/* Misc content ----------------------------------------------- */
#all-journeys-link {
    color: #fff;
    font-size: 11px;
    letter-spacing: 3px;
}

.dashboardBoxFontSizeMedium {
    font-size: 10px;
}

.dashboardBoxFontSizeSmall {
    font-size: 8px;
}

.subnav.displayMyServicesPage {
    height: 41px;
    -webkit-box-shadow: 0 0px 0px 0px #666;
    -moz-box-shadow: 0 0px 0px 0px #666;
    box-shadow: 0 0px 0px 0px #666;
}

.page-title-container {
    margin-top: 10px;
    padding-bottom: 5px;
    text-align: center;
    margin-left: 10px;
}

.title-container h2,
.title-container h5 {
    display: inline;
    margin: 0;
    color: #7d7d7d;
    font-size: 12px;
    line-height: 15px;
    letter-spacing: 1px;
    font-family: "jaguarregular", Arial, Helvetica, sans-serif;
    font-weight: bold;
}

.header-name-details {
    position: relative;
    float: right;
    color: #fff;
    right: 10px;
}

.page-container {
    margin-top: 20px;
    margin-bottom: 0px;
}

.popover {
    z-index: 1;
}

#form-wrapper .row .twelve.column .light.text-uppercase {
    padding-top: 30px;
}

.tight.text-uppercase {
    padding-top: 10px;
}

.login-text-medium {
    margin: 12px 0;
}

.light.text-uppercase.mb10 {
    font-weight: bold;
}

#btn-search {
    margin-left: 0px;
}

#setup-content .twelve.columns .row .columns .alert-box.secondary {
    border: 3px solid #4e4e4e;
    background: #f2f2f2;
    margin-bottom: 0px;
}

/* Modal */
#modal-marketing-preferences p {
    text-align: left;
}

/* Alert box */

.login-box .row .four.columns.end .alert-box.secondary h4 {
    margin-left: 0px;
}

.login-box .row .four.columns.end .alert-box.success h4 {
    margin-left: 0px;
}

.alert-box.secondary h4 {
    margin-left: 20px;
}

.alert-box.success h4 {
    margin-left: 20px;
}

.alert-box.secondary div {
    margin-left: 20px;
}

.alert-box.success div {
    margin-left: 20px;
}

#emailContainer {
    margin-left: 0px;
}

.columns .alert-box.alert h4:before {
    content: '\f071';
    font-family: FontAwesome, sans-serif;
    left: -10px;
    position: relative;
    font-size: 20px;
}

.columns .alert-box.alert h4 {
    content: '\f071';
    font-family: FontAwesome, sans-serif;
    left: 10px;
    position: relative;
    color: #e60032;
    font-weight: bold;
}

.columns .alert-box.alert {
    border: 0px solid #f2f2f2;
    background: transparent;
    margin-left: 0px;
    padding-left: 0px;
}

.columns .alert-box.alert p {
    color: #e60032;
    font-weight: bold;
}

#change-email-form .alert-box.alert {
    color: #e60032;
}

.page-container {
    padding-bottom: 157px;
}

/*Login box content*/

.login-box .twelve.columns.mb15 {
    display: inline-flex;
}

.login-box {
    background: white;
}

.login.input-inline-text {
    margin-top: 5px;
    margin-bottom: 10px;
    padding-left: 6px;
}

.login.input-inline-text .heavy {
    color: #000;
}

.login-box .four {
    width: 100%;
}

/* Push */
#page-wrapper {
    position: relative;
    margin: 0;
    padding: 0;
    min-height: 100%;
}

#push {
    margin-top: 0px;
    position: relative;
    z-index: -1;
}

@media screen and (min-width: 480px) {
    #push {
        height: 1px;
    }
}

/*Footer Content*/

.page-footer.copyright-footer.hide-on-print {
    height: auto;
    min-height: 125px;
}

.page-footer.copyright-footer {
    height: 130px;
    width: 100%;
    bottom: 0px;
    position: absolute;
}

.page-footer .privacy-links ul {
    position: relative;
    left: 0;
}

.page-footer .share-links {
    margin: 15px auto 0;
    overflow: hidden;
    text-align: right;
    float: none;
    position: relative;
    top: -45px;
    filter: grayscale(100%);
    right: 10px;
}

/* Journeys table -------------------------------------------- */

.journeys-table {
    margin: 0;
}

.journeys-table thead {
    background-color: gray;
}

.journeys-table thead th, .journeys-table tbody td {
    cursor: pointer;
    padding: 8px 10px;
    vertical-align: middle;
}

.journeys-table thead th {
    font-weight: bold;
    height: 38px;
}

.journeys-table thead th.sorting {
    padding-right: 20px;
}

.journeys-table thead th.sorting .icon {
    float: right;
    padding-top: 3px;
}

.journeys-table thead th.sorting .icon-sort {
    display: inline;
}

.journeys-table thead th.sorting .icon-sort-down,
.journeys-table thead th.sorting .icon-sort-up {
    display: none;
}

.journeys-table thead th.sorting.asc .icon-sort,
.journeys-table thead th.sorting.desc .icon-sort {
    display: none;
}

.journeys-table thead th.sorting.asc .icon-sort-up {
    display: inline;
}

.journeys-table thead th.sorting.desc .icon-sort-down {
    display: inline;
}

.journeys-table tbody tr.odd {
    background-color: lightgray;
}

.journeys-table tbody tr td.no-records {
    font-weight: bold;
    padding: 10px;
    text-align: center;
}

@media only screen and (min-width: 1003px) {
    .map.bevjourneys {
        height: 402px !important;
    }

    .map.phevjourneys {
        height: 483px !important;
    }

    .page-container {
        padding-bottom: 181px;
    }

    .journeys-table .expanded-content .data-box.phevjourneys {
        margin-top: 0px !important;
        margin-bottom: 3px !important;
        min-height: 78px;
    }

    .journeys-table .expanded-content .data-box.bevjourneys {
        margin-top: 0px !important;
        margin-bottom: 3px !important;
        min-height: 78px;
    }

    .journeys-table .expanded-content .data-box.standardjourneys {
        margin-top: 23px;
    }
}

@media only screen and (max-width: 1003px) and (min-width: 768px) {
    .data-box-wrapper .data-box.phevjourneys {
        width: 14.6% !important;
    }

    .data-box-wrapper .data-box.bevjourneys {
        width: 18% !important;
    }
}

/* Fixed column widths*/

.journeys-table .colspan.col2 {
    width: 230px;
}

.journeys-table .colspan.col4 {
    width: 230px;
}

.journeys-table .colspan.col6 {
    width: 100px;
}

.journeys-table .colspan.col7 {
    width: 100px;
}

/* Paging */
.journeys-table-paging {
    margin-top: 7px;
}

.journeys-table-paging a {
    text-indent: 100%;
    height: 15px;
    cursor: pointer;
    display: block;
    width: 15px;
    white-space: nowrap;
    overflow: hidden;
}

.journeys-table-paging a.previous {
    float: left;
    margin-right: 10px;
    text-indent: 0% !important;
}

.journeys-table-paging a.next {
    float: right;
    margin-left: 10px;
    text-indent: 0% !important;
}

.journeys-table-paging a.next i, .journeys-table-paging a.previous i {
    font-size: 14px;
}

.journeys-table-paging a.previous.disabled, .journeys-table-paging a.next.disabled {
    cursor: default;
    display: none;
}

.journeys-table-paging .paging-info {
    float: right;
    clear: none;
    margin-top: 2px;
}

/* Expanded content */
.journeys-table tr.expanded, .journeys-table tr.odd.expanded {
    background-color: lightgray;
}

.journeys-table .expanded-content td {
    background-color: gray;
    cursor: default;
    padding: 0;
    text-align: center;
}

.journeys-table .expanded-content td .expanded-content-inner {
    margin: 20px;
}

.journeys-table .expanded-content td .twelve.columns {
    padding: 0;
}

.journeys-table .expanded-content .map {
    border: 1px solid #000;
    float: left;
    height: 376px;
    width: 80%;
}

.journeys-table .expanded-content .data-box-wrapper {
    float: right;
    width: 18%;
    padding-left: 0;
    padding-right: 0;
}

.journeys-table .expanded-content .data-box {
    padding: 5px;
    width: 100%;
    margin-top: 20px;
}

.journeys-table .expanded-content .data-box:first-child {
    margin-top: 0;
}

.journeys-table .expanded-content .data-box h3 {
    margin-top: 5px;
}

.journeys-table-updated-inner {
    margin-top: -35px;
}

/* Search bar -------------------------------------------- */
/* Used in Dealer Portal */
.search-bar {
    display: none;
    padding: 15px;
}

.search-bar .inner {
    position: relative;
}

.search-bar .vehicle-search-show, .search-bar .customer-search-show, .search-bar .customer-search-email-show, .search-bar .customer-search-namePhone-show {
    display: none;
}

.search-bar.vehicle-search .vehicle-search-show, .search-bar.customer-search .customer-search-show, .search-bar.customer-search.email .customer-search-email-show, .search-bar.customer-search.namePhone .customer-search-namePhone-show {
    display: block;
}

.search-bar .button {
    margin-top: 17px;
}

.search-bar.customer-search.namePhone .search-button-container {
    clear: both;
}

.search-bar input, .search-bar .select2 {
    margin-bottom: 10px;
}

/* Search button  -------------------------------------------- */
#btn-search {
    margin-left: 6px;
    float: left;
}

/* Notice bar -------------------------------------------- */
/* Shown below top bar */
.notice-bar {
    border-bottom: 1px solid gray;
    background: rgba(255, 255, 255, .3);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#4cffffff', endColorstr='#4cffffff');
}

.notice-bar .notice-bar-item .inner {
    border-top: 1px solid gray;
    display: table;
    padding: 15px 0;
    width: 100%;
}

.notice-bar .notice-bar-item:first-child .inner {
    border-top: none;
}

.notice-bar .notice-bar-item .text-container, .notice-bar .notice-bar-item .button-container {
    display: table-cell;
    vertical-align: middle;
}

.notice-bar .notice-bar-item h4 {
    margin: 0 0 5px 0;
}

.notice-bar .notice-bar-item.alert h4 {
    color: red;
}

.notice-bar .notice-bar-item p {
    margin-bottom: 0;
}

/* Country selector -------------------------------------------- */
/* Used on market selector page */
.country-selector li {
    width: 100%;
    overflow: hidden;
}

.country-selector li img {
    float: left;
}

.country-selector li a {
    padding-left: 30px;
    position: relative;
    top: -2px;
}

/* Tooltip -------------------------------------------- */

.app-tooltip {
    background: #fff;
    border: solid 1px gray;
    position: absolute;
    z-index: 1000;
    padding: 10px;
    text-align: center;
}

/* Triangle styling */
.app-tooltip:after {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid gray;
    content: '';
    position: absolute;
    left: 50%;
    bottom: -10px;
    margin-left: -10px;
}

.app-tooltip.top:after {
    border-top-color: transparent;
    border-bottom: 10px solid #111;
    top: -20px;
    bottom: auto;
}

.app-tooltip.left:after {
    left: 10px;
    margin: 0;
}

.app-tooltip.right:after {
    right: 10px;
    left: auto;
    margin: 0;
}

.ui-tooltip {
    background-color: white;
    border: 1px solid #d2d2d2;
    box-shadow: 2px 2px 5px #222;
    max-width: 200px;
    margin-left: 150px;
    padding: 5px;
    text-align: justify;
}

/* Subscription package item -------------------------------------------- */

.subscription-item img {
    width: 70px;
    height: 70px;
}

.panel .section .descr {
    margin-left: 70px;
    max-width: 125px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.descr .time-left {
    margin-bottom: 5px;
}

.subscription-item .descr {
    padding-left: 80px;
    margin-left: 0;
}

.subscription-item .descr > a.right {
    float: none !important;
}

/* Top notification -------------------------------------------- */

/* Used for cookies info */
.top-notification {
    background-color: #000;
    display: none;
    padding: 20px;
    width: 100%;
    color: #fff;
    z-index: 100;
}

.top-notification .inner {
    display: table;
}

.top-notification .button-container, .top-notification .text-container {
    display: table-cell;
    vertical-align: middle;
}

.top-notification .button-container {
    padding-left: 20px;
    width: 31px;
}

.top-notification .text-container p {
    margin-bottom: 0;
}

.top-notification .button-container .btn-close {
    display: block;
    width: 31px;
    height: 31px;
    background: #fff;
    color: red;
    text-align: center;
    line-height: 31px;
    font-weight: bold;
    font-size: 16px;
}

/* Floating nav-bar (affixed) -------------------------------------------- */
.affix-top .nav-bar.float {
    position: fixed;
    top: 40px;
}

/* Vehicle subnav -------------------------------------------- */

.subnav {
    background-color: gray;
    padding: 0 15px;
}

.subnav ul {
    display: table;
    float: left;
    padding: 10px 0;
    margin: 10px 0;
}

.subnav ul li {
    display: table-cell;
    font-size: 11px;
    font-weight: bold;
    line-height: 11px;
    list-style: none;
    vertical-align: middle;
    letter-spacing: 0.2px;
}

.subnav ul li a {
    padding: 8px 10px;
    margin: 10px 0;
}

.subnav ul li a.active {
    background-color: lightslategray;
}

.subnav ul li a, .subnav ul li a:hover {
    color: #fff;
}

.only-small-screen {
    display: none !important;
}

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

    .step.active.beforeArrow.five-arrow:before {
        border-top: solid 22px transparent;
        border-left: solid 12px white;
        border-bottom: solid 22px transparent;
    }

    .step.active.beforeArrow.five-arrow:after {
        border-top: solid 22px transparent;
        border-left: solid 12px #d6d6d6;
        border-bottom: solid 22px transparent;
    }

    .row .twelve.columns .button.small.right.mr15 {
        margin-right: 0px !important;
        margin-top: 15px;
    }

    .step-no {
        left: 20px !important;
        position: relative;
    }

    .five-steps-small-text {
        font-size: 3px !important;
    }

    .five-steps-medium-text {
        font-size: 5px !important;
    }

    .step-indicator .step.active {
        height: 36px !important;
    }

    #btn-search {
        width: calc(100% - 12px) !important;
    }

    .displayMyServicesPage > .row {
        position: relative;
    }

    .subnav ul li a {
        overflow: hidden;
        display: block;
        width: 100%;
        margin: 0;
        padding: 12px 10px;
    }

    .subnav ul, .subnav ul li {
        display: block;
    }

    .subnav ul {
        float: none;
    }

    .subnav ul li {
        max-width: 100% !important;
    }

    .subnav ul.right {
        display: none;
    }

    .only-small-screen {
        display: block !important;
    }
}

/* Hero image -------------------------------------------- */
/* Used on market selector page */
body.with-hero-image {
    background: none;
}

.with-hero-image .top-bar {
    display: none;
}

.with-hero-image h1 {
    margin-bottom: 30px;
}

.with-hero-image .hero-image-container {
    margin-top: -122px; /* Equal to height of logo-container */
    margin-bottom: 30px;
}

.with-hero-image .hero-image-container .bg {
    background-position-x: center;
    -ms-background-position-x: center;
    background-repeat: no-repeat;
    height: 500px;
    width: 100%;
}

/* Hero image at various window sizes - not included in tablet/smartpone
 * media queries since it does not follow the same pattern all together */
/* Tablet */
@media only screen and (max-width: 1002px) {
    .with-hero-image .hero-image-container {
        margin-top: -103px; /* Equal to height of logo-container */
    }

    .with-hero-image .hero-image-container .bg {
        background-size: 1440px 360px;
        height: 360px;
    }
}

/* Between tablet and smartphone */
@media only screen and (max-width: 767px) {

    .journeys-enabled-confirmed-hide.vehicle-stolen-hide {
        line-height: 1.8;
    }

    .step-indicator .step .step-no, .step-indicator .step .step-descr {
        padding-left: 0px !important;
    }

    .button.small.close-reveal-modal.mr5.confirm-dialog-btn-cancel {
        margin-right: 0px;
    }

    [class*='column'] + [class*='column']:last-child {
        float: left !important;
    }

    .login-box {
        margin-bottom: 10px;
    }

    .button-bar #btn-save-marketing-preferences {
        width: 90%;
    }

    .button-bar .button.small.close-reveal-modal,
    .button-bar .button.small.reveal-modal-button {
        width: 90%;
    }

    .button-bar #final-activation-cancel.button.small.close-reveal-modal {
        margin-right: 0px !important;
    }

    .button-bar #final-activation-restart.button.small {
        width: 90%;
    }

    .page-footer .share-links {
        right: 0px;
    }

    .step-no {
        left: 25px;
        position: relative;
    }

    .step-descr {
        visibility: hidden;
    }

    .step-descr.five-steps {
        visibility: hidden;
    }

    .five-steps-small-text {
        font-size: 5px !important;
    }

    .five-steps-medium-text {
        font-size: 7px !important;
    }

    .page-container {
        padding-bottom: 190px;
    }

    .page-footer .privacy-links ul {
        padding-bottom: 10px;
    }

    .with-hero-image .hero-image-container .bg {
        background-size: 767px 192px;
        height: 192px;
    }

    #btn-confirm-remove {
        width: 90%;
    }
}

/* Smartphone */
@media only screen and (max-width: 649px) {

    .with-hero-image .hero-image-container .bg {
        background-size: 640px 160px;
        height: 160px;
    }
}

/* Service list -------------------------------------------- */

.service-item {
    border-top: 1px solid #d2d2d2;
    display: table;
    width: 100%;
    padding: 20px 0;
}

.service-item:first-child {
    border-top: 0;
    padding-top: 0;
}

.service-item .img-container, .service-item .text-container, .service-item .btn-container {
    display: table-cell;
}

.service-item .img-container {
    width: 100px;
}

.service-item .img-container img {
    width: 100%;
}

.service-item .text-container {
    padding: 0 20px;
    vertical-align: top;
}

.service-item .text-container h3 {
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 5px;
}

.service-item .text-container .text {
    display: block;
    margin-top: 15px;
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 0;
}

.service-item .btn-container {
    text-align: right;
    vertical-align: middle;
}

.service-item .btn-container .button {
    min-width: 150px;
    margin-top: 10px;
}

.service-item .btn-container .button:first-child {
    margin-top: 0;
}

.service-item .btn-container .button .button-title {
    display: block;
    margin-bottom: 4px;
}

.service-item .btn-container .button .button-descr {
    text-transform: none;
    font-size: 11px;
    font-weight: normal;
    letter-spacing: 0;
}

.service-item .btn-container .button .disabled-hide {
    display: inline;
}

.service-item .btn-container .button .disabled-show {
    display: none;
}

.service-item .btn-container .button[disabled='disabled'] .disabled-show {
    display: inline;
}

.service-item .btn-container .button[disabled='disabled'] .disabled-hide {
    display: none;
}

.service-item [class^='icon-'], .service-item [class*=' icon-'] {
    margin-left: 5px;
}

/* Shopping cart -------------------------------------------- */

.shopping-cart {
    margin-bottom: 40px;
    float: left;
    width: 100%;
}

.shopping-cart .cart-header {
    background-color: #757778;
    color: #fff;
    font-weight: bold;
    line-height: 32px;
    padding: 10px 20px;
    float: left;
    text-transform: uppercase;
    width: 100%;
}

.shopping-cart .cart-header .button {
    margin-left: 20px;
}

.shopping-cart .cart-content {
    background-color: #fff;
    border: solid 1px #d2d2d2;
    border-top: 0;
    float: left;
    width: 100%;
}

.shopping-cart .cart-content table {
    margin-bottom: 0;
}

.shopping-cart .cart-content table tr {
    border-top: 1px solid #d2d2d2;
}

.shopping-cart .cart-content table tr:first-child {
    border-top: none;
}

.shopping-cart .cart-content table tr td {
    font-weight: bold;
    padding: 20px;
    vertical-align: middle;
}

.shopping-cart .cart-content table tr td.img-container {
    width: 80px;
    vertical-align: top;
}

.shopping-cart .cart-content table tr td.img-container img {
    width: 40px;
}

.shopping-cart .cart-content table tr td.price-container {
    text-align: right;
    width: 90px;
}

.shopping-cart .cart-content table tr td.select-container {
    width: 200px;
}

.shopping-cart .cart-content table tr td.button-container {
    text-align: right;
    width: 170px;
    vertical-align: top;
}

/* Payment form -------------------------------------------- */

.payment-form .small-input {
    float: left;
    width: 60px;
}

.payment-form .small-input:first-child {
    margin-right: 10px;
}

/* Service details -------------------------------------------- */

.service-details-modal {
    width: 840px;
    margin-left: -420px;
}

.service-details-modal .modal-content {
    padding: 7px 15px 15px;
}

.service-details-modal .modal-loader {
    margin: 60px 0;
    text-align: center;
}

.service-details-header {
    border-bottom: 1px solid #d2d2d2;
    padding-bottom: 20px;
}

.service-details-header .img-container {
    float: left;
    width: 120px;
}

.service-details-header .img-container img {
    width: 100%;
}

.service-details-header .title-container {
    padding-left: 140px;
}

.service-details-header .title-container .title {
    font-size: 26px;
}

.service-details-header .title-container i:before {
    font-size: 16px;
    vertical-align: middle;
}

.service-details-header .title-container .select-container {
    max-width: 240px;
    margin-top: 10px;
}

.service-details-header .title-container .button {
    margin-top: 20px;
}

.service-details-header .title-container .expiry-date {
    text-align: right;
    float: right;
    line-height: 26px;
}

.service-details-content {
    border-bottom: 1px solid #d2d2d2;
    font-size: 14px;
    line-height: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.discount-code h2 {
    line-height: 32px;
    margin-bottom: 0;
}

.discount-code input[type='text'] {
    float: right;
    margin-right: 10px;
    margin-bottom: 20px;
    width: 220px;
}

.discount-code .button {
    float: right;
}

/* List -------------------------------------------- */
/* This is an updated table styling for various lists. Can not style directly on table element since it's used on various places */
table.list td, table.list th {
    padding: 10px 15px;
}

table.list td {
    border-top: 1px solid #e6e6e6;
}

/* Connected accounts list -------------------------------------------- */

.connected-accounts-list .item {
    border-bottom: 1px solid #e6e6e6;
    float: left;
    padding: 20px 0;
    width: 100%;
}

.connected-accounts-list .item:first-child {
    padding-top: 0;
}

.connected-accounts-list .item .info-container {
    width: 70%;
    float: left;
}

.connected-accounts-list .item .info-container .text-wrapper {
    padding-left: 64px; /* img width + 10 px*/
}

.connected-accounts-list .item .info-container img {
    float: left;
    width: 54px;
    height: 54px;
    margin-right: 10px;
}

.connected-accounts-list .item .info-container h4 {
    margin-top: 0;
}

.connected-accounts-list .item .info-container p {
    margin-bottom: 0;
}

.connected-accounts-list .item .button-container {
    width: 30%;
    display: inline;
    text-align: right;
}

.connected-accounts-list .item .button-container a.button {
    float: right;
    margin-left: 5px;
}

.connected-accounts-wrapper {
    position: relative;
}

.connected-accounts-wrapper .market-selector-container {
    position: absolute;
    top: -46px;
    right: 0;
}

.connected-accounts-wrapper .market-selector-container .popover-selector {
    margin-right: 14px;
}

.market-selector-container-mob {
    margin-top: 20px;
    float: right;
    margin-right: 14px;
    text-align: right;
}

/* Market selector -------------------------------------------- */

.popover-selector {
    position: relative;
}

.popover-selector:focus {
    outline: none !important;
}

.popover-selector:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border: solid 5px;
    border-color: #fe8852 transparent transparent transparent;
    position: absolute;
    right: -14px;
    top: 50%;
    margin-top: -2px;
    margin-left: -5px;
}

.popover-selector .popover {
    display: none;
    background-color: #fff;
    -moz-box-shadow: 0 4px 7px rgba(0, 0, 0, .4);
    -webkit-box-shadow: 0 4px 7px rgba(0, 0, 0, .4);
    box-shadow: 0 4px 7px rgba(0, 0, 0, .4);
    border: 1px solid #c1c1c1;
    list-style: none;
    padding: 10px 0;
    position: absolute;
    right: -16px;
    bottom: 100%;
    top: auto;
    margin-bottom: 10px;
    min-width: 200px;
    max-height: 200px;
    overflow-y: scroll;
}

.popover-selector .popover:before {
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #c1c1c1;
    bottom: -7px;
    content: '';
    position: absolute;
    right: 19px;
}

.popover-selector .popover:after {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #fff;
    bottom: -6px;
    content: '';
    position: absolute;
    right: 20px;
}

.popover-selector .popover li {
    float: none;
    font-weight: normal;
    padding: 5px 15px;
    margin: 0;
    text-align: left;
}

.popover-selector .popover li:hover {
    background-color: #f4f4f4;
}

.simple-list-style {
    list-style-type: none;
}

/* --------------------------------------------------- *
 *  Range Slider styling
 * --------------------------------------------------- */

input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    margin: 7.35px 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 7.3px;
    cursor: pointer;
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
    background: #666666;
    border-radius: 3.1px;
    border: 0px transparent #010101;
    margin: 12px 0;
}

input[type=range]::-webkit-slider-thumb {
    box-shadow: 1.8px 1.8px 3px rgba(0, 0, 0, 0.68), 0px 0px 1.8px rgba(13, 13, 13, 0.68);
    border: 1px solid rgba(0, 0, 0, 0);
    height: 22px;
    width: 22px;
    border-radius: 7px;
    background: #ECECEC;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -7.35px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: #7E7E7E;
}

input[type=range]::-moz-range-track {
    width: 100%;
    height: 7.3px;
    cursor: pointer;
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
    background: #666666;
    border-radius: 3.1px;
    border: 0px transparent #010101;
}

input[type=range]:focus::-moz-range-track {
    background: #7E7E7E;
}

@-moz-document url-prefix() {
    input[type=range] {
        margin-top: 6px;
        margin-bottom: 6px;
    }
}

input[type=range]::-moz-range-thumb {
    box-shadow: 1.8px 1.8px 3px rgba(0, 0, 0, 0.68), 0px 0px 1.8px rgba(13, 13, 13, 0.68);
    border: 1px solid rgba(0, 0, 0, 0);
    height: 22px;
    width: 22px;
    border-radius: 7px;
    background: #ECECEC;
    cursor: pointer;
}

input[type=range]::-moz-focus-outer {
    border: 0;
}

input[type=range]::-ms-track {
    width: 100%;
    height: 7.3px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    border-width: 12px 0;
    color: transparent;
}

input[type=range]::-ms-fill-lower {
    background: #666666;
    border: 0px solid #010101;
    border-radius: 6.2px;
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}

input[type=range]::-ms-fill-upper {
    background: #666666;
    border: 0px solid #010101;
    border-radius: 6.2px;
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}

input[type=range]::-ms-thumb {
    box-shadow: 1.8px 1.8px 3px rgba(0, 0, 0, 0.68), 0px 0px 1.8px rgba(13, 13, 13, 0.68);
    border: 1px solid rgba(0, 0, 0, 0);
    height: 22px;
    width: 22px;
    border-radius: 7px;
    background: #ECECEC;
    cursor: pointer;
    margin: 3px;
}

input[type=range]:focus::-ms-fill-upper {
    background: #7E7E7E;
}

input[type=range]:focus::-ms-fill-lower {
    background: #7E7E7E;
}

input[type=range]::-ms-tooltip {
    display: none;
}

/* --------------------------------------------------- *
 *  Tablet styling
 * --------------------------------------------------- */

@media only screen and (max-width: 1002px) {
    /* Misc -------------------------------------------- */
    /* Header */
    .page-header .logo {
        padding: 0 36px;
    }

    .page-header .logo img {
        width: 96px;
        height: auto;
    }

    /* Helper classes -------------------------------------------- */
    .tab {
        display: block !important;
    }

    .mob-only {
        display: none !important;
    }

    .tab-hide {
        display: none;
    }

    /* Floating */
    .tab-right {
        float: right !important;
    }

    .tab-left {
        float: left !important;
    }

    .column.left, .columns.left, ul.left {
        width: auto !important;
        float: left !important;
    }

    .column.right, .columns.right, ul.right {
        width: auto !important;
        float: right !important;
    }

    /* Width */
    .tabauto, .column.tabauto, .columns.tabauto, ul.tabauto {
        width: auto !important;
    }

    .tab20, .column.tab20, .columns.tab20, ul.tab20 {
        width: 20% !important;
        float: left;
    }

    .tab25, .column.tab25, .columns.tab25, ul.tab25 {
        width: 25% !important;
        float: left;
    }

    .tab30, .column.tab30, .columns.tab30, ul.tab30 {
        width: 32% !important;
        float: left;
    }

    .tab40, .column.tab40, .columns.tab40, ul.tab40 {
        width: 40% !important;
        float: left;
    }

    .tab49, .column.tab49, .columns.tab49, ul.tab49 {
        width: 49% !important;
        float: left;
    }

    .tab50, .column.tab50, .columns.tab50, ul.tab50 {
        width: 50% !important;
        float: left;
    }

    .tab50 input {
        width: 100%;
    }

    /* Inputs in tab50 should be fullwidth */
    .tab60, .column.tab60, .columns.tab60, ul.tab60 {
        width: 60% !important;
        float: left;
    }

    .tab75, .column.tab75, .columns.tab75, ul.tab75 {
        width: 75% !important;
        float: left;
    }

    .tab80, .column.tab80, .columns.tab80, ul.tab80 {
        width: 80% !important;
        float: left;
    }

    .tab100, .column.tab100, .columns.tab100, ul.tab100 {
        width: 100% !important;
    }

    .flex-wrapper {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-align-items: flex-start;
        -ms-flex-align: start;
        align-items: flex-start;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    .tab-flex {
        -webkit-flex: 1 1 auto;
        -ms-flex: 1 0 auto;
        flex: 1;
        margin: 0 10px;
        float: none !important;
        overflow: hidden;
    }

    .tab-flex:first-child {
        margin-left: 0;
    }

    .tab-flex:last-child {
        margin-right: 0;
    }

    /* Forms -------------------------------------------- */
    .input-instr {
        float: left;
        margin-top: 4px;
    }

    /* Buttons -------------------------------------------- */
    .button.small.option-button {
        width: 250px;
    }

    /* Map -------------------------------------------- */
    .map {
        height: 380px;
    }

    /* Step indicator -------------------------------------------- */
    .step-indicator .step {
        width: 14%;
        padding: 5px;
    }

    .step-indicator .step .step-no {
        font-size: 30px;
    }

    .step-indicator .step.active .step-descr {
        display: table-cell;
    }

    .step-indicator .step.active {
        width: auto;
    }

    .step-indicator-substeps .step {
        padding: 14px 5px;
    }

    /* Journeys table -------------------------------------------- */
    .journeys-table .expanded-content .map {
        height: 300px;
        width: 100%;
    }

    .journeys-table .expanded-content .data-box-wrapper {
        margin: 10px -1% 0 -1%;
        width: 102%;
    }

    .journeys-table .expanded-content .data-box-wrapper .data-box {
        float: left;
        margin: 0 1%;
        width: 23%;
        min-height: 78px;
    }

    /* Search bar -------------------------------------------- */
    .search-bar .three, .search-bar .row .three {
        width: 33.33333%;
    }

    .search-bar [class*='column'] + [class*='column']:last-child {
        float: left;
    }

    .search-bar input[type='text'], .search-bar input[type='email'], input[type='tel'] {
        width: 100%;
    }

    .search-bar .customer-search-namePhone-show {
        float: left;
        width: 100%;
        margin-top: 10px;
    }

    /* Notice bar -------------------------------------------- */
    .notice-bar .notice-bar-item {
        padding: 0;
    }

    .notice-bar .notice-bar-item .inner {
        padding: 15px;
    }

    /* Floating nav-bar (affixed) -------------------------------------------- */
    .affix-top .nav-bar.float {
        position: static;
        top: 0;
    }

    /* Service details -------------------------------------------- */
    .reveal-modal.service-details-modal {
        width: 90%;
        margin-left: -45%;
    }
}

/* END Tablet styling */

/* --------------------------------------------------- *
 *  Non-Smartphone styling
 * --------------------------------------------------- */

@media only screen and (min-width: 768px) {
    .flexbox div.button-align-group {
        /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }

    .flexbox div.button-align-group > a {
        -webkit-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .flexbox div.button-align-group > a > span {
        display: block;
        max-width: 100%;
    }

    .no-flexbox div.button-align-group {
        display: table;
        border-spacing: 5px;
    }

    .no-flexbox div.button-align-group > a {
        display: table-cell;
        vertical-align: middle;
    }

    .step-indicator .step .inner {
        display: block;
        overflow: hidden;
    }

}

/* END Non-Smartphone styling */

/* --------------------------------------------------- *
 *  Smartphone styling
 * --------------------------------------------------- */
@media only screen and (min-width: 767px) {
    .step-indicator .step .step-descr {
        /*word-break: break-word;*/
    }

    .step-descr.five-steps.five-steps-medium-text {
        word-break: inherit !important;
    }
}

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

    .step-no {
        width: 100%;
    }

    /* Misc -------------------------------------------- */
    .page-title-container {
        margin-top: 25px;
    }

    .text-uppercase.header-text-firstname {
        display: none;
    }

    /* Header */
    .page-header .logo {
        padding: 0 19px;
    }

    .page-header .logo img {
        width: 67px;
        height: auto;
    }

    /* Footer */
    .page-footer {
        text-align: center;
    }

    .page-footer ul {
        width: 100%;
        margin-bottom: 15px;
    }

    .page-footer ul li {
        width: 100%;
        margin: 0;
    }

    .page-footer .copyright {
        width: 100%;
        display: block;
    }

    /* Helper classes -------------------------------------------- */
    .mob {
        display: block !important;
    }

    .mob-only {
        display: block !important;
    }

    table.mob-only {
        display: table !important;
    }

    .mob-hide {
        display: none;
    }

    /* Floating */
    .mob-right {
        float: right !important;
    }

    .mob-left {
        float: left !important;
    }

    .column.left, .columns.left, ul.left {
        width: 100% !important;
        float: left !important;
    }

    .column.right, .columns.right, ul.right {
        width: 100% !important;
        float: right !important;
    }

    [class*='column'] + [class*='column']:last-child {
        float: right;
    }

    /* Override column floating */
    .mob-clear {
        clear: both;
    }

    /* Clear floating */
    /* Width */
    .mobauto, .column.mobauto, .columns.mobauto, ul.mobauto {
        width: auto !important;
    }

    .mob20, .column.mob20, .columns.mob20, ul.mob20 {
        width: 20% !important;
    }

    .mob25, .column.mob25, .columns.mob25, ul.mob25 {
        width: 25% !important;
    }

    .mob30, .column.mob30, .columns.mob30, ul.mob30 {
        width: 30% !important;
    }

    .mob40, .column.mob40, .columns.mob40, ul.mob40 {
        width: 40% !important;
    }

    .mob50, .column.mob50, .columns.mob50, ul.mob50 {
        width: 50% !important;
    }

    .mob60, .column.mob60, .columns.mob60, ul.mob60 {
        width: 60% !important;
    }

    .mob65, .column.mob65, .columns.mob65, ul.mob65 {
        width: 65% !important;
    }

    .mob70, .column.mob70, .columns.mob70, ul.mob70 {
        width: 70% !important;
    }

    .mob75, .column.mob75, .columns.mob75, ul.mob75 {
        width: 75% !important;
    }

    .mob80, .column.mob80, .columns.mob80, ul.mob80 {
        width: 80% !important;
    }

    .mob100, .column.mob100, .columns.mob100, ul.mob100 {
        width: 100% !important;
        max-width: none !important;
    }

    .flex-wrapper {
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .tab-flex {
        margin-left: 0;
        margin-right: 0;
        flex-basis: auto;
    }

    /* Margins */
    .mob-mt0 {
        margin-top: 0 !important;
    }

    .mob-mr0 {
        margin-right: 0 !important;
    }

    .mob-mt5 {
        margin-top: 5px !important;
    }

    .mob-mb5 {
        margin-bottom: 5px !important;
    }

    .mob-mb10 {
        margin-bottom: 10px !important;
    }

    .mob-mb15 {
        margin-bottom: 15px !important;
    }

    .mob-mb12 {
        margin-bottom: 12px !important;
    }

    /* Paddings */
    .mob-p0 {
        padding: 0 !important;
    }

    .mob-pr0 {
        padding-right: 0 !important;
    }

    .mob-pl0 {
        padding-left: 0 !important;
    }

    .mob-pr10 {
        padding-right: 10px !important;
    }

    /* Forms -------------------------------------------- */
    .input-inline-text {
        margin-top: 0;
    }

    /* Buttons -------------------------------------------- */
    .button.small.option-button {
        max-width: none;
        width: 100%;
    }

    .option-button .text-large {
        font-size: 16px;
    }

    /* Data-boxes -------------------------------------------- */
    .data-box {
        margin-bottom: 6px;
    }

    .data-box-wrapper.third {
        padding-left: 15px;
    }

    /* Thatcham certificate -------------------------------------------- */
    .thatcham-certificate {
        padding: 20px;
    }

    .thatcham-certificate .logos {
        margin-bottom: 20px;
    }

    .thatcham-certificate .logos img {
        width: 90px;
        height: 49px;
        margin: 0 10px;
    }

    .thatcham-certificate ul.details-list {
        margin: 20px 0;
    }

    .thatcham-certificate .signature-box {
        height: 40px;
        width: 100%;
    }

    /* Map -------------------------------------------- */
    .map {
        width: 100%;
        height: 200px;
        margin-bottom: 12px !important;
    }

    /* Step indicator -------------------------------------------- */
    .step-indicator .step {
        padding: 2px 5px;
    }

    .step-indicator .step .step-no {
        font-size: 25px;
    }

    .step-indicator .step.active {
        width: 14%;
    }

    .step-indicator .step.active .step-no {
        width: 100%;
    }

    .step-indicator-substeps .step {
        font-size: 11px;
        padding: 8px 5px;
    }

    /* Journeys table -------------------------------------------- */
    .journeys-table.loading .loading-container {
        padding: 15px;
        top: 60px;
        width: 240px;
    }

    .journeys-table .expanded-content .map {
        height: 150px;
        width: 100%;
    }

    .journeys-table .expanded-content .data-box-wrapper {
        margin: 0 -1% 0 -1%;
        width: 102%;
    }

    .journeys-table .expanded-content .data-box-wrapper .data-box {
        float: left;
        margin: 5px 1% 0 1%;
        width: 48%;
        min-height: 84px !important;
    }

    .journeys-table .expanded-content .data-box-wrapper .data-box:first-child {
        margin-top: 5px;
    }

    .journeys-table-updated-inner {
        margin-top: -5px;
        margin-bottom: 20px;
        text-align: right;
        width: 100%;
    }

    /* Search bar -------------------------------------------- */
    .search-bar [class*='column'] + [class*='column']:last-child {
        float: none;
    }

    .search-bar .three, .search-bar .row .three {
        width: 100%;
        margin-bottom: 20px;
    }

    .search-bar .button.secondary {
        margin-top: 0;
    }

    .search-bar .select2 {
        margin-bottom: 0;
    }

    /* Vehicle subnav -------------------------------------------- */
    .subnav {
        display: none;
    }

    .subnav.displayMyServicesPage {
        display: block !important;
    }

    /* TODO: Delete this when my services page is released to prod (when the feature flag is removed)*/
    .subnav ul.right {
        width: auto !important;
    }

    .subnav ul li {
        max-width: 280px;
    }

    /* Service list -------------------------------------------- */
    .service-item {
        display: block;
    }

    .service-item .img-container, .service-item .text-container, .service-item .btn-container {
        display: block;
    }

    .service-item .img-container {
        float: left;
        width: 38px;
    }

    .service-item .text-container {
        padding-left: 0;
    }

    .service-item .text-container .button {
        float: left;
        margin-top: 10px;
    }

    .service-item .text-container h3, .service-item .text-container > span {
        display: block;
        padding-left: 50px;
    }

    .service-item .btn-container {
        margin-top: 10px;
        text-align: center;
    }

    .service-item .btn-container .button {
        width: 100%;
        max-width: 300px;
    }

    .discount-code {
        margin-top: 10px;
    }

    .discount-code input[type='text'] {
        float: left;
        width: 150px;
    }

    /* Service details -------------------------------------------- */
    .service-details-header .img-container {
        width: 70px;
    }

    .service-details-header .title-container {
        padding-left: 90px;
    }

    .service-details-header .title-container .title {
        display: block;
    }

    .service-details-header .title-container .expiry-date {
        text-align: left;
        float: left;
        line-height: normal;
        margin: 10px 0 10px 0;
    }

    /* Shopping cart -------------------------------------------- */
    .shopping-cart .cart-content table tr td {
        padding-left: 10px;
        padding-right: 10px;
    }

    .shopping-cart .cart-content table tr td.img-container {
        padding-left: 20px;
        width: 70px;
    }

    .shopping-cart .cart-content table tr td.price-container {
        display: none;
    }

    .shopping-cart .cart-content table tr td.select-container {
        display: none;
    }

    .shopping-cart .cart-content table tr td.title-container {
        padding-left: 0;
        padding-right: 0;
    }

    .shopping-cart .cart-content table tr td.title-container {
        padding-left: 0;
        padding-right: 0;
    }

    .shopping-cart .cart-content table tr td.button-container {
        padding-right: 20px;
        width: 75px;
    }

    /* Payment form -------------------------------------------- */
    .payment-form .small-input {
        width: 48%;
    }

    .payment-form .small-input:first-child {
        margin-right: 4%;
    }

    .iframe-content-wrapper {
        margin-right: 0 !important;
    }

    .legal-docs-margin {
        margin-right: -15px;
        margin-left: -15px;
    }

    .legal-docs-padding {
        border-left-color: white !important;
        border-right-color: white !important;
    }

    /* Scale down ReCaptcha in mobile resolutions so it fits a 320px screen */
    .g-recaptcha {
        -moz-transform: scale(0.96);
        -ms-transform: scale(0.96);
        -o-transform: scale(0.96);
        -moz-transform-origin: 0;
        -ms-transform-origin: 0;
        -o-transform-origin: 0;
        -webkit-transform: scale(0.96);
        transform: scale(0.96);
        -webkit-transform-origin: 0 0;
        transform-origin: 0;
        filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.96, M12=0, M21=0, M22=0.96, SizingMethod='auto expand');
    }
}

/* END Mobile styling */