/* What the port adds over the other sheets: pieces that in WordPress came from plugins
   or from data the static site doesn't have. */

/* ---------- the stock pages' tables ---------- */
figure.history-table { margin: 10px 0; overflow-x: auto; }
figure.history-table table, figure.calendario-dividendos table {
    width: 100%; border-collapse: collapse; font-size: 14px;
}
figure.history-table th, figure.history-table td { padding: 8px 10px; text-align: left; }
figure.history-table.striped tbody tr:nth-child(odd) { background: #f7f7f7; }
figure.history-table thead { border-bottom: 2px solid var(--brdcolor-gray-300); }
figure.calendario-dividendos { margin: 10px 0; }

/* generic content pages */

/* the index pages' sector chart (site.js), drawn as ApexCharts drew it */
#sector-chart { position: relative; padding-top: 14px; font-family: Nunito, sans-serif; }
/* no company with a page, no slice: ApexCharts left the box empty at its min-height */
#sector-chart[data-stocks="[]"] { min-height: 350px; padding-top: 0; }
#sector-chart svg { display: block; margin: 0 auto 14px; overflow: visible; }
#sector-chart path { stroke: #fff; stroke-width: 2px; }
#sector-chart path:hover { filter: brightness(1.12); }
#sector-chart text {
    fill: #fff; font-size: 12px; font-weight: 600; text-anchor: middle; dominant-baseline: central;
    pointer-events: none; filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .45));
}
.sector-chart-legend { display: flex; flex-wrap: wrap; justify-content: center; padding: 0 10px; }
.sector-chart-legend > span { margin: 2px 5px; font-size: 12px; line-height: 16px; color: #373d3f; }
.sector-chart-legend .marker {
    display: inline-block; width: 12px; height: 12px; margin-right: 3px; border-radius: 50%;
    vertical-align: -1px;
}
.sector-chart-tip {
    position: absolute; z-index: 12; max-width: 270px; padding: 6px 10px; border-radius: 5px;
    box-shadow: 2px 2px 6px -4px #999; color: #fff; font-size: 12px; line-height: 1.6;
    pointer-events: none;
}
@media screen and (max-width: 576px) {
    .sector-chart-tip { top: 5px; left: 0; }
}