html, body{
    height: 100%;
    margin: 0px auto;
  }
  body{
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Droid Sans","Helvetica Neue",Arial,sans-serif;
    font-size: 18px;
    color: rgb(55,55,55);
    line-height: 1.42;
  }
  a{
      text-decoration: none;
      /*color: #0a5fe3;*/
      color: #054cbb;
  }
  a:hover, a:focus{
      text-decoration: underline;
  }
  .banner, .footer{
      width: 100%;
      background-color: #404040;
      padding: 10px;
      box-sizing: border-box;
  
      display: flex;
      align-items: center;
      justify-content: space-between;
  }
  .footer{
      min-height: 56px;
      margin-top: -50px;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      position: relative;
  }
  .banner{
      height: 74px;
  }
  .top-group{
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 4000;
  }
  .footer-left{
      margin-right: 40px;
      flex: 0 1 700px;
  }
  .footer-right{
      flex: 0 1 450px;
  }
  .main{
      padding-top: 107px;
      padding-bottom: 50px;
      min-height: 100%;
      box-sizing: border-box;
  }
  .main.on-map{
      height: 100%; /*only on mapping page*/
  }
  .extra-main{
      padding-top: 90px;
      padding-bottom: 60px;
      padding-left: 15px;
      padding-right: 15px;
      margin: 0 auto;
      margin-bottom: 40px;
      max-width: 900px;
  }
  .extra-main.split-main{
    margin-left: 330px;
    padding-left: 24px;
    /*border-left: 3px solid #404040;*/

  }
  .extra-main p{
      max-width: 800px;
  }
  h2.menu-header, h2.mini-menu-header{
    font-size: 22px;
    font-style: italic;
  }
  h2.mini-menu-header{
    font-size: 20px;
    margin: 0 10px;
    margin-bottom: 6px;
  }
  .top-local-nav{
    display: none;
    position: relative;
    top: 74px;
    left: 0;
    background-color: rgb(232,232,232);
    padding: 10px 6px;
  }

  .left-nav{
    width: 330px;
    box-sizing: border-box;
    overflow-y: auto;
    scrollbar-width: thin;
    height: calc(100vh - 74px);
    position: fixed;
    top: 74px;
  }
  .left-nav a, .top-local-nav a{
    display: block;
    margin: 26px 0;
    font-size: 20px;
    padding-left: 13px;
    position: relative;
    color: rgb(55,55,55);
    line-height: 1.2;
  }
  .top-local-nav a{
    display: inline-block;
    margin: 6px 10px;
    font-size: 17px;
    padding-left: 14px;
  }
  .left-nav a:hover, .left-nav a:focus, .top-local-nav a:hover, .top-local-nav a:focus{
    color: #054cbb;
  }
  .left-nav a::before, .top-local-nav a::before{
    display: block;
    content: "";
    position: absolute;
    left: 0;
    top: 10px; 
    height: 0;
    width: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid #404040;
  }
  .top-local-nav a::before{
    top: 7px;
  }
  h2.menu-header + a{
    margin-top: 20px;
  }
  .left-nav-inner{
    background-color: rgb(232,232,232);
    border-radius: 6px;
    padding: 12px 20px 12px 26px;
    width: 300px;
    box-sizing: border-box;
    margin: 20px auto;
  }
  
  .main-error{
      padding-top: 90px;
      padding-bottom: 50px;
      min-height: 100%;
      box-sizing: border-box;
  }
  p{
      font-size: 17px;
  }
  .upper-links{
    font-size: 19px;
    display: flex;
    width: 470px;
    align-items: center;
    justify-content: space-between;
    margin: 0 20px;
    max-width: calc(100% - 580px);
  }
  .footer, .footer p{
      font-size: 14px;
      color: rgb(252,252,252);
      line-height: 1.2;
  }
  .banner a, .footer a{
      color: #f0d5bf;
  }
  .banner a.no-pad{
      margin: 0;
  }
  .banner a.no-pad:hover, .banner a.no-pad:focus{
      text-decoration: none;
  }
  .banner a:hover, .banner a:focus, .footer a:hover, .footer a:focus{
      color: #fff;
  }
  
  #fulldata-link:hover{
      cursor: pointer;
  }
  .dataset-list{
      max-width: 600px;
      margin: 10px auto 14px auto;
  }
  .modal-mask{
      display: none;
      opacity: 0;
      pointer-events: none;
      position: fixed;
      height: 100%;
      width: 100%;
      background: rgba(200, 200, 200, 0.9);
      z-index: 5001;
  
      top: -91px;
      padding-top: 91px;
  
      transition: opacity 0.3s ease;
  }
  
  .modal-mask.loaded{
      display: block !important; /*override hidden*/
  }
  body.modal-open, html.modal-open{
      overflow: hidden;
  }
  .modal-holder{	
      opacity: 0;
      pointer-events: none;
      position: fixed;
      z-index: 5002;
      top: -91px;
      padding-top: 91px;
  
      width: 100%;
      height: 100%;
  
      transition: opacity 0.3s ease;
  }
  
  .modal-holder.loaded{
      display: block;
  }
  .modal-holder.default{
      opacity: 1;
  }
  .modal-holder.default > .modal{
      pointer-events: auto;
  }
  .modal-holder.default.hidden > .modal{
      pointer-events: none;
  }
  
  .modal{
      width: 600px;
      max-width: 96%;
      max-height: 80%;
      background: rgb(255,255,255);
      z-index: 5002;
      margin: 0 auto;
      margin-top: 30px;
      padding: 2px 12px;
      border-radius: 4px;
      box-sizing: border-box;
  
      position: relative;
  
      box-shadow: 1px 1px 1px 2px rgba(180, 180, 180, 0.9);
  
      overflow-y: auto;
      overflow-x: hidden;
  }
  .close-modal{
      box-shadow: none;
      position: absolute;
      top: 4px;
      right: 20px;
      font-size: 1.5em;
      transition: color 0.2s ease;
      background: #fff;
      border: none;
  }
  .close-modal:hover{
      cursor: pointer;
      color: #4377bb;
  }
  
  h1{
      font-size: 31px;
      margin: 10px 0;
      flex: 0 0 auto;
  }
  h2, legend{
      font-size: 24px;
      margin: 10px auto;
      text-align: left;
  }
  .extra-main h2, h2.extra-top{
    margin-top: 40px;
  }
  .extra-main h2:first-child{
    margin-top: 10px;
  }
  p.sub{
    font-size: 19px;
  }
  .modal > h2{
      padding-right: 44px;
  }
  h2.no-mb{
      margin-bottom: 0;
  }
  h3{
      font-size: 18px;
      font-weight: 600;
  }
  .extra-main h3{
    margin-bottom: -6px;
    font-size: 19px;
  }
  #about-panel h3{
      text-align: left;
      margin-top: 22px;
      margin-bottom: 0px;
  }
  legend{
      display: block;
      font-weight: bold;
      padding: 0;
      margin-left: 0;
      margin-right: 0;
  }
  legend.minor, h3.minor{
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 2px;
  }
  h3.minor + p{
      margin-top: 2px;
  }
  .add-counties-group{
      display: none;
  }
  .add-counties-group.visible{
      display: block;
  }
  .error-message{
      font-size: 32px;
      line-height: 34px;
      font-weight: 600;
      max-width: 820px;
      margin: 60px auto 20px auto;
      text-align: center;
      padding: 0 10px;
      box-sizing: border-box;
  }
  .error-return{
      display: block;
      margin-top: 16px;
      font-size: 26px;
  }
  .wht-txt{
      color: #fff;
  }
  .orng-txt{
      color: #e36c0a;
  }
  .panel-closed{
      display: none;
  }
  .hidden{
      display: none !important;
  }
  
  .logo-bar{
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin: 60px auto;
      width: 1200px;
      max-width: 100%;
  }
  .front-logo{
      margin: 0 20px;
      flex: 0 1 300px;
      min-width: 0;
  }
  .front-logo.ers-logo{
      flex-basis: 320px;
      margin-bottom: 18px;
  }
  .logo-bar.wrap{
      flex-wrap: wrap;
  }
  .logo-bar.wrap > .front-logo{
      padding-bottom: 20px;
  }
  
  #about-panel, #charts-panel, #map-panel{
      height: 100%;
      position: relative;
  }
  #about-panel{
      text-align: center;
  }
  #about-panel p{
      text-align: left;
      margin: 20px 0;
  }
  #about-panel h3 + p{
      margin-top: 10px;
  }
  .about-inner, .charts-inner, .download-inner{
      padding: 20px 15px;
      margin: 0 auto;
      max-width: 1400px;
      box-sizing: border-box;
      height: 100%;
      position: relative;
  }
  .chart-inner{
      max-width: none;
  }
  .about-inner p{
      max-width: 760px;
  }
  img{
      max-width: 100%;
  }
  .img-right{
      float: right;
      margin-left: 30px;
  }
  .about-inner > .img-right{
      margin-top: 10px;
      margin-bottom: 10px;
      width: 700px;
      max-width: 45%;
  }
  .img-group{
      margin: 0 auto;
      text-align: center;
  }
  
  #line-chart, .figure{
      max-width: 932px;
      max-height: 100%;
  }
  .figure{
    box-sizing: border-box;
    text-align: center;
    position: relative;
  }
  .figure svg{
    box-sizing: border-box;
    width: 100%;
    max-height:100%;
  }
  .charts-inner{
      display: flex;
      justify-content: center;
      position: relative;
  }
  .chart-left{
      flex: 1 0 350px;
      overflow: auto;
      box-sizing: border-box;
      max-width: 580px;
      margin-right: 46px;
  }
  #line-chart{
      flex: 0 1 932px;
      box-sizing: border-box;
      position: relative;
  }
  .download-left,.download-right{
      display: inline-block;
  }
  .download-left{
      width: 620px;
      max-width: 50%;
      box-sizing: border-box;
  }
  .download-right{
      max-width: 400px;
      box-sizing: border-box;
      position: fixed;
      position: sticky;
      right: 0;
      top: 127px;
      padding: 10px 20px;
      margin-left: 4%;
      background-color: rgb(232,232,232);
      border-radius: 6px;
      vertical-align: top;
  }
  .download-extras{
      text-align: center;
  }
  .block-label{
      display: block;
  }
  .all-selections{
      box-sizing: border-box;
      padding: 4px 15px;
  }
  .all-selections h3{
      margin: 2px 0;
      border-bottom: 1px solid rgb(200,200,200);
  }
  .selections-holder{
      margin-top: 10px;
      margin-bottom: 6px;
      min-height: 40px;
  }
  .placeholder-sel{
      color: rgb(70,70,70);
      font-style: italic;
      list-style: none;
  }
  .selection-line{
      font-size: 17px;
      position: relative;
  }
  
  button{
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      border: none;
      background: #fff;
      cursor: pointer;	
  }
  input, select, button{
        font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Droid Sans","Helvetica Neue",Arial,sans-serif;
        font-size: 16px;
        color: rgb(50,50,50);
      border: 1px solid rgb(200, 200, 200);
      border-radius: 2px;
      padding: 6px 8px;
      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
      transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
      box-sizing: border-box;
  }
  select{
      padding-left: 6px;
      padding-right: 14px;
  }
  input:focus, select:focus, button:focus{
      border-color: #66afe9;
      outline: 0;
  
      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px rgba(102, 175, 233, 0.6);
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px rgba(102, 175, 233, 0.6);
  }
  .remove-sel{
      font-size: 16px;
      display: inline-flex;
      margin-left: 12px;
      cursor: pointer;
      width: 1.2em;
      margin-bottom: 4px;
      border-radius: 2px;
      color: #fff;
      background-color: #e36c0a;
      font-weight: 600;
      vertical-align: middle;
      justify-content: center;
      align-items: center;
  
      border: none;
      box-shadow: none;
      padding: 0;
      transition: none;
  }
  
  .nav{
      height: 33px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: stretch;
  
      -webkit-box-shadow: 0 1px 3px 0px #b7b7b7;
      box-shadow: 0 1px 3px 0px #b7b7b7;
  }
  button.top-tab{
      border-radius: 0;
      background-color: #e36c0a;
      color: #fff;
      font-weight: 600;
      border: 0;
      display: inline-block;
      flex: 1 1 100px;
      height: 100%;
      border-right: 1px solid #404040;
  }
  button.top-tab:last-child{
      border-right: none;
  }
  button.clear-button:hover, button.clear-button:focus{
    background-color: rgb(255, 239, 110);
  }
  .top-tab.active-section{
      background-color: #fff;
      color: rgb(50,50,50);
  }
  .top-tab:hover{
      background-color: #ec9f5f;
  }
  
  .select-wrapper{
      position: relative;
  }
  
  .select-wrapper::after{
      content: "";
      width: 0; 
      height: 0; 
      border-left: 3px solid transparent;
      border-right: 3px solid transparent;
      border-top: 7px solid rgb(65, 64, 66);
  
      position: absolute;
      top: 45%;
      right: 6px;
  
      pointer-events: none;
  }
  
  .select-wrapper select{
      width: 165px;
      appearance: none;
      -moz-appearance: none;
      -webkit-appearance: none;
      color: rgb(65, 64, 66);
      background-color: #fff;
  }
  
  .select-wrapper select::-ms-expand{
      display: none;
  }
  
  select:disabled{
      background: rgb(222,222,222);
      color: rgb(144,144,144);
  }
  
  .inline-label{
      display: inline-block;
      margin-top: 2px;
  }
  .inline-label .select-wrapper{
      display: block;
  }
  
  .check-holder{
      position: relative;
      font-size: 16px;
      display: inline-block;
      margin: 0 10px;
  }
  .check-holder.adv-check{
      margin-left: 0;
      margin-bottom: 10px;
      font-size: 15px;
  }
  .check-holder > label{
      display: block;
      height: 100%;
      width: 100%;
      cursor: pointer;
      padding: 2px 0;
  }
  
  .checkbox-text{
      margin-left: 24px;
  }
  .checkbox-text, .checkbox-icon{
      display: inline-block;
      vertical-align: top;
  }
  .checkbox-overlay{
      box-sizing: border-box;
      pointer-events: none;
      z-index: 2;
      background: #fff;
  }
  .checkbox-overlay, .check-holder input{
      position: absolute;
      height: 16px;
      width: 16px;
      border: 1px solid rgb(100,100,100);
      border-radius: 2px;
      top: 3px;
      left: 2px;
  }
  .check-holder input:checked + .checkbox-overlay{
      background-color: #147AB8;
      border-color: #147AB8;
  }
  .check-holder input:checked +.checkbox-overlay::before{
      box-sizing: border-box;
      content: "";
      position: absolute;
      border: 2px solid #fff;
      border-top: none;
      border-left: none;
      left: 4px;
      bottom: 3px;
      width: 5px;
      height: 10px;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      pointer-events: none;
  }
  .check-holder input{
      margin: 0;
      cursor: pointer;
  }
  .check-holder input:disabled{
      cursor: default;
  }
  .dis-label{
      color: rgb(100,100,100);
      font-style: italic;
  }
  
  .chart-select-group, .map-select-group{
      margin: 10px 0 40px 0;
  }
  .chart-select-group .select-wrapper select{
      width: 138px;
  }
  fieldset{
      border: none;
      padding: 0;
      margin: 16px 0 16px 0;
      width: auto;
  }
  .download-inner fieldset{
      margin: 10px 0;
  }
  fieldset.buffer-top{
      margin-top: 24px;
  }
  
  .button-group{
      text-align: center;
      position: relative;
  }
  .map-button{
      font-size: 16px;
      margin: 4px;
  }
  .chart-button, .download-button, .add-button, .map-button.make-chart{
      font-size: 18px;
      margin: 10px;
  }
  
  .chart-button:hover, .chart-button:focus, .download-button:hover, .download-button:focus, .add-button:hover, .add-button:focus, .map-button:focus, .map-button:hover{
      background: #ec9f5f;
  }
  .chart-button:disabled, .map-button:disabled{
      background: rgb(200,200,200);
      cursor: default;
  }
  .make-chart, .download-button{
      font-weight: bold;
  }
  .choose-reminder{
      font-size: 16px;
      color: #B20606;
      display: none;
  }
  .choose-reminder.visible{
      display: block;
  }
  .footnote{
      font-size: 14px;
      font-style: italic;
      margin: 0 auto;
      max-width: 900px;
      padding: 0 10px;
  }
  .footer-links{
      display: none;
  }
  
  .note-p{
      margin-top: 0px;
      font-style: italic;
  }
  
  /*MAP STYLES*/
  #map{
      width: 100%;
      height: 100%;
  }
  .map-controls{
      position: absolute;
      z-index: 3000;
      top: 10px;
      left: 10px;
      background-color: rgba(255,255,255,0.95);
      border-radius: 6px;
      width: 400px;
      max-height: 93%;
      box-sizing: border-box;
      padding: 4px 20px 16px 20px;
      box-shadow: 0 1px 3px 1px #b7b7b7;
      overflow: auto;
  }
  .leaflet-left{
      left: 415px;
  }
  .leaflet-touch .leaflet-bar{
      border: none;
      box-shadow: 0 0 3px 1px #b7b7b7;
  }
  .leaflet-bar a, .leaflet-bar a:hover{
      width: 30px;
      height: 30px;
  }
  /*allow on click events for map*/
  .leaflet-tile-container{
      pointer-events: auto;
  }
  .leaflet-bar.leaflet-control-extent>.leaflet-control-extent-in{
      background-color: #fff;
      background-image: url(/img/full_extent.png);
      background-size: 24px 24px;
  }
  .zoom-tools{
      text-align: center;
  }
  .zoom-tools h3{
      text-align: left;
  }
  .inner-map-control h3{
      margin-top: 20px;
      margin-bottom: 4px;
  }
  .inner-map-control h4{
      font-size: 16px;
      font-weight: 400;
      margin-bottom: 4px;
      margin-top: 0;
  }
  .inner-map-control > p{
      margin: 4px 0;
  }
  .selected-counties{
      margin-top: 4px;
      font-size: 16px;
  }
  .no-selection, .italic{
      font-style: italic;
  }
  #legend-title{
      margin-top: 26px;
      margin-bottom: 0;
  }
  #legend-title + h3{
      margin-top: 2px;
  }
  .inner-map-wrap{
      font-size: 16px;
      display:inline-block;
  }
  .flex-legend{
      display: flex;
      margin: 8px 0 0;
  }
  .legend-row{
      flex: 1 1 70px;
      font-size: 15px;
      line-height: 1em;
      text-align: center;
  }
  .legend-row span{
      display: inline-block;
  }
  .map-legend-block{
      display: inline-block;
      height: 30px;
      width: 100%;
      border: 1px solid rgb(111,111,111);
      border-left: none;
      border-right: none;
  }
  .legend-row:first-child .map-legend-block{
      border-top-left-radius: 2px;
      border-bottom-left-radius: 2px;
      border-left: 1px solid rgb(111,111,111);
  }
  .legend-row:last-child .map-legend-block{
      border-top-right-radius: 2px;
      border-bottom-right-radius: 2px;
      border-right: 1px solid rgb(111,111,111);
  }
  .map-legend-1{
      background-color: #e66101;
  }
  .map-legend-2{
      background-color: #fdb863;
  }
  .map-legend-3{
      background-color: #f7f7f7;
  }
  .map-legend-4{
      background-color: #b2abd2;
  }
  .map-legend-5{
      background-color: #5e3c99;
  }
  .map-all{
      height: 100%;
      width: 100%;
      position: relative;
  }
  .map-all .footnote{
      position: absolute;
      bottom: 0;
      width: 100%;
      background-color: #fff;
      height: 40px;
      z-index: 4000;
  }
  .map-all .leaflet-control-zoom{
      display: none;
  }
  .use-header{
      background-color: #e8e8e8;
      margin: 0;
      padding: 16px 20px;
      font-weight: 600;
      font-size: 20px;
      display: flex;
      justify-content: space-between;
  }
  .use-header:nth-child(3), .use-header:nth-child(4){
    background-color: rgb(217, 217, 217);
  }
  .data-num{
    font-weight: 500;
  }
  .use-grid{
      margin: 60px auto 40px auto;
      max-width: 100%;
      box-sizing: border-box;
  
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 4px;
  }
  
  /*CHART STYLES*/
  /*tooltips*/
  .line-tt{
    z-index: 100;
    position: absolute;
    pointer-events: none;
    transition: opacity 0.4s ease-in-out;
  }
  .line-tt[aria-hidden="true"]{
    opacity: 0;
  }
  .line-tt[aria-hidden="false"]{
    opacity: 1;
  }
  .tt-wrap, .leaflet-popup-content-wrapper{
    width: 240px;
    max-width: 100%;
    text-align: center;
    background: rgb(77,77,77);
    padding: 8px 6px;
    border-radius: 3px;
    color: rgb(252,252,252);
    font-size: 14px;
    box-sizing: border-box;
  }
  .leaflet-popup-tip{
      background: rgb(77,77,77);
  }
  .leaflet-container{
      font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Droid Sans","Helvetica Neue",Arial,sans-serif
  }
  .leaflet-popup-content{
      margin: 10px 4px 8px 4px;
      line-height: 1.3;
  }
  .leaflet-popup-content > .tt-title-row{
      margin-bottom: 4px;
  }
  .tt-tip{
    position: absolute;
    width: 40px;
    height: 20px;
    margin: 0 auto;
    overflow: hidden;
  }
  .tt-tip.adjusted{
    display: none;
  }
  .tt-tip-inner{
    background: rgb(77,77,77);
    width: 12px;
    height: 12px;
    padding: 1px;
    margin: -10px auto 0;
    transform: rotate(45deg);
  }
  .tt-title-row{
    font-weight: 600;
    font-size: 1.05em;
  }
  .tt-age-group{
      font-style: italic;
  }
  .tt-flex-row{
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin: 4px 0;
  }
  .tt-flex-row > span{
      flex: 0 1 210px;
      text-align: left;
      line-height: 1.2;
  }
  .tt-flex-row .tt-val-1, .tt-flex-row .tt-val-2, .tt-flex-row .map-val{
      flex: 0 1 88px;
      text-align: right;
  }
  /* end tooltips */
  
  .y-label{
      text-anchor: middle;
      font-weight: 600;
      fill: rgb(90,90,90);
  }
  .zero-line{
      stroke-width: 2;
      stroke-linecap: round;
      stroke: #757575;
  }
  .y-axis line, .x-axis line{
      stroke: rgb(200,200,200);
  }
  .y-axis text, .x-axis text{
      font-size: 14px;
  }
  .domain{
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 3;
      stroke: #757575;
  }
  .chart-line{
      stroke-width: 2;
      stroke: orange;
      fill: none;
      pointer-events: none;
  }
  .chart-dot{
      fill: orange;
  }
  
  /*  1-7 */
  
  .dot-1-1-7{
      fill:#e8ef84;
  }
  .dot-1-2-7{
      fill: #bae59e;
  }
  .dot-1-3-7{
      fill: #6dc9b1;
  }
  .dot-1-4-7{
      fill: #41b6c4;
  }
  .dot-1-5-7{
      fill: #1d91c0;
  }
  .dot-1-6-7{
      fill: #225ea8;
  }
  .dot-1-7-7{
      fill: #0c2c84; 
  }
  .line-1-1-7{
      stroke: #e8ef84;
  }
  .line-1-2-7{
      stroke: #bae59e;
  }
  .line-1-3-7{
      stroke: #6dc9b1;
  }
  .line-1-4-7{
      stroke: #41b6c4;
  }
  .line-1-5-7{
      stroke: #1d91c0;
  }
  .line-1-6-7{
      stroke: #225ea8;
  }
  .line-1-7-7{
      stroke: #0c2c84;
  }
  
  /*  1-6 */
  
  .dot-1-1-6{
      fill:#e8ef84;
  }
  .dot-1-2-6{
      fill: #bae59e;
  }
  .dot-1-3-6{
      fill: #6dc9b1;
  }
  .dot-1-4-6{
      fill: #1f9aa8;
  }
  .dot-1-5-6{
      fill: #10739a;
  }
  .dot-1-6-6{
      fill: #0c2c84;
  }
  .line-1-1-6{
      stroke:#e8ef84;
  }
  .line-1-2-6{
      stroke: #bae59e;
  }
  .line-1-3-6{
      stroke: #6dc9b1;
  }
  .line-1-4-6{
      stroke: #1f9aa8;
  }
  .line-1-5-6{
      stroke: #10739a;
  }
  .line-1-6-6{
      stroke: #0c2c84;
  }
  
  /*  1-5 */
  .dot-1-1-5{
      fill:#dde479;
  }
  .dot-1-2-5{
      fill: #b0e38e;
  }
  .dot-1-3-5{
      fill: #49b497;
  }
  .dot-1-4-5{
      fill: #0f7ba7;
  }
  .dot-1-5-5{
      fill: #063e83;
  }
  
  .line-1-1-5{
      stroke:#dde479;
  }
  .line-1-2-5{
      stroke: #b0e38e;
  }
  .line-1-3-5{
      stroke: #49b497;
  }
  .line-1-4-5{
      stroke: #0f7ba7;
  }
  .line-1-5-5{
      stroke: #063e83;
  }
  
  /* 1-4 */
  
  .dot-1-1-4{
      fill:#bae16c;
  }
  .dot-1-2-4{
      fill: #79d595;
  }
  .dot-1-3-4{
      fill: #2d99ba;
  }
  .dot-1-4-4{
      fill: #035b7e;
  }
  
  .line-1-1-4{
      stroke:#bae16c;
  }
  .line-1-2-4{
      stroke: #79d595;
  }
  .line-1-3-4{
      stroke: #2d99ba;
  }
  .line-1-4-4{
      stroke: #035b7e;
  }
  
  /* 1-3 */
  
  .dot-1-1-3{
      fill:#bae16c;
  }
  .dot-1-2-3{
      fill: #49b497;
  }
  .dot-1-3-3{
      fill: #0f7ba7;
  }
  
  
  .line-1-1-3{
      stroke:#bae16c;
  }
  .line-1-2-3{
      stroke: #49b497;
  }
  .line-1-3-3{
      stroke: #0f7ba7;
  }
  
  /* 1-2 */
  
  .dot-1-1-2{
      fill:#abd851;
  }
  .dot-1-2-2{
      fill: #0a88ba;
  }
  
  
  .line-1-1-2{
      stroke:#abd851;
  }
  .line-1-2-2{
      stroke: #0a88ba;
  }
  
  
  /* 1-1 */
  
  .dot-1-1-1{
      fill:#0a88ba;
  }
  
  .line-1-1-1{
      stroke:#0a88ba;
  }
  
  
  
  /* 2-7 */
  
  .dot-2-1-7{
      fill:#f9c78c;
  }
  .dot-2-2-7{
      fill: #f9aa6e;
  }
  .dot-2-3-7{
      fill: #f97e4e;
  }
  .dot-2-4-7{
      fill: #e8533a;
  }
  .dot-2-5-7{
      fill: #cc271f;
  }
  .dot-2-6-7{
      fill: #9b0000;
  }
  .dot-2-7-7{
      fill: #6d0000;
  }
  .line-2-1-7{
      stroke: #f9c78c;
  }
  .line-2-2-7{
      stroke: #f9aa6e;
  }
  .line-2-3-7{
      stroke: #f97e4e;
  }
  .line-2-4-7{
      stroke: #e8533a;
  }
  .line-2-5-7{
      stroke: #cc271f;
  }
  .line-2-6-7{
      stroke:#9b0000;
  }
  .line-2-7-7{
      stroke: #6d0000;
  }
  
  /* 2-6 */
  
  .dot-2-1-6{
      fill:#f9c78c;
  }
  .dot-2-2-6{
      fill: #f9aa6e;
  }
  .dot-2-3-6{
      fill: #f97e4e;
  }
  .dot-2-4-6{
      fill: #e8533a;
  }
  .dot-2-5-6{
      fill: #9b0000;
  }
  .dot-2-6-6{
      fill: #6d0000;
  }
  .line-2-1-6{
      stroke: #f9c78c;
  }
  .line-2-2-6{
      stroke: #f9aa6e;
  }
  .line-2-3-6{
      stroke: #f97e4e;
  }
  .line-2-4-6{
      stroke: #e8533a;
  }
  .line-2-5-6{
      stroke:#9b0000;
  }
  .line-2-6-6{
      stroke: #6d0000;
  }
  
  /* 2-5 */
  
  .dot-2-1-5{
      fill:#f9c78c;
  }
  .dot-2-2-5{
      fill: #fba461;
  }
  .dot-2-3-5{
      fill: #f16b36;
  }
  .dot-2-4-5{
      fill: #c4341b;
  }
  .dot-2-5-5{
      fill: #6d0000;
  }
  .line-2-1-5{
      stroke: #f9c78c;
  }
  .line-2-2-5{
      stroke: #fba461;
  }
  .line-2-3-5{
      stroke: #f16b36;
  }
  .line-2-4-5{
      stroke: #c4341b;
  }
  .line-2-5-5{
      stroke:#6d0000;
  }
  
  /* 2-4 */
  
  .dot-2-1-4{
      fill:#ffc078;
  }
  .dot-2-2-4{
      fill: #f97e4e;
  }
  .dot-2-3-4{
      fill: #c4341b;
  }
  .dot-2-4-4{
      fill: #6d0000;
  }
  .line-2-1-4{
      stroke: #ffc078;
  }
  .line-2-2-4{
      stroke: #f97e4e;
  }
  .line-2-3-4{
      stroke: #c4341b;
  }
  .line-2-4-4{
      stroke:#6d0000;
  }
  
  /* 2-3 */
  
  .dot-2-1-3{
      fill:#ffad4f;
  }
  .dot-2-2-3{
      fill: #e04b1e;
  }
  .dot-2-3-3{
      fill: #9d0a0a;
  }
  .line-2-1-3{
      stroke: #ffad4f;
  }
  .line-2-2-3{
      stroke: #e04b1e;
  }
  .line-2-3-3{
      stroke: #9d0a0a;
  }
  
  
  /* 2-2 */
  
  .dot-2-1-2{
      fill:#ff8f0e;
  }
  .dot-2-2-2{
      fill: #b01717;
  }
  .line-2-1-2{
      stroke: #ff8f0e;
  }
  .line-2-2-2{
      stroke: #b01717;
  }
  
  /* 2-1 */
  
  .dot-2-1-1{
      fill:#e04b1e;
  }
  .line-2-1-1{
      stroke: #e04b1e;
  }
  
  
  /* 3-7 */
  
  .dot-3-1-7{
      fill: #b8d4ef;
  }
  .dot-3-2-7{
      fill: #9ebcda;
  }
  .dot-3-3-7{
      fill: #8c96c6;
  }
  .dot-3-4-7{
      fill: #8c6bb1;
  }
  .dot-3-5-7{
      fill: #973eb1;
  }
  .dot-3-6-7{
      fill: #810f7c;
  }
  .dot-3-7-7{
      fill: #4d004b;
  }
  .line-3-1-7{
      stroke: #b8d4ef;
  }
  .line-3-2-7{
      stroke: #9ebcda;
  }
  .line-3-3-7{
      stroke: #8c96c6;
  }
  .line-3-4-7{
      stroke: #8c6bb1;
  }
  .line-3-5-7{
      stroke: #973eb1;
  }
  .line-3-6-7{
      stroke: #810f7c;
  }
  .line-3-7-7{
      stroke: #4d004b;
  }
  
  /* 3-6 */
  
  .dot-3-1-6{
      fill: #b8d4ef;
  }
  .dot-3-2-6{
      fill: #9ebcda;
  }
  .dot-3-3-6{
      fill: #8c96c6;
  }
  .dot-3-4-6{
      fill: #8c6bb1;
  }
  .dot-3-5-6{
      fill: #8425a1;
  }
  .dot-3-6-6{
      fill: #4d004b;
  }
  .line-3-1-6{
      stroke: #b8d4ef;
  }
  .line-3-2-6{
      stroke: #9ebcda;
  }
  .line-3-3-6{
      stroke: #8c96c6;
  }
  .line-3-4-6{
      stroke: #8c6bb1;
  }
  .line-3-5-6{
      stroke: #8425a1;
  }
  .line-3-6-6{
      stroke: #4d004b;
  }
  
  /* 3-5 */
  
  .dot-3-1-5{
      fill: #b8d4ef;
  }
  .dot-3-2-5{
      fill: #9da6d2;
  }
  .dot-3-3-5{
      fill: #8c6bb1;
  }
  .dot-3-4-5{
      fill: #8425a1;
  }
  .dot-3-5-5{
      fill: #4d004b;
  }
  .line-3-1-5{
      stroke: #b8d4ef;
  }
  .line-3-2-5{
      stroke: #9da6d2;
  }
  .line-3-3-5{
      stroke: #8c6bb1;
  }
  .line-3-4-5{
      stroke: #8425a1;
  }
  .line-3-5-5{
      stroke: #4d004b;
  }
  
  /* 3-4 */
  
  .dot-3-1-4{
      fill: #99b2f1;
  }
  .dot-3-2-4{
      fill: #a781c8;
  }
  .dot-3-3-4{
      fill: #8425a1;
  }
  .dot-3-4-4{
      fill: #4d004b;
  }
  .line-3-1-4{
      stroke: #99b2f1;
  }
  .line-3-2-4{
      stroke: #a781c8;
  }
  .line-3-3-4{
      stroke: #8425a1;
  }
  .line-3-4-4{
      stroke: #4d004b;
  }
  
  /* 3-3 */
  
  .dot-3-1-3{
      fill: #99b2f1;
  }
  .dot-3-2-3{
      fill: #9965c1;
  }
  .dot-3-3-3{
      fill: #73026f;
  }
  .line-3-1-3{
      stroke: #99b2f1;
  }
  .line-3-2-3{
      stroke: #9965c1;
  }
  .line-3-3-3{
      stroke: #73026f;
  }
  
  /* 3-2 */
  
  .dot-3-1-2{
      fill: #a599f1;
  }
  .dot-3-2-2{
      fill: #8d179d;
  }
  .line-3-1-2{
      stroke: #a599f1;
  }
  .line-3-2-2{
      stroke: #8d179d;
  }
  
  
  /* 3-1 */
  
  .dot-3-1-1{
      fill: #9965c1;
  }
  .line-3-1-1{
      stroke: #9965c1;
  }
  
  
  .chart-dot:hover, .chart-dot:focus, .chart-dot.highlight-dot{
      fill: #fff;
      stroke: #000;
      stroke-width: 2;
      transition: stroke ease 0.1s, fill ease 0.1s;
  }
  .chart-line.highlight-line{
      stroke-width: 3.5;
      stroke: #000;
      transition: stroke ease 0.1s;
  }
  .chart-legend{
      margin: 4px 0 10px 0;
  }
  .legend-group{
      display: inline-block;
      margin: 0 4px;
      font-size: 14px;
  }
  .legend-group > span{
      vertical-align: middle;
  }
  .legend-block{
      height: 12px;
      width: 12px;
      display: inline-block;
      vertical-align: middle;
      margin-right: 3px;
  }
  .legend-block > svg{
      height: 100%;
      width: 100%;
      vertical-align: top;
  }
  
  /*END CHART STYLES*/
  
  .large-text{
      display: inline-block;
      pointer-events: none;
  }
  .small-text{
      display: none;
      pointer-events: none;
  }
  
  .short-form{
      margin: 120px auto;
      width: 500px;
      max-width: 100%;
  }
  .short-form > h1{
      margin-bottom: 36px;
  }
  .short-form > label{
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin: 20px 0;
  }
  .short-form > label > input{
      flex: 0 1 320px;
      margin-left: 10px;
  }
  .short-form > .big-button{
      font-size: 20px;
      font-weight: 600;
      display: block;
      margin: 30px auto;
  }
  
  .inner-map-control{
      position: relative;
  }
  #load-message{
      position: absolute;
      top: 0;
      left: 0;
      line-height: 1.1;
      background-color: rgba(55,55,55,0.95);
      height: 100%;
      display: flex;
      align-items: center;
      color: #f7f7f7;
      border-radius: 3px;
      padding: 6px 15px;
      opacity: 0;
      transition: opacity 0.2s ease;
  }
  .iframe-wrapper{
    overflow: hidden;
    padding-top: 62.8%;
    position: relative;
    margin-bottom: 60px;
  }
  .iframe-wrapper > iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .full-link, .short-link{
    pointer-events: none;
  }
  .upper-links .short-link{
    display: none;
  }

  .flex-group-1{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .emphasis-1{
    font-weight: 600;
  }
  .emphasis-2{
    font-style: italic;
  }
  .indent-1{
    margin-left: 10px;
  }
  .block{
    display: block;
  }
  .left-margin-1{
    margin-left: 12px;
  }
  .links-list{
    list-style: none;
    padding-left: 0;
  }
  .links-list li{
    margin: 18px 0;
    font-size: 17px;
  }

  option:disabled, option.disabled{
    font-style: italic;
  }

  @media(max-width: 1200px){
    .upper-links .full-link{
        display: none;
    }
    .upper-links .short-link{
        display: block;
    }
  }

  @media (max-width: 1020px){
    
    h1{
        font-size: 26px;
      }
    .upper-links{
        max-width: calc(100% - 490px);
    }
  }
  
  @media (max-width: 920px){
      .logo-bar{
          display: block;
          text-align: center;
      }
      .front-logo{
          width: 300px;
          margin: 40px auto;
          display: block;
      }
      .logo-bar.wrap > .front-logo{
          padding-bottom: 0;
      }
      h1{
          font-size: 26px;
      }
      .main{
          padding-bottom: 0;
      }
      .upper-links a{
          font-size: 17px;
          margin: 0 3px;
      }
      .img-right{
          float: none;
          margin: 0 auto;
      }
      .about-inner{
          max-width: 630px;
      }
      .about-inner > .img-right{
          max-width: 100%;
      }
      #charts-panel{
          overflow: auto;
      }
      .charts-inner{
          display: block;
      }
      .download-inner{
          max-width: 760px;
      }
      .chart-left{
          max-width: 600px;
          margin: 0 auto;
      }
      .chart-left, #line-chart{
          flex: none;
          text-align: center;
      }
      .download-left, .download-right{
          position: static;
          display: block;
          max-width: 600px;
          margin: 0 auto;
      }
      .inline-label{
          text-align: left;
      }
      .footer{
          margin: 0;
      }


      /**/

      .large-text{
          display: none;
      }
      .small-text{
          display: inline-block;
      }
      .map-controls{
          position: relative;
          width: auto;
          max-width: 630px;
          margin: 0 auto;
          max-height: none;
          box-shadow: none;
          top: 0;
          left: 0;
          padding: 20px 15px;
          border-radius: 0;
      }
      #map{
          border-top: 2px solid rgb(200,200,200);
          height: 500px;
      }
      .main.on-map{
          height: auto;
      }
      .leaflet-left{
          left: 0;
      }
      .map-controls{
          text-align: center;
      }
      .inner-map-control{
          max-width: 340px;
          margin: 0 auto;
          text-align: left;
      }
  
      .upper-links{
          display: none;
      }
      .footer-links{
          display: block;
          font-size: 18px;
          margin: 4px 0 10px 0;
      }
      .footer-links a{
          margin: 0 6px;
      }
      .footer-left, .footer-right{
          margin: 8px auto;
      }
      .banner, .footer{
          display: block;
          text-align: center;
      }
      h1{
          line-height: 1.2;
          margin-bottom: 6px;
      }
      .footer-right{
          margin-top: 6px;
      }
      .use-grid{
        display: block;
      }
      .use-header{
        margin-bottom: 4px;
        display: block;
      }
      .use-header:nth-child(3), .use-header:nth-child(4){
        background-color: #e8e8e8;
      }

      /**/

      .left-nav{
        display: none;
      }
      .top-local-nav{
        display: block;
      }
      .extra-main.split-main{
        margin-left: auto;
        padding-left: 15px;
      }
      .indent-1{
        margin-left: 0;
      }
  }
  @media (max-width: 540px){
      .banner{
          display: flex;
          justify-content: center;
          align-items: center;
          flex-wrap: wrap;
      }
      h1{
          font-size: 22px;
          margin: 0;
          max-width: 100%;
      }
  }