html, body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  font-size: 24px;
  padding-bottom: .5rem;
  -ms-overflow-style: none; /* for Internet Explorer, Edge */
  scrollbar-width: none; /* for Firefox */
  overflow-y: scroll; 
}
body::-webkit-scrollbar {
  display: none;
}

#masthead {
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
}

#app {
  margin: auto;
  width: 90vw;
}

#menuBar {
  margin: 1rem 0 1rem 0;
  clear: both;
}

#menuLock {
  float: right;
}

#titleBar {
  clear: both;
}

#titleBar, #subTitleBar {
  text-align: center;
}

#subTitleBar {
  padding-top: .5rem;
  font-size: 1.25rem;
}

#navigationBar, #debugCommands {
  clear: both;
  padding: 1rem 0 1rem 0;
}

#debugCommands {
  text-align: center;
  /*display: none;*/
}

#navBack { float: left }

#submitData {clear: both; text-align: center; padding-top: 1rem;}

button, .card {
  font-size: 1rem;
}

#cards {
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
}

.card {
  border: 1px solid #000;
  border-radius: 4px;
  padding: .5rem;
  cursor: pointer;
  display: flex;
  place-content: center;
  flex-wrap: wrap;
  box-shadow: 5px 5px 10px 3px rgb(55 125 255 / 33%);
  width: 7rem;
  height: 4rem;
  margin: 1.25rem 2rem;
  background-color: #377dff;
}

.disabled {
  cursor: not-allowed;
  color: grey !important;
  border-color: grey !important;
}

.circle {
  border-radius: 50% !important;
  width: 4rem;
  height: 4rem;
}

td .card {
  width: 10rem;
  height: 5rem;
  margin: 1rem;
  float: left;
}

.card img {
  min-width: 48px;
  max-width: 110px;
  max-height: 110px;
}

.notes {
  width: 100%;
  height: 7.5rem;
}

.button {
  cursor: pointer
}

a, a:hover, a:active, a:visited {
  text-decoration: none;
  color: #000;
}

@media (max-width: 768px) {
  html, body {
    font-size: 24px;
  }

  #app {
    width: 90vw;
  }

  td .card {
    width: 100%;
  }
}

button {
  display: inline-block;
  box-sizing: border-box;
  height: 1.75rem;
  font-size: .75rem;
  background: #377dff;
  padding: 0 .5rem;
  border-radius: 999em;
  text-decoration: none;
  color: #fff;
  vertical-align: bottom;
  white-space: nowrap;
  border: 3px solid #377dff;
  transition: .15s background-color,.15s border-color,.15s color,.15s fill;
  font-weight: 300;
  cursor: pointer;
}

button:hover{
  background: #7A9BFF;
  border: 3px solid #7493F2;
}

.buttonDisabled, .buttonDisabled:hover, .buttonDisabled:active {
  cursor: not-allowed;
  background-color: lightgray;
  border-color: lightgray;
}

html, body {
  background-color: #000;
  color: #fff;
}

input { 
  color: #fff;
  background-color: #000;
 }

.buttonDisabled {
  color: #000;
}

.attention {
  border: 2px solid #ffc107!important;
}

a, a:hover, a:active, a:visited {
  color: #fff;
}

#restResponse {
  clear: both;
  text-align: center;
  padding-top: 1rem;
  font-size: .8rem;
}

.hidden {display: none!important;}