:root {
    --mud-zindex-appbar: 1200 !important; /* En dessous du drawer */
    --mud-zindex-drawer: 1300 !important; /* Drawer reste au-dessus */
    .fsh-drawer-mini {
        --mud-drawer-width-mini-left: 65px;
    }
    }

    .frame {
        display: block;
        width: 50vw;
        height: 80vh;
        margin: 0;
        padding: 0;
        border: 0 none;
        box-sizing: border-box;
    }

    .responsive-iframe {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
        border: none;
    }

    .body {
        overflow: hidden;
    }

    .container {
        position: relative;
        width: 100%;
        overflow: hidden;
        padding-top: 56.25%;
    }

    /*.mud-button {
        text-transform: none;
    }*/


    .mud-button-filled {
        box-shadow: 0 3px 1px -2px rgb(0 0 0 / 30%), 0 2px 2px 0 rgb(0 0 0 / 0), 0 1px 5px 0 rgb(0 0 0 / 10%) !important;
    }

    .mud-dialog {
        box-shadow: 0 3px 1px -2px rgb(0 0 0 / 10%), 0 2px 2px 0 rgb(0 0 0 / 0), 0 10px 10px 0 rgb(0 0 0 / 5%) !important;
    }

    .mud-nav-link.active:not(.mud-nav-link-disabled) {
        font-weight: 500 !important;
        border-right: 3px solid var(--mud-palette-primary);
        background-color: var(--mud-palette-action-default-hover);
    }

    .mud-card {
        margin-bottom: 20px !important;
    }

    #blazor-error-ui {
        color: var(--mud-palette-drawer-text);
        background: var(--mud-palette-drawer-background);
    }

    /*.mud-overlay-dark {
        backdrop-filter: blur(2px);
    }*/

    .mud-card-header .mud-card-header-avatar {
        margin-inline-end: 10px !important;
    }
    /*.mud-nav-link {
    white-space: normal !important;
    padding: 12px 16px 12px 15px !important;
}*/

    .mud-dialog-content {
        max-height: 75vh !important;
        overflow: auto !important;
        overflow-x: hidden !important;
    }

    .mud-grid-spacing-xs-3 {
        margin: 0px !important;
        margin-left: -12px !important;
    }

    .mud-table-toolbar {
        flex-wrap: wrap;
        padding-bottom: 0 !important;
    }

    .mud-expand-panel {
        padding-bottom: 0 !important;
    }

    ::-webkit-scrollbar {
        width: 2px !important;
        height: 6px !important;
    }

    .fsh-nav-child {
        padding-left: 10px !important;
    }

    .mud-appbar-dense ~ .mud-main-content {
        padding-top: 0;
    }


    .exit-effect {
        transition: transform 0.4s ease, box-shadow 0.4s ease;
        will-change: transform, box-shadow, background-color;
    }

        .exit-effect:hover {
            transform: translate(0px, 5px) scale(1.1) rotateX(5deg);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
            z-index: 10;
        }

    .mud-dialog .mud-dialog-content {
        max-height: 100vh !important;
    }

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

    .apexcharts-menu {
        background: transparent !important;
    }

    div.apexcharts {
        background: transparent !important;
    }

    .apexcharts-tooltip-title {
        color: black !important;
    }

    .apexcharts-tooltip-text {
        color: black !important;
    }

    .apexcharts-text tspan {
        fill: var(--mud-palette-text-primary) !important;
    }

    .apexcharts-datalabel-value {
        fill: var(--mud-palette-text-primary) !important;
    }

    .cap-zero[data-val="0.00"] {
        color: transparent !important;
    }





    .cap-new-item-entry {
        border-radius: 50px;
        padding: 4px 12px;
        font-size: 0.75rem;
        border: 1px solid var(--mud-palette-lines-default);
        cursor: pointer;
        background-color: var(--mud-palette-success);
        color: var(--mud-palette-success-text);
        transition: background-color 0.2s, color 0.2s;
        display: inline-flex;
        align-items: end;
        justify-content: center;
        text-align: center;
        margin-left: auto;
    }

        .cap-new-item-entry:hover {
            background-color: var(--mud-palette-success-darken);
        }

    .cap-number.positive {
        color: #289470 !important;
    }

    .cap-number.negative {
        color: #E06666 !important;
    }

    .cap-short-text {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .cap-short-text-container {
        width: 250px;
    }