:root {
    --primary-900: #022E5F;
    --primary-800: #296693;
    --grey-700: #6E7781;
    --grey-600: #9EA4AB;
    --grey-500: #CFD2D5;
    --grey-400: #E7E9EA;
    --grey-300: #F3F3F4;
    --grey-100: #fff;
    --error-900: #5f0202;
    --error-300: #f5c4c4;
}

table {
    border-collapse: collapse;
    margin-bottom: 10px;
}

thead tr {
    border-bottom: 2px solid black;
    background: #424242;
    color: white;
}

tfoot tr {
    border-top: 2px solid black;
    background: #e0e0e0;
}

td {
    padding: 2px 5px;
    border-top: 1px solid black;
}

tr.new {
    background: #e5ffe5;
}

td.number {
    text-align: right;
}

body, button, input[type=text], input[type=password], input[type=submit] {
    font-family: sans-serif;
}

button, input[type=submit] {
    border: 0;
    padding: 12px 16px;
    border-radius: 100px;
    font-weight: 700;
    border-width: 1px;
    border-style: solid;
}

.button-primary {
    background-color: var(--primary-900);
    color: var(--grey-100);
    border-color: var(--primary-900);
}

.button-primary:hover {
    background-color: var(--primary-800);
}

.button-secondary {
    background-color: transparent;
    color: var(--primary-900);
    border-color: var(--grey-500);
}

.button-secondary:hover {
    background-color: var(--grey-300);
}

.button-container {
    margin-top: 24px;
    width: 100%;
}

.subtotal {
    border-top: 3px solid black;
}