/*!
 * MudBlazor (https://mudblazor.com/)
 * Copyright (c) 2021 MudBlazor
 * Licensed under MIT (https://github.com/MudBlazor/MudBlazor/blob/master/LICENSE)
 */
.mud-primary {
    background-color: var(--mud-palette-primary) !important
}

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

.mud-primary-hover {
    background-color: var(--mud-palette-primary-hover) !important
}

@media(hover: hover)and (pointer: fine) {
    .hover\:mud-primary-hover:hover {
        background-color: var(--mud-palette-primary-hover) !important
    }
}

.hover\:mud-primary-hover:focus-visible, .hover\:mud-primary-hover:active {
    background-color: var(--mud-palette-primary-hover) !important
}

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

.mud-theme-primary {
    color: var(--mud-palette-primary-text) !important;
    background-color: var(--mud-palette-primary) !important
}

.mud-secondary {
    background-color: var(--mud-palette-secondary) !important
}

.mud-secondary-text {
    color: var(--mud-palette-secondary) !important;
    --mud-ripple-color: var(--mud-palette-secondary) !important
}

.mud-secondary-hover {
    background-color: var(--mud-palette-secondary-hover) !important
}

@media(hover: hover)and (pointer: fine) {
    .hover\:mud-secondary-hover:hover {
        background-color: var(--mud-palette-secondary-hover) !important
    }
}

.hover\:mud-secondary-hover:focus-visible, .hover\:mud-secondary-hover:active {
    background-color: var(--mud-palette-secondary-hover) !important
}

.mud-border-secondary {
    border-color: var(--mud-palette-secondary) !important
}

.mud-theme-secondary {
    color: var(--mud-palette-secondary-text) !important;
    background-color: var(--mud-palette-secondary) !important
}

.mud-tertiary {
    background-color: var(--mud-palette-tertiary) !important
}

.mud-tertiary-text {
    color: var(--mud-palette-tertiary) !important;
    --mud-ripple-color: var(--mud-palette-tertiary) !important
}

.mud-tertiary-hover {
    background-color: var(--mud-palette-tertiary-hover) !important
}

@media(hover: hover)and (pointer: fine) {
    .hover\:mud-tertiary-hover:hover {
        background-color: var(--mud-palette-tertiary-hover) !important
    }
}

.hover\:mud-tertiary-hover:focus-visible, .hover\:mud-tertiary-hover:active {
    background-color: var(--mud-palette-tertiary-hover) !important
}

.mud-border-tertiary {
    border-color: var(--mud-palette-tertiary) !important
}

.mud-theme-tertiary {
    color: var(--mud-palette-tertiary-text) !important;
    background-color: var(--mud-palette-tertiary) !important
}

.mud-info {
    background-color: var(--mud-palette-info) !important
}

.mud-info-text {
    color: var(--mud-palette-info) !important;
    --mud-ripple-color: var(--mud-palette-info) !important
}

.mud-info-hover {
    background-color: var(--mud-palette-info-hover) !important
}

@media(hover: hover)and (pointer: fine) {
    .hover\:mud-info-hover:hover {
        background-color: var(--mud-palette-info-hover) !important
    }
}

.hover\:mud-info-hover:focus-visible, .hover\:mud-info-hover:active {
    background-color: var(--mud-palette-info-hover) !important
}

.mud-border-info {
    border-color: var(--mud-palette-info) !important
}

.mud-theme-info {
    color: var(--mud-palette-info-text) !important;
    background-color: var(--mud-palette-info) !important
}

.mud-success {
    background-color: var(--mud-palette-success) !important
}

.mud-success-text {
    color: var(--mud-palette-success) !important;
    --mud-ripple-color: var(--mud-palette-success) !important
}

.mud-success-hover {
    background-color: var(--mud-palette-success-hover) !important
}

@media(hover: hover)and (pointer: fine) {
    .hover\:mud-success-hover:hover {
        background-color: var(--mud-palette-success-hover) !important
    }
}

.hover\:mud-success-hover:focus-visible, .hover\:mud-success-hover:active {
    background-color: var(--mud-palette-success-hover) !important
}

.mud-border-success {
    border-color: var(--mud-palette-success) !important
}

.mud-theme-success {
    color: var(--mud-palette-success-text) !important;
    background-color: var(--mud-palette-success) !important
}

.mud-warning {
    background-color: var(--primary-color) !important
}

.mud-warning-text {
    color: var(--primary-color) !important;
    --mud-ripple-color: var(--primary-color) !important
}

.mud-warning-hover {
    background-color: var(--mud-palette-warning-hover) !important
}

@media(hover: hover)and (pointer: fine) {
    .hover\:mud-warning-hover:hover {
        background-color: var(--mud-palette-warning-hover) !important
    }
}

.hover\:mud-warning-hover:focus-visible, .hover\:mud-warning-hover:active {
    background-color: var(--mud-palette-warning-hover) !important
}

.mud-border-warning {
    border-color: var(--primary-color) !important
}

.mud-theme-warning {
    color: var(--mud-palette-warning-text) !important;
    background-color: var(--primary-color) !important
}

.mud-error {
    background-color: var(--mud-palette-error) !important
}

.mud-error-text {
    color: var(--mud-palette-error) !important;
    --mud-ripple-color: var(--mud-palette-error) !important
}

.mud-error-hover {
    background-color: var(--mud-palette-error-hover) !important
}

@media(hover: hover)and (pointer: fine) {
    .hover\:mud-error-hover:hover {
        background-color: var(--mud-palette-error-hover) !important
    }
}

.hover\:mud-error-hover:focus-visible, .hover\:mud-error-hover:active {
    background-color: var(--mud-palette-error-hover) !important
}

.mud-border-error {
    border-color: var(--mud-palette-error) !important
}

.mud-theme-error {
    color: var(--mud-palette-error-text) !important;
    background-color: var(--mud-palette-error) !important
}

.mud-dark {
    background-color: var(--mud-palette-dark) !important
}

.mud-dark-text {
    color: var(--mud-palette-dark) !important;
    --mud-ripple-color: var(--mud-palette-dark) !important
}

.mud-dark-hover {
    background-color: var(--mud-palette-dark-hover) !important
}

@media(hover: hover)and (pointer: fine) {
    .hover\:mud-dark-hover:hover {
        background-color: var(--mud-palette-dark-hover) !important
    }
}

.hover\:mud-dark-hover:focus-visible, .hover\:mud-dark-hover:active {
    background-color: var(--mud-palette-dark-hover) !important
}

.mud-border-dark {
    border-color: var(--mud-palette-dark) !important
}

.mud-theme-dark {
    color: var(--mud-palette-dark-text) !important;
    background-color: var(--mud-palette-dark) !important
}

.mud-inherit-text {
    color: inherit !important
}

.mud-border-lines-default {
    border-color: var(--mud-palette-lines-default)
}

.mud-background {
    background-color: var(--mud-palette-background) !important
}

.mud-background-gray {
    background-color: var(--mud-palette-background-gray) !important
}

.mud-theme-transparent {
    color: inherit !important;
    background-color: rgba(0,0,0,0) !important
}

.mud-transparent {
    background-color: rgba(0,0,0,0) !important
}

.mud-transparent-text {
    color: rgba(0,0,0,0) !important
}

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

.mud-text-secondary {
    color: var(--mud-palette-text-secondary)
}

.mud-text-disabled {
    color: var(--mud-palette-text-disabled)
}

.mud-layout {
    height: 100%;
    width: 100%;
    position: relative
}

.mud-elevation-0 {
    box-shadow: var(--mud-elevation-0)
}

.mud-elevation-1 {
    box-shadow: var(--mud-elevation-1)
}

.mud-elevation-2 {
    box-shadow: var(--mud-elevation-2)
}

.mud-elevation-3 {
    box-shadow: var(--mud-elevation-3)
}

.mud-elevation-4 {
    box-shadow: var(--mud-elevation-4)
}

.mud-elevation-5 {
    box-shadow: var(--mud-elevation-5)
}

.mud-elevation-6 {
    box-shadow: var(--mud-elevation-6)
}

.mud-elevation-7 {
    box-shadow: var(--mud-elevation-7)
}

.mud-elevation-8 {
    box-shadow: var(--mud-elevation-8)
}

.mud-elevation-9 {
    box-shadow: var(--mud-elevation-9)
}

.mud-elevation-10 {
    box-shadow: var(--mud-elevation-10)
}

.mud-elevation-11 {
    box-shadow: var(--mud-elevation-11)
}

.mud-elevation-12 {
    box-shadow: var(--mud-elevation-12)
}

.mud-elevation-13 {
    box-shadow: var(--mud-elevation-13)
}

.mud-elevation-14 {
    box-shadow: var(--mud-elevation-14)
}

.mud-elevation-15 {
    box-shadow: var(--mud-elevation-15)
}

.mud-elevation-16 {
    box-shadow: var(--mud-elevation-16)
}

.mud-elevation-17 {
    box-shadow: var(--mud-elevation-17)
}

.mud-elevation-18 {
    box-shadow: var(--mud-elevation-18)
}

.mud-elevation-19 {
    box-shadow: var(--mud-elevation-19)
}

.mud-elevation-20 {
    box-shadow: var(--mud-elevation-20)
}

.mud-elevation-21 {
    box-shadow: var(--mud-elevation-21)
}

.mud-elevation-22 {
    box-shadow: var(--mud-elevation-22)
}

.mud-elevation-23 {
    box-shadow: var(--mud-elevation-23)
}

.mud-elevation-24 {
    box-shadow: var(--mud-elevation-24)
}

.mud-elevation-25 {
    box-shadow: var(--mud-elevation-25)
}

.mud-toolbar {
    display: flex;
    position: relative;
    align-items: center;
    --mud-internal-toolbar-height: 56px;
    height: var(--mud-internal-toolbar-height)
}

.mud-toolbar-gutters {
    padding-left: 16px;
    padding-right: 16px
}

@media(min-width: 0px)and (orientation: landscape) {
    .mud-toolbar {
        --mud-internal-toolbar-height: 48px
    }
}

@media(min-width: 600px) {
    .mud-toolbar {
        --mud-internal-toolbar-height: 64px
    }

    .mud-toolbar-gutters {
        padding-left: 24px;
        padding-right: 24px
    }
}

.mud-toolbar-dense {
    --mud-internal-toolbar-height: 48px
}

.mud-toolbar.mud-toolbar-wrap-content {
    height: auto;
    min-height: var(--mud-internal-toolbar-height);
    flex-wrap: wrap
}

    .mud-toolbar.mud-toolbar-wrap-content.mud-toolbar-appbar {
        min-height: min(var(--mud-appbar-height),var(--mud-internal-toolbar-height))
    }

.mud-tooltip-root.mud-tooltip-inline {
    display: inline-block
}

    .mud-tooltip-root.mud-tooltip-inline:has(>.mud-width-full) {
        display: block;
        width: 100%
    }

.mud-tooltip {
    padding: 4px 8px;
    text-align: center;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.4em;
    border-radius: var(--mud-default-borderradius);
    z-index: var(--mud-zindex-tooltip)
}

    .mud-tooltip.mud-tooltip-default {
        color: var(--mud-palette-dark-text);
        background-color: var(--mud-palette-gray-darker)
    }

        .mud-tooltip.mud-tooltip-default.mud-tooltip-arrow::after {
            border-color: var(--mud-palette-gray-darker) rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0)
        }

    .mud-tooltip.mud-tooltip-center-left:not([data-mudpopover-flip]), .mud-tooltip.mud-tooltip-center-right[data-mudpopover-flip] {
        transform: translateX(-10px)
    }

        .mud-tooltip.mud-tooltip-center-left:not([data-mudpopover-flip]).mud-tooltip-arrow::after, .mud-tooltip.mud-tooltip-center-right[data-mudpopover-flip].mud-tooltip-arrow::after {
            left: 100%;
            transform: rotate(270deg)
        }

    .mud-tooltip.mud-tooltip-center-right:not([data-mudpopover-flip]), .mud-tooltip.mud-tooltip-center-left[data-mudpopover-flip] {
        transform: translateX(10px)
    }

        .mud-tooltip.mud-tooltip-center-right:not([data-mudpopover-flip]).mud-tooltip-arrow::after, .mud-tooltip.mud-tooltip-center-left[data-mudpopover-flip].mud-tooltip-arrow::after {
            right: 100%;
            transform: rotate(90deg)
        }

    .mud-tooltip.mud-tooltip-top-center:not([data-mudpopover-flip]), .mud-tooltip.mud-tooltip-bottom-center[data-mudpopover-flip] {
        transform: translateY(-10px)
    }

        .mud-tooltip.mud-tooltip-top-center:not([data-mudpopover-flip]).mud-tooltip-arrow::after, .mud-tooltip.mud-tooltip-bottom-center[data-mudpopover-flip].mud-tooltip-arrow::after {
            top: 100%;
            transform: rotate(0deg)
        }

    .mud-tooltip.mud-tooltip-bottom-center:not([data-mudpopover-flip]), .mud-tooltip.mud-tooltip-top-center[data-mudpopover-flip] {
        transform: translateY(10px)
    }

        .mud-tooltip.mud-tooltip-bottom-center:not([data-mudpopover-flip]).mud-tooltip-arrow::after, .mud-tooltip.mud-tooltip-top-center[data-mudpopover-flip].mud-tooltip-arrow::after {
            bottom: 100%;
            transform: rotate(180deg)
        }

    .mud-tooltip.mud-tooltip-arrow::after {
        content: "";
        position: absolute;
        border-width: 6px;
        border-style: solid;
        border-color: rgba(0,0,0,0);
        border-top-color: inherit
    }

.mud-button-root {
    color: inherit;
    border: 0;
    cursor: pointer;
    margin: 0;
    display: inline-flex;
    outline: 0;
    padding: 0;
    position: relative;
    align-items: center;
    user-select: none;
    border-radius: 0;
    vertical-align: middle;
    -moz-appearance: none;
    justify-content: center;
    text-decoration: none;
    background-color: rgba(0,0,0,0);
    -webkit-appearance: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0)
}

    .mud-button-root::-moz-focus-inner {
        border-style: none
    }

    .mud-button-root:disabled {
        color: var(--mud-palette-action-disabled) !important;
        cursor: default;
        pointer-events: none
    }

.mud-button {
    padding: 6px 14px;
    font-family: var(--mud-typography-button-family);
    font-size: var(--mud-typography-button-size);
    font-weight: var(--mud-typography-button-weight);
    line-height: var(--mud-typography-button-lineheight);
    letter-spacing: var(--mud-typography-button-letterspacing);
    text-transform: var(--mud-typography-button-text-transform);
    min-width: 64px;
    box-sizing: border-box;
    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) 0ms;
    border-radius: var(--mud-default-borderradius);
    color: var(--mud-palette-text-primary);
    --mud-ripple-color: var(--mud-palette-text-primary)
}

@media(hover: hover)and (pointer: fine) {
    .mud-button:hover {
        background-color: var(--mud-palette-action-default-hover)
    }
}

.mud-button:focus-visible, .mud-button:active {
    background-color: var(--mud-palette-action-default-hover)
}

.mud-button-text {
    /* padding: 6px 8px; */
}

    .mud-button-text.mud-button-text-inherit {
        color: inherit
    }

    .mud-button-text.mud-button-text-primary {
        color: var(--mud-palette-primary);
        --mud-ripple-color: var(--mud-palette-primary)
    }

@media(hover: hover)and (pointer: fine) {
    .mud-button-text.mud-button-text-primary:hover {
        background-color: var(--mud-palette-primary-hover)
    }
}

.mud-button-text.mud-button-text-primary:focus-visible, .mud-button-text.mud-button-text-primary:active {
    background-color: var(--mud-palette-primary-hover)
}

.mud-button-text.mud-button-text-secondary {
    color: var(--mud-palette-secondary);
    --mud-ripple-color: var(--mud-palette-secondary)
}

@media(hover: hover)and (pointer: fine) {
    .mud-button-text.mud-button-text-secondary:hover {
        background-color: var(--mud-palette-secondary-hover)
    }
}

.mud-button-text.mud-button-text-secondary:focus-visible, .mud-button-text.mud-button-text-secondary:active {
    background-color: var(--mud-palette-secondary-hover)
}

.mud-button-text.mud-button-text-tertiary {
    color: var(--mud-palette-tertiary);
    --mud-ripple-color: var(--mud-palette-tertiary)
}

@media(hover: hover)and (pointer: fine) {
    .mud-button-text.mud-button-text-tertiary:hover {
        background-color: var(--mud-palette-tertiary-hover)
    }
}

.mud-button-text.mud-button-text-tertiary:focus-visible, .mud-button-text.mud-button-text-tertiary:active {
    background-color: var(--mud-palette-tertiary-hover)
}

.mud-button-text.mud-button-text-info {
    color: var(--mud-palette-info);
    --mud-ripple-color: var(--mud-palette-info)
}

@media(hover: hover)and (pointer: fine) {
    .mud-button-text.mud-button-text-info:hover {
        background-color: var(--mud-palette-info-hover)
    }
}

.mud-button-text.mud-button-text-info:focus-visible, .mud-button-text.mud-button-text-info:active {
    background-color: var(--mud-palette-info-hover)
}

.mud-button-text.mud-button-text-success {
    color: var(--mud-palette-success);
    --mud-ripple-color: var(--mud-palette-success)
}

@media(hover: hover)and (pointer: fine) {
    .mud-button-text.mud-button-text-success:hover {
        background-color: var(--mud-palette-success-hover)
    }
}

.mud-button-text.mud-button-text-success:focus-visible, .mud-button-text.mud-button-text-success:active {
    background-color: var(--mud-palette-success-hover)
}

.mud-button-text.mud-button-text-warning {
    color: var(--primary-color);
    --mud-ripple-color: var(--primary-color)
}

@media(hover: hover)and (pointer: fine) {
    .mud-button-text.mud-button-text-warning:hover {
        background-color: var(--mud-palette-warning-hover)
    }
}

.mud-button-text.mud-button-text-warning:focus-visible, .mud-button-text.mud-button-text-warning:active {
    background-color: var(--mud-palette-warning-hover)
}

.mud-button-text.mud-button-text-error {
    color: var(--mud-palette-error);
    --mud-ripple-color: var(--mud-palette-error)
}

.mud-grid-item-xl-7 {
    flex-grow: 0;
    max-width: calc(100%/12*7);
    flex-basis: calc(100%/12*7)
}

.mud-grid-item-xl-8 {
    flex-grow: 0;
    max-width: calc(100%/12*8);
    flex-basis: calc(100%/12*8)
}

.mud-grid-item-xl-9 {
    flex-grow: 0;
    max-width: calc(100%/12*9);
    flex-basis: calc(100%/12*9)
}

.mud-grid-item-xl-10 {
    flex-grow: 0;
    max-width: calc(100%/12*10);
    flex-basis: calc(100%/12*10)
}

.mud-grid-item-xl-11 {
    flex-grow: 0;
    max-width: calc(100%/12*11);
    flex-basis: calc(100%/12*11)
}

.mud-grid-item-xl-12 {
    flex-grow: 0;
    max-width: calc(100%/12*12);
    flex-basis: calc(100%/12*12)
}

.mud-grid-item-xl-auto {
    flex-grow: 0;
    max-width: none;
    flex-basis: auto
}

.mud-grid-item-xl-true {
    flex-grow: 1;
    max-width: 100%;
    flex-basis: 0
}

}

@media(min-width: 2560px) {
    .mud-grid-item-xxl-1 {
        flex-grow: 0;
        max-width: calc(100%/12*1);
        flex-basis: calc(100%/12*1)
    }

    .mud-grid-item-xxl-2 {
        flex-grow: 0;
        max-width: calc(100%/12*2);
        flex-basis: calc(100%/12*2)
    }

    .mud-grid-item-xxl-3 {
        flex-grow: 0;
        max-width: calc(100%/12*3);
        flex-basis: calc(100%/12*3)
    }

    .mud-grid-item-xxl-4 {
        flex-grow: 0;
        max-width: calc(100%/12*4);
        flex-basis: calc(100%/12*4)
    }

    .mud-grid-item-xxl-5 {
        flex-grow: 0;
        max-width: calc(100%/12*5);
        flex-basis: calc(100%/12*5)
    }

    .mud-grid-item-xxl-6 {
        flex-grow: 0;
        max-width: calc(100%/12*6);
        flex-basis: calc(100%/12*6)
    }

    .mud-grid-item-xxl-7 {
        flex-grow: 0;
        max-width: calc(100%/12*7);
        flex-basis: calc(100%/12*7)
    }

    .mud-grid-item-xxl-8 {
        flex-grow: 0;
        max-width: calc(100%/12*8);
        flex-basis: calc(100%/12*8)
    }

    .mud-grid-item-xxl-9 {
        flex-grow: 0;
        max-width: calc(100%/12*9);
        flex-basis: calc(100%/12*9)
    }

    .mud-grid-item-xxl-10 {
        flex-grow: 0;
        max-width: calc(100%/12*10);
        flex-basis: calc(100%/12*10)
    }

    .mud-grid-item-xxl-11 {
        flex-grow: 0;
        max-width: calc(100%/12*11);
        flex-basis: calc(100%/12*11)
    }

    .mud-grid-item-xxl-12 {
        flex-grow: 0;
        max-width: calc(100%/12*12);
        flex-basis: calc(100%/12*12)
    }

    .mud-grid-item-xxl-auto {
        flex-grow: 0;
        max-width: none;
        flex-basis: auto
    }

    .mud-grid-item-xxl-true {
        flex-grow: 1;
        max-width: 100%;
        flex-basis: 0
    }
}

.mud-paper {
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-surface);
    border-radius: var(--mud-default-borderradius);
    transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms
}

.mud-paper-square {
    border-radius: 0px
}

.mud-paper-outlined {
    border: 1px solid var(--mud-palette-lines-default)
}

.mud-icon-default {
    color: var(--mud-palette-text-secondary)
}

.mud-disabled .mud-icon-root, .mud-disabled .mud-svg-icon, .mud-disabled .mud-icon-default {
    color: var(--mud-palette-text-disabled)
}

.mud-icon-root {
    width: 1em;
    height: 1em;
    display: inline-block;
    transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    flex-shrink: 0;
    user-select: none
}

    .mud-icon-root:focus {
        outline: none
    }

    .mud-icon-root.mud-svg-icon {
        fill: currentColor
    }

.mud-icon-size-small {
    font-size: 1.25rem
}

.mud-icon-size-medium {
    font-size: 1.5rem
}

.mud-icon-size-large {
    font-size: 2.25rem
}

.mud-divider {
    margin: 0;
    flex-shrink: 0;
    border-color: var(--mud-palette-divider);
    border-width: 1px;
    border-style: solid none none none
}

.mud-divider-absolute {
    left: 0;
    width: 100%;
    bottom: 0;
    position: absolute
}

.mud-divider-inset {
    margin-left: 72px;
    margin-inline-start: 72px;
    margin-inline-end: unset
}

.mud-divider-light {
    border-color: var(--mud-palette-divider-light)
}

.mud-picker.mud-rounded {
    border-radius: var(--mud-default-borderradius)
}

.mud-picker .mud-picker-actions {
    flex: 0 0 auto;
    display: flex;
    padding: 8px;
    align-items: center;
    justify-content: flex-end
}

    .mud-picker .mud-picker-actions > :not(:first-child) {
        margin-left: 8px;
        margin-inline-start: 8px;
        margin-inline-end: unset
    }

    .mud-picker .mud-picker-actions:empty {
        display: none
    }

.mud-picker-inline {
    display: flex;
    flex: 1 1 auto;
    position: relative;
    max-width: 100%
}

    .mud-picker-inline.mud-picker-input-button .mud-input, .mud-picker-inline.mud-picker-input-button .mud-input .mud-input-root {
        cursor: pointer
    }

    .mud-picker-inline.mud-picker-input-button.mud-disabled .mud-input, .mud-picker-inline.mud-picker-input-button.mud-disabled .mud-input .mud-input-root {
        cursor: default
    }

    .mud-picker-inline.mud-picker-input-text {
        cursor: text
    }

        .mud-picker-inline.mud-picker-input-text:hover {
            cursor: text
        }

        .mud-picker-inline.mud-picker-input-text.mud-disabled {
            cursor: default
        }

            .mud-picker-inline.mud-picker-input-text.mud-disabled:hover {
                cursor: default
            }

.mud-picker-static {
    display: flex;
    overflow: hidden;
    min-width: 310px;
    flex-direction: column
}

.mud-picker-container {
    display: flex;
    flex-direction: column;
    border-radius: inherit
}

    .mud-picker-container.mud-picker-container-landscape {
        flex-direction: row
    }

    .mud-picker-container .mud-toolbar {
        border-top-left-radius: inherit;
        border-top-right-radius: inherit
    }

.mud-picker-popover-paper {
    outline: 0;
    z-index: calc(var(--mud-zindex-popover) + 1);
    position: absolute;
    min-width: 16px;
    min-height: 16px;
    overflow-x: hidden;
    overflow-y: auto
}

.mud-picker-view {
    display: none
}

    .mud-picker-view.mud-picker-open {
        display: block
    }

.mud-picker-content {
    display: flex;
    max-width: 100%;
    min-width: 310px;
    min-height: 305px;
    overflow: hidden;
    flex-direction: column;
    justify-content: center
}

    .mud-picker-content.mud-picker-content-landscape {
        padding: 0 8px
    }

.mud-picker-toolbar {
    height: auto;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
}

    .mud-picker-toolbar.mud-picker-toolbar-landscape {
        height: auto;
        padding: 8px;
        max-width: 150px;
        justify-content: flex-start
    }

    .mud-picker-toolbar.mud-button-root {
        padding: 0;
        min-width: 16px;
        text-transform: none
    }

.mud-picker-inline-paper .mud-paper {
    position: relative !important
}

.mud-picker-hidden {
    visibility: hidden
}

.mud-picker-pos-top {
    top: 0px;
    position: fixed;
    visibility: visible
}

    .mud-picker-pos-top.mud-picker-pos-left {
        left: 10px
    }

    .mud-picker-pos-top.mud-picker-pos-right {
        right: 10px
    }

.mud-picker-pos-above {
    bottom: 0px;
    visibility: visible
}

    .mud-picker-pos-above.mud-picker-pos-left {
        left: 50%;
        transform: translateX(-50%)
    }

    .mud-picker-pos-above.mud-picker-pos-right {
        right: 0px
    }

.mud-picker-pos-bottom {
    bottom: 10px;
    position: fixed;
    visibility: visible
}

    .mud-picker-pos-bottom.mud-picker-pos-left {
        left: 10px
    }

    .mud-picker-pos-bottom.mud-picker-pos-right {
        right: 10px
    }

.mud-picker-pos-below {
    visibility: visible
}

    .mud-picker-pos-below.mud-picker-pos-left {
        left: 50%;
        transform: translateX(-50%)
    }

    .mud-picker-pos-below.mud-picker-pos-right {
        right: 0px
    }

.mud-picker-datepicker-toolbar {
    align-items: flex-start;
    flex-direction: column;
    /* justify-content: center; */
}

    .mud-picker-datepicker-toolbar .mud-button-year {
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.75;
        letter-spacing: .00938em
    }

    .mud-picker-datepicker-toolbar .mud-button-date {
        font-size: 1.5rem;
        font-weight: 400;
        line-height: 1.5;
        letter-spacing: .00735em;
        text-transform: none
    }

.mud-picker-datepicker-toolbar-landscape {
    padding: 16px
}

.mud-picker-datepicker-date-landscape {
    margin-right: 16px;
    margin-inline-end: 16px;
    margin-inline-start: unset
}

.mud-picker-calendar-header-switch {
    display: flex;
    margin-top: 4px;
    align-items: center;
    margin-bottom: 8px;
    justify-content: space-between
}

    .mud-picker-calendar-header-switch > .mud-icon-button {
        z-index: 1;
        padding: 8px;
        margin: 6px;
        background-color: var(--mud-palette-surface)
    }

@media(hover: hover)and (pointer: fine) {
    .mud-picker-calendar-header-switch > .mud-icon-button:hover {
        background-color: var(--mud-palette-action-default-hover)
    }
}

.mud-picker-calendar-header-switch .mud-picker-calendar-header-transition {
    width: 100%;
    height: 23px;
    overflow: hidden;
    background: transparent;
    border: none;
}

@media(hover: hover)and (pointer: fine) {
    .mud-picker-calendar-header-switch .mud-picker-calendar-header-transition:hover .mud-typography {
        cursor: pointer;
        font-weight: 500
    }
}

.mud-picker-calendar-header-day {
    display: flex;
    max-height: 16px;
    align-items: center;
    justify-content: center
}

    .mud-picker-calendar-header-day .mud-day-label {
        color: var(--mud-palette-text-secondary);
        width: 36px;
        margin: 0 2px;
        text-align: center
    }

.mud-picker-year-container {
    height: 300px;
    overflow-y: auto
}

    .mud-picker-year-container .mud-picker-year {
        cursor: pointer;
        height: 40px;
        display: flex;
        outline: none;
        align-items: center;
        justify-content: center;
        user-select: none;
        animation: mud-animation-fadein 500ms;
        transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms
    }

@media(hover: hover)and (pointer: fine) {
    .mud-picker-year-container .mud-picker-year:hover {
        background-color: var(--mud-palette-action-default-hover)
    }
}

.mud-picker-year-container .mud-picker-year .mud-picker-year-selected {
    margin: 10px 0;
    font-weight: 500
}

.mud-picker-month-container {
    width: 310px;
    display: flex;
    flex-wrap: wrap;
    align-content: stretch
}

    .mud-picker-month-container .mud-picker-month {
        flex: 1 0 33.33%;
        cursor: pointer;
        height: 60px;
        display: flex;
        outline: none;
        align-items: center;
        justify-content: center;
        transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms
    }

@media(hover: hover)and (pointer: fine) {
    .mud-picker-month-container .mud-picker-month:hover {
        background-color: var(--mud-palette-action-default-hover)
    }
}

.mud-picker-month-container .mud-picker-month .mud-picker-month-selected {
    font-weight: 500
}

.mud-picker-month-container .mud-picker-month.mud-disabled {
    color: var(--mud-palette-text-disabled);
    pointer-events: none
}

.mud-picker-slide-transition {
    display: block;
    position: relative
}

    .mud-picker-slide-transition > * {
        top: 0;
        left: 0;
        right: 0;
        position: absolute
    }

.mud-picker-calendar-transition {
    margin-top: 12px;
    min-height: 216px
}

.mud-picker-calendar-progress-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.mud-picker-calendar-content {
    display: grid;
    --selected-day: 0;
    grid-column-gap: 10px;
    grid-template-columns: auto
}

@media(min-width: 600px) {
    .mud-picker-calendar-content:not(.mud-picker-calendar-content-1) {
        grid-template-columns: repeat(2, minmax(auto, 1fr))
    }

        .mud-picker-calendar-content:not(.mud-picker-calendar-content-1) .mud-picker-calendar-header-1 .mud-picker-nav-button-next, .mud-picker-calendar-content:not(.mud-picker-calendar-content-1) .mud-picker-calendar-header-3 .mud-picker-nav-button-next, .mud-picker-calendar-content:not(.mud-picker-calendar-content-1) .mud-picker-calendar-header-5 .mud-picker-nav-button-next, .mud-picker-calendar-content:not(.mud-picker-calendar-content-1) .mud-picker-calendar-header-7 .mud-picker-nav-button-next, .mud-picker-calendar-content:not(.mud-picker-calendar-content-1) .mud-picker-calendar-header-9 .mud-picker-nav-button-next, .mud-picker-calendar-content:not(.mud-picker-calendar-content-1) .mud-picker-calendar-header-11 .mud-picker-nav-button-next {
            visibility: hidden
        }

        .mud-picker-calendar-content:not(.mud-picker-calendar-content-1) .mud-picker-calendar-header-1 .mud-picker-nav-button-prev, .mud-picker-calendar-content:not(.mud-picker-calendar-content-1) .mud-picker-calendar-header-3 .mud-picker-nav-button-prev, .mud-picker-calendar-content:not(.mud-picker-calendar-content-1) .mud-picker-calendar-header-5 .mud-picker-nav-button-prev, .mud-picker-calendar-content:not(.mud-picker-calendar-content-1) .mud-picker-calendar-header-7 .mud-picker-nav-button-prev, .mud-picker-calendar-content:not(.mud-picker-calendar-content-1) .mud-picker-calendar-header-9 .mud-picker-nav-button-prev, .mud-picker-calendar-content:not(.mud-picker-calendar-content-1) .mud-picker-calendar-header-11 .mud-picker-nav-button-prev {
            visibility: visible
        }

        .mud-picker-calendar-content:not(.mud-picker-calendar-content-1) .mud-picker-calendar-header-2 .mud-picker-nav-button-next, .mud-picker-calendar-content:not(.mud-picker-calendar-content-1) .mud-picker-calendar-header-4 .mud-picker-nav-button-next, .mud-picker-calendar-content:not(.mud-picker-calendar-content-1) .mud-picker-calendar-header-6 .mud-picker-nav-button-next, .mud-picker-calendar-content:not(.mud-picker-calendar-content-1) .mud-picker-calendar-header-8 .mud-picker-nav-button-next, .mud-picker-calendar-content:not(.mud-picker-calendar-content-1) .mud-picker-calendar-header-10 .mud-picker-nav-button-next, .mud-picker-calendar-content:not(.mud-picker-calendar-content-1) .mud-picker-calendar-header-12 .mud-picker-nav-button-next {
            visibility: visible
        }

        .mud-picker-calendar-content:not(.mud-picker-calendar-content-1) .mud-picker-calendar-header-2 .mud-picker-nav-button-prev, .mud-picker-calendar-content:not(.mud-picker-calendar-content-1) .mud-picker-calendar-header-4 .mud-picker-nav-button-prev, .mud-picker-calendar-content:not(.mud-picker-calendar-content-1) .mud-picker-calendar-header-6 .mud-picker-nav-button-prev, .mud-picker-calendar-content:not(.mud-picker-calendar-content-1) .mud-picker-calendar-header-8 .mud-picker-nav-button-prev, .mud-picker-calendar-content:not(.mud-picker-calendar-content-1) .mud-picker-calendar-header-10 .mud-picker-nav-button-prev, .mud-picker-calendar-content:not(.mud-picker-calendar-content-1) .mud-picker-calendar-header-12 .mud-picker-nav-button-prev {
            visibility: hidden
        }
}

@media(min-width: 960px) {
    .mud-picker-calendar-content:not(.mud-picker-calendar-content-1):not(.mud-picker-calendar-content-2) {
        grid-template-columns: repeat(3, minmax(auto, 1fr))
    }

        .mud-picker-calendar-content:not(.mud-picker-calendar-content-1):not(.mud-picker-calendar-content-2) .mud-picker-calendar-header-1 .mud-picker-nav-button-next, .mud-picker-calendar-content:not(.mud-picker-calendar-content-1):not(.mud-picker-calendar-content-2) .mud-picker-calendar-header-4 .mud-picker-nav-button-next, .mud-picker-calendar-content:not(.mud-picker-calendar-content-1):not(.mud-picker-calendar-content-2) .mud-picker-calendar-header-7 .mud-picker-nav-button-next, .mud-picker-calendar-content:not(.mud-picker-calendar-content-1):not(.mud-picker-calendar-content-2) .mud-picker-calendar-header-10 .mud-picker-nav-button-next {
            visibility: hidden
        }

        .mud-picker-calendar-content:not(.mud-picker-calendar-content-1):not(.mud-picker-calendar-content-2) .mud-picker-calendar-header-1 .mud-picker-nav-button-prev, .mud-picker-calendar-content:not(.mud-picker-calendar-content-1):not(.mud-picker-calendar-content-2) .mud-picker-calendar-header-4 .mud-picker-nav-button-prev, .mud-picker-calendar-content:not(.mud-picker-calendar-content-1):not(.mud-picker-calendar-content-2) .mud-picker-calendar-header-7 .mud-picker-nav-button-prev, .mud-picker-calendar-content:not(.mud-picker-calendar-content-1):not(.mud-picker-calendar-content-2) .mud-picker-calendar-header-10 .mud-picker-nav-button-prev {
            visibility: visible
        }

        .mud-picker-calendar-content:not(.mud-picker-calendar-content-1):not(.mud-picker-calendar-content-2) .mud-picker-calendar-header-2 .mud-picker-nav-button-next, .mud-picker-calendar-content:not(.mud-picker-calendar-content-1):not(.mud-picker-calendar-content-2) .mud-picker-calendar-header-2 .mud-picker-nav-button-prev, .mud-picker-calendar-content:not(.mud-picker-calendar-content-1):not(.mud-picker-calendar-content-2) .mud-picker-calendar-header-5 .mud-picker-nav-button-next, .mud-picker-calendar-content:not(.mud-picker-calendar-content-1):not(.mud-picker-calendar-content-2) .mud-picker-calendar-header-5 .mud-picker-nav-button-prev, .mud-picker-calendar-content:not(.mud-picker-calendar-content-1):not(.mud-picker-calendar-content-2) .mud-picker-calendar-header-8 .mud-picker-nav-button-next, .mud-picker-calendar-content:not(.mud-picker-calendar-content-1):not(.mud-picker-calendar-content-2) .mud-picker-calendar-header-8 .mud-picker-nav-button-prev, .mud-picker-calendar-content:not(.mud-picker-calendar-content-1):not(.mud-picker-calendar-content-2) .mud-picker-calendar-header-11 .mud-picker-nav-button-next, .mud-picker-calendar-content:not(.mud-picker-calendar-content-1):not(.mud-picker-calendar-content-2) .mud-picker-calendar-header-11 .mud-picker-nav-button-prev {
            visibility: hidden
        }

        .mud-picker-calendar-content:not(.mud-picker-calendar-content-1):not(.mud-picker-calendar-content-2) .mud-picker-calendar-header-3 .mud-picker-nav-button-next, .mud-picker-calendar-content:not(.mud-picker-calendar-content-1):not(.mud-picker-calendar-content-2) .mud-picker-calendar-header-6 .mud-picker-nav-button-next, .mud-picker-calendar-content:not(.mud-picker-calendar-content-1):not(.mud-picker-calendar-content-2) .mud-picker-calendar-header-9 .mud-picker-nav-button-next, .mud-picker-calendar-content:not(.mud-picker-calendar-content-1):not(.mud-picker-calendar-content-2) .mud-picker-calendar-header-12 .mud-picker-nav-button-next {
            visibility: visible
        }

        .mud-picker-calendar-content:not(.mud-picker-calendar-content-1):not(.mud-picker-calendar-content-2) .mud-picker-calendar-header-3 .mud-picker-nav-button-prev, .mud-picker-calendar-content:not(.mud-picker-calendar-content-1):not(.mud-picker-calendar-content-2) .mud-picker-calendar-header-6 .mud-picker-nav-button-prev, .mud-picker-calendar-content:not(.mud-picker-calendar-content-1):not(.mud-picker-calendar-content-2) .mud-picker-calendar-header-9 .mud-picker-nav-button-prev, .mud-picker-calendar-content:not(.mud-picker-calendar-content-1):not(.mud-picker-calendar-content-2) .mud-picker-calendar-header-12 .mud-picker-nav-button-prev {
            visibility: hidden
        }
}

:not(.mud-picker-hidden) .mud-picker-calendar-header-last .mud-picker-nav-button-next {
    visibility: inherit !important
}

.mud-picker-hidden .mud-picker-nav-button-next, .mud-picker-hidden .mud-picker-nav-button-prev {
    visibility: hidden !important
}

.mud-picker-calendar-container {
    display: flex;
    width: 310px;
    flex-direction: column
}

.mud-picker-calendar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}

    .mud-picker-calendar .mud-day {
        color: var(--mud-palette-text-primary);
        width: 36px;
        height: 36px;
        margin: 0 2px;
        padding: 0;
        font-size: .75rem;
        font-weight: 500
    }

@media(hover: hover)and (pointer: fine) {
    .mud-picker-calendar .mud-day:hover {
        background-color: var(--mud-palette-action-default-hover)
    }
}

.mud-picker-calendar .mud-day.mud-hidden {
    opacity: 0;
    pointer-events: none
}

.mud-picker-calendar .mud-day.mud-current {
    font-weight: 600
}

.mud-picker-calendar .mud-day.mud-selected {
    font-weight: 500
}

.mud-picker-calendar .mud-day .mud-typography {
    margin-top: 2px
}

.mud-picker-calendar .mud-day.mud-disabled {
    color: var(--mud-palette-text-disabled);
    pointer-events: none
}

.mud-picker-calendar .mud-day.mud-range {
    margin: 0;
    width: 40px;
    transition: none
}

    .mud-picker-calendar .mud-day.mud-range.mud-range-start-selected {
        border-radius: 50% 0% 0% 50%
    }

    .mud-picker-calendar .mud-day.mud-range.mud-range-end-selected {
        border-radius: 0% 50% 50% 0%
    }

    .mud-picker-calendar .mud-day.mud-range.mud-range-between {
        border-radius: 0;
        background-color: var(--mud-palette-action-default-hover)
    }

@media(hover: hover)and (pointer: fine) {
    .mud-picker-calendar .mud-day.mud-range.mud-range-selection:hover.mud-range-start-selected {
        border-radius: 50%
    }

    .mud-picker-calendar .mud-day.mud-range.mud-range-selection:hover:not(.mud-range-start-selected) {
        border-radius: 0% 50% 50% 0%
    }
}

.mud-picker-calendar .mud-day.mud-range.mud-range-selection:not(:hover):not(.mud-range-start-selected) {
    border-radius: 0;
    background: linear-gradient(var(--mud-palette-action-default-hover) 100%, var(--mud-palette-action-default-hover) 100%, transparent 0%);
    background-size: 100% calc(100%*(var(--selected-day) - var(--day-id)))
}

@media(hover: hover)and (pointer: fine) {
    .mud-range-selection-primary:hover {
        color: var(--mud-palette-primary-text) !important;
        background-color: var(--mud-palette-primary) !important
    }
}

@media(hover: hover)and (pointer: fine) {
    .mud-range-selection-secondary:hover {
        color: var(--mud-palette-secondary-text) !important;
        background-color: var(--mud-palette-secondary) !important
    }
}

@media(hover: hover)and (pointer: fine) {
    .mud-range-selection-tertiary:hover {
        color: var(--mud-palette-tertiary-text) !important;
        background-color: var(--mud-palette-tertiary) !important
    }
}

@media(hover: hover)and (pointer: fine) {
    .mud-range-selection-info:hover {
        color: var(--mud-palette-info-text) !important;
        background-color: var(--mud-palette-info) !important
    }
}

@media(hover: hover)and (pointer: fine) {
    .mud-range-selection-success:hover {
        color: var(--mud-palette-success-text) !important;
        background-color: var(--mud-palette-success) !important
    }
}

@media(hover: hover)and (pointer: fine) {
    .mud-range-selection-warning:hover {
        color: var(--mud-palette-warning-text) !important;
        background-color: var(--primary-color) !important
    }
}

@media(hover: hover)and (pointer: fine) {
    .mud-range-selection-error:hover {
        color: var(--mud-palette-error-text) !important;
        background-color: var(--mud-palette-error) !important
    }
}

@media(hover: hover)and (pointer: fine) {
    .mud-range-selection-dark:hover {
        color: var(--mud-palette-dark-text) !important;
        background-color: var(--mud-palette-dark) !important
    }
}

.mud-picker-calendar-week {
    display: flex;
    margin: 0 5px;
    justify-content: center;
    align-items: center
}

    .mud-picker-calendar-week .mud-picker-calendar-week-text {
        width: 15px;
        margin-top: 2px !important;
        color: var(--mud-palette-text-disabled)
    }

.mud-application-layout-rtl .mud-picker-calendar .mud-day.mud-range.mud-range-start-selected {
    border-radius: 0% 50% 50% 0%
}

.mud-application-layout-rtl .mud-picker-calendar .mud-day.mud-range.mud-range-end-selected {
    border-radius: 50% 0% 0% 50%
}

@media(hover: hover)and (pointer: fine) {
    .mud-application-layout-rtl .mud-picker-calendar .mud-day.mud-range.mud-range-selection:hover:not(.mud-range-start-selected) {
        border-radius: 50% 0% 0% 50%
    }
}

.mud-picker-timepicker-toolbar .mud-timepicker-button {
    padding: 0;
    min-width: 16px;
    text-transform: none
}

    .mud-picker-timepicker-toolbar .mud-timepicker-button.mud-timepicker-toolbar-text {
        color: hsla(0,0%,100%,.54)
    }

@media(hover: hover)and (pointer: fine) {
    .mud-picker-timepicker-toolbar .mud-timepicker-button:hover {
        background-color: var(--mud-theme-default-hover)
    }
}

.mud-picker-timepicker-toolbar .mud-timepicker-hourminute {
    display: flex;
    align-items: baseline;
    justify-content: flex-end
}

    .mud-picker-timepicker-toolbar .mud-timepicker-hourminute .mud-timepicker-button {
        font-size: 3.75rem;
        font-weight: 300;
        line-height: 1;
        letter-spacing: -0.00833em
    }

.mud-picker-timepicker-toolbar .mud-timepicker-ampm {
    display: flex;
    margin-left: 20px;
    margin-right: -20px;
    margin-inline-start: 20px;
    margin-inline-end: -20px;
    flex-direction: column
}

    .mud-picker-timepicker-toolbar .mud-timepicker-ampm .mud-timepicker-button {
        font-size: 18px;
        font-weight: 400;
        line-height: 1.75;
        letter-spacing: .00938em
    }

.mud-picker-timepicker-toolbar .mud-timepicker-separator {
    cursor: default;
    margin: 0 4px 0 2px;
    margin-inline-start: 2px;
    margin-inline-end: 4px
}

.mud-picker-timepicker-toolbar.mud-picker-timepicker-toolbar-landscape {
    flex-wrap: wrap;
    width: 150px;
    justify-content: center
}

    .mud-picker-timepicker-toolbar.mud-picker-timepicker-toolbar-landscape .mud-timepicker-hourminute .mud-timepicker-button {
        font-size: 3rem;
        font-weight: 400;
        line-height: 1.04;
        letter-spacing: 0em
    }

    .mud-picker-timepicker-toolbar.mud-picker-timepicker-toolbar-landscape .mud-timepicker-ampm {
        display: flex;
        margin-left: 20px;
        margin-right: -20px;
        margin-inline-start: 20px;
        margin-inline-end: -20px;
        flex-direction: column
    }

        .mud-picker-timepicker-toolbar.mud-picker-timepicker-toolbar-landscape .mud-timepicker-ampm .mud-timepicker-button {
            font-size: 18px;
            font-weight: 400;
            line-height: 1.75;
            letter-spacing: .00938em
        }

    .mud-picker-timepicker-toolbar.mud-picker-timepicker-toolbar-landscape .mud-timepicker-separator {
        font-size: 3rem;
        font-weight: 400;
        line-height: 1.04;
        letter-spacing: 0em
    }

.mud-picker-time-container {
    margin: 16px 0 8px;
    display: flex;
    align-items: flex-end;
    justify-content: center
}

    .mud-picker-time-container .mud-picker-time-clock {
        width: 260px;
        height: 260px;
        position: relative;
        border-radius: 50%;
        pointer-events: none;
        touch-action: pinch-zoom;
        background-color: rgba(0,0,0,.07)
    }

        .mud-picker-time-container .mud-picker-time-clock .mud-picker-time-clock-mask {
            width: 100%;
            height: 100%;
            outline: none;
            position: absolute;
            user-select: none;
            pointer-events: auto
        }

        .mud-picker-time-container .mud-picker-time-clock .mud-picker-time-clock-pin {
            top: 50%;
            left: 50%;
            width: 6px;
            height: 6px;
            position: absolute;
            transform: translate(-50%, -50%);
            border-radius: 50%
        }

        .mud-picker-time-container .mud-picker-time-clock .mud-picker-stick-inner {
            left: calc(50% - 1px);
            width: 3px;
            height: 35%;
            bottom: 0;
            position: absolute;
            transform-origin: center bottom 0px
        }

            .mud-picker-time-container .mud-picker-time-clock .mud-picker-stick-inner.mud-hour:after {
                content: "";
                position: absolute;
                left: 50%;
                transform: translate(-50%, -50%);
                height: 48px;
                width: 48px;
                top: -60%;
                border-radius: 50%;
                background-color: inherit
            }

        .mud-picker-time-container .mud-picker-time-clock .mud-picker-stick-outer {
            left: calc(50% - 1px);
            width: 0;
            height: 35%;
            bottom: 35%;
            position: absolute;
            transform-origin: center bottom 0px
        }

            .mud-picker-time-container .mud-picker-time-clock .mud-picker-stick-outer.mud-hour:after {
                content: "";
                position: absolute;
                left: 50%;
                transform: translate(-50%, -50%);
                height: 48px;
                width: 62px;
                top: -20px;
                border-radius: 50%;
                background-color: inherit
            }

        .mud-picker-time-container .mud-picker-time-clock .mud-picker-stick {
            left: calc(50% - 1px);
            width: 3px;
            height: 50%;
            bottom: 50%;
            position: absolute;
            transform-origin: center bottom 0px
        }

            .mud-picker-time-container .mud-picker-time-clock .mud-picker-stick.mud-hour:after {
                content: "";
                position: absolute;
                left: 50%;
                transform: translate(-50%, -50%);
                height: 62px;
                width: 62px;
                top: 20px;
                border-radius: 50%;
                background-color: inherit
            }

            .mud-picker-time-container .mud-picker-time-clock .mud-picker-stick.mud-minute:after {
                content: "";
                position: absolute;
                left: 50%;
                transform: translate(-50%, -50%);
                height: 44px;
                width: 15px;
                top: 20px;
                border-radius: 50%;
                background-color: inherit
            }

        .mud-picker-time-container .mud-picker-time-clock .mud-picker-time-clock-pointer {
            left: calc(50% - 1px);
            width: 2px;
            bottom: 50%;
            position: absolute;
            transform-origin: center bottom 0px
        }

            .mud-picker-time-container .mud-picker-time-clock .mud-picker-time-clock-pointer.mud-picker-time-clock-pointer-animation {
                transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,height 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms
            }

            .mud-picker-time-container .mud-picker-time-clock .mud-picker-time-clock-pointer .mud-picker-time-clock-pointer-thumb {
                position: absolute;
                border-radius: 100%
            }

                .mud-picker-time-container .mud-picker-time-clock .mud-picker-time-clock-pointer .mud-picker-time-clock-pointer-thumb.mud-onclock-text {
                    top: -19px;
                    left: -13px;
                    width: 28px;
                    height: 28px;
                    border: none;
                    background-color: inherit
                }

                .mud-picker-time-container .mud-picker-time-clock .mud-picker-time-clock-pointer .mud-picker-time-clock-pointer-thumb.mud-onclock-minute {
                    background: rgba(0,0,0,0);
                    border: 2px solid;
                    width: 10px;
                    height: 10px;
                    top: -9px;
                    left: -4px
                }

        .mud-picker-time-container .mud-picker-time-clock .mud-clock-number {
            left: calc((100% - 32px)/2);
            color: var(--mud-palette-text-primary);
            background-color: rgba(0,0,0,0) !important;
            width: 32px;
            height: 32px;
            display: inline-flex;
            position: absolute;
            align-items: center;
            user-select: none;
            border-radius: 50%;
            justify-content: center;
            transition-duration: 120ms;
            transition-property: color
        }

.mud-time-picker-dial {
    width: 100%;
    height: 100%;
    position: absolute;
    transition: transform 350ms,opacity 350ms
}

.mud-time-picker-dial-out {
    opacity: 0
}

.mud-time-picker-hour.mud-time-picker-dial-out {
    transform: scale(1.2, 1.2);
    transform-origin: center
}

.mud-time-picker-minute.mud-time-picker-dial-out {
    transform: scale(0.8, 0.8);
    transform-origin: center
}

.mud-time-picker-dial-hidden {
    visibility: hidden
}

.mud-picker-container + .mud-picker-color-toolbar {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit
}

.mud-picker-container + .mud-picker-color-content {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit
}

.mud-picker-color-toolbar {
    height: 32px;
    padding-right: 2px;
    padding-left: 2px
}

.mud-picker-color-content {
    min-height: unset;
    position: relative
}

.mud-popover {
    outline: 0;
    z-index: calc(var(--mud-zindex-popover) + 1);
    position: absolute;
    opacity: 0;
    top: -9999px;
    left: -9999px
}

    .mud-popover.mud-popover-fixed {
        position: fixed
    }

    .mud-popover.mud-popover-relative-width {
        width: 100%
    }

    .mud-popover.mud-popover-open {
        opacity: 1;
        transition: opacity
    }

    .mud-popover:not(.mud-popover-open) {
        pointer-events: none;
        transition-duration: 0ms !important;
        transition-delay: 0ms !important
    }

    .mud-popover:empty {
        box-shadow: none !important
    }

    .mud-popover .mud-list {
        max-height: inherit;
        overflow-y: auto
    }

    .mud-popover .mud-popover {
        z-index: auto
    }

.mud-typography {
    margin: 0
}

.mud-typography-h1 {
    font-size: var(--mud-typography-h1-size);
    font-family: var(--mud-typography-h1-family);
    font-weight: var(--mud-typography-h1-weight);
    line-height: var(--mud-typography-h1-lineheight);
    letter-spacing: var(--mud-typography-h1-letterspacing);
    text-transform: var(--mud-typography-h1-text-transform)
}

.mud-typography-h2 {
    font-size: var(--mud-typography-h2-size);
    font-family: var(--mud-typography-h2-family);
    font-weight: var(--mud-typography-h2-weight);
    line-height: var(--mud-typography-h2-lineheight);
    letter-spacing: var(--mud-typography-h2-letterspacing);
    text-transform: var(--mud-typography-h2-text-transform)
}

.mud-typography-h3 {
    font-size: var(--mud-typography-h3-size);
    font-family: var(--mud-typography-h3-family);
    font-weight: var(--mud-typography-h3-weight);
    line-height: var(--mud-typography-h3-lineheight);
    letter-spacing: var(--mud-typography-h3-letterspacing);
    text-transform: var(--mud-typography-h3-text-transform)
}

.mud-typography-h4 {
    font-size: var(--mud-typography-h4-size);
    font-family: var(--mud-typography-h4-family);
    font-weight: var(--mud-typography-h4-weight);
    line-height: var(--mud-typography-h4-lineheight);
    letter-spacing: var(--mud-typography-h4-letterspacing);
    text-transform: var(--mud-typography-h4-text-transform)
}

.mud-typography-h5 {
    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)
}

.mud-typography-h6 {
    font-size: var(--mud-typography-h6-size);
    font-family: var(--mud-typography-h6-family);
    font-weight: var(--mud-typography-h6-weight);
    line-height: var(--mud-typography-h6-lineheight);
    letter-spacing: var(--mud-typography-h6-letterspacing);
    text-transform: var(--mud-typography-h6-text-transform)
}

/*.mud-typography-subtitle1 {
    font-size: var(--mud-typography-subtitle1-size);
    font-family: var(--mud-typography-subtitle1-family);
    font-weight: var(--mud-typography-subtitle1-weight);
    line-height: var(--mud-typography-subtitle1-lineheight);
    letter-spacing: var(--mud-typography-subtitle1-letterspacing);
    text-transform: var(--mud-typography-subtitle1-text-transform)
}
*/
.mud-typography-subtitle2 {
    font-size: var(--mud-typography-subtitle2-size);
    font-family: var(--mud-typography-subtitle2-family);
    font-weight: var(--mud-typography-subtitle2-weight);
    line-height: var(--mud-typography-subtitle2-lineheight);
    letter-spacing: var(--mud-typography-subtitle2-letterspacing);
    text-transform: var(--mud-typography-subtitle2-text-transform)
}

.mud-typography-body1 {
    font-size: var(--mud-typography-body1-size);
    font-family: var(--mud-typography-body1-family);
    font-weight: var(--mud-typography-body1-weight);
    line-height: var(--mud-typography-body1-lineheight);
    letter-spacing: var(--mud-typography-body1-letterspacing);
    text-transform: var(--mud-typography-body1-text-transform)
}

.mud-typography-body2 {
    font-size: var(--mud-typography-body2-size);
    font-family: var(--mud-typography-body2-family);
    font-weight: var(--mud-typography-body2-weight);
    line-height: var(--mud-typography-body2-lineheight);
    letter-spacing: var(--mud-typography-body2-letterspacing);
    text-transform: var(--mud-typography-body2-text-transform)
}

.mud-typography-button {
    font-size: var(--mud-typography-button-size);
    font-family: var(--mud-typography-button-family);
    font-weight: var(--mud-typography-button-weight);
    line-height: var(--mud-typography-button-lineheight);
    letter-spacing: var(--mud-typography-button-letterspacing);
    text-transform: var(--mud-typography-button-text-transform)
}

.mud-typography-caption {
    font-size: var(--mud-typography-caption-size);
    font-family: var(--mud-typography-caption-family);
    font-weight: var(--mud-typography-caption-weight);
    line-height: var(--mud-typography-caption-lineheight);
    letter-spacing: var(--mud-typography-caption-letterspacing);
    text-transform: var(--mud-typography-caption-text-transform)
}

.mud-typography-overline {
    font-size: var(--mud-typography-overline-size);
    font-family: var(--mud-typography-overline-family);
    font-weight: var(--mud-typography-overline-weight);
    line-height: var(--mud-typography-overline-lineheight);
    letter-spacing: var(--mud-typography-overline-letterspacing);
    text-transform: var(--mud-typography-overline-text-transform)
}

.mud-typography-srOnly {
    width: 1px;
    height: 1px;
    overflow: hidden;
    position: absolute
}

.mud-typography-align-left {
    text-align: left
}

.mud-typography-align-center {
    text-align: center
}

.mud-typography-align-right {
    text-align: right
}

.mud-typography-align-justify {
    text-align: justify
}

.mud-typography-nowrap {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.mud-typography-gutterbottom {
    margin-bottom: .35em
}

.mud-typography-paragraph {
    margin-bottom: 16px
}

.mud-input-control {
    border: 0;
    margin: 0;
    padding: 0;
    display: flex;
    flex: 1 1 auto;
    max-width: 100%;
    position: relative;
    flex-direction: column;
    vertical-align: top;
}

.mud-input-input-control {
    user-select: none;
}

.mud-input-control > .mud-input-control-input-container {
    position: relative;
    display: flex;
    flex-direction: column;
}

.mud-input-input-control {
    user-select: none;
}

.mud-input {
    position: relative;
    color: var(--mud-palette-text-primary);
    cursor: text;
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    color-scheme: var(--mud-native-html-color-scheme);
    line-height: 1.1876em;
}

.mud-typography-subtitle1 {
    line-height: 1rem;
}

.mud-input > input.mud-input-root, div.mud-input-slot.mud-input-root {
    font: inherit;
    color: currentColor;
    width: 100%;
    border: 0;
    height: 1lh;
    margin: 0;
    display: block;
    padding: 6px 0 7px;
    min-width: 0;
    background: none;
    position: relative;
    box-sizing: content-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.mud-input > input.mud-input-root:focus-visible, div.mud-input-slot.mud-input-root:focus-visible {
    outline:none !important;
}

.mud-overlay {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 !important;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    display: flex;
    position: fixed;
    transition: .3s cubic-bezier(0.25, 0.8, 0.5, 1),z-index 1ms;
    z-index: 5
}

.mud-overlay.mud-overlay-absolute {
    position: absolute
}