body {
    background-color: #fafafa; /* background color */
    color: #212121;            /* text color */
}

header,
#messages,
button.pin,
.select-box,
.select-box select,
.formbtns button {
    background-color: #2d2d2d; /* toolbar & messages & default buttons background color */
    color: #d5d5d5;            /* toolbar & messages & default buttons text color */
}

.select-box:hover::after {
    color: #ffffff;            /* on roll over select arrow color */
}

input[name=pin] {
    background-color: #fafafa; /* PIN background color */
    border-color: #cccccc;     /* PIN border color */
}

button.pin.backspace svg path {
    fill: #d5d5d5;             /* backspace color */
}

.formbtns button[type=submit] {
    background-color: #5edb16; /* primary button background color */
    color: #212121;            /* primary button text color */
}

tr,
label {
    border-color: #cccccc;     /* separator line color */
}

section,
fieldset {
    background-color: #ffffff; /* card background color */
}

input[type=checkbox] + label:before {
    background-color: #cccccc; /* switch unchecked pad color */
}

input[type=checkbox] + label:after {
    background-color: #eeeeee; /* switch unchecked circle color */
}

input[type=checkbox]:checked + label:before {
    background-color: #91e85d; /* switch checked pad color */
}

input[type=checkbox]:checked + label:after {
    background-color: #5edb16; /* switch checked circle color */
}

#checkin svg path {
    fill: #4CAF50;             /* check-in icon color */
}

#checkout svg path {
    fill: #DA2A2A;             /* check-out icon color */
}

button#checkin,
button#checkout {
    background-color: transparent; /* check-in & check-out buttons on roll out background color */
}
button#checkin:hover,
button#checkout:hover {
    background-color: #f2f2f2; /* check-in & check-out buttons on roll over background color */
}