.highlight {
    background-color: yellow;
}
/* Base styles */
table, th, td {
    border: 0;
}

/* Main layout table */
#table {
    width: 100%;
    background-color: #f7f7f7;
    border-collapse: collapse;
    border: none;
}

#table tr {
    border: none;
}

#table td {
    padding: 10px;
    border: none;
    border-bottom: 1px solid #ddd;
}

#table td:first-child {
    width: 25%;
    vertical-align: top;
}

/* Orderability notice */
.unorderable {
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px;
}

/* Typography */
p {
    font-size: 150%;
    font-weight: 500;
    word-wrap: break-word;
}

h1 {
    margin: 30px 0 15px;
    padding: 0 0 0.5em;
    border-bottom: 5px solid #ddd;
}

h2, p {
    font-size: 95%;
}

/* Results table styling */
.results_table {
    margin: 1em 0;
    width: 100%;
}

.results_table th {
    padding: 10px; 
    text-align: center;
}

.results_table td {
    padding: 10px; 
}

/* POCT Results Table styles */
.poct-results-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.result-components-table,
.poct-results-table {
    min-width: 100%;
    table-layout: fixed;
    display: table !important;
    overflow-wrap: break-word !important;
}

.result-components-table thead,
.result-components-table tbody,
.poct-results-table thead,
.poct-results-table tbody {
    display: table-row-group !important;
}

.result-components-table tr,
.poct-results-table tr.poct-row {
    display: table-row !important;
}

.result-components-table th,
.result-components-table td,
.poct-results-table th.poct-cell,
.poct-results-table td.poct-cell {
    display: table-cell !important;
    min-width: 100px;
    overflow-wrap: break-word;
    white-space: pre-line;
}

/* Result Interpretation specific styles for embedded HTML content */
.result-interpretation {
    width: 100%;
}

.result-interpretation p {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left;
}

.result-interpretation table {
    width: 100% !important;
    max-width: 350px;
    table-layout: fixed;
    margin-left: auto !important;
    margin-right: auto !important;
    display: table !important;
    border-collapse: collapse;
}

.result-interpretation table td, 
.result-interpretation table th {
    word-break: break-word;
    display: table-cell !important;
    width: auto !important;
}

.result-interpretation table tr {
    display: table-row !important;
}

.result-interpretation img {
    max-width: 100%;
    height: auto;
}

#test_display {
    padding: 10px;
}

/* Add to your existing style block */
.procedure-container {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Aligns the group to the right */
}

.procedure-number {
    margin-right: 5px; /* Space between number and icons */
    font-size: 12px; /* Match your existing font size */
}

.workgroup {
    margin-right: 10; /* Space between number and icons */
    font-size: 12px; /* Match your existing font size */
}

.icon-link {
    margin-left: 5px; /* Space between icons */
}

.icon {
    height: 20px;
    width: 20px;
}

.result-components-table th, .result-components-table td,
.poct-results-table th.poct-cell, .poct-results-table td.poct-cell {
overflow-wrap: break-word;
}
.poct-col-component { width: 35%; }
.poct-col-required { width: 11%; }
.poct-col-loinc { width: 10%; }
.poct-col-value { width: 10%; }
.poct-col-abnormal { width: 10%; }
.poct-col-low { width: 8%; }
.poct-col-high { width: 8%; }
.poct-col-units { width: 8%; }

#loc-restrict-count {
    margin-left:4px;
}

#show-loc-restrict {
    cursor:pointer; 
    color:blue; 
    margin-left:8px;
}

#loc-restrict-list {
    display:none; 
    margin-top:5px;
}

#display_name {
    width:97%;
    text-align:left;
}

.hidden-source {
    display:none;
}

#show-hidden-sources-button {
    cursor:pointer; 
    color: blue;
}

#hide-hidden-sources-button {
    cursor:pointer; 
    color: blue;
}

#poct-results-row td {
    width:25%;
    /* padding:0; */
}

.poct-column-toggle {
    display:none;
    gap: 8px; 
    align-items: center; 
    justify-content: right;
    margin: 8px 0; /* Add the margin here instead of inline */
}

@media (max-width: 1500px) {
    .poct-col-component { width: 27%; }
    .poct-col-required { width: 11%; }
    .poct-col-loinc { width: 10%; }
    .poct-col-value { width: 14%; }
    .poct-col-abnormal { width: 14%; }
    .poct-col-low { width: 8%; }
    .poct-col-high { width: 8%; }
    .poct-col-units { width: 10%; }

    .result-components-table th,
    .result-components-table td,
    .poct-results-table th.poct-cell,
    .poct-results-table td.poct-cell {
        hyphens: auto;
        word-break: break-word;
    }

    /* Adjust font size for better fit */
    .result-components-table th,
    .result-components-table td,
    .poct-results-table th.poct-cell {
        font-size: 0.8em;
    }
    .poct-results-table td.poct-cell {
        font-size: 0.8em;
    }
}


/* Responsive styles - Large screens */
@media (max-width: 992px) {
    #test_display table,
    #test_display tbody,
    #test_display tr {
        display: table;
        width: 100%;
        box-sizing: border-box;
    }
    
    #test_display td {
        display: table-cell;
        width: auto;
    }
    
    #test_display #table td:first-child {
        width: 25%;
    }
    
    /* Maintain the results tables in proper table format */
    #test_display .results_table {
        display: table;
        width: 100%;
    }
    
    #test_display .results_table thead,
    #test_display .results_table tbody {
        display: table-row-group;
    }
    
    #test_display .results_table tr {
        display: table-row;
    }
    
    /* Result interpretation table specific responsiveness */
    .result-interpretation table {
        width: 100% !important;
        max-width: 350px !important;
        margin: 1em auto !important;
    }
    
    .result-interpretation [style*="margin-left"] {
        margin-left: 0 !important;
    }
    
    .result-interpretation [style*="margin-right"] {
        margin-right: 0 !important;
    }

        .poct-col-component { width: 31%; }
        .poct-col-required { width: 11%; }
        .poct-col-loinc { width: 10%; }
        .poct-col-value { width: 12%; }
        .poct-col-abnormal { width: 12%; }
        .poct-col-low { width: 8%; }
        .poct-col-high { width: 8%; }
        .poct-col-units { width: 9%; }
}

/* Specific styles for tablets (between 992px and 769px) */
@media (max-width: 992px) and (min-width: 769px) {
    /* Keep row format between 992px and 769px */
    #test_display #table,
    #test_display #results_table,
    #test_display .results_table {
        display: table !important;
        width: 100% !important;
        table-layout: fixed;
    }
    
    #test_display #table tbody,
    #test_display #results_table tbody,
    #test_display .results_table tbody,
    #test_display #table thead,
    #test_display #results_table thead,
    #test_display .results_table thead {
        display: table-row-group !important;
    }
    
    #test_display #table > tbody > tr,
    #test_display #results_table tr,
    #test_display .results_table tr {
        display: table-row !important;
        width: 100% !important;
    }
    
    #test_display #table > tbody > tr > td:first-child {
        width: 25% !important;
        vertical-align: top;
    }

}

/* Responsive styles - Medium screens */
@media (max-width: 768px) {
    /* Main table rows switch to column format at 768px */
    #table > tbody > tr {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    
    #table > tbody > tr > td {
        width: 100%;
        display: block;
    }

    #table > tbody > tr > td > p{
        word-wrap: break-word;
    }
    
    
    #table > tbody > tr > td:first-child {
        width: 100%;
        padding-bottom: 5px;
        font-weight: bold;
    }
    
    #table > tbody > tr > td:nth-child(2) > p {
        margin-left: 20px;
        word-wrap: break-word;
    }
    
    /* Result interpretation responsive styles for 768px */
    .result-interpretation {
        width: 100%;
    }
    
    .result-interpretation table {
        width: 100% !important;
        max-width: 350px !important;
        margin: 0 auto !important;
        font-size: 0.9em;
    }
    
    .result-interpretation table td, 
    .result-interpretation table th {
        padding: 6px 4px;
    }
    
    /* Maintain subtables in row format */
    #table td table,
    #table td .results_table {
        display: table;
        width: 100%;
    }
    
    #table td table tbody,
    #table td table thead,
    #table td .results_table tbody,
    #table td .results_table thead {
        display: table-row-group;
    }
    
    #table td table tr,
    #table td .results_table tr {
        display: table-row;
    }

    /* Ensure subtables remain as tables at all breakpoints */
    #test_display #table td table,
    #test_display #table td .results_table,
    #test_display #results_table {
        display: table !important;
        width: 100% !important;
    }
    
    #test_display #table td table tbody,
    #test_display #table td table thead,
    #test_display #table td .results_table tbody,
    #test_display #table td .results_table thead,
    #test_display #results_table tbody,
    #test_display #results_table thead {
        display: table-row-group !important;
    }
    
    #test_display #table td table tr,
    #test_display #table td .results_table tr,
    #test_display #results_table tr {
        display: table-row !important;
    }

    .poct-results-wrapper {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* Improve scrolling on iOS */
    }
    
    .result-components-table, 
    .poct-results-table {
        width: auto;
        min-width: 100%;
        table-layout: fixed; /* Keep consistent with non-responsive layout */
    }

    .poct-col-component { width: 31%; }
    .poct-col-required { width: 11%; }
    .poct-col-loinc { width: 10%; }
    .poct-col-value { width: 12%; }
    .poct-col-abnormal { width: 12%; }
    .poct-col-low { width: 8%; }
    .poct-col-high { width: 8%; }
    .poct-col-units { width: 9%; }

    /* Adjust font size for better fit */
    .result-components-table th,
    .result-components-table td,
    .poct-results-table th.poct-cell {
        font-size: 0.7em;
    }
    .poct-results-table td.poct-cell {
        font-size: 0.7em;
    }
}

@media (max-width: 600px) {
    
    /* Mobile (<=600px) POCT column collapse */
    /* Hide all columns except first (Component) by default */
    .poct-results-table th.poct-cell:not(.poct-col-component),
    .poct-results-table td.poct-cell:not(.poct-col-component) {
        display: none !important;
    }
    /* Always show component column */
    .poct-results-table th.poct-col-component,
    .poct-results-table td.poct-col-component {
        display: table-cell !important;
    }
    /* When a column is toggled on, show it */
    .poct-results-table.show-col-required th.poct-col-required,
    .poct-results-table.show-col-required td.poct-col-required,
    .poct-results-table.show-col-loinc th.poct-col-loinc,
    .poct-results-table.show-col-loinc td.poct-col-loinc,
    .poct-results-table.show-col-value th.poct-col-value,
    .poct-results-table.show-col-value td.poct-col-value,
    .poct-results-table.show-col-abnormal th.poct-col-abnormal,
    .poct-results-table.show-col-abnormal td.poct-col-abnormal,
    .poct-results-table.show-col-low th.poct-col-low,
    .poct-results-table.show-col-low td.poct-col-low,
    .poct-results-table.show-col-high th.poct-col-high,
    .poct-results-table.show-col-high td.poct-col-high,
    .poct-results-table.show-col-units th.poct-col-units,
    .poct-results-table.show-col-units td.poct-col-units {
        display: table-cell !important;
    }
    .poct-column-toggle { 
        display: flex; 
        gap: 8px; 
        align-items: center; 
        justify-content: right;
    }
    .poct-column-toggle select { 
        padding: 4px; 
    }
    .poct-column-toggle label {
        font-size: .9em;
    }
    #poct-column-select  {
        font-size: .9em;
    }

}

/* Responsive styles - Small screens */
@media (max-width: 480px) {
    /* Further refine styling for main table rows at smaller screens */
    /* POCT results table font adjustments for small screens */
    .poct-results-table {
        display: table !important;
        /* width: auto;
        min-width: 100%; */
    }
    
    .poct-results-table thead,
    .poct-results-table tbody {
        display: table-row-group !important;
    }
    
    .poct-results-table tr.poct-row {
        display: table-row !important;
    }
    
    .poct-results-table th,
    .poct-results-table td,
    .poct-results-table th.poct-cell,
    .poct-results-table td.poct-cell {
        display: table-cell !important;
        font-size: 11px !important; /* Force smaller font size for small screens */
        padding: 6px 4px; /* Tighter padding */
        min-width: 90px; /* Even smaller minimum width */
        line-height: 1.2 !important; /* Tighter line height */
    }
    
    .poct-results-wrapper {
        margin-bottom: 10px; /* Reduce margin */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #table > tbody > tr {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-bottom: 10px;
    }
    
    #table > tbody > tr > td {
        display: block;
        width: 100%;
        padding: 8px 5px;
    }
    
    #table > tbody > tr > td:first-child {
        font-weight: bold;
        padding-bottom: 0;
        border-bottom: none;
    }
    
    #table > tbody > tr > td:last-child {
        padding-top: 5px;
        padding-bottom: 15px;
    }
    
    /* Result interpretation responsive styles for small screens */
    .result-interpretation {
        width: 100%;
        font-size: 14px;
    }
    
    .result-interpretation p {
        margin: 0.5em 0 !important;
        line-height: 1.4;
        font-size: 0.9em !important;
        max-width: 100%;
    }
    
    .result-interpretation table {
        font-size: 0.85em;
        line-height: 1.3;
        max-width: 350px !important;
        margin: 0 auto !important;
    }
    
    .result-interpretation table td, 
    .result-interpretation table th {
        padding: 4px 2px;
    }
    
    /* Maintain subtables in row format */
    #table td table,
    #table td .results_table {
        display: table;
        width: 100%;
    }
    
    #table td table tbody,
    #table td table thead,
    #table td .results_table tbody,
    #table td .results_table thead {
        display: table-row-group;
    }
    
    #table td table tr,
    #table td .results_table tr {
        display: table-row;
    }
    
    /* Ensure subtables remain as tables at all breakpoints */
    #test_display #table td table,
    #test_display #table td .results_table,
    #test_display #results_table {
        display: table !important;
        width: 100% !important;
    }
    
    #test_display #table td table tbody,
    #test_display #table td table thead,
    #test_display #table td .results_table tbody,
    #test_display #table td .results_table thead,
    #test_display #results_table tbody,
    #test_display #results_table thead {
        display: table-row-group !important;
    }
    
    #test_display #table td table tr,
    #test_display #table td .results_table tr,
    #test_display #results_table tr {
        display: table-row !important;
    }

    .poct-results-wrapper {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* Improve scrolling on iOS */
    }
    
    .poct-results-table {
        width: auto;
        min-width: 100%;
        table-layout: fixed; /* Keep consistent with non-responsive layout */
    }
    
}

/* Extra small screens - mobile phones in portrait */
@media (max-width: 375px) {
    
    h1.editable.full {
        font-size: 1.4em;
    }
    
    h2 {
        font-size: 1.1em;
        margin: 5px 0;
    }
    
    .unorderable {
        padding: 8px;
    }

    .poct-results-table {
        table-layout: fixed;
        width: 100%;
    }


}