:root {
    --color-background-ok: rgb(195, 230, 203);
    --color-background-degraded: rgb(255, 255, 147);
    --color-background-faulted: rgb(245, 198, 203);
    --color-background-unset: rgb(242, 242, 242);
}

.ok-background {
    background: var(--color-background-ok);
}

.ok-background.not-assigned {
    /* lighten */
    background: color-mix(in srgb, var(--color-background-ok) 50%, white);
}

.table-hover tbody tr.ok-background:hover {
    /* darken */
    background: color-mix(in srgb, var(--color-background-ok) 90%, black);
}

.degraded-background {
    background: var(--color-background-degraded);
}

.table-hover tbody tr.degraded-background:hover {
    /* darken */
    background: color-mix(in srgb, var(--color-background-degraded) 90%, black);
}

.faulted-background {
    background: var(--color-background-faulted);
}

.faulted-background.not-assigned {
    /* lighten */
    background: color-mix(in srgb, var(--color-background-faulted) 50%, white);
}

.table-hover tbody tr.faulted-background:hover {
    /* darken */
    background: color-mix(in srgb, var(--color-background-faulted) 90%, black);
}

.unset-background {
    background: var(--color-background-unset);
}

.table-hover tbody tr.unset-background:hover {
    /* darken */
    background: color-mix(in srgb, var(--color-background-unset) 90%, black);
}

.card-header {
    font-weight: bold;
    font-size: 20px;
}

.table-icon-cell {
    color: black;
    text-align: center;
    font-size: 1.25rem;
}