:root {
--unknown-bg-color: red;
--na-bg-color: #777777;
--request-bg-color: #ddd;
--choosing-bg-color: #5bc0de;
--waiting-bg-color: #f0ad4e;
--rechoosing-bg-color: #a53ce6;
--printing-bg-color: #ff66ff;
--approving-bg-color: #d1de10;
--accept-bg-color: #5cb85c;
--repair-bg-color: #b36623;
--cancel-bg-color: #777777;
--approved-bg-color: #5cb85c;
--unapproved-bg-color: #f44336;

--unknown-fg-color: white;
--na-fg-color: white;
--request-fg-color: #aaa;
--choosing-fg-color: white;
--waiting-fg-color: white;
--rechoosing-fg-color: white;
--printing-fg-color: white;
--approving-fg-color: green;
--accept-fg-color: honeydew;
--repair-fg-color: white;
--cancel-fg-color: white;
--approved-fg-color: white;
--unapproved-fg-color: white;
}

.label-status {
display: inline-block;
min-width: 100px;
height: 23px;
padding: 1px 10px;
text-align: center;
margin-right: 5px;
}

    .label-status.na::before {
    content: "Na";
    }

    .label-status.na {
    background-color: var(--na-bg-color);
    color: var(--na-fg-color);
    font-weight: bold;
    }
    .label-status.unknown::before {
    content: "Unknown";
    }

    .label-status.unknown {
    background-color: var(--unknown-bg-color);
    color: var(--unknown-fg-color);
    font-weight: bold;
    }
    .label-status.request::before {
    content: "Request";
    }

    .label-status.request {
    background-color: var(--request-bg-color);
    color: var(--request-fg-color);
    font-weight: bold;
    }
    .label-status.choosing::before {
    content: "Choosing";
    }

    .label-status.choosing {
    background-color: var(--choosing-bg-color);
    color: var(--choosing-fg-color);
    font-weight: bold;
    }
    .label-status.waiting::before {
    content: "Waiting";
    }

    .label-status.waiting {
    background-color: var(--waiting-bg-color);
    color: var(--waiting-fg-color);
    font-weight: bold;
    }
    .label-status.rechoosing::before {
    content: "Rechoosing";
    }

    .label-status.rechoosing {
    background-color: var(--rechoosing-bg-color);
    color: var(--rechoosing-fg-color);
    font-weight: bold;
    }
    .label-status.printing::before {
    content: "Printing";
    }

    .label-status.printing {
    background-color: var(--printing-bg-color);
    color: var(--printing-fg-color);
    font-weight: bold;
    }
    .label-status.approving::before {
    content: "Approving";
    }

    .label-status.approving {
    background-color: var(--approving-bg-color);
    color: var(--approving-fg-color);
    font-weight: bold;
    }
    .label-status.accept::before {
    content: "Accept";
    }

    .label-status.accept {
    background-color: var(--accept-bg-color);
    color: var(--accept-fg-color);
    font-weight: bold;
    }
    .label-status.repair::before {
    content: "Repair";
    }

    .label-status.repair {
    background-color: var(--repair-bg-color);
    color: var(--repair-fg-color);
    font-weight: bold;
    }
    .label-status.cancel::before {
    content: "Cancel";
    }

    .label-status.cancel {
    background-color: var(--cancel-bg-color);
    color: var(--cancel-fg-color);
    font-weight: bold;
    }
    .label-status.unapproved::before {
    content: "Unapproved";
    }

    .label-status.unapproved {
    background-color: var(--unapproved-bg-color);
    color: var(--unapproved-fg-color);
    font-weight: bold;
    }
    .label-status.approved::before {
    content: "Approved";
    }

    .label-status.approved {
    background-color: var(--approved-bg-color);
    color: var(--approved-fg-color);
    font-weight: bold;
    }