html,
body {
    min-height: 100%;
    margin: 0;
}

body {
    font-family: var(--dat-font-family-primary, sans-serif);
}

code,
kbd,
pre,
samp {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

img {
    max-width: 100%;
    height: auto;
}

.validation-message,
.validation-errors {
    color: var(--dat-alert-error-color);
    font-size: var(--dat-text-secondary-font-size);
}

#blazor-error-ui {
    position: fixed;
    z-index: 1000;
    inset-inline: 0;
    bottom: 0;
    display: none;
    border-top: var(--dat-border-width-control) solid var(--dat-alert-warning-border);
    background: var(--dat-alert-warning-background);
    padding: var(--dat-alert-padding-block) var(--dat-alert-padding-inline);
    color: var(--dat-alert-warning-color);
    font-family: var(--dat-font-family-primary, sans-serif);
    font-size: var(--dat-alert-font-size);
}

#blazor-error-ui .reload {
    color: inherit;
    font-weight: var(--dat-font-weight-semibold);
}

#blazor-error-ui .dismiss {
    position: absolute;
    inset-block-start: var(--dat-alert-padding-block);
    inset-inline-end: var(--dat-alert-padding-inline);
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.blazor-error-boundary {
    border: var(--dat-border-width-control) solid var(--dat-alert-error-border);
    background: var(--dat-alert-error-background);
    padding: var(--dat-alert-padding-block) var(--dat-alert-padding-inline);
    color: var(--dat-alert-error-color);
}

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