header {  background: #000;  display: flex;  justify-content: space-between;}
.logo {  color: white;  font-size: 1.5em;  line-height: 40px;  padding: 0 0.5em;}
footer {  color: gray;  text-align: center;}
p {  padding: 0.5rem;}
hr.thick {  border: 2px solid blue;    border-radius: 1px; margin-bottom: 10px;}

nav {position:absolute;margin-top:0em; width:100%;background:#000;display:none; color:gray;}
nav:hover {display:block; }
nav a {  display: block;  line-height: 40px;  text-align: center;}

.navActive { background-color: #008080; color: white;display: inline-block; margin: 0rem;   }
.navDefault { background-color: black; color: white; font-weight: 600; display: inline-block; margin: 0rem; }
.navDefault:hover {background-color: rgb(221, 250, 237); color: black;}

.hamburger {padding:0.25em 0.25em;font-size:1.0em;line-height:50px;display:inline-block;z-index:2;}
.hamburger:hover ~ nav {display:block;}


@media only screen and (min-width: 768px) {
    .hamburger {display:none;}
    nav {position:static;display:flex;background:none;clear:none;flex:1;justify-content:flex-end;}
    nav:hover {display:flex;}
    nav a {padding:0 1em;}
}
.tabsActive {
  z-index: -2;
  background-color: white;
  color: black;
  font-weight: 800;
  display: inline-block;
  margin: 0rem;
  padding: 10px 10px;
  border-width: 2px 2px 0px 2px;
  border-color: navy navy white navy;
  outline-style: solid;
  outline-color: white;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}
.tabsDefault {
  background-color: gray;
  color: white;
  font-weight: 600;
  display: inline-block;
  border-width: 1px 1px 0px 1px;
  border-color: black black black black;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  padding: 10px 10px;
}
.tabsDefault:hover {  background-color: rgb(200, 200, 200); color: blue; font-weight: 600;}
.accordianActive {  color: #008080;  transform: rotate-180;}
.accordianDefault {  color: Crimson;}
.hidden {  display: none;}


.btn {
  background-color: rgba(47, 0, 255, 0.993);
  border: 2px;
  color: black;
  padding: 10px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 10px;
}
.btn:hover {  background-color: yellow;  color: black;}
.btn:focus {  background-color: green;  color: white;}
.btn::active {  background-color: rgb(128, 41, 0);  color: white;}

.ifield {
  background-color: rgba(255, 255, 255, 0.993);
  border: 2px;
  border-color: black;
  color: black;
  padding: 10px 10px;
  text-align: center;
  display: inline-block;
  margin: 4px 2px;
  cursor: default;
  border-radius: 10px;
}
.ifield:hover {
  background-color: rgb(255, 255, 148);
  border: 2px;
  border-color: black;
  border-radius: 10px;
  color: black;
}
.ifield:focus {
  background-color: rgb(221, 255, 221);
  border: 2px;
  border-color: black;
  border-radius: 10px;
  color: black;
}
.ifield::active {
  background-color: rgb(255, 220, 204);
  border: 2px;
  border-color: black;
  border-radius: 10px;
  color: black;
}

.number {
  display: inline-block;
  padding: 4px 10px;
  color: #fff;
  border-radius: 4px;
  background: #44475c;
  margin: 0px 5px;
  cursor: pointer;
}
.max-h-0 {  max-height: 0;}
.number:hover,
.number.active {  background: #717699;}
.cfilter {  background: wheat;  color: #fff;}
.basic {  color: black;  background-color: light-gray;}
table {
  font-family: "Open Sans", sans-serif;
  width: 90%;
  border-collapse: collapse;
  border: 3px solid #44475c;
  margin: 10px 10px 0 10px;
}
table th {
  text-transform: uppercase;
  text-align: left;
  background: #44475c;
  color: #fff;
  cursor: pointer;
  padding: 8px;
  min-width: 30px;
}
table th:hover {  background: #717699;}
table td {
  text-align: left;
  padding: 8px;
  border-right: 2px solid #7d82a8;
}
table td:last-child {  border-right: none;}
table tbody tr:nth-child(2n) td {  background: #d4d8f9;}
.pagination {
  font-family: "Open Sans", sans-serif;
  text-align: right;
  width: 750px;
  padding: 8px;
}
.flex-wrapper {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: space-between;
}

.number:hover,.number.active {  background: #717699;}
.thumb {
  height: 75px;
  border: 1px solid #000;
  margin: 10px 5px 0 0;
}
.dotted {
  width: 100px;
  padding: 10px;
  border-width: 2px;
  border-style: dotted;
  border-color: gray;
}

#progress_bar.loading {  opacity: 1;}
#progress_bar .percent {  background-color: #99ccff;  height: auto;  width: 0;}

::placeholder {  color: red; font-size: 1.5em;}