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: 700;
    --ff-body: "Roboto", sans-serif;
    --ff-brand: "Roboto Bold", var(--ff-body);
    --fs-bg: #f7f7f7;
    --fs-text: #383838;
}

html, body {
    font: var(--fw-normal) var(--fs-base)/1.45 var(--ff-body);
    background: var(--fs-bg);
    color: var(--fs-text);
    overscroll-behavior-y: contain;
}

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;
}

/* 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;
    }
}
