html {
   font-family: sans-serif;
}
.tab { margin-left: 10px; }

table {
   border-collapse: collapse;
   border: 2px solid rgb(200,200,200);
   letter-spacing: 1px;
   font-size: 0.9rem;
   margin-left: 10px;
}

td, th {
   border: 1px solid rgb(190,190,190);
}

td {
   text-align: center;
}

td.circles:before {
  content: attr(data-char);
  display: block;
  background: black;
  width: 20px;
  height: 20px;
  line-height:20px;
  text-align:center;
  vertical-align: middle;
  border-radius: 30%;
  margin:0 auto;
}

td.circleb:before {
  content: attr(data-char);
  display: block;
  background: white;
  width: 20px;
  height: 20px;
  line-height:20px;
  text-align:center;
  vertical-align: middle;
  border-radius: 30%;
  margin:0 auto;
}

td.circlex:before {
  content: attr(data-char);
  display: block;
  background: white;
  width: 20px;
  height: 20px;
  line-height:20px;
  text-align:center;
  vertical-align: middle;
  border-radius: 30%;
  margin:0 auto;
}

td.circleg:before {
  content: attr(data-char);
  display: block;
  background: green;
  width: 20px;
  height: 20px;
  line-height:20px;
  text-align:center;
  vertical-align: middle;
  border-radius: 30%;
  margin:0 auto;
}
.tdrect {
     display: inline-block;

}

th {
   text-align: center;
}

caption {
   padding: 10px;
}

.thcol
{
   vertical-align: bottom;
}

.throw
{
   text-align: end;
}

.trbrow {
   border-bottom: 2px solid #000;
}

.trtrow {
   border-top: 2px solid #000;
}

.collapsible {
  color: black;
  padding: 18px;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover, button:hover {
  background-color: #add8e6;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

#footer {
  position: relative;
  margin-top: -180px;
  /* negative value of footer height */
  height: 180px;
  clear: both;
  background-color: red;
}

 /* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}