/*******************************************************************************
 * This is a desktop-first stylesheet. In other words, all styles outside of a
 * media query apply to a desktop interface. Media queries are used to create
 * styles for smaller interfaces such as mobile phones.
 ******************************************************************************/


/*******************************************************************************
 * Resets.
 */

.dashboard,
.dashboard * {
    box-sizing: border-box;
}

/* Remove the default outline that browsers apply when elements have focus,
 * allowing us to define our own focus styles for all such elements.
 */
.dashboard :focus {
    outline: none;
}

.dashboard-keyboard-mode :focus {
    outline: solid 2px #90c0f0;
}

.dashboard-button {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 0.875rem;
    cursor: pointer;
}

/* By default, Firefox adds some padding around button content, which throws off
 * the sizing.
 */
.dashboard-button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.dashboard-ul {
    list-style-type: none;
    margin: 0;
}

.dashboard-ul li {
    margin: 0;
}


/*******************************************************************************
 * Styles controlling page layout.
 */

#dashboard {
    width: 100%;
    margin-bottom: 40px;
}

#dashboard-intro {
    margin: 0;
    margin-bottom: 20px;
}

/* Use the clearfix hack so parents expand to contain their floated children. */
#dashboard,
#dashboard-intro,
#dashboard-container:after,
.dashboard-layout-row:after,
#dashboard-controls-container:after,
.dashboard-controls-group:after,
.dashboard-modal-button-area:after {
    content: "";
    display: table;
    clear: both;
}

.dashboard-layout-row {
    width: 100%;
}

#dashboard-container {
    margin: 0;
}

#dashboard-graphic-container {
    float: left;
    width: calc(100% - 14rem);
    margin: 0;
}

#dashboard-footnote-container {
    width: 100%;
    margin: 0;
}

#dashboard-controls-container {
    float: right;
    width: 14rem;
    margin: 0;
    padding: 0;
    padding-left: 2em;
}

#dashboard-chart-container,
#dashboard-table-container {
    width: 100%;
}

#dashboard-chart-title-container {
    margin-bottom: 10px;
    padding: 0;
}

#dashboard-chart-title {
    margin-bottom: 30px;
    padding: 0;
}

.dashboard-chart-view #dashboard-table-container {
    display: none;
}

.dashboard-table-view #dashboard-chart-container {
    display: none;
}

#dashboard-filter-reporter-container {
    margin-bottom: 10px;
}

/*******************************************************************************
 * Styles for JavaScript enabled/disabled.
 */

.dashboard-js-enabled .dashboard-nojs-disclaimer {
    display: none;
}

#dashboard-container,
#dashboard-footnote-container {
    display: none;
}

.dashboard-js-enabled #dashboard-container,
.dashboard-js-enabled #dashboard-footnote-container {
    display: block;
}


/*******************************************************************************
 * Styles for the dashboard framing.
 */

#dashboard-container {
    margin-bottom: 20px;
    padding: 20px 10px;
    border: solid 1px #e0e0e0;
}


/*******************************************************************************
 * Styles for buttons.
 */

.dashboard-button {
    color: #000000;
    background-color: #eeeeee;
    border: solid 1px #cccccc;
    border-radius: 4px;
    white-space: nowrap;
}

.dashboard-button:hover {
    background-color: #dddddd;
}

.dashboard-button.dashboard-touching {
    color: #ffffff;
    background-color: #3c66b7;
}

.dashboard-button:focus {
    outline: none;
}

.dashboard-keyboard-mode .dashboard-button:focus {
    box-shadow: 0 0 8px #90c0f0;
}


/*******************************************************************************
 * Styles for the chart title.
 */

#dashboard-chart-title p {
    margin: 0;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: #000000;
    text-align: center;
}

.dashboard-chart-title-label,
.dashboard-chart-title-outcome {
    display: block;
    margin-bottom: 0.5rem;
}

.dashboard-chart-title-outcome {
    font-size: 1.25rem;
    font-weight: bold;
    color: #3c66b7;
}

.dashboard-change-outcome-button,
.dashboard-prev-outcome-button,
.dashboard-next-outcome-button {
    vertical-align: middle;
}

.dashboard-change-outcome-button {
    padding: 0px 6px;
    line-height: 1.5rem;
    font-size: 0.875rem;
    color: #3c66b7;
    font-weight: bold;
}

.dashboard-prev-outcome-button,
.dashboard-next-outcome-button {
    width: 1.5rem;
    height: calc(1.5rem + 2px);

    background-size: 1rem 1rem;
    background-position: center center;
    background-repeat: no-repeat;
}

.dashboard-prev-outcome-button {
    background-image: url('../images/system/arrow-left.svg');
}

.dashboard-next-outcome-button {
    background-image: url('../images/system/arrow-right.svg');
}

.dashboard-prev-outcome-button.dashboard-touching {
    background-image: url('../images/system/arrow-left-white.svg');
}

.dashboard-next-outcome-button.dashboard-touching {
    background-image: url('../images/system/arrow-right-white.svg');
}

.dashboard-prev-outcome-button span,
.dashboard-next-outcome-button span {
    display: none;
}


/*******************************************************************************
 * Styles for the population restrictions.
 */

.dashboard-outcome-skipped .dashboard-responding-group-label,
.dashboard-responding-group-size {
    font-weight: bold;
}

#dashboard-filter-reporter-container p {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.4rem;
}

.dashboard-filter-reporter-list {
    font-weight: bold;
}

.dashboard-clear-filters {
    margin-left: 1em;

    /* We want the button height to be less than or equal to the containing p's
     * line height to avoid having the content below jump when the button is
     * hidden/shown. The height of the button can be calculated as the sum of
     * the border size, the top and bottom padding, and the line height of the
     * button text. Note that Firefox doesn't yet support calc() in line-height,
     * so we'll just have to use trial-and-error to find appropriate values for
     * the button and the p.
     */
    padding: 0 6px;
    line-height: 1.35rem;

    font-size: 0.75rem;
}

.dashboard-filter-list-empty .dashboard-clear-filters {
    display: none;
}


/*******************************************************************************
 * Styles for the chart axes.
 */

.dashboard-chart-axis {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

.dashboard-chart-axis text {
    fill: black;
    stroke: none;
}

.dashboard-chart-axis text,
.dashboard-chart-y-axis-label {
    font-size: 11px;
}


/*******************************************************************************
 * Styles for the outcome chart.
 *
 * Here, the .bar elements are groups containing an .estimate (rect) and an
 * .interval (lines).
 */

.dashboard-focus-out {
    opacity: 0.15;
    transition: opacity 0.5s;
}

.dashboard-chart-y-axis-label-bg {
    fill: #ffffff;
}

/* Prevent the outline around the <a> element. If all browsers drew it, we would
 * use it and be done, but currently Chrome is the only browser that draws an
 * outline around an <a> inside an SVG. Therefore, we get our outline using a
 * background rect. But we don't want both outlines in Chrome, so disable the
 * one around the <a>.
 */
.dashboard-keyboard-mode .dashboard-chart-row a:focus {
    outline: none;
}

.dashboard-keyboard-mode a:focus .dashboard-chart-y-axis-label-bg {
    stroke: #90c0f0;
    stroke-width: 2px;
}

.dashboard-chart-y-axis-label-group.dashboard-touching .dashboard-chart-y-axis-label-bg{
    fill: #3c66b7;
}

.dashboard-chart-y-axis-label-group.dashboard-touching .dashboard-chart-y-axis-label {
    fill: #ffffff;
}

.dashboard-chart-bar-estimate,
.dashboard-chart-bar-interval {
    shape-rendering: crispEdges;
}

.dashboard-chart-bar-estimate {
    fill: #8fa9da;
}

.dashboard-chart-row:hover .dashboard-chart-bar-estimate {
    fill: #6387cb;
}

.dashboard-chart-row-overall .dashboard-chart-bar-estimate {
    fill: #a9da8f;
}

.dashboard-chart-row-overall:hover .dashboard-chart-bar-estimate {
    fill: #67b73c;
}

.dashboard-chart-bar-interval line {
    fill: none;
    stroke: black;
    stroke-width: 1px;
}

.dashboard-hidden-ci .dashboard-chart-bar-interval {
    display: none;
}

.dashboard-skipped .dashboard-chart-bar-estimate,
.dashboard-skipped .dashboard-chart-bar-interval {
    display: none;
}

.dashboard-chart-skipped-note,
.dashboard-chart-filtered-note,
.dashboard-chart-suppression-note {
    fill: #444444;
    font-size: 0.75rem;
    font-style: italic;
}

.dashboard-chart-row:not(.dashboard-suppressed) .dashboard-chart-suppression-note,
.dashboard-filter-out .dashboard-chart-suppression-note,
.dashboard-skipped .dashboard-chart-suppression-note {
    display: none;
}

.dashboard-chart-row:not(.dashboard-filter-out) .dashboard-chart-filtered-note,
.dashboard-skipped .dashboard-chart-filtered-note {
    display: none;
}

.dashboard-chart-row:not(.dashboard-skipped) .dashboard-chart-skipped-note {
    display: none;
}

.dashboard-chart-grid-line {
    fill: none;
    stroke: #e8e8e8;
    stroke-width: 1px;
    shape-rendering: crispEdges;
}

.dashboard-chart-screenreader-text {
    fill: none;
    font-size: 1px;
}


/*******************************************************************************
 * Styles for the table.
 */

.dashboard-table {
    margin: 0 auto;
    border: none;
    border-spacing: 0px;
    border-collapse: collapse;
}

.dashboard-table th,
.dashboard-table td {
    border: none;
    border-bottom: solid 1px #999999;
    margin: 0;
    padding: 2px 6px;
}

.dashboard-table thead th {
    background-color: #3c66b7;
    color: #ffffff;
    vertical-align: bottom;
}

th.dashboard-table-col-ci {
    padding-left: 12px;
    padding-right: 12px;
}

.dashboard-table tbody th {
    background-color: #ffffff;
    cursor: pointer;
    vertical-align: middle;
}

.dashboard-table tbody th:hover {
    background-color: #d3e6f9;
}

.dashboard-table-row-header-button {
    padding: 0 6px;
    color: #3c66b7;
    background-color: transparent;
    border: none;
    white-space: normal;
}

/* Override any general button :hover styles. We're styling the th on hover
 * instead of the button.
 */
.dashboard-table-row-header-button:hover {
    color: #3c66b7;
    background-color: transparent;
    border: none;
}

.dashboard-keyboard-mode .dashboard-table-row-header-button:focus {
    box-shadow: 0 0 8px #6daceb;
}

.dashboard-table tbody tr:nth-child(odd) {
    background: #ffffff;
}

.dashboard-table tbody tr:nth-child(even) {
    background: #ffffff;
}

.dashboard-table tbody td {
    white-space: nowrap;
    vertical-align: middle;
}

.dashboard-table tbody th,
.dashboard-table-col-ci {
    text-align: center;
}

tbody .dashboard-table-col-prop,
tbody .dashboard-table-col-n {
    width: 7rem;
    text-align: right;
}

tbody .dashboard-table-col-prop {
    padding-right: 1.5rem;
}

tbody .dashboard-table-col-n {
    padding-right: 0.5rem;
}

.dashboard-table-col-ci {
    width: 10rem;
}

.dashboard-hidden-ci tbody .dashboard-table-col-prop,
.dashboard-hidden-ci tbody .dashboard-table-col-n {
    width: 10rem;
}

.dashboard-hidden-ci tbody .dashboard-table-col-prop {
    padding-right: 2.5rem;
}

.dashboard-hidden-ci tbody .dashboard-table-col-n {
    padding-right: 1.5rem;
}

.dashboard-table-sortable {
    cursor: pointer;
}

.dashboard-table .dashboard-focus-out {
    opacity: 0.15;
    transition: none;
}

.dashboard-table tbody .dashboard-table-sorted {
    background-color: #f8f8f8;
}

.dashboard-hidden-ci .dashboard-table-col-ci {
    display: none;
}

.dashboard-table .dashboard-filter-out td,
.dashboard-table .dashboard-suppressed td,
.dashboard-table .dashboard-skipped td {
    color: #444444;
    font-size: 0.75rem;
    font-style: italic;    
}


/*******************************************************************************
 * Styles for the chart controls.
 */

.dashboard-control-container {
    margin-top: 16px;
}

.dashboard-controls-group:first-child .dashboard-control-container:first-child {
    margin-top: 0;
}

.dashboard-control-container legend {
    font-weight: bold;
}

.dashboard-control-container label {
    margin-left: 0.4em;
}

#dashboard-view-control-container li,
#dashboard-sort-control-container li,
#dashboard-ci-control-container li,
#dashboard-demographic-selector-container li {
    margin: 6px 0;
    white-space: nowrap;
}

#dashboard-demographic-selector-container ul {
    font-size: 0.875rem;
}

.dashboard-demographic-selector-focus {
    display: inline-block;

    width: 1rem;
    height: 1rem;

    margin-left: 0.5em;
    vertical-align: middle;

    background-color: transparent;
    background-size: contain;
    background-position: 0;
    background-repeat: no-repeat;
    background-image: url('../images/system/system/eye.svg');

    border: none;
}

.dashboard-demographic-selector-focus.dashboard-active {
    background-image: url('../images/system/eye-active.svg');
}

.dashboard-demographic-selector-focus:hover {
    background-image: url('../images/system/eye-hover.svg');
    background-color: transparent;
    border: none;
}

.dashboard-demographic-selector-focus:hover.dashboard-active {
    background-image: url('../images/system/eye-active-hover.svg');
}

li:not(.dashboard-active) .dashboard-demographic-selector-focus {
    display: none;
}

.dashboard-demographic-selector-focus span {
    display: none;
}

.dashboard-download-button {
    display: block;
    width: 9rem;
    margin: 8px 0;
    padding: 0;
    background-size: 0.9rem 0.9rem;
    background-repeat: no-repeat;

    /* The position offset is relative to the border, not the paddding. */
    background-position: left 0.5rem center;

    font-size: 0.75rem;
    line-height: 1.5rem;
    text-align: left;
}

.dashboard-download-button:first-child {
    margin-top: 0;
}

#dashboard-download-csv {
    background-image: url('../images/system/download.svg');
}

.dashboard-download-button span {
    /* The span's margin should be computed such that there is a small gap between
     * the background image and the span. Therefore, the margin should include the
     * the space between the edge of the content area and the image (which itself
     * is computed as the difference between the image's offset relative to the
     * button border and the button's padding), the width of the image, and the
     * width of the gap.
     */
    margin-left: calc(0.5rem /* (image offset relative to button border) */ - 0rem /* (image padding) */ + 0.9rem /* (width of image) */ + 0.5rem /* (width of gap) */);
}


/*******************************************************************************
 * Styles for the footnotes.
 */

#dashboard-footnote-container {
    padding-left: 20px;
    font-size: 0.75rem;
}


/*******************************************************************************
 * Styles for the tooltips.
 */

.dashboard-chart-tip {
    width: 10rem;
    padding: 6px 8px;
    color: #ffffff;
    background: #444444;
    border-radius: 4px;
    z-index: 2;

    font-size: 0.75rem;
    text-align: center;

    /* Don't use the page default of opensans_regular here, because it doesn't look
     * good as white text on a black background. (If we did want
     * opensans_regular, we'd have to specify it here explicitly, because it's
     * defined in #wrapper from global.css, but the tooltip is outside #wrapper.
     */
    font-family: 'Helvetica Neue',Arial,Helvetica,sans-serif;
}

.dashboard-chart-tip span {
    display: block;
}

.dashboard-chart-tip-estimate {
    font-size: 0.875rem;
}

.dashboard-chart-tip-interval,
.dashboard-chart-tip-pop-size {
    margin-top: 6px;
}

.dashboard-chart-tip:before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
}

.dashboard-chart-tip.e:before {
    top: 50%;
    left: -8px;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    border-width: 5px 8px 5px 0;
    border-color: transparent #444444 transparent transparent;
}

.dashboard-chart-tip.s:before {
    top: -8px;
    left: 50%;
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border-width: 0 5px 8px 5px;
    border-color: transparent transparent #444444 transparent;
}

.dashboard-chart-tip.n:before {
    bottom: -8px;
    left: 50%;
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border-width: 8px 5px 0 5px;
    border-color: #444444 transparent transparent transparent;
}


/*******************************************************************************
 * Styles for the intro page.
 */

#dashboard-intro {
    padding: 0 20px;
}


/*******************************************************************************
 * Styles for modal windows.
 */

#dashboard-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	display: none;
	z-index: 2;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: #000000;
	opacity: 0.7;
}

.dashboard-modal {
	position: fixed;
	top: 5%;
	left: 50%;
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
	display: none;
	z-index: 3;
	width: 80%;
    max-width: 50em;
    height: 90%;
	padding: 20px;
	border-radius: 6px;
	background-color:#f8f8f8;

    /* Copied from #wrapper in global.css, since the modal is outside #wrapper. */
    font-family: open_sansregular, arial;

    /* Copied from #content in global.css, since the modal is outside #content. */
    font-size: 0.9em;

    /* Copied from p in global.css, since the modal's text isn't inside a p. */
    line-height: 1.4em;
}

.dashboard-modal-title {
    height: 3rem;
    margin: 0;
    padding: 10px 0;
    color: #3c66b7;
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 1.5rem;
	text-align: center;
}

.dashboard-offscreen {
	position: absolute;
	top: auto;
	left: -999px;
	width: 1px;
	height: 1px;
}

.dashboard-no-scroll {
    overflow: hidden;
}

.dashboard-modal-content {
    /* Assign a non-static position so that absolutely-positioned elements within
     * the content area will use the content area as their offset parent.
     */
    position: relative;

    height: calc(100% - 40px /* modal padding */ - 3em /* heading height */ - 3em /* button area height */);
    overflow: auto;
    padding: 0 1em;
    background-color: #ffffff;
    border: solid 1px #dddddd;
}

.dashboard-modal-button-area {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 3em;
    margin-right: 20px;
    margin-bottom: 20px;
}

.dashboard-modal-button {
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 6em;
    padding: 4px 8px;
    background-color: #dddddd;
}

.dashboard-modal-button:hover {
    background-color: #cccccc;
}

.dashboard-modal-button-ok {
    right: 0;
}

.dashboard-modal-button-cancel {
    right: 7em;
}


/*******************************************************************************
 * Styles for long selector lists of outcomes/filters.
 */

ul.dashboard-list-selector ul {
    margin-left: 1em;
}

.dashboard-list-selector li {
    margin: 6px 0;
}

.dashboard-list-selector-group:not(:first-child) {
    margin-top: 20px;
}

.dashboard-list-selector-group-header {
    display: block;
    color: #000000;
    font-weight: bold;
    border-bottom: solid 1px #000000;
}

.dashboard-list-selector input[type="radio"] {
    position: absolute;
    top: auto;
    left: -999em;
	width: 1px;
	height: 1px;
}

.dashboard-list-selector input[type="radio"] + label {
    display: block;
    margin-left: 0.5em;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
}

.dashboard-list-selector input[type="radio"]:checked + label {
    color: #ffffff;
    background-color: #4570c2;
}

.dashboard-keyboard-mode .dashboard-list-selector input[type="radio"]:focus + label {
    box-shadow: 0 0 10px #90c0f0;
}

.dashboard-list-selector input[type="radio"]:not(:checked) + label:hover {
    color: #000000;
    background-color: #dddddd;
}


/*******************************************************************************
 * Styles for the busy spinner.
 */

.dashboard-spinner-overlay {
    position: fixed;
    left: 50%;
    top: 40%;
    width: 18rem;
    height: 10rem;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #ffffff;
    background-color: rgba(64, 64, 64, 0.8);
    border-radius: 6px;
    font-size: 0.875rem;
}

.dashboard-spinner-overlay.dashboard-hidden {
    display: none;
}

.dashboard-spinner-overlay::before {
    position: absolute;
    top: 1rem;
    width: 100%;
    text-align: center;
    font-size: 1.25rem;
    line-height: 1.75rem;
}

#dashboard-spinner-overlay-loading::before {
    content: 'Loading dashboard data...';
}


/*******************************************************************************
 * Styles for smaller screen sizes.
 */

#dashboard-mobile-disclaimer {
    display: none;

    margin-bottom: 20px;
    padding: 20px 20px;

    border: solid 2px #9a3334;
    border-radius: 20px;

    background-color: #f7e8e8;
    color: #000000;
}

#dashboard-mobile-disclaimer h2 {
    font-size: 1.2em;
    font-weight: bold;
    color: #9a3334;
    text-align: center;
}

@media screen and (max-width: 800px) {
    /* The template stylesheet sets tables to display: block at this breakpoint,
     * but that messes up the centering. Reset our table's display.
     */
    .dashboard-table {
        display: table;
    }
}

@media screen and (max-width: 767px) {
    #dashboard-chart-title-container,
    #dashboard-chart-container,
    #dashboard-table-container,
    #dashboard-footnote-container,
    #dashboard-controls-container {
        float: none;
        width: 100%;
        padding: 0;
    }

    /* This is a hack to get the chart to resize itself dynamically when the
     * page is resized. I thought width: 100% would work, but apparently it
     * needs a calc(). Still not sure why. Also, calc(100%) or calc(100% - 0px)
     * has the same effect as 100%. Ideally, we'd subtract a tiny amount from
     * 100% so the chart would occupy as much width as possible. However, I
     * observed that the smaller the subtracted amount, the more lag was
     * encountered while resizing. 0.5rem felt like a good compromise.
     */

    #dashboard-graphic-container {
        width: calc(100% - 0.5rem);
    }

    #dashboard-chart-container,
    #dashboard-table-container {
        margin-bottom: 20px;
    }

    #dashboard-controls-container {
        width: 23rem;
        margin-left: auto;
        margin-right: auto;
    }

    .dashboard-controls-group {
        float: left;
        margin-top: 0;
        vertical-align: top;
    }

    .dashboard-controls-group-view-sort-ci {
        float: right;
    }

    .dashboard-controls-group-demographic-selector {
        width: 12rem;
        padding-left: 0;
    }

    .dashboard-controls-group-view-sort-ci,
    .dashboard-controls-group-download {
        width: 11rem;
        padding-left: 1rem;
    }

    .dashboard-controls-group-download {
        margin-top: 16px;
    }

    .dashboard-control-container:first-child {
        margin-top: 0;
    }

    .dashboard-change-outcome-button {
        line-height: 2rem;
        font-size: 1rem;
    }

    .dashboard-prev-outcome-button,
    .dashboard-next-outcome-button {
        height: calc(2rem + 2px);
        width: 2rem;
        background-size: 1.0rem 1.0rem;
        background-position: 0.5rem 0.5rem;
    }

    #dashboard-filter-reporter-container p {
        line-height: 2.2rem;
    }

    .dashboard-clear-filters {
        line-height: 2rem;
        font-size: 1rem;
    }

    .dashboard-download-button {
        width: 10rem;
        line-height: 2rem;
        font-size: 1rem;
    }

    .dashboard-modal {
	    top: 0;
	    width: 100%;
        height: 100%;
        padding: 5px;
        border-radius: 0;
    }

    .dashboard-modal-title {
        padding: 5px 0;
        height: 2em;
    }

    .dashboard-modal-content {
        height: calc(100% - 20px /* modal padding */ - 2em /* heading height */ - 2.5em /* button area height */);
    }

    .dashboard-modal-button-area {
        height: 2.5em;
        margin-bottom: 0.5em;
    }
}

@media screen and (max-width: 559px) {
    #dashboard-mobile-disclaimer {
        display: block;
    }

    #dashboard-mobile-disclaimer-no-chart {
        display: inline;
    }

    #dashboard-mobile-disclaimer-no-chart-ci {
        display: none;
    }

    .dashboard-chart-title-label,
    .dashboard-chart-title-outcome {
        display: inline;
    }

    .dashboard-chart-view #dashboard-chart-container,
    .dashboard-table-view #dashboard-chart-container {
        display: none;
    }

    .dashboard-chart-view #dashboard-table-container,
    .dashboard-table-view #dashboard-table-container {
        display: block;
    }

    .dashboard-table {
        width: 100%;
    }

    tbody .dashboard-table-col-prop,
    tbody .dashboard-table-col-n,
    .dashboard-hidden-ci tbody .dashboard-table-col-prop,
    .dashboard-hidden-ci tbody .dashboard-table-col-n {
        width: 7rem;
    }

    tbody .dashboard-table-col-prop,
    .dashboard-hidden-ci tbody .dashboard-table-col-prop{
        padding-right: 1.5rem;
    }

    tbody .dashboard-table-col-n,
    .dashboard-hidden-ci tbody .dashboard-table-col-n {
        padding-right: 0.5rem;
    }

    #dashboard-download-csv {
        margin-top: 0;
    }

    ul.dashboard-list-selector ul {
        margin-left: 0;
    }

    .dashboard-list-selector input[type="radio"] + label {
        margin-left: 0;
    }
}

@media screen and (max-width: 479px) {
    #dashboard-mobile-disclaimer-no-chart {
        display: none;
    }

    #dashboard-mobile-disclaimer-no-chart-ci {
        display: inline;
    }

    .dashboard-table-col-ci,
    #dashboard-ci-control-container {
        display: none;
    }
}

@media screen and (max-width: 419px) {
    #dashboard-controls-container {
        width: 12rem;
        margin-left: auto;
        margin-right: auto;
    }

    .dashboard-controls-group {
        width: 100%;
        float: none;
        padding: 0;
    }

    .dashboard-controls-group:not(:first-child) .dashboard-control-container:first-child {
        margin-top: 16px;
    }

    .dashboard-spinner-overlay {
        width: 15rem;
        height: 8rem;
    }

    .dashboard-spinner-overlay::before {
        font-size: 1rem;
        line-height: 1.5rem;
    }
}