/* Maybe all the colors have to be hard-coded */

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: var(--my-background-color);
}

html, body * {
    scrollbar-color: var(--my-foreground-color) var(--my-background-color) !important;
    scrollbar-width: thin;
}

.mud-typography {
    color: var(--my-foreground-color) !important;
}

.mud-grid {
    background-color: var(--my-background-color);
}

.mud-input-outlined .mud-input-outlined-border,
.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--my-foreground-color) !important;
}

.mud-focused .mud-input-outlined-border {
    border-color: var(--my-foreground-color) !important;
    border-width: 1px !important;
}

.mud-input-adornment {
    color: var(--my-foreground-color) !important;
}

.mud-table {
    background-color: var(--my-background-color) !important;
    box-shadow: none !important;
}

.mud-table-cell {
    color: var(--my-foreground-color) !important;
}

.mud-table-head .mud-table-cell {
    background-color: var(--my-background-color) !important;
}

.mud-table-container {
    border: none !important;
}

.mud-icon-root {
    color: var(--my-foreground-color) !important;
}

.mud-select .mud-input-root {
    color: var(--my-foreground-color) !important;
    background-color: var(--my-background-color) !important;
}

.mud-select .mud-input-outlined-border {
    border-color: var(--my-foreground-color) !important;
}

.mud-popover .mud-list {
    background-color: var(--my-background-color) !important;
    color: var(--my-foreground-color) !important;
}

.mud-list-item {
    color: var(--my-foreground-color) !important;
}

.mud-input-root {
    color: var(--my-foreground-color) !important;
    background-color: var(--my-background-color) !important;
}

.mud-input-label {
    color: var(--my-foreground-color) !important;
}

.mud-input-helper-text {
    color: var(--my-foreground-color) !important;
}