:root {
    --color-risteys-darkblue: #1c3d5a;
    --color-risteys-beige-dimmed: #f6f5f0;
}

.font-sans {
    font-family: "Public Sans", sans-serif;
    font-variant-numeric: proportional-nums;
}

/* Default dialog styling */
::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

/*
 * MODULE: Horizontal Table
 */

.horizontal-table thead {
    background-color: var(--color-table-grey);
    border-top-width: 1px;
    border-bottom-width: 1px;
}

.horizontal-table :is(th, td, [role="cell"], [role="columnheader"]) {
    padding: 0.25rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.horizontal-table th.indent {
    padding-left: 4rem;
}

.horizontal-table :is(th, [role="columnheader"]) {
    text-align: left;
}

.horizontal-table tbody tr:nth-of-type(2n) {
    background-color: var(--color-table-grey);
}

.horizontal-table :is(td, [role="cell"]) {
    font-variant-numeric: tabular-nums;
}

/*
 * MODULE: Data Grid Table
 */
/* Separate
 - basic styling
 - default styling for all data tables in Risteys
 - styling for the CodeWAS table

TODO:
- implement with only 1 CSS grid and then rows as subgrid when it is available in browsers https://caniuse.com/css-subgrid
  Why?
  . using the 'gap' property
  . set column width based on the content of all its cells, for example: min-content
*/

/* Defaults & Available configuration variables */
.data-grid-table {
    /* var(--table-layout) */
    --equal-columns: repeat(
        auto-fit,
        minmax(0, 1fr)
    ); /* Equally sized columns */
    --default-table-layout: var(--equal-columns);

    /* var(--max-height) */
    --decent-height: 27em;
    --default-table-max-height: var(--decent-height);

    /* var(--table-body-text-wrap) */
    --wrap: normal;
    --truncate: nowrap;
    --default-table-body-text-wrap: var(--wrap);

    /* var(--table-body-show-scrollbar) */
    --scrollbar-if-overflow: auto;
    --default-table-body-show-scrollbar: var(--scrollbar-if-overflow);

    /* var(--table-cell-padding) */
    --default-cell-padding: 0.25em 0;
}

/* Basic styling */
.data-grid-table {
    width: 100%; /* Prevent the table getting narrow when text wrapping is ON is the table cells */
}

.data-grid-table button.active {
    color: white;
    background-color: #2779bd;
}

/* Reserve space for a scrollbar to have a consistent table layout for header and body */
.data-grid-table [role="rowgroup"] {
    scrollbar-gutter: stable;
    overflow: auto;
}

.data-grid-table [role="columnheader"] {
    padding: var(--table-cell-padding, var(--default-cell-padding));
}

.data-grid-table [role="rowgroup"]:nth-of-type(2) {
    /* Set a maximum height for the table in case there is a lot of data */
    max-height: var(--table-max-height, var(--default-table-max-height));

    /* Force showing the scrollbar to indicate there is more data than displayed */
    overflow-y: var(
        --table-body-show-scrollbar,
        var(--default-table-body-show-scrollbar)
    );
}

.data-grid-table
    [role="rowgroup"]:nth-of-type(2)
    :is([role="rowheader"], [role="gridcell"]) {
    /* Handle overflow in table */
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: var(
        --table-body-text-wrap,
        var(--default-table-body-text-wrap)
    );

    padding: var(--table-cell-padding, var(--default-cell-padding));
}

/* Grid layout for the table header and body */
.data-grid-table [role="row"] {
    display: grid;
    grid-template-columns: var(--table-layout, var(--default-table-layout));
    column-gap: 1em;
}

.data-grid-table [role="row"]:nth-child(2n) {
    background-color: var(--color-table-grey);
}

/*
 * MODULE: Description List
 */
.description-list {
    display: grid;
    grid-template-columns: max-content max-content;
}

.description-list :is(dt, dd) {
    padding: 0.35rem 0.75rem;
}

.description-list :is(dt, dd):nth-of-type(2n + 1) {
    background-color: var(--color-table-grey);
}

/*
 * MODULE: Modal dialog
 */
.modal-dialog {
    margin: 1vh auto;
    max-height: 90vh;
}

.modal-dialog h2 {
    margin: 1em 0;
    padding: 0.35rem 0.75rem;
}

.modal-dialog h3 {
    margin: 2em 0 0.5em;
}

.modal-dialog table {
    margin: 1em 0;
}

/*
 * COMPONENT: Search box
 */

.header .searchbox {
    justify-self: center; /* horizontal centering */
    align-self: center; /* vertical centering */

    input {
        width: 20em;
        /* be above the #search-results shadow */
        position: relative;
    }
}
.searchbox {
    --gap: 1em;

    input {
        width: 100%;
        box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.1);
        padding: 0.75rem;
        border-width: 2px;
        border-color: #b8c2cc;
    }

    .search-results {
        & {
            position: absolute;
            /* NOTE(Vincent 2024-11-21)  The search results element being early in the DOM makes
            it easy to be overlapped by later positioned element (i.e. their position set to
            something else that static, e.g. sticky), masking the results.
            Two options:
            1. Make the search results a modal dialog and put its element at the end of the DOM,
            removing the need for z-index.
            2. Use z-index, as it's currently done here.
            */
            z-index: 1;
            color: black;
            background: white;
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
        }

        h4 {
            background: #f1f5f8;
            padding: 0.5em 1em;
        }
        h4:nth-of-type(n + 2) {
            margin-top: 2em;
        }

        /* Set an underline only on key fields */
        .lab-tests a,
        .endpoints a {
            text-decoration: none;
        }
        [role="rowgroup"]:nth-child(2) {
            .omop-concept-id,
            .omop-concept-name,
            .endpoint-name,
            .endpoint-longname {
                text-decoration: underline;
            }
        }

        /* Set result background on hover  */
        [role="rowgroup"]:nth-child(2) [role="row"]:hover {
            background: #dae1e7;
        }
        /* Set an outline for currently keyboard-seleted result */
        .is_selected {
            outline: 2px dashed black;
        }

        .icon {
            display: flex;
            align-self: center;
            justify-self: center;
            margin: 2px;
        }

        .info-no-results {
            padding: 0.25em 0.5em;
        }

        .lab-tests {
            display: grid;
            grid-template-columns: max-content max-content auto max-content max-content;
            column-gap: var(--gap);
            padding: 0.25em 0.5em;

            /* header & body */
            .omop-concept-name {
                overflow-x: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .omop-concept-npeople,
            .omop-concept-percent-records {
                text-align: right;
                font-variant-numeric: tabular-nums;
            }
        }

        .endpoints {
            display: grid;
            grid-template-columns:
                max-content fit-content(50ch)
                auto max-content max-content;
            column-gap: var(--gap);
            padding: 0.25em 0.5em;

            /* header & body */
            .endpoint-longname {
                overflow-x: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .endpoint-n-cases,
            .endpoint-n-gws-hits {
                text-align: right;
                font-variant-numeric: tabular-nums;
                justify-self: end;
            }

            /* Body */
            [role="rowgroup"]:nth-child(2) {
                .endpoint-name {
                    overflow-x: hidden;
                    text-overflow: ellipsis;
                }
            }
        }

        /* NOTE(Vincent 2024-11-12) Subgrid passthrough
        This makes it possible to have a tree-like hierarchy of HTML elements in the grid will
        keeping the grid structure.
        Note that this passthrough must be explicitely set on all the descendants of the grid,
        except for the actual grid cells.
        */
        [role="rowgroup"],
        [role="row"] {
            display: grid;
            grid-template-columns: subgrid;
            grid-column: 1/-1;
        }

        /* Columns formatting: header */
        [role="rowgroup"]:first-child [role="gridcell"] {
            display: flex;
            align-self: end;
        }
    }
}

/*
 * COMPONENT: Matched cohort
 */
.matched-cohort dt {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/*
 * COMPONENT: CodeWAS table
 */
.codewas {
    grid-column: 1 / span 2;
}

.codewas article {
    margin: 1.5em 1em;
}
.codewas p {
    margin: 1em 0;
}
.codewas h3 {
    font-size: 1rem;
}

/* Configure the data grid table with CSS variables */
.codewas--data-grid-table-conf {
    /*
    We use minmax() for the first 2 columns because otherwise the text input in these columns would mess the grid layout.
    This is because browsers give a fixed width for text inputs by default, and also by default grid cells extend past the defined _fr instead of overflowing.
    */
    --table-layout: [code] minmax(3ch, 2fr) [vocabulary] minmax(3ch, 3fr)
        [description] 7fr [odds-ratio] 2fr [nlog10p] 2fr [n-matched-cases] 2fr
        [n-matched-controls] 2fr;
    --table-body-text-wrap: var(--truncate);
    --table-cell-padding: 0.25em 0.75em;
}

/* Custom styles for CodeWAS data grid table */
.codewas--data-grid-table [role="rowgroup"]:nth-child(1) {
    background-color: var(--color-table-grey);
    border: solid 1px #dae1e7;
    border-left: 0;
    border-right: 0;
}

.codewas--data-grid-table input[type="text"] {
    max-width: 100%; /* Otherwise will overflow */
}

.codewas--data-grid-table--widget--code {
    grid-column: code;
}
.codewas--data-grid-table--widget--vocabulary {
    grid-column: vocabulary;
}
.codewas--data-grid-table--widget--description {
    grid-column: description;
}
.codewas--data-grid-table--widget--odds-ratio {
    grid-column: odds-ratio;
}
.codewas--data-grid-table--widget--nlog10p {
    grid-column: nlog10p;
}
.codewas--data-grid-table--widget--n-matched-cases {
    grid-column: n-matched-cases;
}
.codewas--data-grid-table--widget--n-matched-controls {
    grid-column: n-matched-controls;
}

.codewas--data-grid-table abbr[title] {
    cursor: help;
}

/*
 * COMPONENT: LabWAS table
 */

.labwas--data-grid-table-conf {
    /*
     We use minmax() for the first 2 columns because otherwise the text input in these columns would mess the grid layout.
     This is because browsers give a fixed width for text inputs by default, and also by default grid cells extend past the defined _fr instead of overflowing.
     */
    --table-layout: [facet-start] minmax(3ch, 5fr) [facet-end
        with-meas-ncases-start] minmax(3ch, 2fr) [with-meas-ncases-end
        with-meas-ncontrols-start] minmax(3ch, 2fr) [with-meas-ncontrols-end
        with-meas-odds-ratio-start] minmax(3ch, 2fr) [with-meas-odds-ratio-end
        with-meas-pvalue-start] minmax(3ch, 2fr) [with-meas-pvalue-end
        mean-nmeas-cases-start] minmax(3ch, 2fr) [mean-nmeas-cases-end
        mean-nmeas-controls-start] minmax(3ch, 2fr) [mean-nmeas-controls-end
        mean-value-cases-start] minmax(3ch, 2fr) [mean-value-cases-end
        mean-value-controls-start] minmax(3ch, 2fr) [mean-value-controls-end
        mean-value-unit-start] minmax(3ch, 2fr) [mean-value-unit-end
        mean-value-pvalue-start] minmax(3ch, 2fr) [mean-value-pvalue-end
        mean-value-ncases-start] minmax(3ch, 2fr) [mean-value-ncases-end
        mean-value-ncontrols-start] minmax(3ch, 2fr) [mean-value-ncontrols-end];
    --table-body-text-wrap: var(--wrap);
    --table-cell-padding: 0.25em 0.25em; /* Trying to save space here too with low Y padding */
}

/* Custom styles for CodeWAS data grid table */
.labwas--data-grid-table {
    background-color: white;
}
.labwas--data-grid-table [role="row"] {
    column-gap: 0; /* Table is quite crowded so saving space by disable gaps */
}
.labwas--data-grid-table [role="rowgroup"]:nth-child(1) {
    background-color: var(--color-table-grey);
    border: solid 1px #dae1e7;
    border-left: 0;
    border-right: 0;
}

.labwas--data-grid-table input[type="text"] {
    max-width: 100%; /* Otherwise will overflow */
}

.labwas--data-grid-table
    [role="rowgroup"]:nth-child(1)
    [role="row"]:nth-child(1) {
    text-align: center;
}

.labwas--data-grid-table .facet,
.labwas--data-grid-table .mean-nmeas {
    background: #efefef;
}

.labwas--data-grid-table .top-header.facet {
    grid-column: facet;
}
.labwas--data-grid-table .top-header.with-meas {
    grid-column: with-meas-ncases / with-meas-pvalue;
}
.labwas--data-grid-table .top-header.mean-nmeas {
    grid-column: mean-nmeas-cases / mean-nmeas-controls;
}
.labwas--data-grid-table .top-header.mean-value {
    grid-column: mean-value-cases / mean-value-ncontrols;
}

.labwas--data-grid-table .col-unit {
    text-align: right;
}

/*
 * COMPONENT: relationships table
 */
.relationships-table .xx-head {
    /* By default, the table headers will not align with the table rows
     * since the rows will have a scrollbar but the header will not,
     * and the scrollbar adds up to the container width.
     * So we use a combination of `scrollbar-gutter: stable` and
     * `overflow: hidden` to add a scrollbar width worth to the width of
     * the table headers.
     */
    scrollbar-gutter: stable;
    overflow: hidden;

    background-color: #fafafa;
    border: solid 1px #dae1e7;
    border-left: 0;
    border-right: 0;
}

.relationships-table [role="row"] {
    display: grid;

    /* Why minmax(0, _)?
     * Because otherwise by default the mininum width is "auto" and would cause the grid
     * to misalign.
     * See https://defensivecss.dev/tip/grid-min-content-size/
     */
    grid-template-columns:
        [endpoint] minmax(0, 15fr)
        [case-finregistry] minmax(0, 10fr)
        [case-finngen] minmax(0, 10fr)
        [hr] minmax(0, 15fr)
        [rg] minmax(0, 15fr)
        [hits] minmax(0, 6fr)
        [coloc-hits] minmax(0, 6fr);
}

/* Header placement */
.relationships-table .xx-title {
    font-weight: bold;
}

.relationships-table .xx-title .xx-endpoint {
    grid-column: endpoint;
}
.relationships-table .xx-title .xx-cases {
    grid-column: case-finregistry / hr;
}
.relationships-table .xx-title .xx-survival-analysis {
    grid-column: hr;
}
.relationships-table .xx-title .xx-genetic-correlations {
    grid-column: rg;
}
.relationships-table .xx-title .xx-genetic-signals {
    grid-column: hits / -1;
}

.relationships-table .xx-stat .xx-cases {
    grid-column: case-finregistry / hr;
}
.relationships-table .xx-stat .xx-sa-hr {
    grid-column: hr;
}
.relationships-table .xx-stat .xx-gc-rg {
    grid-column: rg;
}
.relationships-table .xx-stat .xx-gs-hits {
    grid-column: hits;
}
.relationships-table .xx-stat .xx-gs-coloc-hits {
    grid-column: coloc-hits;
}

.relationships-table .xx-dataset .xx-cases-fr {
    grid-column: case-finregistry;
}
.relationships-table .xx-dataset .xx-cases-fg {
    grid-column: case-finngen;
}
.relationships-table .xx-dataset .xx-sa {
    grid-column: hr;
}
.relationships-table .xx-dataset .xx-gc {
    grid-column: rg;
}
.relationships-table .xx-dataset .xx-gs {
    grid-column: hits / -1;
}

.relationships-table .xx-widget .xx-endpoint {
    grid-area: endpoint;
}
.relationships-table .xx-widget .xx-cases-fr {
    grid-area: case-finregistry;
}
.relationships-table .xx-widget .xx-cases-fg {
    grid-area: case-finngen;
}
.relationships-table .xx-widget .xx-sa-hr {
    grid-area: hr;
}
.relationships-table .xx-widget .xx-gc-rg {
    grid-area: rg;
}
.relationships-table .xx-widget .xx-gs-hits {
    grid-area: hits;
}
.relationships-table .xx-widget .xx-gs-coloc-hits {
    grid-area: coloc-hits;
}

/* Header borders */
.relationships-table .xx-title :nth-child(n + 2),
.relationships-table .xx-cases,
.relationships-table .xx-sa-hr,
.relationships-table .xx-gc-rg,
.relationships-table .xx-gs-hits,
.relationships-table .xx-cases-fr,
.relationships-table .xx-sa,
.relationships-table .xx-gc,
.relationships-table .xx-gs {
    border-left: 1px solid #dae1e7;
}

/* Header brandings */
.relationships-table .xx-dataset :nth-child(1),
.relationships-table .xx-dataset :nth-child(3) {
    border-top: 2px solid var(--finregistry-brand-color);
}
.relationships-table .xx-dataset :nth-child(1),
.relationships-table .xx-dataset :nth-child(3),
.relationships-table .xx-widget div:nth-of-type(2),
.relationships-table .xx-widget div:nth-of-type(4) {
    background-color: var(--finregistry-brand-color-light);
}

.relationships-table .xx-dataset :nth-child(2),
.relationships-table .xx-dataset :nth-child(4),
.relationships-table .xx-dataset :nth-child(5) {
    border-top: 2px solid var(--finngen-brand-color);
}
.relationships-table .xx-dataset :nth-child(2),
.relationships-table .xx-dataset :nth-child(4),
.relationships-table .xx-dataset :nth-child(5),
.relationships-table .xx-widget div:nth-of-type(3),
.relationships-table .xx-widget div:nth-of-type(5),
.relationships-table .xx-widget div:nth-of-type(6),
.relationships-table .xx-widget div:nth-of-type(7) {
    background-color: var(--finngen-brand-color-light);
}

/* Table body */
.relationships-table .xx-body {
    max-height: 30em;
    overflow-y: scroll;
}
.relationships-table [role="colheader"] {
    padding: 0.35rem 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.relationships-table .xx-body [role="row"]:nth-child(2n) {
    background-color: #fafafa;
}
.relationships-table .xx-body [role="cell"] {
    font-variant-numeric: tabular-nums;
}
.relationships-table
    .xx-body
    [role="row"]
    :is(
        :nth-child(2),
        :nth-child(3),
        :nth-child(4),
        :nth-child(6),
        :nth-child(8),
        :nth-child(9)
    ) {
    text-align: right;
}

.relationships-table .active {
    color: white;
    background-color: #2779bd;
}

/*
 * COMPONENT: Lab test concepts index
 */
.lab-tests-index-page {
    --bg-color-plot-empty: #eee;
    --bg-color-plot: #bbb;

    --grid-track-size-plot: 0.7fr;

    & h1 {
        margin-bottom: 1em;
        margin-top: 1.5em;
    }

    & h2 {
        margin-block: 0.83em;
    }

    & [role="grid"] {
        display: grid;
        grid-template-columns:
            /* Name */
            [row-start name-start]
            5fr
            /* N People */
            [name-end npeople-number-start]
            1fr
            /* N People (absolute plot) */
            [npeople-number-end npeople-plot-start]
            var(--grid-track-size-plot)
            /* Sex ratio */
            [npeople-plot-end sex-ratio-number-start]
            1fr
            /* Sex ratio: plot*/
            [sex-ratio-number-end sex-ratio-plot-start]
            var(--grid-track-size-plot)
            /* Median N measurements */
            [sex-ratio-plot-end percent-people-two-plus-records-number-start]
            1fr
            /* Median N measurements: plot */
            [percent-people-two-plus-records-number-end percent-people-two-plus-records-plot-start]
            var(--grid-track-size-plot)
            /* Median N days */
            [percent-people-two-plus-records-plot-end median-duration-number-start]
            1fr
            /* Median N days: plot*/
            [median-duration-number-stop median-duration-plot-start]
            var(--grid-track-size-plot)
            [median-duration-plot-end row-end];
        margin-top: 2em;
    }

    & [role="row"]:has([role="columnheader"]) {
        position: sticky;
        top: 0;

        background: linear-gradient(
            to top,
            #f0efea00 0,
            #f0efea 10px,
            #e0dfd9 10px,
            #e0dfd9 11px,
            #faf9f4 0
        );
        font-weight: bold;
        padding-bottom: 1em;
        align-items: start;
    }
    & [role="columnheader"] {
        align-self: end;
        text-wrap: balance;
    }
    & .header-npeople {
        grid-column: npeople-number-start / npeople-number-end;
        text-align: right;
    }
    & .header-sex-ratio {
        grid-column: sex-ratio-number-start / sex-ratio-number-end;
        text-align: right;
    }
    & .header-percent-people-two-plus-records {
        grid-column: percent-people-two-plus-records-number-start /
            percent-people-two-plus-records-number-end;
        text-align: right;
    }
    & .header-median-duration {
        grid-column: median-duration-number-start / row-end;
        text-align: right;
    }

    & [role="rowgroup"],
    & [role="row"] {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: 1 / -1;
        column-gap: 0.5em;
        align-items: center;
    }

    & [role="rowgroup"] {
        margin-bottom: 2em;
    }

    & .lab-test:nth-child(even) {
        background-color: #f6f5f0;
    }

    & .lab-test > :not(.plot) {
        padding: 0.25em 0 0.25em 1em;
    }

    & .lab-test-group {
        margin-bottom: 0.5em;
    }

    & .col-lab-test-name {
        padding-left: 1em;
    }

    & .numeric {
        font-variant-numeric: tabular-nums;
        text-align: right;
    }

    & .missing-value {
        color: #777;
    }
}

/*
 * COMPONENT: Home page
 */

.home-page {
    .main-search-box h2 {
        color: #1c3d5a;
        font-size: 1.125rem;
        padding: 0.25rem 0.5rem;
    }

    .facet-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));
        gap: 2em;
        margin: 0 0.5em;

        section {
            background-color: white;
            border-top: 5px solid;
            border-radius: 3px;
            box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.04); /* Subtle shadow for every block of the main content */
            padding: 0 1em 0.5em 1em;

            h3 {
                text-align: center;
                margin: 0.5em 1em;
            }

            ul {
                padding-left: 1em;
            }

            p {
                margin: 1em 0 0.5em 0;
            }
        }

        .lab-tests {
            border-color: #42a9e3;
        }

        .endpoints {
            border-color: #989898;
        }
    }
}

/*
 * COMPONENT: Single lab test page
 */
.lab-test-page {
    --color-risteys-plot-background: var(--color-risteys-beige-dimmed);
    --color-qc-table-test-outcome-value-na: #ddd;
    --color-qc-table-test-outcome-value-n: #959fa6;
    --color-qc-table-test-outcome-value-a: #dca863;
    --color-qc-table-test-outcome-value-aa: #f8cf9b;
    --color-qc-table-test-outcome-value-l: #a580a4;
    --color-qc-table-test-outcome-value-ll: #c59ec4;
    --color-qc-table-test-outcome-value-h: #cb4141;
    --color-qc-table-test-outcome-value-hh: #a61722;

    & h1 {
        margin-bottom: 1em;
        margin-top: 1.5em;
    }

    & h2 {
        margin-block: 0.87em;
    }

    & h3 {
        margin-block: 1em;
    }

    & .highlight {
        --color-risteys-plot-background: white;
        background-color: white;
    }

    & .highlight-content {
        display: grid;
        grid-template-columns: 3fr 2fr;
        column-gap: 3em;
    }

    & .header-test-outcome {
        display: flex;
        flex-direction: column;

        & .test-outcomes-legend {
            display: flex;
            flex-wrap: wrap;
            column-gap: 0.75em;

            font-size: 0.75em;
        }

        & .test-outcome-value {
            display: flex;
            align-items: center;
            column-gap: 0.3em;
        }

        & .test-outcome-color {
            width: 1em;
            height: 1em;
            border-radius: 2px;
        }

        & .color-na {
            background: var(--color-qc-table-test-outcome-value-na);
        }
        & .color-n {
            background: var(--color-qc-table-test-outcome-value-n);
        }
        & .color-a {
            background: var(--color-qc-table-test-outcome-value-a);
        }
        & .color-aa {
            background: var(--color-qc-table-test-outcome-value-aa);
        }
        & .color-l {
            background: var(--color-qc-table-test-outcome-value-l);
        }
        & .color-ll {
            background: var(--color-qc-table-test-outcome-value-ll);
        }
        & .color-h {
            background: var(--color-qc-table-test-outcome-value-h);
        }
        & .color-hh {
            background: var(--color-qc-table-test-outcome-value-hh);
        }
    }

    & .side-by-side {
        display: flex;
        flex-wrap: wrap;
        column-gap: 2em;
        row-gap: 1em;
        align-items: flex-start;
    }

    & .reference-range-table {
        display: grid;
        grid-template-columns: fit-content(30ch) repeat(2, max-content);

        & [role="columnheader"] {
            font-weight: bold;
        }

        & [role="row"] {
            display: grid;
            grid-template-columns: subgrid;
            grid-column: 1 / -1;
            gap: 0.5em;
        }

        & [role="row"]:nth-child(2n) {
            background-color: #f6f5f0;
        }

        & [role="gridcell"],
        [role="columnheader"] {
            padding: 0.25em 0.5em;
        }

        & .reference-range-value {
            font-variant-numeric: tabular-nums;
        }
    }

    & .no-data {
        color: #757575;
        font-size: 0.75em;
    }
}

/*
 * Utilities
 */
.inline-block {
    display: inline-block;
}
.inline {
    display: inline;
} /* Useful for <img> since we reset them to 'display: block' */

/* Table utilities */
.header-numbers {
    text-align: right;
}
.cell-numbers {
    font-variant-numeric: tabular-nums;
    text-align: right;
}