@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: 'Roboto', sans-serif;
    margin: 0px;
    margin-left: calc(100vw - 100%);
}

/* In an embedded frame the scrollbar-width offset above shifted the whole component sideways inside the host's
   panel whenever the frame scrolled, leaving uneven gutters. The frame reserves the gutter instead. */
html:has(.sp-embed-body),
html:has(.sp-embed-body) body {
    margin-left: 0;
    scrollbar-gutter: stable;
}

/* Design tokens. The portal had none beyond --mud-palette-*, so every scoped stylesheet re-declared its own
   radii (0.4rem to 0.9rem, nine different values), its own monospace stack (four of them) and its own focus
   glow, and they drifted. The integration surfaces use these and nothing else for those four things; new
   stylesheets should reach for them rather than a literal. They were declared once and used nowhere, which is
   how the drift carried on - the scoped stylesheets now reference them. Declared on :root beside MudBlazor's
   own variables, so a theme switch recomputes the ones built from the palette. */
:root {
    /* Inputs, chips, panels inside a card. */
    --sp-radius-sm: 0.5rem;
    /* Cards, dialogs' inner surfaces, rows. */
    --sp-radius-md: 0.75rem;
    --sp-font-mono: 'Cascadia Code', 'Fira Code', Consolas, 'Courier New', monospace;
    /* Chips, captions, technical details. */
    --sp-text-xs: 0.72rem;
    /* The keyboard-focus and selection glow the integration surfaces share. */
    --sp-focus-ring: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
    /* Motion: one pair of curves and three durations for the navigation and anything that moves with it. "out" for
       things arriving (a flyout, a sheet, a marker growing); "in-out" for things changing size (the rail, a section
       opening). Fast for colour and hover, base for opening and markers, slow for the drawer, the rail and the sheet.
       Used only inside prefers-reduced-motion: no-preference, so a person who asked for less sees none of it. */
    --sp-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --sp-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --sp-dur-fast: 150ms;
    --sp-dur-base: 200ms;
    --sp-dur-slow: 250ms;
    /* The collapsed menu: a column of icons. */
    --sp-rail-width: 72px;
}

/* Visually hidden, still read: for the text a screen reader needs and a sighted reader already has. */
.sp-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

a, .btn-link {
    color: #0366d6;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#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;
    }

.mobile-tab .mud-tabs-toolbar-content .mud-tabs-toolbar-wrapper {
    width: auto;
    justify-content: space-between;
}
.mobile-tab .mud-tab .mud-tab-icon-text {
    margin-inline-end: 0px;
    margin-right: 0px;
}
.mobile-tab .mud-tab-slider {
    opacity: 0;
}

.sepsis-list-item {
    transition: 0.5s ease-in-out;
}
    .sepsis-list-item.recently-added {
        background-color: var(--mud-palette-error);
    }


.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");
    }


.ims-summary-cell {
    border-bottom: none;
    font-size: 16px;
    color: var(--mud-palette-text-primary) !important;
    font-weight: 500 !important;
}

    .ims-summary-cell.max-w-cell {
        width: 45%;
    }

.ims-summary-header-cell {
    border-bottom: none;
    font-size: 17px;
    color: var(--mud-palette-text-primary) !important;
    font-weight: 800 !important;
    padding-bottom: 20px !important;
}

.mud-tabs:not(.default) .mud-tabs-tabbar {
    background-color: var(--mud-palette-appbar-background);
    color: var(--mud-palette-appbar-text);
}

.mud-tabs:not(.default) .mud-tab {
    opacity: .8;
}
    .mud-tabs:not(.default) .mud-tab.mud-tab-active {
        opacity: 1;
        /*filter: brightness(0) saturate(100%) invert(61%) sepia(8%) saturate(2778%) hue-rotate(192deg) brightness(83%) contrast(86%);*/
        /*background-color: var(--mud-palette-appbar-background);*/
        color: var(--mud-palette-appbar-text);
    }

/* SmartRealtimeSearch's own styles live in its components' scoped stylesheets (Components/ClinicalNotes). */

/* Playground: integration selector needs room for trust display names. */
.sp-smartform-integration-select {
    min-width: 260px;
}