* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;

}

.container {  
  display: grid;
  grid-template-rows: auto;
  grid-auto-columns: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;

}

.header { 
  grid-area: 1 / 1 / 2 / 2; 
  background-color: #333333;
  padding-left: 15px;
}

.topnav { 
  grid-area: 2 / 1 / 3 / 2; 
  background-color: #333333;
  padding-top: auto;
  
}

.nav { 
  grid-area: 3 / 1 / 4 / 2; 
  background-color: #8f8f8f;
  padding-left: 15px;
}

.article { 
  grid-area: 4 / 1 / 5 / 2;
  background-color: #ffffff; 
  padding-left: 15px;
}

.footer { 
  grid-area: 5 / 1 / 6 / 2; 
  background-color: #333333;
  padding-top: 0px;
  padding-left: 15px;
  text-align: center;
  color: white;
}


a.footer:visited {
  color: white
}

img {
  max-width: 250px;
  max-height: 250px;
}



.grid-container {
  display: grid;
  grid-template-columns: fit-content(100px) auto;
  background-color: #2196F3;
  padding: 1px;
  width: max-content;
}

.grid-row {
  display: grid;
  grid-template-columns: auto;
  background-color: #2196F3;
  padding: 1px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 1px;
  font-size: 16px;
  text-align: Left;

}

.grid-itemsmall {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 1px;
  font-size: 10px;
  text-align: Left;
}

table {
  border: 1px solid black;
  text-align: left;

}

table.feeding {
  text-align: right;

  border-collapse: collapse;

}

th,
td,
tr {


  border: 1px solid black;


}

table.feeding td,
tr {
  padding-left: 10px;
  padding-right: 2px;
  border: 1px solid black;


}

table.feeding th {
  text-align: center;
}

table.lookup {
  border: 4px solid black;
  text-align: left;
  border-collapse: collapse;
}

table.lookup th
{
  border: 1px solid black;
  padding: 0px 5px 0px 20px;
}
table.lookup 
td,
tr {
  border: 1px solid black;
  text-align: right;
  padding: 0px 5px 0px 5px;
}
table.lookup tbody tr:nth-child(odd) {
  background: #dbdbdb;
}

table.feeding tbody tr:nth-child(odd) {
  background: #dbdbdb;
}

table.feeding tbody tr:nth-child(even) {
  background: #ffffff;
}


p.auto {
  overflow: auto;

}
th.sortAZ, th.sortZA{
	background-repeat: no-repeat;
	background-position: 6px 3px;
	background-size: 10px 16px;
  padding-left: 20px;
}
th.sortAZ {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAgCAYAAAAWl4iLAAAAAXNSR0IArs4c6QAAAWRJREFUSEvt1jFLHHEQBfDfJQghjZDOLxDLNHZBESQIQjAQSwkhtQhqITZaCSlstBGCiIQUaSJqEUyqgLUQ0gh+AWsbEeSCDOzKsrd7/7sjVdhp//Mes29n3kxL93iMdxgqpd3gSzdoK0H8Cj9rcl7gTx0+RfwaJzXgMZw3xKFAI8VDHzRSNFJ0msJ/3BVh6hsYxxJ+oxfbfI49/MJ6rljux0/wDTPZwxUmMZrw4zucYiTD7WAZ7SB+ikNMl/5PkH/KvqLKzxewieHS4w+8CeIjzCZWVL/Pu0G8jcV+kYn89VzjLaz8I/KPWCsu09BrFdEdg0QbH/A5wOUtPY+DAciD9H3x1qha/0G+X3Gk1H1FkL7FcTGh7q6Yw9ceKu+otDwgVdWkKr/NKv1eBU5dQjE00ecxmcW4zsb9bNBLKHAvs7F+Vhj3KVx0a51UxTk2jCZM5hEmcJnqx16Jgyc85S9C22TcA8fSUjyDMj1PAAAAAElFTkSuQmCC')
}

th.sortZA {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAgCAYAAAAWl4iLAAAAAXNSR0IArs4c6QAAAWRJREFUSEvt1jFLHVEQhuHnKoLYCHb5A6ZMYycRIQQhIAZMKUGsRYgWkuZaCSnSJI0QQpCQwsZgLIJaCamFkCaQP2CdRgS5IgN7ZbPZvedgKbvlzsx7htn5vj0d+c8YrnGZU9LJScIkTjGEGfxJ1eWAp3GIiQJ2jif4PQieAs/hAKMVyF/M40cTfBB4CZ8w0lAcs17E97p4E/gF9jCcmGUPy/hSzasDpzqtMgIenX8rB6rggO5mdFoH/6fzMngbm3eA9g+JzlfwOV70wW+xkdrNzPgbvA7wO6xlFuWmdQMce7qQW5GZtxPg8ICvCDGUn1DYB2w1wFYR32W8Ej/G8/6MQ1n7eFaS7SweFnKuY0/hCkd4UCS8xzp65a0IMUR3j/EKPwvZhk80gc8Kg/pYmFS3n5jyivCDFLj21BZ8O5Z2FO0o/tdIuxX3eCue4qTBjx/hV9OvKrUVYf4va65ZF3W3n/IhN+OjUjyTK0C1AAAAAElFTkSuQmCC')
}


.navbar {
  overflow: hidden;
  background-color: #333;
  padding: 0;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 0px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 0px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}
/*
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}*/

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.addressBNB {
  color: black 
}

a.addressBNB:visited {
  color: black
}