/******************************************************************************
START Glitch hello-app default styles

The styles in this section do some minimal CSS resets, set default fonts and 
colors, and handle the layout for our footer and "Remix on Glitch" button. If
you're new to CSS they may seem a little complicated, but you can scroll down
to this section's matching END comment to see page-specific styles.
******************************************************************************/


/* 
  The style rules specify elements by type and by attributes such as class and ID
  Each section indicates an element or elements, then lists the style properties to apply
  See if you can cross-reference the rules in this file with the elements in index.html
*/

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Roboto, sans-serif;
}

html,
body {
  background-color: rgb(235, 235, 240);
}

table {
  border: 2px solid #000000;
  border-spacing: 0;
  border-collapse: collapse;
  transition: all 0.5s;
}

ul {
  list-style-type: none;
}

td {
  border: 1px solid #000000;
  text-align: center;
  vertical-align: middle;
}

td input {
  color: #000000;
  padding: 0;
  border: 0;
  text-align: center;
  width: 48px;
  height: 48px;
  font-size: 24px;
  background-color: #ffffff;
  outline: none;
  text-transform: uppercase;
  transition: all 0.5s;
}

input:disabled {
  background-color: #bbdefb;
}

tr:nth-child(2n) {
  border-bottom: 4px solid #000000;
}

tr:nth-child(2n + 1) {
  border-top: 4px solid #000000;
}

td:nth-child(2n) {
  border-right: 4px solid #000000;
}

td:nth-child(2n + 1) {
  border-left: 4px solid #000000;
}

.right-cell {
  box-shadow: inset 0px 0px 20px 3px forestgreen;
}

.wrong-cell {
  box-shadow: inset 0px 0px 20px 3px tomato;
}

.warning-cell {
  box-shadow: inset 0px 0px 20px 3px goldenrod;
}

/*Material Design*/

.app-bar {
  background: #49599a;
  width: 100%;
  position: fixed;
  height: 64px;
  color: #fff;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.14);
  z-index: 5;
  top: 0;
}

.bar-button {
  position: relative;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  vertical-align: middle;
  padding: 0 22px;
  transition: all 0.5s;
}

.bar-button span {
  line-height: 64px;
  display: inline-block;
  vertical-align: middle;
}

.hamburger-button {
  float: left;
  left: 4px;
}

.bar-font {
  font-size: 18px;
  line-height: 64px;
}

.title {
  position: relative;
  float: left;
  left: 18px;
  font-size: 1.7rem;
}

.more-button {
  float: right;
  /*right: 18px;*/
}

.hamburger-menu {
  background: rgba(0, 0, 0, 0.4);
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 25;
  width: 100vw;
  height: 100vh;
  display: none;
  opacity: 0;
  transition: 0.1s all;
}

.nav-menu {
  border-right: 1px solid rgba(0, 0, 0, 0.4);
  background: #fff;
  color: #212121;
  position: fixed;
  left: -256px;
  top: 0;
  bottom: 0;
  width: 256px;
  z-index: 26;
  font-size: 15px;
  box-shadow: 16px 0 24px 2px rgba(0, 0, 0, 0.14);
  transition: all 0.3s;
}

.nav-menu-blank {
  position: relative;
  left: 256px;
  width: 100%;
  height: 100%;
}

.nav-head {
  height: 172px;
  background: #5e92f3;
  position: relative;
}

.nav-head-img {
  position: relative;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  width: 96px;
  height: 96px;
  top: 16px;
  left: 16px;
  overflow: hidden;
}

.nav-head-img img {
  width: 100%;
  height: 100%;
}

.nav-head-title {
  color: #fff;
  position: absolute;
  bottom: 10px;
  margin-left: auto;
  margin-right: auto;
  left: 0px;
  right: 0;
  font-size: 22px;
  display: block;
  text-align: center;
}

.nav-items {
  margin-top: 12px;
}

.nav-item {
  font-weight: 700;
  display: block;
  color: #333;
  background: #0000;
  padding: 15px 0 15px 22px;
  letter-spacing: 1.1px;
  outline: none;
  border: none;
  width: 100%;
  text-align: left;
  margin: 0 !important;
}

.bar-footer {
  position: fixed;
  bottom: 12px;
  left: 10px;
}

.bar-footer-link {
  font-size: 12px;
  display: inline-block;
  margin: 0 8px;
  text-decoration: none;
  color: gray;
}

.body {
  width: 95%;
  max-width: 800px;
  margin: 96px auto 16px auto;
  display: flex;
}

.card {
  background: #fff;
  width: fit-content;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.14);
  float: left;
  padding: 32px 32px 16px 32px;
}

.status {
  margin-left: 32px;
  padding-top: 10px;
  padding-left: 10px;
}


@media (max-width: 530px) {
    .card {
        flex-direction: row;
        align-items: flex-start;
    }
}


#game-number {
  font-size: 12px;
  color: gray;
}

.game-status {
  /*display: flex;
    flex-direction: column;
    justify-content: center;
    flex-flow: column;*/
  margin: 0 0 0 22px;
  height: 100%;
}

.game-status li {
  margin: 18px 0 0 0;
}

.vertical-adjust {
  margin: 12px 0;
}

.vertical-adjust span,
.footer a {
  line-height: 24px;
  display: inline-block;
  vertical-align: middle;
}

.option-button {
  display: block;
  margin: 16px 8px 16px 30px;
  width: 130px;
  padding: 8px 10px;
  font-size: 16px;
  border: none;
  outline: none;
  box-shadow: 0 6px 10px 1px rgba(0, 0, 0, 0.14);
  border-radius: 2px;
  transition: all 0.5s;
  text-align: left;
}

.button {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.option-button:hover {
  background: #1565c0;
}

.option-button:active {
  background: #3d7df4;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.24);
}

.option-button span {
  vertical-align: middle;
  line-height: 24px;
}

.ripple {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  animation: ripple-effect 1.1s 1 cubic-bezier(0.42, 0, 0.58, 1);
  opacity: 0;
}

@keyframes ripple-effect {
  0% {
    transform: scale(1);
    opacity: 0.4;
  }
  100% {
    transform: scale(100);
    opacity: 0;
  }
}

.timer {
  color: #1565c0;
  font-size: 20px;
  padding: 4px;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.14);
  text-align: center;
}

.remain-table {
  position: relative;
  left: 0;
  right: 0;
  display: inline-block;
  margin: auto;
}

.remain-column {
  float: left;
  max-width: 64px;
}

.remain-cell {
  margin: 10px;
  text-align: center;
  border: solid 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.14);
}

.remain-cell div {
  padding: 5px 10px;
}

.remain-cell-header {
  background-color: #1565c0;
  color: white;
  font-weight: bold;
  border-bottom: solid 2px rgba(0, 0, 0, 0.2);
}

.red {
  background: #ff6659;
  color: #9a0007;
}

.gray {
  background: #808080;
  color: #404040;
}

.floating {
  position: fixed;
  bottom: 64px;
  right: 64px;
  z-index: 20;
}

.floating-btn {
  position: fixed;
  top: 60%;
  right: 30%;
  border-radius: 50%;
  padding: 12px;
  border: none;
  background-color: #1565c0;
  color: #fff;
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14);
  outline: none;
  z-index: 21;
}

.dialog {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 50;
  display: none;
  transition: all 0.2s;
}

.dialog-content {
  top: -200px;
  background: #fff;
  width: 90%;
  max-width: 540px;
  height: fit-content;
  margin: auto;
  vertical-align: middle;
  box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14);
  z-index: 51;
  transition: all 0.5s;
}

.dialog-header {
  font-size: 24px;
  font-weight: bold;
  padding: 16px 32px;
  border-bottom: solid 1px #808080;
}

.dialog-body p {
  margin: 16px 0 4px 28px;
  color: gray;
}

.radio-option {
  padding: 0 36px;
  list-style-type: none;
  position: relative;
}

.radio-option input {
  outline: none;
  margin-right: 12px;
}

.radio-option label {
  display: block;
  height: 24px;
  cursor: pointer;
  padding: 1.25em 0;
}

.dialog-footer {
  border-top: solid 1px #808080;
  margin-top: 24px;
  text-align: right;
  padding-right: 16px;
}

.dialog-btn {
  background: transparent;
  border: none;
  color: #003c8f;
  font-size: 16px;
  margin: 8px 0;
  padding: 8px 16px;
  outline: none;
  min-width: 96px;
  display: inline-block;
}

.footer {
  text-align: center;
  color: white;
  background-color: #49599a;
  margin: 44px 0 0 0;
  padding: 8px;
}

.footer a {
  color: white;
}

.about-dialog-content {
  max-width: 720px;
}

.card-group {
  overflow: hidden;
  width: fit-content;
  margin: 0 auto;
  padding: 16px 0;
  display: flex;
}

.dialog-card {
  padding: 16px;
  margin: 8px;
  max-width: 160px;
}

.about-card-quote {
  color: #606060;
  font-size: 14px;
  margin-top: 16px;
}

.about-card-img {
  margin: 16px auto;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.14);
  width: fit-content;
}

.about-card-img img {
  width: 96px;
  height: auto;
}

.about-card-title {
  font-size: 16px;
  margin: 8px 0;
}

.about-card-content {
  font-size: 15px;
  margin: 4px 0;
}

.more-option-div {
  position: static;
  display: inline-block;
  margin-right: 0px;
}

.more-option-list {
  display: block;
  position: absolute;
  background-color: #fff;
  overflow: hidden;
  box-shadow: 0px 8px 10px 1px rgba(0, 0, 0, 0.14);
  right: 18px;
  z-index: 25;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.6, 1);
}