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;
}

.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 */

.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-text-caption-color: var(--rz-on-base-darker);
    --rz-card-border: 1px solid var(--rz-base-800);
}

.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: 11px;
    line-height: 13px;
}

/* API Reference Sidebar */

.demos-sidebar .rz-treenode-label .rz-link {
    --rz-link-hover-text-decoration: none;
}

/* 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;
    }
}


@media (min-width: 576px) and (max-width: 768px) {
    .rz-learning-resources {
        flex-wrap: wrap;
        width: auto;
        
        .rz-card {
            border: 0 !important;
            min-width: 50%;
        }
    }
}

@media (min-width: 769px) and (max-width: 1279px) {
    .rz-learning-resources {
        width: 470px;
        flex-wrap: wrap;
        
        .rz-card {
            border: 0 !important;
            min-width: 50%;
        }
    }
}

@media (min-width: 1280px) {
    .rz-learning-resources {
        width: 800px;
    }
}

.rz-learn-title {
    display: block;
    --rz-text-caption-line-height: 1.4;
    padding-inline: var(--rz-menu-item-padding-inline);
    color: var(--rz-text-tertiary-color) !important;
}

#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."
}

.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%;
}

.code-editor {
    height: 500px; 
    width: 100%;
}


.playground .code-editor {
    height: 100%;
    width: 100%;
}

@media (max-width: 768px) {
    .rz-tabview-nav {
        flex-wrap: wrap;
    }
}