/*html                          { font-family: 'Raleway', Arial, sans-serif; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#373029), to(#10AAC0)); background-image: -webkit-linear-gradient(bottom, #373029, #10AAC0);  background-image: -moz-linear-gradient(bottom, #373029, #10AAC0); background-image: -o-linear-gradient(bottom, #373029, #10AAC0); min-height: 100%; }*/
/*html                          { font-family: 'Raleway', Arial, sans-serif; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2A2A2A), to(#595959)); background-image: -webkit-linear-gradient(bottom, #2A2A2A, #595959);  background-image: -moz-linear-gradient(bottom, #2A2A2A, #595959); background-image: -o-linear-gradient(bottom, #2A2A2A, #595959); min-height: 100%; }*/

/*
COLOR PALETTE
#CCCCCC    - Title Borders
#36566F - Dark Blue Headers
*/

html {
    height: 100%;
    font-family: Arial, sans-serif;
    background: #222;
}

body {
    height: 100%;
    font-family: Arial, sans-serif;
    background-color: #333;
}

main {
    padding-bottom: 80px;
    background-color: #333;
}

svg {
    margin: 0;
    display: block;
}

svg#help-doc {
    margin: 0 auto;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: #fff;
    /*font-family: 'Josefin Slab'; */
    font-weight: 700;
    /*text-transform: uppercase;*/
}

nav .container {
    width: 100%;
    padding-left: 100px;
}

nav .btn {
    background: #A3C59E;
    border: 1px solid #183C13;
}

sup {
    font-size: 60%;
    top: -.7em;
}

.btn .caret {
    margin-left: 0;
    /*float: right;*/
    position: absolute;
    left: 90%;
    top: 45%;
}

.disabled {
    color: #777;
}

.container {
    width: 1020px;
}

.container.chart-container {
    background: #fff;
    border: 1px solid #000;
    padding: 10px;
    /*transform: translate(0px, -15px);*/
}

.container.chart-container.indicator {
    /*height: 690px;*/
}

.container.chart-container.subpopulation {
    /*height: 690px;*/
}

.chart-container h1 {
    color: rgb(0,148,175);
    font-family: Arial, sans-serif;
    font-size: 1.4em;
    margin: 0 0 2px 0;/*0 0 4px 0*/
    text-transform: none;
}

.chart-container h2 {
    color: #333;
    /*font-family: 'Merriweather'; */
    font-family: Arial, sans-serif;
    font-weight: 700;
    font-size: 1.1em;
    margin: 0 0 4px 0;
    text-transform: none;
}

.chart-container h3 {
    color: #333;
    /*font-family: 'Merriweather'; */
    font-family: Arial, sans-serif;
    font-weight: 400;
    font-size: 1.1em;
    margin: 0 0 10px 0;
    text-transform: none;
}

.chart-container h4, .chart-container h6 {
    font-family: Arial, sans-serif;
    color: #000;
    text-transform: none;
    margin: 9px 0 8px 0;
}
.chart-container h5{
    font-family: Arial, sans-serif;
    color: #000;
    text-transform: none;
    margin: 4px 0 4px 0;
}

.tab-content aside h1, .tab-content aside h2, .tab-content aside h3,
.tab-content aside h4, .tab-content aside h5, .tab-content aside h6 {
    font-weight: 700;
    color: #000;
}

.tab-pane {
    width: 765px;
    /*height: 430px;*/
    float: left;
    margin-bottom: 20px;
}

.modal h4 {color: #666;}
.modal-content {border-radius: 0;}
.footer   { bottom: 0; background-color: #2F6227; border-color: #062F04; position: fixed; width: 100%; box-shadow: 0px 30px 70px #000 ; padding-top: 5px; z-index: 1000; }

/*#container-hc-2012-ar, #container-hc-2012-si, #container-hc-2012-sm, #container-risk, #container-condition-cat          { width: 1040px; }*/

/*#chart-container-hc-2012-si, #chart-container-condition-cat { background: #fff; width: 1040px; min-height: 386px; padding: 5px; border: 1px solid #666; display: inline-block; } */

#chart-container-condition-cat { background: #fff; width: 1040px; min-height: 386px; padding: 5px; border: 1px solid #666; display: inline-block; }



#d3-bullet, #d3-slope, #d3-range, #d3-bulletB, #d3-bulletB-pt, #d3-slopeB, #d3-slopeB-pt, #d3-rangeB, #d3-rangeB-pt,
#d3-bullet-rel-extent, #d3-bullet-rel-risk, #d3-bullet-attr-risk {
    float: left;
}

#d3-rangeB .range {
    border-right: 1px solid #ddd;
}

#d3-bullet-rel-extent-ext, #d3-bullet-rel-risk-ext, #d3-bullet-attr-risk-ext {
    float: left;
}

#d3-bullet-si, #d3-slope-si, #d3-range-si {
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    float: left;
}


#d3-selector-hr, #d3-selector-hr-SI, #d3-selector-risk {
    width: 230px;
    border-left: 1px solid #bbb;
    padding: 2px 5px;
}

#d3-selector-hr, #d3-selector-hr-SI, #d3-selector-risk .dropdown-menu {
    font-size: 12px;
}

#d3-selectorB-hr, #d3-selectorB-hr-pt {
    /* border-left: 1px solid #bbb; */
    text-align: left;
    text-indent: 5px;
}

#d3-selectorB-hr-pt {
}

#d3-bullet-hr, #d3-bullet-hr-pt {
    width: 230px;
}

#pt-wrapper {
    display: none;
}

/*#d3-bullet-hr h6, #d3-bulletSI-hr h6  {
  margin: 2px 0 8px 0;
}*/

#d3-bulletSI-hr {
    width: 230px;
}

#d3-bullet-rel-extent-hr {
    width: 398px;
    border-left: 1px solid #bbb;
}

#d3-bullet-rel-risk-hr {
    width: 178px;
}

#d3-bullet-attr-risk-hr {
    width: 188px;
}

#d3-bulletB-hr h6, #d3-bulletB-hr-pt h6, #d3-bullet-rel-extent-hr h6, #d3-bullet-rel-risk-hr h6, #d3-bullet-attr-risk-hr h6{
    margin-right: 20px;
}

#breakout-column-headers, #breakout-column-headers-pt{
    background: #EEE;
    width: 100%;
    height: 30px;
    border: 1px solid #bbb;
}

#d3-bullet, #d3-bullet-axis {
    width: 460px;
}

/****** BREAKOUT CONTAINER SIZES ******/
/****** MUST TOTAL 100% ******/

#d3-selectorB-hr, #d3-selectorB-hr-pt {
    width: 20%;
}

#d3-bulletB-hr, #d3-bulletB-hr-pt {
    /* REPORT VIEW width: 40%; /* REPORT VIEW */
    /* STANDARD VIEW */ width: 28%; /*STANDARD VIEW */
}

#d3-bulletB, #d3-bulletB-pt, #d3-bulletB-axis, #d3-bulletB-axis-pt {
    /* REPORT VIEW width: 60%; /* REPORT VIEW */
    /* STANDARD VIEW */ width: 48%; /*STANDARD VIEW */
}

#d3-slopeB-hr, #d3-slopeB-axis, #d3-slopeB, #d3-slopeB-hr-pt, #d3-slopeB-axis-pt, #d3-slopeB-pt {
    /* STANDARD VIEW*/ width: 6%; /*STANDARD VIEW*/
    /* REPORT VIEW  width: 6%; /* REPORT VIEW*/
}

/* REPORT VIEW
#d3-slopeB-axis {
  font-size: .8em;
  text-align: center;
  white-space: nowrap;
  margin: 1px 16px -3px 16px;
  left: -25px;
  position: relative;
  color: #666;
  height: 100%;
}

#d3-rangeB-axis {
  margin: 0px -32px;
}
/* REPORT VIEW */

#d3-rangeB-hr, #d3-rangeB-axis, #d3-rangeB, #d3-rangeB-hr-pt, #d3-rangeB-axis-pt, #d3-rangeB-pt {
    /* REPORT VIEW width: 34%; /* REPORT VIEW */
    /* STANDARD VIEW */ width: 46%; /*STANDARD VIEW */
}

#d3-bullet-si, #d3-bulletSI-axis {
    width: 460px;
}

#d3-bullet-rel-extent, #d3-bullet-rel-extent-axis {
    width: 370px;
}

#d3-bullet-rel-risk, #d3-bullet-rel-risk-axis {
    width: 160px;
}

#d3-bullet-attr-risk, #d3-bullet-attr-risk-axis {
    width: 160px;
}

#d3-bullet-attr-risk-hr, #d3-bullet-attr-risk {
    border-right: 1px solid #bbb;
}

#d3-bullet-rel-extent, #d3-bullet-rel-risk, #d3-bullet-attr-risk{
    border: 2px solid #ddd;
    border-top: 1px solid #ddd;
}

#d3-slope-hr, #d3-slope-axis, #d3-slope {
    width: 50px;
}

#d3-slopeSI-hr, #d3-slopeSI-axis, #d3-slope-si {
    width: 50px;
}

#d3-range-hr {
    width: 255px;
    border-right: 1px solid #bbb;
    padding: 2px 5px;
}

#d3-slope-axis .axis-bullets {
    height: 8px;
    font-size: 9px;
    text-align: center;
}

#d3-slopeSI-axis .axis-bullets {
    height: 8px;
    font-size: 9px;
    text-align: center;
    padding-left: 2px;
}

#d3-slopeB-axis .axis-bullets, #d3-slopeB-axis-pt .axis-bullets {
    height: 8px;
    font-size: 9px;
    text-align: center;
    padding-left: 10px;
}

#d3-slope-axis .axis-bullets div, #d3-slopeSI-axis .axis-bullets div {
    display: inline;
    height: 5px;
    padding-right: 1px;
}

#d3-slopeSI-axis .axis-bullets div {
    display: inline;
    height: 5px;
    padding-right: 2px;
}

#d3-slopeB-axis .axis-bullets div{
    display: inline;
    height: 5px;
    padding-right: 6px;
}

#d3-slopeB-axis-pt .axis-bullets div {
    display: inline;
    height: 5px;
    padding-right: 6px;
}

/* individually locating each dot to make them centered above the labels*/
#bullet-t0, #bullet-SI-t0{
padding-left:3px;
}
#bullet-t1, #bullet-SI-t1{
padding-left:5px;
}
#bullet-t2, #bullet-SI-t2{
    padding-left:3pt;
}

#d3-slope-axis .axis-bullets-text {
    height: 10px;
    font-size: 8px;
    color: #666;
    padding-left: 2px;
    text-align: center;
}

 #d3-slopeSI-axis .axis-bullets-text {
    height: 10px;
    font-size: 8px;
    color: #666;
    padding-left: 10px;
}

#d3-slopeB-axis .axis-bullets-text, #d3-slopeB-axis-pt .axis-bullets-text {
    height: 10px;
    font-size: 8px;
    color: #666;
    padding-left:7px;
}

/*#d3-slopeB-axis-pt .axis-bullets-text {*/
/*    height: 10px;*/
/*    font-size: 8px;*/
/*    color: #666;*/
/*    padding-left: 7px;*/
/*}*/

#d3-slope-axis .axis-bullets-text div, #d3-slopeSI-axis .axis-bullets-text div {
    display: inline;
    height: 5px;
    padding-right: 1px;
}

#d3-slope-axis-pt .axis-bullets-text div, #d3-slopeSI-axis .axis-bullets-text div {
    display: inline;
    height: 5px;
    padding-right: 1px;
}

#d3-slopeB-axis .axis-bullets-text div  {
    display: inline;
    height: 5px;
    padding-right: 1px;
}

#d3-slopeB-axis-pt .axis-bullets-text div  {
    display: inline;
    height: 5px;
    padding-right: 1px;
}

#d3-range-hr .dropdown {
    width: 220px;
    margin: 0 auto;
}

#d3-rangeB-hr .dropdown {
    width: 250px;
    margin: 0 auto;
}

#d3-rangeB-hr-pt .dropdown {
    width: 250px;
    margin: 0 auto;
}

#d3-range-axis, #d3-range {
    width: 254px;
}
#d3-rangeB-hr, #d3-rangeB-hr-pt {
    /* border-right: 1px solid #bbb; */
    /*padding: 2px 5px;*/
    padding: 0px 5px;
}

#modal-title-pt-lower {
    margin-top: 100px;
    padding-top: 90px;
    margin-bottom: 5px;
}

#modal-title-pt-upper {
    margin-bottom: 5px;
}


#d3-rangeSI-axis, #d3-range-si {
    width: 255px;
    border-right: 2px solid #ddd;
}

#d3-rangeSI-hr {
    width: 255px;
    border-right: 1px solid #bbb;
    /*padding: 2px 5px;*/
}

#d3-rangeSI-hr .dropdown {
    width: 220px;
    margin: 0 auto;
}

#d3-bulletB, #d3-slopeB, #d3-bulletB-pt, #d3-slopeB-pt {
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

#d3-rangeB, #d3-rangeB-pt svg{
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

#d3-sizemap {
    width: 767px;
    /*display: inline-block; */
    float: left;
    /*height: 400px;*/
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    border-left: 1px solid #ddd;
}

#d3-sizemap-hr {
    border: 1px solid #bbb;
    background: #EEE;
    width: 767px;
    height: 30px;
    /*padding-top:9px;*/
    padding-left: 235px;
    display: inline-block;
    text-align: center;
    line-height: 1em;
    font-family: Arial, sans-serif; /*'Raleway',*/
    font-size: 12px;
    font-weight: 700;
    float: left;
}

#d3-sizemap-hr-spacer   {
    width: 190px;
    height: 30px;
    display: inline-block;
    float: left;
}

#footer-sizemap .footer-legend-text {
    font-size: 7px;
}

#footer-condition-estimate, #footer-condition-estimateSI, #footer-sizemap, #footer-risk-estimate, #footer-breakout {
    display: inline-block;
    padding: 5px 0px 0px 6px;
    line-height: 1em;
}

#d3-bullet-rel-extent-ext, #d3-bullet-rel-risk-ext, #d3-bullet-attr-risk-ext {
    width: 25px;
}

#footer-risk-estimate #risk-ref {
    font-family: Arial, sans-serif;
    font-size: .6em;
    /* font-weight: 700; */
}


#footer-condition-estimate span.spacer, #footer-condition-estimate-SI span.spacer {
    padding-left: 4px;
}

#footer-condition-estimate span.large, #footer-condition-estimate-SI span.large {
    font-weight: bold;
}

#footer-condition-estimate p, #footer-condition-estimate-SI p {
    font-size: 10.5px;
    font-family: Arial, sans-serif;
    margin: 0px;
    padding:2px 0;
}

#footer-condition-estimate p#footer-change sup, #footer-condition-estimate-SI p#footer-change-SI sup {
    font-size: 75%;
    top: -.3em;
    padding-right: 2px;
}

#footer-condition-estimate p#footer-significance sup, #footer-condition-estimate-SI p#footer-significance-SI sup {
    font-size: 100%;
    top: 0em;
    padding-right: 2px;
}

#footer-sizemap span.spacer {
    padding-left: 6px;
}

#footer-sizemap span.large {
    font-weight: bold;
}

#footer-sizemap p {
    font-size: 10.5px;
    font-family: Arial, sans-serif;
    margin: 0px;
    padding:2px 0;
}

#footer-breakout span.spacer {
    padding-left: 4px;
}

#footer-breakout span.large {
    font-weight: bold;
}

#footer-breakout p {
    font-size: 10.5px;
    font-family: Arial, sans-serif;
    margin: 0px;
    padding:2px 0;
}

#footer-breakout p#footer-change-B sup {
    font-size: 75%;
    top: -.3em;
    padding-right: 2px;
}

#footer-breakout p#footer-significance-B sup {
    font-size: 100%;
    top: 0em;
    padding-right: 2px;
}
#footer-sizemap{
    width:100%;
    position: relative;
}

#footer-sizemap .footer-citation {
    width: 515px;
    padding-right: 40px;
}


#footer-sizemap .footer-legend img {
    vertical-align: top;
}

.footer-citation {
    font-family: Arial, sans-serif;
    display: inline-block;
    vertical-align: bottom;
}

.footer-legend {
    font-size: .6em;
    font-family: Arial, sans-serif;
    display: inline-block;
    vertical-align: top;
    position: absolute;
    top:6px;
    right:0px;
}

.footer-legend sup {
    font-size: 100%;
    font-weight: bold;
    top: 0em;
    left: -.3em;
}

.footer-legend-dagger {
    font-size: .6em;
    font-family: Arial, sans-serif;
    display: inline-block;
    vertical-align: bottom;
}

.footer-legend-dagger sup {
    font-size: 75%;
    font-weight: bold;
    left: -.3em;
}

/* #footer-sizemap  .footer-legend-image {
    /*width: 97px;*/
    /* display: inline-block; */
/* } */

#chart-container-hc-2012-sm .footer-legend-text {
    margin-top: 2px;
    width: 82px;
    display: inline-block;
    vertical-align: top;
}

#chart-header           {
    font-family: Arial, sans-serif;
    color: #000;
    text-transform: none;
    width: 985px;
    height: 75px; /*margin: 7px 175px 0 0;*/
    text-align: left;
    padding: 0 0 0 5px;
    background: #fff;
    float: left;
}

#chart-header-text {
    position: relative;
    min-width: 560px;
    float: left;
}

.chart-header-view {
    width: 120px;
    height: 60px;
    margin: 0 5px;
    padding: 20px;
    background-color: #ccc;
    float: left;
    text-align: center;
    border: 1px solid #C5D0DA;
}

.chart-header-view:hover {
    background-color: #eee;
    border: 1px solid #777;
    /*cursor: pointer;*/
    opacity: .5;
}

#view-trend {
    /*background-image: url('../img/view-trend.png');*/
    background-size: 120px;
}

#view-size {
   /* background-image: url('../img/view-size.png');*/
    background-size: 120px;
}

#view-risk {
    /*background-image: url('../img/view-risk.png');*/
    background-size: 120px;
}



#chart-header h5 {
    font-family: Arial, sans-serif;
    font-weight: normal;
}

#map-container {
    width: 200px;
    height: 0px;
    background: #fff;
    display: inline-block;
    transform: translate(0px, -14px);
}

#logo-container {
    height: 70px;
    background: #fff;
    display: inline-block;
    /*transform: translate(0px, -15px);*/
    /*position: absolute;*/
    /*left: 810px;*/
    /*top: 26px;*/
    position: relative;
    float: right;
}

#logo-container img {
    height: 65px;
    position: relative;

}

#map-container img {
    width: 95%;
    padding-top: 0.5em;
    /*padding-left: 60px;*/
}

#chart-header #controls {
    display:none;
    text-align: left;
    padding: 0px 15px;
}

#controls-collapse {
    height: 100px;
    margin-top: 10px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0px 0px 2px #aaa inset;
    border: 1px solid #999;
}

#controls-collapse .controls-group {
    height: 100px;
    border-right: 1px solid #ddd;
}

#controls {
    width: 220px;
    padding: 0px 10px 0px 15px;
    display: inline-block;
    float: right;
    background: #fff;
}

#filters, #notes {
    border-top: 1px solid #ccc;
}

#notes {
    /* border-bottom: 1px solid #ccc; */
    display: inline-block;
    margin-top: 8px;
    border-top: 1px solid #ccc;
}

.subpopulation #notes {
    /*height: 240px;*/
}

.indicator #notes {
    /* height: 240px;*/
}

div#icons {
    width: 100%;
    display: inline-flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin-top: 8px;
    border-top: 1px solid #ccc;
    padding-top: 6px;
}

#icons img {
    margin: 6px 11px;
    cursor: pointer;
}

#icons a:hover, #modal-icons a:hover {
    text-decoration: none;
}

.no-data .icon-inline {
    display: inline-block;
    width: 50px;
    height: 50px;
    background-image: url(../img/icon-breakout-inactive.png);
    background-position: 0 0;
}
.tooltip > .tooltip-inner {
    text-align: left;
    font-size: 11px;
    max-width: 255px !important;
}

#container-additional-info {
    font-size: 11px;
    line-height: 13px;
    text-overflow: ellipsis;
    font-family: Arial, sans-serif;
    /*margin-bottom: 32px;*/
}
#container-additional-info p:first-of-type{
    margin-bottom:6px;
}


div#dropdown-subpopulation-container,  div#dropdown-condition-container, div#dropdown-subpopulation-container-risk, div#dropdown-subpopulation-container-risk {
    margin-bottom: 5px;
}

#dropdown-view-container {
    margin-bottom: 20px;
}


button#dropdown-view, button#dropdown-condition, button#dropdown-subpopulation, button#dropdown-subpopulation-condition-matrix, button#dropdown-subpopulation-risk, button#dropdown-response-risk, button#dropdown-subpopulation-si, button#dropdown-indicator-si, button#dropdown-label, button#dropdown-label-si, button#dropdown-label-risk, button#dropdown-aggregation-si {
    width: 100%;
    text-align: left;
    background-color: #eee;
    box-shadow: 0px 2px 1px #666;
    border: 1px solid #ccc;
    height: 30px;
    font-size: 1.2em;
    line-height: 1em;
}


button#dropdown-subpopulation, button#dropdown-condition, button#dropdown-subpopulation-condition-matrix, button#dropdown-subpopulation-risk, button#dropdown-response-risk, button#dropdown-subpopulation-si, button#dropdown-indicator-si, button#dropdown-label, button#dropdown-label-si, button#dropdown-label-risk, button#dropdown-aggregation-si {
    font-size: .85em;
    width: 100%;
    height: 28px;
}


.checkbox-text {
    font-size: .8em;
    display: block;
    padding-left: 10px;
}



#tooltip  { background: #fff; width: 260px; float: right; border: 1px solid #aaa; }
#tooltip.e:after { content: "\25C0"; margin: -4px 0 0 0; top: 50%; left: -8px;}

.column-header {
    background: #EEE;
    height: 30px;
    display: inline-block;
    text-align: center;
    line-height: 1em;
    font-family: Arial, sans-serif;
    font-size: .9em;
    font-weight: bold;
    float: left;
    border-top: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
}
.breakout-column-header{
    height: 30px;
    display: inline-block;
    text-align: center;
    line-height: 1em;
    font-family: Arial, sans-serif;
    font-size: .9em;
    font-weight: bold;
    float: left;
}
.axis-container         { background: #fff; height: 20px; display: inline-block; float: left; }

/* BULLET STYLES */
svg.bullet, svg.column, svg.range, svg.sizemap {
    font: 10px arial, sans-serif;
    background: #fff;
}

div#d3-bullet, div#d3-slope, div#d3-range {
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

div#d3-range {
    border-right: 2px solid #ddd;
}
/*
svg.range, svg.sizemap {
  border-right: 2px solid #ddd;
}

svg.bullet:last-child, svg.slope:last-child, svg.range:last-child, svg.sizemap:last-child {
  border-bottom: 2px solid #ddd;
}
*/
.bullet .border, .column .border, .range .border, .sizemap .border {
    fill: none;
    stroke: #ddd;
    stroke-width: 1px;
}

.national           { fill: #CCCCCC; fill-opacity: 1; stroke: #999999; stroke-width: 0;}
.bullet .marker     { stroke: #000; stroke-width: 2px; }

.condition-Good .bullet .range      { fill: rgba(107, 163, 214, 1); fill-opacity: 1; stroke: rgba(35, 129, 214, 1); stroke-width: 0;}
.condition-Good .bullet .confidence { fill: rgb(190, 190, 190); fill-opacity: .7; }
.condition-Good .bullet .measure    { fill: rgba(166, 200, 230, .5); fill-opacity: .5; stroke: rgba(107, 163, 214, 1); }

.condition-Fair .bullet .range      { fill: rgba(255, 193, 86, 1); stroke: rgba(255, 193, 86, 1); fill-opacity: 1; stroke-width: 0;}
.condition-Fair .bullet .confidence { fill: rgba(255, 193, 86, 1); fill-opacity: 1; }
.condition-Fair .bullet .measure    { fill: rgba(255, 218, 154, .5); fill-opacity: .5; stroke: rgba(255, 193, 86, 1); }

.condition-Poor .bullet .range      { fill: rgb(244, 140, 140); fill-opacity: 1; stroke: rgba(233, 24, 24, 1); stroke-width: 0;}
.condition-Poor .bullet .confidence { fill: rgb(190, 190, 190); fill-opacity: .7; }
.condition-Poor .bullet .measure    { fill: rgb(251, 225, 226); fill-opacity: .5; stroke: rgba(233, 87, 87, 1); }

.condition-Missing .bullet .range      { fill: rgba(210, 153, 125, 1); stroke: rgba(210, 153, 125, 1); fill-opacity: 1; stroke-width: 0;}
.condition-Missing .bullet .confidence { fill: rgba(210, 153, 125, .5);  fill-opacity: .7; }
.condition-Missing .bullet .measure    { fill: rgba(210, 153, 125, .5); stroke: rgba(210, 153, 125, 1);}

.condition-Neutral .bullet .range      { fill: rgba(117, 186, 174,.35); stroke: rgba(107, 178, 164, 1); fill-opacity: 1; stroke-width: 0;}
.condition-Neutral .bullet .confidence { fill: rgba(117, 186, 174,.35);  fill-opacity: .7; }
.condition-Neutral .bullet .measure    { fill: rgba(117, 186, 174,.35); stroke: rgba(107, 178, 164, 1); }

.bullet .subtitle   { fill: #999; }
.bullet .bullet-tooltip { fill-opacity: 0; }

.label-ul-bounds text.inactive  { display: none; }
.label-ul-bounds text.active  { font-size: 9.5px; letter-spacing: -0.2px; display: block; }
.label-ul-bounds text:nth-of-type(3).active { font-size: 10px; fill: rgba(121,121,121,1); display: block; }
.label-ul-bounds text:nth-of-type(4).active { font-size: 10px; fill: rgba(121,121,121,1); display: block; }

.label-ul-bounds rect.inactive  { display: none; }
.label-ul-bounds rect.active  { display: block; }

/* Column STYLES */
/* Stroke widths were increased from 0.5 to 1.0 to allow for some visibility of very small values in the columns. At 0.5
the small value columns (Fish Quality-Good) were drawn but not visible
 */
.condition-Good .column-pd1,
.condition-Good .column-pd2,
.condition-Good .column-pd3 { border-style: solid; fill: rgba(107, 163, 214, 1); stroke: rgba(107, 163, 214, 1); fill-opacity: 1; stroke-width: 1.0; }

.condition-Poor .column-pd1,
.condition-Poor .column-pd2,
.condition-Poor .column-pd3 { border-style: solid; fill: rgba(244, 140, 140, 1); stroke: rgba(244, 140, 140, 1); fill-opacity: 1; stroke-width: 1.0; }

.condition-Fair .column-pd1,
.condition-Fair .column-pd2,
.condition-Fair .column-pd3 { border-style: solid; fill: rgba(255, 193, 86, 1); stroke: rgba(255, 193, 86, 1); stroke-width: 1.0; }

.condition-Missing .column-pd1,
.condition-Missing .column-pd2,
.condition-Missing .column-pd3 { border-style: solid; fill: rgba(210, 153, 125, 1); stroke: rgba(210, 153, 125, 1); stroke-width: 1.0; }

.condition-Neutral .column-pd1,
.condition-Neutral .column-pd2,
.condition-Neutral .column-pd3 { border-style: solid; fill: rgba(107, 178, 164, 1); stroke: rgba(107, 178, 164, 1); stroke-width: 1.0; }

.condition-Good .column .measure.significant-Yes { stroke: rgba(62, 92, 210, 1); stroke-width: 2px; stroke-linecap:round; fill: rgba(62, 92, 210, 1);}
.condition-Good .column .measure.significant-No  { stroke: rgba(107, 163, 214, 1); stroke-width: 2px; stroke-linecap:round; fill: rgba(107, 163, 214, 1);}
.condition-Poor .column .measure.significant-Yes { stroke: rgba(233, 24, 24, 1); stroke-width: 2px; stroke-linecap:round; fill: rgba(233, 24, 24, 1);}
.condition-Poor .column .measure.significant-No  { stroke: rgba(244, 140, 140, 1); stroke-width: 2px; stroke-linecap:round; fill: rgba(244, 140, 140, 1);}
.condition-Fair .column .measure.significant-Yes { stroke: rgba(250, 159, 26, 1); stroke-width: 2px; stroke-linecap:round; fill: rgba(250, 159, 26, 1);}
.condition-Fair .column .measure.significant-No  { stroke: rgba(255, 193, 86, 1); stroke-width: 2px; stroke-linecap:round; fill: rgba(255, 193, 86, 1);}
.condition-Missing .column .measure.significant-Yes { stroke: rgba(153, 101, 75, 1); stroke-width: 2px; stroke-linecap:round; fill: rgba(153, 101, 75, 1);}
.condition-Missing .column .measure.significant-No  { stroke: rgba(210, 153, 125, 1); stroke-width: 2px; stroke-linecap:round; fill: rgba(210, 153, 125, 1);}
.condition-Neutral .column .measure.significant-Yes { fill: rgba(117, 186, 174,.35); stroke: rgba(107, 178, 164, 1); stroke-width: 2px; stroke-linecap:round; }
.condition-Neutral .column .measure.significant-No  { fill: rgba(117, 186, 174,.35); stroke: rgba(107, 178, 164, 1); stroke-width: 2px; stroke-linecap:round; }

.column .measure-start   { fill: rgb(251, 225, 226); stroke: rgb(233, 24, 24); stroke-width: 1px; }
.column .measure-end     { fill: rgb(251, 225, 226); stroke: rgb(233, 24, 24); stroke-width: 1px; }
.column .domain          { display: none; }
.column .column-tooltip { fill-opacity: 0; }

.bullet-sub .grid .tick:nth-of-type(1) line {
    stroke: #ddd;
    stroke-width: 1.5px;
}

#d3-bullet-attr-risk .bullet-sub .grid .tick:nth-of-type(1) line, #d3-bullet-rel-risk .bullet-sub .grid .tick:nth-of-type(1) line {
    stroke: #bbb;
    stroke-width: 2.5px;
}

#d3-rangeB .range-sub .grid .tick:nth-of-type(1) line {
    opacity: 0;
}

#d3-rangeB-pt .range-sub .grid .tick:nth-of-type(1) line {
    opacity: 0;
}

#d3-bullet-rel-risk .bullet-sub .grid .tick:nth-of-type(2) line {
    stroke: #000;
    stroke-width: 1.0px;
    stroke-dasharray: 5,5;
}
/*
#d3-bullet-attr-risk .bullet-sub .grid .tick:nth-of-type(1) line {
  stroke: #ddd;
  stroke-width: 0.5px;
}

#d3-bullet-attr-risk .bullet-sub .grid .tick:nth-of-type(2) line {
  stroke: #bbb;
  stroke-width: 1.5px;
}
*/

.slope-sub .slope-background {
    fill: white;
}

.slope-sub .grid .tick:nth-of-type(1) line{
    stroke: #ccc;
}

.slope-sub .grid .tick:nth-of-type(2) line {
    stroke-dasharray: 2,2;
    stroke: #ccc;
}

.slope-sub .grid .tick:nth-of-type(3) line {
    stroke: #ccc;
}


#d3-range .range-sub .grid .tick:nth-of-type(4) line, #d3-range-si .range-sub .grid .tick:nth-of-type(4) line {
    stroke: #bbb;
    stroke-width: 1.0px;
}

/* REPORT VIEW  #d3-rangeB .range-sub .grid .tick:nth-of-type(4) line { /* REPORT VIEW */
/* STANDARD VIEW */#d3-rangeB .range-sub .grid .tick:nth-of-type(6) line { /*STANDARD VIEW */
                       stroke: #bbb;
                       stroke-width: 1.0px;
                   }

#d3-rangeB-pt .range-sub .grid .tick:nth-of-type(6) line { /*STANDARD VIEW */
    stroke: #bbb;
    stroke-width: 1.0px;
}

/* REPORT VIEW  #d3-rangeB-axis g.tick.major:nth-of-type(1), #d3-rangeB-axis g.tick.major:nth-of-type(7) {/* REPORT VIEW */
/* STANDARD VIEW */#d3-rangeB-axis g.tick.major:nth-of-type(1), #d3-rangeB-axis g.tick.major:nth-of-type(11),
                   #d3-rangeB-axis-pt g.tick.major:nth-of-type(1), #d3-rangeB-axis-pt g.tick.major:nth-of-type(11) { /*STANDARD VIEW */
                       display: none;
                   }


/* RANGE STYLES */

.change-hidden-hover { fill: rgba(1,1,1,0); }
.condition-Good .range path.significant-Yes { stroke: rgba(62, 92, 210, 1); fill: rgba(62, 92, 210, 1);}
.condition-Good .range path.significant-No  { stroke: rgba(107, 163, 214, 1); fill: rgba(107, 163, 214, 1); }
.condition-Good .range rect.significant-Yes { fill: rgba(62, 92, 210, 1); }
.condition-Good .range rect.significant-No  { fill: rgba(107, 163, 214, 1); }

.condition-Fair .range path.significant-Yes { stroke: rgba(250, 159, 26, 1); fill: rgba(250, 159, 26, 1);}
.condition-Fair .range path.significant-No  { stroke: rgba(255, 193, 86, 1); fill: rgba(255, 193, 86, 1); }
.condition-Fair .range rect.significant-Yes { fill: rgba(250, 159, 26, 1); }
.condition-Fair .range rect.significant-No  { fill: rgba(255, 193, 86, 1); }

.condition-Poor .range path.significant-Yes { stroke: rgba(233, 24, 24, 1); fill: rgba(233, 24, 24, 1);}
.condition-Poor .range path.significant-No  { stroke: rgba(244, 140, 140, 1); fill: rgba(244, 140, 140, 1); }
.condition-Poor .range rect.significant-Yes { fill: rgba(233, 24, 24, 1); }
.condition-Poor .range rect.significant-No  { fill: rgba(244, 140, 140, 1); }

.condition-Missing .range path.significant-Yes { fill: rgba(153, 101, 75, 1); stroke: rgba(153, 101, 75, 1);}
.condition-Missing .range path.significant-No  { fill: rgba(210, 153, 125, .5); stroke: rgba(210, 153, 125, 1);}
.condition-Missing .range rect.significant-Yes { fill: rgba(153, 101, 75, 1); }
.condition-Missing .range rect.significant-No  { fill: rgba(210, 153, 125, 1); }

.condition-Neutral .range path.significant-Yes { fill: rgba(40, 137, 118, 1); stroke: rgba(40, 137, 118, 1); }
.condition-Neutral .range path.significant-No  { fill: rgba(107, 178, 164, 1); stroke: rgba(107, 178, 164, 1); }
.condition-Neutral .range rect.significant-Yes { fill: rgba(40, 137, 118, 1); }
.condition-Neutral .range rect.significant-No  { fill: rgba(107, 178, 164, 1); }

.range .range-tooltip { fill-opacity: 0; }

/* sizemap STYLES */
.sizemap                      { font: 10px arial, sans-serif; }
.sizemap .border              { fill: #fff; }
/*.sizemap .estimate            { fill: rgb(244, 140, 140); fill-opacity: 1; stroke: rgba(233, 24, 24, 1); stroke-width: 0; }
*/
.sizemap-hr-title             { width: 40px; display: inline-block; height: 30px; float: left; text-align: center; white-space: nowrap; overflow: hidden; }

.condition-Good .sizemap .estimate { fill: rgba(107, 163, 214, 1); stroke: rgba(62, 92, 210, 1); stroke-width: 0; }
.condition-Fair .sizemap .estimate { fill: rgba(255, 193, 86, 1); stroke: rgba(250, 159, 26, 1); stroke-width: 0; }
.condition-Poor .sizemap .estimate { fill: rgba(244, 140, 140, 1); stroke: rgba(233, 24, 24, 1); stroke-width: 0; }
.condition-Neutral .sizemap .estimate { fill: rgba(117, 186, 174,.35); stroke: rgba(107, 178, 164, 1); stroke-width: 0; }


.title.indicator            { font-family: Arial, sans-serif; font-size: 1.2em; font-weight: normal; /*cursor: pointer;*/ }
.title.indicator tspan      { font-weight: bold; }
.title.metric               { font-family: Arial, sans-serif; font-size: 1.2em; font-weight: bold; }
.subtitle, .tick            { font-family: Arial, sans-serif; font-size: .8em; }

.grid .tick line            { stroke: #ddd; stroke-width: 1px; }
.tick                       { letter-spacing: -.3px; }
.tick line                  { stroke: #666; stroke-width: 1px; }
.tick text                  { fill: #666; }
.axis path, .axis line      { fill: none; stroke: #666; shape-rendering: crispEdges; stroke-width: 1px;}
.domain                     { fill: none; }
.no-data  {
    cursor: default;
    font-family: sans-serif;
    font-size: 1.45em;
    font-weight: 400;
    color: #A9A9A9;
    fill: #A9A9A9;
}

.no-data show-tips {
    cursor: pointer;
}

.sizemap-sub .no-data {
    font-size: 1.25em;
}

.btn                    { background: #FFF; border: 1px solid #ddd;}
.ellipsis               { text-overflow: ellipsis; }
.opacity-hover          { fill-opacity: 1 !important; }
.stroke-hover           { stroke-width: 2 !important; }
.hidden                 { display: none; visibility: hidden; }
.dim                    { opacity: .3;/*fill: rgba(255,255,255,.7);*/ }
.highlight              { opacity: 1;/*fill: rgba(255,255,255,0);*/ }
/*.fade   {
  height: 0;
  transition: opacity .15s linear, height .15s linear;
}
.fade.in  {
  height: 100%
}*/

.fade-side {
    display: none;
    height: 0;
    -webkit-transition: opacity .15s linear;
    -o-transition: opacity .15s linear;
    transition: opacity .15s linear;
}
.fade-side.in {
    display: inherit;
    height: 100%;
}

/****************
*****************
KERNING STYLE
*****************
****************/

#title-nw .char1    { margin-right: -1px; }
#title-nw .char2    { margin-right: -2px; }
#title-nw .char10   { margin-right: -7px; }
#title-nw .char11   { margin-right: -3px; }
#title-nw .char15   { margin-right: -7px; }
#title-nw .char16   { margin-right: -6px; }

/****************
*****************
BOOTSTRAP STYLE
*****************
****************/

#tab-panel          { max-width: 1040px; }
.navbar-inverse     { background-color: #2F6227; border-color: #062F04; }
.nav-tabs           { border-bottom: none; font-weight: 700; }
.nav-tabs > li      { margin-bottom: 0; }
.nav-tabs > li > a  { background-color: #ddd; color: #000; margin: 0; border-radius: 0; border-top: 1px solid #666; border-left: 1px solid #666; border-right: 1px solid #666; max-width: 280px; white-space: nowrap; overflow: hidden; font-family: 'Raleway',Arial, sans-serif; font-size: .9em; font-weight: bold; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { border-top: 1px solid #666; border-left: 1px solid #666; border-right: 1px solid #666; }
.navbar-inverse .navbar-brand { color: #FFFFFF; }
.dropdown-menu      { max-height: 300px; /*overflow: -moz-scrollbars-vertical;*/ overflow-y: auto; text-align: initial; }

#selector-view-container > ul > li > a { float: left; width: 100%}
#dropdown-ul-show-by > li > a { float: left; width: 100% }
#dropdown-ul-show-by-SI > li > a { float: left; width: 100% }

.modal-body {
    float: left;
    clear: both;
    width: 100%
}

button#dropdown-show-by, button#dropdown-show-by-SI, button#dropdown-time-change-subpop,button#dropdown-time-change-indicator {
    text-align: left;
    font-size: 12px;
    padding: 2px 12px;
    background-color: #eee;
    box-shadow: 0px 2px 1px #666;
    border: 1px solid #ccc;
}

button#dropdown-time-change-subpop-breakout, button#dropdown-time-change-indicator-breakout, button#dropdown-time-change-indicator-breakout-pt {
    text-align: center;
    font-size: 12px;
    padding: 2px 12px;
    background-color: #eee;
    box-shadow: 0px 2px 1px #666;
    border: 1px solid #ccc;
}

/****************
*****************
BREAKOUT STYLE
*****************
****************/
image.icon-breakout {
    cursor: pointer;
}

#modal-breakout h1 {
    color: rgb(0, 148, 175);
    font-family: Arial, sans-serif;
    font-size: 1.5em;
    margin: 0;
    text-transform: none;
    line-height: 1.2
}

#modal-breakout h2 {
    color: #333;
    /*font-family: 'Merriweather'; */
    font-family: Arial, sans-serif;
    font-weight: 700;
    font-size: 1.05em;
    margin: 0;
    text-transform: none;
    line-height: 1.2
}

#modal-breakout h3 {
    color: #333;
    /*font-family: 'Merriweather'; */
    font-family: Arial, sans-serif;
    font-weight: 400;
    font-size: 0.95em;
    margin: 0;
    text-transform: none;
}

#modal-breakout h3 span {
    color: #ccc;
    display: none;
}

/*#modal-breakout h3:nth-of-type(2) {*/
/*    text-transform: capitalize;*/
/*}*/

#modal-breakout .modal-backdrop {
    height: 100%;
}

#modal-title-container {
    width: 500px;
    display: inline-block;
    margin: 0 0 0 5px;
}

#modal-map-container {
    width: 200px;
    height: 80px;
    display: inline-block;
    vertical-align: top;
    /*transform: translate(0px, -15px);*/
    /*margin-left: 15px;*/
}

#modal-map-container img{
    width: 100%;
}

#modal-title-pt-lower h2, #modal-title-pt-upper h2 {
    color: #636161;
}

#breakout-text-container {
    display: inline-block;
    padding-top: 5px;
    width:720px;
}
#modal-icons{
    width: 30%;
    /* float: right; */
    display: inline-flex;
    flex-direction: row;
    justify-content: space-evenly;
}
#modal-icons img {
    margin: 5px 10px;
    cursor: pointer;
}   

.modal-header {
    padding: 15px 15px 0 15px;
    border-bottom: 0px solid #e5e5e5;
    width: 100%;
}

.modal-body {
    padding: 5px 15px 20px;
}

.modal-footer {
    overflow: auto;
    width: 100%;
}

.bullet-sub.condition-Good .range      { fill: rgba(107, 163, 214, 1); fill-opacity: 1; stroke: rgba(35, 129, 214, 1); stroke-width: 0;}
.bullet-sub.condition-Good .confidence { fill: rgb(190, 190, 190); fill-opacity: .7; }
.bullet-sub.condition-Good .measure    { fill: rgba(166, 200, 230, .5); fill-opacity: .5; stroke: rgba(107, 163, 214, 1); }

.bullet-sub.condition-Fair .range      { fill: rgba(255, 193, 86, 1); stroke: rgba(255, 193, 86, 1); fill-opacity: 1; stroke-width: 0;}
.bullet-sub.condition-Fair .confidence { fill: rgba(255, 193, 86, 1); fill-opacity: 1; }
.bullet-sub.condition-Fair .measure    { fill: rgba(255, 218, 154, .5); fill-opacity: .5; stroke: rgba(255, 193, 86, 1); }

.bullet-sub.condition-Poor .range      { fill: rgb(244, 140, 140); fill-opacity: 1; stroke: rgba(233, 24, 24, 1); stroke-width: 0;}
.bullet-sub.condition-Poor .confidence { fill: rgb(190, 190, 190); fill-opacity: .7; }
.bullet-sub.condition-Poor .measure    { fill: rgb(251, 225, 226); fill-opacity: .5; stroke: rgba(233, 87, 87, 1); }

.bullet-sub.condition-Missing .range      { fill: rgba(210, 153, 125, 1); stroke: rgba(210, 153, 125, 1); fill-opacity: 1; stroke-width: 0;}
.bullet-sub.condition-Missing .confidence { fill: rgba(210, 153, 125, .5);  fill-opacity: .7; }
.bullet-sub.condition-Missing .measure    { fill: rgba(210, 153, 125, .5); fill-opacity: .5; stroke: rgba(210, 153, 125, 1);}

.bullet-sub.condition-Neutral .range      { fill: rgba(117, 186, 174, 1); stroke: rgba(107, 178, 164, 1); fill-opacity: 1; stroke-width: 0;}
.bullet-sub.condition-Neutral .confidence { fill: rgba(117, 186, 174,.35);  fill-opacity: .7; }
.bullet-sub.condition-Neutral .measure    { fill: rgba(117, 186, 174,.35); stroke: rgba(107, 178, 164, 1);}

.range-sub.condition-Good path.significant-Yes { stroke: rgba(62, 92, 210, 1); fill: rgba(62, 92, 210, 1);}
.range-sub.condition-Good path.significant-No  { stroke: rgba(107, 163, 214, 1); fill: rgba(107, 163, 214, 1); }
.range-sub.condition-Good rect.significant-Yes { fill: rgba(62, 92, 210, 1); stroke: rgba(62, 92, 210, 1); }
.range-sub.condition-Good rect.significant-No  { fill: rgba(107, 163, 214, 1); stroke: rgba(107, 163, 214, 1); }
.range-sub.condition-Fair path.significant-Yes { stroke: rgba(250, 159, 26, 1); fill: rgba(250, 159, 26, 1);}
.range-sub.condition-Fair path.significant-No  { stroke: rgba(255, 193, 86, 1); fill: rgba(255, 193, 86, 1); }
.range-sub.condition-Fair rect.significant-Yes { fill: rgba(250, 159, 26, 1); stroke: rgba(250, 159, 26, 1); }
.range-sub.condition-Fair rect.significant-No  { fill: rgba(255, 193, 86, 1); stroke: rgba(255, 193, 86, 1); }
.range-sub.condition-Poor path.significant-Yes { stroke: rgba(233, 24, 24, 1); fill: rgba(233, 24, 24, 1);}
.range-sub.condition-Poor path.significant-No  { stroke: rgba(244, 140, 140, 1); fill: rgba(244, 140, 140, 1); }
.range-sub.condition-Poor rect.significant-Yes { fill: rgba(233, 24, 24, 1); stroke: rgba(233, 24, 24, 1); }
.range-sub.condition-Poor rect.significant-No  { fill: rgba(244, 140, 140, 1); stroke: rgba(244, 140, 140, 1); }
.range-sub.condition-Missing path.significant-Yes { fill: rgba(153, 101, 75, 1); stroke: rgba(153, 101, 75, 1);}
.range-sub.condition-Missing path.significant-No  { fill: rgba(210, 153, 125, 1); stroke: rgba(210, 153, 125, 1);}
.range-sub.condition-Missing rect.significant-Yes { fill: rgba(153, 101, 75, 1); stroke: rgba(153, 101, 75, 1); }
.range-sub.condition-Missing rect.significant-No  { fill: rgba(210, 153, 125, 1); stroke: rgba(210, 153, 125, 1); }
.range-sub.condition-Neutral path.significant-Yes { fill: rgba(40, 137, 118, 1); stroke: rgba(40, 137, 118, 1);}
.range-sub.condition-Neutral path.significant-No  { fill: rgba(107, 178, 164, 1); stroke: rgba(107, 178, 164, 1);}
.range-sub.condition-Neutral rect.significant-Yes { fill: rgba(40, 137, 118, 1); stroke: rgba(40, 137, 118, 1); }
.range-sub.condition-Neutral rect.significant-No  { fill: rgba(107, 178, 164, 1); stroke: rgba(107, 178, 164, 1); }

.slope-sub.condition-Good .measure.significant-Yes { stroke: rgba(62, 92, 210, 1); stroke-width: 2px; stroke-linecap:round; fill: rgba(62, 92, 210, 1);}
.slope-sub.condition-Good .measure.significant-No  { stroke: rgba(107, 163, 214, 1); stroke-width: 2px; stroke-linecap:round; fill: rgba(107, 163, 214, 1);}
.slope-sub.condition-Poor .measure.significant-Yes { stroke: rgba(233, 24, 24, 1); stroke-width: 2px; stroke-linecap:round; fill: rgba(233, 24, 24, 1);}
.slope-sub.condition-Poor .measure.significant-No  { stroke: rgba(244, 140, 140, 1); stroke-width: 2px; stroke-linecap:round; fill: rgba(244, 140, 140, 1);}
.slope-sub.condition-Fair .measure.significant-Yes { stroke: rgba(250, 159, 26, 1); stroke-width: 2px; stroke-linecap:round; fill: rgba(250, 159, 26, 1);}
.slope-sub.condition-Fair .measure.significant-No  { stroke: rgba(255, 193, 86, 1); stroke-width: 2px; stroke-linecap:round; fill: rgba(255, 193, 86, 1);}
.slope-sub.condition-Missing .measure.significant-Yes { stroke: rgba(153, 101, 75, 1); stroke-width: 2px; stroke-linecap:round; fill: rgba(153, 101, 75, 1);}
.slope-sub.condition-Missing .measure.significant-No  { stroke: rgba(210, 153, 125, 1); stroke-width: 2px; stroke-linecap:round; fill: rgba(210, 153, 125, 1);}
.slope-sub.condition-Missing .measure.significant-Yes { stroke: rgba(153, 101, 75, 1); stroke-width: 2px; stroke-linecap:round; fill: rgba(153, 101, 75, 1);}
.slope-sub.condition-Missing .measure.significant-No  { stroke: rgba(210, 153, 125, 1); stroke-width: 2px; stroke-linecap:round; fill: rgba(210, 153, 125, 1);}

.condition-Poor .measure.hc {
    fill: rgba(251, 225, 226, .5);
    stroke: rgba(233, 87, 87, 1);
}

.condition-Poor .measure.mc {
    fill: rgba(255, 218, 154, .5);
    stroke: rgba(255, 193, 86, 1);
}

.condition-Poor .measure.lc {
    fill: rgba(166, 200, 230, .5);
    stroke: rgba(107, 163, 214, 1);
}

.condition-Poor .measure.na {
    fill: rgba(210, 153, 125, .5);
    stroke: rgba(210, 153, 125, 1);
}

.condition-Poor .measure.other {
    fill: rgba(166, 200, 230, .5);
    stroke: rgba(107, 163, 214, 1);
}
.condition-Poor .measure.relextent {
    fill: rgba(251, 225, 226, .5);
    stroke: rgba(233, 87, 87, 1);
}

.condition-Poor .measure.relrisk {
    fill: rgba(211, 205, 244, 1);
    stroke: rgba(123, 102, 210, 1);
}

.condition-Poor .measure.attrrisk {
    fill: rgba(232, 204, 247, 1);
    stroke: rgba(171, 106, 213, 1);
}

.slope .measure.hc, .slope .measure.mc, .slope .measure.lc, .slope .measure.er {
    stroke-width: 2px;
}

.slope .measure.hc, .slope .measure.mc, .slope .measure.lc, .slope .measure.na, .slope .measure.other {
    stroke-width: 2px;
}


.slope .measure.significant-No.hc {
    stroke: rgba(244, 140, 140, 1);
}

.slope .measure.significant-No.mc {
    stroke: rgba(255, 193, 86, 1);
}

.slope .measure.significant-No.lc {
    stroke: rgba(107, 163, 214, 1);
}

.slope .measure.significant-No.na {
    stroke: rgba(210, 153, 125, 1);
}

.slope .measure.significant-No.other {
    stroke: rgba(107, 163, 214, 1);
}

.slope .measure.significant-Yes.hc {
    stroke: rgba(233, 24, 24, 1);
}

.slope .measure.significant-Yes.mc {
    stroke: rgba(250, 159, 26, 1);
}

.slope .measure.significant-Yes.lc {
    stroke: rgba(62, 92, 210, 1);
}

.slope .measure.significant-Yes.na {
    stroke: rgba(153, 101, 75, 1);
}

.slope .measure.significant-Yes.other {
    stroke: rgba(62, 92, 210, 1);
}

.range.hc, .range.relextent {
    fill: rgba(244, 140, 140, 1);
}


.measure.hc {
    fill: rgba(251, 225, 226, .5);
    stroke: rgba(233, 87, 87, 1);
}

.measure.mc {
    fill: rgba(255, 218, 154, .5);
    stroke: rgba(255, 193, 86, 1);
}

.measure.lc {
    fill: rgba(166, 200, 230, .5);
    stroke: rgba(107, 163, 214, 1);
}

.measure.na {
    fill: rgba(210, 153, 125, .5);
    stroke: rgba(210, 153, 125, 1);
}

.measure.other {
    fill: rgba(166, 200, 230, .5);
    stroke: rgba(107, 163, 214, 1);
}

.range.mc { fill: rgba(255, 193, 86, 1); }

.range.lc { fill: rgba(107, 163, 214, 1); }

.range.na { fill: rgba(210, 153, 125, 1); }

.range.other { fill: rgba(107, 163, 214, 1); }

.bullet .range.hc { stroke: rgba(233, 24, 24, 1); }

.bullet .range.mc { stroke: rgba(255, 238, 25, 1); }

.bullet .range.lc { stroke: rgba(35, 129, 214, 1); }

.bullet .range.na { stroke: rgba(210, 101, 47, 1); }

.bullet .range.other { stroke: rgba(35, 129, 214, 1); }

.condition-Poor .range.relrisk {
    fill: rgba(123, 102, 210, 1);
    stroke: rgba(123, 102, 210, 1);;
}

.condition-Poor .range.attrrisk {
    fill: rgba(171, 106, 213, 1);
    stroke: rgba(171, 106, 213, 1);
}

.condition-Poor .range.significant-No.hc {
    fill: rgba(244, 140, 140, 1);
    stroke: rgba(244, 140, 140, 1);
}
.condition-Poor .range.significant-No.mc {
    fill: rgba(255, 193, 86, 1);
    stroke: rgba(255, 193, 86, 1);
}
.condition-Poor .range.significant-No.lc {
    fill: rgba(107, 163, 214, 1);
    stroke: rgba(107, 163, 214, 1);
}
.condition-Poor .range.significant-No.na {
    fill: rgba(210, 153, 125, 1);
    stroke: rgba(210, 153, 125, 1);
}
.condition-Poor .range.significant-No.other {
    fill: rgba(244, 140, 140, 1);
    stroke: rgba(244, 140, 140, 1);
}

.condition-Poor .range.significant-Yes.hc {
    fill: rgba(233, 24, 24, 1);
    stroke: rgba(233, 24, 24, 1);
}
.condition-Poor .range.significant-Yes.mc {
    fill: rgba(250, 159, 26, 1);
    stroke: rgba(250, 159, 26, 1);
}
.condition-Poor .range.significant-Yes.lc {
    fill: rgba(62, 92, 210, 1);
    stroke: rgba(62, 92, 210, 1);
}
.condition-Poor .range.significant-Yes.na {
    fill: rgba(153, 101, 75, 1);
    stroke: rgba(153, 101, 75, 1);
}
.condition-Poor .range.significant-Yes.other {
    fill: rgba(233, 24, 24, 1);
    stroke: rgba(233, 24, 24, 1);
}

/****************
*****************
SPINNER STYLE
*****************
****************/

#modal-spinner .spinner {
    margin: 0;
    padding: 0;
}

#modal-spinner h2 {
    margin-top: 5px;
}

#modal-spinner .modal-sm {
    width: 202px;
    margin: 200px auto;
}

.spinner {
    margin: 180px -103px;
    width: 200px;
    height: 180px;
    text-align: center;
    font-size: 4px;
    background: #fff;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ccc), to(#fff));
    background-image: -webkit-linear-gradient(bottom, #ccc, #fff);
    border-radius: 10px;
    padding: 10px;
    box-shadow: 5px 5px 5px #2F2923;
    position: absolute;
    left: 50%;
}

.spinner > h2 {
    color: #1C8390;
    font-family: 'Josefin Slab';
    font-weight: 700;
    font-size: 30px;
    text-transform: uppercase;
}

.spinner > div {
    background-color: #1C8390;
    height: 25%;
    width: 20px;
    display: inline-block;
    -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
    animation: stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.spinner .rect3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

.spinner .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.spinner .rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {
    0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
    20% { -webkit-transform: scaleY(1.0) }
}

@keyframes stretchdelay {
    0%, 40%, 100% {
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
    }  20% {
           transform: scaleY(1.0);
           -webkit-transform: scaleY(1.0);
       }
}
/****************
*****************
TOOLTIP STYLE
*****************
****************/

.d3-tip {
     font-family: Arial, sans-serif;
     font-size: 12px;
     line-height: 1.4;
     font-weight: normal;
     padding: 18px;
     background: rgba(255, 255, 255, .95);
     color: #000;
     border-radius: 2px;
     pointer-events: none;
     border: 1px solid #666;
     box-shadow: 1px 1px 1px #666;
     z-index: 10000;
     width: 540px;
 }

.d3-tipChange{
    width: 586px;
    /*height: 250px;*/
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
    box-sizing: border-box;
    display: inline;
    font-size: 10px;
    font-weight: normal;
    width: 100%;
    line-height: 1;
    color: rgba(255, 255, 255, .95);
    position: absolute;
    pointer-events: none;
}

/* Northward tooltips */
/*.d3-tip.n:after {
  content: "\25BC";
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
  text-align: center;
}*/

/* Eastward tooltips */
.d3-tip.e:after {
    content: "\25C0";
    margin: -4px 0 0 0;
    top: 50%;
    left: -8px;
}

/* Southward tooltips */
/*.d3-tip.s:after {
  content: "\25B2";
  margin: 0 0 1px 0;
  top: -8px;
  left: 0;
  text-align: center;
}*/

/* Westward tooltips */
.d3-tip.w:after {
    content: "\25B6";
    margin: -4px 0 0 -1px;
    top: 50%;
    left: 100%;
}

.d3-tip h1 {
    color: #000;
    font-size: 1.2em;
    font-weight: 700;
    margin: 0px 0px 0px 0px;
    text-transform: none;
    /* changed text transform from capitalize to none so the a in Chlorophyll a is not capitalized*/
    line-height: 1.2em;
}

.d3-tip h1 .tooltip-header-normal{
    font-weight: normal;
}

.d3-tip h2 {
    color: #000;
    font-size: 1.2em;
    font-weight: 100;
    margin: 0px 0px 12px 0px;
    /*text-transform: capitalize;*/
    line-height: 1.2em;
}

.d3-tip img {
    float: left;
    width: 180px;
    height: auto;
    padding-bottom: 8px;
}

.d3-tip p {
    margin: 0px;
}
p#change_tip_note{
    margin-top: 35px;
}
.d3-tip div {
    display: inline-block;
    margin: 0px 0px 12px 0px;
}

/*.d3-tip table tr:first-child {*/
/*font-weight: 700;*/
/*padding: 15px;*/
/*color: #1B1B1B;*/
/*font-size: 1.1em;*/
/*!* text-transform: capitalize; *!*/
/*}*/

/*.d3-tip table tr:first-child td {*/
/*padding: 0 0 10px 0;*/
/*}*/

/* This style may not be helpful */
#tooltip-img {
    float: right;
}

.d3-tip .tooltip-img-wrapper {
    height: 81px;
    float: right;
    margin: 0px;
}

/* This class doesn't seem to be in use */
.d3-tip .tooltip-img-container {
    /*text-align:center;*/
    /*border:1px solid #EEE;*/
    margin-right: 5px;
    float:left;
}

/*.d3-tip .tooltip-table {
  width:480px;
}*/

.d3-tip .tooltip-table .blank-row {
    height: 10px;
}

.tip-warning {
    color:rgb(255,0,0) !important;
}

.nationalTip {
    background-color: #ebebeb;
    fill: #CCCCCC; fill-opacity: 1;
    stroke: #999999;
    stroke-width: 3;
}


.study-population-selector {
    padding: 0 3px 0px 3px;
    background-color: #eee;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.study-population-selector .radio {
    margin: 3px 0 3px 0;
}

#filters h5{
    margin: 8px 0 2px 0;
}
#filters .dropdown{
    padding:0;
    margin:0;
}

.hide-labels {
    display: none;
}
.noDataTextbox {
    width: 100%;
    height: 170px;
    background-color: #EEE;
    text-align: center;
    vertical-align: middle;
    padding: 50px 100px;
    border: 1px solid #bbb;
    display: inline-block;
    margin-top: 5px;
}
.noDataTextbox h3{
    line-height: 1.5em;
}
#trendlineChart{
    position: absolute;
    left: 48%;
    top:5%;
    width: 50%;
    height: 80%;
    font-family: Arial, sans-serif;
}
#trendLineText{
    position: absolute;
    right:20px;
    text-anchor: start;
}
.trendline_heavy{
    stroke-width:0.25em;
}
.trendline_light{
    stroke-width:0.05em;
}
.Trendaxis path{
    stroke: #666;
    stroke-width: 1.0px;
    shape-rendering: auto;
}

.Trendaxis .tick line {
    stroke: #666;
    stroke-width: 1.0px;
    shape-rendering: auto;
}

.Trendaxis .domain {
    stroke: #666;
    stroke-width: 1.0px;
    shape-rendering: auto;
}

.sigText{
    font-size: 0.8em;
    font-weight: bold;
    line-height: 1.2;
    background-color: #FFFFFF;
    padding-left: 7px;
}
.returnButton{
    padding: 0;
    border: none;
    font-size: .8em;
    background-color: white;
    color:#365693;
}
.returnButton-div{
    padding: 2px 0px;
    border: none;
    font-size: .8em;
    background-color: white;
}
.lightGrey {
    color: lightgray;
}
#overlay {
    position: fixed;
    width: 100%;
    height: 0px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f9f9f9;
    opacity: .95;
    z-index: 1000;
    cursor: pointer;
}

#overlay-text-IE, #overlay-text-Edge {
    height: 0;
    text-align: center;
    position: absolute;
    top: 30%;
    left: 50%;
    font-size: 2em;
    color: black;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    opacity: 0.0;
    cursor: default;
}
#overlay-text-Edge{
    position: relative;
    width: 800px;
    top: 16%;
}
#intro-icon-overlay {
    position: relative;
    height: 13px;
    width: 13px;
    top: 97px;
    left: 233px;
}
#intro-icon-overlay img{
    position: relative;
    top: 0px;
    left: 0px;
    height: 13px;
    width: 13px;
}

/*div#dropdown-wetland-type-container,*/
/*div#dropdown-wetland-group-container,*/
/*div#dropdown-region-container,*/
/*div#dropdown-region-group-container,*/
/*div#dropdown-condition-container,*/
/*div#dropdown-wetland-type-container-risk,*/
div#dropdown-subpopulation-container,
div#dropdown-aggregation-container-si{
    margin-bottom: 5px;
}

#dropdown-ul-subpopulation, #dropdown-ul-indicator-si{
    overflow-y: visible;
    overflow-x: visible;
}

#dropdown-subpopulation-container ul, #dropdown-indicator-container-si ul{
    -webkit-transition: .5s;
    transition: .5s;
}

#dropdown-subpopulation-container li, #dropdown-indicator-container-si li{
    width: 200px;
    list-style: none;
    -webkit-transition: .5s;
    transition: .5s;
}

#dropdown-subpopulation-container a, #dropdown-indicator-container-si a{
    display: block;
    text-decoration: none;
    padding: 3px 20px;
    color: #000;
}


#dropdown-subpopulation-container ul ul, #dropdown-indicator-container-si ul ul{
    position: absolute;
    right: 100%;
    display: none;
    transform: translate(0px,-34px);
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, .15);
    min-width: 160px;
}

#dropdown-subpopulation-container li:hover, #dropdown-indicator-container-si li:hover{
    background: white;
}

.dropdown-menu {
    top: auto;
    left: auto;
}

.glyphicon-triangle-left{
    font-size: 10px;
    color:grey;
}

.introjs-helperNumberLayer{
    top:-1px  !important;
    left:-27px !important;
}

.dropdown-toggle:focus{
    outline: 1px solid blue;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.dropdown-toggle ul li:focus{
    outline: 1px solid blue;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

#estuarine:focus, #great_lakes:focus {
    background: blue;
}

#returnToHome-button:focus {
    outline: 1px solid blue;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.dropdown-ul-subpopulation ul li:focus-within{
    opacity: 1;
    display: block;
}

#draft_overlay{
    position: absolute;
    left: 600px;
    width: 178px;
    height: 64px;
    top: 0px;
    background-color: #f9f9f9;
    opacity: .75;
    z-index: 1000;
    cursor: default;
    text-align: center;
}
#draft_overlay p{
    font-size: 1.5em;
}
#overlay-image-export{

    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: #f9f9f9;
    z-index: 1050;
    cursor: default;
  
    opacity: .8;
    display: none;
  }
  
  #overlay-image-export h1 {
    text-align: center;
    font-size: 3em;
    font-family: Arial, sans-serif;
    color: black;
  
    display: flex;
    justify-content: center;
    align-items: center;
  
    height: 100%;
    width: 100%;
  }