.bg-color-bg {
  background-color: #F3DFC3; }

.bg-color-border {
  background-color: rgba(0, 0, 0, 0.25); }

.bg-color-wind {
  background-color: #7CAD82; }

.bg-color-fire {
  background-color: #EE7839; }

.bg-color-ground {
  background-color: #DBB853; }

.bg-color-water {
  background-color: #5b8e9e; }

.color-bg {
  color: #F3DFC3; }

.color-border {
  color: rgba(0, 0, 0, 0.25); }

.color-wind {
  color: #7CAD82; }

.color-fire {
  color: #EE7839; }

.color-ground {
  color: #DBB853; }

.color-water {
  color: #5b8e9e; }

html {
  height: 100%; }

body {
  font-family: 'Noto Serif TC', sans-serif;
  background-color: #F3DFC3;
  height: 100%; }

#body-box {
  min-height: 100%;
  display: flex;
  flex-direction: column; }

#loading {
  background-color: #F3DFC3;
  position: fixed;
  height: 100vh;
  width: 100vw;
  z-index: 99999999999; }
  #loading img {
    width: 10%;
    height: 10%;
    position: absolute;
    left: 45%;
    top: 45%; }

p {
  font-family: 'Noto Serif TC', sans-serif;
  text-align: justify; }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Noto Serif TC', sans-serif;
  font-weight: bold; }

::-webkit-scrollbar {
  width: 8px;
  height: 8px; }

::-webkit-scrollbar-track {
  background: #DDD; }

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: #AAA; }
  ::-webkit-scrollbar-thumb:hover {
    background: #666; }

.vertical-alignment-helper {
  display: table;
  height: 100%;
  width: 100%;
  pointer-events: none;
  /* This makes sure that we can still click outside of the modal to close it */ }

.navbar-light .navbar-text {
  text-decoration: none; }

.vertical-align-center {
  /* To center vertically */
  display: table-cell;
  vertical-align: middle;
  pointer-events: none; }

.modal-content {
  /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
  width: inherit;
  max-width: inherit;
  /* For Bootstrap 4 - to avoid the modal window stretching full width */
  height: inherit;
  /* To center horizontally */
  margin: 0 auto;
  pointer-events: all; }

.btn-tomato {
  color: #F3E0C5;
  font-weight: bold;
  background-color: #c6543c; }
  .btn-tomato:hover {
    color: #F3E0C5;
    background-color: #bc4a32; }

.btn-potato {
  color: #c6543c;
  background-color: #f3e3c5; }
  .btn-potato:hover {
    color: #c6543c;
    background-color: #e9d9bb; }

.btn-rounded {
  border-radius: 10rem; }

/*# sourceMappingURL=common.css.map */