.rationale {
width: 100%;
font-size: 16px;
}
.rationale th,
.rationale td {
padding: 0.5em;
box-sizing: border-box;
}
.rationale .head th {
text-align: center;
}
.rationale .body th {
width: 15%;
background-color: #ccf;
text-align: right;
}
.rationale .head div:not(.heading),
.rationale .body {
font-size: 0.875em;
}
.rationale .foot {
display: none;
}
.rationale .hint {
font-size: 0.875em;
}
.rationale .spanning {
background-color: #d8e0ff;
vertical-align: middle;
}
@media only screen and (max-width: 600px) {
.rationale,
.rationale tbody,
.rationale tr,
.rationale th,
.rationale td {
display: block;
}
.rationale .body th {
width: 100%;
text-align: center;
}
}