h1, h2, h3, h4, h5, h6, .font-bold {
    font-family: "Roboto Bold", sans-serif;
    font-weight: bold;
}

:root {
    --fs-base: 14px;
    --fs-small: 12px;
    --fs-title: 18px;
    --fs-h1: 24px;
    --fs-h2: 20px;
    --fs-h3: 16px;
    --fw-normal: 400;
    --fw-bold: 600;
    --ff-body: "Roboto", sans-serif;
    --ff-brand: "Roboto Bold", var(--ff-body);

    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
}
@supports (padding-top: constant(safe-area-inset-top)) {
    :root {
        --safe-top: constant(safe-area-inset-top);
        --safe-right: constant(safe-area-inset-right);
        --safe-bottom: constant(safe-area-inset-bottom);
        --safe-left: constant(safe-area-inset-left);
    }
}

html, body {
    font: var(--fw-normal) var(--fs-base)/1.45 var(--ff-body);
    color: #222;
    overscroll-behavior-y: contain;
    height: 90%;
}

body {
    min-height: 90vh;
    min-height: 90dvh;
}

h1, .fs-h1 {
    font: var(--fw-bold) var(--fs-h1)/1.2 var(--ff-brand);
    margin: .25rem 0 .5rem;
}

h2, .fs-h2 {
    font: var(--fw-bold) var(--fs-h2)/1.25 var(--ff-brand);
    margin: .4rem 0 .6rem;
}

h3, .fs-h3 {
    font: var(--fw-bold) var(--fs-h3)/1.3 var(--ff-brand);
    margin: .5rem 0 .6rem;
}

p {
    font: var(--fw-normal) var(--fs-base)/1.45 var(--ff-body);
    margin: .2rem 0 .9rem;
}

.blazor-error-ui,
#components-reconnect-modal,
.components-reconnect-modal,
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.fs-safe-top {
    padding-top: var(--safe-top);
}

.fs-safe-bottom {
    padding-bottom: var(--safe-bottom);
}

.fs-safe-x {
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
}

.fs-safe-bottom-pad {
    padding-bottom: calc(var(--safe-bottom) + 12px);
}

/* Force Syncfusion controls to use Roboto text fonts */
.e-control,
.e-control input,
.e-control textarea,
.e-control select,
.e-control button,
.e-control .e-input,
.e-control .e-float-text,
.e-control .e-list-text,
.e-control .e-dlg-header-content,
.e-control .e-dlg-content,
.e-control .e-headertext,
.e-control .e-rowcell,
.e-css,
.e-css input,
.e-css textarea,
.e-css button {
    font-family: "Roboto", sans-serif !important;
}

@supports (-webkit-touch-callout: none) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    textarea,
    select,
    .e-control input,
    .e-control textarea,
    .e-control select,
    .e-css input,
    .e-css textarea,
    .e-css select {
        font-size: 16px !important;
    }
}