html, body { height: 100%; }
body { font-family: Arial, Helvetica, sans-serif; font-size: 16px; background-color: #eee; color: #333; }

* { box-sizing: border-box; }
a { color: #e04f5f; text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 600px; width: 100%; margin: 0 auto; padding: 10px; }
.box { background-color: #fff; padding: 20px;  border-radius: 5px; }
.error { color: red; text-align: center; margin-bottom: 10px; }

header > div { text-align: center; }

main { margin: 20px 0; }
footer { font-size: 12px; text-align: center; color: #aaa; }

form > div { margin-bottom: 20px; }
form > div > label { display: block; margin-bottom: 5px; }
input, select { width: 100%; padding: 5px; font-size: inherit; color: inherit; }
button { background-color: #e04f5f; border-color: #e04f5f; color: #facb1b; font-size: 14px; font-weight: bold;  padding: 5px 10px; cursor: pointer; }

.table-wrapper { width: 100%; overflow-x: scroll; }
table { width: 100%; overflow: scroll;}
table > thead tr th { padding: 5px; background-color: #facb1b; text-align: left; }
table > tbody tr td { padding: 5px; }