@import url('open.iconic/font/css/open-iconic-bootstrap.min.css');
@import url('/css/Footer.css');
/* =============================================
BASE STYLES - Consolidated html/body rules
============================================= */
html, body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
height: 100%;
max-width: 100%;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* Shared horizontal gutter so the header title lines up with page content. */
:root {
--app-gutter: 1.5rem;
}
/* The cream canvas has to start at the body, not at .page: DevExpress portals
dropdowns, modals and toasts to the end of , outside the shell, so a
white body shows through behind them. Scoped to the authorized shell so the
signed-out login page keeps its own background. */
body:has(.app-shell) {
background-color: var(--rt-main-bg);
}
.page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* The authorized shell is a fixed-viewport app frame: bounding .page here is
what lets .content own the scrolling, so the sidebar rail stays exactly one
viewport tall instead of stretching with the page. Signed-out pages have no
.app-shell and keep the min-height behaviour above. */
.page:has(.app-shell) {
height: 100dvh;
overflow: hidden;
/* Backstop so the white body never shows through the shell. Scoped to the
authorized shell so the signed-out login page is unaffected. */
background: var(--rt-main-bg);
}
/* ─────────────────────────────────────────
APP SHELL
Horizontal split: full-height sidebar rail
on the left, everything else in the column
to its right. min-height:0 on both lets the
inner content area own the scrolling instead
of growing the page.
───────────────────────────────────────── */
.app-shell {
flex: 1;
display: flex;
min-height: 0;
/* A few pixels of separation between the rail and the content column. The
shell background is what shows through the gap. */
column-gap: 5px;
background: var(--rt-divider-color);
}
.app-main {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
/* Contains wide content (the DevExpress grids in particular) so it scrolls
inside its own box instead of painting over the rail. */
overflow: hidden;
background: var(--rt-main-bg);
}
.app-header {
flex-shrink: 0;
background: var(--rt-page-header-bg);
border-bottom: 1px solid var(--rt-divider-color);
}
/* Page title projected out of each page's . The inline padding
matches the Bootstrap gutter the content area below uses, so the title lines
up with the page content rather than the header's outer edge. */
.page-header-title {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0;
padding-inline: var(--app-gutter);
font-size: 1.75rem;
font-weight: 400;
line-height: 1.2;
color: var(--rt-text-primary);
}
.page-header-title i {
font-size: 1.5rem;
line-height: 1;
}
/* Supporting detail under the title. Indented to the icon's left edge so the
title and its meta line share one axis. */
.page-header-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
padding-inline: var(--app-gutter);
margin-top: 0.25rem;
font-size: 0.875rem;
color: var(--rt-text-tertiary);
}
/* ─────────────────────────────────────────
AUTHORIZED FOOTER
Last flex child of .app-main so it is always
pinned below the content area regardless of
how tall the sidebar or content grows.
───────────────────────────────────────── */
.authorized-footer {
width: 100%;
flex-shrink: 0;
background-color: var(--rt-main-bg);
padding: 0.5rem 1rem;
}
/* ─────────────────────────────────────────
CONTENT LAYOUT ITEM
min-height: 0 overrides the CSS Grid
default of min-height: auto.
Without this, the content row expands
beyond its 1fr allocation when the sidebar
is tall, pushing the footer row off-screen.
padding-bottom ensures content at the
bottom of the scroll area is not hidden
behind the authorized-footer.
───────────────────────────────────────── */
.content.layout-item {
flex: 1;
overflow-y: auto;
min-height: 0;
padding-bottom: 5rem;
/* Same gutter as .page-header-title. Pages built on a Bootstrap .row/.col
net back to this edge (row -12px, col +12px), so titles line up with the
content beneath them. */
padding-inline: var(--app-gutter);
}
/* =============================================
PAGE ALIGNMENT
Every page has to start at the same left edge
as the header title. Pages disagreed only
because some wrapped themselves in a Bootstrap
.container, which caps width and centres with
auto margins, and others used a bare .row.
Zeroing the inline padding is what makes the
two forms line up exactly: .container pads
+12px, .row pulls -12px and .col pushes +12px,
so a padding-free container nets to the same
edge as a bare .row. The shell's own
--app-gutter supplies the real gutter.
============================================= */
.content.layout-item .container,
.content.layout-item .container-fluid,
.content.layout-item .container-sm,
.content.layout-item .container-md,
.content.layout-item .container-lg,
.content.layout-item .container-xl,
.content.layout-item .container-xxl {
width: 100%;
max-width: 100%;
margin-inline: 0;
padding-inline: 0;
}
/* =============================================
RECORD CARDS
Bootstrap .card inside the shell, restyled to
the design system: the cream canvas shows
through, with a hairline border and a quiet
header, instead of Bootstrap's white panel and
heavy grey bar.
============================================= */
.content.layout-item .card {
background-color: transparent;
border: 1px solid var(--rt-divider-color);
border-radius: 12px;
}
/* The library paints the accordion body --rt-content-bg (white). Inside the
shell the canvas should read through it, exactly as it does for .card. */
.content.layout-item .rt-accordion-body {
background: transparent;
}
.content.layout-item .card-header {
background-color: transparent;
border-bottom: 1px solid var(--rt-divider-color);
padding: 0.75rem 1rem;
/* the panel is the object; its header is a label, not a title */
font-weight: 500;
}
.content.layout-item .card-header h6 {
font-size: 0.9375rem;
font-weight: 500;
}
/* Field labels step back from their values. --rt-text-tertiary, not
--rt-text-secondary: "secondary" resolves darker than "primary" in the current
token set (18.6:1 vs 16.8:1 on white), so it produces no tonal step at all.
Tertiary is a genuine step down and still well clear of AA at 9.5:1. */
.content.layout-item .card-body .form-label,
.content.layout-item .card-body .text-muted {
font-size: 0.8125rem;
color: var(--rt-text-tertiary);
margin-bottom: 0.125rem;
}
/* =============================================
STATUS CHIPS
Compact at-a-glance record status, sitting
beside a page's primary action. Colour carries
meaning, so each chip also names its state in
words and pairs an icon with it — never colour
alone.
============================================= */
.status-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
border-radius: 999px;
font-size: 0.8125rem;
line-height: 1.5;
white-space: nowrap;
border: 1px solid transparent;
}
.status-chip-neutral {
background-color: var(--rt-page-header-bg);
border-color: var(--rt-divider-color);
color: var(--rt-text-secondary);
}
.status-chip-ok {
background-color: var(--rt-success-bg);
border-color: var(--rt-success);
color: var(--rt-success);
}
.status-chip-warn {
background-color: var(--rt-warning-bg);
border-color: var(--rt-warning);
color: var(--rt-warning);
}
.status-chip-alert {
background-color: var(--rt-error-bg);
border-color: var(--rt-danger);
color: var(--rt-danger);
}
/* =============================================
DETAIL LISTS
Label / value / action rows inside a record
card. Labels share a column so values line up
down the card and across the pair of them.
============================================= */
.detail-list {
display: grid;
gap: 0.5rem;
}
.detail-row {
display: grid;
grid-template-columns: 9rem minmax(0, 1fr) auto;
gap: 0.25rem 0.75rem;
align-items: start;
/* reserves the action column's height so rows without one still align */
min-height: 1.75rem;
}
.detail-label {
font-size: 0.8125rem;
color: var(--rt-text-tertiary);
line-height: 1.75rem;
}
.detail-value {
min-width: 0;
line-height: 1.75rem;
overflow-wrap: anywhere;
}
.detail-value-block {
line-height: 1.5;
padding-block: 0.1875rem;
}
.detail-empty {
color: var(--rt-text-tertiary);
}
.detail-action {
display: flex;
align-items: center;
gap: 0.5rem;
min-height: 1.75rem;
}
/* Four outline pills down a card is more chrome than the values themselves;
the pencil reads as an affordance without the border. */
.detail-action .rt-btn-link,
.address-section-head .rt-btn-link,
.rt-accordion-header-actions .rt-btn-link {
padding: 0 0.25rem;
/* the link variant underlines its content, which on a bare glyph reads as
a stray rule rather than a link */
text-decoration: none;
}
/* =============================================
PATIENT VIEW INK
Link blue pulls harder than the content it
annotates on this page, so links, pencils and
the selected tab all take the eggplant tint.
Hover darkens to --rt-primary-800: note that
--rt-brand-purple resolves to the SAME hex as
--rt-text-tertiary, so it is not a hover step.
============================================= */
.patient-view a:not(.rt-btn),
.patient-view .rt-btn-link,
.rt-accordion-header-actions .rt-btn-link {
color: var(--rt-text-tertiary);
}
.patient-view a:not(.rt-btn):hover,
.patient-view .rt-btn-link:hover:not(:disabled),
.rt-accordion-header-actions .rt-btn-link:hover:not(:disabled) {
color: var(--rt-primary-800);
}
.patient-view .rt-tab.rt-tab-active {
color: var(--rt-text-tertiary);
border-bottom-color: var(--rt-text-tertiary);
}
.patient-view .rt-tab:hover {
color: var(--rt-primary-800);
}
/* The specimen sub-tabs are still DevExpress; same treatment via its vars. */
.patient-view .dxbl-tabs {
--dxbl-tabs-tab-selected-color: var(--rt-text-tertiary);
--dxbl-tabs-tab-hover-color: var(--rt-primary-800);
}
.detail-group + .detail-group {
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px solid var(--rt-divider-color);
}
@media (max-width: 575.98px) {
.detail-row {
grid-template-columns: minmax(0, 1fr) auto;
}
.detail-label {
grid-column: 1 / -1;
line-height: 1.4;
}
}
/* =============================================
ADDRESS BLOCK
Mailing and billing addresses inside the
contact card, sharing its label treatment.
============================================= */
.address-book,
.address-section + .address-section {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--rt-divider-color);
}
/* The action sits hard right of the label so both address rows line up. */
.address-section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
min-height: 1.75rem;
margin-bottom: 0.125rem;
}
.address-value {
margin-bottom: 0;
font-style: normal;
line-height: 1.5;
}
.address-value-muted {
color: var(--rt-text-tertiary);
}
.address-empty {
color: var(--rt-text-tertiary);
font-style: italic;
}
.address-same-as {
margin-bottom: 0.375rem;
font-size: 0.875rem;
}
.address-section .form-label {
margin-bottom: 0;
}
/* =============================================
CONTENT SURFACES
Grids and tables sit directly on the cream
canvas rather than punching a white panel
through it; only the header band stays tinted.
============================================= */
.content.layout-item .dxbl-grid {
--dxbl-grid-bg: transparent;
--dxbl-grid-header-bg: var(--rt-table-header-bg);
--dxbl-grid-footer-bg: transparent;
}
.content.layout-item .table {
--bs-table-bg: transparent;
}
/* The tab strip resolves its background to Bootstrap's --bs-body-bg, i.e.
white. The selected tab keeps its border, so it still reads as selected
without a filled panel behind it. */
.content.layout-item .dxbl-tabs {
--dxbl-tabs-bg: transparent;
--dxbl-tabs-tab-selected-bg: transparent;
}
/* RtGrid defaults to --rt-content-bg (white) so it reads as a card. In this
portal the grid is the page, so let the cream canvas show through instead. */
.content.layout-item .rt-grid {
background: transparent;
}
/* =============================================
RT SIDEBAR
Overrides for Reprotech.UI.Blazor's RtSidebar /
RtTreeView. These live here rather than in
NavMenu.razor.css because CSS isolation does
not tag another component's internal markup.
============================================= */
.app-shell > .rt-sidebar {
height: auto; /* stretch to the flex row instead of a percentage */
align-self: stretch;
flex-shrink: 0;
/* Own stacking context above .app-main so nothing in the content column can
ever paint across the rail. */
position: relative;
z-index: 3;
}
/* Breathing room down the left edge of the rail. */
.rt-sidebar .rt-sidebar-brand,
.rt-sidebar .rt-sidebar-footer {
padding-left: 22px;
}
.rt-sidebar .rt-sidebar-nav {
padding-left: 16px;
}
/* The portal logos are dark-on-transparent artwork and no light variant ships,
so knock them out to a white silhouette for the dark rail. Targeted globally
because GetLogo() emits the ![]()
as markup content, which CSS isolation
does not tag. */
.rt-sidebar-brand img {
max-width: 100%;
height: auto;
filter: brightness(0) invert(1);
}
/* The rail is a fixed 260px column; long menu captions wrap instead of pushing
the nav sideways. Only the nav is constrained — clipping .rt-sidebar itself
would also cut off the footer pickers' drop-down panels. */
.rt-sidebar-nav {
overflow-x: hidden;
}
.rt-sidebar .rt-tree-row {
min-width: 0;
}
.rt-sidebar .rt-tree-text {
min-width: 0;
overflow-wrap: anywhere;
}
.rt-sidebar .rt-tree-icon {
flex-shrink: 0;
}
/* The footer stacks the clinic/product pickers above the signed-in user block,
so it is a column rather than the library's default single centred row. */
.rt-sidebar .rt-sidebar-footer {
display: block;
}
/* Those pickers sit at the bottom of a full-height rail, so their panels must
open upward — the library's default downward panel would fall off-screen. */
.sidebar-controls .rt-combo-menu {
top: auto;
bottom: calc(100% + 4px);
}
/* Top-level entries get breathing room between groups. */
.rt-sidebar .rt-treeview-nav > .root-item + .root-item > .rt-tree-row {
margin-top: 2px;
}
/* MFA "Secure Your Account" prompt keeps its amber call-out on the dark rail. */
.rt-sidebar .security-reminder-node > .rt-tree-row,
.rt-sidebar .security-reminder-node > .rt-tree-row:hover {
background: #fff3cd;
color: #664d03;
font-weight: 600;
}
.rt-sidebar .security-reminder-node > .rt-tree-row .rt-tree-icon {
color: #997404;
}
/* "What's New" unread dot. */
.rt-sidebar .whats-new-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background-color: #dc3545;
display: inline-block;
flex-shrink: 0;
}
/* Unread message count badge. */
.rt-sidebar .message-badge {
display: inline-block;
min-width: 18px;
padding: 0 5px;
border-radius: 9px;
background-color: #dc3545;
color: #fff;
font-size: 0.7rem;
line-height: 18px;
text-align: center;
}
@media print {
.rt-sidebar {
display: none !important;
}
}
/* =============================================
HYPERLINK STYLES
============================================= */
.hyperlink {
text-decoration: none;
cursor: pointer;
}
.hyperlink:hover {
text-decoration: underline;
}
/* Portal-specific hyperlink colors */
.hyperlinkCL {
color: #007EA2;
}
.hyperlinkRP {
color: #027EA2;
}
.hyperlinkCT {
color: #2087c3;
}
/* =============================================
TENANT ACCENT SURFACES
The per-tenant button palette was retired when
the portal moved to RtButton, which carries the
design-system colours. What remains are the two
non-button surfaces that still want a filled
brand bar: the DxMenuItem actions menu (via
BaseComponent.MenuCssClass) and form-group
header bars.
============================================= */
.siteButtonCL,
.siteButtonRP,
.siteButtonCT,
.section-header-bar {
background-color: var(--rt-plum);
color: #ffffff;
border-radius: 6px;
font-weight: 500;
}
.siteButtonCL:hover,
.siteButtonRP:hover,
.siteButtonCT:hover {
background-color: var(--rt-brand-purple);
color: #ffffff;
}
/* =============================================
MARKDOWN CONTENT
============================================= */
.markdown-content {
font-family: Arial, sans-serif;
line-height: 1.6;
}
.markdown-content h1,
.markdown-content h2,
.markdown-content h3 {
border-bottom: 1px solid #eaecef;
padding-bottom: 0.3em;
}
.markdown-content ul {
list-style-type: disc;
padding-left: 20px;
}
.markdown-content .nested-list {
margin-left: 20px;
}
/* ─────────────────────────────────────────
DEVEXPRESS MENU — USER BUTTON OVERRIDE
Scoped CSS in Header.razor.css cannot
target DevExpress component internals
(elements lack the Blazor scope attribute).
These global rules override the default
teal/primary background on the DxMenu
user button in the header navbar.
NOTE: MenuCssClass adds "siteButtonXX" to
the DxMenuItem, so the siteButton rules
above would make the user button solid
teal. The block below re-overrides any
siteButton class that appears inside
.header-navbar, restoring transparent bg.
───────────────────────────────────────── */
.header-navbar {
--dxbl-btn-bg: transparent;
--dxbl-btn-color: #212529;
--dxbl-btn-border-color: #007EA2;
--dxbl-btn-hover-bg: rgba(0, 107, 138, 0.08);
--dxbl-btn-hover-border-color: #006B8A;
--dxbl-btn-active-bg: rgba(0, 107, 138, 0.14);
--dxbl-btn-active-border-color: #006B8A;
}
/* Base DevExpress elements inside the header */
.header-navbar .dxbl-btn,
.header-navbar [class*="dxbl-btn"],
.header-navbar .dxbl-menu-item-btn,
.header-navbar .dxbl-menu .dxbl-nav-link,
.header-navbar .dxbl-dropdown-toggle {
background-color: transparent !important;
border: 1px solid #007EA2 !important;
border-radius: 6px !important;
color: #212529 !important;
box-shadow: none !important;
padding: 0.35rem 0.75rem !important;
}
.header-navbar .dxbl-btn:hover,
.header-navbar [class*="dxbl-btn"]:hover,
.header-navbar .dxbl-menu .dxbl-nav-link:hover {
background-color: rgba(0, 107, 138, 0.08) !important;
border-color: #006B8A !important;
color: #212529 !important;
}
/* ─────────────────────────────────────────
HEADER siteButton COUNTER-OVERRIDE
MenuCssClass places siteButtonXX on the
DxMenuItem element directly. The siteButton
rules above have !important and would win
if not overridden here with equal or higher
specificity LATER in the cascade.
Two-class selectors (.header-navbar .siteButtonXX)
match specificity and appear after the
siteButton block, so these win.
───────────────────────────────────────── */
.header-navbar .siteButtonCL,
.header-navbar .siteButtonRP,
.header-navbar .siteButtonCT,
.header-navbar .siteButtonCL .dxbl-btn,
.header-navbar .siteButtonRP .dxbl-btn,
.header-navbar .siteButtonCT .dxbl-btn,
.header-navbar .siteButtonCL.dxbl-btn,
.header-navbar .siteButtonRP.dxbl-btn,
.header-navbar .siteButtonCT.dxbl-btn {
background-color: transparent !important;
border: 1px solid #007EA2 !important;
color: #212529 !important;
border-radius: 6px !important;
box-shadow: none !important;
}
.header-navbar .siteButtonCL:hover,
.header-navbar .siteButtonRP:hover,
.header-navbar .siteButtonCT:hover,
.header-navbar .siteButtonCL .dxbl-btn:hover,
.header-navbar .siteButtonRP .dxbl-btn:hover,
.header-navbar .siteButtonCT .dxbl-btn:hover {
background-color: rgba(0, 107, 138, 0.08) !important;
border-color: #006B8A !important;
color: #212529 !important;
}
/* =============================================
PRINT STYLES - Global print rules
============================================= */
@media print {
.no-print {
display: none !important;
}
.page {
display: block !important;
min-height: 0 !important;
}
.app-shell,
.app-main {
display: block !important;
flex: none !important;
min-height: 0 !important;
}
.content.layout-item {
overflow: visible !important;
height: auto !important;
min-height: 0 !important;
flex: none !important;
padding-bottom: 0 !important; /* remove screen padding for print */
}
.authorized-footer {
padding: 0 !important; /* compact footer in print */
}
.mobile-nav-drawer,
.mobile-menu-overlay {
display: none !important;
}
}
/* =============================================
GRID STATUS ICONS - Checkmark / X colors
Used by AppService.GetOnFileIconHtml()
============================================= */
.siteIconCheck {
color: #28a745;
font-size: 1.25rem;
font-weight: bold;
}
.siteIconX {
color: #dc3545;
font-size: 1.25rem;
font-weight: bold;
}