/*******************************************************************************
 * 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 * {
    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 button {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 1em;
    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;
}


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

#dashboard {
    margin-bottom: 30px;
}

#dashboard-intro {
    margin: 10px;
}

/* Use the clearfix hack so parents expand to contain their floated children. */
.dashboard-control-panel:after,
#dashboard-container:after {
    content: "";
    display: table;
    clear: both;
}

.dashboard-control-panel {
  margin: 10px;
  padding: 10px;
  padding-bottom: 20px;
  border-radius: 20px;
  box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.25);
  background-color: #e3e5e7;
}

#dashboard-moduleSelector {
    width: 25%;
    float: left;
    padding-left: 10px;
    padding-right: 5px;
}

#dashboard-outcomeSelector {
    width: 75%;
    float: left;
    padding-left: 5px;
    padding-right: 10px;
}

#dashboard-demographic-selector-container {
    width: 100%;
    float: left;
    padding: 10px;
    padding-bottom: 0;
}

#dashboard-filter-reporter-container {
    width: 100%;
    float: left;
    padding: 10px;
    padding-bottom: 0;
}

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

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

#dashboard-table-container {
    width: 100%;
    margin: 0;
    padding: 10px;
}

#dashboard-data-container {
    width: 33%;
    float: left;
    padding-left: 10px;
    padding-right: 5px;
    padding-top: 0;
}

#dashboard-public-use-container {
    width: 66%;
    float: left;
    padding-left: 5px;
    padding-right: 10px;
    padding-top: 0;
}

#dashboard-distrib-chart {
    width: calc(50% - 6em);
    float: left;
}

#dashboard-chart-labels {
    width: 12em;
    float: left;
}

#dashboard-outcome-chart-0 {
    width: calc(50% - 6em);
    float: left;
}


/*******************************************************************************
 * Styles for headings.
 */

.dashboard-control-panel h1,
#dashboard-container h1 {
    font-size: 1rem;
    color: #000000;
    text-align: center;
}

.dashboard-control-panel h1 {
    margin: 0.5em 0 0.2em 0;
}

#dashboard-content h1 {
    margin: 0.5em 0;
}


/*******************************************************************************
 * Styles for the sort icons.
 */

#dashboard .sort-icon {
    width: 20px;
    height: 20px;
    background-size: 14px 14px;
    background-position: 3px 3px;
    background-repeat: no-repeat;
    margin-left: 0.5em;
    vertical-align: middle;
    border-radius: 4px;

    background-color: inherit;
    -webkit-transition: background-color .35s;
    transition: background-color .35s;
}

#dashboard .sort-icon span {
    display: none;
}

#dashboard .sort-icon:hover,
#dashboard.keyboard-mode .sort-icon:focus {
    background-color: #90c0f0;
}

/* Need to qualify these with button# to override the button resets at the
 * beginning of the file.
 */

button#dashboard-sortDemographic {
    background-image: url('../images/sort-alpha-asc-inactive.svg');
}

button#dashboard-sortDemographic:hover,
#dashboard.keyboard-mode button#dashboard-sortDemographic:focus {
    background-image: url('../images/sort-alpha-asc-inactive-focus.svg');
}

button#dashboard-sortDemographic.active {
    background-image: url('../images/sort-alpha-asc-active.svg');
}

button#dashboard-sortOutcome {
    background-image: url('../images/sort-amount-desc-inactive.svg');
}

button#dashboard-sortOutcome:hover,
#dashboard.keyboard-mode button#dashboard-sortOutcome:focus {
    background-image: url('../images/sort-amount-desc-inactive-focus.svg');
}

button#dashboard-sortOutcome.active {
    background-image: url('../images/sort-amount-desc-active.svg');
}

button#dashboard-sortDistribution {
    background-image: url('../images/sort-amount-desc-reversed-inactive.svg');
}

button#dashboard-sortDistribution:hover,
#dashboard.keyboard-mode button#dashboard-sortDistribution:focus {
    background-image: url('../images/sort-amount-desc-reversed-inactive-focus.svg');
}

button#dashboard-sortDistribution.active {
    background-image: url('../images/sort-amount-desc-reversed-active.svg');
}


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

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

#dashboard .axis text {
    fill: black;
    stroke: none;
    font-size: 11px;
}


/*******************************************************************************
 * Styles common to chart bars across chart types.
 */

#dashboard .bar:hover {
    cursor: pointer;
}

#dashboard .filter-out .bar {
    display: none;
}

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

#dashboard .outcome-chart .focus-out {
    opacity: 0.05;
    transition: opacity 0.5s;
}


/*******************************************************************************
 * Styles specific to the outcome chart.
 *
 * Here, the .bar elements are groups containing a .estimate (circle) and a
 * .interval (rect).
 */

#dashboard .outcome-chart .bar {
    fill: #335699;
    shape-rendering: geometricPrecision;
}

#dashboard .outcome-chart a:hover .bar,
#dashboard.keyboard-mode .outcome-chart a:focus .bar {
    fill: #637daf;
}

#dashboard .outcome-chart .overall .bar {
    fill: #9A3334;
}

#dashboard .outcome-chart .overall a:hover .bar,
#dashboard.keyboard-mode .outcome-chart .overall a:focus .bar {
    fill: #b06364;
}

#dashboard .outcome-chart .estimate {
    stroke: #f3f3f3;
    stroke-width: 2;
}

#dashboard .outcome-chart .grid {
    stroke: #555555;
    opacity: 0.8;
    stroke-width: 1px;
    stroke-dasharray: 1 1;
    shape-rendering: crispEdges;
}


/*******************************************************************************
 * Styles specific to the chart labels.
 */

#dashboard .chart-label-bg {
    fill: #ffffff;
    -webkit-transition: fill .15s; /* For Safari 3.1 to 6.0 */
    transition: fill .15s;
}

#dashboard a:hover .chart-label-bg,
#dashboard.keyboard-mode a:focus .chart-label-bg {
    fill: #90c0f0;
}

#dashboard .chart-label {
    fill: black;
    text-anchor: middle;
    font-size: 80%;
    cursor: pointer;
    -webkit-transition: fill .5s; /* For Safari 3.1 to 6.0 */
    transition: fill .5s;
}

#dashboard .filter-in .chart-label {
    fill: #9A3334;
    font-weight: bold;
}

#dashboard .filter-out .chart-label {
    fill: #888888;
}


/*******************************************************************************
 * Styles specific to the distribution chart.
 *
 * Here, the .estimate elements are rects.
 */

#dashboard-distrib-chart .estimate {
    stroke: none;
    fill: #9cacca;
    shape-rendering: crispEdges;
}

#dashboard-distrib-chart a:hover .estimate,
#dashboard.keyboard-mode #dashboard-distrib-chart a:focus .estimate {
    fill: #335699;
}

#dashboard-distrib-chart .overall .estimate {
    fill: #cb9c9d;
}

#dashboard-distrib-chart .overall a:hover .estimate,
#dashboard.keyboard-mode #dashboard-distrib-chart .overall a:focus .estimate {
    fill: #9A3334;
}


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

#dashboard-table-container table {
    width: 100%;
    margin: 0;
    border: none;
    border-spacing: 0px;
    border-collapse: collapse;
}

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

#dashboard-table-container thead th {
    background-color: #335699;
    color: #ffffff;
    vertical-align: bottom;
}

#dashboard-table-container thead th.dashboard-table-col-name {
    border-top-left-radius: 6px;
}

#dashboard-table-container thead th.dashboard-table-col-ci-outcome {
    border-top-right-radius: 6px;
}

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

#dashboard-table-container tbody th {
    background-color: #ffffff;
    cursor: pointer;
}

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

#dashboard-table-container tbody th button {
    color: #335699;
    font-weight: normal;
}

#dashboard.keyboard-mode #dashboard-table-container tbody th button:focus {
    background-color: #d3e6f9;
}

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

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

#dashboard-table-container tbody th,
#dashboard-table-container tbody td {
    white-space: nowrap;
}

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

#dashboard-table-container tbody td.dashboard-table-col-prop {
    text-align: right;
}

#dashboard-table-container tbody tr.filter-in th button {
    font-weight: bold;
}

#dashboard-table-container tbody tr.filter-out th button,
#dashboard-table-container tbody tr.filter-out td {
    color: #999999;
}

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

#dashboard .dashboard-table-sort-icon {
    width: 20px;
    height: 20px;
    background-size: 14px 14px;
    background-position: 3px 3px;
    background-repeat: no-repeat;
    margin-left: 0.5em;
    vertical-align: middle;
    border-radius: 4px;

    background-color: inherit;
    -webkit-transition: background-color .35s;
    transition: background-color .35s;
}

#dashboard .dashboard-table-sort-icon:hover,
#dashboard.keyboard-mode .dashboard-table-sort-icon:focus {
    background-color: #637daf;
}

/* Need to qualify these with 'button#' to override the button resets at the
 * beginning of the file.
 */

button#dashboard-table-sort-icon-name {
    background-image: url('../images/sort-alpha-asc-white.svg');
}

button#dashboard-table-sort-icon-distrib,
button#dashboard-table-sort-icon-outcome {
    background-image: url('../images/sort-numeric-desc-white.svg');
}

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

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


/*******************************************************************************
 * Styles for drop menus 
 */

#dashboard-moduleSelector select,
#dashboard-outcomeSelector select {
    width: 100%;
}

/* Workaround for select2 not being properly responsive by default. */
#dashboard-moduleSelector .select2-container,
#dashboard-outcomeSelector .select2-container {
    width: 100% !important;
}

#dashboard .select2-container--default .select2-selection--single {
    background-color: #f3f3f3;
    border: 1px solid #cccccc;
    border-radius: 5px;
    -webkit-transition: background-color .35s;
    transition: background-color .35s;
}

#dashboard .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #000000;
}

#dashboard .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #000000 transparent transparent transparent;
}

#dashboard .select2-container--default .select2-selection--single:hover,
#dashboard.keyboard-mode .select2-container--default .select2-selection--single:focus {
    background: #90c0f0;
}

/* The dropdowns are inserted at the end of the body, outside #dashboard, so we
can't put these rules in the #dashboard namespace. I also don't see a way to add
dashboard- as a prefix on the class name, so these will just have to be
un-namespaced. */

.select2-dropdown {
    background-color: #fcfcfc;
    border: 1px solid #cccccc;
    border-radius: 5px;

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

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

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #90c0f0;
    color: #000000;
}


/*******************************************************************************
 * Styles for the demographic selector group.
 */

#dashboard-demographic-selector-container ul {
    margin-left: 0;
    list-style-type: none;
}

#dashboard-demographic-selector-container ul:after {
    content: "";
    display: table;
    clear: both;
}

#dashboard-demographic-selector-container li {
    float: left;
    width: 25%;
    margin: 0;
    margin-bottom: 6px;
    padding-right: 10px;
}

#dashboard .selector-group-container {
    position: relative;
    width: 100%;
    height: 25px;
    background-color: #f3f3f3;
    border: solid 1px #cccccc;
    border-radius: 4px;
}

#dashboard li.active .selector-group-container {
    background-color: #d3e6f9;
}

#dashboard .selector-group-name {
    display: inline-block;
    padding: 2px 8px;
}

#dashboard .selector-group-icon {
    width: 22px;

    /* Make sure the height here is the height of the selector-group-container minus its borders. */
    height: calc(25px - 2 * 1px);

    background-size: 14px 14px;
    background-position: 3px 5px;
    background-repeat: no-repeat;

    -webkit-transition: background-color .35s;
    transition: background-color .35s;
}

#dashboard .selector-group-icon span {
    display: none;
}

#dashboard .selector-group-icon:hover,
#dashboard.keyboard-mode .selector-group-icon:focus,
#dashboard li.active .selector-group-icon:hover,
#dashboard.keyboard-mode li.active .selector-group-icon:focus {
    background-color: #90c0f0;
}

#dashboard .selector-group-add,
#dashboard li.active .selector-group-remove,
#dashboard li.active .selector-group-focus {
    display: inline-block;
}

#dashboard li.active .selector-group-add,
#dashboard .selector-group-remove,
#dashboard .selector-group-focus {
    display: none;
}

#dashboard .selector-group-add,
#dashboard .selector-group-remove {
    position: absolute;
    right: 0;
}

#dashboard .selector-group-focus {
    position: absolute;

    /* We want the focus icon to appear to the left of the remove icon. The remove
     * icon is on the right edge of the div. Therefore, offset the focus icon from the
     * right edge by the width of the remove icon.
     */
    right: 22px;
}

#dashboard .selector-group-add,
#dashboard .selector-group-remove {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

/* Need to qualify these with 'button.' to override the button resets at the
 * beginning of the file.
 */

#dashboard button.selector-group-focus {
    background-image: url('../images/search.svg');
}

#dashboard button.selector-group-focus.active {
    background-image: url('../images/search-active.svg');
}

#dashboard button.selector-group-add {
    background-image: url('../images/add.svg');
}

#dashboard button.selector-group-remove {
    background-image: url('../images/remove.svg');
}


/*******************************************************************************
 * Styles for the filtered population reporter.
 */

#dashboard-filter-reporter-container .filter-reporter-background {
    padding: 10px;
    border-radius: 6px;
    background-color: #f3f3f3;
}

#dashboard-filter-reporter-container p {
    margin: 0;
}

#dashboard-filter-reporter-container.nonempty-filter-list p.empty-filters-message {
    display: none;
}

#dashboard-filter-reporter-container.empty-filter-list p.nonempty-filters-message {
    display: none;
}

#dashboard-filter-reporter-container ul {
    display: inline-block;
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-size: .6rem;
}

#dashboard-filter-reporter-container ul.filter-list {
    margin-top: 6px;
}

#dashboard-filter-reporter-container.empty-filter-list .filter-list {
    display: none;
}

#dashboard-filter-reporter-container li {
    display: inline-block;
}

#dashboard-filter-reporter-container li.filter-variable {
    margin: 0 0.5em 8px 0;
}

#dashboard-filter-reporter-container li.filter-variable:after {
    content: " and ";
}

#dashboard-filter-reporter-container li.filter-variable:last-child:after {
    content: none;
}

#dashboard-filter-reporter-container li.filter-level {
    margin: 0;
}

#dashboard-filter-reporter-container li span {
    display: inline-block;
    padding: 2px 4px;
    border: solid 1px #335699;
}

#dashboard-filter-reporter-container li.filter-variable span {
    background-color: #d3e6f9;
    color: #000000;
}

#dashboard-filter-reporter-container li.filter-level span {
    padding-right: 0;
    border-left: none;
    border-right: none;
    background-color: #ffffff;
    color: #000000;
}

#dashboard-filter-reporter-container li.filter-level span:after {
    content: " or ";
}

#dashboard-filter-reporter-container li.filter-level:last-child span {
    padding-right: 4px;
    border-right: solid 1px #335699;
}

#dashboard-filter-reporter-container li.filter-level:last-child span:after {
    content: none;
}

#dashboard-filter-reporter-container .clear-filters {
    margin-bottom: 8px;
    margin-top: 6px;
    padding: 4px 8px;
    background-color: #e9bcbc;
    -webkit-transition: background-color .35s;
    transition: background-color .35s;
    color: #000000;
    font-size: 0.6rem;
    border-radius: 4px;
    white-space: nowrap;
}

#dashboard-filter-reporter-container .clear-filters:hover,
#dashboard.keyboard-mode #dashboard-filter-reporter-container .clear-filters:focus {
    background-color: #df9e9f;
}

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


/*******************************************************************************
 * Styles for the data options container.
 */

#dashboard-data-container button {
    display: block;
    width: 13em;
    margin: 8px auto;
    padding: 4px 8px;
    background-color: #d3e6f9;
    -webkit-transition: background-color .35s;
    transition: background-color .35s;
    color: #000000;
    border: solid 1px #cccccc;
    border-radius: 4px;
    text-align: left;
    white-space: nowrap;
}

#dashboard-data-container button:hover,
#dashboard.keyboard-mode #dashboard-data-container button:focus {
    background-color: #90c0f0;
}

#dashboard-data-container button img {
    width: 1em;
    height: 1em;
    margin-right: 0.5em;
    vertical-align: middle;
}


/*******************************************************************************
 * Styles for the data options container.
 */

.dashboard-public-use-container-background {
    padding: 10px;
    border-radius: 6px;
    background-color: #f3f3f3;
}

#dashboard-public-use-container p {
    margin: 0;
}


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

.dashboard-chart-tip {
    width: 300px;
    font-size: 80%;
    padding: 0;
    background: rgba(255, 255, 255, 1);
    color: #000000;
    border: solid 1px #000000;
    border-radius: 4px;

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

.dashboard-chart-tip h1 {
    margin: 0;
    margin-bottom: 4px;
    padding: 4px 12px;
    font-size: 90%;
    font-weight: bold;
    background-color: #888888;
    color: #ffffff;
}

.dashboard-chart-tip p {
    margin: 4px 0;
    padding: 2px 12px;
}

.dashboard-chart-tip p:last-child {
    margin-bottom: 12px;
}

.dashboard-chart-tip .callout {
    margin: 8px 0;
    padding: 4px 12px;
    font-size: 150%;
    font-weight: bold;
    text-align: center;
}

.dashboard-chart-tip .callout.interval {
    margin-top: -4px;
    font-size: 120%;
}

.dashboard-chart-tip .estimate,
.dashboard-chart-tip .interval,
.dashboard-chart-tip .sample-size-numer,
.dashboard-chart-tip .sample-size-denom {
    font-weight: bold;
    color: #335699;
}

.dashboard-chart-tip .group {
    font-weight: bold;
    color: #569933;
}

.dashboard-chart-tip .outcome {
    font-weight: bold;
    color: #9a3334;
}


/*******************************************************************************
 * Styles for "regular" links, that is, <a> tags are look like links instead of
 * being styled as buttons.
 */

/* Don't apply hover styles here. Links are a common enough idiom that the
 * browser default (or the HRSA template, if they've overridden the browser
 * default) is acceptable.
 */
#dashboard-guided-tour:focus,
#dashboard-puf:focus {
    outline: solid 2px #90c0f0;
}


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

@media screen and (max-width: 800px) {
    #dashboard-moduleSelector,
    #dashboard-outcomeSelector,
    #dashboard-data-container button {
        width: 100%;
    }

    #dashboard-moduleSelector {
        padding-right: 10px;
    }

    #dashboard-outcomeSelector {
        padding-left: 10px;
        padding-top: 10px;
    }

    #dashboard-demographic-selector-container li {
        width: 33%;
    }
}

@media screen and (max-width: 600px) {
    .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;
    }

    button#dashboard-view-charts,
    button#dashboard-view-table {
        display: none;
    }

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

    #dashboard-table-container thead th.dashboard-table-col-prop-outcome {
        border-top-right-radius: 6px;
    }
}

@media screen and (max-width: 560px) {
    #dashboard-demographic-selector-container li {
        width: 50%;
    }

    #dashboard-data-container,
    #dashboard-public-use-container {
        width: 100%;
    }

    #dashboard-data-container {
        padding-right: 10px;
    }

    #dashboard-public-use-container {
        padding-left: 10px;
        padding-top: 10px;
    }
}

@media screen and (max-width: 450px) {
    #dashboard-demographic-selector-container li {
        width: 100%;
    }
}