.btn-purple { 
  color: #ffffff; 
  background-color: #8B51D6;
  border-widtH: 0;
}

.btn-purple:hover,
.btn-purple:focus,
.btn-purple:active,
.btn-purple.active,
.open .dropdown-toggle.btn-purple {
  color: #ffffff;
  background-color: #621CBD;
}

.btn-purple:active,
.btn-purple.active,
.open .dropdown-toggle.btn-purple {
  background-image: none;
}

.btn-purple.disabled,
.btn-purple[disabled],
fieldset[disabled] .btn-purple,
.btn-purple.disabled:hover,
.btn-purple[disabled]:hover,
fieldset[disabled] .btn-purple:hover,
.btn-purple.disabled:focus,
.btn-purple[disabled]:focus,
fieldset[disabled] .btn-purple:focus,
.btn-purple.disabled:active,
.btn-purple[disabled]:active,
fieldset[disabled] .btn-purple:active,
.btn-purple.disabled.active,
.btn-purple[disabled].active,
fieldset[disabled] .btn-purple.active {
  background-color: #8B51D6;
  border-width: 0;
}

.btn-purple .badge {
  color: #8B51D6;
  background-color: #ffffff; 
}





.btn-orange {
  color: #423636;
  background-color: #F28D1B;
  border-widtH: 0;
}

.btn-orange:hover,
.btn-orange:focus,
.btn-orange:active,
.btn-orange.active,
.open .dropdown-toggle.btn-orange {
  color: #423636;
  background-color: #F09D3E;
}

.btn-orange:active,
.btn-orange.active,
.open .dropdown-toggle.btn-orange {
  background-image: none;
}

.btn-orange.disabled,
.btn-orange[disabled],
fieldset[disabled] .btn-orange,
.btn-orange.disabled:hover,
.btn-orange[disabled]:hover,
fieldset[disabled] .btn-orange:hover,
.btn-orange.disabled:focus,
.btn-orange[disabled]:focus,
fieldset[disabled] .btn-orange:focus,
.btn-orange.disabled:active,
.btn-orange[disabled]:active,
fieldset[disabled] .btn-orange:active,
.btn-orange.disabled.active,
.btn-orange[disabled].active,
fieldset[disabled] .btn-orange.active {
  background-color: #F28D1B;
}

.btn-orange .badge {
  color: #F28D1B;
  background-color: #423636;
}




.btn-orange {
  color: #FFFFFF;
  background-color: #DB0F0F;
  border-color: #E01B46;
}

.btn-orange:hover,
.btn-orange:focus,
.btn-orange:active,
.btn-orange.active,
.open .dropdown-toggle.btn-orange {
  color: #FFFFFF;
  background-color: #EB3D3D;
  border-color: #E01B46;
}

.btn-orange:active,
.btn-orange.active,
.open .dropdown-toggle.btn-orange {
  background-image: none;
}

.btn-orange.disabled,
.btn-orange[disabled],
fieldset[disabled] .btn-orange,
.btn-orange.disabled:hover,
.btn-orange[disabled]:hover,
fieldset[disabled] .btn-orange:hover,
.btn-orange.disabled:focus,
.btn-orange[disabled]:focus,
fieldset[disabled] .btn-orange:focus,
.btn-orange.disabled:active,
.btn-orange[disabled]:active,
fieldset[disabled] .btn-orange:active,
.btn-orange.disabled.active,
.btn-orange[disabled].active,
fieldset[disabled] .btn-orange.active {
  background-color: #DB0F0F;
  border-color: #E01B46;
}

.btn-orange .badge {
  color: #DB0F0F;
  background-color: #FFFFFF;
}




.btn-dark-red {
  color: #FFFFFF;
  background-color: #DB0F0F;
  border-width: 0;
}

.btn-dark-red:hover,
.btn-dark-red:focus,
.btn-dark-red:active,
.btn-dark-red.active,
.open .dropdown-toggle.btn-dark-red {
  color: #FFFFFF;
  background-color: #EB3D3D;
}

.btn-dark-red:active,
.btn-dark-red.active,
.open .dropdown-toggle.btn-dark-red {
  background-image: none;
}

.btn-dark-red.disabled,
.btn-dark-red[disabled],
fieldset[disabled] .btn-dark-red,
.btn-dark-red.disabled:hover,
.btn-dark-red[disabled]:hover,
fieldset[disabled] .btn-dark-red:hover,
.btn-dark-red.disabled:focus,
.btn-dark-red[disabled]:focus,
fieldset[disabled] .btn-dark-red:focus,
.btn-dark-red.disabled:active,
.btn-dark-red[disabled]:active,
fieldset[disabled] .btn-dark-red:active,
.btn-dark-red.disabled.active,
.btn-dark-red[disabled].active,
fieldset[disabled] .btn-dark-red.active {
  background-color: #DB0F0F;
}

.btn-dark-red .badge {
  color: #DB0F0F;
  background-color: #FFFFFF;
}




.btn-orange-regular {
  color: #FFFFFF;
  background-color: #FF8000;
  border-color: #FF8C1A;
}

.btn-orange-regular:hover,
.btn-orange-regular:focus,
.btn-orange-regular:active,
.btn-orange-regular.active,
.open .dropdown-toggle.btn-orange-regular {
  color: #FFFFFF;
  background-color: #ff9933;
  border-color: #FF8C1A;
}

.btn-orange-regular:active,
.btn-orange-regular.active,
.open .dropdown-toggle.btn-orange-regular {
  background-image: none;
}

.btn-orange-regular.disabled,
.btn-orange-regular[disabled],
fieldset[disabled] .btn-orange-regular,
.btn-orange-regular.disabled:hover,
.btn-orange-regular[disabled]:hover,
fieldset[disabled] .btn-orange-regular:hover,
.btn-orange-regular.disabled:focus,
.btn-orange-regular[disabled]:focus,
fieldset[disabled] .btn-orange-regular:focus,
.btn-orange-regular.disabled:active,
.btn-orange-regular[disabled]:active,
fieldset[disabled] .btn-orange-regular:active,
.btn-orange-regular.disabled.active,
.btn-orange-regular[disabled].active,
fieldset[disabled] .btn-orange-regular.active {
  background-color: #FF8000;
  border-color: #FF8C1A;
}

.btn-orange-regular .badge {
  color: #FF8000;
  background-color: #FFFFFF;
}

a.btn-orange-regular, a.btn-orange-regular:hover {
  color: #fff !important;
}




.btn-darkish {
  color: #ffffff;
  background-color: #404040;
  border-color: #000;
}

.btn-darkish:hover,
.btn-darkish:focus,
.btn-darkish:active,
.btn-darkish.active,
.open .dropdown-toggle.btn-darkish {
  color: #ffffff;
  background-color: #000000;
  border-color: #000;
}

.btn-darkish:active,
.btn-darkish.active,
.open .dropdown-toggle.btn-darkish {
  background-image: none;
}

.btn-darkish.disabled,
.btn-darkish[disabled],
fieldset[disabled] .btn-darkish,
.btn-darkish.disabled:hover,
.btn-darkish[disabled]:hover,
fieldset[disabled] .btn-darkish:hover,
.btn-darkish.disabled:focus,
.btn-darkish[disabled]:focus,
fieldset[disabled] .btn-darkish:focus,
.btn-darkish.disabled:active,
.btn-darkish[disabled]:active,
fieldset[disabled] .btn-darkish:active,
.btn-darkish.disabled.active,
.btn-darkish[disabled].active,
fieldset[disabled] .btn-darkish.active {
  background-color: #404040;
  border-color: #000;
}

.btn-darkish .badge {
  color: #404040;
  background-color: #ffffff;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

@font-face {
  font-family: 'Mon';
  src: url(/fonts/Mon.otf); /* Locate the .ttf file within your directory*/
}

@font-face {
  font-family: 'MonItalic';
  src: url(/fonts/MonItalic.otf); /* Locate the .ttf file within your directory*/
}

body {
  background-image: url(/img/background.png);
  background-repeat: repeat;
  background-position: left top;
  color: #fff;
}

.bg-grey {
  background-color: #404040;
}

.horizontal-spacer {
  margin-right: 20px;
}

a {
  color: #fff;
}

a:visited {
  color: #d9d9d9;
}

/* Utility Styles */

.bigger {
  font-size: 1.2rem;
}

.smaller {
  font-size: 0.8rem;
}

.super-small {
  font-size: .7rem;
}

.centered {
  text-align: center;
}

.float-right {
  float: right;
}

.white {
  color: #ffffff;
}

.black {
  color: #000000;
}

.offwhite {
  color: #cccccc;
}

.dimmed {
  opacity: 0.6;
}

.thumb-rounded {
  border-radius: 12px;
}

.rounded-corners {
  border-radius: 30px;
}

.main-conttent-styles {
  padding: 30px 40px;
}

.main-conttent-styles a:hover {
  color: #d9d9d9;
  text-decoration: underline;
}

a.force-white, a.force-white:visited {
  color: #fff !important;
}

.pagination a {
  color: #0060F6;
}

@keyframes highlight {
  0% {
    background: #ffff99;
    border-radius: 5px;
  }
  100% {
    background: none;
    border-radius: 5px;
  }
}

.highlight {
  animation: highlight 2s;
}

/* Admin Styles */

.admin-table tr td {
  color: #fff !important;
  font-size: 1rem;
}

/* Shop / Checkout Styles */

.shop-table tbody tr td {
  padding: 20px 5px;
  font-size: .9rem;
}

td.shop-item-contents {
  line-height: 1.6rem;
}

h5.shop-subheading {
  margin-top: 30px;
  margin-bottom: 20px;
}

a.proceed-to-payment-button {
  margin-right: 50px;
  color: #fff !important;
}

.added-to-cart-notice {
  background-color: #000;
  font-size: 1.3rem;
  padding: 14px 18px;
  border-radius: 20px;
  margin-top: 14px;
  margin-bottom: 14px;
}

p.cart-notice {
  margin-top: 12px;
}

a.cart-notice-checkout-button {
  float: right;
  margin-top: 7px;
  margin-right: 26px;
}

.checkout-wrapper {
  padding-bottom: 60px;
}

h2.checkout-heading {
  margin-top: 30px;
}

#checkout-loading {
  display: none;
  float: right;
  margin-right: 240px;
  padding-bottom: 20px;
  margin-top: -10px;
}

.continue-shopping-button {
  float: right;
  margin-top: 30px;
  margin-right: 30px;
}

table.checkout-table {
  font-size: .9rem;
  color: #fff;
  border: 1px solid #fff;
}

.checkout-table tbody tr td {
  padding: 14px 14px;
  color: #fff;
  font-size: 1rem;
  border: 1px solid #fff;
}

td.checkout-product-name {
  font-size: 1.1rem !important;
  margin-left: 40px;
}

.checkout-product-items {
  display: inline;
  font-size: .8rem;
  margin-left: 20px;
}

.checkout-total {
  text-align: right;
  vertical-align: middle;
}

.pay-with-button {
  padding: 10px 14px;
  margin-right: 16px;
}

.popular-cryptos {
  line-height: 4.4rem;
}

.estimated-payment-header {
  margin: 14px 20px;
}

.estimated-payment-amount {
  min-width: 300px;
  max-width: 440px;
  border: 1px solid #fff;
  background-color: #000;
  padding: 60px 70px;
  margin: 30px 30px;
  margin-bottom: 10px;
  border-radius: 12px;
  font-size: 2rem;
}

.confirm-estimate-wrapper {
  margin-top: 0;
  margin-bottom: 20px;
}

.confirm-estimate-button {
  margin: 10px 10px;
  padding: 20px 36px;
  font-size: 1.3rem;
  font-style: bold;
}

.final-payment-amount {
  min-width: 260px;
  max-width: 360px;
  border: 1px solid #fff;
  background-color: #000;
  padding: 26px 30px;
  margin: 30px 30px;
  margin-bottom: 10px;
  border-radius: 12px;
  font-size: 1.8rem;
}

.final-payment-to-address-note {
  margin: 20px 10px;
  margin-bottom: 6px !important;
}

.final-payment-address {
  min-width: 400px;
  max-width: 560px;
  border: 1px solid #fff;
  background-color: #0039e6;
  padding: 24px 20px;
  margin: 30px 30px;
  margin-top: 20px;
  margin-bottom: 10px;
  border-radius: 12px;
  font-size: 1.2rem;
}

.your-payment-has-expired {
  margin: 30px 20px;
  font-size: 1.2rem;
}

.generate-new-address-button {
  margin: 8px 8px;
  padding: 12px 24px;
  font-size: 1.2rem;
}

.already-sent-payment-button {
  padding: 12px 24px;
  margin: 40px 40px;
}

.please-pay-before-expiration {
  margin: 26px 26px;
  font-size: 1.2rem;
}

#expiration-timer {
  background-color: #f2f2f2;
  color: #1a1a1a;
  border: 3px solid #000;
  width: 80%;
  max-width: 180px;
  font-size: 1.5rem;
  margin: 16px 16px;
  padding: 24px 24px;
  border-radius: 14px;
}

/* Layout Styles */

.navbar-brand {
  font-family: 'Mon', sans-serif !important;
  font-size: 1.6rem;
}

#flash-messages {
  width: 100%;
}

header {
  padding-top: 100px;
  width: 100%;
  padding-bottom: 0px;
}

.alert {
  width: 100%;
}

.alert-wrapper {
  margin-top: 30px;
  padding-top: 14px;
  padding-bottom: 10px;
}

.navbar {
  margin-bottom: 10px !important;
}

.recent-scores-wrapper {
  width: 100%;
  margin-top: -16px;
  margin-bottom: 4px;
}

table#recent-scores {
  width: 100%;
}

table#recent-scores td {
  width: 14.2%;
  font-size: .8rem;
  text-align: center;
  vertical-align: middle;
}

.score-crashed {
  color: #ff5c33;
}

.score-won {
  color: #33cc33;
}

.tabs-wrapper {
  min-height: 600px;
  margin-top: 0.5rem;
}

li.nav-item .active {
  color: #000 !important;
}

.tab-nav-link:hover {
  color: #80d4ff !important;
}

.tab-pane {
  padding: 6px 0px;
}

.gem-color {
  color: #ff1a1a;
}

.star-color {
  color: #ffff00;
}

.hatch-color {
  color: #33cc33;
}

.dropdown {
  border-radius: 10px;
}

.dropdown, .dropdown-menu, .dropdown-item {
  background-color: #808080;
}

.dropdown-item a {
  color: #fff;
}
.dropdown-item a:visited {
  color: #e6e6e6;
}

.dropdown-lighter, ul.dropdown-lighter li {
  background-color: #e6e6e6 !important;
}

.dropdown-lighter > li {
  background-color: #e6e6e6 !important;
}

ul.dropdown-menu.dropdown-lighter.show li {
  background-color: #e6e6e6 !important;
}

a.lighter {
  color: #262626;
  background-color: #e6e6e6 !important;;
}

a.lighter, a.lighter:visited {
  color: #262626;
}

a.lighter:hover {
  background-color: #bfbfbf !important;
  color: #000;
}

footer.bg-dark {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
}

.mobile-buttons-span {
  margin-left: auto;
  margin-top: -1px !important;
  margin-right: 10px;
  line-height: 1rem;
  background-color: inherit !important;
}

.mobile-cart-button {
  padding: 3px 9px;
}

.mobile-envelope-span {
  margin-left: auto;
  margin-top: -1px !important;
  margin-right: 10px;
}

.mobile-envelope-button {
  padding: 4px 10px;
}

.messages-dropdown {
  clear: both;
  display: block;
  margin-right: 10px;
}

.desktop-envelope-button {
  margin-top: 10px;
  padding: 4px 10px;
  text-align: center;
  vertical-align: middle;
}

.desktop-envelope-wrapper {
  background-color: #1E2124 !important;
}

li.button-nav-item-desktop {
  margin-top: -4px !important;
}

.btn-read {
  margin-top: 8px;
  padding: 7px 14px !important;
}

.nav-cart-link {
  text-align: center;
  vertical-align: middle;
  margin-top: 10px;
  padding-top: 6px !important;
  padding-bottom: 5px !important;
  padding-right: 14px !important;
  padding-left: 12px !important;
  margin-right: 6px;
}

.dropdown-for-messages {
  margin-left: -90px;
  width: 240px;
  border: 4px solid #000 !important;
  background-color: #333333 !important;
  color: #fff;
}

.dropdown-for-messages:hover {
  color: #fff !important;
}

.notification-item {
  height: 60px;
}

.message-dropdown-item {
  background-color: #333333 !important;
  width: 100%;
  display: flex;
  justify-content: start;
  color: #fff !important;
}

.message-left {
  width: 80%;
  max-width: 140px;
  font-size: .7rem;
  margin-top: 6px;
}

.message-left:hover {
  color: #fff !important;
}

.message-right {
  vertical-align: middle;
}

/* Home non-Game Styles */

.please-register {
  margin-top: 40px;
  font-size: 1rem;
}

.please-register a:hover {
  color: #B9BABB;
}

.home-auth-buttons {
  margin-top: 30px;
}

.home-auth-signup-wrapper {
  /* height: 140px; */
  margin-bottom: 20px;
  width: 100%;
}

.home-auth-login-wrapper {
  margin-top: 10px;
}

a.auth-signup-button, a.auth-signup-button:visited {
  width: 90%;
  height: 100%;
  font-weight: bold;
  font-size: 1.3rem;
  padding-bottom: .8rem;
  color: #fff !important;
}

.auth-login-button {

}

/* Tutorial Styles */

.jquery_modal {
  max-width: 86%;
}

.blocker {
  z-index: 1100 !important;
}

#tutorial {
  background-image: url(/img/background.png);
  background-repeat: repeat;
  background-position: left top;
}

.tutorial-container {
  font-family: 'Mon', sans-serif; /* Use the font family */
  color: #1a1a1a;
  font-size: 1.6rem;
  background-color: #fff;
  padding: 10px 6px 12px 40px;
  border-radius: 30px;
}

.tutorial-font-smaller {
  font-size: 1.3rem;
}

.tutorial-nav {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  font-family: var(--bs-body-font-family);
}

.tutorial-nav a, .tutorial-nav a:visited {
  color: #fff;
}

.tutorial-nav-disabled {
  color: #ccc;
}

.tutorial-nav-button {
  width: 180px;
  white-space: nowrap;
}

.tutorial-play-button {
  width: 100%;
  white-space: nowrap;
  font-size: .9rem !important;
}

.tutorial-exit {
  margin-top: 1rem;
  text-align: center;
  vertical-align: middle;
}

a.tutorial-close {
  font-size: .7rem;
  color: #cc00cc;
  font-style: italic;
  font-family: var(--bs-body-font-family);
  cursor: pointer;
}

img.tutorial-image {
  width: 90%;
  height: auto;
  border-radius: 20px;
}

span.emph {
  font-style: italic;
  text-decoration: underline;
}

/* Show User Styles */

.show-user-container {
  color: #1a1a1a;
  font-size: 1rem;
  background-color: #fff;
  padding: 10px 6px 12px 40px;
  border-radius: 30px;
}

img.show-user-profile-image {
  width: 160px;
  height: 160px;
  border-radius: 60px;
}

.show-user-balance {
  font-size: 1.8rem;
  background-color: #000;
  color: #fff;
  border-radius: 20px;
  margin-bottom: 20px;
  max-width: 500px;
  padding: 20px;
}

.recently-hatched-editions {
  background-color: #F76603;
  border-radius: 10px;
  padding: 10px;
  font-size: 0.9rem;
  max-width: 160px;
}

.show-crashi-name {
  font-size: 1.4rem;
  color: #000;
}

.last-mint-date {
  font-size: 0.7rem;
}

/* Game Styles */

.game-container {
  margin-top: 34px;
}

.game-grid-container {
  margin-right: 5px;
  vertical-align: top;
  max-height: 340px;
  max-width: 400px;
}

.controls-grid-container {
  margin-left: 5px;
  margin-right: 5px;
  min-height: 270px;
  max-height: 350px;
}

.guesses-grid-container {
  margin-left: 5px;
  min-height: 200px;
}

.game-wrapper {
  margin-top: -40px !important;
  margin-left: -16px !important;
  padding: 0.4rem;
  padding-left: 1rem;
  padding-top: 0;
  height: 280px;
}

form#guess-form {
  margin-top: 1.4rem;
}

.game-form {
  background-color: #404040 !important;
  color: #fff !important;
  border-radius: 6px !important;
  margin-left: 4px !important;
}

.game-form::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    color: #cccccc;
}
.game-form:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #cccccc;
    opacity: 1;
}
.game-form::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #cccccc;
    opacity: 1;
}
.game-form:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #cccccc;
}

.game-form:disabled {
  background-color: #737373 !important;
  font-style: italic;
}

.game-form-prefix {
  font-size: .8rem;
  background-color: #000 !important;
  padding-top: 8px;
  padding-bottom: 8px;
  color: #fff;
  border: none !important;
  min-width: 95px;
}

.game-button {
  width: 100% !important;
}

.beta-notice {
  margin-top: 30px;
  text-align: center;
  vertical-align: middle;
  font-size: .7rem;
  color: #fff;
  font-style: italic;
}

a.reload-link {
  color: #80d4ff !important;
  text-decoration: none;
  font-size: .8rem;
  font-style: normal;
}

a.reload-link:hover {
  color: #1ab2ff !important;
}

#game-table {
  width: 100%;
  margin-top: 1.4rem;
}

#game-table thead tr td, #game-table body tr td {
  font-size: .7rem;
}

.btn-smaller-text {
  font-size: .8rem;
}

.red {
  color: #cc2900 !important;
}

.green {
  color: #00e600 !important;
}

#fs {
  position: relative;
}

canvas#game {
  margin-top: -30px;
}

#crash-txt,
#txt,
#notice,
#crashimon-minted,
canvas {
  position: absolute;
}

#connecting-txt {
  margin-top: 70px !important;
  margin-left: 60px !important;
  font: 18px Verdana !important;
  background: transparent;
}

#txt {
  color: #fff;
  margin-top: 70px;
  margin-left: 120px;
  font: 48px Verdana;
  background: transparent;
  font-style: normal;
}

#crash-txt {
  color: #ff5c33 !important;
  margin-top: 30px;
  margin-left: 90px;
  font: 46px Verdana;
  background: transparent;
}

#notice {
  color: #fff;
  margin-top: -10px;
  margin-left: 40px;
  font: 16px Verdana;
  background: transparent;
  line-height: 2rem;
}

#crashimon-minted {
  color: #fff;
  margin-top: -10px;
  margin-left: 34px;
  font: 12px Verdana;
  background: #262626 !important;
  line-height: 1.2rem;
  border: 1px solid #fff;
  border-radius: 16px;
  width: 310px;
  height: 280px;
  display: none;
}

.crashimon-minted-header {
  font-size: .7rem;
}

img.crashimon-minted-main {
  max-width: 36%;
  height: auto;
  border-radius: 32px;
}

.crashimon-minted-name {
  display: inline;
  white-space: nowrap;
  font-size: 1.1rem;
  background-color: #ff6600;
  color: #fff;
  padding: 4px 4px 6px 4px;
  margin-top: 16px;
  min-width: 80%;
  max-width: 90%;
  border-radius: 6px;
}

.smaller-name-text {
  font-size: .8rem;
}

img.crashimon-also-minted {
  max-width: 46px;
  height: auto;
  border-radius: 8px;
  margin-right: 10px;
}

.hatched-this-round {
  font-size: .9rem;
  margin-top: -2px;
  padding-bottom: 14px;
  color: #fff;
}

.rarity-wrapper {
  clear: both;
  border-bottom: 1px solid #e6e6e6;
  margin-bottom: 10px;
  min-height: 66px;
}

.rarity-name {
  color: #99ccff;
}

.none-hatched {
  opacity: 0.6;
}

img.round-crashi-main {
  float: right;
  max-width: 50px;
  height: auto;
  border-radius: 16px;
  margin-top: 3px;
  margin-right: 25%;
}

.round-crashi-name {
  font-size: 1.4rem;
  color: #fff;
}

.minted-hatched-by {
  font-size: .8rem;
  line-height: 1.1rem;
  margin-top: 10px;
  margin-bottom: 6px;
}

.edition-no {
  font-size: .7rem;
}

.round-also-hatched {
  font-size: .8rem;
  margin-top: 6px;
  margin-bottom: 10px;
  line-height: 2rem;
  color: #ffb31a;
}

img.round-crashimon-also-minted {
  max-width: 38px;
  height: auto;
  border-radius: 6px;
  margin-right: 2px;
}

.starting-in {
  margin-top: 80px !important;
  margin-left: 60px !important;
  font: 20px Verdana !important;
}

.connected {
  color: #33cc33 !important;
}

.nav-user-info {
  max-width: 300px;
}

.mobile-shown-menu-pages {
  margin-top: 10px;
}

table thead tr td {
  font-size: .9rem;
}

table tbody tr td {
  font-size: .8rem;
  /* color: #fff; */
  color: #ffb31a;
}

tr.hatched td {
  color: #33cc33;
}

tr.crashed-row td {
  color: #ff5c33;
}

td.uname {
  font-size: .7rem;
}

td.username {
  overflow: hidden;
  text-overflow: ellipsis;
}

a.uname-link {
  color: #ffb31a;
  text-decoration: none;
}

a.uname-link-cashed {
  color: #33cc33;
  text-decoration: none;
}

/* Chat, History Results and My Collection Styles */

.chat-and-history-container {
  margin: 6px 10px;
  vertical-align: top;
}

ul#myTab {
  margin-top: 1.5rem;
}

table#results-table tr td {
  text-align: center;
  vertical-align: middle;
  font-size: 1rem;
}

div#history-overflow-wrapper, div#chat-overflow-wrapper, div#collection-overflow-wrapper {
  height: 500px;
  overflow-y: scroll;
}

div#collection-overflow-wrapper {
  padding-left: 20px;
  padding-top: 10px;
}

.nil {
  color: #fff;
}

table#chat-table {
  border-collapse: collapse;
}

table#chat-table tr, table#chat-table td {
  border: none;
  vertical-align: middle;
  padding: 1px;
  padding-bottom: 2px;
}

table#chat-table tr {
  border-bottom: 1px solid #808080;
}

td.profile-pic {
  width: 42px;
  height: 42px;
}

img.chat-profile-image {
  width: 42px;
  height: 42px;
  border-radius: 20px;
  text-align: right;
}

td.username {
  width: 106px;
  text-align: right;
  font-size: .7rem;
}

td.tstamp {
  width: 52px;
  text-align: left;
  color: #d9d9d9;
}

td.body {
  width: 100%;
  background-color: #f2f2f2;
  color: #4d4d4d;
}

.username-wrapper {
  padding-right: 8px;
}

.message-wrapper {
  padding-left: 10px;
  line-height: 1.6rem;
}

.username-wrapper a {
  color: #FAA432;
  text-decoration: none;
}

#chat-form {
  background: #383838;
}

table#chat-form-table {
  margin-top: 0px;
  padding-top: 0px;
  border-spacing: 0px;
  border-collapse: collapse;
}

table#chat-form-table, table#chat-form-table tbody, table#chat-form-table tbody tr, table#chat-form-table tbody tr td {
  border: none !important;
  background: #383838 !important;
}

table#chat-form-table tbody tr {
  height: 40px;
}

td.chat-input-id {
  width: 76%;
}

td.chat-submit-td {
  width: 24%;
  min-width: 240px;
}

input#chat-input {
  width: 100%;
  height: 40px;
  font-size: 1rem;
}

#chat-submit-button {
  width: 100%;
  height: 40px;
}

.chat-details {
  margin-top: -10px;
  padding-bottom: 10px;
  margin-bottom: 30px;
  font-size: .8rem;
}

a.chat-details-link {
  color: #b3b3b3;
  text-decoration: none;
}

#chat-details-info, #chat-details-info p {
  color: #FAA432;
}

.message-example {
  margin-left: 20px;
  padding-top: 0px;
  color: #fff;
  padding-bottom: 7px;
  margin-bottom: 7px;
  font-style: italic;
}

.emote-pane-inner {
  padding-top: 6px;
  line-height: 2rem;
}

.emote-nav-item {
  height: 30px !important;
}

.emote-nav-link {
  height: 30px !important;
  font-size: .8rem !important;
  padding-top: 4px !important;
}

.common, .greetings, .conversation, .game, .discussion {
  padding: 4px 8px;
  margin-left: 5px;
  margin-right: 5px;
  font-size: .7rem;
  border-radius: 7px;
  white-space: nowrap;
  text-decoration: none;
  color: #fff;
}

a.common:hover, a.greetings:hover, a.conversation:hover, a.game:hover, a.discussion:hover {
  color: #fff;
  text-decoration: underline;
}

.common {
  background: #0066ff;
}
.greetings {
  background: #ff661a;
}
.conversation {
  background: #2eb82e;
}
.game {
  background: #000;
}
.discussion {
  background: #c61aff;
}

#chatEmoteTab {
  margin-top: 0px;
  padding-top: 0px;
}

#chatEmoteTabContent {
  margin-bottom: 0px;
  padding-bottom: 0px;
}

.emote-pane-content {
  padding: 3px 3px !important;
}

.owned-mints-title {
  font-size: .8rem;
  margin-top: 4px;
}

.owned-mints-list {
  background-color: #F76603;
}

.rarity-description {
  font-size: .7rem;
}

/* Media Queries */

@media (max-width: 990px) {
  .game-container {
    max-width: 960px;
  }
  .game-grid-container {
    margin-left: 10px;
    min-width: 382px;
    max-width: 386px;
    padding-left: 4px;
    padding-right: 2px;
  }

  .guesses-grid-container {
    min-width: 230px;
    max-width: 320px;
  }

  .nav-user-info {
    display: block;
  }
  #full-menu-user-info {
    display: none;
  }
  .mobile-shown-menu-pages {
    display: block;
  }
  .hide-on-mobile {
    display: none;
  }

  .show-user-balance {
    font-size: 1.2rem;
    border-radius: 10px;
    max-width: 300px;
    padding: 16px;
  }

  .col-md-12 {
    margin-bottom: 10px;
  }

  table#results-table thead tr td,
  table#results-table tr td {
    font-size: .8rem;
  }

  .tutorial-container {
    font-size: 1.2rem;
    padding: 8px 4px 8px 30px;
  }

  .tutorial-font-smaller {
    font-size: .9rem;
  }

  .tutorial-nav-button {
    width: 130px;
    font-size: 1rem;
  }

  .tutorial-play-button {
    font-size: .8rem !important;
  }

}

@media (min-width: 991px) {
  .nav-user-info {
    display: none;
  }
  #full-menu-user-info {
    display: bock;
  }
  .mobile-shown-menu-pages {
    display: none;
  }
  .hide-on-mobile {
    display: block;
  }

  #game-table thead tr td, #game-table body tr td {
    font-size: .8rem;
  }
}

@media (max-width: 1400px) {
  .guesses-grid-container {
    margin-top: 10px;
  }
}

@media only screen and (min-width: 0px) and (max-width: 767px)  {

  .navbar-brand {
    font-size: 1.1rem;
    margin-left: -10px;
  }

  .navbar-toggler {
    margin-right: -10px;
  }

  .nav-user-info {
    font-size: .7rem;
    max-width: 240px;
  }

  .jquery_modal {
    max-width: 92%;
  }

  .btn-read {
    margin-top: 3px;
    padding: 6px 12px !important;
  }

  .game-container {
    margin-top: 26px;
  }

  .game-grid-container {
    margin-top: 0px;
    margin-left: 12px;
    padding: 10px 10px;
  }

  .controls-grid-container {
    min-width: 280px;
    max-width: 330px;
    margin-top: 10px;
    margin-right: 6px;
    min-height: 290px;
  }

  .guesses-grid-container {
    width: 96%;
    min-width: 414px;
    max-width: 740px;
    padding: 10px 10px;
    margin-left: 10px;
  }

  .results-grid-container {
    max-width: 95%;
    margin-right: 10px;
  }

  table#results-table thead tr td, table#results-table tbody tr td {
    font-size: .7rem;
  }

  form#guess-form {
    margin-top: 1.2rem;
  }

  .tabs-wrapper {
    min-height: 360px;
    padding-bottom: 30px !important;
  }

  .chat-and-history-container {
    margin-left: 0px !important;
    margin-top: -4px !important;
    margin-bottom: 20px !important;
  }

  .tab-content {
    border-radius: 20px !important;
  }
  .tab-pane {
    border-radius: 20px !important;
  }

  div#history-overflow-wrapper, div#chat-overflow-wrapper, div#collection-overflow-wrapper {
    height: 400px;
    border-radius: 20px !important;
  }

  td.profile-pic {
    width: 30px;
  }

  img.chat-profile-image {
    width: 30px;
    height: 30px;
    border-radius: 15px;
  }

  td.username {
    width: 70px;
    font-size: .6rem;
  }

  table#chat-form-table tbody tr {
    height: 36px;
  }

  td.chat-input-id {
    width: 70%;
  }

  td.chat-submit-td {
    width: 30%;
    min-width: 220px !important;
  }

  input#chat-input {
    width: 100%;
    height: 36px;
    font-size: .9rem;
  }

  #chat-submit-button {
    font-size: .9rem;
    height: 36px;
  }

  .comment-icon {
    font-weight: 300 !important;
    font-size: 1.1em !important;
    line-height: .01em !important;
    vertical-align: -.08em !important;
  }

  .emote-pane-content {
    padding: 0 0 !important;
  }

  .emote-nav-item {
    height: 22px !important;
  }

  .emote-nav-link {
    height: 22px !important;
    font-size: .7rem !important;
    padding-top: 2px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .common, .greetings, .conversation, .game, .discussion {
    font-size: .6rem;
    padding: 3px 4px;
    margin-right: 3px;
  }

  .shop-table tbody tr td {
    padding: 10px 3px;
    font-size: .7rem;
  }

  .continue-shopping-button {
    float: none !important;
    margin-top: 10px;
  }

  .checkout-wrapper {
    margin-top: 60px !important;
  }

  .checkout-table tbody tr td {
    padding: 10px 10px;
    font-size: .8rem;
  }

  td.checkout-product-name {
    font-size: .9rem !important;
  }

  .checkout-product-items {
    display: inline;
    font-size: .6rem;
    margin-left: 10px;
  }

  .final-payment-address {
    width: 96%;
    min-width: 320px;
    max-width: 360px;
    font-size: .7rem;
    font-weight: bold;
  }

  .beta-notice {
    margin-top: 16px;
    font-size: .6rem;
  }

  #game-table thead tr td, #game-table body tr td {
    font-size: .7rem;
  }

  .dropdown-for-messages {
    margin-left: -120px;
  }

  .tutorial-container {
    font-size: 1rem;
  }

  .tutorial-content {
    padding-top: 1.4rem !important;
  }

  .tutorial-font-smaller {
    font-size: .7rem;
  }

  .tutorial-image {
    margin-top: 1.2rem;
  }

  .tutorial-nav-button {
    width: 120px;
  }

  .tutorial-play-button {
    font-size: .7rem !important;
  }

}

@media only screen and (min-width: 726px) and (max-width: 751px)  {

  .controls-grid-container {
    min-width: 260px;
    max-width: 310px;
  }

}

@media only screen and (min-width: 701px) and (max-width: 725px)  {

  .controls-grid-container {
    min-width: 220px;
    max-width: 280px;
  }

}

@media only screen and (min-width: 676px) and (max-width: 700px)  {

  .controls-grid-container {
    min-width: 210px;
    max-width: 250px;
  }

}

@media only screen and (min-width: 651px) and (max-width: 675px)  {

  .controls-grid-container {
    min-width: 190px;
    max-width: 220px;
  }

}

@media only screen and (min-width: 551px) and (max-width: 650px)  {

  .controls-grid-container {
    min-width: 300px;
    max-width: 496px;
    width: 98%;
    margin-left: 12px;
  }

  .guesses-grid-container {
    width: 96%;
    min-width: 400px;
    max-width: 642px;
    padding: 10px 10px;
    margin-left: 10px;
  }

  .chat-and-history-container {

  }

  .tabs-wrapper {
    margin-top: 2px;
    padding-top: 2px;
    padding-left: 4px;
    padding-right: 4px;
  }

  #myTab {
    padding-left: 10px;
  }

  td.username {
    width: 90px !important;
  }
  td.body {
    width: 64% !important;
  }
}

@media only screen and (min-width: 501px) and (max-width: 550px)  {

  .controls-grid-container {
    min-width: 300px;
    max-width: 480px;
    width: 96%;
    margin-left: 12px;
  }

}

@media only screen and (min-width: 0px) and (max-width: 600px)  {

  .jquery_modal {
    max-width: 96%;
  }

  td.username {
    width: 90px !important;
  }
  td.body {
    width: 64% !important;
  }

  table#results-table thead tr td, table#results-table tbody tr td {
    font-size: .6rem;
  }

  ul#myTab li.nav-item button.tab-nav-link {
    font-size: 1rem !important;
    padding: 4px 10px !important;
  }

  .chat-details {
    font-size: .7rem;
  }

  .tutorial-nav-button {
    width: 100px;
    font-size: .9rem;
  }

  .tutorial-play-button {
    font-size: .6rem !important;
  }

}

@media only screen and (min-width: 0px) and (max-width: 500px)  {
  .nav-username {
    display: none;
  }

  .controls-grid-container {
    min-width: 320px;
    max-width: 456px;
    width: 96%;
    min-height: 276px;
    margin-left: 10px;
  }

  form#guess-form {
    margin-top: 1rem;
  }

  .tutorial-container {
    font-size: .8rem;
    padding-right: 1.8rem;
  }

  .tutorial-content {
    padding-top: 1.8rem !important;
  }

  .tutorial-font-smaller {
    font-size: .6rem;
  }

  .tutorial-image {
    margin-top: 1.2rem;
  }

  .mobile-buttons-span {
    margin-top: -10px !important;
    max-height: 22px !important;
  }

  .mobile-envelope-button, .mobile-cart-button {
    padding: 3px 7px;
  }

  i.mobile-nav-icon {
    font-weight: 820;
    font-size: .720em;
    line-height: .065em;
    vertical-align: .045em;
  }

  ul#myTab li.nav-item button.tab-nav-link {
    font-size: .9rem !important;
    padding: 3px 9px !important;
  }

  .tutorial-nav-button {
    width: 100px;
    font-size: .8rem;
  }

}

@media only screen and (min-width: 421px) and (max-width: 451px)  {
  .controls-grid-container {
    min-width: 380px;
    max-width: 440px;
    width: 92%;
    margin-left: 10px;
  }

  .guesses-grid-container {
    width: 94%;
    min-width: 320px;
    max-width: 446px;
    padding: 8px 8px;
    margin-left: 10px;
  }

}

@media only screen and (min-width: 401px) and (max-width: 420px)  {
  .game-grid-container {
    margin-left: 10px;
    padding: 6px 6px;
  }

  .guesses-grid-container {
    width: 94%;
    min-width: 300px;
    max-width: 396px;
    padding: 6px 6px;
    margin-left: 10px;
  }

}

@media only screen and (min-width: 0px) and (max-width: 400px)  {
  nav#mainNav {
    padding-top: 6px;
  }

  .navbar-brand {
    margin-left: -14px;
    margin-right: 0px;
    padding-right: 0px;
  }

  .navbar-toggler {
    padding: 4px 6px;
    line-height: .9rem;
    margin-right: 3px;
    margin-left: 3px;
  }

  .controls-grid-container {
    min-width: 300px;
    max-width: 496px;
    width: 96%;
    margin-left: 10px;
    margin-top: 4px;
  }

  .guesses-grid-container {
    width: 96%;
    min-width: 300px;
    max-width: 396px;
    padding: 4px 4px;
    margin-left: 4px;
    border-radius: 16px;
  }

  #game-table {
    margin-top: .6rem;
  }

  .mobile-buttons-span {
    margin-top: -14px !important;
    max-height: 16px !important;
  }

  .mobile-envelope-button, .mobile-cart-button {
    padding: 2px 8px;
  }

  i.mobile-nav-icon {
    font-weight: 800;
    font-size: .700em;
    line-height: .062em;
    vertical-align: .042em;
  }

  .tutorial-nav-button {
    width: 80px;
    font-size: .6rem;
  }

  .tutorial-play-button {
    font-size: .4rem !important;
  }
}

@media only screen and (min-width: 0px) and (max-width: 351px)  {
  .guesses-grid-container {
    width: 96%;
    min-width: 300px;
    max-width: 348px;
    padding: 2px 2px;
    margin-left: 2px;
    border-radius: 10px;
    margin-top: 6px;
  }

  #game-table {
    margin-top: 0px;
  }

}


@media only screen and (min-width: 392px) and (max-width: 408px)  {
  .game-grid-container {
    margin-left: 6px;
    padding: 3px 3px;
    min-width: 376px;
    max-width: 380px;
    width: 96%;
  }
}

@media only screen and (min-width: 381px) and (max-width: 391px)  {
  .game-grid-container {
    margin-left: 5px;
    padding: 2px 2px;
    min-width: 372px;
    max-width: 376px;
    width: 100%;
  }
  .game-wrapper {
    margin-left: -20px !important;
  }
}

@media only screen and (min-width: 361px) and (max-width: 380px)  {

  .navbar-brand {
    font-size: .9rem;
  }

  .game-container {
    margin-top: -8px;
  }

  .game-grid-container {
    margin-left: -1px;
    padding: 12px 12px;
    min-width: 350px;
    width: 120%;
    border-radius: 0px;
  }

  .game-wrapper {
    margin-left: -20px !important;
  }

  #game {
    margin-left: -2px;
  }

  table#recent-scores tbody tr td {
    font-size: .7rem;
  }

}

@media only screen and (min-width: 0px) and (max-width: 360px)  {
  .game-container {
    margin-top: -8px;
  }

  .game-wrapper {
    margin-left: -22px !important;
  }

  .game-grid-container {
    margin-left: -1px;
    padding: 12px 12px;
    min-width: 350px;
    width: 120%;
    border-radius: 0px;
  }

  #game {
    margin-left: -4px;
  }

  .recent-scores-wrapper {
    margin-top: -12px;
    margin-left: -12px;
  }

  table#recent-scores tbody tr td {
    font-size: .6rem;
  }

  .navbar-toggler {
    padding-top: 2px;
    padding-left: 4px;
    padding-right: 4px;
  }

}

@media only screen and (min-width: 768px) and (max-width: 849px)  {

  .game-grid-container {
    margin-left: 12px;
    padding: 10px 10px;
  }

  .controls-grid-container {
    width: 100%;
    min-width: 310px;
    max-width: 350px;
  }

  .guesses-grid-container {
    width: 100%;
    min-width: 510px;
    max-width: 740px;
    padding: 10px 10px;
    margin-left: 16px;
  }

  #game-table thead tr td, #game-table body tr td {
    font-size: .7rem;
  }

  .tutorial-container {
    font-size: .9rem;
  }

}

@media only screen and (min-width: 991px) and (max-width: 1400px) {
  .game-container {
    max-width: 1300px;
  }

  .game-grid-container {
    min-width: 372px;
    max-width: 390px;
    margin-left: 20px;
    padding: 4px 4px;
  }

  .guesses-grid-container {
    min-width: 330px;
    max-width: 700px;
    padding: 0 0;
  }

  #game-table thead tr td, #game-table body tr td {
    font-size: .7rem;
  }

  .tutorial-container {
    font-size: 1.2rem;
  }

  .tutorial-font-smaller {
    font-size: .9rem;
  }

  .tutorial-image {
    margin-top: 2rem;
  }
}

@media only screen and (min-width: 960px) and (max-width: 1040px) {

  .guesses-grid-container {
    min-width: 270px;
    max-width: 290px;
    padding: 0 0;
  }

  .tutorial-image {
    margin-top: 1rem;
  }

}

@media only screen and (min-width: 850px) and (max-width: 959px) {

  .game-grid-container {
    width: 100%;
    min-width: 400px;
    max-width: 420px;
    padding: 6px 6px;
    margin-left: 20px;
  }

  .controls-grid-container {
    width: 100%;
    min-width: 320px;
    max-width: 380px;
  }

  .guesses-grid-container {
    width: 100%;
    min-width: 580px;
    max-width: 820px;
    padding: 10px 10px;
    margin-left: 16px;
  }

  #game-table thead tr td, #game-table body tr td {
    font-size: .8rem;
  }
}