/**
 * @file
 * Visual styles for tables.
 */

table caption {
  letter-spacing: 0.02em;
  line-height: var(--sp);
  font-weight: bold;
}
table th {
    font-weight: 500;
}
.attack {
    background: var(--color--light-green);
}
tr.ignore-placing {
    opacity: 0.5;
}
table.combined {
    border: 10px solid var(--color--gold);
}
table.combined, tr.combined.recognize-placing {
    background: var(--color--gold);
}
table.combined td {
    border-bottom: 1px solid var(--color--gold)
}
.combined-marker {
    margin-right: 0.5rem;
    color: var(--color--gold);
    background: var(--color--gold);
}
table.leisure {
    border: 10px solid var(--color--light-blue);
}
table.leisure, tr.leisure.recognize-placing {
    background: var(--color--light-blue);
}
table.leisure td {
    border-bottom: 1px solid var(--color--light-blue)
}
.leisure-marker {
    margin-right: 0.5rem;
    color: var(--color--light-blue);
    background: var(--color--light-blue);
}
table.parlor {
    border: 10px solid var(--color--light-purple);
}
table.parlor, tr.parlor.recognize-placing {
    background: var(--color--light-purple);
}
table.parlor td {
    border-bottom: 1px solid var(--color--light-purple)
}
.parlor-marker {
    margin-right: 0.5rem;
    color: var(--color--light-purple);
    background: var(--color--light-purple);
}
.not-qualified, .defend {
    background: var(--color--light-red);
}
.exception {
    text-align: center;
    font-size: 80%;
}
.play-marker {
    margin-right: 0.5rem;
    background: var(--color--light-blue);
    color: var(--color--light-blue);
}
td.image {

}
td.image img {
    display: block;

    margin: auto;
}
td.emphasize {
    background: var(--color--light-blue);
}
.defend-marker {
    margin-right: 0.5rem;
    color: var(--color--light-red);
    background: var(--color--light-red);
}
.attack-marker {
    margin-right: 0.5rem;
    color: var(--color--light-green);
    background: var(--color--light-green);
}
.ignore-marker {
    margin-right: 0.5rem;
    color: var(--color--gray-95);
    background: var(--color--gray-95);
}
.stats-table tr.odd {
    background: var(--color--gray-95);
}
.stats-table tr.even {
    background: var(--color--gray-100);
}
table td {
    padding: 0.2rem 1rem;
}
table tfoot {
    font-size: var(--font-size-xxs);
    font-style: italic;
    font-weight: normal;
    border-bottom: 1px solid var(--color-gray-200);
    line-height: 95%;
}
.highlight-cell {
    font-weight: 600;
}
.podium-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.podium-grid table {
    margin: 0 2em;
    border-collapse: collapse;
}
.podium-grid caption {
    padding: 10px 0 5px;
    font-size: 120%;
}
.podium-grid td {
    width: 15%;
}
.podium-grid td.player {
    width: 70%;
}
td.total {
    text-align: center;
}
.marker-table {
    margin: 0 auto;
}
.marker-table th {
    position: sticky;
    top: 0;
    background: #fff;
}
.marker-table td {
    width: 50px;
}
.marker-table td.marker {
    border: 1px solid #000;
    text-align: center;
    font-size: 150%;
}
td.table-y-axis {
    text-align: right;
}
.stats-table .views-table {
    border-collapse: separate;
    border-spacing: 2px;
}
.stats-table .views-table td {
    border-bottom: 0px;
}
.results-table {
    width: 50%;
    margin: 0 auto 2em;
}
.results-table table caption {
    text-align: center;
}
.wide-table, .semiwide-table {
    overflow-x: auto;
}
.wide-table table {
    width: 98%;
    margin: 1em auto;
}
.semiwide-table table {
    width: 80%;
    margin: 1em auto;
}
.wide-table table.rotate-table caption {
    margin-bottom: 7em;
}
.wide-table table.rotate-table td.first {
    overflow: hidden;
}
.wide-table table.rotate-table th.rotate, .wide-table table.rotate-table td.data {
    max-width: 20px;
    overflow: visible;
}
.wide-table th.rotate {
    text-align: left;
    transform-origin: 14px -7px;
    transform: rotate(-70deg);
    white-space: nowrap;
    font-size: 70%;
}
.wide-table td.first {
    text-align: left;
    padding-left: 5px;
    font-size: 90%;
}
.wide-table td.data, .semiwide-table td.data {
    text-align: center;
}
.scorecard .footnote {
    width: 80%;
    margin: 1em auto;
}
th.rotate {
    font-size: 80%;
    text-transform: uppercase;
}
th.stack {
    display: block;
    word-wrap: break-word;
}
.scorecard .data {
    width: 8%;
}
.honors-table .data {
    width: 11%;
}
.bonuses-table {
    margin-top: 1em;
}
.bonuses-table .data {
    width: 15%;
}
.honors-table, .bonuses-table {
    margin-bottom: 1em;
}
.use-page table {
    width: 50%;
    margin: 1em auto;
}
.center-table table td {
    text-align: center;
}
table tr.pad {
    visibility: hidden;
}
.manage-table table {
    width: 80%;
    margin: 0 auto;
}
@media (max-width: 1080px) {
    .podium-grid {
	grid-template-columns: repeat(1, 1fr);
    }
    .podium-grid table {
	margin: 0 5px 1em;
    }
    .wide-table table, .semiwide-table table, .use-page table {
	width: 98%;
    }
    .scorecard .footnote {
	width: 98%;
	margin: 0 auto;
	font-size: 70%;
    }
    .wide-table td {
	padding-left: 0;
	padding-right: 0;
    }
    table tr.pad {
	display: none;
    }
}
@media (max-width: 700px) {
    table {
	font-size: 80%;
    }
    .scorecard table {
 	margin-top: 2em;
    }
    .bonuses-table table {
 	margin-top: 3em;
    }
    .honors-table table {
 	margin-top: 6em;
    }
    table.rotate-table th.first, table.rotate-table td.first {
	overflow: hidden;
    }
    table.rotate-table th.rotate, table.rotate-table td.data {
	max-width: 20px;
	overflow: visible;
    }
    th.rotate {
	text-align: left;
	transform-origin: 24px -22px;
	transform: rotate(-70deg);
	white-space: nowrap;
	font-size: 70%;
    }
    .rotate-table td.first {
	font-size: 70%;
    }
}
@media (max-width: 575px) {
    .scorecard table td {
	padding: 0;
    }
}
@media (max-width: 550px) {
    th.rotate {
	transform-origin: 16px -10px;
    }
}
@media (max-width: 400px) {
    th.rotate {
	transform-origin: 13px -6px;
    }
}