:root {
  --pollen-low-color:      #4cd964;
  --pollen-moderate-color: #feff3a;
  --pollen-high-color:     #ff9a1e;
  --pollen-extreme-color:  #ff0000;
}

.pollen-body {
  font-family: Roboto, Verdana, "Trebuchet MS", Georgia, sans-serif;
  font-size: 16px;
  color: #ffffff;
  background: rgba(7,27,57, 1);
}

.lead-map-body {
  font-size: 16px;
  color: #ffffff;
 /* background: rgba(7,27,57, 1);*/
}

.pollen-data-section {
  height: 550px;
  margin-bottom: 0;
}

.eddies_overlay {
    margin-right: -14px;
    float: right;
    position: absolute;
    z-index: 1000;
    right: 0px;
    height: 550px;
    width: 100px;
    background: linear-gradient(to right, rgba(20,20,18, .1), rgba(7,27,57, 1));
}

.eddies_overlay2 {
    margin-left: 14px;
    float: right;
    position: absolute;
    z-index: 1000;
    bottom: 0px;
    height: 50px;
    width: 100%;
    background: linear-gradient(to bottom, rgba(20,20,18, .1), rgba(7,27,57, 1));
}

#pollen-places {
   height: 550px;
   margin-left: 14px;
   margin-right: -14px;
}

.simple-widget {
  margin-top: 40px;
}

#count-places {
   height: 550px;
}

.row {
   max-width: 100%;
}

.pollen-col {
   padding: 0;
}

select {
   font-size: 14px;
   font-weight: bold;

   border: none;
   color: #666;
   background-color: #f2ffe6;

   font-size: inherit;
   overflow: hidden;
   padding: 10px 10px;
   margin: 5px 20px 10px 22px;
   width: 96%;

   text-overflow: ellipsis;
   white-space: nowrap;
}

.pollen-data {
 /*  padding: 20px 30px;
   height: 480px; */
   text-align: center;
   border-top: 1px solid #90a4ae;
   padding-top: 5px;
   padding-bottom: 5px;
   background-color: white;
}

#site_select {
  height: 70px;
  margin-right: 25px;
}

#chart {
   height: 180px;
   text-align: center;
}

#chart1 {
   height: 200px;
   text-align: center;
}

.tae-alert-Moderate {
   font-weight: bold;
   text-transform: uppercase;
   font-size: 110%;
}

.tae-alert-High {
   font-weight: bold;
   text-transform: uppercase;
   color: #660000;
   font-size: 110%;
}

.pollen-header {
   font-weight: bold;
   font-size: 130%;
   margin-bottom: 10px; 
   color: #1976d2;
   padding-top:1rem;
}

.pollen-count-header {
   font-weight: bold;
   font-size: 150%;
   margin-bottom: 4px;
   text-align: center;
}

.pollen-count-grass {
   font-weight: bold;
   font-size: 100%;
   margin-bottom: 4px;
   text-align: center;
}

.pollen-level.level-Low {
  background-color: var(--pollen-low-color);
  color: white;
}

.pollen-level.level-Moderate {
  background-color: var(--pollen-moderate-color);
  color: orange;
}

.pollen-level.level-High {
  background-color: var(--pollen-high-color);
  color: white;
}

.pollen-level.level-Extreme {
  background-color: var(--pollen-extreme-color);
  color: white;
}

.pollen-level {
   font-weight: bold;
   font-size: 180%;
   margin: 10px 0;
   padding: 5px;
   text-align: center;
}

.pollen-data .pollen-level {
   font-weight: bold;
   font-size: 180%;
   margin: -34px 0 0px 0;
   text-transform: uppercase;
   text-align: center;
}

.pollen-level2 {
   text-transform: uppercase;
   font-weight: bold;
   font-size: 140%;
}

.pollen-level3 {
   font-weight: bold;
   font-size: 200%;
   margin-left: 4px;
   text-transform: uppercase;
   text-align: center;
}

.level-Unknown {
   color: #666666;
}

.bar-pollen-Unknown {
  border-left-color: #666666 !important;
  border-left: 0.5rem solid;
}

.bar-pollen-Low {
  border-left-color: var(--pollen-low-color) !important;
  border-left: 0.5rem solid;
}
 
.bar-pollen-Moderate {
  border-left-color: var(--pollen-moderate-color) !important;
  border-left: 0.5rem solid;
}

.bar-pollen-High {
  border-left-color: var(--pollen-high-color) !important;
  border-left: 0.5rem solid;
}

.bar-pollen-Extreme {
  border-left-color: var(--pollen-extreme-color) !important;
  border-left: 0.5rem solid;
}

.pollen-not-available {
  font-weight: normal;
  color: #37474f !important;
  border: 1px solid #90a4ae;
  text-align: center;
  text-shadow: none;
  width: 7rem;
}

.level-Low {
   color: var(-pollen-low-color);
}

.level-Moderate {
   color: var(-pollen-moderate-color);
}

.level-High {
   color: var(-pollen-high-color);
}

.level-Extreme {
   color: var(-pollen-extreme-color);
}


.pollen-date {
   /* text-transform: uppercase; */
   letter-spacing: 1px;
   font-weight: bold;
   color: #333333;
   text-align: center;
   font-size: 100%;
}

.yesterbox {
   margin-top: 16px;
}

.pollen-grain {
   color: #ff9900;
   font-weight: bold;
   font-size: 130%;
}

.bolder {
   font-weight: bold;
}

.error-msg {
   font-style: italic;
   color: #666666;
}

.copyright {
   margin-top: 10px;
   font-size: 90%;
   font-style: italic;
   color: #bbb;
}

hr {
   margin: 0;
}

.pollen-col hr {
   margin: 6px 100px 6px 0;
   border-top: 1px solid #cff;
}

.pollen-field {
   color: #ddffff;
   font-size: 13px; 
   font-weight: bold;
   text-transform: uppercase;
   letter-spacing: 2px;
}

.forecast-row {
   margin: 0;
   padding: 10px 20px;
   background-color: white;
  /* height: 600px; */
  color: black;
}

.forecast-col {
   height: 175px; 
   padding-left: 5px !important;
   padding-right: 5px !important;
}

.forecast-day {
   text-transform: uppercase;
   font-weight: bold;
   font-size: 110%;
   padding-top: 5px;
   padding-left: 5px;
   padding-right: 5px;
}

.forecast-padding {
    padding-right: 5px;
    padding-left: 5px;
}
/* ERL Section */

.ERL-pollen-count-wrapper {
    height: 550px;
    margin-left: 70px;
    position: relative;
    right: 0px;
    left: 0px;
    color: black;
}

.ERL-pollen-count-widget {
/* background-color: white;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 90%;
    height: 500px;
    margin: auto;
	*/
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 95%;
}

.logo_overlay {
position:absolute;
right:0px;
bottom:0px;
    z-index: 1000;
    padding-bottom: 20px;
    padding-right: 10px;
    width:110px;
}
.data-provider {
   width: 100%;
   padding: 5px;
   text-align: right;
   font-size: 70%;
   color: #666666;
}

#id_location {
    border-color: black;
    background-color: white;
    border: solid;
    border-width: 1px;
}

.site-selector-label {
    color: #1976d2;
    padding-left: 20px;
    padding-top: 20px;
}

.spacer-div {
    height: 10px;
}

.site-selector-wrapper {
    background-color: white;
}

.lead-map-site-selector-wrapper {
   padding: 20px;
}

.forecast-card-body {
    background-color: #F4FCFF;
    padding: 15px;
}

.forecast-card-contents {
    background-color: white;
    border: solid;
    border-color: lightgrey;
    border-width: 1px;
}

.pollen-forecast-header {
   font-weight: bold;
   font-size: 140%;
   margin-bottom: 10px; 
   color: #1976d2;
   border-bottom: solid;
   border-color: lightgrey;
   border-width: 1px;
   padding: 1rem;
}

.forecast-date {
   height: 45px;
   font-size: 90%;
   padding-left: 5px;
   padding-right: 5px;
   border-bottom: solid;
   border-color: lightgrey;
   border-width: 1px;
}

.forecast-day-wrap {
    border:solid;
    border-width:1px;
    border-color:lightgrey;
    margin: 7px;
}

.top-bar {
    border-top: 0.5rem solid;
    padding-top: 1rem;
}

.top-bar-pollen-Low {
  border-top-color: var(--pollen-low-color) !important;
  border-top: 0.5rem solid;
}
 
.top-bar-pollen-Moderate {
  border-top-color: var(--pollen-moderate-color) !important;
  border-top: 0.5rem solid;
}

.top-bar-pollen-High {
  border-top-color: var(--pollen-high-color) !important;
  border-top: 0.5rem solid;
}

.top-bar-pollen-Extreme {
  border-top-color: var(--pollen-extreme-color) !important;
  border-top: 0.5rem solid;
}

.top-bar-pollen-Unknown {
  border-top-color: lightgrey !important;
  border-top: 0.5rem solid;
}



.side-bar-thunderstorm-Low {
  border-left-color: #087b4b !important;
  border-left: 0.5rem solid;
}

.side-bar-thunderstorm-Moderate {
  border-left-color: #e57201 !important;
  border-left: 0.5rem solid;
}

.side-bar-thunderstorm-High {
  border-left-color: #d50632 !important;
  border-left: 0.5rem solid;
}

.side-bar-thunderstorm-Unknown {
  border-left-color: lightgrey !important;
  border-left: 0.5rem solid;
}


.side-bar-tae-Low {
  border-left-color: var(--pollen-low-color) !important;
  border-left: 0.5rem solid;
}

.side-bar-tae-Moderate {
  border-left-color: var(--pollen-moderate-color) !important;
  border-left: 0.5rem solid;
}

.side-bar-tae-High {
  border-left-color: var(--pollen-high-color) !important;
  border-left: 0.5rem solid;
}

.side-bar-tae-Extreme {
  border-left-color: var(--pollen-extreme-color) !important;
  border-left: 0.5rem solid;
}

.side-bar-tae-Unknown {
  border-left-color: lightgrey !important;
  border-left: 0.5rem solid;
}

.ta-level {
   font-weight: bold;
   font-size: 180%;
   margin: 10px !important;
   text-align: center;
   vertical-align:middle; 
   padding:5px; 
   padding-top: 4px;
}

.ta-notice {
   font-size: 80%;
}

.ta-date {
   font-size: 80%;
   color: #666666;
}

.forecast-spacer {
  height:15px;
}

@media (min-width: 782px) {
   .desktop-hidden {
      display: none!important;
   }
}

@media (max-width: 767px) {
   .mobile-hidden {
      display: none!important;
   }

   .logo_overlay {
      display: none!important;
   }
}

@media (max-width: 812px) {

   .eddies_overlay {
      z-index: -1 !important;
   }
   
.pollen-header {
   font-size: 130% !important;
   margin-bottom: 10px !important; 
   padding-top: 1rem !important;
}

.pollen-date {
   /* text-transform: uppercase; */

   font-size: 100% !important;
}

.error-msg {
   font-style: italic;
   color: #666666;
   font-size: 100% !important;
}
 
.site-selector-label {
  color: #1976d2;
  padding-left: 20px !important;
  padding-top: 20px !important;
}

#site_select {
  height: 70px !important;
  margin-right: 25px !important;
  font-size: 10px !important;
}

.ERL-pollen-count-wrapper {
    margin-left: 30px;
}

.ERL-pollen-count-widget {
    width: 100%;
}

@media (max-width: 1024px) {

.pollen-header {
   font-weight: bold;
   font-size: 100%;
   margin-bottom: 10px; 
}

.pollen-date {
   /* text-transform: uppercase; */
   letter-spacing: 1px;
   font-weight: bold;
   color: #333333;
   text-align: center;
   font-size: 80%;
}

.error-msg {
   font-style: italic;
   color: #666666;
   font-size: 80%;
}

#site_select {
  height: 50px;
  margin-right: 25px;
     font-size: 10px;

}

.site-selector-label {
    color: #1976d2;
    padding-left: 10px;
    padding-top: 10px;
}

}

@media (max-width: 374px) {

.forecast-day {
   font-size: 90%;
}	

.pollen-header {
    font-size: 120% !important;
    margin-bottom: 10px !important;
}
.pollen-date {
    font-size: 90% !important;
}
.pollen-forecast-header {
    font-size: 110% !important;
}

}