/*
* Public side of the members area
*/
.contentPageWrap.membersWrap.publicMembersArea {

    padding: 0 64px 64px 64px;
    max-width: 700px;
    margin: 0 auto;

    @media @flyout {
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    @media @mobile {
        padding-left: 0;
        padding-right: 0;
    }

    &.fullWidth {
        max-width: 100%;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .innerPageContent {
        max-width: 1080px;
        margin: 0 auto;
        padding-bottom: 0;
        border-bottom: none;

        @media @flyout {
            max-width: 100%;
        }

        .pageHeading {
            &:before {
                width: 100%;
            }
        }

        form {
            width: 100%;
        }
    }

}

.expressRegister {
    margin-top: 100px !important;
}

/*
 * Register / Login
 */
.memberLogin, .memberRegister {
    float: none;
    clear: both;
    margin: 0;


    h4 {
        margin-top: 0;
        margin-bottom: 16px;
        .rems(24);
        line-height: 32px;
    }

    .button {
        min-width: 115px;
    }
}

.memberRegister {
    margin-right: 0;
    float: none;
    clear: both;
    width: 100%;
    position: relative;

    .iconList {
        margin: 0 0 24px;

        li {
            padding-left: 32px;
            margin-bottom: 4px;
            position: relative;

            &:last-child {
                margin-bottom: 0;
            }


            &:before {
                .fa('f00c');
                position: absolute;
                top: 0;
                left: 0;
                color: var(--primary_color);
                display: flex;
                justify-content: flex-start;
                width: 24px;
            }
        }
    }

    .buttonAlt, .button {
        margin-top: 16px;
    }
}



.registerMember {

    h3 {
        color: var(--text_color);
        text-align: left;
        .rems(20);
        line-height: 24px;
        margin: 0 0 24px;
        float: none;
        clear: both;
    }



    .chosen-container {
        max-width: none;

        .chosen-search {
            margin: 7px;

            input {
                display: none;
            }

            &:before, &:after {
                display: none;

            }
        }

        &.chosen-container-single-nosearch {
            //display: none;
        }
    }

}

.memberFormWrap {

    fieldset {
        h3 {
            color: var(--text_color);
            text-align: left;
            .rems(16);
            line-height: 18px;
            margin: 0 0 24px;
            float: none;
            clear: both;
        }
    }
}

.loginSubmitFooter {

    button {
        margin: 0;

        @media @mobile {
            width: 100%;
        }

    }

    .formLink {

        position: relative;
        .rems(12);
        line-height: 14px;

        .formLinkText {
            color: var(--text_color) !important;
        }
    }

}

.memberLogin.sidebarLogin {




}

/*
 * Member Links on welcome screen
 */

.memberLinks {


    float: none;
    clear: both;
    max-width: 1000px;

    @media @members_split {
        border-top: 1px solid var(--border_color);
        padding-top: 24px;
        margin-top: 24px;
        padding-bottom: 16px;
    }


    .memberLink {
        float: none;
        clear: both;
        width: 100%;
        padding: 0;
        margin: 0 auto 24px auto;


        a {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            text-decoration: none;

            &:hover {

                h6 {
                    color: var(--text_color);
                }

            }

        }


        .titleContainer {

            float: none;
            clear: both;
            width: ~"calc(100% - 260px)";

            @media @mobile {
                width: 100%;
            }


            h6 {
                float: none;
                clear: both;
                padding: 0;
                margin: 0;
                color: var(--text_color);

                @media @members_split {
                    text-align: center;
                    padding: 0;
                    padding-top: 16px;
                    margin-bottom: 8px;
                    display: flex;
                }

                @media @mobile {
                    justify-content: center;
                }


                i {
                    .rems(32);
                    line-height: 32px;
                    padding-right: 16px;
                }

                display: flex;
                align-items: center;
            }
        }

        .buttonContainer {

            width: 260px;
            display: flex;
            justify-content: flex-end;
            align-items: flex-start;

            @media @mobile {
                width: 100%;
                justify-content: flex-start;
                padding-top: 16px;
            }

            span {
                .button();
                padding: 12px 16px;
                float: none;
                clear: both;
                width: 100%;
                margin-bottom: 0;
                max-width: 250px;

                @media @mobile {
                    width: 100%;
                    max-width: none;
                }

            }
        }
    }
}

/*
 * Register page
 */

.registerYourAddress, .registerYourDetails {


    float: none;
    clear: both;
    width: 100%;
    margin: 0 0 40px;

    .row {
        float: none;
        clear: both;
        display: flex;
        flex-wrap: wrap;
        align-items: center;

        &:before, &:after {
            display: none;
        }


    }
}




.registerYourAddress {
    margin-right: 0;


    .inputWrap {




        input:read-only {
            opacity: 0.5;

            &:focus {
                border-color: var(--border_color);
            }
        }

        #billingPostcodeSearch {
            opacity: 1 !important;
        }
    }
}

.registrationSubmit {
    clear: both;
    width: 100%;
}



/*
 * Edit Your Details
 */
.detailsGrid {
    display: flex;
    flex-wrap: wrap;
    width: ~"calc(100% + 32px)";
    margin: 0 -16px -24px -16px;
    float: none;
    clear: both;

    @media all and (max-width: 1160px) {
        width: 100%;
        margin: 0;
    }

    &:before, &:after {
        display: none;
    }

    .detailsCol {
        width: 50%;
        padding: 0 16px 24px 16px;
        float: none;
        clear: both;

        @media all and (max-width: 1160px) {
            width: 100%;
            margin-bottom: 24px;
            padding: 0;
            padding-bottom: 16px;
            border-bottom: 1px solid var(--border_color);

            &:last-of-type {
                margin-bottom: 0;
                border-bottom: none;
                padding-bottom: 0;
            }
        }

        fieldset {
            min-width: 0;
            max-width: 100%;
            width: 100%;

            h6 {
                .rems(24);
                line-height: 32px;
                margin: 0 0 8px;
                font-weight: normal;
            }

            p {
                margin-bottom: 24px;
                .rems(14);
                line-height: 20px;
                opacity: 0.64;
            }
        }
    }

    #ship-state {
        display: none;
    }


    .row {
        .row {
            &:last-of-type {
                margin-bottom: 0;
            }
        }
    }


}

.membersFormActions {
    float: none;
    clear: both;
    display: flex;
    align-items: center;
    width: 100%;
    padding-top: 8px;
    flex-wrap: wrap;

    &:before, &:after {
        display: none;
    }

    .button {
        float: none;
        clear: both;
        display: flex;
        align-items: center;
        margin: 0;
        min-width: 124px;
        text-align: center;
        justify-content: center;

        @media @mobile {
            width: 100%;
        }

        i {
            @media @mobile {
                margin-left: auto;
            }
        }
    }

    .buttonAlt {

        margin: 0;
        min-width: 124px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;

        @media @mobile {
            width: 100%;
            margin-top: 16px;
            order: 2;
        }

        & + .button {

            margin-left: auto;

            @media @mobile {
                order: 1;
                margin-left: 0;
            }
        }
    }
}

#changePasswordCustomerDetails {
    margin-right: 0;
}



/*
 * Forgot your password
 */

form.reminder {
    max-width: 600px;

    .button {
        @media @members_split {
            width: 100%;
            max-width: none;
            margin-bottom: 16px;
        }
    }

    .row {
        a:not(.button) {
            @media @members_split {
                padding: 0;
                width: 100%;
                text-align: center;
                display: block;
            }
        }
    }
}



/*
* Log out
*/
.logoutText {
    padding: 80px 0;
    max-width: 640px;
    margin: 0 auto;

    @media @flyout {
        padding: 0;
    }

    h4 {
        .rems(24);
        line-height: 32px;
        margin-bottom: 24px;
    }
}


/*
* Reset Password
*/
.resetPasswordWrap {
    max-width: 640px;
    margin: 0 auto;

    @media all and (max-width: 840px) {
        max-width: 100%;
        width: 100%;
    }

    .introBlock {
        text-align: left;
        margin-bottom: 24px;

        @media all and (max-width: 840px) {
            margin-bottom: 16px;
        }
    }

    form.reminder {
        @media all and (max-width: 840px) {
            max-width: 100%;
            width: 100%;
            margin: 0;
        }
    }

    .resetSubmit {
        .button {
            @media all and (max-width: 840px) {
                width: 100%;
                max-width: 100%;
            }
        }
    }
}


/*
* Alerts
*/
.membersAlerts {

    float: none;
    clear: both;
    width: 100%;

    & > div {
        margin-bottom: 24px;
    }

}

/*
* Members layout
*/
.membersAreaWrap {

	background: #fff;


    .membersAreaContentWrap {

        display: flex;

        @media @flyout {
            flex-wrap: wrap;
        }

        .memberAreaMenuWrap {
            width: 30%;
            flex: 0 0 30%;
            padding: 64px 0 67px;
            background: var(--light_color);
            position: relative;
            max-width: 500px;
            min-width: 300px;

            .fixedHeader & {
                padding: (@header_height + 48px) 0 48px;
            }


            @media @flyout {
                width: 100%;
                flex: 1 0;
                flex-basis: 100%;
                padding: 24px 0;
                max-width: 100%;
                min-width: 100%;

                .fixedHeader & {
                    padding: (@header_height + 24px) 0 24px;
                }

            }

            &:before {
                content: "";
                display: block;
                position: absolute;
                top: 0;
                right: 100%;
                bottom: 0;
                width: 100vw;
                background: var(--light_color);
            }

            &:after {
                content: "";
                display: none;
                position: absolute;
                top: 0;
                left: 100%;
                bottom: 0;
                width: 100vw;
                background: var(--light_color);

                @media @flyout {
                    display: block;
                }
            }
        }

        .membersAreaContent {
            flex: 1 1;
            width: 70%;
            flex-basis: 70%;
            padding: 64px 0 67px 84px;



            @media @flyout {
                width: 100%;
                flex-basis: 100%;
                padding: 40px 0;
            }

            @media @mobile {
                padding: 24px 0 40px;
            }

            .fixedHeader & {
                padding: (@header_height + 64px) 0 67px 84px;

                @media @flyout {
                    padding: (@header_height + 24px) 0 24px;
                }

                @media @mobile {
                    padding: (@header_height + 24px) 0 24px;
                }
            }

            .introBlock {

                text-align: left;
                margin-bottom: 24px;

                &.dashboardIntro {
                    margin-bottom: 16px;
                }

                .innerIntro {
                    max-width: 100%;
                }

                .introContentWrap {
                    max-width: 100%;
                }

                .introTitle {

                    .headingStyle(h1);
                    font-weight: normal;

                    & + .introContentWrap {
                        margin-top: 12px;
                    }

                    &.smallTitle {
                        .headingStyle(h3);

                        @media all and (max-width: 440px) {
                            .headingStyle(h3);
                        }
                    }

                }

            }

        }

    }


    /*
    * Previous orders
     */
    .previousOrder {

        .orderBasket {
            margin-bottom: 40px;
            padding: 16px 24px 24px;
            background: var(--light_color);
            border-radius: var(--border_radius);

            .bagItemsHeader {
                margin-bottom: 8px;
            }

            .orderItems {
                .rems(14);
                line-height: 16px;
            }

            .multiPriceBlock {
                strong {
                    font-weight: normal !important;
                }
            }

            strong {
                .multiPriceBlock {
                    strong {
                        font-weight: bold !important;
                    }
                }
            }
        }

        #totals {
            border-collapse: collapse;
            margin-top: 16px;

            td {
                border-radius: 0 !important;
                background-color: transparent !important;
            }
        }

    }



    .editDetailsWrap {

        .successMessage {
            margin-bottom: 24px;
        }

    }

    /*
    * Action buttons
     */
    .actionButtons {
        padding: 40px 0 0;
        margin: 40px 0 0;
        border-top: 1px solid var(--border_color);
        display: flex;
        float: none;
        clear: both;
        width: 100%;

        @media all and (max-width: 500px) {
            padding: 24px 0 0;
            margin: 24px 0 0;
            flex-wrap: wrap;
        }

        .actionsLeft {
            width: 50%;
            flex: 1 1 50%;
            padding-right: 8px;
            text-align: left;

            @media all and (max-width: 500px) {
                width: 100%;
                flex: 0 0 100%;
                padding: 0;
            }


            & + .actionsRight {
                @media all and (max-width: 500px) {
                    margin-top: 16px;
                }
            }

        }

        .actionsRight {
            width: 50%;
            flex: 1 1 50%;
            padding-left: 8px;
            text-align: right;

            @media all and (max-width: 500px) {
                width: 100%;
                flex: 0 0 100%;
                padding: 0;
            }
        }

        a, button {
            min-width: 160px;
            margin: 0;

            @media all and (max-width: 500px) {
                max-width: 100%;
                width: 100%;
            }
        }
    }


    /*
    * Dashboard grid
     */
    .membersContentGrid {

        display: flex;
        padding: 0;

        @media all and (max-width: 1140px) {
            padding: 0;
        }

        @media @flyout {
            padding: 0;
        }

        @media all and (max-width: 850px) {
            flex-wrap: wrap;
        }

        @media all and (max-width: 560px) {
            padding: 0;
        }

        .contentLeft {
            flex: 1 1;
            width: ~"calc(100% - 271px)";
            flex-basis: ~"calc(100% - 271px)";
            padding-right: 0;

            @media all and (max-width: 1140px) {
                width: "calc(100% - 220px)";
                flex-basis: ~"calc(100% - 220px)";
            }

            @media @flyout {
                width: ~"calc(100% - 271px)";
                flex-basis: ~"calc(100% - 271px)";
            }

            @media all and (max-width: 850px) {
                width: 100%;
                flex: 0 0 100%;
                padding: 0;
                margin: 0 0 40px;
            }

        }

        .contentRight {
            width: 271px;
            flex: 0 0 271px;

            @media all and (max-width: 1140px) {
                width: 220px;
                flex: 0 0 220px;
            }

            @media @flyout {
                width: 271px;
                flex: 0 0 271px;
            }

            @media all and (max-width: 850px) {
                width: 100%;
                flex: 0 0 100%;
            }
        }
    }


    /*
   * Dashboard Sidebar
   */
    .dashboardSidebar {

        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        padding-top: 0;

        @media all and (max-width: 1140px) {
            padding-top: 0;
        }

        @media all and (max-width: 850px) {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            width: ~"calc(100% + 24px)";
            margin: 0 -12px -24px -12px;
            padding-top: 0;

        }

        @media @mobile {
            width: ~"calc(100% + 16px)";
            margin: 0 -8px -16px -8px;
        }

        @media all and (max-width: 420px) {
            width: 100%;
            margin: 0 0 -16px;
        }

        & > li {

            width: 100%;
            margin-bottom: 0;

            @media all and (max-width: 850px) {
                padding: 0 12px;
                width: 50%;
                margin-bottom: 24px;
            }

            @media @mobile {
                padding: 0 8px;
                margin-bottom: 16px;
            }

            @media all and (max-width: 850px) {
                padding: 0;
                width: 100%;
            }

        }
    }

    .sidebarBox {

        margin: 0 0 24px;
        padding: 32px 24px;
        border-radius: var(--border_radius);
        text-align: center;
        background: #fff;
        color: var(--text_color);
        cursor: pointer;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;

        @media all and (max-width: 850px) {
            margin: 0;
        }

        @media @mobile {
            padding: 24px 16px;
        }


        .iconWrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 0 16px;
            height: 56px;

            svg {
                height: 100%;
                width: auto;

                @media @mobile {
                    height: 80%;
                }
            }
        }

        h4 {
            color: inherit;
            .headingStyle(h6);
            margin: 0 0 8px;

            @media @mobile {
                .rems(14);
                line-height: 20px;
            }
        }

        p {
            .rems(14);
            line-height: 20px;
            margin: 0;
        }

        .patientBadges {

            color: inherit;
            padding: 16px 0 0;
            display: flex;
            justify-content: center;
            width: 100%;

            @media all and (max-width: 850px) {
                display: none;
            }

            .patientBadge {
                .rems(16);
                line-height: 18px;
                font-weight: normal;
                color: inherit;
                background: var(--light_color);
                padding: 12px;
                width: 44px;
                height: 44px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                margin: 0 8px;
            }

        }

        .bottomLink {

            color: var(--secondary_color);
            padding: 24px 0 0;

            @media all and (max-width: 850px) {
                margin-top: auto;
            }

            span {
                text-align: center;
                width: 100%;
                .rems(14);
                line-height: 16px;
                font-weight: 500;
                color: inherit;

                i {
                    padding: 0;
                    margin: 0 0 0 10px;
                    color: inherit;
                }
            }

        }

    }


    .patientCtaBox, .healthcareCtaBox {

        padding: 24px 24px 32px 24px;
        border: 1px solid var(--border_color);
        transition: border-color 200ms linear;

        &:hover {

            border-color: var(--secondary_color);
            transition: border-color 200ms linear;

        }

        &:active {
            border-color: color-mix(in srgb, var(--secondary_color), var(--darken_mixin_color) 10%);
            transition: border-color 200ms linear;
        }
    }

    .ordersCtaBox {

        background: var(--secondary_color);
        color: #fff;
        transition: background 200ms linear;
        display: none;

        @media all and (max-width: 850px) {
            display: flex;
        }

        .bottomLink {
            color: #fff;
        }

        &:hover {
            background: color-mix(in srgb, var(--secondary_color), var(--darken_mixin_color) 4%);
            transition: background 200ms linear;
        }

        &:active {
            background: color-mix(in srgb, var(--secondary_color), var(--darken_mixin_color) 2%);
            transition: background 200ms linear;
        }

    }

    /*
    * Dashboard Intro Boxes
    */
    .membersWelcome {

        margin: 0 0 80px;
        padding: 16px 0 0;

        @media all and (max-width: 1140px) {
            padding: 0;
            margin: 0 0 40px;
        }

        @media @flyout {
            padding: 0;
        }

        @media all and (max-width: 560px) {
            padding: 0;
        }


        .greetingBox {

            padding: 40px;
            background: var(--primary_color);
            border-radius: var(--border_radius);
            height: 100%;
            color: #fff;
            min-height: 212px;
            position: relative;
            overflow: hidden;

            @media all and (max-width: 1200px) {
                padding: 40px 24px;
            }

            @media @flyout {
                padding: 40px;
            }

            @media all and (max-width: 560px) {
                padding: 40px 24px;
            }

            @media all and (max-width: 450px) {
                min-height: 0;
            }


            .innerGreetingsBox {
                max-width: 100%;
                position: relative;
                z-index: 2;

                @media all and (max-width: 1320px) {
                    width: 100%;
                    max-width: 100%;
                }

                @media all and (max-width: 1100px) {
                    width: 100%;
                    max-width: 281px;
                }

                @media @mobile {
                    max-width: 100%;
                    width: 100%;
                }
            }

            .greetingGraphic {

                position: absolute;
                right: -100px;
                width: 345px;
                height: auto;
                z-index: 1;
                display: block;
                top: 50%;
                transform: translateY(-50%);
                opacity: 0.24;

                @media all and (max-width: 1500px) {
                    right: 24px;
                    bottom: 8px;
                    width: 160px;
                }

                @media all and (max-width: 1320px) {
                    display: none;
                }


                @media @flyout {
                    display: block;
                    right: 40px;
                    bottom: -26px;
                    width: 216px;
                }

                @media all and (max-width: 1100px) {
                    right: 9px;
                    bottom: -4px;
                    width: 180px;
                }

                @media all and (max-width: 850px) {
                    display: block;
                    right: 40px;
                    bottom: -26px;
                    width: 216px;
                }

                @media @mobile {
                    display: none;
                }

                img {
                    width: auto;
                    height: 100%;
                }

            }

            .greetingTitle {
                color: inherit;
                .headingStyle(h3);
                margin: 0 0 8px;
            }

            p {

                margin: 0;
            }

            .buttonWrapper {
                padding: 24px 0 0;

                a {
                    margin: 0 0 -6px;
                    padding: 11px 24px;

                    @media all and (max-width: 350px) {
                        width: 100%;
                    }
                }
            }

        }

        .ordersCtaBox {
            margin: 0;

            display: flex;

            @media all and (max-width: 850px) {
                display: none;
            }
        }

        .contentLeft {
            @media all and (max-width: 850px) {
                margin-bottom: 0;
            }
        }

        .contentRight {
            @media all and (max-width: 850px) {
                display: none;
            }
        }

    }




}


/*
* Chat Area
*/
.newThreadContainer {
    padding: 24px 0 0;

    .button {
        @media all and (max-width: 500px) {
            width: 100%;
        }
    }
}

.messageList {
    width: 100%;
    float: none;
    clear: both;

    & > li {

        border-bottom: 1px solid var(--border_color);
        display:block;
        width: 100%;
        .rems(16);
        line-height: 24px;

        @media all and (max-width: 500px) {
            .rems(14);
            line-height: 20px;
        }

        & > span {
            padding: 16px 0;
            display: block;
            width: 100%;
        }

        a {
            text-decoration: none;
            cursor: pointer;
            font-weight: 500;
            position: relative;
            display: block;
            width: 100%;
            padding: 16px 56px 16px 0;
            color: var(--primary_color);
            transition: color 200ms linear;

            .fa, .fal, .far, .fas {
                float: none;
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
                pointer-events: none;
            }

            .unreadCount {
                float: none;
                position: absolute;
                right: 27px;
                top: 50%;
                transform: translateY(-50%);
                pointer-events: none;
                border-radius: 50%;
                background: var(--secondary_color);
                color: #fff;
                width: 16px;
                height: 16px;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 2px;
                .rems(10);
                line-height: 10px;
                transition: background 200ms linear;
            }

            &:hover {
                color: var(--secondary_color);
                transition: color 200ms linear;
            }

            &:active {
                color: color-mix(in srgb, var(--secondary_color), var(--darken_mixin_color) 2%);
                transition: color 200ms linear;
            }
        }

        &:first-child {
            border-top: 1px solid var(--border_color);
        }

        &.notRead {

            & > a {
                color: var(--secondary_color);

                &:hover {
                    color: color-mix(in srgb, var(--secondary_color), var(--darken_mixin_color) 4%);
                    transition: color 200ms linear;

                    .unreadCount {
                        background: color-mix(in srgb, var(--secondary_color), var(--darken_mixin_color) 4%);
                        transition: background 200ms linear;
                    }
                }

                &:active {
                    color: color-mix(in srgb, var(--secondary_color), var(--darken_mixin_color) 2%);
                    transition: color 200ms linear;

                    .unreadCount {
                        background: color-mix(in srgb, var(--secondary_color), var(--darken_mixin_color) 2%);
                        transition: background 200ms linear;
                    }
                }
            }
        }
    }

    &.smallList {

        & > li {
            .rems(14);
            line-height: 20px;
        }
    }


}

.chatLogContainer {
    border: 1px solid var(--border_color);
    border-radius: var(--border_radius);
    overflow: hidden;
    padding: 0;
    width: 100%;
    float: none;
    clear: both;

    h3 {
        color: var(--primary_color);
        font-size: 24px;
        line-height: 32px;
    }
}

.chatLog {

    float: none;
    clear: both;

    & > li {

        display: block;
        width: 100%;
        border-bottom: 1px solid var(--border_color);
        background: var(--light_color);

        &:nth-child(even) {
            background: #fff;
        }

        .messageBox {
            display: flex;
            width: 100%;
            padding: 24px;

            @media @mobile {
                padding: 16px;
            }

            .boxLeft {
                width: 32px;
                flex: 0 0 32px;
                display: flex;
                align-items: flex-start;
                justify-content: center;

                @media @mobile {
                    width: 40px;
                    flex: 0 0 40px;
                }

                i {
                    .rems(24);
                    line-height: 32px;

                    @media @mobile {
                        .rems(24);
                        line-height: 32px;
                    }
                }
            }

            .boxRight {

                width: ~"calc(100% - 64px)";
                flex: 1 1;
                flex-basis: ~"calc(100% - 64px)";
                padding: 0 0 0 24px;

                @media @mobile {
                    padding: 0 0 0 16px;
                    width: ~"calc(100% - 40px)";
                    flex: 1 1;
                    flex-basis: ~"calc(100% - 40px)";
                }

            }

            .boxHeader {
                display: flex;

                @media all and (max-width: 480px) {
                    flex-wrap: wrap;
                }

                .boxHeaderLeft {
                    width: 80%;
                    flex: 1 1 80%;
                    padding: 0 24px 0 0;

                    @media @mobile {
                        width: ~"calc(100% - 110px)";
                        flex: 1 1;
                        flex-basis: ~"calc(100% - 110px)";
                        padding: 0 16px 0 0;
                    }

                    @media all and (max-width: 480px) {
                        width: 100%;
                        flex: 0 0 100%;
                        padding: 0;
                    }
                }

                .boxHeaderRight {
                    text-align: right;
                    width: 20%;
                    flex: 1 1 20%;

                    @media @mobile {
                        width: 110px;
                        flex: 1 1 110px;
                    }

                    @media all and (max-width: 480px) {
                        width: 100%;
                        flex: 1 1 100%;
                        text-align: left;
                    }
                }

                h4 {
                    margin: 0;
                    .rems(20);
                    line-height: 28px;

                    @media @mobile {
                        .rems(18);
                        line-height: 24px;
                    }
                }

                .messageTime {
                    .rems(12);
                    line-height: 28px;
                    opacity: 0.64;

                    @media @mobile {
                        line-height: 24px;
                    }

                    @media all and (max-width: 480px) {
                        line-height: 16px;
                    }
                }
            }

            .boxMessage {
                padding: 0;
                .rems(14);
                line-height: 20px;

                @media @mobile {
                    padding: 0;
                }
            }
        }

        &.admin {

            .messageBox {

                .boxLeft {
                    i {
                        color: var(--secondary_color);
                    }
                }

                .boxHeader {
                    h4 {
                        color: var(--secondary_color);
                    }
                }

            }


        }

    }

    .userComments {

        padding: 16px 0 0;

        form {
            display: none;
            width: 100%;
            float: none;
            clear: both;
            padding: 16px 0 0;

            .row {
                margin: 0 0 16px 0;

                &:last-of-type {
                    margin: 0;
                }
            }

            .button, .buttonAlt {
                margin: 0;
            }
        }

    }
}

.chatReplyBox {

    float: none;
    clear: both;
    width: 100%;
    display: block;
    padding: 32px 24px 24px 24px;

    h2 {
        font-size: 24px;
        line-height: 32px;
    }

    form {

        textarea {
            resize: none;
            height: 240px;
            color: #878787;
            .rems(14);
            padding: 20px;
            line-height: 15px;
        }

        .actionButtons {
            margin: 0;
            padding: 0;
            border: none;

            .actionsLeft {
                @media all and (max-width: 500px) {
                    order: 2;
                    margin-top: 16px;

                    & + .actionsRight {
                        margin: 0;
                    }
                }


            }

            .actionsRight {
                @media all and (max-width: 500px) {
                    order: 1;
                }
            }
        }

    }
}


/*
* Member Tabs
*/
.ctaTabs.membersTabs {

    background: #fff;
    padding: 0;



    .tabContentWrapper {
        padding: 16px 0 0;
    }

    &.dashboardTabs {

        .tabContentWrapper {
            min-height: 362px;


            @media @flyout {
                min-height: 352px;
            }

            @media all and (max-width: 1140px) {
                min-height: 290px;
            }


            @media all and (max-width: 850px) {
                min-height: 200px;
            }
        }

    }

    .orderList.ordersFull {

        & > ul {

            width: ~"calc(100% + 16px)";
            margin: 0 -8px -16px -8px;
            display: flex;
            flex-wrap: wrap;

            & >li {
                padding: 0 8px;
                width: 100%;

                @media all and (max-width: 1080px) {
                    width: 100%;
                }

                @media @flyout {
                    width: 50%;
                }

                @media all and (max-width: 720px) {
                    width: 100%;
                }
            }

        }

    }

    .paginationWrap {
        margin-top: 16px;
    }

    .emptyOrders {
        padding: 40px 0;
        text-align: center;
        .rems(16);
        line-height: 24px;
        font-weight: 500;
        opacity: 0.64;
    }


    /*
   *  Dashboard Orders area and nhs cta
   */
    .orderFooterCta {

        text-align: center;
        margin: 0;
        .rems(12);
        line-height: 14px;
        font-weight: normal;

        .iconWrapper {
            margin-bottom: 13px;
        }

        .fullLink {
            padding: 40px 32px 32px 32px;
            width: 100%;
            height: auto;
            border: 1px dashed var(--border_color);
            border-radius: var(--border_radius);
            display: block;

        }
    }


}

.orderList {

    margin-bottom: 40px;

    &> ul {

        margin-bottom: -16px;

        & >li {
            width: 100%;
            margin-bottom: 16px;
        }
    }

    .orderBox {
        width: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;

        .orderHeader {
            width: 100%;
            flex: 0 0 auto;
            background: var(--light_color);
            border-radius: var(--border_radius) var(--border_radius) 0 0;
            padding: 12px 24px;

        }

        .innerOrderHeader {
            width: ~"calc(100% + 24px)";
            margin: 0 -12px;
            display: flex;
            flex-wrap: wrap;

            .headerCol {

                padding: 0 12px;

                .headerLabel {
                    display: block;
                    width: 100%;
                    .rems(10);
                    line-height: 12px;
                    font-weight: normal;
                    opacity: 0.64;
                }

                .headerData {
                    display: block;
                    width: 100%;
                    .rems(12);
                    line-height: 14px;
                    font-weight: normal;
                }

            }

            .orderDate {
                span {
                    min-width: 90px;
                }
            }

            .orderPostcode {
                flex: 0 0 auto;

                @media all and (max-width: 360px) {
                    display: none;
                }
            }

            .orderNumber {
                text-align: right;
                flex: 1 1 auto;

            }
        }

        .orderBody {
            width: 100%;
            flex: 1 1 auto;
            border: 1px solid var(--border_color);
            border-radius: 0 0 var(--border_radius) var(--border_radius);
            padding: 19px;
            background: #fff;

            .orderBodyWrap {

                width: 100%;
                display: flex;


                .orderBodyLeft {
                    width: 74px;

                    & + .orderBodyRight {
                        width: ~"calc(100% - 74px)";
                        padding: 0 0 0 24px;
                    }
                }

                .orderBodyRight {
                    display: flex;
                    align-items: center;
                    width: 100%;
                    padding: 0;
                }

                .imageWrap {
                    width: 74px;
                    height: 74px;
                    position: relative;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    img {
                        position: absolute;
                        width: 100%;
                        height: auto;
                    }
                }

                .orderContent {

                    .rems(12);
                    line-height: 14px;
                    font-weight: normal;
                    width: 100%;

                    .orderTitle {
                        .rems(14);
                        line-height: 16px;
                        width: 100%;
                        margin: 0;
                    }

                    .orderTotal {
                        width: 100%;
                        padding: 4px 0 0;
                        opacity: 0.64;
                    }

                    .orderStatus {
                        width: 100%;
                        padding: 4px 0 0;
                        opacity: 0.64;
                    }

                    .reorderWrap {
                        width: 100%;
                        padding: 4px 0 0;
                        font-weight: 500;
                    }

                    .orderList {

                        margin-top: 16px;
                        padding-top: 16px;
                        border-top: 1px solid var(--border_color);

                        .itemsTitle {
                            .rems(14);
                            line-height: 24px;
                            margin-bottom: 16px;
                        }

                        ol, ul {
                            margin-left: 20px;
                            margin-top: 0;
                            max-width: 90%;
                        }
                    }

                    &.prescriptionContent {

                        .orderTitle:not(.itemsTitle) {
                            margin-bottom: 8px;
                        }

                        .buttonWrapper {

                            padding-top: 24px;
                            border-top: 1px solid var(--border_color);
                            float: none;
                            clear: both;
                            width: 100%;

                            .button, .buttonAlt {
                                margin: 0;
                            }

                        }
                    }

                }
            }
        }


    }

    &.prescriptionList {

        float: none;
        clear: both;
        display: flex;
        flex-wrap: wrap;
        width: ~"calc(100% + 24px)";
        margin: 0 -12px;

        &:before, &:after {
            display: none;
        }

        .orderBox {
            height: 100%;
            display: flex;
            flex-direction: column;

            .orderBody {
                flex: 1 1 auto;

                .orderBodyWrap {
                    height: 100%;

                    .orderBodyRight {
                        height: 100%;

                        .orderContent {
                            height: 100%;
                            display: flex;
                            flex-direction: column;

                            .buttonWrapper {
                                margin-top: auto;
                            }
                        }
                    }
                }
            }
        }

        & > li {
            width: 50%;
            padding: 0 12px;
            margin: 0 0 24px;

            @media @tablet, @flyout {
                width: 100%;
            }
        }
    }

}


/*
* Intro
*/
.membersIntro {

    .introContentWrap {
        opacity: 0.64;
        .rems(14) !important;
        line-height: 24px !important;
    }

}


.healthProfileWrap {
    & > .successMessage, & > .errorMessage {
        display: block;
        float: none;
        clear: both;
        width: 100%;
        margin-bottom: 32px;
    }

    .gpSearchWrap {
        float: none;
        clear: both;
        width: 100%;

        & + div {
            float: none;
            clear: both;
            width: 100%;
        }
    }
}



.ordersPaymentAction {
    padding: 32px 0;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--border_color);
    text-align: center;
    background: var(--light_color);
    margin-top: -16px;

    @media @flyout {
        margin-top: 0;
        border-top: 1px solid var(--border_color);
    }

    .buttonWrapper {
        text-align: center;

        .button, .buttonAlt {
            margin: 0;
        }
    }
}


.doctorMembersSection {
    padding-top: 32px;
    margin-top: 40px;
    border-top: 1px solid var(--border_color);
    float: none;
    clear: both;
}

.healthProfileFieldWrap {
    float: none;
    clear: both;

    & > .row {
        float: none;
        clear: both;
        width: 100%;
    }
}


/*
* Recent orders
*/

.membersContentWrap {

	.recentOrders {

		& > li {
			margin: 0 0 24px;
		}

		.innerorderWrap {

			border-radius: var(--border_radius);
			overflow: visible;
			width: 100%;
			display: block;
			border: 1px solid var(--border_color);

			.row {
				float: none;
				clear: both;
				width: 100%;
				margin: 0 0 8px;
			}

			.orderLabel {
				font-weight: 600;
			}

			.orderHeader {
				background: var(--light_color);
				border-bottom: 1px solid var(--border_color);
				padding: 16px;

				.orderTitle {
					margin: 0;
					width: 100%;
					display: flex;
					.rems(16);
					line-height: 24px;

					@media @mobile {
						flex-wrap: wrap;
					}

					.orderID {
						width: 70%;
						text-align: left;

						@media @mobile {
							width: 100%;
						}
					}

					.orderRef {
						width: 30%;
						text-align: right;

						@media @mobile {
							width: 100%;
							text-align: left;
							margin-top: 4px;
						}
					}

					.subscriptionStatusBadge {
						margin-left: auto;
						padding: 2px 12px;
						border-radius: 4px;
						.rems(13);
						font-weight: 600;
						line-height: 22px;
						text-transform: capitalize;
						white-space: nowrap;

						&--active {
							background: #d4edda;
							color: #155724;
						}
						&--paused {
							background: #fff3cd;
							color: #856404;
						}
						&--cancelled {
							background: #f8d7da;
							color: #721c24;
						}
						&--expired {
							background: #e2e3e5;
							color: #383d41;
						}
						&--pending {
							background: #cce5ff;
							color: #004085;
						}
						&--payment-failed {
							background: #f8d7da;
							color: #721c24;
						}
						&--completed {
							background: #d4edda;
							color: #155724;
						}

						@media @mobile {
							margin-left: 0;
							margin-top: 8px;
						}
					}
				}

			}

			.orderSubscriptionTag {
				.rems(11);
				font-weight: 500;
				color: var(--highlight_color, #226B64);
				margin-left: 8px;

				i {
					.rems(10);
					margin-right: 2px;
				}
			}

			.orderStatusBadge {
				margin-left: auto;
				padding: 2px 12px;
				border-radius: 4px;
				.rems(13);
				font-weight: 600;
				line-height: 22px;
				white-space: nowrap;
				// Default
				background: #e2e3e5;
				color: #383d41;

				// Status 1 - Order Received
				&--1 { background: #cce5ff; color: #004085; }
				// Status 2 - Processing
				&--2 { background: #fff3cd; color: #856404; }
				// Status 3 - Shipped
				&--3 { background: #d4edda; color: #155724; }
				// Status 4 - Part Refunded
				&--4 { background: #fff3cd; color: #856404; }
				// Status 5 - Refunded
				&--5 { background: #e2e3e5; color: #383d41; }
				// Status 6 - Waiting For Response
				&--6 { background: #fff3cd; color: #856404; }
				// Status 9 - Cancelled
				&--9 { background: #f8d7da; color: #721c24; }
				// Status 10 - Awaiting GP Confirmation
				&--10 { background: #cce5ff; color: #004085; }
				// Status 11 - Awaiting Prescription Status
				&--11 { background: #cce5ff; color: #004085; }
				// Status 12 - Returned
				&--12 { background: #e2e3e5; color: #383d41; }
				// Status 13 - No Response
				&--13 { background: #f8d7da; color: #721c24; }
				// Status 14 - Part of group
				&--14 { background: #e2e3e5; color: #383d41; }
				// Status 15 - Consultation Complete
				&--15 { background: #d4edda; color: #155724; }

				@media @mobile {
					margin-left: 0;
					margin-top: 8px;
				}
			}

			.orderPaymentAlert {
				display: flex;
				align-items: center;
				gap: 12px;
				background: #fff3cd;
				border: 1px solid #ffc107;
				border-radius: 6px;
				padding: 12px 16px;
				margin-bottom: 16px;

				i {
					.rems(20);
					color: #856404;
					flex-shrink: 0;
				}

				div {
					display: flex;
					flex-direction: column;
				}

				strong {
					.rems(14);
					color: #856404;
					line-height: 1.3;
				}

				span {
					.rems(12);
					color: #856404;
					opacity: 0.8;
					line-height: 1.3;
				}
			}

			.orderContent {
				padding: 16px;

				.orderListRow, .subscriptionsArea {

					.orderLabel {
						display: block;
						width: 100%;
						margin: 0 0 8px;
					}

					.orderList, .subscriptionList {
						margin-bottom: 8px;
						padding-bottom: 0;

                        li {
                            list-style: decimal;
                        }

					}

				}

			}

			.orderFooter {
				padding: 16px;
				border-top: 1px solid var(--border_color);

				.buttonWrapper {
					margin-bottom: -22px;

					.button {
						margin-bottom: 16px;
						margin-right: 16px;
						.rems(16);
						line-height: 28px;
						padding: 14px 24px;

						@media @mobile {
							width: 100%;
						}

						&:last-of-type {
							margin-right: 0;
						}
					}
				}
			}

		}

	}

}


.membersDashboardGrid {

	display: flex;
	width: ~"calc(100% + 16px)";
	margin: 0 -8px;
	flex-wrap: wrap;
	padding-top: 24px;
	padding-bottom: 48px;

	.dashBoardBox {

		display: block;
		width: 100%;
		padding: 0 8px;
		max-width: 33.333333%;
		margin: 0 0 16px;


		@media all and (max-width: 1111px) {
			max-width: 50%;
		}

		@media all and (max-width: 1000px) {
			max-width: 33.333333%;
		}

		@media all and (max-width: 750px) {
			max-width: 50%;
		}

		@media all and (max-width: 380px) {
			max-width: 100%;
		}

		& > a {
			display: block;
			position: relative;
			padding: 24px;
			border: 2px solid var(--border_color);
			border-radius: var(--border_radius);
			text-align: center;
			transition: all 200ms linear;
			height: 100%;

			&:hover, &:focus {
				border-color: var(--primary_color);
				transition: all 200ms linear;
			}

			.cardHeading {

				width: 100%;
				display: flex;
				justify-content: center;

				.iconWrapper {
					width: 40px;
					height: 40px;
					margin: 0 auto;
					position: relative;
					color: var(--primary_color);

					@media all and (max-width: 500px) {
						width: 40px;
						height: 40px;
					}

					svg {
						width: 100%;
						height: 100%;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}
				}
			}

			& > h4 {
				width: 100%;
				margin: 16px 0 0;
				.rems(16);
				line-height: 24px;
				text-align: center;
			}


		}

	}

}

.siteLogoBox {

	display: flex;
	gap: 0 24px;
	padding: 12px 0;
	margin: 24px 0;
	border-top: 1px solid rgba(0,0,0,0.16);
	border-bottom: 1px solid rgba(0,0,0,0.16);

	.logoCol {
		flex: 0 1 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.imageWrap {
		width: 80%;
		position: relative;
		padding-bottom: 17%;
		max-width: 200px;

		svg {
			width: 100%;
			height: 100%;
			object-fit: contain;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			filter: grayscale(1);
		}
	}

}

.subscriptionsStatus__editButton {
    margin-top: 24px;
}