: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 > div {
    border: none !important;
}

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

    .fluent-input fluent-listbox > fluent-option {
        overflow: unset !important;
        margin: 0;
    }

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

.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-switch {
    --accent-fill-rest: var(--color-primary) !important;
    --accent-fill-hover: var(--color-primary-alt) !important;
    --accent-fill-active: var(--color-primary) !important;
}