@charset "UTF-8";

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "\6E38\30B4\30B7\30C3\30AF   Medium", "Yu Gothic", YuGothic, YuGothicMedium, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color: #DDD;
}

.card-wrap {
  padding: 0.5rem;
}

.card-text {
  margin-top: 0;
  margin-bottom: 0.3rem;
  font-size: 0.9rem;
}

.card-link {
  font-size: 0.9rem;
}

.navbar {
  margin-bottom: 1.5rem;
}

.game .navbar,
.introduce .navbar {
  margin-bottom: 0rem;
}

.nav-item .nav-link {
  cursor: pointer;
}

.navbar .navbar-collapse {
  display: block;
}

body:not(.game) nav {
  display: flex !important;
}

.footer {
  text-align: center;
  margin-top: 2rem;
}

.logo-font {
  font-family: "DynaPuff", sans-serif;
  font-size: 1.3rem;
}

.wrap-alert {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.alert {
  border: 1px solid rgba(0, 0, 0, 0.6);
  border-radius: 0.25rem;
  background-image: linear-gradient(#484e55, #3A3F44 60%, #313539);
  background-repeat: no-repeat;
}

.private-alert {
  margin-top: 2.5rem;
}

.form-control {
  height: 2.5rem;
}

.col-form-label {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.create-form {
  margin-top: 2rem;
}

.form-button {
  margin-top: 2rem;
}

.invalid-feedback {
  display: block;
}

.nav-item:hover,
.nav-link:hover {
  background-color: #3A3F44 !important;
}

.lock-icon {
  margin-left: 0.75rem;
}

.game-container {
  max-width: 99999px;
  padding-bottom: 3rem;
}

@media (min-width: 768px) {
  .game-container {
    padding-bottom: 0rem;
  }
}

.game-container-wrap {
  font-size: 0.9rem;
}

@media (min-width: 768px) {
  .game-container-wrap {
    font-size: 0.95rem;
  }
}

.game-container .status-area {
  background-color: #2e3035;
  padding-top: 1rem;
}

.game-container .chat-area {
  background-color: #272B30;
  word-wrap: break-word;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
}

.game-container .history-area {
  background-color: #2e3035;
  overflow-y: scroll;
  word-wrap: break-word;
}

.chat-area {
  padding-top: 1rem;
}

.wrap-comment-list::-webkit-scrollbar {
  width: 12px;
  background: #282828;
  border-left: 1px solid #222;
}

.history-area::-webkit-scrollbar {
  width: 12px;
  background: #282828;
  border-left: 1px solid #222;
}

.modal-body::-webkit-scrollbar {
  width: 12px;
  background: #282828;
  border-left: 1px solid #222;
}

.wrap-comment-list::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
.history-area::-webkit-scrollbar-thumb {
  background: #6b6b6b;
  border-radius: 2px;
}

.comment-area {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.theme-wrap {
  padding-top: 0.5rem;
  font-size: 90%;
  font-weight: bold;
  padding-bottom: 0.5rem;
  position: sticky;
  top: 0;
  border-bottom: solid 1px #444;
  z-index: 999;
  background-color: #006787 !important;
}

.comment-text {
  white-space: pre-line;
}

.system-comment .comment-text {
  color: #38a5c3;
  font-weight: bold;
}

.system-comment .text-success {
  font-weight: bold;
}

.bm-border {
  width: 100%;
  margin-top: 0;
  margin-right: 1rem;
  margin-left: 1rem;
  border-bottom: solid 1px #444;
}

.comment-status {
  border-left: solid 1px #444;
}

.action-are .btn-wrap {
  margin-bottom: 0.5rem;
}

.name-area {
  margin-bottom: 0.2rem;
  font-size: 0.85rem;
}

.game-join-users table td {
  padding: 0.35rem;
}

td .owner-label {
  font-size: 0.8rem;
}

.user-score-td {
  width: 2rem;
}

.footer-action {
  position: fixed;
  bottom: 0;
  background-color: #353b40;
  width: 100%;
  height: 2.5rem;
  cursor: pointer;
}

.footer-action .container {
  max-width: 100%;
}

.footer-action .align-items-center {
  height: 2.5rem;
  border-right: 0.5px solid #222;
  border-top: 0.5px solid #222;
  text-align: center;
  cursor: pointer;
  font-size: 0.85rem;
}

.footer-action .col-3:last-child {
  height: 2.5rem;
  border-right: none;
}

.ft-center {
  font-weight: normal;
  width: 100%;
  text-align: center;
}

.sp-game-ft-btn,
.sp-game-ft-btn:hover {
  color: #aaa;
  text-decoration: none;
}

.sp-game-ft-btn.highlight {
  background-color: #0079a1;
}

.sp-game-ft-btn.highlight .ft-center {
  font-weight: bold !important;
  color: #FFF;
}

.comment-status-icon-area {
  margin-top: 0.25rem;
  font-size: 1.1rem;
}

.comment-status-icon-area span {
  background-color: #43484d;
  font-weight: 300;
  cursor: pointer;
}

.default-cursor {
  cursor: default !important;
}

.sp-game-status {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: solid 1px #555;
}

.wrap-sp-status {
  border-right: 1px solid #555;
}

.top-description-area {
  font-weight: normal;
}

.chat-input {
  position: absolute;
  bottom: 0;
  left: 15px;
  min-width: calc(100% - 30px);
}

.chat-input {
  bottom: -1rem;
  min-width: calc(100% - 1.3rem);
}

.chat-input .input-area {
  padding-left: 0.5rem;
  padding-right: 0;
}

.chat-input .input-area .form-control {
  border-radius: 0;
  background-color: #222;
  color: #FFFFFF;
  border: 1px solid #555;
  display: inline;
  margin: 0;
  position: relative;
  border-right: none;
}

.chat-input .btn-area {
  padding-left: 0;
  padding-right: 0;
  max-width: 2.5rem;
}

.chat-input .btn-area .btn {
  border-radius: 0;
  padding: 0;
  height: 2.5rem;
  width: 100%;
  display: inline;
  vertical-align: top;
  border-right: none;
}

.wrap-comment-list {
  overflow-y: scroll;
  padding-left: 15px;
  padding-right: 15px;
}

.selection-modal-wrap {
  position: fixed;
  bottom: 3rem;
  left: 3rem;
  width: 220px;
}

.selection-modal-wrap .modal-header {
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}

.modal-body {
  max-height: calc(100vh - 300px);
  overflow-y: scroll;
}

.selection-modal-wrap .modal-body {
  padding-top: 0.3rem;
  padding-bottom: 1rem;
}

.table-bordered td {
  border: 1px solid rgba(0, 0, 0, 0.5);
}

.share-btn-area {
  margin-bottom: 0.7rem;
}

.room-tweet-btn {
  margin-top: 1.7rem;
}

.howto-img {
  border: 1px solid #bbb;
  width: 350px;
}

.introduce p {
  font-size: 1.1rem;
  line-height: 1.5rem;
}

.introduce .hero {
  background: url(/resources/img/material/use_your_illusion.png);
}