html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

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

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* ===========================================================
   Shared doc-page typography & heading styles
   ---------------------------------------------------------------
   Mirrors the Fluent 2 / Segoe UI Variable typography used on
   the Getting Started page so every doc page (Overview, Common
   and Components demo pages) reads the same way.

   These styles live in this global stylesheet (loaded once in
   App.razor via `<link>`) so they apply to every Razor page that
   uses the `Description` component � no per-page <style> block
   needed.
   =========================================================== */

/* ---------- Theme tokens (mirror GettingStarted.razor) ---------- */
.page-content {
    --sf-bg: #FFFFFF;
    --sf-surface: #FFFFFF;
    --sf-surface-2: #F6F8FB;
    --sf-border: #E5E7EB;
    --sf-text: #111827;
    --sf-text-2: #4B5563;
    --sf-text-3: #6B7280;
    --sf-link: #2B357C;
    --sf-link-hover: #3B4693;
    --sf-purple: #2B357C;
    --sf-purple-50: #ECEEF7;
    --sf-purple-700: #3B4693;
}
.dark .page-content {
    --sf-bg: #0B1020;
    --sf-surface: #111827;
    --sf-surface-2: #0F172A;
    --sf-border: #1F2937;
    --sf-text: #F1F5F9;
    --sf-text-2: #CBD5E1;
    --sf-text-3: #94A3B8;
    --sf-link: #A4ABE0;
    --sf-link-hover: #C4CCEC;
    --sf-purple: #8A93C4;
    --sf-purple-50: rgba(43, 53, 124, 0.20);
    --sf-purple-700: #A4ABE0;
}

/* ---------- Page container / base typography (GettingStarted) ---------- */
.page-content {
    font-family: "Segoe UI Variable", "Segoe UI", "Inter", system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--sf-text);
    background: var(--sf-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.page-content * { box-sizing: border-box; }

.page-content p {
    margin: 0 0 16px 0;
    color: var(--sf-text-2);
    font-size: 16px;
    line-height: 1.65;
}
.page-content a {
    color: var(--sf-link);
    text-decoration: none;
    transition: color .15s ease;
}
.page-content a:hover {
    color: var(--sf-link-hover);
    text-decoration: underline;
}
.page-content code:not(pre code) {
    background: var(--sf-purple-50);
    color: var(--sf-purple-700);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
}
.dark .page-content code:not(pre code) { color: #C4CCEC; }
.page-content kbd {
    display: inline-block;
    background: var(--sf-surface-2);
    border: 1px solid var(--sf-border);
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 12px;
    color: var(--sf-text-2);
}
.page-content ul {
    margin: 0 0 16px 0;
    padding-left: 22px;
    color: var(--sf-text-2);
}
.page-content ul li:not(.e-list-item) {
    padding: 5px 10px;
    line-height: 1.65;
    font-size: 16px;
}
.page-content ul li strong { color: var(--sf-text); }

/* ---------- Headings inside <Description> ----------
   The `Description` component renders Header content into a
   `.header-class` wrapper and Content into a `.content-class`
   wrapper. These rules re-style those headings so the page
   matches the heading scale used on the Getting Started page:
     h4 (page title)     ? matches .sf-section h2 in GettingStarted
     h5 (sub-topic)      ? matches the step-row heading scale
     h6 (sub-sub topic)  ? smaller, semibold
   Letter-spacing, line-height, weight, and color come straight
   from GettingStarted.razor. */
.page-content .description-wrapper .header-class h4,
.page-content .description-wrapper .header-class h5,
.page-content .description-wrapper .header-class h6 {
    font-family: "Segoe UI Variable", "Segoe UI", "Inter", system-ui, -apple-system, sans-serif;
    color: var(--sf-text);
    line-height: 1.25;
    letter-spacing: -0.015em;
    margin: 0 0 14px 0;
    padding: 0;
    border: 0;
    text-wrap-mode: wrap;
    white-space: normal;
    word-break: break-word;
}
/* h4 � Page title (e.g. "System Requirements", "Browser Support").
   Sized like GettingStarted's .sf-section h2 (32px / 600 / -0.015em). */
.page-content .description-wrapper .header-class h4 {
    font-size: 32px;
    font-weight: 600;
}
/* h5 � Sub-topic heading ("IDEs", ".NET SDK", "Compatibility",
   "Next Steps", "Supported browsers", "See also"). */
.page-content .description-wrapper .header-class h5 {
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 10px 0;
}
/* h6 � Sub-sub heading ("Verifying the installed SDK", etc.). */
.page-content .description-wrapper .header-class h6 {
    font-size: 17px;
    font-weight: 600;
    margin: 4px 0 8px 0;
}
/* The Description component nests the Content fragment inside a
   <p> by default. Reset global p margins so heading + body spacing
   matches GettingStarted's .sf-section-lede (16px / 1.65). */
.page-content .description-wrapper .content-class p {
    letter-spacing: 0;
    text-wrap-mode: wrap;
    margin: 0 0 16px 0;
    font-size: 16px;
    line-height: 1.65;
    color: var(--sf-text-2);
}
/* Native h6 inside the Content slot (e.g. "Verifying the
   installed SDK") � match GettingStarted's smaller heading. */
.page-content .description-wrapper .content-class h6 {
    margin: 12px 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--sf-text);
    letter-spacing: -0.005em;
}
/* Spacing between consecutive Description blocks � visible rhythm
   that matches GettingStarted's .sf-section gap. */
.page-content .description-wrapper + .description-wrapper {
    margin-top: 32px;
}
.page-content .description-wrapper:first-of-type {
    padding-top: 4px;
}

/* ---------- Responsive (mirror GettingStarted) ---------- */
@media (max-width: 640px) {
    .page-content .description-wrapper .header-class h4 {
        font-size: 26px;
    }
    .page-content .description-wrapper .header-class h5 {
        font-size: 19px;
    }
}

/* ===========================================================
   Shared doc-page typography & heading styles
   ---------------------------------------------------------------
   Mirrors the Fluent 2 / Segoe UI Variable typography used on
   the Getting Started page so every doc page (Overview, Common
   and Components demo pages) reads the same way.

   These styles live in this global stylesheet (loaded once in
   App.razor via `<link>`) so they apply to every Razor page that
   uses the `Description` component - no per-page <style> block
   needed.
   =========================================================== */

/* ---------- Theme tokens (mirror GettingStarted.razor) ---------- */
.page-content {
    --sf-bg: #FFFFFF;
    --sf-surface: #FFFFFF;
    --sf-surface-2: #F6F8FB;
    --sf-border: #E5E7EB;
    --sf-text: #111827;
    --sf-text-2: #4B5563;
    --sf-text-3: #6B7280;
    --sf-link: #2B357C;
    --sf-link-hover: #3B4693;
    --sf-purple: #2B357C;
    --sf-purple-50: #ECEEF7;
    --sf-purple-700: #3B4693;
}
.dark .page-content {
    --sf-bg: #0B1020;
    --sf-surface: #111827;
    --sf-surface-2: #0F172A;
    --sf-border: #1F2937;
    --sf-text: #F1F5F9;
    --sf-text-2: #CBD5E1;
    --sf-text-3: #94A3B8;
    --sf-link: #A4ABE0;
    --sf-link-hover: #C4CCEC;
    --sf-purple: #8A93C4;
    --sf-purple-50: rgba(43, 53, 124, 0.20);
    --sf-purple-700: #A4ABE0;
}

/* ---------- Page container / base typography (GettingStarted) ---------- */
.page-content {
    font-family: "Segoe UI Variable", "Segoe UI", "Inter", system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--sf-text);
    background: var(--sf-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.page-content * { box-sizing: border-box; }

.page-content p {
    margin: 0 0 16px 0;
    color: var(--sf-text-2);
    font-size: 16px;
    line-height: 1.65;
}
.page-content a {
    color: var(--sf-link);
    text-decoration: none;
    transition: color .15s ease;
}
.page-content a:hover {
    color: var(--sf-link-hover);
    text-decoration: underline;
}
.page-content code:not(pre code) {
    background: var(--sf-purple-50);
    color: var(--sf-purple-700);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
}
.dark .page-content code:not(pre code) { color: #C4CCEC; }
.page-content kbd {
    display: inline-block;
    background: var(--sf-surface-2);
    border: 1px solid var(--sf-border);
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 12px;
    color: var(--sf-text-2);
}
.page-content ul {
    margin: 0 0 16px 0;
    padding-left: 22px;
    color: var(--sf-text-2);
}
.page-content ul li:not(.e-list-item) {
    padding: 5px 10px;
    line-height: 1.65;
    font-size: 16px;
}
.page-content ul li strong { color: var(--sf-text); }

/* ---------- Headings inside <Description> ----------
   The Description component renders Header content into a
   .header-class wrapper and Content into a .content-class
   wrapper. These rules re-style those headings so the page
   matches the heading scale used on the Getting Started page:
     h4 (page title)     -> matches .sf-section h2 in GettingStarted
     h5 (sub-topic)      -> matches the step-row heading scale
     h6 (sub-sub topic)  -> smaller, semibold
   Letter-spacing, line-height, weight, and color come straight
   from GettingStarted.razor. */
.page-content .description-wrapper .header-class h4,
.page-content .description-wrapper .header-class h5,
.page-content .description-wrapper .header-class h6 {
    font-family: "Segoe UI Variable", "Segoe UI", "Inter", system-ui, -apple-system, sans-serif;
    color: var(--sf-text);
    line-height: 1.25;
    letter-spacing: -0.015em;
    margin: 0 0 14px 0;
    padding: 0;
    border: 0;
    text-wrap-mode: wrap;
    white-space: normal;
    word-break: break-word;
}
/* h4 - Page title (e.g. "System Requirements", "Browser Support").
   Sized like GettingStarted's .sf-section h2 (32px / 600 / -0.015em). */
.page-content .description-wrapper .header-class h4 {
    font-size: 32px;
    font-weight: 600;
}
/* h5 - Sub-topic heading ("IDEs", ".NET SDK", "Compatibility",
   "Next Steps", "Supported browsers", "See also"). */
.page-content .description-wrapper .header-class h5 {
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 10px 0;
}
/* h6 - Sub-sub heading ("Verifying the installed SDK", etc.). */
.page-content .description-wrapper .header-class h6 {
    font-size: 17px;
    font-weight: 600;
    margin: 4px 0 8px 0;
}
/* The Description component nests the Content fragment inside a
   <p> by default. Reset global p margins so heading + body spacing
   matches GettingStarted's .sf-section-lede (16px / 1.65). */
.page-content .description-wrapper .content-class p {
    letter-spacing: 0;
    text-wrap-mode: wrap;
    margin: 0 0 16px 0;
    font-size: 16px;
    line-height: 1.65;
    color: var(--sf-text-2);
}
/* Native h6 inside the Content slot (e.g. "Verifying the
   installed SDK") - match GettingStarted's smaller heading. */
.page-content .description-wrapper .content-class h6 {
    margin: 12px 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--sf-text);
    letter-spacing: -0.005em;
}
/* Spacing between consecutive Description blocks - visible rhythm
   that matches GettingStarted's .sf-section gap. */
.page-content .description-wrapper + .description-wrapper {
    margin-top: 32px;
}
.page-content .description-wrapper:first-of-type {
    padding-top: 4px;
}

/* ---------- Responsive (mirror GettingStarted) ---------- */
@media (max-width: 640px) {
    .page-content .description-wrapper .header-class h4 {
        font-size: 26px;
    }
    .page-content .description-wrapper .header-class h5 {
        font-size: 19px;
    }
}

/* ===========================================================
   h1 / h2 / h3 heading scale (Description + bare)
   ---------------------------------------------------------------
   Document pages (Chart demos, Overview, Getting Started, etc.)
   use the standard h1 / h2 / h3 hierarchy:
     h1 = page title (largest)
     h2 = major section heading
     h3 = sub-section heading
   These rules style all three levels for BOTH:
     - headings inside <Description> (the .header-class wrapper)
     - bare headings (e.g. <h1> rendered directly in the page body)
   Scale:  h1 = 32px  h2 = 22px  h3 = 17px
   =========================================================== */
.page-content .description-wrapper .header-class h1,
.page-content .description-wrapper .header-class h2,
.page-content .description-wrapper .header-class h3,
.page-content h1,
.page-content h2,
.page-content h3 {
    font-family: "Segoe UI Variable", "Segoe UI", "Inter", system-ui, -apple-system, sans-serif;
    color: var(--sf-text);
    line-height: 1.25;
    letter-spacing: -0.015em;
    margin: 0 0 14px 0;
    padding: 0;
    border: 0;
    text-wrap-mode: wrap;
    white-space: normal;
    word-break: break-word;
}


/* Native h1 / h2 / h3 inside the Content slot of <Description>
   (e.g. when a heading is embedded inside the description body). */
.page-content .description-wrapper .content-class h1,
.page-content .description-wrapper .content-class h2,
.page-content .description-wrapper .content-class h3 {
    margin: 12px 0 8px 0;
    color: var(--sf-text);
    font-weight: 600;
    letter-spacing: -0.005em;
}
.page-content .description-wrapper .content-class h1 { font-size: 22px; }
.page-content .description-wrapper .content-class h2 { font-size: 18px; }
.page-content .description-wrapper .content-class h3 { font-size: 16px; }

/* ---------- Responsive (mirror GettingStarted) ---------- */
@media (max-width: 640px) {
    .page-content .description-wrapper .header-class h1,
    .page-content h1 { font-size: 26px; }
    .page-content .description-wrapper .header-class h2,
    .page-content h2 { font-size: 19px; }
    .page-content .description-wrapper .header-class h3,
    .page-content h3 { font-size: 15px; }
}