body {
    font-family: Roboto, Arial, 'Segoe UI';
    font-size: .85rem;
    margin: 0;
}

input {
    font-family: Roboto, Arial, 'Segoe UI';
    font-size: .85rem;
}

header {
    background-color: #252532;
    padding: .75% 1%;
}

main {
    padding: .75% 1%;
    overflow: hidden;
}

.form {
    display: table;
    border-collapse: separate;
    border-spacing: 0px 6px;
}

.table {
    display: table;
    border-spacing: 0px 10px;
}

.row {
    display: table-row;
}

.cell {
    display: table-cell;
    empty-cells: hide;
}

h1 {
    font-size: 1.3rem;
    font-weight: 500;
    color: #404854;
}

label {
    font-weight: 600;
    color: #252532;
    font-size: .8rem;
    padding-right: 10px;
}

.add {
    background-color: #165A36;
    color: #fff;
    font-weight: bold;
    border: 1px solid #11482b;
    border-radius: 4px;
    font-size: 100%;
    cursor: pointer;
    width: 30px;
    margin-left: 10px;
    padding: 2px;
}

.delete {
    background-color: #AC2F33;
    color: #fff;
    font-weight: bold;
    border: 1px solid #8E292C;
    border-radius: 4px;
    font-size: 100%;
    cursor: pointer;
    width: 30px;
    margin-left: 10px;
    padding: 2px;
}

.process {
    background-color: #0C5174;
    color: #fff;
    font-weight: bold;
    border: 1px solid #09405c;
    border-radius: 4px;
    cursor: pointer;
    padding: 12px;
}

.message {
    margin: 15px 0 15px 0;
    background-color: #0F6894;
    color: #fff;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #09405c;
    max-width: 600px;
}

.errorMessage {
    margin: 15px 0 15px 0;
    background-color: #B83211;
    color: #fff;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #96290D;
    max-width: 550px;
}