:root {
    --table-missing-color: #ffd1d1;
    --table-special-color: #bbe4c9;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

.table-section {
    display: flex;
    gap: 1rem;
}

.deployment-table tr:nth-child(odd) {
    background-color: #f2f2f2;
}

.deployment-table td, th {
    padding: 0.25rem;
    text-align: center;
    min-width: 5rem;
}

.deployment-table th {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.deployment-table tbody tr > td:first-child {
    text-align: left;
}

.legend {
    list-style-type: none;
    margin-top: 4rem;
}

.legen__container {
    margin-top: 3rem;
}

.legend > li {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.legend__colorBox {
    width: 1.5rem;
    height: 1.5rem;
    border: solid 1px #acacac;
    border-radius: 0.25rem;
}

.legend__colorBox[name="missing"] {
    background-color: var(--table-missing-color);
}