* { box-sizing: border-box; }
*:before, *:after { box-sizing: inherit; }

body {
    font-family: Lato,Arial,sans-serif;
    padding:20px;
    background-color:#eee;
    font-family:sans-serif;
    color:#444;
    font-size:1.125rem;
    line-height: 1.4;
}
#content {
  margin:0 auto;
  max-width:40rem;
}
label, input, textarea {
  display: block;
  width:100%;
}
.mv1 {
  margin-top:1rem;
  margin-bottom:1rem;
}
.tc_red {
  color: #d00;
}
.bg_white {
  background-color:white;
}
.pv1 {
  padding-top:1rem;
  padding-bottom:1rem;
}
.ph1 {
  padding-left:1rem;
  padding-right:1rem;
}
.centre {
  text-align: center;
}
span.pill {
  font-size:15px;
  margin-right:1rem;
  padding: 0.25em 1em;
  border-radius:2em;
  border: solid 1px #eee;
  display:inline-block;
}
span.pill.rag-r { border-color: #d00; background-color: #d00; }
span.pill.rag-a { border-color: #fc0; background-color: #fc0; }
span.pill.rag-g { border-color: #5c3; background-color: #5c3; }

a.download-button {
  background-color:#ffcc00;
  color:black;
  border: solid 1px #eebb00;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  display:inline-block;
  padding: 1rem 2rem;
  font-size: 1.5rem;
}
h1, h2 { color:#633; }
h1 {
    margin-top:0;
    font-size:32px;
    font-weight:normal;
    margin:1rem 0;
}
h2 {
    font-size:24px;
    font-weight:normal;
    margin:0;
}
#msg {
    padding:20px;
    background-color:#fffffa;
    border:solid 1px #ddd;
}
.warning {
    background-color:#e08f8a;
    color:#100;
}
.good {
    color:#080;
}
.server {
    padding:1em;
    border:solid 1px #ddd;
    background-color:#fffffa;
}
.server.warning {
    border-color:red;
    background-color:#e08f8a;
}