/* Web view styling
 *
 * NOTE - Sizing is computed dynamically in Page.react.js
 */
.ddk-container .ddk-page {
    margin-left: auto;
    margin-right: auto;

    margin-top: 20px;
    margin-bottom: 20px;

    /*
     * Note that overflow hidden doesn't hide content in the padding -
     * that is handled by background color on the page footer
     */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* TODO - Themed styles */
    border: thin var(--border) solid;
}

.ddk-container .ddk-page--inner {
    flex: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /*
     * Allow up to 5px of overflow
     * to accomodate closely bounded 
     * box-shadow and borders.
     * Workaround for bad browser behaviour;
     * overflow-x/y mutate each other
     * see https://stackoverflow.com/a/39554003
     */
    padding: 5px;
    margin: -5px;
    /*
     * otherwise, the hack above results
     * in asymmetric page margins
     */
    box-sizing: content-box;
    display: flex;
    flex-direction: column;
}

/* Footer */
.ddk-container .ddk-page__footer_number {
    display: inline-block;
    float: right;
    padding-left: 5px;
    padding-right: 5px;
}

.ddk-container .ddk-page__header,
.ddk-container .ddk-page__footer {
    font-size: 0.8em;
}

/* Typography */
/*
 * Using a separate class so that we can use the same styles in
 * the theme editor preview */
.ddk-container .ddk-page__typography h1,
.ddk-container .ddk-page__typography h2,
.ddk-container .ddk-page__typography h3,
.ddk-container .ddk-page__typography h4,
.ddk-container .ddk-page__typography h5,
.ddk-container .ddk-page__typography h6 {
    margin-top: 10px;
    margin-bottom: 10px;
}
.ddk-container .ddk-page__typography h1 {font-size: 2.5em;}
.ddk-container .ddk-page__typography h2 { font-size: 1.6em;}
.ddk-container .ddk-page__typography h3 { font-size: 1.4em;}
.ddk-container .ddk-page__typography h4 { font-size: 1.3em;}
.ddk-container .ddk-page__typography h5 { font-size: 1.2em;}
.ddk-container .ddk-page__typography h6 { font-size: 1.1em;}

/* print-context styles */
.ddk-container .ddk-report--print-context,
.ddk-container .ddk-report--print-context * {
    visibility: visible;
}

.ddk-container .ddk-report--print-context {
    position: absolute;
    left: 0;
    top: 0;
}
.ddk-container .ddk-report--print-context .ddk-page {
    /* setting border to 'none' increases page dimensions by the border width */
    border: thin transparent solid;
    margin: 0px;
    page-break-after: always;
}

.ddk-container .ddk-page .ddk-page--inner .block.dynamic-heights,
.ddk-container .ddk-page .ddk-page--inner .card.dynamic-heights .card--content {
    display: flex;
    flex-direction: column;
}

.ddk-container .ddk-page .ddk-page--inner .card.dynamic-heights .card--content {
    flex-grow: 1;
}

.ddk-container .ddk-page .ddk-page--inner .row.dynamic-heights {
    flex-grow: 1;
}

/* Chrome will allow overflow on a card without this rule */
.ddk-container .ddk-page .ddk-page--inner .card:not(.dynamic-heights) .card--content:not(.controls) {
    height: initial;
}

.ddk-container .ddk-page .ddk-page--inner .card.dynamic-heights .card--content:not(.controls) {
    flex-grow: 1;
}

.ddk-container .ddk-page .ddk-page--inner .card.dynamic-heights .dash-graph,
.ddk-container .ddk-page .ddk-page--inner .block.dynamic-heights .dash-graph,
.ddk-container .ddk-page .ddk-page--inner .row.dynamic-heights .dash-graph {
    flex-grow: 1;
}

.ddk-container .ddk-page .ddk-page--inner .dash-graph.dynamic-heights  {
    flex-grow: 1;
}

.ddk-container .ddk-page .ddk-page--inner .dash-graph.dynamic-heights .plot-container.plotly {
    height: inherit !important;
}

.ddk-container .ddk-page .ddk-page--inner .dash-graph.dynamic-heights .plot-container.plotly .svg-container {
    height: inherit !important;
}

.ddk-container .ddk-page .ddk-page--inner .row .dash-graph.dynamic-heights .plot-container.plotly {
    width: inherit !important;
}

.ddk-container .ddk-page .ddk-page--inner .row .dash-graph.dynamic-heights .plot-container.plotly .svg-container {
    width: inherit !important;
}

/*    */

.ddk-container .ddk-page .ddk-page--inner .card.dynamic-heights .dash-graph .plot-container.plotly,
.ddk-container .ddk-page .ddk-page--inner .block.dynamic-heights .dash-graph .plot-container.plotly,
.ddk-container .ddk-page .ddk-page--inner .row.dynamic-heights .dash-graph .plot-container.plotly {
    height: inherit !important;
}

.ddk-container .ddk-page .ddk-page--inner .card.dynamic-heights .dash-graph .plot-container.plotly .svg-container,
.ddk-container .ddk-page .ddk-page--inner .block.dynamic-heights .dash-graph .plot-container.plotly .svg-container,
.ddk-container .ddk-page .ddk-page--inner .row.dynamic-heights .dash-graph .plot-container.plotly .svg-container {
    height: inherit !important;
}

.ddk-container .ddk-page .ddk-page--inner .row.dynamic-heights .dash-graph .plot-container.plotly {
    width: inherit !important;
}

.ddk-container .ddk-page .ddk-page--inner .row.dynamic-heights .dash-graph .plot-container.plotly .svg-container {
    width: inherit !important;
}