html {
  background: gray;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "Courier New", monospace;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

header {
  position: absolute;
  width: 100%;
  height: 75px;
  top: 0;
  /*
*/
  background-color: black;
  text-align: center;
  vertical-align: middle;
}

nav {
  position: absolute;
  width: 100%;
  height: 25px;
  top: 75px;
  /*
*/
  background: rgb(255, 221, 255);
  text-align: right;
}

section {
  position: absolute;
  width: 100%;
  height: calc(100%-240px);
  top: 100px;
  bottom: 50px;
  /*
*/
  overflow: auto;
}

/*
article {
	position:                   absolute;
	width:100%;
}
*/

footer {
  position: absolute;
  width: 100%;
  height: 50px;
  bottom: 0;
  background-color: black;
  vertical-align: middle;
}

#divFooter {
  background-color: black;
  color: white;
}

div {
  background-color: lightgray;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  vertical-align: middle;
}

#divQRCodeImage {
  width: 250px;
  height: 250px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

h1 {
  background-color: black;
  margin: 0;
  padding: 0;
  color: whitesmoke;
}

h2 {
  background-color: rgb(190, 188, 242);
  margin: 0;
  padding: 0;
}

h3 {
  background-color: gray;
  margin: 0;
  padding: 0;
  color: black;
}

h4 {
  margin: 0;
  padding: 0;
}

p {
  margin: 0;
  padding: 0;
}

span {
  margin: 0;
  padding: 0;
}

hr {
  border: 3px solid rgb(120, 153, 120);
}

table {
  border: 1px solid black;
  width: 100%;
}

th {
  background-color: gray;
}

tr:nth-child(even) {
  background-color: rgb(190, 188, 242);
}

tr:hover {
  background: rgb(255, 221, 255);
}

td:hover {
  background: rgb(255, 204, 255);
}

textarea:hover {
  background: rgb(234, 173, 201);
  font-weight: bolder;
}

/* 
select {
}
*/

select:hover {
  background: rgb(234, 173, 201);
  font-weight: bolder;
}

/*
option {
  color:                      green;
}
*/

option:hover {
  font-weight: bolder;
  /*
  font-size:                  larger;   
*/
}

option:nth-child(even) {
  background-color: rgb(190, 188, 242);
}

option:nth-child(odd) {
  background-color: lightgrey;
}

button:hover {
  background: rgb(190, 188, 242);
  font-weight: bolder;
}

input[type="text"] {
  text-align: right;
}

input[type="text"]:hover {
  background: rgb(234, 173, 201);
  font-weight: bolder;
}

input[type="checkbox"] {
  accent-color: gray;
  font-weight: bolder;
}

.footNote {
  font-size: smaller;
}

.lengthCounter {
  background-color: gray;
  color: whitesmoke;
  font-size: smaller;
}

.lengthCounter:hover {
  color: black;
  font-size: smaller;
}

/*
.lightred option {
  background-color:           lightred;
}
*/

/*
.lightpruple option {
  background-color:           rgb(125, 119, 235);
}
*/

/*
#qrcode {
  width:                      160px;
  height:                     160px;
  margin-top:                 15px;
}
*/

.floatLeft {
  border: 0px solid black;
  width: 75%;
  float: left;
  text-align: right;
  vertical-align: middle;
}

.floatRight {
  border: 0px solid black;
  width: 25%;
  float: right;
  text-align: left;
  vertical-align: middle;
}

/*
main {
  display:                    flex;
  justify-content:            center;
  align-items:                center;
}

#reader {
  width:                      600px;
}

#result {
  text-align:                 center;
  font-size:                  1.5rem;
}
*/