/*********************************/
/**GLOBAL CSS***/
/*********************************/
body {
    letter-spacing: 0.16px;
}

.gray__title {
    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
    text-transform: uppercase;
    color: #9e9e9e;
    padding: 10px;
    margin: 0px;
    display: inline-block;
}

.gray__line {
    margin: 24px 10px 16px;
    height: 1px !important;
    background-color: #dadddf;
}

a {
    font-weight: 500;
}

.clr-gray {
    color: #bfbfbf;
}

.flex-1 {
    flex: 1;
}

.fs-18 {
    font-size: 18px !important;
}

.gap-2 {
    gap: 1rem !important;
}

.fs-14 {
    font-size: 14px !important;
}

.w-35 {
    width: 35% !important;
}

.grayish__blue {
    color: #5e6c84 !important;
}

.w-fixed {
    max-width: 350px !important;
}

.text-primary {
    color: #1d1d1f !important;
}

hr {
    background-color: rgb(0 0 0 / 30%) !important;
}

.app__btn {
    font-size: 14px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 1.25px;
    padding: 12px 24px !important;
    height: 44px;
    display: inline-flex !important;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.app__btn-profile {
    padding: 0px;
    border: none;
    transition: all 0.3s;
    width: 200px;
    text-align: right;
    justify-content: flex-end;
}

    .app__btn-profile:hover {
        opacity: 0.8;
    }

.app__wrapper {
    display: flex;
    flex-direction: row;
}

.mr-0 {
    margin-right: 0px !important;
}

.min-vh-90 {
    min-height: calc(100vh - 40px);
}

.text-initial {
    text-transform: initial !important;
}

.w-160 {
    width: 160px;
}

.app__header .app__logo img {
    max-width: 180px;
}

.app__content {
    margin-bottom: 50px;
}

/* CUSTOM MODAL CSS */
.cancel__appointment__modals {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: scale(0);
    transition: all 0.3s ease-in-out;
}

    .cancel__appointment__modals.is-open {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
    }

.overlay__div {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: -1;
}

.appointment__modal {
    max-width: 400px;
    background: #fff;
    border-radius: 4px;
    width: 90%;
    padding: 24px;
}

    .appointment__modal h2 {
        font-size: 24px;
        font-weight: 400;
        color: #1c1b1f;
    }

.modal__actions .yes__cancel {
    color: #b3261e;
}

.modal__actions a:not(:first-child) {
    margin-left: 24px;
}

/* CUSTOM SELECT DROPDOWN CSS */
.select__dropdowns {
    position: relative;
    width: 320px;
    border-radius: 4px;
    background-color: #fff;
}

    .select__dropdowns:not(:first-child) {
        margin-left: 16px;
    }

.dropdown__btn,
.dropdown__option {
    border-radius: 4px;
    position: relative;
    border: 1px solid #dfe1e6;
    width: 100%;
    cursor: pointer;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background: #fff;
    color: #1d1d1f;
    font-size: 16px;
    padding: 10px;
    font-weight: 400;
    transition: all 0.3s ease-in-out;
}

    .dropdown__btn:after {
        content: "";
        position: absolute;
        top: 45%;
        right: 10px;
        width: 10px;
        height: 10px;
        -webkit-transform: translateY(-50%) rotate(45deg);
        transform: translateY(-50%) rotate(45deg);
        transition: 0.2s ease;
    }

    .dropdown__btn.toggle:after {
        top: 50%;
        transform: translateY(-50%) rotate(-135deg);
    }

.select__dropdown {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    overflow: hidden;
    border: 1px solid #dfe1e6;
    border-radius: 4px;
    background-color: #fff;
    -webkit-transform: scale(1, 0);
    transform: scale(1, 0);
    -webkit-transform-origin: top center;
    transform-origin: top center;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
    overflow: auto;
    height: 350px;
}

.select__dropdowns .select__dropdown.toggle {
    visibility: visible;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
}

.dropdown__option {
    border: none;
}

    .dropdown__option:hover {
        background-color: #e3f1fb;
    }
/*********************************/
/**SIDEBAR CSS***/
/*********************************/

.app__sidebar {
    width: 260px;
    border-right: 2px solid #dadddf;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99;
    background-color: #fff;
}

.sidebar__header {
    text-align: center;
}

.logo {
    max-width: 100px;
    display: block;
}

    .logo img {
        width: 100%;
        display: block;
        height: 100%;
    }

.nav {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.nav__link,
.nav__link:visited {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    color: #1d1d1f;
    letter-spacing: 0.1px;
    padding: 10px;
    transition: all 0.2s ease;
    border-left: 3px solid #fff;
}

    .nav__link span {
        display: inline-block;
        padding-left: 20px;
    }

    .nav__link svg {
        fill: #bfbfbf;
        transition: all 0.3s ease-in-out;
    }

/*********************************/
/**PAGE CONTENTS CSS***/
/*********************************/
.page__contents {
    background-color: #f5f5f5;
    width: calc(100% - 260px);
    margin-left: auto;
    position: relative;
}

.page__contents--inner {
    padding: 30px;
}

.page__header h3 {
    font-size: 36px;
    font-weight: 500;
    color: #1d1d1f;
}

.page__header p {
    margin-bottom: 0;
}

.contents__left {
    margin-right: 30px;
    flex: 1;
}

.page__card {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 24px;
    border-radius: 4px;
    width: 100%;
    transition: all 0.3s;
}

    .page__card:hover {
        opacity: 0.8;
    }

    .page__card:not(:last-child) {
        margin-right: 20px;
    }

.page__card-disabled {
    position: relative;
    position: relative;
}

    .page__card-disabled:after {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.7);
        content: "";
        height: 100%;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        z-index: 1;
    }

.page__card img {
    width: 40px;
    display: block;
}

.page__card:first-child img {
    width: 30px;
}

.page__card--text {
    margin-left: 16px;
    margin-right: 16px;
}

    .page__card--text h3 {
        font-size: 18px;
        font-weight: 500;
        color: #fff;
        margin-bottom: 5px;
    }

    .page__card--text p {
        margin-bottom: 0;
        font-weight: 400;
        color: #dadddf;
    }

.page__card--icon {
    font-size: 12px;
    color: #ffffff;
    cursor: pointer;
    margin-left: auto;
}

/*********************************/
/**PAGE RIGHT CONTENTS CSS***/
/*********************************/
.contents__right {
    width: 380px;
}

.profile__img {
    width: 60px;
    height: 60px;
    background-color: #ffab00;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
}

.profile__name {
    color: #1d1d1f;
    font-weight: 600;
    margin-bottom: 0px;
    font-size: 14px;
}

.app__btn:nth-of-type(2) {
    margin-left: 10px;
}

.promotion__banner a {
    overflow: hidden;
    border-radius: 4px;
    display: block;
}

    .promotion__banner a img {
        object-fit: cover;
        width: 100%;
    }

.user__profile .sidebar__header,
.sidebar__header-icon,
.hide-on-desktop {
    display: none !important;
}

.hide-on-mobile {
    display: flex !important;
}

.user__profile.hide-on-mobile {
    display: block !important;
}

/*********************************/
/**APPOINTMENT CSS***/
/*********************************/
.app__table-header {
    border-bottom: 0px solid #dadddf;
    margin-bottom: 8px;
}

.app__table-body h4 {
    font-weight: 400;
    font-size: 16px;
}

.request__message {
    max-width: 33%;
}

.appointment__list {
    background: #f4f5f6;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-radius: 4px;
    margin-top: 20px;
}

.appointment__lists-border .appointment__list {
    background: #fff;
    border: 1px solid #dadddf;
}

.appointment__list > div {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}

.appointment__list svg {
    width: 25px;
}

.alist__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #dadddf;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background: #fff;
}

.appointment__list svg path {
    fill: #bfbfbf;
}

.alist__name svg path {
    fill: #4d3e9e;
}

.appointment__list h4 {
    margin-left: 8px;
    font-size: 16px;
    font-weight: 400;
    color: #1d1d1f;
    margin-bottom: 0px;
}

.alist__name h4 {
    font-weight: 500;
    margin-left: 16px;
}

/*********************************/
/**APPOINTMENTS SUCCESS CSS***/
/*********************************/
.contents__success {
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/*********************************/
/**ORDER REPEAT CSS***/
/*********************************/

.app__card-box h5 {
    color: #1d1d1f;
    font-weight: 500;
}

.app__card-box p,
.app__card-box span {
    color: #161616;
    font-size: 14px;
}

.app__loading {
    justify-content: center;
}

/*********************************/
/**PROFILE SETTINGS CSS***/
/*********************************/
.profile__information,
.profile__information-list {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

    .profile__information:not(:last-child) {
        border-bottom: 1px solid #dadddf;
        padding-bottom: 16px;
    }

    .profile__information.no-border {
        border-bottom: none !important;
    }

.profile__information-icons a {
    display: block;
    margin-left: 0px !important;
}

.app__form label {
    color: #1d1d1f;
    font-weight: 400;
    font-size: 16px;
    text-transform: none;
    margin-bottom: 8px;
}

.app__card-form .form-control {
    max-width: 100%;
}

.input__icon {
    position: absolute;
    bottom: 8px;
    right: 12px;
    cursor: pointer;
    padding: 4px;
    background-color: transparent;
}

.select__date .dropdown__btn,
.select__date .dropdown__option {
    background: #fafbfc;
    color: #606060;
}

    .select__date .dropdown__btn:after {
        border-color: #606060;
    }

/*********************************/
/**LOGIN CSS***/
/*********************************/

.form__title {
    font-weight: 500;
    font-size: 26px;
    text-align: center;
}

.card__form-input {
    position: relative;
}

.card__form-group.error input {
    border-color: #b3261e;
}

.error__text {
    color: #b3261e;
    font-size: 12px;
    font-weight: 400;
    display: none;
}

.card__form-group.error .error__text {
    display: block;
}

.val__error {
    color: #b3261e;
    font-size: 14px;
    font-weight: 400;
    display: block;
}

.form__actions {
    text-align: center;
}

.app__btn-nhs {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 16px;
    gap: 8px;
    height: 44px;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    color: #fff !important;
    box-shadow: 0px 3px 0px #003087;
    border-radius: 4px;
}

    .app__btn-nhs svg {
        height: 24px;
        width: 61px;
    }

.app__btn-img {
    display: block;
    height: 48px;
}

    .app__btn-img img {
        height: 100%;
    }

.actions__separator {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    display: block;
    color: #9e9e9e;
    text-align: center;
    line-height: 1;
}

.card__form-checkbox,
.card__form-checkbox label {
    display: flex;
    flex-direction: row;
    align-items: center;
}

    .card__form-checkbox label {
        font-size: 16px;
        font-weight: 400;
        margin: 0px;
        padding-left: 24px;
        cursor: pointer;
        position: relative;
        display: block;
    }

    .card__form-checkbox input {
        position: absolute;
        left: -9999999px;
    }

    .card__form-checkbox label:before {
        content: "";
        font-size: 12px;
        line-height: 1.25;
        text-align: center;
        position: absolute;
        width: 16px;
        height: 16px;
        left: 0px;
        top: 50%;
        border-radius: 4px;
        border: 1px solid #9e9e9e;
        transform: translateY(-50%);
    }

    .card__form-checkbox input:checked + label:before {
        color: #fff;
        content: "\2713";
    }

.info__summary {
    display: none;
}

    .info__summary.show,
    .info__summary.error,
    .info__summary.success {
        display: block;
    }

    .info__summary li {
        color: #161616;
    }

/*********************************/
/**NOT CONNECTED CSS***/
/*********************************/
.app__list-item {
    font-size: 14px;
    font-weight: 400;
    color: #5e6c84;
    padding: 0px;
    padding-top: 16px;
    line-height: 1;
}

    .app__list-item svg {
        width: 14px;
        height: 12px;
        margin-right: 8px;
    }

.before__icon .input__icon {
    right: auto;
    left: 10px;
}

.before__icon .form-control {
    padding-left: 40px;
}

.app__card-box.white {
    background-color: #fff;
}

.prescriptions .app__table-content h4 {
    font-weight: 500;
}

.table-checkbox.circle-box label {
    font-weight: 500;
    color: #1d1d1f;
}

.check__information .form-label {
    font-size: 14px;
    text-transform: uppercase;
    color: #9e9e9e;
    font-weight: 400;
    margin-bottom: 5px;
}

/*********************************/
/**RESPONSIVE CSS***/
/*********************************/

@media only screen and (max-width: 1300px) and (min-width: 1000px) {
    .page__contents--inner {
        flex-direction: column;
    }

    .contents__left {
        margin-right: 0px;
    }

    .contents__right {
        width: 100%;
    }

    .appointment__list svg {
        margin-bottom: 10px !important;
    }

    .appointment__list > div {
        flex-direction: column;
    }

    .appointment__list h4 {
        margin-left: 0;
    }

    .alist__icon svg {
        margin-bottom: 0px !important;
    }

    .alist__icon {
        margin-bottom: 6px;
    }
}

@media only screen and (max-width: 1000px) {
    .app__wrapper {
        flex-direction: column;
    }

    .app__header-mobile {
        height: 64px;
        display: flex;
        padding: 0px 20px;
        align-items: center;
        justify-content: space-between;
        flex-direction: row;
        border-bottom: 1px solid #dadddf;
    }

    .app__header-icon {
        line-height: 1;
        margin-left: 0;
    }

    .sidebar__header-icon {
        position: absolute;
        left: 10px;
        top: 22px;
        z-index: 99;
        line-height: 0;
        cursor: pointer;
    }

    .user__profile .sidebar__header,
    .sidebar__header-icon {
        display: flex !important;
    }

    .hide-on-desktop {
        display: block !important;
    }

    .hide-on-mobile {
        display: none !important;
    }

    .user__profile.hide-on-mobile {
        display: none !important;
    }

    .app__sidebar {
        left: auto;
        right: -100%;
        width: 100%;
        transition: all 0.3s ease-in;
    }

        .app__sidebar.is-open {
            right: 0;
        }

    .user__profile {
        position: fixed;
        top: 0px;
        left: -100%;
        transition: all 0.3s ease-in;
        width: 100%;
        height: 100vh;
        padding: 10px !important;
        padding-top: 0px !important;
        z-index: 999;
        overflow-y: auto;
    }

        .user__profile.is-open {
            left: 0;
        }

    .page__contents {
        width: 100%;
        margin-left: inherit;
    }

    .page__contents--inner {
        padding: 20px;
    }

    .page__cards {
        flex-direction: column;
    }

    .page__card {
        width: 100%;
    }

        .page__card:not(:last-child) {
            margin-right: 0px;
            margin-bottom: 20px;
        }

    .is-right-sidebar .upcomming-events {
        border-bottom: 1px solid #e5e5e5;
        padding-bottom: 20px;
        padding-top: 0;
        margin-top: 5px !important;
    }

        .is-right-sidebar .upcomming-events > div {
            flex-direction: column;
            justify-content: start;
        }

    .is-right-sidebar .app__table-date {
        border: none;
        min-height: auto;
        margin-bottom: 5px;
    }

    .is-right-sidebar .upcomming-events .mx-3 {
        margin: 0 !important;
        margin-bottom: 10px !important;
    }

    .app__table-btn {
        margin: initial;
    }

    .contents__right {
        width: 100%;
    }

    .contents__left {
        width: 100%;
        margin-right: 0px;
    }

    .appointment__list svg {
        margin-bottom: 10px !important;
    }

    .appointment__list > div {
        flex-direction: column;
    }

    .appointment__list h4 {
        margin-left: 0;
    }

    .alist__icon svg {
        margin-bottom: 0px !important;
    }

    .alist__icon {
        margin-bottom: 6px;
    }

    .w-35 {
        width: 50% !important;
    }

    .page__contents .flex-md-row {
        flex-direction: column !important;
    }

    .app__header-mobile > div {
        width: 100%;
    }

    .app__header-icon {
        flex: 0;
    }

    .app__sidebar {
        overflow-y: scroll;
    }

    .contents__right.mt-5 {
        margin-top: 0px !important;
    }
}

@media only screen and (max-width: 768px) {
    .no-right-sidebar .upcomming-events {
        border-bottom: 1px solid #e5e5e5;
        padding-bottom: 20px;
        padding-top: 0;
        margin-top: 5px !important;
    }

        .no-right-sidebar .upcomming-events > div {
            flex-direction: column;
            justify-content: start;
        }

    .no-right-sidebar .app__table-date {
        border: none;
        min-height: auto;
        margin-bottom: 5px;
    }

    .no-right-sidebar .upcomming-events .mx-3 {
        margin: 0 !important;
        margin-bottom: 10px !important;
    }

    .request__message {
        max-width: 100%;
    }

    .page__card:not(:last-child) {
        margin-bottom: 20px;
        margin-right: 0px;
    }

    .contents__left {
        margin-right: inherit;
    }

    .page__contents--inner {
        flex-direction: column;
    }

    .contents__right {
        width: 100%;
    }

    .page__header {
        padding-bottom: 0px;
    }

    .appointment__list {
        flex-direction: column;
        align-items: flex-start;
    }

        .appointment__list > div {
            flex-direction: row;
        }

            .appointment__list > div:not(:last-child) {
                margin-bottom: 10px;
            }

        .appointment__list h4 {
            margin-left: 10px;
            font-size: 16px;
        }

    .appointment__lists-pharmacy .appointment__list h4 {
        font-size: 12px;
    }

    .appointment__lists-pharmacy .appointment__list svg {
        width: 20px !important;
    }

    .select__dropdowns:not(:first-child) {
        margin-left: 0px;
        margin-top: 16px;
    }

    .select__dropdowns {
        width: 100%;
    }

    .appointment__list svg {
        margin-bottom: 0px !important;
    }

    .confirm__appointment__list > div {
        width: 50%;
        margin: 0px !important;
    }

    .confirm__appointment__list {
        flex-wrap: wrap;
    }

        .confirm__appointment__list > div:not(:nth-last-of-type(-n + 2)) {
            margin-bottom: 16px !important;
        }

    .w-47 {
        width: 100% !important;
    }

    .w-160 {
        width: auto;
    }

    .profile__information-list {
        flex-direction: column;
        align-items: flex-start;
    }

        .profile__information-list h4 {
            margin: 10px 0px 0px !important;
        }

    .app__btn-profile {
        width: 225px;
        justify-content: flex-end;
    }

    .profile__information-icons {
        flex-direction: column;
        align-items: flex-start;
    }

        .profile__information-icons a {
            margin-top: 16px !important;
        }

            .profile__information-icons a:nth-child(2) {
                margin-left: 16px !important;
            }

        .profile__information-icons h4 {
            margin-top: 0px !important;
        }

    .select__date .select__dropdowns:not(:first-child) {
        margin-left: 16px;
        margin-top: initial;
    }

    .w-35 {
        width: 100% !important;
    }

    .check__information .form-label {
        font-size: 12px;
    }
}

/*********************************/
/**TEXT COLOR and BACKGROUND COLOR  CSS****************/
/*********************************/
a,
.app__btn,
.modal__actions a,
.terms__service a {
    color: #158bde;
}

    .app__btn:hover {
        background-color: #158bde;
        border-color: #158bde;
        color: #fff;
    }

.app__btn-primary:hover {
    color: #158bde;
    background-color: #fff;
    border-color: #158bde;
}

.app__btn-primary {
    color: #fff;
    background-color: #158bde;
}

.app__btn-profile svg path {
    fill: #1d1d1f;
}

.app__btn-profile:hover {
    background-color: transparent;
    color: #158bde;
}

    .app__btn-profile:hover svg path,
    .nav__link.active svg,
    .nav__link:hover svg,
    .appointment__lists-pharmacy .alist__name svg path {
        fill: #158bde;
    }

.nav__link.active,
.nav__link:hover {
    background-color: #f8fbfd;
    color: #158bde;
    border-color: #158bde;
}

.page__card,
.app__loading span {
    background-color: #158bde;
}

.app__btn-nhs {
    background-color: #005eb8;
}

.table-checkbox input:checked + .checkbox-button__control {
    border-color: #158bde;
    background-color: #158bde;
}

.notify-icon svg {
    color: #158bde;
}

.app__card-box.alice-blue {
    border-left-color: #158bde;
}

.card__form-checkbox input:checked + label:before {
    background: #158bde;
    border-color: #158bde;
}

.dropdown__btn:after {
    border-right: 2.5px solid #158bde;
    border-bottom: 2.5px solid #158bde;
}

.page__card--modifier {
    background-color: #4d3e9e;
}

.profile__img {
    background-color: #ffab00;
}

.app__card-box.alice-purple.success {
    border-left-color: #36b37e;
}

.app__loading span:nth-child(3),
.app__loading span:nth-child(4),
.app__loading span:nth-child(5) {
    background: #c8e0f0;
}

/** Test results */
.test-results-table {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.header-row {
    display: flex;
    border-bottom: 1px solid #158bde;
    font-weight: bold;
}

.header-cell, .data-cell {
    flex: 1;
    padding: 10px;
}

.data-row {
    display: flex;
    border-bottom: 1px solid #ddd;
}

    .data-row:last-child {
        border-bottom: none;
    }

/* Highlight Name */
.data-cell.name {
    font-weight: bold;
    font-size: 1.1em;
}

/* Highlight Abnormal Readings */
.data-cell.abnormal {
    color: #ff4c4c; /* Red text for abnormal results */
    font-weight: bold;
}

.print-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    /* background-color: #f8f9fa; Optional background color */
    border-bottom: 1px solid #ccc; /* Optional bottom border */
    font-size: 1rem;
}

.link-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    font-size: 1rem;
}

.link-header-left, .print-header-left {
    flex: 1;
    text-align: left;
}

.link-header-right, .print-header-right {
    flex: 1;
    text-align: right;
}

.print-hint {
    font-size: 0.75rem; /* Smaller font size */
    color: #666; /* Subtle color to avoid distraction */
    margin-left: 10px; /* Space between the icon and the hint text */
}

/** Document preview */
.document__contents {
    width: 80%;
}

/* Responsive Styling */
@media (max-width: 600px) {
    .print-header {
        font-size: 0.875rem; /* Slightly smaller font on mobile */
        padding: 8px;
    }
}

/* Responsive Styling */
@media (max-width: 768px) {
    .header-row {
        display: none;
    }

    .data-row {
        flex-direction: column;
        border-bottom: 1px solid #ddd;
        margin-bottom: 15px;
        padding: 5px; /* Added padding for compact layout */
    }

    .data-cell {
        border: none;
        padding: 5px 0;
        position: relative;
    }

        .data-cell.name {
            margin-bottom: 5px;
        }

        .data-cell.result::before,
        .data-cell.range::before {
            content: attr(data-label);
            font-weight: normal; /* Set label font to normal weight */
            color: initial; /* Ensure default color for labels */
            display: inline-block;
            margin-right: 10px;
        }

        .data-cell.range::before {
            content: "Normal Range: ";
        }

        .data-cell.result::before {
            content: "Result: ";
        }
}

@media (min-width: 769px) {
    .data-cell::before {
        content: none;
    }
}
@media print {
    .no-print {
        display: none;
    }
}

/** Consultations */
.consultation {
    display: flex;
    /*
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #f9f9f9; */
}

.consultation-metadata {
    flex: 1;
    margin-right: 1.25rem; /* 20px / 16 = 1.25rem */
    color: #333;
}

    .consultation-metadata p {
        margin: 0 0 0.5rem; /* 8px / 16 = 0.5rem */
        font-weight: bold;
    }

.consultation-sections {
    flex: 2;
    color: #555;
}

.consultation-section {
    margin-bottom: 0.9375rem; /* 15px / 16 = 0.9375rem */
}

    .consultation-section:last-child {
        margin-bottom: 0;
    }

.section-title {
    font-weight: bold;
    color: #158bde;
    margin-bottom: 0.3125rem; /* 5px / 16 = 0.3125rem */
}

.section-line {
    margin: 0.125rem 0; /* 2px / 16 = 0.125rem */
    padding-left: 0.9375rem; /* 15px / 16 = 0.9375rem */
    text-indent: -0.9375rem; /* -15px / 16 = -0.9375rem */
}

@media (max-width: 768px) {
    .consultation {
        flex-direction: column;
    }

    .consultation-metadata {
        margin-bottom: 0.9375rem; /* 15px / 16 = 0.9375rem */
        margin-right: 0;
    }

    .consultation-sections {
        padding-left: 0.625rem; /* 10px / 16 = 0.625rem */
    }
}