/*clearfix*/
.c-fix:after{
  content:""; 
  display:table; 
  clear:both;
}

.metro-interactive{
  padding:1rem 0rem;
  max-width:1920px;
  margin:0rem auto;
}

.metro-interactive svg{overflow:visible;}

/*use border-box on div containers*/
.metro-interactive div{
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
}

.metro-interactive ul{
  padding-left: 25px;
}

.metro-interactive ul li{
  list-style-image: url('https://www.brookings.edu/wp-content/uploads/2018/06/water_workforce_check.png');
  margin:1em 0px 1.5em 0px;
  padding-bottom:7px;
  border-bottom: 1px dotted rgb(124,206,210);
  font-size:0.88rem;
}

.metro-interactive ul li span{
  position:relative;
  top:-4px;
}

/*text*/
/*by default, match site styling*/
.metro-interactive p, .metro-interactive li, .metro-interactive select{
  font-family:"PT Serif", Times, serif;
  margin:1em 0em 1em 0em;
  color: #111111;
  line-height:1.75em;
}

.metro-interactive text{
  font-size:1rem;
  font-family:"PT Serif", Times, serif;
  fill: #111111;
  user-select:none;
}

.metro-interactive div.as-table{
  display:table;
}

.metro-interactive div.as-table > div{
  display:table-row;
}

.metro-interactive div.as-table > div > div{
  display:table-cell;
  vertical-align:bottom;
  padding:0rem 2rem 0rem 0rem;
  width:50%;
}

.metro-interactive div.as-table > div > div p{margin:0px;}

.metro-interactive .centre-col{
  max-width:780px;
  padding:0rem 30px;
  margin:0rem auto 4rem auto;
}

/*three levels of titles*/
/*1 - big, section separator*/
.metro-interactive div.section-title-mpp{
  margin:4rem 0em 3rem 0em;
  padding: 1rem 1rem 1rem 1rem;
  border-bottom: 1px solid #aaaaaa;
}

.metro-interactive div.section-title-mpp > div{
  position:relative;
  padding:40px;
}

.metro-interactive div.section-title-mpp.image-backed{
  padding:100px 0rem 3rem 0rem;
  margin:6rem 0em 4rem 0em;
  min-height:75vh;
  background-attachment: fixed;
  background-position: 50% 50%;
  background-size:cover;
  border:1px solid rgb(124,206,210);
  border-width:1px 0px;
}

.metro-interactive div.section-title-mpp p span{
  display:block;
  position:absolute;
  top:-42px;
  left:-42px;
  font-size:24px;
  line-height:24px;
  text-align:center;
  height:42px;
  width:42px;
  padding:8px;
  background-color:rgba(21,58,108,0.85);
  border:1px solid rgb(124,206,210);
  text-shadow:none;
  font-weight:bold;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.metro-interactive span.nobrk{
  white-space: nowrap;
}

.metro-interactive div.section-title-mpp.image-backed > div{
  max-width:780px;
  margin: 0rem auto;
  padding:30px 30px;
  background-color:rgba(21,58,108,0.85);
  border:1px solid rgb(124,206,210);
}

.metro-interactive div.section-title-mpp.image-backed > p{
  max-width:780px;
  text-align:right;
  font-size:16px;
  font-weight:bold;
}

.metro-interactive div.section-title-mpp.image-backed > p > a{
  color:#ffffff;
  text-shadow: 1px 1px 3px #333333;
  margin-left:10px;
}


.metro-interactive div.section-title-mpp.image-backed > div > p{
  font-size:1.15rem;
  font-style:italic;
  text-shadow: 1px 1px 3px #333333;
  color:#ffffff;
  margin:0rem 0rem 30px 0rem;
}

.metro-interactive div.section-title-mpp.image-backed > div > p:first-child{
  font-style:normal;
  font-size:2rem;
  line-height:1.4em;
  margin-bottom:30px;
}

.metro-interactive div.section-title-mpp.no-border{border-bottom:none;}
.metro-interactive div.section-title-mpp > p{
  font-weight:bold;
  font-size:2em;
  line-height:1.5em;
  margin:0em auto;
}
.metro-interactive div.section-title-mpp > p{
  max-width:1200px;
  text-align:center;
}

/*2 - bold item title -- usually chart*/
.metro-interactive p.chart-title{
  font-size:1.35em;
  font-weight:bold;
  margin:0rem 0rem 1rem 0rem;
}

/*3 - subtitle*/
.metro-interactive p.chart-subtitle{
  font-size:1.15em;
  margin:-1rem 0rem 1rem 0rem;
}

.metro-interactive div > img{
  display:block;
  width:100%;
  height:auto;
}

.metro-interactive svg text.percentile-label{
  font-style:italic;
}

.metro-interactive .chart-col{
  min-height:350px;
  background-color:#eaefee;
  padding:2rem 1rem;
  margin:0rem auto 3rem auto;
}

.metro-interactive .chart-col > div{
  max-width:780px;
  padding:0rem 2rem;
  margin:4rem auto 3rem;
}

.metro-interactive .chart-col > div:first-child{
  margin:0rem auto;
}

.metro-interactive .chart-col > div > p{
  max-width:720px;
  margin:0rem auto;
}

.metro-interactive .chart-col > div p:first-child{
  font-size:1.15rem;
  font-weight:bold;
  margin-bottom:5px;
}

.metro-interactive .chart-col img{
  display:block;
  width:100%;
  height:auto;
  margin:1rem auto;
}

.metro-interactive .chart-col > div > p:last-child{
  color:#555555;
  font-style:italic;
  font-weight:normal;
}


.metro-interactive .chart-col p.source-or-note,
.metro-interactive p.interactive-source{
  font-size:0.9em;
  color:#555555;
  font-style:italic;
  position:relative;
  margin-top:2rem;
}

.metro-interactive .chart-col p.source-or-note:before,
.metro-interactive p.interactive-source:before{
  position:absolute;
  top:-5px;
  left:0px;
  width:100px;
  height:1px;
  border-top:1px solid #aaaaaa;
  content:"";
}

.metro-interactive .chart-col.side-by-side{
  padding:0px;
}

.metro-interactive .chart-col.side-by-side > div{
  display:table;
  width:100%;
  max-width:none;
  padding:0px;
}

.metro-interactive .chart-col.side-by-side > div > div{
  display:table-row;
}

.metro-interactive .chart-col.side-by-side > div > div > div{
  display:table-cell;
  padding:0px 30px;
}


.metro-interactive select{
  margin: 5px 0rem;
  padding:7px 4px;
}

.metro-interactive .equal-height p{
  padding:0px 0px 20px 0px;
  margin:0px;
}

.metro-interactive .water-workforce-menu{
  max-width:1600px;
  padding:10px 0px;
  margin:0rem auto 2rem auto;
}

.metro-interactive .water-workforce-menu > p{
  text-align:center;
  border-bottom: 1px solid rgb(124,206,210);
  margin:5px;
  padding:5px;
  font-weight:bold;
  font-size:1.15rem;
}

.metro-interactive .water-workforce-menu > div{
  display:table;
  width:100%;
}

.metro-interactive .water-workforce-menu > div > div{
  display:table-row;
}

.metro-interactive .water-workforce-menu > div > div > div{
  display:table-cell;
  text-align:center;
  padding: 10px 10px;
}

.metro-interactive .water-workforce-menu > div > div > div > p{
  background-color:rgba(21,58,108,0.85);
  border: 1px solid rgb(124,206,210);
  color:#ffffff;
  padding:5px 10px;
  margin:0px;
  border-radius:0px;
}

.metro-interactive a.simple-link,
.metro-interactive a.simple-link:hover,
.metro-interactive a.simple-link:active{
  color:#ffffff;
  text-decoration:none;
  border:none;
}

.metro-interactive .swatch-ww{
  display:inline-block;
  width:1em;
  height:0.65em;
  background-color:#7CCED2;
  vertical-align:middle;
}

.metro-interactive .swatch-ao{
  display:inline-block;
  width:1em;
  height:0.65em;
  background-color:#cccccc;
  vertical-align:middle;
}

.metro-interactive .select-prompt{
  margin:0rem;
}

.metro-interactive .panel-wrap p{
  margin:0rem;
}

.metro-interactive .panel-wrap p:first-child{
  font-weight:bold;
  font-size:1.15rem;
}

.metro-interactive .panel-wrap > div:first-child{
  float:left;
  width:40%;
  padding-right:2rem;
  padding-left:0rem;
  border:none;
}

.metro-interactive .panel-wrap > div{
  float:left;
  width:60%;
  padding-left:2rem;
  border-left:1px solid #aaaaaa;
}

.metro-interactive .all-caps-prompt{
  font-size:0.85rem;
  text-transform:uppercase;
}


.metro-interactive table thead tr th{
  font-weight:bold;
  font-size:1rem;
}

.metro-interactive table thead tr th,
.metro-interactive table tbody tr td{
  background:none;
  background-color:transparent;
  text-align:left;
  border:none;
  border-bottom:1px solid #dddddd;
  vertical-align:bottom;
  padding:7px 5px 3px 5px;
  font-size:1rem;
  line-height:1.35em;
}

@media (min-width:0px){

  .metro-interactive .chart-col.side-by-side > div > div > div{
    display:block;
    margin-bottom:3rem;
    width:auto;
  }
  .metro-interactive .chart-col.side-by-side > div > div > div > p{
    display:block;
    margin-bottom:1rem;
  }
  .metro-interactive .chart-col.side-by-side > div > div.chart-row-1{
    display:none;
  } 

  .metro-interactive div.section-title-mpp.image-backed{
    padding-top:60px;
  }

  .metro-interactive div.section-title-mpp.image-backed > div{
    padding:50px 40px 20px 40px;
    border-width:1px 0px;
  }  

  .metro-interactive div.section-title-mpp p span{
    top:0px;
    left:0px;
    border-width:0px 1px 1px 1px;
  }

  .metro-interactive .water-workforce-menu > div > div > div{
    display:block;
    text-align:left;
  }

  .metro-interactive .panel-wrap > div{
    float:none;
    width:auto;
    padding:0rem;
    padding-left:1rem;
    padding-left:calc(1rem - 5px);
    border:none;    
  }
  .metro-interactive .panel-wrap > div:first-child{
    float:none;
    width:auto;
    padding:0rem;
    border:none;
  }  
}

@media (min-width:640px){
  .metro-interactive .water-workforce-menu > div > div > div{
    display:table-cell;
    text-align:center;
  }
}

@media (min-width:880px){

  .metro-interactive div.section-title-mpp.image-backed{
    padding-top:120px;
  }

  .metro-interactive div.section-title-mpp.image-backed > div{
    border-width:1px;
  }  

  .metro-interactive div.section-title-mpp p span{
    top:-42px;
    left:-42px;
    border-width:1px;
  }
}

@media (min-width:1100px){
  .metro-interactive .chart-col.side-by-side > div > div > div{
    display:table-cell;
    vertical-align:top;
    width:33%;
  }

  .metro-interactive .chart-col.side-by-side > div > div.chart-row-2 p{
    display:none;
  }

  .metro-interactive .chart-col.side-by-side > div > div.chart-row-1{
    display:table-row;
  }

  .metro-interactive .panel-wrap > div{
    float:left;
    width:60%;
    padding-left:2rem;
    border-left:1px solid #aaaaaa;
  }  

  .metro-interactive .panel-wrap > div:first-child{
    float:left;
    width:40%;
    padding-right:2rem;
    padding-left:0rem;
    border:none;
  }

}

@media (min-width:1920px){

}