/* ============================================
   iPowerDoc Modern Theme - Bootstrap 5 Overrides
   ============================================ */

/* --- CSS Custom Properties (Color Palette) ---

   Taken from platinumdiagnosticlab.com (the public Platinum Diagnostic Lab
   site), so the portal and the marketing site read as one brand:
     brand blue   #2b6cb0     deep blue    #215387   (the theme palette 1/2)
     highlight    #f76a0c     slate scale  #1a202c #2d3748 #4a5568 #718096
     page tints   #edf2f7 #f7fafc

   How the palette is applied: blue carries the brand (top nav, primary actions,
   links, focus, active states), slate carries the structure (data-grid headers,
   body text, borders), the highlight orange is the accent rule/active marker.
   Data grids are deliberately slate rather than blue so saturated colour keeps
   meaning something on a results screen -- see --ipd-danger below, which stays
   a distinct red for destructive actions and abnormal values. Nothing but
   status now uses red, which is why the switch off the old red brand palette
   makes abnormal-value flags read more clearly, not less.
   --- */
:root {
    --ipd-primary: #2b6cb0;
    /* Blues brighten fast, and every step up costs contrast: white on #2b6cb0
       is 5.4:1, on -light 4.5:1, and one step lighter again would drop under AA
       for the 13px nav/button text. So -light is only a shade up and the genuine
       pale blues stay for large decorative fills (the navbar gradient peak). */
    --ipd-primary-light: #2f79c4;
    --ipd-primary-dark: #1b4776;
    --ipd-accent: #f76a0c;
    --ipd-accent-hover: #d8590a;
    --ipd-success: #27ae60;
    --ipd-danger: #c0392b;
    /* Slate scale, from the site's theme palette */
    --ipd-graphite-dark: #1a202c;
    --ipd-graphite: #2d3748;
    --ipd-graphite-light: #4a5568;
    --ipd-bg-light: #f7fafc;
    --ipd-bg-page: #edf2f7;
    --ipd-text: #1a202c;
    /* The site's muted grey is #718096, but that is only 4.0:1 on white -- under
       AA at the sizes this is used for. Darkened to the next slate step down. */
    --ipd-text-muted: #5a6c84;
    --ipd-border: #d8e1ea;
    --ipd-nav-bg: #2b6cb0;
    --ipd-nav-hover: #3379bd;
    --ipd-nav-active: #f76a0c;
    --ipd-header-bg: #ffffff;
    --ipd-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --ipd-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
    --ipd-radius: 8px;
    --ipd-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --- Base Reset / Typography --- */
BODY {
    margin: 0 auto !important;
    background: var(--ipd-bg-page) !important;
    font-family: var(--ipd-font-family) !important;
    font-size: 14px !important;
    color: var(--ipd-text) !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    border-left: none !important;
    border-right: none !important;
    line-height: 1.5 !important;
    /* Sticky-footer column. main.master closes </div id="main"> BEFORE rendering
       footermodule, so .footer is a sibling of #main, not a child of it. #main
       used to carry min-height:100vh, which meant it claimed a whole viewport on
       its own and shoved the footer to exactly one screen down -- on any page
       whose content was shorter than the viewport (Results Review with a part
       page of rows, for one) the footer sat just past the fold behind a band of
       empty grey. Making body the column and letting #main flex into whatever is
       left puts the footer on the bottom edge when content is short and below
       the content when it is long. */
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ipd-font-family);
    color: var(--ipd-primary-dark);
}

/* --- Form field alignment --- */
#maincontent table {
    border-collapse: collapse;
}

#maincontent table td:first-child {
    text-align: left;
}

/* --- Stronger text colors for all page elements --- */
td, label, span, div, p, a {
    color: #1a202c;
}

input[type="text"], textarea, select {
    color: #1a202c !important;
    font-family: var(--ipd-font-family) !important;
}

input[type="text"]:read-only {
    color: #1a202c !important;
}

input[type="submit"], input[type="button"] {
    color: #1a202c;
}

/* --- Shared alignment for all page sections ---

   The single knob for how wide the page runs. Header, navbar, content container
   and footer all carry .ipd-aligned, so they stay flush with each other whatever
   this is set to; the page background shows either side of it.

   Widened from 1400px, which left roughly 205px of grey gutter each side on a
   ~1810px window. NOTE: the MCI build has its own copy of this sheet, still at
   1400px -- the two were identical before this change, so they are now
   deliberately out of step rather than accidentally. */
.ipd-aligned {
    width: 100% !important;
    max-width: 1600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* --- Layout: Responsive Container --- */
.container {
    background-color: #ffffff;
    text-align: left;
    min-height: calc(100vh - 200px);
    font-size: 14px;
    font-family: var(--ipd-font-family);
    padding: 0 !important;
    box-shadow: var(--ipd-shadow);
    border-radius: 0;
    overflow: visible !important;
}

#main {
    background-color: var(--ipd-bg-page) !important;
    /* flex-basis auto + grow, NOT min-height:100vh -- see the BODY rule above.
       min-width:0 stops the wide data grids from forcing the flex item wider
       than the viewport, which is what overflow-x:hidden was papering over. */
    flex: 1 0 auto;
    min-width: 0;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Never let the footer be squeezed by the flex column above it. */
.footer {
    flex-shrink: 0;
}

.maincolumn {
    background-color: #ffffff;
    width: 100% !important;
    max-width: 100% !important;
    clear: both;
    padding: 20px 25px !important;
    box-sizing: border-box !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

/* --- Header --- */
.header {
    color: var(--ipd-text);
    background-color: var(--ipd-header-bg);
    border-bottom: none;
    padding: 12px 20px;
    box-shadow: var(--ipd-shadow);
}

.header table {
    width: 100%;
}

.header a:link,
.header a:visited,
.header a:active {
    color: var(--ipd-primary);
    text-decoration: none;
}

.header a:hover {
    color: var(--ipd-primary-light);
    text-decoration: none;
}

/* --- Navigation Bar --- */
.ipd-navbar {
    background: linear-gradient(135deg, #143355 0%, #245e9b 30%, #2f79c4 70%, #245e9b 100%) !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

#ipdNavList {
    list-style: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

#ipdNavList li {
    list-style: none !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.25) !important;
}

#ipdNavList li:last-child {
    border-right: none !important;
}

#ipdNavList li a {
    display: block !important;
    color: rgba(255, 255, 255, 0.9) !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.2s ease;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
}

#ipdNavList li a:hover {
    color: #ffffff !important;
    background-color: var(--ipd-nav-hover) !important;
    border-bottom-color: var(--ipd-accent) !important;
    text-decoration: none !important;
}

#ipdNavList li a.active {
    color: #ffffff !important;
    background-color: var(--ipd-nav-hover) !important;
    border-bottom-color: var(--ipd-nav-active) !important;
    font-weight: 600 !important;
}

#ipdNavList li a i {
    margin-right: 5px;
    font-size: 15px;
}

/* --- Hide old asp:Menu --- */
.headLinksBar {
    display: none !important;
}

/* --- Filter Panel --- */
.panelFilter {
    width: auto !important;
    max-width: 100% !important;
    padding: 12px 20px;
    box-sizing: border-box !important;
    text-align: left;
    vertical-align: middle;
    background-color: var(--ipd-bg-light);
    margin: 0;
    clear: both;
    overflow: visible;
    border: 1px solid var(--ipd-border);
    border-radius: 0;
    margin-bottom: 0;
}

/* Filter row layout */
.re-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.re-filter-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.re-filter-input-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.re-filter-input-row input[type="image"] {
    width: 16px !important;
    height: 16px !important;
    vertical-align: middle;
    cursor: pointer;
}

.re-filter-label {
    font-size: 12px !important;
    font-weight: 600;
    color: #1a202c;
    margin: 0 !important;
    padding: 0 !important;
}

.re-filter-buttons {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 6px;
    padding-bottom: 0;
}

.re-filter-right {
    margin-left: auto;
}

/* --- Grid / Table Modernization --- */
.mGrid {
    width: 100%;
    background-color: #fff;
    margin: 10px 0;
    border: 1px solid var(--ipd-border);
    border-collapse: collapse;
    border-radius: 0;
    overflow: hidden;
}

.mGrid td {
    padding: 8px 10px;
    border: 1px solid var(--ipd-border);
    color: var(--ipd-text);
    font-size: 13px;
    background-image: none !important;
}

.mGrid th {
    padding: 10px;
    color: #fff;
    background: var(--ipd-graphite);
    border-bottom: 2px solid var(--ipd-primary);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.mGrid th a {
    color: #fff;
}

.mGrid .alt,
.mGrid .alt td {
    background: var(--ipd-bg-light) !important;
    background-image: none !important;
}

/* ── Pager row ── Bootstrap 5 pagination style ── */
.mGrid .pgr,
.mGrid tr.pgr {
    background: #ffffff !important;
    background-image: none !important;
}

.mGrid .pgr td,
.mGrid .pgr table td {
    border: none !important;
    padding: 6px 3px !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
    width: auto !important;
    text-align: center !important;
}

.mGrid .pgr table {
    margin: 0 auto !important;
    border: none !important;
    border-spacing: 0 !important;
    background: none !important;
}

/* Page number links */
.mGrid .pgr a {
    display: inline-block;
    padding: 5px 11px !important;
    color: #2b6cb0 !important;
    text-decoration: none !important;
    border: 1px solid #d8e1ea !important;
    background: #ffffff !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

.mGrid .pgr a:hover {
    background: #e9ecef !important;
    color: #215387 !important;
    border-color: #d8e1ea !important;
}

/* Current active page (rendered as span) */
.mGrid .pgr span {
    display: inline-block;
    padding: 5px 11px !important;
    background: #2b6cb0 !important;
    color: #ffffff !important;
    border: 1px solid #2b6cb0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

/* --- Older grids (DataGrid) --- */
/* Slate, not brand blue: these header bands repeat on every data page, and a
   saturated one would compete with the flagged/abnormal cues inside the rows. */
.grdHeader {
    font-size: 12px;
    font-weight: 600;
    height: 34px;
    background: linear-gradient(to bottom, #4a5568, #2d3748);
    background-image: linear-gradient(to bottom, #4a5568, #2d3748);
    border-bottom: 2px solid #2b6cb0;
    color: #ffffff;
}

.grdHeader td {
    padding: 6px 10px;
    text-align: left;
    vertical-align: middle;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff !important;
    white-space: nowrap;
}

.grdHeader a {
    color: #ffffff !important;
    text-decoration: none;
}

.grdHeader a:hover {
    text-decoration: underline;
}

.grdItem td,
.grdItemAlt td {
    padding: 5px 10px;
    border: 1px solid #dee7f0;
    font-size: 12px;
    color: #1a202c;
    vertical-align: top;
}

.grdItem td a,
.grdItemAlt td a {
    font-size: 12px;
}

.grdItem {
    background-color: #ffffff;
}

.grdItemAlt {
    background-color: #fafcfe;
}

.grdItem:hover td,
.grdItemAlt:hover td {
    background-color: #e8f1fa;
    cursor: pointer;
}

.grdPager {
    background: #f6f9fc !important;
}

/* After JS merges pager into single td */
.grdPager td.pager-merged {
    padding: 8px 10px !important;
    text-align: center !important;
    border: none !important;
    border-top: 1px solid #d4e0ea !important;
    background: #f6f9fc !important;
}

/* Before JS merge — hide individual cells nicely */
.grdPager td {
    padding: 4px 3px !important;
    font-size: 12px;
    text-align: center !important;
    border: none !important;
    border-top: 1px solid #d4e0ea !important;
    background: #f6f9fc !important;
}

.grdPager a {
    padding: 3px 8px;
    color: #2b6cb0;
    text-decoration: none;
    border: 1px solid #dee7f0;
    background: #ffffff;
    margin: 0 1px;
}

.grdPager a:hover {
    background: #eef5fc;
    border-color: #3379bd;
}

.grdPager span {
    padding: 3px 8px;
    background: #2b6cb0;
    color: #ffffff;
    border: 1px solid #2b6cb0;
    font-weight: 600;
    margin: 0 1px;
}

/* No min-height. This used to reserve 400px so the page would not jump between
   result pages, but the reservation is inside the border, so a short page of
   rows drew an empty bordered box hanging under the pager. The sticky footer
   (see the BODY rule) now holds the page down instead, which is what that
   min-height was really being asked to do -- and it does it without putting
   dead space inside the grid frame. */
.divGrid {
    border: 1px solid #d4e0ea;
    overflow-x: auto;
    width: 100%;
}

/* border: none is load-bearing. None of the grids set GridLines, so DataGrid
   defaults to "Both" and renders a literal border="1" attribute. That
   presentational hint paints a dark 1px edge that the theme's own light borders
   were only partly covering -- it showed up most obviously as a near-black box
   drawn around the pager row, whose cells set border:none deliberately. Killing
   it here fixes every grid at once instead of adding GridLines="None" to each
   of the .aspx files. .divGrid already supplies the outer frame. */
.divGrid table {
    width: 100% !important;
    min-width: 100%;
    border-collapse: collapse;
    border: none !important;
}

/* ============================================
   Grid icons (Results Review)

   Replaces three dated 16px PNGs -- cum.png, contentPublish.png and Red.png --
   with Bootstrap Icons, which main.master already loads on every page that uses
   it. Icons now scale without blurring, take their colour from the palette
   instead of having it baked into the file, and can carry a hover state, which
   a raster <img> inside a link could not.

   Red.png was a *blue* triangle in spite of its filename, so the flag keeps the
   informational blue it has always shown rather than being promoted to a
   warning colour. Nothing about what the flag means was changed here.

   The two action icons are links; the flag is an indicator. They are styled
   apart so the flag never looks clickable.
   ============================================ */

.grid-icon,
.grid-icon-btn .bi {
    font-size: 16px;
    line-height: 1;
    vertical-align: -0.125em;
}

/* Pad the link, not the glyph, so the hit target stays about the size of the
   20px images these replaced. */
.grid-icon-btn {
    display: inline-block;
    padding: 2px 4px;
    border-radius: 4px;
    text-decoration: none !important;
    transition: color 0.15s ease, background-color 0.15s ease;
}

/* !important throughout: the generic "a:link" and ".grdItem a:link" colour
   rules further down this sheet would otherwise repaint these to link blue. */
.grid-icon-cum,
.grid-icon-cum:link,
.grid-icon-cum:visited {
    color: var(--ipd-primary) !important;
}

.grid-icon-cum:hover {
    color: var(--ipd-primary-dark) !important;
    background-color: #eef5fc;
}

.grid-icon-review,
.grid-icon-review:link,
.grid-icon-review:visited {
    color: var(--ipd-success) !important;
}

.grid-icon-review:hover {
    color: #1e8449 !important;
    background-color: #e8f6ee;
}

/* Indicator, not a control -- no hover, no pointer. */
.grid-icon-flag {
    color: var(--ipd-primary);
    cursor: default;
}

.divGrid-empty {
    padding: 20px;
    text-align: center;
    color: #5a6c84;
    font-size: 13px;
    font-style: italic;
}

.divGrid-footer {
    padding: 6px 12px;
    background: #f6f9fc;
    border-top: 1px solid #d4e0ea;
    font-size: 12px;
    font-weight: 600;
    color: #2b6cb0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/* --- Page Header Bars --- */
#divHeader, .divHeader {
    margin: -20px -25px 15px -25px !important;
    padding: 12px 25px;
    text-align: left;
    width: auto !important;
    max-width: none !important;
    background: linear-gradient(to bottom, #eff4f9, #dee7f0) !important;
    background-image: linear-gradient(to bottom, #eff4f9, #dee7f0) !important;
    color: #215387 !important;
    font-size: 16px;
    font-weight: 600;
    border-radius: 0 !important;
    border: none !important;
    border-left: none !important;
    border-bottom: 1.5px solid #fbb87a !important;
    box-sizing: border-box !important;
    letter-spacing: 0.3px;
}

/* The right-hand controls ("View 10 Results Per Page", Print / Flag All) are in a
   float:right div, so they hang below the bar's content box. Anything after the
   bar that clears floats -- the Filter Results header does -- then gets clearance
   pushed past that overhang, which is the white strip it used to leave behind.
   Containing the float keeps the bar as tall as its own contents. */
#divHeader::after,
.divHeader::after {
    content: "";
    display: block;
    clear: both;
}

.collapsePanelHeader {
    width: auto !important;
    max-width: none !important;
    height: auto;
    box-sizing: border-box !important;
    margin: 0 -25px 15px -25px !important;
    padding: 12px 25px;
    background: linear-gradient(to bottom, #eff4f9, #dee7f0) !important;
    background-image: linear-gradient(to bottom, #eff4f9, #dee7f0) !important;
    color: var(--ipd-primary-dark) !important;
    font-size: 16px;
    font-weight: 600;
    clear: both;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1.5px solid #fbb87a !important;
    letter-spacing: 0.3px;
}

/* The "Filter Results" caption and its expand/collapse arrow are floated in the
   markup (the arrow via ImageAlign="left"), which left the two sitting on
   different baselines. Lay the header row out as a centred flex row instead. */
.collapsePanelHeader > div {
    display: flex;
    align-items: center;
    padding: 0 !important;
}

.collapsePanelHeader > div > div,
.collapsePanelHeader > div img {
    float: none !important;
}

/* expand_blue.jpg / collapse_blue.jpg are opaque JPEGs, so CSS colour properties
   cannot touch them. Their chevron is already near-neutral (#54595D-ish) with a
   faint blue cast; grayscale removes the cast so it lands on the graphite side
   of the logo palette, and multiply drops the white JPEG background out against
   the header's gradient. */
.collapsePanelHeader > div img {
    filter: grayscale(1);
    mix-blend-mode: multiply;
}

/* Remove the white gap between a page header bar and a following collapsible
   filter header (e.g. Results For Review -> Filter Results). General sibling
   rather than adjacent: the CollapsiblePanelExtender sits between the two in the
   markup, so "+" cannot be relied on to match. */
#divHeader ~ .collapsePanelHeader,
.divHeader ~ .collapsePanelHeader {
    margin-top: -15px !important;
}

/* --- Buttons (Global) --- */
input[type="submit"],
input[type="button"],
.btn-ipd {
    font-family: var(--ipd-font-family);
    font-size: 13px;
    font-weight: 600;
    padding: 4px 14px;
    height: 28px;
    box-sizing: border-box;
    border: 1px solid #cedbe7;
    background: linear-gradient(to bottom, #ffffff, #f3f7fb);
    color: #1a202c;
    cursor: pointer;
    transition: all 0.15s ease;
    vertical-align: middle;
    line-height: 1.4;
}

input[type="submit"]:hover,
input[type="button"]:hover,
.btn-ipd:hover {
    background: linear-gradient(to bottom, #f3f7fb, #e5edf4);
    border-color: #8ea5bb;
    color: #1b4776;
}

input[type="submit"]:active,
input[type="button"]:active {
    background: #e5edf4;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

input[type="submit"]:disabled,
input[type="button"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Primary buttons - Find, Submit, Save */
input[type="submit"][value="Find"],
input[type="submit"][value="Search"],
input[type="submit"][value="Filter"],
input[type="submit"][value="Save"],
input[type="submit"][value="Submit"],
input[type="submit"][value="Apply"] {
    background: linear-gradient(to bottom, #3379bd, #2b6cb0);
    color: #ffffff;
    border-color: #215387;
}

input[type="submit"][value="Find"]:hover,
input[type="submit"][value="Search"]:hover,
input[type="submit"][value="Filter"]:hover,
input[type="submit"][value="Save"]:hover,
input[type="submit"][value="Submit"]:hover,
input[type="submit"][value="Apply"]:hover {
    background: linear-gradient(to bottom, #2b6cb0, #1b4776);
    border-color: #1b4776;
    color: #ffffff;
}

/* New/Add buttons — green.

   The old #2ecc71/#27ae60 pair carried white 12px bold text at 2.1:1 to 2.9:1,
   well under AA. These are pure green -- zero red channel -- which is as
   saturated as the hue gets, and #008640 is about the brightest such green that
   still clears 4.5:1 against white (#008a3c already drops to 4.47:1). So this
   is the most vivid this button can be while its label stays readable; going
   lighter for more punch would mean giving up white text. */
input[type="submit"][value="New"],
input[type="submit"][value="Add"],
input[type="submit"][value="Add Collector"] {
    background: linear-gradient(to bottom, #008640, #006c33);
    color: #ffffff;
    border-color: #005c2b;
}

input[type="submit"][value="New"]:hover,
input[type="submit"][value="Add"]:hover,
input[type="submit"][value="Add Collector"]:hover {
    /* Darkens on hover like every other button in this sheet. It cannot brighten
       instead: the resting gradient is already at the readable limit for white. */
    background: linear-gradient(to bottom, #007a3a, #005c2b);
    border-color: #004d24;
    color: #ffffff;
}

/* New Requisition / New Patient — light brand blue.

   The label is dark navy, not white, and that is what makes this shade possible
   at all. A white label caps the fill at #3379bd (4.55:1; the next step up falls
   to 3.6:1, under AA), so every lighter blue than that had to flip the text to
   keep the button readable. Inverted this way the fill can go far lighter and
   contrast actually improves: #1b4776 measures 7.2:1 on the top stop and 6.2:1
   on the bottom.

   The border carries more weight here than on the solid buttons: a pale fill on
   a white form has almost no edge of its own, so the border is what says
   "button". It is set to clear 3:1 against white (WCAG 1.4.11 for a UI component
   boundary) -- the obvious tint to pair with this fill, #8fb8dd, only reaches
   2.1:1 and let the button dissolve into the form. */

/* These do not share the green New/Add rule above: the inline "Add" buttons that
   add a row inside a grid stay green, and these two page-level create actions
   are blue. */
a.btn-ipd-new,
a.btn-ipd-new:link,
a.btn-ipd-new:visited {
    background: linear-gradient(to bottom, #cfe3f7, #b9d3ec);
    color: #1b4776;
    border-color: #5a93c8;
}

a.btn-ipd-new:hover {
    background: linear-gradient(to bottom, #b9d3ec, #a3c6e5);
    border-color: #3d7cb5;
    color: #163a61;
}

/* --- LinkButtons rendered as buttons ---

   asp:LinkButton emits an <a>, so it needs the box behaviour that the <input>
   buttons get for free, and it has to beat the generic "a:link" colour rule
   further down this sheet. Used by New Requisition / New Patient on
   RequisitionEntry, which stayed LinkButtons because their code-behind binds
   Handles .Click and toggles .Visible -- only their appearance changed. */
a.btn-ipd {
    display: inline-block;
    height: auto;
    white-space: nowrap;
    text-decoration: none !important;
    border-radius: 3px;
}

a.btn-ipd,
a.btn-ipd:link,
a.btn-ipd:visited {
    color: #1a202c;
}

a.btn-ipd .bi {
    font-size: 14px;
    margin-right: 5px;
    vertical-align: -0.09em;
}

/* Print button — teal */
input[type="submit"][value="Print"] {
    background: linear-gradient(to bottom, #4f6178, #2d3748);
    color: #ffffff;
    border-color: #2c3646;
}

input[type="submit"][value="Print"]:hover {
    background: linear-gradient(to bottom, #2d3748, #1a202c);
    border-color: #1a202c;
    color: #ffffff;
}

/* Danger buttons - Delete.
   Primary actions are now brand red, so destructive actions can no longer be
   told apart by hue alone. They get a much darker, desaturated maroon instead:
   same family, clearly heavier, and no longer the loudest control on screen. */
input[type="submit"][value="Delete"],
input[type="submit"][value="Remove"] {
    background: linear-gradient(to bottom, #7d1e1a, #5e1512);
    color: #ffffff;
    border-color: #4a100e;
}

input[type="submit"][value="Delete"]:hover,
input[type="submit"][value="Remove"]:hover {
    background: linear-gradient(to bottom, #5e1512, #4a100e);
    border-color: #3a0c0a;
    color: #ffffff;
}

/* Clear/Reset buttons */
input[type="submit"][value="Clear"],
input[type="submit"][value="Clear All"],
input[type="submit"][value="Cancel"],
input[type="submit"][value="Reset"] {
    background: #ffffff;
    color: #5a6c84;
    border-color: #cedbe7;
}

input[type="submit"][value="Clear"]:hover,
input[type="submit"][value="Clear All"]:hover,
input[type="submit"][value="Cancel"]:hover,
input[type="submit"][value="Reset"]:hover {
    background: #fafcfe;
    border-color: #9fb4c8;
    color: #1a202c;
}

/* Close (X) buttons - compact circle */
input[type="submit"][value="X"],
input[type="submit"][value="x"] {
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 700;
    line-height: 22px !important;
    text-align: center;
    background: rgba(255,255,255,0.2) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    border-radius: 50% !important;
    min-width: 0;
    cursor: pointer;
    transition: all 0.15s ease;
}

input[type="submit"][value="X"]:hover,
input[type="submit"][value="x"]:hover {
    background: rgba(255,255,255,0.35) !important;
    border-color: rgba(255,255,255,0.5) !important;
    color: #ffffff !important;
}

/* --- Links ---
   The deeper --ipd-primary rather than a brighter blue: #3d8bd6 on white is
   only about 3.5:1 against the background, which is under AA for the 11-12px
   text these grids use. Visited is deeper still (#215387, the site's own second
   blue) so the two states separate without either dropping below AA. */
a:link { color: var(--ipd-primary); }
a:visited { color: #215387; }
a:active { color: var(--ipd-accent-hover); }
a:hover { color: var(--ipd-primary-light); background-color: transparent !important; }

.grdItem a:link, .grdItemAlt a:link { color: var(--ipd-primary); }
.grdItem a:hover, .grdItemAlt a:hover { color: var(--ipd-primary-light); }

/* --- Footer --- */
.footer {
    padding: 15px 20px;
    color: var(--ipd-text-muted);
    background-color: #ffffff !important;
    border-top: 1px solid var(--ipd-border);
    font-size: 13px;
}

.footer a:link,
.footer a:visited,
.footer a:active {
    color: var(--ipd-text-muted);
    text-decoration: none;
}

.footer a:hover {
    color: var(--ipd-primary);
    text-decoration: underline;
}

/* --- Form Table Alignment --- */
.maincolumn table {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* --- Form Row Alignment & Icons --- */
.maincolumn table td img:not([class*="ajax__html"]) {
    width: 20px !important;
    height: 20px !important;
    vertical-align: middle !important;
    position: relative;
    top: 0px;
}

/* HTML Editor toolbar — keep native styles */
div[id*="htmlEditorExtender"] select,
div[id*="HtmlEditorExtender"] select {
    height: auto !important;
    font-size: 12px !important;
    padding: 1px 4px !important;
}

.maincolumn table tr {
    vertical-align: middle !important;
}

.maincolumn table td {
    vertical-align: middle !important;
    color: var(--ipd-text);
    font-size: 13.5px;
    padding: 3px 4px !important;
}

.maincolumn table td input[type="text"],
.maincolumn table td select,
.maincolumn table td .ajax__combobox_inputcontainer {
    vertical-align: middle !important;
}

.maincolumn table td a {
    vertical-align: middle !important;
    display: inline !important;
    line-height: 1 !important;
}

/* Required field asterisk */
.req::after {
    content: " *";
    color: #dc3545;
    font-weight: 700;
    font-size: 14px;
}

/* --- Form Labels (first column) --- */
.maincolumn table td:first-child {
    font-weight: 600;
    color: #1a202c;
    white-space: nowrap;
    padding-right: 10px !important;
}

/* --- Form Data (second column) - flush left --- */
.maincolumn .re-form-table td:first-child {
    padding-right: 6px !important;
}

.maincolumn .re-form-table td + td {
    padding-left: 0 !important;
}

/* Requisition Number highlight */
.maincolumn .ajax__combobox_inputcontainer input {
    background-color: #fffde7 !important;
}

/* ComboBox alignment */
.maincolumn .ajax__combobox_inputcontainer {
    display: inline-table !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
    border-spacing: 0 !important;
    position: relative;
    top: 3px;
}

.maincolumn .ajax__combobox_inputcontainer input {
    width: 100% !important;
    padding: 5px 8px !important;
    height: 28px !important;
    box-sizing: border-box !important;
    font-size: 13px !important;
}

.maincolumn .ajax__combobox_inputcontainer td {
    padding: 0 !important;
    margin: 0 !important;
}

.maincolumn .ajax__combobox_buttoncontainer {
    vertical-align: middle !important;
    padding: 0 !important;
    margin: 0 !important;
}

.maincolumn .ajax__combobox_buttoncontainer button {
    height: 28px !important;
    width: 24px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid #cedbe7 !important;
    border-left: none !important;
    background-color: #fafcfe !important;
    cursor: pointer;
    vertical-align: middle !important;
    font-size: 0 !important;
    position: relative;
}

.maincolumn .ajax__combobox_buttoncontainer button::after {
    content: "\25BC";
    font-size: 11px;
    color: #5a6c84;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.maincolumn .ajax__combobox_buttoncontainer button:hover {
    background-color: #eef5fc !important;
}

.maincolumn .ajax__combobox_buttoncontainer button:hover::after {
    color: #1a202c;
}

.maincolumn .ajax__combobox_itemlist {
    max-height: 200px;
    overflow-y: auto;
}

/* ComboBox outer wrapper div */
.maincolumn div[id*="_ComboBox"],
.maincolumn .ajaxToolkit_ComboBox {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
}

/* ComboBox inner table - align middle */
.maincolumn .ajax__combobox_inputcontainer,
.maincolumn table.ajax__combobox_inputcontainer {
    vertical-align: middle !important;
}

/* Space between inline form elements */
.maincolumn table td input[type="text"],
.maincolumn table td select {
    margin-right: 6px;
}

.maincolumn table td label,
.maincolumn table td span:not(.hidden) {
    margin-left: 4px;
    margin-right: 4px;
}

/* --- Form Tables (Patient Info, Bill To, Fasting) --- */
.re-form-table {
    width: 80%;
    table-layout: auto;
}

/* Apply consistent layout to ALL form tables with 150px label columns */
.maincolumn table td[width="150px"] {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
}

.maincolumn table td[width="150px"] + td {
    padding-left: 0 !important;
}

/* Patient-info forms (RequisitionEntry, Patients, etc.): each row is its own table,
   so a long label like "Name (Last, First, Middle):" widens that table's label column
   while shorter-label rows stay at 150px, leaving the inputs misaligned. Force one
   uniform label width (>= the longest label) inside #maincontent so every input
   column lines up. Sibling cells without a width attribute inherit from the anchor
   label cell in the same table. */
#maincontent table td[width="150px"] {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
}

/* Stacked label/field forms (RequisitionEntry demographics, PhysicianSignatures).
   The rules above only reach a row whose label cell actually carries the
   width="150px" attribute -- rows written as a bare <td> (Address, City State
   Zip, Date of birth, Device ID, Email) kept their default cell padding, so
   their inputs sat a few px right of the rest. And because the rows are spread
   over several sibling tables, none of them share a column to align against.
   Pinning width and padding on the cells themselves gives one label column and
   one row height across every table, whichever way a row was written. */
.ipd-form-rows {
    border-collapse: collapse;
    /* Defensive: where consecutive rows genuinely cannot share one table (they
       sit in different UpdatePanels), the gap between them is the two tables'
       cell padding and nothing else. */
    margin: 0 !important;
}

.ipd-form-rows > tbody > tr > td {
    padding: 4px 0 !important;
    vertical-align: middle;
}

.ipd-form-rows > tbody > tr > td:first-child {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    padding-right: 10px !important;
}

/* --- Action Link Buttons --- */
.btn-action-link {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    padding: 5px 14px !important;
    font-size: 13px !important;
    font-weight: 600;
    font-family: var(--ipd-font-family);
    color: #ffffff !important;
    background: linear-gradient(to bottom, #2ecc71, #27ae60) !important;
    border: 1px solid #219a52 !important;
    border-radius: 0 !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.15s ease;
    vertical-align: middle;
    line-height: 1.4;
    white-space: nowrap;
    height: 28px;
    box-sizing: border-box;
}

.btn-action-link:hover {
    background: linear-gradient(to bottom, #27ae60, #1e8449) !important;
    border-color: #1a7a42 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    box-shadow: 0 1px 4px rgba(39, 174, 96, 0.3);
}

.btn-action-link:active {
    background: #1e8449 !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
}

.btn-action-link img {
    display: none !important;
}

.btn-action-link i {
    font-size: 14px !important;
    width: auto !important;
    height: auto !important;
}

/* "New" action — green matching the add buttons */
.btn-action-new {
    background: linear-gradient(to bottom, #2ecc71, #27ae60) !important;
    border-color: #219a52 !important;
    color: #ffffff !important;
}

.btn-action-new:hover {
    background: linear-gradient(to bottom, #27ae60, #1e8449) !important;
    border-color: #1a7a42 !important;
    color: #ffffff !important;
    box-shadow: 0 1px 4px rgba(39, 174, 96, 0.3);
}

.btn-action-new:active {
    background: #1e8449 !important;
    color: #ffffff !important;
}

/* Red variant for remove/delete buttons */
.btn-action-remove {
    background: linear-gradient(to bottom, #e74c3c, #c0392b) !important;
    border-color: #a93226 !important;
}

.btn-action-remove:hover {
    background: linear-gradient(to bottom, #c0392b, #a93226) !important;
    border-color: #922b21 !important;
    box-shadow: 0 1px 4px rgba(192, 57, 43, 0.3);
}

.btn-action-remove:active {
    background: #a93226 !important;
}

/* Physician Signatures — amber/gold */
.btn-action-phys,
.btn-action-phys span,
.btn-action-phys i,
a.btn-action-phys,
a.btn-action-phys:link,
a.btn-action-phys:visited {
    background: linear-gradient(to bottom, #f39c12, #d68910) !important;
    border-color: #b7770a !important;
    color: #ffffff !important;
}

.btn-action-phys:hover,
.btn-action-phys:hover span,
.btn-action-phys:hover i,
a.btn-action-phys:hover {
    background: linear-gradient(to bottom, #d68910, #b7770a) !important;
    border-color: #9c6608 !important;
    box-shadow: 0 1px 4px rgba(243, 156, 18, 0.3);
    color: #ffffff !important;
}

/* --- Bottom Action Button Bar --- */
.re-button-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 0;
    width: 80%;
}

/* --- Form Controls Enhancement --- */
input[type="text"],
input[type="password"],
select,
textarea {
    font-family: var(--ipd-font-family);
    font-size: 13px;
    background-color: #ffffff;
    color: #1a202c;
    border: 1px solid #cedbe7;
    border-radius: 0;
    padding: 5px 8px;
    height: 28px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    vertical-align: middle;
}

select {
    height: 28px;
    padding: 4px 6px;
}

textarea {
    height: auto;
    min-height: 60px;
}

input[type="text"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
    border-color: #3379bd;
    box-shadow: 0 0 0 2px rgba(43, 108, 176, 0.15);
    outline: none;
}

/* --- Message Divs --- */
.MessageDiv, .MessageDivSmall {
    border: 1px solid var(--ipd-danger);
    color: var(--ipd-danger);
    font-weight: 600;
    margin-bottom: 12px;
    padding: 12px 15px;
    width: auto;
    max-width: 800px;
    background-color: #fdf0ef;
    border-radius: 0;
}

/* --- Modal Popups --- */
.BackgroundStyle {
    background-color: rgba(0, 0, 0, 0.5);
    filter: none;
    opacity: 0.5;
}

/* Popup panel styling — respects each panel's own Width/Height */
.ModalPopupShow {
    border: 1px solid #b5c8da !important;
    border-radius: 0 !important;
    box-shadow: var(--ipd-shadow-lg), 0 0 0 1px rgba(0, 0, 0, 0.1) !important;
    font-family: var(--ipd-font-family) !important;
    font-size: 13px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background-color: #ffffff !important;
    padding: 0 !important;
}

.ModalPopupHide {
    display: none !important;
}

/* Popup inner content — tight spacing */
.ModalPopupShow > div:not(.divHeader):not(#divHeader),
.ModalPopupShow > span,
.ModalPopupShow > table,
.ModalPopupShow .ContentTemplate {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Wrapping tables inside popups — full width, no extra spacing */
.ModalPopupShow > div table:not(.mGrid):not([style*="background-color"]) {
    width: 100% !important;
    margin: 0 !important;
    border-spacing: 0 !important;
}

.ModalPopupShow > div table:not(.mGrid):not([style*="background-color"]) > tbody > tr > td {
    padding: 0 !important;
}

/* Popup header bars */
.ModalPopupShow .divHeader,
.ModalPopupShow #divHeader {
    margin: 0 !important;
    padding: 12px 15px !important;
    background: linear-gradient(135deg, #1b4776, #245e9b, #3379bd) !important;
    color: #ffffff !important;
    border-radius: 0 !important;
    border-bottom: 2px solid #fbb87a !important;
    border-left: none !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    width: auto !important;
    max-width: none !important;
}

.ModalPopupShow .divHeader *,
.ModalPopupShow #divHeader *,
.ModalPopupHide .divHeader *,
.ModalPopupShow .divHeader a,
.ModalPopupShow .divHeader span,
.ModalPopupShow .divHeader label,
.ModalPopupHide .divHeader a,
.ModalPopupHide .divHeader span,
.ModalPopupHide .divHeader label {
    color: #ffffff !important;
}

/* Popup headers — applies regardless of Show/Hide class */
.ModalPopupHide .divHeader,
.ModalPopupHide #divHeader {
    margin: 0 !important;
    padding: 12px 15px !important;
    background: linear-gradient(135deg, #1b4776, #245e9b, #3379bd) !important;
    color: #ffffff !important;
    border-radius: 0 !important;
    border-bottom: 2px solid #fbb87a !important;
    border-left: none !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    width: auto !important;
    max-width: none !important;
}

/* Popup close X button */
.ModalPopupShow .divHeader input[type="submit"],
.ModalPopupShow #divHeader input[type="submit"] {
    width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 24px !important;
    text-align: center;
    background: rgba(255,255,255,0.15) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    border-radius: 50% !important;
    cursor: pointer;
    transition: all 0.15s ease;
    min-width: 0 !important;
}

.ModalPopupShow .divHeader input[type="submit"]:hover,
.ModalPopupShow #divHeader input[type="submit"]:hover {
    background: rgba(255,255,255,0.3) !important;
    border-color: rgba(255,255,255,0.5) !important;
    color: #ffffff !important;
}

/* ── Grid styling ── */
.mGrid {
    border: 1px solid #b5c8da !important;
    border-collapse: collapse !important;
    background-color: #ffffff !important;
    width: 100% !important;
}

.mGrid td,
.mGrid td a {
    background-color: #ffffff !important;
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid #dae4ee !important;
    box-shadow: none !important;
    padding: 3px 6px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
}

.mGrid tr.alt td,
.mGrid tr.alt td a {
    background-color: #f8f9fa !important;
    background: #f8f9fa !important;
    background-image: none !important;
}

/* This block is unscoped, so it beats the .mGrid th rule further up for every
   grid on the site, not just the ones in popups. Kept in step with .grdHeader. */
.mGrid th {
    background: linear-gradient(to bottom, #4a5568, #2d3748) !important;
    background-image: linear-gradient(to bottom, #4a5568, #2d3748) !important;
    color: #ffffff !important;
    border: 1px solid #2d3748 !important;
    border-bottom: 2px solid #2b6cb0 !important;
    padding: 3px 8px !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-align: left !important;
    box-shadow: none !important;
}

.mGrid th a {
    color: #ffffff !important;
    text-decoration: none !important;
}

.mGrid th a:hover {
    text-decoration: underline !important;
}

/* Hover — uniform color across entire row including select column */
.mGrid tr:hover td,
.mGrid tr:hover td a,
.mGrid tr.alt:hover td,
.mGrid tr.alt:hover td a {
    background-color: #eef5fc !important;
    background: #eef5fc !important;
    cursor: pointer;
}

/* Popup-specific grid spacing */
.ModalPopupShow .mGrid {
    margin: 8px !important;
    margin-bottom: 15px !important;
    width: calc(100% - 16px) !important;
}

/* Give popups more breathing room at the bottom for paging */
.ModalPopupShow,
.ModalPopupHide {
    padding-bottom: 10px !important;
}

/* Prevent vertical stretching inside popups */
.ModalPopupShow table,
.ModalPopupShow table tbody,
.ModalPopupShow table tr,
.ModalPopupShow table td,
.ModalPopupShow table th {
    height: auto !important;
}

.ModalPopupShow .mGrid {
    width: 100% !important;
}

.ModalPopupShow .mGrid th,
.ModalPopupShow .mGrid td {
    padding: 4px 8px !important;
    vertical-align: middle !important;
}

/* Auto-generated Select column — keep narrow (exclude pager row) */
.mGrid tr:not(.pgr) > td:first-child,
.mGrid th:first-child {
    width: 40px !important;
    text-align: center !important;
    padding: 3px 4px !important;
}

.mGrid tr:not(.pgr) > td:first-child a {
    color: var(--ipd-primary) !important;
    text-decoration: none !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

.mGrid tr:not(.pgr) > td:first-child a:hover {
    text-decoration: underline !important;
    color: #215387 !important;
}

/* Popup filter areas */
.ModalPopupShow table[style*="background-color:#ddd"],
.ModalPopupShow table[style*="background-color: #ddd"] {
    background-color: var(--ipd-bg-light) !important;
    border: 1px solid var(--ipd-border) !important;
    border-radius: 0 !important;
    margin: 6px 8px !important;
    padding: 4px 6px !important;
    width: calc(100% - 16px) !important;
    border-spacing: 0 !important;
    border-collapse: collapse !important;
}

.ModalPopupShow table[style*="background-color:#ddd"] td,
.ModalPopupShow table[style*="background-color: #ddd"] td {
    padding: 2px 4px !important;
    vertical-align: middle !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #495057 !important;
    line-height: 1.2 !important;
}

/* Popup filter input fields */
.ModalPopupShow table[style*="background-color:#ddd"] input[type="text"],
.ModalPopupShow table[style*="background-color: #ddd"] input[type="text"] {
    padding: 2px 4px !important;
    border: 1px solid var(--ipd-border) !important;
    border-radius: 0 !important;
    font-size: 12px !important;
    height: 20px !important;
}

/* Popup filter checkboxes */
.ModalPopupShow table[style*="background-color:#ddd"] input[type="checkbox"],
.ModalPopupShow table[style*="background-color: #ddd"] input[type="checkbox"] {
    margin: 0 !important;
    vertical-align: middle !important;
}

/* Popup filter — remove spacing between label row and input row */
.ModalPopupShow table[style*="background-color:#ddd"] tr,
.ModalPopupShow table[style*="background-color: #ddd"] tr {
    line-height: 1.1 !important;
}

/* Popup Find/Clear/Filter buttons */
.ModalPopupShow input[type="submit"] {
    padding: 2px 10px !important;
    font-size: 12px !important;
    font-family: var(--ipd-font-family) !important;
    font-weight: 500 !important;
    border-radius: 0 !important;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-right: 3px !important;
    height: 20px !important;
}

/* Style Find/filter buttons as primary */
.ModalPopupShow input[value="Find"],
.ModalPopupShow input[value="Filter"],
.ModalPopupShow input[value="Search"] {
    background: var(--ipd-primary-light) !important;
    color: #ffffff !important;
    border: 1px solid var(--ipd-primary-light) !important;
}

.ModalPopupShow input[value="Find"]:hover,
.ModalPopupShow input[value="Filter"]:hover,
.ModalPopupShow input[value="Search"]:hover {
    background: var(--ipd-primary) !important;
    border-color: var(--ipd-primary) !important;
}

/* Style Clear buttons as secondary */
.ModalPopupShow input[value="Clear"] {
    background: #ffffff !important;
    color: var(--ipd-text) !important;
    border: 1px solid var(--ipd-border) !important;
}

.ModalPopupShow input[value="Clear"]:hover {
    background: var(--ipd-bg-light) !important;
    border-color: #adb5bd !important;
}

/* Submit Selection button — green like action buttons */
.ModalPopupShow input[value="Submit Selection"] {
    background: #27ae60 !important;
    color: #ffffff !important;
    border: 1px solid #27ae60 !important;
    padding: 5px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    height: auto !important;
    cursor: pointer;
}

.ModalPopupShow input[value="Submit Selection"]:hover {
    background: #1e8449 !important;
    border-color: #1e8449 !important;
}

/* Clear All button — secondary outline style */
.ModalPopupShow input[value="Clear All"] {
    background: #ffffff !important;
    color: #495057 !important;
    border: 1px solid #adb5bd !important;
    padding: 5px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    height: auto !important;
    cursor: pointer;
}

.ModalPopupShow input[value="Clear All"]:hover {
    background: #f8f9fa !important;
    border-color: #6c757d !important;
}

/* Popup content padding */
.ModalPopupShow > div:not(.divHeader):not(#divHeader) {
    padding: 0 10px;
}

/* Override inline fixed heights - let popups auto-size */
div[id*="pnlSelect"],
div[id*="pnlAdd"],
div[id*="pnlReq"],
div[id*="pnlCapture"] {
    height: auto !important;
    min-height: 0 !important;
}

/* --- SubLinks Bar --- */
.headSubLinksBar {
    font-family: var(--ipd-font-family);
    font-size: 15px;
    font-weight: 600;
    color: #cccccc;
    background-color: var(--ipd-primary-dark);
    width: 100%;
    padding-left: 15px;
    height: 36px;
    line-height: 36px;
}

/* ============================================
   MOBILE / RESPONSIVE
   ============================================ */

/* --- Hamburger Toggle Button (hidden on desktop) --- */
.ipd-nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px 14px;
    position: relative;
    z-index: 10;
}

.ipd-nav-toggle-icon,
.ipd-nav-toggle-icon::before,
.ipd-nav-toggle-icon::after {
    display: block;
    width: 22px;
    height: 2px;
    background: #ffffff;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.ipd-nav-toggle-icon {
    position: relative;
}

.ipd-nav-toggle-icon::before,
.ipd-nav-toggle-icon::after {
    content: "";
    position: absolute;
    left: 0;
}

.ipd-nav-toggle-icon::before { top: -7px; }
.ipd-nav-toggle-icon::after  { top: 7px; }

/* Animate to X when open */
.ipd-nav-toggle.active .ipd-nav-toggle-icon {
    background: transparent;
}

.ipd-nav-toggle.active .ipd-nav-toggle-icon::before {
    top: 0;
    transform: rotate(45deg);
}

.ipd-nav-toggle.active .ipd-nav-toggle-icon::after {
    top: 0;
    transform: rotate(-45deg);
}

/* --- >= 1200px (desktop — keep as-is) --- */
@media (max-width: 1200px) {
    .container {
        max-width: 100% !important;
        border-radius: 0 !important;
    }
    .header, .footer {
        max-width: 100%;
    }
}

/* --- Tablet (≤ 992px) --- */
@media (max-width: 992px) {
    /* Show hamburger */
    .ipd-nav-toggle {
        display: block;
    }

    /* Collapse nav by default */
    #ipdNavList {
        display: none !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    #ipdNavList.ipd-nav-open {
        display: flex !important;
    }

    #ipdNavList li {
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    #ipdNavList li a {
        padding: 12px 18px !important;
        border-bottom: none !important;
        border-left: 3px solid transparent;
    }

    #ipdNavList li a.active {
        border-left-color: var(--ipd-nav-active) !important;
    }

    #ipdNavList li a:hover {
        border-left-color: var(--ipd-accent) !important;
    }

    /* Form tables — allow horizontal scroll */
    .maincolumn {
        padding: 15px 10px !important;
        overflow-x: auto !important;
    }

    .maincolumn table {
        min-width: 0 !important;
    }

    /* Filter row — wrap */
    .re-filter-row {
        gap: 8px;
    }

    /* Order section — stack columns */
    .re-order-row {
        flex-direction: column;
    }

    .re-order-col {
        flex: 1 1 100% !important;
    }

    /* Specimens row — stack */
    .re-specimens-row {
        flex-direction: column;
    }

    .re-specimens-row > div:first-child {
        flex: 1;
    }

    /* Image cards — wrap to 2 per row */
    .re-img-cards {
        flex-wrap: wrap;
    }

    .re-img-card {
        flex: 1 1 calc(50% - 8px);
        min-width: 140px;
    }

    /* Misc fields row — stack */
    .re-misc-row {
        flex-direction: column;
    }

    /* Form table full width */
    .re-form-table {
        width: 100% !important;
    }

    /* Button bar full width */
    .re-button-bar {
        width: 100% !important;
        flex-wrap: wrap;
    }

    /* Order section full width */
    .re-order-section {
        width: 100% !important;
    }

    /* Modal popups — fit screen */
    .ModalPopupShow {
        width: 95vw !important;
        max-width: 95vw !important;
        left: 2.5vw !important;
        max-height: 90vh !important;
    }
}

/* --- Phone (≤ 768px) --- */
@media (max-width: 768px) {
    /* Header — stack vertically */
    .header {
        padding: 10px 12px !important;
    }

    .header > div {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 6px !important;
    }

    .header > div > div {
        text-align: center !important;
        justify-content: center !important;
    }

    /* Page header bars */
    #divHeader, .divHeader {
        font-size: 15px;
        padding: 8px 12px;
        margin: -15px -10px 12px -10px !important;
    }

    .collapsePanelHeader {
        margin: 0 -10px 12px -10px !important;
        padding: 10px 12px;
        font-size: 15px;
    }

    /* Filter panel */
    .panelFilter {
        padding: 8px 10px;
    }

    .re-filter-row {
        flex-direction: column;
        align-items: stretch;
    }

    .re-filter-right {
        margin-left: 0;
    }

    /* Grids — horizontal scroll */
    .divGrid {
        min-height: 200px;
        -webkit-overflow-scrolling: touch;
    }

    .divGrid table {
        min-width: 600px;
    }

    /* mGrid — horizontal scroll wrapper */
    .mGrid {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Touch-friendly form controls */
    input[type="text"],
    input[type="password"],
    select,
    textarea {
        font-size: 15px !important;
        height: 36px !important;
        padding: 6px 10px !important;
    }

    select {
        height: 36px !important;
        padding: 6px 8px !important;
    }

    textarea {
        height: auto !important;
        min-height: 60px;
    }

    /* Touch-friendly buttons */
    input[type="submit"],
    input[type="button"],
    .btn-ipd {
        min-height: 36px;
        padding: 6px 16px;
        font-size: 14px;
    }

    /* Action link buttons */
    .btn-action-link {
        height: 36px !important;
        padding: 6px 14px !important;
        font-size: 14px !important;
    }

    /* Image cards — single column */
    .re-img-cards {
        flex-direction: column;
    }

    .re-img-card {
        flex: 1 1 100%;
    }

    /* Grid inline grids — ensure scroll */
    .re-grid-scroll {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .re-grid-scroll .DataTable {
        min-width: 400px;
    }

    /* Footer — stack */
    .footer {
        text-align: center;
    }

    .footer > div {
        flex-direction: column !important;
        align-items: center !important;
        gap: 6px;
    }

    /* Maincolumn form tables — stack label/value on small screens */
    .maincolumn > table > tbody > tr > td,
    .maincolumn table.re-form-table > tbody > tr > td {
        white-space: normal !important;
    }

    .maincolumn table td[width="150px"] {
        width: auto !important;
        min-width: auto !important;
        max-width: none !important;
    }
}

/* --- Small phone (≤ 480px) --- */
@media (max-width: 480px) {
    .maincolumn {
        padding: 10px 8px !important;
    }

    #divHeader, .divHeader {
        font-size: 14px;
        padding: 8px 10px;
        margin: -10px -8px 10px -8px !important;
    }

    .collapsePanelHeader {
        margin: 0 -8px 10px -8px !important;
        padding: 8px 10px;
        font-size: 14px;
    }

    /* Stack form label + value vertically */
    .maincolumn table td:first-child {
        padding-right: 4px !important;
        font-size: 12px;
    }

    /* Signature pad — fit width */
    canvas {
        max-width: 100% !important;
    }

    /* ComboBox — full width */
    .maincolumn .ajax__combobox_inputcontainer {
        width: 100% !important;
    }

    .maincolumn .ajax__combobox_inputcontainer input {
        width: 100% !important;
    }

    /* Message divs — full width */
    .MessageDiv, .MessageDivSmall {
        max-width: 100%;
    }

    /* Modal popups — nearly full screen */
    .ModalPopupShow {
        width: 98vw !important;
        max-width: 98vw !important;
        left: 1vw !important;
        max-height: 85vh !important;
    }

    .ModalPopupShow .divHeader,
    .ModalPopupShow #divHeader {
        padding: 10px 12px !important;
        font-size: 14px !important;
    }
}

/* --- Print Override --- */
@media print {
    .ipd-navbar,
    #ipdNavbar,
    .header,
    .footer {
        display: none !important;
    }

    .container {
        max-width: 100% !important;
        box-shadow: none !important;
    }

    .maincolumn {
        padding: 0 !important;
    }
}

/* ============================================
   Requisition Entry — Inline Grid Modernization
   (Specimens, DX Codes, Test Codes, Medications)
   ============================================ */

/* --- Inline Grids (Specimens, DX, Tests, Medications) --- */

.re-grid-wrap {
    border: 1px solid #c2d2e1;
    overflow: hidden;
    margin: 6px 0;
    background: #ffffff;
}

.re-grid-hdr {
    background: linear-gradient(to bottom, #4a5568, #2d3748);
    color: #ffffff !important;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--ipd-font-family);
    border-bottom: 2px solid #2b6cb0;
    display: flex;
    align-items: center;
}

.re-grid-hdr .re-add-btn {
    width: 28px;
    min-width: 28px;
    text-align: center;
    padding: 4px 6px;
    flex-shrink: 0;
    cursor: pointer;
}

.re-grid-hdr .re-add-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

.re-grid-hdr a {
    text-decoration: none !important;
    color: inherit;
}

.re-grid-hdr .re-add-btn .bi {
    font-size: 15px;
    color: #ffffff;
}

.re-grid-hdr .re-add-btn a {
    display: inline-block;
    line-height: 1;
}

.re-grid-hdr .re-col {
    padding: 5px 8px;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff !important;
}

.re-grid-hdr .re-col span,
.re-grid-hdr .re-col label {
    color: #ffffff !important;
}

.re-grid-hdr .re-col .bi {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    margin-left: 6px;
    cursor: pointer;
    vertical-align: middle;
}

.re-grid-hdr .re-col .bi:hover {
    color: #ffffff;
}

/* The header is a flex row while the body is a table-layout:fixed .DataTable,
   so the header cells have to be pinned to the same widths as the columns
   below them (28px delete / 150px code / rest description / 80px numerics). */
.re-grid-hdr .re-col-code {
    flex: 0 0 150px;
    width: 150px;
}

.re-grid-hdr .re-col-desc {
    flex: 1 1 auto;
    min-width: 0;
}

.re-grid-hdr .re-col-num {
    flex: 0 0 80px;
    width: 80px;
}

/* magnifier.png / favorites.png search links sitting in a header cell */
.re-grid-hdr .re-col img {
    margin-left: 6px;
    vertical-align: middle;
    cursor: pointer;
}

.re-grid-scroll {
    overflow-x: hidden;
    overflow-y: auto;
    background: #ffffff;
}

/* Equal height so the two grids in a row line up.

   163px = six rows. A row measures 27px (11px text, 2px cell padding top and
   bottom, the 16px delete button, and a 1px collapsed border), so six come to
   162px plus the table's closing border. Was 104px, which cut off mid-way
   through the fourth row.

   This is shared by all four grids -- Test Codes and Specimens on one row, DX
   Codes and Medications on the next -- and has to stay shared, because each pair
   sits in a flex row and would sit unevenly if only one side grew. So all four
   are now six rows deep, not just Test Codes. */
.re-order-col .re-grid-scroll {
    height: 163px;
}

/* Manage Users reuses the grid markup above for its client list, but that grid
   is not inside a .re-order-col so it gets no height from the rule above and
   would collapse to its content.

   136px = five rows, using the same 27px row pitch as the Requisition Entry
   grids (135px of rows plus the table's closing border). The sixth row onward
   scrolls. Was 200px, which showed roughly seven rows but left a block of dead
   whitespace, because the grid opens with only a handful of rows. It does not
   need to match the 163px the Requisition Entry pair share -- that value exists
   so two side-by-side grids line up, and nothing sits beside this one.
   8/18/2026 */
.mu-client-grid .re-grid-scroll {
    height: 136px;
}

.re-grid-scroll .DataTable {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* 3-column grids (Test Codes, DX Codes): match ItemSelectDataGrid columns */
.re-grid-scroll .DataTable td:nth-child(1) {
    width: 28px;
}
.re-grid-scroll .DataTable td:nth-child(2) {
    width: 150px;
}

/* 5-column medication grid: delete(28px) | code(35%) | desc(remaining) | dose(12%) | lastTaken(12%) */
/* Medication grid: match header pixel widths */
.re-grid-med .re-grid-scroll .DataTable td:nth-child(2) {
    width: 150px !important;
}
.re-grid-med .re-grid-scroll .DataTable td:nth-child(4) {
    width: 80px !important;
}
.re-grid-med .re-grid-scroll .DataTable td:nth-child(5) {
    width: 80px !important;
}

.re-grid-scroll .DataTable td {
    padding: 2px 6px !important;
    font-size: 12px !important;
    color: #1a202c !important;
    border: 1px solid #dee7f0 !important;
    vertical-align: middle !important;
    background: #ffffff;
}

.re-grid-scroll .DataTable tr:nth-child(even) td {
    background: #fafcfe;
}

.re-grid-scroll .DataTable tr:hover td {
    background: #e8f1fa !important;
}

/* Delete button in grid rows - must match .re-add-btn width */
.re-grid-scroll td.RowButton {
    width: 28px !important;
    text-align: center !important;
    padding: 2px 4px !important;
    overflow: hidden;
    background: #f6f9fc !important;
}

.re-grid-scroll td.RowButton input[type="image"] {
    border: none !important;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.2s;
    width: 16px !important;
    height: 16px !important;
}

.re-grid-scroll td.RowButton input[type="image"]:hover {
    opacity: 1;
}

/* Text inputs inside grid rows - visible border, stretch to fill */
.re-grid-scroll .DataTable input[type="text"] {
    border: 1px solid #cedbe7 !important;
    background: #ffffff !important;
    font-size: 12px !important;
    font-family: var(--ipd-font-family) !important;
    padding: 2px 4px !important;
    width: 100% !important;
    height: 22px !important;
    box-sizing: border-box !important;
}

.re-grid-scroll .DataTable input[type="text"]:focus {
    border-color: #3379bd !important;
    box-shadow: 0 0 0 2px rgba(43, 108, 176, 0.15) !important;
    outline: none !important;
}

.re-grid-scroll .DataTable select {
    border: 1px solid #cedbe7 !important;
    background: #ffffff !important;
    font-size: 12px !important;
    font-family: var(--ipd-font-family) !important;
    padding: 2px 4px !important;
    width: 100% !important;
    height: 22px !important;
    box-sizing: border-box !important;
}

.re-grid-scroll .DataTable select:focus {
    border-color: #3379bd !important;
    box-shadow: 0 0 0 2px rgba(43, 108, 176, 0.15) !important;
    outline: none !important;
}

/* Section labels next to grids */
.re-section-label {
    font-size: 12px;
    font-weight: 600;
    color: #215387;
    vertical-align: top;
    padding-top: 6px;
}

/* Specimens + Comments row */
.re-specimens-row {
    display: flex;
    gap: 10px;
}

.re-specimens-row > .re-grid-wrap,
.re-specimens-row > div > .re-grid-wrap {
    width: 100% !important;
}

.re-specimens-row > div:first-child {
    flex: 0.6;
    min-width: 0;
}

.re-comments-wrap {
    flex: 1;
    min-width: 0;
}

/* Specimen grid: 60% specimen, 30% qty */
.re-grid-specimen .DataTable td:nth-child(2) {
    width: 150px !important;
}

/* Order Items grouped section */
.re-order-section {
    background: #f6f9fc;
    border: 1px solid #cedbe7;
    padding: 10px 14px 6px 14px;
    margin: 10px 0;
    width: 95%;
}

.re-order-section-hdr {
    font-size: 13px;
    font-weight: 700;
    color: #1b4776;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #cedbe7;
}

.re-order-section-hdr .bi {
    font-size: 15px;
    margin-right: 4px;
    color: #2b6cb0;
}

.re-order-row {
    display: flex;
    gap: 10px;
    margin-bottom: 6px;
}

.re-order-col {
    flex: 1;
    min-width: 0;
}

.re-order-col {
    flex: 1 1 50%;
}

.re-order-col .re-grid-wrap {
    width: 100% !important;
}

/* Misc fields row (side by side) */
.re-misc-row {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.re-misc-field {
    flex: 1;
    min-width: 0;
}

.re-misc-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #215387;
    margin-bottom: 3px;
}

/* ========================================
   Patient signature capture popup
   ======================================== */
.sig-pad {
    width: 424px;
    background: #ffffff;
}

.sig-pad-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: linear-gradient(to bottom, #4a5568, #2d3748);
    border-bottom: 2px solid var(--ipd-primary);
}

.sig-pad-title {
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.sig-pad-close {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.sig-pad-close:hover {
    color: #ffffff !important;
}

.sig-pad-stage {
    padding: 12px 12px 0 12px;
    text-align: center;
}

/* content-box is deliberate: InitSignaturePad() sets the canvas drawing buffer
   to exactly 400x245, and signature_pad maps pointer coordinates onto that
   buffer 1:1. Under the global border-box the 1px border would shrink the
   element to 398x243 and every stroke would land slightly off the pen. */
.sig-pad-stage canvas,
.sig-pad-stage img {
    box-sizing: content-box !important;
    display: block;
    /* showsig() sets the saved image to display:inline; keep it off the text
       baseline so it does not pick up a few px of descender gap underneath. */
    vertical-align: top;
    width: 400px;
    height: 245px;
    border: 1px solid var(--ipd-border);
    background-repeat: no-repeat;
    cursor: crosshair;
    touch-action: none;
}

.sig-pad-name {
    color: var(--ipd-text-muted) !important;
    font-size: 13px;
    padding-top: 6px;
    min-height: 20px;
}

.sig-pad-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 10px 12px 14px 12px;
}

.sig-pad-actions .hidden {
    display: none;
}

/* PhysicianSignatures.aspx: the pad sits beside its buttons rather than above
   them. No fixed height anywhere -- the row grows to whichever child is tallest,
   which is what stops the pad from running over the Signed Date row above it.
   Note the buttons here are NOT hidden by their CssClass="hidden" (nothing in
   the app defines a global .hidden rule); ShowNewSignaturePad() and friends
   drive them, so this must not add one. */
.sig-row {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-top: 10px;
}

/* stretch, not flex-start: the three buttons carry different labels ("ACCEPT AND
   SAVE IT" vs "RESIGN" vs "CLEAR") and so different intrinsic widths, which left
   a ragged right edge when they stacked. Stretching sizes them all to the widest
   one, and the column itself is still shrink-to-fit. */
.sig-actions-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding-top: 12px;
}

.sig-actions-col input[type="submit"],
.sig-actions-col input[type="button"] {
    width: 100%;
    text-align: center;
}

/* Override old DataTableHeader and DataTable styles */
.DataTableHeader {
    border: 1px solid #b9d3ec !important;
    border-collapse: collapse !important;
}

td.RowButton, td.RowButton input {
    background-color: #f6f9fc !important;
}

/* RequisitionEntry / Patients / ManageUsers hard-code #B0C4DE (light steel blue)
   on these header cells inline, so the sheet has to outrank the style attribute.
   Neutral band + brand rule, matching .grdHeader's treatment. */
.DataTableHeader td[style*="B0C4DE"],
.DataTableHeader td[style*="b0c4de"] {
    background-color: #e9eff6 !important;
    color: var(--ipd-text) !important;
    font-weight: 600;
    border-bottom: 2px solid var(--ipd-primary) !important;
}

.DataTable td {
    border: 1px solid #dee7f0 !important;
}

/* ========================================
   Patient Images Upload Section
   ======================================== */
.re-img-cards {
    display: flex;
    gap: 16px;
    margin: 12px 0 10px 0;
}

.re-img-card {
    flex: 1;
    min-width: 0;
    background: #ffffff;
    border: 1px solid #d4e0ea;
    padding: 10px 10px;
    text-align: center;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.re-img-card:hover {
    border-color: #3379bd;
    box-shadow: 0 2px 8px rgba(43, 108, 176, 0.1);
}

.re-img-card-preview {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 6px;
    background: #fafcfe;
    border: 1px dashed #d4e0ea;
    padding: 8px;
    position: relative;
}

/* Image thumbnail preview */
.re-img-card-preview input[type="image"] {
    width: 150px !important;
    height: 110px !important;
    max-width: 150px !important;
    max-height: 110px !important;
    border: 1px solid #d4e0ea !important;
    border-radius: 0 !important;
    cursor: pointer;
    object-fit: contain;
    background: #ffffff;
}

/* Delete button inside preview */
.re-img-card-preview input[type="submit"] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px !important;
    height: 20px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 16px !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer;
    font-size: 0 !important;
    padding: 0 !important;
    opacity: 0.7;
}

.re-img-card-preview input[type="submit"]:hover {
    opacity: 1;
}

.re-img-card-icon {
    font-size: 24px;
    color: #3379bd;
    margin-bottom: 4px;
    line-height: 1;
}

.re-img-card-label {
    font-size: 13px;
    font-weight: 700;
    color: #1b4776;
    margin-bottom: 8px;
}

.re-img-card-status {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #c0392b !important;
    min-height: 16px;
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.re-img-card-actions {
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
}

.re-img-btn {
    padding: 5px 14px !important;
    font-size: 12px !important;
    font-weight: 600;
    color: #ffffff !important;
    background: linear-gradient(to bottom, #3379bd, #2b6cb0) !important;
    border: 1px solid #215387 !important;
    border-radius: 0 !important;
    cursor: pointer;
    transition: background 0.2s ease;
}

.re-img-btn:hover {
    background: linear-gradient(to bottom, #2b6cb0, #1b4776) !important;
}

.re-img-btn-cam {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 30px;
    font-size: 17px !important;
    color: #3379bd !important;
    background: #ffffff !important;
    border: 1px solid #d4e0ea !important;
    border-radius: 0 !important;
    cursor: pointer;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.re-img-btn-cam:hover {
    background: #eef5fc !important;
    border-color: #3379bd !important;
    color: #2b6cb0 !important;
}

/* Hide old ImageButton images inside webcam link buttons */
.re-img-btn-cam img {
    display: none !important;
}

.re-img-msg {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #c0392b !important;
    margin-top: 6px;
}

/* Webcam capture modal button */
.re-img-btn-capture {
    display: inline-block;
    color: #3379bd !important;
    text-decoration: none !important;
    cursor: pointer;
    padding: 8px;
    transition: color 0.2s ease;
}

.re-img-btn-capture:hover {
    color: #2b6cb0 !important;
}

.re-img-btn-submit {
    padding: 8px 28px !important;
    font-size: 14px !important;
    font-weight: 600;
    color: #ffffff !important;
    background: linear-gradient(to bottom, #27ae60, #1e8449) !important;
    border: 1px solid #1e8449 !important;
    border-radius: 0 !important;
    cursor: pointer;
}

/* ============================================
   Grid coverage — classes the theme did not reach
   ============================================ */

/* --- Compact DataGrid variants (ResultsReview: dgTests, dgElementsCum) ---
   These use the *Small class family, which only existed in the legacy
   style.css (bg-menu-main.png header, #ddd alt rows, orange/green/red link
   states). Mirror the .grdHeader/.grdItem look while keeping the tighter
   2px cell padding these dense report grids rely on. */
.grdHeaderSmall {
    font-size: 12px;
    font-weight: 600;
    height: 30px;
    background: linear-gradient(to bottom, #4a5568, #2d3748) !important;
    background-image: linear-gradient(to bottom, #4a5568, #2d3748) !important;
    background-repeat: no-repeat !important;
    border-bottom: 2px solid #2b6cb0;
    color: #ffffff;
}

.grdHeaderSmall td {
    padding: 3px 6px;
    text-align: left;
    vertical-align: middle;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff !important;
}

.grdHeaderSmall a {
    color: #ffffff !important;
    text-decoration: none;
}

.grdHeaderSmall a:hover {
    text-decoration: underline;
}

.grdItemSmall {
    background-color: #ffffff;
    color: var(--ipd-text);
}

.grdItemAltSmall {
    background-color: #fafcfe;
    color: var(--ipd-text);
}

.grdItemSmall td,
.grdItemAltSmall td {
    text-align: left;
    padding: 3px 6px;
    border: 1px solid #dee7f0;
    vertical-align: middle;
    color: var(--ipd-text);
}

.grdItemSmall:hover td,
.grdItemAltSmall:hover td {
    background-color: #e8f1fa;
}

/* Replace the legacy multi-coloured link states with the theme palette */
.grdItemSmall a:link,
.grdItemSmall a:visited,
.grdItemSmall a:active,
.grdItemAltSmall a:link,
.grdItemAltSmall a:visited,
.grdItemAltSmall a:active {
    color: var(--ipd-primary) !important;
    text-decoration: none !important;
}

.grdItemSmall a:hover,
.grdItemAltSmall a:hover {
    color: var(--ipd-primary-light) !important;
    text-decoration: underline !important;
}

/* --- Favourites panels (RequisitionEntry: test / diag / medication) ---
   .mGridFav had no definition in the theme OR in the legacy stylesheets, so
   these three grids rendered as unstyled default tables. They are headerless
   (ShowHeader="false"), GridLines="None", carry an inline RowStyle-Font-Size
   of 8px, and sit in a fixed 930px scroll box — so this is deliberately a
   light touch: no added padding or heavy borders, and font-size is left
   alone so the columns cannot overflow their container. */
.mGridFav {
    width: 100%;
    background-color: #ffffff;
    border-collapse: collapse;
    font-family: var(--ipd-font-family) !important;
}

.mGridFav td {
    padding: 2px 4px;
    border: none;
    color: var(--ipd-text);
    background-image: none !important;
    vertical-align: middle;
}

.mGridFav .alt,
.mGridFav .alt td {
    background: var(--ipd-bg-light) !important;
    background-image: none !important;
}

.mGridFav tr:hover td {
    background-color: #e8f1fa;
}

.mGridFav a:link,
.mGridFav a:visited,
.mGridFav a:active {
    color: var(--ipd-primary) !important;
    text-decoration: none !important;
}

.mGridFav a:hover {
    color: var(--ipd-primary-light) !important;
    text-decoration: underline !important;
}

/* ============================================
   Master page layout
   (moved out of main.master inline styles)
   ============================================ */

.container.ipd-aligned {
    margin-bottom: 5px;
}

/* ============================================
   Header module
   (moved out of usercontrols/headermodule.ascx inline styles)
   ============================================ */

.ipd-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.ipd-header-brand {
    display: flex;
    align-items: center;
}

.ipd-header-brand img {
    max-width: 200px;
    height: auto;
}

.ipd-header-info {
    text-align: center;
    flex: 1;
}

.ipd-header-user {
    text-align: right;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ipd-user-name {
    font-size: 13px;
    color: #6c757d;
}

.ipd-signout {
    font-size: 13px;
    text-decoration: none;
}

/* ============================================
   Footer module
   (moved out of usercontrols/footermodule.ascx inline styles)
   ============================================ */

.ipd-footer-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.ipd-footer-bar .bi {
    margin-right: 3px;
}

/* ============================================
   Login page
   (moved out of the login.aspx inline <style> block)

   Every rule below is scoped to body.login-bg so nothing leaks onto the
   master-page layout. The !important colour overrides are required because
   the global "td, label, span, div, p, a" rule near the top of this file
   would otherwise repaint the dark-background text on this page.
   ============================================ */

/* Border-box only. Do NOT reset margin/padding here: "body.login-bg *" has a
   higher specificity (0,1,1) than the single-class rules below (0,1,0), so a
   blanket margin/padding reset silently strips the card padding, the form-group
   spacing and the topbar/footer padding. */
body.login-bg * {
    box-sizing: border-box;
}

/* Kill only the browser default margins that would otherwise reappear now that
   the blanket reset is gone. Everything after this point re-adds its own. */
body.login-bg h1,
body.login-bg h2,
body.login-bg p,
body.login-bg form {
    margin: 0;
    padding: 0;
}

body.login-bg {
    font-family: var(--ipd-font-family) !important;
    padding: 0 !important;
    min-height: 100vh !important;
    height: auto !important;
    /* The Platinum Diagnostic Lab hero photograph, treated exactly as
       platinumdiagnosticlab.com treats it: that site's hero row lays the same
       file under a flat rgba(255,255,255,0.5) overlay. Matching it means the
       photo keeps its own colour here -- a tinted scrim would read as a
       different image to the one on the public site.

       Because the wash is white rather than dark, everything sitting on the
       photo is dark rather than white. #1a202c measures 4.9:1 against the
       darkest pixel of the washed image, which is the blue glove directly
       behind the wordmark; the mid-blues of the palette only reach 2.4-2.9:1
       there, which is why the brand text on this page is slate and not blue.

       No background-attachment:fixed here: the page is a single viewport tall
       so it buys nothing, and fixed + cover misrenders on iOS Safari. The flat
       colour underneath is the washed photo's own average, so the moment before
       it decodes does not flash a different hue. */
    background:
        linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
        url("../images/login-bg.jpg") center center / cover no-repeat #dbe7f2 !important;
    display: flex !important;
    flex-direction: column !important;
    color: #1a202c !important;
    text-align: center !important;
    overflow-y: auto !important;
    margin: 0 !important;
}

/* The ASP.NET <form> is the only child of <body>, so it has to carry the flex
   column too -- otherwise .login-wrapper's flex:1 has nothing to grow inside
   and the footer rides up under the card instead of sitting at the bottom. */
body.login-bg > form {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.login-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Vertically centred with auto margins rather than justify-content:center --
       when the card is taller than the viewport, centring would push the brand
       off the top edge where it cannot be scrolled back into view. */
    justify-content: flex-start;
    padding: 30px 15px;
}

.login-wrapper .login-brand {
    margin-top: auto;
}

.login-wrapper .login-card {
    margin-bottom: auto;
}

/* --- Top bar ---
   A frosted white band rather than the dark one this had over the old scrim: on
   a light photo a black band reads as a foreign element, and the extra white
   lifts the strip to 11:1 for its text regardless of what is behind it. */
.login-topbar {
    background-color: rgba(255, 255, 255, 0.65);
    border-bottom: 1px solid rgba(26, 32, 44, 0.08);
    padding: 10px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-size: 14px;
}

.login-topbar,
.login-topbar div,
.login-topbar span {
    color: #1a202c !important;
}

.login-topbar .lab-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.login-topbar .bi-telephone {
    margin-right: 4px;
}

/* --- Logo & brand --- */
.login-brand {
    text-align: center;
    margin-bottom: 30px;
}

/* The logo sits straight on the photo -- no disc behind it. That needs the
   transparent PNG lockup (images/platinum-logo.png, the same asset the public
   site uses in its header), not images/logo.jpg: the JPEG has no alpha channel,
   so without the disc to hide it, it would show as a white rectangle.

   227x94 is the asset's native size and the largest the site publishes, so it
   is capped at 220px rather than scaled up.

   The glow is doing real work, not decoration. The lockup lands on the gloved
   hand, the busiest and darkest part of the washed photo, and the grey wordmark
   measures about 2.3:1 there. Logotypes are exempt from the WCAG contrast
   minimum, but 2.3:1 is genuinely hard to read, and a soft white bloom lifts it
   off the background without putting a visible plate or box back in. */
.login-brand .login-logo {
    display: block;
    width: 100%;
    max-width: 220px;
    height: auto;
    margin: 0 auto 18px;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.95))
            drop-shadow(0 0 22px rgba(255, 255, 255, 0.75));
}

/* Both lines take the same slate. Anything lighter -- including the palette's
   own mid-blues -- drops under AA against the glove behind them, and the photo
   is too busy for a text-shadow to rescue.

   The sizes are deliberately inverted: "Client Portal" is the big line and
   "iPowerDoc" the small one above it, so the h1 here is smaller than the p that
   follows it. That is intentional, not a mix-up -- the Platinum lockup directly
   above already carries the branding, leaving "Client Portal" as the thing
   worth announcing. Both still clear AA: iPowerDoc at 14px bold does not count
   as large text so it needs 4.5:1, and the slate measures 4.9:1 against the
   darkest part of the photo; Client Portal at 28px is large text (3:1). */
.login-brand h1 {
    color: #1a202c !important;
    /* 14px and the 28px below are held out of the site-wide font uplift on
       purpose -- they were asked for as exact values. 8/25/2026 */
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 4px 0;
    letter-spacing: -0.5px;
    float: none;
    height: auto;
}

.login-brand p {
    color: #1a202c !important;
    font-size: 28px;
    margin: 0;
}

/* --- Card --- */
.login-card {
    background: #ffffff;
    border-radius: 12px;
    /* A white card on a white-washed photo needs an edge, not just a drop
       shadow, or it dissolves into the lighter parts of the image. */
    box-shadow: 0 12px 40px rgba(26, 32, 44, 0.20);
    border: 1px solid rgba(26, 32, 44, 0.07);
    padding: 40px 35px 30px;
    width: 100%;
    max-width: 420px;
    text-align: center;
}

.login-card h2 {
    color: var(--ipd-primary) !important;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 25px;
    float: none;
    height: auto;
}

.login-card h2 i {
    margin-right: 6px;
}

/* --- Form fields --- */
.login-card .form-group {
    margin-bottom: 18px;
    text-align: left;
}

.login-card .form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #6c757d !important;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.input-group-icon {
    position: relative;
}

.input-group-icon i.field-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #adb5bd;
    font-size: 17px;
    z-index: 2;
}

.input-group-icon input[type="text"],
.input-group-icon input[type="password"] {
    width: 100%;
    padding: 12px 14px 12px 42px !important;
    border: 2px solid #e9ecef !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-family: var(--ipd-font-family) !important;
    transition: border-color 0.2s, box-shadow 0.2s;
    text-align: left !important;
    background-color: #f8f9fa;
    height: auto !important;
}

.input-group-icon input:focus {
    border-color: var(--ipd-primary-light) !important;
    box-shadow: 0 0 0 4px rgba(43, 108, 176, 0.12) !important;
    outline: none;
    background-color: #ffffff;
}

.input-group-icon input::placeholder {
    color: #adb5bd;
    text-align: left;
}

/* --- Button --- */
.btn-login {
    display: block;
    width: 70%;
    max-width: 260px;
    margin: 14px auto 0;
    padding: 12px 20px !important;
    background: linear-gradient(135deg, var(--ipd-primary) 0%, var(--ipd-primary-light) 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 600;
    font-family: var(--ipd-font-family) !important;
    cursor: pointer;
    transition: all 0.25s ease;
    letter-spacing: 0.3px;
    opacity: 1 !important;
    height: auto !important;
}

.btn-login:hover {
    background: linear-gradient(135deg, var(--ipd-primary-light) 0%, var(--ipd-primary) 100%) !important;
    box-shadow: 0 4px 12px rgba(43, 108, 176, 0.35);
    transform: translateY(-1px);
}

/* --- Error message --- */
.login-error {
    color: #c0392b !important;
    font-size: 14px !important;
    font-weight: 500;
    margin-top: 12px;
    padding: 10px;
    background-color: #fdf0ef;
    border-radius: 6px;
    border: 1px solid #f5c6cb;
    display: block;
}

/* --- Help links --- */
.login-help {
    margin-top: 20px;
    font-size: 13px;
    line-height: 1.8;
}

.login-help,
.login-help p {
    color: #6c757d !important;
}

.login-help a {
    color: var(--ipd-primary-light) !important;
    text-decoration: none !important;
}

.login-help a:hover {
    text-decoration: underline !important;
    color: var(--ipd-primary) !important;
}

/* --- Footer --- */
.login-footer {
    background-color: rgba(255, 255, 255, 0.65);
    border-top: 1px solid rgba(26, 32, 44, 0.08);
    padding: 15px 25px;
    text-align: center;
    font-size: 13px;
    width: 100%;
}

.login-footer,
.login-footer div {
    color: #2d3748 !important;
}

/* primary-dark, not primary: at 12px on the frosted band the mid-blue only
   reaches 3.9:1, the darker one 6.9:1. */
.login-footer a {
    color: var(--ipd-primary-dark) !important;
}

/* --- Responsive --- */
@media (max-width: 480px) {
    .login-card { padding: 30px 20px 25px; }
    /* Steps down the p, not the h1. This used to shrink the h1, which is now the
       small line at 14px -- the override would have made it bigger on a phone
       than on a desktop. "Client Portal" is the large line, so it is the one that
       needs reining in on a narrow screen. */
    .login-brand p { font-size: 22px; }
    .login-topbar { flex-direction: column; gap: 5px; text-align: center; }
    .btn-login { width: 100%; max-width: none; }
}