@import url('Colours.css');

@font-face {
    font-family: PorscheNextWLa;
    src: url(/Content/Fonts/porsche-next/PorscheNextWLa-Regular.woff);
}

@font-face {
    font-family: PorscheNextWLa-Thin;
    src: url(/Content/Fonts/porsche-next/PorscheNextWLa-Thin.woff);
}

/* base body styling (including backgroud gradient image) */
body {
    font-family: PorscheNextWLa, Arial, sans-serif;
    font-size: 16px;
    color: var(--black);
    top: 0px;
    /*position: fixed;
    inline-size: 100%;*/
    overflow-y: scroll;
/*    min-width: 370px !important;*/
    width: 100%;
}

.p-0 {
    padding: 0!important;

}

/* --- BOOTSTRAP OVERRIDES --- */
h1, h2, h3, h4, h5, h6 {
    font-family: PorscheNextWLa;
}

#page-header {
    box-sizing: border-box;
    display: block;
   /* background-color: #eff0f1;*/
    margin: 0 0 10px;
}

h1 {
    font-size: 24px;
    margin: 0;
    padding: 15px 0;
}

    h1.with-icon {
        line-height: 32px;
    }

/*Make page header text smaller on mobile*/
@media (max-width:480px) {
    #page-header h1 {
        font-size: 20px;
    }
}

/*h2 {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-height: 1px;
    position: relative;
    text-align: left;
    text-size-adjust: 100%;
    vertical-align: top;
    z-index: 1;
    zoom: 1;
    color: var(--black);
}

    h2 span {
        background-color: #ffffff;
        box-sizing: border-box;
        display: inline-block;
        padding: 0 26px;
        text-align: center;
        text-size-adjust: 100%;
    }*/



 

/* Styling for a ul taken from the Porsche main site */
ul {
    list-style-type: square;
    margin-left: 1em;
    padding-left: 16px;
}

    ul li {
        padding-left: 0;
    }

/* ensure body content follows requirements */
.body-content {
    position: relative;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    background-color: #ffffff;
}

/* override 'less' styling for .row margins */
.main-container .row {
    margin: 0;
}

/* custom container class for advanced content pages and the main navigation */
.nav-container {
    padding: 0;
    padding-bottom: 3px !important;
    margin: 0;
}

    /* navbar-nav in main navigation should have no margin on mobile devices */
    .nav-container .navbar-nav {
        margin: 0;
        padding: 0;
    }

    /* nav li in main navigation has less padding and a top border on mobile devices */
    .nav-container .nav > li {
        padding: 0 !important;
        border-top: solid 1px #eff0f1;
    }

        .nav-container .nav > li.separator {
            display: none;
        }

        /* nav li a in main navigation should fill screen width on mobile devices */
        .nav-container .nav > li > a {
            margin: 0;
            display: block !important;
            width: 100%;
            color: var(--black);
            text-decoration: none;
        }

            /* nav li a in main navigation should turn red on hover/active */
            .nav-container .nav > li > a:hover, .nav-container .nav > li > a:active {
               /* color: #d5001c !important;*/
            }

/*  apply a margin to the continue button on the before-you-begin-annual partial  */
.margin-top-xs-only {
    margin-top: 0px;
    float: right;
}

@media (max-width: 576px) {
    .margin-top-xs-only {
        margin-top: 40px !important;
        float: right;
    }
}

@media (min-width: 576px ) and (max-width: 767px ) {
    .margin-top-xs-only {
        margin-top: 40px !important;
        float: right;
    }
}

@media (min-width: 768px ) and (max-width: 991px ) {
    .margin-top-xs-only {
        margin-top: 40px !important;
        float: right !important;
    }
}

@media (min-width: 992px ) and (max-width: 1453px ) {
    .margin-top-xs-only {
        float: right;
    }
}

/* container media queries */
@media (min-width: 768px) {
    .main-container {
        padding: 0;
    }

        /* on non-mobile devices, advanced content page row columns should have white space to the right */
        .main-container .row .col-sm-6 {
            padding: 0 40px 0 0;
        }

            /* on non-mobile devices, advanced content page row columns should have white space to the left when necessary */
            .main-container .row .col-sm-6.right {
                padding: 0 0 0 40px;
            }

        /* advanced content page - content block highlight styles */
        .main-container .row.light-grey, .row.light-grey h2 span {
            background-color: #eff0f1;
        }

        .main-container .row.dark-grey, .row.dark-grey h2 span {
            background-color: #313639;
            color: #ffffff !important;
        }

        .main-container .row.dark-gray h2 {
            color: #ffffff;
        }

        .main-container .row.dark-blue, .row.dark-blue h2 span {
            background-color: #196a99;
            color: #ffffff !important;
        }

        .main-container .row.red, .row.red h2 span {
            background-color: #d5001c;
            color: #ffffff !important;
        }

        /* make terms and conditions text smaller than normal */
        .main-container .terms-and-conditions {
            font-size: 0.8em;
        }

    /* navbar-nav in main navigation should have no margin on mobile devices */
    .nav-container .navbar-nav {
        margin: 0;
    }

    /* nav li should restore default padding on non-mobile devices */
    .nav-container .nav > li {
        padding: 10px 30px !important;
        border-top: none;
    }

        .nav-container .nav > li.separator {
            display: inline-block;
            padding: 10px 0 !important;
        }

        .nav-container .nav > li:first-child {
            padding-left: 0 !important;
        }

        .nav-container .nav > li.separator:last-child {
            display: none;
        }

        /* nav li a should not fill the screen width on non-mobile devices */
        .nav-container .nav > li > a {
            margin: auto;
            display: inline !important;
        }
}

@media (min-width: 992px) {
    /* reset padding on advanced content page row columns */
    .main-container .row .col-sm-6 {
        padding: 0 116px 0 0;
    }

        /* reset padding on advanced content page row columns */
        .main-container .row .col-sm-6.right {
            padding: 0 0 0 116px;
        }
}

/* override .less max-width on containers */
.container {
    max-width: 100%;
    min-width: 252px !important;
}

/* on large screens, ensure the Bootstrap 'container' is wider than the default */
@media (min-width: 1460px) {
    .container {
        width: 100% !important;
        min-width: 252px !important;
    }
}

/* fix padding on 'nav' list items */
.nav-container .nav > li {
    padding: 10px 30px 10px 0;
}

    /* fix display of anchors in 'nav' list items */
    .nav-container .nav > li > a {
        display: inline;
        padding: 10px 0;
    }

    /* apply red underline to 'nav' anchors */
    .nav-container .nav > li.active > a {
        border-bottom: solid 2px #d5001c;
    }

    /* fix background color on 'nav' anchors */
    .nav-container .nav > li > a:hover, .nav > li > a:focus {
        background-color: transparent;
        color: var(--black);
    }

/* prevent nav from having left and right padding on tablets/desktops */
@media (min-width: 768px) {
    .navbar-collapse {
        padding: 0 !important;
        
    }
}

/* bootstrap override for the hambuger menu button */
.navbar-toggle {
    margin-top: -55px;
    margin-right: 0;
    border-radius: 0;
    border-left: solid 1px #403f45;
    z-index: 1000;
    background-color: #403f45;
}

    /* when the navbar is collapsed, remove background colour */
    .navbar-toggle.collapsed {
        background-color: transparent;
    }

    /* bootstrap override for the hamburger menu lines */
    .navbar-toggle > .icon-bar {
        background-color: #d5001c;
        height: 4px;
        width: 28px;
    }

    /* when the navbar is collapsed, hamburger menu lines should be black */
    .navbar-toggle.collapsed > .icon-bar {
        background-color: var(--black);
        height: 4px;
        width: 28px;
    }

/* default 'mobile' styles for wrappers */
/* ensure wrapped children have side margins in normal wrapper */
.body-content .wrapper {
    margin: 0 calc(10% - 30px);
    padding: 30px;
}

/* ensure wrapped children have side margins as normal wrapper, but no vertical padding */
.body-content .wrapper-thin {
    margin: 0;
/*    margin-top:100px;*/
}

/* ensure wrapped children have side margins in wide wrappers */
.body-content .wrapper-wide {
    padding: 30px 10%;
}

@media (min-width: 768px) {
    /* ensure wrapped children have side margins in normal wrapper */
    .body-content .wrapper {
        margin: 0 calc(10% - 30px);
        padding: 30px;
    }

    /* ensure wrapped children have side margins as normal wrapper, but no vertical padding */
    .body-content .wrapper-thin {
        margin: 0 10% 30px 10%;
    }

    /* ensure wrapped children have side margins in wide wrappers */
    .body-content .wrapper-wide {
        padding: 30px 10%;
    }
}

/* CAROUSEL */
/* default styling for carousel indicators */

.carousel-indicators {
    bottom: -35px;
}

    .carousel-indicators li {
        border: none;
        background-color: #3a393e;
    }

        /* default styling for active carousel indicator */
        .carousel-indicators li.active {
            margin: 1px;
            width: 10px;
            height: 10px;
            /*background-color: red;*/
        }

/* spacing of carousel indicator for mobile devices */
@media (max-width: 768px) {
    .carousel-indicators {
        bottom: -18px;
    }
}

/* force banner images to be 100% wide */
.carousel-inner .banner-image {
    width: 100% !important;
}

/* default styling for carousel call to action */
.carousel-inner .call-to-action {
    display: block;
    font-family: PorscheNextWLa;
    color: var(--black);
    text-align: center;
    margin: 10px 0 18px;
    text-decoration: none;
    -webkit-transition: color 0.25s linear;
    -moz-transition: color 0.25s linear;
    -o-transition: color 0.25s linear;
    transition: all 0.25s linear;
    background-color: unset !important;
}

/* change font colour on call to action hover */
.carousel-inner a.call-to-action:hover {
    /*background-color: var(--headerHover);*/
}
/* carousel call to action chevron */
.carousel-inner .call-to-action i {
    display: inline-block;
    font-size: 18px;
    
}

/* carousel call to action heading */
.carousel-inner .call-to-action h4 {
    display: inline-block;
    font-size: 22px;
    margin-bottom: 0;
    /*background-color:transparent!important;*/
}

/* carousel call to action text */
.carousel-inner .call-to-action p {
 /*   font-size: 15px;
    margin-left: 0px;*/
}

/* on mobile devices, hide the bootstrap carousel controls */
.carousel .carousel-control {
    display: none;
    opacity: 0 !important;
    -webkit-transition: opacity 0.2s linear;
    -moz-transition: opacity 0.2s linear;
    -o-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
}

/* show carousel controls when hovering the carousel */
.carousel:hover .carousel-control {
    opacity: 1 !important;
}

@media (min-width: 168px) {
    .carousel-indicators {
        bottom: 20px;
    }

        /* default styling for active carousel indicator */
        .carousel-indicators li.active {
            margin: 1px;
            width: 20px;
            height: 10px;
            background-color: #ffffff;
        }

    
    /* on non-mobile devices, reposition the carousel call to action over the banner image */
    .carousel-inner .call-to-action {
        position: absolute;
        bottom: 50px;
        left: 60px;
        text-align: left;
        color: #ffffff;
        text-decoration: none;
        margin: 0;
    }

        /* on non-mobile devices, call to action should have larger font */
        .carousel-inner .call-to-action i {
            font-size: 20px;
        }

        /* on non-mobile devices, call to action should have larger font */
        /*.carousel-inner .call-to-action h4 {
            font-size: 40px;
        }*/

        /* on non-mobile devices, call to action should have larger font */
        .carousel-inner .call-to-action p {
            font-size: 24px;
            margin-left: 30px;
        }

    /* override default bootstrap carousel control style (left and right arrows) */
    .carousel .carousel-control {
        display: inline;
        top: 50%;
        margin-top: -32px;
        background-image: none !important;
        width: 64px;
        height: 64px;
        font-size: 64px;
        background-color: transparent;
        line-height: 64px;
        opacity: 1;
        -webkit-transition: opacity 0.2s linear, color 0.2s linear;
        -moz-transition: opacity 0.2s linear, color 0.2s linear;
        -o-transition: opacity 0.2s linear, color 0.2s linear;
        transition: opacity 0.2s linear, color 0.2s linear;
    }

    .carousel-control span {
        margin: 0;
        text-shadow: none;
    }

    /* override default bootstrap carousel control hover/active style */
    .carousel-control:hover, .carousel-control:active {
       /* background-color: transparent;
        color: #d5001c;*/
    }
}


/*@media(min-width:768px) {
    .carousel-inner {
        margin-top: 75px;
    }
}*/

@media (min-width: 992px) {
    /* on non-mobile devices, call to action should have larger font */
    .carousel-inner .call-to-action i {
        font-size: 30px;
       
    }

    /* on non-mobile devices, call to action should have larger font */
    .carousel-inner .call-to-action h4 {
        font-size: 50px;
    }

    /* on non-mobile devices, call to action should have larger font */
    .carousel-inner .call-to-action p {
        font-size: 24px;
        margin-left: 46px;
    }
}

@media (min-width: 1200px) {
    /* on non-mobile devices, call to action should have larger font */
    .carousel-inner .call-to-action i {
        font-size: 40px;
    }

    /* on non-mobile devices, call to action should have larger font */
    .carousel-inner .call-to-action h4 {
        /*background-color: rgba(0,0,0,0.3) !important;
        box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.3);*/ /* Adds a soft blurry shadow */
        font-size: 60px;
        max-width: 450px;
    }

    /* on non-mobile devices, call to action should have larger font */
    .carousel-inner .call-to-action p {
        font-size: 24px;
        margin-left: 58px;
    }
}

/* carousel should fill the screen width */
@media (min-width: 1460px) {
    #porscheCarousel {
        width: 100% !important;
    }
}

/* PANELS */

/* remove box shadow from panels */
.panel {
    box-shadow: none;
}

/* default panels should have no border */
.panel-default {
    border: none;
}

    /* default style for panel headings */
    .panel-default > .panel-heading {
        background-image: none !important;
        background: #eff0f1;
        border: none;
        padding: 20px 15px 20px 15px;
    }

/* ensure panel headings with no content have a minimum height */
.panel-heading div {
    min-height: 48px;
}

    /* re-apply 0 min-height to clearfix divs inside panel headings */
    .panel-heading div.clearfix {
        min-height: 0px;
    }

.panel-heading p {
    padding: 14px 0;
    margin-bottom: 0;
}

/* on mobile devices, 'Update' buttons should be centred at the bottom of the panel heading */
.panel-heading .btn {
    display: block;
    margin: 0 auto;
    width: 100px;
}

/* on non-mobile devices, 'Update' buttons should be centred vertically on the right of the panel heading */
@media (min-width: 768px) {
    .panel-heading .btn {
        width: auto;
        position: absolute;
        top: 50%;
        right: 25px;
        margin-top: -26px;
    }
}

/* default style for panel body */
.panel-body {
    padding: 0;
    background-color: #fbfcff;
}

.btn {
    outline-style: none !important;
    box-shadow: none !important;
    text-decoration: none;
    font-size: 16px;
    border-radius: 0;
    padding: 13px 21px;
}

    /* default disabled button styling */
    .btn[disabled] {
        color: #b5b4ba;
        background-color: #737278 !important;
        border: solid 1px #737278 !important;
        opacity: 1;
    }

        /* default disabled button hover styling */
        .btn[disabled]:hover {
            color: #b5b4ba;
            background-color: #737278 !important;
            outline: none;
            opacity: 1;
        }

/* style for default buttons (grey) */
.btn-default {
    background-image: none;
    border: solid 1px #313639;
    background-color: #313639;
    color: #ffffff;
    text-shadow: none;
}

    /* change colours on default buttons (grey) hover */
    .btn-default:hover, .btn-default:active, .btn-default:focus {
        border: solid 1px #d5001c;
        background-color: #d5001c !important;
        outline: none;
        color: #ffffff;
    }

    /* style for default buttons (grey) when in 'ghost' mode */
    .btn-default.ghost {
        border: solid 1px #403f45;
        background-color: #ffffff;
        color: #403f45;
    }

        /* change colours on default buttons (grey) hover when in 'ghost' mode */
        .btn-default.ghost:hover, .btn-default.ghost:active, .btn-default.ghost:focus {
            border: solid 1px #d5001c;
            background-color: #ffffff !important;
            outline: none;
            color: #d5001c;
        }



/* ??? */
.btn-responsive {
    white-space: normal !important;
    word-wrap: break-word;
}

/*
    Fix for buttons on the page acting as a next/update accordion button where we are
    hooking into events on the button and thus not wanting an icon inside it
*/
button.porsche-arrow:before, a.porsche-arrow:before {
    font-family: "pag-iconfont";
    content: '\e024';
    margin: 0 5px 0 -5px;
    font-size: 14px;
}

.input-group-addon {
    background-color: #950014;
    color: #ffffff;
    font-size: 18px;
    width: 50px;
    height: 34px;
}

    .input-group-addon:hover, .input-group-addon:active {
        background-color: #d5001c;
        cursor: pointer;
    }

/* FORMS */
/* default 'grey-box' style for all forms */
.form {
    margin-bottom: 20px;
    padding: 0;
}

@media (min-width: 768px) {
    /* on non-mobile devices, add padding to the top and bottom of forms */
    .form {
        padding: 15px 0;
    }
}

/* default styling for form sections */
.form .form-section {
   /* background-color: #eff0f1;*/
    padding: 15px;
    margin-bottom: 10px;
}

    /* default styling for sub-headings in form-sections */
    .form .form-section h3 {
        font-family: PorscheNextWLa;
        font-size: 24px;
        margin: 0;
        margin-bottom: 30px;
    }

@media (min-width: 768px) {
    /* on non-mobile devices, increase the padding on form sections */
    .form .form-section {
        padding: 40px;
    }
}

/* default styling for form groups */
.form .form-section .form-group {
    /*border-top: solid 1px #c8cacb;*/
    padding: 20px 0 0;
    margin: 0;
}

/*overriding form group default for no border*/
.form .form-section .form-group-no-border {
    border-top: none;
    padding: 0;
    margin: 0;
}

/* empty form groups should have additional white space below */
.form .form-section .form-group.empty {
    margin-bottom: 20px;
}

/* default positioning for an input row */
.form .form-section .form-group .input-row {
    margin-bottom: 20px;
    min-height: 34px;
}

/* ensure 'input column' has correct spacing */
.form .form-section .form-group .input-col {
    padding: 0;
    padding-bottom: 10px;
}

    /*on mobile devices, where input cols should be displayed inline ensure there is right padding */
    .form .form-section .form-group .input-col.inline {
        padding-right: 15px;
    }

    /* ensure last 'input column' has correct spacing */
    .form .form-section .form-group .input-col:last-of-type {
        padding-bottom: 0;
    }

@media (min-width: 768px) {
    /* on non-mobile devices, remove the bottom padding from all input cols */
    .form .form-section .form-group .input-col {
        padding-bottom: 0;
/*        padding-right: 15px;*/
    }

        .form .form-section .form-group .input-col.last {
            padding-right: 15px !important;
        }
}

/* columns inside form groups should not have any padding */
.form .form-section .form-group .input-row > .col-sm-4,
.form .form-section .form-group .input-row > .col-sm-6,
.form .form-section .form-group .input-row > .col-sm-8,
.form .form-section .form-group .input-row > .col-sm-12 {
    padding: 0;
}

    /* on mobile devices, the first column should have a bottom margin to maintain space between labels and inputs */
    .form .form-section .form-group .input-row > .col-sm-4:first-child,
    .form .form-section .form-group .input-row > .col-sm-6:first-child,
    .form .form-section .form-group .input-row > .col-sm-8:first-child,
    .form .form-section .form-group .input-row > .col-sm-12:first-child {
        margin-bottom: 15px;
        padding-right: 15px;
    }

@media (min-width: 768px) {
    /* on non-mobile devices, the first column should remove the bottom margin */
    .form .form-section .form-group .input-row > .col-sm-4:first-child,
    .form .form-section .form-group .input-row > .col-sm-6:first-child,
    .form .form-section .form-group .input-row > .col-sm-8:first-child,
    .form .form-section .form-group .input-row > .col-sm-12:first-child {
        margin-bottom: 0;
    }
}

.form .form-section .form-group-no-border label {
    margin-bottom: 20px;
}

/* applies vertical margins to text blocks inside a form but outside of a form-section */
.form .form-information-block {
    margin: 50px 0;
}

/* default styling for form actions */
.form .form-actions {
    text-align: left;
}

.form .form-section .form-actions {
    padding: 0px 0 20px;
    /*border-top: solid 1px #c8cacb;*/
}

@media(max-width: 767px) {
    .form .form-actions .left {
        margin-top: 10px;
    }

    /* Make buttons inside a form-actions 50% width so they are side by side */
    /*.form .form-actions button,
    .form .form-actions button,
    .panel-heading button {
        width: 49% !important;
    }*/

    /* Make buttons inside a panel-heading 100% width */
    .panel-heading .btn {
        width: 100%;
    }
}

@media(min-width: 768px) {
    .form .form-actions .left {
        float: left;
    }
}

/* default form labels to align left and on mobile-devices have a greater line height to make space for info icons */
.form label {
    display: inline;
    text-align: left !important;
    font-family: PorscheNextWLa-Thin;
    line-height: 1.8em;
}

/* fix for font-kerning issue on iOS mobile devices */
/*@media screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 0) {
    .form label {
        letter-spacing: -1px;
    }
}*/

/* The monthly payment label should have a font-size of 26px */
.form label.monthly-payment {
    font-size: 26px;
}

/* the account holder should have a font size of 18px */
.form label.account-holder {
    font-size: 18px;
    word-wrap: break-word;
    margin-right: 20px;
}

/* Allow h3 tags to reduce their margin bottom */
.form h3.small-margin {
    margin-bottom: 14px;
}

/* Normalize the line height back to it's default */
.form label.normalize-line-height {
    line-height: 1.8em;
}

/* Fix for p tags inside a form to look the same as a label but be full width */
.form-group p.form-info {
    font-family: PorscheNextWLa;
    line-height: 1.8em;
    font-weight: bold;
}

.form-group p.foot-note {
    font-family: PorscheNextWLa;
    font-size: 14px;
    line-height: 2.17;
    color: var(--black);
}

/* default styling for inputs and selects on forms */
.form input, .form select, .form textarea {
    
    box-shadow: none;
    font-size: 16px;
    color: var(--black);
}

    .form input[disabled], .form select[disabled] {
        background-color: #eeeeee;
    }

/* Stop text areas from breaking */
.form textarea {
    min-width: 50%;
    max-width: 100%;
    min-height: 34px;
}

.form select {
    background-color: #ffffff;
    padding: 2px 12px 6px;
}

    /* hide the first (disabled) option in all drop-down lists */
    .form select option:first-of-type {
        display: none;
    }


.form-control {
   background: transparent;
   width: 100% !important;
}

/* prevent browser from highlighting fields on focus */
.form-control:focus {
    outline-style: none;
    box-shadow: none;
    border-color: var(--inputBorder);
}

/* positioning for radio buttons on forms */
.form .radio-button {
    display: inline-block;
    margin-right: 40px;
}

    .form .radio-button label {
        max-width: 100%;
    }

/* GO TO QUOTE BUTTON STYLING*/

/* bring in padding and min hieght from defaults that are set on accordion padding headings */
.go-to-quote {
    padding: 20px 15px 0;
    min-height: 36px;
}
    /* on mobile devices, 'Update' buttons should be centred at the bottom of the panel heading */
    .go-to-quote .btn {
        display: block;
        margin: 0 auto;
        width: 100%;
    }

/* on non-mobile devices, 'Update' buttons should be centred vertically on the right of the panel heading */
@media (min-width: 768px) {
    .go-to-quote .btn {
        width: auto;
        position: absolute;
        top: 50%;
        right: 10px;
        margin-top: -16px;
        margin-right: 15px;
    }
}

#get-a-quote-spinner, #go-to-quote-spinner {
    font-size: 16px;
    text-align: right;
}

#go-to-quote-spinner {
    margin-top: 45px;
}

/* JQUERY UI OVERRIDES */
/* override font styles from jquery ui */
.ui-widget {
    font-family: PorscheNextWLa, Arial !important;
    font-size: 16px;
}

/* override border styling on menu */
.ui-menu {
    border: solid 1px #eff0f1;
}

    /* ensure correct margins on active menu items */
    .ui-menu .ui-state-active {
        margin: 0;
    }

    /* ensure correct borders and spacing on menu items */
    .ui-menu .ui-menu-item {
        padding: 0;
        border: none !important;
    }

        /* ensure correct spacing on menu item wrappers */
        .ui-menu .ui-menu-item .ui-menu-item-wrapper {
            padding: 6px 12px;
        }

            /* add red highlight to font on hovered menu item wrapper */
            .ui-menu .ui-menu-item .ui-menu-item-wrapper:hover {
                color: #d5001c !important;
            }

            /* remove borders on menu item wrapper */
            .ui-menu .ui-menu-item .ui-menu-item-wrapper, .ui-menu .ui-menu-item .ui-menu-item-wrapper.ui-state-active {
                border: none !important;
            }

@media (min-width: 768px) {
    /* on non-mobile devices - labels should have a max-width to ensure wrapping doesn't overlap info icons */
    .form label, .form span.check-box {
        display: inline-block;
        max-width: 80%;
        line-height: 34px;
        margin-bottom: 0;
    }
}

/* default form error styling */
.form span.error {
    color: #d5001c;
    margin: 15px 0;
    float: left;
    clear: both;
}

/* default form select and input styling */
.form select.error, .form input.error, .form textarea.error {
    border: 1px solid #d5001c;
}

/* default form well styling */
.form .well {
    padding: 0;
    background-image: none;
    background-color: #ffffff;
    min-height: 230px;
    border-radius: 4px;
}

    /* ensure user feedback when hovering a well on a form */
    .form .well:hover {
        cursor: pointer;
    }

    /* ensure images in wells are full width */
    .form .well img, mini-well img {
        width: 100%;
    }

    /* positioning for text inside a form well */
    .form .well p {
        margin: 5px 20px 10px 20px;
        text-align: center;
    }

/* ensure selected form item is highlighted */
/*.form .selected {
    outline: 2px solid var(--black);
    padding-left: 7px;
    position: relative;
    right: 7px;
}

    .custom-radio {
       margin-bottom: 5px !important;
    }*/

.card-selected {
    border: 2px solid var(--black);
}


/* default styling for form info well (detail panel) */
.form .info-well {
    background-color: #ffffff;
    padding: 10px;
    margin-bottom: 15px;
    border: solid 1px #b5b4ba;
}

    /* default styling for close icon in form info well */
    .form .info-well i {
        float: right;
        cursor: pointer;
        z-index: 1000;
    }

    /* default styling for text in form info well
       Override default margin for 'p' (.less) as was proving too much spacing
        padding either side of the p to prevent unwanted wrapping align nicely
    */

    .form .info-well p {
        text-align: center;
        margin: 0px !important;
        padding: 0px 10px 10px 10px;
    }

/* Fix for info-well blocks not being displayed properly on Tablets  */
div.info-well-block {
    display: inline;
}

@media (min-width: 992px) {
    div.info-well-block {
        display: block;
    }
}

/* remove padding on manual vehicle selection list */
.form #manual-vehicle-selection-list {
    padding-right: 0;
}

    /* default styling for manual vehicle selection list */
    .form #manual-vehicle-selection-list .list-group {
        height: 200px;
        overflow-y: scroll;
        border: solid 1px #b5b4ba;
        background-color: #ffffff;
    }

        /* default styling for manual vehicle selection list items */
        .form #manual-vehicle-selection-list .list-group .list-group-item {
            border: none;
            border-radius: 0;
            padding: 8px 15px;
            cursor: pointer;
        }

            /* change colours on manual vehicle selection list item when hovered */
            .form #manual-vehicle-selection-list .list-group .list-group-item:hover {
                background-color: #b5b4ba;
            }

    /* change colours on manual vehicle selection list item when selected */
    .form #manual-vehicle-selection-list .list-group-item.selected, .form #manual-vehicle-selection-list .list-group-item.selected:hover {
        background-color: #b5b4ba;
        color: #ffffff;
    }

#selected-vehicle {
    width: 100%;
    text-align: right;
}

    #selected-vehicle p:first-of-type {
        margin-bottom: 0;
    }

#selected-vehicle-details {
    font-size: 21px;
}

/* PORSCHE HEADER */
.m-00-header {
    height: 70px;
    background-color: #ffffff;
    text-align: center;
    position: relative;
    z-index: 2;
    font-size: 0;
    box-sizing: border-box;
    display: block;
    clear: both;
}

.m-00-header-lined-crest {
    float: left;
    width: 100%;
    text-align: center;
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 1.625em;
    font-family: "PFranklinGothicCnd", Arial, sans-serif;
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    min-height: 1px;
}

@media (min-width: 768px) {
    .m-00-header-lined-crest:before {
        right: 242px;
        content: '';
        border-bottom: 1px solid #eff0f1;
        font-size: 0;
        position: absolute;
        bottom: 16px;
        right: 0;
        left: 0;
        height: 1px;
        overflow: hidden;
        z-index: -1;
    }
}

.m-00-crest-wrapper {
    background-color: #ffffff;
    display: inline-block;
    height: 100%;
    z-index: 1;
    padding-left: 26px;
    padding-right: 26px;
    text-align: center;
}

.m-00-crest {
    text-align: left;
    text-indent: -119988px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-image: url(/Content/Images/porsche-marque-rgb-digital_S-L_R.svg);
    width: 126px;
    height: 76px;
    background-size: 126px 76px;
    display: inline-block;
}

@media (min-width: 768px) {
    .m-00-header {
        height: 90px;
    }

    .m-00-crest {
        margin-top: 10px;
    }
}

/* add whitespace below the header on pages without navigation */
.header-spacer {
    height: 15px;
    min-height: 15px;
}

/* CONNEXUS */
/* home page section links need white space above */
#section-links {
    margin-top: 20px;
}

    /*Add space between images for mobile site*/
    #section-links img {
        margin-top: 20px;
    }

/* Override default underline of link*/

.section-link, .section-link:hover {
    text-decoration: none !important;
}

/* Makes the links appear on top of the image*/
#section-links .section-link-text {
    text-decoration: none;
    color: #ffffff;
    font-family: PorscheNextWLa;
    position: relative;
    font-size: 18px;
    bottom: 10px;
    -webkit-transition: color 0.2s linear;
    -moz-transition: color 0.2s linear;
    -o-transition: color 0.2s linear;
    transition: color 0.2s linear;
}

    /* Change the colour to red when the links are hovered over*/
    #section-links .section-link-text:hover {
        background-color: var(--faqGrey);
    }

/*Ensure the icon stays to the bottom left of the text and over the image*/
#section-links .porsche-icon-arrow-right {
    display: inline-block;
    color: #d5001c;
    font-size: 18px;
}

/*No extra margin above images when they sit alongside each other*/
#section-links img {
    margin-top: 0px;
}

/*Ensure the icon stays to the bottom left of the text and over the image*/
#section-links .porsche-icon-arrow-right {
    font-size: 24px;
}

#section-links .section-link-text {
    left: 8px;
    font-size: 28px;
    bottom: 60px;
}

/* Due to issues with iPhones we had to use relative positioning
       Therefore had to target each bootstrap media query to size and position correctly
    */

@media (max-width:1200px) {
    /* Set font size and positioning */
    #section-links .section-link-text {
        font-size: 18px;
        bottom: 35px;
    }

    /* Set font size of arrow*/
    #section-links .porsche-icon-arrow-right {
        font-size: 16px;
    }
}

@media (max-width:768px) {
    /* Set font size and positioning */
    #section-links .section-link-text {
        font-size: 18px;
        bottom: 40px;
    }

    /* Set font size of arrow*/
    #section-links .porsche-icon-arrow-right {
        font-size: 16px;
    }
}

@media (max-width:480px) {
    /* Set font size and positioning */
    #section-links .section-link-text {
        font-size: 18px;
        bottom: 37px;
    }

    /* Set font size of arrow*/
    #section-links .porsche-icon-arrow-right {
        font-size: 16px;
    }
}

@media (max-width:320px) {
    /* Set font size and positioning */
    #section-links .section-link-text {
        font-size: 16px;
        bottom: 28px;
    }

    /* Set font size of arrow*/
    #section-links .porsche-icon-arrow-right {
        font-size: 14px;
    }
}

@media (max-width:240px) {
    /* Set font size and positioning */
    #section-links .section-link-text {
        left: 0px;
        font-size: 16px;
        bottom: 28px;
    }

    /* Set font size of arrow*/
    #section-links .porsche-icon-arrow-right {
        font-size: 14px;
    }
}

/* footer should fill the screen width */
#footer {
    background-color: var(--footerBG);
    color: #ffffff;
    font-size: 16px;
    margin-top: 20px;
    padding: 20px;
}

@media (min-width: 768px) {
    #footer {
        padding: 40px 10%;
    }
}

@media (min-width: 1460px) {
    #footer {
        width: 100% !important;
        margin: 20px auto 0;
    }
}

/* footer heading */
#footer h4 {
    font-family: PorscheNextWLa-Thin;
    color: var(--white);
    margin-bottom: 20px;
    font-weight:600;
}

/* footer hr */
#footer hr {
    margin: 30px 0;
    border: none;
    border-top: solid 1px #737278;
}

/* base style for footer navigation */
.footer-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

    /* footer navigation list items should display inline and be pipe-separated */
    .footer-nav li {
        display: block;
        padding-bottom: 10px;
    }

        /* footer navigation anchors should be white */
        .footer-nav li a {
            color: #ffffff;
          
        }

            .footer-nav li a:hover, .footer-nav li a.active {
                background-color: var(--footerLinkGrey);
            }

@media (min-width: 768px) {
    /* footer navigation list items should display inline and be pipe-separated */
    .footer-nav li {
        display: inline-block;
        border-left: solid 1px #ffffff;
        padding: 0 5px 0 7px;
    }

        /* first footer navigation item should have no left border or padding */
        .footer-nav li:first-child {
            border-left: none !important;
            padding-left: 0;
        }
}

/* STANDARD TEXT PAGE */
.standard-text-page h1, .standard-text-page .content-block {
    padding-left: 40px;
    padding-right: 40px;
}

@media (min-width:460px) {
    .standard-text-page h1, .standard-text-page .content-block {
        padding-left: 80px;
        padding-right: 80px;
    }
}

@media(min-width:992px) {
    .standard-text-page h1, .standard-text-page .content-block {
        padding-left: 150px;
        padding-right: 150px;
    }
}

@media(min-width:1460px) {
    .standard-text-page h1, .standard-text-page .content-block {
        padding-left: 340px;
        padding-right: 340px;
    }
}

.standard-text-page h3 {
    font-size: 22px;
    line-height: 1.36;
    margin-top: 30px;
    margin-bottom: 20px;
}

.standard-text-page ul, .standard-text-page ol {
    padding-left: 0;
    margin-left: 18px;
    margin-bottom: unset;
}

    .standard-text-page ul li, .standard-text-page ol li {
        padding-left: 16px;
        padding-bottom: 8px;
    }

/* CONTENT BLOCK */
/* on mobile devices, content block call to action should be 100% wide */
.content-block .btn {
    margin: 15px 0;
    width: 100%;
}

@media (min-width: 768px) {
    /* on non-mobile devices, reset the content block call to action width */
    .content-block .btn {
        width: auto !important;
    }
}

/* INFO GRID */
/* default styling for the info grid */
.info-grid {
    /*background-color: #403f45;*/
    color: #ffffff;
}

    /* allow contents of info grid to reach the edge of the content area */
    .info-grid .grid-container {
        margin: 0 -8px;
    }

    .info-grid h2 {
        color: #ffffff;
    }

        /* ensure info grid section headings have the correct background colour */
        .info-grid h2 span {
            /*background-color: #403f45;*/
        }

    /* apply padding to all info grid info blocks */
    .info-grid .info-block {
        padding-left: 8px !important;
        padding-right: 8px !important;
        padding-bottom: 16px !important;
    }

        /* links in info blocks are white */
        .info-grid .info-block a {
            color: #ffffff;
            text-decoration: none;
        }

            /* add red underline when a user hovers the info block */
            .info-grid .info-block a:hover span {
                border-bottom: solid 2px #d5001c;
            }

        /* default info block link style */
        .info-grid .info-block span {
            display: block;
            padding: 19px 27px;
            font-family: PorscheNextWLa-Thin;
            opacity: 0.9999;
            background-color: rgb(0, 0, 0); /* degrade opacity nicely on older browsers */
            background: rgba(0, 0, 0, 0.8);
            margin-top: -62px;
            overflow: hidden;
            white-space: nowrap;
            border-bottom: solid 2px transparent;
        }

            .info-grid .info-block span.active {
                border-bottom: solid 2px #d5001c;
            }

/* scale info block links on mobile devices */
@media (min-width: 768px) {
    .info-grid .info-block span {
        font-size: 13px;
        padding: 15px 13px 13px;
        margin-top: -48px;
    }
}

/* scale info block links on tablets */
@media (min-width: 992px) {
    .info-grid .info-block span {
        font-size: 14px;
        padding: 15px 15px 13px;
        margin-top: -50px;
    }
}

/* scale info block links on small desktops */
@media (min-width: 1200px) {
    .info-grid .info-block span {
        font-size: 17px;
        padding: 19px 27px 17px;
        margin-top: -62px;
    }
}

/* reset info block links on large desktops */
@media (min-width: 1440px) {
    .info-grid .info-block span {
        font-size: 18px;
        padding: 14px 27px 12px;
        margin-top: -53px;
    }
}

/* force info block chevron to the right */
.info-grid .info-block span i {
    float: right;
    margin-top: 4px;
}

/* default positioning for info block content panels (hidden by default) */
.info-grid .info-block-content {
    margin-top: -15px;
    margin-bottom: 15px;
    padding: 0 8px;
    display: none;
}

    /* info block content styling */
    .info-grid .info-block-content .info-block-content-container {
        background-color: #ffffff;
        color: var(--black);
        padding: 30px 15px;
    }

    /* info block content close icons */
    .info-grid .info-block-content a.close-icon {
        position: absolute;
        float: right;
        top: 15px;
        right: 20px;
        font-size: 18px;
        cursor: pointer;
        z-index: 98;
    }

    /* info block content headings */
    .info-grid .info-block-content h3 {
        font-family: PorscheNextWLa;
        margin-top: 0px;
    }

    /* on mobile devices, only show the info block content text */
    .info-grid .info-block-content a.close-icon, .info-grid .info-block-content h3 {
        display: none;
    }

@media (max-width: 991px) {
    .info-grid .info-block-content a.close-icon {
        top: 5px;
        right: 10px;
    }
}

@media (max-width: 768px) {
    .info-grid .info-block-content .infoGridImageWrapper {
        display: none;
    }
}

@media (min-width: 768px) {
    /* on non-mobile devices, ensure the info block content has a top margin */
    .info-grid .info-block-content {
        margin-top: 0;
    }

        /* on non-mobile devices, display the full info block content */
        .info-grid .info-block-content a.close-icon, .info-grid .info-block-content .col-md-7, .info-grid .info-block-content h3 {
            display: block;
        }
}

/* DOCUMENT LINKS */
/* on mobile devices, doc link text should be smaller */
/*.doc-links {
    margin-bottom: 20px;
    min-height:200px
}
*/
    /* default styling for document links */
    .doc-links .document a {
        /*display: block;*/
        font-family: PorscheNextWLa;
        font-size: 18px;
        margin-bottom: 10px;
        margin-left: 30px;
        display: inline; /* Ensure the a tag behaves as a flex container */
        align-items: center; /* Vertically center align items */
    }

        /* document links should turn red on hover */
        .doc-links .document a:hover {
           /* color: #d5001c;*/
        }

    /* positioning of document links icon */
   /* .doc-links .document i {
        float: left;
        font-size: 18px;
        margin-top: 4px;
    }*/

    /* positioning of document additional info */
    .doc-links .document p {
        margin-left: 30px;
        margin-bottom: 20px;
    }

.document svg {
    margin-right: 0.1em; /* Optional: Adds space between the SVG and the text */
    vertical-align: middle; /* Vertically align the SVG to the middle */
}

@media (min-width: 768px) {
    /* on non-mobile devices, the doc links section should have no bottom margin */
    .doc-links {
        margin-bottom: 0;
        padding-left:0px;
    }
}

/* wait spinner 'span' container */
/*.wait-spinner {
    margin: 10px 0;
}*/

/* animations for wait-spinner */
/*@keyframes infinite-spinning {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}*/

/* wait spinner - used on asynchronous calls from the client to the server for user feedback */
/*.wait-spinner img {
    display: inline-block;
    animation: infinite-spinning 2s linear infinite;
}*/

/* please wait for recalculating a quote */
.quote-please-wait {
    text-align: center;
    padding: 10px 0;
    font-size: 20px;
}

#confirm-checkbox label {
    display: inline;
    line-height: 2em;
    margin-left: 10px;
}

/* Claims List */
.additional-item-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .additional-item-list li {
        overflow: hidden;
        margin-bottom: 15px;
    }

        .additional-item-list li div {
            background-color: #ffffff;
            line-height: 52px;
            padding: 11px 19px 11px 28px;
            margin-bottom: 10px;
            width: 100%;
        }

            /* ensure the claim remove icon shows a pointer cursor */
            .additional-item-list li div.additional-item-summary i {
                cursor: pointer;
            }

            .additional-item-list li div.additional-item-cancel {
                z-index: 2001; /* Needs to be higher than the confirm-overlay class */
                position: relative;
            }

                .additional-item-list li div.additional-item-summary span.edit, .additional-item-list li div.additional-item-cancel span.edit {
                    display: block;
                    text-align: right;
                }

@media (min-width: 992px) {
    .additional-item-list li div.additional-item-summary span.edit, .additional-item-list li div.additional-item-cancel span.edit {
        float: right;
    }

    .additional-item-list li div {
        background-color: #ffffff;
        line-height: 52px;
        padding: 3px 10px 2px 7px;
        margin-bottom: 0px;
        width: unset;
    }
}

@media only screen and (min-device-width: 960px) {
    .additional-item-list li div {
        background-color: #ffffff;
        line-height: 52px;
        padding: 3px 10px 2px 7px;
        margin-bottom: 0px;
        width: unset;
    }
}

.confirm-overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    background-color: rgba(100,100,100, 0.5);
}

/* TOOLTIP */
.tooltip-inner {
    max-width: 100%;
    background-color: rgb(211, 225, 255) !important;
    color:var(--black);
    padding: 15px;
    font-size: 1em;
    margin-top: -10px;
    margin-bottom: 10px;
    display: none;
}

    .tooltip-inner div {
        width: 0 !important;
        height: 0 !important;
    }

    .tooltip-inner i {
        float: right;
        cursor: pointer;
    }

    .tooltip-inner p {
        text-align: left;
    }

        .tooltip-inner p a {
            color: #ffffff;
            text-decoration: underline;
        }

.tooltip-info-icon {
    
    color: var(--black);
    border:1px solid var(--black);
/*    margin-top: 6px;*/
    padding: 0.35em 0;
/*    margin-left: 10px;*/
/*    margin-right: 15px;*/
    border-radius: 20px;
    width: 20px;
    height: 20px;
    line-height:0.6em!important;
}

    .tooltip-info-icon:hover {
        cursor: pointer;
    }

.tooltip-offset {
    margin-left: 0;
}

@media only screen and (min-width: 768px) {
    .tooltip-offset {
        margin-left: -10px;
    }

    .tooltip-info-icon {
        padding: 0;
        margin-left: 20px;
        font-size: 15px;
        line-height:1.2em !important;
    }
}

span[tooltip="#additionalVehiclesTooltip"] {
    float: none;
}
/* Contact container */
div.contact-container {
    background-color: #ffffff;

    text-align: center;
    padding: 35px 0;
    border: solid 2px var(--inputBorderGrey);
    border-radius:4px;
}

    div.contact-container:hover, div.contact-container:hover {
        cursor: pointer;
        border-color:var(--black);
    }

    div.contact-container.active {
        background-color: var(--ghostButton);
        color: var(--black);
    }

.contact-container i {
    font-size: 32px;
}

/* Contact Details */

.contact-detail-item {
    padding: 20px;
}

    .contact-detail-item h3 {
        margin-top: 10px;
    }

        /* ensures phone number links keep the intended style */
        .contact-detail-item h3 span a {
            font-family: PorscheNextWLa;
            color: var(--black);
            text-decoration: none;
            font-size: 32px;
        }

    /* default positioning for contact detail item on mobile devices */
    .contact-detail-item .contact-detail {
        display: block;
    }

/* Stying for telephone image*/
.contact-details-telephone {
    float: right;
    margin-top: 14px;
    visibility:hidden;
}

/* Spacing for contact detail links */
.contact-detail-link {
    margin: 5px auto 5px auto;
    width: 230px;
    text-align: left;
}

.contact-details-image-wrapper {
    padding-right: 50px !important;
}

@media (min-width: 992px) {
    /* alter positioning for contact detail item on non-mobile devices */
    .contact-detail-item .contact-detail {
        display: inline;
    }
}

/*Step 1: Vehicle for Car insurance and drive away */
/*VEHICLE / CAR WEB RESULT DISPLAY */

/* hide the vehicle lookup and manual entry forms initially */
#vehicle-lookup-accordion, #vehicle-manual-entry-accordion {
    display: none;
}

#regplatelookup-container {
}

/* regplate container to hold all the reg plate controls has a gap from the top of the page form section. */
#regplate-container {
    display: block;
}

/* The regplate box default styling */
#regplate-details {
    background-color: var(--faqGrey);
    font-family: PorscheNextWLa;
    font-size: 30px;
    line-height: 1.42;
    text-align: left;
    border: 2px solid black;
    border-radius: 4px;
    color: var(--black);
    padding:20px 5px 20px 15px;
}

    #regplate-details .selected-vehicle-label {
        border: solid 1px #950014;
        padding: 36px 15px;
        font-size: initial;
        background-color: #950014;
        color: white;
    }

    /* Padding on the text to align center. Brought from zepplin template!
    Removes defualt margin on p tag.
*/
    #regplate-details p {
       /* padding: 29px 29px 25px 29px;*/
        margin: 0 !important;
    }

/* Error message styling for failed vehicle lookup */
#regplate-errormessage {
    display: inline-block;
    color: #d5001c;
    line-height: 1.71;
    text-align: left;
    padding: 3px;
    width: 100%;
}

    /* Override defualt magrgin on error text*/
    #regplate-errormessage p {
        margin: 0;
    }

#regplate-tryagain {
    display: inline-block;
    line-height: 1.71;
    text-align: left;
    padding: 10px 3px;
    width: 100%;
}

/* Enables the links to be displayed below the error message or regplate corretly*/
#regplate-links {
    display: block;
    padding-top: 20px;
    padding-left:15px;
    text-align: left;
}

    /* Centers the link text so it aligns correctly */
    #regplate-links ul {
        text-align: center;
        padding: 0px !important;
    }

    /* Removes defulat styling of the li, and applies our spacing  */
    #regplate-links li {
        list-style-type: none;
        padding-bottom: 15px;
    }

/*applies the red border color when a error class is added to be regplate-container */
#regplate-container .error {
   /* border: solid 1px #d5001c;*/
}

/* JOURNEY NAVIGATION */

#journey-navigation {
    background-color: #403f45;
    margin-top: -20px;
    margin-bottom: 20px;
    padding: 0 !important;
    font-size: 0.55em;
}

@media (min-width: 768px) {
    #journey-navigation {
        font-size: 1em;
    }
}

#journey-navigation .nav-pills {
    margin: 0 !important;
    padding: 0 !important;
}

#journey-navigation .nav > li {
    padding: 0 !important;
}

    #journey-navigation .nav > li:first-of-type {
        display: none;
    }

@media (min-width: 768px) {
    #journey-navigation .nav > li:first-of-type {
        display: inline-block;
    }
}

#journey-navigation .nav-pills li, #journey-navigation .nav-pills li span.step {
    margin: 0;
    color: #ffffff;
    border: none !important;
    border-width: 0 !important;
    border-radius: 0;
}

    #journey-navigation .nav-pills li span, #journey-navigation .nav-pills li span.step {
        display: block;
        padding: 14px 20px;
    }

#journey-navigation span.step {
    color: #ffffff;
}
/* we want to ensure that the 'active' tab doesn't appear to be clickable. */
#journey-navigation li.active span.step:hover {
    cursor: default !important;
}

#journey-navigation span.step:hover {
    cursor: pointer;
    color: #d5001c !important;
}

#journey-navigation .nav-pills > li.active > span.step {
    background-color: var(--inputBorder);
    color: #ffffff !important;
}

#journey-navigation li.active > span.step:before {
    width: 0;
    height: 0;
    border-top: 8px inset transparent;
    border-bottom: 8px solid #ffffff;
    border-left: 8px inset transparent;
    border-right: 8px inset transparent;
    position: absolute;
    content: "";
    bottom: 0;
    left: 50%;
    margin-left: -8px;
}



/* STICKY NAV */
/* provide a container for the sticky navbar */
#sticky-container {
    height: 50px;
    background: #ffffff;
    box-sizing: border-box;
    z-index: 99 !important;
    padding-top: 0px;
}

/* add a bottom border to the sticky-container when the sticky navbar injects the .is-sticky class */
#sticky-container-sticky-wrapper.is-sticky #sticky-container {
    border-bottom: solid 1px #eff0f1;
}

/* override the default bootstrap nav element */
nav#sticky-navbar {
    border: none;
}

    /* Disable the default bootstrap collapse / stack navigation on responsive for our menu only */
    nav#sticky-navbar .navbar-collapse.collapse {
        display: block !important;
    }

/* bootstrap override to ensure sticky-navbar container uses full screen width */
#sticky-navbar .container-fluid {
    margin: 0 !important;
    padding: 0 !important;
    min-width: 252px !important;
}

/* bootstrap override to correctly position sticky-navbar and list items */
#sticky-navbar .navbar-nav, #sticky-navbar .navbar-nav > li {
    /*float: left !important;*/
}

/* set colour and white space on 'home' menu */
#sticky-nav-home, #sticky-nav-home .dropdown-menu {
    background-color: #403f45;
    white-space: normal;
}

    /* change background colour on 'discover' menu hover */
    #sticky-nav-home:hover {
        color: #d5001c;
    }

/* set colour on 'discover' menu */
#sticky-nav-discover {
    background-color: #950014;
}
    /* change background colour on 'discover' menu hover */
    .nav .open > a, #sticky-nav-discover:hover {
        background-color: #403f45;
        color: #d5001c !important;
    }

    /* ensure default font colour for links is white */
    #sticky-nav-home a, #sticky-nav-discover a {
        color: #ffffff;
        text-decoration: none;
    }

    /* ensure top-level sticky nav retains correct colours when using submenu */
    #sticky-nav-home:hover > a, #sticky-nav-discover:hover > a,
    .sticky-nav-submenu a:focus, .sticky-nav-submenu a:hover {
        color: #d5001c;
        background-color: #403f45;
    }

/*Revert back to the original bootstrap for sticky nav*/
/* specific padding for sticky-nav 'nav' list items */
#sticky-nav > li {
    position: relative;
    display: block;
    padding: 0;
}

    /* specific for sticky-nav anchors in 'nav' list items */
    #sticky-nav > li > a {
        position: relative;
        display: block;
        padding: 15px 5px 15px 5px;
        color: #ffffff;
        text-decoration: none;
        text-shadow: none;
    }

/* STICKY NAV > DROP DOWN MENU STYLING */

/*Our custom styling for the drop down menus of our nav*/

/* bootstrap overrides for dropdown-menu */
.sticky-nav-submenu .dropdown-menu {
    border: 0;
    border-radius: 0 !important;
    box-shadow: none;
    z-index: 99 !important;
}

    /* bootstrap override for dropdown-menu li */
    .sticky-nav-submenu .dropdown-menu > li {
        padding: 0px;
    }

/* Set both menus position to static when they are opened.
    This is so the width can be picked up and made 100% for both mobile and desktop.
    Lends it set to the dropdown.fill and dropdown.full with helpers
*/
#sticky-nav > li.dropdown.open {
    position: static !important;
}

/* bootstrap override to ensure top-level sticky-nav takes correct background colour */
#sticky-nav-discover .dropdown-menu, #sticky-nav.nav #sticky-nav-discover.open > a, #sticky-nav.nav #sticky-nav-discover.open > a:hover {
    background-color: #403f45;
}

    /* bootstrap override to ensure dropdown-menu sticky-nav takes correct font colour */
    #sticky-nav-discover .dropdown-menu a {
        color: #ffffff;
        text-decoration: none;
    }

/* bootstrap override to ensure top-level sticky-nav takes correct background colour */
#sticky-nav-home #sticky-nav-home .dropdown-menu,
#sticky-nav.nav #sticky-nav-home.open > a,
#sticky-nav-home a:first-child:hover,
#sticky-nav.nav #sticky-nav-home.open > a:hover {
    background-color: #403f45;
}

/* bootstrap override to ensure dropdown-menu sticky-nav takes correct font colour */
#sticky-nav-home .dropdown-menu a {
    color: #ffffff;
    text-decoration: none;
}

/* bootstrap override for dropdown-menu padding */
#sticky-nav .dropdown-menu {
    padding: 0;
}

    /* LESS override for background colour for active element in dropdowns */
    #sticky-nav .dropdown-menu > li.active,
    #sticky-nav .dropdown-menu > .active > a {
        background-color: #d5001c;
        background-image: none;
        border-top-color: #d5001c;
        color: #ffffff;
        text-decoration: none;
    }

/* Make the icon color red by default */
#sticky-nav-discover ul li i {
    color: #d5001c;
}

/* Make the icon color white if it is active or on hover */
#sticky-nav-discover ul li.active i,
#sticky-nav-discover ul li:hover i {
    color: #ffffff;
}

/* Set the border of the child next to our acitive li to the background colour*/
#sticky-nav .previous-child-is-active {
    border-top-color: #403f45;
}

/* bootstrap override for spacing of dropdown-menu items */
.sticky-nav-submenu .dropdown-menu-left a {
    padding: 10px 15px;
}

/* REMOVE */
/* add spacer line between dropdown-menu items */
/*.sticky-nav-submenu .dropdown-menu > li:nth-child(n+2) a {
    border-top: 1px solid #403f45;
}*/

/* override spacer line between dropdown-menu items when hovered */
#sticky-nav .previous-child-is-active:hover,
.sticky-nav-submenu .dropdown-menu > li:nth-child(n+2):hover,
.sticky-nav-submenu .dropdown-menu > li:nth-child(n+2):hover a {
    border-top-color: #d5001c;
    color: #ffffff !important;
    text-decoration: none;
}

/* bootstrap override for dropdown-menu items when hovered */
.sticky-nav-submenu .dropdown-menu > li:hover,
.sticky-nav-submenu .dropdown-menu li > a:hover {
    background-image: none;
    background-color: #d5001c !important;
    color: #ffffff !important;
}

/* STICKY NAV ICONS */
/* Float all icons left so that they will line up horizontially with text */
/* Also applies animation to icons */
#sticky-nav i {
    float: left;
    -webkit-transition-duration: 0.25s;
    -moz-transition-duration: 0.25s;
    -o-transition-duration: 0.25s;
    transition-duration: 0.25s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
}

/* Force the text next to a icon not to overflow or wraps.
    So that each item in the li remains the same hieght.*/
#sticky-nav span {
    overflow: hidden;
    white-space: nowrap;
    display: block;
}

/* The main menu icons font size is bigger than the submenus
    Overrides the default that has been set*/
#sticky-nav-home i, #sticky-nav-discover i {
    font-size: 22px !important;
}

/* Gives the icons space */
#sticky-nav-discover i {
    margin-left: 15px;
}

/* Gives the spacing between icons and thier text */
#sticky-nav-discover span {
    padding-left: 14px;
}

/* Set the font of submenu icons*/
#sticky-nav-discover .dropdown-menu i {
    font-size: 16px !important;
    color: #ffffff;
}

/* Gives the spacing to line up icons in submenus
    This is because the font of the submenu is smaller than the main icons
*/
#sticky-nav-discover .dropdown-menu li a i {
    margin-left: 12px;
}

/* Gives spacing between submenus span text and icon. */
#sticky-nav-discover .dropdown-menu li a span {
    padding-left: 18px;
    display: block;
    font-size: 16px;
}

/* Force the text next to a icon not to overflow or wraps.
    So that each item in the li remains the same hieght.*/
a#discover-tag span, .dropdown-menu li a span {
    overflow: hidden;
    white-space: nowrap;
}

/*STICKY NAV MEDIA QUERIES*/

/*As we are using bootstrap we have to override some defaults that are set for mobile*/
/*Mainly resetting margins and colors */
/*We also have to allow one part of our menu to expand for responsive. Which has been achive usingt he calc method of css*/
/*This has been avaible since ie 9 and achieves what we need. However need to conform it will work with mobile devies*/
/*See the following for reference: https://www.w3schools.com/cssref/func_calc.asp  */

/* ensure sticky-navbar is 100% wide on mobile */
#sticky-nav {
    width: 100% !important;
}

/* bootstrap override to ensure no margin on sticky-nav */
#sticky-nav {
    margin: 0;
}

/* fix the size and position of the 'home' link */
#sticky-nav-home {
    width: 45px;
    float: left;
}

/* ensure the 'discover' menu fills the screen width on mobile */
#sticky-nav-discover {
    float: left;
    width: calc(100% - 45px);
}

/* ensure the 'home' drop down menu fills the screen width on mobile */
#sticky-nav-home .dropdown-menu {
    width: 100%;
}

/* ensure the 'discover' drop down menu fills the screen width on mobile */
#sticky-nav-discover .dropdown-menu {
    width: calc(100% - 45px);
}

/* padding for every dropdown menu anchors. */
#sticky-navbar .open .dropdown-menu > li > a {
    padding: 10px 15px;
}

@media only screen and (min-width:768px) {
    /*Set the max with of the sticky navbar of screens greater than 768px so that is not*/
    #sticky-navbar {
        padding: 0px;
        max-width: 321px;
    }

    /* ensure the 'discover' dropmenu fills the the same size  as its parent
    due to using the fill and full width helpers it see the width as the full conatiner width of 321px;
    Where we just want it to be the size of the 'discover menu' */
    #sticky-nav-discover .dropdown-menu {
        width: calc(100% - 44.4px) !important;
    }

    /* Override bootstrap nav dropdown function to display dropdown menu on hover*/
    /* Also restrict this to desktop. Mobile devices we still want click functionality!*/
    #sticky-nav li.dropdown:hover > ul.dropdown-menu {
        display: block;
    }
}

/* DROP DOWN MENU HELPER CLASSES */

/* Helper classes to for dropdowns to either be the full width of the nav bar.
   Or fill thier container width */

/* Full width will be the full width of the parent container */
.full-width.dropdown, li.dropdown.open {
    position: static !important;
}

    .full-width.dropdown > .dropdown-menu {
        left: 0;
        right: 0;
        position: absolute;
    }

        .full-width.dropdown > .dropdown-menu > li > a {
            white-space: normal;
        }

/*Fill width will fill the available space of the container */
.fill-width.dropdown {
    position: static !important;
}

    .fill-width.dropdown > .dropdown-menu {
        left: auto;
        position: absolute;
    }

        .fill-width.dropdown > .dropdown-menu > li > a {
            white-space: normal;
        }

/*ADDRESS LOOKUP*/
#address-lookup-result ul {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

    #address-lookup-result ul li {
        display: inline-block;
        margin-right: 10px;
    }

/* hide all angular code until angular is loaded */
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}

/* NCD INFORMATION PAGE STYLING*/

/* First paragraph font size*/
.ncd-first-paragraph {
    font-size: 22px;
}
/* Override of the bootstrap "thead-default" */
.thead-default {
    background-color: #eff0f1;
}

/* Set the border of our table*/
.ncd-table {
    border: 1px solid #eff0f1;
}

    /* Give our table headers a default width of 50% */
    .ncd-table th {
        width: 50%;
    }

/* Some tables dont have headers so we need to set default width and background colour for this */
.ncd-row-only {
    width: 50%;
}

.ncd-section {
    padding-top: 40px;
}

/* Jquery DATEPICKER Overrides */
.ui-datepicker-trigger {
    display: inline-block;
    width: 50px;
    height: 50px;
    position: relative;
    padding: 0;
    padding-top: 4px;
    /* background-color: #d5001c; */
    color: #000;
    border: none;
    border-radius: 0px;
    font-size: 2em;
}

    .ui-datepicker-trigger:hover, .ui-datepicker-trigger:active {
        border: 1px solid #000;
        border-radius: 4px;
    }

/* Credit card styling */
.credit-card {
    border: solid 2px transparent;
    cursor: pointer;
}

    .credit-card.selected {
        border: solid 2px var(--black)!important;
        border-radius: 4px!important;
    }

/* icon styling */
.round-icon {
    background-color: #d5001c;
    color: #ffffff;
    border-radius: 50px;
    margin-right: 29px;
    display: inline-block;
}

/* override default well style for card types */
.card-type-well {
    min-height: initial !important;
    padding: 10px !important;
    text-align: center;
    margin-bottom: 0;
}

   
    /* override default well image style for card type images */
    .card-type-well img {
        width: auto !important;
    }

    /* force card type labels below the card type images */
    .card-type-well .card-type-label {
        display: block;
        letter-spacing: -0.5px;
    }

/* COOKIE BAR STYLING */

#cookie-bar-wrapper {
    position: absolute;
    display: none; /* hidden unless the user needs to confirm acceptance - determined in TS */
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
}

/* The cookie pop up container styling */
#cookie-bar {
    padding-top: 30px;
    padding-bottom: 30px;
    color: #191f22;
    font-size: 12px;
    background-color: #ffffff;
}

    #cookie-bar button {
        width: 100%;
        margin-bottom: 5px;
    }

@media (min-width: 768px) {
    #cookie-bar button {
        width: auto;
        margin: auto;
        margin-right: 5px;
    }

        #cookie-bar button.right {
            margin: 0;
            float: right;
        }
}

.cookieContent {
    margin: 0 auto;
    max-width: 1400px;
}

/* Cookie text position and padding*/
.cookie-bar-text {
    line-height: 18px;
}

#cookie-bar #custom-cookie-preferences {
    display: none;
    padding-top: 15px;
}

    #cookie-bar #custom-cookie-preferences p {
        margin: 0 0 0 130px;
    }

    #cookie-bar #custom-cookie-preferences .preference {
        padding: 12px 0;
    }

    #cookie-bar #custom-cookie-preferences .switch {
        position: relative;
        display: inline-block;
        float: left;
        width: 100px;
        height: 40px;
        margin: 0 30px 0 0;
    }

        #cookie-bar #custom-cookie-preferences .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

    #cookie-bar #custom-cookie-preferences .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #313639;
        padding: 13px 20px;
        font-weight: normal;
        -webkit-transition: .4s;
        transition: .4s;
    }

        #cookie-bar #custom-cookie-preferences .slider .on {
            float: left;
            font-size: 14px;
            color: #ffffff;
        }

        #cookie-bar #custom-cookie-preferences .slider .off {
            float: right;
            font-size: 14px;
            color: #ffffff;
        }

        #cookie-bar #custom-cookie-preferences .slider:before {
            position: absolute;
            content: "";
            height: 30px;
            width: 40px;
            left: 5px;
            bottom: 5px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
        }

    #cookie-bar #custom-cookie-preferences input:checked + .slider {
        background-color: #950014;
    }

    #cookie-bar #custom-cookie-preferences input:disabled + .slider {
        opacity: 0.65;
        cursor: not-allowed;
    }

    #cookie-bar #custom-cookie-preferences input:checked + .slider:before {
        -webkit-transform: translateX(49px);
        -ms-transform: translateX(49px);
        transform: translateX(49px);
    }

/* jQuery UI Datepicker overrides */
/* modify default font */
.ui-datepicker {
    font: 14px PorscheNextWLa-Thin Arial, sans-serif;
    border-radius: 0px;
    color: var(--black);
}

/* modify header to use Porsche fonts and colours */
.ui-datepicker-header {
    background-image: none;
    background-color: #eff0f1;
    border: none;
    border-radius: 0px;
    font-family: PorscheNextWLa-Thin;
    font-size: 16px;
    padding: 5px 0 !important;
}

/* prevent previous month button from moving */
.ui-datepicker-prev {
    top: 0 !important;
    left: 0 !important;
}

/* prevent next month button from moving */
.ui-datepicker-next {
    top: 0 !important;
    right: 0 !important;
}

/* correct spacing on previous and next month buttons */
.ui-datepicker-prev, .ui-datepicker-next {
    margin: 4px !important;
}

/* prevent previous and next buttons from having borders on hover */
.ui-datepicker-prev-hover, .ui-datepicker-next-hover {
    border: none !important;
    cursor: pointer;
    background: none !important;
}

/* modify default font for day names */
.ui-datepicker-calendar th {
    font-family: PorscheNextWLa-Thin;
}

/* modify default styling for date cells, both active and inactive */
.ui-datepicker td span, .ui-datepicker-calendar td a {
    background: none !important;
    background-color: #eff0f1 !important;
    text-align: center;
    height: 30px;
    width: 30px;
    padding: 4px;
    border-radius: 0px;
}

/* modify default styling for 'hover' state */
.ui-datepicker-calendar .ui-state-hover {
    border: solid 1px #000000;
}

.ui-datepicker-calendar .ui-state-disabled span {
    background-color: #eff0f1;
    opacity: 0.5;
}

/* modify default styling for 'today' */
.ui-datepicker-calendar .ui-state-highlight {
    border: solid 1px #d5001c;
    background-color: #ffffff !important;
}

/* modify default styling for selected date */
.ui-datepicker-calendar .ui-state-active {
    border: solid 1px #d5001c;
    background-color: #d5001c !important;
    color: #ffffff !important;
}

/* prevent alternate row styling on disabled dates */
.ui-datepicker-calendar tr {
    background-color: #ffffff !important;
}

/* QUOTE PAGE*/

/*Your quote border, postioning and styling  */
.quote-section h2 span {
    background: none;
    border: none;
    padding: 0 0 26px;
    width: 100%;
    text-align: left;
    border-bottom-color: rgb(204, 204, 204);
    border-bottom-style: solid;
    border-bottom-width: 1px;
}


/* Remove top border of heading in quote section  */
.quote-section h2:before {
    border-top: none;
}

/* Align all headings left and remove margin  */
.quote-section h2 {
    text-align: left;
    margin: 0;
}

.quote-section-account-preferences {
    padding-top: 30px;
    padding-bottom: 30px;
    font-size: 18px;
}

    .quote-section-account-preferences p {
        font-family: PorscheNextWLa-Thin;
        font-size: 18px;
    }

/* QUOTE PAYMENT TYPE SECTION*/
/* As we have a grid similar to info grid we need to set a negative margin.
    Inorder to give us the space to play with for resizing */
.quote-section-payment-info {
    margin: 0 -10px;
}

    /* set th font and text alignment of "Please select how to pay" text */
    .quote-section-payment-info p {
        text-align: center;
        font-family: PorscheNextWLa-Thin;
        font-size: 18px;
    }

/*Styling of annual and monthly payment type boxes / grid*/
.payment-info-type {
    text-align: center;
    border: solid 1px #b5b4ba;
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 18px;
    
}

.payment-info-block ul li  {
    transition: all 0.3s ease;
}

@media (min-width: 768px) {
    .payment-info-type {
        height: 216px;
    }
}

.payment-option-selected {
    border: solid 2px var(--black);
    border-radius:4px;
}

/* Set the padding and list style of both paymnet type grids*/
.payment-info-type ul {
    list-style: none;
    padding-top: 42px;
    padding-bottom: 42px;
    padding-left: 0px;
}

/* background colour of info blocl */
.payment-info-block {
    background-color: #ffffff;
}

/*position of quoted proce text */
.quote-price-text {
    padding-top: 10px;
    font-size: 34px;
    font-weight: bolder;
}

/*styling of quoted price sub text */
.quote-price-sub-text {
    font-size: 14px;
    margin-top: 10px;
}

/* Positiong of the payment type check boxes*/
.payment-info-type .icheckbox_big_minimal-red {
    padding-top: 40px;
    padding-bottom: 30px;
    margin: 0px !important;
}

/* Remove float from error class on a span tag, that is on a span tag by default */
.payment-info-type span.error {
    float: none !important;
}

/* Padding for the pay monthly info box (3rd box)*/
.payment-info-type-table {
    padding: 15px 30px 14px 31px;
}

    /* Styling of the payment info table*/
    .payment-info-type-table table {
        border-collapse: collapse;
        font-size: 16px;
        width: 100%;
    }

    /* Override default background colour for even rows of payment info table*/
    .payment-info-type-table tr:nth-child(even) {
        background-color: #eff0f1;
    }

    /* Set heading and column padding and  line hieght of payment info table */
    .payment-info-type-table th, .payment-info-type-table td {
        padding: 5px 0 3px 0;
        line-height: 1.38;
    }

    /* Set row border and align text of first column of payment info table*/
    .payment-info-type-table td {
        text-align: left;
        border-top: 1px solid #b5b4ba;
    }

    /*Align text of the second column to the right*/
    .payment-info-type-table table td:nth-child(2) {
        text-align: right;
    }

/* Set the font-weight of the total payment row*/
.total-payment-row {
    font-weight: bolder;
}

.payment-back-button {
    float: left;
}

/* Media queries that target the specific padding of the payment grid for different screens */
@media (min-width: 1200px) {
    .quote-section-payment-info .col-md-4 {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }

    /* ovveride the default font of payment info table */
    .payment-info-type-table table {
        font-size: 15px !important;
    }

    .payment-info-type-table {
        padding: 16px 30px 16px 31px;
    }
}

@media (min-width: 240px) {
    .quote-section-payment-info .col-lg-4 {
        padding-top: 30px;
    }

    .quote-section-payment-info .col-md-12 {
        padding-bottom: 30px;
    }
}

/*QUOTE NCD SECTION*/

/* The No claims different header acts differently to the others, As it has a icon.
        Therefore we have to target the styles for its markup specifically*/

/*Styling for ncd header */
.quote-section-ncd-header {
    
    border: none;
    padding: 0 0 26px;
    width: 100%;
    text-align: left;
    border-bottom-color: rgb(204, 204, 204);
    border-bottom-style: solid;
    border-bottom-width: 1px;
}

    .quote-section-ncd-header h2:before {
        border-top: none;
    }

    .quote-section-ncd-header h2 {
        text-align: left;
        margin: 0;
    }

    /* Positioning and font size of the padlock icon for ncd header*/
    .quote-section-ncd-header .porsche-icon-lock {
        font-size: 36px;
        position: absolute;
        top: -11px;
        right: 0;
    }

.quote-section-ncd-text {
    font-family: PorscheNextWLa-Thin;
    font-size: 18px;
   /* padding: 26px 0px 52px;*/
}

/* Styling and postioning for the ncd box*/
.quote-section-ncd-price {
    border-radius:4px;
    text-align: center;
    font-family: PorscheNextWLa-Thin;
    font-size: 18px
}

    .quote-section-ncd-price.ncd-selected {
        border-color: var(--inputBorder)
    }

    /* padding of the list for the ncd text */
    .quote-section-ncd-price ul {
        list-style: none;
        padding: 17px 20px 27px 20px;
    }

        /* padding of each li element in the ncd text list*/
        .quote-section-ncd-price ul li {
            padding-top: 18px;
        }

    /*Set the spefic font for the ncd price
                The size of this is inheirited from other price
            */
    .quote-section-ncd-price .quote-price-text {
        font-family: Arial;
    }

/* Set the font size for the year text*/
.ncd-price-year {
    font-size: 18px
}

/* Alignment and padding of ncd note text blow the ncd box*/
.quote-section-ncd-monthly-note {
    padding: 10px 0 10px;
    text-align: left;
}

/*QUOTE SUMMARY SECTION*/

/* Specific padding of the quote summary from the heading boder*/
.quote-section-summary {
    padding-top: 30px;
    font-size: 16px;
}

    /* Set a border for the whole of the summary table*/
    .quote-section-summary table {
        /*border: solid 1px #b5b4ba;*/
    }

        /* Alternate row background colours. Even rows are white. Odd rows are porsche grey*/
        .quote-section-summary table tr {
            background-color: #ffffff;
        }

            .quote-section-summary table tr td {
                border-top: solid 1px #eff0f1;
            }

/* Summary table header (first column) set to be bolder text*/
.quote-section-summary-headers {
    font-weight: bolder;
}

/* QUOTE ENDORSEMENTS*/

/* Padding from endorsement header and stlying of the text*/
.quote-section-endorsements {
    font-family: PorscheNextWLa-Thin;
    padding-top: 30px;
    font-size: 18px;
    line-height: 1.44;
}
    /*Quote section header styling to match the rest of the headers on the screen.*/
    .quote-section-endorsements h2 {
        font-size: 36px;
        position: absolute;
        top: -11px;
        right: 0;
    }
    /* endorsement list padding and positioning */
    .quote-section-endorsements ul {
        padding-left: 20px;
    }

    /* apply styling to endorsement wording */
    .quote-section-endorsements .endorsement-wording {
        background-color: #ffffff;
        padding: 20px;
        margin: 10px 0;
    }

/* QUOTE IMPORTANT INFO*/

/* Padding from important header and stlying of the text*/
.quote-section-important-info {
    padding-top: 30px;
    font-family: PorscheNextWLa-Thin;
    font-size: 18px;
}

    /* important infor list stying, no bullets and padding removed*/
    .quote-section-important-info ul {
        list-style: none;
        padding-left: 0px;
    }

        .quote-section-important-info ul li {
            margin-bottom: 5px;
        }

            .quote-section-important-info ul li a {
                margin-left: 10px;
            }

            .quote-section-important-info ul li .porsche-icon-download_02 {
                float: left;
                font-size: 18px;
                margin-top: 4px;
            }

    /* add padding to the confirmation check box */
    .quote-section-important-info #confirm-checkbox {
        padding: 20px 0;
    }

.payment-info-block-static {
    background-color: transparent !important;
}

/* Alignment and padding of ipt text blow the ncd box*/
.quote-section-ipt-text {
    padding: 10px 0 10px;
    text-align: center;
}

/* ensure processing payment elements display correctly */
#three-d-secure-container {
    position: relative;
    min-height: 500px;
    padding: 0;
}

/* ensure 'please wait' elements display correctly */
#processing-payment {
    text-align: center;
    position: absolute;
}

/* ensure 3d-secure iframe displays correctly */
#three-d-secure-iframe-container {
    position: absolute;
}

/* 3d-secure iframe style */
#threeDSecureFrame {
    width: 100%;
    height: 500px;
}

/* terms check specific styling */
.terms-check {
    border: none !important;
    padding-top: 0px !important;
}

    /* terms check overrides default label max-width */
    .terms-check label {
        max-width: 100%;
    }

.not-agree-telephone-number {
    margin-top: 25px;
}

    .not-agree-telephone-number label {
        font-size: 0.75em;
        line-height: 1.4em;
    }

/*Fix issue with characters overlaping each other on smaller screens*/
@media (max-width: 767px) and (-webkit-min-device-pixel-ratio: 0) {
    .not-agree-telephone-number label {
        letter-spacing: 0px !important;
    }
}

/* centre add additional vehicle button*/
.add-additional-vehicle-button {
    text-align: left;
}

#update-vd {
    padding: 0px 0px 0px 0px;
}

.find-a-vehicle {
    display: inline-block;
}

.navbar-telephone-number {
    float: right;
    font-family: PorscheNextWLa;
    font-size: 24px;
    margin: 0;
    padding: 15px 0;
}

    .navbar-telephone-number a {
        color: var(--black);
    }

        .navbar-telephone-number a:hover {
            color: var(--black);
        }
    .navbar-telephone-number svg {
        position: absolute;
        right: 175px;
        top:0;
    }
        /*Make page header telephone number text and icon smaller on mobile*/
        @media (max-width:502px) {
            .navbar-telephone-number {
                font-size: 20px;
            }

            .navbar-telephone-icon {
                height: 22px;
                width: 22px;
                margin-right: 5px;
            }
        }

        #search-postcode {
    height: 50px !important;
    line-height: 3px;
    margin-top: 20px;
    margin-left: -15px;
    padding-left: -15px !important;
}

.summary-page-table-description-cell-width {
/*    width: 250px;*/
}

.disable-click {
    pointer-events: none;
}

table.privacyPolicyTable tbody tr td, table.privacyPolicyTable tbody tr th {
    padding: 15px;
}

/*
    reminder page form styling to match journey spacing on date time.
*/
.Rform .Rform-section .Rform-group .Rinput-row {
    margin-bottom: 20px;
    min-height: 34px;
}

.Rform .Rform-section .Rform-group {
    margin: 0;
}

.Rform .Rform-section {
    padding: 15px;
    margin-bottom: 10px;
}

    .Rform .Rform-section .Rform-group .Rinput-col.inline {
        padding-right: 15px;
    }

    .Rform .Rform-section .Rform-group .Rinput-col {
        padding: 0;
        padding-bottom: 10px;
    }

.reminderError {
    color: #d4260f;
}


.inline-select {
    display: flex;
    flex-direction: column;
    gap: 0rem;
}

@media (min-width: 768px) {
    .inline-select {
        flex-direction: row;
        gap: 1rem;
    }
}


.menu-button {
/*    position: absolute;*/
    height: 24px;
    /*    left: 0px;
    top: 18px;
*/
}

/*@media (min-width: 768px) {
    .menu-button {
        position: absolute;
        height: 24px;
        left: 0px;
        top: 0px;
    }
}
*/

/* Quote Retrieval */

.mt-standard {
    margin-top: 20px;
}

.mt-medium {
    margin-top: 30px;
}

.mt-large {
    margin-top: 2rem;
}

/* Flex layouts */
.date-picker-container {
    display: flex;
    gap: 10px;
}

.flex-column-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Button sizing */
.btn-limited-width {
    width: 100%;
}

.align-form {
  padding-left: 0 !important;
  padding-top: 0 !important;
}

@media (min-width: 768px) {
    .btn-limited-width {
        max-width: 250px;
    }
}