:root {
    --portal-brand: #008fbe;
    --portal-blue: #1768b0;
    --portal-ink: #142d49;
    --portal-muted: #718297;
    --portal-canvas: #f4f7fa;
    --portal-surface: #fff;
    --portal-border: #dfe6ed;
    --portal-border-strong: #ccd7e2;
    --portal-danger: #b74453;
    --portal-warning: #a86e18;
    --portal-radius: 10px;
    --portal-shadow: 0 8px 24px rgb(24 52 84 / 5%);
}

html,
body {
    margin: 0;
    min-height: 100%;
    font-size: var(--dxds-font-size-body-1);
    font-family: var(--dxds-font-family-sans-serif, "Segoe UI", Arial, sans-serif);
    font-weight: var(--dxds-font-weight-body-1);
    line-height: var(--dxds-line-height-body-1);
    letter-spacing: var(--dxds-letter-spacing-body-1);
    color: var(--dxds-color-content-neutral-default-rest, #1f334d);
    background-color: var(--portal-canvas);
}

* {
    box-sizing: border-box;
}

button,
input,
select {
    font: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid #2683c6;
    outline-offset: 2px;
}

.portal-icon {
    display: block;
    width: 20px;
    height: 20px;
}

.loading {
    display: grid;
    min-height: 100vh;
    place-items: center;
    color: #52627a;
}

#blazor-error-ui {
    display: none;
    position: fixed;
    z-index: 1000;
    right: 16px;
    bottom: 16px;
    padding: 14px;
    border: 1px solid #e6c66d;
    background: #fff7d6;
}