body {font-family: "Verdana";}
h1 { color: #567EA1;}
h2 { color: #567EA1; font-family:verdana,geneva,sans-serif;}
h3 { color: #567EA1; font-family:verdana,geneva,sans-serif;}
h4 { color: #567EA1; font-family:verdana,geneva,sans-serif; font-style: italic;}
h5 { color: #567EA1; font-family:verdana,geneva,sans-serif;}
p  {color: #19194d; font-family:verdana,geneva,sans-serif;  font-size: 11pt;}
a {
  font-family: "Verdana";
  color: #0B4575;
  }
.pf {color: #19194d; font-family:verdana,geneva,sans-serif;  font-size: 11pt; margin: 8px 0 4px 0;}
.bbhd {background-color: #19194d; min-width:400px; padding: 4px; color:white;}
.bbld { min-width:380px; width:70%; height:300px; overflow: scroll; border: 2px solid #567EA1;}
.bbtx { min-width:380px; width:70%; height:50px; overflow: auto; border: 2px solid #567EA1;
        font-family: "Verdana";  font-size: 11pt;  text-align: left;  background-color:  #ffffe6;
        color: #19194d; white-space: normal; float: none;  word-wrap: break-word; }
.bbpp { vertical-align:top; }
.bthc {
  font-family: "Verdana";
  font-size: 9pt;
  text-align: left;
  color:#567EA1;
  
  }
.btdn {
  font-family: "Verdana";
  font-size: 11pt;
  font-weight:bold;
  text-align: left;
  color:#567EA1;
  }
.btdd {
  font-family: "Verdana";
  font-size: 9pt;
  text-align: left;
  color:#333399;
  }
.btdp {
  font-family: "Verdana";
  font-size: 11pt;
  text-align: left;
  background-color:  #ffffe6 ;
  color: #19194d;
  white-space: normal;
    float: none;
    max-width: 100%;
    height: auto;
    word-wrap: break-word;
  }  
.jfcr { /* flex outer container*/
  display: flex;
 float: left; 
 flex-wrap:wrap;
 align-content: flex-start;
}
.jfcd {  margin: 4px;/* flex div container*/
  padding: 8px 8px 8px 8px;   }
.jfcd2 {  margin: 4px;/* flex div container 2 items in row*/
     width:400px;  text-align: left; min-width:190px; White-space:pre-wrap; display:block;   }  
.jfcs {  /* flex containerinner span - start row with 4 cells */
   color: #19194d; font-family:verdana,geneva,sans-serif;  font-size: 11pt;
   width:200px;  text-align: left; min-width:100px; White-space:pre-wrap; display:block;}
.jfcs2 {  /* flex containerinner span - start row with 2 cells */
   color: #19194d; font-family:verdana,geneva,sans-serif;  font-size: 11pt; vertical-align: top;
   width:400px;  text-align: left; min-width:200px; White-space:pre-wrap; display:block;}
.juh3 {
  font-family: "Verdana";
  font-size: 13pt;
  font-weight:bold;
  text-align: left;
  color:#567EA1;
  padding:8px 0 4px 0;
  }
  .jura {
  font-family: "Verdana";
  font-size: 9pt;
  text-align: right;
  position: relative;
  right: 0px;
  color:#567EA1;
  
  }
div {padding:1px;
     font-family:verdana,geneva,sans-serif;
    }
.navbar {  width: 100%;  background-color: #567EA1;  overflow: auto;}

/* Navigation links */
.navbar a {
  float: left;
  padding: 4px;
  color: white;
  text-decoration: none;
  font-size: 17px;
  font-family: "Verdana";
  width: 12%; /* Four equal-width links. If you have two links, use 50%, and 33.33% for three links, etc.. */
  text-align: center; /* If you want the text to be centered */
}
.navbar a.navicon {    float:right ;background: black; }
.navbar.responsive a.navicon {    float:right ;background: black; }
.navbar a:hover {
  background-color: #000;
}
.navbar.responsive a:hover {
  background-color: #000;
}

/* Style the current/active link */
.navbar a.active {  background-color: #336799;}
.navbar.responsive a.active {  background-color: #336799;}
.flex-container {
  display: flex;
 float: left;
}

.flex-container > div {
  margin: 4px;
  padding: 4px 4px 8px 4px;
  whitespace:normal;
  flex-wrap:wrap;
}
/* Add responsiveness - on screens less than 500px, make the navigation links appear on top of each other, instead of next to each other */
@media screen and (max-width: 500px) {
.navbar { position: static;} /* sticky; position: -webkit-sticky; left: 0; top: 0; */
.navbar a {float: left; padding: 4px; color: white; text-decoration: none; font-size: 15px;
                      font-family: "Verdana"; display: block; width: 84%; padding:0px; text-align: left; }
.navbar a.active{ float: left; display: block; width: 84%; text-align: left;  }
.bbhd {position: sticky; position: -webkit-sticky; /* Safari */  top: 0; left: 0; width: 100%; text-align: left;}
.navbar a.navicon {float: right;  display: block; width: 4%;}
.navbar.responsive {  width: 100%;  background-color: #567EA1;  overflow: auto;}
.navbar.responsive { position: sticky; position: -webkit-sticky; /* Safari */  left: 0; top: 0;}
.navbar.responsive a {  float: left; padding: 4px; color: white; text-decoration: none; font-size: 15px;
                      font-family: "Verdana"; display: block; width: 84%; padding:0px; text-align: left; }
.navbar.responsive a.navicon {float: right;  color:white; display: block; width: 4%;}
}
@media screen and (min-width: 501px) {
.navbar {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}
.navbar a {display:inline-block; padding:4px}
.navbar a.navicon {float: right;  display: none; width: 4%;}
.bbhd {position: sticky; position: -webkit-sticky; /* Safari */  top: 30; left: 0;  text-align: center;}
}