body,
h1,
h2 {
  margin: 0px;
  min-width: 700px;
  text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.7);
  user-select: none;
  /*
  max-width: 1280px;
    */
  overflow-x: hidden;
}

* {
  touch-action: manipulation;
}

body {
  font-family: Helvetica;
  color: white;
  background: #333333;
  min-height: 100vh;
}

h1 {
  padding: 2px;
  background: #43b89b;
  background: #aaaaaa;
}

a {
  color: #eeeeee;
}

a:hover {
  color: #696969;
}

button {
  cursor: pointer;
}

#usergames-list-box {
  display: none;
}

#header div {
  color: #ffffff34;
  text-decoration: none;
  text-shadow: 0px 2px 1px rgba(0, 0, 0, 0);
}

#header div:hover {
  color: #ffd188;
  text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.7);
}

#header {
  overflow-x: hidden;
  bottom: 10px;
  left: 0px;
  position: absolute;
  background: #11111100;
  width: 100%;
  text-align: center;
}

#header-info {
  padding: 5px 18px;
  float: left;
  font-size: 0.9em;
  color: #ffffffaa;
}

#header-info2 {
  padding: 5px 18px;
  float: right;
  font-size: 0.9em;
  color: #ffffffaa;
}

::-webkit-scrollbar {
  width: 0px;
  height: 30px;
}

::-webkit-scrollbar-track-piece {
  background-color: #222222;
}

::-webkit-scrollbar-thumb {
  background-color: #202020;
  outline: 1px solid #070707;
  outline-offset: -2px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #909090;
}

#mjdb-container {
}

#mjdb-inner {
  min-width: 705px;
  margin: 0;
}

#calc {
  display: none;
  justify-content: center;
  padding-top: 22px;
}

#main {
  width: 750px;
  margin: 0;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0);
  border: 0px;
}

#title {
  font-style: italic;
  padding: 2px 12px;
  width: 150px;
  font-size: 1.1em;
  float: left;
}
#title2 {
  width: 150px;
  font-size: 1.1em;
  display: inline-block;
  height: 40px;
  padding-left: 12px;
  position: absolute;
  top: -2px;
}

#title3 {
  width: 250px;
  font-size: 1.1em;
  display: inline-block;
  height: 40px;
  padding-left: 12px;
  position: absolute;
  top: 4px;
}

#title4 {
  width: 450px;
  font-size: 1.1em;
  display: inline-block;
  height: 40px;
  padding-left: 12px;
  position: absolute;
  top: 4px;
}

#binta-table {
  margin-left: 110px;
  margin-top: -1em;
}

#binta-table td {
  background: #aaaaaa33;
  padding: 4px 10px;
  text-align: center;
}

#mm-timer {
  font-size: 1.5em;
}

.mm-button {
  background: #1f1f1f69;
  border: 0px;
  font-size: 1.2em;
  color: white;
  padding: 10px 30px;
  cursor: pointer;
  border-radius: 9px;
  margin-right: 4px;
  margin-top: 13px;
  margin-left: 20px;
  font-family: monospace;
  border: 2px solid #ffffff00;
  display: inline-block;
}

.mm-button:hover {
  background: #4f4f4f69;
}

#games-list-box {
  display: none;
}

#kitadora-box {
  display: none;
}

#dora-value {
  padding: 8px 17px 0px 17px;
  font-size: 1.9em;
  text-align: center;
  display: inline-block;
  width: 45%;
}

.list-title {
  background: #000007cc;
  color: #ccccccbb;
  padding: 9px 15px;
  font-size: 1.5em;
  font-variant: small-caps;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3), 0px -2px 2px rgba(0, 0, 0, 0.3);
}

.list-footer {
  background: #00000743;
  font-size: 0.8em;
  color: #888888;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3), 0px -2px 2px rgba(0, 0, 0, 0.3);
  margin: 0px;
  padding: 0px;
  cursor: pointer;
  width: 100%;
  height: 38px;
}

.list-buttons {
  display: inline-block;
  width: 48.5%;
  height: 26px;
}

.prev-button {
  float: left;
  text-align: left;
  padding-top: 10px;
  padding-left: 10px;
}

.next-button {
  float: right;
  text-align: right;
  padding-top: 10px;
  padding-right: 10px;
}

.list-buttons:hover {
  background: #ffffff10;
  color: #ffffffbb;
}

#nav-bar {
  margin: 0px;
  padding: 2px;
  background: #43b89b;
  background: #aaaaaa;
  font-size: 2.5em;
  font-weight: bold;
  background: #00654f;
  height: 56px;
  display: none;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1), 0px -2px 2px rgba(0, 0, 0, 0.3);
}

#burg-button {
  font-size: 0.5em;
  text-align: center;
  float: right;
  color: white;
  padding: 0px 4px;
  margin: 0px 12px 0px 1px;
  height: 36px;
  width: 31px;
  line-height: 2.3em;
  border-radius: 6px;
}

.nav-button {
  background: #31313135;
  font-size: 0.5em;
  text-align: center;
  float: right;
  color: white;
  padding: 0px 12px 0px 12px;
  margin: 0px 3px 0px 3px;
  height: 54px;
  width: 73px;
  line-height: 2.8em;
  border-radius: 12px;
  display: none;
  font-variant: small-caps;
  cursor: pointer;
}

.nav-button:hover {
  background: #00000057;
}

.nav-button:active {
  background: #00000057;
}

#login-box {
  display: none;
  min-height: 400px;
  padding-bottom: 50px;
  position: relative;
}

#login-title {
  font-size: 6.5em;
  padding-bottom: 20px;
  font-family: "Xanh Mono";
  text-align: center;

  font-weight: bold;
  text-shadow: -3px 5px 1px rgba(0, 0, 0, 1);
}

#login-title2 {
  font-size: 4em;
  padding-bottom: 20px;
  font-family: "Xanh Mono";
  text-align: center;
  text-shadow: -2px 4px 1px rgba(0, 0, 0, 1);
}

#admin-box {
  display: none;
}

#admin-content {
  display: none;
}

.login-input {
  padding: 10px;
  font-size: 3.3em;
  background: #292929;
  color: #d9d9d9;
  border-color: #2121212a;
  outline: none;
  min-width: 120px;
  border-radius: 27px;
  width: 98%;
  text-align: center;
  display: inline;
  height: 100px;
  margin-bottom: 30px;
  font-family: "Xanh Mono";
}

.loginbutton {
  cursor: pointer;
  height: 130px;
  font-size: 5em;
  background: #292929;
  color: #d9d9d9;
  border-color: #18181892;
  outline: none;
  min-width: 120px;
  border-radius: 27px;
  text-align: center;
  width: 99%;
  margin-left: 3px;
  padding-bottom: 11px;
  font-variant: small-caps;
  font-family: "Xanh Mono";
  font-weight: bold;
}

.dorabutton {
  cursor: pointer;
  margin-left: 6px;
  height: 58px;
  font-size: 2em;
  width: 150px;
  background-color: #888888b7;
  color: #d9d9d9;
  border-color: #24242455;
  outline: none;
  min-width: 20px;
  border-radius: 6px;
  text-align: center;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  float: right;
}

.dorabutton:hover {
  background-color: #88888877;
  font-weight: 600;
}

.dorabutton:active {
  box-shadow: #2f2f2f50 0 3px 2px inset;
  transform: translateY(2px);
}

.updownbuttons {
  cursor: pointer;
  margin-left: 6px;
  height: 50px;
  font-size: 2em;
  width: 70px;
  background-color: #888888b7;
  color: #d9d9d9;
  border-color: #24242455;
  outline: none;
  min-width: 20px;
  border-radius: 6px;
  text-align: center;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

.updownbuttons:hover {
  background-color: #88888877;
  font-weight: 600;
}

.updownbuttons:active {
  box-shadow: #2f2f2f50 0 3px 2px inset;
  transform: translateY(2px);
}

.addbuttons1 {
  cursor: pointer;
  margin-left: 6px;
  font-size: 2em;
  padding: 10px 30px 10px 34px;
  background: #292929;
  color: #d9d9d9;
  border-color: #000000;
  outline: none;
  min-width: 20px;
  border-radius: 6px;
  text-align: center;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

.addbuttons {
  align-items: center;
  appearance: none;
  font-size: 1.2em;
  border-radius: 14px;
  border-width: 1px;
  box-shadow: #252525 0 -2px 2px inset;
  box-sizing: border-box;
  border-color: #d1d1d131;
  background: #adadad31;
  color: #d9d9d9;
  cursor: pointer;
  display: inline-flex;
  font-weight: 600;
  height: 75px;
  justify-content: center;
  line-height: 1;
  list-style: none;
  overflow: hidden;
  padding-left: 8px;
  padding-right: 8px;
  padding-bottom: 2px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: box-shadow 0.15s, transform 0.15s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  will-change: box-shadow, transform;
  float: right;
  width: 100px;
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
}

.addbuttons:hover {
  background: #8b8b8b33;
  box-shadow: #2d2d2d 0 -2px 2px inset;
  font-weight: 600;
}

.addbuttons:active {
  background: #4d4d4d4d;
  box-shadow: #2f2f2fd2 0 3px 2px inset;
  transform: translateY(2px);
}

.hidden {
  display: none;
}

#ok-btn {
  background: #000000;
  font-size: 1em;
  padding: 4px 12px;
  color: white;
  margin-left: 20px;
  cursor: pointer;
}

#tenhou-text {
  margin-left: 6px;
  margin-top: 12px;
  width: 95%;
  height: 280px;
  font-size: 0.8em;
  background: rgba(0, 0, 0, 0.3);
  color: #d9d9d9;
  border-color: #000000;
  outline: none;
  min-width: 20px;
  padding: 5px;
  border-radius: 9px;
  display: inline-block;
  margin-bottom: 15px;
  vertical-align: top;
  border: 0;
}

.tenhou-button {
  align-items: center;
  appearance: none;
  font-size: 1.2em;
  border-radius: 14px;
  border-width: 1px;
  box-shadow: #252525 0 -2px 2px inset;
  box-sizing: border-box;
  border-color: #d1d1d131;
  background: #adadad31;
  color: #d9d9d9;
  cursor: pointer;
  font-weight: 600;
  height: 50px;
  justify-content: center;
  line-height: 1;
  list-style: none;
  overflow: hidden;
  padding-left: 8px;
  padding-right: 8px;
  padding-bottom: 2px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: box-shadow 0.15s, transform 0.15s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  will-change: box-shadow, transform;
  width: 130px;
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
  margin-top: 60px;
}

.tenhou-button:hover {
  background: #8b8b8b33;
  box-shadow: #2d2d2d 0 -2px 2px inset;
  font-weight: 600;
}

.tenhou-button:active {
  background: #4d4d4d4d;
  box-shadow: #2f2f2fd2 0 3px 2px inset;
  transform: translateY(2px);
}

#add-tenhou-game {
  height: 310px;
  padding: 20px;
  background: rgb(27, 27, 27);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.15) 100%);
  box-shadow: 0px 0px 22px 6px rgba(0, 0, 0, 0.3), inset 0 0 4px rgba(0, 0, 0, 0.7);
}

.trans-link:hover {
  cursor: pointer;
}

.tenhou-button2 {
  background: #1f1f1f69;
  border: 0px;
  font-size: 1.8em;
  color: white;
  padding: 10px 22px;
  outline: none;
  cursor: pointer;
  border-radius: 9px;
  font-family: monospace;
  border: 2px solid #ffffff00;
  display: inline-block;
}

.tenhou-button2:hover {
  background: #000000a9;
  border: 2px solid #ffffff18;
}

.hand-button {
  background: #1f1f1f69;
  border: 0px;
  font-size: 1.5em;
  color: white;
  padding: 15px 38px;
  cursor: pointer;
  border-radius: 12px;
  margin-right: 4px;
  margin-top: 13px;
  margin-left: 20px;
  font-variant: small-caps;
  border: 2px solid #ffffff00;
  display: inline-block;
}

#reset-button {
  background: #00000026;
  font-size: 1em;
  color: #ffffff99;
  padding: 15px 22px;
  cursor: pointer;
  border-radius: 12px;
  margin-top: 12px;
  margin-left: 4px;
  border: 2px solid #ffffff00;
  display: inline-block;
  width: 122px;
  height: 60px;
}

#reset-button:hover {
  background: #ffffff49;
  border: 2px solid #ffffff18;
}

#reset-button:active {
  background: #ffffff0f;
  border: 2px solid #ffffff18;
}

#reset-button2 {
  background: #00000026;
  font-size: 1.4em;
  color: #ffffff99;
  padding: 12px 18px;
  cursor: pointer;
  border-radius: 12px;
  margin-top: 20px;
  margin-left: 8px;
  border: 2px solid #ffffff00;
  display: inline-block;
}

#reset-button2:hover {
  background: #ffffff49;
  border: 2px solid #ffffff18;
}

#reset-button2:active {
  background: #ffffff0f;
  border: 2px solid #ffffff18;
}

.hand-button:hover {
  background: #ffffff49;
  border: 2px solid #ffffff18;
}

.hand-button:active {
  background: #ffffff0f;
  border: 2px solid #ffffff18;
}

.form-draw-drop {
  width: 156px;
  height: 45px;
  margin-right: 8px;
  margin-top: 10px;
  margin-left: 5px;
  border: 0px;
  cursor: pointer;
  margin-left: 6px;
  border-color: #000000;
  outline: none;
  min-width: 20px;
  border-radius: 7px;
  text-align: center;
  margin-bottom: 4px;
  background: #00000044;
  font-size: 1.2em;
  color: #fcfcfc;
  cursor: pointer;
  border: 2px solid #ffffff00;
}

.form-draw-drop:hover,
.form-draw-drop:active {
  background: #00000099;
}

.close-button {
  background: #cccccc17;
  background-image: url("img/x.png");
  background-size: 100%;
  border-color: #cccccc09;
  font-size: 1.2em;
  color: white;
  width: 40px;
  height: 40px;
  cursor: pointer;
  border-radius: 9px;
  margin-right: 4px;
  margin-top: 3px;
}

.draw-titles {
  padding: 22px 10px 10px 12px;
  float: left;
  width: 90px;
  text-align: right;
  font-variant: small-caps;
  font-size: 1.1em;
}

.sidebyside {
  display: inline-block;
  background: rgba(46, 46, 46, 0.5);
  padding: 6px 15px;
  margin-bottom: 4px;
  margin-right: 8px;
  border-radius: 8px;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5);
  font-size: 1.3em;
  position: relative;
}

.handots {
  position: absolute;
  top: -16px;
  left: 0px;
  vertical-align: top;
  text-align: center;
  width: 100%;
}

#hand-result {
  width: 100%;
  min-width: 700px;
  min-height: 180px;
  display: none;
  padding-top: 2px;
  background: rgba(0, 0, 0, 0.85);
  display: none;
}

#hand-result-calcinfo {
  font-family: monospace;
  font-size: 0.65em;
  margin-top: -10px;
  padding-left: 6px;
}

#hand-result-round {
  text-align: center;
  font-size: 1.03em;
  margin-top: -8px;
  float: left;
  padding-left: 8px;
}

#hand-result-score {
  font-size: 3.7em;
  margin-top: -4px;
  letter-spacing: -0.02em;
}

#hand-result-table-box {
  float: right;
  line-height: 1em;
  font-size: 1.05em;
  font-family: monospace;
}

#hand-result-tiles {
  padding: 0px 8px 0px 8px;
  min-height: 88px;
  max-height: 260px;
  position: relative;
}

/*
#hand-result-yaku {
  font-size: 2.4em;
  letter-spacing: -1px;
  padding-left: 18px;
  
  padding-bottom: 18px;
}
*/

#hand-result-yaku {
  margin-bottom: 1px;
  padding-bottom: 8px;
  padding-left: 18px;
  padding-top: 7px;
}

.handots2 {
  position: absolute;
  top: -10px;
  left: 0px;
  vertical-align: top;
  text-align: center;
  width: 100%;
}

#yaku-bubbles {
  display: inline-block;
  width: 97%;
}

#hand-result-payments {
  font-size: 1.7em;
  padding-left: 20px;
  display: inline-block;
  padding-top: 22px;
  height: 110px;
  padding-bottom: 25px;
  min-width: 620px;
}

#hand-result-scorecalc {
  font-size: 1em;
  padding-left: 7px;
  font-variant: small-caps;
}

#hand-result-payments-score {
  display: inline-block;
}

#hand-result-payments-winner {
  display: inline-block;
  padding-left: 15px;
}

#hand-result-payments-loser {
  display: inline-block;
}

.games-table {
  text-align: left;
  padding: 6px 5px 6px 15px;
  background: #212121;
  border: 2px solid #00000055;
  font-size: 1.1em;
  cursor: pointer;
  color: #cacaca;
  /*display: none;*/
}

.games-table:hover {
  background: #292929;
  color: #ffffff;
}

.games-list-div {
  display: inline-block;
  min-width: 70px;
  font-size: 1.35em;
}

.games-list-cell {
  width: 58%;
}

#info-bar {
  width: 100%;
  text-align: left;
  padding: 10px;
  background: #000000;
  margin: 0;
  padding: 0;
  font-size: 1.3em;
  display: none;
  position: relative;
}

#info-bar-title {
  padding: 2px 0px;
  font-size: 0.7em;
  font-family: monospace;
  text-align: left;
  color: #ffffff51;
  position: relative;
  float: left;
  margin-top: 0px;
  padding-left: 14px;
}

#game-top-bar-honbavalue {
  font-family: monospace;
  font-size: 0.7em;
  padding-top: 10px;
  text-align: left;
  padding-left: 21px;
  color: #ffffff51;
  letter-spacing: 0.001em;
  float: right;
  margin-top: -7px;
  padding-right: 14px;
}

#game-top-bar2 {
  height: 28px;

  text-align: center;
  display: none;
  font-size: 1.5em;
  padding-bottom: 10px;
  background: #000000;
}
#game-top-bar {
  height: 21px;
  text-align: center;
  padding: 10px 10px;
  background: rgb(0, 0, 0, 0.4);
  margin: 0;
  padding: 0;
  font-size: 1.5em;
  display: none;
  box-shadow: 0px 5px 11px 3px rgba(20, 20, 20, 0.2);
}
#game-top-bar-round {
  text-align: left;
  padding-left: 14px;
  padding-top: 3px;
  width: 86px;
  display: flex;
  align-items: center;
  float: left;
}

#game-top-bar-riichi {
  width: 70px;
  height: 40px;
  font-size: 0.9em;
  display: inline-block;
  position: relative;
  top: 4px;
  left: 185px;
}

#riichi-image {
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.7);
  border-radius: 11px;
  margin-bottom: 8px;
  vertical-align: middle;
}

#honba-image {
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.7);
  border-radius: 11px;
  margin-bottom: 8px;
  vertical-align: middle;
}

#game-top-bar-honba {
  width: 70px;
  height: 40px;
  font-size: 0.9em;
  display: none;
  position: relative;
  top: 4px;
  left: 50px;
}

#stats-box {
  display: none;
  overflow: auto;
  width: 100%;
  min-width: 740px;
}

.stats-table {
  border-collapse: collapse;
  display: inline-block;
  border: 2px solid #1b1b1b;
  font-size: 1.4em;
}

.stats-table td {
  text-align: left;
  padding-left: 10px;
  height: 45px;
}

#stats-table1 {
  z-index: 2;
}

#stats-table2 {
  z-index: 4;
}

.feed {
  height: 48px;
  font-size: 1.1em;
}

.feed-table {
  height: 20px;
  width: 100%;
  text-align: center;
}

#feed-yaku {
  font-style: italic;
  font-size: 0.88em;
  line-height: 0.95em;
  padding: 0px 15px;
  font-weight: 2;
}
#feed-hanfu {
  width: 10%;
  min-width: 68px;
}
#feed-han {
  display: inline-block;
  text-align: right;
  margin-right: 8px;
}

#feed-fu {
  font-size: 0.8em;
  display: inline-block;
}
#feed-shuugi {
  font-weight: bold;
}
#feed-round {
  width: 10%;
  min-width: 80px;
}
#feed-score {
  width: 12%;
  min-width: 80px;
}
#feed-exchange {
  width: 20%;
  min-width: 220px;
}
.feed-loser {
  color: #ffcc00;
  display: inline-block;
  padding: 0px;
}
.feed-winner {
  color: #ff4b2c;
  display: inline-block;
  padding: 0px;
}
.feed-arrow {
  display: inline-block;
  color: #bcbcbc;
  padding-left: 13px;
  padding-right: 7px;
}

.form-loser {
  color: #ffcc00;
  display: inline-block;
  padding: 0px;
}
.form-winner {
  color: #ff4b2c;
  display: inline-block;
  padding: 0px;
}
.form-arrow {
  display: inline-block;
  padding-left: 6px;
  padding-right: 0px;
}

.add-game-div {
  font-size: 1.2em;
  display: inline-block;
  width: 167px;
  color: #aaaaaa;
}

#add-game-form {
  width: 690px;
}

#hand-container-p {
  padding: 22px 8px 5px 8px;
  margin: -9px -11px 18px -11px;
  min-height: 140px;
  position: relative;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0);
}

#rules-box {
  background: #223166;
  padding-left: 20px;
  padding-right: 30px;
  font-size: 2.8vw;
  display: none;
}

.new-game-inputs {
  margin-left: 6px;
  width: 157px;
  font-size: 1.3em;
  background: rgba(0, 0, 0, 0.3);
  color: #c9c9c9;
  border-color: #00000000;
  outline: none;
  min-width: 20px;
  padding: 5px;
  border-radius: 9px;
  display: inline-block;
  margin-bottom: 15px;
  /*font-family: "Xanh Mono";*/
}

.new-game-inputs:hover,
.new-game-inputs:active,
.new-game-inputs:focus {
  background: rgba(0, 0, 0, 0.6);
}

.new-game-inputs2 {
  margin-left: 6px;
  width: 60px;
  font-size: 1.4em;
  background: #292929;
  color: #d9d9d9;
  border-color: #000000;
  outline: none;
  min-width: 20px;
  padding: 5px;
  border-radius: 9px;
  margin-top: 20px;
  margin-bottom: 15px;
}

.dropdown {
  cursor: pointer;
  margin-left: 6px;
  height: 40px;
  font-size: 1.2em;
  background: #292929;
  color: #d9d9d9;
  border-color: #000000;
  outline: none;
  min-width: 20px;
  border-radius: 7px;
  text-align: center;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

#score-hand-preview-top {
  font-size: 1.8em;
  float: left;
}

#score-inputbox {
  width: 80px;
  background-color: #00000000;
  border: 0px;
  font-size: 1.5em;
  margin-right: 7px;
}

.checkbutton input:checked + span {
  background-color: #f75a1b;
}

#calc-box {
  display: none;
}

#footer {
  box-shadow: 0px -5px 7px rgba(20, 20, 20, 0.1);
  font-family: monospace;
  background-color: rgba(0, 0, 0, 0.2);
  color: #fff;
  text-align: center;
  align-items: center;
  display: none;
}

#footer-version {
  text-align: center;
  border: 0px;
  margin-top: 5px;
  padding-right: 18px;
  width: 100%;
  color: #ffffff1a;
  font-size: 1em;
  text-shadow: -1px 1px 5px rgba(0, 0, 0, 0);
}

#full-container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
}

#open-settings-button {
  background: rgba(30, 126, 112, 0);
  border: 0px;
  font-size: 2.3em;
  padding: 6px 37px 0px 20px;
  cursor: pointer;
  opacity: 10%;
}

#open-login-button {
  background: rgba(30, 126, 112, 0);
  border: 0px;
  padding: 6px 20px 0px 37px;
  cursor: pointer;
  opacity: 20%;
}

#calc-frame {
  width: 100%;
  height: 1500px;
  border: 0;
}

#settings-box {
  background: #00000077;
  padding: 20px;
  display: none;
  border-radius: 11px;
  margin-top: 20px;
  align-items: center;
}

.view-link {
  color: rgba(217, 217, 217, 0.4);
  text-decoration: underline;
  text-decoration-style: dotted;
}

.view-link:hover {
  color: rgba(227, 227, 227, 0.9);
  text-decoration-style: solid;
}

#agariyame-div {
  margin-left: 40px;
}

#split-div {
  margin-left: 40px;
}

.asb-div {
  display: inline-block;
  color: #aaaaaa;
  font-size: 1.3em;
}

.toggler-wrapper input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
  left: calc(100% - 19px - 3px);
}

.toggler-wrapper .toggler-knob {
  width: calc(25px - 6px);
  height: calc(25px - 6px);
  border-radius: 50%;
  left: 3px;
  top: 3px;
  background-color: #fff;
}

.toggler-wrapper {
  width: 45px;
  height: 25px;
  cursor: pointer;
  position: relative;
  display: inline-block;
  margin-bottom: -8px;
  margin-left: 9px;
}

.toggler-wrapper input[type="checkbox"] {
  display: none;
}

.toggler-wrapper input[type="checkbox"]:checked + .toggler-slider {
  background-color: #33aa55;
  /* background-color: #44cc66; */
}

.toggler-wrapper .toggler-slider {
  background-color: #ccc;
  position: absolute;
  border-radius: 100px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}

.toggler-wrapper .toggler-knob {
  position: absolute;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}

#post-input {
  padding: 6px 16px;
  font-size: 1.5em;
  background: rgba(0, 0, 0, 0.26);
  border: 1px solid rgba(35, 35, 35, 0);
  margin-top: 12px;
  width: 90%;
  margin-top: 30px;
  min-height: 60px;
  margin-left: 11px;
  box-shadow: 0 0 10px #00000073;
  color: rgba(220, 220, 220, 0.564);
  border-radius: 6px;
}

#post-input:focus {
  outline: none !important;
  border: 1px solid rgb(50, 50, 50);
  background: rgba(0, 0, 0, 0.36);
  color: rgba(220, 220, 220, 0.751);
}

#submit-post {
  background: rgba(0, 0, 0, 0.26);
  border: 0px;
  border-radius: 6px;
  width: 70px;
  height: 42px;
  margin-left: 11px;
  color: #dadada7d;
  font-size: 1.1em;
  position: relative;
  top: 10px;
  margin-bottom: 12px;
}

.post-left {
  margin-left: 11px;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  background: rgba(0, 0, 0, 0.26);
  min-height: 30px;
  width: 130px;
  text-align: center;
  word-break: break-word;
  font-size: 1.5em;
  line-height: 2.5em;
  position: absolute;
  top: 0px;
}

.trans-left {
  margin-top: 2px;

  min-height: 36px;
  text-align: center;
  word-break: break-word;
  display: inline-block;
  font-size: 1.5em;
  line-height: 2em;
}

.post-left-info {
  margin-left: 11px;
  display: none;
  border-bottom-left-radius: 9px;
  background: rgba(0, 0, 0, 0.511);
  min-height: 20px;
  width: 110px;
  text-align: center;
  word-break: break-word;
  color: rgba(255, 255, 255, 0.511);
  font-size: 0.8em;
  padding-top: 2px;
  position: absolute;
  top: 62px;
}

.post-main {
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;
  background: rgba(0, 0, 0, 0.709);
  min-height: 70px;
  width: 71%;
  word-break: break-word;
  padding: 15px 18px 6px 20px;
  font-size: 1.2em;
  margin-left: 141px;
  margin-top: 5px;
  color: #cacaca;
}

.post-right {
  background: rgba(0, 0, 0, 0.26);
  min-height: 60px;
  width: 31px;
  position: absolute;
  left: 92.5%;
  top: 2px;
  word-break: break-word;
  display: none;
}

#game-top-bar-uma {
  font-family: monospace;
  font-size: 0.7em;
  width: 30px;
  text-align: left;
  padding-left: 15px;
  color: #ffffff95;
  vertical-align: middle;
}

#scoring-arrow {
  width: 100%;
  height: 21px;
  margin-top: -9px;
  margin-bottom: 10px;
  text-align: center;
}

#hand-scoring {
  display: none;
  min-width: 660px;
  padding: 20px 10px 10px 10px;
  position: relative;
  text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.9);
  background: #00000000;
}

#hand-scoring-calc {
  display: none;
  min-width: 660px;
  padding: 20px 0px 10px 0px;
  position: relative;
  text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.9);
  background: #00000000;
}

.hand-scoring-section-third {
  width: 31%;
  max-width: 450px;
  display: inline-block;
  background: rgba(46, 46, 46, 0.5);
  border-radius: 9px;
  margin-bottom: 10px;
  padding: 6px 10px;
}

#hand-scoring-buttons {
  display: flex;
  flex-wrap: nowrap;
}

#hand-scoring-buttons2 {
  display: flex;
  flex-wrap: nowrap;
}

#hand-scoring-winner-buttons {
  display: flex;
  flex-wrap: nowrap;
}

#hand-scoring-loser-buttons {
  display: flex;
  flex-wrap: nowrap;
}

.hand-scoring-section-full {
  background: rgba(46, 46, 46, 0.4);
  border-radius: 9px;
  margin-bottom: 10px;
  padding: 7px 10px;
  font-size: 1.2em;
  box-shadow: 0px 0px 3px 4px rgba(0, 0, 0, 0.1), inset 0 0 4px rgba(0, 0, 0, 0.1);
}

.section-full {
  border-radius: 9px;
  margin-bottom: 4px;
  padding: 7px 10px;
  font-size: 1.2em;
}

.section-full2 {
  border-radius: 22px;
  margin-bottom: 4px;
  padding: 4px 10px 7px 10px;
  background: rgba(0, 0, 0, 0.2);
}

.hand-scoring-section-half {
  width: 46.6%;
  max-width: 1150px;
  display: inline-block;
  background: rgba(46, 46, 46, 0.4);
  border-radius: 9px;
  margin-bottom: 10px;
  padding: 6px 10px;
  box-shadow: 0px 0px 3px 4px rgba(0, 0, 0, 0.1), inset 0 0 4px rgba(0, 0, 0, 0.1);
}

.section-half {
  width: 46.5%;
  max-width: 1150px;
  display: inline-block;
  background: rgba(46, 46, 46, 0.4);
  border-radius: 9px;
  margin-bottom: 4px;
  padding: 6px 10px;
  height: 52px;
  box-shadow: 0px 0px 3px 4px rgba(0, 0, 0, 0.1), inset 0 0 4px rgba(0, 0, 0, 0.1);
}

.scoring-label {
  font-size: 0.8em;
  color: #ffffff88;
  text-align: center;
}

.hand-scoring-tiles-section {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 22px;
  margin-bottom: 10px;
  padding: 7px 10px;
  font-size: 1.2em;
}

#add-hand {
  background: #00000066;
  min-height: 46px;
  text-align: left;
  display: none;
  padding: 0px 0px 0px 10px;
}

#add-hand-open-button {
  background-image: url("img/x.png");
  float: right;
}

#add-hand-draw-button {
  background-image: url("img/plus.png");
}

#add-hand-btn {
  background: #737373;
  font-size: 1.2em;
  color: white;
  height: 50px;
  width: 60px;
  cursor: pointer;
  border-radius: 6px;
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
}

#add-hand-round {
  font-size: 1.5em;
  font-weight: bold;
  vertical-align: middle;
  padding-top: 5px;
  padding-right: 20px;
  padding-left: 2px;
  float: left;
  vertical-align: top;
}

#score-btn {
  background: #175a4d;
  font-size: 0.8em;
  color: white;
  height: 40px;
  width: 101px;
  cursor: pointer;
  border-radius: 6px;
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
}

#more-btn {
  background: #175a4d;
  font-size: 0.8em;
  color: white;
  height: 40px;
  width: 101px;
  cursor: pointer;
  border-radius: 6px;
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
  display: inline-block;
}

#add-game-box {
  display: none;
  margin-top: 20px;
}

#add-offline-box {
  padding: 20px;
  background: rgb(27, 27, 27);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.15) 100%);
  box-shadow: 0px 0px 22px 6px rgba(0, 0, 0, 0.3), inset 0 0 4px rgba(0, 0, 0, 0.7);
  margin-bottom: 40px;
  font-size: 1.1em;
  font-variant: small-caps;
  /*font-family: "Xanh Mono";*/
}

#add-tx-btn {
  background: #ffd255;
  background: #000000;
  font-size: 2em;
  padding: 4px 12px;
  color: white;
  height: 60px;
  width: 120px;
  margin-top: 10px;
  border-radius: 8px;
}

#add-game-btn {
  background: #ffd255;
  background: #000000;
  font-size: 2em;
  padding: 4px 12px;
  color: white;
  height: 60px;
  width: 120px;
  margin-top: 10px;
  border-radius: 8px;
}

#new-game {
  padding-left: 19px;
  font-size: 1.3em;
}

/* CHART */
#game-chart-canvas {
  height: 280px;
  padding-right: 8px;
  min-height: 280px;
  max-height: 280px;
  text-shadow: -1px 1px 5px rgba(0, 0, 0, 1);
}

#chart-box {
  height: 285px;
  display: none;
  padding-top: 3px;
  background: rgba(255, 255, 255, 0.03);
}

#chart-container {
  display: inline-block;
  position: absolute;
  left: 186px;
  height: 280px;
  width: 74%;
  padding-top: 2px;
  min-width: 518px;
}

/* CURRENT SCORES/WINDS */
#score-container {
  padding: 0px 10px 13px 9px;
  font-weight: bold;
  display: inline-block;
  position: absolute;
  left: 2px;
  height: 260px;
  width: 20%;
  text-shadow: -1px 1px 5px rgba(0, 0, 0, 1);
}

.player-scores-cell-left {
  width: 45px;
  font-size: 3.4em;
  display: inline-block;
  margin-right: 7px;
  margin-top: -1px;
  vertical-align: top;
}
.player-scores-cell-right {
  padding-left: 5px;

  width: 75px;
  display: inline-block;
}

.player-scores-cell-right-top {
  padding-left: 5px;
  margin-top: 7px;
  width: 86px;
  margin-bottom: -5px;
  font-size: 1.7em;
}

.player-scores-cell-right-bot {
  padding-left: 5px;
  padding-top: 0px;
  width: 86px;
  font-size: 1.9em;
}

.score-p {
  height: 65px;
  width: 200px;
}

.stats-table111 {
  background: #252525;
  height: 157px;
  display: inline-block;
  font-size: 0.9em;
  padding: 2px;
}

#stats-name {
  color: #ffcc00;
  width: 200px;
  min-width: 160px;
  font-size: 1.4em;
  background: #252525;
}
#stats-cell {
  background: #252525;
}

#riichid-image1 {
  position: absolute;
  top: 90px;
  left: -4px;
}

#riichid-image2 {
  position: absolute;
  top: 155px;
  left: -4px;
}

#riichid-image3 {
  position: absolute;
  top: 218px;
  left: -4px;
}

#riichid-image4 {
  position: absolute;
  top: 283px;
  left: -4px;
}

.riichibutton {
  margin: 2px;
  background-color: #888888b7;
  border-radius: 6px;
  font-size: 1.15em;
  overflow: hidden;
  cursor: pointer;
  width: 161em;
}

.riichibutton label {
  line-height: 2em;
  width: 162em;
  height: 2.5em;
  cursor: pointer;
}

.riichibutton label span {
  text-align: center;
  padding: 3px 0;
  display: block;
}

.riichibutton label input {
  position: absolute;
  display: none;
  color: #ececec !important;
}

.riichibutton label input + span {
  color: #ececec;
}

.riichibutton input:checked + span {
  color: #ffffff;
}

.ronbutton {
  margin: 2px;
  border-radius: 6px;
  font-size: 1.3em;
  overflow: hidden;
  cursor: pointer;
  width: 161em;
}

.ronbutton label {
  line-height: 2em;
  width: 162em;
  height: 2.5em;
  cursor: pointer;
}

.ronbutton label span {
  text-align: center;
  padding: 3px 0;
  display: block;
  background-color: #888888b7;
}

.ronbutton label input {
  position: absolute;
  display: none;
  color: #ececec !important;
}

.ronbutton label input + span {
  color: #ececec;
}

.ronbutton input:checked + span {
  color: #ffffff;
}

.windbutton {
  margin: 2px;
  border-radius: 6px;
  font-size: 1.3em;
  overflow: hidden;
  cursor: pointer;
  width: 161em;
}

.windbutton label {
  line-height: 2em;
  width: 162em;
  height: 2.5em;
  cursor: pointer;
}

.windbutton label span {
  text-align: center;
  padding: 3px 0;
  display: block;
  background-color: #888888b7;
}

.windbutton label input {
  position: absolute;
  display: none;
  color: #fff !important;
}

.windbutton label input + span {
  color: #fff;
}

.windbutton input:checked + span {
  color: #ffffff;
}

.chombobutton {
  margin: 6px 2px 2px 2px;
  background-color: #888888b7;
  border-radius: 6px;
  font-size: 1.3em;
  overflow: hidden;
  float: left;
  cursor: pointer;
  color: #ececec;
  width: 6em;
}

.chombobutton label {
  line-height: 2.3em;
  width: 8em;
  height: 2.5em;
  cursor: pointer;
}

.chombobutton label span {
  text-align: center;
  padding: 3px 0;
  display: block;
}

.chombobutton label input {
  position: absolute;
  display: none;
  color: #ececec !important;
}

.chombobutton label input + span {
  color: #ececec;
}

.chombobutton input:checked + span {
  color: #ffffff;
}

.paobutton {
  margin: 6px 2px 2px 2px;
  background-color: #888888b7;
  border-radius: 6px;
  font-size: 1.3em;
  overflow: hidden;
  float: left;
  cursor: pointer;
  color: #ececec;
  width: 6em;
}

.paobutton label {
  line-height: 2.3em;
  width: 8em;
  height: 2.5em;
  cursor: pointer;
}

.paobutton label span {
  text-align: center;
  padding: 3px 0;
  display: block;
}

.paobutton label input {
  position: absolute;
  display: none;
  color: #ececec !important;
}

.paobutton label input + span {
  color: #ececec;
}

.paobutton input:checked + span {
  color: #ffffff;
}

.nagashibutton {
  margin: 6px 2px 2px 2px;
  background-color: #888888b7;
  border-radius: 6px;
  font-size: 1.3em;
  overflow: hidden;
  float: left;
  cursor: pointer;
  color: #ececec;
  width: 6em;
}

.nagashibutton label {
  line-height: 2.3em;
  width: 8em;
  height: 2.5em;
  cursor: pointer;
}

.nagashibutton label span {
  text-align: center;
  padding: 3px 0;
  display: block;
}

.nagashibutton label input {
  position: absolute;
  display: none;
  color: #ececec !important;
}

.nagashibutton label input + span {
  color: #ececec;
}

.nagashibutton input:checked + span {
  color: #ffffff;
}

.tenpaibutton {
  margin: 6px 2px 2px 2px;
  background-color: #888888b7;
  border-radius: 6px;
  font-size: 1.3em;
  overflow: hidden;
  float: left;
  cursor: pointer;
  color: #ececec;
  width: 6em;
}

.tenpaibutton label {
  line-height: 2.3em;
  width: 8em;
  height: 2.5em;
  cursor: pointer;
}

.tenpaibutton label span {
  text-align: center;
  padding: 3px 0;
  display: block;
}

.tenpaibutton label input {
  position: absolute;
  display: none;
  color: #ececec !important;
}

.tenpaibutton label input + span {
  color: #ececec;
}

.tenpaibutton input:checked + span {
  color: #ffffff;
}

.riichidrawbutton {
  margin: 6px 2px 2px 2px;
  background-color: #888888b7;
  border-radius: 6px;
  font-size: 1.3em;
  overflow: hidden;
  float: left;
  cursor: pointer;
  color: #ececec;
  width: 6em;
}

.riichidrawbutton label {
  line-height: 2.3em;
  width: 8em;
  height: 2.5em;
  cursor: pointer;
}

.riichidrawbutton label span {
  text-align: center;
  padding: 3px 0;
  display: block;
}

.riichidrawbutton label input {
  position: absolute;
  display: none;
  color: #ececec !important;
}

.riichidrawbutton label input + span {
  color: #ececec;
}

.riichidrawbutton input:checked + span {
  color: #ffffff;
}

.loserbutton {
  margin: 2px;
  background-color: #888888b7;
  border-radius: 6px;
  font-size: 1.3em;
  overflow: hidden;
  float: left;
  cursor: pointer;
  color: #ececec;
  width: 161em;
}

.loserbutton label {
  line-height: 2.3em;
  width: 162em;
  height: 2.5em;
  cursor: pointer;
}

.loserbutton label span {
  text-align: center;
  padding: 3px 0;
  display: block;
}

.loserbutton label input {
  position: absolute;
  display: none;
  color: #ececec !important;
}

.loserbutton label input + span {
  color: #ececec;
}

.loserbutton input:checked + span {
  color: #ffffff;
}

.winnerbutton {
  margin: 2px;
  background-color: #888888b7;
  border-radius: 6px;
  font-size: 1.3em;
  overflow: hidden;
  float: left;
  cursor: pointer;
  color: #ececec;
  width: 161em;
}

.winnerbutton label {
  line-height: 2.3em;
  width: 162em;
  height: 2.5em;
  cursor: pointer;
}

.winnerbutton label span {
  text-align: center;
  padding: 3px 0;
  display: block;
}

.winnerbutton label input {
  position: absolute;
  display: none;
  color: #ececec !important;
}

.winnerbutton label input + span {
  color: #ececec;
}

.winnerbutton input:checked + span {
  color: #ffffff;
}

.scorebutton {
  margin: 2px;
  background-color: #888888b7;
  border-radius: 6px;
  font-size: 1.3em;
  overflow: hidden;
  float: left;
  cursor: pointer;
  color: #ececec;
  width: 161em;
}

.scorebutton label {
  line-height: 2em;
  width: 162em;
  height: 2.5em;
  cursor: pointer;
}

.scorebutton label span {
  text-align: center;
  padding: 3px 0;
  display: block;
}

.scorebutton label input {
  position: absolute;
  display: none;
  color: #ececec !important;
}

.scorebutton label input + span {
  color: #ececec;
}

.scorebutton input:checked + span {
  color: #ffffff;
}

.scorebutton2 {
  margin: 2px;
  background-color: #888888b7;
  border-radius: 6px;
  font-size: 1.15em;
  overflow: hidden;
  float: left;
  cursor: pointer;
  color: #ececec;
  width: 161em;
}

.scorebutton2 label {
  line-height: 2em;
  width: 162em;
  height: 2.5em;
  cursor: pointer;
}

.scorebutton2 label span {
  text-align: center;
  padding: 3px 0;
  display: block;
}

.scorebutton2 label input {
  position: absolute;
  display: none;
  color: #ececec !important;
}

.scorebutton2 label input + span {
  color: #ececec;
}

.scorebutton2 input:checked + span {
  color: #ffffff;
}

.callbutton {
  margin: 2px;
  background-color: #00000033;
  border-radius: 6px;
  font-size: 1.3em;
  overflow: hidden;
  cursor: pointer;
  width: 161em;
}

.callbutton label {
  line-height: 2em;
  width: 162em;
  height: 1.5em;
  cursor: pointer;
}

.callbutton label span {
  text-align: center;
  padding: 3px 0;
  display: block;
}

.callbutton label input {
  position: absolute;
  display: none;
  color: #fff !important;
}

.callbutton label input + span {
  color: #fff;
}

.callbutton input:checked + span {
  color: #ffffff;
}

.akabutton {
  margin: 2px;
  border: 3px solid #2a2a2a50;
  background: #2a2a2a3b;
  border-radius: 9px;
  font-size: 0.9em;
  overflow: hidden;
  cursor: pointer;
  width: 4em;
  height: 2em;
  position: absolute;
  top: 5px;
  left: 5px;
}

.akabutton label {
  line-height: 1.7em;
  height: 3em;
  width: 5em;
  cursor: pointer;
}

.akabutton label span {
  text-align: center;
  padding: 3px 0;
  display: block;
}

.akabutton label input {
  position: absolute;
  display: none;
  color: #ffffff9d !important;
}

.akabutton label input + span {
  color: #ffffff9d;
}

.akabutton input:checked + span {
  color: #fffffff0;
}

#pocchi-box {
  display: none;
}

.pocchibutton {
  margin: 2px;
  border: 3px solid #2a2a2a50;
  background: #2a2a2a3b;
  border-radius: 9px;
  font-size: 0.9em;
  overflow: hidden;
  cursor: pointer;
  width: 5em;
  height: 2em;
  position: absolute;
  top: 5px;
  right: 5px;
  font-variant: none;
}

.pocchibutton label {
  line-height: 1.7em;
  height: 3em;
  width: 4em;
  cursor: pointer;
}

.pocchibutton label span {
  text-align: center;
  padding: 3px 0;
  display: block;
}

.pocchibutton label input {
  position: absolute;
  display: none;
  color: #ffffff9d !important;
}

.pocchibutton label input + span {
  color: #ffffff9d;
}

.pocchibutton input:checked + span {
  color: #fffffff0;
}

#hand-list {
  display: none;
  font-weight: bold;
  font-size: 1.45em;
  box-shadow: 0px 0px 11px rgba(20, 20, 20, 0.7);
}

.flex-nowrap {
  display: flex;
  flex-wrap: nowrap;
}

#hand-ron-buttons {
  display: flex;
  flex-wrap: nowrap;
}
#hand-riichi-buttons {
  display: flex;
  flex-wrap: nowrap;
}
#hand-riichi-buttons2 {
  display: flex;
  flex-wrap: nowrap;
}

#hand-scoring-winds-round {
  display: flex;
  flex-wrap: nowrap;
}

#hand-scoring-winds-seat {
  display: flex;
  flex-wrap: nowrap;
}

#add-hand-riichi {
  display: flex;
  flex-wrap: nowrap;
}

#add-hand-riichisticks {
  display: flex;
  flex-wrap: nowrap;
}

#tenpai-buttons {
  display: flex;
  flex-wrap: nowrap;
}

#riichi-buttons {
  display: flex;
  flex-wrap: nowrap;
}

#chombo-buttons {
  display: flex;
  flex-wrap: nowrap;
}

#pao-buttons {
  display: flex;
  flex-wrap: nowrap;
}

#nagashi-buttons {
  display: flex;
  flex-wrap: nowrap;
}

#hand-scoring-call-buttons {
  display: flex;
  flex-wrap: nowrap;
  margin-top: 16px;
}

#tx-extra {
  display: none;
}

#call-info {
  float: right;
  width: 200px;
  height: 56px;
  padding: 14px 0px 0px 20px;
  font-size: 1.4em;
  font-variant: small-caps;
  line-height: 0.9em;
}

#hand-scoring-yaku {
  font-variant: small-caps;
  margin-bottom: 20px;
  padding-bottom: 7px;
  font-size: 1.6em;
  padding-left: 18px;
  display: none;
}

#user-list {
  margin: 0;
  padding: 0;
  width: 180px;
  float: left;
  margin: 10px;
  font-size: 1.8em;
}

#user-list li {
  padding: 15px 15px;
  margin: 5px 10px;
  background-color: #363636;
  cursor: pointer;
  color: white;

  list-style: none;
}

#user-list li:hover {
  background: #4fc3fc;
}

#user-detail {
  float: left;
  width: 500px;
  margin: 10px;
  margin-left: 0;
  padding: 10px;
  border: 1px solid #3e3e3e;
  color: white;
  font-size: 1.8em;
}

#add-user-btn {
  background: #000000;
  font-size: 1em;
  padding: 4px 12px;
  color: white;
}

#edit-user-module {
  display: none;
  position: absolute;
  background-color: #e1e1e1;
  border: 1px solid #999;
  top: 149px;
  left: 160px;
  padding: 10px;
  width: 150px;
}

#user-list li:hover ~ #edit-user-module {
  display: none;
}

#edit-user-module form button {
  background: #54bb7d;
  font-size: 1em;
  padding: 0px 10px;
  color: white;
  margin-top: 10px;
  width: 25%;
}

#forum-box {
  background: rgb(27, 27, 27);
  background: linear-gradient(0deg, rgba(27, 27, 27, 1) 0%, rgba(35, 35, 35, 1) 100%);
  padding: 14px;
  display: none;
}

.mahjong-tile {
  display: inline-block;
}

.mahjong-tile:hover {
  cursor: pointer;
}

.image-container {
  display: flex;
  flex-wrap: nowrap;
}

.image-container img {
  max-width: 6.5%;
  max-height: 84px;
  height: auto;
  flex-shrink: 0;

  padding: 1px;
  cursor: pointer;
  border-radius: 8px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.image-container2 {
  display: flex;
  flex-wrap: nowrap;
}

.image-container2 img {
  max-height: 100px;
  background-image: url("img/bgt.png");
  background-position: 50% 50%;
  background-size: 100%;
  max-width: 8%;
  height: auto;
  flex-shrink: 0;
  margin: 2px;
  padding: 2px;
  cursor: pointer;
  border-radius: 8px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

#hand-container {
  display: flex;
  flex-wrap: nowrap;
}

#hand-container3 {
  display: flex;
  flex-wrap: nowrap;
  height: 20vw;
  max-height: 180px;
}

#hand-container img {
  max-height: 100px;
  background-image: url("img/bgt.png");
  background-position: 50% 50%;
  background-size: 100%;
  width: 5.55%;
  height: auto;
  flex-shrink: 0;
  margin: 1px;
  padding: 3px;
  cursor: pointer;
  border-radius: 7px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 7px 0px rgba(200, 200, 170, 1);
}

#fullhand {
  display: flex;
  flex-wrap: nowrap;
}

.xo {
  margin: 0px 4px 0px 6px;
  width: 22px;
  filter: saturate(0%);
  opacity: 90%;
}

#meld-container {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  margin-bottom: 7px;
  width: 90%;
}

#meld-container img {
  text-align: right;
  max-height: 100px;
  background-image: url("img/bgt.png");
  background-position: 50% 50%;
  background-size: 100%;
  max-width: 5.2%;
  height: auto;
  flex-shrink: 0;
  margin: 1px;
  padding: 3px;
  cursor: pointer;
  border-radius: 7px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 7px 0px rgba(200, 200, 170, 1);
}

#hand-container-result {
  display: flex;
  flex-wrap: nowrap;
  width: 97%;
  padding-bottom: 18px;
}

#hand-container-result img {
  max-height: 100px;
  background-image: url("img/bgt.png");
  background-position: 50% 50%;
  background-size: 100%;
  max-width: 6.05%;
  height: auto;
  flex-shrink: 0;
  margin: 1px;
  padding: 3px;

  border-radius: 7px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 7px 0px rgba(200, 200, 170, 1);
}

#meld-container-result {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  margin-bottom: 7px;
  width: 97%;
  padding-top: 10px;
}

#meld-container-result img {
  text-align: right;
  max-height: 100px;
  background-image: url("img/bgt.png");
  background-position: 50% 50%;
  background-size: 100%;
  max-width: 5.2%;
  height: auto;
  flex-shrink: 0;
  margin: 1px;
  padding: 3px;

  border-radius: 7px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 7px 0px rgba(200, 200, 170, 1);
}

.tile-container {
  display: flex;
  flex-wrap: nowrap;
  padding-left: 5px;
}

#tile-selection {
  padding-top: 12px;
  padding-left: 2px;
  padding-bottom: 6px;
}

#results-box {
  display: none;
  padding: 18px 10px;
  background: rgba(0, 0, 0, 0.26);
  min-height: 132px;
  font-size: 1.3em;
  box-shadow: 0px 5px 5px rgba(20, 20, 20, 0.3);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 100%);
}

.result-place {
  font-size: 1.3em;
}

.result-name {
  font-size: 1.7em;
  font-weight: bold;
  line-height: 1em;
}

.result-uma {
  font-size: 1.7em;
}

.result-cash {
  font-size: 1.3em;
  font-family: monospace;
  color: #888888;
}

.results-div {
  text-align: center;
  float: left;
  max-height: 120px;
  height: auto;
}

#game-box {
  display: none;
  background: rgb(30, 126, 111);
  background: linear-gradient(180deg, rgba(30, 126, 111, 1) 0%, rgba(24, 89, 73, 1) 100%);
  min-height: 850px;
}
#game-hand-container-yaku {
  height: 100px;
}
#game-hand-container {
  display: flex;
  margin-top: 30px;
  margin-bottom: 30px;
  background: rgb(37, 111, 148);
  background: linear-gradient(180deg, rgba(30, 116, 91, 1) 0%, rgba(24, 79, 53, 1) 100%);
  padding-bottom: 50px;
  margin-left: -43px;
  padding: 20px 20px 20px 0px;
}

#game-hand-container img {
  max-height: 130px;
  background-image: url("img/bgt.png");
  background-position: 50% 50%;
  background-size: 100%;
  max-width: 5%;
  height: auto;
  flex-shrink: 0;
  margin: 1px;
  padding: 4px 5px;
  cursor: pointer;
  border-radius: 13px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 7px 0px rgba(200, 200, 170, 1);
}

.game-tile-container {
  display: flex;

  padding: 0px 20px;
}

.game-tile-container img {
  max-height: 100px;
  background-image: url("img/bgt.png");
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 7px 0px rgba(200, 200, 170, 1);
  background-position: 50% 50%;
  background-size: 100%;
  max-width: 9%;
  height: auto;
  flex-shrink: 0;
  padding: 5px 6px 6px 6px;
  cursor: pointer;
  border-radius: 13px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 7px 0px rgba(200, 200, 170, 1);
  margin: 1px 1px;
}

.tile-container-invert img {
  max-height: 100px;
  background-image: url("img/bgt.png");
  background-position: 50% 50%;
  background-size: 100%;
  max-width: 9.15%;
  height: auto;
  flex-shrink: 0;
  margin: 2px 2px 2px 1px;
  padding: 5px 5px;
  cursor: pointer;
  border-radius: 12px;
  box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.5);

  filter: hue-rotate(155deg) blur(0px) saturate(100%) invert(98%);
}

.tile-container img {
  max-height: 110px;
  background-image: url("img/bgt.png");
  background-position: 50% 50%;
  background-size: 100%;
  width: 9.3%;
  max-width: 87px;
  height: auto;
  flex-shrink: 0;
  margin: 1px 1px 6px 1px;
  padding: 5px 5px;
  cursor: pointer;
  border-radius: 12px;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
  filter: hue-rotate(5deg) blur(0px);
  box-shadow: 0px 6px 0px rgba(200, 200, 170, 1);
  /*box-shadow: 0px 6px 0px rgba(230, 230, 230, 1);*/
}

.tile-box {
  max-width: 7.96%;
  height: auto;
  flex-shrink: 0;
  padding: 1px;
  cursor: pointer;
  border-radius: 8px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.hand-tiles-image {
  max-width: 44px;
}

.overlap-front {
  max-width: 67px;
}

.result-score-container {
  float: left;
  cursor: pointer;
  padding-left: 28px;
}

.tooltip-container {
  position: relative;
  cursor: pointer;
}

.tooltip {
  display: none;
  background-color: #131313d2;
  color: #fff;
  border: 2px solid #333;
  padding: 12px;
  border-radius: 9px;
  font-size: 0.9em;
  z-index: 1;
  width: 26%;
  font-family: monospace;
}

.tooltip1 {
  position: absolute;
  top: 148px;
  left: 0.5%;
}

.tooltip2 {
  position: absolute;
  top: 148px;
  left: 24%;
}

.tooltip3 {
  position: absolute;
  top: 148px;
  left: 48%;
}

.tooltip4 {
  position: absolute;
  top: 148px;
  left: 70%;
}

.tooltip-container:hover .tooltip1 {
  display: block;
}
.tooltip-container:hover .tooltip2 {
  display: block;
}
.tooltip-container:hover .tooltip3 {
  display: block;
}
.tooltip-container:hover .tooltip4 {
  display: block;
}

.tooltip-container:active .tooltip1 {
  display: block;
}
.tooltip-container:active .tooltip2 {
  display: block;
}
.tooltip-container:active .tooltip3 {
  display: block;
}
.tooltip-container:active .tooltip4 {
  display: block;
}

.tooltipz {
  display: none;
  background-color: #131313d2;
  color: #fff;

  border-radius: 9px;
  font-size: 0.9em;
  z-index: 1;

  font-family: monospace;
}

.tooltip-container:hover .tooltiplasthand {
  display: block;
}

.tooltipscore {
  display: none;
  background-color: #131313d2;
  color: #fff;
  position: absolute;
  left: 160px;
  top: -5px;
  border-radius: 9px;
  font-size: 2em;
  z-index: 1;
  padding: 20px;
  width: 200px;
  font-family: monospace;
}

.tooltipscore1 {
  position: absolute;
  top: 55px;
  left: 170px;
}

.tooltipscore2 {
  position: absolute;
  top: 118px;
  left: 170px;
}

.tooltipscore3 {
  position: absolute;
  top: 180px;
  left: 170px;
}

.tooltipscore4 {
  position: absolute;
  top: 250px;
  left: 170px;
}

.score-p:hover .tooltipscore1 {
  display: block;
}
.score-p:hover .tooltipscore2 {
  display: block;
}
.score-p:hover .tooltipscore3 {
  display: block;
}
.score-p:hover .tooltipscore4 {
  display: block;
}

.score-p:active .tooltipscore1 {
  display: block;
}
.score-p:active .tooltipscore2 {
  display: block;
}
.score-p:active .tooltipscore3 {
  display: block;
}
.score-p:active .tooltipscore4 {
  display: block;
}

#transaction-box {
  display: none;
  min-height: 500px;
}

#balance-box {
  display: none;
}

#logo-box {
  padding-top: 40px;
  padding-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

#load-box {
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  background: transparent;
  height: 200px;
}

.loader {
  width: 8rem;
  height: 8rem;
}

.spin {
  background: transparent;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  z-index: 0;
  -webkit-animation: spin2 1s linear infinite;
  animation: spin 1s linear infinite;
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.spin > div:not(.spin__blocker) {
  width: 50%;
  height: 50%;
  z-index: -1;
}
.spin__blocker {
  position: absolute;
  top: 0;
  left: 0;
  top: 3%;
  left: 7%;
  background: #363636;
  width: 90%;
  height: 90%;
  border-radius: 50%;
}
.spin__bottom-left {
  position: absolute;
  top: 50%;
  left: 0;
  background: -webkit-linear-gradient(top left, rgba(88, 88, 88, 0.75) 0%, rgba(88, 88, 88, 0.5) 100%);
  background: linear-gradient(to bottom right, rgba(88, 88, 88, 0.75) 0%, rgba(88, 88, 88, 0.5) 100%);
}
.spin__bottom-right {
  position: absolute;
  top: 50%;
  left: 50%;
  background: -webkit-linear-gradient(bottom left, rgba(88, 88, 88, 0.5) 0%, rgba(88, 88, 88, 0.25) 100%);
  background: linear-gradient(to top right, rgba(88, 88, 88, 0.5) 0%, rgba(88, 88, 88, 0.25) 100%);
}
.spin__top-left {
  position: absolute;
  top: 0;
  left: 50%;
  background: -webkit-linear-gradient(top left, rgba(88, 88, 88, 0) 0%, rgba(88, 88, 88, 0.25) 100%);
  background: linear-gradient(to bottom right, rgba(88, 88, 88, 0) 0%, rgba(88, 88, 88, 0.25) 100%);
}

.spin__blocker {
  width: 80%;
  height: 80%;
  top: 10%;
  left: 10%;
}

.color-select {
  width: 70px;
  height: 70px;
  border: 0px;
  margin-left: 40px;
  display: inline-block;
  background: #aaaaaa;
  color: #555555;
  cursor: pointer;
}

.color-value {
  font-size: 2.5em;
  margin-left: 20px;
  position: relative;
  top: -17px;
}

.container-color {
  width: 100%;
  text-align: center;
  padding-top: 14px;
}

.practice-settings-inner {
  display: flex;
  align-items: center;
  margin: 20px;
}

.practice-settings-label {
  width: 250px;
  display: inline-block;
  font-size: 1.7em;
  text-align: right;
}

.settings-label {
  width: 110px;
  display: inline-block;
  font-size: 1.7em;
  text-align: right;
  position: relative;
  top: -20px;
}

.settings-input-div {
  padding-left: 34px;
}

#shanten {
  display: none;
  justify-content: center;
  padding-top: 22px;
}

#shanten-inner {
  margin: 0;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0);
  border: 0px;
  padding-top: 20px;
  padding-bottom: 20px;
  width: 750px;
  min-width: 750px;
}

#shanten-upper {
  font-size: 1.7em;
  vertical-align: middle;
  background: #00000022;
  padding: 22px 15px 20px 15px;
  border-radius: 22px;
  height: 202px;
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

#shanten-lower {
  font-size: 1.7em;
  vertical-align: middle;
  background: #00000022;
  padding: 20px 15px 20px 15px;
  border-radius: 22px;
  height: 152px;
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

#shanten-upper img {
  background-image: url("img/bgt.png");
  background-position: 50% 50%;
  background-size: 100%;
  width: 46px;
  height: 63px;
  margin: 1px;
  margin-top: 60px;
  padding: 3px;
  border-radius: 7px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 7px 0px rgba(200, 200, 170, 1);
}

.shanten-button {
  text-align: center;
  font-size: 1.8em;
  background: rgba(0, 0, 0, 0.3);
  color: #c9c9c9;
  border-color: #000000;
  outline: none;
  min-width: 20px;
  border-radius: 9px;
  width: 15%;
  cursor: pointer;
  border: 0;
  margin-top: 20px;
  height: 101px;
  line-height: 2.1em;
  margin-left: 5px;
  margin-right: 5px;
}

.shanten-button:hover,
.shanten-button:active {
  background: rgba(0, 0, 0, 0.4);
}

#shanten-title {
  font-size: 3.3em;
  text-align: center;
  margin-top: 45px;
  margin-bottom: 15px;
  font-family: "gfont";
}

#shanten-buttons {
  display: none;
}

#shanten-start-button {
  width: 50%;
  text-align: center;
  font-size: 1.8em;
  background: rgba(0, 0, 0, 0.3);
  color: #c9c9c9;
  border-color: #000000;
  outline: none;
  min-width: 20px;
  border-radius: 9px;
  cursor: pointer;
  border: 0;
  margin-top: 20px;
  height: 101px;
  line-height: 2.1em;
  margin-left: 5px;
  margin-right: 5px;
}

#floater {
  display: none;
  justify-content: center;
  padding-top: 22px;
}

#floater-inner {
  margin: 0;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0);
  border: 0px;
  padding-top: 20px;
  padding-bottom: 20px;
  width: 750px;
  min-width: 750px;
}

#floater-title {
  font-size: 3.3em;
  text-align: center;
  margin-top: 15px;
  margin-bottom: 15px;
  font-family: "gfont";
}

#floater-title-2 {
  text-align: center;
}

#floater-container {
  background: #00000022;
  padding: 30px 8px 10px 8px;
  border-radius: 22px;
  margin-top: 10px;
  height: 212px;
}

#floater-answer {
  font-size: 1.7em;
  vertical-align: middle;
  background: #00000022;
  padding: 20px 15px 20px 15px;
  border-radius: 22px;
  height: 192px;
  margin-top: 30px;
}

#floater-no {
  background-image: url("img/incorrect.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
  display: none;
  opacity: 80%;
  min-height: 190px;
}

#floater-yes {
  background-image: url("img/correct.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
  display: none;
  opacity: 80%;
  min-height: 190px;
}

#floater-grade {
  color: #ffffff40;
  font-size: 0.9em;
  height: 0px;
  text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
  width: 250px;
}

#floater-grade-1 {
  display: inline-block;
  position: relative;
  top: 8px;
  left: 22px;
  width: 35px;
}

#floater-grade-2 {
  display: inline-block;
  position: relative;
  top: 8px;
  left: 35px;
}

.floater-button {
  text-align: center;
  font-size: 3.6em;
  background: rgba(0, 0, 0, 0.3);
  color: #c9c9c9;
  border-color: #000000;
  outline: none;
  min-width: 20px;
  border-radius: 9px;
  width: 336px;
  cursor: pointer;
  border: 0;
  margin-top: 20px;
  height: 100px;
  line-height: 1.8em;
  margin-left: 10px;
  margin-right: 10px;
}

.floater-button:hover,
.floater-button:active {
  background: rgba(0, 0, 0, 0.4);
}

#floater-result-a {
  float: left;
  padding-top: 60px;
  text-align: center;
  width: 260px;
}

#floater-result-b {
  float: right;
  padding-top: 60px;
  text-align: center;
  width: 260px;
  filter: opacity(0.5);
}

#floater-answer img {
  background-image: url("img/bgt.png");
  background-position: 50% 50%;
  background-size: 100%;
  width: 34px;
  margin: 1px;
  padding: 3px;
  border-radius: 7px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 7px 0px rgba(200, 200, 170, 1);
}

.floater-tile-div {
  display: inline-block;
  text-align: center;
  width: 355px;
}

#floater-a,
#floater-b {
  height: 86px;
}

.floater-tile-div img {
  background-image: url("img/bgt.png");
  background-position: 50% 50%;
  background-size: 100%;
  width: 55px;
  margin: 1px;
  padding: 3px;
  border-radius: 7px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 7px 0px rgba(200, 200, 170, 1);
}

#chart {
  display: none;
  justify-content: center;
  padding-top: 22px;
}

#chart-inner {
  margin: 0;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0);
  border: 0px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.scoring-chart td {
  height: 45px;
  width: 80px;
  background: #00000022;
  font-size: 0.8em;
}

.score-chart-container {
  width: 100%;
  font-size: 1em;
  padding-bottom: 20px;
  -webkit-transform: scale(0.9, 1); /* Safari and Chrome */
  -moz-transform: scale(0.9, 1); /* Firefox */
  -ms-transform: scale(0.9, 1); /* IE 9 */
  -o-transform: scale(0.9, 1); /* Opera */
  transform: scale(0.9, 1); /* W3C */
}

.topbar-button {
  display: inline-block;
  padding: 7px 8px;
  margin-right: 3px;

  cursor: pointer;
}

#topbar-button-container {
  position: fixed;
  left: 140px;
  top: 0px;
}

.topbar-button:hover {
  color: #ffffffaa;
}

#topbar-title {
  display: inline-block;
  padding-right: 30px;

  position: fixed;
  left: 15px;
  top: 0px;
  padding: 7px 8px;
}

#topbar-button-lang {
  position: fixed;
  right: 45px;
  top: -1px;
  letter-spacing: 0px;
}

#lang-jp {
  font-size: 0.75em;
}
#lang-en {
  margin-top: -2px;
}

.topbar-lang-button {
  float: right;
  margin-right: 8px;
  padding: 9px 5px;
  font-variant: small-caps;
  cursor: pointer;
  color: #ffffff33;
}

#topbar {
  user-select: none;
  text-align: left;
  background: rgb(43, 43, 43);
  width: 100%;
  overflow-x: hidden;
  height: 32px;
  position: fixed;
  top: 0px;
  margin: 0px;
  padding-bottom: 4px;

  font-size: 1.2em;
  letter-spacing: 1px;
  padding-left: 14px;
  -webkit-box-shadow: 0px 0px 7px 2px #08080822; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow: 0px 0px 7px 2px #08080822; /* Firefox 3.5 - 3.6 */
  box-shadow: 0px 0px 7px 2px #08080822; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
  float: top;
  color: #999999;
  z-index: 1;
}

#open-settings-box {
  text-align: center;
  z-index: 2;
  position: fixed;
  top: 7px;
  right: 14px;
}

#p-settings-button {
  background-image: url("img/gear.png");
  background-size: 100%;
  border: 0px;
  cursor: pointer;
  opacity: 30%;
  width: 20px;
  height: 20px;
}

#practice-title {
  font-size: 5.4em;
  text-align: center;
  margin-top: 30px;
  font-family: "gfont";
}

#practice {
  display: none;
  justify-content: center;
  overflow-x: hidden;
  padding-top: 40px;
}

#practice-inner {
  width: 750px;
  min-width: 750px;
  user-select: none;
  display: block;
  padding-bottom: 20px;
}

#practice-input {
  background: #00000022;
  padding: 10px 10px 12px 10px;
  border-radius: 22px;
  text-align: center;
  margin-top: 10px;
  height: 72px;
}

.practice-button {
  margin-left: 6px;
  font-size: 2.5em;
  background: rgba(0, 0, 0, 0.3);
  color: #c9c9c9;
  border-color: #000000;
  outline: none;
  min-width: 20px;
  padding: 10px 22px;
  border-radius: 9px;
  width: 282px;
  cursor: pointer;
  border: 0;
  margin-right: 20px;
  height: 72px;
  max-height: 72px;
}

.practice-button:hover,
.practice-button:active {
  background: rgba(0, 0, 0, 0.4);
}

#practice-youranswer {
  background: #1f1f1f00;
  border: 0px;
  font-size: 2.5em;
  color: white;
  padding: 15px 39px 10px 12px;
  outline: none;
  border-radius: 9px;
  border: 0;
  width: 300px;
  display: none;
  height: 72px;
}

.practice-dropdown {
  background: #1f1f1f69;
  border: 0px;
  font-size: 2.5em;
  color: white;
  padding: 10px 22px;
  outline: none;
  cursor: pointer;
  border-radius: 9px;
  border: 0;
  width: 300px;
  display: inline-block;
  height: 72px;
}

.practice-dropdown:hover {
  background: #000000a9;
}

#practice-open-settings-button {
  background: rgba(30, 126, 112, 0);
  border: 0px;
  font-size: 2.3em;
  padding: 6px 37px 0px 20px;
  cursor: pointer;
  opacity: 10%;
}

#practice-open-settings-box {
  text-align: center;
  display: flex;
  justify-content: center;
}

#practice-settings-button {
  background-image: url("img/gear.png");
  background-size: 100%;
  border: 0px;
  cursor: pointer;
  opacity: 20%;
  width: 40px;
  height: 40px;
  margin-top: 8px;
}

#practice-settings-box {
  background: #00000077;
  padding: 20px;
  display: none;
  border-radius: 11px;
}

#practice-header div {
  color: #ffffff34;
  text-decoration: none;
  text-shadow: 0px 2px 1px rgba(0, 0, 0, 0);
}

#practice-header div:hover {
  color: #ffd188;
  text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.7);
}

#practice-header {
  overflow-x: hidden;
  bottom: 10px;
  left: 0px;
  position: absolute;
  background: #11111100;
  width: 100%;
  text-align: center;
}

#practice-header-info {
  padding: 5px 18px;
  float: left;
  font-size: 0.9em;
  color: #ffffffaa;
}

#practice-header-info2 {
  padding: 5px 18px;
  float: right;
  font-size: 0.9em;
  color: #ffffffaa;
}

@font-face {
  font-family: "gfont";
  src: url("font2.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}

hr {
  border: 1px solid #ffffff22;
}

#practice-no {
  background-image: url("img/incorrect.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
  height: 74%;
  display: none;
  opacity: 80%;
}

#practice-yes {
  background-image: url("img/correct.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
  height: 74%;
  display: block;
  opacity: 80%;
}

#practice-result {
  font-size: 4em;
  position: relative;
  top: -22px;
  padding-right: 1px;
}

#practice-rules {
  width: 50%;
  text-align: right;
}

#practice-answer {
  margin-top: 10px;
  display: none;
}

#practice-answer-right {
  width: 270px;
  text-align: right;
  font-size: 1.7em;
  vertical-align: middle;
  background: #00000022;
  padding: 20px 26px 20px 26px;
  border-radius: 22px;
  float: left;
  margin-left: 10px;
  min-height: 245px;
}

#practice-answer-left {
  width: 415px;
  height: 285px;
  text-align: center;
  background: #00000022;
  border-radius: 22px;
  float: left;
}

#practice-round {
  margin-left: -13px;
  margin-bottom: 12px;
}

#practice-seat {
  margin-left: -15px;
  margin-bottom: 12px;
}

#practice-rontsumo {
  font-size: 2.5em;
  margin-top: 10px;
  margin-bottom: -5px;
  margin-left: 2px;
}

#practice-dora-wall {
  padding-top: 17px;
  height: 110px;
}

#practice-container {
  background: #00000022;
  padding: 10px 8px 30px 8px;
  border-radius: 22px;
  margin-top: 30px;
  height: 142px;
}

#practice-id {
  position: relative;
  top: 11px;
  left: 660px;
  color: #ffffff29;
  font-size: 0.8em;
  height: 0px;
  text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
  user-select: text;
}

#practice-grade {
  color: #ffffff40;
  font-size: 0.9em;
  height: 0px;
  text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
  width: 250px;
}

#practice-grade-1 {
  display: inline-block;
  position: relative;
  top: 8px;
  left: 22px;
  width: 35px;
}

#practice-grade-2 {
  display: inline-block;
  position: relative;
  top: 8px;
  left: 35px;
}

#practice-2 {
  background: #00000022;
  padding: 10px 10px 30px 10px;
  border-radius: 22px;
  height: 130px;
  margin-top: 10px;
  display: none;
}

#practice-settings {
  background: #00000022;
  padding: 10px 10px 30px 122px;
  border-radius: 22px;
  height: 130px;
  margin-top: 10px;
}

.practice-selection {
  width: 37px;
  height: 37px;
  margin-left: 30px;
  display: inline-block;
  background: #aaaaaa;
  color: #555555;
  accent-color: #22a594;
  filter: brightness(0.8);
  cursor: pointer;
}

#practice-settings-deck {
  width: 137px;
  height: 37px;
  margin-left: 40px;
  padding-left: 12px;
  display: inline-block;
  background: #bbbbbb;
  color: #333333;
  font-size: 1.3em;
  accent-color: #22a594;
  border: 0px;
  outline: 0px;
  border-radius: 3px;
}

#practice-settings-deck:active,
#practice-settings-deck:focus {
  border: 0px;
  outline: 0px;
}

#practice-meld-container {
  margin-top: 11px;
  text-align: right;
  padding-right: 20px;
}

#practice-hand-container {
  margin-top: 15px;
  text-align: left;
  padding-left: 13px;
}

#practice-win {
  margin-top: 20px;
  margin-left: 10px;
}

#practice-winds {
  padding-top: 30px;
  margin-left: -39px;
  margin-right: 15px;
  color: #ffffff66;
  font-size: 0.9em;
}

#practice-winds img {
  max-height: 100px;
  background-image: url("img/bgt.png");
  background-position: 50% 50%;
  background-size: 100%;
  width: 45px;
  height: auto;
  flex-shrink: 0;
  margin: 1px;
  padding: 3px;
  border-radius: 7px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 7px 0px rgba(200, 200, 170, 1);
}

#practice-hand-container img {
  max-height: 100px;
  background-image: url("img/bgt.png");
  background-position: 50% 50%;
  background-size: 100%;
  max-width: 5.7%;
  height: auto;
  flex-shrink: 0;
  margin: 1px;
  padding: 3px;
  border-radius: 7px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 7px 0px rgba(200, 200, 170, 1);
}

#practice-meld-container img {
  max-height: 100px;
  background-image: url("img/bgt.png");
  background-position: 50% 50%;
  background-size: 100%;
  max-width: 4.5%;
  height: auto;
  flex-shrink: 0;
  margin: 1px;
  padding: 3px;
  border-radius: 7px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 7px 0px rgba(200, 200, 170, 1);
}

#practice-dora-wall img,
#practice-ura-wall img {
  background-image: url("img/bgt.png");
  background-position: 50% 50%;
  background-size: 100%;
  width: 33px;
  margin: 1px;
  padding: 3px;
  border-radius: 7px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 7px 0px rgba(200, 200, 170, 1);
}

#practice-winning-tile img {
  max-height: 100px;
  background-image: url("img/bgt.png");
  background-position: 50% 50%;
  background-size: 100%;
  max-width: 5.65%;
  height: auto;
  flex-shrink: 0;
  margin: 1px;
  padding: 3px;
  border-radius: 7px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 7px 0px rgba(200, 200, 170, 1);
}

#about-button {
  position: fixed;
  bottom: 12px;
  right: 12px;
  background: #00000044;
  border-radius: 22px;
  height: 30px;
  width: 30px;
  text-align: center;
  line-height: 1.7em;
  font-size: 0.9em;
  cursor: pointer;
  color: #ffffff44;
  background-image: url("img/question-mark.svg");
  background-position: 50% 50%;
  background-size: 60%;
  background-repeat: no-repeat;
  filter: invert(1) opacity(0.5);
  display: none;
}

#about-panel {
  width: 280px;
  height: 95px;
  background: #000000ee;
  position: fixed;
  bottom: 0px;
  right: 0px;
  margin-bottom: 40px;
  margin-right: 40px;
  border-radius: 12px;
  padding: 12px;
  font-family: monospace;
  font-size: 1.2em;
  display: none;
}