:root {
    --neutral-fill-layer-rest: var(--color-tertiary) !important;
    --neutral-fill-stealth-rest: var(--color-primary) !important;
    --neutral-fill-stealth-hover: var(--color-primary-alt) !important;
    --neutral-fill-stealth-active: var(--color-primary-alt) !important;
    --accent-fill-hover: var(--color-primary) !important;
    --neutral-fill-input-alt-hover: var(--color-primary) !important;
    --accent-fill-rest: var(--color-primary-alt) !important;
    --accent-fill-active: var(--color-primary) !important;
}

.column-header.select-all {
    --accent-fill-rest: var(--font-th-color) !important;
    --neutral-fill-inverse-rest: var(--font-th-color) !important;
    justify-content: center;
}

fluent-button > svg {
    --accent-fill-rest: var(--font-th-color) !important;
}

.paginator-nav > fluent-button > svg {
    --accent-fill-rest: var(--color-primary) !important;
}

.paginator {
    margin: 0 !important;
    padding: .5rem 1rem !important;
}

.fluent-data-grid.grid {
    grid-template-rows: auto 1fr;
}


.fluent-data-grid-row .column-header {
    color: var(--font-th-color) !important;
    font-weight: bold !important;
    --neutral-foreground-rest: var(--font-th-color) !important;
    display: flex;
    align-items: center;
}

.FluentDataGrid-header-icon {
    width: 100%;
    display: flex;
    justify-content: end;
    align-items: center;
    height: 100%;
    padding: 0 2rem 0 0;
    gap: 1rem;
}

.fluent-data-grid-row:nth-child(2n) > * {
    background-color: var(--tr-secondary-color);
}

.fluent-input-container, /*hag*/
.fluent-input,
.fluent-input > div /*regle pour le listBox*/ {
    display: flex !important;
    flex-direction: row !important;
    gap: 1rem;
    width: 100%;
    --label-width: 11rem;
}

    .fluent-input > div /*regle pour le listBox*/ {
        border: none !important;
    }

    .fluent-input fluent-listbox /*regle pour le listBox*/ {
        display: flex;
        flex-direction: column;
        overflow: auto;
        border: 1px solid var(--neutral-stroke-rest) !important;
    }

        .fluent-input fluent-listbox > fluent-option /*regle pour le listBox*/ {
            overflow: unset !important;
            margin: 0;
        }

    .fluent-input-container > div > .fluent-input-label, /*hag*/
    .fluent-input-container > .fluent-input-label, /*hag*/
    .fluent-input > div > .fluent-input-label,
    .fluent-input > .fluent-input-label {
        margin-bottom: 0 !important;
        width: var(--label-width);
        min-width: var(--label-width);
        max-width: var(--label-width);
    }

    .fluent-input-container > fluent-text-field, /*hag*/
    .fluent-input-container > fluent-select, /*hag*/
    .fluent-input-container > fluent-number-field, /*hag*/
    .fluent-input > fluent-text-field,
    .fluent-input > fluent-select,
    .fluent-input > fluent-number-field {
        width: 100%;
        min-width: auto;
    }

    .fluent-input > .fluent-autocomplete-multiselect > fluent-text-field {
        width: calc(100% - var(--label-width)) !important;
        min-width: calc(100% - var(--label-width)) !important;
    }

    .fluent-input > fluent-checkbox {
        padding: 0 0 0 var(--label-width);
    }

fluent-option {
    --accent-fill-rest: var(--color-primary) !important;
}

.column-header > div {
    width: 100%;
}

.fluent-input fluent-text-area {
    width: 100%;
}

.fluent-calendar .day[disabled]{
    position: relative;
}

.fluent-calendar .day:not([selected]):not([multi-day])[today]{
    opacity: var(--multi-select-opacity);
}
.fluent-calendar .day[multi-day]::before, 
.fluent-calendar .day[multi-start]::before, 
.fluent-calendar .day[multi-end]::before {

    opacity: 0 !important;
}
.fluent-calendar .day[multi-day], 
.fluent-calendar .day[multi-start], 
.fluent-calendar .day[multi-end] {
    background: var(--accent-fill-rest) !important;
}
.fluent-calendar[b-bgn9u4guxz] .day[multi-day-over]{ 
    opacity: 0.2;
    color: white;
}