: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) !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: #FFFFFF70;
}

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

.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: 10rem;
    min-width: 10rem;
    max-width: 10rem;
}

.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% - 11rem) !important;
    min-width: calc(100% - 11rem) !important;
}

.fluent-input > fluent-checkbox {
    padding: 0 0 0 11rem;
}

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

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

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