@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');
* {
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Quicksand', helvetica, roboto, sans-serif;
  font-size: 2vmax;
  padding: 0px;
  margin: 0px;
  background-color: #f6ee31;
  color: #163256;
}
p {
  text-align: justify;
}
input {
  font-size: 7pt;
  background-color: #7e7d75;
  border: 1px solid #163256;
}
input[type=submit] {
  border: 2px solid #163256;
  border-radius: 0.5vmax;
  font-weight: bold;
}
input[type=submit]:hover {
  background-color: #163256;
  color: #f6ee31;
  cursor: pointer;
}
input[type=submit]:focus {
  background-color: #163256;
  color: #f6ee31;
}
input[type=button] {
  border: 2px solid #163256;
  border-radius: 0.5vmax;
  font-weight: bold;
}
input[type=button]:hover {
  background-color: #163256;
  color: #f6ee31;
  cursor: pointer;
}
input[type=button]:focus {
  background-color: #163256;
  color: #f6ee31;
}
button {
  border-radius: 0.5vmax;
  background-color: #7e7d75;
  border: 2px solid #163256;
  font-weight: bold;
}
button:hover {
  background-color: #163256;
  color: #f6ee31;
  cursor: pointer;
}
textarea {
  font-size: 7pt;
  background-color: #7e7d75;
  border: 1px solid #163256;
}
select {
  font-size: 7pt;
  background-color: #7e7d75;
  border: 1px solid #163256;
}
::placeholder {
  color: rgba(22,50,86,0.8);
}
a {
  text-decoration: none;
  color: #163256;
}
a:hover {
  text-decoration: underline;
}
a:visited {
  color: #163256;
}
div.integer {
  text-align: right;
  width: 100%;
}
input.integer {
  text-align: right;
  width: 6em;
}
div.timestamp {
  text-align: right;
  width: 100%;
}
.lookupItemHighlight {
  background-color: #163256;
  color: #f6ee31;
}
.hidden {
  display: none;
  visibility: hidden;
}
.visible {
  display: block;
  visibility: visible;
}
.md-button.menuBtn {
  width: 7vmin;
  min-width: 7vmin;
  height: 7vmin;
  min-height: 7vmin;
  line-height: 7vmin;
  padding: 0;
}
.menuIcon {
  font-size: 4vmin;
  width: 4vmin;
  height: 4vmin;
  min-width: 4vmin;
  min-height: 4vmin;
}
.readonly {
  background-color: rgba(126,125,117,0.5);
}
.readonly input {
  border: none;
}
.clickable {
  cursor: pointer;
}
.caption {
  font-size: 1.2vmax;
  background-color: #163256;
  color: #f6ee31;
  padding: 2px;
}
.tblTtl {
  position: sticky;
  top: -1px;
}
.tblHdr {
  background-color: #f6ee31;
  cursor: pointer;
  position: sticky;
  top: calc(1.2vmax + 6px);
}
.tblHdr:hover {
  background-color: #163256;
  color: #f6ee31;
}
.tblFtr {
  position: sticky;
  bottom: 0;
  text-align: center;
}
.stdtable {
  margin: 2px auto;
  border: 1px solid #163256;
  border-collapse: collapse;
}
table.stdtable tr th {
  border: 1px solid #163256;
  padding: 2px 4px;
}
table.stdtable tr td {
  border: 1px solid #163256;
  padding: 2px 4px;
}
table.stdtable tr:hover td {
  background-color: #f6ee31;
  color: #163256;
  cursor: pointer;
}
.dtltable {
  margin: 2px auto;
  border: none;
  border-collapse: collapse;
}
table.dtltable tr th {
  border: none;
  padding: 2px 4px;
  text-align: right;
}
table.dtltable tr td {
  border: none;
  padding: 2px 4px;
  text-align: left;
}
table.dtltable tr td.tblFtr {
  text-align: center;
}
.dtlBlocker {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  opacity: 0.75;
  background-color: #163256;
  backdrop-filter: blur(10px);
}
.dtlFrame {
  position: fixed;
  top: 4vmax;
  bottom: 4vmax;
  left: 4vmax;
  right: 4vmax;
  z-index: 101;
  opacity: 1;
  background-color: #f6ee31;
  border: 2px solid #163256;
  border-radius: 2vmax;
  justify-content: center;
  align-items: center;
  overflow: auto;
}
.dtlInner {
  min-width: 10vmax;
  min-height: 10vmax;
  font-size: 1.5vmax;
}
.dtlInner input {
  font-size: 1.5vmax;
  padding: 0.4vmax;
}
.dtlInner input[type=checkbox] {
  height: 1.5vmax;
  width: 1.5vmax;
  padding: 0.4vmax;
}
.dtlInner select {
  font-size: 1.5vmax;
  padding: 0.4vmax;
}
.dtlInner button {
  font-size: 1.5vmax;
  padding: 0.4vmax;
}
.dtlInner submit {
  font-size: 1.5vmax;
  padding: 0.4vmax;
}
.dtlInner textarea {
  font-size: 1.2vmax;
  min-width: 30vw;
  min-height: 6vmax;
  padding: 0.4vmax;
}
.dtlSaving {
  display: flex;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  justify-content: center;
  align-items: center;
}
.dtlDelete {
  position: absolute;
  top: 1vmax;
  right: 1vmax;
}
.tableFilter {
  position: fixed;
  bottom: 2vmax;
  right: 2vmax;
  border-radius: 1vmax;
  background-color: #f6ee31;
  color: #163256;
  padding: 0.75vmax;
}
.tableFilter span {
  margin-right: 0.5vmax;
  padding: 0.5vmax;
}
.tableFilter span:hover {
  background-color: #163256;
  color: #f6ee31;
}
#header {
  display: flex;
  position: fixed;
  z-index: 10;
  top: 2px;
  left: 2px;
  right: 2px;
  flex-direction: row;
  align-items: flex-start;
  overflow: hidden;
  border-bottom: 2px solid #f6ee31;
}
#header div#tabs {
  position: absolute;
  bottom: -1.1vmax;
  left: 2vmax;
  right: 2vmax;
  overflow: hidden;
}
#header:hover div#tabs {
  bottom: -0.2vmax;
}
#logo {
  padding-left: 1vmin;
}
.moduleTab {
  font-size: 0.8vmax;
  border-radius: 0.4vmax;
  border: 1px solid #f6ee31;
  background-color: #f6ee31;
  color: #163256;
  cursor: pointer;
  padding: 0.2vmax 0.2vmax 0.6vmax;
  margin-right: 0.5vmax;
}
.moduleTab:hover {
  background-color: #163256;
  color: #f6ee31;
}
#titlebar {
  flex-grow: 4;
  font-size: 3vmax;
  text-align: center;
  text-shadow: white 0 0 5px;
}
#main {
  position: fixed;
  z-index: 10;
  width: calc(100% - 4px);
  top: 10vh;
  left: 2px;
  bottom: 0.2vmax;
}
#error {
  display: flex;
  position: fixed;
  bottom: 2px;
  left: 2px;
  width: calc(100% - 4px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: red;
  color: white;
  text-align: center;
  cursor: pointer;
}
#error i {
  display: none;
  visibility: hidden;
  position: fixed;
  right: 2px;
}
#error:hover i {
  display: block;
  visibility: visible;
}
.activeModuleContainer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;
  scrollbar-color: rgba(246,238,49,0.6) rgba(246,238,49,0.2);
  scrollbar-width: thin;
}
.activeModuleContainer::-webkit-scrollbar {
  width: 0.5vmax;
  height: 0.5vmax;
}
.activeModuleContainer::-webkit-scrollbar-corner {
  background-color: rgba(0,0,0,0);
  color: rgba(0,0,0,0);
}
.activeModuleContainer::-webkit-scrollbar-track {
  background-color: rgba(246,238,49,0.2);
  border-radius: 0.25vmax;
}
.activeModuleContainer::-webkit-scrollbar-thumb {
  background-color: rgba(246,238,49,0.6);
  border-radius: 0.25vmax;
}
.inactiveModuleContainer {
  display: none;
  visibility: hidden;
}
.centerContainer {
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  justify-content: center;
  align-items: center;
}
.rightFloat {
  position: absolute;
  right: 0;
  top: 0;
}
ul.plainUL {
  list-style-type: none;
}
ul.dotUL {
  list-style: disc outside none;
  margin-left: 20px;
}
.clickableCaption {
  cursor: pointer;
}
.clickableCaption:focus {
  outline: none;
}
.clickableCaption:hover {
  background-color: #f6ee31;
  color: #163256;
}
.ttWrapper {
  position: relative;
  left: 0;
}
.ttWrapper:hover .ttHiddenBox {
  visibility: visible;
  display: block;
}
.ttBox {
  position: absolute;
  min-width: 20vmax;
  border-radius: 0.5vmax;
  border: 1px solid #163256;
  background-color: #163256;
  color: #f6ee31;
  padding: 0.5vmax;
  z-index: 101;
  text-align: center;
}
.ttHiddenBox {
  visibility: hidden;
  display: none;
}
.ttTop {
  top: 0.5vmax;
}
.ttLeft {
  left: 0.5vmax;
}
.ttBottom {
  bottom: 0.5vmax;
}
.ttRight {
  right: 0.5vmax;
}
table.borderlesstbl {
  border-collapse: collapse;
  border: none;
}
table.borderlesstbl tr th {
  border: none;
}
table.borderlesstbl tr td {
  border: none;
}
table.celltop tr th {
  vertical-align: top;
}
table.celltop tr td {
  vertical-align: top;
}
.red {
  color: #ff0000;
}
.yellow {
  color: #ffff00;
}
.green  {
  color: #00ff00;
}
.passwdBlock {
  border: 1px solid #163256;
  border-radius: 0.5vmax;
  padding: 0.5vmax;
  background-color: #ffffff;
}
.passwdRandom {
  position: fixed;
  top: calc(50vh - 4vmax);
  left: calc(50vw - 10vmax);
  height: 8vmax;
  width: 20vmax;
  background-color: #163256;
  color: #f6ee31;
  text-align: center;
  padding: 1vmax;
  border-radius: 0.8vmax;
}
.passwdSelect {
  margin: 1vmax;
}
.passwdSelect span {
  padding: 0.5vmax;
  border: 1px solid #f6ee31;
  border-radius: 0.5vmax;
}
.passwdCountdown {
  font-size: 60%;
}
.passwdClose {
  position: absolute;
  top: 0.5vmax;
  right: 0.5vmax;
  cursor: pointer;
  background-color: #163256;
  color: #f6ee31;
  border-radius: 0.25vmax;
}
.passwdClose:hover {
  background-color: #f6ee31;
  color: #163256;
}
.ftMenuAnchor {
  position: relative;
  top: -0.3vmax;
  z-index: 1;
}
.ftMenu {
  position: absolute;
}
.md-button.md-icon-button.ftMenuBtn {
  margin: 0.2vmax;
  padding: 0.2vmax;
  width: 2.1vmax;
  height: 2.1vmax;
  min-width: 2.1vmax;
  min-height: 2.1vmax;
}
.ftMenuIcon {
  font-size: 1.5vmax;
  width: 1.5vmax;
  height: 1.5vmax;
  min-width: 1.5vmax;
  min-height: 1.5vmax;
  margin: 0;
}
svg.loadSpnr {
  animation: 2s linear infinite loadSpnrAnim;
  min-width: 2vmax;
  min-height: 2vmax;
}
circle.loadSpnrCirc {
  animation: 1.4s ease-in-out infinite both loadSpnrCircAnim;
  display: block;
  fill: transparent;
  stroke: #163256;
  stroke-linecap: round;
  stroke-dasharray: 283;
  stroke-dashoffset: 280;
  transform-origin: 50% 50%;
  stroke-width: 10px;
}
@keyframes loadSpnrAnim {
0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(360deg) }
}
@keyframes loadSpnrCircAnim {
0%, 25% { stroke-dashoffset: 280; transform: rotate(0); } 50%, 75% { stroke-dashoffset: 75; transform: rotate(45deg); } 100% { stroke-dashoffset: 280; transform: rotate(360deg); }
}