@font-face {
    font-family: 'Rubik';
    src: url('fonts/Rubik-VariableFont_wght.woff2') format('woff2');
}


#loadingscreen {
    width: 100%;
    height: 100vh;
    color: whitesmoke;
    font-family: Rubik, Roboto, 'Segoe UI', Montserrat, Helvetica, Arial, sans-serif;
    font-weight: 100;
    padding-top: 24vh;
    padding-left: 24vw;
    margin-top: 0;
    font-size: 4vh;
    background: #252525;
    text-shadow: 3px 3px 5px #00000059;
}

#loadingprogress {
    color: #808080;
    margin-top: 2vh;
    font-size: 4vh;
}

#loadinginfo {
    font-size: 2vh;
    margin-left: 40vw;
    padding-top: 4vh;
}

/* https://loading.io/css/ */
.lds-dual-ring {
    display: inline-block;
    width: 4vh;
    height: 4vh;
}

    .lds-dual-ring:after {
        content: " ";
        display: block;
        width: 4vh;
        height: 4vh;
        margin: 0;
        border-radius: 50%;
        border: 0.3vh solid #fff;
        border-color: #27ee58 transparent #fff transparent;
        animation: lds-dual-ring 1.2s linear infinite;
    }

@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*
* {
    user-select: none;
}
*/

/* mud blazor customisations*/

.mud-appbar .mud-button {
    color: var(--mud-text-color);
}

.tab-left {
    justify-content: normal;
    padding-left: 2em;
}


/* fix clipped hovering input labels*/
.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
    line-height: inherit;
}

h1.mud-typography-h1, h2.mud-typography-h2, h3.mud-typography-h3, h3.mud-typography-h3, h4.mud-typography-h4, h5.mud-typography-h5, h6.mud-typography-h6 {
    margin-bottom: 0.6rem;
}

.mud-button, .mud-tab, .mud-chip, .mud-breadcrumb-item, .mud-nav-link {
    font-weight: 300;
}

.mud-tab, .mud-button {
    text-transform: initial;
}

.mud-button-filled {
    box-shadow: none;
}

pre.code {
    /*exception and log results*/
    max-width: 70vw;
    overflow: overlay;
    font-size: smaller;
    padding: 1em;
    border: 1px solid #c0c0c066;
}

.disable-select {
    user-select: none;
}
/*effects*/
.dark-mode .mud-paper {
    background-image: url(/images/gradient4.png);
}

/*
.mud-paper {
    background: linear-gradient(60deg, rgb(255 255 255 / 6%) 0%, rgb(93 105 95 / 1%) 40%, rgb(126 126 126 / 6%) 100%);
}

.mud-button {
    border: 1px solid #c5c5c532;
}
    */
.constrained-view {
    overflow-y: auto; 
    max-height: 50vh;
}

.constrained-table-container {
    max-width: 100%;
    overflow-x: auto;
}

.constrained-table-container .mud-table-root {
    min-width: var(--constrained-table-min-width, 1100px);
}

.constrained-table .sticky-actions-column {
    position: sticky;
    right: 0;
    z-index: 2;
    width: 1%;
    white-space: nowrap;
    background: var(--mud-palette-surface);
}

.constrained-table thead .sticky-actions-column {
    z-index: 3;
}

/* ---------------------------------------------------------------------------
   Accessibility
   --------------------------------------------------------------------------- */

/* MudBlazor ships `a:focus-visible{outline:none}` and substitutes a background tint of
   --mud-palette-action-default-hover, which measures ~1.14:1 against a white surface and is
   effectively invisible. Restore a real focus ring across every interactive element. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.mud-nav-link:focus-visible,
.mud-button-root:focus-visible,
.mud-table-sort-label:focus-visible,
.mud-tab:focus-visible,
.mud-chip:focus-visible,
.mud-breadcrumb-item > a:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    /* keeps the ring visible where it would otherwise sit on a primary-coloured surface */
    box-shadow: 0 0 0 4px var(--mud-palette-background);
}

/* the app bar is filled with the primary colour, so a primary-coloured ring would disappear */
.mud-appbar :focus-visible {
    outline-color: #fff;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.35);
}

@media (forced-colors: active) {
    a:focus-visible,
    button:focus-visible,
    [tabindex]:focus-visible {
        outline: 2px solid Highlight;
    }
}

/* Skip link: visually hidden until focused, then pinned to the top-left above the app bar. */
.skip-to-content {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    padding: 0.75rem 1.25rem;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 2px solid var(--mud-palette-primary);
    border-radius: 0 0 4px 0;
    text-decoration: none;
}

.skip-to-content:focus {
    left: 0;
}

/* Row status indicator: pairs the status text colour with a shape, so health is not colour-only. */
.status-indicator {
    display: inline-flex;
    align-items: center;
    vertical-align: text-bottom;
    margin-inline-end: 4px;
}

.status-indicator .mud-icon-root {
    font-size: 1rem !important;
    margin-right: 0 !important;
    margin-inline-end: 0 !important;
}

/* Screen-reader-only text, for labels that should not be shown visually. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Summary tiles filter the certificate list, so they are buttons; this keeps them looking like the plain
   linked cards they replaced. */
.summary-tile {
    display: block;
    width: 100%;
    height: 100%;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: inherit;
    cursor: pointer;
}

.summary-tile:hover .mud-paper {
    border-color: var(--mud-palette-primary);
}

/* Row/card titles that open an item. MudTable rows and MudPaper cards are plain click targets with no keyboard
   equivalent, so the title is rendered as a real button while still reading as the text it replaced. */
.row-title-button {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: start;
    cursor: pointer;
}

.row-title-button:hover {
    text-decoration: underline;
}

.row-title-button:hover .status-indicator {
    text-decoration: none;
}

/* MudSwitch renders as a <label> around both the toggle and its text, which a stack or flex parent then
   stretches across the full width of the row, so a click anywhere on that row flips the switch. Where a
   switch reconfigures the form beneath it that is far too easy to hit by accident, so keep the pointer
   hit area on the toggle itself. Keyboard and screen reader behaviour is unchanged: the label still names
   the input and space still toggles it. */
.switch-toggle-only {
    pointer-events: none;
}

.switch-toggle-only .mud-switch-span {
    pointer-events: auto;
}