@charset "utf-8";
/* $Id: framework.css,v 1.10 2009/11/02 17:42:27 epiphany Exp $ */


html, body {
	margin: 0;
  height: 100%;
  width: 100%;
  max-width: 100%;
  font-family: 'Hind', sans-serif;
  font-size: 100%;
  color: #343434;
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

h1, h2, h3 {
  margin: 0px;
}

a {
  color: inherit;
  cursor: pointer;
}

input, select, option, textarea {
  background-color: #FFFFF8;
  border-radius: 5px;
}

input {
  padding: 3px 5px;
  border-width: 1px;
}

fieldset {
  margin-bottom: 20px;
}

fieldset legend {
  font-weight: 500;
}

.paddingNone {
  padding: 0px;
}

.marginNone {
  margin: 0px;
}

.borderNone {
  border: none;
}

.marginTop {
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
}

.marginBottom {
  margin-top: 0px;
  margin-right: 0px;
  margin-left: 0px;
}

.marginT20 {
  margin-top: 20px;
}

.marginR20 {
  margin-right: 20px;
}

.marginB20 {
  margin-bottom: 20px;
}

.marginL20 {
  margin-left: 20px;
}

.smallTxt {
  font-size: small;
}

.largeTxt {
  font-size: large;
}

.xLargeTxt {
  font-size: x-large;
}

.xxLargeTxt {
  font-size: xx-large;
}

.xxxLargeTxt {
  font-size: xxx-large;
}

.hidden {
  display: none;
}

.height100 {
  height: 100px;
}

.height200 {
  height: 200px;
}

.height300 {
  height: 300px;
}

.height400 {
  height: 400px;
}

.height500 {
  height: 500px;
}

.alignLeft {
  text-align: left;
}

.alignRight {
  text-align: right;
}

.alignCenter {
  text-align: center;
}

.fLeft {
  float: left;
}

.fRight {
  float: right;
}

.vTop {
  vertical-align: top;
}

.vMiddle {
  vertical-align: middle;
}

.vBottom {
  vertical-align: bottom;
}

.inline {
  display: inline;
}

.helperTxt {
  font-size: smaller;
  font-style: italic;
}

.req {
  color: #F00;
  font-weight: bold;
}

.bold {
  font-weight: bold;
}

.italic {
  font-style: italic;
}

.underline {
  text-decoration: underline;
}

.redTxt {
  color: #d62828;
}

.minW100 {
  min-width: 100px;
}

.minW200 {
  min-width: 200px;
}

.minW300 {
  min-width: 300px;
}

.minW400 {
  min-width: 400px;
}

.minW500 {
  min-width: 500px;
}

.minWFull {
  min-width: 100%;
}

.minH100 {
  min-height: 100px;
}

.minH200 {
  min-height: 200px;
}

.minH300 {
  min-height: 300px;
}

.minH400 {
  min-height: 400px;
}

.minH500 {
  min-height: 500px;
}

.maxW100 {
  max-width: 100px;
}

.maxW200 {
  max-width: 200px;
}

.maxW300 {
  max-width: 300px;
}

.maxW400 {
  max-width: 400px;
}

.maxW500 {
  max-width: 500px;
}

.maxW600 {
  max-width: 600px;
}

.maxW700 {
  max-width: 700px;
}

.maxH100 {
  max-height: 100px;
}

.maxH200 {
  max-height: 200px;
}

.maxH300 {
  max-height: 300px;
}

.maxH400 {
  max-height: 400px;
}

.maxH500 {
  max-height: 500px;
}

.container {
  padding: 20px;
  background-color: #FFF;
}

.container-flex_rows {
  display: flex;
  flex-flow: row wrap;
}

.container-flex_columns {
  display: flex;
  flex-flow: column wrap;
}

.flexRow {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.flexColumn {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

.nowrap {
  flex-wrap: nowrap;
}

.fg2 {
  flex-grow: 2;
}

.fg3 {
  flex-grow: 3;
}

.flexAlignCenter {
  align-items: center;
}

.flexJustifyCenter {
  justify-content: center;
}

/* Element Styles
----------------------------------------------------------------------------------------------------*/
#container-webpage {
  display: flex;
  flex-flow: column wrap;
  min-height: 100%;
}

#site_title {
  font-weight: bold;
}

#container-header {
  width: 100%;
  padding: 5px 20px;
  border-bottom: 3px solid #606060;
  background-color: #FFF;
  z-index: 9999;
}

#container-header a {
  text-decoration: none;
  margin-right: 20px;
}

#container-body {
  display: grid;
}

.container-outter {
  display: flex;
  flex-flow: column;
  align-items: center;
  min-height: 100%;
  padding-top: 20px;
}

.container-inner {
  padding: 20px;
  width: 900px;
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 20;
  font-size: 28px;
  vertical-align: middle;
}

/* Menu */
#container-menu {
  display: flex;
  font-size: large;  
}

#menuContainer {
  position: absolute;
  width: 0px;
  height: 100vh;
  right: 0px;
  overflow: hidden;
  z-index: 999;
}

#mobileMenuContainer {
  position: absolute;
  width: 100vw;
  height: 0px;
  left: 0px;
  overflow: hidden;
  z-index: 999;
}

#menuToggle {
  cursor: pointer;
}

#menuToggle.active,
#mobileMenuToggle.active {
  color: #F00;
}

.menu {
  min-width: 250px;
  max-width: 250px;
  height: 100%;
  color: #FFF;
  background: #666;
  padding-bottom: 20px;
}

.search_input {
  float: left;
  margin: 15px 5px 0px 10px;
  width: 125px;
  height: 22px;
  border: none;
}

.search_button {
  float: left;
  margin-top: 15px;
  padding-top: 4px;
  padding-bottom: 4px;
  font-weight: bold;
}

.menu ul {
  float: left;
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.menu li a {
  display: block;
  padding: 4px 16px;
  text-decoration: none;
}

.menu li a:hover {
  background-color: #B00;
}

.nav_menu_header  {
  float: left;
  font-weight: bold;
  font-size: larger;
  margin-top: 20px;
  margin-left: 10px;
}

/* Error Message / Message Containers */
.error_message_container {
  background-color: #ffd4d4;
  border: solid 2px #D00;
  padding: 10px;
  margin: 10px 0px;
}
.error_title {
  color: #D00;
  font-weight: bold;
}

.message_container {
  background-color: #fff6d4;
  border: solid 2px #b7ab8d;
  padding: 10px;
  margin: 10px 0px;
}

/* Tablesorter Styles */
/**********************/

table.tablesorter {
  background-color: #CDCDCD;
  margin:10px 0px 5px;
  width: 100%;
  text-align: left;
  font-size: small;
}
table.tablesorter thead tr th {
  background-color: #e6EEEE;
  border: 1px solid #FFF;
  color: #000;
  padding: 4px 10px 4px 4px;
  font-weight: 500;
}
table.tablesorter tfoot tr td {
  padding: 4px 10px 4px 4px;
  font-weight: 500;
}
table.tablesorter thead tr .tablesorter-header {
  background-repeat: no-repeat;
  background-position: center right;
  cursor: pointer;
  padding-right: 18px;
}
table.tablesorter tbody tr {
  background-color: #FFF;
}
table.tablesorter tbody tr.even {
  background-color:#F0F0F6;
}
table.tablesorter tbody tr:hover {
  background-color:#FFC;
}
table.tablesorter tbody td {
  padding: 4px;
  vertical-align: top;
}
table.tablesorter thead tr .tablesorter-headerUnSorted {
  background-image: url('/images/asc_desc.gif');
}
table.tablesorter thead tr .tablesorter-headerAsc {
  background-image: url('/images/asc.gif');
}
table.tablesorter thead tr .tablesorter-headerDesc {
  background-image: url('/images/desc.gif');
}
table.tablesorter thead tr .tablesorter-headerAsc,
table.tablesorter thead tr .tablesorter-headerDesc {
  background-color: #8dbdd8;
}
table.tablesorter thead tr .sorter-false {
  background-image: none;
  cursor: auto;
}

/* Universal Classes to show/hide responsive content
----------------------------------------------------------------------------------------------------*/

/* Mobile Screen ----------- */
@media screen and (max-width: 479px) {
  .mobile_content {
    display: block;
  }
  .nonmobile_content {
    display: none;
  }
}

/* Desktops and laptops ----------- */
@media screen and (min-width: 480px) {
  .mobile_content {
    display: none;
  }

  .nonmobile_content {
    display: block;
  }
}


/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */
.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
  flex-basis: 100%;
}

/* http://perishablepress.com/press/2009/12/06/new-clearfix-hack */
.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
  flex-basis: 100%;
}