:root {
    --layout-gap: 20px;
}

button.action-button, a.action-button {
    background-color: white;
}

button.action-button:hover, a.action-button:hover {
    background-color: white;
    color: var(--mud-palette-primary) !important;
}

.mud-table-head th {
    vertical-align: top;
}

th.mud-table-cell {
    padding-right: 0 !important;
    text-wrap-mode: nowrap;
}

.mud-data-grid .mud-table-cell.sticky-left {
    background-color: var(--mud-palette-background) !important;
    border-right: 1px solid var(--mud-palette-table-lines);
}

/* Overrides .mud- */
.numeric-column-header {
    padding-left: 0 !important;
    width: 110px;
}

.numeric-column-header-text {
    display: flex;
    justify-content: end;
    text-align: center !important;
}

.numeric-column-cell {
    text-align: right !important;
}

.icon-column-header {
    text-align: center !important;
}

.icon-column-cell {
    text-align: center !important;
}

.short-text-column-header {
    width: 150px;
}

.medium-text-column-header {
    width: 300px;
}

.datetime-column-header {
    width: 190px;
}

.grid-form {
    max-width: 1200px
}

.grid-row-readonly,
.mud-input-control-input-container:has(.mud-disabled) {
    background-color: var(--mud-palette-action-disabled-background) !important;
}

.mud-input, .mud-input-adornment, label.mud-disabled {
    color: var(--mud-palette-text-primary) !important;
}

.mud-input-error {
    white-space: pre-wrap
}

.mud-list-subheader {
    padding-bottom: 0 !important;
}

.note-tooltip {
    max-width: 500px;
}

.align-right input {
    text-align: right !important;
}

.full-height {
    height: 100vh !important;
}

.background {
    background-image: url('images/background.jpg');
    background-size: cover;
    background-position: center;
}

.centered-text {
    text-align: center;
}

.validation-message {
    font-size: 0.75rem !important;
}

.padded-layout {
    padding: var(--layout-gap);
}

.flex-column-layout {
    display: flex;
    flex-direction: column;
    gap: var(--layout-gap);
}

.flex-row-layout {
    display: flex;
    flex-direction: row;
    gap: var(--layout-gap);
}

body,
.content-background {
    background-color: var(--mud-palette-background-gray) !important;
}

button.icon-button {
    min-width: 32px;
    padding-left: 0;
    padding-right: 0;
}