/* General Text Settings */

.small_text{
    font-size: 0.7em;
    }

.wrap2 {
    width: 99.8%;
    border-bottom: none;
    display: inline-block;
    align-content: center;
    text-align: center;
    font-family: Oswald; 
    font-size: 1em; 
    font-weight: bold;
    margin:auto;
    }
    
    
    
    .textbox {
        display: inline-block;
        align-content: center;
        text-align: center;
        margin:auto;
    }
    
    /* Day Selection Buttons */
    
    .select_days .button {
        cursor:pointer;
        background-color: #214C45;
        border: 1px;
        color: white;	
        margin: 2px 2px;
        padding: 4px 4px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 0.9em;
        width:127px;
        outline:0;
        font-weight: bold;
    }
    
    .select_days .button:not(:last-child) {
        border-right: none; /* Prevent double borders */
        outline:0;
    }
    .select_days .button:hover {
        background-color: #214C45;
        outline:0;
        color: var(--link-orange);
    }
    
    /* Mobile Version For Forecast Day Selectors */
    
    @media only screen and (max-width:695px) {
    .select_days .button {
        cursor:pointer;
        background-color: #214C45;
        border-bottom: 1px solid #000000;
        color: white;	
        padding: 3px 3px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 0.9em;
        width:100%;
        outline:0;
        font-weight: bold;
    }
    
    .aq_graph{
    width:100%; 
    }
    
    }
    
    
    
    
    
    /* Forecast Day Selectors */
    
    .divButton{
        display: table;
        width: 100%;
    }
    .divButtonRow {
        display: table-row;
    }
    .divButtonHeading {
    
        display: table-header-group;
    }
    .divButtonCell, .divTableHead {
        border: 0px;
        display: table-cell;
        padding: 0px 0px;
    }
    .divButtonHeading {
    
        display: table-header-group;
        font-weight: bold;
    }
    .divButtonFoot {
    
        display: table-footer-group;
        font-weight: bold;
    }
    .divButtonBody {
        display: table-row-group;
    }
    
    
    
    
    
    /* HPA, HW and Notice Boxes */
    
    .divAlerts{
        display: table;
        width: 100%;
    }
    .divAlertsRow {
        display: table-row;
    }
    .divAlertsHeading {
    
        display: table-header-group;
    }
    .divAlertsCell, .divTableHead {
        border: 0px;
        display: table-cell;
        padding: 0px 0px;
        width: 50px;
    }
    
    .divAlertsCellHPA, .divTableHead {
        background-color: #bd3e25;
        color: #ffffff;
        border: 0px;
        display: table-cell;
        padding-left: 10px;
        font-weight: bold;
        font-size: 0.9em;
        line-height: 20px;
        vertical-align: middle;
        border-style: dashed;
        border-color: #d16434;
    }
    
    
    
    
    .divAlertsCellHW, .divTableHead {
        background-color: #d16434;
        color: #ffffff;
        border: 0px;
        display: table-cell;
        padding-left: 10px;
        font-weight: bold;
        font-size: 0.9em;
        line-height: 20px;
        vertical-align: middle;
        border-style: dashed;
        border-color: #d16434;
    }
    
    
    .divAlertsCellNotice, .divTableHead {
        background-color: #EBBE68;
        color: #000000;
        border: 0px;
        display: table-cell;
        padding-left: 10px;
        font-weight: bold;
        font-size: 0.9em;
        line-height: 20px;
        vertical-align: middle;
        border-style: dashed;
        border-color: #d16434;
    }
    
    
    
    .divAlertsHeading {
    
        display: table-header-group;
        font-weight: bold;
    }
    .divAlertsFoot {
    
        display: table-footer-group;
        font-weight: bold;
    }
    .divAlertsBody {
        display: table-row-group;
    }
    
    
    
    
    
    
    
    /* Hourly Forecast Gauages and Graphs */
    
    
    
    .hourly_container{
    overflow: hidden;
    }
    
    .aq_gauge{
            margin-top: -20px;
            margin-bottom: -35px;
            margin-left: -60px;
        
    }
    
    .aq_graph{
    height: 235px;	
    }
    
    
    
    .aq_graph2{
    height:235px; 
    
    }
    
    
    
    
    .display_gauges{
        width:175px; 
        float:left;
        margin: auto;
    
    }
    
    .display_values{
        width: 100%;
        margin: auto;
        text-align: center;
    
    }
    
    .display_graphs{
    
        float:left;
        padding-left: 5px;
        
    }
    
    .aq_spacer{
        width: 100%;
        margin: auto;
        padding: 20px 20px;
    
    }
    
        
    
    
    
    
    
    
    /* Mobile Version For Hourly Forecast Gauages and Graphs */
    
    
    
    
    
    @media only screen and (max-width:550px) {
    
    .display_gauges{
        width: 100%;
    
    }
    
    .display_graphs{
        width: 100%;
        padding-left: 0px;
    }
    
    
    .aq_gauge{
    margin: auto;
            width: 100%;
    }
    
    
    
    
    }
    
    
    
    
    
    
    
    
    
    .divTable{
        display: table;
        width: 650px;
    }
    .divTableRow {
        display: table-row;
    }
    .divTableHeading {
        background-color: #EEE;
        display: table-header-group;
    }
    .divTableCell, .divTableHead {
    
        display: table-cell;
        padding: 0px 0px;
        margin: auto;
            vertical-align: top; /* here */
        width: 450px;
    }
    
    .divTableCellGauge, .divTableHead {
    
        display: table-cell;
        padding: 0px 0px;
        margin: auto;
            vertical-align: top; /* here */
        width: 165px;
        padding-right: 20px;
    
    }
    .divTableHeading {
        background-color: #EEE;
        display: table-header-group;200
        font-weight: bold;
    }
    .divTableFoot {
        background-color: #EEE;
        display: table-footer-group;
        font-weight: bold;
    }
    .divTableBody {
        display: table-row-group;
    }
    
    
    .gauge_ozone {
       margin-top: -20px;
            margin-bottom: -35px;
    
    }
    
    
    
    
    
    
    
    
    
    /* Table of Pollutants */
    
    .divPoll{
        display: table;
        width: 100%;
    }
    
    
    .divPollRow {
        display: table-row;
    }
    .divPollHeading {
        background-color: #EEE;
        display: table-header-group;
    }
    .divPollCell, .divTableHead {
    border: #000000 solid;
    border-width: 0.02em;
        display: table-cell;
        padding: 1px 1px;
        /* background-color: #808285; */
        background-color: #595959;
        font-family: Oswald; 
        font-size: 1em; 
        font-weight: bold;
        color:#ffffff;
        margin: auto;
        width:16.6%;
        text-align: center;
    }
    
    
    .divPollCell_long{
    border: #000000 solid;
    border-width: 0.02em;
        display: table-cell;
        padding: 1px 1px;
        background-color: #808285;
        font-family: Oswald; 
        font-size: 1em; 
        font-weight: bold;
        color:#ffffff;
        margin: auto;
        width:16.6%;
        text-align: center;
    }
    
    
    
    
    .divPollHeading {
        background-color: #EEE;
        display: table-header-group;
        font-weight: bold;
    }
    .divPollFoot {
        background-color: #EEE;
        display: table-footer-group;
        font-weight: bold;
    }
    .divPollBody {
        display: table-row-group;
    }
    
    .divPollCellgood, .divTableHead {
        background-color: #00E400;
    border: #000000 solid;
    border-width: 0.02em;
        display: table-cell;
        padding: 1px 1px;
        font-family: Oswald; 
        font-size: 1em; 
        font-weight: bold;
        color:#000000;
        margin: auto;
        width:16.6%;
        text-align: center;
    }
    
    .divPollCellmoderate, .divTableHead {
        background-color: #ffff00;
    border: #000000 solid;
    border-width: 0.02em;
        display: table-cell;
        padding: 1px 1px;
        font-family: Oswald; 
        font-size: 1em; 
        font-weight: bold;
        color:#000000;
        margin: auto;
        width:16.6%;
        text-align: center;
    }
    
    .divPollCellusg, .divTableHead {
        background-color: #ff7e00;
    border: #000000 solid;
    border-width: 0.02em;
        display: table-cell;
        padding: 1px 1px;
        font-family: Oswald; 
        font-size: 1em; 
        font-weight: bold;
        color:#000000;
        margin: auto;
        width:16.6%;
        text-align: center;
    }
    
    .divPollCellunhealthy, .divTableHead {
        background-color: #ff0000;
    border: #000000 solid;
    border-width: 0.02em;
        display: table-cell;
        padding: 1px 1px;
        font-family: Oswald; 
        font-size: 1em; 
        font-weight: bold;
        color:#000000;
        margin: auto;
        width:16.6%;
        text-align: center;
    }
    
    .divPollCellveryunhealthy, .divTableHead {
        background-color: #99004c;
        border: #000000 solid;
        border-width: 0.02em;
        display: table-cell;
        padding: 1px 1px;
        font-family: Oswald; 
        font-size: 1em; 
        font-weight: bold;
        color:#000000;
        margin: auto;
        width:16.6%;
        text-align: center;
    }
    
    .divPollCellhazardous, .divTableHead {
        background-color: #7e0023;
        border: #000000 solid;
        border-width: 0.02em;
        display: table-cell;
        padding: 1px 1px;
        font-family: Oswald; 
        font-size: 1em; 
        font-weight: bold;
        color:#000000;
        margin: auto;
        width:16.6%;
        text-align: center;
    }
    
    
    
    .divPollCellnotavailable, .divTableHead {
        background-color: #E1E1E1;
        border: #000000 solid;
        border-width: 0.02em;
        display: table-cell;
        padding: 1px 1px;
        font-family: Oswald; 
        font-size: 1em; 
        font-weight: bold;
        color:#000000;
        margin: auto;
        width:16.6%;
        text-align: center;
    }
    
    
    
    .divPollCell_short{
        display: none !important;
        border: #000000 solid;
        border-width: 0.02em;
        display: table-cell;
        padding: 1px 1px;
        background-color: #808285;
        font-family: Oswald; 
        font-size: 1em; 
        font-weight: bold;
        color:#ffffff;
        margin: auto;
        width:16.6%;
        text-align: center;
    
    }
    
    
    .divPoll_mobile{
    display: none !important;
    }
    
    .risk_gauge{
    float:left;
    width:23%;
    }
    
    .risk_text{
    padding-left:20px;
    padding-top:50px;
    float:left;
    width:65%;
    }
    
    
    
    
    
    @media only screen and (max-width:550px) {
    
    .risk_gauge{
    width:100%;
    margin: auto;
    }
    
    .risk_text{
    width:100%;
    padding-left:0px;
    padding-top:0px;
    }
    
    
    
    }
    
    
    
    
    
    
    
    
    @media only screen and (max-width:550px) {
    
    .divPoll{
    display: none !important;
    }
    
    .divPoll_mobile{
        display: table !important;
        width: 100%;
    }
    
    
    
    }
    
    
    
    
    
    
    .risk_container{
    overflow: hidden;
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    /* Yesterday Report */
    
    
    .divPoll2{
        display: table;
        width: 100%;
    border-collapse:collapse
    }
    
    
    .divPollRow2 {
        display: table-row;
    }
    .divPollHeading2 {
        background-color: #EEE;
        display: table-header-group;
    }
    .divPollCell2, .divTableHead2 {
    border: #000000 solid;
    border-width: 0.02em;
        display: table-cell;
        padding: 1px 1px;
        background-color: #E1E1E1;
        font-family: Oswald; 
        font-size: 1em; 
        font-weight: bold;
        color:#000000;
        margin: auto;
        width:16.6%;
        text-align: center;
    
    }
    
    
    .divPollCell_long2{
    border: #000000 solid;
    border-width: 0.02em;
        display: table-cell;
        padding: 1px 1px;
        background-color: #808285;
        font-family: Oswald; 
        font-size: 1em; 
        font-weight: bold;
        color:#000000;
        margin: auto;
        width:16.6%;
        text-align: center;
        
    }
    
    
    
    
    .divPollHeading2 {
        background-color: #EEE;
        display: table-header-group;
        font-weight: bold;
    }
    .divPollFoot2 {
        background-color: #EEE;
        display: table-footer-group;
        font-weight: bold;
    }
    .divPollBody2 {
        display: table-row-group;
    }
    
    .divPollCell2good, .divTableHead2 {
        background-color: #00E400;
    border: #000000 solid;
    border-width: 0.02em;
        display: table-cell;
        padding: 1px 1px;
        font-family: Oswald; 
        font-size: 1em; 
        font-weight: bold;
        color:#000000;
        margin: auto;
        width:16.6%;
        text-align: center;
    
    }
    
    .divPollCell2moderate, .divTableHead2 {
        background-color: #ffff00;
    border: #000000 solid;
    border-width: 0.02em;
        display: table-cell;
        padding: 1px 1px;
        font-family: Oswald; 
        font-size: 1em; 
        font-weight: bold;
        color:#000000;
        margin: auto;
        width:16.6%;
        text-align: center;
        
    }
    
    .divPollCell2usg, .divTableHead2 {
        background-color: #ff7e00;
    border: #000000 solid;
    border-width: 0.02em;
        display: table-cell;
        padding: 1px 1px;
        font-family: Oswald; 
        font-size: 1em; 
        font-weight: bold;
        color:#000000;
        margin: auto;
        width:16.6%;
        text-align: center;
        
    }
    
    .divPollCell2unhealthy, .divTableHead2 {
        background-color: #ff0000;
    border: #000000 solid;
    border-width: 0.02em;
        display: table-cell;
        padding: 1px 1px;
        font-family: Oswald; 
        font-size: 1em; 
        font-weight: bold;
        color:#000000;
        margin: auto;
        width:16.6%;
        text-align: center;
        
    }
    
    .divPollCell2veryunhealthy, .divTableHead2 {
        background-color: #99004c;
        border: #000000 solid;
        border-width: 0.02em;
        display: table-cell;
        padding: 1px 1px;
        font-family: Oswald; 
        font-size: 1em; 
        font-weight: bold;
        color:#000000;
        margin: auto;
        width:16.6%;
        text-align: center;
        
    }
    
    .divPollCell2hazardous, .divTableHead {
        background-color: #7e0023;
        border: #000000 solid;
        border-width: 0.02em;
        display: table-cell;
        padding: 1px 1px;
        font-family: Oswald; 
        font-size: 1em; 
        font-weight: bold;
        color:#000000;
        margin: auto;
        width:16.6%;
        text-align: center;
        
    }
    
    
    
    
    .divPollCell2available, .divTableHead2 {
    
        border: #000000 solid;
        border-width: 0.02em;
        display: table-cell;
        padding: 1px 1px;
        font-family: Oswald; 
        font-size: 1em; 
        font-weight: bold;
        color:#000000;
        margin: auto;
        width:16.6%;
        text-align: center;
        
    }
    
    
    
    .divPollCell2notavailable, .divTableHead2 {
        background-color: #E1E1E1;
        border: #000000 solid;
        border-width: 0.02em;
        display: table-cell;
        padding: 1px 1px;
        font-family: Oswald; 
        font-size: 1em; 
        font-weight: bold;
        color:#000000;
        margin: auto;
        width:16.6%;
        text-align: center;
        
    }
    
    
    
    .divPollCell_short2{
        display: none !important;
        border: #000000 solid;
        border-width: 0.02em;
        display: table-cell;
        padding: 1px 1px;
        background-color: #808285;
        font-family: Oswald; 
        font-size: 1em; 
        font-weight: bold;
        color:#000000;
        margin: auto;
        width:16.6%;
        text-align: center;
        
    
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    .divPollCell23, .divTableHead2 {
    border: #000000 solid;
    border-width: 0.02em;
        display: table-cell;
        padding: 1px 1px;
        background-color: #C8C8C8;
        font-family: Oswald; 
        font-size: 1em; 
        font-weight: bold;
        color:#000000;
        margin: auto;
        width:16.6%;
        text-align: center;
    }
    
    .divPollCell23_thin, .divTableHead2 {
    border: #000000 solid;
    border-width: 0.02em;
        display: table-cell;
        padding: 1px 5px;
        background-color: #C8C8C8;
        font-family: Oswald; 
        font-size: 1em; 
        font-weight: bold;
        color:#000000;
        margin: auto;
        text-align: center;
    }
    
    .divPollCell25, .divTableHead2 {
    border: #000000 solid;
    border-width: 0.02em;
        display: table-cell;
        padding: 1px 1px;
        font-family: Oswald; 
        font-size: 1em; 
        font-weight: bold;
        color:#000000;
        margin: auto;
        width:16.6%;
        text-align: center;
    }
    
    .divPollCell25_thin, .divTableHead2 {
    border: #000000 solid;
    border-width: 0.02em;
        display: table-cell;
        padding: 1px 5px;
        font-family: Oswald; 
        font-size: 1em; 
        font-weight: bold;
        color:#000000;
        margin: auto;
        text-align: center;
    }
    
    .divPollCell27, .divTableHead2 {
    border: #000000 solid;
    border-width: 0.02em;
        display: table-cell;
        padding: 1px 1px;
        font-family: Oswald; 
        font-size: 1em; 
        font-weight: bold;
        color:#000000;
        margin: auto;
        width:27%;
        text-align: left;
    }
    
    
    .divPollCell2722, .divTableHead2 {
    border: #000000 solid;
    border-width: 0.02em;
        background-color: #C8C8C8;
        display: table-cell;
        padding: 1px 1px;
        font-family: Oswald; 
        font-size: 1em; 
        font-weight: bold;
        color:#000000;
        margin: auto;
        width:27%;
        text-align: left;
    }
    
    
        
    
    
    
    .divPollCell35, .divTableHead2 {
        border: #000000 solid;
        border-width: 0.02em;
        background-color: #C8C8C8;
        display: table-cell;
        padding: 1px 1px;
        font-family: Oswald; 
        font-size: 1em; 
        font-weight: bold;
        color:#000000;
        margin: auto;
        width:27%;
        text-align: center;
    }
    
    
    
    
    
    
    
/*Top header and previous next day buttons on monitor page*/
.header_monitor_top {
    width: 100%;
    margin: 0 auto;
}

.monitor_header{
    display: table;
    vertical-align:middle;
}

.monitor_body {
    display: table-row-group;
}

.monitor_row {
    display: table-row;
}

.monitor_cell, .divTableHead {
    display: table-cell;
    padding: 0px 0px;
    vertical-align:middle;
    line-height: 0.1;
}
    
/* Forecast Footer */
#forecast-footer {
    background-color: var(--teal);
    font-family: 'Oswald-Regular';
    font-size: 28px;
    margin-bottom: 2%;
    padding: 2% 5%;
}

#forecast-footer span {
    color: white;
}

#forecast-footer a {
    color: white;
}