/* ---------------------------------------------------------------------------
   Hyperlinks.

   Radzen's themes only colour `.rz-link` (the RadzenLink component) and
   spreadsheet hyperlink cells — `--rz-link-color` never reaches a bare <a>,
   and nothing in Radzen or here ever styled :visited. So ordinary anchors fell
   through to the user-agent stylesheet: #0000EE on the dark theme's greys, and
   #551A8B once visited, which is barely legible at 1.4:1.

   Palette is GitHub's, which is designed for exactly these surfaces. The dark
   scope keys off the theme stylesheet RadzenTheme emits, so it follows the
   live toggle in App.razor (which rewrites that href) with no extra plumbing.

   This block is first in the file on purpose: the scoped anchor rules further
   down (.nav-links a, a.ui-button, ...) tie with it on specificity and must
   keep winning on source order.
   ------------------------------------------------------------------------ */
:root {
    --fcs-link-color: #0969da;
    --fcs-link-hover-color: #0550ae;
    --fcs-link-visited-color: #8250df;
}

html:has(link[href*="standard-dark"]) {
    --fcs-link-color: #4493f8;
    --fcs-link-hover-color: #6cb6ff;
    --fcs-link-visited-color: #a371f7;
}

/* Keep RadzenLink and friends on the same palette. Matching "standard" hits
   both themes, and outweighs the :root where Radzen declares these. */
html:has(link[href*="standard"]) {
    --rz-link-color: var(--fcs-link-color);
    --rz-link-hover-color: var(--fcs-link-hover-color);
}

a:any-link { color: var(--fcs-link-color); }
a:any-link:hover { color: var(--fcs-link-hover-color); }
a:visited { color: var(--fcs-link-visited-color); }
a:visited:hover { color: var(--fcs-link-hover-color); }

/* .rz-link carries its own colour, so it needs the visited state restating. */
.rz-link:visited { color: var(--fcs-link-visited-color); }
.rz-link:visited:hover { color: var(--fcs-link-hover-color); }

a.ui-button:hover {
    color: #fff;
    text-decoration: none;
}

/*
Visual Studio-like style based on original C# coloring by Jason Diamond <jason@diamond.name>
*/
.hljs {
display: block;
overflow-x: auto;
background: white;
color: black;
}

.hljs-comment,
.hljs-quote,
.hljs-variable {
color: #008000;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-built_in,
.hljs-name,
.hljs-tag {
color: #00f;
}

.hljs-string,
.hljs-title,
.hljs-section,
.hljs-attribute,
.hljs-literal,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-addition {
color: #a31515;
}

.hljs-deletion,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-meta {
color: #2b91af;
}

.hljs-doctag {
color: #808080;
}

.hljs-attr {
color: #f00;
}

.hljs-symbol,
.hljs-bullet,
.hljs-link {
color: #00b0e8;
}


.hljs-emphasis {
font-style: italic;
}

.hljs-strong {
font-weight: bold;
}

.documentation-links {
position: relative;
float: right;
margin-inline-start: -100%;
padding-block-start: 0.5rem;
padding-inline-end: 1rem;
}

.documentation-links a {
text-decoration: none !important;
padding: 6px 0;
margin-inline-start: 24px;
display: inline-flex;
align-items: center;
}

.social-link {
margin-inline-end: 8px;
text-decoration: none;
}

/* next-demos */

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    --rz-body-font-size: 1rem;
}

.fcs-profile-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 24px;
    display: inline-block;
    vertical-align: middle;
}

.fcs-portal-cart { gap: .3rem; flex-shrink: 0; text-decoration: none; }
.fcs-portal-cart[hidden] { display: none !important; }

.light {
    padding-block-start: 3rem;
    padding-block-end: 6rem;
    background-image: url("../images/background.svg");
    background-repeat: no-repeat;
    background-size: 3000px;
    background-position: 50% -1600px;
}

.dark {
    padding-block-start: 6rem;
    padding-block-end: 3rem;
    background-color: #050A23;
    background-image: url("../images/background.svg");
    background-repeat: no-repeat;
    background-position: 50% 0;
}

.demos-home.dark,
.demos-home.dark h1,
.demos-home.dark h2,
.demos-home.dark h3,
.demos-home.dark h4,
.demos-home.dark h5,
.demos-home.dark h6,
.demos-home.dark p {
    color: #ffffff !important;
}

/* Top navigation links */
.nav-links a {
    color: var(--rz-text-title-color);
    transition: all 0.3s;
    text-decoration: none;
}

/* CTA Buttons

.cta-button {
    text-decoration: none;
    display: inline-block;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.25rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    padding: 1rem 2rem;
    border-radius: .75rem;
    border: 2px solid var(--rz-text-color);
    box-sizing: border-box;
    color: var(--rz-text-color) !important;
    transition: all 0.3s ease-in-out;
}

.dark .cta-button {
    border-color: rgba(255,255,255,.3);
    color: #ffffff !important;
}

.cta-button.primary {
    font-weight: 600;
    color: #ffffff !important;
    border-color: var(--rz-primary); /*#FF504D
    background: var(--rz-primary); /*§#FF504D
}

.cta-button:hover {
    text-decoration: none;
    color: var(--rz-text-contrast-color) !important;
    border-color: var(--rz-base-800);
    background: var(--rz-base-800);
}
.dark .cta-button:hover {
    text-decoration: none;
    color: #050A23 !important;
    border-color: #ffffff;
    background: #ffffff;
}

.cta-button:active {
    color: #c2c2c2 !important;
}
.dark .cta-button:active {
    color: #515256 !important;
}
 */
/* Updated layout */

.customers-logos {
    
    img {
        height: 20px;
        max-width: 100%;
    }

    .square img {
        height: 40px;
    }

    span {
        min-width: 100px;
        padding: 8px 12px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Radzen Features */

video {
    box-shadow: 0px 12px 20px rgba(0, 0, 0, 0.5);
    background: rgba(0,0,0,.3) url("../images/play.svg") no-repeat 50% 50%;
}

.radzen-features ul {
    margin-block-start: 0;
    margin-block-end: 0;
    list-style-image: url("../images/checkmark.svg");
}

.radzen-features li {
    cursor: default;
    padding-block-start: 0.6rem;
    padding-block-end: 0.6rem;
    transition: all 0.3s ease-in-out;
}

/* Components List */
.components-list {
    --rz-link-hover-text-decoration: none;

    .rz-link-disabled
    {
        pointer-events: none;
        opacity: 0.5;
    }

    .rz-link {
        display: block;
        width: 100%;
        font-weight: 600;
        position: relative;
        border-radius: var(--rz-card-border-radius);

        .rz-badge {
            --rz-badge-font-size: 12px;
            --rz-badge-line-height: 12px;
            --rz-badge-padding: 1px 2px;
            --rz-badge-border-radius: var(--rz-border-radius-4);
            position: absolute;
            width: 16px;
            height: 16px;
            inset-inline-start: 32px;
            inset-block-start: -4px;
            overflow: hidden;
            text-align: start;
            transition: width .15s 0.1s linear;

            span {
                margin: 0 4px;
                text-transform: uppercase;
                font-size: 9px;
            }
        }

        .rz-link-text {
            display: flex;
            align-items: center;
            gap: 0.5rem;

            > .rzi {
                font-size: 28px;
                font-weight: 300;
                width: 12px;
                height: 12px;
                font-variation-settings: 'opsz' 40;
                background-color: var(--rz-primary-lighter);
                color: var(--rz-on-primary-lighter);
                border-radius: var(--rz-card-border-radius);
                width: 44px;
                height: 44px;
            }
        }
    }

    .rz-link:hover,
    .rz-link:focus-visible {
        .rz-badge.rz-badge-success {
            width: 46px;
        }

        .rz-badge.rz-badge-info {
            width: 66px;
        }
    }

    .rz-link:focus-visible {
        outline: var(--rz-outline-focus);
    }
}

/* Main Site Navigation on Product pages */

.public-site-header {
    position: relative;
    z-index: 2000;
    min-height: 4.5rem;
    display: flex;
    align-items: stretch;
    color: var(--rz-on-base-darker);
    background: var(--rz-base-darker);
    border-bottom: var(--rz-border-width) solid var(--rz-base-dark);
}

.public-site-header-inner {
    width: min(1440px, 100%);
    min-height: 4.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 1.5rem;
    margin-inline: auto;
    padding-inline: 1.5rem;
}

.public-site-header a {
    display: inline-flex;
    align-items: center;
    color: var(--rz-on-base-darker);
    text-decoration: none;
    transition: color var(--rz-transition);
}

.public-site-header a:hover,
.public-site-header a:focus-visible {
    color: var(--rz-primary-light);
    text-decoration: none;
}

.public-site-address {
    justify-self: start;
    font-size: 0.875rem;
}

.public-site-address-short {
    display: none;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.public-site-nav {
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.public-site-nav a {
    padding: 0.6rem 1.25rem;
    border-radius: var(--rz-border-radius);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
}

.public-site-nav a.active {
    color: var(--rz-primary-light);
    background: var(--rz-base-dark);
}

.public-site-login {
    justify-self: end;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
}

@media (max-width: 700px) {
    .public-site-header-inner {
        grid-template-areas:
            "address login"
            "nav nav";
        grid-template-columns: 1fr 1fr;
        gap: 0;
        padding: 0.25rem 1rem 0.5rem;
    }

    .public-site-address {
        grid-area: address;
        min-height: 2.5rem;
    }

    .public-site-address-full {
        display: none;
    }

    .public-site-address-short {
        display: inline;
    }

    .public-site-nav {
        grid-area: nav;
        justify-content: center;
        padding-bottom: 0.35rem;
    }

    .public-site-nav a {
        padding: 0.45rem 1rem;
    }

    .public-site-login {
        grid-area: login;
        min-height: 2.5rem;
        padding-inline: 0;
    }
}

.site-main-top-nav {
    --rz-menu-item-icon-margin-inline: 0;
    --rz-menu-item-icon-color: var(--rz-on-primary-darker);
    --rz-menu-item-icon-hover-color: var(--rz-white);
    --rz-menu-background-color: var(--rz-base-darker);
    --rz-menu-top-item-color: var(--rz-on-base-darker);
    --rz-menu-top-item-background-color: var(--rz-base-darker);
    --rz-menu-top-item-hover-color: var(--rz-on-base-darker);
    --rz-menu-top-item-selected-color: var(--rz-on-base-darker);
    --rz-menu-item-color: var(--rz-on-base-darker);
    --rz-menu-item-background-color: var(--rz-base-darker);
    --rz-menu-item-hover-color: var(--rz-on-base-dark);
    --rz-menu-item-hover-background-color: var(--rz-base-dark);
    --rz-menu-item-selected-color: var(--rz-on-base-darker); 
    --rz-menu-item-selected-background-color: var(--rz-base-dark);
}

.rz-material3 .demos-nav,
.rz-material3-dark .demos-nav  {
    padding: 0.5rem;
}

/* Footer */

.copyright {
    margin-block-start: 6rem;
    opacity: .2;
    transition: all 0.4s ease-in-out;
}
.copyright:hover {
    opacity: 1;
}

.row.copyright p {
    font-size: 1rem;
    font-weight: 300;
    color: #ACAFB9;
}

/* Demos Content */

p code,
ul code {
    display: inline-block;
}

p code,
ul code,
pre {
    padding: 0 0.5rem;
    font-size: 0.8125em !important;
    line-height: 1.25rem;
    background: var(--rz-base);
    color: var(--rz-on-base);
    border-radius: var(--rz-card-border-radius);
    letter-spacing: -0.04em;
}

pre {
    overflow-x: auto;
}

.rz-sidebar {
    inset-block-end: 0 !important;
}

.rz-card.docu p,
.rz-card.docu ul {
    line-height: 1.6;
    margin-block-end: 1rem;
}

.docu img,
.docu svg {
    display: block;
    width: 100%;
    max-width: 700px;
    margin: 4rem auto;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.06);
}

svg.illustration {
    box-shadow: none;
    max-width: 300px;
    min-height: 220px;
}

.example-container {
    max-width: 1440px;
}

/* Demos Sidebar */

.demos-sidebar .rz-panel-menu .rz-badge {
    margin-inline-start: 0.5rem;
    font-size: 9px;
    line-height: 12px;
}

/* Demos Tabs */

.example-tabs > .rz-tabview-panels {
    border-inline-end: none;
    border-block-end: none;
    border-inline-start: none;
}

.example-tabs > .rz-tabview-nav {
    background-color: var(--rz-tabs-tab-background-color);
    border-radius: var(--rz-card-border-radius) var(--rz-card-border-radius) 0 0;
    padding: 0 1rem;
}

.rz-tabview-top.example-tabs > .rz-tabview-nav > li {
    z-index: 1;
    border-radius: 0;
    border-inline-start: none;
    border-inline-end: none;
    border-block-end: none;
    transition: none;
    overflow: hidden;
}

.rz-tabview-top.example-tabs > .rz-tabview-nav > li > a > .rz-tabview-title {
    overflow: hidden;
    text-overflow: ellipsis;
}

.monaco-editor .view-overlays .current-line {
    border: none !important;
}

.source-tab-item {
    margin: calc(-1 * var(--rz-tabs-padding));
    overflow: hidden;
}

/* Demos TOC */
.demos-right-nav {
    position: sticky;
    inset-block-start: 2rem;
}

/* Promo */

.promo-alert {
    background: linear-gradient(110deg, rgba(0,0,0,0.4) 100%, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.4) 100%),linear-gradient(110deg, #000 20%, #AA01E4 75%, #534EEB 100%);
    background-size: cover;
    padding: 2rem !important;
}

/* Responsive */

@media (max-width: 1024px) {
    .documentation-links {
        float: none;
        margin-inline-start: 0;
        margin-block-end: 1rem;
    }
    .documentation-links a {
        display: flex;
        margin-inline-start: 0;
    }
}

@media (max-width: 767px) {
    .nav-links a {
        margin-inline-start: 1rem;
    }

    .rz-layout .rz-layout:not(:has(>.rz-sidebar:nth-of-type(2))) .rz-header,
    .rz-layout .rz-layout:not(:has(>.rz-sidebar:nth-of-type(2))) .rz-footer,
    .rz-layout .rz-layout:not(:has(>.rz-sidebar:nth-of-type(2))) .rz-body {
        width: initial;
    }
}

@media (max-width: 576px) {
    .all-components h4 {
        font-size: 1.25rem;
        font-weight: 700;
    }
    .all-components a {
        font-size: 1.25rem;
        font-weight: 400;
    }
    .popular-components a {
        width: 7rem;
        margin-block-end: 2rem;
    }
    .customers h3 {
        margin: 1rem 0 0;
    }
    .copyright {
        opacity: 1;
    }
}

#blazor-error-ui {
    background: lightyellow;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    inset-block-end: 0;
    inset-inline-start: 0;
    padding-block: 0.6rem 0.7rem;
    padding-inline: 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    inset-inline-end: 0.75rem;
    inset-block-start: 0.5rem;
}

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

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

/* Circuit-down dialog (markup in App.razor). Blazor drives it purely by swapping one
   components-reconnect-* class on the host, so every state is a rule below; each message and button
   opts in via the .fcs-reconnect-on-* class it carries. Painting from the Radzen theme variables is
   the whole point of taking the dialog over: the built-in one is a hardcoded white card whose text
   colour inherits from <body>, which in dark mode is pale grey — unreadable exactly when it matters. */
#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-paused,
#components-reconnect-modal.components-reconnect-resume-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: block;
}

.fcs-reconnect-dialog {
    background-color: var(--rz-dialog-background-color);
    color: var(--rz-text-color);
    border: var(--rz-border-normal);
    box-shadow: var(--rz-shadow-6);
    border-radius: var(--rz-border-radius);
    width: 22rem;
    max-width: calc(100% - 2rem);
    margin: 20vh auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    animation: fcs-reconnect-appear 0.4s ease-out;
}

@keyframes fcs-reconnect-appear {
    from { opacity: 0; transform: translateY(1.5rem) scale(0.97); }
    to { opacity: 1; transform: none; }
}

.fcs-reconnect-text {
    margin: 0;
    text-align: center;
    line-height: 1.5;
}

/* No buttons while an attempt is in flight, so the row would otherwise sit there as an empty flex
   item and still draw the dialog's 1rem gap around itself. */
.fcs-reconnect-actions {
    display: none;
    gap: 0.5rem;
}

.components-reconnect-failed .fcs-reconnect-actions,
.components-reconnect-paused .fcs-reconnect-actions,
.components-reconnect-resume-failed .fcs-reconnect-actions,
.components-reconnect-rejected .fcs-reconnect-actions {
    display: flex;
}

.fcs-reconnect-button {
    border: var(--rz-border-normal);
    background-color: transparent;
    color: var(--rz-text-color);
    padding: 0.4rem 1.5rem;
    border-radius: var(--rz-border-radius);
    cursor: pointer;
    font: inherit;
}

.fcs-reconnect-button.fcs-reconnect-primary {
    border-color: transparent;
    background-color: var(--rz-primary);
    color: var(--rz-on-primary);
}

.fcs-reconnect-button:hover { filter: brightness(1.15); }
.fcs-reconnect-button:active { filter: brightness(0.9); }

/* Nothing shows until the host names a state. Retrying arrives ALONGSIDE show rather than replacing
   it, so that pair is spelled out explicitly instead of falling out of the single-class rules. */
.fcs-reconnect-on-show,
.fcs-reconnect-on-retrying,
.fcs-reconnect-on-failed,
.fcs-reconnect-on-paused,
.fcs-reconnect-on-resume-failed,
.fcs-reconnect-on-rejected {
    display: none;
}

.components-reconnect-show .fcs-reconnect-on-show,
.components-reconnect-retrying .fcs-reconnect-on-retrying,
.components-reconnect-failed .fcs-reconnect-on-failed,
.components-reconnect-paused .fcs-reconnect-on-paused,
.components-reconnect-resume-failed .fcs-reconnect-on-resume-failed,
.components-reconnect-rejected .fcs-reconnect-on-rejected {
    display: block;
}

.components-reconnect-retrying .fcs-reconnect-on-show {
    display: none;
}

/* Center the icon and label together; Material icons sit too high on a text baseline. */
.components-reconnect-failed .fcs-reconnect-button.fcs-reconnect-on-failed,
.components-reconnect-paused .fcs-reconnect-button.fcs-reconnect-on-paused,
.components-reconnect-resume-failed .fcs-reconnect-button.fcs-reconnect-on-resume-failed,
.components-reconnect-rejected .fcs-reconnect-button.fcs-reconnect-on-rejected {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* The waiting ripple, shown only while an attempt is actually in flight. */
.fcs-reconnect-ripple {
    display: none;
    position: relative;
    width: 5rem;
    height: 5rem;
}

.components-reconnect-show .fcs-reconnect-ripple,
.components-reconnect-retrying .fcs-reconnect-ripple {
    display: block;
}

.fcs-reconnect-ripple div {
    position: absolute;
    border: 3px solid var(--rz-primary);
    border-radius: 50%;
    animation: fcs-reconnect-ripple 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.fcs-reconnect-ripple div:nth-child(2) {
    animation-delay: -0.75s;
}

@keyframes fcs-reconnect-ripple {
    0% { inset: 50% 50% 50% 50%; opacity: 1; }
    100% { inset: 0 0 0 0; opacity: 0; }
}

.rz-app-loading {
    position: fixed;
    inset: 0;
    background: var(--rz-base-background-color);
    z-index: 1000;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: #1b6ec2;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

.logo-loading {
    width: 240px !important;
    height: 240px !important;
    position: relative;
    border-radius: 120px;
    animation: boxShadow 2s infinite alternate-reverse;
    animation-delay: 0ms;
}

.logo-loading:before {
    position: absolute;
    content: "";
    inset: 0;
    background: radial-gradient(circle at bottom, #FE9041 0%, #FF504D 33%, #BD00FF 66%, #534EEB 100%) top right/300% 400%;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M32 64C49.6731 64 64 49.6731 64 32C64 14.3269 49.6731 0 32 0C14.3269 0 0 14.3269 0 32C0 44.3294 6.9729 55.0303 17.1903 60.3741L17.2101 60L16.4699 46H24.9016C24.9016 46 24.0901 52.403 24.0901 60C24.0901 61.0352 24.1059 62.0482 24.1332 63.0258C26.65 63.662 29.2855 64 32 64ZM34.7165 21.1563C31.3677 23.0897 29.6006 26.3148 28.9123 27.8485L24.1052 31.7768C24.0954 31.1937 24.0901 30.6006 24.0901 30C24.0901 22.403 24.9405 16 24.9405 16H16.4699C16.4699 16 17.2101 22.403 17.2101 30C17.2101 37.597 16.4699 44 16.4699 44H24.9405C24.9405 44 24.3074 39.2329 24.1337 33.0449L24.9155 32.4061C25.6087 33.3444 27.4753 35.436 30.8322 36.2859C35.2237 37.3978 43.2636 36.6629 43.2636 36.6629C43.2636 36.6629 36.4332 32.6211 32.0416 31.5092C29.5122 30.8687 27.4277 31.108 26.1147 31.4261L29.3775 28.7599C30.9421 28.8081 34.5296 28.6878 38.0541 26.937C42.743 24.6078 51.9471 15.2096 51.9471 15.2096C51.9471 15.2096 39.2279 18.5516 34.7165 21.1563Z"/></svg>') center/contain;
    mask: url('data:image/svg+xml;utf8,<svg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M32 64C49.6731 64 64 49.6731 64 32C64 14.3269 49.6731 0 32 0C14.3269 0 0 14.3269 0 32C0 44.3294 6.9729 55.0303 17.1903 60.3741L17.2101 60L16.4699 46H24.9016C24.9016 46 24.0901 52.403 24.0901 60C24.0901 61.0352 24.1059 62.0482 24.1332 63.0258C26.65 63.662 29.2855 64 32 64ZM34.7165 21.1563C31.3677 23.0897 29.6006 26.3148 28.9123 27.8485L24.1052 31.7768C24.0954 31.1937 24.0901 30.6006 24.0901 30C24.0901 22.403 24.9405 16 24.9405 16H16.4699C16.4699 16 17.2101 22.403 17.2101 30C17.2101 37.597 16.4699 44 16.4699 44H24.9405C24.9405 44 24.3074 39.2329 24.1337 33.0449L24.9155 32.4061C25.6087 33.3444 27.4753 35.436 30.8322 36.2859C35.2237 37.3978 43.2636 36.6629 43.2636 36.6629C43.2636 36.6629 36.4332 32.6211 32.0416 31.5092C29.5122 30.8687 27.4277 31.108 26.1147 31.4261L29.3775 28.7599C30.9421 28.8081 34.5296 28.6878 38.0541 26.937C42.743 24.6078 51.9471 15.2096 51.9471 15.2096C51.9471 15.2096 39.2279 18.5516 34.7165 21.1563Z"/></svg>') center/contain;
    animation: colorChange 2s infinite alternate-reverse;
    animation-delay: 0ms;
}

@keyframes colorChange {
    to {
        background-position: bottom right;
    }
}

@keyframes boxShadow {
    0% {
        box-shadow: 0 0 0 20px rgba(97, 92, 237, 0.2), 0 0 0 40px rgba(97, 92, 237, 0.2);
    }
    100% {
        box-shadow: 0 0 0 20px rgba(255, 80, 77, 0.2), 0 0 0 40px rgba(255, 80, 77, 0.2);
    }
}

.embed-container {
    position: relative;
    padding-block-end: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 100%;
}

.fcs-checkout-choice { height:100%; display:flex; flex-direction:column; align-items:flex-start; gap:1.25rem; }
.fcs-checkout-choice h3 { color:var(--rz-secondary); }
.fcs-checkout-choice > :last-child { margin-top:auto; }
.fcs-checkout-payment { width:min(100%, 34rem); padding:2rem; }
.fcs-checkout-total { font-size:2.5rem; }
.fcs-purchase-totals { display:grid; gap:.65rem; text-align:right; }
.fcs-purchase-discount { color:var(--rz-success); }
.fcs-purchase-table { width:100%; }
.fcs-purchase-table .rz-grid-table { min-width:58rem; }
.fcs-purchase-table .fcs-purchase-add-maintenance { vertical-align:bottom; text-align:left; }

/* Storefront cards share Radzen's surfaces and accent in both appearance modes. */
.rz-card.fcs-storefront-card {
    border-color: color-mix(in srgb, var(--rz-primary) 30%, var(--rz-base-background-color));
    box-shadow: var(--rz-shadow-2);
    background: var(--rz-base-background-color);
}
.fcs-storefront-card .fcs-price-card-title {
    background: color-mix(in srgb, var(--rz-primary) 16%, var(--rz-base-background-color));
    color: var(--rz-text-title-color);
    font-weight: 600;
    padding-block: 1.25rem;
}
.fcs-storefront-card .fcs-price-card-figure {
    background: linear-gradient(color-mix(in srgb, var(--rz-primary) 7%, var(--rz-base-background-color)), var(--rz-base-background-color));
    padding-block: 1.75rem 1rem;
}
.fcs-storefront-card .fcs-price-card-amount { font-size: clamp(1.65rem, 2.5vw, 2.4rem); font-weight: 600; line-height: 1.2; }
.fcs-storefront-card .fcs-price-card-action > * { width: 100%; }
.fcs-storefront-card .fcs-price-card-body { padding: 1.5rem; }
.fcs-storefront-card p { line-height: 1.65; }
.fcs-storefront-platforms { color: var(--rz-text-secondary-color); font-size: .9rem; margin-top: 1.5rem; }
.fcs-storefront-purchase { max-width: 34rem; margin-inline: auto; }
.fcs-storefront-purchase-status { display: block; text-align: center; margin-top: .75rem; }