/* New styles added here for CI update May 2024*/

@import url('Colours.css');
/*@import url('selectElement.css');*/


* {
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

body {background-color: var(--white);}
:root {
    --select-width: 100%;
    --select-padding: 10px;
    --select-bg-color: #fff;
    --select-border-color: var(--black);
    --select-border-radius: 4px;
    --select-hover-bg-color: #e4e4e4;
    --select-hover-text-color: #000;
    --select-text-color: #333;
    --select-icon-color: #666;
    --select-max-height: 200px;
    --select-z-index: 1000;
    --select-transition-duration: .3s;
    --select-listbox-max-height: 800px;
    --select-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --select-focus-border-color: #007bff;
    --select-disabled-bg-color: #e9ecef;
    --select-disabled-text-color: #6c757d;
    --spinnerDims: 33px;
    --spinnerDimsInButton: 25px;
    /*info grid elements*/
    --infoGridElementHeight: 400px;
    --infoGridElementHeightClassic: 600px;
    --row-count: 3;
    --grid-gap: 10px;
    --contact-us-row-height:300px;
}

/*Helpers*/
.pl-0 {
    padding-left: 0px!important;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mb-40 {
    margin-bottom: 40px;
}

.mb-50 {
    margin-bottom: 50px;
}

.mb-60 {
    margin-bottom: 60px;
}

.mb-70 {
    margin-bottom: 70px;
}

.mb-80 {
    margin-bottom: 80px;
}

.mb-90 {
    margin-bottom: 90px;
}

.mb-100 {
    margin-bottom: 100px;
}
.mt-10 {
    margin-top: 10px;
}

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

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

.mt-40 {
    margin-top: 40px;
}

.mt-50 {
    margin-top: 50px;
}

.mt-60 {
    margin-top: 60px;
}

.mt-70 {
    margin-top: 70px;
}

.mt-80 {
    margin-top: 80px;
}

.mt-90 {
    margin-top: 90px;
}

.mt-100 {
    margin-top: 100px;
}

.ml-15 {
    margin-left: 15px;
}

#dark-gradient-top {
    background: linear-gradient(to bottom, rgba(31, 31, 31, 0.9) 0%, rgba(31, 31, 31, 0.9) 20%, rgba(31, 31, 31, 0.852589) 26.67%, rgba(32, 32, 32, 0.768225) 33.33%, rgba(33, 33, 33, 0.668116) 40%, rgba(34, 34, 34, 0.557309) 46.67%, rgba(35, 35, 35, 0.442691) 53.33%, rgba(36, 36, 36, 0.331884) 60%, rgba(37, 37, 37, 0.231775) 66.67%, rgba(38, 38, 38, 0.147411) 73.33%, rgba(39, 39, 39, 0.0816599) 80%, rgba(39, 39, 39, 0.03551) 86.67%, rgba(39, 39, 39, 0.0086472) 93.33%, rgba(39, 39, 39, 0) 100%);
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 99;
    height: 50px;
    opacity: 0.7;
}


.menu-bar-top {
    background-color: var(--white)!important;
    height:83px;
    border-bottom: 1px solid var(--faqGrey);
   
}

@media (max-width:768px) {
   
    .fiftyFiftyLeft p, .fiftyFiftyRight p {
        text-align: justify !important;
        width: 100% !important;
    }
    }




a {
    color: var(--black);
    text-decoration: underline;
}

    a:hover, a:focus {
        background-color: var(--faqGrey);
        color: var(--black);
    }

    /* Make email addresses wrap on mobile devices when necessary */
    a[href^=mailto] {
        word-wrap: break-word;
    }

    /* Remove underline from telephone number links */
    a[href^="tel:"] {
        text-decoration: none !important;
    }

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.form-spacer {
    margin-bottom: 16px;
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .form-spacer {
        margin-bottom: 16px !important;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .form-spacer {
        margin-bottom: 32px !important;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .form-spacer {
        margin-bottom: 48px !important;
    }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
    .form-spacer {
        margin-bottom: 50px !important;
    }
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.customPadding {
    padding: 0 15px !important;
}



.overlayNav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
    z-index: 9990;
    cursor: pointer;
}

#slideOutNav {
    display: grid;
    grid-template-columns: 485px 485px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: -1300px;
    max-width: 610px;
    min-width: 610px;
    transition: all 0.5s;
    z-index: 9999 !important;
    border-radius: 4px;
}
.menu-left-arrow,
.menu-primary-close,
.menu-secondary-close {
    display: none;
    position:absolute;
    width:30px;
    aspect-ratio: 1/1;
    top:30px;
}
.menu-secondary-close {
    right: 30px;
}
.navigation-close-box-desktop {
    display:block;
    stroke:#fff;
}
.submenu-visible {
    display: block!important;
}

@media (min-width: 500px) and (max-width:900px) {
    #slideOutNav {
        grid-template-columns: 1fr 1fr;
        max-width: 100%;
        min-width: 100%;
    }
        #slideOutNav .closeButton {
           
            fill:#000!important;
            z-index:999;
        }
    .navigation-close-box-desktop {
        display: block;
        stroke: var(--black);
       
    }
        .subMenu, .primaryMenu {
            padding:125px 6px 45px 6px!important;
            
        }
    .newMenuSecondaryLinks, .newMenuPrimaryLinks {
      
        font-size: 0.8rem;
    }
    .menu-left-arrow,
    .menu-primary-close,
    .menu-secondary-close {
        display: none;
    }

    #slideOutNav .closeButton {
       right:20px;
       left:unset!important;
    }
}

@media (max-width: 450px) {
    .menu-left-arrow,
    .menu-primary-close,
    .menu-secondary-close {
        display: block;
    }
    .subMenu {
        position:absolute!important;
        z-index:999!important;
       display:none;
       padding-left:20px!important;
    }

}



#subMenuUL {
    position: relative;
    z-index: 9995 !important;
}

.slideleft {
    animation: moveSubmenu 0.4s none;
}

@keyframes moveSubmenu {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    /*25% {
        transform: translateX(-300px);
        opacity: 1;
    }*/

    50% {
        transform: translateX(-400px);
        opacity: 0;
    }

    51% {
        transform: translateX(800px);
        opacity: 0;
    }

    75% {
        opacity: 1;
    }

    100% {
        transform: translateX(0);
    }
}

/* Alternative keyframes for mobile devices */
@media (max-width: 500px) {
    @keyframes moveSubmenu {
        0% {
            transform: translateX(0);
            opacity: 1;
        }

        50% {
            left:0!important;
            opacity: 0;
        }

        51% {
            transform: translateX(20px);
            opacity: 0;
        }

        75% {
            opacity: 1;
        }

        100% {
            transform: translateX(0);
        }
    }
}


.open {
    /* transform: translateX(0);*/
    left: 0px !important;
}

.primaryMenu {
    background-color: var(--white);
    padding: 125px 77px 77px 25px;
}

.subMenu {
    position: relative;
    background-color: var(--subMenuBG);
    padding: 125px 77px 77px 125px;
    overflow: hidden;
    height:100vh;
}

#slideOutNav:hover {
    /**/
}

#slideOutNav .closeButton {
    position: absolute;
    top: 27px;
    left: 1000px;
    width: 45px;
    height: 45px;
    appearance: none;
    text-decoration: none;
    border: 1px solid #FBFCFF;
    border-radius: 4px;
    background-color: transparent;
    color: #FBFCFF;
    transition: 0.4s all ease;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
    padding: 12px;
}

    #slideOutNav .closeButton:hover {
        background-color: rgba(148,149,152,0.38);
    }

#slideOutNav ul {
    list-style: none;
}

.newMenuPrimaryLinks {
    position: relative;
    font-size: 24px;
    color: var(--black);
    text-decoration: none;
    display: block;
    background-color: transparent;
    border: none;
    width: 100%;
    margin-bottom: 10px;
    padding: 10px;
    text-align: left;
}

    .newMenuPrimaryLinks:hover, .newMenuPrimaryLinks:focus {
        background-color: rgba(148,149,152,0.18);
        color: var(--black);
        text-decoration: none;
        border-radius: 4px;
    }


.active-link {
    background-color: rgba(148,149,152,0.18);
    color: var(--black);
    text-decoration: none;
    border-radius: 4px;
}

.newMenuSecondaryLinks {
        font-size: 16px;
    color: var(--black);
    text-decoration: none;
    line-height: 60px;
    background-color: transparent;
    border: none;
    width: 100%;
    padding: 3px;
    margin-bottom: 30px;
    text-align: left;
    transition: 0.4s all ease;
}

    .newMenuSecondaryLinks:hover, .newMenuSecondaryLinks:focus, .newMenuSecondaryLinks:active {
        background-color: rgba(148,149,152,0.18);
        color: var(--black);
        text-decoration: none;
        border-radius: 4px;
    }

span.newMenuShevronRight {
    font-size: 24px;
    position: absolute;
    right: 10px;
}

#btnOpenMenu {
    position: absolute;
    left: 10px;
    top: 28px;
    width: 70px;
    height: 22px;
    background-color: transparent;
    border: none !important;
    z-index: 99 !important;
    transition: all 0.6s ease;
    padding: 1px;
    border-radius: 4px;

    display: flex;
}
    .menu-button-svg {
        height: 24px;
    }

    .menu-text {
        display: none;
    }

    #btnOpenMenu svg {
        stroke: var(--black);
        position: absolute;
        top: 0px;
        left: 0px
    }

    #btnOpenMenu:hover {
        background-color:var(--menuHover);
    }

#PORSCHE-CREST {
    position: absolute;
    top: 14px; /* Adjust as needed */
    left: 50%;
    
    height: min(45px, 100%);
    transform: translateX(-50%);
    z-index: 999;
}


@media (max-width: 327px){
    #PORSCHE {
        display: none;
        width:80%;
    }

    #PORSCHE-CREST {
        display: block;
    }

}
/* Devices with width between 328px and 429px */
@media (min-width: 328px) and (max-width: 429.98px) {
    #PORSCHE {
        display: none;
    }

    #PORSCHE-CREST {
        display: block;
    }
}

/* Devices with width between 430px and 766px */
@media (min-width: 430px) and (max-width: 765.98px) {
    .menu-text {
        display: block;
    }

    #PORSCHE {
        display: block;
    }
    #PORSCHE-CREST {
        display: none;
    }
}

/* Devices with width 766px and up (full width) */
@media (min-width: 766px) {
    #btnOpenMenu {
        left: 100px;
    }

    .menu-text {
        display: block;
    }

    #PORSCHE {
        display: block;
    }

    #PORSCHE-CREST {
        display: none;
    }
    #btnOpenMenu span {
        display: block;
    }
}


#PORSCHE {
    /* wordmark logo on main nav*/
    width: 240px;
    height: auto;
    position: absolute;
    top: 33px;
    left: 50%; /* Move the left edge of the element to the middle of the parent */
    transform: translateX(-50%); /* Move the element left by half of its own width */
    z-index: 999;
}

.gridWrapperFiftyFifty {
   /* max-width: 1200px;*/
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-left: auto;
    margin-right: auto;
}


/* Screens smaller than sm size (<768px) */
@media (max-width: 850px) {
    .gridWrapperFiftyFifty {
        grid-template-columns: 1fr;
    }
    }


    .fiftyFiftyLeft h2, .fiftyFiftyRight h2 {
        text-align: left;
        
        margin-bottom: 20px;
        width: 85%;
    }

    .fiftyFiftyLeft p, .fiftyFiftyRight p {
        text-align: left;
        font-size: 16px;
        width: 90%;
        font-weight: 400;
    }

    .fiftyFiftyLeft img, .fiftyFiftyRight img, .porscheImage {
        aspect-ratio: 800/600;
        width: 100%;
        border-radius: 12px;
    }

    .fiftyFiftyLeft p:last-of-type, .fiftyFiftyLeft p:last-of-type {
        margin-bottom: 40px !important;
    }



    .porscheImage {
        margin-top: -50px;
    }

    .pButton {
        background-color: var(--black) !important;
        color: var(--white) !important;
        border: 1.6px solid var(--black) !important;
        border-radius: 4px;
        font-size: 16px;
        padding: 13px 26px 13px 26px;
        transition: background-color 0.2s;
        text-decoration: none;
    }

        .pButton:hover, .pButton:active, .pButton:focus {
            background-color: var(--buttonHover) !important;
            border-color: var(--buttonHover) !important;
            color: var(--white);
        }


    .pGhostButton {
        background-color: transparent;
        color: var(--black);
        border: 2px solid var(--black);
        border-radius: 4px;
        font-size: 16px;
        padding: 13px 26px 13px 26px;
        transition: background-color 0.2s;
        text-decoration: none;
    }

        .pGhostButton:hover, .pGhostButton:active, .pGhostButton:focus {
            background-color: var(--ghostButton);
            border-color: var(--ghostButtonBorder);
        }

.pGhostButtonWhite {
    background-color: transparent;
    color: var(--white);
    border: 2px solid var(--white)!important;
    border-radius: 4px;
    font-size: 16px;
    padding: 13px 26px 13px 26px;
    margin-left:0!important;
    margin-top:10px;
    transition: background-color 0.3s;
    text-decoration: none;
}

    .pGhostButtonWhite:hover, .pGhostButtonWhite:active, .pGhostButtonWhite:focus {
        background-color: var(--white);
        color:var(--darkGrey);
    }

@media(max-width:1000px) {
    .pGhostButtonWhite {
        padding: 5px 16px 5px 16px;
        font-size: 13px
    }
}


.fancyGrid {
    display: grid;
    width: 100%;
    height:calc(var(--row-count) * var(--infoGridElementHeight) + 20px);
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    gap: var(--grid-gap);
    overflow: hidden;
}

.classicGrid {
    grid-template-rows: 1fr 1fr !important;
     --row-count:2;
    height: calc(var(--row-count) * var(--infoGridElementHeight) + 20px);
   
}

.grid-element {
    border-radius:12px;
    overflow:hidden;
   
    height:var(--infoGridElementHeight)
}

.fancyGrid-block-open {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.fancyGrid img {
   /* width: 100%;*/
    height: auto;
}

.fancyGrid h3 {
    margin: 0;
    padding: 10px;
    font-size:20px!important;
}

.fancyGrid p {
    display: none;
    padding:10px;
    font-size: 16px !important;
}

.fancyGrid a {
    color:var(--white);

}
    .detail-container h3 {
   /* color: green;*/
    text-overflow: ellipsis;
}

.detail-container span {
  /*  color: blue;*/
    display: none;
}


.detail-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    flex-direction: column;
    align-items: center;
    text-align: left;
    transition: all 0.3s ease;
    z-index: 999;
}


.fancyGrid-block-open.expanded .detail-container {
    padding: 20px;
    display: flex;
    height: 100%;
    overflow-y:auto;
}

    .fancyGrid-block-open.expanded .detail-container p {
        /*  color: red !important;*/
        display: block;
       /* -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 80%, rgba(0,0,0,0));*/
    }

        .fancyGrid-block-open.expanded .detail-container p:first-child {
            padding-top: 85px;
        }



        .fancyGrid-block-open.expanded .detail-container span {
           /* color: blue !important;*/
            display: block;
        }

        .fancyGrid-block-open.expanded .detail-container h3 {
           /* color: green !important;*/
            display: block;
        }



    @media (max-width: 768px) {
        .fancyGrid {
            width: 100% !important;
            /* grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));*/
            grid-template-columns:1fr,1fr;
            grid-template-rows:1fr auto;
        }
        .classicGrid {
            grid-template-columns: 1fr,1fr;
            grid-template-rows: 1fr auto;
        }
    }

    @media (max-width: 480px) {
        .fancyGrid {
            width:100%!important;
          /*  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));*/
          grid-template-columns:1fr;
        }
    }

@media (max-width: 768px) {
    .fancyGrid {
        grid-template-columns: 1fr;
        grid-template-rows:1fr auto;
        height:auto;
    }

   /* .FG-1, .FG-2, .FG-3, .FG-4, .FG-5, .FG-6, .FG-7, .FG-8, .FG-9 {
        grid-column: 1 / -1;
        grid-row: auto;
    }*/
}
@media (min-width:768px) and (max-width: 1740px) {
    .fancyGrid {
        width: 100%;
        height: calc(var(--rowCount) * var(--infoGridElementHeight) + 20px);
        grid-template-rows: repeat(var(--row-count), var(--infoGridElementHeight));
        grid-template-columns: repeat(2, 1fr);
    }
        .fancyGrid p {
        padding:0;
        }

/*    .FG-1, .FG-2, .FG-3, .FG-4, .FG-5, .FG-6, .FG-7, .FG-8, .FG-9 {
        grid-column: auto;
        grid-row: auto; overflow:hidden;
    }*/
}

    .detailGridWrapper {
        height: 100%;
        position: relative;
    }

    .detailPanelOuter {
        grid-column: 1/7;
        grid-row: 1/5;
        transition: all 0.3s ease;
    }

    .slideUp {
        /*Slide up and fade out*/
        transform: translateY(-100%);
        opacity: 0;
    }

    .slideDown {
        /*Slide down and fade in*/
        transform: translateY(0);
        opacity: 1;
    }

    div.blur-top {
        background: rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(5px);
        grid-column: 1/3;
        grid-row: 1/2;
        cursor: pointer;
    }

    div.detail-img {
        grid-column: 1/2;
        grid-row: 2/3;
        padding: 1em;
        background-color: var(--white);
    }

    div.detail-text {
        grid-column: 2/3;
        grid-row: 2/3;
        padding: 1em;
        background-color: var(--white);
    }

    div.blur-bottom {
        background: rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(5px);
        grid-column: 1/3;
        grid-row: 3/4;
        cursor: pointer;
    }

    .fancyGrid-block-open div {
        background-color: var(--darkGrey);
        height: 60px;
        color: var(--white);
        text-decoration: none;
        position: absolute;
        bottom: 0;
        width: 100%;
        text-align: left;
        padding-left: 15px;
    }

.fancyGrid-block-open img {
    object-fit: contain;
    margin-top: 20px;
    margin-left: -139px;
}

    /* FAQ styling------------------------------------------------------------------------------------*/

    .panel:focus {
        outline: none; /* Remove default outline */
        /*background-color: var(--faqGrey);*/ /* Light grey background on focus */
    }

    .faq-section h3 {
        background-color: transparent;
    }

    /* FAQ ACCORDIONS */

    /* overriding boostrap default panel styling */
    #faq-section-accordion .panel {
        border: none;
        margin-bottom: 5px;
    }

    /* override default h3 styling for faqs */
#faq-section-accordion h3 {
    color: rgb(1,2,5) !important;
    margin-bottom: 5px;
    font-family: PorscheNextWLa;
    border-bottom: 1px solid var(--faqGrey);
}

        /* override default a styling for faqs */
        #faq-section-accordion h3 a {
            display: block;
            padding: 15px 25px;
            color: rgb(1, 2, 5);
            text-decoration: none;
            
            margin: 3px 0px;
        }

            /* override default a:hover styling for faqs */
            #faq-section-accordion h3 a:hover, #faq-section-accordion h3 a:focus {
                cursor: pointer;
                background-color: var(--faqGrey); /* Light grey background on focus */
                margin: 3px 0px;
            }

    /* Faq Parent (Plus Minus) animations */
    .panel.faq-section a[data-toggle="collapse"] {
        display: block;
        position: relative;
    }

        .panel.faq-section a[data-toggle="collapse"]:after {
            display: inline-block;
            font-family: "pag-iconfont";
            content: "\e004";
            position: absolute;
            right: 15px;
            top: 15px;
        }

        .panel.faq-section a[data-toggle="collapse"][aria-expanded="true"]:after {
            content: "\e02d";
        }

    /* Faq Child (Arrow) animation */
    .panel.faq-section .panel h4 a {
        display: block;
        position: relative;
        padding-left: 30px;
    }

    /* .panel.faq-section .panel h4 a:before {
        display: inline-block;
        font-family: "pag-iconfont";
        content: "\e024";
        position: absolute;
        left: -10px;
        top: 0;
        color: #d5001c;
        transition: transform 150ms, background 150ms;
    }*/

    .panel.faq-section .panel[aria-expanded="true"] h4 a:before {
        transform: rotate(90deg);
    }

    /* animation style for faq arrows */
    #faq-section-accordion i {
        -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;
    }

    /* default position for faq section arrows */
    #faq-section-accordion h3 i {
        float: right;
        margin: 15px;
        color: #ffffff;
    }

    /* override default h4 font for faqs */
    #faq-section-accordion h4 {
        font-family: PorscheNextWLa;
    }

        /* default position for faq question arrows */
        #faq-section-accordion h4 a {
            display: block;
            padding: 3px;
            color: var(--black);
            text-decoration: none;
        }

            /* override default a:hover for faq questions */
            #faq-section-accordion h4 a:hover {
                cursor: pointer;
                /*background-color: var(--faqGrey);*/ /* Light grey background on focus */
            }

        /* default position and colour for faq question arrows */
        #faq-section-accordion h4 i {
            float: left;
            margin-left: -10px;
            /*background-color: var(--faqGrey);*/ /* Light grey background on focus */
        }

    /* override bootstrap default panel styling for faq question/answer */
    #faq-section-accordion .accordion-inner .panel {
        padding: 15px;
        border-radius: 0px;
    }

        /* ensure answer is vertically aligned to the question */
        #faq-section-accordion .accordion-inner .panel .question-collapse {
            margin-left: 40px;
        }

            /* fix for collapse animation to stop bounce with margins */
            #faq-section-accordion .accordion-inner .panel .question-collapse p {
                margin: 0 !important;
                padding: 5px 0;
            }

                /* override default a style for faq answers */
                #faq-section-accordion .accordion-inner .panel .question-collapse p a {
                    /*background-color: var(--faqGrey); */ /* Light grey background on focus */
                    text-decoration: underline;
                }

                    /* override default a:hover style for faq answers */
                    #faq-section-accordion .accordion-inner .panel .question-collapse p a:hover {
                        /*background-color: var(--faqGrey);*/ /* Light grey background on focus */
                    }

    @media (min-width: 768px) {
        /* non-mobile devices should have additional padding on the left of section headings */
        /* #faq-section-accordion h3 a {
        padding: 15px 15% 15px;
    }*/

        /* non-mobile devices should have additional padding on the left of answers */
        /*#faq-section-accordion .accordion-inner .panel {
        padding: 15px 15% 15px;
    }*/
    }

    .document a svg {
        padding-top: 3px;
    }

    .online-docs-Wrapper {
        margin-top: 80px;
    }

    /*New Checkboxes stop replace current image/sprite based*/

    .custom-checkbox-container {
        display: flex;
        align-items: center;
    }

    .custom-checkbox {
        display: inline-flex;
        align-items: center;
        cursor: pointer;
        font-size: 1.5rem;
        user-select: none;
        margin-right: 10px;
    }

        .custom-checkbox input {
            display: none;
        }

    .checkmark {
        min-width: 40px;
        min-height: 40px;
        background-color: transparent;
        border: 2px solid #ccc;
        border-radius: 8px;
        margin-right: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: background-color 0.3s, border-color 0.3s;
    }

        .checkmark:hover {
            border-color: #010205
        }


    .custom-checkbox input:checked + .checkmark {
        background-color: #010205;
        border-color: #010205;
    }

    .checkmark::after {
        content: '';
        width: 12px;
        height: 23px;
        margin-top: -5px;
        border: solid white;
        border-width: 0 3px 3px 0;
        display: none;
        transform: rotate(45deg);
    }

    .custom-checkbox input:checked + .checkmark::after {
        display: block;
    }

    .form label {
        display: inline-flex;
        font-size: 18px;
        padding-right: 10px;
    }

    #go-to-vehicle {
        margin-left: auto; /* Ensures the button moves to the right */
        margin-bottom: 10px;
/*        margin-top:20px;*/
    }

    .homePageGridContainer {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-gap: 5px;
        margin: 5px;
    }

    .imageLabelWrapper {
        position: relative;
    }

    .homepageGridLabel {
        position: absolute;
        left: 15px;
        bottom: 15px;
        color: var(--white);
        font-size: 24px;
        transition: all 0.3s ease;
    }

        .homepageGridLabel:hover {
            background-color: var(--headerHover);
            text-decoration: underline;
        }

    .homepageGridImg {
        width: 100%;
        border-radius: 12px;
        transition: all 0.4s ease;
    }

    @media only screen and (max-width: 1200px) {
        .homePageGridContainer {
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            margin-left: 20%;
            margin-right: 20%;
        }
    }

    @media only screen and (max-width: 800px) {
        .homePageGridContainer {
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            margin-left: 5px;
            margin-right: 5px;
        }
    }


    /*Journey*/

    /*override the existing - hence thead ugly importants*/
    input, select {
        border: 2px solid var(--inputBorder) !important;
        padding: 8px 16px 8px 16px !important;
        border-radius: 4px !important;
        font-size: 16px !important;
        width: 100%;
        height: 54px !important;
    }

        input:hover, select:hover {
            border: 2px solid var(--black) !important;
        }

    /*SPINNER*/


/*.wait-spinner-small, .wait-spinner-in-button {
    display: inline-block;
    --spinnerDims: 14px;
    height: var(--spinnerDims);
    width: var(--spinnerDims);
    margin: 0;
    -webkit-animation: rotation 1s infinite linear;
    -moz-animation: rotation 1s infinite linear;
    -o-animation: rotation 1s infinite linear;
    animation: rotation 1s infinite linear;
    border: 2px solid #e5e5e5;*/ /* Reduced from 6px to 2px */
    /*border-radius: 100%;
    transition: all 1s ease-in-out;
}

    .wait-spinner-small:before, .wait-spinner-in-button:before {
        content: "";
        display: block;
        position: absolute;
        left: -2px;*/ /* Adjusted from -6px to -2px */
        /*top: -2px;*/ /* Adjusted from -6px to -2px */
        /*aspect-ratio: 1/1;
        width: 140%;*/ /* Reduced from 160% to maintain proportions */
        /*border-top: 2px solid white;*/ /* Reduced from 6px to 2px */
        /*border-left: 2px solid transparent;
        border-bottom: 2px solid transparent;
        border-right: 2px solid transparent;
        border-radius: 100%;
        transition: all 1s ease-in-out;
    }

    .wait-spinner-small > img {
        display: none !important;
    }*/



.wait-spinner, .wait-spinner-in-button {
    display: inline-block;
    height: var(--spinnerDims);
    width: var(--spinnerDims);
    margin: calc(-( var(--spinnerDims)/2)) 0 0 calc(-( var(--spinnerDims)/2));
    -webkit-animation: rotation 1s infinite linear;
    -moz-animation: rotation 1s infinite linear;
    -o-animation: rotation 1s infinite linear;
    animation: rotation 1s infinite linear;
    border: 6px solid #e5e5e5; /* Light grey for the track */
    border-radius: 100%;
    transition: all 1s ease-in-out;
}

    .wait-spinner:before, .wait-spinner-in-button:before {
        content: "";
        display: block;
        position: absolute;
        left: -6px;
        top: -6px;
        aspect-ratio: 1/1;
        width: 160%;
        border-top: 6px solid white; /* White for the spinner */
        border-left: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-right: 6px solid transparent;
        border-radius: 100%;
        transition: all 1s ease-in-out;
    }

        .wait-spinner > img {
            display: none !important;
        }

#find-your-vehicle {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 1s ease-in-out;
}

/*        .in-button-spinner {
            height: 20px;
            width: 20px;
        }*/

    /*.wait-spinner-in-button {
    height: var(--spinnerDimsInButton);
    width: var(--spinnerDimsInButton);
    margin:0;

}*/

    @-webkit-keyframes rotation {
        from {
            -webkit-transform: rotate(0deg);
        }

        to {
            -webkit-transform: rotate(359deg);
        }
    }

    @-moz-keyframes rotation {
        from {
            -moz-transform: rotate(0deg);
        }

        to {
            -moz-transform: rotate(359deg);
        }
    }

    @-o-keyframes rotation {
        from {
            -o-transform: rotate(0deg);
        }

        to {
            -o-transform: rotate(359deg);
        }
    }

    @keyframes rotation {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(359deg);
        }
    }


    /*Contact us grid-----------------------------------------------*/
#contact-us-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr ;
    grid-template-rows: auto;
}


#times, #image, #buttons {
    border-radius:12px;
    font-size: 0.9em;
}
#times {
    padding:20px;

}
   #image {display:none;}
    #buttons a {
        margin-top:30px;
    }

    #buttons ul {
        list-style-type: none;
        padding-left:0;
        margin-left:0;
       
    }
    #times ul {
        line-height:1em;
    }
#image {
    background-image: url('@Umbraco.TypedMedia(Model.Content.Image.Id).GetCropUrl("umbracoFile", "Content%20Block")');
    background-size: cover; /* Adjusts the size of the background image */
    background-position: center; /* Centers the background image */
    /*background-repeat: no-repeat;*/ /* Prevents the background image from repeating */
    width: 100%; /* Ensures the container takes the full width */
    height: 100%; /* Adjust the height as needed */
   
}

@media(min-width:1544px) {

    #contact-us-grid {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: repeat(2,var( --contact-us-row-height));
    }

    #times {
        grid-column: 1/2;
        grid-row: 1/3;
    }

    #image {
        grid-column: 2/3;
        grid-row: 1/2;
        overflow: hidden;
    }

    #buttons {
        grid-column: 2/3;
        grid-row: 2/3;
    }

    #times, #image, #buttons {
        border-radius: 12px;
        font-size: 1.2rem;
    }

    #times {
        padding: 20px;
    }

    #buttons a {
        margin-top: 30px;
    }

    #buttons ul {
        list-style-type: none;
        padding-left: 0;
        margin-left: 0;
    }

    #times ul {
        line-height: 2em;
    }

    #image > img {
        /*transform: translateY(-236px);*/
    }
}/*end media min-width 1544px*/

@media(min-width:850px) {

    #contact-us-grid {
        width: 100%;
        margin-left:auto;
        margin-right:auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
    }
    #times {
        font-size:1.2em;
    }
    #buttons {
        padding-top:20px;
    }
    #image {
        display:none;
    }
}/*end media min-width 850px*/

 @media(min-width:1228px) {
    #contact-us-grid {
        width: 1100px;
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: repeat(2,var( --contact-us-row-height));
    }
    #times {
        grid-column: 1/2;
        grid-row: 1/3;
    }

    #image {
        grid-column: 2/3;
        grid-row: 1/2;
        overflow: hidden;
    }

    #buttons {
        grid-column: 2/3;
        grid-row: 2/3;
    }

    #image > img {
        transform: translateY(-236px);
    }
    #image{display:block;}

 } /*end media min-width 1228px*/


    /*end contact grid---------------------------------------------*/
    .w-100 {
        width: 100%;
    }
.w-50 {
    width: 50%;
}
.w-20 {
    width: 20%;
}

    .mb-20 {
        margin-bottom: 20px;
    }


    /*Journey stuff*/

    #location-selector-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        /*grid-template-rows:4fr 1fr;*/
        grid-gap: 1em;
        margin: 5px;
        height: 294px;
        cursor: pointer;
    }

    .location-garage {
        grid-column: 1/2;
        grid-row: subgrid;
        overflow: hidden;
    }

    .location-driveway {
        grid-column: 2/3;
        grid-row: subgrid;
        overflow: hidden;
    }

    .location-other {
        grid-column: 3/4;
        grid-row: subgrid;
        overflow: hidden;
    }

    .location-p-garage {
        grid-row: 2/3;
    }

    .location-p-driveway {
        grid-row: 2/3;
    }

    .location-p-other {
        grid-row: 2/3;
    }

    .location-p-garage,
    .location-p-driveway,
    .location-p-other {
        background-color: var(--darkGrey);
        color: var(--white);
        height: 45px;
        font-size: 1.2em;
        padding: 3px 15px;
        position: relative;
        z-index: 999;
    }

    /* under line the text in the 3 location cards when each has focus*/
    .location-garage:focus .location-p-garage p,
    .location-garage.selected .location-p-garage p,
    .location-garage:focus .location-p-garage p,
    .location-garage.selected .location-p-garage p,
    .location-driveway:focus .location-p-driveway p,
    .location-driveway.selected .location-p-driveway p,
    .location-other:focus .location-p-other p,
    .location-other.selected .location-p-other p {
        text-decoration: underline;
    }


    #location-selector-grid img {
        position: relative;
        width: 100%;
        aspect-ratio: 3/2;
        background-size: cover;
        transition: all ease 0.3s;
    }

        #location-selector-grid img:hover {
            transform: scale(1.1);
        }

    #location-selector-grid:focus .location-p-garage > p {
        text-decoration: underline;
    }
    /*Custom radio buttons*/
    .custom-radio-container {
        display: flex;
        flex-direction: column;
    }

    .custom-radio {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
    }

        .custom-radio input[type="radio"] {
            display: none;
        }

            .custom-radio input[type="radio"] + .radio-label {
                position: relative;
                padding-left: 35px;
                cursor: pointer;
                font-size: 16px;
                color: var(--black);
                transition: color 0.3s ease; /* Optional: Transition for label color */
            }

                .custom-radio input[type="radio"] + .radio-label::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 6px;
                    width: 28px;
                    height: 28px;
                    border: 2px solid var(--radioGrey);
                    border-radius: 50%;
                    background: #fff;
                    transition: all 0.3s ease; /* Transition for border and background */
                }

                .custom-radio input[type="radio"] + .radio-label:hover::before {
                    border: 2px solid var(--black);
                }

            .custom-radio input[type="radio"]:checked + .radio-label::before {
                border-color: var(--black);
                background: var(--black);
            }

            .custom-radio input[type="radio"]:checked + .radio-label::after {
                content: '';
                position: absolute;
                left: 7px;
                top: 13px;
                width: 14px;
                height: 14px;
                border-radius: 50%;
                background: var(--white);
                transition: background-color 0.2s ease; /* Transition for the inner circle */
            }





    .select-component {
       
        width: var(--select-width, auto);
        color: var(--select-text-color, #333);
        position: relative;
        margin-bottom: 10px;
    }

        .select-component .root {
            display: flex;
            flex-direction: column;
        }

        .select-component .select-wrapper {
            position: relative;
        }

        .select-component button {
            width: 100%;
            padding: 13px;
            background-color: var(--white);
            border: 2px solid var(--inputBorder);
            border-radius: var(--select-border-radius, 4px);
            height:54px;
            overflow: hidden;
            text-overflow: ellipsis;
            cursor: pointer;
            text-align: left;
            color: inherit;
            transition: border-color var(--select-transition-duration, .2s) ease, box-shadow var(--select-transition-duration, .2s) ease;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

            .select-component button:hover {
                border-color: var(--black);
            }

            .select-component button:focus {
                outline: none;
                border-color: var(--black);
            }


.chevron-icon {
    /*    margin-right: 20px;*/
    transition: all .2s ease;
    transform-origin: 50% 40%;
    position: relative;
    top: 2.5px;
}

@media (max-width:768px) {
    .select-component button {
        height: 60px;
        font-size:15px;
/*        width:95%;*/
    }

    input {
        height:60px!important;
    }

}


.select-component button[aria-expanded="true"] {
    border-radius: 4px 4px 0 0;
    border-bottom: 1px solid var(--inputBorder);
}
    .select-component button[aria-expanded="true"] .chevron-icon {
        transform: rotate(180deg);
      
    }

    .listbox li.focused {
        background-color: #e0e0e0;
        outline: none;
        border-color: var(--black);
    }

   /* .select-component .icon {
        position: absolute;
        right: var(--select-padding, 10px);
        top: 50%;
        transform: translateY(-50%);
        transition: transform var(--select-transition-duration,.2s) ease;
        color: var(--black);
        pointer-events: none;
    }*/
            /*.select-component .icon--rotate {
        transform: translateY(-50%) rotate(180deg);
    }*/

    .select-component .listbox {
        position: absolute;
        top: 99%;
        left: 0;
        right: 0;
        background-color: var(--white) ;
        border: 2px solid var(--black);
        border-top: none !important;
        border-radius: 0 0 var(--select-border-radius, 4px) var(--select-border-radius, 4px);
        list-style-type: none;
        padding: 0;
        margin: 0;
        max-height: var(--select-max-height);
        overflow: hidden;
        z-index: var(--select-z-index, 1000);
        transition: max-height var(--select-transition-duration, .2s) ease-out, opacity var(--select-transition-duration, .2s) ease-out, visibility var(--select-transition-duration, 1s) ease-out;
        opacity: 0;
        visibility: hidden;
    }

.select-component .listbox--open {
    max-height: var(--select-listbox-max-height, 200px);
    opacity: 1;
    visibility: visible;
    overflow-y: auto;
    border-radius:  0 0 4px 4px;
    border-top:none!important;
}

@media (max-width:768px) {
    .select-component, .select-component .listbox--open {
/*        width: 95% !important;*/
    }
}



.button-dropdown-open {
    border-radius: 4px 4px 0 0;
    border: 2px solid var(--black);
    border-bottom: 1px solid var(--black);
}

.selected-tick {
    float:right;
    margin-right:20px;
    display:none;
}

.select-component .listbox li {
    padding: var(--select-padding, 10px);
    margin: 0 5px;
    cursor: pointer;
    transition: background-color var(--select-transition-duration, .2s) ease, color var(--select-transition-duration, .2s) ease;
}

    .select-component .listbox li:hover,
    .select-component .listbox li[aria-selected="true"],
    .select-component .listbox li:focus {
        background-color: var(--select-hover-bg-color, #e4e4e4);
        color: var(--black);
        margin: 0 5px;
        border-radius: 4px!important;
    }

        .select-component .listbox li[aria-selected="true"] .selected-tick {
            display:block;
        }

    .select-component button:disabled {
        background-color: var(--select-disabled-bg-color, #e9ecef);
        color: var(--select-disabled-text-color, #6c757d);
        cursor: not-allowed;
    }

/*#date-of-birth-year-select {margin-left:15px; margin-top:0;}*/


@media (prefers-reduced-motion: reduce) {
    .select-component button, .select-component .icon, .select-component .listbox, .select-component .listbox li {
            transition: none;
        }
    }

    @keyframes slideUp {
        from {
            transform: translateY(100px);
            opacity: 0;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .animate-up {
        animation: slideUp 0.5s ease-out forwards;
    }

    .hiddenOnStart {
        opacity: 0;
        transform: translateY(100px);
    }

@media (max-width:1000px) {
    .journeyTitle {
        margin-top:55px;

    }
}

.custom-radio input[type="radio"] + .radio-label::before {
   background: transparent;
}

.radio-button-group-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.radio-button-group-wrapper {
    width: 100%;
}

.radio-button-group {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.homepageGridImg:hover {
    transform:scale(1.05);
}
.imageLabelWrapper {
    overflow:hidden;
    border-radius:12px;
}

.clearAnchorStyles {
    text-decoration: none !important; /* Remove underline */
    color: var(--white) !important; /* Inherit color from parent */
    background: none !important; /* Remove background */
   
}

    .clearAnchorStyles:hover {
        text-decoration: none !important; /* Remove underline on hover */
      
        background: none !important; /* Remove background on hover */
        border: none !important; /* Remove border on hover */
    }

@media(max-width: 430px) {
    #faq-section-accordion h3 {
        font-size: 1em;
    }
    .doc-links .document a {margin-left:-5px;}
}

.wrapper-thin {
    margin-top:75px;
}




@media(max-width:768px) {
/*    label {
        padding-right:80px;
    }
*/
/*    .porsche-icon-information {*/
/*        position: absolute;*/
        /* float: right; */
/*        top: 0;*/
        /*right: 0px;*/
    /*}*/

  input {width:90%!important;}

    .ml-15 {margin-left:15px;}
}

/*@media(max-width:427px) {

    #date-of-birth-select, #date-of-birth-month-select, #date-of-birth-year-select {
        text-align: center;
        margin: 0;
        width: 85%;
        padding: 0;
        padding-left: 2px;
        padding-top: 6px;
    }
}

#date-of-birth-select {margin-left:15px;}
#date-of-birth-month-select {margin-left:7.5px;}
#date-of-birth-year-select {
    margin-top: 22.5px;
}*/

.no-padding {
    padding: 0 !important;
}

.label-wrapper {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

    .label-wrapper .porsche-icon-information {
        position: relative;
/*        right: 5px;*/
        top: 9px;
/*        bottom: 3px;*/
    }
/*
@media (min-width: 768px) {
    .flex-between .porsche-icon-information {
        right: 12.5px;
    }
}*/


.marketing-button-wrapper {
  display: flex;
  gap: 1rem;
  flex-direction: column;
}

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