/*
Author: Kolen Mackey for Design 911 by Datadial Ltd. 24/10/25
Affiliate My Account Page Styles
*/
/*Css Variables*/
:root {
    --bez: cubic-bezier(0.62, 1.11, 0.66, 0.71);
    --site-highlight: #23a9be;
}
/*x1x*/

/*------------------- myAccount Sidebar */
.userNav {
    display: flex;
    padding: 0;
    margin: 0;
    flex-direction: column;
    gap:1.13rem;
}

.user-info .close {
    background: var(--dd-bkg1);
    height: 52px;
    position: absolute;
    top: 0;
    color: var(--dd-grey);
    border-right: 1px solid var(--site-border);
    border-bottom: 1px solid var(--site-border);
    align-items:center;
}

    .user-info .close svg {
        inset: initial;
        margin: 0;
    }

.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;
        fill: var(--dd-light-grey);
    }


.user-info .user-id {
    display: block;
    font-size: 1.3rem;
    line-height: 1.5rem;
    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(--brand-color1);*/
    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;
    font-weight: 400;
    color: var(--site-grey);
    display: block;
    margin: 0 0 5px;
}

.navlink.active .navlink-heading,
.navlink:hover .navlink-heading,
.navlink:hover {
    color: var(--site-highlight);
}

.navlink.active {
    border-color: var(--site-highlight);
}

.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(--brand-color1);
}

.navlink .txt span {
    display: block;
    height: 28px;
    overflow: hidden;
    margin: 5px 0 0;
}





/*------------------- myAccount */
#myAccount #container {
    overflow: initial;
}

#myAccount #mainContent {
    margin: 0 auto 50px;
    border: none;
    width: 100%;
    /*border:1px solid #fc0;*/
}
#myAccount .loginFrame {
    z-index:0;

}

/*--------------*/
.myacc-block {
    display: block;
    margin: 0 auto;
    background: #fff;
    border-radius: 4px;
    padding: 8.6rem 2.94rem 2.94rem;
    border: 1px solid var(--site-border);
    /*min-height: 75vh;*/
    position: relative;
    max-width: 1220px;
}

.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: 220px;
        text-align: center;
        text-decoration:none;
    }

        .user-submit .button.line:hover {
            background: var(--dd-light-grey);
            color: #fff;
        }

.basket-name {
    color: var(--site-highlight);
    margin-left: 0.68rem;
}

.clientSave {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    border-top: 1px solid var(--site-border);
    padding-top: 20px;
    margin-top: 40px;
}


#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(--site-highlight);
}

    .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:1px solid 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(--site-highlight);
            font-size: 0.68rem;
            letter-spacing: 0.013rem;
        }

            .order-list-item .ord-download .button:hover {
                background: var(--site-highlight);
                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(--site-highlight);
    }

    .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(--site-highlight);
    border-color: var(--dd-light-grey);
}

.edit-icon, .delete-icon {
}

.button.user-action {
    position: absolute;
    inset: 20px 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(--site-highlight);
    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;
}

#myDetails .clientSave .button {
    width: 250px;
}


/*--------------*/
#myOrders {
    display: block;
    padding: 0;
    margin: 4rem auto;
}

    #myOrders li {
        list-style: none;
        padding: 20px 10px;
        border: 1px solid var(--site-border);
        margin: 0 0 20px;
        border-radius: 4px;
        background: #fff;
        width: 100%;
    }

        #myOrders li > div {
            display: flex;
            width: 100%;
        }

        #myOrders li:hover {
            background: rgba(107, 89, 89, 0.02);
        }

        #myOrders li > div > div {
            padding: 0 10px;
            min-width: 15%;
        }

        #myOrders li > div:not(.tracking-info) > div span:not(.ladda-label):first-of-type {
            display: block;
            font-weight: 600;
            font-size: 12px;
            letter-spacing: 0.5px;
            padding: 0 0 10px;
            color: #a0a7af;
            text-transform: uppercase;
        }

        #myOrders li > div:not(.tracking-info) > div:first-of-type > span:not(.ladda-label):nth-of-type(2) {
            font-size: 16px;
        }

        #myOrders li > div.tracking-info {
            width: 100%;
            padding: 20px 0 0;
        }

            #myOrders li > div.tracking-info a {
                color: #23a9be;
                font-weight: bold;
            }

            #myOrders li > div.tracking-info .details {
                padding-bottom: 20px;
            }

                #myOrders li > div.tracking-info .details > div {
                    width: 100%;
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;
                    padding-bottom: 5px;
                }

            #myOrders li > div.tracking-info .label {
                font-weight: 600;
                font-size: 12px;
                letter-spacing: 0.5px;
                color: #a0a7af;
                text-transform: uppercase;
            }

            #myOrders li > div.tracking-info h5 {
                padding-left: 10px;
            }

            #myOrders li > div.tracking-info .order-tracking-line-heading {
                padding-bottom: 10px;
                text-transform: uppercase;
                font-style: italic;
            }

#invoice-history .row span {
    word-break: break-word;
}

#myDetails {
    display: block;
    margin: 0 auto;
}

    #myDetails .borderbox {
        margin-bottom: 25px;
    }

        #myDetails .searchPostcode,
        #myDetails .borderbox .details {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            justify-content: space-between;
            min-height: 50px;
            display: inline !important;
        }

    #myDetails .details input {
        width: 100%;
        background: #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%;
}

#myDetails .clientSave .button {
    width: 250px;
}


/* account-navigation - update 15/07/25 _ddkm. */
#accountBox{
}
    








.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 100px;
}

    .account-navigation > div {
        padding: 10px;
    }

    .account-navigation .navlink {
        border: 1px solid var(--site-border);
        background: #fff;
        padding: 2% 6%;
        min-height: 80px;
        display: flex;
        gap: 10px;
        height: 100%;
        align-items: center;
    }

        .account-navigation .navlink .tab-trigger {
            width: 100%;
            display: flex;
            gap: 15px;
        }

.navlink .tab-trigger svg {
    position: relative;
    top: 2px;
}

.account-navigation .navlink .txt {
    font-size: 12px;
}

    .account-navigation .navlink .txt span {
        font-family: 'Roboto', sans-serif;
    }

    .account-navigation .navlink .txt .navlink-heading {
        font-weight: bold;
        font-size: 14px;
        text-transform: uppercase;
        color: #23a9be;
    }

.account-navigation .navlink:hover,
.account-navigation .navlink:has(.selected) {
    background: var(--site-highlight);
    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;
}

.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;
}


#myAccount .account-navigation.temp-hide,
#myAccount #userInfo.temp-hide {
    display: none;
}

/*#addressDetails*/
.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(--site-highlight);
            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(--site-highlight);
    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);
        border: 1px solid var(--site-border);
        background: transparent;
        font-weight: 600;
        text-transform:uppercase;
    }

    .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(--site-highlight);
            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: 20px 100px auto auto;
            margin: auto;
            background: #a7b6c8;
        }

/*----------------------------------------------------------------------------------------------------------------------- Begin Responsive Queries*/
/* ----------------------------------------------------------------------- Min Withs Smallest to largest */
@media only screen and (min-width: 768px) {
}

@media only screen and (min-width: 1024px) {
    #myAccount {
        padding-top:9.2rem;
    }
        #myAccount #icon_login {            
            color: var(--brand-color1);
            pointer-events:none;
        }
    #myAccount #accountBox {
        inset: 13rem 0 0;
        margin: 0 auto;
        box-shadow: none;
        height: 170px;
        width: calc(100% - 40px);
        max-width: 1220px;
        border: 1px solid var(--site-border);
        padding: 0.85rem 1.5rem 0.85rem;
        overflow: hidden;
        border-radius: 4px;
        transition: all var(--bez) 0.13s;
        z-index: 400;
        position: fixed;
        background: #fff;
    }

        #myAccount #masthead.docked #accountBox {
            top:9.96rem;
            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(6,minmax(14%,16%));
        gap: 0.85rem 1.85rem;
        width: 100%;
        padding: 0;
        height:auto;
    }
       

    #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:0;
        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(--site-highlight);
        }

        
        #myAccount #accountBox .navlink.active .navlink-heading {
            color: var(--site-highlight);
        }

        #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: 1180px) {
}

@media only screen and (min-width: 1280px) {
    #myAccount #siteNavigation #loggedIn {
        background: var(--dd-bkg1);
        color: var(--dd-grey);
        cursor: initial;
    }
    /*myAccount*/
    #myAccount #bodyMain {
        padding: 0;
    }
    #myAccount #accountBox {
        height: 160px;
    }
}

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

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

/* ----------------------------------------------------------------------- MAX Withs Largest to smallest */

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

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

@media only screen and (max-width: 1279px) {
    
    #myAccount #container { 
        padding-top: 11rem;
    }

    /*My Account*/
    #myAccount #accountBox {
        inset: 10.6rem 0 0;        
    }
    #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;
            }
}

@media only screen and (max-width: 1179px) {
    #myAccount #accountBox {
        inset: 8rem 0 0;
        padding: 0.85rem;
        height: 130px;
    }
    #myAccount .loginFrame {
        z-index: -1;
    }
    #myAccount #masthead.docked #accountBox {
        top: 7.1rem;
        height: 90px;
        padding: 0.65rem;
    }
    #myAccount #container {
        padding-top: 5.8rem;
    }
    #myAccount #accountBox .userNav {
        gap: 0.85rem 1.0rem;
    }
    #myAccount #accountBox .user-info {
        padding: 0;
    }

    #myAccount #masthead.docked #accountBox .user-info {
        margin: 0;
    }
    #myAccount #accountBox .user-detail {
        gap: 4px 10px;
        width: 45%;
        max-width: 310px;
    }
    
    .navlink .navlink-heading {
        font-size: 0.94rem;
        line-height: 1.04rem;
        margin: 0 0 2px;
    }
    
    .address-actions button {
        padding: 0.65rem;
        line-height: 0.86rem;
    }
    .address-box {
        padding: 1.85rem 0.85rem 0.85rem;
    }
    .address-actions {
        gap: 4px;
    }
    .blk-header{
        padding:1.85rem;
    }
    .myacc-block {
        padding: 7.6rem 1.86rem 1.86rem;
    }
}

@media only screen and (max-width: 1023px) {
    /*My Account*/
    
    #myAccount #icon_login {
        color: var(--brand-color1);
    }
    #myAccount #pageContent {
        padding-top: 3rem;
    }
    .loginFrame {
        width: 100vw;
        right: -100vw;
        
    }
    #myAccount .loginFrame {
        z-index: 10;
        
    }
    #myAccount #masthead.docked #accountBox,
    #myAccount #accountBox {
        padding: 0;
    }

        #myAccount #accountBox .user-detail {
            width: 100%;
            max-width: initial;
            gap: 6px 10px;
        }
        #myAccount #accountBox .user-info, 
        .user-info {
            padding: 1.0rem 3.85rem 0.85rem;
            height: 100px;
        }
        #myAccount #accountBox .userNav,
        .userNav {
            padding: 2.85rem 3.85rem;
            gap: 1.13rem;
        }
    #myOrders {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        min-width: 100%;
        margin: 10px 0 0;
    }
    .borderbox {
        padding: 30px;
 
    }
    .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;
    }
    #myOrders li > div > div {
        padding-bottom: 20px;
    }
    /*account*/


    .myacc-block {
        margin: 0 auto;
        padding: 8rem 1.85rem 1.85rem;
    }

    .inv_list-item .inv-download {
        width: 15%;
    }

    .inv_list-item .inv-date {
        width: 25%;
    }

    .blk-header {
        padding: 1.85rem 1.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;
    }
}

@media only screen and (max-width: 767px) {
    /*My Account*/
    .loginFrame{
        max-width:initial;
    }
    
    .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;
        }

    
    #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 2.85rem;
    }
    .address-box .listing {
	    min-height: 3rem;
        margin:0.85rem 0 0
    }
    .shopping-list-results {
        width: 100%;
    }
    
    .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%;
        }
    /*.myacc-block {
        padding: 10rem 1.85rem 1.85rem;
    }
    #address-details {
        padding-top: 11rem;
    }*/
    #myDetails .clientSave{
        justify-content:center;
    }
    .clientSave {
        gap: 0.85rem;
    }
    .clientSave .button,
    .clientSave .button.cancel,
    .button.user-action {
        position:relative;
        inset:initial;
        margin:0;
    }
    #shopping-lists .button.user-action{
        display:flex;
        margin:0 auto 1.85rem;
    }
    #myOrders {
        margin-top: 1.85rem;
    }
}

@media only screen and (max-width: 599px) {
    #myAccount #pageContent {
        padding-top: 8rem;
    }
    .user-checkout a {
        width: 100%;
        text-align: center;
    }
    /*my account*/
    #myOrders li > div > div {
        padding: 0 10px 10px;
        width: 100%;
    }
    .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%;
        }
    /*account*/
    #myAccount #pageContent {
        padding-top: 6rem;
    }
    #myAccount #accountBox .userNav, 
    .userNav {
        padding: 2.85rem 1.85rem;
    }
    

    .user-info {
        padding: 0.65rem 0.85rem 0.55rem 3.35rem;
        margin: 0 auto;
        height: 110px;
    }
        .user-info .close{
            height:46px;
        }
        .navlink .txt span {
            height: auto;
        }
    .button-nav .navlink.user-action {
        position: absolute;
        inset: 30px auto auto 20px;
        max-width: 50%;
        min-width: 88vw;
    }

    .myacc-block {
        padding: 6rem 0.85rem 1.85rem;
    }
    .myacc-block .blk-header {
        padding: 0.85rem 0.85rem;
        font-size: 1.68rem;
        line-height: 1.88rem;
    }
    .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;
    }
    .order-list-item .ord-download .button{
       
    }
    .shopping-list-results .basket-name {
        display:block;
        margin:0.25rem 0 0;
    }
    .current-basket-items a{
        display:block;
        word-break:break-all;
    }
    table.current-basket-items tr th:nth-child(3),
    table.current-basket-items tr td:nth-child(3) {
        padding:0;
    }
    .clientSave {
        flex-direction: column;
        align-items: center;
    }
    .clientSave .button{
        width:100%;
        
    }

}
/*iphone6 + regular android*/
@media only screen and (max-width: 479px) {
}
/*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) {
}

/* Portrait Orientation */
@media screen and (orientation: portrait) {
}

/*--------------------------------------------------------------------- End Responsive Queries*/