.page-customer-results {
    --section-meta-display: flex;

    --section-reports-list-columns: repeat(2, 1fr);
    --section-reports-list-gap: 24px;
    --section-reports-item-name-font-size: calc(var(--typography-font-size-p) + 8px);
    --section-reports-item-label-display: flex;
    --section-reports-item-padding: 24px;
    --section-reports-item-icon-size: 72px;
    --section-reports-item-corner-size: 88px;
    --section-reports-item-details-padding: 0 20% 0 0;
    --section-reports-item-shadow-size: 4px;

    --section-patient-avatar-size: 36px;
    --section-patient-name-font-size: 36px;
    --section-patient-date-font-size: 20px;
    --section-patient-gap: 24px;

    --section-patient-details-flex-direction: row;
    --section-patient-details-gap: 16px;
    --section-patient-details-align-items: start;

    --section-downloads-padding: 24px;
    --section-downloads-item-height: 64px;
    --section-downloads-item-font-size: var(--typography-font-size-p);
    --section-downloads-item-flex-direction: row;
    --section-downloads-item-gap: 16px;

    --section-details-grid-columns: 1fr;
    --section-details-meta-grid-columns: 1fr 1fr;
    --section-details-item-height: 56px;

    @media (width <= 1440px) {
    }

    @media (width <= 1200px) {
        --section-reports-list-columns: repeat(1, 1fr);
        --section-reports-item-label-display: none;
        --section-reports-item-icon-size: 48px;
        --section-reports-item-padding: 20px 24px 16px 24px;
        --section-reports-list-gap: 12px;
        --section-reports-item-details-padding: 0;

        --section-details-grid-columns: repeat(1, 1fr);
    }

    @media (width <= 992px) {
        --section-meta-display: grid;
        --section-reports-item-corner-size: 64px;
    }

    @media (width <= 768px) {
        --section-reports-item-name-font-size: calc(var(--typography-font-size-p) + 2px);

        --section-downloads-padding: 8px 16px;
        --section-downloads-item-height: 48px;
        --section-downloads-item-font-size: var(--typography-font-size-p);
    }

    @media (width <= 576px) {
        --section-reports-item-icon-size: 36px;
        --section-reports-item-corner-size: 48px;
        --section-reports-item-shadow-size: 2px;
        --section-reports-item-padding: 16px 16px 16px 16px;

        --section-patient-avatar-size: 72px;
        --section-patient-name-font-size: 24px;
        --section-patient-date-font-size: 20px;

        --section-patient-details-flex-direction: column;
        --section-patient-details-gap: 4px;
        --section-patient-details-align-items: stretch;

        --section-details-meta-grid-columns: 1fr;
        --section-details-item-height: 36px;
    }

    @media (width <= 440px) {
        --section-patient-avatar-size: 50px;
        --section-patient-name-font-size: 24px;
        --section-patient-date-font-size: 16px;
        --section-patient-gap: 12px;

        --section-downloads-item-gap: 8px;
    }

    @media (width <= 320px) {
    }

    .section-patient {
        --report-section-padding-vertical: 24px;
        --report-section-container-justify-content: start;
        --report-section-container-align-items: stretch;
        --report-section-container-gap: 16px;

        .dropdown-container {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: start;

            .component-custom-dropdown {
                --component-width: 497px;
                --component-list-width: 100%;

                .items-list {
                    display: flex;
                    flex-direction: column;
                    align-items: stretch;
                    justify-content: start;
                    gap: 8px;

                    .list-item {
                        --background-color: rgb(from var(--color-btm-dark-blue) r g b / 0.05);

                        &[data-state="checked"] {
                            --background-color: rgb(from var(--color-btm-orange) r g b / 0.1);
                        }

                        &:hover {
                            --background-color: rgb(from var(--color-btm-orange) r g b / 0.2);
                        }

                        flex: 1;
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        justify-content: center;
                        padding: 12px;
                        border-radius: 12px;
                        text-decoration: none;
                        transition: all 0.3s linear;
                        background-color: var(--background-color);

                        &:after {
                            content: '';
                            display: block;
                            width: 24px;
                            height: 24px;
                            margin-left: 24px;
                            background-color: var(--color-btm-dark-blue);
                            mask: url('/assets/svg/arrows/right-simple-Sgb4HTd.svg') no-repeat center / cover;
                        }

                        .item-info {
                            flex: 1;
                            display: flex;
                            flex-direction: row;
                            align-items: center;
                            justify-content: start;
                            gap: 8px;

                            .name-separator {
                                font-size: 22px;
                                line-height: 1;
                                font-weight: 700;
                                color: rgb(from var(--color-btm-dark-blue) r g b / 0.5);
                                font-family: 'Roboto', sans-serif;
                            }

                            .name-patient {
                                font-size: 22px;
                                line-height: 1;
                                font-weight: 400;
                                text-transform: uppercase;
                                white-space: nowrap;
                                color: var(--color-btm-dark-blue);
                                font-family: 'Roboto', sans-serif;

                                em {
                                    display: contents;
                                    font-weight: 700;
                                    color: var(--color-btm-orange);
                                }
                            }

                            .name-test {
                                font-size: 22px;
                                line-height: 1;
                                font-weight: 300;
                                text-transform: capitalize;
                                white-space: nowrap;
                                color: var(--color-btm-dark-blue);
                                font-family: 'Roboto', sans-serif;
                            }
                        }

                        .entry-info {
                            flex: 1;
                            display: flex;
                            flex-direction: column;
                            align-items: start;
                            justify-content: start;
                            gap: 12px;



                            .patient-details {

                            }
                        }
                    }
                }
            }
        }

        .patient-card {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: start;
            gap: 16px;
            width: 100%;

            .patient-avatar {
                --avatar-icon: none;

                &[data-patient-species="human"] { --avatar-icon: url('/assets/svg/avatars/human-I5xZz14.svg'); }
                &[data-patient-species="canine"] { --avatar-icon: url('/assets/svg/avatars/canine-Vc1yyCL.svg'); }
                &[data-patient-species="feline"] { --avatar-icon: url('/assets/svg/avatars/feline-l_tKDyb.svg'); }

                position: relative;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: var(--section-patient-name-font-size);
                height: var(--section-patient-name-font-size);
                background-color: rgb(from var(--color-btm-dark-blue) r g b / 0.75);
                mask: var(--avatar-icon) no-repeat center center / cover;
            }

            .patient-name {
                font-size: var(--section-patient-name-font-size);
                line-height: 1;
                font-weight: 400;
                text-transform: uppercase;
                font-family: 'IBM Plex Sans', sans-serif;

                .first-name {
                    font-weight: 700;
                    color: var(--color-btm-orange);
                }

                .last-name {
                    font-weight: 300;
                    color: rgb(from var(--color-btm-dark-blue) r g b / 0.75);
                }
            }
        }

        .patient-details {
            display: flex;
            flex-direction: var(--section-patient-details-flex-direction);
            align-items: var(--section-patient-details-align-items);
            justify-content: start;
            gap: var(--section-patient-details-gap);

            .details-item {
                --item-color: var(--color-btm-dark-blue);
                --background-color: rgb(from #fff r g b / 0.75);

                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: start;
                gap: 8px;
                height: 34px;
                padding: 0 16px;
                border-radius: 8px;
                transition: all .2s linear;
                text-decoration: none;
                background-color: var(--background-color);
            }

            .item-date {
                font-size: 18px;
                line-height: 1;
                font-weight: 400;
                text-transform: uppercase;
                font-family: 'IBM Plex Sans', sans-serif;
                color: var(--item-color);

                &:before {
                    content: '';
                    display: block;
                    width: 24px;
                    height: 24px;
                    background-color: var(--color-btm-dark-blue);
                    mask: url('/assets/svg/misc/calendar-1t4pqlj.svg') no-repeat center center / cover;
                }

                .date-info {
                    display: contents;
                    font-weight: 600;
                    color: var(--item-color);
                }
            }

            .item-oxidation {
                --avatar-icon: none;

                &:hover {
                    --item-color: #fff;
                    --background-color: var(--color-btm-dark-blue);
                }

                font-size: 18px;
                line-height: 1;
                font-weight: 400;
                text-transform: uppercase;
                font-family: 'IBM Plex Sans', sans-serif;

                &[data-oxidation="fast"] { --avatar-icon: url('/assets/svg/ranges/oxidation/fast-ktswSom.svg'); }
                &[data-oxidation="slow"] { --avatar-icon: url('/assets/svg/ranges/oxidation/slow-ExGqhBv.svg'); }
                &[data-oxidation="mixed"] { --avatar-icon: url('/assets/svg/ranges/oxidation/mixed-ElaX7mV.svg'); }

                &:before {
                    content: '';
                    display: block;
                    width: 24px;
                    height: 24px;
                    background-color: var(--color-btm-orange);
                    mask: var(--avatar-icon) no-repeat center center / cover;
                }

                .type-name {
                    display: contents;
                    font-weight: 600;
                    color: var(--item-color);
                }

                .type-label {
                    display: contents;
                    font-weight: 300;
                    color: var(--item-color);
                }
            }
        }
    }

    .section-meta {
        --report-section-padding-vertical: 16px;
        --report-section-container-display: var(--section-meta-display);
        --report-section-container-flex-direction: row;
        --report-section-container-gap: calc(var(--report-grid-gap) / 2);

        --report-section-container-grid-columns: repeat(4, 1fr);

        .meta-item {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            padding: 4px 4px;
            border-radius: 8px;
            background-color: rgb(from var(--color-btm-dark-blue) r g b / 0.5);

            .item-label {
                padding: 0 8px;
                font-size: calc(var(--typography-font-size-p) * 0.8);
                line-height: 1;
                font-weight: 600;
                color: #fff;
                font-family: 'IBM Plex Sans', sans-serif;
            }

            .item-value {
                padding: 4px 12px;
                font-size: calc(var(--typography-font-size-p) * 0.8);
                line-height: 1;
                color: var(--color-btm-dark-blue);
                background-color: #fff;
                border-radius: 6px;
                font-family: 'IBM Plex Sans', sans-serif;
            }
        }
    }

    .section-details {
        --report-section-container-display: grid;
        --report-section-container-grid-columns: var(--section-details-grid-columns);
        --report-section-container-gap: var(--report-grid-gap);

        --section-display: flex;

        &[data-display="hidden"] {
            --section-display: none;
        }

        display: var(--section-display);
        border-top: 1px solid rgb(from var(--color-da-purple) r g b / 0.25);

        .details-meta {
            display: grid;
            grid-template-columns: var(--section-details-meta-grid-columns);
            gap: var(--report-grid-gap);

            .meta-container {
                --item-background-color: rgb(from var(--color-btm-orange) r g b / 0.1);
                --item-shadow-color: rgb(from var(--color-btm-orange) r g b / 0.5);

                display: flex;
                flex-direction: column;
                align-items: stretch;
                justify-content: center;
                padding: 12px;
                border-radius: 16px;
                background-color: #fff;
                box-shadow: 0 0 0 1px var(--item-shadow-color);

                &.meta-patient {
                    --item-shadow-color: rgb(from var(--color-btm-orange) r g b / 0.5);
                    --item-background-color: rgb(from var(--color-btm-orange) r g b / 0.1);
                }

                &.meta-reports {
                    --item-shadow-color: rgb(from var(--color-btm-dark-purple) r g b / 0.25);
                    --item-background-color: rgb(from var(--color-btm-dark-purple) r g b / 0.05);
                }

                .meta-item {
                    flex: 1;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: start;
                    gap: 6px;
                    min-height: var(--section-details-item-height);
                    padding: 0 0 0 24px;
                    background-color: var(--item-background-color);

                    &:not(:first-child) {
                        border-top: 1px solid rgb(from var(--color-btm-dark-blue) r g b / 0.1);
                    }

                    &:first-child {
                        border-radius: 8px 8px 0 0;
                    }

                    &:last-child {
                        border-radius: 0 0 8px 8px;
                    }

                    .item-label {
                        font-size: var(--typography-font-size-p);
                        line-height: 1;
                        font-weight: 700;
                        color: var(--color-btm-dark-blue);
                        font-family: 'Roboto', sans-serif;
                    }

                    .item-value {
                        font-size: var(--typography-font-size-p);
                        line-height: 1;
                        font-weight: 400;
                        color: var(--color-btm-dark-blue);
                        font-family: 'Roboto', sans-serif;
                    }
                }
            }
        }

        .details-video {
            --background-image: none;

            width: 100%;
            aspect-ratio: 16/9;
            border-radius: 16px;
            overflow: hidden;
            background-image: var(--background-image);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            background-color: var(--color-btm-dark-grey);
            box-shadow: 0 0 0 1px rgb(from var(--color-btm-orange) r g b / 0.5);
        }
    }

    .section-focus {
        .focus-sections {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: var(--report-grid-gap);

            .focus-container {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                font-size: var(--typography-font-size-p);
                line-height: 1;
                min-height: 240px;
                border-radius: 16px;

                &.focus-meatabolic-type {
                    background-color: rgb(from var(--color-btm-dark-blue) r g b / 0.05);
                }

                &.focus-retest {
                    background-color: rgb(from var(--color-btm-dark-blue) r g b / 0.05);
                }

                &.focus-areas {
                    display: flex;
                    flex-direction: column;
                    align-items: stretch;
                    justify-content: center;
                    gap: calc(var(--report-grid-gap) / 2);

                    .focus-item {
                        flex: 1;
                        border-radius: 16px;
                        background-color: rgb(from var(--color-btm-dark-blue) r g b / 0.05);
                    }
                }
            }
        }
    }

    .section-priorities {
        --section-container-flex-direction: row;
        --section-container-gap: 16px;
        --section-background-color: rgb(from var(--color-btm-dark-blue) r g b / 0.05);
    }

    .section-reports-header {
        --report-section-container-align-items: start;
        --report-section-container-justify-content: start;

        .reports-details-toggle {
            --toggle-color: var(--color-btm-dark-blue);
            --toggle-background-color: transparent;

            --toggle-indicator-rotate: 0deg;

            &:not([data-display="hidden"]) {
                --toggle-indicator-rotate: 180deg;
            }

            position: relative;
            display: inline-flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 8px;
            height: 36px;
            border-radius: 8px;
            padding: 0 12px;
            transition: all .2s linear;
            cursor: pointer;
            font-size: 18px;
            line-height: 1;
            color: var(--toggle-color);
            font-family: 'Roboto Condensed', sans-serif;
            background-color: var(--toggle-background-color);
            box-shadow: 0 0 0 1px rgb(from var(--toggle-color) r g b / 0.5);

            &:hover {
                --toggle-color: #fff;
                --toggle-background-color: var(--color-btm-dark-blue);
            }

            &:after {
                content: '';
                display: block;
                width: 16px;
                height: 16px;
                transform: rotate(var(--toggle-indicator-rotate));
                transition: all .2s linear;
                background-color: var(--toggle-color);
                mask: url('/assets/svg/arrows/down-simple-UTvfI1-.svg') no-repeat center center / contain;
            }
        }
    }

    .section-reports {
        .results-reports {
            display: grid;
            grid-template-columns: var(--section-reports-list-columns);
            gap: var(--report-grid-gap);

            .report-item {
                --title-color: var(--color-btm-dark-blue);
                --shadow-color: rgb(from #0035b8 r g b / 0.15);
                --corner-color: rgb(from #0035b8 r g b / 0.15);
                --background-color: #fef5ec;
                --outline-color: rgb(from var(--color-btm-dark-blue) r g b / 0.25);
                --arrow-color: rgb(from var(--color-btm-dark-blue) r g b / 0.25);
                --label-color: rgb(from var(--color-btm-dark-blue) r g b / 0.5);
                --details-color: var(--color-btm-dark-blue);
                --title-underline-color: rgb(from var(--outline-color) r g b / 0.075);

                position: relative;
                display: flex;
                flex-direction: column;
                align-items: start;
                justify-content: start;
                gap: var(--section-reports-list-gap);
                padding: var(--section-reports-item-padding);
                border-radius: 16px;
                text-decoration: none;
                overflow: hidden;
                box-shadow:
                    0 0 0 1px var(--outline-color),
                    var(--section-reports-item-shadow-size) var(--section-reports-item-shadow-size) 0 var(--section-reports-item-shadow-size) var(--shadow-color)
                ;
                transition: all .2s linear;
                background-color: var(--background-color);

                &.item-action-plan { --item-icon: url('/assets/svg/reports/action-plan-UTfhJTr.svg'); }
                &.item-health-insights { --item-icon: url('/assets/svg/reports/health-insights-WCGv6ta.svg'); }
                &.item-longevity-report { --item-icon: url('/assets/svg/reports/longevity-report-ptVVvsH.svg'); }
                &.item-numbers-charts { --item-icon: url('/assets/svg/reports/numbers-charts-Q04u_WS.svg'); }
                &.item-nutrition-protocol { --item-icon: url('/assets/svg/reports/nutrition-protocol-g2HkdQ_.svg'); }
                &.item-targeted-nutrition { --item-icon: url('/assets/svg/reports/targeted-nutrition-ruRZkQZ.svg'); }
                &.item-diy-guide { --item-icon: url('/assets/svg/reports/diy-guide-byoOQPA.svg'); }
                &.item-video-learning { --item-icon: url('/assets/svg/reports/video-learning-4pI8E2M.svg'); }

                &:hover {
                    --title-color: var(--color-da-orange);
                    --shadow-color: var(--color-da-orange);
                    --corner-color: var(--color-da-orange);
                    --outline-color: rgb(from var(--color-btm-dark-blue) r g b / 0.75);
                    --grid-color: #fef5ec;
                    --background-color: rgb(from var(--color-btm-dark-blue) r g b / 0.75);
                    --arrow-color: var(--color-da-orange);
                    --details-color: #fff;
                    --title-underline-color: rgb(from #fff r g b / 0.25);
                }

                &:before {
                    content: '';
                    display: block;
                    position: absolute;
                    z-index: 0;
                    width: var(--section-reports-item-corner-size);
                    height: var(--section-reports-item-corner-size);
                    right: 0;
                    bottom: 0;
                    transition: all .2s linear;
                    transform: translate(50%, 50%) rotate(45deg);
                    background-color: var(--corner-color);
                }

                &:after {
                    content: '';
                    display: block;
                    position: absolute;
                    width: var(--section-reports-item-icon-size);
                    height: 100%;
                    right: 0;
                    top: 0;
                    transition: all .2s linear;
                    background-color: var(--arrow-color);
                    mask: url('/assets/svg/arrows/right-simple-Sgb4HTd.svg') no-repeat center;
                }

                .report-title {
                    display: flex;
                    flex-direction: column;
                    align-items: start;
                    justify-content: start;
                    gap: 16px;
                    transition: all .2s linear;

                    &:after {
                        content: '';
                        display: block;
                        width: 100%;
                        height: 4px;
                        transition: all .2s linear;
                        background-color: var(--title-underline-color);
                    }

                    .report-label {
                        position: relative;
                        display: var(--section-reports-item-label-display);
                        align-items: center;
                        justify-content: center;
                        padding: 0 16px;
                        height: 32px;
                        border-radius: 8px;
                        font-size: 16px;
                        font-weight: 500;
                        line-height: 1;
                        color: #fff;
                        background-color: var(--label-color);
                    }

                    .report-name {
                        position: relative;
                        font-size: var(--section-reports-item-name-font-size);
                        line-height: 1;
                        font-weight: 600;
                        text-transform: capitalize;
                        color: var(--title-color);
                        font-family: 'IBM Plex Sans', sans-serif;
                        transition: all .2s linear;
                    }
                }

                .report-details {
                    padding: var(--section-reports-item-details-padding);
                    font-size: var(--typography-font-size-p);
                    line-height: 1.325;
                    font-weight: 400;
                    color: var(--details-color);
                    transition: all .2s linear;
                }
            }
        }
    }

    .section-personalized-nutrition {
    }

    .section-video {
        --section-background-color: #fef5ec;

        .video-wrapper {
            width: 100%;
            aspect-ratio: 16/9;
            border-radius: 16px;
            overflow: hidden;
            background-color: #000000A2;
        }
    }

    .section-downloads {
        --report-section-background-color: var(--color-btm-dark-blue);
        /*--report-section-background-color: rgb(from var(--color-da-purple) r g b / 0.15);*/

        .ui-subsection-subheading {
            color: #fff;
        }

        .ui-section-underheading {
            color: #fff;
        }

        .downloads-list {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            justify-content: start;
            padding: var(--section-downloads-padding);
            border-radius: 16px;
            background-color: #fef5ec;

            .download-item {
                --item-font-color: var(--color-btm-dark-blue);
                --item-font-weight: 500;
                --item-icon-url: url('/assets/svg/misc/download-NxBtMpy.svg');
                --item-icon-color: var(--color-btm-orange);

                position: relative;
                display: flex;
                flex-direction: var(--section-downloads-item-flex-direction);
                align-items: center;
                justify-content: start;
                height: var(--section-downloads-item-height);
                gap: var(--section-downloads-item-gap);
                text-decoration: none;
                transition: all .2s linear;

                &.item-denied {
                    --item-font-color: rgb(from var(--color-btm-dark-blue) r g b / 0.5);
                    --item-font-weight: 300;
                    --item-icon-url: url('/assets/svg/misc/denied-CfVAj-b.svg');
                    --item-icon-color: rgb(from var(--color-btm-dark-blue) r g b / 0.5);
                }

                &:not(:last-child) {
                    border-bottom: 1px solid #ccc;
                }

                .item-name {
                    flex: 1;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: start;
                    gap: 8px;
                    font-size: var(--section-downloads-item-font-size);
                    line-height: 1;
                    color: var(--item-font-color);
                    font-weight: var(--item-font-weight);
                    font-family: 'IBM Plex Sans', sans-serif;

                    &:before {
                        content: '';
                        display: block;
                        position: relative;
                        width: 24px;
                        height: 24px;
                        background-color: var(--item-icon-color);
                        mask: var(--item-icon-url) no-repeat center;
                    }
                }

                .item-options {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: center;
                    gap: 8px;

                    .download-option {
                        --download-icon: none;
                        --background-color: rgb(from var(--color-btm-dark-blue) r g b / 0.5);

                        &[href] {
                            --background-color: var(--color-btm-dark-blue);

                            &:hover {
                                --background-color: var(--color-btm-orange);
                            }
                        }

                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        justify-content: center;
                        gap: 4px;
                        height: 28px;
                        padding: 0 6px 0 4px;
                        border-radius: 6px;
                        font-size: 16px;
                        line-height: 1;
                        font-weight: 500;
                        text-decoration: none;
                        color: #fff;
                        transition: all .2s linear;
                        background-color: var(--background-color);
                        font-family: "IBM Plex Sans", sans-serif;

                        &.option-pdf { --download-icon: url('/assets/svg/misc/files/pdf-P0WHKSG.svg'); }
                        &.option-csv { --download-icon: url('/assets/svg/misc/files/csv-Ymvh-ZO.svg'); }
                        &.option-xls { --download-icon: url('/assets/svg/misc/files/xls-ceoJ8PF.svg'); }

                        &:before {
                            content: '';
                            display: block;
                            width: 20px;
                            height: 20px;
                            background-color: #fff;
                            mask: var(--download-icon) no-repeat center center;
                        }
                    }
                }
            }
        }
    }
}