.q3container {
  margin: 0;
  padding: 0;
  text-align: center;
}

.q3border {
  margin: 0px 0 40px 0;
  padding: 0 0 1em 0;
  border: 0;
  border-radius: 30px;
  display: inline-block;
  background: radial-gradient(#2d3436 10%, #000000);
}

.q3table {
  border-collapse: collapse;
  margin: 0;
  margin-left: auto;
  margin-right: auto;
  width: auto;
}
.q3table, .q3table caption, .q3table th, .q3table td {
  border: 0 !important;
}
.q3table caption, .q3table th, .q3table td {
  padding-top: 1px;
  padding-bottom: 1px;
}
.q3table caption {
  padding-top: 1em;
  color: red;
}
.q3table th {
  color: orange;
}
.q3table td {
  line-height: 100%;
  color: white;
}

.text-left   { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right  { text-align: right !important; }

.qc0 { color: black !important; }
.qc1 { color: red !important; }
.qc2 { color: lime !important; }
.qc3 { color: yellow !important; }
.qc4 { color: blue !important; }
.qc5 { color: cyan !important; }
.qc6 { color: magenta !important; }
.qc7 { color: white !important; }
.qc8 { color: orange !important; }
.qc9 { color: cornflowerblue !important; }

.online, .offline {
  display: inline-block;
  position: relative;
  margin: 0;
  vertical-align: middle;
  height: 13px;
  width: 13px;
  border-radius: 50%;
  border: 1px solid black;
}
.online { background-color: lime; }
.offline { background-color: red; }