/*
 * Tabulizer — Chart Wizard runtime styles.
 *
 * Shipped with Tabulizer rather than with the wizard, so an imported ruleset
 * keeps its layout whatever the status of the online wizard.
 */

.tabulizer-chartjs-wrapper {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

.tabulizer-chartjs-wrapper canvas {
    box-sizing: border-box;
    max-width: 100%;
}

/*
 * The data behind the chart, for anyone who cannot see it.
 *
 * Off-screen rather than display:none — a hidden element is removed from the
 * accessibility tree, which would defeat the point. This is the standard
 * visually-hidden pattern: present to a screen reader, absent to everyone else.
 */
.tabulizer-chartjs-data {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/*
 * ...unless the author asked for it to be visible, in which case it is a plain
 * readable table under the chart. Some audiences want the numbers on screen.
 */
.tabulizer-chartjs-wrapper.tabulizer-chartjs-show-data .tabulizer-chartjs-data {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 16px 0 0 !important;
    overflow: auto !important;
    clip: auto !important;
    white-space: normal !important;
}

.tabulizer-chartjs-wrapper.tabulizer-chartjs-show-data .tabulizer-chartjs-data table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}

.tabulizer-chartjs-wrapper.tabulizer-chartjs-show-data .tabulizer-chartjs-data caption {
    padding-bottom: 6px;
    font-weight: 600;
    text-align: left;
}

.tabulizer-chartjs-wrapper.tabulizer-chartjs-show-data .tabulizer-chartjs-data th,
.tabulizer-chartjs-wrapper.tabulizer-chartjs-show-data .tabulizer-chartjs-data td {
    padding: 6px 10px;
    border: 1px solid #d7dde4;
    text-align: left;
}

.tabulizer-chartjs-wrapper.tabulizer-chartjs-show-data .tabulizer-chartjs-data thead th {
    background: #f4f7fb;
}