body {
 /*font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
 Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 line-height: 1.4;
 background: #fefefe;
 color: #333;
 margin: 0 1em;*/
}

table {
 margin-left: auto;
 margin-right: auto;
 border-collapse: collapse;
}

caption {
 text-align: left;
 font-style: italic;
 padding: 0.25em 0.5em 0.5em 0.5em;
}

th,
td {
 padding: 0.25em 0.5em 0.25em 1em;
 vertical-align: text-top;
 text-align: left;
 text-indent: -0.5em;
}

th {
 vertical-align: bottom;
 background-color: #202950;
 color: #fff;
 font-weight: bold;
}

td[colspan] {
 background-color: #eee;
 color: #000;
 font-weight: normal;
 font-style: italic;
 padding-top: 10px;
 padding-bottom: 10px;
 text-indent: 0;
}

tr.shown, tr.hidden {
 background-color: #eee;
 display: table-row;
}

tr.hidden {
 display: none;
}

.row button {
 background-color: transparent;
 border: .1em solid transparent;
 font: inherit;
 padding: 0.25em 0.5em 0.25em .25em;
 width: 100%;
 text-align: left;
}

.row button:focus, .row button:hover {
 background-color: #ddd;
 /*outline: .2em solid #00f;*/
 outline: .2em solid #202950;
}

.row button svg {
 width: .8em;
 height: .8em;
 margin: 0 0 -.05em 0;
 fill: #66f;
 transition: transform 0.25s ease-in;
 transform-origin: center 45%;
}

.row button:hover svg,
.row button:focus svg {
 fill: #00c;
}

/* Lean on programmatic state for styling */
.row button[aria-expanded="true"] svg {
 transform: rotate(180deg);
}

.cell button {
 font-size: 60%;
 color: #000;
 /*background-color: #00f;*/
 background-color: #202950;
 padding: 0.3em 0.2em 0 0.2em;
 /*border: 0.2em solid #00f;*/
 border: .2em solid #202950;
 border-radius: 50%;
 line-height: 1;
 text-align: center;
 text-indent: 0;
 transform: rotate(270deg);
}

.cell button svg {
 width: 1.25em;
 height: 1.25em;
 fill: #fff;
 transition: transform 0.25s ease-in;
 transform-origin: center 45%;
}

.cell button:hover,
.cell button:focus {
 background-color: #fff;
 outline: none;
 outline: none;
}

.cell button:hover svg,
.cell button:focus svg {
 /*fill: #00f;*/
 fill: #202950;
}

/* Lean on programmatic state for styling */
.cell button[aria-expanded="true"] svg {
 transform: rotate(90deg);
}

/* Proven method to visually hide something but */
/* still make it available to assistive technology */
.visually-hidden {
 position: absolute;
 top: auto;
 overflow: hidden;
 clip: rect(1px 1px 1px 1px); /* IE 6/7 */
 clip: rect(1px, 1px, 1px, 1px);
 width: 1px;
 height: 1px;
 white-space: nowrap;
}