.docs-line-height-normal {
    line-height: normal
}

.docs-no-text-transform {
    text-transform: none
}

.docs-gray-bg {
    background-color: var(--mud-palette-background-grey)
}

.mud-button-gradient-primary {
    position: relative;
    background-image: linear-gradient(82deg, rgb(89, 74, 226) 0%, rgb(116, 103, 239) 100%, rgb(89, 74, 226) 200%)
}

    .mud-button-gradient-primary:hover {
        box-shadow: .3px .5px .4px rgba(57,43,166,.62),.3px .6px .5px -0.7px rgba(57,43,166,.54),.8px 1.6px 1.3px -1.4px rgba(57,43,166,.46),2px 4.1px 3.4px -2.1px rgba(57,43,166,.38),4.5px 9px 7.5px -2.9px rgba(57,43,166,.31),8.5px 17.1px 14.3px -3.6px rgba(57,43,166,.23),14.6px 29.2px 24.5px -4.3px rgba(57,43,166,.15),23px 46px 38.6px -5px rgba(57,43,166,.08)
    }

.docs-appbar-special-menu .mud-list-item {
    border-radius: 6px;
    margin: 4px 0
}

.docs-appbar-special-menu .mud-list-subheader {
    font-family: "Public Sans","Roboto","Arial","sans-serif";
    font-weight: 700;
    font-size: 1rem;
    color: #8898aa
}

.docs-appbar-special-menu .mud-typography-body1 {
    font-family: "Public Sans","Roboto","Arial","sans-serif";
    font-weight: 600
}

.docs-appbar-special-menu .mud-typography-body2 {
    font-family: "Public Sans","Roboto","Arial","sans-serif";
    font-weight: 600;
    color: #8898aa
}

.docs-layout-menu-shadow {
    box-shadow: 0 30px 60px rgba(0,0,0,.12) !important
}

.docs-search-bar .mud-input {
    height: 42px
}

.docs-search-bar.mud-input-control {
    background-color: var(--mud-palette-grey-light);
    margin-bottom: 5px;
    height: 42px;
    border-radius: var(--mud-default-borderradius)
}

.docs-search-bar .mud-input.mud-input-outlined .mud-input-outlined-border {
    border: none;
    border-radius: var(--mud-default-borderradius)
}

.docs-logo-filter {
    filter: grayscale(1) opacity(0.05)
}

.docs-css-utility-header {
    margin-top: 8px;
    font-weight: 500;
    font-size: .875rem;
    color: var(--mud-palette-action-default);
    padding-left: 34px;
    margin-bottom: 2px
}

.docs-class-table table {
    table-layout: fixed;
    position: relative;
    width: 100%
}

.docs-class-table td {
    font-family: Consolas,"Liberation Mono",Menlo,Courier,monospace;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    user-select: all
}

.docs-class-table tbody tr th {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
    position: sticky;
    z-index: 2;
    top: 37px
}

.docs-class-table td:first-child, .docs-class-table th:first-child {
    padding-left: 0 !important
}

.docs-class-table td:last-child, .docs-class-table th:last-child {
    padding-right: 0 !important
}

.docs-class-table.utility-table {
    max-height: 300px;
    overflow: auto
}

    .docs-class-table.utility-table tbody tr td {
        font-weight: 600
    }

        .docs-class-table.utility-table tbody tr td:nth-child(1) {
            color: var(--mud-palette-primary)
        }

        .docs-class-table.utility-table tbody tr td:nth-child(2) {
            color: var(--mud-palette-secondary)
        }

.docs-class-table.default-theme {
    height: 400px
}

    .docs-class-table.default-theme td:nth-child(1), .docs-class-table.default-theme th:nth-child(1) {
        width: 20%
    }

    .docs-class-table.default-theme td:nth-child(2), .docs-class-table.default-theme th:nth-child(2) {
        width: 10%
    }

    .docs-class-table.default-theme td:nth-child(3), .docs-class-table.default-theme th:nth-child(3) {
        width: 25%
    }

    .docs-class-table.default-theme td:nth-child(4), .docs-class-table.default-theme th:nth-child(4) {
        width: 25%
    }

    .docs-class-table.default-theme td:nth-child(5), .docs-class-table.default-theme th:nth-child(5) {
        width: 20%
    }

#carbonads * {
    margin: initial;
    padding: initial
}

#carbonads {
    margin: 16px;
    padding: 16px;
    z-index: 100;
    max-width: 176px;
    margin-right: auto;
    animation: mud-animation-fadein ease .15s;
    border-radius: var(--mud-default-borderradius);
    background-color: var(--mud-palette-background-grey);
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",Helvetica,Arial,sans-serif
}

#carbonads_1 {
    display: none
}

#carbonads a {
    color: inherit;
    text-decoration: none
}

    #carbonads a:hover {
        color: inherit
    }

#carbonads span {
    position: relative;
    display: block;
    overflow: hidden
}

#carbonads .carbon-wrap {
    display: flex;
    flex-direction: column
}

#carbonads .carbon-img {
    display: block;
    line-height: 1;
    margin-bottom: .5rem
}

    #carbonads .carbon-img img {
        display: block;
        width: 100%;
        max-width: 160px !important;
        height: auto;
        border-radius: var(--mud-default-borderradius)
    }

#carbonads .carbon-text {
    display: block;
    flex: 1 1 0%;
    font-size: .875rem;
    line-height: 1.625;
    margin: 0;
    text-align: left;
    width: 100%
}

    #carbonads .carbon-text:hover {
        color: #000
    }

#carbonads .carbon-poweredby {
    display: block;
    font-size: .75rem;
    line-height: 1rem;
    margin-left: .5rem;
    padding-top: .5rem;
    text-align: right
}

.mud-codeblock {
    height: 100%;
    padding: 24px;
    overflow: auto
}

    .mud-codeblock pre {
        height: 100%;
        color: var(--mud-palette-text-primary);
        padding: 0;
        font-size: 1em;
        font-family: Consolas,"Liberation Mono",Menlo,Courier,monospace;
        -webkit-font-smoothing: subpixel-antialiased;
        direction: ltr
    }

    .mud-codeblock .html + .csharp {
        margin-top: 23px
    }

    .mud-codeblock .html mark, .mud-codeblock .codearea mark {
        font-weight: 600;
        color: var(--mud-palette-primary);
        background-color: var(--mud-palette-action-default-hover);
        border-radius: 2px;
        padding: 1px 3px;
        margin: 0 0 0 2px;
        user-select: all
    }

    .mud-codeblock .html .htmlTagDelimiter, .mud-codeblock .codearea .htmlTagDelimiter {
        color: #979797
    }

    .mud-codeblock .html .htmlElementName, .mud-codeblock .codearea .htmlElementName {
        color: var(--mud-palette-primary);
        font-weight: 600
    }

    .mud-codeblock .html .htmlAttributeName, .mud-codeblock .codearea .htmlAttributeName {
        color: #8323d8
    }

    .mud-codeblock .html .htmlOperator, .mud-codeblock .html .quot, .mud-codeblock .codearea .htmlOperator, .mud-codeblock .codearea .quot {
        color: #737373
    }

    .mud-codeblock .html .htmlAttributeValue, .mud-codeblock .codearea .htmlAttributeValue {
        color: #ff4081
    }

    .mud-codeblock .html .htmlLink, .mud-codeblock .codearea .htmlLink {
        color: #ff4081;
        text-decoration: underline
    }

    .mud-codeblock .html .enum, .mud-codeblock .codearea .enum {
        color: #00c853;
        background-color: var(--mud-palette-grey-light)
    }

    .mud-codeblock .html .enumValue, .mud-codeblock .html .sharpVariable, .mud-codeblock .codearea .enumValue, .mud-codeblock .codearea .sharpVariable {
        color: var(--mud-palette-text-primary);
        background-color: var(--mud-palette-grey-light)
    }

    .mud-codeblock .html .keyword, .mud-codeblock .codearea .keyword {
        color: #2196f3;
        background-color: var(--mud-palette-grey-light)
    }

    .mud-codeblock .html .atSign, .mud-codeblock .codearea .atSign {
        color: var(--mud-palette-text-primary);
        background-color: var(--mud-palette-grey-light)
    }

    .mud-codeblock .html .comment, .mud-codeblock .codearea .comment {
        color: #57a64a
    }

    .mud-codeblock .csharp .atSign {
        color: var(--mud-palette-text-primary);
        background-color: var(--mud-palette-grey-light)
    }

    .mud-codeblock .csharp .keyword {
        color: var(--mud-palette-primary)
    }

    .mud-codeblock .csharp .string {
        color: #e68c32
    }

    .mud-codeblock .csharp .function {
        color: #ff9800
    }

    .mud-codeblock .csharp .class {
        color: #1ec8a5
    }

    .mud-codeblock .csharp .localVar {
        color: #2196f3
    }

    .mud-codeblock .csharp .interface {
        color: #ff4081
    }

    .mud-codeblock .csharp .number {
        color: #b0d7a3
    }

    .mud-codeblock .csharp .enum {
        color: #b4eb8f
    }

    .mud-codeblock .csharp .comment {
        color: #57a64a
    }

.mud-landingpage-editor .html .htmlTagDelimiter, .mud-landingpage-editor .codearea .htmlTagDelimiter {
    color: #979797
}

.mud-landingpage-editor .html .htmlElementName, .mud-landingpage-editor .codearea .htmlElementName {
    color: #988ef1
}

.mud-landingpage-editor .html .htmlAttributeName, .mud-landingpage-editor .codearea .htmlAttributeName {
    color: #27b5b5
}

.mud-landingpage-editor .html .htmlOperator, .mud-landingpage-editor .html .quot, .mud-landingpage-editor .codearea .htmlOperator, .mud-landingpage-editor .codearea .quot {
    color: #c8c8c8
}

.mud-landingpage-editor .html .htmlAttributeValue, .mud-landingpage-editor .codearea .htmlAttributeValue {
    color: #ededed
}

.mud-landingpage-editor .html .htmlLink, .mud-landingpage-editor .codearea .htmlLink {
    color: #61afef;
    text-decoration: underline
}

.mud-landingpage-editor .html .enum, .mud-landingpage-editor .codearea .enum {
    color: #b4eb8f;
    background-color: rgba(255,255,255,.15)
}

.mud-landingpage-editor .html .enumValue, .mud-landingpage-editor .html .sharpVariable, .mud-landingpage-editor .codearea .enumValue, .mud-landingpage-editor .codearea .sharpVariable {
    color: #ededed;
    background-color: rgba(255,255,255,.15)
}

.mud-landingpage-editor .html .keyword, .mud-landingpage-editor .codearea .keyword {
    color: #61afef;
    background-color: rgba(255,255,255,.15)
}

.mud-landingpage-editor .html .atSign, .mud-landingpage-editor .codearea .atSign {
    color: #000;
    background-color: #d2d295
}

.mud-landingpage-editor .html .comment, .mud-landingpage-editor .codearea .comment {
    color: #57a64a
}

.mud-landingpage-editor .csharp .atSign {
    color: #000;
    background-color: #d2d295
}

.mud-landingpage-editor .csharp .keyword {
    color: #569cd6
}

.mud-landingpage-editor .csharp .string {
    color: #d69d85
}

.mud-landingpage-editor .csharp .function {
    color: #dcdcaa
}

.mud-landingpage-editor .csharp .class {
    color: #4ec9b0
}

.mud-landingpage-editor .csharp .localVar {
    color: #9cdcfe
}

.mud-landingpage-editor .csharp .interface {
    color: #b0d7a3
}

.mud-landingpage-editor .csharp .number {
    color: #b0d7a3
}

.mud-landingpage-editor .csharp .enum {
    color: #b4eb8f
}

.mud-landingpage-editor .csharp .comment {
    color: #57a64a
}

.docs-title {
    font-family: "Public Sans","Roboto","Arial","sans-serif";
    font-weight: 600;
    font-size: 3.75rem
}

.docs-title-description {
    font-family: "Public Sans","Roboto","Arial","sans-serif";
    font-weight: 500;
    line-height: 1.75;
    font-size: 1.1rem;
    margin: 0 4px
}

@media(max-width: 600px) {
    .docs-title {
        font-size: 2.5rem
    }

    .docs-title-description {
        font-size: .875rem
    }
}

.docs-sticky-info {
    position: sticky;
    top: 128px
}

    .docs-sticky-info.explore-text .mud-typography-h5 {
        font-weight: 500
    }

.docs-appbar {
    z-index: calc(var(--mud-zindex-appbar) + 1)
}

.docs-appbar-filter {
    backdrop-filter: blur(12px);
    z-index: calc(var(--mud-zindex-appbar) + 1)
}

.docs-appbar .mud-autocomplete, .docs-menu-list .mud-autocomplete {
    max-width: 360px
}

.docs-appbar .mud-button, .docs-menu-list .mud-button {
    font-family: "Public Sans","Roboto","Arial","sans-serif";
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.75;
    letter-spacing: .02857em;
    text-transform: none
}

.mudblazor-docs .docs-single-link .mud-nav-link, .mudblazor-landingpage .docs-single-link .mud-nav-link {
    font-weight: 500 !important
}

.landing-appbar {
    position: absolute !important
}

.docs-mudblazor-logo {
    width: 40px
}

.docs-brand-text {
    letter-spacing: .2rem;
    font-weight: 400;
    font-family: "Roboto";
    margin-inline-start: 12px;
    font-size: 24px;
    user-select: none
}

.docs-text-dec {
    text-decoration: underline dotted var(--mud-palette-primary)
}

.docs-footer .mud-link {
    margin: 8px 0;
    cursor: pointer;
    transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms
}

.docs-mobile-dialog-search {
    height: 400px
}

.docs-mobile-dialog-search-popover {
    box-shadow: none !important;
    margin-top: 8px;
    background-color: var(--mud-palette-background-grey)
}

    .docs-mobile-dialog-search-popover .mud-list {
        background-color: var(--mud-palette-background-grey)
    }

        .docs-mobile-dialog-search-popover .mud-list .mud-list-item {
            background-color: var(--mud-palette-surface);
            margin: 6px 0;
            border-radius: 4px
        }

            .docs-mobile-dialog-search-popover .mud-list .mud-list-item .mud-typography-body2 {
                font-size: 12px;
                font-weight: 500;
                color: var(--mud-palette-text-secondary)
            }

            .docs-mobile-dialog-search-popover .mud-list .mud-list-item:hover {
                color: var(--mud-palette-primary-text);
                background-color: var(--mud-palette-primary)
            }

                .docs-mobile-dialog-search-popover .mud-list .mud-list-item:hover .mud-typography-body2 {
                    color: var(--mud-palette-primary-text)
                }

@media(max-width: 960px) {
    :root {
        --mud-drawer-width-left: 300px !important
    }
}

.wf-layout {
    overflow: hidden;
    display: flex;
    height: 200px;
    width: 350px;
    position: relative;
    background-color: var(--mud-palette-background);
    border: 1px solid rgba(89,74,226,.15);
    transform: rotate3d(0.5, -0.866, 0, 15deg) rotate(1deg);
    box-shadow: 2em 4em 6em -2em rgba(0,0,0,.2),1em 2em 3.5em -2.5em rgba(0,0,0,.1);
    transition: transform .4s ease,box-shadow .4s ease
}

    .wf-layout:hover {
        cursor: pointer;
        transform: rotate3d(0, 0, 0, 0deg) rotate(0deg)
    }

.wf-appbar {
    height: 28px;
    width: 100%;
    display: flex;
    padding: 8px;
    flex-shrink: 0;
    position: absolute;
    color: var(--mud-palette-primary-text);
    background-color: var(--mud-palette-primary)
}

    .wf-appbar.wf-drawer-open-left {
        margin-left: 70px;
        width: calc(100% - 70px)
    }

    .wf-appbar.wf-drawer-open-right {
        margin-right: 70px;
        width: calc(100% - 70px)
    }

.wf-drawer {
    height: 100%;
    width: 70px;
    display: flex;
    flex-shrink: 0;
    flex: 0 0 auto;
    flex-direction: column;
    color: var(--mud-palette-drawer-text);
    background-color: var(--mud-palette-drawer-background)
}

.wf-content {
    flex: 1 1 auto;
    overflow: auto;
    padding: 38px 8px 0px
}

.docs-section-wireframe {
    position: relative;
    height: calc(80vh - 124px);
    overflow: hidden
}

    .docs-section-wireframe .wireframe-code-container {
        overflow: auto;
        position: relative;
        height: 100%
    }

    .docs-section-wireframe .close-button {
        position: absolute;
        top: 8px;
        right: 8px;
        z-index: 1
    }

    .docs-section-wireframe .copy-code-button {
        display: none
    }

@property --rotate {
    syntax: "<angle>";
    initial-value: 132deg;
    inherits: false
}

:root {
    --section-diff: calc(calc(calc(100vw - 16px) * 0.106) + calc(128 * 1px) - 0.106 * calc(calc(100vw - 15px)/2 - 1080px / 2));
    --mobile-scale-value: 0.6;
    --browser-scaler-value: 0.8
}

.mudblazor-landingpage-scaled-menu {
    transform: scale(0.7);
    transform-origin: 0 0;
    box-shadow: 0 13px 27px -5px rgba(50,50,93,.25),0 8px 16px -8px rgba(0,0,0,.3) !important
}

.lp-sponsor {
    transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms
}

    .lp-sponsor:hover {
        filter: brightness(0.9) drop-shadow(10px 10px 0.75rem rgba(0, 0, 0, 0.2))
    }

.mudblazor-landingpage {
    overflow: hidden
}

    .mudblazor-landingpage::before {
        content: "";
        width: 100%;
        height: 20vw;
        min-height: 200px;
        background-color: var(--mud-palette-background-grey);
        top: 0;
        left: 0;
        position: absolute;
        display: inline-block
    }

    .mudblazor-landingpage::after {
        content: "";
        width: 100%;
        height: 100%;
        min-height: 200px;
        max-height: 384px;
        background-color: var(--mud-palette-background-grey);
        bottom: 0;
        left: 0;
        position: absolute;
        display: inline-block
    }

    .mudblazor-landingpage .lp-graphic-container {
        width: 100%;
        height: 100%
    }

        .mudblazor-landingpage .lp-graphic-container .lp-graphic-app-wrapper {
            position: absolute
        }

    .mudblazor-landingpage .lp-mini-app {
        width: 100%;
        height: 100%;
        background-color: var(--mud-palette-background)
    }

        .mudblazor-landingpage .lp-mini-app .mini-drawer {
            height: 100%;
            z-index: 2;
            background-color: var(--mud-palette-background);
            border-right: 1px solid var(--mud-palette-divider);
            overflow: hidden;
            transition: width ease-in .1s
        }

        .mudblazor-landingpage .lp-mini-app .mini-fake-nav .mud-list-item-icon {
            color: var(--mud-palette-action-default);
            min-width: 36px
        }

        .mudblazor-landingpage .lp-mini-app .mini-fake-nav .mud-selected-item {
            border-right: 1px solid var(--mud-palette-primary)
        }

            .mudblazor-landingpage .lp-mini-app .mini-fake-nav .mud-selected-item .mud-list-item-icon {
                color: var(--mud-palette-primary)
            }

    .mudblazor-landingpage .lp-app-grid {
        display: grid;
        gap: 24px;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))
    }

        .mudblazor-landingpage .lp-app-grid + .lp-app-grid {
            margin-top: 24px
        }

    .mudblazor-landingpage .lp-device {
        overflow: hidden;
        position: absolute;
        outline: var(--mud-palette-divider) solid 1px;
        box-shadow: inset 0 1px 1px 0 rgba(255,255,255,.1),0 50px 100px -20px rgba(50,50,93,.25),0 30px 60px -30px rgba(0,0,0,.3);
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 100%)
    }

@supports(-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px)) {
    .mudblazor-landingpage .lp-device {
        background: rgba(255,255,255,.2);
        backdrop-filter: blur(5px)
    }
}

.mudblazor-landingpage .lp-device .lp-device-screen {
    position: relative;
    height: 100%;
    width: 100%
}

.mudblazor-landingpage .lp-device.phone {
    top: 128px;
    left: 128px;
    width: 320.5px;
    height: 636px;
    padding: 14px;
    border-radius: 46px
}

    .mudblazor-landingpage .lp-device.phone .lp-device-toolbar {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-between;
        padding: 0 24px 0 24px
    }

        .mudblazor-landingpage .lp-device.phone .lp-device-toolbar .lp-time, .mudblazor-landingpage .lp-device.phone .lp-device-toolbar .lp-device-info {
            width: 30%
        }

        .mudblazor-landingpage .lp-device.phone .lp-device-toolbar .lp-phone-notch {
            position: absolute;
            width: 100%;
            height: auto;
            left: 0;
            fill: var(--mud-palette-background);
            z-index: -1
        }

    .mudblazor-landingpage .lp-device.phone .lp-device-screen {
        border-radius: 36px
    }

    .mudblazor-landingpage .lp-device.phone .lp-app-scale {
        position: absolute;
        transform-origin: 0 0;
        transform: scale(var(--mobile-scale-value));
        width: calc(100%/var(--mobile-scale-value));
        height: calc(100%/var(--mobile-scale-value));
        top: 0;
        left: 0
    }

    .mudblazor-landingpage .lp-device.phone .lp-mini-app {
        height: calc(100% - 50px);
        border-radius: 0 0 60px 60px
    }

        .mudblazor-landingpage .lp-device.phone .lp-mini-app .mini-drawer {
            top: 42px;
            height: calc(100% - 60px);
            border-top-left-radius: 60px;
            border-bottom-left-radius: 60px;
            padding: 0 !important;
            padding-top: 24px !important
        }

        .mudblazor-landingpage .lp-device.phone .lp-mini-app .phone-to-home {
            position: absolute;
            width: 100%;
            bottom: 24px
        }

.mudblazor-landingpage .lp-device.browser {
    top: -96px;
    left: 240px;
    width: 1304px;
    height: 744px;
    padding: 12px;
    border-radius: 12px
}

    .mudblazor-landingpage .lp-device.browser .lp-device-toolbar {
        display: flex;
        padding-bottom: 8px
    }

        .mudblazor-landingpage .lp-device.browser .lp-device-toolbar .lp-device-toolbar-button {
            width: 8px;
            height: 8px;
            margin-right: 4px;
            background-color: #fff;
            border-radius: 100%
        }

    .mudblazor-landingpage .lp-device.browser .lp-device-screen {
        border-radius: 8px
    }

    .mudblazor-landingpage .lp-device.browser .lp-app-scale {
        position: absolute;
        transform-origin: 0 0;
        transform: scale(var(--browser-scaler-value));
        width: calc(100%/var(--browser-scaler-value));
        height: calc(100%/var(--browser-scaler-value) - 18px);
        top: 0;
        left: 0
    }

    .mudblazor-landingpage .lp-device.browser .lp-mini-app {
        border-radius: 8px
    }

        .mudblazor-landingpage .lp-device.browser .lp-mini-app .mini-drawer {
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px
        }

.mudblazor-landingpage .lp-effect {
    content: "";
    position: absolute
}

    .mudblazor-landingpage .lp-effect.browser-shadow {
        top: -96px;
        left: 240px;
        width: 1304px;
        height: 744px;
        border-radius: 12px;
        animation: spin 10s reverse infinite;
        background-image: linear-gradient(var(--rotate), rgba(89, 74, 226, 0.5), rgba(255, 64, 129, 0.5) 43%, rgba(116, 103, 239, 0.5))
    }

@supports(-moz-appearance: none) {
    .mudblazor-landingpage .lp-effect.browser-shadow {
        background-image: linear-gradient(132deg, rgba(89, 74, 226, 0.5), rgba(255, 64, 129, 0.5) 43%, rgba(116, 103, 239, 0.5))
    }
}

.mudblazor-landingpage .lp-effect.phone-shadow {
    top: 128px;
    left: 128px;
    width: 320.5px;
    height: 636px;
    border-radius: 46px;
    animation: spin 20s linear infinite;
    background-image: linear-gradient(var(--rotate), rgba(100, 100, 100, 0.5), rgba(255, 255, 255, 0.5) 43%, rgba(100, 100, 100, 0.5))
}

@supports(-moz-appearance: none) {
    .mudblazor-landingpage .lp-effect.phone-shadow {
        background-image: linear-gradient(rgba(100, 100, 100, 0.5), rgba(255, 255, 255, 0.5) 43%, rgba(100, 100, 100, 0.5))
    }
}

.mudblazor-landingpage .lp-grid {
    display: grid;
    row-gap: 32px;
    column-gap: 16px;
    align-items: flex-start
}

    .mudblazor-landingpage .lp-grid .lp-grid-item {
        display: grid;
        row-gap: 24px
    }

        .mudblazor-landingpage .lp-grid .lp-grid-item.main-description {
            padding-right: 116px
        }

@media(min-width: 960px) {
    .mudblazor-landingpage .lp-grid {
        grid-template-columns: 2fr repeat(2, 1fr)
    }
}

.mudblazor-landingpage .mud-link {
    margin: 8px 0px;
    color: var(--mud-palette-grey-default);
    cursor: pointer;
    transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms
}

    .mudblazor-landingpage .mud-link:hover {
        color: var(--mud-palette-grey-light)
    }

.mudblazor-landingpage .lp-border-title {
    position: relative
}

    .mudblazor-landingpage .lp-border-title::before {
        position: absolute;
        top: 6px;
        left: -16px;
        width: 1px;
        height: 16px;
        background-color: var(--mud-palette-primary, transparent);
        content: ""
    }

.mudblazor-landingpage .landing-border-left {
    border-left: 1px solid var(--mud-palette-primary)
}

.mudblazor-landingpage .mud-tabs-toolbar-transparent {
    background-color: rgba(0,0,0,0)
}

    .mudblazor-landingpage .mud-tabs-toolbar-transparent .mud-tab {
        min-width: auto;
        min-height: unset;
        padding: 3px 12px;
        text-transform: none;
        border-radius: 9999px;
        color: var(--mud-palette-text-secondary)
    }

        .mudblazor-landingpage .mud-tabs-toolbar-transparent .mud-tab.mud-tab-active {
            color: var(--mud-palette-primary-text);
            transition: color .2s ease-in-out
        }

        .mudblazor-landingpage .mud-tabs-toolbar-transparent .mud-tab:hover {
            color: var(--mud-palette-text-primary);
            background-color: rgba(0,0,0,0)
        }

    .mudblazor-landingpage .mud-tabs-toolbar-transparent .mud-tab-slider.mud-tab-slider-horizontal {
        height: 100%;
        border-radius: 9999px;
        z-index: -1
    }

.mudblazor-landingpage .landing-h1-gradient {
    background: linear-gradient(82deg, rgb(89, 74, 226) 0%, rgb(255, 102, 153) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0,0,0,0)
}

.mudblazor-landingpage .mud-landingpage-section {
    position: relative
}

    .mudblazor-landingpage .mud-landingpage-section .stripe {
        width: 100%;
        height: 200px
    }

        .mudblazor-landingpage .mud-landingpage-section .stripe.gradient {
            background: linear-gradient(82deg, rgb(89, 74, 226) 0%, rgb(116, 103, 239) 100%)
        }

        .mudblazor-landingpage .mud-landingpage-section .stripe.surface {
            background-color: var(--mud-palette-surface)
        }

        .mudblazor-landingpage .mud-landingpage-section .stripe.background {
            background-color: var(--mud-palette-background)
        }

        .mudblazor-landingpage .mud-landingpage-section .stripe.sweet {
            background-color: var(--mud-palette-background-grey)
        }

    .mudblazor-landingpage .mud-landingpage-section section {
        position: relative
    }

    .mudblazor-landingpage .mud-landingpage-section .section-background-container {
        position: absolute;
        width: 100%;
        height: 100%
    }

        .mudblazor-landingpage .mud-landingpage-section .section-background-container .section-background {
            position: relative;
            height: 100%;
            width: 100%;
            overflow: hidden
        }

            .mudblazor-landingpage .mud-landingpage-section .section-background-container .section-background.straight-end {
                top: -50%;
                height: 50%
            }

            .mudblazor-landingpage .mud-landingpage-section .section-background-container .section-background.straight {
                height: calc(100% + var(--section-diff))
            }

            .mudblazor-landingpage .mud-landingpage-section .section-background-container .section-background.skew {
                transform: skewY(-12deg)
            }

            .mudblazor-landingpage .mud-landingpage-section .section-background-container .section-background.sweet {
                background-color: var(--mud-palette-background-grey)
            }

            .mudblazor-landingpage .mud-landingpage-section .section-background-container .section-background.background {
                background-color: var(--mud-palette-background)
            }

            .mudblazor-landingpage .mud-landingpage-section .section-background-container .section-background.surface {
                background-color: var(--mud-palette-surface)
            }

    .mudblazor-landingpage .mud-landingpage-section .section-container {
        z-index: 1;
        position: relative
    }

        .mudblazor-landingpage .mud-landingpage-section .section-container.padding-straight {
            padding: 128px 0px
        }

        .mudblazor-landingpage .mud-landingpage-section .section-container.padding-skew {
            padding: var(--section-diff) 0px
        }

.mudblazor-landingpage .top-section .section-container {
    padding-top: calc(var(--section-diff)/1.5) !important;
    padding-bottom: calc(var(--section-diff)*1.5) !important
}

@media(max-width: 600px) {
    .mudblazor-landingpage .top-section h1 {
        font-size: 2.5rem
    }

    .mudblazor-landingpage .top-section h6 {
        font-size: .875rem
    }
}

.mudblazor-landingpage .top-section .graphic-wrapper {
    position: absolute;
    top: 0;
    right: 0
}

.mudblazor-landingpage .code-animation-container {
    height: 667px
}

.mudblazor-landingpage .mud-landingpage-editor {
    position: relative;
    color: #ededed;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(89,74,226,.35);
    border-radius: 8px;
    background-color: var(--mud-palette-dark-lighten);
    z-index: -1
}

    .mudblazor-landingpage .mud-landingpage-editor pre {
        font-family: SourceCodePro,Consolas,"Liberation Mono",Menlo,Courier,monospace;
        font-weight: 500;
        font-size: 14px;
        -webkit-font-smoothing: subpixel-antialiased
    }

    .mudblazor-landingpage .mud-landingpage-editor .linenumber {
        color: rgba(152,142,241,.4)
    }

    .mudblazor-landingpage .mud-landingpage-editor .codearea {
        min-width: 100px;
        max-width: 720px;
        overflow: hidden;
        display: inline-block
    }

        .mudblazor-landingpage .mud-landingpage-editor .codearea .htmlTagDelimiter {
            display: inline-flex
        }

    .mudblazor-landingpage .mud-landingpage-editor .absolute {
        top: 0px;
        right: 0px;
        height: 100%;
        width: 42px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(26, 22, 67, 0.5) 100%)
    }

.mudblazor-landingpage .landing-link {
    display: flex;
    align-items: center;
    font-weight: 700;
    width: max-content;
    font-size: .875rem;
    color: #5e5bf0;
    text-decoration: none;
    transform: perspective(1px) translateZ(0);
    transition: all .3s;
    transition-duration: .3s
}

    .mudblazor-landingpage .landing-link .mud-icon-root {
        transform: translateZ(0)
    }

    .mudblazor-landingpage .landing-link:hover {
        color: #ff4081 !important;
        text-decoration: none
    }

        .mudblazor-landingpage .landing-link:hover .mud-icon-root {
            animation-name: lp-icon-wobble;
            animation-duration: 1s;
            animation-timing-function: ease-in-out;
            animation-iteration-count: 1
        }

.mudblazor-landingpage .dark-section-text {
    color: var(--mud-palette-grey-lighter)
}

.mudblazor-landingpage .world-map {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    user-select: none
}

    .mudblazor-landingpage .world-map .world-map-wrapper {
        position: relative;
        width: 100%
    }

@media(min-width: 960px) {
    .mudblazor-landingpage .world-map svg {
        margin-top: -128px;
        margin-inline-end: -50%
    }
}

.mudblazor-landingpage .world-map circle {
    fill: #adbdcc
}

.mudblazor-landingpage .world-map #United_States circle, .mudblazor-landingpage .world-map #Germany circle, .mudblazor-landingpage .world-map #United_Kingdom circle, .mudblazor-landingpage .world-map #India circle, .mudblazor-landingpage .world-map #Italy circle, .mudblazor-landingpage .world-map #Netherlands circle, .mudblazor-landingpage .world-map #Australia circle, .mudblazor-landingpage .world-map #Brazil circle, .mudblazor-landingpage .world-map #Russia circle, .mudblazor-landingpage .world-map #Spain circle, .mudblazor-landingpage .world-map #South_Africa circle, .mudblazor-landingpage .world-map #Egypt circle, .mudblazor-landingpage .world-map #Sweden circle, .mudblazor-landingpage .world-map #Austria circle, .mudblazor-landingpage .world-map #Japan circle {
    fill: #5e5bf0
}

@media(max-width: 960px) {
    .mudblazor-landingpage .global-scale-item {
        padding-bottom: 128px
    }

    .mudblazor-landingpage .world-map {
        display: flex;
        align-items: end
    }

        .mudblazor-landingpage .world-map .world-map-wrapper {
            overflow: hidden
        }

            .mudblazor-landingpage .world-map .world-map-wrapper svg {
                margin-bottom: -128px
            }
}

@media(min-width: 960px) {
    .mudblazor-landingpage .world-map-item {
        position: relative
    }
}

@media(max-width: 600px) {
    .mudblazor-landingpage .global-scale-item {
        padding-bottom: 94px
    }

    .mudblazor-landingpage .world-map .world-map-wrapper {
        width: 120%;
        margin-left: -16px;
        margin-right: -16px
    }

        .mudblazor-landingpage .world-map .world-map-wrapper svg {
            margin-left: -128px;
            margin-right: -128px
        }
}

.mudblazor-landingpage .lp-testimonials {
    position: relative;
    max-height: 1200px;
    transition: max-height .15s ease-in-out
}

    .mudblazor-landingpage .lp-testimonials.hide-testimonials {
        max-height: 300px
    }

        .mudblazor-landingpage .lp-testimonials.hide-testimonials .lp-fader {
            position: absolute;
            bottom: -100%;
            width: 100%;
            height: 150%;
            background: linear-gradient(0deg, var(--mud-palette-background-grey) 0%, rgba(249, 250, 252, 0) 100%)
        }

@media(max-width: 600px) {
    .mudblazor-landingpage .lp-testimonials .mud-typography-h3 {
        font-size: 1.5rem
    }
}

.typed-code {
    display: table-caption;
    overflow: hidden;
    white-space: nowrap;
    border-right: .15em solid rgba(0,0,0,0);
    width: 0
}

    .typed-code.card-media {
        animation: typing 2s steps(20, end) forwards,blinking .8s 5
    }

    .typed-code.card-typo {
        animation: typing 2s steps(4, end) forwards,blinking .8s infinite;
        animation-delay: 4s
    }

.code-change-card .mud-card-media {
    animation-name: code-animate-card-media;
    animation-duration: .25s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-delay: 2.5s
}

.code-change-card .mud-typography-body1 {
    animation-name: code-animate-card-typo;
    animation-duration: .25s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-delay: 6.5s
}

@keyframes spin {
    0% {
        --rotate: 0deg
    }

    100% {
        --rotate: 360deg
    }
}

@keyframes code-animate-card-media {
    from {
        height: 0
    }

    to {
        height: 200px
    }
}

@keyframes code-animate-card-typo {
    to {
        font-size: var(--mud-typography-h5-size);
        font-family: var(--mud-typography-h5-family);
        font-weight: var(--mud-typography-h5-weight);
        line-height: var(--mud-typography-h5-lineheight);
        letter-spacing: var(--mud-typography-h5-letterspacing);
        text-transform: var(--mud-typography-h5-text-transform)
    }
}

@keyframes typing {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

@keyframes blinking {
    from {
        border-color: rgba(0,0,0,0)
    }

    to {
        border-color: #5e5bf0
    }
}

@keyframes lp-icon-wobble {
    16.65% {
        transform: translateX(6px)
    }

    33.3% {
        transform: translateX(-5px)
    }

    49.95% {
        transform: translateX(4px)
    }

    66.6% {
        transform: translateX(-2px)
    }

    83.25% {
        transform: translateX(1px)
    }

    100% {
        transform: translateX(0)
    }
}

.twitter {
    color: #1da1f2 !important
}

.discord {
    color: #7781ff !important
}

.github {
    color: var(--mud-palette-text-primary) !important
}

.stackoverflow {
    color: #f48024 !important
}

    .stackoverflow.mud-icon-root path:first-child {
        fill: #bcbbbb
    }

    .stackoverflow.mud-icon-root path:last-child {
        fill: #f48024
    }

[dir=rtl] .mudblazor-landingpage .top-section .graphic-wrapper {
    position: absolute;
    top: 0;
    right: unset;
    left: 0
}

    [dir=rtl] .mudblazor-landingpage .top-section .graphic-wrapper .lp-device.phone, [dir=rtl] .mudblazor-landingpage .top-section .graphic-wrapper .lp-effect.phone-shadow {
        top: 128px;
        left: unset;
        right: 128px
    }

    [dir=rtl] .mudblazor-landingpage .top-section .graphic-wrapper .lp-effect.browser-shadow, [dir=rtl] .mudblazor-landingpage .top-section .graphic-wrapper .lp-device.browser {
        top: -96px;
        left: unset;
        right: 240px
    }

[dir=rtl] .mudblazor-landingpage .mud-landingpage-section .section-background-container .section-background.skew {
    transform: skewY(12deg)
}

.docs-github-releases .mud-grid-item-md-4:first-child + .mud-grid-item-md-8 h5:first-child {
    border-top: none !important
}

.docs-github-releases .docs-github-release-body {
    padding-bottom: 24px
}

    .docs-github-releases .docs-github-release-body.old-releases {
        font-size: var(--mud-typography-body1-size);
        font-weight: var(--mud-typography-body1-weight)
    }

        .docs-github-releases .docs-github-release-body.old-releases h6 {
            margin-top: 24px
        }

    .docs-github-releases .docs-github-release-body h5:first-child {
        padding: 12px 0;
        margin-bottom: 24px;
        border-top: var(--mud-palette-lines-default) 1px solid;
        border-bottom: var(--mud-palette-lines-default) 1px solid;
        font-size: var(--mud-typography-h5-size);
        font-weight: var(--mud-typography-h5-weight)
    }

    .docs-github-releases .docs-github-release-body ul {
        list-style: disc;
        font-size: var(--mud-typography-body1-size)
    }

    .docs-github-releases .docs-github-release-body .github-user {
        font-weight: 700;
        color: var(--mud-palette-text-primary)
    }

.docs-roadmap-2022 {
    max-width: 740px;
    margin-left: auto;
    margin-right: auto
}

    .docs-roadmap-2022 img {
        max-width: 770px;
        width: 100%;
        height: auto
    }

.docs-roadmap-container {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}

    .docs-roadmap-container .roadmap-world {
        perspective: 661px;
        transform-style: preserve-3d;
        perspective-origin: top;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 64vh
    }

        .docs-roadmap-container .roadmap-world .roadmap-grid {
            display: grid;
            grid-template-columns: repeat(10, 1fr);
            grid-template-rows: repeat(10, 100px);
            border: 1px solid var(--mud-palette-secondary);
            transform: rotateX(100deg);
            max-width: 1280px;
            margin-left: auto;
            margin-right: auto
        }

            .docs-roadmap-container .roadmap-world .roadmap-grid .roadmap-grid-item {
                height: 100%;
                width: 100%;
                border: 1px solid var(--mud-palette-secondary)
            }

.explore-mudblazor-items {
    display: flex;
    flex-wrap: wrap;
    gap: 24px
}

.explore-card {
    transition: all .2s ease-in
}

    .explore-card:hover {
        background-color: var(--mud-palette-primary-hover);
        cursor: pointer
    }

.explore-card {
    height: 157px;
    width: 157px
}

@media(max-width: 600px) {
    .explore-card {
        height: 138px;
        width: 138px
    }

    .explore-mudblazor-items {
        justify-content: center
    }
}

.announcement-card {
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms
}

    .announcement-card:hover {
        background-color: var(--mud-palette-action-default-hover);
        cursor: pointer
    }

    .announcement-card .mud-card-content {
        min-height: 172px
    }

.announcment-container {
    font-family: "Public Sans","Roboto","Arial","sans-serif";
    font-weight: 600
}

.docs-page-content {
    min-height: calc(100vh - 600px)
}

.docs-page-content-navigation-drawer .title {
    font-weight: 500
}

.docs-page-content-navigation-drawer .navigation-level-0 .mud-nav-link-text {
    padding-inline-start: 0
}

.docs-page-content-navigation-drawer .navigation-level-1 .mud-nav-link-text {
    padding-inline-start: 14px
}

.docs-page-content-navigation-drawer .mode-links {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: 500;
    width: 100%;
    color: var(--mud-palette-text-secondary);
    background-color: var(--mud-palette-background-grey)
}

    .docs-page-content-navigation-drawer .mode-links.active {
        color: var(--mud-palette-primary);
        background-color: var(--mud-palette-primary-hover)
    }

.docs-code {
    display: inline-block;
    padding: 0 5px;
    direction: ltr;
    font-size: .85em;
    font-weight: 900;
    font-family: Consolas,"Liberation Mono",Menlo,Courier,monospace;
    line-height: 1.4;
    border-radius: 2px;
    -webkit-font-smoothing: subpixel-antialiased
}

    .docs-code.docs-code-primary {
        color: var(--mud-palette-primary);
        background-color: var(--mud-palette-primary-hover)
    }

    .docs-code.docs-code-secondary {
        color: var(--mud-palette-secondary);
        background-color: var(--mud-palette-secondary-hover)
    }

    .docs-code.docs-code-tertiary {
        color: var(--mud-palette-tertiary);
        background-color: var(--mud-palette-tertiary-hover)
    }

.docs-frame {
    height: 100%;
    width: 100%;
    position: relative;
    height: 400px
}

    .docs-frame .docs-frame-absolute {
        position: absolute;
        bottom: 0px;
        left: 0px;
        top: 0px;
        right: auto;
        width: 100%;
        height: 100%
    }

        .docs-frame .docs-frame-absolute .docs-frame-inner-wrapper {
            display: flex;
            height: 100%;
            overflow: auto;
            flex-direction: column
        }

.docs-page-section .docs-section-header .mud-typography-h5 {
    margin-top: 60px;
    margin-bottom: 20px
}

.docs-page-section .docs-section-header .mud-typography-h6 {
    margin-top: 32px;
    margin-bottom: 12px
}

.docs-page-section .docs-section-content {
    border-radius: 8px;
    background-color: var(--mud-palette-surface);
    transition: border-radius 250ms cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    position: relative
}

    .docs-page-section .docs-section-content .docs-section-content-toolbar {
        height: unset;
        padding: 0;
        border-radius: 8px 8px 0 0
    }

        .docs-page-section .docs-section-content .docs-section-content-toolbar .mud-button {
            text-transform: none;
            font-family: Consolas,"Liberation Mono",Menlo,Courier,monospace;
            font-size: 14px;
            border-radius: 0;
            padding: 4px 8px
        }

            .docs-page-section .docs-section-content .docs-section-content-toolbar .mud-button.file-button {
                border-color: var(--mud-palette-lines-default);
                letter-spacing: normal;
                margin-top: -1px
            }

                .docs-page-section .docs-section-content .docs-section-content-toolbar .mud-button.file-button:first-child {
                    border-top-left-radius: 8px
                }

            .docs-page-section .docs-section-content .docs-section-content-toolbar .mud-button:last-child:not(.file-button) {
                border-top-right-radius: 8px
            }

        .docs-page-section .docs-section-content .docs-section-content-toolbar.outlined .file-button:not(.active) {
            border: 1px solid var(--mud-palette-lines-default);
            border-top: none;
            border-radius: 0 0 4px 4px
        }

            .docs-page-section .docs-section-content .docs-section-content-toolbar.outlined .file-button:not(.active):first-child {
                border-top-left-radius: 8px;
                border-bottom-left-radius: 0px;
                border-left: none
            }

        .docs-page-section .docs-section-content .docs-section-content-toolbar.outlined .file-button.active {
            color: var(--mud-palette-primary)
        }

        .docs-page-section .docs-section-content .docs-section-content-toolbar.darken {
            background-color: var(--mud-palette-grey-light)
        }

            .docs-page-section .docs-section-content .docs-section-content-toolbar.darken .file-button.active {
                background-color: var(--mud-palette-background-grey)
            }

    .docs-page-section .docs-section-content .docs-section-content-inner > *:not(.mud-grid) {
        margin: 8px
    }

    .docs-page-section .docs-section-content.darken {
        background: linear-gradient(0deg, var(--mud-palette-grey-lighter) 0%, var(--mud-palette-background-grey) 50%)
    }

    .docs-page-section .docs-section-content.outlined {
        border: 1px solid var(--mud-palette-lines-default)
    }

    .docs-page-section .docs-section-content.show-code {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0
    }

        .docs-page-section .docs-section-content.show-code.outlined {
            border-bottom: none
        }

        .docs-page-section .docs-section-content.show-code + .docs-section-source {
            border-top-left-radius: 0;
            border-top-right-radius: 0
        }

            .docs-page-section .docs-section-content.show-code + .docs-section-source.outlined {
                border: 1px solid var(--mud-palette-lines-default)
            }

.docs-page-section .docs-section-source {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background-color: var(--mud-palette-background-grey);
    transition: border-radius 250ms cubic-bezier(0.4, 0, 0.2, 1)
}

    .docs-page-section .docs-section-source .copy-code-button {
        position: absolute;
        bottom: 8px;
        right: 8px;
        color: rgba(5,0,51,0);
        transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms
    }

    .docs-page-section .docs-section-source:hover .copy-code-button {
        color: var(--mud-palette-text-secondary) !important;
        background-color: rgba(0,0,0,0)
    }

    .docs-page-section .docs-section-source .docs-section-source-container {
        max-height: 0;
        overflow: hidden;
        transition: max-height .15s ease-out
    }

    .docs-page-section .docs-section-source.show-code .docs-section-source-container {
        overflow: auto;
        max-height: 500px;
        transition: max-height .25s ease-in
    }

        .docs-page-section .docs-section-source.show-code .docs-section-source-container::-webkit-scrollbar-thumb {
            border-bottom-right-radius: 0
        }

.docs-content-api .docs-section-content-inner {
    padding: 0 !important
}

@media(min-width: 600px) {
    .docs-content-api-cell:before {
        width: 30% !important;
        min-width: 30% !important
    }
}

@media(max-width: 599px) {
    .docs-content-api-description {
        flex-wrap: wrap
    }
}

.docs-content-api-description {
    overflow-wrap: anywhere;
    white-space: pre-line
}

.docs-section-wireframe {
    height: calc(80vh - 124px)
}

.docs-section-black {
    background-color: var(--mud-palette-black)
}

.docs-iframe {
    height: 400px;
    width: 100%;
    margin: 0 !important
}

.mud-icondrawer .mud-typography-subtitle1 {
    font-weight: 500
}

.mud-icondrawer .mud-typography-subtitle2 {
    margin-top: 16px;
    margin-bottom: 8px;
    font-size: 1rem
}

.mud-icondrawer .mud-paper {
    background-color: var(--mud-palette-background-grey)
}

.mud-icondrawer .mud-input-adornment {
    display: none
}

.mud-iconcode {
    font-size: 12px;
    overflow: hidden;
    user-select: all;
    letter-spacing: normal;
    font-family: Consolas,"Liberation Mono",Menlo,Courier,monospace;
    -webkit-font-smoothing: subpixel-antialiased
}

.docs-icon-panel {
    height: 128px;
    width: 100%;
    max-width: 112px;
    padding: 0px 6px;
    margin: 16px 12px;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
    border-radius: var(--mud-default-borderradius);
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none
}

    .docs-icon-panel:focus {
        outline: 2px solid var(--mud-palette-primary)
    }

    .docs-icon-panel:focus-visible {
        background-color: var(--mud-palette-action-default-hover);
        outline: none
    }

    .docs-icon-panel .mud-svg-icon {
        font-size: 40px;
        margin-top: 12px
    }

    .docs-icon-panel .mud-typography {
        margin-bottom: 4px;
        width: 100%;
        text-overflow: ellipsis;
        overflow: hidden
    }

    .docs-icon-panel:hover {
        cursor: pointer;
        background-color: var(--mud-palette-action-default-hover)
    }

.lp-calc-buttons {
    background-color: var(--mud-palette-background-grey);
    border-radius: 0 0 60px 60px
}

    .lp-calc-buttons button {
        font-weight: 600;
        font-size: 22px;
        height: 100%;
        width: 100%
    }

input.docs-width-slider {
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    display: block;
    width: 100%;
    background-color: rgba(0,0,0,0);
    cursor: pointer
}

    input.docs-width-slider:focus {
        outline: none
    }

    input.docs-width-slider::-webkit-slider-runnable-track {
        width: 100%;
        height: 0
    }

    input.docs-width-slider::-moz-range-track {
        width: 100%;
        height: 0
    }

    input.docs-width-slider::-webkit-slider-thumb {
        appearance: none;
        -webkit-appearance: none;
        border: none;
        border-radius: 2px;
        height: 64px;
        width: 10px;
        transition: box-shadow .2s;
        box-shadow: var(--mud-elevation-25)
    }

    input.docs-width-slider::-moz-range-thumb {
        appearance: none;
        -webkit-appearance: none;
        border: none;
        border-radius: 2px;
        height: 64px;
        width: 10px;
        transition: box-shadow .2s;
        box-shadow: var(--mud-elevation-25)
    }

    input.docs-width-slider::-webkit-slider-runnable-track {
        background-color: rgba(0,0,0,0)
    }

    input.docs-width-slider::-moz-range-track {
        background-color: rgba(0,0,0,0)
    }

    input.docs-width-slider::-webkit-slider-thumb {
        background-color: var(--mud-palette-surface)
    }

    input.docs-width-slider::-moz-range-thumb {
        background-color: var(--mud-palette-surface)
    }

    input.docs-width-slider::-webkit-slider-thumb:hover {
        cursor: col-resize
    }

    input.docs-width-slider::-moz-range-thumb:hover {
        cursor: col-resize
    }

.dhr-page-header {
    padding: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: 50%;
}

.dhr-min-vh-100 {
    min-height: 100vh !important;
}

.dhr-main-content {
    transition: all 0.2s ease-in-out;
}

.dhr-mt-0 {
    margin-top: 0 !important;
}

.dhr-div-center-screen {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
}

.dhr-mudmenuitem-disabled {
    cursor: default !important;
    pointer-events: none !important
}

.dhr-no-scroll {
    overflow: hidden;
}

.dwhr-app-page {
    min-height: calc(100vh - (var(--mud-appbar-height)));
}

.dwhr-mud-drawer-lg {
    border-right: 1px solid var(--mud-palette-divider);
    z-index: 2;
}

.dwhr-mudmenu-item-selected {
    color: var(--mud-palette-primary);
    background-color: var(--mud-palette-primary-hover);
}

.mud-drawer-close-mini-md-right .mud-main-content {
    margin-right: calc(var(--mud-drawer-width-mini-right) + 16px);
}

.mud-drawer-open-mini-md-right .mud-main-content {
    margin-right: calc(var(--mud-drawer-width-right) + 16px);
}

.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width: 359px) {
    .d-xxs-none {
        display: none !important;
    }

    .d-xxs-flex {
        display: flex !important;
    }

    .d-xxs-block {
        display: block !important;
    }

    .d-xxs-inline {
        display: inline !important;
    }

    .o-x-xxs-auto {
        overflow-x: auto !important;
        width: 100%;
    }
}

.linear-progress {
    background: transparent;
    width: 100vw; /* Full width */
    height: 1rem;
    border-radius: 0; /* Squared corners */
    overflow: hidden;
    position: relative;
    z-index: 100;
    margin-left: auto;
    margin-right: auto;
}

    .linear-progress:after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to right, rgba(123, 107, 251, 0.3), #7b6bfb); /* Light fade at start */
        scale: var(--blazor-load-percentage, 0%) 100%;
        transform-origin: left top;
        transition: scale ease-out 0.5s;
    }


/* ═══ Mobile fullscreen camera ═══ */

.camera-dialog-mobile .mud-dialog {
    margin: 0;
    max-height: 100dvh;
    max-width: 100%;
    width: 100%;
    height: 100dvh;
    border-radius: 0;
}

.camera-dialog-mobile .mud-dialog-title,
.camera-dialog-mobile .mud-dialog-actions {
    display: none !important;
}

.camera-dialog-mobile .mud-focus-trap-child-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.camera-content-mobile {
    padding: 0 !important;
    overflow: hidden !important;
    flex: 1;
    height: 100%;
    position: relative;
}

.camera-viewfinder-mobile {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #000;
}

    .camera-viewfinder-mobile .camera-media {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 0;
        z-index: 1;
    }

/* ═══ Desktop ═══ */

.camera-viewfinder {
    position: relative;
    width: 100%;
}

    .camera-viewfinder .camera-media {
        width: 100%;
        display: block;
        border-radius: 4px;
        object-fit: contain;
    }

/* ═══ Close button ═══ */

.camera-close-btn {
    position: absolute !important;
    top: calc(env(safe-area-inset-top, 12px) + 8px);
    right: 12px;
    z-index: 10;
    color: #fff !important;
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(4px);
    border-radius: 50%;
}

/* ═══ Bottom bar ═══ */

.camera-bottom-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 24px 16px calc(env(safe-area-inset-bottom, 16px) + 24px);
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
    z-index: 10;
}

/* ═══ Shutter button ═══ */

.shutter-ring {
    width: 72px;
    height: 72px;
    min-width: 72px;
    min-height: 72px;
    border-radius: 50%;
    border: 4px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.1s ease;
}

    .shutter-ring:active {
        transform: scale(0.92);
    }

.shutter-inner {
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
    border-radius: 50%;
    background: #fff;
    transition: background 0.15s ease;
}

.shutter-ring:active .shutter-inner {
    background: #e0e0e0;
}

/* ═══ FABs in captured state ═══ */

.camera-action-fab {
    backdrop-filter: blur(4px);
}

/* ═══ Torch button ═══ */
.camera-torch-btn {
    position: absolute !important;
    top: calc(env(safe-area-inset-top, 12px) + 8px);
    left: 12px;
    z-index: 10;
    color: #fff !important;
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(4px);
    border-radius: 50%;
}