@import url('https://fonts.googleapis.com/css?family=Montserrat');
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

:root {
    font-size: var(--rz-root-font-size);
    --rz-white: #ffffff;
    --rz-black: #000000;
    --rz-base-50: #fafafa;
    --rz-base-100: #f5f5f5;
    --rz-base-200: #eeeeee;
    --rz-base-300: #e0e0e0;
    --rz-base-400: #bdbdbd;
    --rz-base-500: #9e9e9e;
    --rz-base-600: #757575;
    --rz-base-700: #616161;
    --rz-base-800: #424242;
    --rz-base-900: #212121;
    --rz-primary: #003399;
    --rz-primary-light: rgba(0, 51, 153, 0.8);
    --rz-primary-lighter: rgba(0, 51, 153, 0.12);
    --rz-primary-dark: #3633a8;
    --rz-primary-darker: #2e2c8f;
    --rz-secondary: #9f0202;
    --rz-secondary-light: rgba(159, 2, 2, 0.5);
    --rz-secondary-lighter: rgba(159, 2, 2, 0.12);
    --rz-secondary-dark: #9f0202;
    --rz-secondary-darker: #9f0202;
    --rz-info: #2196f3;
    --rz-info-light: #4dabf5;
    --rz-info-lighter: rgba(33, 150, 243, 0.2);
    --rz-info-dark: #1a78c2;
    --rz-info-darker: #1666a5;
    --rz-success: #4caf50;
    --rz-success-light: #70bf73;
    --rz-success-lighter: rgba(76, 175, 80, 0.16);
    --rz-success-dark: #3d8c40;
    --rz-success-darker: #347736;
    --rz-warning: #ff9800;
    --rz-warning-light: #ffad33;
    --rz-warning-lighter: rgba(255, 152, 0, 0.2);
    --rz-warning-dark: #cc7a00;
    --rz-warning-darker: #ad6700;
    --rz-danger: #f44336;
    --rz-danger-light: #f6695e;
    --rz-danger-lighter: rgba(244, 67, 54, 0.2);
    --rz-danger-dark: #c3362b;
    --rz-danger-darker: #a62e25;
    --rz-link-color: var(--rz-primary);
    /*--rz-icon-size: 2.5rem;*/

    --rz-layout-body-margin: 0 0.25rem 0.25rem;
    --rz-layout-body-padding: 0.25rem;
    --rz-gap: 0.5rem;
    --rz-row-gap: 0.5rem;
    --rz-text-font-family: Montserrat;
    --rz-root-font-size: 16px;
    --rz-body-font-size: 1rem;
    --rz-grid-header-font-weight: bold;
    --rz-footer-padding: 3px !important;
    --rz-selectbar-selected-background-color: var(--rz-primary-light);
    --rz-header-background-color: var(--rz-primary-lighter);
    --rz-selectbar-selected-color: #fff;
    --rz-on-secondary-lighter: var(--rz-primary);
    --rz-dialog-background-color: var(--rz-base-50);
    --rz-dialog-title-background-color: var(--rz-primary-lighter);
    --rz-grid-header-filter-icon-active-color: var(--rz-success);
    --rz-dialog-content-padding: 0.5rem;
    --rz-tabs-tab-padding: 0.7rem 0.7rem;
    --rz-menu-top-item-background-color: transparent;
    --rz-menu-top-item-icon-color: var(--rz-primary);
    --rz-menu-top-item-icon-hover-color: var(--rz-secondary);
    --rz-menu-top-item-selected-color: var(--rz-secondary);
    --rz-menu-item-icon-color: var(--rz-primary);
    --rz-menu-item-icon-hover-color: var(--rz-secondary);
    --rz-menu-item-selected-color: var(--rz-secondary);
    --bs-primary-rgb: 0, 51, 153;
    --rz-text-h2-margin-block-end: 1px;
    --rz-card-flat-background-color: var(--rz-primary-lighter) !important;
}

body {
    font-family: var(--rz-text-font-family);
    color: var(--rz-text-color);
    font-size: var(--rz-body-font-size);
    line-height: var(--rz-body-line-height);
    background-color: var(--rz-body-background-color);
}

.rz-body {
    --rz-body-padding: 0.5rem;
}

a {
    color: var(--rz-link-color);
}

a:hover,
a:focus {
    color: var(--rz-link-hover-color);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: #1b6ec2;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}
@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 100 700;
    src: url('../fonts/material-symbols-outlined.woff2') format('woff2');
}

.material-symbols {
    --rz-icon-font-family: 'Material Symbols Outlined';
}
.validation-message {
    color: var(--rz-danger-dark);
}

.wrap-text {
    white-space: pre-wrap !important;
}
.rounded-icon-background {
    background-color: white;
    border-radius: 50%;
    padding: 0.8rem; /* Adjust padding as needed */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 25px 0 rgb(0 0 0 / 10%);
}
.font-thick
{
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
}
.font-thicker
{
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}
.font-thickest
{
    font-family: 'Poppins', sans-serif;
    font-weight: 1000;
}
.rz-text-note
{
    font-style: italic !important;
    font-family: var(--rz-text-font-family);
    font-size: var(--rz-text-body2-font-size);
    line-height: var(--rz-text-body2-line-height);
    font-weight: var(--rz-text-body2-font-weight);
    letter-spacing: var(--rz-text-body2-letter-spacing);
    color: var(--rz-success-dark);
    margin-block-start: var(--rz-text-body2-margin-block-start);
    margin-block-end: var(--rz-text-body2-margin-block-end);
}
@font-face {
    font-family: 'MeditalkFaSolid';
    font-display: block;
    font-weight: 400;
    src: url("../fontawesome/webfonts/fa-solid-900.woff2") format("woff2"), url("../fontawesome/webfonts/fa-solid-900.ttf") format("truetype");
}
@font-face {
    font-family: 'MeditalkFaDuo';
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url("../fontawesome/webfonts/fa-duotone-900.woff2") format("woff2"), url("../fontawesome/webfonts/fa-duotone-900.ttf") format("truetype");
    /*src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/webfonts/fa-solid-900.woff2') format('woff2');*/
}
.fa {
    --rz-icon-font-family: "MeditalkFaSolid";
}
.fa-small {
    --rz-icon-font-family: "MeditalkFaSolid";
    font-size: 0.875em;

}

.fad {
    --rz-icon-font-family: "MeditalkFaDuo";
}

/* RadzenButton's IsBusy state renders an animated <i class="rzi"> with an
   inline `animation: button-icon-spin ...` style. The glyph is a Material
   Symbols name (sync/cached). When the surrounding button declares one of
   the FA helper classes above, --rz-icon-font-family resolves to a Font
   Awesome family that has no glyph at that codepoint and renders as a
   wrong character. Force the font back to Material Symbols for the
   spinner only — other icons in the button still pick up FA as intended. */
.fa .rzi[style*="button-icon-spin"],
.fa-small .rzi[style*="button-icon-spin"],
.fad .rzi[style*="button-icon-spin"] {
    --rz-icon-font-family: "Material Symbols";
    font-family: "Material Symbols";
}

/* ================================================================
   Global header search — RadzenAutoComplete custom row template
   ================================================================
   Lives in site.css (global) instead of MainLayout because Radzen
   renders the autocomplete popup at document.body, outside the
   Blazor component scope, so component-scoped styles wouldn't
   apply to the dropdown rows.
*/
.global-search-input .rz-autocomplete {
    width: 100% !important;
}

/* Radzen anchors the dropdown panel to document.body, not inside the
   input wrapper — so width has to be forced from a global rule, not a
   scoped one. We tag the panel via a sibling-of-input class that
   Radzen carries through (`rz-autocomplete-panel`). 560px gives the
   row template comfortable room for: icon chip + title + subtitle +
   badges, without a horizontal scrollbar. */
.rz-autocomplete-panel:has(.global-search-row) {
    min-width: 560px !important;
    max-width: 90vw;
}
.rz-autocomplete-panel .rz-autocomplete-list-item:has(.global-search-row) {
    padding: 0;
}

.global-search-row {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.5rem;
    min-width: 320px;
}

.global-search-typechip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 0.75rem;
    flex-shrink: 0;
}
.global-search-typechip.type-patient {
    background: var(--rz-info-lighter);
    color: var(--rz-info-darker);
}
.global-search-typechip.type-device {
    background: var(--rz-warning-lighter);
    color: var(--rz-warning-darker);
}
.global-search-typechip.type-auth {
    background: var(--rz-success-lighter);
    color: var(--rz-success-darker);
}
/* Google-style recent-search row — subtler chip, italic subtitle, sits
   above entity results in the dropdown to act as a quick re-run shortcut. */
.global-search-typechip.type-recent {
    background: var(--rz-base-200);
    color: var(--rz-text-secondary-color);
}
.global-search-row.is-recent {
    background: var(--rz-base-50);
}
.global-search-row.is-recent .global-search-title {
    font-weight: 500;
    color: var(--rz-text-secondary-color);
}
.global-search-row.is-recent .global-search-subtitle {
    font-style: italic;
    opacity: 0.7;
}

.global-search-body {
    min-width: 0;
    overflow: hidden;
}
.global-search-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--rz-text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.global-search-subtitle {
    font-size: 0.78rem;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.global-search-chart {
    font-family: var(--rz-font-family-monospace);
}
.global-search-badges {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}

/* ================================================================
   Panel-scoped loading overlay
   ================================================================
   Reusable overlay for cards/panels whose content is being re-fetched
   in response to a filter, dropdown, or chart-click change. Sits on
   top of the existing content (white-tinted) so users keep visual
   continuity instead of seeing the panel flash empty.

   Usage:
     <div class="panel-loading-overlay-host">  (gets position: relative)
       @if (IsPanelLoading) {
         <div class="panel-loading-overlay">
           <RadzenProgressBarCircular ... />
           <RadzenText>Loading…</RadzenText>
         </div>
       }
       ... actual content ...
     </div>
*/
.panel-loading-overlay-host {
    position: relative;
}
.panel-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 5;
    border-radius: inherit;
}

.rz-navigation-item-icon {
    --rz-icon-font-family: "MeditalkFaSolid";
}

.rz-tabview-nav {
    --rz-icon-font-family: "MeditalkFaSolid";
}


/* ================================================================
   Zoho Desk In-App Help Widget  fixes jaslogic1/RemoteCares#4
   ================================================================
   The widget elements are injected at runtime by the Zoho script.
   zoho-widget-config.js applies fixes dynamically via MutationObserver.
   The rules below serve as eager/static overrides and provide styling
   for the custom close button injected by that script.
   ---------------------------------------------------------------- */

/* Custom close button added by zoho-widget-config.js */
.zd-custom-close {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    z-index: 2147483647 !important;
    background: rgba(0, 0, 0, 0.55) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50% !important;
    width: 28px !important;
    height: 28px !important;
    font-size: 14px !important;
    line-height: 28px !important;
    text-align: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
}

.zd-custom-close:hover {
    background: rgba(0, 0, 0, 0.75) !important;
}