html, body {
    max-width: 100%; /* remove the horizontal scrollbar in a div */
    overflow-x: hidden; /* remove the horizontal scrollbar in a div */
    /* font-family: Arial, Helvetica, sans-serif; */

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: normal;
    font-size: 16px; /* Default browser font size */
}

div.container
{

}

h1 {
 font-family: Impact, Charcoal, sans-serif;
 font-size: 36px; /* 36px is h1 default font-size */
}

h2 {
    font-size: 18px;
    font-style: normal;
    margin-top: 15px;
    position: relative;
    text-align: center;
    /*text-transform: uppercase;*/
    z-index: 1;    
}

h2:before {
    border-top: 2px solid #dfdfdf;
    content:"";
    margin: 0 auto;
    position: absolute;
    top: 15px; left: 0; right: 0; bottom: 0;
    width: 100%;
    /* width: 95%; */
    z-index: -1;
}

h2 span { background: #fff; padding: 0 10px; }

hr.linestyle01 {
    display: block;
    height: 0px;
    width: 100%;
    /* width: 95%; */
    border: 0;
    border-top: 2px solid #dfdfdf; 

    /* border-top: 1px dotted #82CAFA; */
    /* border-top: 1px dotted #DBDBE6; */
    /* border-top: 1px dotted #E6EDFF; */
    /* border-top: 1px dotted grey; */
}

hr.linestyle02 {
    display: block;
    height: 0px;
    width: 100%;
    /* width: 95%; */
    border: 0;
    border-top: 2px solid #dfdfdf; 

    /* border-top: 1px dotted #82CAFA; */
    /* border-top: 1px dotted #DBDBE6; */
    /* border-top: 1px dotted #E6EDFF; */
    /* border-top: 1px dotted grey; */
}

hr.linestyle03 {
    display: block;
    height: 0px;
    width:100%;
    border: 0;
    border-top: 1px dotted grey;
}

div.ThisLayout01 a
{
 /* text-decoration: none; */ /* The text-decoration property is mostly used to remove underlines from links for design purposes */
 text-decoration: underline;
}

div.ThisLayout01 a:hover
{
 text-decoration: underline;
}

div.ThisLayout01 a:link
{
 color: black;
}

div.ThisLayout01 a:visited
{
 color: black;
}


div.ThisLayout02 a
{
 text-decoration: none; /* The text-decoration property is mostly used to remove underlines from links for design purposes */
}

div.ThisLayout02 a:hover
{
 text-decoration: none;
}

div.ThisLayout02 a:link
{
 color: black;
}

div.ThisLayout02 a:visited
{
 color: black;
}


div.ThisLayout03 a
{
 text-decoration: none; /* The text-decoration property is mostly used to remove underlines from links for design purposes */
}

div.ThisLayout03 a:hover
{
 text-decoration: underline;
}

div.ThisLayout03 a:link
{
 color: black;
}

div.ThisLayout03 a:visited
{
 color: black;
}

div.ThisLayout04
{
 text-align: center;
}

div.ThisLayout05
{
 text-align: center;
 font-weight: bold;
}

div.ThisLayout06
{
 text-align: center;
 font-weight: bold;
}

div.ThisLayout06 a
{
 text-decoration: none; /* The text-decoration property is mostly used to remove underlines from links for design purposes */
}

div.ThisLayout06 a:hover
{
 text-decoration: underline;
}

div.ThisLayout06 a:link
{
 color: black;
}

div.ThisLayout06 a:visited
{
 color: black;
}

label.ThisLayout01 a
{
 /* text-decoration: none; */ /* The text-decoration property is mostly used to remove underlines from links for design purposes */
 text-decoration: underline;
}

label.ThisLayout01 a:hover
{
 text-decoration: underline;
}

label.ThisLayout01 a:link
{
 color: black;
}

label.ThisLayout01 a:visited
{
 color: black;
}


label.ThisLayout02 a
{
 text-decoration: none; /* The text-decoration property is mostly used to remove underlines from links for design purposes */
}

label.ThisLayout02 a:hover
{
 text-decoration: none;
}

label.ThisLayout02 a:link
{
 color: black;
}

label.ThisLayout02 a:visited
{
 color: black;
}

label.ThisLayout03
{
 font-size: 14px;
}

label.ThisLayout03 a
{
 text-decoration: none; /* The text-decoration property is mostly used to remove underlines from links for design purposes */
}

label.ThisLayout03 a:hover
{
 text-decoration: underline;
}

label.ThisLayout03 a:link
{
 color: black;
}

label.ThisLayout03 a:visited
{
 color: black;
}

label.ThisLayout04
{
 font-size: 17px;
 font-weight: bold;
}

label.ThisLayout05
{
 font-size: 14px;
 font-weight: normal;
 font-style: italic;
}

label.ThisLayout06
{
 font-weight: bold;
}

label.ThisLayout07
{
 font-size: 17px;
 font-weight: normal;
}

label.ThisLayout08
{
 font-size: 20px;
 font-weight: bold;
}

label.ThisLayout09
{
 font-size: 17px;
 font-weight: bold;
}

div.ThisSpacer01 {
  padding-top: 5px;
  padding-bottom: 5px;
  /* padding-left: 80px; */
  /* padding-right: 30px; */
}

fieldset 
{   
  display: block;
  border:1px solid black;
border-radius: 5px;
  margin-left: 2px;
  margin-right: 2px;
  margin-bottom: 15px;

  padding-top: 0.35em;
  /*padding-bottom: 0.35em;*/
  padding-left: 0.35em;
  padding-right: 0.35em;

 /* min-width: 0; */ /* give min-width: 0; to fieldset. fieldset has min-width: -webkit-min-content; by default so you override that. min-width: 0 prevents tables from overflowing div within fieldset */
}

legend
{ 
width:auto;
margin-bottom: 0px; 
font-size: 16px; 
font-weight: normal; 
color: black;
  padding-left: 0.35em;
  padding-right: 0.35em;
}

#Processing 
{
z-index: 99999;
position: fixed;
top: 0px;
left: 0px;

bottom: 0px;
right: 0px;

width: 100%;
height: 100%;
filter: alpha(opacity=70);    
opacity: 0.7;
display: none;
border-style: none;
background-color: #F8F8F8;
/*background-image: url("../images/processing10.gif"); */
background-image: url("images/processing10.gif"); 
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center, center;
}

div.MyMsg
{

 /* font-size: 14px; */
 font-weight: bold;
 clear: both;
 width: 100%;
 padding-right: 2px;
 padding-top: 5px;
 padding-bottom: 5px;
 padding-left: 2px;
 text-align: center;
 color: green;
}

div.MyMsg01
{
 font-weight: bold;
 clear: both;
 width: 100%;
 text-align: center;
 color: red;
 padding-bottom: 5px;
}


input.inputStyle01
{
 text-align: center;
}

input.inputStyle02
{
 visibility: hidden;
}

.mybutton {
  display: inline-block;
  background-color: #4CAF50; /* Green */
  color: white;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  font-size: 18px;
  font-weight: 400;
  padding: 0.500rem 0.75rem;
  margin: 4px 2px;
  cursor: pointer;
  border: none;
  border-radius: 0.25rem;
}

.mybutton-blue {background-color: #008CBA;} /* Blue */
.mybutton-red {background-color: #f44336;} /* Red */ 
.mybutton-gray {background-color: #e7e7e7; color: black;} /* Gray */ 
.mybutton-black {
         /* background-color: #555555; */ /* Black */
         background-color: #333; /* Black */
         } 

.mybutton:focus, .mybutton.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0);
}

.mybutton.disabled, .mybutton:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/********************* MENU ****************************/
/* https://www.w3schools.com/howto/howto_js_topnav_responsive.asp */
/* Source: Add a black background color to the top navigation */

.topnav {
  background-color: #333;
  /* background-color: black; */
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* When the screen is less than 800 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 800px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 800px) {
  /* I removed this section */
  /*.topnav.responsive {position: relative;}*/

  /* I added this section */
  .topnav.responsive {
    z-index: 99999;
    position: fixed;
    width: 100%;
    height: 100%;
    display: relative;
  }

  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
/*****************************************************************************/