html, body {margin: 0; overflow: hidden;}
@media (min-width: 767px)
{
   .content {
   width: 40%;
   /*A min-width media query triggers styles for desktop screens 
   when the viewport or screen is greater than 767 pixels. */
   margin: auto;
}
}

#container
{
   width: 100%;
   height: 100%;
   margin: 10px auto;
   padding: 0;
   background-color: none;
}

header {
   margin: 10px 1px;
   background-color: none;
   text-align: center;
   width: auto;
}
header span
{
   color: #000000;
   font-size: 70px;
   width: 70%;
   height: 70px;
   margin: 1px 25%;
}

#container2
{
   width: 100%;
   margin: 34px auto;
   padding: 0;
}

img { pointer-events: none; }  /* To prevent the "save image" context menu  */

.label_logintofhg    /* Login to FHG  */
{
   user-select: none;
   text-align: center;
   font-weight: normal;
   font-family: Arial;
   color: black;
   font-size: 20px;
   margin: 1px 1px;
}

.label_copyright   /* Copyright Label  */
{
   padding: 1px, 2px;
   font-weight: bold;
   font-family: Arial;
   color: black;
   font-size: 14px;   /*  copyright */
   color: #000000;
   user-select: none;
   margin: 1px 1px;
   width: 70%;
}

.label_hostname   /*  Host Name Label  */
{
   text-align: center;
   font-weight: bold;
   font-family: Arial;
   color: rgb(8, 102, 255);
   font-size: 36px;
   user-select: none;
   margin: 1px 1px;
   width: 70%;
}

.form1    /*  Login Form  */
{
   box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
   border: solid rgb(0, 0, 0) 1px;
   height: 270px;
   width: 90%;
   border-radius: 12px;
   margin: 10px auto;
   background-color: #fff;
   padding: 1px 1px;
}

.form2   /*  Create New Account Form  */
{
/*   box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
   border: solid rgb(0, 0, 0) 1px;
   background-color: rgb(255, 255, 255);      */

   height: 90px;
   width: 90%;
   border-radius: 12px;
   margin: 2px auto;
   padding: 1px 1px;
}

.form3    /*  Copyright Message Form  */
{
   /* Multi-Line Comments */
   padding: 1px 1px;
   margin: 14px auto;
   height: 60px;
   width: 90%;
   border-radius: 12px;
   text-align: center;
   justify-content: center;
   align-items: center;
}

.button_login /*  Login Button  */
{
   box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
   font-weight: bold;
   font-family: Arial;
   border: none;
   color: white;
   padding: 1px 1px;
   text-align: center;
   text-decoration: none;
   font-size: 20px;
   margin: 5px 50px;
   background-color: #770699; /* ---- Good ---*/
   border-radius: 12px;
   width: 60%;
   height: 40px;
}

.button_login:active 
{   /*  Login Button Active  */
   background-color: #eeb109;
}

.button_login:active 
{  /*  Login Button Transform  */
   transform: translateY(4px);
   border: solid rgb(0, 0, 0) 1px;
}

.button_newaccnt
{
   /*  Create New Account Button  */
   box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
   font-weight: bold;
   font-family: Arial;
   border: none;
   color: white;
   padding: 1px 2px;
   text-align: center;
   text-decoration: none;
   user-select: none;
   font-size: 18px;
   margin: 16px auto;
   background-color: #03522a;
   border-radius: 12px;
   width: 70%;
   height: 40px;
}

.button_newaccnt:active
{  /*  Create New Account Button Active  */
   background-color: #f97300;
}

.button_newaccnt:active
{  /*  Create New Account Button Transform  */
   transform: translateY(4px);
   border: solid rgb(0, 0, 0) 1px;
}

.text_emailaddress
{
   /*  Email address field  */
   margin: 2px 20%;
   background-color: #fff;
   border-radius: 7px;
   width: 60%;
   height:24px;
   padding: 7px 7px;
   border: solid rgb(0, 112, 0) 1px;
   margin: 5px 50px;
   font-weight: bold;
   font-family: Arial;
   font-size: 20px;
   text-align: center;
}

.text_emailaddress:active
{  /*  Email address field Active  */
   box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

.text_psswrd
{
   /* Login Password  */
   background-color: #fff;
   border-radius: 7px;
   width: 60%;
   height: 24px;
   padding: 7px 7px;
   border: solid rgb(0, 112, 0) 1px;
   margin: 2px 20%;
   margin: 5px 50px;
   font-weight: bold;
   font-family: Arial;
   font-size: 20px;
   text-align: center;
}

.text_psswrd:active
{   /*  Password field Active  */
   box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

/*  Hide Password reveal button in Microsoft Edge  */
::-ms-reveal { display: none; }