.tt {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 20px;
 text-align: center;
 margin-bottom: 30px;
            }
.notes {
text-align: inherit;
}
.sub1 {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 18px;
 text-align: center;
 padding-right: 60px;
 margin-bottom: 20px;
}
.sub2 {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 18px;
 text-align: center;
 padding-bottom: 20px;
}
.col_wra {
max-width: 1280px;
margin: auto;
}

.col_lef {
max-width: 500px;
padding-bottom: 40px;
float: left;
}
.col_rig {
max-width: 780px;
padding-bottom: 40px;
float: left;
}   
.btn {
 font-size: 18px;
 font-family: Arial, Helvetica, sans-serif;
 padding: 10px 16px;
 margin: 5px;
 border-radius: 4px;
 background-color: #d3d3d3;
}
.lab {
 font-family: Arial, Helvetica, sans-serif;
 font-style: normal;
 white-space: nowrap;
}

/* Style the active class, and buttons on mouse-over */
.active, .btn:hover {
background-color: #1a73e8;
color: white;
}
.box {
 width: 420px;
 height: 70px;
 margin: 5px 0;
 padding: 5px 20px 5px 10px;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 22px;
 color: white;
 float: left;
}
.inner {
 height: 70px; 
 margin-top: -20px;
 text-align: right;
 display:flex;                
 align-items: center;
 justify-content: flex-end;
 font-weight: bold;
 color: white;               
}
.fontbig {
 font-size: 38px;            
}
.fontsmall {
 font-size: 25px;            
}
.cwra {
 width: 780px;
 height: 390px;
 margin: auto;
}
.cwra_lev {
 /* extra height for legend */
 width: 780px;
 height: 430px;
 margin: auto;
}
.cle {
 clear: left;
}
#ts {
 white-space: nowrap;
}
#con {
 max-width: 1280px;
 margin: auto;
 /* override WP theme */
 line-height: 1.0;
}
#pan {
 max-width: 760px;
 border: lightgrey solid 2px;
 background-color: #e7e7e7;
 padding-top: 10px;
 margin: 5px auto;
}
#dpk1, #dpk2 {
 margin: 10px;
 font-family: Arial, Helvetica, sans-serif;
 /* override WP theme */
 background: white;
 border: 1px solid black;
 /* add for new site Jan 2026 */
 width: fit-content;
}
#btw {
 max-width: 780px;
 margin: auto;
 text-align:center;
}
#dtw {
 max-width: 780px;
 margin: auto;
 text-align:center;
}
#up {
background-color: #418AD9;
}
#do {
background-color: #418AD9;
}
#he {
background-color: #418AD9;
}
#ahol {
background-color: #418AD9;
}
#hol {
background-color: #418AD9;
}
#flo1 {
background-color: #37A19D;
}
#flo2 {
background-color: #37A19D;
}
#EAflo {
background-color: #3ca650;
}
#ca_lev {
 height: 100%;                          
}
#ca_flo {
 height: 100%;                          
}
#ca_EAflo {
 height: 100%;                          
}

@media only screen and (max-width: 1420px) {
 .col_wra {
 max-width: 580px;                
 }
 .col_lef {
 max-width: 580px;
 float: none;                
 }
 .sub1 {
 padding-right: 0;
  }
 .box {
 float: none;
 margin: 5px auto;
}
 .col_rig {
 max-width: 580px;                
 }
 .cwra {
 width: 580px;
 height: 290px; 
 margin: auto;        
}
.cwra_lev {
 /* extra height for legend */
 width: 580px;
 height: 320px; 
 margin: auto;   
}
}
@media only screen and (max-width: 610px) {
 .col_wra {
 max-width: 350px;
  }
  #btw {
 max-width: 300px;
  }
  #dtw {
 width: 300px;
  }                 
  .col_lef {
 max-width: 350px;
 float: none;  
  }
  .sub1, .sub2 {
 padding-right: 0;
 font-size: 17px;
 margin-bottom: 10px;
  }
  .box {
 width: 320px;
 float: none;  
 margin: 5px auto;
}
.fontbig {
    font-size: 30px;
}
.fontsmall {
    font-size: 20px;
}
.col_rig {
    max-width: 350px;
}
.cwra {
    width: 350px;
    height: 290px;
    margin: auto;
}
.cwra_lev {
    /* extra height for legend */
    width: 350px;
    height: 320px;
    margin: auto;
}
}
@media only screen and (max-width: 360px) {
    /* this is for really tiny phones */
    .box {
    width: 270px;
    float: none;  
    margin: 5px auto;
    }
}