@charset "utf-8";
/* CSS Document for Design 911 .Net website by Kolen Mackey for Datadial 08/08/25 V=8.0 Chromium Base*/

:root {
    --d911-orange: #eb6a2e;
    --d911-teal: #23a9be;
    --team-black: #202020;
    --brand-color1: #eb6a2e;
    --brand-color2: #eb5e55;
    --site-black: #363c4b;
    --site-grey: #48586a;
    --site-mid-grey: #7a8391;
    --site-light-grey: #c0c8d2;
    --site-border: #e2e9f2;
    --site-highlight: #c3dfe0;
    --site-green: #65aa5e;
    --site-red: #a7252c;
    --site-txtbox: #f5f7f9;
    --site-txtbox2: #f5f4f3;
    --transition-all: all ease-in-out 0.3s;
    --bez: cubic-bezier(0.62, 1.11, 0.66, 0.71);
    --dd-bkg1: #f2f6fb;
    --dd-bkg2: #eef2f7;
    --dd-grey: #728294;
    --dd-light-grey: #aac2dd;
    --dd-green: #08a972;
}
/*marker - 3.0*/
.dd-green {
    color: var(--dd-green);
}


/* Base Reset*/
*,
*:before,
*:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/*------------------- CSS Variables - Not Compatible with IE11 so they have been removed */

[v-cloak] {
    display: none;
}

body {
    /*background:#f6f8fa;*/
    /*color: #2c3135;*/
    color: var(--site-black);
    font-family: "DM Sans", 'Arimo', 'Century Gothic', Helvetica, serif;
    font-style: normal;
    font-weight: 400;
    font-size: 0.844rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: #fdfdfd;
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(253, 253, 253, 1) 25%, rgba(253, 253, 253, 1) 65%, rgba(250, 250, 250, 1) 100%);
    background: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgb(253, 253, 253) 8%, rgb(253, 253, 253) 38%, rgb(250, 250, 250) 100%);
    background-attachment: fixed;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.sectionTitle {
    font-family: 'Roboto',"DM Sans";
    /*text-transform: uppercase;*/
    font-weight: 400;
    margin: 0 0 15px;
}

h1,
h2,
h3,
.h1,
.h2,
.h3 {
    font-weight: 400;
    text-transform:uppercase;
}

h4,
h5,
h6,
.h4,
.h5,
.h6 {
    font-weight: 500;
}


h1,
.h1 {
    /*font-size: 32px;
    line-height: 38px;*/
    font-size: 2.66rem;
    line-height:2.86rem;
    margin: 0 0 20px;
}

h2, 
.h2 {
    /*font-size: 28px;
    line-height: 32px;*/
    font-size: 1.75rem;
    line-height: 1.95rem;
}

.sectionTitle,
h3,
.h3 {
    /*font-size: 22px;
    line-height: 26px;*/
    font-size: 1.46rem;
    line-height: 1.66rem;
}

h4, 
.h4 {
    /*font-size: 18px;
    line-height: 24px;*/
    font-size: 1.13rem;
    line-height: 1.43rem;
}

h5,
.h5 {
    font-size: 0.796rem;
    line-height: 0.996rem;
}

h6,
.h6 {
    font-size: 16px;
    line-height: 22px;
    text-transform: none;
}

p {
    /*font-size: 14px;
    line-height: 22px;*/
    font-size: 0.844rem;
    line-height: 1.08rem;
    margin: 0 0 15px;
}
.rte {
    color: var(--dd-grey);
}
    .rte em {
        font-size: 0.796rem;
        line-height: 0.996rem;
    }

.rte ul,
.rte ol {
    margin: 0;
    padding: 0 0 0 20px;
}

.rte ul li,
.rte ol li {
    margin: 10px 0;
    padding: 0 0 0 20px;
}

.rte ul + h2,
.rte ul + h3,
.rte ul + h4,
.rte ol + h2,
.rte ol + h3,
.rte ol + h4,
.rte p + h2,
.rte p + h3,
.rte p + h4 {
    margin-top: 30px;
}

.sectionTitle,
.rte h2 {
    text-transform: uppercase;
}
    .rte .h3,
    .rte h3,
    .rte .h2,
    .rte h2 {
        color: var(--site-black);
    }

    .rte .h3,
    .rte .h4,
    .rte .h5,
    .rte .h6,
    .rte h3,
    .rte h4,
    .rte h5,
    .rte h6 {
        font-style: inherit;
        text-transform: none;
        font-family: inherit;
    }


    .rte p + h3,
    .rte h3 + h3 {
        display: inline;
        line-height: 1.84rem;
    }
        .rte h3 + h3{
            margin-left:0.3rem;
        }
        .rte h3 + h3::after {
            content: "";
            display: block;
            position: relative;
            margin: 0 0 30px;
        }
            .rte ~ h3 + h3::before {
                content: "";
                display: block;
                position: relative;
                margin:30px 0 0;                   
            }


/*---------------------------------General Website Styles*/

/*------------------- General Styles */
a {
    text-decoration: none;
    color: currentColor;
}

a:hover {
    text-decoration: none;
    color: #eb6a2e;
}

.altColor {
    color: #23a9be !important;
}

.altColor2 {
    color: #23a9be !important;
}

.altColor3 {
    color: #eb6a2e !important;
}

.green {
    color: #08a972;
}

svg.icon {
    width: 30px;
    height: 30px;
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    fill: currentColor;
}

svg.hidden {
    display: none;
}

img {
    display:block;
    color: var(--site-border);
    font-size: 0.26rem;
    max-width: 100%;
    height: auto;
    white-space: nowrap;
    overflow: hidden;
}

iframe,
picture,
picture img {
    max-width: 100%;
}

/*-------------------  Form Elements */

input[type='email']:not(.q-field__native),
input[type='tel']:not(.q-field__native),
input[type='text']:not(.q-field__native),
input[type='password']:not(.q-field__native),
input[type='button']:not(.q-field__native),
input[type='submit']:not(.q-field__native),
input[type='number']:not(.q-field__native),
button,
select {
    padding: 8px;
    color: #363c4b;
    display: inline-block;
    vertical-align: top;
    border: 1px solid var(--site-border);
    background: #fff;
    margin: 0 0 8px 0;
    font-family: inherit;
    -webkit-appearance: none;
    border-radius: 0;
    height: 40px;
}

input[type='button'].slim,
input[type='submit'].slim,
button.slim {
    height: auto;
}

button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.button.disabled {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type='number']:not(.q-field__native) {
    -moz-appearance: textfield;
}

input {
    padding: 14px 8px;
    filter: none;
    position:relative;
}

input[type='email']:not(.q-field__native):focus,
input[type='tel']:not(.q-field__native):focus,
input[type='text']:not(.q-field__native):focus,
input[type='password']:not(.q-field__native):focus,
input[type='button']:not(.q-field__native):focus,
input[type='submit']:not(.q-field__native):focus,
input[type='number']:not(.q-field__native):focus,
textarea:focus {
    background: var(--dd-bkg1);
    color: #363c4b;
    outline: none;
}

input[type='button'],
input[type='submit'] {
    -webkit-appearance: none;
}

select {
    background: #fff url('../images/svg/arrow-down.svg') no-repeat 98% center / 18px auto !important;
}

select:focus {
    outline: none;
}

select option {
    padding: 4px;
}

textarea {
    font-size: 13px;
    padding: 8px;
    color: #131313;
    display: block;
    width: 100%;
    border: 1px solid var(--site-border);
    margin: 0 0 8px 0;
    font-family: inherit;
    height: 150px;
    background: #fff;
}

label {
    display: block;
    margin-bottom: 8px;
}

a.button,
button,
input[type='button'],
input[type='submit'] {
    background: none;
    color: #131313;
    border: 1px solid var(--site-border);
    cursor: pointer;
    padding: 8px 20px;
    display: inline-block;
    width: auto;
    text-transform: uppercase;
}

button[class^='box-'],
input[type='text'][class^='box-'],
input[type='password'][class^='box-'],
input[type='button'][class^='box-'],
input[type='submit'][class^='box-'] {
    display: inline-block;
    width: inherit;
}

input[type='checkbox'] + [class^='box-'] {
    padding: 0 10px;
}

a.button,
input.button,
input[type='submit'].button,
button.button,
button.button {
    background: #8297ae;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    border: none;
    padding: 8px 20px;
    display: inline-block;
    border-radius: 4px;
}

a.button.green,
input.button.green,
input[type='submit'].button.green,
.button.green,
button.button.green {
    background: #08a972;
}

input.button.orange,
button.button.orange,
input[type='submit'].button.orange,
a.button.orange {
    background: #eb6a2e;
}

/* Checkout Buttons */
.button.big {
    height: 60px;
    line-height: 42px;
    font-size: 14px;
}

input[type='button'],
input[type='submit'] {
    -webkit-appearance: none;
}

::-moz-placeholder {
    opacity: 1;
}

input:focus::-webkit-input-placeholder {
    opacity: 0;
}

input:focus::-moz-placeholder {
    opacity: 0;
}

textarea:focus::-webkit-input-placeholder {
    opacity: 0;
}

textarea:focus::-moz-placeholder {
    opacity: 0;
}

/*Remove Chrome blue auto-fill*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus textarea:-webkit-autofill,
textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
}

/*Links*/
a.button {
    text-transform: uppercase;
}

.button.line {
    border: 1px solid var(--dd-light-grey);
    color: var(--dd-grey);
    background-color: transparent;
}

.button.line:hover,
.button:hover {
    color: #fff;
    background-color: #50545f;
    border-color: transparent;
}

a.borderline {
    border-bottom: 1px solid #7d8798;
    padding-bottom: 4px;
}

a.borderline:hover {
    border-color: #eb6a2e;
}

/*Form Elements - Make checkboxes and Radio buttons look like buttons*/
/*
Sample code: - As used in checkout
<p class="buttonBox">
	<input type="radio" name="yadda" id="yadda" runat="server" checked />
	<label for="yadda"> My Text label Here </label>
</p>
*/
.buttonBox {
    margin: 0 10px 10px 0;
    display: inline-block;
    position: relative;
    
}
   
    .buttonBox label {
        display: block;
        padding: 10px 20px;
        border: 1px solid var(--site-border);
        color: var(--dd-grey);
        cursor: pointer;
        border-radius: 4px;
    }

.buttonBox input[type='checkbox'],
.buttonBox input[type='radio'] {
    display: inline-block;
    width: auto;
    position: absolute;
    visibility: hidden;
}

.buttonBox input[type='radio'] + label,
.buttonBox input[type='checkbox'] + label,
.buttonBox input[type='radio'] + span.error + label,
.buttonBox input[type='checkbox'] + span.error + label {
    background: url('../images/checkbox_empty.png') 15px center / 18px auto no-repeat;
    padding: 10px 20px 10px 60px;
    position: relative;
}

.buttonBox input[type='radio']:checked + label,
.buttonBox input[type='radio']:checked + label:hover,
.buttonBox input[type='checkbox']:checked + label:hover,
.buttonBox input[type='checkbox']:checked + label {
    background: #606770 url('../images/checkbox_ticked.png') 15px center no-repeat;
    border-color: #606770;
}

.buttonBox input[type='radio'] + label:before,
.buttonBox input[type='checkbox'] + label:before,
.buttonBox input[type='radio'] + span.error + label:before,
.buttonBox input[type='checkbox'] + span.error + label:before {
    content: '';
    position: absolute;
    width: 3px;
    background: #d0dbdd;
    top: 8px;
    bottom: 8px;
    left: 45px;
    border-radius: 2px;
    opacity: 0.6;
}

.buttonBox input[type='radio'] + label:hover,
.buttonBox input[type='checkbox'] + label:hover,
.buttonBox :checked + label,
.buttonBox input[type='radio'] + span.error + label:hover,
.buttonBox input[type='checkbox'] + span.error + label:hover,
.buttonBox :checked + span.error + label,
.buttonBox label:hover {
    background-color: #606770;
    color: #fff;
    border: 1px solid #606770;
}

.buttonBox label span {
    padding: 0 10px;
    max-width: 78%;
}

.buttonBox label * {
    display: inline-block;
    vertical-align: middle;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
}

/*------------------- Box styles */

[class^='box-'],
div[class^='box-'],
input[type='text'][class^='box-'] {
    display: inline-block;
    vertical-align: top;
    margin: 0 -2px;
}

.box-10,
input.box-10 {
    width: 10%;
}

.box-20,
input.box-20 {
    width: 20%;
}

.box-25,
input.box-25 {
    width: 25%;
}

.box-30,
input.box-30 {
    width: 30%;
}

.box-33,
input.box-33 {
    width: 33.3%;
}

.box-35,
input.box-35 {
    width: 35%;
}

.box-40,
input.box-40 {
    width: 40%;
}

.box-45,
input.box-45 {
    width: 45%;
}

.box-50,
input.box-50 {
    width: 50%;
}

.box-55,
input.box-55 {
    width: 55%;
}

.box-60,
input.box-60 {
    width: 60%;
}

.box-65,
input.box-65 {
    width: 65%;
}

.box-70,
input.box-70 {
    width: 70%;
}

.box-75,
input.box-75 {
    width: 75%;
}

.box-80,
input.box-80 {
    width: 80%;
}

.box-90,
input.box-90 {
    width: 90%;
}

.box-100,
input.box-100 {
    width: 100.2%;
}

.pad-5 {
    padding: 5px;
}

.pad-0-5 {
    padding: 0 5px;
}

.pad-10 {
    padding: 10px;
}

.pad-0-10 {
    padding: 0 10px;
}

.pad-10-l {
    padding: 0 0 0 10px;
}

.pad-10-r {
    padding: 0 10px 0 0;
}

.pad-20 {
    padding: 20px;
}

.pad-0-20 {
    padding: 0 20px;
}

.pad-20-l {
    padding: 0 0 0 20px;
}

.pad-20-r {
    padding: 0 20px 0 0;
}

.pad-40 {
    padding: 40px;
}

.pad-0-40 {
    padding: 0 40px;
}

.pad-40-l {
    padding: 0 0 0 40px;
}

.pad-40-r {
    padding: 0 40px 0 0;
}

.pad-50 {
    padding: 50px;
}

.pad-0-50 {
    padding: 0 50px;
}

.pad-50-l {
    padding: 0 0 0 50px;
}

.pad-50-r {
    padding: 0 50px 0 0;
}

/*------------------- Flexgrid */

.flexgrid {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    list-style-type: none;
}

.flexgrid > div,
.flexgrid > li {
    width: 24%;
    margin: 0;
}

.flexgrid.split-50 > div {
    width: 50%;
}

.flexgrid li a {
    padding: 0;
    text-align: center;
    color: inherit;
}

/*------------------- Universal Classes */

.featimg {
    display: block;
    background: url() center / cover no-repeat;
}

.borderbox {
    align-items: center;
    border: 1px solid var(--site-border);
    padding: 20px 40px;
    margin: 10px 0;
    background: #fff;
}

.borderbox h2:first-of-type,
.borderbox h3:first-of-type,
.borderbox h4:first-of-type {
    margin-top: 0;
}

/*----------------- Product List Grid */
.flexgrid.product {
    padding: 0;
    margin: 0 -0.5%;
    align-content: flex-start;
    justify-content: initial;
}

.flexgrid.product > div,
.flexgrid.product li {
    width: 24%;
    margin: 0 0.5% 15px;
    display: block;
    text-align: center;
    height: 250px;
    background: #efefef;
}

/*------------------- Custom Scrollbars */

.scrollbox {
    scrollbar-width: thin;
    scrollbar-color: var(--site-border) rgba(255, 255, 255, 0.13);
    overscroll-behavior:contain;
}

.scrollbox::-webkit-scrollbar {
    background: rgba(255, 255, 255, 0.13);
    width: 5px;
    height: 5%;
}

.scrollbox::-webkit-scrollbar-thumb {
    background: var(--site-border);
}

/*------------------- Containers */

#container {
    display: block;
    margin: 0;
    padding: 0;
    max-width: 100vw;
    position: relative;

}

#pageContent,
.innerframe {
    display: block;
    margin: 0 auto;
    max-width: 1240px;
    position: relative;
}

#masthead {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 500;
    background: #fff;
    background-position: 0 92px;
    padding: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    border-bottom: 1px solid var(--site-border);
}
    #myAccount #masthead{
        height:94px;
    }
    #myAccount #masthead.docked {
        height: 64px;
        
    }
    #masthead::after {
        content: "";
        display: block;
        width: 100%;
        position: absolute;
        height: 40px;
        background: #fff;
        /*border-top: 3px double var(--dd-bkg2);*/
        background: linear-gradient(to bottom, rgb(255, 255, 255) 78%, rgb(245, 250, 254) 88%, rgb(231, 238, 242) 90%, rgb(255, 255, 255) 100%);
        inset: auto 0 0;
        z-index:-1;
    }
#masthead * {
    transition: all ease-in-out 0.1s;
}

#masthead.docked {
    box-shadow: 0px -1px 6px rgba(0, 0, 0, 0.23);
    background-position: 0 67px;
    border-color: #fff;
}

#pageContent {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 138px 0 0;
    margin: 0 auto;
}
#myAccount ##pageContent{
    padding-top:120px;
}
#pageContent #navBar {
    width: 20%;
    position: relative;
    padding: 30px 0 50px;
}

/*#gallery #pageContent #navBar {
    width: auto;
    padding: 39px 0 50px;
}*/

#mainContent {
    width: 80%;
    border-left: 1px solid var(--site-border);
    padding: 0;
}

#masthead #searchbox {
    background: #fff;
}

/*------------------- Masthead */
.logoframe {
    position: relative;
    display: flex;
    align-items:center;
    gap: 15px;
    position: absolute;
    inset: 0 auto 0 -3px;
    margin: auto;
}
#LogoIcon,
#Logo {
    display: block;
    width: 250px;
    overflow: hidden;
    padding: 0;
    background: url(/images/svg/D911-logo-mixed.svg) 0 center / contain no-repeat;    
    font-size: 0;
    z-index: 50;
    height: 60px;
}

#LogoIcon {
    width: 100px;
    height:48px;
    background: url(/images/svg/D911_EOT_Slogan.svg) 0 center / contain no-repeat;
    
}

#masthead > .innerframe {
    min-height: 90px;
    z-index: initial;
}

/*#masthead a:not(.button):not(.navlink) {
    color: inherit;
}*/

#siteNavigation {
    display: flex;
    justify-content: flex-start;    
    padding: 0;
    flex-direction: row-reverse;
    align-items: center;
    
}

    #siteNavigation ul {
        display: flex;
        gap: 0.45rem;
        list-style: none;
        margin: 0;
        padding: 0;
        color: var(--site-grey);
    }

#siteNavigation ul li {
    display: block;
    margin: 0;
    padding: 0;
    flex-shrink:0;
}
#siteNavigation ul li.mylogin {
    margin: 0 4px;
}
    #siteNavigation .loginFrame, 
    #siteNavigation > ul > li > a {
        display: flex;
        padding: 0 0 0;
        color: var(--dd-grey);
        font-size: 0.68rem;
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        position: relative;
        margin: 0;
    }

#siteNavigation ul li.login a svg,
#siteNavigation ul li.contact a svg {
    width: 24px;
    height: 24px;
}


body.login #siteNavigation ul li.login a {
    background: #fcfcfc;
}

#siteNavigation ul li.logout a:hover {
    background: #3a424a;
}

#siteNavigation #loggedIn {
    line-height: 30px;
    font-size: 0.724rem;
    background: #08a972;
    color: #fff;
    border-radius: 50%;
    margin:0;
    width: 30px;
    height: 30px;
    font-weight:600;
}


#masthead #call .no {
    margin: 0;
    padding: 0;
    font-size: 0.96rem;
    letter-spacing: -0.5px;
    font-family: 'Roboto';
    font-weight: 500;
    color: #788da4;
}

#siteNavigation ul #call {
    display: flex;
    align-items: center;
}

#call a .phone {
    display: none;
}

#call a .phone svg {
    width: 26px;
    height: 26px;
}
#call a.whatsapp {
    height: 30px;
    margin-right: 5px;
}

#call a.whatsapp img {
    width: 30px;
    height: 30px;
}

.mylogin svg {
    width: 30px;
    height: 26px;
}

#siteNavigation #accountBox {
    display: block;
    position: fixed;
    top: 0;
    left: auto;
    right: -51vw;
    width: 50vw;
    height: 100vw;
    padding: 0 1.85rem 4.0rem;
    background: #fff;
    color: #363c4b;
    z-index: 1000;
    box-shadow: -1px -1px 6px rgba(0, 0, 0, 0.3);
    transition: right ease-out 0.4s;
    border-top: 2px solid var(--dd-light-grey);
    max-width: 550px;
    overflow:auto;
    overscroll-behavior:contain;
}

#siteNavigation #accountBox.active {
    right: 0;
}

#myAccount #masthead {
    height: 94px;
    height:auto;
}

/*
#siteNavigation #accountBox li {
    display: block;
    width: 100%;
    margin: 0 0 10px;
    padding: 10px 0;
}
*/

/*usernav - 13/08/25 _ddkm */
.userNav {
    display: flex;
    padding: 0;
    margin: 0;
    flex-direction: column;
    gap: 1.13rem;
}
.user-info .close {
    background: var(--dd-bkg1);
    height: 50px;
    position:absolute;
    top: 0;
    padding-top: 1.0rem;
    color: var(--dd-grey);
    border-right: 1px solid var(--site-border);
    border-bottom: 1px solid var(--site-border);
    align-items: flex-start;
}
    .user-info .close svg{
        inset:initial;
        margin:0;
    }
    /*.user-info {
    position: sticky;
    z-index: 1;
    padding: 0.85rem 0 0 60px;
    background: #fff;
    height: 130px;
    min-width: 100%;
    top: 0;
    box-shadow: 0 17px 10px -19px rgba(0, 0, 0, 0.26);
    margin: 0 -1.85rem 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0 10px;
}*/
    .user-info {
        display: flex;
        flex-wrap: wrap;
        gap: 0 10px;
        position: sticky;
        z-index: 1;
        padding: 0.85rem 0 0.55rem;
        background: #fff;
        height: 130px;
        min-width: 100%;
        top: 0;
        box-shadow: 0 17px 10px -19px rgba(0, 0, 0, 0.26);
        margin: 0 auto;
    }

    .user-info svg{
        width:26px;
        height:26px;
        position:relative;
        top:3px;
        fill:var(--dd-light-grey);
    }
#myAccount .user-info svg{
    /*fill:var(--d911-teal);*/
}
.user-info .user-id {
    display: block;
    font-size: 1.3rem;
    line-height: 1.3rem;
    font-weight: 400;
    width: 80%;
    color: var(--site-grey);
    
}
.user-info .user-detail {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    font-size: 0.68rem;
    line-height: 0.88rem;
    font-weight: 600;
    gap: 6px 10px;
    /*color: var(--d911-teal);*/
    align-content: flex-start;
    margin:10px 0;
}

.user-detail .ud-title {
    width: 40%;
    color: var(--dd-light-grey);
    font-size: 0.76rem;
    line-height: 0.86rem;
    font-weight: 500;
    min-width: max-content;
}
.user-detail .ud-txt {
    width: calc(60% - 10px);
    
}

.button-nav{
    display:flex;
    flex-direction:column;
    gap:0.85rem;
}

.button-nav .navlink.user-action {
    position: absolute;
    inset: 30px 30px auto auto;
    max-width: 50%;
    min-width:300px;
}

.navlink {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--dd-bkg2);
    color: var(--dd-grey);
    font-size: 0.76rem;
    line-height: 0.86rem;
    font-weight: 500;
}
button.navlink {
    width:100%;
    border: none;
    border-bottom: 1px solid var(--dd-bkg2);
    padding: 0 0 8px;
    text-transform:none;
    height:auto;
    text-align:left;
}

.navlink svg {
    width: 16px;
    height: 16px;
    position: relative;
    top: 2px;
    flex-shrink:0;
}

.navlink:not(:has(.selected)) svg {
    fill: var(--dd-light-grey);
}
    .navlink .navlink-heading {
        font-size: 1.04rem;
        line-height: 1.14rem;
        color: var(--site-grey);
        display: block;
        margin: 0 0 5px;
        
    }
.navlink.active,
.navlink:hover .navlink-heading,
.navlink:hover {
    color: var(--d911-teal);
}
.navlink.active {
    border-color: var(--d911-teal);
}
    .userNav .navlink.dd_account-logout {
        margin-top: 40px;
    }
.navlink.dd_account-logout svg {
    width: 14px;
    height: 14px;
}
.navlink.dd_account-history svg {
    width: 20px;
    
}
.navlink.dd_account-logout .navlink-heading{
    color:var(--d911-orange);
}
.navlink .txt span {
    display: block;
    height: 28px;
    overflow: hidden;
}


#accountBox li.intro {
    border-bottom: 1px solid var(--site-border);
    margin-bottom: 30px;
}
    #accountBox li.intro .h2 {
        display: block;
        word-break: initial;
        white-space: initial;
    }
#accountBox li a:not(.button) {
    color: #363c4b;
    padding: 10px 20px;
    font-size: 16px;
    line-height: 22px;
}

#accountBox li a:not(.button):hover {
    color: #23a9be;
    background: transparent;
}

#accountBox li a.button {
    color: #fff;
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: #08a972;
}

#accountBox {
}

#siteNavigation ul #menu_icon {
    display: none;
}

#menu_icon svg {
    width: 24px;
    height: 26px;
}

#search_icon svg {
    width: 24px;
    height: 24px;
}

#masthead #topFrame {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-flow: row-reverse;

    border-left: 1px solid rgba(255, 255, 255, 0);
    padding: 5px 0;
    position: absolute;
    inset: 15px 0 auto auto;
    width: auto;
    height: 60px;
}

#topFrame .basket_icon {
    position: relative;
    display: inline-block;
    vertical-align: top;
    padding: 5px 0;
    margin-left: 10px;
}

#topFrame .basket_icon svg {
    width: 30px;
    height: 40px;
}

#topFrame .basket_icon a span {
    position: absolute;
    color: #eb6a2e;
    padding: 4px 0;
    display: block;
    inset: 7px 0 auto 4px;
    margin: auto;
    text-align: center;
    font-weight: 600;
    font-size: 0.66rem;
    line-height: 0.66rem;
}

/*New - displayed over the basket icon - 20/05/24*/

#topFrame .basket {
    display: block;
    padding: 0 1.85rem 6.0rem;
    background: #fff;
    color: #363c4b;
    position: fixed;
    top: 0;
    right: -55%;
    width: 50%;
    border-radius: 0;
    box-shadow: -1px -1px 6px rgba(0, 0, 0, 0.13);
    z-index: 5000;
    height: 100vh;
    overflow-y: auto;
    transition: all ease-in-out 0.4s;
    text-align: left;
    scrollbar-color: #a0a7af rgba(255, 255, 255, 0.13);
    border-top: 2px solid var(--dd-light-grey);
    overscroll-behavior:contain;   
}

#topFrame .popout-basket-container {
   /*border:1px solid #fc0;*/
}

#topFrame .basketFrame.active .basket {
    right: 0;
}

/*Shop Settings - 20/05/24*/
#shopSettings {
    display: block;
    position: relative;
    padding: 0 0 2px;
}

.trigger-settings {
    display: flex;
    align-items: center;
    text-align: left;
}
.trigger-settings svg {
    width: 24px;
    height: 24px;
    margin: 0 0 0 10px;
    flex-shrink: 0;
    fill: #606770;
}

.trigger-settings .label {
    display: block;
    font-size: 0.56rem;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0;
    color: #92aac6;
    line-height: 0.56rem;
}

#current_language {
    display: block;
    /*border-left: 1px solid #efefef;
  border-right: 1px solid #efefef;*/
    padding: 0 10px;
    flex-shrink: 0;
}

#current_language img {
    width: 22px;
    height: auto;
    display: block;
    margin: 4px 0 0;
    border-radius: 4px;
}
    
    #current_language .label {
        text-align: center;
    }

#ship_to {
    display: block;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
}

#ship_to .choice {
    color: #eb6a2e;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.644rem;
    line-height: 0.644rem;
    display: block;
    margin: 5px 0;
    max-width: 130px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 3px 0 1px;
    border-bottom: 1px solid var(--site-border);
    width: 120px;
    padding-bottom: 1px;
    height: 16px;
}

#current_currency {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    /* background: #eb6a2e; */
    /* background: var(--site-grey); */
    color: var(--site-grey);
    font-size: 0.96rem;
    font-weight: bold;
    margin: 2px 0 0 10px;
    flex-shrink: 0;
    line-height: 0.96rem;
    padding: 0 0 2px;
    background: #fff;
    border: 0.126rem solid var(--site-grey);
}
/*pop-up*/
.shop-settings {
    display: none;
    padding: 20px 8px 8px;
    background: #fff;
    box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.18);
    position: absolute;
    z-index: 1000;
    top: calc(100% + 3px);
    left: 50%;
    width: 200px;
    transform: translateX(-50%);
    text-align: left;
    border-top: 2px solid #91b0d7;
    border-radius: 0 0 4px 4px;
}

#shopSettings.active .shop-settings {
    display: block;
}

#shopSettings.active .trigger-settings *,
#shopSettings .trigger-settings:hover * {
    color: #91b0d7;
}

#shopSettings .trigger-settings:hover svg {
    fill: #91b0d7;
}

#shopSettings.active .trigger-settings img,
#shopSettings .trigger-settings:hover img {
    filter: grayscale(1) contrast(110%);
    /* opacity: 0.4; */
    mix-blend-mode: overlay;
}

#shopSettings.active .trigger-settings > svg {
    fill: #eb6a2e;
}

#shopSettings .trigger-settings:hover #current_currency,
#shopSettings.active #current_currency {
    color: #91b0d7;
    border-color: #91b0d7;
}
#current_language{
    position:relative;
}
    #shopSettings.active #current_language::before, 
    #current_language:hover #current_language::before {
        content: '';
        background: #91b0d7;
        position: absolute;
        inset: auto auto 0 0;
        border-radius: 4px;
        width: 22px;
        height: 17px;
        opacity: 0.8;
    }
    /*#shopSettings.active .trigger-settings::before{
        z-index: -1;
    }*/
    .shop-settings label {
        display: block;
        margin: 0 0 10px;
    }

.shop-settings label span {
    display: block;
    margin: 0;
    font-size: 0.68rem;
    text-transform: uppercase;
    font-weight: bold;
    color: #728294;
    height: 16px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.shop-settings label select {
    width: 100%;
    margin: 0;
    border: none;
    padding: 10px 0;
}

.save-changes {
    margin: 0;
}

.save-changes .button {
    width: 100%;
    margin: 0;
    text-align: center;
}
/*--end*/

#accountBox li a.close:hover, #accountBox li a.close, #topFrame .popout-basket-container .close, #navBar .close {
    display: flex;
    width: 40px;
    height: 50px;
    position: sticky;
    inset: 0 auto auto 0;
    background: var(--dd-bkg1);
    color: var(--dd-grey);
    padding: 0;
    justify-content: center;
    align-items: center;
    transform: translateX(-30px);
    border-radius: 0 0 4px 0;
}
#topFrame:not(:has([id="loggedIn"])) .popout-basket-container .close {
    border-radius: 0 0 4px 0;
}
#topFrame:has([id="loggedIn"]) .popout-basket-container .close {
    border-right: 1px solid var(--site-border);
    border-bottom: 1px solid var(--site-border);
}

.popout-basket-container .sticky-header {
    position: sticky;
    z-index: 1;
    padding: 0 0 0 60px;
    background: #fff;
    height: auto;
    min-width: 100%;
    top: 0;
    box-shadow: 0 17px 10px -19px rgba(0, 0, 0, 0.26);
    margin: -50px -1.85rem 0;
}
.current-basket .button.user-action {
    position: absolute;
    inset: 10px 30px auto auto;
    margin: auto;
    border-color: #a7b6c8;
    color: var(--dd-grey);
}
.basket .basket-head {
    /*display: flex;
    justify-content: space-between;
    padding: 0 1.85rem 0 0;
    font-weight: 400;
    align-items: center;
    gap: 1.85rem;*/
}
.basket-head .current-basket {
    display: flex;
    width: 100%;
    gap: 0.85rem;
    justify-content: space-between;
    margin:0;
}
.navlink .txt span {
	display: block;
	min-height: 28px;
}
.basket-head .empty-basket {
    flex-shrink: 0;
}

.basket h3 span {
    font-weight: 400;
}

.basket span.info {
    display: inline-block;
    vertical-align: middle;
    margin: 0 20px 0 0;
    padding: 8px 20px;
    max-width: 60%;
}

.basket .summary {
    margin: 0 0 20px;

    font-size: 18px;
    line-height: 22px;
    padding: 20px 0 15px;
}
.basket .summary > div {
	display: block;
	width: 100%;
	
}
.empty-side-basket {
    display: block;
    padding: 5rem 2.2rem;
}

/*basket_marker_12/08/25*/
.basket .summary > div {
    display: block;
    width: 100%;    
    margin: 0 auto;
}

.basket .summary > div.h4 {
    margin-top: 10px;
}

.basket .summary > div .amount {
    width: 180px;
    text-align: right;
}

.basket .summary > div .amount .icon {
    width: 15px;
    height: 15px;
    cursor: pointer;
}

.basket .summary > div .amount select {
    margin: 0;
    height: 30px;
    padding: 6px;
    font-size: 12px;
}

.summary-container {
    display: flex;
    border-top: 1px solid var(--dd-light-grey);
    position: relative;
    max-width: 600px;
    margin: 0 auto;
}
.basketFrame .summary_inner{
    margin:0 auto;
}

.summary-container dl {
    display: flex;
    justify-content: space-between;
    margin: 0 0 10px;
}
.summary-container .h6{
    font-weight:400;
}
.summary-container .h6 svg {
    width: 15px;
    height: 15px;
    margin-right: 5px;
}
.summary-container .h4 > div,
.summary-container .h6 > div {
    width: 130px;
}
.summary-container .border-none {
    border: none !important;
}

.summary {
    flex: 2;
}

.basket .summary > div.h6 small a {
    color: #eb6a2e;
    text-decoration: underline;
}

.basket .summary > div.popout-basket-vat-number-form {
    display: block;
    text-align: left;
    border: 1px solid #eb6a2e;
    padding: 10px;
    margin-top: 10px;
}

.basket .summary > div.popout-basket-vat-number-form h6 {
    margin: 0;
}

.basket .summary > div.popout-basket-vat-number-form .the-form {
    display: flex;
}

.basket .summary > div.popout-basket-vat-number-form .the-form input {
    margin-right: 10px;
}

.basket .summary > div.popout-basket-vat-number-form .the-form #vat-number-verify-button {
    width: 150px;
}

.basket .summary > div.important-basket-message {
    display: block;
    text-align: left;
    border: 1px solid #eb6a2e;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.basket .summary > div.important-basket-message p {
    padding: 0;
    margin: 0;
}

.basket .summary .checkout-buttons-container {
   
}

#fast-checkout-button-2 {
    min-height: 50px;
    margin: 10px 0 20px;
}

/*sidebar basket footer*/
.sidebar-basket-footer{

}
.basket-header-nav {
    padding: 0.85rem 0 0.55rem;
    margin: 0 1.85rem 0 0;
    margin-right:3.75rem;
    display: grid;
    grid-template-columns: repeat(2,minmax(45%,50%));
    gap: 0 1.85rem;
}
    .basket-header-nav .navlink {
        margin: 0 0 0.5rem;
    }
    .sticky-header .basket-title{
        /*display:flex;
        align-items:center;
        min-height:50px;
        border-bottom:1px solid var(--site-border);*/

        display: block;
        margin: 0 auto;
        width: 100%;
        padding: 0.85rem 0;
    }
    /*
.basket-footer-nav.threeCol {
    gap: 0.85rem;
}
.basket-footer-nav .use-group {
    grid-column: span 2;
    display: flex;
    gap: 0.85rem;
}
.basket-footer-nav .navlink {
    width: 100%;
}

*/
    .basket .basket_item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        max-width: 600px;
        margin: 30px auto -1px;
        padding: 0 0 8px;
        border-bottom: 1px solid var(--site-border);
    }
.popout-basket-container .basket .basket_item {
    margin: 0 0.85rem 0.85rem;
}
/*basket item frame - marker_15/08/25 -dd_km*/
.basket_item_frame {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    max-width: 600px;
    margin:2.2rem auto;
}
    .basket_item_frame .basket_item {
        width: 100%;
        border: 1px solid var(--site-border);
        border-radius: 4px;
        padding: 0.3rem;
        align-items: flex-start;
        position:relative;
        margin:0;
    }
    



/*.popout-basket-container .basket .summary > div {
        display: block;
        width: 100%;
        margin: 0;
    }
*/

    .basket .basket_item:first-of-type {
        /*border-top: 1px solid var(--site-border);*/
    }
.basket .basket_item:last-child {
    /*border:none;*/
}

.basket_item .product_image {
    width: 15%;
}
    .basket_item .product_image img{
        display:block;
        margin:0;
        width:100%;
        height:auto;
        aspect-ratio:1/1;
        border-radius:4px;
        object-fit:cover;
        min-width:80px;
    }
    .basket_item .product_info {
        width: 50%;
        padding: 0 15px;
        display: flex;
        flex-direction: column;
    }

    .basket_item .product_info a {
        display: block;
        padding: 5px 0;
        font-size: 0.96rem;
        font-weight: 500;        
        line-height: 1.06rem;
    }

.basket_item .product_info .code {
    display: block;
    padding:0;
    font-size:0.68rem;
    text-transform: uppercase;
    font-weight: 600;
    color: #23a9be;
}

.basket_item .product_price {
    font-size: 16px;
}

.basket_item .product_price small {
    color: #606770;
    padding: 0;
    font-weight:500;
}

.basket_item .basket-line-badges,
.product .product-info .basket-line-badges {
    display: flex;
    align-items: center;
}

/*.basket .basket_offer styles with main basket offers*/

#masthead .basket_item .product_info a:hover {
    color: #23a9be;
}

.basket_item .product_info small {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
}

.basket_item .product_info small .section-item {
    padding-bottom: 5px;
}

.basket_item .product_info small .offer {
    display: block;
    color: #08a972;
    font-weight: 600;
    padding: 2px 0;
}

.basket_item .product_price {
    color: var(--dd-green);
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-weight:500;
}

.basket_item .product_price input {
    width: 45px;
    text-align: center;
    margin: 0;
}

.basket .cta {
    text-align: right;
    display: block;
}

.basket .cta .button {
    display: inline-block;
    margin: 0 0 0 5px;
}

.basket .basket-footer-badges {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 20px;
}

.basket .basket-footer-badges .basket-footer-badge {
    display: block;
    max-width: 25%;
    text-align: center;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 0.84rem;
    color: #728294;
    margin-left: 20px;
}

.basket .basket-footer-badges .basket-footer-badge img {
    display: block;
    margin: 0 auto 5px;
}




.minimum-order-value-not-reached {
    display: flex;
    align-items: center;
    border: 1px solid #eb6a2e;
    padding: 15px;
    font-size: 18px;
}

.minimum-order-value-not-reached .info-flag {
    width: 40px;
    margin-left: 20px;
}

.minimum-order-value-not-reached .eu-flag {
    width: 75px;
}

.minimum-order-value-not-reached .message {
    padding: 0 20px 0 40px;
    flex: 1;
}

.delivery-warnings {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 10px;
}

.delivery-warnings .delivery-warning {
    width: 49%;
}

.delivery-warning {
    border: 1px solid #a5adb6;
    background: #fff;
    padding: 10px;
    margin: 10px 0;
    display: flex;
    align-items: center;
}

.delivery-warning .image {
    width: 30%;
}

.delivery-warning .description {
    width: 70%;
    padding-left: 10px;
}

.delivery-warning .description {
    width: 70%;
    padding-left: 10px;
}

.delivery-warning .description .important {
    font-weight: bold;
    text-transform: uppercase;
    padding-bottom: 5px;
    font-size: 13px;
}

.delivery-warning .description .message {
    font-size: 12px;
}

#topFrame .currencies {
    position: relative;
    display: inline-block;
    padding: 0;
    margin-left: 15px;
    line-height: 25px;
    text-align: center;
    width: 40px;
    min-width: 40px;
    border-radius: 50%;
    height: 40px;
    border: 1px solid var(--site-border);
}

#topFrame .currencies > a {
    display: block;
    padding: 3px 0 6px;
}

#topFrame .currencies .current_currency {
    font-size: 20px;
    line-height: 28px;
    color: #606770;
    display: block;
    margin: 2px auto;
    font-weight: 600;
}

#topFrame .currencies .currencies_box {
    display: none;
    position: absolute;
    top: 100%;
    left: -8px;
    width: 55px;
    padding: 10px 0;
    background: #fff;
    box-shadow: -1px -1px 6px rgba(0, 0, 0, 0.3);
    border-radius: 0 0 4px 4px;
    color: #363c4b;
    z-index: 100;
    line-height: 1rem;
}

#masthead .currencies.active .currencies_box {
    display: block;
}

#topFrame .currencies_box a {
    display: block;
    padding: 5px 0;
}

#topFrame .currencies_box a:hover {
    color: #eb6a2e;
}

#topFrame .currencies .currencies_box a small {
    font-size: 10px;
}

#topFrame .languages {
    display: inline-block;
    padding: 0;
    line-height: 25px;
    text-align: center;
    margin-left: 0;
    width: 40px;
    min-width: 40px;
    border-radius: 50%;
    height: 40px;
    border: 1px solid var(--site-border);
}

#topFrame .currencies:hover,
#topFrame .languages:hover {
    background: #fcfcfc;
}

#topFrame .languages #current_language {
    vertical-align: middle;
    display: block;
    margin: 0 auto 2px auto;
    width: 100%;
    border-radius: 4px 4px 0 0;
    padding: 12px 8px;
}

#topFrame .languages.active #current_language {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    opacity: 1;
}

#topFrame .languages .languages_box {
    display: none;
    position: absolute;
    top: 80%;
    right: 0;
    padding: 20px;
    background: #fff;
    z-index: 100;
    margin: 0;
    color: #363c4b;
    border-radius: 4px;
    box-shadow: -1px -1px 6px rgba(0, 0, 0, 0.3);
    min-width: 280px;
}

#masthead .languages.active .languages_box {
    display: block;
}

#translationDetector {
    color: #fff;
    height: 1px;
}

#google_translate_element {
    margin: 15px 0 0;
    display: block;
    padding: 0;
}

#masthead #language_shortcuts > a {
    display: block;
    text-align: left;
    padding: 5px;
    margin: 5px 0;
    font-weight: 500;
}

#masthead .languages .languages_box a:hover {
    color: #23a9be;
}

#masthead .languages .languages_box a img {
    display: inline-block;
    vertical-align: middle;
}

#masthead #language_shortcuts a span {
    padding: 0 20px;
    display: inline-block;
    vertical-align: middle;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.5px;
}

#masthead .currencies.active,
#masthead .languages.active {
    background: #f9f9f9;
}

#masthead #searchbox {
    position: absolute;
    top: -5px;
    bottom: 0;
    right: 0;
    line-height: 25px;
    width: 100%;
    margin: 5px 0 0;
    padding: 15px 40px 15px 20px;
    visibility: hidden;
    opacity: 0;
    z-index: 5000;
    display: block;
    align-items: center;
}

#masthead #searchbox.active {
    visibility: visible;
    opacity: 1;
}

#searchbox input {
    border: 1px solid #c1c9d2;
    border-color: #d0d9e3;
    min-width: initial;
    margin: 0 -2px;
    font-size: 0.786rem;
    font-weight: 500;
    color: var(--site-grey);
}

#searchbox input[type='text'] {
    border-radius: 4px 0 0 4px;
}

#searchbox .searchButton {
    width: 30%;
    background: #a5adb6;
    border-radius: 0 4px 4px 0;
}

#searchbox .searchButton:hover {
    background: #eb6a2e;
    border-color: #eb6a2e;
}

#searchbox .searchbox {
    width: 70%;
}

.close {
    display: flex;
    align-items:center;
    justify-content:center;
    width: 40px;
    height: 40px;    
    position: absolute;
    inset: 0 auto auto 0;
    z-index: 100;
    padding: 0;
    background: var(--dd-bkg1);    
    color: var(--dd-grey);
}

    .close:hover {
        
        background: var(--dd-bkg1);
    }

.close svg {
    width: 16px;
    height: 16px;
}

#errorBox {
    background: #50545f;
    padding: 0;
    text-align: center;
    margin: 2px 3px 0 -2px;
    font-size: 12px;
    display: none;
}

#dimScreen {
    position: fixed;
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    z-index: 100;
}

.please-wait-message {
    position: fixed;
    top: 25vh;
    left: 0;
    right: 0;
    margin: auto;
    padding: 25px;
    font-size: 18px;
    line-height: 22px;
    font-weight: bold;
    z-index: 1001;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    color: #08a972;
    letter-spacing: 0.5px;
}

.please-wait-message:before {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: rgba(255, 255, 255, 0.9);
}

.please-wait-message img {
    display: block;
    margin: 0 auto;
}

/*------------------- #Ad */
.banner a[href='#'] {
    cursor: default;
}

.bottom-banner {
    display: block;
    position: fixed;
    z-index: 200;
    bottom: -80px;
    left: 0;
    right: 0;
    margin: auto;
    background: #fff;
    text-align: center;
    padding: 1px 0 0;
    visibility: hidden;
    opacity: 0;
    transition: all ease-in-out 0.4s;
    max-height: 80px;
    box-shadow: 0px -1px 5px rgba(0, 0, 0, 0.13);
}

.bottom-banner.active {
    bottom: 0;
    opacity: 1;
    visibility: visible;
}

#checkout .bottom-banner {
    display: none;
}

.bottom-banner picture {
    display: block;
    margin: 0 auto;
}

#home .bottom-banner {
    display: none;
}

#footer #trustPilot {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 20px 0;
}

#footer #trustPilot .trustpilot-widget {
    max-height: 75px;
}

#filterSelector {
    display: block;
    padding: 0 20px;
    border-top: 3px double var(--dd-bkg2);
    min-height: 48px;
    /*background: #fff;    
    background: linear-gradient(to bottom, rgb(255, 255, 255) 78%, rgb(245, 250, 254) 88%, rgb(231, 238, 242) 90%, rgb(255, 255, 255) 100%);*/
}

#masthead.docked #filterSelector {
    min-height: 54px;
}

#filterSteps {
    display: none;
}

#filterSelector-choices {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#filterSelector-choices .label {
    text-transform: uppercase;
    margin: 0;
    display: flex;
    align-items: center;
    width: 25%;
    font-weight: 500;
}

#filterSelector-choices .label::after {
    content: 'Start here';
    display: inline-block;
    background: #242c34;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px;
    margin-left: 20px;
    border-radius: 8px 0;
    white-space: nowrap;
}

#filterSelector-choices .filterSteps {
    padding: 0 0 0 10px;
    width: 60.4%;
    display: flex;
    justify-content: space-between;
}
#filterSelector-choices .filterSteps > span {
    width: 42%;
    margin: 0;
    padding: 4px 0 5px 5px;
    text-transform: uppercase;
    font-size: 0.78rem;
    font-weight: 500;
    position: relative;
    display: flex;
    align-items: center;
}

#filterSelector-choices .filterSteps > span::before {
    display: block;
    background: #bccde1;
    width: 20px;
    height: 28px;
    line-height: 26px;
    text-align: center;
    font-weight: 600;
    margin: 0 -5px 0 0;
    border-radius: 5px;
    z-index: 10;
    font-size: 0.66rem;
}

#filterSelector-choices .filterSteps > .step2:before {
    content: '1';
}

#filterSelector-choices .filterSteps > .step3:before {
    content: '2';
}

#filterSelector-choices .filterSteps > .step1 {
    display: none;
}

#filterSelector-choices .filterSteps > span:nth-of-type(4) {
    width: 120px;
}

#filterSteps .selected {
    color: #606770;
}

#filterSteps .selected span {
    background: #131313;
    opacity: 0.6;
}

#filterSelector-choices .filterSteps .step1 {
    display: none;
}

#filterSelector-choices .filterSteps button,
#filterSelector-choices .filterSteps select {
    width: 100%;
    min-width: initial;
    margin: 0;
}

#filterSelector-choices .filterSteps select {
    color: #7d8ea2;
    padding: 4px 13px;
    text-transform: uppercase;
    border-radius: 4px;
    border: 1px solid var(--site-border);
    height: 32px;
    font-weight: 600;
    font-size: 0.76rem;
    letter-spacing: 0.026rem;
}

#filterSelector-choices .filterSteps select.unselected {
    cursor: pointer;
}

#filterSelector-choices .filterSteps > span.active:before {
    background: #08a972;
}

#filterSelector-choices .filterSteps > span.active select {
    border-color: #08a972;
}

#filterSelector-choices.active .filterSteps > span:before,
#filterSelector-choices.active .filterSteps > span.active:before {
    background: #bccde1;
}

#filterSelector-choices.active .filterSteps > span select,
#filterSelector-choices.active .filterSteps > span.active select {
    border-color: #bccde1;
}

#filterSelector-choices.active .label::after {
    display: none;
}

#filterSelector #dropCarMake {
    background: transparent;
}

#filterSelector-choices .filterSteps button {
    width: 100%;
    padding: 8px 14px;
    font-size: 0.68rem;
    font-weight: 600;
    border-color: transparent;
    color: #fff;
    background: #9cadc1;
    border-radius: 4px;
    height: 32px;
}

#filterSelector-choices .filterSteps button.enabled {
    background: #08a972;
}

#filterSelector-choices .filterSteps button:hover {
    background: #a5adb6;
    color: #fff;
}

#filterSelector-chosen {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 5px 0;
    font-family: 'Roboto', sans-serif;
    cursor: pointer;
}

#filterSelector-chosen .myVehicle,
#filterSelector-chosen p {
    margin: 0;
}

#filterSelector-chosen p {
    width: 25%;
    border-right: 1px solid #23a9be;
}

#filterSelector-chosen .myVehicle {
    width: 60%;
    padding: 0;
    font-weight: 500;
    color: #23a9be;
    font-size: 0.86rem;
    line-height: 1.06rem;
    margin: 0 0 4px;
}

#filterSelector-chosen .myVehicle span.label-separator {
    color: #92aac6;
    font-weight: 500;
}

#filterSelector-chosen .myVehicle span.label-separator strong {
    /*color:var(--site-grey);*/
}

#filterSelector-chosen .changeCar {
    width: auto;
    text-align: right;
}

#filterSelector-chosen input {
    display: flex;
    color: var(--d911-teal);
    width: 160px;
    min-width: initial;
    font-size: 0.72rem;
    font-weight: 600;
    margin: 0 0 4px;
    letter-spacing: -0.013rem;
    border-radius: 4px;
    height: 34px;
    border: 1px solid var(--dd-bkg2);
    padding: 4px 12px;
    justify-content: space-between;
}

#filterSelector-chosen input:hover {
    background: var(--d911-teal);
    color: #fff;
}

.basic-lightbox {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 9000;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.6);
    padding: 20px;
    visibility: hidden;
    opacity: 0;
    transition: all ease-in-out 0.4s;
    pointer-events: none;
}

.basic-lightbox.active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.basic-lightbox-content {
    display: block;
    padding: 4px;
    background: #fff;
    position: relative;
}

.basic-lightbox-content .close {
    background: #fff;
    color: #131313;
    top: -36px;
    z-index: -1;
}

.basic-lightbox-content .close:after {
    content: '';
    display: block;
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0.2;
}

.basic-lightbox-content img {
    display: block;
    margin: 0;
}

/*------------------- Masthead Docked */

#masthead.docked > .innerframe {
    min-height: 60px;
}

#masthead.docked #Logo {
    width: 200px;
}
#masthead.docked #LogoIcon {
    left:210px;
    height:38px;
}
#masthead.docked #searchbox,
#masthead.docked #topFrame,
#masthead.docked #searchbox {
    top: 0;
}

#masthead.docked #filterSteps,
#masthead.docked .promoBox {
    opacity: 0;
    height: 1px;
    overflow: hidden;
}

#masthead.docked #filterSelector select,
#masthead.docked #filterSelector input {
    height: 35px;
}

#masthead.docked #filterSelector-chosen {
    padding: 0;
}

#masthead.docked #filterSelector-chosen input {
    margin: 6px 0 8px;
}

/*------------------- #Footer */
#footer {
    background-color: #fff;
    border-top: 4px double var(--site-border);
    padding: 0;
    box-shadow: 0px -1px 6px rgba(0, 0, 0, 0.13);
    border-bottom: 4px solid #eb6a2e;
    position: relative;
}

#footer > .innerframe {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#footer a {
    color: currentColor;
}

#footer a.contact {
    color: #eb6a2e;
}

#footer a:hover {
    color: #eb6a2e;
}

.footerlogo img {
    display:block;
    width: 100%;
    height: auto;
    height: 40px;
    object-fit: contain;
    object-position: 0 0;
    max-width: 230px;
}

#footer ul {
    list-style: none;
}
.footColFrame {
    display: block;
    /*height: calc(100vh - 188px);*/
}

#footCol1 {
    width: 20%;
    margin: 0;
    padding: 30px 20px 20px 0;
}
.footerlogo {
    max-width: 180px;
    height: 40px;
}

#footCol2 {
    width: 80%;
    margin: 0;
    padding: 10px 0 40px 20px;
    display: grid;
    grid-template-columns: repeat(4, minmax(23%, 25%));

    grid-gap: 20px;
    border-left: 1px solid var(--site-border);
    overflow: auto;
    max-height: 100%;
}

#footCol2 .block-col {
    display: block;
}

.block-col .h3 {
    margin: 20px 0 40px;
}

#footer #lowerFooter {
    width: 100%;
    padding: 10px 0 10px;
    border-top: 1px solid var(--site-border);
    text-align: center;
    color: #8899ae;
    font-size: 0.78rem;
    letter-spacing: 0.13rem;
    text-transform: uppercase;
    font-weight: bold;
    height: 50px;
    background: #fcfcfc;
}

#lowerFooter .copyframe {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 0 60px;
    max-width: fit-content;
    position: relative;
    gap: 40px;
}
#footCol2 ul li {
    margin: 0 0 8px;
}

#lowerFooter a {
    color: currentColor;
}

#footer ul + .h3,
#footer p + .h3 {
    margin-top: 30px;
}

#footCol2 .socialbox {
    grid-column: span 4;
}

.socialbox .h3 {
    margin: 0 0 10px;
}

.socialbox ul.social {
    display: flex;
    list-style: none;
    gap: 20px;
}

.social li {
    display: block;
    margin: 0 0 15px 0;
}

.social li a {
    display: block;
}

.social li a span {
    padding-left: 10px;
}

.social li svg {
    width: 25px;
    height: 25px;
}

.creditcards {
    margin: 40px 0 0;
    height: 40px;
    width: 100%;
}

.creditcards img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.popout-basket-container .creditcards {
    margin: 10px 0;
    background: url('../images/svg/PAYMENT_STRIP_UK.svg') center / contain no-repeat;

}

#footer .button,
#footer .newsletter input {
    width: 100%;
}

#gotop {
    display: block;
    margin: auto;
    width: 31px;
    height: 30px;
    line-height: 40px;
    text-align: center;
    border: 1px solid var(--site-border);
    background: url('../images/svg/arrow-down.svg') center / 22px auto no-repeat;
    transform: rotate(-180deg);
    border-radius: 4px;
    position: absolute;
    inset: 0 auto 0 0;
}
#ddtag svg {
    width: 150px;
    height: 30px;
    color: #a5b6ca;
}
/*------------------- #navBar */
#navBar .sectionContent {
    display: block;
    margin: 0 0 40px;
}

#navBar .sectionContent img {
    max-width: 90%;
    object-fit: contain;
}

#navBar .navTitle {
    display: block;
    padding: 10px 0;
    text-transform: uppercase;
    border-bottom: 1px solid var(--site-border);
    margin: 0 0 20px;
}

#navBar .navTitle a {
    color: currentColor;
}

#navBar ul#partsMenu {
    display: block;
    padding: 0;
    margin: 0;
    list-style: none;
}

#partsMenu li {
    display: block;
    margin: 0 0 5px;
}

    #partsMenu li a {
        display: block;
        padding: 0.16rem 0;
        text-transform: uppercase;
        font-size: 0.824rem;
        font-weight: 600;
    }

#partsMenu li.selected a,
#partsMenu li a:hover {
    color: #eb6a2e;
}

#partsMenu {
}

#partsMenu {
}

/*------------------- Homepage */
.homePageBoxes {
    display: block;
    padding: 0 0 0 15px;
    margin: 0;
    max-width: 100%;
    width: 100%;
}

.homePageBoxes h1 {
    margin: 0 0 15px;
    /*text-transform: uppercase;*/
}

   

    #recentProducts {
        margin: 30px 0;
    }

.homePageBoxes > h2 {
    margin-top: 30px;
}

.homePanel h2 {
    width: 100%;
}

ul.intro_icon {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 0;
    margin: 30px 0 0;
}

ul.intro_icon li {
    display: inline-block;
    list-style: none;
    margin: 0 0 10px 0;
    padding: 0 20px 0 0;
}

ul.intro_icon li img {
    border: 1px solid var(--site-border);
}

.Banners {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 22px 0 0 0;
}

.Banners > div {
    display: block;
}

.Banners > div:nth-child(1),
.Banners > div:nth-child(2),
.Banners > div:nth-child(3),
.Banners > div:nth-child(4) {
    margin: 0 0 10px;
    width: 100%;
}

.Banners > div img {
    display: block;
    width: 100%;
    height: 400px;
    object-fit:cover;
}

.introPanel {
    margin: 0 0 50px;
    padding: 0;
}
.homePageBoxes .introPanel {
    margin: 0 0 50px;
    padding: 0;
    columns: 2;
    gap: 40px;
    break-inside: avoid;
}

.homePageBoxes .introPanel h1 {
    column-span: all;
}
.banner-carousel {
    display: block;
    width: 100%;
    margin: 30px 0 6px;
    aspect-ratio: 5/1.54;
    overflow:hidden;
    /*border:1px solid #a0a7af;*/
}
    .banner-carousel .bx-wrapper {
        position: relative;
        z-index: 0;
    }
    .banner-carousel .bx-viewport {
        
    }
    .banner-carousel ul{
        list-style:none;
        display:block;
    }
        .banner-carousel ul li{
           
        }
            .banner-carousel ul li a {
                display: block;
                position: relative;                
            }
        .banner-carousel .bx-wrapper picture {
            
        }


            .banner-carousel .bx-wrapper picture img {
                object-fit: cover;
                aspect-ratio: 5/1.54;
            }

    .banner-carousel .bx-wrapper .bx-prev {
        left: 10px;        
    }
    .banner-carousel .bx-wrapper .bx-next {
        right: 10px;
    }
    .banner-carousel .bx-wrapper .bx-prev,
    .banner-carousel .bx-wrapper .bx-next{
        opacity:0;
        background-position:center;
    }
    .banner-carousel:hover .bx-wrapper .bx-prev,
    .banner-carousel:hover .bx-wrapper .bx-next {
        opacity: 1;
        background-position: center;
    }
    /*------------------- Categories */
    #categories {
        padding: 0;
        display: grid;
        grid-template-columns: repeat(6, minmax(14%, 16%));
        margin: 40px 0;
        grid-gap: 10px;
        list-style: none;
    }

#categories li {
    display: block;
    padding: 0;
    border: 1px solid var(--site-border);
    margin: 0;
    width: 100%;
    background: #fff;
    border-radius: 4px;
    transition: all ease-in-out 0.2s;
}
#categories li:hover {
    background: var(--dd-bkg1);
    box-shadow: 0 15px 10px -10px rgba(33, 43, 59, 0.3);
    transform: translate(0, -3px);
}
#categories li h5 {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#categories li a {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    text-align: center;
}

#categories li a span {
    width: 100%;
    display: block;
    border-top: 1px solid var(--site-border);
    padding: 20px 10px 10px;
}

#categories li img {
    width: 90px;
    height: 90px;
    margin: 10px auto;
    object-fit: scale-down;
    /*mix-blend-mode: multiply;
    transition: var(--transition-all);
    filter: grayscale(100%) contrast(110%);*/
}
#categories li:hover img {
    /*filter: grayscale(0%) contrast(110%);*/
    mix-blend-mode: multiply;
    opacity: 1;
}
    
    #categories li a {
        display: block;
        padding: 0;
        text-transform: uppercase;
        font-weight: 500;
        color: inherit;
        word-break: break-word;
    }
#categories li a span {
    width: 100%;
    display: block;
    border-top: 1px solid var(--site-border);
    padding: 10px;
}

#categories li a#viewall {
    border-top: 1px solid var(--site-border);
    color: #2a5bba;
    padding: 6px 0;
    margin-top: 8px;
}

#categories li a:hover {
    color: #23a9be;
}

#categories.diagrams li {
    text-align: center;
}

#categories.diagrams li a img {
    display: inline-block;
}

#HomeFeatured {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px 0 0;
}

#HomeFeatured > div {
    border: 1px solid var(--site-border);
    padding: 10px;
    background: #fff;
}

#manufacturersHighlight .boxes {
    display: flex;
    justify-content: space-between;
}

#manufacturersHighlight .boxes > div {
    width: 30%;
    padding: 10px;
    text-align: center;
}

#whatsHot {
    width: 25%;
}

#discountTyres img,
#whatsHot img {
    width: 100%;
}

#manufacturersHighlight {
    width: 47.5%;
}

#discountTyres {
    width: 25%;
}

#HomeFeatured > div > h2 {
    min-height: 80px;
    border-bottom: 1px solid var(--site-border);
}

#productHighlight {
    border: 1px solid var(--site-border);
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    background: #fff;
}

#productHighlight > .product {
    width: 40%;
    text-align: center;
    padding: 10px;
}

#productHighlight > .desc {
    width: 60%;
    padding: 20px 20px;
    border-left: 1px solid var(--site-border);
}

#productHighlight .desc .h4 {
    width: 100%;
    margin: 0;
}

.paypalCredit {
    margin-top: 20px;
    text-align: center;
}

/*------------------- xxx */
#mainContent {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    position: relative;
    padding: 0;
    min-height: 40rem;
}

#mainContent .rightColumnContainer {
    width: 180px;
    border-left: 1px solid var(--site-border);
    padding: 0;
    margin: 0;
}

#bodyText {
    width: 100%;
    padding: 20px 0 20px 20px;
}

#bodyText.page {
    padding: 80px 50px;
}

#bodyMain {
    display: block;
    width: 100%;
    padding: 30px 20px;
}

/*------------------- ProductList.aspx */

/*.breadcrumbs {
  display: block;
  margin: 0 0 40px 0;
  border-bottom: 1px solid var(--site-border);
  padding: 0 0 10px 0;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.5px;
}*/
.breadcrumbs {
    display: flex;
    margin: 0 0 40px 0;
    border-bottom: 1px solid var(--site-border);
    padding: 0 0 10px 0;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: 0.5px;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}
/*.breadcrumbs::before{
        content:"xox";
    }*/
.breadcrumbs h1,
.breadcrumbs h1 span {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    display: inline;
    line-height: 20px;
}

.breadcrumbs h5 {
    margin-top: 0;
}

.breadcrumbs span {
    color: #606770;
    display: block;
    line-break: loose;
}

.sectionTitle {
    /*font-family: 'Roboto';*/
    margin: 40px 0 10px 0;
    padding: 0 0 5px 0;
    border-bottom: 1px solid var(--site-border);
}

.sectionTitle.results {
    min-height: 40px;
    color: #363c4b;
}

.sectionTitle.results span {
    color: #23a9be;
}

.sectionTitle.results {
    margin: 5px 0 30px;
}

.sectionTitle.results a.active {
    visibility: hidden;
}

#relatedCategory,
#youmayalsolike .sectionContent,
#popularmodels .sectionContent {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    min-width: 100%;
    margin: 0 -1% 0;
}

#relatedCategory > div,
#youmayalsolike .sectionContent > div,
#popularmodels .sectionContent > div {
    border: 1px solid var(--site-border);
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
    border-radius: 4px;
    background: #fff;
    margin: 10px 1%;
    display: flex;
    /*Must be  for IE11*/
    flex-flow: column;
    /*Must be  for IE11*/
    width: 23%;
}

#relatedCategory > div:hover,
#youmayalsolike .sectionContent > div:hover,
#popularmodels .sectionContent > div:hover {
    border-color: #23a9be;
}

#relatedCategory > div:hover a,
#youmayalsolike .sectionContent > div:hover a,
#popularmodels .sectionContent > div:hover a {
    color: #23a9be;
}

#relatedCategory > div a,
#youmayalsolike .sectionContent > div a,
#popularmodels .sectionContent > div a {
    display: block;
    padding: 10px 20px;
}

#navBar .shopInfo {
    border-top: 1px solid var(--site-border);
    margin: 30px 0;
}

#navBar .headedPanel {
    border-bottom: 1px solid var(--site-border);
    border-left: 1px solid var(--site-border);
    margin: 0;
    padding: 20px;
    text-align: center;
    background: #fff;
}

#navBar .headedPanel .h6 {
    color: #23a9be;
    text-transform: uppercase;
}

#navBar .fastFinder {
    display: flex;
    padding: 20px;
    border: 1px solid var(--site-border);
    border-radius: 4px;
    margin-right: 20px;
    background: #fff;
}

#diagramsLink {
    position: relative;
}

#navBar .diagrams {
    display: flex;
    padding: 5px 10px 5px 20px;
    border: 1px solid #08a972;
    border-radius: 4px;
    margin-right: 20px;
    background: #fff;
    gap: 10px;
}

#navBar .diagrams::before {
    background: url('/images/green-triangle.png') 0 center / contain no-repeat;
    position: absolute;
    top: 4px;
    left: 0px;
    height: 30px;
    content: '';
    width: 30px;
}

#navBar .fastFinder:hover,
#navBar .diagrams:hover {
    background: #fcfcfc;
}

/*.fastFinder svg,
.diagrams svg {
  width: 50px;
  height: 50px;
}*/

.fastFinder span,
.diagrams span {
    padding: 0;
}

.fastFinder span strong,
.diagrams span strong {
    display: block;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 16px;
    padding: 0;
}

.headedPanel svg,
.headedPanel img {
    display: block;
    margin: 0 auto;
}

.headedPanel svg {
    fill: #23a9be;
    width: 50px;
    height: 50px;
}

.headedPanel a {
    color: #23a9be;
}

#productListContainer .sectionContent {
    padding: 20px 0;
}

#productListContainer .brand-filters .sectionContent {
    padding: 0;
}

#productListContainer {
    display: block;
    padding: 0;
    margin-top: 40px;
    position: relative;
}

#categoryOpen,
#navBar .close {
    display: none;
}

#AboutSection .sectionContent {
    columns: 2;
    column-gap: 50px;
    margin: 0 0 40px;
    /*font-size: 0.96rem;
    line-height: 1.2rem;*/
}

.sectionContent p {
    break-inside: avoid;    
}

/*------------------- Product List */

.products-list {
    display: block;
    padding: 30px 0 0;
}

.product-wrapper {
    display: block;
    border: 2px solid #bccde1;
    border-color: #d0d9e3;
    border-color: #c1d2e394;
    padding: 0;
    margin: 0 0 50px;
    background: #fff;
    transition: all ease-in-out 0.2s;
    position: relative;
    border-radius: 4px;
    /*box-shadow: 0 15px 10px -18px rgba(0, 0, 0, 0.35);*/
    box-shadow: 0 18px 10px -18px rgba(0, 0, 0, 0.4);
}

/*.products-list .product-wrapper {
    z-index: 0;
}*/
.products-list .product-wrapper.modal-active {
    z-index: 10;
}
.product-wrapper:hover {
    
}
.listview .product-wrapper:hover {
    /*box-shadow: 0 30px 18px -28px rgba(0, 0, 0, 0.45);*/
}
#product .productFrame .product-wrapper:hover {
    box-shadow: none;
}

.product-wrapper .productDisplayOuterContainer {
    border-radius: 4px;
}

.product-wrapper a[class^='']:hover {
    color: #23a9be;
}

.product-wrapper .framedImage {
    display: flex;
    justify-content: center;
    padding: 65px 0;
    position: relative;
    align-items: center;
    height: 100%;
}
.product-wrapper .framedImage img {
    display: block;
    margin: auto;
}
.listview .product-wrapper .framedImage {
}

.product-wrapper .framedImage .zoom {
    position: absolute;
    bottom: 0;
    left: 10px;
    font-size: 0.68rem;
    letter-spacing: -0.13px;
    font-weight: 600;
    color: #606770;
    text-transform: uppercase;
    padding: 5px;
    width: 45px;
    text-align: center;
    line-height: 0.86rem;
}
.product-wrapper .framedImage .zoom a {
    display: block;
}
.product-wrapper .framedImage .zoom svg {
    /*Camera Icon*/
    width: 20px;
    height: 20px;
    margin: -2px auto 0;
}
.product-wrapper .framedImage .zoom .count {
    color: #23a9be;
    position: relative;
    top: 1px;
}
.productImageContainer {
    position: relative;
}

.productImageContainer .diagramBox a {
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 5px 10px;
    color: #fff;
    background: #363c4b;
    font-size: 12px;
    line-height: 14px;
    text-transform: uppercase;
    font-weight: 600;
}

.productImageContainer .diagramBox a img {
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
}
/*.productInfoBox .product-head*/
.product-wrapper .productInfoBox .product-head {
    margin: 0;
    padding: 0;
    border-left: 1px solid var(--site-border);
    border-bottom: 1px solid var(--site-border);
    margin-bottom: 0;
    min-height: 80px;
    display: flex;
}
.product-wrapper .productInfoBox .product-head.prodpage {
    border: none;
}
.product-wrapper .productInfoBox .product-head a {
    display: block;
    width: calc(100% - 150px);
    padding: 15px 20px;
    color: var(--site-grey);
}
.listview .product-wrapper .productInfoBox .product-head {
    height: 100px;
}
#product .listview .product-wrapper .productInfoBox .product-head {
    height: 100px;
    justify-content: flex-end;
    border-left: 1px solid var(--site-border);
    border-bottom: 1px solid var(--site-border);
}
.product-wrapper .productInfoBox .product-head a:hover {
    color: var(--d911-teal);
}
.product-wrapper .productInfoBox .product-head .brand-logo {
    width: 150px;
    display: block;
    padding: 15px 5px;
    border-left: 1px solid var(--site-border);
    text-align: center;
    position: relative;
}
.product-wrapper .productInfoBox .product-head .brand-logo img {
    display: block;
    margin: auto;
    position: absolute;
    inset: 0;
    object-fit: contain;
    width: 100px;
    height: 60px;
}
.brand-logo .txt {
    position: absolute;
    inset: auto 0 0;
    font-size: 0.66rem;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--site-accent);
    display: none;
}

.gridview .product-wrapper .productInfoBox .product-head a {
    width: 100%;
    padding: 0;
    height: 60px;
    overflow: hidden;
    margin: 0;
}
.gridview .product-wrapper .productInfoBox .product-head .brand-logo {
    width: initial;
    border: none;
    position: relative;
    inset: initial;
    margin: 0 -15px;
    border-top: 1px solid var(--site-border);
    padding-bottom: 10px;
    height: 70px;
}
.product-wrapper .prod-main-txt .txtbox {
    padding: 15px 10px 15px 20px;
    color: var(--site-grey);
}

.product-wrapper .prod-main-txt .txtbox .row {
    display: block;
}

.product-wrapper .special-offer .panel {
    padding-top: 10px;
    display: flex;
    justify-content: flex-end;
    margin: 10px 0 0;
}

.product-wrapper .special-offer .panel input {
    vertical-align: middle;
    margin-left: 5px;
    margin: 0;
    text-align: center;
}

.product-wrapper .special-offer #dialog {
    display: block;
    padding: 10px;
}

.product-wrapper .special-offer .pricebox {
    font-size: 16px;
    text-align: right;
    display: block;
    margin: 15px 0 0;
}

.product-wrapper .special-offer .pricebox .pricewas {
    text-decoration: line-through;
    color: #a0a7af;
}

.product-wrapper .special-offer .pricebox .pricenow {
    color: #08a972;
    margin-left: 10px;
}

.product-wrapper .offer {
    color: #08a972;
    font-weight: 600;
    text-transform: uppercase;
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px 20px;
}

.product-wrapper img.brand {
    vertical-align: middle;
}

.product-wrapper p {
    margin: 0 0 5px;
    padding: 15px 0;
}

.product-wrapper p.txtlimit {
    border-bottom: 1px solid #d0dbdd;
    max-height: 150px;
    overflow: auto;
    padding: 15px 20px 15px 0;
}

.product-wrapper .error {
    display: block;
    padding: 0 15px 10px;
}

.product-wrapper .diagramListContainer {
    padding: 15px 15px 0;
    border-top: 1px solid var(--site-border);
}
.product-wrapper .diagramListContainer .diagramList {
    grid-template-columns: repeat(6, minmax(15%, 16%));
    grid-gap: 10px;
}
.gridview .product-wrapper .diagramListContainer .diagramList {
    grid-template-columns: repeat(4, minmax(24%, 25%));
}
.gridview .product-wrapper .diagramListContainer {
    padding: 20px 15px 0;
}

/*Section 1*/
.productDescriptionContainerTop {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0;
    margin: 0;
}
.listview .productDescriptionContainerTop {
    height: 328px;
}
.productDescriptionContainerTop .productImageContainer {
    display: block;
    margin: 0;
    width: 35%;
    height: 328px;
}

.productDescriptionContainerTop .productInfoBox {
    width: 65%;
    margin: 0;
    padding: 0;
}
.productDescriptionContainerTop .productInfoBox .code-label svg {
    width: 16px;
    height: 16px;
    fill: #728294;
    margin-right: 3px;
}
.home .gridview.offers .productInfoBox .product-head {
    min-height: 90px;
}

.productInfoBox .code {
    display: block;
    padding: 10px;
    position: absolute;
    top: 0;
    left: 10px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color:var(--d911-teal);
}
.gridview .product-wrapper .framedImage .zoom,
.gridview .productInfoBox .code {
    left: 0;
}
.productInfoBox .prod-main-txt {
    display: block;
    height: 228px;
    overflow: auto;
    padding: 0;
    margin: 0;
    border-left: 1px solid var(--site-border);
}

.productInfoBox.kit .scrollbox,
.productInfoBox.allvehicles .scrollbox {
    height: 180px;
}

.scrollbox .txtbox {
    padding: 10px 15px;
}

/*Section 2*/
.productDescriptionContainerBottom {
    display: block;
    margin: 0;
    padding: 0;
}
.gridview .productDescriptionContainerBottom {
    /*border-top: 3px solid #c5e8ee;*/
}
.home .productDescriptionContainerBottom {
    margin: 5px 0 0;
}
.fitsbox {
    display: block;
    height: 40px;
    padding: 0;
    width: calc(35% + 1px);
    margin: 0;
    background: #fff;
    border-right: 1px solid var(--site-border);
    flex-shrink: 0;
}
.gridview .fitsbox {
}
.fitsbox.active {
}

.gridview .fitsbox {
    background: #fff;
    height: 40px;
    width: 100%;
}
.gridview .fitsbox.active {
}
label.partType {
    text-align: center;
    font-size: x-small;
    font-weight: bold;
}

.alternativeProdLoader {
    text-align: center;
    width: 36%;
    position: absolute;
    bottom: 6px;
}

.fitsbox .view-fits-vehicles {
    display: flex;
    cursor: pointer;
    padding: 5px 17px;
    align-items: center;
    height: 40px;
    background: #fff;
    color: #6798b0;
}
.alternateProductToggle {
    /*color: #fff;
    background: #92a4b9;*/
}
.fitsbox.active .fitsbox .view-fits-vehicles {
    border-top-color: #fff;
}

.prod-main-txt.active .txt-toggle,
.txt-toggle:hover,
.alternateProductToggle:hover,
.fitsbox.active .view-fits-vehicles span,
.fitsbox.active .view-fits-vehicles,
.view-fits-vehicles:hover {
    background: var(--dd-bkg1);
}
.txt-toggle,
.alternateProductToggle {
    display: flex;
    position: relative;
    border: none;
    border-left: 1px solid var(--site-border);
    inset: auto;
    margin: 0;
    color: #6798b0;
    text-align: left;
    width: 31.44%;
    padding: 5px 15px 5px 10px;
    height: 40px;
    background: #fff;
    align-items: center;
}

.alternateProductToggle {
    border: none;
    border-right: 1px solid var(--site-border);
    width: 35%;
}
.listview .alternateProductToggle {
    padding: 5px 15px 5px 15px;
}

.gridview .alternateProductToggle {
    border: none;
    width: 100%;
    margin: 0;
}
.kitbox.active .toggle span::after,
.alternateProduct:has(.alternateProductResults) .alternateProductToggle span::after,
.prod-main-txt.active .txt-toggle span::after,
.fitsbox.active .view-fits-vehicles span::after,
.gridview .alternateProduct:has(.alternateProductResults) .alternateProductToggle span::after {
    color: #23a9be;
    transform: rotate(-45deg);
}
.gridview .fitsbox.active .view-fits-vehicles span::after,
.gridview .kitbox.active .toggle span::after {
    top: 10px;
    right: 12px;
}

.gridview .fitsbox.active .view-fits-vehicles {
}
.kitbox .toggle span,
.txt-toggle span,
.productInfoBox .kitbox .toggle span,
.alternateProductButton button span,
.alternateProductToggle span,
.view-fits-vehicles span {
    display: block;
    padding: 0;
    text-transform: uppercase;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: -0.13px;
    position: relative;
    width: 100%;
}
.alternateProductButton button:hover span,
.alternateProductToggle:hover span {
}

.unavailable-message {
    background-color: none;
    color: #721c24;
    border: 1px solid #f5c6cb;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 13px;
    float: right;
    margin-bottom: 10px;
    width:fit-content;
}

.alternateProductToggle:hover,
.alternateProduct:has(.alternateProductResults) .alternateProductToggle,
.prod-main-txt.active .txt-toggle,
.txt-toggle:hover,
.kitbox .toggle:hover,
.kitbox.active .toggle,
.fitsbox.active .view-fits-vehicles,
.view-fits-vehicles:hover {
    color: #23a9be;
    background: var(--dd-bkg1);
}
.txt-toggle span::after,
.kitbox .toggle span::after,
.alternateProductButton button span::after,
.alternateProductToggle span:after,
.view-fits-vehicles span::after {
    content: '\002B';
    display: block;
    position: absolute;
    top: 3px;
    right: 0;
    color: #92aac6;
    width: 10px;
    height: 10px;
    font-size: 1.14rem;
    line-height: 0.68rem;
}

.view-fits-vehicles svg {
    width: 26px;
    height: 26px;
    padding-right: 26px;
}

.fitsbox .fits-vehicles {
    display: none;
    overflow: auto;
    position: absolute;
    background: var(--dd-bkg1);
    padding: 20px 15px;
    z-index: 10;
    height: 328px;
    margin: auto;
    width: 35%;
    inset: auto auto 41px 0;
    border-radius: 4px 0 0 0;
}
.gridview .fitsbox .fits-vehicles {
    width: 100%;
    inset: auto 0 41px;
    height: 467px;
    padding: 15px 8px;
    font-size: 0.84rem;
    line-height: 1rem;
    color: #667586;
}
#relatedproducts .gridview .fitsbox .fits-vehicles {
    height: 299px;
}
.fitsbox.active .fits-vehicles {
    display: block;
}
.fitsbox .fits-vehicles .h6 {
    display: block;
    margin: 0 0 10px;
}
.fits-vehicles ul {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 10px;
    padding: 0;
    font-size: 0.86rem;
    font-weight: 500;
    line-height: 1rem;
    color: var(--site-grey);
}
.fits-vehicles ul li {
    display: block;
    padding: 0;
    margin: 0;
}

.txt-toggle {
    display: none;
    align-items: center;
    width: 100%;
    border: none;
    border-top: 1px solid var(--site-border);
    /*border-bottom: 1px solid var(--site-border);*/
    color: #6798b0;
    background: #fff;
}
.gridview .txt-toggle {
    display: flex;
}
.linethrough {
    text-decoration: line-through;
    color: #a0a7af;
    padding: 0 10px;
    /*font-size: 14px;*/
    margin: 5px 0;
    white-space: nowrap;
}

.pricewas .linethrough {
    padding: 0;
    white-space: nowrap;
}

.pricewas .pricenow {
    padding-left: 5px;
    font-size: 16px;
}

.kitbox {
    display: block;
    height: 40px;
    padding: 0;
    width: 22%;
    margin: 0 -1px;
    background: #fff;
    border-left: 1px solid var(--site-border);
    border-right: 1px solid var(--site-border);
}

.gridview .kitbox::after {
    inset: 0 40px auto auto;
    width: 40px;
}

.gridview .pdfFrame {
    height: auto;
}
.kitbox .txtbox {
    display: none;
    overflow: auto;
    position: absolute;
    inset: auto 0 41px calc(35% + 1px);
    background: var(--dd-bkg1);
    z-index: 10;
    height: 328px;
    padding: 20px 15px;
    overflow: auto;
}
.gridview .kitbox .txtbox {
    height: 467px;
    padding: 15px 10px 20px;
    inset: auto auto 41px 0;
    width: 100%;
}
.kitbox .toggle {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 5px 15px;
    color: #6798b0;
    background: #fff;
    justify-content: center;
    margin: 0;
}

.gridview .kitbox .toggle {
    width: 100%;
    inset: initial;
    margin: 0;
    border: none;
    position: initial;
    padding: 0;
}

.kitbox .toggle svg {
    margin-right: 5px;
    width: 20px;
    height: 20px;
}

.kitbox .toggle.active {
    height: 41px;
}

.kitbox.active .txtbox {
    display: block;
}
.kitbox.active .txtbox .stockStatus {
    display: inline-flex;
    width: 100%;
    margin: 0;
    white-space: normal;
}

.productInfoBox .prod-main-txt p {
    margin: 0 0 10px;
    padding: 0;
}
.kitbox .kit-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px 30px;
    color: var(--site-grey);
}
.gridview .kitbox .kit-grid {
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 10px;
    font-size: 0.84rem;
    line-height: 1rem;
    color: #667586;
}
.productInfoBox .expand .toggle {
    display: block;
    cursor: pointer;
    height: 39px;
    padding: 10px 0;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #606770;
}

.productInfoBox .expand .toggle svg {
    margin-right: 10px;
    width: 20px;
    height: 20px;
}

.productInfoBox .expand .txtbox {
    padding-top: 10px;
}

.productInfoBox .expand.active .toggle {
    color: #23a9be;
    border-bottom: 1px solid var(--site-border);
}

#product #relatedproducts .product-wrapper *::after,
#product #relatedproducts .product-wrapper *::before,
#product #relatedproducts .product-wrapper *,
#productListContainer .product-wrapper *::after,
#productListContainer .product-wrapper *::before,
#productListContainer .product-wrapper * {
    border-color: #e2e9f2;
}

.offertag.text {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 8px 15px;
    text-transform: uppercase;
    position: absolute;
    top: -29px;
    height: 30px;
    right: 20px;
    border-radius: 4px 4px 0 0;
    white-space: nowrap;
    background: #fff;
    color: #23a9be;
    border: 1px solid var(--site-border);
    border-bottom: none;
}

.offertag {
    position: absolute;
    inset: 0 auto 0 calc(35% - 80px);
    width: 80px;
    height: 80px;
    z-index: 0;
}
.gridview .offertag {
    inset: 0 0 auto auto;
}

.offertag img {
    position: absolute;
    inset: 0;
    display: block;
    object-fit: contain;
}

.paging {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    align-items: center;
    padding: 0;
}
.paging.bottom {
    margin: 40px 0;
}

.paging.top {
    justify-content: space-between;
}

.paging .topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.paging .page-display {
    font-size: 12px;
    text-transform: uppercase;
    color: #50545f;
    letter-spacing: 0.5px;
    font-weight: 600;
    width: auto;
    padding: 0;
}

.pageno {
    margin-left: 20px;
}
.pageno:empty {
    display: none;
}
.pageno a {
    display: inline-block;
    margin: 0 0 0 10px;
    padding: 0;
    background: #efefef;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 2px;
}

.paging > div a.current,
.paging > div a:hover {
    background: #363c4b;
    color: #fff;
}

/*Section 4*/
.productOptions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    border-top: 1px solid var(--site-border);
    margin: 0;
    padding: 0 15px;
}
.gridview .productOptions {
    padding: 0 8px;
}

.productOptions > .panel {
    margin: 0;
}

.product-wrapper .productOptions .priceBox {
    width: 34%;
    padding: 10px 0;
    margin: 0;
    display: block;
    position: relative;
}

.productOptions .panel.options {
    width: 100%;
    margin-top: 10px;
}

.productOptions .panel.options h5 {
    margin: 0 0 10px;
    text-transform: none;
}

.productOptions .panel.options .option-group-label {
    padding-bottom: 5px;
    color: #728294;
    font-size: 0.76rem;
    line-height: 0.96rem;
    font-weight: 600;
}

.productOptions .panel.options select {
    padding-right: 25px;
    margin-bottom: 15px;
    max-width: 340px;
}

.productOptions .priceregular + .panel.options,
.productOptions .pricewas + .panel.options {
    margin-top: 20px;
}

.productOptions .pricewas {
    width: 100%;
}
.listview .productOptions .pricewas {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
}
.listview .productOptions .pricewas span {
    width: fit-content;
    margin: 0;
}
.linethrough.previous-price,
.price-old-display {
    display: block;
    margin: 0 0 5px;
    width: 100%;
    white-space: nowrap;
}
.relatedProductItem .stockStatus,
.productOptions .pricewas > span,
.panel.options label span {
    display: block;
    margin: 0 0 2px;
    padding: 0;
    overflow: hidden;
}

.productOptions .panel.badges-addbasket {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 15px 0 10px;
    width: 66%;
}
.productOptions .product-secondary-badges {
    width: 55%;
    display: flex;
    justify-content: flex-end;
}

.product-secondary-badges .secondarybadge {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #fff;
    border-radius: 4px;
    padding: 0 2px;
    color: #728294;
    flex-direction: column-reverse;
}

.product-secondary-badges .secondarybadge img {
    display: block;
    object-fit: contain;
    margin: 0 auto;
    aspect-ratio: 1/1;
}
.product-secondary-badges .secondarybadge svg {
    width: 40px;
    aspect-ratio: 1/1;
    height: auto;
}
.product-secondary-badges .secondarybadge .txt {
    margin: 5px -2px 0;
    text-align: left;
    font-size: 0.482rem;
    line-height: 0.58rem;
    font-weight: 600;
    min-height: 18px;
}

.productOptions .panel.badges-addbasket .addbasket {
    width: 45%;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.productOptions .panel.badges-addbasket input,
.productOptions .panel.badges-addbasket button {
    margin: 0 0 3px 3px;
    vertical-align: middle;
    text-align: center;
}

.productOptions .panel.badges-addbasket input[type='number'] {
    width: 40px;
    height: 40px;
    border-radius: 4px;
}

.productOptions .panel.badges-addbasket .error {
    width: 100%;
    padding: 6px;
    color: #363c4b;
    font-size: 13px;
    margin: 5px 0 0;
    border-radius: 6px 0;
}

.productOptions label {
    display: inline-block;
    padding: 0 0 0 10px;
    cursor: pointer;
    vertical-align: middle;
}

.productOptions label img {
    vertical-align: middle;
}

.productOptions input[type='checkbox'] {
    margin-top: 3px;
}

.productOptions label strong {
    font-weight: 600;
    color: #08a972;
    padding-left: 0;
    display: block;
    font-size: 0.76rem;
    line-height: 0.86rem;
    width: 125px;
}
.gridview .productOptions label strong {
    padding: 0;
}

.productOptions .priceBox .stock {
    width: 100%;
    margin: 0 0 5px;
    padding: 0;
    display: block;
}

.productOptions .priceBox .stock.retail {
    font-size: 12px;
    margin-top: 5px;
}

.productOptions .priceBox .stock.retail img {
    position: relative;
    top: 4px;
    cursor: pointer;
}

.productOptions .priceBox .options .stock.retail img {
    top: -1px;
}

/*priceOptions - modified - dd_km - 02/10/24---*/
.product-wrapper .productOptions {
    justify-content: space-between;
}

.product-wrapper .productOptions .priceBoxFrame:has(.unavailable-message) {
    width:100% !important;
}
#ProductList .gridview .product-wrapper .productOptions {
    flex-direction: column;
    height: 100%;
}
#relatedproducts .gridview .product-wrapper .productOptions {
    border: none;
}

.notVisible {
    display: none;
}

.visible {
    display: block;
}

.product-wrapper .productOptions:has(.panel.options .stockStatus) {
    padding-bottom: 0;
}

.product-wrapper .productOptions .priceBoxFrame {
    width: calc(100% - 290px);
    padding: 10px 15px 0 0;
    margin: 0;
    display: block;
    position: relative;
    display: flex;
}
.gridview .product-wrapper .productOptions .priceBoxFrame {
    width: 100%;
    padding: 10px 0 0;
}
.product-wrapper .productOptions:empty,
.product-wrapper .productOptions .priceBoxFrame:empty {
    padding: 0;
    border: none;
    height: 0;
    display: none;
}
.product-wrapper .productOptions .priceBoxFrame .priceBox {
    width: 100%;
    padding: 0;
}

.product-wrapper .productOptions .priceBoxFrame .variant-grid .panel.options {
    width: 100%;
    display: grid;
    /*grid-template-columns: repeat(4,minmax(23%, 25%));*/
    grid-template-columns: repeat(2, minmax(48%, 50%));
    grid-gap: 8px 12px;
    margin: 0;
    padding: 0 0 15px 0;
}
.gridview .product-wrapper .productOptions .priceBoxFrame .variant-grid .panel.options {
    display: flex;
    padding: 0 5px 10px;
    margin: 0;
    gap: 5px;
    justify-content: flex-start;
    width: 100%;
    height: fit-content;
}
.listview .product-wrapper .productOptions .priceBoxFrame .variant-grid .panel.options .h5 {
    grid-column: span 2;
    margin: 0;
}

.product-wrapper .productOptions .priceBoxFrame .variant-grid .priceOption img {
    width: 120px;
    height: 55px;
    object-fit: contain;
    mix-blend-mode: multiply;
}
.listview .product-wrapper .productOptions .priceBoxFrame .variant-grid .priceOption img {
    position: absolute;
    inset: 0 5px auto auto;
    margin: auto;
    width: 80px;
    height: 65px;
}
.gridview .product-wrapper .productOptions .priceBoxFrame .variant-grid .priceOption img {
    display: none;
}
#productDetails.gridview .product-wrapper .productOptions .priceBoxFrame .variant-grid .priceOption label {
    min-height: 65px;
}
#productDetails.gridview .product-wrapper .productOptions .priceBoxFrame .variant-grid .priceOption img {
    display: block;
    position: absolute;
    inset: 0 5px auto auto;
    margin: auto;
    width: 80px;
    height: 65px;
}

.productOptions .panel.options {
    margin-top: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px 0;
}
.productOptions .panel.options:empty {
    padding: 0;
}
.productOptions .panel.options.dropdowns {
    flex-wrap: wrap;
    gap: 10px;
}

.productOptions .panel.options.dropdowns .dropdown-group {
    width: 49%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.gridview .productOptions .panel.options.dropdowns .dropdown-group {
    width: 100%;
    display: block;
}
.productOptions .panel.options.dropdowns .dropdown-group select {
    width: fit-content;
    margin: 0;
    max-width: 60%;
    min-width:40%;
}
.gridview .productOptions .panel.options.dropdowns .dropdown-group select {
    width: 100%;
    max-width: 100%;
}
.productOptions .panel.badges-addbasket {
    width: 290px;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0 0 15px 10px;
    border-left: 1px solid var(--site-border);
}

.productOptions .panel.badges-addbasket .product-secondary-badges {
    width: 100%;
    align-self: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}
.productOptions .product-secondary-badges .secondarybadge {
    margin: 0;
    max-width: 45px;
}
.productOptions .product-secondary-badges .secondarybadge:last-child {
    margin: 0;
}
.productOptions .panel.badges-addbasket .addbasket {
    width: 100%;
    margin: 14px 0;
}
.productOptions .panel.badges-addbasket .qty {
    padding: 0 5px 0 0;
    width: 70px;
    font-size: 0.68rem;
    font-weight: 500;
    display: flex;
    align-items: center;
}
.productOptions .panel.badges-addbasket button {
    width: calc(100% - 70px);
    white-space: nowrap;
    padding: 8px;
    font-size: 0.68rem;
    margin: 0;
    max-width: 210px;
}
.productOptions .disbabled-button {
    display:flex;
    align-items:center;
    justify-content:center;
    height: 40px;
    background: var(--dd-bkg1);
    border-radius: 4px;
    width: 100%;
    margin: 10px 0;
    padding: 8px;
    font-size: 0.68rem;
    text-transform:uppercase;
    font-weight:600;
}
.priceBox .options .h5 {
    width: 100%;
}
.priceBox .options .priceOption {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    width: 100%;
    border: 1px solid var(--site-border);
    border-radius: 4px;
    margin: 0;
    padding: 6px 6px 30px;
    position: relative;
}
.priceBox .options .nonvariant-group {
    width: calc(50% - 7px);
    margin: 5px 0;
    display: block;
}
.priceBox .options .nonvariant-group select {
    width: 100%;
    margin: 0;
}

.priceBox .options .priceOption:has(input:checked) {
    background: var(--dd-bkg1);
}

.priceBox .options .priceOption .priceGroup {
    justify-content: space-between;
    margin: 10px 0 0;
}

.priceOption input {
    position: absolute;
    top: 6px;
    left: 6px;
    pointer-events: none;
}
.gridview .priceOption input {
    top: 5px;
    left: 4px;
}
.productOptions .priceBox .h5,
.productOptions .priceBoxFrame .h5 {
    font-size: 0.85rem;
    font-weight: 500;
    color: #728294;
    margin: 0 0 10px;
}

.gridview .productOptions .priceBoxFrame .h5 {
    margin: 0 0 10px;
    padding: 0 5px;
}
.priceOption label {
    display: block;
    width: 100%;
    font-size: 0.74rem;
    line-height: 0.82rem;
    letter-spacing: 0.02rem;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0;
    cursor: pointer;
    padding: 0;
}
.listview .priceOption label {
    display: block;
    min-height: 55px;
}
.gridview .priceOption label {
    padding-left: 20px;
}
.priceBox.options .priceOption.active {
    border-color: #363c4b;
}
.priceOption .title {
    display: block;
    padding-top: 4px;
    margin: 0 0 0 20px;
    font-weight: 600;
    font-size: 0.76rem;
    line-height: 0.76rem;
}
.listview .priceOption .title {
    margin-bottom: 5px;
    width: calc(100% - 80px);
}
.gridview .priceOption .title {
    margin: 4px 0 2px;
    width: calc(100% - 80px);
}

.priceOption .title span {
    color: var(--site-green);
}

.priceBox .options .priceOption .priceGroup {
    justify-content: space-between;
    margin: 0;
}
.listview .priceBox .options .priceOption .priceGroup {
    width: 75%;
    padding-left: 20px;
    gap: 5px 10px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.listview .priceBox .options .priceOption .priceGroup > div {
    width: fit-content;
}
.priceBox .priceregular {
    display: block;
    width: 100%;
    padding: 10px 0 0;
    font-size: 0.96rem;
}
.gridview .priceBox .priceregular {
    padding: 0 0 5px;
}
.gridview .priceBox .priceregular span {
    display: block;
    width: 100%;
}
/*.stockStatus*/

.relatedProductItem .stock.retail,
.productOptions .priceBox .stock.retail {
    position: relative;
    border: 1px solid #edeff0;
    background: #fdfdfd;
    padding: 5px;
    font-size: 0.66rem;
    font-weight: 600;
    height: 25px;
    border-radius: 0 0 2px 2px;
    color: #728294;
    margin: 10px 0 0;
    max-width: 275px;
}
.part-options .priceBox .options div .part-status span {
    white-space: break-spaces !important;
}
.relatedProductItem .stockStatus,
.stockStatus,
.panel.options label .stockStatus {
    position: relative;
    display: inline-flex;
    width: 100%;
    letter-spacing: -0.013rem;
    white-space: nowrap;
    overflow: hidden;
}

.stockStatus::before {
    content: '';
    margin-right: 6px;
    display: block;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #a0a7af;
    flex-shrink: 0;
    border: 2px solid #fff;
}

.yellowDot::before {
    background: #f7e80c;
}

.greenDot::before {
    background: #08a972;
}
.lightGreenDot::before {
    background: #6ed7b3;
}

.redDot::before {
    background: #a7252c;
}

.blueDot::before {
    background: #159cf2;
}

.orangeDot::before {
    background: #ff6600;
}

/*---*/

/*Product Video - modified - dd_km 24/09/24 and size mod by sd*/
/*.product-extras-frame {
    display: block;
    height: 41px;
    position: relative;
    border-top: 1px solid var(--site-border);
    padding: 1px 0 0;
    background: #fff;
}*/
.product-extras-frame {
    display: flex;
    align-items: center;
    height: 41px;
    position: relative;
    border-top: 1px solid var(--site-border);
    padding: 1px 0 0;
    background: #fff;
    padding: 0;
}

.product-extras-frame:empty {
    height: 0;
    border: none;
    padding: 0;
}
.gridview .product-extras-frame {
    height: auto;
    padding: 0;
    background: #f4f6f9;
    background: #f4f8fc;
}
.gridview .product-extras-frame > div {
    width: 26%;
    min-width: 25%;
    border: none;
    border-left: 1px solid var(--site-border);
    border-right: 1px solid var(--site-border);
    padding: 0;
    margin: 0 -1px;
    /*z-index:1;*/
}
.gridview .product-extras-frame .fitsbox {
    z-index: 1;
}
.gridview .product-extras-frame .toggle span,
.gridview .product-extras-frame .view-fits-vehicles span {
    height: 100%;
    white-space: nowrap;
    text-indent: 100%;
    overflow: hidden;
}
.gridview .product-extras-frame > div span::after {
    inset: 2px 14px auto auto;
}
.productOptions .other-info {
    display: block;
    padding: 0;
    width: 100%;
    margin: 0;
}

.videoFrame {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 22%;
    margin: 0 -1px;
    padding: 0;
    height: 40px;
    background: #fff;
    border-left: 1px solid var(--site-border);
    border-right: 1px solid var(--site-border);
}
.videoFrame .video-thumbnail {
    margin: 0;
    display: flex;
    padding: 4px;
    height: 40px;
    align-items: center;
    justify-content: center;
    color: #728294;
    cursor: pointer;
    width: 100%;
    position: relative;
}

.products-list.gridview .product-wrapper .videoPagelink span {
    display: none;
}
.videoFrame .video-thumbnail:hover {
    color: #23a9be;
}
.videoFrame .video-thumbnail img {
    display: block;
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
    object-fit: cover;
}
.videoFrame .video-thumbnail .video-gallery-trigger img,
.videoFrame .video-thumbnail svg {
    margin-right: 5px;
    width: 20px;
    height: 20px;
}
.gridview .videoFrame .video-thumbnail svg {
    margin: 0;
}
.gridview .videoFrame .video-gallery-trigger span{
    display:none;
}
.gridview .videoFrame .video-gallery-trigger img{
    object-fit:contain;
}
.videoFrame a {
    display: flex;
    align-items: center;
    font-size: 0.68rem;
    line-height: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: -0.13px;
    color: #6798b0;
}

.videoFrame .vd-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgba(0, 0, 0, 0.5); /* Black background with opacity */
}
.videoFrame .hidden-gallery-links{
    display:none;
}

#videoModal .dg-container {
}

.videoFrame .vd-modal iframe {
    width: 1080px;
    height: auto;
    aspect-ratio: 16/9;
}

.videoFrame .vd-modal-content {
    margin: 140px auto 0;
    padding: 30px 0 10px;
    width: 80%;
    width: 1130px;
    /* background-color: white; */
    position: relative;
}
.videoFrame .vd-close {
    color: #aaa;
    display: flex;
    font-size: 28px;
    font-weight: bold;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    background: #fff;
    z-index: 100;
    width: 40px;
    align-items: center;
    height: 40px;
    cursor:pointer;
}

.videoFrame .vd-close:hover,
.videoFrame .vd-close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
/*Carousel video - 14/02/25 dd_km */
#videoWrapper .dg-container {
    
}

.dg-container .carousel-frame iframe {
    
}




/*.pdfFrame*/
.pdfFrame {
    display: block;
    height: 40px;
    padding: 0;
    width: 22%;
    margin: 0 -1px;
    background: #fff;
    border-left: 1px solid var(--site-border);
    border-right: 1px solid var(--site-border);
}
.pdfFrame .resourcePagelink {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    font-size: 0.66rem;
    line-height: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: -0.13px;
    color: #6798b0;
    text-decoration: none;
}

.pdfFrame .resourcePagelink svg {
    margin-right: 5px;
    width: 30px;
    height: 30px;
}
.videoFrame .video-thumbnail:hover,
.pdfFrame .resourcePagelink:hover {
    background: var(--dd-bkg1);
}

.gridview .pdfFrame .resourcePagelink svg {
    margin: 0;
}
.gridview .pdfFrame .resourcePagelink span {
    display: none;
}
.pdfFrame .vd-modal-pdf {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgba(0, 0, 0, 0.5); /* Black background with opacity */
}
.vd-modal,
.vd-modal-pdf {
    display: none; /* Ensure modals are hidden by default */
}
.product-wrapper.video-modal-active,
.product-wrapper.pdf-modal-active {
    z-index: 100;
}
.product-wrapper.video-modal-active .vd-modal,
.product-wrapper.pdf-modal-active .vd-modal-pdf {
    display: block; /* Only show active modal */
}

.pdfFrame .vd-modal-pdf iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
}

.pdfFrame .vd-modal-content-pdf {
    margin: 15% auto;
    padding: 40px 10px 10px;
    width: 80%;
    max-width: 956px; /* Set max width for the popup */
    background-color: white;
    position: relative;
}
.pdfFrame .vd-close-pdf {
    color: #aaa;
    display: flex;
    font-size: 28px;
    font-weight: bold;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    background: #fff;
    z-index: 100;
    width: 40px;
    align-items: center;
    height: 40px;
}

.pdfFrame .vd-close-pdf:hover,
.pdfFrame .vd-close-pdf:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/*---*/
/*.alternateProducts  - 13/11/24 dd_km */
.alternateProduct {
    display: block;
    padding: 0;
    border-top: 1px solid var(--site-border);
    position: relative;
    height: 41px;
}
#product .alternateProduct {
    display: block;
    height: auto;
}

.listview .alternateProduct {
    height: auto;
}
.alternateProduct .alternateProductButton {
    display: flex;
    width: 100%;
    /*justify-content: flex-end;*/
    position: relative;
    inset: 0 0 auto;
    background: #fff;
    height: 40px;
    color: #6798b0;
    border-radius: 0 4px 4px 0;
}
.listview .alternateProduct .alternateProductButton {
    background: linear-gradient(0deg, #fdfdfd 80%, #f0f4f4 90%);
}
#product .alternateProductToggle,
#product .alternateProduct .alternateProductButton {
    display: none;
}

.prod-main-txt .txtbox .section-head,
.product-wrapper .diagramListContainer .h4,
.fitsbox .fits-vehicles .h6,
.kitbox .h6,
.alternateProduct .section-head {
    display: block;
    margin: 0 0 20px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #3e648c;
    position: relative;
    text-transform: uppercase;
    line-height: 1.05rem;
}

.gridview .product-wrapper .diagramListContainer .h4,
.gridview .fitsbox .fits-vehicles .h6,
.gridview .kitbox .h6,
.gridview .alternateProduct .section-head {
    min-height: 30px;
}

.gridview .alternateProduct .section-head {
    width: 100%;
    cursor: pointer;
}
.listview .prod-main-txt .txtbox .section-head,
#ProductList .listview .alternateProductResults .section-head {
    display: none;
}

.alternateProductResults.hide {
    display: none !important;
}
.alternateProduct .alternateProductResults {
    border-top: 1px solid var(--site-border);
    padding: 15px 10px 20px;
    margin: 0;
    position: absolute;
    inset: auto 0 41px;
    z-index: 10;
    max-height: 495px;
    overflow: auto;
    background: var(--dd-bkg1);
    box-shadow: 0 -7px 9px -8px rgba(0, 0, 0, 0.16);
}

.listview .alternateProduct .alternateProductResults {
    position: relative;
    inset: auto;
    box-shadow: none;
}

#product .alternateProduct .alternateProductResults {
    position: relative;
    inset: auto;
    display: block;
    box-shadow: none;
    border: none;
    padding: 20px 15px 15px;
    z-index: initial;
}
#product .priceregular.grid-8-price-from {
    display: none;
}

.gridview .alternateProduct .alternateBrands {
    grid-template-columns: repeat(2, minmax(48%, 58%));
    grid-gap: 6px;
}

.alternateProduct .alternateBrands {
    display: grid;
    grid-template-columns: repeat(6, minmax(15%, 16%));
    grid-gap: 10px;
}

.alternateBrands .relatedProductItem {
    border: 1px solid var(--site-border);
    border-radius: 4px;
    padding: 5px 5px 32px;
    background: #fff;
    position: relative;
}

.alternateBrands .relatedProductItem:hover {
    background: #fdfdfd;
}
.relatedProductItem a {
    display: block;
    color: inherit;
}
.gridview .relatedProductItem a {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.relatedProductItem .stockStatus {
    color: #2c3135;
    line-height: 0.84rem;
    white-space: nowrap;
    word-spacing: -0.03rem;
    overflow: hidden;
    color: #728294;
    text-transform: uppercase;
}
.relatedProductItem .imgbox {
    display: flex;
    max-width: 80%;
    margin: 0 auto;
    height: 100px;
    align-items: center;
    justify-content: center;
}
.gridview .relatedProductItem .imgbox {
    height: 50px;
    width: 80px;
    margin: 10px auto 0;
}
.imgbox img {
    display: block;
    margin: 0 auto;
}
.relatedProductItem .imgbox img {
    display: block;
    margin: 0 auto;
    width: 150px;
    height: 80px;
    object-fit: contain;
}
.gridview .relatedProductItem .imgbox img {
}
.alternateBrands .relatedProductItem:hover img {
    mix-blend-mode: multiply;
}
.relatedProductItem .brand-img {
    display: block;
    text-align: center;
    margin: 0 auto;
}
.relatedProductItem .brand-img img {
    max-width: 80%;
    height: 40px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.relatedProductItem .priceregular {
    display: block;
    text-align: center;
    line-height: 1rem;
}
.gridview .relatedProductItem .priceregular {
    font-size: 0.68rem;
    line-height: 0.88rem;
    font-weight: 500;
    margin: 0 0 5px;
}

.gridview .relatedProductItem .stock.retail {
}
.gridview .relatedProductItem a div {
    width: 100%;
}

#relatedproducts .alternateBrands + .priceBox {
    height: fit-content;
}

/*---*/
.add-to-wishlist,
.remove-from-wishlist {
    float: right;
}

.breadcrumbs + h2 {
    padding-right: 100px;
}

.inline-div {
    overflow: hidden;
    text-overflow: clip;
    width: 100px;
    height: 43px;
    margin: 15px;
    font: bold;
    font-size: 18px;
}

/*Product Grid Layout*/
ul.layout {
    display: inline-flex;
    margin: 0 0 10px;
    list-style: none;
}

ul.layout li {
    margin: 0 10px 0 0;
}

ul.layout li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    padding: 0;
    margin: 0;
    color: #a0a7af;
    background: #efefef;
}

ul.layout li a svg {
    width: 16px;
    height: 16px;
}

ul.layout li a:hover,
ul.layout li a.active {
    background: #363c4b;
    color: #fff;
}

.product-wrapper:hover .inline-div {
    overflow: visible;
    white-space: normal;
    height: auto;
}
.products-list.gridview > [itemscope].content-display {
    display: contents;
}

.needProduct .products-list.gridview {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    min-width: 100%;
    margin: 0 -1% 0;
}

.needProduct .gridview .product-wrapper .productOptions .priceBox {
    height: auto;
}

.products-list.gridview {
    display: grid;
    grid-template-columns: repeat(4, minmax(23%, 25%));
    grid-gap: 30px 15px;
    margin: 0;
}

.gridview .product-wrapper {
    margin: 0;
    min-width: 100%;
    width: 100%;
}

.gridview .fits-vehicles ul li,
.gridview .productInfoBox,
.gridview .productImageContainer {
    width: 100%;
}
.gridview .productImageContainer {
    height: auto;
}
.gridview .framedImage {
    padding: 40px 10px 30px;
}

.gridview .productImageContainer .diagramBox a {
    right: 10px;
    bottom: 0;
}

.gridview .view-fits-vehicles {
    display: flex;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    border-right: none;
    border-top: none;
    height: 40px;
    white-space: nowrap;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
}
.gridview .view-fits-vehicles span {
    display: block;
    width: 100%;
    height: 100%;
}

/*.h5.section-head::before {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: #6798b0;
    mask: url('../images/svg/alternative-product-icon.svg') center / 26px no-repeat;
    width: 40px;
    z-index: 10;
}*/

.kitbox .toggle::before,
.view-fits-vehicles::before {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: #6798b0;
    mask: url('../images/svg/i_cars.svg') center / 26px no-repeat;
    width: 40px;
    height: 40px;
    z-index: 10;
}
.gridview .kitbox .toggle::before {
    inset: initial;
}
.gridview .view-fits-vehicles::before {
    width: 100%;
}
.kitbox .toggle::before {
    mask: url('../images/svg/about-kit.svg') center / 22px no-repeat;
}
.listview .kitbox .toggle,
.listview .view-fits-vehicles {
    gap: 10px;
}

.listview .kitbox .toggle::before,
.listview .view-fits-vehicles::before {
    position: relative;
}

.gridview .product-wrapper .productOptions .priceBox {
    width: 100%;
    justify-content: flex-start;
    min-height: initial;
    height: 140px;
    border-bottom: 1px solid #bad0d2;
    margin: 0 0 6px;
    overflow: auto;
    padding: 0 5px;
}

.relatedProductItem .stock.retail,
.priceBox .options .priceOption .stock.retail {
    position: absolute;
    left: 0;
    bottom: 0;
    border: none;
    border-top: 1px solid #edeff0;
    max-width: 100%;
    width: 100%;
}

.gridview .priceBox .options .priceOption {
    padding: 1px 2px 25px;
}
.gridview .priceBox .options .priceOption .priceGroup {
    margin: 0;
}
.gridview .productOptions .panel.badges-addbasket {
    width: 100%;
    padding: 10px 0;
    justify-content: flex-start;
}

.gridview .product-wrapper .productOptions .panel.badges-addbasket {
    padding: 0 0 10px;
    border: none;
    flex-direction: row;
    gap: 4px;
    min-height: 142px;
}

.gridview .productOptions .other-info {
    margin: 0;
}

.gridview .priceBox .options .priceOption:last-child {
    margin-bottom: 0;
}
.gridview .productOptions .stock.retail {
    position: absolute;
    border: 1px solid #edeff0;
    inset: auto 5px 5px;
    margin: 0;
    width: auto;
}
.gridview .productOptions label .stock.retail {
    position: absolute;
}

.gridview .product-secondary-badges .secondarybadge svg {
    width: 35px;
}

.gridview .productOptions .videoFrame {
    margin: 15px -15px 0 -15px;
}
/*---*/
.productOptions .buttonframe {
    margin: 0;
    display: flex;
    justify-content: flex-start;
    width: 78%;
}

.gridview .productOptions .buttonframe {
    width: 75%;
    margin: 0;
}

.productOptions .buttonframe input {
    padding: 8px 15px;
}

.panel.badges-addbasket input.remove-from-wishlist,
.panel.badges-addbasket input.add-to-wishlist {
    display: block;
    width: 40px;
    margin: 0 0 0 5px;
    text-indent: -9000px;
    overflow: hidden;
    background: #a5adb6 url('../images/svg/favorite.svg') center / 25px auto no-repeat;
}

.panel.badges-addbasket input.remove-from-wishlist {
    background: #23a9be url('../images/svg/favorite-remove.svg') center / 25px auto no-repeat;
}

/*Special Offers 4 column*/
.products-list.gridview.offers {
    padding: 0;
}

.products-list.gridview.offers .prod-main-txt {
    display: none;
}

.products-list.gridview.offers .productInfoBox .product-head {
    border: none;
    padding: 15px 15px 0;
    font-size: 16px;
    line-height: 24px;
}

#ProductList .product-wrapper .gridview .product-wrapper:hover {
    box-shadow: none;
}

#ProductList .product-wrapper .gridview .product-wrapper .productDescriptionContainerTop {
    flex-wrap: nowrap;
    align-items: center;
}

#ProductList .product-wrapper .gridview .product-wrapper .productImageContainer {
    width: 40%;
    border-right: 1px solid var(--site-border);
    padding: 10px 10px 0;
}

#ProductList .product-wrapper .gridview .product-wrapper .productDescriptionContainerBottom {
    display: none;
}

#ProductList .product-wrapper .gridview .product-wrapper .productInfoBox .product-head {
    font-size: 14px;
    line-height: 18px;
    text-transform: none;
    padding: 5px 15px;
    margin-bottom: 0;
    height: auto;
}

#ProductList .product-wrapper .gridview .product-wrapper .modal {
    position: absolute;
}

/* Recent Products on Homepage */

#recentProducts .products-list.gridview.offers.super-compact {
    display: grid;
    grid-template-columns: repeat(6, minmax(14%, 16%));
    grid-gap: 12px 6px;
    margin: 50px 0;
}

#recentProducts .products-list.gridview.offers.super-compact .product-wrapper {
}

#recentProducts .products-list.gridview.offers.super-compact .product-wrapper .productInfoBox .code,
#recentProducts .products-list.gridview.offers.super-compact .product-wrapper .framedImage .zoom,
#recentProducts .products-list.gridview.offers.super-compact .product-wrapper .productDescriptionContainerBottom {
    display: none;
}

#recentProducts .products-list.gridview.offers.super-compact .product-wrapper .framedImage {
    padding: 15px 10px;
    height: 160px;
}

#recentProducts .products-list.gridview.offers.super-compact .product-wrapper .productInfoBox .product-head {
    padding: 8px 8px 0;
    font-size: 0.76rem;
    line-height: 0.98rem;
    height: 140px;
    font-weight: 600;
    text-transform:uppercase;
}
#recentProducts .products-list.gridview.offers.super-compact .product-wrapper .productInfoBox .product-head a {
    height: 50px;
    margin-bottom: 10px;
}
#recentProducts .products-list.gridview.offers.super-compact .offertag {
    width: 60px;
    height: 60px;
}
/*------------------- Popular Products list on viewProduct.aspx */
ul.listGoogleBoostInternalLinks {
    list-style: none;
    padding: 0;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    min-width: 100%;
    margin: 0 -1% 0;
}

ul.listGoogleBoostInternalLinks li {
    padding: 0;
    border: 1px solid var(--site-border);
    background: #efefef;
    margin: 5px 1%;
    width: 23%;
}

ul.listGoogleBoostInternalLinks li a {
    display: block;
    padding: 10px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 500;
}

/*------------------- Refine Model list: refit 04/12/24 */
/*ul.refineList {
  padding: 1px 0;
  list-style: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  min-width: 100%;
  margin: 0 -1% 0;
}*/
.refineList {
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(14%, 16%));
    margin: 40px 0;
    grid-gap: 10px;
    list-style: none;
}

.refineList li {
    border: 1px solid var(--site-border);
    text-align: center;
    border-radius: 4px;
    background: #fff;
    margin: 0;
}

    .refineList li:hover {
        color: var(--d911-teal);
        background: var(--dd-bkg1);
    
    }
.refineList li.active {
    border-color: var(--d911-teal);
    background: #f6f9fd;
}

.refineList li a {
    width: 100%;
    display: block;
    padding: 20px 10px 10px;
}
.refineList.diagramCategories li a {
    padding: 20px 0 0;
}
.refineList li .bulletLink_1 {
    display: block;
    padding: 10px;
    text-align: center;
    margin: 0;
    font-weight: 500;
    color: var(--site-mid-grey);
    word-break: break-word;
}
    .refineList li .bulletLink_1:hover{
        color:var(--d911-teal);
    }
    .refineList.diagramCategories li h5,
    .popularModels .refineList li .h5.bulletLink_1,
    .partType .refineList li .h5.bulletLink_1 {
        border-top: 1px solid var(--site-border);
    }

.refineList.diagramCategories li h5 {
    padding: 10px;
    margin: 0;
    color: var(--site-mid-grey);
    font-weight: 500;
}
.refineList.diagramCategories li.active h5 {
    color: var(--d911-teal);
}

.refineList li .imgbox {
    display: block;
    max-width: 90%;
    min-width: 100px;
    min-height: 100px;
    margin: 0 auto 10px;
    object-fit: none;
    transition: var(--transition-all);
    mix-blend-mode: multiply;
    padding: 20px 0 10px;
}
.refineList.diagramCategories li .imgbox,
.partType .refineList li .imgbox,
.refineList li:hover .imgbox {
    filter: grayscale(0%) contrast(110%);
}

.popularModels .refineList li .imgbox {
    filter: grayscale(100%) contrast(110%);
}
.refineList.diagramCategories li .imgbox {
    max-width: 100px;
    padding: 0;
}

.brandFilters .refineList li {
    display: flex;
    align-items: center;
}
.brandFilters .refineList .bulletLink_1 img {
    max-width: 130px;
    max-height: 80px;
}


/*------------------- Product Page */
#product .h1 {
}

#product .productFrame {
    display: block;
    margin: 0 0 50px;
}

#product .products-list {
    padding: 0;
    position: relative;
    z-index: 10;
}
#relatedproducts {
    position: relative;
    z-index: 9;
    margin: 40px 0;
    display: block;
}
#relatedproducts .products-list {
}
#product .productInfoBox .prod-main-txt {
    /*height: 295px;*/
}

#product .productInfoBox.allvehicles .prod-main-txt {
    /*height: 255px;*/
}

#product h1 + .product-wrapper:hover {
    box-shadow: none;
}

/* Mandatory and Suggested Products */

.crosssell.diagrams-crosssell .basic-lightbox-content {
    width: 100%;
    max-width: 900px;
}

.crosssell .scroll {
    width: 100%;
    max-width: 900px;
    max-height: 70vh;
    overflow: auto;
}

.crosssell h3 {
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.crosssell .products-list {
    padding: 0;
}

.crosssell .products-list.gridview .needProduct .block.mandatory,
.crosssell .products-list.gridview .needProduct .block.suggested {
    width: 100%;
}

.crosssell .needProduct {
    position: relative;
    padding: 0 0 10px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    background: #f5f5f5;
    border: 1px solid var(--site-border);
}

.crosssell .needProduct .block {
    padding: 1px 15px 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.crosssell .needProduct .mandatory > h4 {
    color: #23a9be;
    font-size: 20px;
}

.crosssell .needProduct h4 {
    text-transform: none;
    color: #606770;
    margin-bottom: 10px;
}

#ProductList .crosssell .needProduct .product-wrapper,
.crosssell .needProduct .product-wrapper {
    width: 100%;
    box-shadow: none;
    margin: 5px 0;
    pointer-events: all;
}

.crosssell .needProduct .product-wrapper .productDisplayOuterContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: column;
}

.crosssell .needProduct .product-wrapper .productDescriptionContainerTop {
    flex-wrap: nowrap;
    align-items: center;
    border-right: 1px solid var(--site-border);
    width: calc(100% - 130px);
    height: auto;
}

.crosssell .needProduct .product-wrapper .productDescriptionContainerBottom {
    width: 100%;
}

.crosssell .needProduct .products-list.gridview.offers > div {
    width: 100%;
}

.crosssell .needProduct .product-wrapper .productOptions {
    align-items: center;
    padding: 10px 0 0 30%;
    min-width: 100px;
    justify-content: space-between;
}

.crosssell .needProduct .product-wrapper .productOptions.part-options {
    padding: 10px 0 0 0;
}

.crosssell .needProduct .product-wrapper .productOptions.part-options .panel.badges-addbasket {
    align-self: normal;
    padding-right: 10px;
    flex-direction: row;
}

.crosssell .needProduct .product-wrapper .productOptions label strong {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-top: 15px;
    padding-bottom: 30px;
}

.crosssell .needProduct .product-wrapper .productOptions label {
    width: 100%;
    padding-left: 22px;
    padding-top: 3px;
}

.crosssell .needProduct .product-wrapper .productOptions label span {
    display: inline-flex;
    margin: 0;
}

.crosssell .needProduct .product-wrapper .productOptions .panel.options {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(48%, 50%)) !important;
}
.crosssell .needProduct .product-wrapper .productOptions label + div {
    width: auto;
    max-width: fit-content;
    margin: 0 0 10px;
}

.crosssell .needProduct .product-wrapper .productOptions .panel.options > div {
    display: block;
    margin: 0 0 10px;
}

.crosssell .needProduct .product-wrapper .productOptions .priceBox {
    padding: 0 10px;
    min-height: 30px;
}

.crosssell .needProduct .product-wrapper .simple-part-price .priceBox {
    padding: 0;
    width: 100%;
}

.crosssell .needProduct .product-wrapper .simple-part-price .priceregular {
    text-align: left;
}

.crosssell .needProduct .product-wrapper .productOptions.part-options .priceBox {
    width: calc(100% - 250px);
    margin-bottom: 10px;
}

.crosssell .needProduct .product-wrapper .productOptions.part-options .priceBox div {
    gap: 10px;
    width: 100%;
}

.crosssell .needProduct .product-wrapper .productOptions.part-options .priceBox .part-status {
    display: flex;
    align-items: center;
}

.crosssell .priceBox .part-status img {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.crosssell .needProduct .product-wrapper .productOptions.no-part .panel.badges-addbasket {
    justify-content: flex-start;
    width: 100%;
    padding: 5px 10px;
}

.crosssell .needProduct .product-wrapper .productImageContainer {
    width: 35%;
    padding: 5px 8%;
    height: auto;
}

.crosssell .needProduct .product-wrapper .framedImage {
    padding: 0;
}

.crosssell .needProduct .product-wrapper .productInfoBox {
    width: 65%;
    padding: 10px;
    min-height: 120px;
    border-left: 1px solid var(--site-border);
    position: relative;
}

.crosssell .needProduct .product-wrapper .productInfoBox .code {
    position: relative;
    padding: 0;
}

.crosssell .needProduct .product-wrapper .productInfoBox .brand-img {
    position: absolute;
    top: 0;
    margin: auto;
    left: 100%;
    display: block;
    width: 130px;
    bottom: 0;
    align-content: center;
    text-align: center;
}

.crosssell .needProduct .product-wrapper .productInfoBox .brand-img img {
    display: block;
    position: absolute;
    inset: 0;
    margin: auto;
    width: auto;
    height: auto;
    max-width: 110px;
}

.crosssell .needProduct .product-wrapper .productOptions > div {
    justify-content: flex-end;
    padding: 5px 15px;
    border: none;
    width: 250px;
    flex-direction: row;
}

.crosssell .needProduct .product-wrapper .productOptions .panel.badges-addbasket .addbasket > div:first-of-type {
    max-width: 100%;
}

.crosssell .needProduct .product-wrapper .productInfoBox .product-head {
    display: block;
    height: auto;
}

.crosssell .needProduct .product-wrapper .button,
.crosssell .needProduct .product-wrapper input.button,
.crosssell .needProduct .product-wrapper input[type='submit'].button {
    font-size: 12px;
    padding: 8px 14px;
}

.crosssell .needProduct .product-wrapper .pricefrom,
.crosssell .needProduct .product-wrapper .pricewas,
.crosssell .needProduct .product-wrapper .priceregular {
    line-height: 25px;
    width: 100%;
}

.crosssell .gridview .productOptions .panel.badges-addbasket .msg,
.crosssell .gridview .productOptions .panel.badges-addbasket .msg span {
    padding: 0 0 5px 0;
    text-align: right;
}

.surcharge {
    width: 100%;
}

/*New crosssell header - 08//24 dd_km */
.crosssell .header-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    padding: 0 0 10px;
    gap: 20px;
}
.header-box h3 {
    display: block;
    margin-bottom: 0;
}
.header-box .basket-footer-badges {
    display: flex;
    gap: 10px;
}
.header-box .basket-footer-badges .basket-footer-badge {
    display: block;
    width: 80px;
    margin: 0;
    text-align: center;
    font-size: 0.68rem;
    line-height: 0.88rem;
    font-weight: 600;
}
.crosssell .header-box .basket-footer-badges .basket-footer-badge img {
    display: block;
    margin: 0;
}

/* Related Products */
#relatedproducts .products-list.gridview {
    display: grid;
    grid-template-columns: repeat(4, minmax(24%, 25%));
    grid-gap: 10px;
    min-width: 100%;
    margin: 0;
}

#relatedproducts .product-wrapper.related {
    width: 100%;
}
#relatedproducts .alternateProduct,
#relatedproducts .productOptions .priceBox .h5,
#relatedproducts .productOptions .priceBoxFrame .h5,
#relatedproducts .gridview .product-wrapper.related .product-extras-frame,
#product #relatedproducts .product-wrapper.related .stock.retail,
#product #relatedproducts .product-wrapper.related .priceBoxFrame .h5,
#product #relatedproducts .product-wrapper.related .panel.options,
#product #relatedproducts .product-wrapper.related .panel.badges-addbasket,
#product #relatedproducts .product-wrapper.related .product-secondary-badges,
#product #relatedproducts .product-wrapper.related .prod-main-txt,
#product #relatedproducts .product-wrapper.related .kitbox,
#product #relatedproducts .product-wrapper.related .fitsbox,
product #relatedproducts .product-wrapper.related .productInfoBox .prod-main-txt {
    display: none;
}
#product #relatedproducts .product-wrapper.related .priceregular.grid-8-price-from {
    display: block;
}
#product #relatedproducts .product-wrapper.related .productOptions .priceBox {
    border: none;
    height: auto;
    min-height: 50px;
}
#relatedproducts .productDescriptionContainerBottom {
    border-top: 1px solid var(--site-border);
}
.panel.badges-addbasket .msg {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    align-items: center;
    padding: 0;
    margin: 5px 0 0;
}
.gridview .productOptions .panel.badges-addbasket .msg {
    padding: 0;
    margin: 5px 0 0;
}
.productOptions .panel.badges-addbasket .msg span {
    display: flex;
    width: 70px;
    text-align: left;
    font-size: 0.54rem;
    line-height: 0.54rem;
    font-weight: 600;
    align-items: center;
    text-transform: uppercase;
    gap: 4px;
    padding: 0;
}
.panel.badges-addbasket .msg svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.button.proceed-to-checkout {
    text-align: center;
    color: #fff;
    white-space: nowrap;
}

.gridview .productOptions .panel.badges-addbasket .product-secondary-badges {
    width: 100%;
    padding-top: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 3px;
}
.gridview .productOptions .panel.badges-addbasket .product-secondary-badges .secondarybadge {
    margin: 0;
}

.gridview .productOptions .panel.badges-addbasket .addbasket {
    width: 100%;
    justify-content: flex-start;
}

/*New Mods:02/10/24 - dd_km */
.gridview .productInfoBox .prod-main-txt {
    border-left: none;
    padding: 0;
    position: relative;
    height: 37px;
    background: #fdfdfd;
    overflow: unset;
}
.productDescriptionContainerTop:has(.kitbox) .productInfoBox .prod-main-txt {
    height: 187px;
}
.gridview .productDescriptionContainerTop:has(.kitbox) .productInfoBox .prod-main-txt {
    height: 40px;
    overflow: initial;
}
.gridview .productInfoBox .prod-main-txt .txtbox {
    display: none;
    padding: 15px;
    font-size: 0.84rem;
    line-height: 1rem;
    color: #667586;
    position: absolute;
    inset: auto 0 37px;
    background: var(--dd-bkg1);
    height: 430px;
    overflow: auto;
}
.gridview .productInfoBox .prod-main-txt.active .txtbox {
    display: block;
}

.gridview .productOptions .panel.options {
    display: block;
    margin-bottom: 10px;
}
.gridview .productOptions .panel.options.dropdowns {
    display: flex;
    margin-bottom: 10px;
    padding: 5px 0 0;
}
.gridview .priceBox .options .priceOption {
    width: 100%;
    min-height: 70px;
}
.gridview .priceBox .options .nonvariant-group {
    width: 100%;
}
.gridview .productOptions .panel.badges-addbasket .addbasket {
    padding: 0;
    flex-wrap: wrap;
    align-items: flex-end;
    margin: 10px 0;
}

.gridview .product-wrapper .productOptions .panel.badges-addbasket .addbasket > .qty input {
    margin: 0 0 0 5px;
}

.gridview .productInfoBox .product-head {
    border-left: none;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 10px 10px 40px;
    border-bottom: 0;
    display: block;
    width: 100%;
    border-top: 1px solid var(--site-border);
    font-size: 0.916rem;
    line-height: 1.2rem;
    font-weight: 500;
    height: 150px;
    min-height: initial;
    /* border-bottom: 3px solid #c5e8ee; */
}

.gridview .productOptions label .stock.retail {
    border: none;
    border-top: 1px solid var(--site-border);
    position: absolute;
    inset: auto auto 0 0;
}

.gridview .productOptions:has(.stockStatus) .stockStatus {
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    max-width: 99%;
    width: 99%;
    text-overflow: ellipsis;
}

/*---competitor-enquiry*/
.product-trade-links{
    display:block;
    margin:15px 0 0;
}
.gridview .product-trade-links{
    margin-top:5px;
}
.button.tradelink {
    min-width: 180px;
    padding: 5px 26px 8px 12px;
    background: var(--dd-bkg2);
    color: #8297ae;
    position: relative;
}


.button.tradelink:hover {
    background: #8297ae;
    color: #fff;
}
    .button.tradelink svg {
        position: absolute;
        inset: 5px 8px auto auto;
        width: 12px;
        height: 12px;
    }
    .button.tradelink .smallcaps {
        font-size: 0.58rem;
        font-weight: 600;
        display:block;
        margin:0 0 2px;
    }
    .button.tradelink .h6 {
        margin: 0;
        text-transform: uppercase;
        font-size: 0.86rem;
        line-height: 0.86rem;
        font-weight: 500;
    }

.gridview .button.tradelink{
    width:100%;
}
/*competitor-enquiry modal*/
.competitor-enquiry{

}
.product-wrapper .competitor-enquiry .modal {
    background: #fff;
    color: var(--site-black);
    width: 90%;
    max-width: 600px;
    height: fit-content;
    max-height: 90vh;
    overflow-y: auto;
    top: 2vh;
    text-align: left;
    border-radius: 4px;
}
.competitor-enquiry .modal .close {
    background: none;
    border: none;
    font-size: 2rem;
    line-height: 1rem;
    color: var(--site-black);
}

.competitor-enquiry input[type="file"]{
    cursor:pointer;
    padding:2px;
}

body:has(.modal-overlay.competitor-enquiry) #mastehad {
    z-index: 0;
}

.competitor-enquiry input[type="text"]:read-only {
    background: none;
    border: none;
    pointer-events: none;
    padding: 0;
}
    .competitor-enquiry .flexgroup{
        width:100%;
        display:flex;
        align-items:center;
        gap:20px;
        justify-content:space-between;
    }
.flexgroup label{
    min-width:40%;
    text-align:left;
    margin:0;
    color:var(--site-mid-grey);
}
.flexgroup input[type="file"]{
    width:100%;
    margin:5px 0 15px;
}
.form-submit {
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    gap: 20px;
    justify-content: space-between;
    margin: 20px 0 10px;
}
    .form-submit button{
        min-width:180px;
    }
    /*---*/
    #recentProducts .gridview .productOptions .panel.badges-addbasket .msg svg {
        display: inline-block;
        margin: 0 10px 2px 0;
    }

#recentProducts .panel.badges-addbasket .msg {
    padding: 0 5px;
}

/*------------------- Contact */
.contact #mainContent {
    flex-direction: row;
}

#contactFrame {
    display: block;
    padding: 20px;
    width: 100%;
}

#contactFrame h2.title {
    margin-top: 50px;
}

.contactbox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 30px 0;
}

.contactbox > div {
    display: block;
    width: 48%;
}

.contactbox .img img {
    width: 100%;
}

/*------------------- Login */

#login #mainContent {
    display: block;
    border-left: none;
    min-height: 71.5vh;
    padding: 0 20px 50px;
    margin: 0 auto;
}

#login .loginPage {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 30px 0 0;
    width: 100%;
}

#login .loginPage h1 {
    width: 100%;
}

#login .registerBox,
#login .loginBox {
    width: 49%;
    padding: 20px;
}

#login .yourDetails,
#login #pnlExistingCustomer form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

#login .loginBox .reset,
#login .loginBox label {
    width: 40%;
    margin: 0;
}

#login .loginBox .logbox,
#login .loginBox input {
    width: 60%;
}

#login .loginBox .button {
    width: 100%;
}

#login .loginBox .logbox {
    margin-bottom: 0;
}

#login .loginBox .logbox ~ .logbox {
    margin-top: 0;
    text-align: center;
}

/*------------------- My Order Status */
#orderStatus {
    display: flex;
    flex-flow: column;
    flex-wrap: wrap;
    width: 90%;
    margin: 30px auto;
    max-width: 700px;
    border: 1px solid var(--site-border);
    background: #fff;
    border-radius: 4px;
}

#orderStatus .brand {
    display: block;
    background: url('/images/svg/D911-logo-mixed.svg') center 4vh / 50% auto no-repeat;
    top: 0;
    bottom: 0;
    left: 0;
    padding: 20vh 50px 0;
    text-align: center;
}

#orderStatus .pageDisplay {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 50px;
}

#orderStatus .pageDisplay > div {
    display: block;
    max-width: 600px;
}

#orderStatus .pageDisplay h4,
#orderStatus .pageDisplay h3 {
    text-transform: none;
    margin: 0 0 30px;
}

#orderStatus .pageDisplay p.submit {
    text-align: right;
}

#orderStatus .pageDisplay button[type='submit'],
#orderStatus .pageDisplay button[type='button'],
#orderStatus .pageDisplay input[type='text'] {
    width: 100%;
}

#orderStatus .pageDisplay button[type='submit'],
#orderStatus .pageDisplay button[type='button'] {
    background: #eb6a2e;
    color: #fff;
    border: none;
    display: inline-block;
    max-width: 250px;
}

#orderStatus .pageDisplay label {
    display: flex;
    align-items: center;
    margin: 20px 0 5px;
}

#orderStatus .pageDisplay label > span:first-of-type {
    width: 40%;
    padding: 0 20px 0 0;
}

#orderStatus .pageDisplay label > span:last-of-type {
    width: 100%;
}

#orderStatus .pageDisplay .order-details .headings {
    font-weight: bold;
}

#orderStatus .pageDisplay .order-details div {
    padding: 5px 5px 5px 0;
    word-wrap: break-word;
}

/*------------------- Diagrams  */
#diagram #container {
    overflow: initial;
}

#diagram #mainContent {
    display: block;
    padding: 50px 0 50px 20px;
}

#diagram .diagramSearch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

#diagram .diagramSearch h4 {
    padding-right: 20px;
    width: 40%;
    margin: 0;
}

#diagram .diagramSearch input {
    max-width: 30%;
}

#diagram .categoriesSmall .refineList {
    grid-template-columns: repeat(10, minmax(8%, 10%));
}

#diagram .categoriesSmall .refineList li {
}

#diagram .categoriesSmall .refineList li a {
    padding: 10px 0 0;
}
.refineList.diagramCategories li .imgbox,
#diagram .categoriesSmall .refineList li .imgbox {
    max-width: 70%;
    padding: 0;
    min-width: initial;
    min-height: 68px;
    margin: 0 auto;
}
#diagramLists {
    display: block;
    padding: 50px 0;
}
.refineList.diagramCategories li h5,
#diagram .categoriesSmall .refineList li h5 {
    font-size: 0.644rem;
    line-height: 0.744rem;
    margin: 5px 0 0;
    padding: 10px 5px;
}
#diagramCategoriesLists #categoryTitle {
    display: none;
}

.diagramList {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(6, minmax(14%, 16%));
    grid-gap: 20px 10px;
    min-width: 100%;
    margin: 20px 0 40px;
}
#diagram .diagramList {
    grid-template-columns: repeat(6, minmax(14%, 16%));
    grid-gap: 20px 10px;
}
.diagramList li {
    margin: 0;
    width: 100%;
    background: #fff;
    border: 1px solid var(--site-border);
    position: relative;
    padding: 0 0 30px;
    border-radius: 4px;
}

.diagramList li a {
    display: block;
    text-align: center;
    padding: 20px 0 1px;
}

.diagramList li a img {
    display: block;
    margin: 0 auto;
    width: 80%;
    height: 140px;
    object-fit: contain;
}

.diagramList li a span {
    display: inline-block;
    padding: 4px 10px;
    background-color: #08a972;
    color: #fff;
    font-weight: 500;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 100px;
}

.diagramList li .diagram-title {
    padding: 15px 10px 10px;
    display: block;
    border-top: 1px solid var(--site-border);
    margin: 10px 0 0;
    text-transform: uppercase;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--site-grey);
    line-height: 0.96rem;
}

.diagramList li p.diagram-title {
    text-transform: uppercase;
    font-size: 12px;
    line-height: 16px;
}

.diagramList li .imgHolder {
    padding: 10px;
}

#diagramsTitle {
    border-bottom: 1px solid var(--site-border);
    padding-bottom: 10px;
    margin: 50px 0 0;
}

#diagramWrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
}

#diagramWrapper > .imgDiagMapHolder {
    width: 549px;
    display: block;
    position: sticky;
    top: 120px;
    padding: 0;
    height: auto;
    margin: 0;
}

#diagramWrapper > #partsList {
    width: calc(100% - 554px);
    display: block;
    margin: 40px 0 0 0;
}

#diagramWrapper > .otherDiagrams {
    width: 100%;
    padding: 50px 0;
}

.imgDiagMapHolder .imgHolder {
    border: 1px solid var(--site-border);
    position: sticky;
    z-index: 1;
    border-radius: 4px;
    padding: 40px 0 20px;
    background: #fff;
    height: auto;
    width: 100%;
    top: 160px;
}

.imgDiagMapHolder .imgHolder > div {
    max-width: 100%;
}

.imgDiagMapHolder p {
    display: inline-flex;
    width: 100%;
    padding: 9px 0;
    margin: 0;
    /*text-align: center;*/
}

.imgDiagMapHolder span {
    display: inline-block;
    padding: 4px 10px;
    background-color: #08a972;
    color: #fff;
    font-weight: 500;
    position: absolute;
    top: 10px;
    left: 0;
    margin: 0 auto;
    width: 100px;
    text-align: center;
    height: 25px;
}

#diagramWrapper #diagramImage {
    max-height: 100%;
    display: block;
    margin: 0 auto;
}

.parts-table-header th {
    padding: 8px;
    border-bottom: 1px solid var(--site-border);
    background-color: #f3f3f3;
}

.parts-table-row td {
    padding: 8px;
    border-bottom: 1px solid var(--site-border);
}

#parts-table thead {
    display: table;
    width: 100%;
    table-layout: fixed;
}

#parts-table tbody {
    display: block;
    height: 692px;
    overflow-y: auto;
    width: 100%;
    position: relative;
}

#parts-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.parts-table-header {
    background: rgba(214, 209, 209, 0.25);
    line-height: 25px;
    color: #1634a6;
    position: sticky;
    top: 0;
}

#parts-table th {
    border-right: 1px solid #fff;
    color: #363c4b;
    text-transform: uppercase;
    text-align: left;
}
#parts-table tr {
}
#parts-table tr:nth-of-type(odd) {
    background: var(--dd-bkg1);
}

#parts-table th,
#parts-table td {
    padding: 4px;
    font-size: 12px;
}

#parts-table td p {
    font-size: 12px;
    line-height: 15px;
}

#parts-table tr th:nth-of-type(1),
#parts-table tr td:nth-of-type(6),
#parts-table tr td:nth-of-type(1) {
    text-align: center;
}

#parts-table .parts-table-row {
    cursor: pointer;
}

#parts-table .parts-table-row.nla {
    color: #a0a7af;
}

#parts-table .parts-table-row .button {
    width: 150px;
}

#parts-table td p {
    margin: 0;
}

#parts-table td input[type='number'] {
    background-color: #fff;
    height: 30px;
    margin: 5px 0;
    width: 30px;
    font-size: 12px;
}

#parts-table td .btnAddToBasket,
#parts-table td img {
    border: none;
    display: block;
    margin: 0 auto;
    padding: 0;
}

#parts-table td .btnAddToBasket {
    background: url('../images/svg/i_basket.svg') no-repeat center / 20px auto;
    width: 25px;
    height: 25px;
}

#parts-table td .moreProduct {
    background: url('../images/svg/i_info.svg') no-repeat center / 20px auto;
    border: none;
    width: 20px;
    height: 20px;
    display: block;
    margin: 0 auto;
}

#parts-table .parts-table-row {
    background-color: transparent;
}

#parts-table td .diagram-part-button-wrapper {
    position: relative;
}

#parts-table td .diagram-part-button-wrapper .basket-added-icon {
    width: 15px;
    height: 15px;
    position: absolute;
    right: 12px;
    top: -12px;
    color: #fff;
}

/*------------------- Fast part Finder - SEO page */
#partFinder #searchContainer {
    margin: 0 0 50px;
    padding: 0;
    border-bottom: 1px solid var(--site-border);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#searchContainer .txtblock {
    display: block;
    width: 48%;
}

#searchContainer strong {
    color: #23a9be;
}

#partFinder #pnlMainContent {
    width: 100%;
}

#partFinder .searchblock {
    display: flex;
    flex-wrap: wrap;
}

#partFinder .searchblock input {
    max-width: 60%;
    margin-right: 5px;
}

#partFinder .searchblock span {
    width: 100%;
    color: #9f021b;
}

#resultsContainer table {
    width: 100%;
}

#resultsContainer table tr:nth-child(odd) {
    background: #efefef;
}

#resultsContainer table tr th {
    padding: 6px 6px;
    width: 20%;
    text-align: left;
}

#resultsContainer table tr td {
    padding: 4px 6px;
    width: 20%;
    text-align: left;
}

#resultsContainer table tr td input {
    margin: 0;
}

#resultsContainer table tr td .button:hover {
    background: #50545f;
}

ul.paged {
    display: block;
    padding: 10px 0;
    margin: 0;
}

ul.paged.bottom {
    margin-bottom: 30px;
}

ul.paged li {
    display: inline-block;
    vertical-align: middle;
    padding: 0;
    text-transform: uppercase;
    margin: 0 5px 0 0;
}

ul.paged li.title {
    padding: 5px 10px 0 0;
}

ul.paged li a {
    padding: 8px 10px;
    background: #efefef;
    text-align: center;
    color: currentColor;
}

ul.paged li a[page-index] {
    display: block;
}

ul.paged li:hover a,
ul.paged li.active a {
    background: #23a9be;
    color: #fff;
}

ul.paged span {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
}

/*------------------- Modals */
body:has(.modal-overlay.competitor-enquiry) {
    overflow:hidden;
}
.modal {
    display: block;
    width: 92%;
    max-width: 800px;
    max-height: 98vh;
    padding: 2.65rem 1.85rem;
    background:#fff;
    color: var(--dd-grey);
    border-radius: 4px;
    position: fixed;
    inset: 0.85rem;
    margin: 0 auto auto;
    z-index: 10;
    overflow: auto;
    height: fit-content;
}

.modal.upload-parts-list {
    
}

.modal.confirm-cancel {
    max-width:440px;
}
    .modal.confirm-cancel button{
        width:160px;
    }
    /*.modal button {
    border-color: var(--dd-grey);
    color: var(--dd-grey) !important;
}*/
    /*.modal button:hover {
        background: var(--dd-grey);
        color: #fff !important;
    }*/
    .modal.hide {
        display: none;
    }

    .modal .close {
        position: absolute;
        inset: -1px auto auto -1px;
        display: flex;
        width: 40px;
        height: 50px;
        align-items:center;
        justify-content:center;
        background: url('../images/svg/i_close.svg') no-repeat center / 20px auto;
        background:var(--dd-bkg1);
        border-radius: 4px 0 4px 0;
    }
        .modal .close::before {
            content: "\00D7";
            font-size:1.86rem;
            color:var(--dd-grey);
            font-weight:400;
        }

.modal .links a {
    display: inline-block;
    margin: 0 5px 5px;
    color: #23a9be;
    padding: 8px 15px;
    background: #fff;
    text-align: center;
    min-width: 170px;
}

.modal .links a:hover {
    background: #606770;
    color: #fff;
}

.product-wrapper .modal {
    max-width: initial;
    background: #a0a7af;
    position: relative;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    display: block;
    justify-content: center;
    box-shadow: none;
    border: none;
    z-index: 1;
    border-radius: 0;
    color: #fff;
    margin: 15px 0 0;
    padding: 10px;
}

.product-wrapper .modal .note svg {
    margin-right: 10px;
    width: 20px;
    height: 20px;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
    z-index: 9999;
    margin: 0;
}

/*------------------- My Basket */
#basket #mainContent {
    border-left: none;
    border-right: 1px solid var(--site-border);
    border-bottom: 1px solid var(--site-border);
}

#basket #pageContent #side {
    width: 20%;
    padding: 0;
}

#side .headedPanel {
    border-bottom: 1px solid var(--site-border);
    border-right: 1px solid var(--site-border);
    margin: 0;
    padding: 20px;
    text-align: center;
    background: #fff;
}

#side .helpbox {
    border-top: 1px solid var(--site-border);
    margin: 30px 0;
}

.info {
    background: #efefef;
    border: 1px solid var(--site-border);
    padding: 15px;
    text-align: center;
    margin: 5px 0;
    display: block;
    border-radius: 6px 0;
}

.alert,
.alert {
    background: #363c4b;
    color: #fff;
    padding: 8px 15px;
    text-align: center;
    margin: 10px 0;
    display: block;
    border-radius: 6px 0;
}

.error.alert,
.error.alert {
    background: #bd0216;
    color: white !important;
}


#basket #basketContainer {
    padding: 0;
    display: block;
    margin: 0;
}

.current-basket {
    display: flex;
    gap: 20px;
    align-items: center;
    color: var(--dd-grey);
    grid-column: span 2;
    padding-bottom: 0.6rem;
    width: 90%;
    max-width: 600px;
}
    .current-basket .list-label {
        margin:0;
        font-weight:500;
    }
    .current-basket .list-name {
        margin:0;
        color:var(--d911-teal);
    }
    .current-basket .basket-txt {
        margin: 0;
        width: 80%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight:400;
    }
    .current-basket .button {
        margin: 0;
        flex-shrink: 0;
        width: 130px;
        background: var(--dd-bkg1);
        color: var(--dd-grey);
        border-color: transparent;
        padding: 0.5rem;        
    }


    ul#basketItems {
        display: block;
        padding: 0;
        margin: 0;
        list-style: none;
    }

#basketItems li {
    display: block;
    padding: 15px;
    margin: 10px 0;
}

#basketItems li:hover {
    background: rgba(0, 0, 0, 0.02);
}

    #basketItems li.header:hover,
    #basketItems li.header {
        background: transparent;
        display: flex;
        text-transform: uppercase;
        font-size: 13px;
        font-weight: 600;
        padding: 10px 0;
        border-bottom: 1px solid var(--dd-light-grey);
        margin-bottom: 20px;
    }

#basketItems li.basket-product {
    border: 1px solid var(--site-border);
    position: relative;
    padding: 0;
    display: flex;
    background: #fff;
}

#basketItems li.basket-product:hover {
    border-color: #23a9be;
}

#basketItems li.basket-product > .product,
#basketItems li.header > .b-item {
    width: 70%;
}

#basketItems li.basket-product > .quantity,
#basketItems li.header > .b-qty {
    width: 15%;
    text-align: center;
}

#basketItems li.basket-product > .figure,
#basketItems li.header > .b-price {
    width: 15%;
    text-align: right;
}

.basket-product .product {
    display: flex;
}

.product .product-image {
    width: 30%;
    max-width: 140px;
    border-right: 1px solid var(--site-border);
    padding: 10px;
    background: #fff;
}

.product .product-image img {
    display: block;
    margin: 0 auto;
}

.product .product-info {
    width: 70%;
    padding: 10px 20px;
}

.product .product-info a {
    display: block;
    padding-bottom: 5px;
}

.basket-product .quantity {
    padding: 10px 0;
}

.product .product-info .code {
    display: block;
    padding: 5px 0;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
    color: #23a9be;
}

.product .product-info .section-item {
    text-transform: uppercase;
    padding-bottom: 5px;
}

.product .product-info .offer {
    padding: 2px 0;
    color: #23a9be;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
}

input[type='text'],
input[type='email'] {
    min-width: initial;
    width: 100%;
}

.basket-product .quantity > div {
    display: block;
}

.basket-product .quantity .read-only-quantity {
    padding-top: 5px;
}

.basket-product .quantity span {
    display: none;
}

.basket-product .quantity a {
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    width: 48%;
}

.basket-product .quantity input {
    width: 50px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
}

.basket-product .quantity .update-quantity-link {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
}

.basket-product .quantity .remove-basket-item,
.basket .product_price .remove-basket-item {
    position: absolute;
    right: 0;
    bottom: 0;
    width: auto;
    background: #fff;
    display: inline-block;
    padding: 8px 20px;
    border-top: 1px solid var(--site-border);
    border-left: 1px solid var(--site-border);
    color: #a4a4a4;
}

.basket .product_price .remove-basket-item {
    position: absolute;
    inset:auto 0 0 auto;
    margin:0;
    width:30px;
    height:40px;
    background: #fff;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:0.5rem;
    border-top: 1px solid var(--site-border);
    border-left: 1px solid var(--site-border);
    border-radius:4px 0 0 0;
    color: var(--dd-light-grey);
}
.basket .product_price span {
    display: block;
    width: 60%;
    text-align: right;
}
.basket-product .quantity .remove-basket-item svg {
    height: 20px;
    width: 20px;
}

.basket .product_price .remove-basket-item svg {
    height: 16px;
    width: 16px;    
}

.basket-product .quantity .remove-basket-item:hover {
    color: #fff;
    background: #363c4b;
    border: none;
}

.basket .product_price .remove-basket-item:hover {
    color: var(--site-red);
    background: var(--dd-bkg1);
}

.basket-product .figure {
    color: #08a972;
    font-size: 16px;
    padding: 15px 15px 40px 0;
}

#basketItems li.offerBox {
    background: transparent;
    padding: 0;
    margin: 0;
}

#basketItems ul.offers {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

/*Offer Available - before totals*/

.basket .basket_offer,
#basketItems li.offer {
    border: 1px solid #7d8798;
    background: #fff;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0;
    margin: 0 0 10px;
}

.basket .basket_offer span,
#basketItems li.offer span {
    padding: 10px;
}

.basket .basket_offer .label,
#basketItems li.offer .label {
    border-right: 1px solid #7d8798;
    color: #23a9be;
    width: 25%;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.basket .basket_offer .txt,
#basketItems li.offer .txt {
    width: 55%;
    text-align: left;
    padding: 5px 15px;
    display: flex;
    align-items: center;
}

.basket .basket_offer .figure,
#basketItems li.offer .figure {
    display: block;
    text-align: right;
    font-size: 16px;
    width: 20%;
    color: #eb6a2e;
    align-self: center;
}

/*Offer Possible - after totals*/
#basketItems li.offer.possible {
    border-color: #363c4b;
}

#basketItems li.offer.possible .label {
    color: #23a9be;
}

.offersFrame {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}

.basket .offersFrame {
    justify-content: space-between;
}

.offersFrame .offersAd {
    width: 50%;
}

.basket .offersFrame .offersAd {
    width: 100%;
}

.basket .offersFrame .discount-code {
    width: 100%;
    margin-top: 20px;
    justify-content: right;
    display: flex;
    flex-wrap: wrap;
}

.basket .offersFrame .discount-code > * {
    width: 100%;
    text-align: right;
}

.basket .offersFrame .discount-code .error.alert {
    text-align: center;
}

.basket .offersFrame .discount-code input[type='text'] {
    width: 180px;
    margin-right: 10px;
}

.offersFrame .offersAd img {
    display: block;
}

#basketItems li.offerBox .discount-code {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    width: 50%;
    padding-left: 10px;
}

#basketItems li.offerBox .discount-code input,
#basketItems li.offerBox .discount-code button {
    margin: 0;
}

#basketItems li.offerBox .discount-code h6 {
    padding-right: 10px;
    margin: 0;
}

#basketItems li.offerBox .discount-code > div {
    display: flex;
    align-items: center;
}

#basketItems li.offerBox .discount-code > div button {
    margin-left: 5px;
}

#basketItems li.offerBox .discount-code + div {
    width: 100%;
}

.discount-code-applied {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    width: 50%;
    padding: 0;
}

.basket .discount-code-applied {
    width: 100%;
    margin-top: 10px;
}

.discount-code-applied h6 {
    padding-right: 20px;
    margin: 0;
}

.discount-code-applied h6 .applied-offer-code {
    text-transform: uppercase;
    font-weight: bold;
    color: #eb6a2e;
}

#ctl02_ctl00_OfferCodeErrorRow {
    width: 100%;
}

#ctl02_ctl00_OfferCodeListRow {
    width: 100%;
    display: flex;
    border: 1px solid #7d8798;
    margin: 15px 0;
    line-height: 24px;
}

#ctl02_ctl00_OfferCodeListRow p {
    width: 65%;
    border-right: 1px solid #7d8798;
    padding: 10px 15px;
    margin: 0;
}

#ctl02_ctl00_OfferCodeListRow a {
    width: 35%;
    padding: 10px 15px;
    text-align: center;
    margin: 0;
    font-weight: 500;
    color: #08a972;
    background: #fff url('/images/svg/i_close.svg') 98% 5px / 15px auto no-repeat;
    display: block;
    margin: 0;
}

#pageContent #basketItems li.basket-totals {
    background: none;
    border-top: 1px solid var(--dd-light-grey);
    margin-top: 30px;
    display: flex;
    padding: 20px 0 0;
    justify-content: space-between;
    gap:4.4rem;
}

#pageContent .basket-totals #ctl01_saveBasket {
    margin-top: 20px;
}
#pageContent .basket-totals .total-sidebar {
    width: 30%;
    flex-shrink:0;
}
#pageConten t.basket-totals .total-main {
    width: 65%;
}


.total-sidebar .button {
    text-align: center;
}




/*#basketItems li.basket-totals .total-sidebar {
    width: 30%;
    padding: 0 30px 0 0;
}

#basketItems li.basket-totals .total-sidebar .info {
    display: block;
}

#basketItems li.total-main {
    width: 70%;
    padding: 0;
}*/

#btnUploadPartsCancel, #btnUploadPartsContinue, #btnUploadPartsCancelmapping {
    display: unset !important;
    width: fit-content !important;
}

#basketItems li.basket-totals .total-sidebar .button {
    display: block;
    width: 100%;
    min-width: 210px;
    text-align: center;
}


#basketItems li.basket-totals .block2 dl {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.total-main dl dt {
    width: 50%;
    margin: 5px 0;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--site-border);
    color: var(--dd-grey);
}

.total-main dl dd {
    width: 50%;
    margin: 5px 0;
    text-align: right;
    font-size: 16px;
    color: #08a972;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--site-border);
}

.total-main dl dd select {
    width: 100%;
    font-size: 14px;
    color: #363c4b;
    background-color: transparent;
}

.total-main dl dd select:focus {
    background-color: #fff;
}

.total-main dl dd.total,
.total-main dl dt.total {
    font-size: 22px;
    font-weight: 500;
    border-bottom: 2px solid #7d8798;
}






#pageContent:has(#basicpagerepeater) #navBar {
    display: none;
}

#basket #pageContent #navBar {
    display: block;
    width: 100%;
    padding: 0;
}

#basket #bodyMain {
    display: block;
    width: 100%;
    padding: 30px 30px 30px 0;
}

#checkout .alertBox,
#basket .alertBox {
    padding: 0;
    margin: 10px 0 0 0;
}

#basket .discount-code .button.line,
#checkout .discount-code .button.line {
    border-color: #a5adb6;
}

#checkout .discount-code input[type='text'],
#basket .discount-code input[type='text'] {
    max-width: 185px;
    border-color: #a5adb6;
    background: transparent;
}

#checkout #OfferCodeListRow,
#basket #OfferCodeListRow {
    padding: 0;
    margin: 0 0 20px;
    list-style: none;
}

#checkout .discount-code h4,
#basket .discount-code h4 {
    margin: 0 0 5px;
}

#checkout .discount-code p,
#basket .discount-code p {
    display: inline-block;
    margin: 0 5px 0 0;
}

#checkout .discount-code a.offercode,
#basket .discount-code a.offercode {
    color: #08a972;
    display: inline-block;
    padding: 5px 20px 5px 30px;
    background: url('../images/svg/i_close.svg') no-repeat 5px center / 15px auto;
    letter-spacing: 1px;
    border: 1px solid var(--site-border);
    border-radius: 4px;
    margin: 5px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

#checkout .discount-code a.offercode:hover,
#basket .discount-code a.offercode:hover {
    background-color: #efefef;
}

#basket #lowerContent {
    display: block;
    margin: 30px auto 80px;
    width: 100%;
}

#lowerContent .basket-offers {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    min-width: 100%;
    margin: 0 -1% 0;
}

#lowerContent .basket-offers .product-wrapper {
    margin: 20px 1% 20px;
    display: flex;
    flex-flow: column;
    width: 23%;
    max-width: 23%;
}

#lowerContent .basket-offers .panel.badges-addbasket {
    padding: 10px 0;
}

#checkout .info {
    display: flex;
    justify-content: space-between;
    text-align: left;
    margin: 0;
    padding: 20px;
}

#checkout .info.flash {
    background: #eb6a2e;
    color: #fff;
    border-radius: 6px 0;
    font-size: 16px;
    line-height: 22px;
}

.info.alert,
.info.alert {
    padding: 0 10px;
    text-align: center;
}

.info.alert span,
.info.alert span {
    margin: 0;
    text-transform: uppercase;
    font-weight: 500;
    padding: 10px 20px;
    display: inline-block;
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
    border-radius: 6px 0;
    width: 180px;
    text-align: center;
    height: 100%;
}

#basket .loginFrame {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#basket .loginFrame > div {
    padding: 20px;
    margin: 0 0 10px;
}

#basket .loginFrame .loginBox {
    width: 55%;
}

#basket .loginFrame .registerBox {
    width: 44%;
}

#basket .loginFrame > div h3 {
    text-transform: none;
    margin: 0 0 5px;
}

#basket .loginFrame > div h3 span {
    color: #23a9be;
}

#basket .loginFrame .box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    /* align-items: center; */
}

#basket .loginFrame .loginBox .box label {
    width: 49.6%;
}

#basket .loginFrame .loginBox .box label input:not(.button) {
    width: 100%;
}

#basket .loginFrame .loginBox .button {
    margin-top: 10px;
}

#basket .loginFrame .loginBox .borderline {
    align-self: self-end;
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
    padding: 5px 0;
}

#basket .loginFrame input,
#basket .loginFrame .button {
    margin: 5px 0 0;
}

#basket .loginFrame .loginBox label + .button {
    white-space: break-spaces;
    max-width: 60%;
    display: inline-block;
    vertical-align: middle;
}

#basket .loginFrame p {
    margin: 0;
}

#basket .loginFrame .registerBox .box div {
    width: 80%;
}

#basket .loginFrame .green-placeorder {
    padding: 15px 20px 15px 50px;
    font-size: 13px;
    font-weight: 600;
    background-size: 30px auto;
}

/*------------------- Checkout */
#checkout #container {
    overflow: initial;
}

#checkout #masthead #topFrame {
    top: auto;
    position: relative;
}

#checkout #masthead .checkoutBox {
    display: block;
    letter-spacing: 2px;
    color: #363c4b;
    line-height: 50px;
    margin: 0 30px 0 0;
    height: 50px;
    text-align: right;
}

.checkoutBox .icon {
    width: 40px;
    height: 40px;
}

#checkout #masthead .checkoutBox h4 {
    margin: 0;
    display: inline-block;
    vertical-align: middle;
}

#checkout #mainContent {
    display: block;
    border-left: none;
    min-height: 71.5vh;
    padding: 0 20px 50px;
    margin: 0 auto;
}

#checkout #side {
    width: 25%;
    padding: 20px 0;
    border-bottom: 1px solid var(--site-border);
}

#checkout #side .sticky {
    position: sticky;
    position: -webkit-sticky;
    top: 95px;
    max-height: calc(100vh - 90px);
    overflow: auto;
    min-height: 300px;
}

#checkout #side .prod-main-txt {
    border: 1px solid var(--site-border);
    padding: 20px;
    background: #fff;
}

#checkout #side p {
    font-size: 12px;
    line-height: 17px;
}

#checkout #side #side-notes,
#checkout #side #dataUsagePolicy {
    margin: 15px 0;
    border-top: 1px solid var(--site-border);
    border-bottom: 1px solid var(--site-border);
    padding: 1px 0;
}

#dataUsagePolicy h5 {
    color: #08a972;
}

#checkout ol#progress {
    display: flex;
    padding: 20px 0 10px;
    width: 100%;
    margin: 0 0 30px;
    list-style: none;
    position: sticky;
    position: -webkit-sticky;
    top: 70px;
    max-height: calc(100vh - 90px);
    overflow: auto;
    background: #fff;
    border-bottom: 1px solid #606770;
    z-index: 10;
}

#login ol.progress {
    display: block;
    padding: 20px 0 10px;
    width: 100%;
    margin: 0;
    list-style: none;
    border-top: 1px solid var(--site-border);
}

#login ol.progress li,
#checkout #progress li {
    padding: 0;
    margin: 0 10px 0 0;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
}

#login ol.progress li {
    width: 100%;
    display: block;
    margin: 0 0 5px;
}

#login ol.progress li .step,
#checkout #progress li .step {
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #efefef;
    border-radius: 2px;
    font-size: 16px;
    font-weight: 400;
}

#checkout #progress li .step + span {
    display: none;
    padding: 0 20px;
    letter-spacing: 1px;
}

#login ol.progress li .step + span {
    padding: 0 20px;
    letter-spacing: 1px;
}

#checkout #progress li.selected {
    border-right: 1px solid #23a9be;
}

#checkout #progress li.selected .step {
    background: #23a9be;
    color: #fff;
}

#checkout #progress li.done .step {
    background: #7d8798;
    color: #fff;
}

#checkout #progress li.selected .step + span {
    display: inline-block;
    color: #23a9be;
}

#checkout ol.progress li .step + span {
    display: inline-block;
    color: #363c4b;
}

#footer.basic,
#checkout #footer {
    padding: 50px 0 20px;
}

#footer.basic .innerframe > *,
#checkout #footer .innerframe > * {
    width: 100%;
    text-align: center;
}

#footer.basic ul,
#checkout #footer ul {
    list-style: none;
    margin: 0 0 20px;
}

#footer.basic ul li,
#checkout #footer ul li {
    display: inline-block;
    margin: 0 20px;
}

#checkout .delivery-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#checkout .yourDetails {
}

#checkout .delivery-options > h3,
#checkout .yourDetails > h3 {
    width: 100%;
}

#checkout .delivery-options .buttonBox {
    margin: 0 0 10px;
    width: 45%;
    /* max-width: 40%; */
}

/*Form Elements*/
.labelFrame,
#checkout .details {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}

.labelFrame select,
.labelFrame input,
#checkout .details select,
#checkout .details input,
#checkout .yourDetails input,
.address-input .labelFrame .address-name {
    width: 100%;
}

.address-input .labelFrame .address-name {
    display: flex;
    justify-content: space-between;
}

.address-input .labelFrame .address-name div {
    width: 49%;
}

#myDetails label + input ~ span,
#checkout label + input ~ span {
    margin: 0 0 8px 40%;
}

#myDetails label + input ~ span:not(.error),
#checkout label + input ~ span:not(.error) {
    display: block;
    width: 100%;
    padding: 5px;
}

#checkout .data-entry-message {
    margin: 0 0 10px 0;
    width: 100%;
}

#accountCreation label + input ~ span {
    margin: 0 0 8px;
}

#deliveryOption_other_container .block1 {
    width: 60%;
    border-right: 1px solid var(--site-border);
    padding-right: 40px;
}

#deliveryOption_other_container .block2 {
    width: 40%;
    padding: 40px 0 40px 40px;
}

#checkout #billingAddressForm {
    display: block;
    margin: 0;
}

#checkout .details.postcode {
    width: 100%;
}

#checkout .searchPostcode {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#checkout .searchPostcode input[type='text'] {
    border-color: #606770;
    width: 100%;
    font-size: 20px;
}

#checkout .searchPostcode input[type='text']::placeholder {
    font-size: 13.3px;
    color: #aaa;
}

#accountCreation > h3 {
    width: 100%;
}

#checkout #accountCreation h5 {
    text-transform: none;
    margin-top: 0;
}

#accountCreation .accountChoice {
    width: 100%;
    padding: 0;
}

#accountCreation .accountChoice {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#accountCreation .accountChoice .buttons {
    width: 40%;
    padding: 0 40px 0 0;
}

.accountChoice .buttonBox {
    display: block;
    margin: 0 0 10px;
}

#checkout #accountCreation #passwordForm {
    width: 60%;
    padding: 0;
}

#checkout #accountCreation #passwordForm input,
#checkout #accountCreation #passwordForm label {
    display: block;
    width: 100%;
}

#checkout #accountCreation #passwordForm label span {
    display: block;
    padding-bottom: 5px;
}

#checkout #accountCreation #dataUse .accordion-title {
    border: 1px solid var(--site-border);
    padding: 10px;
    border-radius: 4px;
    background: #efefef;
}

#checkout .vatBox {
    align-items: flex-start;
}

#checkout .vatBox .block1 {
    width: 45%;
    padding: 0 30px 0 0;
}

#checkout .vatBox .block2 {
    width: 55%;
    padding: 0 0 0 30px;
    border-left: 1px solid var(--site-border);
}

#checkout .vatBox .block1 .buttonBox {
    margin: 0;
    width: 100%;
}

#checkout .vatBox label {
    width: 100%;
}

#checkout .signUp > h4 {
    margin: 0;
    width: 100%;
}

#checkout .signUp .block1 {
    width: 40%;
    padding: 0 40px 0 0;
    border-right: 1px solid var(--site-border);
}

#checkout .signUp .block2 {
    width: 60%;
    padding: 0 0 0 40px;
}

#checkout .sectionFooter {
    display: block;
    margin: 30px 0 100px;
    border-top: 1px solid #606770;
}

#checkout .sectionFooter p a {
    display: inline-block;
    vertical-align: middle;
}

#checkout .sectionFooter p .button {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
}

#checkout .button.extra-large {
    padding: 10px 30px;
    line-height: 30px;
    height: auto;
    font-size: 16px;
    font-weight: 500;
}

.success,
.error {
    font-weight: bold;
    display: block;
    width: 100%;
}

.success {
    color: #eb6a2e !important;
}

.error {
    color: #ab162c !important;
}

.error:empty {
    display: none;
}

form input[aria-invalid='true'],
form select[aria-invalid='true'],
form textarea[aria-invalid='true'] {
    border: 2px solid #ab162c !important;
    background: #f9d9de;
}

.submit-messages {
    color: #eb6a2e;
    display: block;
    margin: 16px 0;
    text-align: right;
    font-size: 1.1em;
    font-weight: bold;
}

form span.error:not(:empty):not(.submit-messages) {
    display: block;
    margin: 0 0 8px;
}

#checkout #summary {
    display: block;
    margin: 0;
}

#summary .shipTo {
    align-items: initial;
}

#summary .shipTo h3 {
    width: 100%;
}

#summary .shipTo .block1 {
    width: 50%;
    padding: 1px 0;
}

#summary .shipTo .block2 {
    width: 50%;
    padding: 1px 0;
}

#carInfo .block1 {
    width: 100%;
}

#carInfo .block2 {
    width: 50%;
    padding-right: 30px;
}

#carInfo .block3 {
    width: 50%;
    padding-left: 30px;
}

#checkout #carInfo label {
    font-size: 13px;
    padding-right: 0px;
}

#checkout #otherInfo h3 {
    width: 100%;
}

#checkout .terms {
    text-align: right;
    display: block;
}

#checkout .terms .buttonBox {
    margin: 0;
}

#checkout .terms .buttonBox label a {
    color: currentColor;
    text-decoration: underline;
    text-transform: none;
}

#checkout .terms .buttonBox input[type='checkbox']:checked + label {
    background-color: #606770;
    border-color: #606770;
}

#checkout .terms .button {
    border-color: transparent;
    background: var(--site-border);
    color: #363c4b;
    font-size: 12px;
    margin-bottom: 10px;
}

#otherInfo .block1 {
    padding-right: 40px;
    width: 1000%;
}

#summary .termsBox {
    display: block;
    margin: 30px 0 50px;
}

#summary .termsBox .buttonBox {
    margin: 0;
}

#summary .termsBox .buttonBox label {
    margin: 0 0 0 40px;
    display: inline-block;
    vertical-align: middle;
    border-color: #08a972;
    background-color: #efefef;
}

#summary .termsBox .buttonBox label:hover,
#summary .termsBox .buttonBox :checked + label {
    background-color: #08a972;
    border: 1px solid #08a972;
}

#checkout #masthead {
    min-height: 70px;
}

#checkout #Logo {
    width: 230px;
}

#checkout #masthead > .innerframe {
    min-height: 70px;
}

#checkout .payBox {
    border: 1px solid #08a972;
}

#checkout .payment-options .buttonBox {
    width: 31%;
}

#checkout .payment-options .buttonBox label {
    width: 100%;
    height: 100%;
    text-align: center;
    background: #fff;
    color: #363c4b;
}

#checkout .payment-options .buttonBox label:hover {
    border: 1px solid #606770;
}

#checkout .payment-options .buttonBox label img {
    width: 100%;
    height: 80px;
    object-fit: scale-down;
    object-position: center;
}

#checkout .payment-options .buttonBox :checked + label {
    border: 2px solid #08a972;
    color: #08a972;
}

#checkout .payment-options .buttonBox label span small {
    display: block;
    font-size: 12px;
}

#checkout #paymentFormContainerByCard {
    padding: 30px 0;
    align-items: center;
}

#checkout #paymentFormContainerByCard > .block1 {
    width: 55%;
    border-right: 1px solid var(--site-border);
    padding-right: 40px;
}

#checkout #paymentFormContainerByCard > .block2 {
    width: 40%;
}

#checkout #paymentFormContainerByCard > .block2 img {
    margin: 0 10px 5px 0;
}

/*Thank you page*/
#checkout.thanks #topFrame .currencies,
#checkout.thanks #topFrame .languages {
    display: none;
}

#checkout #thanks {
    padding: 30px 0 0;
}

#checkout #thanks ul li strong,
#checkout #thanks p strong,
#checkout #thanks h6 strong {
    color: #23a9be;
}

#checkout #thanks h6 + h3 {
    margin-top: 30px;
}

#checkout #thanks .notice {
    margin: 50px 0;
    background: #efefef;
}

#checkout #thanks .footer {
    border-top: 1px solid #606770;
    padding-top: 15px;
}

#checkout .flexgrid.address-summary {
    flex-wrap: wrap;
    align-items: flex-start;
}

#checkout .flexgrid.address-summary h3 {
    width: 100%;
}

#checkout .flexgrid.address-summary .txtbox {
    width: 50%;
}

#checkout .flexgrid.address-summary .txtbox p {
    padding-right: 30px;
}

#checkout .flexgrid.address-summary .txtbox a {
    color: #eb6a2e;
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid var(--site-border);
    margin: 15px 0 0;
}

#checkout h6.flash {
    border: 1px solid #23a9be;
    padding-bottom: 10px;
    margin: 0 0 5px;
    padding: 15px 40px;
    background: #fff;
    color: #23a9be;
}

#checkout .checkoutLinks .button.line {
    border-color: var(--site-border);
    background: var(--site-border);
    color: #a0a7af;
    padding: 12px 25px;
    margin-right: 5px;
    margin-bottom: 10px;
}

#checkout .checkoutLinks .button.line:hover {
    background-color: #a0a7af;
    color: #fff;
}

/*Payment/Braintree*/
.paymentOptions {
    display: flex;
    flex-flow: row wrap;
    min-width: 100%;
    margin: 0 0 30px;
}

.paymentOptions .buttonBox {
    display: block;
    background: #fafafa;
    width: 31%;
    margin: 0 10px 10px 0;
}

.paymentOptions .buttonBox label {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
    height: 100%;
}

.paymentOptions .buttonBox label svg {
    margin: 0 10px 0 0;
    width: 40px;
    height: 40px;
}

.paymentOptions .buttonBox label span {
    width: calc(100% - 50px);
    line-height: 18px;
}

.paymentOptions .buttonBox input[type='radio']:checked + label {
    background-color: #606770;
    border-color: #606770;
}

.bankOptions {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.bankOptions .headbox {
    width: 100%;
}

.bankOptions .bank {
    width: 40%;
    padding: 20px;
    border: 1px solid var(--site-border);
}

.bankOptions .box {
    width: 59.4%;
    padding: 20px;
    border: 1px solid var(--site-border);
}

.bankOptions .box h6 {
    color: #23a9be;
    margin: 0 0 15px;
}

.bankOptions .box p + h6 {
    border-top: 1px solid var(--site-border);
    padding: 10px 0 0;
}

#checkout p.placeOrder {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    border-top: 2px oslid #7d8798;
    padding: 10px 0 0;
    margin: 30px 0 0;
}

#checkout p.placeOrder .button {
    margin: 0 0 0 30px;
    max-width: 320px;
    font-size: 22px;
    letter-spacing: 1px;
    font-weight: 500;
    padding: 20px 35px;
    height: auto;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
}

/*------------------- Accordion */
.borderbox.accordion-frame {
    padding: 30px 40px;
}

.accordion-frame .accordion-title {
    display: block;
    margin: 0;
    cursor: pointer;
}

.accordion-frame .accordion-title svg {
    float: right;
    width: 25px;
    height: 25px;
    margin: 0 10px;
}

.accordion-frame.active .accordion-title {
    padding-bottom: 20px;
    margin: 0 0 30px;
}

.accordion-frame.active .accordion-title svg {
    transform: rotate(-180deg);
    fill: #eb6a2e;
}

.accordion-frame .accordion {
    display: none;
}

.accordion-frame.active .accordion {
    display: block;
}

.accordion-frame.active .flexgrid.address-summary {
    display: flex;
}

.accordion-frame:not(.active):hover {
    background: #efefef;
}

.accordion-frame.active #carInfo,
.accordion-frame.active #otherInfo {
    display: flex;
    align-items: initial;
    margin: 0;
}

.accordion-frame.borderbox {
    padding: 0;
}

.accordion-frame.borderbox .accordion-title {
    padding: 20px 40px;
    margin: 0;
}

.accordion-frame.borderbox .accordion {
    padding: 0 40px 20px;
    margin: 0;
}

#login .borderbox:not(.reset) .error:not(.submit-messages),
#register .borderbox:not(.reset) .error:not(.submit-messages) {
    margin: 0 0 8px 40%;
}

/*------------------- partsCatalogue.aspx */
#catalogue .flexgrid.carmake select {
    width: 32%;
}

/*------------------- Gallery */
.refineList.gallery {
    grid-template-columns: repeat(6, minmax(14%, 16%));
}
ul.refineList.gallery a {
    padding: 10px;
    font-size: 0.68rem;
    line-height: 0.88rem;
    font-weight: 600;
    text-align: left;
    color:var(--site-mid-grey);
}

ul.refineList.gallery a span {
    padding-top: 10px;
    display: block;
}

ul.refineList.gallery a img {
    width: 100%;
}
    ul.refineList.gallery a iframe {
        max-width: 100%;
        display: block;
        border: none;
    }

#gallery #jquery-overlay {
    z-index: 7000;
}

#gallery #jquery-lightbox {
    z-index: 8000;
    max-width: 90%;
}

#gallery .galleryIcons {
    display: block;
    margin: 20px 0 0;
}

#gallery .galleryIcons a {
    display: inline-block;
    margin: 0 5px 5px 0;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--site-border);
}

/*------------------- Error Pages */
#Error #bodyMain {
    max-width: 750px;
}

/*404.aspx*/
#E500,
#E404 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: 1px;
    text-align: center;
    width: 100%;
    /*color: #fff;*/
}

#E404 h1 {
    color: #eb6a2e;
    font-size: 8vw;
    line-height: 10vw;
}

#E500 h1 {
    color: #08a972;
    font-size: 8vw;
    line-height: 10vw;
}

/*Error.aspx*/
/*------------------- myAccount */
#myAccount #container {
    overflow: initial;
}

#myAccount #filterSelector {
    display: none;
}

.account-topnav{
    display:flex;
    gap:10px;
    position:sticky;
    top:0;
    width:100%;
    margin:auto;
}





#myAccount #userInfo {
    display: block;
    margin: 0 0 20px;
    padding: 0;
}

#myAccount #userInfo h2 {
    margin: 0;
    padding: 0;
    width:100%;
    display:flex;
    gap:15px;
}

    #myAccount #userInfo h2 svg {
        fill: var(--dd-light-grey);
        display: block;
        margin: 0;
        width: 26px;
        height: 26px;
        position: relative;
        top: 4px;
    }

#myAccount #navBar #categoryOpen {
    display: none;
}

#myAccount #pageContent #navBar {
    position: absolute;
    padding: 0;
}

#myAccount #navBar .navFrame {
    display: block;
    padding: 50px 50px 30px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: -100%;
    width: 100%;
    z-index: 1000;
    overflow-y: auto;
    background: #fff;
    transition: all ease-in-out 0.4s;
    border-top: 4px solid #eb6a2e;
}

#myAccount #mainContent {
    margin: 0 auto 50px;
    border: none;
    width: 100%;
}

#myAccount #navigationTabs {
    display: block;
    border-bottom: 1px solid #08a972;
    margin: 0;
}

#navigationTabs ul {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    padding: 0 10px;
    margin: 0;
}

#navigationTabs ul li {
    display: block;
    margin: 0 5px;
    padding: 0;
    text-transform: uppercase;
    background: #fff;
    border: 1px solid #08a972;
    border-bottom: none;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: 4px 4px 0 0;
}

#navigationTabs ul li:hover,
#navigationTabs ul li.selected {
    background: #08a972;
    border-color: #08a972;
    color: #fff;
}

#navigationTabs ul li a {
    color: currentColor;
    display: block;
    padding: 10px 20px;
}

#navigationTabs ul li#logOut:hover a {
    background: #363c4b;
    border-color: #363c4b;
    color: #fff;
}

#myOrders {
    display: flex;
    padding: 1.5rem 0;
    margin: 2rem 0 0;
    /*border-top: 2px solid #becad9;*/
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

    .inv_list-item {
        display: flex;
        padding: 0.44rem 0.3rem;
        border: 1px solid var(--site-border);
        margin: 0;
        border-radius: 4px;
        background: #fff;
        width: 100%;
    }

.inv_list-item [class^="inv-"] {
    display: block;
    /*background: var(--dd-bkg1); 
    border-radius: 4px; 
    padding: 0.5rem; */
    min-width: fit-content;
    flex-shrink:0;
}
        .inv_list-item .inv-type {
            width: 10%;
            font-size: 0.82rem;            
        }
.inv_list-item .inv-number {
    width: 20%;
}
.inv_list-item .inv-date {
    width: 20%;
}


.inv_list-item .inv-total {
    width: 20%;
}
.inv_list-item .inv-order-id {
    width: 10%;
}
.inv_list-item .inv-download {
    width: 20%;
}
    .inv_list-item .inv-download .button {
        width: 100%;
        margin: 0;
        background: var(--dd-bkg1);
        color: var(--d911-teal);
        font-size: 0.68rem;
        letter-spacing: 0.013rem;
    }
        .inv_list-item .inv-download .button:hover {
            background: var(--d911-teal);
            color: #fff;
        }
.marker{
    display:flex;
    align-items:center;
    justify-content:center;
    width:fit-content;
}
.marker::before {
    content: '';
    margin-right: 6px;
    display: block;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--dd-light-grey);
    flex-shrink: 0;
    border: 2px solid #f5f5f5;
}

.invoice::before {
    /*background:var(--dd-grey);*/
}

.credit::before {
    background: #08a972;
}

/*.inv_list-item:hover {
    border-color: var(--dd-light-grey);
}*/
.inv_list-item .inv-label {
    display: flex;
    font-weight: 600;
    font-size: 0.68rem;
    letter-spacing: 0.05rem;
    padding: 0;
    color: var(--dd-light-grey);
    text-transform: uppercase;
    line-height: 0.68rem;
    margin: 6px 0 4px;
}

.inv-txt {
    display: flex;
    font-weight: 600;
    /* font-size: 1.08rem; */
    padding: 0;
    color: #8297ae;
    color:var(--dd-grey);
    line-height: 1rem;
}
.inv-number .inv-txt,
.inv-order-id .inv-txt {
    display: flex;
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0;
    text-transform: uppercase;
    line-height: 1.0rem;
    min-height: 20px;
}
    .inv-number .inv-txt{
        color:var(--d911-teal);
    }


    .page-nav{
        display:flex;
        width:100%;
        gap:20px;
        justify-content:space-between;
        align-items:center;
    }
        .page-nav button{
            width:200px;
        }



        #invoice-history .row span {
            word-break: break-word;
        }

.myacc-block {
    display: block;
    margin: 8.4rem auto 0;
    background: #fff;
    border-radius: 4px;
    padding: 8.6rem 2.94rem 2.94rem;
    border: 1px solid var(--site-border);
    /*min-height: 75vh;*/
    position: relative;
}
    .user-submit {
        display: flex;
        justify-content: space-between;
        border-top: 1px solid var(--site-border);
        padding: 10px 0 0;
        margin: 40px 0 0;
    }

.user-submit .button.line {
    border: 1px solid var(--site-border);
    color: var(--dd-grey);
    width: 180px;
    text-align: center;
}
.user-submit .button.line:hover {
    background: var(--dd-light-grey);
    color: #fff;
}
.basket-name {
    color: var(--d911-teal);
    margin-left: 0.68rem;
}




#myDetails {
}

.blk-header {
    display: flex;
    justify-content: space-between;
    align-items:center;
    gap: 40px;
    margin: 0;
    padding: 1.5rem 2.86rem;
    border-bottom: 1px solid var(--site-border);
    font-size: 2.46rem;
    font-weight:300;
    position: absolute;
    inset: 0 0 auto;
    background: var(--dd-bkg1);
    color: var(--d911-teal);
}
    .blk-header svg {
        fill: var(--dd-light-grey);
        width: 26px;
        height: 26px;
        flex-shrink:0;
    }

.blk-group {
    border-top: 1px solid var(--site-border);
    padding: 1rem 0 0;
    margin: 0 auto 40px;
}
.blk-txt {
    display: block;
    /* background: var(--dd-bkg1); */
    /* padding: 2rem; */
    /* border-radius: 4px; */
    width: 100%;
    /* border: 1px solid var(--site-border); */
}
.update-access{
    
}
.update-access .button {
    min-width: 180px;
    border-color: var(--site-border);
}
.address-name {
    display: flex;
    gap: 10px;
    justify-content: space-between;
}
.address-name > div {
    width: 100%;
}

.twoCol{
    display:grid;
    grid-template-columns:repeat(2,minmax(45%,50%));
    gap:10% 5%;    
}
.threeCol{
    display:grid;
    grid-template-columns:repeat(3,minmax(30%,33%));
    gap:10% 5%;    
}

#myAccount .q-field--outlined .q-field__control::before {
    border-color: var(--site-border);
    /*transition: border-color 0.36s cubic-bezier(0.4,0,0.2,1);*/
}

#passwordContainer{
    margin:0 0 40px;
}

#myAccount input.q-field__control,
#myAccount input.q-field__input,
#myAccount input.q-field__native {
    color: var(--dd-grey);
}

.myacc_invoice {
}
.myacc_orders{

}

.order-filter-frame,
.invoice-filter-frame {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}
.order-search-label,
.order-filter-label,
.invoice-search-label, 
.invoice-filter-label {
    margin: 0;
    font-size: 0.96rem;
    font-weight: 500;
    line-height: 1.16rem;
    display: block;
    width: 100%;
    border-bottom: 1px solid var(--site-border);
    padding: 0 0 6px;
    color: var(--site-mid-grey);
}
    .order-search-label,
    .invoice-search-label{
        margin:0;
    }
    .order-filter,
    .invoice-filter {
        display: block;
        width: 49%;
        max-width:49%;
    }
        .order-filter input,
        .invoice-filter input {
            width: 100%;
            border-color: var(--dd-light-grey);
            border-radius: 4px;
            color: var(--site-grey);
            font-weight: 600;
            font-size: 0.76rem;
            cursor: pointer;
            height: 40px;
            background-color:#fff;
            min-width:100%;
        }
    .order-filter label,
    .invoice-filter label {
        width: 100%;
    }
        .order-filter .txt,
        .invoice-filter .txt {
            font-size: 0.684rem;
            display: block;
            margin: 5px 0;
            color: var(--dd-light-grey);
            font-weight: 600;
            text-transform: uppercase;
        }

.myacc_orders .order-search,
.myacc_invoice .invoice-search {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
    gap: 0;
    justify-content: space-between;
}
.orders-search .order-search-label,
.invoice-search .invoice-search-label{
    width:100%;
}
.order-search label,
.invoice-search label{
    margin:0;
    width:calc(100% - 40px);
}
.order-search input[type="text"]:not(.q-field__native),
.invoice-search input[type="text"]:not(.q-field__native) {
    border-color: var(--dd-light-grey);
    border-radius: 4px 0 0 4px;
}
.order-search .search-button,
.invoice-search .search-button {
    width: 40px;
    background: var(--dd-light-grey);    
    color: #fff;
    font-size: 0.86rem;
    font-weight: 600;
    border: none;
    border-radius: 0 4px 4px 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-button svg {
    /*fill: var(--dd-light-grey);*/
    width: 16px;
    height: 16px;
}
.order-search .txt,
.invoice-search .txt {
    width: 100%;
    font-size: 0.684rem;
    display: block;
    margin: 5px 0;
    color: var(--dd-light-grey);
    font-weight: 600;
    text-transform: uppercase;
}
.myacc_orders .order-filter-frame,
.myacc_invoice .invoice-filter-frame {
    /* border-bottom: 1px solid var(--site-border); */
    padding: 0;
    flex-wrap: wrap;
    gap: initial;
    align-content: flex-start;
}

.no-results {
    display: block;
    border-top: 1px solid var(--site-border);
    margin: 56px 0 0;
    padding:1.5rem 0;
}


/*order-list-item*/
.order-list-item {
    display: flex;
    padding: 0.44rem 0.3rem;
    border: 1px solid var(--site-border);
    margin: 0;
    border-radius: 4px;
    background: #fff;
    width: 100%;
    font-size: 0.824rem;
    color:var(--dd-grey);
    position:relative;
}

    .order-list-item [class^=".ord-"] {
        display: block;
        min-width: fit-content;
        flex-shrink: 0;
    }

    .order-list-item .ord-id {
        width: 10%;
        font-size: 0.824rem;
        padding-left: 0.5rem;
    }

    .order-list-item .ord-date-placed {
        width: 20%;
    }

    .order-list-item .ord-total {
        width: 20%;
    }

    .order-list-item .ord-status {
        width: 35%;

    }
        .order-list-item .ord-status span {
	        font-size: 0.724rem;
	        padding-right: 1.0rem;
	        line-height: 0.824rem;
        }

    .order-list-item .ord-download {
        width: 15%;
        position:relative;
        max-width:180px;
    }
        

        .order-list-item .ord-download .button {
            width: 100%;
            margin: 0;
            background: var(--dd-bkg1);
            color: var(--d911-teal);
            font-size: 0.68rem;
            letter-spacing: 0.013rem;
        }

            .order-list-item .ord-download .button:hover {
                background: var(--d911-teal);
                color: #fff;
            }
    .order-list-item .ord-label {
        display: flex;
        font-weight: 600;
        font-size: 0.68rem;
        letter-spacing: 0.05rem;
        padding: 0;
        color: var(--dd-light-grey);
        text-transform: uppercase;
        line-height: 0.68rem;
        margin: 6px 0 4px;
    }
    .order-list-item .ord-txt {
        display: flex;
        font-weight: 600;
        padding: 0;
        color: var(--dd-grey);
        line-height: 1rem;
    }
        .order-list-item .ord-id .ord-txt{
            color:var(--d911-teal);
        }

    .order-list-item .submit-messages.success {
        display: block;
        position: absolute;
        inset: auto -1px calc(100% + 8px) auto;
        margin: 0;
        padding: 1.05rem 1.85rem;
        max-width: 220px;
        background: var(--site-green);
        color: #fff !important;
        border-radius: 4px;
        font-size: 0.86rem;
        line-height: 1.06rem;
        font-weight: 400;
    }
    .order-list-item .submit-messages::after {
        content: "";
        display: block;
        width: 2px;
        height: 26px;
        background: var(--dd-light-grey);
        position: absolute;
        z-index: 10;
        inset: auto 30px -13px auto;
        border-radius: 2px;
    }

    .add-new-list {
        display: flex;
        gap: 10px;
        margin: 0 0 40px;
    }
    .add-new-list .button{
        flex-shrink:0;
        width:120px;
    }
    /*x0x_marker_05/08/25*/
    #myDetails .searchPostcode,
    #myDetails .borderbox .details {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        justify-content: space-between;
        min-height: 50px;
        display: inline !important;
    }


/*shopping lists*/
.shopping-list {
    display: flex;
    justify-content:space-between;
}
.shopping-list-nav {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width:30%;
}
.shopping-list-results {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    width:60%;
}
.current-basket-items{

}
.shopping-list-nav .shopping-list-item {
    display: flex;
    gap: 10px;
    cursor: pointer;
    border-bottom: 1px solid var(--site-border);
    padding: 0 0 6px;
}
.shopping-list-item.active {
    color: var(--d911-teal);
    border-color: var(--dd-light-grey);
}
.edit-icon, .delete-icon{

}
.button.user-action {
    position: absolute;
    inset: 30px 100px auto auto;
    margin: auto;
    border-color: #a7b6c8;
    color: var(--dd-grey);
}


table.current-basket-items thead th {
    font-size: 0.684rem;
    color: var(--dd-light-grey);
    font-weight: 600;
    text-transform: uppercase;
    text-align: left;
}
table.current-basket-items td,
table.current-basket-items th {
    padding: 5px 0;
    vertical-align:top;
}
table.current-basket-items tr th:nth-child(1),
table.current-basket-items tr td:nth-child(1) {
    width: 30%;
}
table.current-basket-items tr th:nth-child(2),
table.current-basket-items tr td:nth-child(2) {
    width: 65%;
    
}
table.current-basket-items tr th:nth-child(3),
table.current-basket-items tr td:nth-child(3) {
    width: 5%;
    padding-left: 0.5rem;
    text-align:center;
}

.current-basket-items a{
    color:var(--d911-teal);
    text-decoration:underline;
    text-underline-position:right;
}
.shopping-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 20px;
}
.shoppinglist-edit-btns{
    display:flex;
    gap:20px;
    justify-content:space-between;
}
    .shoppinglist-edit-btns .button{
        width:220px;
    }
    .rename-list {
        display: block;
        width: 100%;
    }
    .rename-list input{
        
    }
    .shopping-list-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.shopping-list-icons {
    flex-shrink:0;
    display: flex;
    gap: 10px;
    align-items: center;
}

.edit-icon,
.delete-icon {
    font-size: 0.864rem;
    cursor: pointer;
    color: var(--dd-light-grey);
}

.delete-icon:hover {
    color:var(--site-red);
}


#myDetails .details input {
    width: 100%;
    background-color: #fff;
}

/* #myDetails .details label {
  width: 40%;
  line-height: 40px;
} */

#myDetails .searchPostcode input {
    width: 100%;
}

#myDetails .searchPostcode input[type='text']::placeholder {
    font-size: 13.3px;
    color: #aaa;
}

.details .panel {
    width: 100%;
}
.searchPostcode input[type='text']:not(.q-field__native) {
    height: 56px;
    position:relative;
}
#myDetails .clientSave .button {
    width: 250px;
}

/*------------------- Always Hidden - Sidebar Items */
#diagram #categoryOpen,
#gallery #categoryOpen,
#BasicPage #categoryOpen,
#login #categoryOpen,
#register #categoryOpen,
#basket #pageContent #categoryOpen {
    display: none;
}

#BasicPage #bodyText {
    padding: 50px;
    background: #fff;
    border: 1px solid var(--site-border);
    border-radius: 4px;
    min-height: 50vh;
}

/*------------------- TyreSearch.aspx */
#tyreSearch table tr td {
    font-size: 12px;
}

#tyreSearch table select {
    width: 100%;
    min-width: 175px;
    height: 25px;
    padding: 0 20px 0 5px;
}

#tyreSearch .fpfLogoContainer {
    float: left;
    height: 100px;
    margin: 0px 50px 0px 0px;
}

#tyreSearch #searchContainer p strong {
    color: #f00;
}

#tyreSearch #searchContainer,
#tyreSearch #resultsContainer {
    margin-bottom: 40px;
}

#tyreSearch #tyrebox {
    display: flex;
    justify-content: flex-start;
}

/*------------------- Cars for Sale */
#CarsList {
    width: 100%;
    max-width: 820px;
    display: block;
    margin: 30px auto;
    padding: 0 20px;
}

#CarsList .buttons {
    display: block;
    padding: 20px 0;
    margin: 0 0 20px;
}

#CarsList .buttons .button {
    padding: 12px 25px;
    margin-right: 5px;
}

#CarsList .buttons .active {
    background: #444;
}

.car-sale-listing {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 auto 50px;
    padding: 20px;
    border: 1px solid var(--site-border);
    background: #fff;
    border-radius: 4px;
    position: relative;
}

.car-sale-listing > div {
    display: block;
    width: 100%;
}

.car-sale-listing .images a {
    display: block;
    margin: 0;
}

.car-sale-listing .images .main-image-link {
    position: relative;
    margin-bottom: 10px;
}

.car-sale-listing .images .main-image {
    padding: 0;
    margin: 0 0.5px -3px;
}

.car-sale-listing .images ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}

.car-sale-listing .images ul li {
    margin: 0 0 1px;
    flex: 0 0 20%;
    padding: 0 0.5px;
}

.car-sale-listing .images ul li img {
    cursor: pointer;
    display: block;
    margin: 0;
}

.car-sale-listing .images .zoom {
    position: absolute;
    bottom: 8px;
    right: 8px;
}

.car-sale-listing .details .description-container {
    max-height: 600px;
    overflow: auto;
    margin-bottom: 30px;
    border-bottom: 1px solid #ccc;
    padding: 10px 10px 10px 0;
}

.car-sale-listing .arrow {
    margin-top: 10px;
    cursor: pointer;
}

/*------------------- Make Payment */
#payment {
    display: block;
    padding: 30px 0;
}

#makepayment {
    display: block;
    padding: 10px 0;
}

/*------------------- Brand Filters */
.filters .filter-buttons {
    text-align: right;
}

/*------------------- Vue effects */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

.slide-fade-left-enter-active,
.slide-fade-right-enter-active {
    transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-left-leave-active,
.slide-fade-right-leave-active {
    transition: all 1s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-left-enter-from {
    transform: translateX(-100px);
    opacity: 1;
}

.slide-fade-left-leave-to {
    transform: translateX(-300px);
    opacity: 0;
}

.slide-fade-right-enter-from {
    transform: translateX(100px);
    opacity: 1;
}

.slide-fade-right-leave-to {
    transform: translateX(300px);
    opacity: 0;
}

.slide-enter-active {
    -moz-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -moz-transition-timing-function: ease-in;
    -webkit-transition-timing-function: ease-in;
    -o-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
}

.slide-leave-active {
    -moz-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    -o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

.slide-enter-to,
.slide-leave {
    max-height: 100px;
    overflow: hidden;
}

.slide-enter,
.slide-leave-to {
    overflow: hidden;
    max-height: 0;
}

.stock-block {
    display: inline-block;
    width: 20px;
    height: 5px;
    bottom: 2px;
    position: relative;
}


/* account-navigation - update 15/07/25 _ddkm. */

.account-navigation {
    display: grid;
    /*grid-template-columns: repeat(4,minmax(24%,25%));*/
    /* grid-template-columns: repeat(5,minmax(18%,20%)); */
    grid-template-columns: repeat(6,minmax(14%,16.66%));
    gap: 4px;
    margin: 0 0 40px;
}

.account-navigation > div {
    padding: 10px;
}

    .account-navigation .navlink {
        border: 1px solid var(--site-border);
        background: #fff;
        padding: 5%;
        min-height: 80px;
        display: flex;
        gap: 10px;
        height: 100%;
    }
        .account-navigation .navlink .tab-trigger{
            width:100%;
            display:flex;
            gap:13px;
        }
.navlink .tab-trigger svg {
    position: relative;
    top: 2px;
    flex-shrink: 0;
}
.account-navigation .navlink .txt {
    padding-bottom:10px;
}

.account-navigation .navlink .txt span {
    font-family: 'Roboto', sans-serif;
}


.account-navigation .navlink:hover,
.account-navigation .navlink:has(.selected) {    
    background: var(--d911-teal);
    color: #fff;
}
    .account-navigation .navlink:has(.selected) .txt .navlink-heading,
    .account-navigation .navlink:hover .txt .navlink-heading {
        color: #fff;
    }
.account-navigation .navlink.selected .txt .navlink-heading {
    color: #eb6a2e;
}

    .account-navigation .navlink img {
        width: 34px;
        height: 34px;
        flex-shrink: 0;
        padding:4px;
    }


   /* .account-navigation .dd_account-details {
        grid-column: span 3;
                
    }*/

.account-navigation .dd_account-logout {
    /*order: -1;*/
    background: var(--site-black);
    color: #fff;
}
.account-navigation .coming-soon{
    opacity:0.4;
    pointer-events:none;
    display:none;
}

.dd_account-details .user-id {
    border-color: #08a972;
    line-height: 30px;
    font-size: 13px;
    background: #08a972;
    color: #fff;
    border-radius: 50%;
    margin: 5px 8px 0;
    width: 30px;
    height: 30px;
    font-weight: bold;
}

.account-navigation .dd_account-logout .txt .navlink-heading {    
    color: #fff;
}





.row {
    display: flex;
    flex-wrap: wrap;
}

.row > .col {
    width: auto;
    min-width: 0;
    max-width: 100%;
    flex: 10000 1 0%;
}

.row > .col-0 {
    height: auto;
    width: 0%;
}

.row > .col-1 {
    height: auto;
    width: 8.3333%;
}

.row > .col-2 {
    height: auto;
    width: 16.6667%;
}

.row > .col-3 {
    height: auto;
    width: 25%;
}

.row > .col-4 {
    height: auto;
    width: 33.3333%;
}

.row > .col-5 {
    height: auto;
    width: 41.6667%;
}

.row > .col-6 {
    height: auto;
    width: 50%;
}

.row > .col-7 {
    height: auto;
    width: 58.3333%;
}

.row > .col-8 {
    height: auto;
    width: 66.6667%;
}

.row > .col-9 {
    height: auto;
    width: 75%;
}

.row > .col-10 {
    height: auto;
    width: 83.3333%;
}

.row > .col-11 {
    height: auto;
    width: 91.6667%;
}

.row > .col-12 {
    height: auto;
    width: 100%;
}

.row > .col-xs {
    width: auto;
    min-width: 0;
    max-width: 100%;
    flex: 10000 1 0%;
}

.row > .col-xs-0 {
    height: auto;
    width: 0%;
}

.row > .col-xs-1 {
    height: auto;
    width: 8.3333%;
}

.row > .col-xs-2 {
    height: auto;
    width: 16.6667%;
}

.row > .col-xs-3 {
    height: auto;
    width: 25%;
}

.row > .col-xs-4 {
    height: auto;
    width: 33.3333%;
}

.row > .col-xs-5 {
    height: auto;
    width: 41.6667%;
}

.row > .col-xs-6 {
    height: auto;
    width: 50%;
}

.row > .col-xs-7 {
    height: auto;
    width: 58.3333%;
}

.row > .col-xs-8 {
    height: auto;
    width: 66.6667%;
}

.row > .col-xs-9 {
    height: auto;
    width: 75%;
}

.row > .col-xs-10 {
    height: auto;
    width: 83.3333%;
}

.row > .col-xs-11 {
    height: auto;
    width: 91.6667%;
}

.row > .col-xs-12 {
    height: auto;
    width: 100%;
}

.pt-xs {
    padding-top: 5px;
}

.pt-sm {
    padding-top: 10px;
}

.pt-md {
    padding-top: 20px;
}

.pt-lg {
    padding-top: 30px;
}

.pb-xs {
    padding-bottom: 5px;
}

.pb-sm {
    padding-bottom: 10px;
}

.pb-md {
    padding-bottom: 20px;
}

.pb-lg {
    padding-bottom: 30px;
}

.pl-xs {
    padding-left: 5px;
}

.pl-sm {
    padding-left: 10px;
}

.pl-md {
    padding-left: 20px;
}

.pl-lg {
    padding-left: 30px;
}

.pr-xs {
    padding-right: 5px;
}

.pr-sm {
    padding-right: 10px;
}

.pr-md {
    padding-right: 20px;
}

.pr-lg {
    padding-right: 30px;
}

.grecaptcha-badge {
    visibility: hidden !important;
}

/* Quasar Overrides */
.q-field--outlined .q-field__control {
    padding: 0;
}

.q-field--labeled .q-field__native {
    padding-left: 9px;
    height: 56px;
    border: 1px solid var(--site-border);
}

.q-input.q-field--outlined .q-field__control:before {
    border: none;
}

.q-select.q-field--labeled .q-field__native {
    padding-top: 4px;
    height: 32px;
    border: none;
}

.q-field__label {
    left: 9px;
}

/* Cookie Consent Banner */
#CybotCookiebotDialogPoweredbyCybot,
.CookiebotWidget-main-logo {
    display: none !important;
}

#CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton {
    padding: 0 !important;
    border: 2px solid #eb6a2e !important;
}

#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtonAccept,
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonAccept,
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll,
#CookiebotWidget #CookiebotWidget-buttons #CookiebotWidget-btn-change {
    background-color: #eb6a2e !important;
    border-color: #eb6a2e !important;
}

#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonCustomize,
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection,
#CookiebotWidget #CookiebotWidget-buttons #CookiebotWidget-btn-withdraw {
    border-color: #eb6a2e !important;
}

#CybotCookiebotDialog input:checked + .CybotCookiebotDialogBodyLevelButtonSlider {
    background-color: #eb6a2e !important;
}

#CookiebotWidget .CookiebotWidget-consent-details button,
#CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyEdgeMoreDetails a,
#CybotCookiebotDialog #CybotCookiebotDialogBodyContentText a,
#CybotCookiebotDialog #CybotCookiebotDialogBodyLevelButtonIABHeaderViewPartnersLink,
#CybotCookiebotDialog #CybotCookiebotDialogDetailBulkConsentList dt a,
#CybotCookiebotDialog #CybotCookiebotDialogDetailFooter a,
#CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonIABDescription a,
#CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieLink,
#CybotCookiebotDialogDetailBodyContentTextAbout a,
#CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink:hover,
#CybotCookiebotDialog .CookieCard .CybotCookiebotDialogDetailBodyContentCookieContainerButton:hover,
#CybotCookiebotDialog .CookieCard .CybotCookiebotDialogDetailBodyContentIABv2Tab:hover,
#CybotCookiebotDialogDetailBodyContentCookieContainerTypes .CybotCookiebotDialogDetailBodyContentCookieProvider:not(.CybotCookiebotDialogDetailBodyContentCookieInfoCount):hover,
#CybotCookiebotDialogBodyLevelButtonsSelectPane label:not([for='CybotCookiebotDialogBodyLevelButtonNecessary']) .CybotCookiebotDialogBodyLevelButtonDescription:hover {
    color: #eb6a2e !important;
}

#CookiebotWidget .CookiebotWidget-body .CookiebotWidget-consents-list li.CookiebotWidget-approved svg {
    fill: #eb6a2e !important;
}

#CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink.CybotCookiebotDialogActive {
    border-bottom: 1px solid #eb6a2e !important;
    color: #eb6a2e !important;
}

#CybotCookiebotDialog a:hover:after,
#CybotCookiebotDialog a:hover:before,
#CybotCookiebotDialog button:hover:after,
#CybotCookiebotDialog button:hover:before {
    border-color: #eb6a2e !important;
}

#CybotCookiebotDialog label {
    display: inline !important;
}

.rounded-input {
    border-radius: 10px;
    border: 1px solid #ccc;
    padding: 5px;
}

.diagram-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    justify-content: center;
}

.diagram-item {
    text-align: center;
}

/*Scolling container - 16/09/24*/
.dg-container {
    position: relative;
    margin: 20px auto;
    padding: 0 40px 0 0;
}

.dg-container .carousel-frame {
    border: 1px solid var(--site-border);
    border-left: 3px solid #a5adb6;
    border-right: 3px solid #a5adb6;
    overflow: hidden;
    padding: 10px 0;
}
#videoModal .carousel-frame {
    border: none;
    border-right: 3px solid #a5adb6;
    padding: 0;
}
    .dg-container .carousel-frame::after,
    .dg-container .carousel-frame::before {
        content: '';
        display: block;
        width: 20px;
        height: 100%;
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        border-top: 3px solid #a5adb6;
        border-bottom: 3px solid #a5adb6;
        user-select: none;
    }

.dg-container .carousel-frame::after {
    right: 40px;
    left: auto;
}
#videoModal .carousel-frame::before{
    display:none;
}
#videoModal .carousel-frame::after{
    width:10px;
}
.dg-image-wrapper {
    display: flex;
    transition: transform 0.5s ease;
    width: max-content;
    gap: 10px;
    padding: 0 10px;
}
.dg-video-wrapper {
    display: flex;
    transition: transform 0.5s ease;
    width: max-content;
    gap: 20px;
    padding: 0 10px;

}
.dg-image-wrapper a {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #d0d9e3;
    border-radius: 4px;
    width: 150px;
    height: auto;
    margin: 0;
    padding: 10px;
    text-align: center;
    align-items: center;
    position: relative;
}

.dg-image-wrapper img {
    display: block;
    width: 120px;
    aspect-ratio: 1/1;
    margin: 5px 0;
}

.dg-image-wrapper .txt {
    font-size: 0.76rem;
    line-height: 0.96rem;
    font-weight: 500;
    height: 48px;
    overflow: hidden;
    text-overflow: ellipsis;
    /* border-bottom: 1px solid var(--site-border); */
    display: block;
    text-transform: capitalize;
    margin: 8px 0 0;
}

.dg-title {
    color: #08a972;
    display: block;
    position: absolute;
    width: 80%;
    padding: 5px 10px;
    background: #fff;
    inset: 0;
    bottom: auto;
    height: 30px;
    text-align: center;
    margin: auto;
}

.dg-arrow {
    position: absolute;
    right: 0;
    color: white;
    background: #a5adb6;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
    pointer-events: auto;
    width: 38px;
    height: 50px;
    margin: 0;
}

.dg-arrow:hover {
    background: #7d8798;
}

.dg-arrow-left {
    bottom: 0;
    transform: scaleX(-1);
}

.dg-arrow-right {
    top: 0;
}

.dg-start .dg-arrow-left,
.dg-end .dg-arrow-right {
    background: var(--site-border);
}

/*------------------- Brands Page - 13/12/24 dd_km */
.brand_banner {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    margin: 0 0 60px;
}
.brand_banner img {
    display: block;
    margin: 0 auto;
    border: 1px solid #fff;
    max-height: 200px;
    object-fit: contain;
}

#gpay-button-online-api-id {
    width: 100%;
}

/* Job listing page */
.job-header {
    text-align: center;
    margin-bottom: 40px;
}

.main-title {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 10px;
}

.main-description {
    font-size: 1.2rem;
    color: #666;
}

.address-flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap:1.3rem;
    margin: 0 auto;
    width: 100%;
}

select.address-dropdown {
    width: 100%;
    min-width: 300px;
    max-width: 100%;
    padding-right: 2.5em; /* Reserve space for the arrow */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1rem;
    box-sizing: border-box;
    background: #fff;
    /* Optional: Custom arrow for more control */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='gray' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.7em center;
    background-size: 1.2em;
}

select.address-dropdown option {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.address-box {
    display: flex;
    background: var(--dd-bkg1);
    border: 1px solid var(--site-border);
    border-radius: 4px;
    padding: 2.4rem 2rem;
    margin-bottom: 0;
    flex-direction: column;
    justify-content: center;
    width:100%;
    max-width:31%;
    position:relative;
}


    .address-box.button {
        border: 2px dashed var(--dd-light-grey);
        height: initial;
        background: var(--dd-bkg1);
        color: var(--site-grey);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 8rem;
    }
        .address-box.button svg {
            fill: var(--dd-light-grey);
            width: 26px;
            height: 26px;
        }
        .address-box.button:hover{
            color:var(--d911-teal);
            background:#fff;
        }
    .address-box .listing {
        font-size: 1.17rem;
        font-weight: 400;
        color: var(--site-mid-grey);
        line-height: 1.4rem;
        display: block;
        margin: 10px 0 0;
        min-height: 6rem;
    }
.badge {
    display: flex;
    padding: 4px 16px;
    font-size: 0.84rem;
    color: #fff;
    background: var(--d911-teal);
    position: absolute;
    inset: 0 auto auto;
    width: 80%;
    border-radius: 0 0 4px 4px;
}

.badge-shipping{

}
.badge-billing {
    
}

.address-actions {
    display: flex;
    flex-wrap: unset;
    gap: 8px;
    margin-top: 12px;
}
    .address-actions:has(.la-trash-alt) {
        flex-wrap: wrap;
    }
    
    .address-actions button {
        margin: 0;
        font-size: 0.684rem;
        width: 100%;
        height: 45px;
        border-radius: 4px;
        color: var(--site-mid-grey);
        font-weight: 600;
    }
    .address-actions:has(.la-trash-alt) button {
        width: 80%;
    }

    .address-actions .q-icon::before {
        
        font-size: 1.84rem;
    }
    .address-actions .q-icon {
        color: var(--dd-grey);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 45px;
        height: 45px;
        border-radius: 4px;
        padding: 0.13rem;
        border: 1px solid var(--site-border);
        box-sizing: border-box;
        margin:0;
    }
    .address-actions button:hover,
    .address-actions .q-icon:hover {
        color: var(--d911-teal);
        background: #fff;
    }

.clientSave {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    border-top: 1px solid var(--site-border);
    padding-top: 20px;
    margin-top: 40px;
}
        .clientSave .button{
            width:180px;
        }
            .clientSave .button.cancel {
                position: absolute;
                inset: 30px 100px auto auto;
                margin: auto;                
                color: #a7b6c8;
                border: 1px solid #a7b6c8;
                background: transparent;
            }
            
            /* Job Listings Section */
            .job-listings {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 30px;
            }

.job-card {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;    
    position: relative;
    padding-bottom: 40px; 
}

    .job-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }

.job-title {
    font-size: 1.8rem;
    color: #333;
    margin-bottom: 10px;
}

.job-role, .working-hours, .job-type, .schedule, .contact-info {
    font-size: 1rem;
    color: #233549;
    margin-bottom: 8px;
}

.job-description, .benefits {
    margin-bottom: 16px;
}

    .job-description p, .benefits p {
        font-size: 1rem;
        color: #666;
    }

.job-details {
    max-height: 0; 
    overflow: hidden; 
    visibility: hidden; 
    opacity: 0; 
    margin-top: 16px;
    padding-top: 10px;
    transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

.job-card.open .job-details {
    max-height: 5000px; 
    visibility: visible; 
    opacity: 1;
    padding-bottom: 20px;
}

.job-card .read-more {
    color: black;
    font-size: 0.86rem;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    bottom: 0px;
    right: 20px;
}

.read-more:hover {
    text-decoration: underline;
    color: #0056b3;
}

#myAccount .account-navigation.temp-hide,
#myAccount #userInfo.temp-hide {
    display: none;
}

/*------------------- displayBlocks overrides */
#pageContent #navBar + div {
    width: 80%;
    
}
#page_dd_layout_blocks {
    padding: 0.85rem 0 1.85rem 1.85rem;
}
.headerbox {
    padding: 1.85rem 0;
}
.ddBlockFrame {
    display: block;
    margin: 0;
    padding: 1.85rem 0;
}

    .ddBlockFrame .btn-line {
        display: inline-block;
        background: none;
        padding: 5px 0;
        border: none;
        border-bottom: 2px solid currentColor;
        font-weight: 500;
        font-size: 0.86rem;
        text-transform: uppercase;
        height: auto;
        color: currentColor;
        min-width:160px;
    }

        .ddBlockFrame .btn-line:hover {
            border-color: var(--brand-color1);
            color: var(--brand-color1);
        }
    .ddBlockFrame .rte a {
        text-decoration: underline;
        color: var(--d911-orange);
    }
    .splitscreen .imgbox {
        width:52%;
        top: 150px;
        height: calc(100vh - 190px);
    }
.headerbox h1, .headerbox .h1,
.ddBlockFrame h2, .ddBlockFrame .h2,
.ddBlockFrame h3, .ddBlockFrame .h3,
.ddBlockFrame h4, .ddBlockFrame .h4 {
    text-transform: none;
}
.headerbox h1, .headerbox .h1 {
    font-size: 2.36rem;
    line-height: 2.56rem;
    margin: 0 0 1.85rem;
}
.headerbox .txtbox {
    padding:0;

}
.ddCol.PagePicker .category-list {
    margin: 2.85rem auto 0;
    gap: 0.85rem;
}
.pagelink .infobox .title {
    font-size: 1.46rem;
    line-height: 1.66rem;
}
.pagelink .infobox {

    padding: 0.85rem 0.85rem 3rem;
}
.fourCol {
    grid-gap: 2rem;
}
.gallerybox.twoCol, 
.gallerybox.threeCol, 
.gallerybox.fourCol {
    gap: 0.85rem;
}
.gallerybox.innerframe + .gallerybox.innerframe {
    margin-top: 0.85rem;
}

    /*------------------- xxx */
    /*------------------- xxx */
    /*------------------- xxx */
    /*------------------- xxx */
    /*----------------------------------------------------------------------------------------------------------------------- Begin Responsive Queries*/
    /* ----------------------------------------------------------------------- Min Withs Smallest to largest */
    @media only screen and (min-width: 768px) {
        .row > .col-sm {
        width: auto;
        min-width: 0;
        max-width: 100%;
        flex: 10000 1 0%;
    }

    .row > .col-sm-0 {
        height: auto;
        width: 0%;
    }

    .row > .col-sm-1 {
        height: auto;
        width: 8.3333%;
    }

    .row > .col-sm-2 {
        height: auto;
        width: 16.6667%;
    }

    .row > .col-sm-3 {
        height: auto;
        width: 25%;
    }

    .row > .col-sm-4 {
        height: auto;
        width: 33.3333%;
    }

    .row > .col-sm-5 {
        height: auto;
        width: 41.6667%;
    }

    .row > .col-sm-6 {
        height: auto;
        width: 50%;
    }

    .row > .col-sm-7 {
        height: auto;
        width: 58.3333%;
    }

    .row > .col-sm-8 {
        height: auto;
        width: 66.6667%;
    }

    .row > .col-sm-9 {
        height: auto;
        width: 75%;
    }

    .row > .col-sm-10 {
        height: auto;
        width: 83.3333%;
    }

    .row > .col-sm-11 {
        height: auto;
        width: 91.6667%;
    }

    .row > .col-sm-12 {
        height: auto;
        width: 100%;
    }

    .pt-sm-xs {
        padding-top: 5px;
    }

    .pt-sm-sm {
        padding-top: 10px;
    }

    .pt-sm-md {
        padding-top: 20px;
    }

    .pt-sm-lg {
        padding-top: 30px;
    }

    .pb-sm-xs {
        padding-bottom: 5px;
    }

    .pb-sm-sm {
        padding-bottom: 10px;
    }

    .pb-sm-md {
        padding-bottom: 20px;
    }

    .pb-sm-lg {
        padding-bottom: 30px;
    }

    .pl-sm-xs {
        padding-left: 5px;
    }

    .pl-sm-sm {
        padding-left: 10px;
    }

    .pl-sm-md {
        padding-left: 20px;
    }

    .pl-sm-lg {
        padding-left: 30px;
    }

    .pr-sm-xs {
        padding-right: 5px;
    }

    .pr-sm-sm {
        padding-right: 10px;
    }

    .pr-sm-md {
        padding-right: 20px;
    }

    .pr-sm-lg {
        padding-right: 30px;
    }

    #errMsg {
        margin-left: 40% !important;
    }
}

@media only screen and (min-width: 1024px) {
    #siteNavigation ul li#search_icon {
        display: none;
    }

    #masthead.docked #searchbox,
    #masthead #searchbox {
        position: absolute;
        top: 15px;
        line-height: 25px;
        margin: 0;
        padding: 10px 0 0 0;
        visibility: visible;
        opacity: 1;
        z-index: 10;
        background: transparent;
        right: 33%;
        width: 30%;
        height: 70px;
        border-right: none;
        border-left: none;
        display: block;
    }

    #masthead.docked #searchbox {
        top: 0;
    }

    #searchbox .close {
        display: none;
    }

    /*Hidden Navbars on website*/
    #BasicPage #pageContent #navBar,
    #register #pageContent #navBar,
    #login #pageContent #navBar,
    #basket #pageContent #navBar {
        display: none;
    }

    #gallery #pageContent #navBar {
        display: block;
    }

   /* #gallery #mainContent,*/
    #BasicPage #mainContent,
    #register #mainContent,
    #login #mainContent {
        display: block;
        width: 100%;
        max-width: 1000px;
        border: none;
        margin: 0 auto 50px;
        padding: 50px 20px;
    }

    #diagram #bodyTrext,
    #gallery #bodyText,
    #register #bodyText {
        padding: 20px;
        min-height: 50vh;
    }

    .row > .col-md {
        width: auto;
        min-width: 0;
        max-width: 100%;
        flex: 10000 1 0%;
    }

    .row > .col-md-0 {
        height: auto;
        width: 0%;
    }

    .row > .col-md-1 {
        height: auto;
        width: 8.3333%;
    }

    .row > .col-md-2 {
        height: auto;
        width: 16.6667%;
    }

    .row > .col-md-3 {
        height: auto;
        width: 25%;
    }

    .row > .col-md-4 {
        height: auto;
        width: 33.3333%;
    }

    .row > .col-md-5 {
        height: auto;
        width: 41.6667%;
    }

    .row > .col-md-6 {
        height: auto;
        width: 50%;
    }

    .row > .col-md-7 {
        height: auto;
        width: 58.3333%;
    }

    .row > .col-md-8 {
        height: auto;
        width: 66.6667%;
    }

    .row > .col-md-9 {
        height: auto;
        width: 75%;
    }

    .row > .col-md-10 {
        height: auto;
        width: 83.3333%;
    }

    .row > .col-md-11 {
        height: auto;
        width: 91.6667%;
    }

    .row > .col-md-12 {
        height: auto;
        width: 100%;
    }

    .pt-md-xs {
        padding-top: 5px;
    }

    .pt-md-sm {
        padding-top: 10px;
    }

    .pt-md-md {
        padding-top: 20px;
    }

    .pt-md-lg {
        padding-top: 30px;
    }

    .pb-md-xs {
        padding-bottom: 5px;
    }

    .pb-md-sm {
        padding-bottom: 10px;
    }

    .pb-md-md {
        padding-bottom: 20px;
    }

    .pb-md-lg {
        padding-bottom: 30px;
    }

    .pl-md-xs {
        padding-left: 5px;
    }

    .pl-md-sm {
        padding-left: 10px;
    }

    .pl-md-md {
        padding-left: 20px;
    }

    .pl-md-lg {
        padding-left: 30px;
    }

    .pr-md-xs {
        padding-right: 5px;
    }

    .pr-md-sm {
        padding-right: 10px;
    }

    .pr-md-md {
        padding-right: 20px;
    }

    .pr-md-lg {
        padding-right: 30px;
    }

    #myAccount #siteNavigation #accountBox {
        inset: 100px 0 0;
        margin: 0 auto;
        box-shadow: none;
        height: 170px;
        width: calc(100% - 40px);
        max-width: 1240px;
        border: 1px solid var(--site-border);
        padding: 0.85rem 1.5rem 0.85rem;
        overflow: hidden;
        border-radius: 4px;
        transition:height var(--bez) 0.13s;
        z-index:400;
    }

    #myAccount #masthead.docked #siteNavigation #accountBox {
        top: 64px;
        border-top: 1px solid var(--site-border);
        box-shadow: 0 18px 10px -18px rgba(0, 0, 0, 0.24);
        border-radius: 0 0 4px 4px;
        height: 125px;
    }
   
    #myAccount #masthead.docked #accountBox .navlink .txt span {
        display: none;
    }
    
    #myAccount #accountBox .close {
        display: none;
    }

    #myAccount #accountBox .userNav {
        display: grid;
        /*grid-template-columns: repeat(5,minmax(16%,20%));*/
        grid-template-columns: repeat(6,minmax(14%,16%));
        gap: 0.85rem 1.85rem;
        width:100%;
        padding:0;
        height:auto;
    }

    #myAccount #masthead.docked #accountBox .userNav {
        /*display: grid;*/
        /*grid-template-columns: repeat(5,minmax(16%,20%));*/
        /*grid-template-columns: repeat(5,minmax(16%,20%));*/
    }

    #myAccount #accountBox .user-info {
        order: -2;
        display: flex;
        flex-direction: row;
        flex-wrap: initial;
        position: relative;
        height: auto;
        margin: 0 0 0.46rem;
        padding: 0.45rem 0;
        box-shadow: none;
    }
    #myAccount #accountBox .user-detail {
        position: absolute;
        inset: -0.8rem 0 0 auto;
        width: fit-content;
        width: 40%;
        max-width: 300px;
    }
    #myAccount #masthead.docked #accountBox .user-detail {      
        
    }
        #myAccount #accountBox .user-info .user-id {
            padding-top: 4px;
            min-height: 40px;
            width:50%;
        }

    #myAccount #accountBox .navlink {
        gap: 10px;
    }

    #myAccount #accountBox .navlink {
        /*border-color:transparent;*/
    }

        #myAccount #accountBox .navlink.active {
            color: #91b0d7;
            border-color: var(--d911-teal);
        }

        #myAccount #accountBox .navlink .navlink-heading {
            margin-bottom: 5px;
        }

        #myAccount #accountBox .navlink.active .navlink-heading {
            color: var(--d911-teal);
        }

        #myAccount #accountBox .navlink svg {
            flex-shrink: 0;
        }

        #myAccount #accountBox .navlink.dd_account-logout {
            margin: 0;
            border-radius: 4px;
            /*order: -1;*/
        }

    #siteNavigation #accountBox {
        padding: 0;
    }
    .user-info {
        height:110px;
        padding: 0.85rem 1.85rem 0.55rem 3.45rem;
        
    }
    .userNav {
        padding: 2.85rem 0 4.85rem;
        margin: 0 auto auto;
        gap: 1.05rem;
        width: 79%;
        height: calc(100vh - 113px);
        overflow: auto;
        overscroll-behavior: contain;
    }

}

@media only screen and (min-width: 1280px) {
    #masthead.docked #searchbox,
    #masthead #searchbox {
        width: 30%;
    }

    #footer {
        max-height: calc(100vh - 130px);
        height: auto;
    }
    #siteNavigation > ul > #call > a {
        width: max-content;
        border-radius: 0;
        border: none;
        padding: 0;
    }

    #filterSelector {
        padding: 0 10px;
    }

    /*Fade Out Siblings on hover*/

    #partFinder .partManufac,
    .diagramList,
    .refineList,
    .products-list {
        pointer-events: none;
    }

    #partFinder .partManufac > div,
    .diagramList li,
    .refineList li {
        transition: all ease-in-out 0.2s;
    }

    #partFinder .partManufac > div,
    .diagramList li,
    .refineList li,
    .products-list > div.product-wrapper {
        pointer-events: auto;
    }

    /*#partFinder .partManufac:hover > div,
    .diagramList:hover li,
    .refineList:hover li,
    .products-list:hover > div.product-wrapper {
        opacity: 0.2;
    }

    #partFinder .partManufac:hover > div:hover,
    .diagramList:hover li:hover,
    .refineList:hover li:hover,
    .products-list:hover > div.product-wrapper:hover {
        opacity: 1;
    }*/


        #partFinder .partManufac:hover > div:hover,
        .diagramList:hover li:hover,
        .refineList li.active,
        .refineList:hover li:hover {
            -webkit-box-shadow: 0 15px 10px -10px rgba(33, 43, 59, 0.3);
            -moz-box-shadow: 0 15px 10px -10px rgba(33, 43, 59, 0.3);
            box-shadow: 0 15px 10px -10px rgba(33, 43, 59, 0.3);
            transform: translate(0, -3px);
        }

    /*Masthead*/
    #masthead.docked #searchbox,
    #masthead #searchbox {
        right: 34.5%;
        width: 23.5%;
    }

    #masthead.docked #searchbox {
        height: 70px;
    }
    #myAccount #siteNavigation #loggedIn {
        background: var(--dd-bkg1);
        color: var(--dd-grey);
        cursor: initial;
    }
    /*myAccount*/
    #myAccount #bodyMain {
        padding: 0;        
    }

    #gallery #mainContent,
    #BasicPage #mainContent,
    #register #mainContent,
    #login #mainContent {
        padding: 50px 0;
    }

    .row > .col-lg {
        width: auto;
        min-width: 0;
        max-width: 100%;
        flex: 10000 1 0%;
    }

    .row > .col-lg-0 {
        height: auto;
        width: 0%;
    }

    .row > .col-lg-1 {
        height: auto;
        width: 8.3333%;
    }

    .row > .col-lg-2 {
        height: auto;
        width: 16.6667%;
    }

    .row > .col-lg-3 {
        height: auto;
        width: 25%;
    }

    .row > .col-lg-4 {
        height: auto;
        width: 33.3333%;
    }

    .row > .col-lg-5 {
        height: auto;
        width: 41.6667%;
    }

    .row > .col-lg-6 {
        height: auto;
        width: 50%;
    }

    .row > .col-lg-7 {
        height: auto;
        width: 58.3333%;
    }

    .row > .col-lg-8 {
        height: auto;
        width: 66.6667%;
    }

    .row > .col-lg-9 {
        height: auto;
        width: 75%;
    }

    .row > .col-lg-10 {
        height: auto;
        width: 83.3333%;
    }

    .row > .col-lg-11 {
        height: auto;
        width: 91.6667%;
    }

    .row > .col-lg-12 {
        height: auto;
        width: 100%;
    }

    .pt-lg-xs {
        padding-top: 5px;
    }

    .pt-lg-sm {
        padding-top: 10px;
    }

    .pt-lg-md {
        padding-top: 20px;
    }

    .pt-lg-lg {
        padding-top: 30px;
    }

    .pb-lg-xs {
        padding-bottom: 5px;
    }

    .pb-lg-sm {
        padding-bottom: 10px;
    }

    .pb-lg-md {
        padding-bottom: 20px;
    }

    .pb-lg-lg {
        padding-bottom: 30px;
    }

    .pl-lg-xs {
        padding-left: 5px;
    }

    .pl-lg-sm {
        padding-left: 10px;
    }

    .pl-lg-md {
        padding-left: 20px;
    }

    .pl-lg-lg {
        padding-left: 30px;
    }

    .pr-lg-xs {
        padding-right: 5px;
    }

    .pr-lg-sm {
        padding-right: 10px;
    }

    .pr-lg-md {
        padding-right: 20px;
    }

    .pr-lg-lg {
        padding-right: 30px;
    }

    /*
* Design911 8 column product grid display -  this is a  sub display of gridview for desktop
*/

    .products-list.gridview.gridCol8 {
        grid-template-columns: repeat(8, minmax(12%, 12.5%));
        grid-gap: 12px 6px;
    }

    .products-list.gridview.gridCol8 .product-wrapper {
        height: auto;
    }

    .products-list.gridview.gridCol8 .productDisplayOuterContainer {
        left: 50%;
        transform: translateX(-50%);
        transform-origin: center;
        position: relative;
    }

    .product-wrapper:nth-child(8n) .productDisplayOuterContainer {
        transform-origin: right;
    }

    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .framedImage {
        padding: 40px 8px 35px;
    }

    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .framedImage img {
        display: block;
        margin: 0 auto;
        width: 100%;
        max-width: 190px;
    }
    .products-list.gridview .framedImage {
        padding: 40px 10px 30px;
        height: 280px;
    }
    .products-list.gridview .framedImage a {
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
    }
    .products-list.gridview .framedImage img {
        width: auto;
        max-height: 148px;
        height: auto;
        display: block;
        margin: 0 auto;
    }

    /*.products-list.gridview.gridCol8 .product-wrapper:not(:hover) a {
        margin: 0;
        display: block;
        padding: 0 5px;
    }*/
    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .productOptions .priceBox {
        padding: 0;
        height: 90px;
        border: none;
    }
    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .productOptions .priceBox .price-display {
        line-height: 1rem;
    }
    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .productOptions .stock.retail {
        inset: auto 0 0;
        border: none;
    }
    .products-list.gridview.gridCol8.prod-main-txt .txtbox {
        display: block;
    }
    .products-list.gridview.gridCol8 .prod-main-txt .txtbox {
        height: 430px;
    }
    .products-list.gridview.gridCol8 .kitbox .txtbox {
        /* height: 509px;*/
    }

    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .productInfoBox .code {
        padding: 5px;
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: 115px;
        left: 0;
    }
    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .product-wrapper .framedImage .zoom {
        left: 0;
    }

    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .offertag {
        inset: -10px -10px auto auto;
        margin: auto;
    }
    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .framedImage {
        height: 180px;
    }
    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .product-extras-frame,
    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .alternateProduct,
    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .prod-main-txt,
    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .fitsbox,
    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .kitbox,
    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .productOptions .panel.options,
    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .productOptions .panel.badges-addbasket .product-secondary-badges,
    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .productOptions .panel.badges-addbasket,
    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .productOptions .surcharge,
    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .productOptions .previous-price,
    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .productInfoBox .kitbox,
    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .productOptions .variant-grid .h5,
    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .productOptions .variant-grid .panel.options {
        display: none;
    }

    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .productInfoBox .product-head {
        min-height: unset;
        font-size: 0.74rem;
        line-height: 0.98rem;
        height: 110px;
        padding: 5px 0 0;
        display: block;
        font-weight: 500;
        margin: 2px 0 0;
        border: none;
        text-transform: uppercase;
        overflow: hidden;
    }
    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .product-head .brand-logo img,
    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .product-head .brand-logo {
        height: 50px;
    }
    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .productInfoBox .product-head a {
        display: block;
        padding: 0 5px;
        height: 50px;
        text-overflow: ellipsis;
    }

    .products-list.gridview.gridCol8 .productOptions .panel.badges-addbasket .msg span {
        font-size: 0.68rem;
    }
    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .offertag {
        inset: -10px -10px auto auto;
        margin: auto;
        z-index: 10;
        width: 50px;
        height: 50px;
    }

    /*-----------------Hover state*/
    .products-list.gridview.gridCol8 .product-wrapper:hover {
        background: none;
        border: none;
        z-index: 100;
    }

    .products-list.gridview.gridCol8 .product-wrapper:hover > a {
        display: block;
        position: relative;
        height: 340px;
        width: 100%;
        background: #0003;
    }

    .products-list.gridview.gridCol8 .product-wrapper:hover .framedImage {
        padding: 30px 0 20px;
    }

    .products-list.gridview.gridCol8 .product-wrapper:hover .productDisplayOuterContainer {
        position: absolute;
        top: -50px;
        width: 260px; /*Any more than this will block user touching left or right products*/
        background: #fff;
        border-radius: 2px;
        box-shadow: 0px -1px 12px rgba(0, 0, 0, 0.2);
        transition: all cubic-bezier(0.62, 1.11, 0.66, 0.71) 0.12s;
        transform: translateX(-50%) scale(1);
    }

    .products-list.gridview.gridCol8 .product-wrapper:nth-child(8n):hover .productDisplayOuterContainer {
        transform: translateX(-80%) scale(1);
    }

    .products-list.gridview.gridCol8 .product-wrapper:hover .panel.badges-addbasket,
    .products-list.gridview.gridCol8 .product-wrapper:hover .productOptions .surcharge,
    .products-list.gridview.gridCol8 .product-wrapper:hover .productOptions .previous-price {
        display: block;
    }

    .products-list.gridview.gridCol8 .product-wrapper:not(:hover) .priceBox .priceregular,
    .products-list.gridview.gridCol8 .grid-8-price-from {
        display: block;
        font-size: 0.88rem;
        color: var(--site-grey);
    }

    .products-list.gridview.gridCol8 .gridview .priceBox .priceregular .price-display,
    .products-list.gridview.gridCol8 .grid-8-price-from .price-display {
        font-size: 0.96rem;
    }

    .products-list.listview .grid-8-price-from,
    .products-list.gridview .grid-8-price-from {
        display: none;
    }
    .products-list.gridview.gridCol8 .product-wrapper:hover .grid-8-price-from {
        display: none;
    }


    #myAccount #siteNavigation #accountBox{
        height:160px;
    }
        
    


}

@media only screen and (min-width: 1680px) {
    /*masthead*/
    /*#filterSelector-choices .filterSteps {
    width: 60.4%;
  }*/

    /*Footer*/
    #footCol1,
    #filterSelector-choices .label {
        width: 20%;
    }

    #footCol2 {
        width: 80%;
    }

    #mainContent {
        width: 80%;
    }

    #pageContent #navBar {
        width: 20%;
    }

    #filterSelector-chosen .myVehicle {
        width: 100%;
        padding: 0;
    }

    #filterSelector-chosen .changeCar {
        /*width: 20%;*/
    }

    #filterSelector-choices {
        padding: 0;
    }

    #filterSelector-choices .filterSteps > span:nth-of-type(4) {
        width: 20%;
    }

    #siteNavigation #accountBox,
    #topFrame .basketFrame .basket {
        width: 40%;
        right: -45%;
    }

    #checkout #pageContent #side,
    #basket #pageContent #side {
        width: 20%;
    }
}

/* ----------------------------------------------------------------------- MAX Widths Largest to smallest */
@media only screen and (max-width: 1679px) {
    /*Checkout*/
    #checkout #mainContent {
        width: 100%;
        max-width: 980px;
    }

    .panel.badges-addbasket input[type='submit'].button {
        padding: 8px 15px;
    }

    /*Basket*/
    #basketItems li.offerBox .discount-code,
    #basketItems li.offerBox .discount-code-applied {
        width: 50%;
    }

    .basket .discount-code-applied {
        width: 100%;
    }

    .offersFrame .offersAd {
        width: 50%;
    }

    


}
@media only screen and (max-width: 1439px) {
    .videoFrame .vd-modal-content {        
        width: 1010px;        
    }
    .videoFrame .vd-modal iframe {
        width: 960px;
    }

} /*--endQuery*/

@media only screen and (max-width: 1279px) {
    /*UI*/
    .logoframe{
        left:20px;
    }
    
    #myAccount #pageContent {        
        padding-top: 120px;
    }
    #pageContent #navBar {
        width: 20%;
    }

    #mainContent {
        width: 80%;
    }

    /*Masthead*/
    #menu_icon {
        display: block;
    }

    #Logo {
        width: 220px;
    }

    #bodyText {
        padding: 30px 20px;
    }

    #masthead #topFrame {
        padding-right: 20px;
    }

    #siteNavigation {
        padding: 0;
    }

    #siteNavigation #accountBox {
        right: -56%;
        width: 55%;
        height: 100vh;
    }

    #call .no {
        display: none;
    }

    #call a .phone {
        display: block;
    }

    #call a.whatsapp {
        display: none;
    }

    #topFrame .basketFrame {
        z-index: 5000;
        position: absolute;
    }

    #topFrame .basket {
        right: -61%;
        width: 60%;
    }

    #topFrame .languages .languages_box {
        right: 20px;
    }

    #filterSelector-choices .label {
        width: 25%;
    }

    #filterSelector-choices .filterSteps {
        width: 75%;
        padding-left: 7px;
    }

    #siteNavigation ul li:not(.intro) {
        margin: 0 0 0 5px;
        width: 40px;
        height: 40px;
    }

    #topFrame .languages,
    #topFrame .currencies,
    #topFrame .basket_icon {
        margin-left: 15px;
    }

    #filterSelector-chosen .changeCar {
        width: auto;
    }

    #filterSelector-chosen p {
        width: 24.4%;
    }

    #masthead.docked #searchbox, 
    #masthead #searchbox {
        right: 36%;
        width: 25%;
    }

    #searchbox .searchButton {
        padding: 8px;
    }

    /*Footer*/
    #footCol1 {
        width: 20%;
        padding: 3.4rem 20px 20px;
    }

    #footCol2 {
        width: 80%;
        padding: 30px 20px;
    }

    #footer #lowerFooter {
        padding: 10px 20px;
        height: auto;
    }

    /*Type*/
    h1,
    .h1 {
        font-size: 1.68rem;
        line-height: 1.98rem;
        margin: 0 0 20px;
        letter-spacing: -0.026rem;
        font-weight: 400;
    }

    h2,
    .h2 {
        font-size: 24px;
        line-height: 32px;
    }

    .sectionTitle,
    h3,
    .h3 {
        font-size: 20px;
        line-height: 26px;
    }

    h4,
    .h4 {
        /*        font-size: 16px;
        line-height: 18px;*/
        font-size: 1.08rem;
        line-height: 1.18rem;
    }

    h5,
    .h5 {
        font-size: 0.786rem;
        line-height: 0.986rem;
    }

    h6,
    .h6 {
        font-size: 14px;
        line-height: 22px;
    }

    p {
        font-size: 13px;
        line-height: 22px;
    }

    /*My Account*/
    #myAccount #accountBox .userNav {        
        gap: 0.85rem 1.4rem;        
    }

    #myAccount #userInfo {
        position: relative;
        top: 0;
        margin: 0 0 30px;
        padding: 0;
    }

    #myAccount #userInfo h2 {
        margin: 0 0 30px;
        padding: 5px 0 0 50px;
        position: relative;
        min-height:initial;
        width:100%;
    }

    #myAccount #userInfo h2 svg {
        position: absolute;
        top: 0;
        left: 0;
    }

    /*Hompepage*/
    .Banners {
        margin: 17px 0 0 0;
    }

    #HomeFeatured h2 {
        margin-top: 0;
    }

    .homePageBoxes {
        padding: 0 15px;
    }

    .introPanel {
        margin: 30px 0 50px;
    }
    
    /*Sidebar*/
    #gallery #pageContent #navBar,
    #pageContent #navBar {
        padding: 20px 0 50px 20px;
    }

    .home .gridview .product-wrapper .productOptions .panel.badges-addbasket {
        position: relative;
    }

    .home .gridview .productOptions .panel.badges-addbasket {
        justify-content: flex-end;
        padding: 10px 0;
    }

    .home .panel.badges-addbasket input[type='submit'].button {
        display: block;
        width: 100%;
        margin: 0;
    }

    #recentProducts .panel.badges-addbasket .msg {
        padding: 0;
        flex-wrap: wrap;
        max-height: 100%;
    }

    #recentProducts .panel.badges-addbasket .msg > span,
    #recentProducts .panel.badges-addbasket .msg > a {
        width: 100%;
        text-align: center;
    }

    #recentProducts .panel.badges-addbasket .msg > span {
        padding: 20px 0 0;
    }

    /*ProductList*/
    #categories {
    }

    #diagram #mainContent {
        padding: 30px 20px;
    }

    /*Product Page*/

    /*Basket*/
    #basket #mainContent {
        width: 80%;
    }

    #basket #pageContent #side {
        width: 20%;
    }

    #basket #pageContent #side {
        padding: 0 20px 0 0;
    }

    #basket #bodyMain {
        padding: 30px 20px;
    }

    #basket #lowerContent {
        margin: 30px 20px 50px;
    }

    .basket-product .quantity .update-quantity-link {
        display: block;
        margin-left: 0;
        text-align: center;
        width: 100%;
    }

    #basketItems li.offerBox .discount-code,
    #basketItems li.offerBox .discount-applied {
        width: 50%;
    }

    .offersFrame .offersAd {
        width: 50%;
    }

    #lowerContent .basket-offers .product-wrapper {
        width: 48%;
        max-width: 48%;
    }

    /*Checkout*/
    #checkout ol#progress {
        position: relative;
        top: auto;
        background: transparent;
    }

    /*Diagrams*/
    ul.refineList #diagram #mainContent {
        padding: 30px 20px;
    }

    #diagramWrapper {
        margin: 0;
        padding: 0;
    }

    .imgDiagMapHolder .imgHolder {
        height: auto;
    }

    .imgDiagMapHolder .imgHolder > div {
        margin: 0 auto;
    }

    /* Recent Products on Homepage */
    #recentProducts .products-list.gridview.offers.super-compact .product-wrapper:nth-of-type(1n + 13) {
        display: none;
    }

    #recentProducts .products-list.gridview.offers.super-compact .product-wrapper {
        width: 24%;
    }
    /*video carousel*/
    .videoFrame .vd-modal-content {
        width: 930px;
    }
    .videoFrame .vd-modal iframe {
        width:880px;
    }

}

@media only screen and (max-width: 1179px) {
    #diagram .categoriesSmall .refineList {
        grid-template-columns: repeat(8, minmax(10.5%, 12.5%));
    }

    .productOptions .panel.options.dropdowns .dropdown-group {
        width: 100%;
    }
    .productOptions .panel.options.dropdowns .dropdown-group select {
        width: 100%;
    }
    /*galleries*/
    .refineList.gallery {
        grid-template-columns: repeat(5, minmax(19%, 20%));
    }
    /*account*/
    
    .account-navigation {
        grid-template-columns: repeat(4,minmax(24%,25%));
        margin: 0 0 100px;
    }
    /*ddblocks*/
    .headerbox,
    .ddBlockFrame {
        margin: 0 auto;
        width: 90%;
    }
    .headerbox .featimg,
    .headerbox .txtbox, 
    .wideimage .txtbox,
    .videobox .txtbox, 
    .wideimage .imgbox {
        width:100%;
    }
    .ddCol.twoCol, .ddCol.threeCol {
        grid-gap: 2rem;
        width: 100%;
    }
    
}
/*--endQuery*/

@media only screen and (max-width: 1023px) {
    #bodyMain {
        padding: 20px;
    }
    /*Masthead*/
    #Logo,
    #masthead.docked #Logo {
        width: 220px;
    }

    #topFrame .languages,
    #topFrame .basket_icon,
    #topFrame .currencies {
        margin-left: 10px;
    }

    #siteNavigation ul li {
        margin: 0 0 0 6px;
    }

    #siteNavigation ul #menu_icon {
        display: inline-block;
        margin: 0 0 0 -7px;
    }

    #masthead.docked #searchbox,
    #masthead #searchbox {
        position: fixed;
        width: 100%;
        top: -100%;
        bottom: auto;
        padding: 100px 20px;
        box-shadow: 0px -1px 6px rgba(0, 0, 0, 0.25);
        margin: 0;
        border-top: 4px solid #7d8798;
        right: 0;
        left: 0;
    }

    #masthead #searchbox.active {
        top: 0;
    }

    

    #filterSelector-choices .filterSteps > span {
        width: 38%;
    }

    #filterSelector-choices .filterSteps > span:nth-of-type(4) {
        width: 24%;
    }

    #filterSelector-choices .label {
        width: 25%;
        font-size: 14px;
        font-weight: 500;
    }

    #filterSelector-choices .filterSteps {
        width: 75%;
    }

    #filterSelector-chosen p {
        width: 26.4%;
        line-height: 18px;
    }

    #filterSelector-chosen .myVehicle {
        font-size: 14px;
        line-height: 18px;
    }

    #filterSelector-chosen input {
        padding: 8px 15px;
    }

    /*Sidebar*/

    #categoryOpen {
        display: block;
        padding: 15px 20px;
        text-transform: uppercase;
        font-weight: 500;
        background: #fcfcfc;
        border-bottom: 1px solid var(--site-border);
        font-family: 'Roboto', sans-serif;
    }
    #gallery #pageContent #navBar, #pageContent #navBar {
        
        width: 100%;
        padding: 0;
    }

    #categoryOpen span {
        font-size: 18px;
        float: right;
        font-weight: 600;
    }

    #navBar .navFrame {
        display: block;
        padding: 50px 50px 30px;
        position: fixed;
        top: 0;
        bottom: 0;
        left: -100%;
        width: 100%;
        z-index: 1000;
        overflow-y: auto;
        background: #fff;
        transition: all ease-in-out 0.4s;
        border-top: 4px solid #eb6a2e;
    }

    #navBar .close {
        display: flex;
        inset: 0 auto auto 0;
        transform: translateX(-3.0rem);
        
    }

    #myAccount #navBar.active .navFrame,
    #navBar.active .navFrame {
        left: 0;
    }

    #navBar .diagrams {
        flex-direction: row;
    }

    .diagrams span {
        padding: 5px 0 5px 15px;
    }

    #navBar .navTitle a {
        font-size: 26px;
        line-height: 32px;
        font-weight: 300;
    }

    #navBar ul#partsMenu {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding-bottom: 20px;
        border-bottom: 1px solid var(--site-border);
    }

    #navBar .shopInfo {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding-bottom: 20px;
        border-top: none;
    }

    #navBar .headedPanel {
        width: 48%;
        margin: 0 0 20px;
        padding: 20px;
        border: 1px solid var(--site-border);
    }

    #partsMenu li {
        width: 50%;
    }

    #partsMenu li a {
        display: block;
        padding: 5px 0;
        text-transform: uppercase;
        font-size: 14px;
        font-weight: 400;
        color: currentColor;
        line-height: 25px;
    }

    .Banners {
        margin: 12px 0 0 0;
    }
    .banner-carousel{
        margin:0 0 8px;
    }
    #siteNavigation #accountBox {
        right: -71%;
        width: 70%;
        padding:0;
    }

    /*Masthead*/
    #topFrame .basket {
        right: -102%;
        width: 100%;
    }

    .bottom-banner {
        padding: 1px;
    }

    /*UI*/
    #mainContent {
        width: 100%;
        border-left: none;
    }

    #bodyText {
        width: 100%;
    }

    .products-list.gridview {
        grid-template-columns: repeat(3, minmax(32%, 33%));
    }
    /*Product Page*/
    .breadcrumbs {
        height: auto;
        padding: 0 0 4px;
        font-size: 0.66rem;
        line-height: 0.86rem;
        letter-spacing: -0.013rem;
    }

    #productDetails {
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 15px;
        margin: 0 0 30px;
    }

    .txt-toggle,
    .alternateProductToggle {
    }

    #productDetails .product-wrapper .priceBox .priceregular.grid-8-price-from {
        display: none;
    }
    /*.gridview*/
    .gridview .offertag {
        width: 60px;
        height: 60px;
    }

    .gridview .framedImage {
        height: 220px;
    }

    .gridview .productInfoBox .prod-main-txt .txtbox {
        height: 370px;
    }

    .gridview .fitsbox .fits-vehicles {
        height: 407px;
    }

    .gridview .kitbox .txtbox {
        height: 447px;
    }

    /*.gridview .productInfoBox .code {
        z-index: -1;
    }*/

    .gridview .product-extras-frame {
        padding: 0;
    }
    /*Product List*/
    .refineList li a {
        padding: 10px;
    }

    /*Footer*/
    .footerlogo img {
        width: 80%;
    }

    #footCol1 {
        width: 35%;
    }

    #footCol2 {
        width: 65%;
        grid-template-columns: repeat(2, minmax(48%, 50%));
    }

    .block-col .h3 {
        margin: 0 0 30px;
    }

    #footCol2 .socialbox {
        grid-column: span 2;
    }

    #footCol2 > .newsletter {
        width: 100%;
    }

    #footer .social li {
        width: 48%;
    }

    #contactFrame {
        padding: 20px;
    }

    /*Homepage*/
    .banner-carousel, .banner-carousel .bx-wrapper picture img {
	
	aspect-ratio: 5/1.98;
}
    .Banners > div:nth-child(n) {
        width: 100%;
        margin: 0 0 10px;
    }

    .homePageBoxes {
        padding: 10px 15px 0;
    }

    .introPanel {
        margin: 30px 0 50px;
        padding: 0;
    }

    /*My Account*/
    .borderbox {
        padding: 30px;
    }

    #myOrders {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        min-width: 100%;
        margin: 10px 0 0;
    }
    .address-flex-container {
        flex-direction: column;
        width: 100%;
        gap: 1.8rem;
    }
        .address-flex-container .address-box {
            width: 100%;
            max-width: initial;
        }
    .address-box .listing{
        min-height:initial;
    }
    .address-box.button{
        padding:1.5rem;
    }

    /*Basket*/
    #basket #mainContent {
        width: 100%;
        border: none;
    }

    #basket #pageContent #side {
        width: 100%;
        padding: 0 20px;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        min-width: 100%;
        margin: 0;
    }

    #basket #pageContent #side .headedPanel {
        border: 1px solid var(--site-border);
        padding: 20px;
        margin: 0;
        display: flex;
        /*Must be  for IE11*/
        flex-flow: column;
        /*Must be  for IE11*/
        width: 32%;
    }

    #basketItems li.offer.available,
    #basketItems li.offer.possible {
        padding: 10px;
        font-size: 13px;
    }

    .total-sidebar {
        width: 35%;
    }

    #basketItems li.total-main {
        width: 65%;
    }

    .total-sidebar .button {
        min-width: initial;
        height: auto;
        white-space: normal;
    }

    .offersFrame .offersAd {
        width: 48%;
    }

    .offersFrame .offersAd picture {
        width: 100%;
    }

    #basketItems li.offerBox .discount-code,
    #basketItems li.offerBox .discount-code-applied {
        width: 52%;
    }

    /*Checkout*/
    #orderStatus {
        padding-left: 0;
    }

    #orderStatus .brand {
        width: 100%;
        position: relative;
    }

    #orderStatus .pageDisplay {
        padding: 50px 20px;
        height: auto;
    }

    #accountCreation .accountChoice .buttons,
    #checkout #accountCreation #passwordForm {
        width: 50%;
    }

    #checkout h6.flash,
    #checkout .borderbox {
        padding: 20px;
    }

    #checkout .delivery-options .buttonBox {
        width: 100%;
        margin: 0 0 10px;
    }

    #accountCreation .accountChoice {
        width: 100%;
        padding: 10px 0;
        border: none;
    }

    #deliveryOption_other_container .block1,
    #deliveryOption_other_container .block2,
    #checkout .signUp .block1,
    #checkout .signUp .block2 {
        width: 100%;
        padding: 10px 0;
        border: none;
    }

    #checkout .signUp .block1,
    #checkout .signUp .block2 {
        padding: 0;
    }

    #checkout .signUp .block1 .buttonBox {
        width: 100%;
        margin-top: 15px;
    }

    #checkout .signUp .block2 p {
        margin-top: 0;
    }

    #checkout .sectionFooter {
        margin: 10px 0 0;
    }

    #otherInfo .block1 textarea,
    #otherInfo .block2 select,
    #checkout .sectionFooter input {
        width: 100%;
    }

    #otherInfo .block1,
    #otherInfo .block2,
    #checkout #carInfo .block1,
    #checkout #carInfo .block2,
    #checkout #carInfo .block3 {
        width: 100%;
        padding: 10px 0;
        border: none;
    }

    .accordion-frame.borderbox .accordion,
    .accordion-frame.borderbox .accordion-title,
    #checkout .flexgrid.address-summary {
        padding: 10px;
    }

    /*Diagrams*/
    #diagram #mainContent {
        display: block;
        padding: 50px 20px;
    }

    #diagramWrapper > .imgDiagMapHolder {
        width: 100%;
        height: auto;
        margin: 0 auto;
        max-height: 100%;
        position: relative;
        inset: auto;
    }
    .imgDiagMapHolder .imgHolder {
        border-radius: 4px 4px 0 0;
        margin: 0 0 4px;
    }
    #diagramWrapper > #partsList {
        width: 100%;
        margin-top: 0;
    }

    /* Recent Products on Homepage */
    #recentProducts .products-list.gridview.offers.super-compact .product-wrapper .productInfoBox .product-head {
        font-size: 14px;
    }

    /* Mandatory and Suggested Products */
    .crosssell .needProduct .product-wrapper .productDescriptionContainerTop,
    .crosssell .needProduct .product-wrapper .productDescriptionContainerBottom {
        width: 100%;
    }

    .crosssell .needProduct .product-wrapper .productDescriptionContainerTop {
        border-right: none;
        border-bottom: 1px solid var(--site-border);
    }

    .crosssell .needProduct .product-wrapper .productImageContainer {
        border-bottom: none;
    }

    .crosssell .needProduct .product-wrapper .productOptions > div {
        width: 100%;
    }

    .crosssell .needProduct .product-wrapper .productOptions,
    .crosssell .needProduct .product-wrapper .productOptions.part-options {
        padding: 10px 0 10px 10px;
        border: none;
    }

    .crosssell .needProduct .product-wrapper .productOptions.no-part .panel.badges-addbasket {
        padding: 0 0 10px;
    }

    .crosssell .needProduct .product-wrapper .productInfoBox h4 + .row {
        padding-right: 130px;
    }

    .crosssell .needProduct .product-wrapper .productInfoBox .brand-img {
        left: auto;
        right: 0;
        width: 130px;
        border-left: 1px solid var(--site-border);
    }

    #myOrders li > div > div {
        padding-bottom: 20px;
    }

    
    /*video carousel*/
    .videoFrame .vd-modal-content {
        width: 93%;
        margin: 20% auto;
    }

    .videoFrame .vd-modal iframe {
        width: 704px;
    }

    /*jobs*/
    #BasicPage #bodyText {
        padding: 30px;
        background: #fff;
        border:none;
        border-radius:0;
        min-height:initial;
    }
    .job-listings {        
        grid-template-columns: repeat(1, 1fr);
        
    }

    /*competitor*/
    #container .competitor-enquiry .modal {
        max-width: 90vw;
        max-height: 90vh;
        padding: 4.4rem 0.85rem;
        inset: 20px auto;
        margin: auto;
        overflow: auto;
    }

    /*account*/
    #myAccount #pageContent {
        padding-top:6rem;
    }
    .account-navigation {
        grid-template-columns: repeat(3,minmax(31%,33%));
        margin: 0 0 100px;
    }
    .myacc-block {
        margin: 0 auto;
        padding: 6.4rem 0.85rem 0.95rem;
    }

    .inv_list-item .inv-download {
        width: 15%;
    }
    .inv_list-item .inv-date {
        width: 25%;
    }
    .blk-header {
        padding: 1.5rem 0.85rem;
    }
    .shopping-list-results {
        width: 66%;
    }
    table.current-basket-items td, 
    table.current-basket-items th {
        padding: 0.5rem 0;
        font-size: 0.768rem;
        line-height: 0.868rem;
    }
    /*myaccount*/
    .user-info {
        position: initial;
        padding: 1.0rem 3.85rem 0.85rem;
    }
    #myAccount #accountBox .userNav, .userNav {
        padding: 2.85rem 3.85rem;
        gap: 1.13rem;
    }
    /*ddblocks*/
    #pageContent #navBar + div {
        width: 100%;
        padding:1.85rem 0;
    }
    
}

@media only screen and (max-width: 767px) {
    /*Masthead*/
    .logoframe {
        inset: auto;
        margin: 0 auto;
        position: relative;
        width: fit-content;
        padding:10px 0;
    }
    #masthead #Logo,
    #masthead.docked #Logo {
        width: 200px;
        position: relative;
        inset:auto;
        height: 50px;
        margin: 0 auto;
    }
    #masthead.docked #LogoIcon {
        width: 100px;
        height: 48px;
    }
    #masthead #topFrame {
        width: 100%;
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        padding: 0 20px;
        justify-content: center;
        margin: 0;
        height: 50px;
        
    }
    #siteNavigation ul {
        margin: 0 10px 0 0;
    }
    #topFrame .basket {
        right: -105%;
        width: 100%;
    }

    #masthead.docked #filterSelector {
        min-height: 58px;
    }

    #filterSelector-choices .label {
        font-size: 12px;
        line-height: 16px;
        width: 20%;
    }

    #filterSelector-choices .filterSteps {
        width: 80%;
    }

    #filterSelector-choices .filterSteps > span:nth-of-type(n) {
        width: 33%;
    }

    #filterSelector-choices .filterSteps select {
        padding: 8px 15px 8px 8px;
        font-size: 12px;
    }

    #masthead.docked #filterSelector-chosen input {
        margin: 5px 0;
        height: 40px;
    }

    #filterSelector-chosen p {
        display: none;
    }

    #filterSelector-chosen .myVehicle {
        padding: 0 10px 0 0;
        line-height: 20px;
        width: auto;
    }

    #masthead.docked #filter-selector-change-vehicle {
        margin: 8px 0;
    }

    #siteNavigation #accountBox {
        right: -101%;
        width: 100%;
        max-width:initial;
        padding:0;
    }

    #pageContent {
        padding: 179px 0 0;
    }

    /*Product List*/
    #productListContainer .products-list.gridview {
        grid-template-columns: repeat(2, minmax(48%, 50%));
        grid-gap: 30px 15px;
    }

    .productOptions .panel.badges-addbasket,
    .productOptions .priceBox {
        font-size: 13px;
        width: 50%;
    }

    .refineList,
    #categories {
        grid-template-columns: repeat(4, minmax(23%, 25%));
    }

    .panel.badges-addbasket .msg {
        text-align: left;
        width: 100%;
        margin: 10px 0 0;
        padding-bottom: 20px;
    }

    #tyreSearch .panel.badges-addbasket .msg {
        text-align: right;
    }

    .productOptions .buttonframe {
        justify-content: flex-start;
        width: 72%;
        margin: 0;
    }

    .gridview .productOptions .buttonframe {
        width: 72%;
    }

    .panel.badges-addbasket input.remove-from-wishlist,
    .panel.badges-addbasket input.add-to-wishlist {
        margin: 0 0 0 10px;
    }

    .productOptions .priceBox .stock {
        text-align: right;
    }

    .productOptions .priceBox .panel.options .stock {
        text-align: left;
    }

    #productDetails .productInfoBox .product-head {
        height: auto;
        padding: 0;
    }

    #productDetails .productInfoBox .prod-main-txt,
    #productDetails .productInfoBox.kit .prod-main-txt,
    #productDetails .productInfoBox.allvehicles .prod-main-txt {
        height: auto;
    }

    #product .h1,
    #productDetails .product-wrapper {
        margin: 0 auto;
        min-width: 300px;
        width: 100%;
    }

    #productDetails .h1 {
        font-size: 1.42rem;
        line-height: 1.62rem;
        font-weight: 400;
        margin-bottom: 30px;
    }

    #productDetails .fitsbox {
        height: auto;
    }

    /*#productDetails .alternateProductResults,
            #productDetails .fitsbox .fits-vehicles,
            #productDetails .productInfoBox .kitbox.active .txtbox,
            #productDetails .productInfoBox .prod-main-txt .txtbox {
                position: relative;
                inset: auto;
                margin: 0;
                max-height: 300px;
                height: auto;
                background: #fff;
            }*/
    #productDetails.gridview .fitsbox .fits-vehicles {
        height: 331px;
    }
    #productDetails.gridview .kitbox .txtbox {
        height: 330px;
    }

    .kitbox.active .toggle span::after,
    .fitsbox.active .view-fits-vehicles span::after {
        top: 12px;
        right: 12px;
    }
    #productDetails .alternateProductResults {
        box-shadow: none;
        height: auto;
    }

    #productDetails .alternateProduct {
        height: auto;
        position:relative;
    }

    #productDetails .alternateProductResults,
    #productDetails .fitsbox .fits-vehicles,
    #productDetails .productInfoBox .kitbox.active .txtbox {
        border-top: 1px solid var(--site-border);
    }
    .gridview .framedImage {
        height: 20rem;
    }
    #productDetails .productInfoBox .prod-main-txt .txtbox {
        margin: 0;
        border-bottom: 1px solid var(--site-border);
        height: 393px;
        z-index:20;
    }

    #productDetails .product-wrapper .productOptions .priceBox {
        min-height: 90px;
        height: auto;
    }

    #productDetails .product-wrapper .diagramListContainer {
        padding: 20px 15px 15px;
    }
    /*video carousel*/
    .videoFrame .vd-modal-content {
        width: 92.5%;
    }
    .videoFrame .vd-modal iframe {
        width: 504px;
    }

    /*homepage slider*/
    .banner-carousel,
    .banner-carousel .bx-wrapper picture img {
        aspect-ratio: 5/1.96;
    }

    /*gridview*/
    /*.gridview .product-extras-frame {
            display: none;
        }*/
    /*related products*/
    #relatedproducts .products-list.gridview {
        grid-template-columns: repeat(3, minmax(32%, 33%));
    }
    /*recent products*/
    #recentProducts .products-list.gridview.offers.super-compact {
        grid-template-columns: repeat(4, minmax(23%, 25%));
        grid-gap: 10px 6px;
    }

    #recentProducts .products-list.gridview.offers.super-compact .productInfoBox .product-head a {
        height: 50px;
    }
    /*fancybox gallery*/
    .fancybox-content img {
        display: block;
        max-width: calc(100% - 12px);
        margin: 0 auto 0 6px;
    }
    .fancybox-caption {
        display: block;
        border-top: 1px solid #6f7c9d;
        max-height: 25%;
        padding: 20px;
        font-size: 0.76rem;
        overflow: auto;
    }
    /*---*/

    #AboutSection .sectionContent {
        columns: initial;
        column-gap: initial;
    }

    /*Footer*/
    #footCol1 {
        width: 100%;
        padding: 30px 20px 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
        gap: 20px;
    }

    #footCol1 > div {
        max-width: 31%;
        min-width: 30%;
    }

    #footCol1 > .creditcards {
        width: 100%;
        margin: 0 0 20px 0;
        max-width: 100%;
        border-bottom: 1px solid var(--site-border);
        padding: 15px;
        height: 60px;
    }

    .footerlogo img {
        max-width: 200px;
    }

    .block-col .h5 {
        margin: 0 0 10px;
    }

    .block-col .h3 + .h5 {
        margin: -20px 0 10px;
    }

    #footCol2 {
        width: 100%;
        padding: 0 20px 30px;
    }

    #lowerFooter .copyframe {
        max-width: calc(100% - 60px);
        gap: 4px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    

    /*Homepage*/

    .introPanel {
        margin: 30px 0 50px;
    }

    .homePageBoxes .introPanel {
        margin: 0 0 40px;
        columns: initial;
        gap: initial;
    }

    #HomeFeatured {
        padding: 0 0 20px;
    }

    #whatsHot {
        order: 1;
        width: 49.2%;
        margin-bottom: 10px;
    }

    #discountTyres {
        order: 2;
        width: 49.2%;
        margin-bottom: 10px;
    }

    #manufacturersHighlight {
        order: 3;
        width: 100%;
    }

    .home .gridview .productOptions .panel.badges-addbasket {
        justify-content: flex-start;
        padding: 10px 0;
    }

    .home .panel.badges-addbasket input[type='submit'].button {
        display: block;
        width: auto;
        margin: 0 0 0 5px;
        padding: 8px 14px;
    }

    /*Product List*/
    .products-list.gridview {
        grid-template-columns: repeat(2, minmax(48%, 50%));
        grid-gap: 20px 15px;
        margin: 0 0 30px;
    }

    .productOptions .panel.badges-addbasket,
    .productOptions .priceBox {
        width: 100%;
        padding: 0;
        border: none;
        font-size: 0.86rem;
    }

    .gridview .productOptions .panel.badges-addbasket .product-secondary-badges {
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 10px;
        width: 100%;
        margin: 0 0 20px;
    }
    #productDetails.gridview .productOptions .panel.badges-addbasket .product-secondary-badges {
        grid-template-columns: repeat(8, 1fr);
    }

    .productDescriptionContainerTop .productImageContainer {
        width: 100%;
    }

    .productDescriptionContainerTop .productInfoBox {
        width: 100%;
    }

    .productInfoBox .prod-main-txt {
        border-left: none;
    }

    .productInfoBox .txtbox {
        padding: 20px;
    }

    ul.listGoogleBoostInternalLinks li {
        width: 48%;
    }

    .product-wrapper .productOptions .priceBox {
        width: 100%;
    }

    #ProductList .listview {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        min-width: 100%;
        margin: 0 -1% 0;
    }

    #ProductList .listview .product-wrapper,
    #recentProducts .gridview .product-wrapper,
    #ProductList .gridview .product-wrapper {
        width: 48%;
        align-self: unset;
    }

    .products-list.listview .product-wrapper {
    }

    .products-list.listview .product-wrapper .kitbox {
        border-left: none;
    }

    .products-list.listview .productDescriptionContainerTop:has(.kitbox) .prod-main-txt {
        height: 180px;
    }

    .products-list.listview .product-wrapper .videoPagelink {
    }

    .products-list.listview .product-wrapper .pdfFrame .resourcePagelink,
    .products-list.listview .product-wrapper .videoFrame .video-thumbnail {
        width: 20%;
    }

    .products-list.listview .product-wrapper .videoFrame .video-thumbnail {
        left: 60%;
    }

    .products-list.listview .product-wrapper .pdfFrame .resourcePagelink span,
    .products-list.listview .product-wrapper .videoFrame .video-thumbnail span {
        display: none;
    }

    .products-list.listview .product-wrapper .pdfFrame .resourcePagelink svg,
    .products-list.listview .product-wrapper .videoFrame .video-thumbnail svg {
        margin: 0;
    }

    .products-list.listview .productOptions .panel.badges-addbasket .product-secondary-badges {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
    }

    .products-list.listview .productInfoBox .kitbox::after {
        inset: 0 20% auto 60%;
        width: auto;
    }

    .products-list.listview .productInfoBox .kitbox .toggle {
        width: 60%;
    }

    .videoFrame .vd-modal,
    .pdfFrame .vd-modal-pdf {
        padding-top: 120px;
    }

    .videoFrame .vd-modal-content {
        margin: 120px auto;
    }

    /*refinelist*/
    #diagram .diagramList,
    #diagram .categoriesSmall .refineList {
        grid-template-columns: repeat(4, minmax(23%, 25%));
    }
    .diagramList li .diagram-title {
        padding: 15px 10px 10px;
        font-size: 0.786rem;
        line-height: 0.796rem;
    }
    .refineList.gallery {
        grid-template-columns: repeat(4, minmax(23%, 25%));
    }
    /*My Account*/

    #myAccount #masthead,
    #myAccount #masthead.docked {
        height: 130px;
    }
    .borderbox {
        padding: 20px;
    }

    #myAccount #userInfo h2 {
        font-size: 1.36rem;
        line-height: 1.66rem;
        flex-direction: column;
        gap: 0;
        padding: 0 0 0 50px;
    }
        #myAccount #userInfo h2 svg{
            top:4px;
        }
    .account-navigation .navlink .txt .navlink-heading {
        font-weight: 600;
        font-size: 0.92rem;
    }
        #invoice-history > div > .row > div {
            width: 50%;
        }
    #myAccount #pageContent {
        padding-top: 8rem;
    }
    .twoCol {
        gap:0;
        grid-template-columns:repeat(1,1fr);
        margin:0;
        
    }
    .block-col.tp {
        margin: 0 auto;
    }
    .inv_list-item{
        flex-wrap:wrap;
    }
        .inv_list-item [class^="inv-"]{
            width:50%;            
        }
        .inv_list-item .inv-download{
            min-width:40%;
        }

        .inv_list-item .inv-date,
        .inv_list-item .inv-total {
            width:100%;
        }


    #myDetails .address-name {
        flex-direction: column;
    }
    .button.user-action {
        inset: 20px 50px auto auto;        
    }
    .shopping-list{
        flex-direction:column;
    }
    .shopping-list-nav {
        width: 100%;
        margin: 0 0 40px;
    }
    .shopping-list-results {
        width: 100%;
    }


    /*Register*/
    #register .borderbox:not(.reset) .error {
        margin: 0 0 8px;
    }

    /*Basket*/
    #basketItems li.basket-totals {
        flex-wrap: wrap;
        margin-top: 10px;
        padding: 10px 0 0;
    }

    #basketItems li.total-main dl {
        margin-bottom: 0;
    }

    #basketItems li.total-main,
    #basketItems li.basket-totals .total-sidebar {
        width: 100%;
        padding: 10px 0;
    }

    #basket .loginFrame .registerBox,
    #basket .loginFrame .loginBox {
        width: 100%;
        margin: 0 0 10px;
    }

    #basketItems li.basket-totals .total-sidebar .buttons {
        display: none;
    }

    #checkout .alertBox,
    #basket .alertBox {
        margin: 0;
    }

    #basketItems li.total-main {
        width: 100%;
    }

    #basketItems li.offerBox .discount-code,
    #basketItems li.offerBox .discount-code-applied,
    .offersFrame .offersAd {
        width: 100%;
    }

    .offersFrame .offersAd {
        text-align: right;
        margin-bottom: 10px;
    }

    .offersFrame .offersAd picture {
        display: inline-block;
    }

    .basket .basket_offer span,
    #basketItems li.offer span,
    .basket .basket_offer .txt,
    #basketItems li.offer .txt,
    .basket .basket_offer .label,
    #basketItems li.offer .label {
        width: 100%;
        border: none;
        text-align: left;
        justify-content: flex-start;
        padding: 0;
    }

    .basket .basket_offer,
    #basketItems li.offer.available,
    #basketItems li.offer.possible {
        padding: 10px;
        display: block;
    }

    .basket .basket_offer .figure,
    .basket .basket_offer .txt,
    .basket .basket_offer .label,
    #basketItems li.offer .figure,
    #basketItems li.offer .txt,
    #basketItems li.offer .label {
        width: 100%;
        border: none;
    }

    .basket .basket_offer .label,
    #basketItems li.offer.available .label,
    #basketItems li.offer.possible .label {
        /*border-bottom:1px solid #7D8798;*/
        margin-bottom: 5px;
    }

    .basket .basket_offer .txt,
    #basketItems li.offer.available .txt,
    #basketItems li.offer.possible .txt {
        display: block;
    }

    #basketItems .discount-code h6 {
        padding: 0;
        margin-bottom: 5px;
    }

    .minimum-order-value-not-reached {
        font-size: 14px;
    }

    .minimum-order-value-not-reached .info-flag {
        width: 25px;
        margin-left: 0;
    }

    .minimum-order-value-not-reached .eu-flag {
        width: 50px;
    }

    .minimum-order-value-not-reached .message {
        padding: 0 10px 0 20px;
    }

    .delivery-warnings .delivery-warning {
        width: 100%;
    }

    .basket-header-nav {
        margin: 0 0.55rem;
        padding-bottom: 0;
        padding-top: 0.7rem;
    }

    /*Login*/
    #login .registerBox,
    #login .loginBox {
        width: 100%;
        margin: 0 0 10px;
    }

    /*Checkout*/
    #checkout #masthead .checkoutBox {
        margin-right: 15px;
        display: flex;
        align-items: center;
        width: 150px;
        text-align: left;
    }

    #checkout #masthead .checkoutBox h4 {
        padding-left: 5px;
        line-height: 18px;
    }

    #checkout #masthead .checkoutBox svg {
        width: 50px;
    }

    #checkout .borderbox .buttonBox {
        width: 100%;
        text-align: left;
    }

    .labelFrame,
    #checkout .details {
        display: block;
    }

    .labelFrame label,
    #checkout .details label,
    #checkout .yourDetails label,
    .labelFrame label + select,
    .labelFrame label + input,
    #checkout .details label + select,
    #checkout .details label + input,
    #checkout .yourDetails label + input,
    .address-input .labelFrame .address-name {
        width: 100%;
    }

    .labelFrame label.empty {
        display: none;
    }

    .accordion-frame.borderbox .accordion,
    .accordion-frame.borderbox .accordion-title,
    #checkout .flexgrid.address-summary {
        padding: 0;
    }

    #checkout .paymentOptions {
        margin: 0 0 20px;
    }

    #checkout .paymentOptions .buttonBox {
        width: 100%;
    }

    #checkout .bankOptions .bank {
        width: 100%;
        margin-bottom: 6px;
    }

    #checkout .bankOptions .box {
        width: 100%;
    }

    #accountCreation .accountChoice .buttons {
        display: flex;
        flex-wrap: wrap;
    }

    #accountCreation .accountChoice .buttons,
    #checkout #accountCreation #passwordForm {
        width: 100%;
        padding: 0;
    }

    #myDetails label + input ~ span,
    #checkout label + input ~ span {
        margin-left: 0%;
    }

    /* Mandatory and Suggested Products */
    .crosssell .needProduct .block.mandatory {
        width: 100%;
    }

    .crosssell .needProduct .block.suggested {
        width: 100%;
    }

    .crosssell .needProduct .product-wrapper .productDescriptionContainerTop {
        flex-direction: column;
    }

    .crosssell .needProduct .product-wrapper .productImageContainer {
        width: 100%;
        border-bottom: 1px solid var(--site-border);
    }

    .crosssell .needProduct .product-wrapper .productInfoBox {
        width: 100%;
        padding: 10px 140px 10px 20px;
        min-height: 120px;
        border-left: none;
        position: relative;
    }

    .crosssell .needProduct .product-wrapper .framedImage {
        padding: 20px 0;
        display: flex;
        justify-content: center;
        max-width: 250px;
        margin: 0 auto;
    }
    /* Cars for sale */
    .car-sale-listing .images ul li {
        flex: 0 0 33.3%;
    }

    #filterSelector-choices .label::after {
        display: none;
    }

    /* Recent Products on Homepage */
    #recentProducts .products-list.gridview.offers.super-compact .product-wrapper:nth-of-type(1n + 16) {
        display: none;
    }

    #recentProducts .products-list.gridview.offers.super-compact .product-wrapper {
        width: 32%;
        margin: 5px 0.5%;
    }

    #recentProducts .products-list.gridview.offers.super-compact .product-wrapper .productDescriptionContainerTop .productImageContainer {
        border: none;
    }

    #tyreSearch .productOptions .priceBox .stock {
        text-align: right;
    }

    #checkout .vatBox .block1 {
        width: 100%;
        padding: 0 0 30px 0;
    }

    #checkout .vatBox .block2 {
        width: 100%;
        padding: 0;
        border-left: none;
        border-top: 1px solid var(--site-border);
    }

    /*account*/
    .account-navigation {
        grid-template-columns: repeat(2,minmax(48%,50%));
        margin: 0 0 80px;
    }
    .order-list-item {
        /*flex-direction: column;*/
        flex-wrap:wrap;
    }
        .order-list-item div[class^="ord-"]{
            /*width:100%;*/
            padding:5px;
        }

        .order-list-item .ord-status {
            width: 60%;
        }
        .order-list-item .ord-download {
            width: 40%;
        }
        
        .order-list-item .ord-date-placed{
            width: 40%;
        }
        .order-list-item .ord-id{
            width:20%;
        }
        .order-list-item .ord-total {
            width: 30%;
        }

        /*sidebar-basket*/
        .basket .sticky-header {
            padding: 0.26rem 1.05rem;
            margin: -50px auto 0;
        }

        .basket-header-nav .navlink:first-child .navlink-heading {
            height: 2.2rem;
            overflow: hidden;
        }

    .basket-txt .basket-item-total, .basket-txt .basket-item-count {
        display: flex;
        width: 50%;
        justify-content: space-between;
        flex-direction: column;
        gap:0.5rem;   
        color: var(--dd-light-grey);
        font-size: 0.76rem;
        line-height: 0.86rem;
        font-weight: 500;
        text-transform: uppercase;
    }
        .basket-txt .basket-item-total span, .basket-txt .basket-item-count span {
            font-size: 0.86rem;
        }

        .basket-header-nav .navlink {
            gap: 1.85rem;
            margin: 0 0 0.4rem;
        }
    .all-basket-content {
        padding: 0 18px;
        display: block;
    }
    /*myaccount*/
    .buttonBox {
        margin: 0;
        display: block;
    }

    #myDetails .clientSave {
        justify-content: center;

    }
    .clientSave .button,
    .clientSave .button.cancel {
        inset: initial;
        position: relative;
        margin: 0;
    }
    /*ddblocks*/
    #pageContent #navBar + div {
        padding: 0;
    }
    .headerbox, .ddBlockFrame {
        width: 92%;
    }
    

}

@media only screen and (max-width: 599px) {
    #bodyText {
        padding: 30px 15px;
    }

    /*Masthead*/
    #masthead {
        background-position: 0 112px;
    }

    #masthead > .innerframe {
        min-height: unset;
        z-index: initial;
    }

    #masthead.docked > .innerframe {
        min-height: 60px;
    }

    #masthead #topFrame {
        justify-content: space-between;
        padding: 0 16px;
        gap:0;
    }

        #masthead #Logo, #masthead.docked #Logo {
            margin: 0;
            width: 180px;
            height: 50px;
        }
        
        
    #footCol2 {
        grid-template-columns: repeat(1, minmax(98%, 100%));
    }

        #footCol2 .socialbox {
            grid-column: span 1;
        }
    #categoryOpen {
        padding: 10px 16px;
    }
    #siteNavigation ul {
        margin: 0;
        gap:0.1rem;
    }
    #shopSettings {
        width: 160px;
        margin-right:-0.6rem;
    }
    #siteNavigation ul li:not(.intro) {
        margin: 0;
        width: 36px;
        height: 40px;
    }

    #siteNavigation > ul > li > a {
        width: 35px;
    }

    

    #ship_to {
        padding: 0 4px;
    }

    #current_language {
        padding: 0 4px 0 0;
        border-left: 0;
    }
    #shopSettings.active .trigger-settings::before {
        inset: auto 0 2px;
    }


    #ship_to .choice {
        font-size: 0.54rem;
        line-height: 0.8rem;
        white-space: nowrap;
        overflow: hidden;
        margin: 3px 0 1px;
        border-bottom: 1px solid var(--site-border);
        width: 96px;
        padding-bottom: 1px;
    }

    #current_currency {
        margin-left: 0;
        width: 28px;
        height: 28px;
        line-height: 28px;
        font-size: 14px;
    }

    #topFrame .basket_icon svg {
        width: 30px;
        height: 40px;
    }

    #masthead.docked #filterSelector {
        min-height: unset;
    }

    #topFrame .languages .languages_box {
        right: 20px;
        left: 20px;
        padding: 20px;
    }

    #filterSelector {
        padding: 0;
        min-height: 50px;
    }

    #filterSelector-choices {
        padding: 0;
    }

    #filterSelector-choices .label {
        width: 100%;
        border: none;
        padding: 10px 15px;
        margin: 0;
        left: 0;
        height: 50px;
        font-size: 14px;
    }

    #filterSelector-choices .label::after {
        display: block;
    }

    #filterSelector-choices .filterSteps {
        width: 100%;
    }

    #filterSelector-chosen .changeCar:after,
    #filterSelector-choices .label::before {
        content: '+';
        display: inline-block;
        padding: 0 15px;
        font-size: 18px;
        font-weight: 500;
        color: inherit;
        position: absolute;
        right: 0;
    }

    #filterSelector-chosen .changeCar:after {
        top: 0;
        line-height: 50px;
    }

    #filterSelector-choices.active .label::before {
        top: 18px;
        transform: rotate(-45deg);
        color: var(--d911-teal);
    }

    #filterSelector-choices:not(.active) .label:after {
        padding: 5px 10px;
        /*background: #eb6a2e;*/
    }

    #filterSelector-choices .filterSteps {
        background: #fff;
        display: block;
        padding: 10px 20px 30px;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        z-index: 100;
        margin: 0;
        border-top: 1px solid #efefef;
        border-bottom: 1px solid var(--site-border);
        transition: all ease-in-out 0.4s;
        visibility: hidden;
        opacity: 0;
        box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.15);
    }

    #masthead.docked #filterSelector-choices .filterSteps {
        padding: 10px 16px 30px;
    }

    .basket-header-nav {
        display: block;
        margin: 0 0.55rem 0 2.05rem;
    }
    .current-basket {
        align-items: flex-start;
        height: initial;
        min-height: initial;
        padding: 0;
        width:100%;
    }
    .current-basket .basket-txt {
        color: var(--dd-light-grey);
        font-size: 0.76rem;
        line-height: 0.86rem;
        font-weight: 500;
        text-transform:uppercase;
    }

    /*.basket .sticky-header {
        padding: 0 0 0 2.5rem;
        margin: -50px 0 0;
    }*/
    

    .side-basket-list {
        display: flex;
        flex-direction: column;
        gap: 0.85rem;
        margin: 0 auto;
        width: 92%;
        padding: 1.25rem 0;
    }
        .side-basket-list .basket_item{
            /*border:1px solid var(--site-border);*/
            margin:0;
        }

    .sidebar-basket-footer,
    .summary-container {
        margin: 0 auto;
        width: 92%;
    }


        #pageContent {
            padding-top: 173px;
        }

    #myAccount #pageContent {
        padding-top: 8rem;
    }
    #myDetails .clientSave .button,
    .update-access .button {
        width: 100%;
    }

    table.current-basket-items tr th:nth-child(2), 
    table.current-basket-items tr td:nth-child(2) {        
        padding-left: 8px;
    }

    #checkout #pageContent {
        padding-top: 130px;
    }

    #filterSelector-choices.active .filterSteps {
        left: 0;
        visibility: visible;
        opacity: 1;
    }

    #filterSelector-choices .filterSteps > span:nth-of-type(n) {
        width: 100%;
    }

    #filterSelector-choices .filterSteps > span:nth-of-type(1) {
        display: none;
    }

    #filterSelector-choices .filterSteps > span:nth-of-type(4) {
        padding: 10px 0 0;
    }

    #filterSelector-choices .filterSteps button,
    #filterSelector-choices .filterSteps select {
        width: 100%;
        margin: 0;
        height: auto;
    }

    #mastehead #filterSelector-choices .filterSteps button {
        padding: 15px 20px;
        height: auto;
    }

    #filterSelector-chosen {
        padding: 0;
        height: 50px;
        align-items: center;
    }

    #filterSelector-chosen p {
        display: none;
    }

    #filterSelector-choices.active .label::after {
        display: none;
    }

    #filterSelector-chosen .myVehicle {
        width: 100%;
        padding: 0 30px 0 15px;
        font-weight: 500;
        font-size: 12px;
        line-height: 16px;
    }

    #filterSelector-chosen .changeCar {
        width: 100%;
        text-align: center;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
    }

    #filterSelector-chosen input:hover,
    #filterSelector-chosen input {
        background-color: transparent;
        border: none;
        padding: 4px 10px;
        color: #23a9be;
        display: block;
        width: 100%;
        font-size: 0;
        height: 100%;
    }
    /*breadcrumbs*/
    .breadcrumbs {
        margin-bottom: 20px;
    }
    /*categories*/
    .refineList,
    #categories {
        /*grid-template-columns: repeat(2,minmax(48%,50%));*/
        grid-template-columns: repeat(3, minmax(31%, 33%));
    }

    /* Product List */
    .products-list.gridview {
        grid-gap: 16px 8px;
    }

    .product-wrapper .productDisplayOuterContainer {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .gridview .productDescriptionContainerBottom {
        display: flex;
        height: 100%;
        flex-direction: column;
    }
    .gridview .product-wrapper .productOptions {
        justify-content: flex-end;
    }
    .gridview .product-wrapper .productOptions .priceBox {
        padding: 0;
        min-height: 90px;
        height:auto;
        border: none;
        margin: 0;
    }

    .gridview .priceBox .priceregular {
        padding: 0 5px 5px;
    }

    .product-wrapper .productOptions .priceBox {
        width: 100%;
        padding: 10px 0;
        min-height: unset;
    }

    .gridview .product-wrapper .productInfoBox .product-head a {
        height: 70px;
    }

    .priceBox .options .priceOption {
        width: 100%;
    }

    .product-wrapper .fitsbox {
        display: none;
    }
    .productOptions .panel.badges-addbasket button {
        white-space: wrap;
        line-height: 0.68rem;
    }
    .productOptions .panel.badges-addbasket .addbasket {
        width: 100%;
    }

    #ProductList .product-wrapper .prod-main-txt,
    #ProductList .product-wrapper .alternateProduct {
        display: none;
    }

    /*Product Display */
    #productDetails .h1 {
        font-size: 1.42rem;
        line-height: 1.62rem;
        font-weight: 400;
    }

    #productDetails .product-wrapper .productInfoBox .prod-main-txt,
    #productDetails .product-wrapper .framedImage .zoom,
    #productDetails .product-wrapper .productDescriptionContainerBottom,
    #productDetails .product-wrapper .fitsbox {
        display: block;
        max-height: initial;
    }
    #productDetails.gridview .productOptions .panel.badges-addbasket .product-secondary-badges {
        grid-template-columns: repeat(5, 1fr);
    }
    #productDetails.gridview .product-wrapper .diagramListContainer .diagramList {
        grid-template-columns: repeat(2, minmax(48%, 50%));
    }
    #relatedproducts .product-wrapper .productInfoBox .prod-main-txt,
    #relatedproducts .product-wrapper .framedImage .zoom,
    #relatedproducts .product-wrapper .productDescriptionContainerBottom,
    #relatedproducts .product-wrapper .fitsbox {
        display: none;
    }

    #ProductList .products-list .productInfoBox .product-head {
        font-size: 0.76rem;
        line-height: 0.96rem;
        padding: 10px 10px 0;
    }

    #ProductList .products-list .framedImage {
        padding: 50px 10px 30px;
    }

    #ProductList .products-list .framedImage img {
        display: block;
        margin: 0 auto;
        height: 110px;
        object-fit: contain;
        object-position: center;
        overflow: hidden;
    }

    #ProductList .products-list .framedImage .zoom {
        bottom: 5px;
        padding: 0;
        right: 10px;
    }
    /*video carousel*/
    .videoFrame .vd-modal-content {
        width: 92%;
    }

    .videoFrame .vd-modal iframe {
        width: 290px;
    }


    /*related products*/
    #relatedproducts .products-list.gridview {
        grid-template-columns: repeat(2, minmax(48%, 50%));
    }
    /*recent products super-compact*/
    #recentProducts .products-list.gridview.offers.super-compact {
        grid-template-columns: repeat(2, minmax(49%, 50%));
        grid-gap: 10px;
    }

   /* #ProductList .products-list .productOptions .panel.options,*/
    #ProductList .products-list .productOptions .panel.badges-addbasket .product-secondary-badges,
    /*#ProductList .products-list .productOptions .panel.badges-addbasket .other-info,*/
    #ProductList .products-list .productOptions .surcharge,
    #ProductList .products-list .productOptions .previous-price,
    #ProductList .products-list .productInfoBox .kitbox {
        display: none;
    }

    .gridview .product-wrapper .productOptions .priceBoxFrame .variant-grid .panel.options{
        padding:0 0 10px;
    }
    .gridview .priceOption .title {
        margin: 0 0 2px;
        width: 100%;
        line-height: 0.86rem;
    }
    .gridview .button.tradelink {
        width: 100%;
        min-width: initial;
    }
    .button.tradelink .h6 {
        font-size: 0.66rem;
        line-height: 0.86rem;
        font-weight: 600;
    }
    /*.gridview .priceOption label {        
        padding:5px 20px 5px 5px;
    }
    .gridview .productOptions label strong {
        padding: 0;
        width: 100%;
    }*/
    .gridview .priceOption input {
        top: 2px;
        
    }
    /*refine list*/
    .brandFilters .refineList .bulletLink_1 img {
        max-width: 100%;
    }
    /*diagrams*/
    #diagram #mainContent {
        padding: 10px 20px 30px;
    }
    /*galleries*/
    .refineList.gallery {
        grid-template-columns: repeat(2, minmax(48%, 50%));
        margin-top: 20px;
    }
    /*fancybox*/
    /*.fancybox-slide--image .fancybox-content{
            border:1px solid #fc0;
            padding:10px;
        }*/
    /*competitor-enquiry*/
    .form-submit,
    .competitor-enquiry .flexgroup {
        flex-direction: column;
        gap: 5px;
    }
    .flexgroup label{
        width:100%;
    }

    .pageno {
        margin-left: 0;
        justify-content: center;
        display: flex;
        gap: 3px;
        flex-wrap: wrap;
    }
        .pageno a{
            display:block;
            margin:0;
        }
        /* Mandatory and Suggested Products */
        .crosssell .needProduct .product-wrapper .productImageContainer {
            border: none;
        }

    .crosssell .needProduct .product-wrapper .productInfoBox {
        width: 100%;
        padding: 80px 20px 10px;
    }

    .crosssell .needProduct .product-wrapper .productInfoBox .brand-img {
        left: 0;
        right: 0;
        width: 100%;
        border: none;
        /*border-top: 1px solid var(--site-border);*/
        border-bottom: 1px solid var(--site-border);
        height: 60px;
        bottom: auto;
    }

    .crosssell .needProduct .product-wrapper .productOptions.part-options .priceBox {
        max-width: 100%;
        width: 100%;
    }

    .crosssell .needProduct .product-wrapper .productOptions,
    .crosssell .needProduct .product-wrapper .productOptions.part-options {
        padding: 10px;
    }

    .crosssell .header-box {
        display: block;
    }


    .modal.confirm-cancel button {
        width:100%;
    }





    .header-box h3 {
        margin-bottom: 0;
        display: block;
        text-align: center;
    }

    .basket-footer-badges .basket-footer-badge {
        display:flex;
        align-items:center;
        gap:10px;
        line-height: 0.78rem;
    }

    #tyreSearch .tyreImageContainer {
        display: none;
    }

    .basket .cta .button {
        margin-top: 10px;
    }

    .basket .summary > div {
        margin-left: 0;
        width: 100%;
    }

    .basket h3 {
        font-size: 1.03rem;
        font-weight: 400;
    }

    /*.basket .sticky-header {
        padding: 1px 0;
    }*/
    #topFrame:not(:has([id="loggedIn"])) .popout-basket-container .close {
        transform: translateX(0);
    }
    #topFrame:has([id="loggedIn"]) .popout-basket-container .close {
        /*height: calc(100% - 58px);
        left: 0.6rem;
        border-bottom: 1px solid var(--site-border);*/
        transform: translateX(0);
    }
    .popout-basket-container .navlink .txt span{
        height:auto;
        min-height:initial;
    }

    .basket .basket-footer-badges {
        justify-content: center;
    }

    .basket .basket-footer-badges .basket-footer-badge {
        max-width: 20%;
    }

    #empty-basket-popout-basket {
        margin: 0;
        display: block;
        width: 100px;
        padding: 0.05rem;
        font-size: 0.66rem;
    }
    .current-basket .basket-txt {
        /* flex-direction: column; */
        align-items: flex-start;
        gap: 1.25rem;
    }
    .basket-txt .basket-item-total,
    .basket-txt .basket-item-count {
        flex-direction: column;
        gap: 0.25rem;
    }
        .basket-txt .basket-item-total{
            width:60%;
        }

    .user-checkout a {
        width: 100%;
        text-align:center;
    }
        /*my account*/
        #myOrders li > div > div {
            padding: 0 10px 10px;
            width: 100%;
        }

    .videoFrame .vd-modal-content {
        margin: 50% auto;
    }
    .button.user-action {
        position: relative;
        inset:initial;
        margin:0 0 1.85rem;
        width:100%;
    }
    .add-new-list,
    .user-submit {
        flex-direction: column;
        gap: 0.85rem;
    }
        .add-new-list > div[style^="display: flex; gap: 10px;"] {
            justify-content:space-between;
        }
            .add-new-list > div[style^="display: flex; gap: 10px;"] .button{
                width:48%;
            }
            .user-submit .button.line {
                width: 100%;
            }
        /*footer*/
        #footCol1 > div {
            max-width: 100%;
            min-width: 100%;
        }

    .socialbox ul.social {
        flex-wrap: wrap;
        gap: 20px 10px;
    }

    .socialbox ul.social l {
        width: 48%;
    }

    /*also found on these pages*/
    #productListContainer .diagramListContainer .diagramList {
        grid-template-columns: repeat(2, minmax(48%, 50%));
    }

    /*homepage slider*/
    .banner-carousel {
        margin: 10px 0 6px;
    }
        .banner-carousel,
        .banner-carousel .bx-wrapper picture img {
            height: auto;
            aspect-ratio: 1/0.744;
        }

    /*account*/
    .userNav {
        padding: 2.0rem 1.85rem;
    }
    .userNav .close{
        padding-top:1.0rem;
    }
    .user-info {
        padding: 0.65rem 0.85rem 0.55rem 3.35rem;
        margin: 0 auto;
        height: 110px;
    }
    .account-navigation {
        grid-template-columns: repeat(1,1fr);
        margin: 0 0 80px;
    }

        .account-navigation .dd_account-details {
            grid-column: span 1;
        }
        .account-navigation .navlink {            
            padding: 2% 4%;
            min-height: initial;
            display:none;
        }
        .account-navigation .navlink.dd_account-logout{
            display:flex;
        }
    .button-nav .navlink.user-action {
        position: absolute;
        inset: 30px auto auto 20px;
        max-width: 50%;
        min-width: 88vw;
    }
    .order-list-item .ord-download .button {
        min-width: initial;
    }

    .order-list-item .ord-total,
    .order-list-item .ord-id {
        width: 40%;
    }

    .order-list-item .ord-date-placed,
    .order-list-item .ord-status {
        width: 60%;
    }

    .order-list-item .ord-download {
        width: 100%;
        max-width: initial;
        margin: 0.45rem 0 0;
    }
    .clientSave {
        flex-direction: column;
        align-items: center;
        gap:0.85rem;
    }

        .clientSave .button {
            width: 100%;
        }
    
}

/*iphone6 + regular android*/
@media only screen and (max-width: 479px) {
    /*Typeography*/
    h1 {
        font-size: 1.68rem;
        line-height: 1.88rem;
    }
    #basket h1 {
        margin-top: 60px;
    }
    /*Sidebar*/
    #navBar .navFrame {
        padding: 0 3.0rem 2.5rem;
    }

    #navBar .headedPanel {
        width: 100%;
    }

    #navBar .navTitle a {
        font-size: 24px;
        line-height: 30px;
    }

    #categoryOpen span {
        font-weight: 500;
    }

    #partsMenu li {
        width: 100%;
    }

    /*Product List*/

    .breadcrumbs + h2 {
        padding-right: 0;
    }

    ul.layout {
        display: none;
    }

    /* #categories li {
    text-align: center;
    padding: 15px;
  }

  #categories li a {
    padding: 10px 0;
    font-size: 13px;
    flex-wrap: wrap;
  }

  #categories li a span {
    display: block;
    width: 100%;
  }

  #categories li a img {
    display: block;
    margin: 0 auto 15px;
  }*/

    .paging.top {
        justify-content: flex-end;
    }

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

    .paging .pageno,
    .paging .page-display {
        max-width: 100%;
        width: 100%;
        text-align: right;
        padding-bottom: 10px;
    }

    /* Mandatory and Suggested Products */
    .crosssell .needProduct .block {
        padding: 0 15px 0;
    }

    .crosssell .needProduct .block .products-list.gridview.offers .productInfoBox .product-head {
        padding: 10px 15px;
    }

    /*.panel.badges-addbasket input[type="submit"].button*/
    .productOptions .buttonframe {
        width: calc(100% - 70px);
        margin: 0;
    }

    .button.proceed-to-checkout {
        width: 55%;
    }

    /*Footer*/

    #footCol1,
    #footCol2 {
        width: 100%;
        border: none;
    }

    #footer #footCol2 > div.creditcards,
    #footer #footCol1 > div.tp {
        width: 100%;
    }

    .contactbox > div {
        width: 100%;
    }

    .contactbox .txt {
        padding: 20px 0 10px;
        border-bottom: 1px solid #ccc;
    }

    /*Login*/
    #login .registerBox input,
    #login .loginBox .logbox,
    #login .loginBox input,
    #login .loginBox .reset,
    #login .loginBox label {
        width: 100%;
    }

    #login .loginBox label {
        padding-bottom: 5px;
    }

    /*Homepage*/
    .introPanel {
        padding: 0;
    }

    #HomeFeatured > div > h2 {
        min-height: 30px;
        border-bottom: 1px solid var(--site-border);
        font-size: 18px;
        line-height: 22px;
        font-weight: 500;
        margin: 10px 0;
    }

    #HomeFeatured > div h3,
    #HomeFeatured > div .h3 {
        font-size: 16px;
        line-height: 20px;
        font-weight: 500;
    }

    #manufacturersHighlight .boxes > div {
        padding: 10px 0;
    }

    #productHighlight > .desc,
    #productHighlight > .product {
        width: 100%;
    }

    /*Product List*/
    .shopInfo .headedPanel {
        width: 100%;
        margin: 0 0 20px;
    }

    .listview .productInfoBox .product-head,
    .gridview .productInfoBox .product-head {
        min-height: initial;
        height: auto;
        padding: 10px;
        font-size: 16px;
        line-height: 20px;
    }

    .productInfoBox .prod-main-txt {
        max-height: 220px;
        height: auto;
    }

    .introPanel {
        margin: 0 0 50px;
    }

    .popularModels .refineList,
    .carType .refineList {
        grid-template-columns: repeat(2, minmax(48%, 50%));
    }

    ul.listGoogleBoostInternalLinks li {
        width: 100%;
    }

    /*My Account*/
    #myDetails p input.button,
    #myDetails .searchPostcode button,
    #myDetails .details input,
    #myDetails .details label {
        width: 100%;
    }

    #myDetails .details label {
        line-height: 16px;
        color: #363c4b;
    }

    #myDetails .buttonBox {
        margin: 0 0 10px 0;
        width: 100%;
    }

    .buttonBox input[type='checkbox']:checked + label {
        width: 100%;
    }

    #navigationTabs ul {
        justify-content: center;
    }

    #navigationTabs ul li a {
        padding: 10px;
        font-size: 12px;
        font-weight: 600;
    }

    /*Side Basket*/

    #topFrame .basket {
        padding: 0 0 4.0rem;
        overflow-x: hidden;
    }

    

    #topFrame .basket_icon {
        margin-left: 0;
    }

    #topFrame .basket span.info {
        display: block;
        margin: 0 0 10px;
        max-width: 100%;
    }

    #topFrame .basket .cta input {
        width: 100%;
        margin: 0 0 10px;
    }

    /*Basket*/

    #basketItems li.header {
        display: none;
    }

    #basketItems li.basket-product {
        flex-wrap: wrap;
        width: 100%;
    }

    #basketItems li.basket-product > .product {
        width: 100%;
        border-bottom: 1px solid var(--site-border);
        padding: 0;
    }

    .basket_item .product_image,
    #basketItems .product .product-image {
        width: 40%;
        padding: 5px;
    }

    #basketItems .product-info {
        padding: 10px;
    }

    .basket_item .product_info {
        width: 60%;
        padding: 8px 0 10px 15px;
        min-height: 8.2rem;
    }
        .basket_item .product_info a {
            margin-bottom: 20px;
        }
        .basket_item .product_info a::after {
            content: "";
            display: block;
            background: var(--site-border);
            margin: 0.5rem auto;
            width: 100%;
            height: 1px;
            position: absolute;
            inset: auto 0 46px auto;
        }
        
    .basket .basket_item {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .basket_item .product_price {
        width: 86%;
        min-height: 50px;
        padding: 8px 0 0;
    }

    #basketItems li.basket-product > .quantity {
        width: 40%;
        padding: 10px;
        text-align: center;
    }

    #basketItems li.basket-product > .figure {
        width: 60%;
        padding: 15px 15px 30px 0;
    }

    #basketItems li.basket-totals {
        flex-wrap: wrap;
    }

    #basketItems li.total-main,
    #basketItems li.basket-totals .total-sidebar {
        width: 100%;
        padding: 10px 0;
    }

    #basket .discount-code input[type='text'] {
        max-width: 240px;
    }

    #basket #pageContent #side {
        display: block;
    }

    #basket #pageContent #side .headedPanel {
        margin-bottom: 20px;
        width: 100%;
    }

    #basketItems li.offerBox .discount-code {
        display: block;
    }

    #basket .discount-code input[type='text'] {
        margin: 0;
    }

    #basketItems li.offerBox .discount-code-applied h6 {
        width: 100%;
    }

    #checkout .alertBox,
    #basket .alertBox {
        padding: 0;
        margin: 0;
    }

    #basket .loginFrame > div {
        padding: 20px;
    }

    #basket .loginFrame > div h3 {
        margin-top: 0;
        font-weight: 400;
    }

    #basket .loginFrame .registerBox,
    #basket .loginFrame .loginBox {
        display: block;
        /*border:1px solid #08A972;*/
    }

    #basket .loginFrame .registerBox input,
    #basket .loginFrame .loginBox .box .button,
    #basket .loginFrame .loginBox .box label {
        display: block;
        width: 100%;
    }

    #basket .loginFrame .loginBox .borderline {
        display: inline-block;
        margin: 15px 0 5px;
    }

    #basketItems .block2 .offers {
        margin-top: 20px;
    }

    #lowerContent .basket-offers .product-wrapper {
        width: 100%;
        max-width: 100%;
    }

    /*Checkout*/
    #checkout .shop-settings {
        left: auto;
        transform: none;
        right: 0;
    }

    #checkout #masthead .checkoutBox {
        margin-right: 0;
        width: 120px;
    }

    #checkout #masthead .checkoutBox h4 {
        padding-left: 5px;
        line-height: 15px;
        font-size: 14px;
        font-weight: 500;
    }

    .buttonBox input[type='radio'] + label,
    .buttonBox input[type='checkbox'] + label,
    .buttonBox input[type='radio'] + span.error + label,
    .buttonBox input[type='checkbox'] + span.error + label {
        padding-right: 10px;
    }

    #checkout .searchPostcode button,
    #checkout .searchPostcode input[type='text'] {
        width: 100%;
    }

    #checkout h6.flash,
    #checkout .borderbox {
        padding: 15px;
    }

    .accordion-frame.borderbox .accordion,
    .accordion-frame.borderbox .accordion-title,
    #checkout .flexgrid.address-summary {
        padding: 0;
    }

    #checkout .flexgrid.address-summary .txtbox {
        width: 100%;
    }

    #checkout .checkoutLinks .button.line {
        width: 100%;
        margin: 0 0 5px;
    }

    .accordion-frame.borderbox .accordion-title > .txt {
        display: block;
    }

    #checkout p.placeOrder .button {
        margin: 0;
        width: 100%;
    }

    #checkout #progress li.selected {
        display: flex;
        margin: 0;
        align-items: center;
    }

    #checkout #progress li.selected .step {
        min-width: 40px;
    }

    /*Diagrams*/
    #diagramLists {
        padding: 30px 0;
    }
    #diagram .diagramSearch h4 {
        padding-right: 0;
        width: 100%;
        margin: 0 0 15px;
    }

    #diagram .diagramSearch input {
        max-width: 70%;
    }

    #diagram #categoryTitle {
        border-bottom: 1px solid var(--site-border);
        padding: 0 5px 5px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        min-height: 30px;
        margin: 0;
    }
    #diagramCategoriesLists:has(.refineList.active) #categoryTitle::after {
        transform: rotate(-45deg);
        color: var(--d911-teal);
    }
    #diagram #categoryTitle::after {
        content: '+';
        font-size: 20px;
    }

    #diagram #categoryTitle.active {
        color: #23a9be;
    }

    #diagram #categoryTitle.active:after {
        transform: rotate(45deg);
    }

    .refineList.diagramCategories {
        display: none;
        margin-top: 30px;
    }

    .refineList.diagramCategories {
        /*grid-template-columns: repeat(2,minmax(48%,50%));*/
        grid-template-columns: repeat(3, minmax(31%, 33%));
    }
    .refineList.diagramCategories.active {
        display: grid;
    }

    #categoryList.hidebydefault {
        display: none !important;
    }

    #diagram .categoriesSmall .refineList {
        grid-template-columns: repeat(3, minmax(31%, 33%));
    }

    #diagram .diagramList {
        grid-template-columns: repeat(2, minmax(48%, 50%));
    }

    /*also found on these pages*/
    #productListContainer .diagramListContainer .diagramList {
        grid-template-columns: repeat(2, minmax(48%, 50%));
    }

    .diagramList li,
    #diagram .categoriesSmall .refineList li {
    }

    #diagramsTitle + p .button {
        display: block;
        text-align: center;
    }

    #partsList table tbody,
    #partsList table {
        display: block;
        width: 100%;
    }

    #partsList table .parts-table-header {
        display: none;
    }

    #partsList table tr {
        display: block;
        width: 100%;
        border: 1px solid var(--site-border);
        margin: 2px 0;
    }

    #partsList table td {
        display: flex;
        align-items: center;
        width: 100%;
        text-align: left;
        min-height: 15px;
        padding: 5px 10px;
    }

    #parts-table td .btnAddToBasket,
    #parts-table td .moreProduct {
        margin: 0;
    }

    #partsList table td:before {
        content: '';
        width: 50%;
        float: left;
        padding: 0 10px;
        text-align: left;
        text-transform: uppercase;
        font-weight: 600;
    }

    #partsList table td:nth-child(1):before {
        content: 'No';
    }

    #partsList table td:nth-child(2):before {
        content: 'part no';
    }

    #partsList table td:nth-child(3):before {
        content: 'desc';
    }

    #partsList table td:nth-child(4):before {
        content: 'note';
    }

    #partsList table td:nth-child(5):before {
        content: 'model';
    }

    #partsList table td:nth-child(6):before {
        content: 'price';
    }

    #partsList table td:nth-child(7):before {
        content: 'qty';
    }

    #partsList table td:nth-child(8):before {
        content: 'info';
    }

    #partsList table td:nth-child(9):before {
        content: 'add to cart';
    }

    /*Cars for sale*/
    #CarsList .buttons {
        display: flex;
    }

    #CarsList .buttons a {
        margin: 0 0.5px;
    }

    .car-sale-listing {
        padding: 10px 10px 20px;
    }

    .car-sale-listing .images ul li {
        flex: 0 0 50%;
    }

    /* Recent Products on Homepage */
    #recentProducts .products-list.gridview.offers.super-compact .product-wrapper:nth-of-type(1n + 11) {
        display: none;
    }

    #recentProducts .products-list.gridview.offers.super-compact .product-wrapper {
        width: 49%;
    }

    #parts-table td .diagram-part-button-wrapper .basket-added-icon {
        right: 10px;
        top: 8px;
    }
}

/*Iphone 4&5*/
@media only screen and (max-width: 359px) {
}

/* Size and Orientation */
@media only screen and (max-width: 479px) and (orientation: portrait) {
}

/* Landscape Orientation */
@media screen and (orientation: landscape) {
    .crosssell .scroll {
        max-height: 60vh;
    }
}

/* Portrait Orientation */
@media screen and (orientation: portrait) {
}

/*--------------------------------------------------------------------- End Responsive Queries*/