/* Timestamp for chat bubbles */
.chat-timestamp {
  position: absolute;
  right: 10px;
  bottom: 4px;
  font-size: 0.6em;
  color: #b0b0b0;
  opacity: 0.85;
  pointer-events: none;
}
.msg {
  position: relative;
  /* ...existing styles... */
  padding-bottom: 20px !important;
}

.msg {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.msg p {
  margin: 0;
  text-align: left;
  align-self: center;
}

.chat-username-row {
  display: flex;
  align-items: center;
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.182);
  padding-right: 8px;
  gap: 5px;
  height: 25px;
}

.chat-username-row:hover {
  background-color: rgba(0, 0, 0, 0.25);
  scale: 1.05;
  transition: 0.1s;
}

.chat-rank-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.139);
  border-radius: 5px;
}

.chat-rank-badge div {
  aspect-ratio: 1/1;
  height: 25px;
}
/* Animation for new chat message: fade in and move up */
.fade-in-chat {
  animation: fadeInChat 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: 2;
  position: relative;
}
@keyframes fadeInChat {
  from {
    opacity: 1;
    transform: translateY(30px) scale(1);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* Colored background for all result rows */
.result-row-colored {
  background: rgba(255, 255, 255, 0.07);
  transition: background 0.4s;
}
/* Animation for new result row: highlight, then fade to zebra */

.fade-in-result {
  animation: fadeInResult 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: 2;
  position: relative;
}
@keyframes fadeInResult {
  from {
    opacity: 1;
    transform: translateY(-30px) scale(1);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

:root {
  --primary-color: #183049;
  --secondary-color: #0f212e;
  --tertiary-color: #213c55;
  --quaternary-color: #4242424d;
}

* {
  text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.35);
}

* {
  box-sizing: border-box;
}
body {
  cursor: default;
  font-family: "Mukta", sans-serif;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin: 0;
  /* background: rgba(19, 33, 51, 1); */
  /* background: #030d1a; */
  background: rgb(3, 13, 26);
  background: linear-gradient(90deg, rgba(3, 13, 26, 1) 0%, rgba(10, 32, 60, 1) 50%, rgba(3, 13, 26, 1) 100%);
}
input {
  font-family: "Mukta", sans-serif;
  border: 2px solid #294a69;
  text-align: left;
  background-color: #0f212e;
  color: white;
  border-radius: 5px;
  transition: 0.2s ease;
}

input:hover {
  border-color: #33618b; /* Replace 'your-hover-color' with your desired hover color */
  transition: 0.2s ease;
}

a {
  text-decoration: none;
  color: unset;
  touch-action: manipulation;
}

select {
  height: 35px;
}

h1,
h2 {
  margin: 0;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0px 2px 1px #0000004d;
  width: 100%;
  height: 60px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(0, 14, 28, 0.5);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
}

footer {
  height: 300px;
  display: flex;
  /* justify-content: space-around; */
  /* margin-top: auto; */
  /* height: 100px; */
  /* width: 100vw; */
  background-color: #06141f;
  color: rgb(145, 145, 145);
}

footer div {
  margin-top: 80px;
}

footer h1 {
  font-size: 25px;
}

#footer_links_media {
  display: flex;
  width: 100%;
  justify-content: center;
  margin: 0;
}

#footer_links_media a {
  color: white;
  text-decoration: none;
}

#footer_media {
  padding-left: 100px;
}

#footer_logo {
  padding-left: 150px;
}

#footer_logo p {
  text-align: center;
}

#footer_logo img {
  opacity: 0.6;
  height: 100px;
  width: auto;
}

#footer_media img {
  height: 30px;
  width: auto;
  padding-right: 10px;
}

*:focus {
  outline: none;
}

img {
  -webkit-filter: drop-shadow(0px 2px 0px #00000050);
  filter: drop-shadow(0px 2px 0px #00000050);
}

#logoContainer {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo {
  height: 90%;
  margin-left: 10px;
  margin-right: 10px;
  transition: 0.1s;
  -webkit-filter: drop-shadow(0px 2px 0px #00000050);
  filter: drop-shadow(0px 2px 0px #00000050);
}

.logo:hover {
  scale: 1.1;
}

.balance-container {
  position: relative;
  background-color: var(--secondary-color);
  border-radius: 50px;
  display: flex;
  height: 45px;
  align-items: center;
  box-shadow: 0px 2px 1px #00000040;
}

#currency_selector {
  width: fit-content;
  padding-left: 0;
  margin-left: 5px;
  border-radius: 50px;
  height: 100%;
  font-size: medium;
  font-weight: bold;
  box-shadow: none;
}

#currency_selector option {
  margin-top: 10px;
}

.balance {
  margin-top: 10px;
  color: #fafafa;
  text-indent: 5%;
  width: 140px;
  height: 20px;
}

.headerButtons {
  height: 45px;
  width: 45px;
  border-radius: 50px;
}

#walletButton {
  background-color: #f1800f; /* Solid background color */
  background-image: url("../../SkellySlots/wallet.png"); /* Path to your background image */
  background-size: 20px; /* Ensures the image covers the entire area */
  background-position: center; /* Centers the image */
  background-repeat: no-repeat; /* Prevents the image from repeating */
}

#walletButton:hover {
  background-color: #ff8000; /* Solid background color */
}

.headerButtonContainer {
  display: none;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  border-radius: 50px;
  background-color: transparent;
  box-shadow: none;
  height: 51px;
  width: 51px;
  padding: 0px;
}

.headerButtonContainer:hover {
  background-color: transparent;
}

#connect-wallet {
  height: 45px;
  width: 100px;
  border-bottom-left-radius: 0%;
  border-top-left-radius: 0%;
  padding: 0%;
  box-shadow: none;
}

.balanceAndWallet {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* FOR ANONYMOUS SLIDER        The switch - the box around the slider */
/* The switch - the box around the slider */
#anon_toggle {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

#anon_toggle > p {
  margin-top: 0;
  padding-right: 10px;
  font-size: 20px;
}

#anon_switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
#anon_switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
#anon_slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 5px;
}

#anon_slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 3px;
}

#anon_switch > input:checked + #anon_slider {
  background-color: #2196f3;
}

#anon_switch > input:focus + #anon_slider {
  box-shadow: 0 0 1px #2196f3;
}

#anon_switch > input:checked + #anon_slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
/*OF ANONYMOUS SLIDER----------------------------------------------------------------*/

#volume {
  display: flex;
  justify-content: center;
}

#volume > p {
  margin-top: 0;
  margin-bottom: 0;
  padding-right: 10px;
  font-size: 20px;
}

#volume > input {
  cursor: grab;
}

.center-image {
  display: block;
  margin: auto;
  width: 100%;
  max-width: 440px;
  padding: 50px;
}

.coin {
  display: block;
  margin: auto;
  width: 175px;
}

#coin-background {
  background-color: #101920;
  margin: auto;
  padding: 20px;
  width: 200px;
  border-radius: 20px;
  margin-bottom: 10px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.button-container {
  display: flex;
  justify-content: center;
  column-gap: 10px;
  padding: 25px;
  background-color: #0f212f;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

#coinflip-buttons #coinflip-amount,
#coinflip-ht,
#coinflip-enter {
  box-shadow: none;
}

#coinflip-buttons {
  padding: 25px;
  background-color: #152029;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.25);
}

#coinflip_amount_house {
  width: 45%;
  height: 60px;
  margin: auto;
  border-radius: 100px;
}

#coinflip_amount {
  border-radius: 100px;
}

.coinflipOption {
  height: 60px;
  width: 45%;
  margin-top: 10px;
  border-radius: 30px;
  color: white;
  background-color: var(--secondary-color);
  padding: 5px;
  max-width: 200px;
  margin-inline: 2.5px;
}

#coinflipTails {
  border-top-right-radius: 100px;
  border-bottom-right-radius: 100px;
  text-align: left;
  font-size: medium;
}

#coinflipHeads {
  border-top-left-radius: 100px;
  border-bottom-left-radius: 100px;
  text-align: right;
  font-size: medium;
}

.coinflipOption:hover {
  background-color: var(--secondary-color);
}

#coinflip {
  border-radius: 25px;
}

button:hover {
  background-color: #33618b;
  transition: background-color 0.2s ease;
  transition: 0.2s ease;
}

button:not(:hover) {
  transition: background-color 0.2s ease;
  transition: 0.15s ease;
}

button.active {
  background-color: #1b2c38;
  transition: background-color 0.1s ease;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 1);
}

#progressBar {
  height: 15px;
  width: 100%;
  border-radius: 5px;
}

::-webkit-progress-bar {
  background-color: var(--secondary-color);
  border-radius: 5px;
}

::-webkit-progress-value {
  background-color: #f1800f;
  background-image: linear-gradient(to right, #a75a11, #f09814);
  animation: progress-animation 5s linear infinite;
  border-radius: 5px;
}

/* Style the custom scrollbar */
:not(.scrollbar)::-webkit-scrollbar {
  width: 8px;
  display: none;
}

.scrollbar::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: #1c2831;
}

::-webkit-scrollbar-thumb {
  background: #2d404e;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #395163;
}

.centered-content {
  margin: 10px auto;
  text-align: center;
}

.sidebar {
  height: fit-content;
  width: 60px;
  left: 0px;
  position: fixed;
  top: 120px;
  background: rgba(44, 44, 44, 0.514);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: left 0.3s;
  z-index: 100;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
}

.sidebar-content {
  padding-top: 20px;
  padding-bottom: 20px;
}

button {
  background-color: #294a69;
  color: #fafafa;
  border: none;
  cursor: pointer;
  width: 150px;
  font-family: "Mukta", sans-serif;
  border-radius: 10px;
  box-shadow: 0px 2px 1px #0000004d;
  transition: background-color 0.3s ease;
  touch-action: manipulation;
}

.sidebar-buttons {
  width: 60px;
  height: 50px;
  border-radius: 10%;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  box-shadow: none;
}

.sidebar-buttons a {
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sidebar-buttons:hover {
  background-color: transparent;
}

.sidebar-buttons:hover .sidebar-icons {
  width: 35px;
}

.sidebar-icons {
  width: 30px;
  transition: 0.1s;
  -webkit-filter: drop-shadow(0px 2px 0px #00000050);
  filter: drop-shadow(0px 2px 0px #00000050);
}

#questionmark {
  margin-top: 100%;
}

.sidebar-buttons[title]:hover::after {
  content: attr(title);
  position: absolute;
  left: 75px;
  font-size: 15px;
}

.neck {
  /* background-image: url("../../SkellySlots/hash1.png"); */
  /* background-image: url("../../SkellySlots/AJWH2388.PNG"); */
  /* background-size: 100% 200%; */
  background-position-y: center;
  background-color: var(--secondary-color);
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
  /* z-index: 70; */
  height: 450px;
}

.welcome {
  /* background-color: rgb(18, 45, 88); */
  /* background-color: #06141f; */
  background-color: var(--secondary-color);
  /* padding-top: 60px; */
  /* opacity: 0.1; */
  height: 100%;
  width: 100%;
  display: grid;
  /* grid-template-columns: 0.5fr 1fr; */
  /* justify-content: center; */
  /* align-items: center; */
  font-size: 12px;
  color: white;
  z-index: 1;
  box-shadow: inset 0px -3px 5px #0000004d;
}

#welcome_gradient {
  box-shadow: inset 0px -3px 5px #0000004d;
  position: absolute;
  width: 100%;
  height: 100%;
  /* background: linear-gradient(
		to right,
		var(--secondary-color),
		var(--secondary-color) 33%,
		transparent
	); */
  /* background: linear-gradient(to right, #06141f, #06141f 40%, rgba(6, 20, 31, 0.976) 60%, rgba(6, 20, 31, 0.771) 80%, transparent); */
  /* background: linear-gradient(
		to right,
		#06141f,
		#06141f 40%,
		rgba(6, 20, 31, 0.976) 60%,
		rgba(6, 20, 31, 0.771) 80%,
		transparent
	); */
}

.left-side {
  /* margin-top: 60px; */
  height: 100%;
  max-height: 450px;
  z-index: 1;
  padding-left: 60px;
  padding-top: 60px;
  position: relative;
  /* display: flex; */
  /* flex-direction: column; */
  /* justify-content: center; horizontally center */
  /* align-items: center; vertically center if needed */
}

#right-side {
  display: flex;
  /* flex-direction: column; */
  justify-content: center; /* horizontally center */
  align-items: center; /* vertically center if needed */
  margin-top: 60px;
}

#carousel_left_btn {
  position: absolute;
  width: 50px;
  height: 75px;
  z-index: 70;
  left: 50px;
  top: 50%;
  transform: translateY(-50%);
  box-shadow: none;
  background-color: rgba(0, 0, 0, 0);
  color: white;
  font-size: 40px;
}
#carousel_right_btn {
  position: absolute;
  width: 50px;
  height: 75px;
  z-index: 70;
  right: 50px;
  top: 50%;
  transform: translateY(-50%);
  box-shadow: none;
  background-color: rgba(0, 0, 0, 0);
  color: white;
  font-size: 40px;
}

#carousel_left_btn:hover,
#carousel_right_btn:hover {
  font-size: 45px;
}

.carousel_text {
  position: absolute;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
  /* margin-top: 60px; */
  width: fit-content;
  height: 70%;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s;
  display: flex;
  flex-direction: column; /* Arrange items vertically */
  justify-content: center; /* Center items horizontally */
  align-items: center; /* Center items vertically */
  border-radius: 20px;
  padding: 10px;
  background: rgba(45, 63, 79, 0.5);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(18px);
}

.carousel_text button {
  width: 50%;
  height: 50px;
  border-bottom: #0057bb solid;
}

.carousel_text[data-active="on"] {
  opacity: 1;
  z-index: 2;
}

.carousel_text h1 {
  font-size: 50px;
  color: white;
}

.carousel_text p {
  margin: 15px;
  font-size: 20px;
}

.carousel_text button {
  background-color: #0075ff;
}
.carousel_text button:hover {
  background-color: #1481ff;
}

.carousel_content {
  position: absolute;
  transition: opacity 0.3s;
  opacity: 0;
}
.carousel_content[data-active="on"] {
  opacity: 1;
}

/* #carousel_1 {
	width: 60%;
	float: right;
	z-index: 1;
} */
#carousel_1 {
  object-fit: cover;
  height: 390px;
  width: 100%;
}
#carousel_2 {
  object-fit: cover;
  height: 390px;
  width: 100%;
}
#carousel_3 {
  object-fit: cover;
  height: 390px;
  width: 100%;
}

#connect-wallet-neck {
  border-radius: 50px;
  width: 85%;
  height: 45px;
  font-size: 15px;
  border-bottom: #0057bb solid;
}

#connect-wallet2-neck {
  border-radius: 3px;
  width: fit-content;
  height: 40px;
  font-size: 15px;
  background-color: #2f4553;
  border-bottom: #2a3d49 solid;
}

#connect-wallet2-neck:hover {
  background-color: #3b5464;
}

.container {
  max-width: 1000px;
  margin: auto;
}

.card {
  text-align: center;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.card > div {
  flex-grow: 1;
  width: 100%;
}

.settings {
  /* margin-top: -50px; */
}

.gamename {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  color: white;
}

#lottoamount {
  height: 100%;
  width: 70px;
  background-color: var(--secondary-color);
  box-sizing: border-box;
  color: white;
}

#enterLottery {
  height: 100%;
  box-sizing: border-box;
}

.lottery {
  display: flex;
  flex-direction: column;
  width: 98%;
  background-color: var(--tertiary-color);
  border-radius: 15px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);

  /* box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); */
  align-items: center;
  margin: auto;
}

.lottery-neck {
  justify-content: space-between;
  margin-bottom: 1%;
  margin-top: 1%;
  height: 25px;
  color: white;
  display: flex;
  align-items: center; /* Align items at the bottom */
  width: 98%;
}

.lottery-progress {
  width: 98%;
}

.lotto-timer {
  margin-top: 10px;
}

.lottery-buttons {
  display: flex;
  justify-content: space-between;
  width: 98%;
}

.title {
  color: white;
  display: flex;
  justify-content: center; /* Center items horizontally */
  align-items: center; /* Center items vertically */
  height: 100%; /* Set the height to 100% to occupy the entire height of the container */
}

#lottoHistory {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  background-color: #0f212e;
  margin-top: 1%;
  border-radius: 15px;
}

#historyTableSection {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 1%;
  color: white;
  width: 100%;
}

#historyTableBody td,
#historyTableBody th {
  border-style: solid;
  border-width: 2px;
  border-color: #1d334b;
  border-left: none;
  border-right: none;
  border-bottom: none;
  padding: none;
}

#lottoTable {
  width: 100%;
}

#showHistoryButton {
  box-shadow: none;
  width: 100%;
  height: 30px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  background-color: #1d334b;
}

#showHistoryButton:hover {
  background-color: #29435f;
}

.bet-info {
  display: flex;
  align-items: center;
  color: white;
  height: 25px;
}

.name {
  display: flex;
  align-items: center;
  margin-bottom: -25px;
}

.timer {
  margin-top: 25px;
  display: flex;
  align-items: center;
}

#divs {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  margin: auto;
  margin-bottom: 50px;
}

.infoDiv,
.rb_container {
  flex: 1;
  min-width: 0;
}

.infoDiv {
  height: 300px;
  width: 95%;
  border-radius: 15px;
  display: flex;
  margin: 0.5%;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
  background: linear-gradient(180deg, rgba(1, 63, 148, 0.05) 0%, rgba(1, 63, 148, 0.5) 100%);
  color: white;
}

.divImage {
  position: relative;
  width: 100%;
  box-shadow: none;
  margin-left: 1%;
  max-width: 250px;
}

.divImage img {
  margin-left: auto;
  margin-right: auto;
  margin-top: 5%;
  margin-bottom: auto;
  width: 100%; /* Ensure image takes up full width of container */
  max-width: 300px;
  min-width: 200px;
  height: auto;
  border-radius: 5px;
}

.divImage button {
  position: absolute;
  bottom: 5%;
  left: 5%;
  width: 90%; /* Ensure button takes up full width of container */
  height: 40px;
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.5);
}

#rakebackRankInfo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#infoDiv_1_btn {
  background-color: #0075ff;
  border-bottom: #0057bb solid;
  transition: background-color 0.2s ease;
  font-size: 16px;
  height: 50px;
}

#infoDiv_1_btn:hover {
  background-color: #1481ff;
}

#info2 {
  background-color: #ffa600;
  border-bottom: #a46600 solid;
  transition: background-color 0.2s ease;
}

#info2:hover {
  background-color: #ffad16;
}

.divText {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
  color: white;
  padding: 10px;
  padding-top: 35px;
  padding-bottom: 35px;
  justify-content: center;
  align-items: center;
}

.divText p {
  margin: 0;
  display: flex; /* Enable flexbox */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  height: 100%; /* Make the container fill its parent height */
  text-align: center;
}

#temp_event_container_small {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);

  /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); */
  background: hsla(209, 44%, 23%, 1);

  background: linear-gradient(270deg, hsla(209, 44%, 23%, 1) 0%, hsla(211, 51%, 19%, 1) 100%);

  background: -moz-linear-gradient(270deg, hsla(209, 44%, 23%, 1) 0%, hsla(211, 51%, 19%, 1) 100%);

  background: -webkit-linear-gradient(270deg, hsla(209, 44%, 23%, 1) 0%, hsla(211, 51%, 19%, 1) 100%);

  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#213C55", endColorstr="#183049", GradientType=1 );

  position: relative;
  height: 110px;
  margin-left: 15%;
  width: 70%;
  border-radius: 5px;
}

#temp_event_header_small {
  position: absolute;
  color: white;
  /* text-align: center; */
  float: left;
  /* text-decoration:underline; */
  margin: 0;
  top: 5px;
  left: 5%;
  font-size: 30px;
}

#temp_event_time_small {
  position: absolute;
  color: rgb(238, 64, 64);
  /* text-align: center; */
  float: right;
  /* text-decoration:underline; */
  margin: 0;
  top: 15px;
  right: 5%;
  font-size: 20px;
}

#temp_event_pool_small {
  position: absolute;
  color: white;
  font-size: 20px;
  margin: 0;
  top: 60px;
  left: 5%;
}

#temp_event_participate {
  position: absolute;
  background-color: rgb(185, 120, 0);
  /* font-size: 20px; */
  top: 60px;
  right: 5%;
  height: 30px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}

#temp_event_participate:hover {
  background-color: rgb(209, 142, 16);
}

#temp_event_container {
  /* height: 700px; */
  display: none;

  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);

  /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); */
  background: hsla(209, 44%, 23%, 1);

  background: linear-gradient(270deg, hsla(209, 44%, 23%, 1) 0%, hsla(211, 51%, 19%, 1) 100%);

  background: -moz-linear-gradient(270deg, hsla(209, 44%, 23%, 1) 0%, hsla(211, 51%, 19%, 1) 100%);

  background: -webkit-linear-gradient(270deg, hsla(209, 44%, 23%, 1) 0%, hsla(211, 51%, 19%, 1) 100%);

  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#213C55", endColorstr="#183049", GradientType=1 );

  position: relative;
  border-radius: 5px;
}

#temp_event_header {
  color: white;
  text-align: center;
  /* text-decoration:underline; */
  margin: 0;
  font-size: 30px;
  width: 100%;
}
#temp_event_time {
  color: rgb(238, 64, 64);
  text-align: center;
  /* text-decoration:underline; */
  margin: 0;
  font-size: 20px;
  width: 100%;
}

#temp_event_pool {
  color: white;
  font-size: 20px;
  margin: 5px;
  margin-left: 25px;
  text-align: center;
}

#temp_event_rules {
  color: white;
  font-size: 18px;
  margin-bottom: 0px;
  margin-left: 25px;
  margin-right: 25px;
  text-align: center;
}

/* #temp_event_rules_link {
  color: white;
  font-size: 20px;
  margin-bottom: 0;
  margin-top: 5px;
  margin-right: 25px;
  float: right;
  text-decoration: underline;
} */

#temp_event_rules a {
  color: white;
}

#temp_event_rules_link {
  display: none;
  visibility: hidden;
}

#temp_event_placevotes {
  color: white;
  float: left;
  width: 300px;
  font-size: 20px;
  padding-top: 20px;
  margin-bottom: 0px;
  margin-left: 100px;
  text-align: justify;
}

#temp_event_currentvotes {
  color: white;
  float: right;
  width: 380px;
  font-size: 20px;
  padding-top: 20px;
  margin-bottom: 0px;
  margin-right: 25px;
  text-align: justify;
}

#votes_canvas {
  position: absolute;
  left: 350px;
  bottom: 102px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  /* background-color: red; */
}

#vote_buttons {
  /* padding-top: 550px; */
  padding-left: 25px;
  padding-top: 10px;
  padding-bottom: 50px;
  width: 325px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* overflow: wrap; */
  /* flex-direction: row; */
}

.vote_btn {
  height: 145px;
  width: 145px;
  margin-bottom: 10px;
  color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  display: flex;
  border-radius: 5px;
  cursor: pointer;
  transition-duration: 0.2s;
}

#vote_checkout {
  /* background-color: #db8f1c; */
  /* background-color: #dbb51c; */
  background: #db8f1c;
}

#vote_dice {
  /* background-color: #105eb4; */
  /* background-color: #2c82de; */
  background: #105eb4;
}

#vote_limbo {
  /* background-color: #207511; */
  /* background-color: #30a91a; */
  background: #207511;
}

#vote_mines {
  /* background-color: #4505a6; */
  /* background-color: #531aa9; */
  background: #4505a6;
}

#vote_plinko {
  /* background-color: #000476; */
  /* background-color: #000598; */
  background: #000476;
}

#vote_blackjack {
  /* background-color: #8a2e00; */
  /* background-color: #ab3900; */
  background: #8a2e00;
}

.vote_btn_selected {
  /* background-color: rgba(0, 0, 0, 0.491); */
  border-color: rgba(0, 0, 0, 0.313);
  border-style: solid;
  border-width: 5px;
  transition-duration: 0.2s;
}

#collapse_minigame {
  width: 100%;
  height: 40px;
}

#collapse {
  width: 100%;
  height: 40px;
  border-top-left-radius: 0%;
  border-top-right-radius: 0%;
  font-size: medium;
  background-color: #1d334b;
  box-shadow: none;
}

#collapse:hover {
  background-color: #29435f;
}

#dwamount {
  width: 75%;
  height: 40px;
  text-align: center;
  margin-bottom: 2%;
  background-color: var(--quaternary-color);
  color: white;
}

#depositButton {
  height: 40px;
  margin-right: 1%;
  margin-bottom: 2%;
  box-shadow: none;
  min-width: 75px;
  width: 30%;
}

#depositButton:hover {
}

#withdrawButton {
  height: 40px;
  width: 30%;
  min-width: 75px;
  box-shadow: none;
}

#withdrawButton:hover {
}

/* #topUpBtn {
	width: 61.5%;
	height: 40px;
}

#topUpBtn[data-active="false"] {
	background: #656565;
} */

.usernameDiv {
  display: flex;
  /* align-items: center; */
  height: 30px;
  justify-content: center;
  padding: 0;
  margin: auto;
  margin-bottom: 5%;
  margin-top: 5%;
}

#usernameInput {
  height: 30px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-width: 0px;
  text-align: center;
  margin-bottom: 2%;
  background-color: var(--quaternary-color);
  color: white;
  box-sizing: border-box;
  box-shadow: 0px 3px 5px #0000004d;
}

#setUsername {
  height: 30px;
  margin-right: 1%;
  margin-bottom: 2%;
  box-shadow: none;
  min-width: 75px;
  width: 10%;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  box-sizing: border-box;
  box-shadow: 0px 3px 5px #0000004d;
}

.profile {
  display: flex;
}

.progressionDiv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: auto;
  height: 100%;
  margin-left: 0;
}

.progressionDiv div {
  -webkit-filter: drop-shadow(0px 2px 0px #00000050);
  filter: drop-shadow(0px 2px 0px #00000050);
}

#progressionDivQuests {
  max-height: 50px;
  height: 40px;
  margin: auto;
}

#current_rank {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#ranks_popUp {
  min-width: 25%;
  /* background: rgb(24, 48, 73); */

  background: rgb(20, 28, 51);
  background: linear-gradient(180deg, rgb(8, 69, 155) 0%, rgb(15, 30, 51) 100%);
}

#rankContainer {
  border: rgb(7, 19, 31) solid 2px;
  border-radius: 5px;
  background: rgb(31, 45, 66);
  background: linear-gradient(0deg, rgba(31, 45, 66, 1) 25%, rgba(36, 55, 83, 1) 75%);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
  min-width: 75%;
}

#rankContainer > p {
  margin: 0px;
  text-align: center;
}

#rankImage {
  aspect-ratio: 1/1;
  width: 100%;
  background-size: cover;
  background-position: center;
}

.rankimg {
  aspect-ratio: 1/1;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.allRanks {
  border-radius: 5px;
  width: 100%;
  height: 60px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  margin: auto;
  display: flex;
  border: rgb(7, 19, 31) solid 2px;
  border-radius: 5px;
  background: rgb(31, 45, 66);
  background: linear-gradient(270deg, rgba(31, 45, 66, 1) 25%, rgba(36, 55, 83, 1) 75%);
  margin-bottom: 10px;
}

.rankInfo > p {
  margin: 0px;
  margin-left: 5px;
  text-align: left;
}

.rankInfo {
  display: flex;
  flex-direction: column;
  align-items: baseline;
  justify-content: center;
}

.currentLevel,
.nextLevel {
  font-size: smaller;
  color: black;
}

.progressionDiv p {
  margin: 0;
}

.levelProgress {
  flex-grow: 1;
  margin: 0 5px; /* Adjust the value as needed */
  height: 8px;
  background-color: var(--quaternary-color);
  border-radius: 5px;
  box-shadow: 0px 2px 3px #0000004d;
}

#questsProgress {
  flex-grow: 1;
  margin: 0 10px; /* Adjust the value as needed */
  height: 10px;
  background-color: var(--quaternary-color);
  border-radius: 5px;
}

#quests_popUp h2 {
  position: absolute;
  top: 1%;
  left: 0;
  width: 100%;
}

#quest_list {
  margin: auto;
}

#quest_list h3 {
  margin-top: 25px;
}

.cryptohopper-web-widget {
  width: 100%;
}

#pf_container {
}

.pf_seed {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-bottom: 10px;
  border-style: solid;
  border-width: 2px;
  border-color: #294a69;
  background-color: #545d64;
  margin-left: 5%;
  width: 90%;
  border-radius: 3px;
  box-shadow: 0px 3px 5px #0000004d;
}

#pf_server_seed {
  background-color: #545d64;
}

.pf_seed > input {
  font-size: 13px;
  margin: 0;
  padding: 0;
  padding-left: 5px;
  border: none;
  border-radius: 0;
  width: 60%;
  overflow-x: scroll;
  line-height: 30px;
}

.pf_seed > button {
  width: 40%;
  border-radius: 0;
  box-shadow: none;
}

#pf_nonce {
  display: flex;
  flex-direction: row;
  justify-content: center;
  font-size: 13px;
  margin-bottom: 10px;
  border-style: solid;
  border-width: 2px;
  border-color: #294a69;
  margin-left: 5%;
  width: 90%;
  height: 30px;
  line-height: 27px;
  border-radius: 3px;
  box-shadow: 0px 3px 5px #0000004d;
}

#pf_nonce > p {
  padding-left: 5px;
  margin: 0;
  text-align: left;
  width: 60%;
  background-color: #545d64;
}
#pf_nonce > div {
  background-color: #294a69;
  width: 40%;
}

#pf_widget {
  width: 90%;
  margin-bottom: 20px;
}

#auth_container {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.405);
  z-index: 100;
  /* display: flex; */
  justify-content: center;
  align-items: center;
  display: none;
  visibility: hidden;
}

#auth_alert {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  border-radius: 5px;
  border-style: solid;
  border-color: #294a69;
  border-width: 3px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  height: 200px;
  width: 400px;
  background-color: var(--primary-color);
}

.popUp {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.405);
  z-index: 100;
  justify-content: center;
  align-items: center;
  display: none;
}

.general_popUp {
  color: white;
  border-radius: 15px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  width: fit-content;
  max-width: 98%;
  height: fit-content;
  max-height: 80%;
  background-color: #28354b;
  overflow-y: auto;
  overflow-x: hidden;
  text-align: center;
  position: relative;
  padding: 20px;
  border: 3px solid #0d1729;
  margin-top: 5%;
  justify-content: center;

  background: rgb(20, 28, 51);
  background: linear-gradient(180deg, rgb(8, 69, 155) 0%, rgb(15, 30, 51) 100%);
}

.close {
  position: sticky;
  top: 0;
  left: 100%;
  border: none;
  font-size: 18px;
  cursor: pointer;
  width: 40px;
  height: 30px;
  box-shadow: none;
  background-color: transparent;
  color: rgb(238, 47, 47);
  line-height: 30px;
  text-align: center;
  font-size: 25px;
  padding-top: 5px;
  z-index: 1000;
}

.close:hover {
  background-color: transparent;
  color: red;
}

#clarification {
  color: rgb(134, 134, 134);
}

#welcome_tutorial_container {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.405);
  z-index: 100;
  justify-content: center;
  align-items: center;
  /* display: flex; */
  display: none;
  visibility: hidden;
}

#auth_alert p {
  margin: 0;
}

#auth_alert img {
  width: 40px;
  padding-bottom: 8px;
}

#welcome_tutorial {
  color: white;
  border-radius: 5px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  height: 500px;
  width: 700px;
  background-color: var(--primary-color);
  border-radius: 10px;
  border-style: solid;
  border-color: #294a69;
  border-width: 3px;
  position: relative;
}

.welcome_tutorial_slide {
  position: absolute;
  left: 7.5px;
  top: 10px;
  width: 680px;
  height: 420px;
  background-color: #0f212f;
  overflow: auto;
  display: none;
  visibility: hidden;
}

.welcome_tutorial_slide[data-active="on"] {
  display: block;
  visibility: visible;
}

.welcome_tutorial_slide * {
  margin-left: 10px;
  margin-right: 10px;
}

.welcome_tutorial_slide h1 {
  text-align: center;
}

.welcome_tutorial_slide p {
  text-align: justify;
}

.welcome_tutorial_slide img {
  border-style: solid;
  /* margin-left: 20px; */
  /* max-width: 640px; */
  margin-left: 5%;
  width: 90%;
}

.welcome_tutorial_slide a {
  color: rgb(138, 138, 138);
  padding: 0;
  margin: 0;
}

#welcome_tuto_next {
  position: absolute;
  bottom: 7px;
  right: 135px;
  height: 50px;
  width: 120px;
  font-size: 20px;
}

#welcome_tuto_skip {
  position: absolute;
  bottom: 7px;
  right: 7.5px;
  height: 50px;
  width: 120px;
  font-size: 20px;
}

#tutorial_nft_gif {
  float: right;
  width: 180px;
  margin-right: 20px;
}

@media screen and (max-width: 720px) {
  .welcome_tutorial_slide {
    left: 2.5%;
    width: 95%;
  }
}

#widget_container {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.405);
  z-index: 100;
  justify-content: center;
  align-items: center;
  /* display: flex; */
  display: none;
  visibility: hidden;
}

#widget_close {
  /* position: absolute;
	right: 2px;
	top: 0;
	background-color: transparent;
	box-shadow: none;
	width: fit-content;
	font-size: 15px; */
}

#widget_main {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  color: white;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  height: 400px;
  width: 450px;
  border-radius: 15px;
  border: 3px solid #0a111d;

  background: rgb(20, 28, 51);
  background: linear-gradient(180deg, rgb(8, 69, 155) 0%, rgb(15, 30, 51) 100%);
}

#widget_info {
  /* background-color: #000476; */
  margin-top: 20px;
}
#widget_info > div {
  display: flex;
  margin-top: 10px;
  margin-left: 20px;
}
#widget_info > div > p {
  margin: 0;
  width: 90px;
}
#widget_info > div > input {
  height: 26.5px;
  width: 200px;
}
#widget_info > button {
  margin-top: 20px;
  /* margin-bottom: 20px; */
  width: 100%;
}
#widget_main > p {
  margin: 0;
  margin-top: 20px;
  margin-bottom: 5px;
  /* margin-bottom: 20px; */
}
#widget_game_result {
  display: flex;
  justify-content: space-around;
  margin-top: 15px;
}

#widget_btn {
  height: 40px;
}

#widget_g {
  display: flex;
  flex-direction: column;
  margin-right: 25px;
  /* margin-left: 25px; */
}
#widget_g > p {
  margin-top: 0;
  margin-bottom: 10px;
  text-align: center;
  /* margin-left: 25px; */
}
#widget_g > select {
  margin-bottom: 10px;
  width: 150px;
  margin-left: 0px;
  border-style: solid;
  border-color: #294a69;
  border-width: 2px;
  /* margin-left: 25px; */
}
#widget_g > select:hover {
  border-color: #33618b; /* Replace 'your-hover-color' with your desired hover color */
  transition: 0.2s ease;
}
#widget_mines,
#widget_rows,
#widget_risk {
  display: none;
}

#widget_result {
  background-color: #0f212e;
  border-style: solid;
  border-width: 2px;
  border-color: #294a69;
  border-radius: 10px;
  height: 200px;
  width: 200px;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

#widget_result > img {
  position: absolute;
  height: 160px;
  object-fit: cover;
  display: none;
}
#widget_result p {
  position: absolute;
  font-size: 70px;
  display: none;
}
.widget_result_roulette {
  border-radius: 10px;
  width: 115px;
  text-align: center;
}
#widget_result > div {
  display: grid;
  display: none;
  grid-template-columns: auto auto auto auto auto;
  justify-content: space-around;
  align-items: center;
  height: 200px;
  width: 200px;
}
.widget_grid_item {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.widget_grid_item img {
  width: 75%;
  height: 75%;
  object-fit: contain;
  display: block;
  object-position: 0 0;
}

#records_container {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.405);
  z-index: 100;
  justify-content: center;
  align-items: center;
  /* display: flex; */
  display: none;
  visibility: hidden;
}

#records_close {
  /* position: absolute;
	right: 2px;
	top: 0;
	background-color: transparent;
	box-shadow: none;
	width: fit-content;
	font-size: 15px; */
}

#records_main {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
  border-radius: 15px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  height: 550px;
  width: 400px;
  background-color: var(--primary-color);
  max-width: 98%;
  background-color: #28354b;
  border: 3px solid #0a111d;
  justify-content: center;
  padding-top: 20px;

  background: rgb(20, 28, 51);
  background: linear-gradient(180deg, rgb(8, 69, 155) 0%, rgb(15, 30, 51) 100%);
}

#records_main h1 {
  font-size: 25px;
  margin-bottom: 5px;
}

#records_list {
  overflow-y: scroll;
  width: 100%;
  min-height: 410px;
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#records_list li {
  width: 95%;
  margin-left: 2.5%;
  margin-bottom: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.record_element {
  height: 30px;
  background-color: #12202d;
  padding-left: 10px;
  padding-right: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-radius: 5px;
  border-bottom: rgba(255, 255, 255, 0.493) solid;
}

.record_element p {
  line-height: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  display: flex;
}

.record_element p img {
  height: 16px;
  margin-left: 7px;
  margin-top: 7px;
}

.record_element_extend {
  /* height: 180px; */
  background: linear-gradient(0deg, rgba(31, 45, 66, 1) 25%, rgba(36, 55, 83, 1) 75%);
  text-align: center;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  border-radius: 3px;
  /* padding-bottom: 10px; */
}
.record_element_extend p {
  height: 30px;
  line-height: 30px;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}
.record_element_extend p img {
  height: 16px;
  margin-left: 5px;
  margin-top: 7px;
}
.record_element_extend button {
  box-shadow: none;
  border-radius: 10px;
  margin-bottom: 10px;
  background-color: #0075ff;
  border-bottom: #0075ff solid;
  height: 40px;
}

#records_paging {
  display: flex;
  margin-top: auto;
}

#records_paging button {
  margin-top: 15px;
  margin-right: 5px;
  margin-left: 5px;
  box-shadow: none;
  width: fit-content;
  height: 25px;
  font-size: 15px;
  background: transparent;
}

#records_page_input {
  text-align: center;
  width: 50px;
  /* padding: 0; */
}
/* Chrome, Safari, Edge, Opera */
#records_page_input::-webkit-outer-spin-button,
#records_page_input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
#records_page_input[type="number"] {
  -moz-appearance: textfield;
}

#profile_popup_container {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.405);
  z-index: 100;
  /* display: flex; */
  justify-content: center;
  align-items: center;
  display: none;
  /* visibility: hidden; */
}

#profile_popup {
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  align-items: center;
  color: white;
  border-radius: 5px;
  border-style: solid;
  border-color: #294a69;
  border-width: 3px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  height: 450px;
  width: 500px;
  /* width: 50%; */
  background-color: var(--primary-color);
}

#profile_popup_card {
  margin: 15px;
}

#profile_popup_buttons {
  width: 400px;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 50px;
}

#profile_popup_buttons button {
  margin-left: 5px;
  width: 50px;
}

#profile_popup_tip {
  margin-left: 0 !important;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

#profile_popup_tip_amount {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  width: 85px;
}

#profile_popup_dm,
#profile_popup_invite {
  background-color: grey;
}

#profile_popup_finder {
  display: flex;
  margin-top: 10px;
}

#profile_popup_find_input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

#profile_popup_find_btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  width: 75px;
}

canvas.chartjs-render-monitor {
  max-width: 100%;
}

@media screen and (max-width: 1940px) {
  .card {
    width: 100%;
    padding: 10px;
    margin-bottom: 0;
    margin-top: 0;
  }
}

@media screen and (max-width: 1260px) {
  .welcome {
    width: 100%;
  }

  /* .container {
    max-width: 630px;
  } */

  .center-image {
    max-width: 350px;
    padding: 30px;
  }
}

@media screen and (max-width: 885px) {
  .neck {
    display: none !important;
  }

  footer {
    height: unset;
    flex-direction: column-reverse;
    padding-bottom: 80px;
  }

  #footer_logo {
    margin-top: 0;
    padding-top: 0;
    padding-left: 0;
    justify-content: center;
    /* display: flex; */
    /* flex-direction: column; */
  }

  #footer_logo img {
    display: block;
    margin-right: auto;
    margin-left: auto;
    image-rendering: pixelated;
    -webkit-filter: drop-shadow(0px 2px 0px #00000050);
    filter: drop-shadow(0px 2px 0px #00000050);
    /* width: 100px; */
  }

  #right-side {
    display: none;
  }

  .card {
    padding: 0;
  }

  .welcome {
    grid-template-columns: 1fr;
    margin-top: 60px;
    height: unset;
  }

  #welcome_gradient {
    display: none !important;
  }

  .left-side {
    padding: 0;
    height: 390px;
  }

  .card {
    margin-left: 0;
  }

  .sidebar {
    height: fit-content;
    width: 95%;
    top: unset;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    background: rgba(45, 63, 79, 0.5);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .sidebar-icons {
    width: 30px;
  }

  .sidebar-content {
    display: flex;
    justify-content: center;
    padding-bottom: 0px;
  }

  /* Hiding icons in bottom menu for mobile */
  .sidebar-content #shop,
  .sidebar-content #X,
  .sidebar-content #discord,
  .sidebar-content #telegram,
  .sidebar-content #questionmark {
    display: none;
  }

  .sidebar-buttons {
    padding: 35px;
    background-color: transparent;
  }

  .sidebar-buttons[title]:hover::after {
    content: "";
  }

  .sidebar-content {
    padding-top: 2px;
  }

  #games {
    order: 0;
  }

  #market {
    order: 1;
  }

  #wallet {
    order: 2;
  }

  #chatBtn {
    order: 3;
  }

  #settings {
    order: 4;
  }

  #profile {
    display: none;
  }

  #prizes_display {
    display: block !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #gameRules {
    margin-top: 0px !important;
    margin-left: 0px !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    width: 100% !important;
    border-radius: 10px !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
  }

  #gamePrizes {
    width: 100% !important;
    border-radius: 5px !important;
    border: none !important;
  }

  #right_side {
    bottom: 100px !important;
    top: 0px !important;
    padding-top: 65px !important;
  }
}

@media screen and (max-width: 560px) {
  #send_msg_online {
    width: 50%;
  }

  #right_side {
    bottom: 0px !important;
    padding-top: 62px !important;
    left: 50%;
    transform: translateX(-50%);
    width: 100% !important;
    z-index: 0;
    /* height: 100%; */
    /* z-index: 90; */
  }

  #chat {
    border-radius: 0px !important;
    padding-bottom: 110px !important;
  }

  .welcome {
    grid-template-columns: 1fr;
    margin-top: 60px;
    height: unset;
  }

  .game-container {
    width: 100%;
  }

  .lottery-neck {
    margin: 0;
    height: unset;
  }

  .balanceAndWallet {
    position: static;
    transform: translateX(0);
  }

  .games {
    margin-left: 1rem;
    margin-right: 1rem;
    border-top-left-radius: 15px !important;
    border-bottom-left-radius: 15px !important;
  }

  #games {
    order: 0;
  }

  #market {
    order: 1;
  }

  #wallet {
    order: 2;
  }

  #chatBtn {
    order: 3;
  }

  #settings {
    order: 4;
  }

  #profile {
    display: none;
  }

  #questionmark {
    margin-top: 0;
  }

  #right-side {
    display: none;
  }

  .left-side {
  }

  .card {
    padding: 0;
  }

  #profile_popup {
    width: 95%;
  }

  #profile_popup_buttons {
    /* margin: 15px; */
    width: 100%;
    justify-content: center;
    /* margin-right: 40px; */
  }
}

@media screen and (max-width: 430px) {
  #right_side {
    padding-top: 52px !important;
  }

  /* header {
		height: 50px;
	} */
  #connect-wallet {
    width: 52px;
  }

  .logo {
    margin-left: 10px;
    max-width: 85px;
  }

  .balance {
    width: 75px;
  }

  .center-image {
    padding: 24px;
    max-width: 345px;
  }

  #quests_popUp {
    height: fit-content;
    width: fit-content;
    max-width: 98%;
  }

  .general_popUp {
    max-height: 75%;
    margin-bottom: 20px;
  }

  #widget_main {
    width: 98%;
    height: fit-content;
  }

  #widget_info {
    width: 330px;
    font-size: 14px;
    margin-bottom: 10px;
  }

  #widget_g {
    margin-right: 0;
    margin-bottom: 10px;
  }

  #widget_game_result {
    flex-direction: column;
    align-items: center;
    margin-bottom: 15px;
  }
}

.gamesArea {
  margin-top: 10px;
  margin: auto;
  width: 98%;
  /* height: 100px; */
  text-align: center;
}

.game_preview {
  width: 164px;
  /* aspect-ratio: 2 / 3; Aspect ratio of 2:3 */
  height: 246px;
  margin-left: 2px;
  margin-right: 2px;
  background-color: var(--tertiary-color);
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  image-rendering: optimizeQuality;
}

.game_preview {
  transition: transform 0.1s; /* Apply transition over 0.5 seconds */
}

.game_preview:hover {
  transform: scale(1.025); /* Scale down on hover */
  box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.17);
}

#preview_dice {
  background: url(../../SkellySlots/dicePreview.png);
  background-size: 100%;
}
#preview_limbo {
  background: url(../../SkellySlots/limboPreview.png);
  background-size: 100%;
}
#preview_mines {
  background: url(../../SkellySlots/minesPreview.png);
  background-size: 100%;
}
#preview_plinko {
  background: url(../../SkellySlots/plinkoPreview.png);
  background-size: 100%;
}
#preview_roulette {
  background: url(../../SkellySlots/roulettePreview.png);
  background-size: 100%;
}
#preview_blackjack {
  background: url(../../SkellySlots/blackjackPreview.png);
  background-size: 100%;
}
#preview_coinflip {
  background: url(../../SkellySlots/coinflipPreview.png);
  background-size: 100%;
}
#preview_ocho {
  background: url(../../SkellySlots/ochoPreview.png);
  background-size: 100%;
}

#preview_slots {
  background: url(../../SkellySlots/slotsPreview.png);
  background-size: 100%;
}

/* RELEVANT TO RESULTS, VOLUME and EVENT-------------------------------------------------------*/

#table_selection {
  margin: auto;
  margin-top: 50px;

  max-width: 98%;
  padding: 10px;
  border-radius: 25px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;

  background: rgba(0, 14, 28, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#table_selection button {
  border-radius: 15px;
  height: 30px;
  width: fit-content;
  padding-left: 15px;
  padding-right: 15px;
  box-shadow: inset 0px -2px 0px #00000040;
  margin-top: 5px;
  background-color: #1744746f;
}

#table_selection button:hover {
  background-color: #105fb46f !important;
}

#result_table_btn {
  margin-right: 10px;
  background-color: #105eb4;
}

#volume_table_btn {
  margin-right: 10px;
}

#event_table_btn {
}

#results_container {
  width: 98%;
  margin: auto;
  border-radius: 15px;
}

#results_table {
  margin-top: 20px;
  margin-bottom: 10px;
  width: 100%;
  color: rgb(190, 190, 190);
  border-collapse: collapse;
  border-radius: 15px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;

  /* background: rgba(0, 14, 28, 0.5); */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#results_table th {
  width: 16.66%;
  color: gray;
}

#results_table tr:nth-child(even) {
  /* background: rgba(255, 255, 255, 0.05); */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

#results_table tr:hover {
  scale: 1.01;
  transition: 0.1s;
}

#results_table td {
  height: 50px;
}
#results_table td:nth-child(4),
#results_table td:nth-child(6) {
  display: flex;
  justify-content: right;
  margin-right: 35%;
  text-align: right;
  line-height: 50px;
}

#results_table td:nth-child(4) img,
#results_table td:nth-child(6) img {
  width: 16px;
  height: 16px;
  margin-left: 5px;
  margin-top: 16px;
}

#results_table td:nth-child(1) {
  color: white;
}

#volume_container {
  position: relative;
  width: 98%;
  display: none;
  visibility: hidden;
  margin: auto;
}

#volume_table {
  margin-top: 20px;
  margin-bottom: 10px;
  width: 40%;
  color: rgb(190, 190, 190);
  border-collapse: collapse;
  border-radius: 15px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;

  background: rgba(0, 14, 28, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#volume_table th {
  width: 50%;
  color: gray;
}

#volume_table tr:nth-child(even) {
  background-color: #121f30;
}

#volume_table tr:hover {
}

#volume_table td {
  height: 50px;
}

#volume_table td:nth-child(1) {
  color: white;
}

#volume_extra_info {
  position: absolute;
  width: 50%;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  padding-top: 100px;
  padding-bottom: 100px;
  border-radius: 15px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  height: 100%;

  background: rgba(0, 14, 28, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#volume_extra_info > h1 {
  font-size: 30px;
  color: gray;
}

#volume_extra_info > p {
  font-size: 18px;
  color: white;
}

#event_container {
  position: relative;
  width: 100%;
  display: none;
  visibility: hidden;
  flex-direction: row;
  justify-content: space-around;
  margin-bottom: 10px;
}

#event_container > div {
  width: 48%;
}

.event_header {
  cursor: pointer;
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: var(--tertiary-color);
  color: white;
  margin-top: 20px;
  border-radius: 5px;
  font-size: small;
  box-shadow: 0px 2px 1px #00000040;
}

.event_header:hover {
  background-color: #213c55;
  background-color: #2d5173;
}

/* .event_table {
  background-color: rgb(74, 74, 105);
} */

.event_table {
  /* margin-top: 20px; */
  /* margin-bottom: 50px; */
  width: 100%;
  color: rgb(190, 190, 190);
  border-collapse: collapse;
  display: none;
  visibility: hidden;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;

  background: rgba(0, 14, 28, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.event_table th {
  width: 50%;
  color: gray;
}

.event_table td:nth-child(1) {
  padding-left: 10px;
  text-align: left;
  white-space: pre;
}

.event_table tr:nth-child(even) {
  background-color: #132133;
}

.event_table tr:hover {
}

.event_table td {
  height: 40px;
}

.event_table td:nth-child(1) {
  color: white;
}

/* RELEVANT TO ALL GAMES -------------------------------------------------------*/

.games {
  /* background-color: var(--tertiary-color); */
  background-color: rgb(33, 50, 71);
  height: 600px;
  margin: auto;
  margin-top: 80px;
  border-radius: 15px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  /* display: flex; */
  display: none;
  visibility: hidden;
  width: 100%;
  justify-content: right;
  transition: box-shadow 0.2s ease;
}

.game_controls {
  margin: 0;
  width: 28%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.game_controls > * {
  margin-top: 0.5rem;
  width: 95%;
  align-self: center;
  margin-bottom: 2.5%;
}

.game_controls > label {
  color: white;
}

.game_mode {
  display: flex;
  height: 40px;
  line-height: 40px;
  box-shadow: 0px 2px 1px #0000004d;
  cursor: pointer;
  border-radius: 5px;
}

.game_mode div {
  color: white;
  transition: background-color 0.3s ease;
}

.game_mode div:hover {
  background-color: #294a69;
}

.game_mode div[data-active="y"] {
  background-color: #294a69;
}

.game_nb_bets {
  /* width: 250%; */
  height: 6%;
  text-align: left;
  background-color: #0f212e;
  color: white;
  margin-top: 0;
  margin-bottom: 0;
}

#plinko_auto_lbl {
  display: flex;
}

.game_manual {
  width: 50%;
  border-right-style: solid;
  border-width: 1px;
  border-right-color: #0f212e;
  background-color: #0f212e;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
}

.game_auto {
  width: 50%;
  border-left-style: solid;
  border-width: 1px;
  border-left-color: #0f212e;
  background-color: #0f212e;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.game_window {
  margin: 0;
  background-color: var(--secondary-color);
  width: 75%;
  position: relative;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
  border-width: 3px;
  border-style: solid;
  border-color: #213c55;
  border-radius: 10px;
}

@property --separator {
  syntax: "<percentage>";
  initial-value: 20%;
  inherits: true;
}

.game_bet_btn {
  margin-top: 10%;
  height: 50px;
  width: 95%;
  background-color: #0075ff;
  border-bottom: #0057bb solid;
  order: 3;
  width: 95%;
  border-radius: 10px;
  font-size: 15px !important;
  position: relative;
}

.game_bet_btn:hover {
  background-color: #1481ff;
}

/* .game_bet_btn::before {
  content: "";
  display: block;
  position: absolute;
  top: -7px;
  left: -3px;
  right: 0;
  height: 23px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAAXCAYAAACS5bYWAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABFpJREFUeNrUV0tIo1cUvpkYjQ4xxSA6DxuNqG0dtaUKOgs3s6i0dFd3pSsXdjeIixakiGA34sZuXCkoONLFwJTK4GMYLYXg29gatTpiXurkbd7vv9/5ub+IxuhA7eiFQ5Kbc8/57ne/e87/ywRBYLdl3GG3aNwqsLJ0k0tLS+fmcnNzWUVFBVMoFGx2djarvLxcm5OTw+bm5iytra2xc4ExNjY27iqVyvvwK6CpeDzuCYVC1urq6qDA9UcfPp+PHR4esmAwKK6tr68/l5/8rgQ2Ozub1dbWyiYmJooaGxt/VqvV38jlchX9l0qlwoFA4DWS/RKLxRxFRUVf5+XlPcaaT2AP0sVPJBL2SCRiAPBpu93+vKamZo/Ae71eZjabWV1dXVqw7CKwp43ksrCw8Bhg7MJ/PLDZ5PHx8cz29vYT5JGD/bSYLgTrcDgYdk6siSc6NjZWDaAe4ZoHQL+cmZnRpZPnhWDpD8kw7uKo9ML/NMCsd2tr61vkzboMrEyv138M7TyLRqMWMBsX3sMgaZhMpp+AR5EJrCocDpuEGzKg4x8khs+CVWxubvZfR9JkMik4nU7BarUKLpeLmLsKuwIqTLynp4fqmIzASrqQT09Pf1VVVfX0KsWZ6uHBwQHTaDSsoKAgo6/H4xHLEcrVyRwuEisrKzs5XrrIVAVwiUVDKRRrL+YI32ewdVhMApuHWvcj6vids6J2u90MF4yBHUZNgKoEBaRBQalJqFSqtJfUYrGIlQX+ydXVVTN+u0tKSjQNDQ1axJVl2iTypebn55d7e3v/kqoDgZU1NTU9LCws/Py0M+2ekuGincxJ3yF+18jIyHJLS0slQJUWFxczrBeBE0vE5tHRkbixlZWVfSR8gTX/0P5gH7S1tX3Z3t7+BW8qAvwSfr8/jA0EIRM/qoFtampqbW9vTw+XA+ojUruVd3Z2tvb19T2TQFEim81GgVJoCvvj4+NLOJZgaWmpemdn5y3a6BbcnJDAw8HBwac6ne6eqCW5XDwB3qVSqM9/DAwMUNy/eVLabT7sI25qwgujThCBhWE+mAt2yNc4SQKSZrOQQE1HS22VJkmPAGTr7+//fX19fRk+Zgq0trbGeFAKEAQT98BSqKOj47vm5uaa/Px8JeIk4GcaHh6eWlxcfAU/A8xG67BxAX3fwdcbYUpSDJ06Z49Ak8ZC3OL8f3YiA4PBYKdLQ2AJ9OTk5GpXV9cQiCVh79M94QtlPLDUE/1gPNrd3f0W33W4cBoco48zQuy/IZYAMnGqlSc4c66L9JruQUaSARXeT8HGKzxAqFBekni6+h46+pMzGiJGMgTOJh1yU/KNEGDvZWvfBawkA9ppwGg0mrRa7SOI2g+gxOgbJIpdFpj72PnxSnPX8vqRxTURgBQWKisrH+GThOm+CtAzoK/9/Uiqq/6hoaHfdnd3jaOjo7/yY7yxbwqkWy3sQzpS2C6YirwvUJk0y7hurfyGRrnduPGvAAMASmo8wzeVwfsAAAAASUVORK5CYII=)
      no-repeat 0 0,
    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE0AAAAXCAYAAABOHMIhAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABiZJREFUeNrsWMtPlFcUvzPMwIDysLyRR4uATDHWCiVgSmRlios2DeiiXUFs0nRBd6arxqQhJDapkYXhP4BqDKTQhZaFNQSCaBEVJjwdHsNr5DUMDDPDzPT3u7nTDEgRKrKgc5KT+z3uufec33de99P4fD4RpL2RNgjB3kn35MkTeRERESFiYmLkGBoaKnQ6nWSNRvPPZFxr+vv7k6KioiIdDsfa8vLyQkFBgcP3Bnel3MDAQArWI0eFhISE87nb7bZ7PJ4VvLYuLi5O5+fnu9+kMNfq6+tLjIyMzMY6KeBEbK/XarXReI3lPDZMWcc4v7GxYV1dXR3Jy8ub2E5HPvJ6vRSSDH0ku1wuAfsEZOV1IEFHoeNFdHS0yMrK2knR0Lm5uR+hxLdQMjbwHTZbB41h8RGwCdc9MzMzneHh4bGJiYlf4SN8ijkfwqiIncCAAR7Iz2GPSShudjqdfeCeqampvwBQfFxc3JdYqwTv8gB8/F48A8BgKecE14V+L7ju2tpae05OzkuCCZvkPOj8mizmC6vVKtmPu+bx48cC3qI1mUyFUOyywWD4SHlELBaLJmCHNcwAghuAOujtuF4FqHO4nsX4EsAS3I4TJ04ME1h8PDE9PS09TYZoY2Pj1729vd6lpSVfkDYTPG0UkfNDRUWFgQ5Gb2Mh0N29e9eG/GQfHh4W8/PzwUy/ObQ/gMfVVlZW1iAiZdQxp3nv3LljRoL/5erVq1UIxzSiiVD9X4EDYATynCwAzGO858hCQRoaGmJFZNJz8YIcBc4BF966dau6sLAwBxVSJCUlCSThQwuU3W6XkYUok1Vzm5znQx5bbm9v77p+/frPeNSNRzZ/ISBwrG4ZR48eLamtrf2+uLjYSEG9Xi/wTISFhQlWGXohyzO/CJlVl23KQRLbABoaHx+/Z1lUZ/Hq1SsJFj3JT3hmHx8fnydPTEzMj46OziHPW2w22wxeD4Kfgadh/4YEzU8Az4DhffAn5eXlX1y6dKkEoCTspAQ9Mjs7+0BBo8Fms1lkZGTsOo0QLLRNkvnR+fEJzIMHD0xtbW39CL8JTFtSbAOvBIyLHIGVm9VzE2gKuDAMSSpcT6KXyT137lx2cnLyMXhcGDb3wq3XuWF3d/fCzZs3P0c4v5eSknJQbYLo7Ox0gC2lpaVZ3Be67Th/dnZWoAJKsJC3XA8fPhxoamp6hMb+BaaMgWcUMGtszZjiFDNmvcDI91pzG0iY4ARwkwrxkcHBwUdgNrRMbnrqoRbkVzDcvn3bl5qaWsmcgFH4G8XdEGUWFhak51AuISFBnkoCTyFbyWKxCJwIxlC0fq2rq7tcVFRkRKskjh8/Lr0+kBjCCDV/knfdv3//WX19/R8IRRNemxlu4AXwKqM+EJwdj1HbPYSwh3sCPAJDABm2LLchCjS+5/kirKGhwWk0GrMuXrxYQuX9hm/XXTMXMY+srKwI5ApZrbYmZh7deEJhAUKjLe/pLTzSsCuHrK+1tbUJVe3P6upq87Vr174rKysrYHVj/uW+OH3IfEuw4F3ee/fuPQfAvwOs5yyE4CnlFOu7BWrTCWlreO6FACpBZGwUw4BvkANLobReHb3kGZYGsGzTq/zlO8AT1ru6uoZbWlqeA6gINJAfnz59OlVLoX8Jtebm5raampqfcMvQYgTknz9//sKVK1c+y83NTdIEuCnaKMuNGzd+6+np6cCtSTkAw9D9X8Dyh+dbgaaAC1XAnUlPTy+qqqq6cPbs2UzkmWjNljiDJzpwHFnCkW2yo6NjCKW8H54wjlezKvRT09LSTsJrz5w6dSoN+Yp51ADAPUj8VoDbDq9pxrwuJcNIYQllJTIi/xopBw/VA7DJp0+f9hA78CgL5F5C8J2CpoCj8sfA6WCe/FPRhsRlZmbGIs8Y4FFO5CJgtrSsvrRVGW1V93b1myoGnKAKEcHgnwsWpg1lNI0fphwrmdqbckeU18WrnlOjqp5/j7W3BWvfQVPKa5SBkcrYCNVB65TRTlWZ1lXiXVU5xbtlDb2SPaLWYwrgHIcqPg6Vc7fbX69Yoyqfa7/AeiegbWOEVhmsVcWDwPn224iDJgla8Hd38Hd3ELQgaIeI/hZgAIPEp0vmQJdoAAAAAElFTkSuQmCC)
      no-repeat 50% 0,
    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAXCAYAAACFxybfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAodJREFUeNrsVb1rWlEUv2pN/GqspKRSKFYXWzEloIWif0Fn6dJChQ7OQil0qd3EzcEpg0OgdHDr4CQODk7VRlLMEIVqApX4We0zflR9/Z1Ui4T34ksaaAYP/Hzc673n/M6550PG8zz73yKjn0wm83fDYDAwo9HINBrNnwOQg4MDs0ql2lQqlfdAWont7ng8Pjw+Ps44nc4G1pI9EXWaSOzt7TGO42aH5Pv7+08ajUZ0MBiUeXEZd7vdL5VK5fX29rZ+5tQiEmdxKrlcjsEYczgcynK5/BKKv/IXFNz/XiqVXkHdjUuRIA9SqdRD8or/R8Ez9fr9fqHVakUR4c2z0REjIQuHw2ZcrPBXLCA0RHTezEdHjIQqkUhEr9I4HOILhQLf6/VoOUFEvDMiQiToDx1Cdz+bzZ6bUFarlel0OkkVUK/XWbvdPoVer5fh3ntsfwJ+CJ2XA4p0Op1bpBgJyxDehQQ6nQ5DZXHBYDBZq9V+EhFUndnr9drEqoc2bwJbwGPgtohuVSwWe2Gz2TZMJpNgRKi6qtUqg2EWj8dTgUDgo0KhWPN4PC70EvXOzs67fD6/S6kiRIKeZA1YJ2MiJNbdbvfTUCjkV6vVK2hcDF8GI2w0GrGTkxM2HA5PDxaLxSOfz/cWEfk81X0XIMMFgJJ/srBjCgk8IdcfuVyuZ36//7nFYtkQyAMumUzuRiKRD0jMFLa+AZOpYwqgB/ziBVqmVBKUO7eAB/R0WG/Z7XaTVqtdbTabHJL6EK2djBaBPHA0NSqpbUsiMUeEBgpF4Q5AbZrmSJ/yEWgBTaBNHl9kdkgmMUeG7qwAq9PqovceTA3zlxlgsuswyuXsGsiSxJLEkoSY/BZgAEjRodi+uBruAAAAAElFTkSuQmCC)
      no-repeat 100% 0;
} */

.betButtons {
  background-color: #0075ff;
  box-shadow: 0px 2px 1px #0000004d;
}

.betButtons:hover {
  background-color: #1481ff;
  transition: background-color 0.2s ease;
}

.game_return {
  background-color: white;
  box-shadow: 0px 2px 1px #0000004d;
}

.game_odds_container {
  position: absolute;
  display: flex;
  justify-content: space-around;
  background-color: var(--tertiary-color);
  width: 96%;
  height: 15%;
  left: 2%;
  bottom: 2.5%;
  border-radius: 10px;
  font-size: small;
  box-shadow: 0px 2px 1px #0000004d;
}

.game_odds_container > div {
  width: 30%;
  color: white;
  margin: auto;
  display: flex;
  flex-direction: column;
  text-align: left;
}
.game_odds_container > div > label {
  margin-left: 5px;
  color: rgb(176, 176, 176);
}

.game_odds_container > div > div {
  font-family: "Mukta", sans-serif;
  border: 2px solid #294152;
  text-align: left;
  background-color: #0f212e;
  color: rgb(176, 176, 176);
  border-radius: 5px;
  transition: 0.2s ease;
  box-shadow: 1px 1px 1px 1px #0000004d;
}
.game_odds_container input {
  margin-left: 5px;
  border: none;
  text-align: left;
  width: calc(100% - 2rem);
  /* background-color: #0f212e; */
  /* color: white; */
  /* border-radius: 5px; */
  /* transition: 0.2s ease; */
}

.game_display_result {
  color: white;
}

.amount_in_dollars {
  display: none;
}

.game_info_icon {
  /* position: absolute; */
  /* left: 50px; */
  /* bottom: 10px; */
  color: white;
  font-size: 25px;
  order: 4;
  justify-self: flex-start;
  width: fit-content;
  margin: auto auto 0px 10px;
  /* margin-left: 10px;
	margin-right: auto; */
  cursor: pointer;
  padding: 10px;
}

#recentLotto {
  position: relative;
}

.game_tutorial {
  position: absolute;
  left: 45px;
  bottom: 45px;
  height: 500px;
  width: 500px;
  border-radius: 10px;
  border-style: solid;
  border-color: #105eb4;
  border-width: 3px;
  background-color: #183049;
  z-index: 1;
  display: none;
  visibility: hidden;
}

.game_tutorial img {
  padding: 10px;
  width: 100%;
  object-fit: contain;
}

.game_tutorial p {
  padding-right: 10px;
  padding-left: 10px;
  text-align: justify;
  color: white;
  margin: 0;
}

.game_info_icon:hover + .game_tutorial {
  display: block;
  visibility: visible;
}

.game_tutorial:hover {
  display: block;
  visibility: visible;
}

/* =================================================================
/* RELEVANT TO DICE */

#dice {
  /* display: flex;
	visibility: visible; */
}

#dice .game_window {
  overflow-x: hidden;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
  border-width: 3px;
  border-style: solid;
  border-color: #213c55;
  border-radius: 10px;
}

.game_last_result_container {
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: center;
  /* justify-content: flex-end; */
  max-width: 100%;
  height: 50px;
  /* background-color: #04aa6d; */
  overflow-x: auto;
  scroll-behavior: smooth;
}
.game_last_result_container > p {
  line-height: 30px;
  height: 30px;
  min-width: 60px;
  padding-left: 5px;
  padding-right: 5px;
  margin: 5px;
  background-color: var(--tertiary-color);
  border-radius: 15px;
  color: white;
}
.game_last_result_container > .game_result_dummy {
  background-color: transparent;
}

#slider_arrow {
  position: absolute;
  width: 30px;
  height: 30px;
  background-image: url(../../SkellySlots/dice.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  /* border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-top: 20px solid #ffffff; */
  top: 35%;
  left: 10%;
  display: none;
  z-index: 1;
}

.slider_background {
  position: absolute;
  top: calc(40% - 12px);
  left: calc(10% - 12px);
  width: calc(80% + 24px);
  height: 57px;
  border-radius: 50px;
  background-color: var(--tertiary-color);
  box-shadow: 0px 2px 1px #0000004d;
}

.slider {
  position: absolute;
  -webkit-appearance: none;
  width: 80%;
  height: 30px;
  border-width: 10px;
  border-color: var(--secondary-color);
  border-radius: 15px;
  /* background: #d3d3d3; */
  background: linear-gradient(90deg, rgb(102, 255, 0) 50%, rgb(232, 16, 59) 50%);
  outline: none;
  /* opacity: 0.7; */
  top: 40%;
  left: 9.7%;
}

.slider:hover {
  border-color: var(--secondary-color);
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 36px;
  height: 36px;
  border-radius: 10%;
  background: #1475e1;
  cursor: pointer;
  background-image: url(../../SkellySlots/bars.png);
  background-position: center;
  background-size: cover;
}

.slider::-moz-range-thumb {
  width: 35px;
  height: 35px;
  border-radius: 10%;
  background: #1475e1;
  cursor: pointer;
}

.game_odds_container div:has(input:invalid) {
  border-color: rgb(255, 0, 0);
}

.ui_input_container input:invalid,
.blackjack_input input:invalid,
.game_nb_bets:invalid,
#profile_popup_tip_amount:invalid,
#dwamount:invalid {
  border-color: rgb(255, 0, 0);
  /* border: 1px solid red; */
}

#dice_info:hover + #dice_tutorial {
  display: block;
  visibility: visible;
}

/* =================================================================
/* RELEVANT TO MINES */
#mines {
  display: none;
  visibility: hidden;
  height: fit-content;
}

#minesGameWindow {
  aspect-ratio: 1/1;
  padding-inline: 2%;
  max-height: 600px;
}

#mines_shade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0000009c;
  display: none;
  visibility: hidden;
  border-radius: 10px;
}

#mines_btn_grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  height: 100%;
  aspect-ratio: 1/1;
  margin: auto;
  /* display: grid; */
  /* margin-left: 2%; */
  /* grid-template-columns: repeat(5,1fr); */
  /* justify-items: center; */
  /* align-items: center; */
  /* gap: 5px; */
  /* width: 100%; */
}

#mines_btn_grid > button {
  /* aspect-ratio: 1 / 1; */
  margin-inline: auto;
  margin-top: auto;
  margin-bottom: auto;
  max-width: 18%;
  max-height: 18%;
  aspect-ratio: 1/1;
  border-radius: 5%;
  padding: 0;
  display: flex;
  background-color: var(--tertiary-color);
  transition: box-shadow 0.2s ease;
}

#mines_btn_grid > button:hover {
  box-shadow: 0 0 5px rgb(222, 240, 255);
}

#mines_btn_grid > button > div:hover {
  background-color: #3d72a4;
  transform: translateY(-0.25rem);
}

.mines_img {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 5%;
  background-color: #294c6c;
  /* background-size: 90% 100%;
	/* background: url(../../SkellySlots/minesgem.png);
	background-repeat: no-repeat;
	background-position: center; */
  transition: background-color 200ms, scale 5000ms;
}

/* #mines_btn_grid > button > div:hover {
  background-color: #3d72a4;
} */

#mines_game_on {
  display: none;
  visibility: hidden;
  order: 3;
  width: 95%;
}

#mines_bombs_and_gems {
  display: flex;
  flex-direction: row;
}

#mines_bombs_and_gems > div {
  width: 48%;
  margin-left: 1%;
  margin-right: 1%;
}

#mines_bombs_and_gems label {
  color: white;
}

#mines_bombs_and_gems p {
  background-color: white;
}

#mines_game_on > .input_label {
  width: fit-content;
}

/* =================================================================
/* RELEVANT TO LIMBO */

#limbo {
  /* display: flex;
	visibility: visible; */
}

#limbo_main_x {
  color: white;
  font-size: 10rem;
  text-align: center;
  font-family: "Roboto Mono", monospace;
}

/* =================================================================
/* RELEVANT TO DICE */

#roulette {
  /* display: flex;
	visibility: visible; */
}

#roulette_chip_select {
  display: flex;
  width: 95%;
  height: 50px;
  box-shadow: 0px 2px 1px #0000004d;
  border-radius: 5px;
}

#roulette_chip_select button {
  width: 10%;
  box-shadow: none;
}

#roulette_chip_left {
  border-radius: 5px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

#roulette_chip_right {
  border-radius: 5px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

#roulette_chips {
  width: 80%;
  background-color: rgba(0, 0, 0, 0.319);
  display: flex;
  overflow-x: scroll;
  overflow-y: hidden;
  padding: 5px;
  padding-right: 0;
}

#roulette_chips div {
  position: relative;
}

.roulette_chip {
  /* position: absolute; */
  height: 40px;
  width: 40px;
  margin-right: 5px;
  border-radius: 100%;
  /* border-right: solid; */
  background-color: rgb(0, 149, 255);
  background-color: transparent;
}

#roulette_chips p {
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  height: 100%;
  width: calc(100% - 5px);
  line-height: 40px;
  font-size: 12px;
  color: white;
  margin: 0;
  pointer-events: none;
}

#roulette .game_window {
  overflow-x: hidden;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
  border-width: 3px;
  border-style: solid;
  border-color: #213c55;
  border-radius: 10px;
}

#roulette_assets {
  position: relative;
  left: calc(50% - 140px);
  top: 20px;
}

#roulette_assets div {
  position: absolute;
  left: 0px;
  top: 140px;
  width: 280px;
  height: 140px;
  /* background: linear-gradient(90deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 40%,rgba(0,0,0,0) 60%, rgba(0,0,0,0.2) 100%); */
  /* background-color: #0000003e; */
  background: radial-gradient(ellipse at 50% 100%, #00000000, #00000000, #00000040);
}

#roulette_wheel {
  position: absolute;
  /* left: calc(50% - 168px); */
  left: 0px;
  top: 0px;
  width: 280px;
}

#roulette_ball {
  position: absolute;
  left: 134px;
  top: 134px;
  width: 12px;
  display: none;
}

#roulette_table {
  position: absolute;
  bottom: 30px;
  left: 2%;
  display: grid;
  /* grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto; */
  grid-template-columns: 7.14% 7.14% 7.14% 7.14% 7.14% 7.14% 7.14% 7.14% 7.14% 7.14% 7.14% 7.14% 7.14% 7.14%;
  grid-template-rows: auto auto auto auto auto;
  gap: 4px;
  width: calc(96% - 52px);
  height: 220px;
}

#roulette_table * button {
  width: 100%;
  height: 100%;
  font-size: 16px;
  text-align: center;
  padding: 0;
}

.roulette_green button {
  background-color: rgb(46, 172, 46);
}
.roulette_green button:hover {
  background-color: rgb(12, 159, 12);
}
.roulette_red button {
  background-color: rgb(250, 33, 62);
}
.roulette_red button:hover {
  background-color: rgb(255, 100, 108);
}
.roulette_black button {
  background-color: rgb(48, 71, 83);
}
.roulette_black button:hover {
  background-color: rgb(66, 93, 109);
}
.roulette_other button {
  /* background-color: rgba(55, 68, 88, 0.757); */
  /* background-color: rgba(51, 63, 82, 0.696); */
  background-color: transparent;
  /* background-color: rgba(18, 94, 171, 0.926); */
  /* background-color: transparent; */
  border-color: rgba(255, 255, 255, 0.1);
  border-style: solid;
  border-width: 2px;
}
.roulette_other button:hover {
  background-color: rgba(94, 116, 152, 0.57);
}

.roulette_option {
  position: relative;
}
.roulette_option[data-selected] button {
  border-color: #1475e1;
  border-style: solid;
  border-width: 2.5px;
}

.roulette_chips_img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  /* width: 6%; */
}
.roulette_chips_img img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  /* border-radius: 100%; */
  /* box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.632); */
}
.roulette_chips_img p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  color: rgb(5, 72, 87);
  color: white;
  font-size: 20px;
  font-size: smaller;
  padding: 0;
  margin: 0;
}

#roulette_table_btns {
  position: absolute;
  left: 2%;
  bottom: 260px;
}
#roulette_table_btns * {
  width: 80px;
  box-shadow: none;
  background-color: rgba(0, 0, 0, 0.225);
  border-color: rgba(255, 255, 255, 0.304);
  border-style: solid;
  border-width: 2px;
}
#roulette_table_btns *:hover {
  border-color: rgba(255, 255, 255, 0.516);
}

#roulette_result {
  position: absolute;
  left: 10%;
  top: 15%;
  width: 70px;
  height: 70px;
  text-align: center;
  line-height: 70px;
  font-size: 1.5rem;
  color: white;
  background-color: rgba(73, 90, 117, 0.57);
  border-radius: 10px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
}

#roulette_recents {
  position: absolute;
  top: 5%;
  right: 6%;

  /* background-color: red; */
  width: 100px;
  height: 235px;

  display: flex;
  flex-direction: column-reverse;

  overflow-y: scroll;
}

.roulette_recent {
  background-color: var(--primary-color);
  width: 100px;
  min-height: 30px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  border-radius: 15px;
}

.roulette_recent p {
  color: white;
  margin: 0;
  height: 30px;
  line-height: 30px;
  width: 65px;
  text-align: center;
}

.roulette_recent .roulette_recent_number {
  border-right: 3px solid rgba(0, 0, 0, 0.466);
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  background-color: red;
  background-color: rgb(48, 71, 83);
  width: 35px;
}

.roulette_recent_hidden {
  visibility: hidden;
}

/* =================================================================
/* RELEVANT TO PLINKO */

#plinko {
  /* display: flex;
	visibility: visible; */
}

#plinko > .game_window {
  overflow: hidden;
}

#plinko_mults {
  position: absolute;
}

#plinko_mults > div {
  position: absolute;
  transform: translateX(-50%) translateY(-25%);
  border-radius: 5px;
  opacity: 0.5;
  /* background-color: black; */
}

#plinko_mults > p {
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgb(0, 0, 0);
  font-size: 0.8rem;
  border-radius: 5px;
  /* color: white; */
  position: absolute;
  overflow: hidden;
  /* left: 85.714px;
	top: 563.57px;
	width: 63.57px;
	height: 20px; */
  transform: translateX(-50%) translateY(-50%);
  /* padding: 0; */
  margin: 0;
  padding: 0;
}

.spring_animation {
  animation-name: spring;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
}

@keyframes spring {
  50% {
    transform: translate(-50%, -30%);
  }
}

#plinko_recent {
  position: absolute;
  border-radius: 15px;
  top: 5%;
  right: 5%;
  width: 10%;
  height: 40%;
  /* background-color: #105eb4; */
  display: flex;
  /* flex-direction: column-reverse; */
  flex-direction: column;
  /* justify-content: flex-end; */
  overflow-y: auto;
  scroll-behavior: smooth;
}

#plinko_recent > div {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 20%;
  width: 100%;
  font-weight: bold;
  font-size: 1.3rem;
}

.plinko_recent_tmp {
  border-bottom: none;
  background-color: transparent;
}

/* =================================================================
/* RELEVANT TO COIN FLIP */

#coinflip {
  flex-direction: column;
  position: relative;
  /* background-color: rgb(3, 13, 26); */
  /* background-color: rgba(19, 33, 51, 1); */
}

#cf_amount {
  height: 50px;
}

#halfCF {
  height: 50px;
}

#doubleCF {
  height: 50px;
}

#cf_create_btn {
  height: 100%;
  box-shadow: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border-width: 2px;
  border-style: solid;
  border-color: #0f212e;
}

#cf_create_container {
  width: 100%;
  height: 70px;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
  background-color: var(--secondary-color);
  display: flex;
  justify-content: space-between;
}

#cf_create_container > * {
  align-self: center;
}

#cf_create_head_btn {
  margin-left: 50px;
}

#cf_create_head_btn,
#cf_create_tail_btn {
  background-color: transparent;
  border-radius: 15%;
  box-shadow: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
}

#cf_create_head_btn img,
#cf_create_tail_btn img {
  height: 50px;
  width: 50px;
  margin: auto;
}

#cf_games {
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
  height: auto;
  max-height: 400px;
}

.cf_game {
  margin: 0.5%;
  width: 49%;
  height: 70px;
  background-color: var(--secondary-color);
  display: flex;
  justify-content: space-between;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 10px;
}

.cf_game > * {
  line-height: 70px;
  color: white;
}

.cf_game > div {
  display: flex;
}

.cf_game button {
  box-shadow: none;
  height: 100%;
  width: 20%;
  border-radius: 10px;
  border-bottom-left-radius: 0%;
  border-top-left-radius: 0%;
  background-color: #05131d;
}

.cf_game button:hover {
  background-color: #030c13;
}

.cf_game label {
  margin-left: 5px;
  margin-right: 5px;
}

.cf_game img {
  height: 40px;
  margin: auto;
}

/* =================================================================
/* RELEVANT TO BUG REPORT */

#report_container {
  margin-bottom: 20px;
}

#report_container > * {
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  padding: 20px;
  background-color: #0f212f;
  color: rgb(255, 255, 255);
}

#report_container h1 {
  cursor: pointer;
}

#report_container h1:hover {
  background-color: #061b2b;
}

#report {
  margin-top: 10px;
  /* margin-bottom: 20px; */
  display: none;
  visibility: hidden;
  /* height: 100px; */
}

#report > form > * {
  margin-bottom: 10px;
  width: 100%;
}

#report_walletid,
#report_type,
#report_feature,
#report_description {
  color: black;
  border: none;
  border-radius: 0;
  /* background-color: rgb(186, 186, 186); */
  background-color: #507699;
}

#report_description {
  height: 100px;
}

#report_submit {
  border: none;
  border-radius: 0;
  text-align: center;
  max-width: 100px;
  background-color: #1475e1;
}

/* =================================================================
/* RELEVANT TO CHAT */

#right_side {
  position: fixed;
  top: 0px;
  bottom: 0;
  right: 0;
  width: 300px;
  z-index: 1;
  pointer-events: none;
  padding-top: 65px;
}

#chat {
  height: 100% !important;
  padding-top: 10px;
  padding-right: 10px;
  padding-left: 10px;
  padding-bottom: 15px;
  border-radius: 5px;
  border-top-right-radius: 0px;
  width: 100%;
}

#chat.chat-visible {
  background: rgba(0, 14, 28, 0.8);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#all_msg {
  height: calc(100% - 80px);
  max-height: 95%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  pointer-events: auto;
}

/* Hide scrollbar for Firefox */
#all_msg::-webkit-scrollbar {
  display: none;
}

.msg {
  color: white;
  margin-top: 2.5px;
  margin-bottom: 2.5px;

  padding: 5px;
  display: flex;
  /* border-bottom-left-radius: 5px; */
  /* border-top-left-radius: 5px; */
  border-radius: 5px;
  background-color: var(--primary-color);
  box-shadow: 0 1.5px 2px rgba(0, 0, 0, 0.25);
}
.msg > p {
  padding: 0;
  margin: 0;
  font-size: small;
}

#empty_msg {
  min-height: 60px;
  margin-top: auto;
  color: white;
}

#send_msg {
  /* height: 10%; */
  pointer-events: auto;
  height: 80px;
  display: flex;
  flex-direction: column;
  background-color: rgba(0, 0, 0, 0.294);
  border-radius: 5px;
  margin-top: 5px;
}

#send_msg_text {
  /* width: 140%; */
  height: 40px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  /* overflow-x: visible !important; */
  /* overflow-wrap: break-word; */
}

.button-group {
  display: flex;
  justify-content: space-between;
}

#send_msg_btn {
  border-radius: 0px;
  border-bottom-right-radius: 5px;
  box-shadow: none;
  width: 50%;
}

#send_msg_online {
  color: white;
  margin: 0;
  line-height: 40px;
  border-radius: 0px;
  border-bottom-left-radius: 5px;
  border-right: solid 2px #0f212e;
}

#color_picker_popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #222;
  max-width: 300px;
  max-height: 200px;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 2px 8px #000;
  z-index: 1000;
  flex-direction: column;
  padding: 15px;
}

#color_picker_close {
  height: 35px;
  margin-top: 10px;
}

#color_picker_options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

/* =================================================================
/* RELEVANT TO OCHO */

#ocho {
  justify-content: center;
  color: white;
  position: relative;
  height: 700px;
  width: 1000px;
  box-shadow: none;
  margin-bottom: 12%;
  margin-top: 25px;
  background-color: transparent !important;
}

#ocho_pregame {
  position: absolute;
  display: flex;
  /* flex-direction: row; */
  width: 100%;
  height: 120%;
  overflow-x: scroll;
  overflow-y: visible;
  padding-top: 22px;
  /* pointer-events: none; */
  /*BRRR*/
  /* display: none; */
}

#ocho_waitlist {
  position: relative;
  background-color: transparent !important;
  /* box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0); */
  /* display: flex; */
  /* flex-wrap: wrap;
	justify-content: space-evenly; */
  height: 100%;
  min-width: 100%;
  /* pointer-events: all; */
}

#ocho_waitlist > div {
  /* margin-top: 2%; */
  box-shadow: none;
  position: absolute;
  width: 50%;
  height: 50%;
  display: flex;
  flex-direction: column;
  image-rendering: pixelated;
  /* border-left: solid 5px rgba(255, 255, 255, 0.373);
	border-right: solid 5px rgba(255, 255, 255, 0.373);*/
  /* border: solid 3px rgb(15, 32, 60); */
}

#ocho_waitlist > div > p {
  color: rgb(255, 255, 255);
  background: var(--secondary-color);
  font-size: 2rem;
  height: 3rem;
  /* width: 80%;
	margin-left: auto;
	margin-right: auto; */
  margin: 0;
  opacity: 0;
  /* border-radius: 5%; */
}

#ocho_waitlist > div > button {
  color: rgb(255, 255, 255);
  /* background: var(--secondary-color); */
  /* background-color: rgba(255, 255, 255, 0); */
  background-color: transparent;
  /* border: white solid 1px; */
  background-image: url(../../SkellySlots/ocho/joinButtonCropped.png);
  background-size: contain;
  box-shadow: none;
  background-repeat: no-repeat;
  background-position: center;
  width: 100px;
  height: 23px;
  /* height: auto; */
  /* width: auto; */
  /* background-color: rgba(0, 0, 0, 0.073); */
  margin-top: auto;
  margin-bottom: 50px;
  align-self: center;
  border-radius: 2%;
  transition: 0.2s ease;
}

#ocho_waitlist > div > button:hover {
  transform: scale(1.15);
}

#ocho_waitlist > div > ul {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  margin-top: 135px;
}

#ocho_waitlist > div > ul > li {
  width: 40%;
  height: 35px;
  margin: 0;
  margin-top: 10px;
}

#ocho_waitlist > div > ul > li > p {
  line-height: 35px;
  overflow: hidden;
}

#ocho_waitlist > div > div {
  width: 80%;
  height: 10px;
  margin-top: 20px;
  /* margin-bottom: 0px; */
  margin-left: 10%;
  /* display: none; */
  visibility: hidden;
  background-color: #ffffff;
  transition: linear width 5s;
}

#ocho_waitlist ul {
  list-style: none;
  padding: 0;
  margin-top: 110px;
}

#ocho_waitlist ul > li {
  background: #cce5ffaf;
  color: rgb(0, 0, 40);
  margin: 5px;
  margin-left: 30px;
  margin-right: 30px;
  display: flex;
  justify-content: space-between;
  border-radius: 5px;
  box-shadow: 0px 2px 1px #00000040;
}
#ocho_waitlist ul > li > p {
  padding-left: 1rem;
  margin: 0;
}
#ocho_waitlist ul > li > button {
  border-radius: 0;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  box-shadow: none;
  background-color: var(--secondary-color);
  padding-left: 10px;
  padding-right: 10px;
  width: fit-content;
}

#ocho_waitlist_1 {
  left: 0;
  top: 0;
  /* background-color: rgb(255, 196, 0); */
  /* background: url("../../SkellySlots/ocho/yellowBackground.png"); */
  /* background-size: 100% 100%; */
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(15, 21, 52, 0.876)), url("../../SkellySlots/ocho/yellowwaitlist.png");
  background-size: cover;
}
#ocho_waitlist_1:hover {
  transform: translateY(-20px);
  height: calc(50% + 20px);
}
#ocho_waitlist_2 {
  right: 0;
  top: 0;
  /* background-color: #23b100; */
  /* background: url("../../SkellySlots/ocho/greenBackground.png"); */
  /* background-size: 100% 100%; */
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(15, 21, 52, 0.876)), url("../../SkellySlots/ocho/greenwaitlist.png");
  background-size: cover;
}
#ocho_waitlist_2:hover {
  transform: translateY(-20px);
  height: calc(50% + 20px);
}
#ocho_waitlist_3 {
  left: 0;
  top: calc(50% - 25px);
  /* background-color: #00458f; */
  /* background: url("../../SkellySlots/ocho/blueBackground.png"); */
  /* background-size: 100% 100%; */
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(15, 21, 52, 0.876)), url("../../SkellySlots/ocho/bluewaitlist.png");

  background-size: cover;
}
#ocho_waitlist_3:hover {
  transform: translateY(-20px);
  height: calc(50% + 20px);
}
#ocho_waitlist_4 {
  right: 0;
  top: calc(50% - 25px);
  /* background-color: #aa0404; */
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(15, 21, 52, 0.876)), url("../../SkellySlots/ocho/redwaitlist.png");

  background-size: cover;
}
#ocho_waitlist_4:hover {
  transform: translateY(-20px);
  height: calc(50% + 20px);
}

#ocho_custom {
  position: relative;
  /* top: 0; */
  /* left: 100%; */
  background-color: transparent;
  height: calc(100% - 25px);
  min-width: 100%;
  margin-left: 50px;
}

#ocho_custom_title {
  /* width: 45%; */
  /* height: 10%; */
  /* margin: auto; */
  background: url(../../SkellySlots/ocho/ochoCustom.png);
  background-repeat: no-repeat;
  background-position: center;
  margin-bottom: 20px;
  image-rendering: pixelated;
  height: 50px;
}

#ocho_custom_header {
  background-color: transparent;
  width: 77%;
  margin-top: 20px;
  margin-left: 0px;
  height: 25px;
  display: flex;
  justify-content: space-between;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}
#ocho_custom_header p {
  margin: 0px;
  width: 25%;
  font-size: small;
}

#ocho_custom_wrapper {
  width: 100%;
  height: 70%;
  position: relative;
}

#ocho_custom_spectate {
  display: none;
  /* border: #123b68 3px solid; */
  border-color: #531717;
}
#ocho_custom_play {
  /* border: #123b68 3px solid; */
  border-color: #123b68;
}

.ocho_custom_games {
  position: absolute;
  background-color: transparent;
  width: 100%;
  height: 100%;
  margin: auto;
  overflow-y: scroll;
  border-radius: 5px;
  border: 3px solid;
  padding: 5px;
  border-left: none;
  border-right: none;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.25);
}

.ocho_custom_game {
  background-color: transparent;
  height: 80px;
  margin-bottom: 5px;
  display: flex;
}

.ocho_custom_game div {
  width: 77.8%;
  display: flex;
  justify-content: space-between;
  align-self: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  height: 100%;
  align-items: center;
  /* background-image: url(../../SkellySlots/ocho/ochoCustom.png); */
  background-position: center;
  background-size: cover;
  image-rendering: pixelated;
  aspect-ratio: 4/1;
  background-repeat: no-repeat;
  border-radius: 5px;
  border: orange 2px solid;
  /* border: rgb(250, 229, 189) 2px solid;
	border: rgb(71, 71, 71) 2px solid;
	border: rgb(97, 72, 0) 2px solid;
	border: rgb(70, 136, 169) 2px solid;
	border-color: rgb(246, 246, 246); */
}

.ocho_custom_game p {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25%;
}
.ocho_custom_game p img {
  width: 25px;
  margin-left: 5px;
}

.ocho_custom_game button {
  width: 18%;
  height: 40%;
  margin: auto;
  border-radius: 0;
  box-shadow: none;
  background-color: transparent;
  font-size: large;
  background-image: url(../../SkellySlots/ocho/joinButton.png);
  background-position: center;
  background-size: contain;
  image-rendering: pixelated;
  background-repeat: no-repeat;
}

#ochoPrivate {
  background-image: url(../../SkellySlots/ocho/privateOcho.png);
  background-position: center;
  background-size: contain;
  image-rendering: pixelated;
  background-repeat: no-repeat;
}

#ochoCreate {
  background-image: url(../../SkellySlots/ocho/createOcho.png);
  background-position: center;
  background-size: contain;
  image-rendering: pixelated;
  background-repeat: no-repeat;
}

.ocho_custom_game button:hover {
  transform: scale(1.15);
}

#ocho_custom_PC {
  margin-top: 20px;
  display: flex;
  justify-content: space-evenly;
}

#ocho_custom_PC button {
  transition: 0.2s ease;
  height: 60px;
  width: 150px;
  border-radius: 0;
  box-shadow: none;
  background-color: transparent;
  font-size: large;
}

#ocho_custom_PC button:hover {
  transform: scale(1.15);
}

#ocho_game {
  /*BRRR*/
  display: none;
  visibility: hidden;
  height: 100%;
  width: 100%;
  background-image: url("../../SkellySlots/ocho/paperBackground.png");
  /* background-size: contain; */
  /* background-color: #1157a7; */
  /* background-size: 100%; */
  background-size: cover;

  /* background-repeat: no-repeat; */
  /* background-attachment: fixed; */
}

#ocho_arrows {
  display: block;
  visibility: visible;
  position: absolute;
  bottom: 350px;
  bottom: 50%;
  left: calc(50% - 75px);
  width: 150px;
  height: 150px;
  background-size: 100%;
  z-index: 1;
  opacity: 0.8;
  /* background-image: url("../../SkellySlots/ocho/arrowsRight.png");
	rotate: 0.15turn;
	margin-bottom: -130px;
	margin-left: 200px; */
  /* transition: opacity 1s; */
  transition: margin-left 1s, margin-bottom 1s, rotate 1s;
  pointer-events: none;
}

/* .ocho_p_card {
  position: relative;
} */

/* .ocho_p_card_side {
  width: 160px;
	height: 90px;
}

.ocho_p_card_top {
  top: -100px;
	width: 90px;
	height: 160px;
} */

.ocho_p_container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 150px;
}

.ocho_p_container div {
  position: absolute;
  top: 20px;
  height: 50px;
  width: 88px;
  left: 31px;
  border-radius: 25px;
  /* background-color: rgb(10, 93, 167); */
  border: 3px solid;
  /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.668); */
  box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.5), 0px 3px 5px rgba(0, 0, 0, 0.3);
}

.ocho_profile_skelly {
  position: relative;
  width: 70px;
  height: auto;
  image-rendering: pixelated;
  left: 40px;
}

.ocho_p_container p {
  position: relative;
  /* left: 50%; */
  /* transform: translateX(-50%); */
  margin: 0;
}

.ocho_players > div > div {
  position: relative;
}

#ocho_p1 > div,
#ocho_p5 > div {
  width: 160px;
  height: 90px;
}

#ocho_p1 > div.ocho_p_extra,
#ocho_p5 > div.ocho_p_extra {
  width: 160px;
  height: 10px;
}

#ocho_p2 > div,
#ocho_p3 > div,
#ocho_p4 > div {
  top: -100px;
  width: 90px;
  height: 160px;
}

#ocho_p2 > div.ocho_p_extra,
#ocho_p3 > div.ocho_p_extra,
#ocho_p4 > div.ocho_p_extra {
  width: 10px;
  height: 160px;
}

#ocho_p0_container {
  position: absolute;
  bottom: 180px;
  left: calc(50% - 70px);
  z-index: 1;
}

#ocho_p0_text {
  /* position: absolute;
	bottom: 180px;
	left: calc(50% + 35px); */
  /* transform: translateX(-50%); */
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.576);
}

#ocho_p0_skelly {
  cursor: pointer;
}

#ocho_p1 {
  position: absolute;
  overflow: hidden;
  top: 280px;
  transform: translate(-65%, -50%);
  left: 0;
  /* width: 60px; */
  background-color: white;
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
  /* box-shadow: 5px -1.5px 10px 2px rgba(0, 0, 0, 0.625); */
}

#ocho_p1_container {
  position: absolute;
  top: 260px;
  left: 80px;
}

#ocho_p1_text {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.576);
}

#ocho_p1_skelly {
}

#ocho_p1 > div {
  left: -100px;
  background-color: transparent;
  box-shadow: none;
  background-image: url("../../SkellySlots/ocho/backright.png");
  background-size: cover;
}

#ocho_p2 {
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 15%;
  transform: translate(-50%, -65%);
  display: flex;
  background-color: white;
  /* height: 60px; */
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  /* box-shadow: -2px 5px 10px 2px rgba(0, 0, 0, 0.625); */
}

#ocho_p2_container {
  position: absolute;
  top: 60px;
  left: 80px;
}

#ocho_p2_text {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.576);
}

#ocho_p2_skelly {
}

#ocho_p2 > div,
#ocho_p3 > div,
#ocho_p4 > div {
  background-color: transparent;
  box-shadow: none;
  background-image: url("../../SkellySlots/ocho/backbottom.png");
  background-size: cover;
}

#ocho_p3 {
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 50%;
  transform: translate(-50%, -65%);
  display: flex;
  background-color: white;
  /* height: 60px; */
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  /* box-shadow: -2px 5px 10px 2px rgba(0, 0, 0, 0.625); */
}

#ocho_p3_container {
  position: absolute;
  top: 60px;
  left: calc(50% - 75px);
}

#ocho_p3_text {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.576);
}

#ocho_p3_skelly {
}

#ocho_p4 {
  position: absolute;
  overflow: hidden;
  top: 0;
  right: 15%;
  transform: translate(50%, -65%);
  display: flex;
  background-color: white;
  /* height: 60px; */
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  /* box-shadow: -2px 5px 10px 2px rgba(0, 0, 0, 0.625); */
}

#ocho_p4_container {
  position: absolute;
  top: 60px;
  right: 80px;
}

#ocho_p4_text {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.576);
}

#ocho_p4_skelly {
}

#ocho_p5 {
  position: absolute;
  overflow: hidden;
  top: 280px;
  transform: translate(65%, -50%);
  right: 0;
  /* width: 100px; */
  background-color: white;
  /* width: 60px; */
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  /* box-shadow: -5px -1.5px 10px 2px rgba(0, 0, 0, 0.625); */
}

#ocho_p5_container {
  position: absolute;
  top: 260px;
  right: 80px;
}

#ocho_p5_text {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.576);
}

#ocho_p5_skelly {
}

#ocho_p5 > div {
  /* right: -100px; */
  background-color: transparent;
  box-shadow: none;
  background-image: url("../../SkellySlots/ocho/backleft.png");
  background-size: cover;
}

#ocho_draw {
  position: absolute;
  bottom: 50%;
  left: calc(50% - 100px);
  width: 97.5px;
  height: 167.5px;
  border-radius: 28%;
  box-shadow: -2px -1.5px 10px 2px rgba(0, 0, 0, 0.625);
}

#ocho_draw > button {
  /* position: absolute; */
  background-color: transparent;
  box-shadow: none;
  background-image: url("../../SkellySlots/ocho/drawcard.png");
  background-size: 100%;
  /* bottom: 350px;
	left: calc(50% - 100px); */
  width: 97.5px;
  height: 167.5px;
}

/* #ocho_end_turn > button {
	position: absolute;
	height: 150px;
	width: 50px;
	bottom: 20px;
	right: 0;
	background-color: orange;
	border-bottom-left-radius: 50%;
	border-top-left-radius: 50%;
	border-style: solid;
	border-color: white;
	border-width: 5px 0 5px 5px;
} */

.ocho_discard {
  position: absolute;
  background-color: transparent;
  box-shadow: none;
  background-size: 100%;
  bottom: 50%;
  left: calc(50% + 10px);
  width: 90px;
  height: 160px;
  border-radius: 7%;
  box-shadow: -1px -0.5px 10px 1px rgba(0, 0, 0, 0.625);
}

#ocho_discard1 {
  transform: rotate(0.01turn);
}
#ocho_discard2 {
  transform: rotate(-0.01turn);
}

#ocho_card_list {
  position: absolute;
  /* overflow: scroll; */
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: fit-content;
  max-width: 690px;

  height: 176px;
  padding: 35px 5px 5px 35px;
  /* pointer-events: none; */
  display: flex;
  flex-direction: row;
  /* justify-content: center; */
}

#ocho_card_list::-webkit-scrollbar {
  display: none;
}

#ocho_card_list > button {
  /* position: absolute; */
  background-color: transparent;
  background-size: 100%;
  min-width: 76.5px;
  max-width: 76.5px;
  height: 136px;
  border-radius: 7%;
  box-shadow: -2px -0.5px 10px 1px black;
  pointer-events: auto;
}

#ocho_card_list > button:hover {
  transform: scale(1.2);
  transform-origin: bottom right;
  transition: 0.05s;
}

#ocho_card_list > button:not(:hover) {
  transition: 0.05s;
}

#ocho_chat {
  color: black;
  position: absolute;
  top: -30px;
  border: 2px solid #294a6964;
  background-color: #0f212e32;
  border-radius: 20px;
  left: 50%;
  transform: translate(-50%);
  text-align: center;
}

.ocho_chatbubble {
  position: absolute;
  color: black;
  top: -30px;
  border: 2px solid #ffffff;
  /* border: none; */
  background-color: #ffffffed;
  border-radius: 20px;
  display: none;
  left: 50%;
  transform: translate(-50%);
  text-align: center;
}

.ocho_emotes {
  position: absolute;
  height: 60px;
  width: 60px;
  font-size: 40px;
  box-shadow: none;
  background: rgba(0, 0, 0, 0.581);
  border-width: 3px;
  z-index: 100;
  display: none;
  padding: 0;
}

.ocho_emotes img {
  height: 60px;
  width: 60px;
  object-fit: contain;
}

#ocho_emotes_money {
  /* bottom: 210px; */
  /* left: calc(50% - 90px); */
  /* transform: translateX(-50%); */
  left: -35px;
  border-right-style: solid;
}
#ocho_emotes_fuckyou {
  /* bottom: 270px; */
  /* left: calc(50% - 40px); */
  /* transform: translateX(-50%); */
  top: -60px;
  left: 45px;
  border-bottom-style: solid;
}
#ocho_emotes_beg {
  /* bottom: 210px;
	left: calc(50% + 10px);
	transform: translateX(-50%); */
  right: -35px;
  border-left-style: solid;
}
#ocho_emotes_cry {
  /* bottom: 210px;
	left: calc(50% + 10px);
	transform: translateX(-50%); */
  bottom: -70px;
  left: 45px;
  border-top-style: solid;
}

.ocho_shade_window {
  /*BRRR*/
  display: none;
  position: absolute;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #00000048;
  z-index: 2;
}

#ocho_color_close {
  position: absolute;
  right: 0;
  background: none;
  width: fit-content;
  border: none;
  cursor: pointer;
  width: 40px;
  height: 30px;
  box-shadow: none;
  background-color: transparent;
  color: rgb(238, 47, 47);
  line-height: 30px;
  text-align: center;
  font-size: 25px;
  padding-top: 5px;
  z-index: 1000;
}

.ocho_shade_band {
  position: absolute;
  height: 200px;
  width: 100%;
  background-color: #000000a9;
  top: 200px;
  left: 0;
  display: flex;
  /* z-index: 2; */
}

#ocho_color > button {
  height: 150px;
  margin: auto;
  background-repeat: no-repeat;
  background-position: center;
}

#ocho_color_red {
  background-image: url("../../SkellySlots/ocho/red.png");
  background-color: transparent;
  box-shadow: none;
  background-size: 100%;
}
#ocho_color_blue {
  background-image: url("../../SkellySlots/ocho/blue.png");
  background-color: transparent;
  box-shadow: none;
  background-size: 100%;
}
#ocho_color_green {
  background-image: url("../../SkellySlots/ocho/green.png");
  background-color: transparent;
  box-shadow: none;
  background-size: 100%;
}
#ocho_color_yellow {
  background-image: url("../../SkellySlots/ocho/yellow.png");
  background-color: transparent;
  box-shadow: none;
  background-size: 100%;
}

#ocho_time_bar {
  position: absolute;
  bottom: 5px;
  left: calc(50% - 300px);
  width: 600px;
  height: 10px;
  background: linear-gradient(to bottom, red, #900);
}

.time_bar {
  animation: linear timer 10s forwards;
}

@keyframes timer {
  to {
    transform: scaleX(0);
  }
}

#ocho_winner_container > div {
  display: block;
}

#ocho_winner_container > div > button {
  background-color: #ffffff26;
  border-radius: 0;
  box-shadow: none;
  font-size: 20px;
}

#ocho_winner {
  font-size: 40px;
}

/* BLACKJACK ================================================================= */

.blackjack_game {
  height: 600px;
  width: 100%;
  /* display: grid; */
  grid-template-columns: 28% 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  /* background-color: var(--tertiary-color); */
  background-color: rgb(33, 50, 71);
  margin: auto;
  margin-top: 80px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  justify-content: right;
  display: none;
  visibility: hidden;
  position: relative;
  transition: box-shadow 0.2s ease;
  border-radius: 15px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.blackjack_game .game_info_icon {
  position: absolute;
  color: white;
  font-size: 25px;
  width: fit-content;
  margin: 0;
  bottom: 0px;
  left: 10px;
  cursor: pointer;
  padding: 10px;
}

.blackjack_controls {
  grid-area: 1 / 1 / 3 / 2;
}

.blackjack_area {
  grid-area: 1 / 2 / 3 / 3;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
  border-width: 3px;
  border-style: solid;
  border-color: #213c55;
  border-radius: 10px;
  background-color: #0f212e;
}

#dealer_area {
  grid-area: 1 / 2 / 2 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

#player_area {
  grid-area: 2 / 2 / 3 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  top: -20px;
}

.blackjack_input {
  display: flex;
  align-items: center;
  width: auto;
  box-shadow: 2px 2px 4px #0000004d;
  margin-left: 2%;
  margin-right: 2%;
  border-radius: 10px;
  height: 50px;
}

.blackjack_input input {
  width: 250%;
  height: 100%;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  text-align: left;
  background-color: #0f212e;
  color: white;
}

.ui_label {
  color: #b1bad3;
  font-size: 12px;
  margin-top: 15px;
  margin-bottom: 0;
  text-align: start;
  width: 92%;
}

.ui_input_container {
  display: flex;
  align-items: center;
  width: 95%;
  box-shadow: 0px 2px 1px #0000004d;
  margin-left: 2%;
  margin-right: 2%;
  margin-top: 0;
  border-radius: 10px;
  height: 50px;
}

.ui_input_container input {
  width: 250%;
  height: 100%;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  text-align: left;
  background-color: #0f212e;
  color: white;
}

.half {
  height: 100%;
  border-radius: 0px;
  box-shadow: none;
  border-right-width: 1px;
  border-right-color: #0f212e;
  border-right-style: solid;
}

.double {
  height: 100%;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  box-shadow: none;
  border-left-width: 1px;
  border-left-color: #0f212e;
  border-left-style: solid;
}

.blackjack_buttons {
  margin-top: 5%;
  text-align: center;
}

.blackjack_buttons button {
  display: inline-block;
  width: 45%;
  height: 40px;
  margin: 1%;
}

#BJbasicButtons button {
  pointer-events: none;
  filter: opacity(50%);
  height: 50px;
}

.blackjack_buttons button img {
  width: 15px;
}

.input_label {
  color: #b1bad3 !important;
  font-size: 12px;
  display: flex;
  margin-left: 3%;
  margin-right: 3%;
  width: 92%;
  margin-top: 15px;
  margin-bottom: 0;
  justify-content: space-between;
}

@keyframes cardAppear {
  0% {
    opacity: 0;
    transform: translateX(+20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

@keyframes cardDisappear {
  0% {
    opacity: 1;
    transform: translateY(0px);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}

.card-appear {
  animation: cardAppear 0.5s ease-in-out;
}

.card-disappear {
  animation: cardDisappear 0.5s ease-in-out;
}

.playingCardImage {
  max-height: 175px;
  max-width: 150px;
}

.playingCard {
  margin: 2px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  border-radius: 15px;
  max-height: 175px;
  position: absolute;
}

.oval {
  position: absolute;
  left: 50px;
  border-radius: 20px;
  border: 2px solid #253c4b;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
  background-color: #213743;
  color: white;
  font-size: 18px;
  font-weight: bold;
  height: 35px;
  width: 75px;
  text-align: center;
}

.game_return {
  margin: 0;
  width: 95%;
  border-radius: 10px;
  text-align: left;
  background-color: #0f212e !important;
  color: white;
  padding-left: 0.5rem;
  margin: 0 2%;
  border-width: 0;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

#mines_return {
  margin-bottom: 0.5rem;
}

#mines_number {
  border-width: 0;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

@media screen and (max-width: 700px) {
  body {
    background: rgb(3, 13, 26);
    background: linear-gradient(90deg, rgba(3, 13, 26, 1) 0%, rgba(3, 13, 26, 1) 100%);
  }

  #divs {
    display: block !important;
  }

  .infoDiv {
    margin-bottom: 10px !important;
    margin-top: 10px !important;
    width: 100% !important;
    margin: auto;
  }

  .rb_container {
    width: 100% !important;
  }

  .divImage img {
    margin: auto;
    width: 75%; /* Ensure image takes up full width of container */
    height: auto;
    border-radius: 5px;
    /* image-rendering: pixelated; */
    -webkit-filter: drop-shadow(0px 2px 0px #00000050);
    filter: drop-shadow(0px 2px 0px #00000050);
  }

  .lottery {
    margin-left: auto;
    margin-right: auto;
    width: 98%;
  }

  #temp_event_container {
    height: 880px;
    margin-bottom: 75px;
    width: 98%;
    margin: auto;
  }

  #temp_event_pool {
    text-align: center;
  }

  #temp_event_rules {
    display: none;
    visibility: hidden;
  }

  #temp_event_rules_link {
    display: block;
    visibility: visible;
    position: absolute;
    bottom: 40px;
    color: white;
    text-align: center;
    width: 100%;
    z-index: 1;
  }
  #temp_event_rules_link a {
    color: white;
  }

  #temp_event_currentvotes {
    width: 100%;
    float: center;
    margin: 0;
    padding: 0;
    padding-top: 20px;
    text-align: center;
  }

  #temp_event_placevotes {
    position: absolute;
    width: 100%;
    float: center;
    margin: 0;
    padding: 0;
    text-align: center;
    bottom: 190px;
    display: none;
  }

  #votes_canvas {
    bottom: 240px;
    left: 15px;
  }

  #vote_buttons {
    /* padding-top: 550px; */
    position: absolute;
    bottom: 30px;
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /* overflow: wrap; */
    /* flex-direction: row; */
  }
  .vote_btn {
    height: 60px;
    width: 18%;
    color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    display: flex;
    border-radius: 5px;
    cursor: pointer;
  }

  #vote_checkout {
    background-color: #dbb51c;
    order: 1;
    margin-top: 5px;
    height: 50px;
    width: 100%;
  }

  #collapse_minigame {
    position: absolute;
    bottom: 0px;
  }

  #vote_dice {
    /* background: linear-gradient(
		180deg,
		rgb(14, 120, 212) 0%,
		rgb(16, 37, 159) 100%
	); */
    background-color: #105eb4;
  }

  #vote_limbo {
    background-color: #30a91a;
  }

  #vote_mines {
    background-color: #531aa9;
  }

  #vote_plinko {
    background-color: #000476;
  }

  #vote_blackjack {
    background-color: #8a2e00;
  }

  #modify_popUp {
    width: 98%;
  }

  .game_preview {
    width: 120px;
    height: 180px;
  }

  #miniSlotsContainer {
    flex-direction: column;
  }

  #miniSlotsContainer > :nth-child(1) {
    order: 2;
    display: none;
  } /* Move first element to second */
  #miniSlotsContainer > :nth-child(2) {
    order: 1;
  } /* Move second element to first */
  #miniSlotsContainer > :nth-child(3) {
    order: 3;
  } /* Keep third element third */

  #miniSlotsSlots {
    width: 100% !important;
  }
}

@media screen and (min-width: 560px) {
  /* #ocho_card_list > button:hover {
    transform: translateY(-50px);
    transform: scale(1.2);
    transform-origin: bottom right;
    transition: 0.05s;
  }

  #ocho_card_list > button:not(:hover) {
    transition: 0.05s;
  } */

  /* #chat {
    display: block;
    visibility: visible;
    height: 85% !important;
    margin-top: 150px !important;
  } */

  #chat #send_msg {
    display: none;
  }

  #chat.chat-visible #send_msg {
    display: flex;
  }

  #all_msg.sm-hidden {
    display: none;
  }
}

@media screen and (max-width: 1080px) {
  #lever img {
    display: none;
  }

  footer {
    gap: 50px;
  }
  @media screen and (min-width: 886px) {
    #footer_logo {
      padding-left: 70px;
      /* margin-left: auto; */
      /* margin-right: auto; */
    }

    /* #chat {
      height: 90% !important;
      margin-top: 70px !important;
    } */
  }
  #footer_logo p {
    text-align: center;
    /* margin-left: auto; */
    /* margin-right: auto; */
  }

  .container {
    max-width: 715px;
    margin: auto;
  }

  @media screen and (min-width: 700px) {
    #temp_event_placevotes {
      width: 200px;
    }
    #temp_event_currentvotes {
      width: 230px;
    }
  }
  #temp_event_container_small {
    width: 98%;
    height: 200px;
    margin: auto;
  }
  #temp_event_header_small {
    top: 5px;
    font-size: 30px;
    width: 100%;
    text-align: center;
    left: 0%;
    font-size: x-large;
  }

  #temp_event_header {
    font-size: x-large;
  }

  #temp_event_time_small {
    margin: 0;
    top: 60px;
    left: 5%;
    font-size: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: fit-content;
  }

  #temp_event_pool_small {
    position: absolute;
    color: white;
    font-size: 20px;
    margin: 0;
    top: 100px;
    left: 5%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
  }

  #temp_event_participate {
    position: absolute;
    background-color: rgb(185, 120, 0);
    /* font-size: 20px; */
    top: 150px;
    /* width: 100px; */
    left: 5%;
    height: 30px;
    left: 50%;
    transform: translateX(-50%);
  }

  #results_table td:nth-child(4),
  #results_table td:nth-child(6) {
    margin-right: 25%;
  }

  /* #votes_canvas {
		top: 425px;
	} */

  #limbo_main_x {
    font-size: 7rem;
  }
  @media screen and (min-width: 560px) {
    #limbo_main_x {
      padding-top: 5rem;
    }
  }

  #ocho {
    width: 110%;
    margin-left: -5%;
    /* padding-bottom: 40px; */
  }
  #ocho_card_list {
    /* height: 560px; */
    /* width: 100%; */
    /* scale: 0.8; */
    /* height: 310px; */
    /* margin-bottom: 0px; */
    /* padding-top: 100px; */
  }
  #ocho_waitlist > div > ul {
    margin-top: 120px;
  }
  #ochoCarousel {
    padding-top: 40px;
  }

  /* #plinko .game_window{
		position: relative;
	} */
  /* #plinko .game_controls {
		/* min-width: 35%;
    position: absolute;
    left: 0;
	} */
  #plinko .game_window > div {
    position: absolute;
    /* min-width: 515px; */
    /* height: 600px; */
    right: 0;
    /* min-width: 600px; */
    transform-origin: right;
    transform: scale(0.714, 0.8);
    /* scale: center 0.8 1; */
  }

  #mines_btn_grid {
    width: 105%;
    margin-left: -2.5%;
    margin-right: 2.5%;
    /* aspect-ratio: 1 / 1; */
  }

  #cf_create_head_btn {
    /* padding-left: 0; */
    margin-left: 0;
    /* margin-right: 20px; */
  }
  @media screen and (min-width: 700px) {
    #cf_create_head_btn {
      /* padding-left: 0; */
      margin-left: 0;
      margin-right: 20px;
    }
  }

  #roulette .game_window[data-game] #roulette_assets {
    transform: translateX(50%);
    z-index: 1;
  }

  #roulette .game_window[data-game] > *:not(#roulette_assets) {
    opacity: 0.05;
    transition: opacity 0.5s ease-in-out;
  }

  #roulette_assets {
    left: -140px;
    top: 150px;
    transition: transform 0.5s ease-in-out;
  }

  #roulette_assets div {
    display: none;
  }

  #roulette_table {
    top: 260px;
    left: unset;
    right: -20px;
    transform: rotateZ(0.25turn);
    transform-origin: 70% 50%;
    min-width: 500px;
  }

  #roulette_table_btns {
    display: flex;
    flex-direction: column;

    bottom: 62px;
    left: unset;
    right: 260px;
  }

  #roulette_table_undo {
    margin-bottom: 5px;
  }

  #roulette_result {
    top: 35px;
    left: unset;
    right: 260px;
  }

  #roulette_recents {
    display: none;
  }
}

@media screen and (max-width: 890px) {
  .footer_logo {
    padding: 1rem;
  }
  .footer_logo p {
    margin-bottom: 0;
  }

  #ocho {
    /* height: 560px; */
    /* width: 100%; */
    scale: 0.9;
    padding-bottom: 0px;
    margin-top: 0;
  }
  #ochoCarousel {
    padding-top: 0px;
  }

  #ocho_players > div {
    /* #ocho_card_list > button { */
    scale: 0.8;
  }

  #ocho_p3 {
    /* left: 50%; */
    /* transform: translateX(-50%); */
    transform: translate(calc(-50% - 35px), -65%);
  }

  #ocho_arrows {
    scale: 0.8;
  }

  #ocho_waitlist {
    height: 90%;
  }
  #ocho_waitlist ul {
    font-size: 14px;
    margin-top: 100px !important;
  }

  #ocho_waitlist ul button {
    /* list-style: none; */
    /* padding: 0; */
    font-size: 11px;
  }

  #ocho_waitlist ul > li {
    /* list-style: none; */
    /* padding: 0; */
    /* margin: 0; */
    /* max-height: 18px; */
    /* margin-top: 10px; */
    /* max-height: fit-content; */
  }
}

@media screen and (max-width: 720px) {
  /* CHANGE OCHO STYLE ------------------------------------------*/
  #ocho {
    scale: 0.9;
    /* margin-top: -25px; */
    /* height: 850px; */
    /* width: 100%; */
  }

  #ocho_card_list {
    /* height: 560px; */
    /* width: 100%; */
    /* scale: 0.65; */
    /* height: 300px; */
    /* margin-bottom: 0px; */
    /* bottom: -20px; */
    /* padding-top: 100px; */
    /* transform: translateY(30%); */
    /* width: 90%; */
    /* left: 5%; */
    max-width: 500px;
  }
  #ocho_draw {
    /* height: 560px; */
    /* width: 100%; */
    scale: 0.8;
  }
  .ocho_discard {
    /* height: 560px; */
    /* width: 100%; */
    scale: 0.8;
  }

  /* bottom: 170px;
		left: calc(50%); */
  /* #ocho_emotes_money { */
  /* bottom: 180px; */
  /* left: calc(50% - 50px); */
  /* transform: translateX(-50%); */
  /* border-right-style: solid; */
  /* } */
  /* #ocho_emotes_fuckyou {
		bottom: 240px;
		left: calc(50%);
		transform: translateX(-50%);
		border-bottom-style: solid;
	}
	#ocho_emotes_beg {
		bottom: 180px;
		left: calc(50% + 55px);
		transform: translateX(-50%);
		border-left-style: solid;
	} */

  #ocho_p1,
  #ocho_p2,
  #ocho_p4,
  #ocho_p5 {
    display: flex;
    flex-direction: column;
  }
  #ocho_p3 {
    display: flex;
  }

  #ocho_p1 > div,
  #ocho_p2 > div,
  #ocho_p4 > div,
  #ocho_p5 > div {
    width: 160px;
    height: 90px;
  }

  #ocho_p1 > div.ocho_p_extra,
  #ocho_p2 > div.ocho_p_extra,
  #ocho_p4 > div.ocho_p_extra,
  #ocho_p5 > div.ocho_p_extra {
    width: 160px;
    height: 10px;
  }

  #ocho_p3 > div {
    top: -100px;
    width: 90px;
    height: 160px;
  }

  #ocho_p3 > div.ocho_p_extra {
    width: 10px;
    height: 160px;
  }

  #ocho_p0_container {
    bottom: 165px;
    left: calc(50% - 70px);
  }

  #ocho_p0_text {
  }

  #ocho_p0_skelly {
  }

  #ocho_p1 {
    position: absolute;
    overflow: hidden;
    top: 60%;
    transform: translate(-85%, -50%);
    left: 0;
    /* width: 60px; */
    background-color: white;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
    /* box-shadow: 5px -1.5px 10px 2px rgba(0, 0, 0, 0.625); */
  }

  #ocho_p1_container {
    top: 58%;
    left: 10px;
  }

  #ocho_p1_text {
  }

  #ocho_p1_skelly {
  }

  #ocho_p1 > div {
    left: -100px;
    background-color: transparent;
    box-shadow: none;
    background-image: url("../../SkellySlots/ocho/backright.png");
    background-size: cover;
  }

  #ocho_p2 {
    position: absolute;
    overflow: hidden;
    top: 20%;
    transform: translate(-85%, -50%);
    left: 0;
    /* width: 60px; */
    background-color: white;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;

    /* box-shadow: 5px -1.5px 10px 2px rgba(0, 0, 0, 0.625); */
    /* position: absolute;
		overflow: hidden;
		top: 0;
		left: 150px;
		transform: translate(-50%, -65%);
		/* background-color: white; */
    /* height: 60px; */
    /* border-bottom-left-radius: 7px;
		border-bottom-right-radius: 7px; */
    /* box-shadow: -2px 5px 10px 2px rgba(0, 0, 0, 0.625); */
  }

  #ocho_p2_container {
    top: 15%;
    left: 10px;
  }

  #ocho_p2_text {
  }

  #ocho_p2_skelly {
  }

  #ocho_p2 > div {
    left: -100px;
    background-color: transparent;
    box-shadow: none;
    background-image: url("../../SkellySlots/ocho/backright.png");
    background-size: cover;
  }

  #ocho_p3 > div {
    background-color: transparent;
    box-shadow: none;
    background-image: url("../../SkellySlots/ocho/backbottom.png");
    background-size: cover;
  }

  #ocho_p3 {
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 50%;
    /* transform: translate(calc(-50% - 20px), -65%); */
    display: flex;
    background-color: white;
    /* height: 60px; */
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    /* box-shadow: -2px 5px 10px 2px rgba(0, 0, 0, 0.625); */
  }

  #ocho_p3_container {
    top: 50px;
    left: calc(50% - 70px);
  }

  #ocho_p3_text {
  }

  #ocho_p3_skelly {
  }

  #ocho_p4 {
    position: absolute;
    overflow: hidden;
    top: 20%;
    transform: translate(85%, -50%);
    right: 0;
    /* width: 100px; */
    background-color: white;
    /* width: 60px; */
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    /* box-shadow: -5px -1.5px 10px 2px rgba(0, 0, 0, 0.625); */
  }

  #ocho_p4_container {
    top: 15%;
    right: 10px;
  }

  #ocho_p4_text {
  }

  #ocho_p4_skelly {
  }

  #ocho_p4 > div {
    /* right: -100px; */
    background-color: transparent;
    box-shadow: none;
    background-image: url("../../SkellySlots/ocho/backleft.png");
    background-size: cover;
  }
  /* #ocho_p4 {
		position: absolute;
		overflow: hidden;
		top: 0;
		right: 150px;
		transform: translate(50%, -65%);
		display: flex;
		background-color: white;
		/* height: 60px;
		border-bottom-left-radius: 7px;
		border-bottom-right-radius: 7px;
		/* box-shadow: -2px 5px 10px 2px rgba(0, 0, 0, 0.625);
	}
	#ocho_p4_text {
		position: absolute;
		top: 60px;
		right: 110px;
		font-size: 1.5rem;
		color: rgba(255, 255, 255, 0.576);
	} */

  #ocho_p5 {
    position: absolute;
    overflow: hidden;
    top: 60%;
    transform: translate(85%, -50%);
    right: 0;
    /* width: 100px; */
    background-color: white;
    /* width: 60px; */
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    /* box-shadow: -5px -1.5px 10px 2px rgba(0, 0, 0, 0.625); */
  }

  #ocho_p5_container {
    top: 58%;
    right: 10px;
  }

  #ocho_p5_text {
  }

  #ocho_p5_skelly {
  }

  #ocho_p5 > div {
    /* right: -100px; */
    background-color: transparent;
    box-shadow: none;
    background-image: url("../../SkellySlots/ocho/backleft.png");
    background-size: cover;
  }

  /* CHANGE OCHO STYLE ------------------------------------------*/
}

@media screen and (max-width: 450px) {
  #volume_table {
    width: 100%;
  }

  #volume_extra_info {
    display: none;
    /* position: absolute;
	width: 50%;
	top: 50%;
	transform: translateY(-50%);
	right: 0;
	background-color: #0f212e;
	padding-top: 100px;
	padding-bottom: 100px;
	border-radius: 20px; */
  }
}

@media screen and (max-width: 560px) {
  #color_picker_popup {
    flex-direction: column-reverse; /* or similar */
  }

  #welcome_gradient {
    display: none;
  }

  .game_last_result_container > .game_result_dummy {
    display: none;
  }

  .left-side {
    padding-left: 0;
  }

  .left-side .card {
    margin: 2rem 0;
    margin-top: 0;
  }

  .games {
    flex-direction: column-reverse;
    height: unset;
    min-height: 600px;
  }

  .game_window {
    width: 100%;
    min-height: 352px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
    border-width: 3px;
    border-style: solid;
    border-color: #213c55;
    border-radius: 10px;
  }

  .game_odds_container {
    min-height: 72px;
    height: unset;
    margin: auto;
    margin-bottom: 10px;
    max-width: 90%;
    right: 2%;
    width: 100%;
  }

  .game_controls {
    width: 100%;
  }

  .game_controls {
    padding: 1rem 0.6rem;
  }

  .game_nb_bets {
    width: 100%;
    height: 40px;
  }

  .game_info_icon {
    /* margin-top: 20px;
		margin-bottom: -10px; */
    display: none;
    visibility: hidden;
  }

  #slider_arrow {
    top: 30%;
  }

  #mines .game_window {
    /* max-height: 300px; */
  }
  .mines-amount-label {
    margin: 0;
    margin-left: 10px;
    width: 100%;
    text-align: start;
  }
  #mines_amount {
    width: 100%;
    height: 40px;
    padding-left: 0.8rem;
  }

  /* #mines_number {
		margin-top: -1rem;
		width: 100%;
		text-align: center;
		order: 3;
		color: white;
	}

	#mines_number select {
		margin-bottom: 0.6rem;
	} */

  .bet-amount-label,
  .limbo-amount-label {
    margin: 0;
    margin-left: 10px;
    width: 100%;
    text-align: start;
    /* order: 1; */
  }

  .ui_input_container {
    /* order: 2; */
    width: 100%;
    height: 40px;
    margin-top: 0;
    margin-bottom: 0.5rem;
  }

  .input_label {
    width: 100%;
    margin-right: 5%;
    padding-left: 2%;
  }

  .return-amount-label,
  .limbo-return-label {
    margin: 0;
    padding-left: 1%;
    /* order: 4; */
    text-align: start;
    width: 100%;
  }

  .game_return {
    margin: 0;
    /* order: 5; */
    width: 100%;
    border-radius: 5px;
    text-align: left;
    background-color: #0f212e;
    color: white;
    /* padding-left: 0.5rem; */
  }

  .game_bet_btn {
    margin-top: 5px;
    order: -1;
  }

  .game_mode {
    margin-top: 30px;
    order: 1;
  }

  #mines_btn_grid {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
  }

  #mines > .game_window {
    height: 100vw;
  }

  .blackjack_controls {
    position: relative;
    top: 75px;
  }

  #blackjack_bet_btn {
    position: relative;
    top: -245px;
  }

  #ocho {
    /* scale: 0.7; */
    /* max-width: 540px; */
    /* margin-left:5px; */
    /* margin-right: 5px; */
    /* margin-left: -45px; */
    margin-top: 80px;
    margin-bottom: 0px;
  }

  #ocho_waitlist > div {
    /* height: clamp(250px, 250px, 350px); */
    height: auto;
    position: static;
    /* width: 360px; */
    width: clamp(260px, 100%, 360px);
    margin: auto;
    margin-top: -1rem;
  }
  #ocho_waitlist > div > ul {
    /* min-height: 75px; */
    margin-top: 95px !important;
  }
  #ocho_waitlist > div > button {
    margin-bottom: 25px;
  }

  #ocho_waitlist {
    height: 100%;
    overflow: scroll;
    padding-top: 15px;
  }
  #ocho_custom {
    /* height: auto; */
    height: 750px;
    /* margin-bottom: auto; */
  }

  #ochoCarousel {
    margin-top: 40px !important;
  }

  /* #ocho_waitlist > div:hover {
		transform: none;
		height: auto;
	} */

  #ocho_card_list {
    max-width: 350px;
  }
  /* 
	#ocho_card_list > button {
		width: 70px;
		height: 126px;
	}
*/

  #ocho_time_bar {
    left: 0;
    right: 0;
    width: 100%;
  } /*

	#ocho_p3 {
		max-width: 100%;
	}*/

  #results_container {
    overflow-x: auto;
  }

  /* #results_table td:nth-child(4),
	#results_table td:nth-child(6) {
		margin-right: 25%;
	} */
  /*
	.ocho_discard,
	#ocho_draw {
		bottom: 320px;
		width: 84.5px;
		height: 150.5px;
	}
	#ocho_draw > button {
		width: 88.5px;
		height: 150.5px;
	}
	#ocho_arrows {
		bottom: 300px;
	} */

  .blackjack_input {
    height: 12%;
  }
  .blackjack_controls .input_label {
    margin-left: 1%;
  }

  #right_side {
    bottom: 70px;
    top: 0px;
    /* padding-top: 70px !important; */
    /* z-index: 90; */
  }

  #all_msg {
    /* max-height: 350px; */
  }

  #chat {
    display: none;
    visibility: hidden;
  }

  #chat.chat-visible {
    display: block;
    visibility: visible;
  }

  .blackjack_game {
    height: auto;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 2fr 1fr;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
  }

  .blackjack_controls {
    grid-area: 2 / 1 / 2 / 3;
    padding-bottom: 30px;
  }

  .blackjack_area {
    min-height: 570px;
    grid-area: 1 / 1 / 1 / 3;
  }

  #dealer_area {
    grid-area: 1 / 1 / 1 / 3;
    /* align-items: start; */
    top: -195px;
    margin-top: 6rem;
  }

  /* #dealer_area .oval {
		bottom: 55%;
	} */

  #player_area {
    grid-area: 1 / 1 / 2 / 3;
    /* align-items: end; */
    bottom: -135px;
    top: auto;
    margin-bottom: 2.4rem;
  }

  #blackjack_bet_btn {
    margin-top: 1rem;
    z-index: 1;
  }

  .blackjack_buttons {
    margin-top: 2%;
  }

  #left-hand,
  #right-hand {
    align-items: end !important;
    margin-bottom: 1rem;
    height: unset !important;
    justify-content: center !important;
  }

  #left-hand .oval,
  #right-hand .oval {
    top: 10px !important;
    left: 0;
    right: 0;
    margin: auto;
  }

  #footer_logo {
    padding-bottom: 100px;
  }

  footer div {
    /* margin-top: 50px; */
    height: 200px;
  }

  .game_last_result_container {
    max-width: 100%;
  }

  #results_table tr th:nth-child(3) {
    display: none;
  }

  #results_table tr td:nth-child(3) {
    display: none;
  }

  #results_table tr th:nth-child(4) {
    display: none;
  }

  #results_table tr td:nth-child(4) {
    display: none;
  }

  #results_table tr th:nth-child(5) {
    display: none;
  }

  #results_table tr td:nth-child(5) {
    display: none;
  }

  #event_container {
    flex-direction: column;
  }

  #event_container > div {
    margin-left: 2%;
    width: 96%;
  }
  /* #ocho_p1 {
		top: 60%;
		height: fit-content;
	}

  #ocho_p1_text {
    top: 55%;
    left: 80px;
  }

  #ocho_p2 {
    transform: rotate(270deg) translateY(-50%);
    left: -30px;
    top: 25%;
  }
  #ocho_p2_text {
    top: 20%;
    left: 80px;
  }

  #ocho_p4 {
    transform: rotate(90deg) translateY(50%);
    right: -30px;
    top: 25%;
  }

	#ocho_p5 {
		top: 60%;
	} */

  #mines_game_on {
    width: 100%;
  }

  #ocho_waitlist_1:hover,
  #ocho_waitlist_3:hover,
  #ocho_waitlist_4:hover,
  #ocho_waitlist_2:hover {
    height: auto;
    transform: none;
    /* height: 260px;
		transform: translateY(-20px); */
  }

  #plinko .game_window {
    min-height: 400px;
  }
  #plinko .game_window > div {
    position: absolute;
    /* min-width: 515px; */
    /* height: 600px; */
    right: 50%;
    top: 50%;
    /* min-width: 600px; */
    transform-origin: top right;
    transform: scale(0.55, 0.6) translate(50%, -50%);
    /* scale: center 0.8 1; */
  }

  #roulette .game_window[data-game] #roulette_assets {
    transform: translateX(calc(50% + 60px));
  }

  #roulette .game_window {
    height: 600px;
  }

  #roulette_assets {
    left: -200px;
  }
}

@media screen and (max-width: 480px) {
  .lottery-buttons {
    flex-direction: column;
    margin-top: 1rem;
    gap: 0.4rem;
  }

  footer div {
    height: 250px;
  }

  #footer_links_media {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0;
    margin-top: 20px;
  }

  #footer_media {
    padding: 0;
    margin: 0;
    margin-top: 20px;
    margin-bottom: 50px;
  }

  #footer_logo {
    padding-left: 0;
    padding-bottom: 100px;
    height: 200px;
    text-align: center;
  }

  .game_odds_container {
    right: 0;
    left: 0;
    max-width: 96%;
  }

  #limbo_main_x {
    font-size: 5.5rem;
  }

  .game_odds_container .limbo_mult_container,
  .game_odds_container .limbo_win_container {
    width: 100%;
    padding: 4px;
  }

  #cf_create_container {
    flex-wrap: wrap;
    height: auto;
    justify-content: center;
    column-gap: 2rem;
    padding: 0.75rem 0;
    margin-bottom: 1rem;
  }
  #cf_create_head_btn {
    margin-left: 0;
  }
  #cf_create_amount {
    margin: 0.55rem 0;
  }

  #cf_create_container .ui_input_container {
    width: 95%;
    margin: auto;
  }

  #cf_create_container #cf_create_btn {
    text-align: center;
    margin: 0.35rem auto;
    padding: 0.35rem;
    height: auto;
  }

  .cf_game {
    width: 100%;
  }

  .oval {
    left: 16px;
  }

  /* #ocho_card_list {
		height: 270px;
	} */
}

/* .pf_seed,
#pf_nonce,
#event_table_btn {
  display: none;
  visibility: hidden;
}

#volume_table_btn {
  margin-right: 0px;
}

/* Target the checkbox */
input[type="checkbox"] {
  -webkit-appearance: none; /* Remove default styles (webkit browsers) */
  -moz-appearance: none; /* Remove default styles (Firefox) */
  appearance: none; /* Remove default styles (standard) */
  width: 12px; /* Adjust size if needed */
  height: 12px; /* Adjust size if needed */
  border-radius: 4px; /* Optional: Rounded corners */
  background-color: white; /* Checkbox background color */
  padding: 0px;
  border-width: 0px;
  margin: auto;
  margin-right: 2px;
  background-color: rgb(224, 224, 224);
}

/* Custom checkbox checked state */
input[type="checkbox"]:checked {
  background-color: #16c910; /* Change background color when checked */
}

#heyUser,
#profile_popup_username {
  text-align: left;
  margin: 0px;
  font-size: medium;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: black;
  -webkit-filter: drop-shadow(0px 2px 0px #00000050);
  filter: drop-shadow(0px 2px 0px #00000050);
}

.profileBadges {
  height: 33%;
  display: flex;
  align-items: center;
}

.profileBadges div {
  margin-left: 1px;
  height: 90%;
  aspect-ratio: 1/1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-filter: drop-shadow(0px 2px 0px #00000050);
  filter: drop-shadow(0px 2px 0px #00000050);
}

.profileProgression {
  height: 33%;
}

.currentRank {
  height: 100%;
  aspect-ratio: 1/1;
  background-size: cover;
  background-position: center;
  background-size: 135% 135%;
}

.nextRank {
  height: 100%;
  aspect-ratio: 1/1;
  background-size: cover;
  background-position: center;
  background-size: 135% 135%;
}

/* .modifyProfile {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 25px;
  height: 25px;
  background-color: transparent;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  box-shadow: none;
} */

.modifyProfile:hover {
  background-color: transparent;
}

.modify_options {
  width: 100%;
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  border-radius: 15px;
  overflow-y: scroll;
}

.option {
  width: 45%;
  aspect-ratio: 1/1;
  margin: auto;
  background-color: transparent;
  border-radius: 15px;
  font-size: large;
  border: 2px solid #0a111d;
  box-shadow: 0px 3px 5px #0000004d;
}

.shop_option {
  aspect-ratio: 3/1;
  width: 46%;
  margin: 1%;
  background-color: transparent;
  border-radius: 3px;
  font-size: large;
  border: 2px solid #294a69;
  box-shadow: 0px 3px 5px #0000004d;
}

.option:hover {
  background-color: transparent;
  transition: box-shadow 0.25s ease;
  border-color: white;
  box-shadow: 0px 0px 5px white;
}

#modify_save {
  height: 40px;
  margin-top: 10px;
}

.inventory {
  display: none;
  box-shadow: inset 0px 3px 5px #0000004d;
  background-color: #243044;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 15px;
  position: relative;
  justify-content: center;
}

.inventory h4 {
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
}

.inventoryOptions {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}

.inventoryOptions button {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: 30%;
  aspect-ratio: 1/1;
  background-color: transparent;
  border-radius: 3px;
  font-size: large;
  border: 2px solid #294a69;
  box-shadow: 0px 3px 5px #0000004d;
  font-size: small;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.inventoryOptionsBanner {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}

.inventoryOptionsBanner button {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: 90%;
  aspect-ratio: 400/100;
  background-color: transparent;
  border-radius: 3px;
  font-size: large;
  border: 2px solid #294a69;
  box-shadow: 0px 3px 5px #0000004d;
  font-size: small;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 2%;
}

.bannerOption {
  border: 3px solid;
  border-radius: 3px;
  box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.5), 0px 3px 5px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.25s ease;
  border-color: #0a111d;
}

.bannerOption:hover {
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
  transition: box-shadow 0.25s ease;
}

.badgeOption {
  transition: box-shadow 0.25s ease;
  margin-bottom: 3%;
  border-radius: 15px !important;
  border-color: #0a111d !important;
}

.badgeOption:hover {
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
  transition: box-shadow 0.25s ease;
  border-color: white;
}

.avatarOption {
  margin-bottom: 3%;
  image-rendering: pixelated;
  transition: box-shadow 0.25s ease;
  border-radius: 15px !important;
  border-color: #0a111d !important;
}

.avatarOption:hover {
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
  transition: box-shadow 0.25s ease;
  border-color: rgb(255, 255, 255);
}

.decorationOption {
  transition: box-shadow 0.25s ease;
  border-color: #0a111d !important;
}

.decorationOption:hover {
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
  transition: box-shadow 0.25s ease;
  border-color: rgb(255, 255, 255);
}

#default {
  background-image: url(../../SkellySlots/0.png);
}

#modify_popUp {
  width: 365px;
  max-width: 98%;
}

#report_header {
  max-width: 98%;
  margin: auto;
  border-radius: 15px;
  text-align: center;
  font-size: large;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

#report_container {
  max-width: 98%;
  margin: auto;
  margin-bottom: 10px;
  margin-top: 10px;
}

#report {
  border-radius: 5px;
}

#report_submit {
  border-radius: 3px;
}

#prizes_display {
  margin: auto;
  margin-bottom: 150px;
  width: 100%;
  height: fit-content;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);

  background: rgb(20, 28, 51);
  background: linear-gradient(180deg, rgba(1, 63, 148, 0.05) 0%, rgba(1, 63, 148, 0.5) 100%);
}

#gameRules {
  height: 100%;
  width: 33%;
  display: block;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 15px;
  margin-top: 5px;
  margin-left: 5px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

#gameSelector {
  width: 100%;
  height: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#gameSelector button,
h3 {
  background-color: transparent;
  box-shadow: none;
  color: white;
}

#gameInformation {
  width: 100%;
  height: 75%;
  display: block;
  justify-content: center;
  align-items: center;
  color: white;
}

#gameInformation p {
  margin: 0;
}

#gamePrizes {
  height: 100%;
  width: 67%;
  display: block;
  justify-content: center;
  align-items: center;
  border-bottom: none;
  border-right: none;
  border-top: none;
  border-radius: 2px;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  background-color: transparent;
}

#mainPrizes {
  width: 100%;
  height: 75%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

#secondaryPrizes {
  width: 100%;
  height: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

#secondPrize img {
  width: 90%;
  max-width: 100%;
  aspect-ratio: 1/1;
}

#firstPrize img {
  width: 100%;
  aspect-ratio: 1/1;
}

#thirdPrize img {
  width: 90%;
  aspect-ratio: 1/1;
}

.prize img {
  border-radius: 5px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  image-rendering: pixelated;
}

.prize h2,
h3,
h4 {
  margin: 0;
}

.prize {
  width: 30%;
  margin: 1%;
  bottom: 0;
  align-self: end;
}

.gameSelectorGame {
  display: none;
  width: fit-content;
  align-items: center;
  justify-content: center;
}

#gameSelector button {
  width: 25%;
}

.gameInformationInfo {
  display: none;
  width: auto;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
}

#initialGame {
  display: flex;
}

#initialInfo {
  display: block;
}

.claimReward {
  background-color: var(--secondary-color);
  margin: auto;
  margin-top: 10px;
  padding: 20px;
  box-shadow: inset 0px -3px 5px #0000004d;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.claimRewardLevel {
  display: flex;
  background-color: transparent;
  justify-content: center;
  align-items: center;
  width: fit-content;
}

.claimRewardReward {
  width: 100%;
}

.claimRewardReward p {
  font-size: xx-large;
  margin: 0;
}

.claimRewardReward img {
  width: 50%;
  max-width: 150px;
  aspect-ratio: 1/1;
  border-radius: 5px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.claimRewardButton {
  background-color: black;
  cursor: default;
  box-shadow: inset 0px -3px 5px #0000004d;
  border-radius: 20px;
}

.claimRewardButton:hover {
  background-color: black;
}

#level2Reward {
  max-width: 300px;
  margin-top: 10px;
  margin-bottom: 10px;
  background-image: url(../../SkellySlots/effect.png), linear-gradient(90deg, rgba(12, 137, 217, 1) 25%, rgba(13, 185, 86, 1) 75%);
  border-color: rgb(12, 137, 217);
}

.claimButton {
  height: 40px;
  margin-top: 10px;
  background-color: #1475e1;
}

.claimButton:hover {
  background-color: #105eb4;
  transition: background-color 0.2s ease;
}

.infoButton {
  height: 40px;
  margin-top: 10px;
  background-color: #2f4553;
}

.infoButton:hover {
  background-color: #51768d;
  transition: background-color 0.2s ease;
}

#wormImg img {
  box-shadow: none;
}

#remainingWorm {
  margin-top: 10px;
  margin-bottom: 0;
}

#beatdown {
  display: none;
  visibility: hidden;
}

#adminBtn {
  margin-top: 5px;
}

#admin_content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#admin_content * {
  margin-top: 10px;
}

#ocho_toggle {
  display: inline-block;
}

#ocho_switch {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 40px;
  background: transparent;
}

#ocho_checkbox {
  opacity: 0;
  width: 0;
  height: 0;
}

#ocho_slider {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  background: #d3d3d3;
  /* transform: skewX(-20deg); Skew the entire slider */
  transform-origin: 0 0;
  display: flex;
  overflow: hidden;
  border: #123b68 2px solid;
  border-radius: 5px;
  top: 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}

#ocho_slider .label {
  position: absolute;
  width: 50%;
  height: 100%;
  text-align: center;
  line-height: 60px;
  font-size: 16px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 6px 12px rgba(0, 0, 0, 0.3), inset 0 -3px 6px rgba(0, 0, 0, 0.2);
}

/* Position and color for the left label */
#ocho_slider .left {
  left: 0;
  background-color: #007bff; /* Default color for Play */
  transition: 0.35s ease;
  border-right: #123b68 2px solid;
}

/* Position and color for the right label */
#ocho_slider .right {
  right: 0;
  background-color: #7d6c6c; /* Default color for Spectate */
  transition: 0.35s ease;
  border-left: #504242 2px solid;
}

/* Style for the left side when toggled on */
#ocho_checkbox:checked + #ocho_slider .left {
  background-color: #007bff; /* Color when toggled on */
  opacity: 0.3; /* Dimmed opacity for Play side */
}

/* Style for the right side when toggled on */
#ocho_checkbox:checked + #ocho_slider .right {
  background-color: #a72828; /* Color when toggled on */
  border-left: #531717 2px solid;
}

#ocho_checkbox:checked + #ocho_slider {
  border: #531717 2px solid;
}

#ochoCarousel {
  flex-direction: column;
  justify-content: space-between;

  position: relative;
  width: 50%;
  text-align: center;
  margin: auto;
  color: white;
  margin-top: 10px;
  display: none;
  visibility: hidden;
}

.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
}

.arrow {
  background-color: transparent;
  border: none;
  font-size: 24px;
  cursor: pointer;
  box-shadow: none;
}

.arrow:hover {
  background-color: transparent;
  transform: scale(1.15);
}

.carousel-text {
  font-size: 16px;
  display: inline-block;
  transition: opacity 0.3s;
  display: none;
  visibility: hidden;
}

.carousel-text.active {
  opacity: 1;
  display: inline-block;
  visibility: visible;
}

.indicator {
  display: flex;
  gap: 5px;
  margin: 0 10px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  display: inline-block;
}

.dot.active {
  background-color: rgb(37, 121, 199);
}

#ochoPage {
  margin: 0; /* Remove default margin */
  text-align: center; /* Center the text */
}

#ochoCreate_popUp > div {
  display: flex;
  justify-content: space-evenly;
  /* margin-bottom: 10px; */
}

#ochoCreate_popUp input {
  margin-bottom: 10px;
}

#ochoCreate_popUp {
  min-width: 355px;
}

.ochoInput {
  height: 40px;
  width: 40%;
  text-align: center;
  margin-bottom: 2%;
  color: white;
  right: 0px;
  border-radius: 10px;
}

.custom-dropdown {
  position: relative;
  display: inline-block;
  width: 33%;
}

.dropdown-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  border: 2px solid #294a69;
  border-radius: 10px;
  cursor: pointer;
  width: 100%;
  height: 40px;
  text-align: left;
  box-shadow: none;
}

.dropdown-btn img {
  width: 24px; /* Adjust size as needed */
  height: 24px; /* Adjust size as needed */
  margin-right: 10px;
}

.dropdown-content {
  margin-top: 2px;
  display: none;
  position: absolute;
  background-color: #183049;
  border: 2px solid #294a69;
  border-radius: 10px;
  width: 100%;
  height: 175px;
  overflow-y: scroll;
  z-index: 1;
}

.dropdown-item {
  font-size: small;
  display: flex;
  align-items: center;
  padding: 5px;
  cursor: pointer;
  transition: 0.2s ease;
  border-radius: 5px;
}

.dropdown-item img {
  width: 24px; /* Adjust size as needed */
  height: 24px; /* Adjust size as needed */
  margin-right: 10px;
}

.dropdown-item:hover {
  background-color: #33618b;
}

.show {
  display: block;
}

#createOchoBtn {
  width: 60%;
  height: 40px;
  margin-top: 5%;
}

#join_private_ocho {
  height: 40px;
  width: 50%;
}

/* Container for the toggle switch */
.toggle-container {
  display: flex;
  /* align-items: center; */
  margin-top: 6px;
}

/* Hide the default checkbox */
#toggle-checkbox {
  display: none;
}

/* Label that acts as the switch */
.toggle-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 110px;
  height: 30px;
  background-color: green;
  border-radius: 15px;
  cursor: pointer;
  transition: background-color 0.3s;
  overflow: hidden; /* Ensure text does not overflow the label */
}

/* Slider inside the label */
.toggle-slider {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.3s;
}

/* Text labels */
.toggle-text {
  position: absolute;
  top: 50%;
  font-size: 14px;
  color: #fff;
  white-space: nowrap; /* Ensure text does not wrap */
  transition: opacity 0.3s, transform 0.3s;
}

/* Public text positioning */
.toggle-text-public {
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  opacity: 1;
}

/* Private text positioning */
.toggle-text-private {
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  opacity: 0;
}

/* Styles when the checkbox is checked */
#toggle-checkbox:checked + .toggle-label {
  background-color: #af4c4c; /* Color when toggled */
}

#toggle-checkbox:checked + .toggle-label .toggle-slider {
  transform: translateX(80px); /* Move slider to the right */
}

#toggle-checkbox:checked + .toggle-label .toggle-text-public {
  opacity: 0; /* Hide Public text */
}

#toggle-checkbox:checked + .toggle-label .toggle-text-private {
  opacity: 1; /* Show Private text */
}

.mode {
  display: none;
}

.mode.active {
  display: block;
}

@import url("https://fonts.googleapis.com/css?family=Raleway:900");
:root {
  --flips: 540deg;
}
*,
*:before,
*:after {
  box-sizing: border-box;
}

#houseMode {
  position: relative;
}

.cfGameStats {
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-60%);
  padding: 25px;
  display: flex;
  flex-direction: column;
  justify-content: right;
  align-items: end;
}

.cfGameButtons {
  position: absolute;
  left: 15px;
  top: 50%;
}

.cfGameButtons p {
  margin: 0px;
  font-size: medium;
  color: #fdbc0d;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed; /* Change cursor to indicate unclickable */
}

.gameLeaderboards {
  height: 65px;
  width: 65px;
  border-radius: 50px;
  border: 4px solid #fdbc0d;
  background-color: #ffffff18;
  background-image: url(../../SkellySlots/icons/trophy.png);
  background-size: 60px;
  background-position-x: 50%;
  background-position-y: 8px;
  background-repeat: no-repeat;
}

.gameLeaderboards:hover {
  background-color: #ffbb0081;
  border: 4px solid #ffbb00;
  scale: 1.02;
}

.cfGameStatDiv {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}

#cfGameStatDivCurrent p {
  color: #00e601;
}

.cfGameStat p {
  margin: 0px;
  font-size: 35px;
  color: white;
  width: 100%;
  text-align: right;
}

.cfGameStat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cfGameStatsTitle {
  font-size: 15px !important;
  opacity: 0.5;
  color: white;
}

.gameHeader {
  width: 100%;
  padding: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

#coinflipHistory {
  background: rgb(15, 33, 46, 0.5);
  height: 50px;
  width: 75%;
  max-width: 400px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

#coinflipHistoryFill {
  padding-inline: 10px;
  width: 100%;
  height: 100%;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: left;
  overflow: hidden;
  white-space: nowrap;
}

.cfHistoryEntry {
  height: 75%;
  aspect-ratio: 1/1;
  margin-right: 5px;
  border-radius: 50px;
  /* border: 5px solid black; */
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 2px 1px #00000040;
  opacity: 0; /* Start invisible */
  transform: translateX(-20px); /* Start slightly off to the left */
  transition: opacity 0.3s ease, transform 0.3s ease; /* Smooth transition */
}

.cfHistoryEntry.show {
  opacity: 1; /* Fade in */
  transform: translateX(0); /* Move to original position */
}

.cfHistoryEntry.move-right {
  transform: translateX(5px); /* Move existing entries to the right */
}

.cfHistoryEntry.headsWins {
  background: linear-gradient(180deg, rgba(255, 216, 0, 1) 0%, rgba(255, 187, 0, 1) 100%);
  border: 2px solid rgb(255, 226, 97);
}

.cfHistoryEntry.tailsWins {
  background: linear-gradient(180deg, rgba(247, 247, 247, 1) 0%, rgba(176, 174, 170, 1) 100%);
  border: 2px solid rgb(255, 255, 255);
}

.cfHistoryEntry.headsLoses {
  background-color: #977a05;
  border: 2px solid rgb(92, 72, 19);
}

.cfHistoryEntry.tailsLoses {
  background-color: rgb(153, 153, 153);
  border: 2px solid rgb(66, 66, 66);
}

.gameInfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 50px;
  width: 50px;
  border-radius: 50px;
  box-shadow: none;
  background-image: url(../../SkellySlots/icons/questionmark.png);
  background-repeat: no-repeat;
  background-size: 30px;
  background-position: center;
}

.coin {
  height: 150px;
  width: 150px;
  transform-style: preserve-3d;
  transform-origin: 50%;
}
.coin.anim {
  animation: flip 1s linear forwards;
}
.coin:before {
  display: grid;
  place-items: center;
  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  background: #eae6df;
  border: 12px solid #eae6df;
  box-shadow: inset 0 0 0 3px #cbbdbd;
  font-size: 60px;
  font-family: "Raleway", sans-serif;
  color: #fbfbfa;
  text-shadow: 1.5px 1.5px 0 #cbbdbd, -1.5px -1.5px 0 #eae6df;
}

.coin:after {
  display: grid;
  place-items: center;
  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  background: #f7941e;
  border: 12px solid #f8a037;
  box-shadow: inset 0 0 0 3px #f38809;
  font-size: 60px;
  font-family: "Raleway", sans-serif;
  color: #f38809;
  text-shadow: 1.5px 1.5px 0 #e48008, -1.5px -1.5px 0 #f8a745;
}
.coin:before {
  transform: translateZ(12.5px);
  content: "O";
}
.coin:after {
  transform: translateZ(-12.5px) rotateY(180deg) rotateZ(180deg);
  content: "I";
}
.coin .edge {
  transform: translateX(62.5px);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.coin .edge .segment {
  height: 150px;
  width: 25px;
  position: absolute;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.coin .edge .segment:before,
.coin .edge .segment:after {
  content: "";
  display: block;
  height: 15px;
  width: 25px;
  position: absolute;
  transform: rotateX(84.375deg);
}
.coin .edge .segment:before {
  transform-origin: top center;
  background: repeating-linear-gradient(#f38809 0, #f38809 25%, #da7a08 25%, #da7a08 50%);
}
.coin .edge .segment:after {
  bottom: 0;
  transform-origin: center bottom;
  background: repeating-linear-gradient(#da7a08 0, #da7a08 25%, #f38809 25%, #f38809 50%);
}
.coin .edge .segment:nth-child(1) {
  transform: rotateY(90deg) rotateX(11.25deg);
}
.coin .edge .segment:nth-child(2) {
  transform: rotateY(90deg) rotateX(22.5deg);
}
.coin .edge .segment:nth-child(3) {
  transform: rotateY(90deg) rotateX(33.75deg);
}
.coin .edge .segment:nth-child(4) {
  transform: rotateY(90deg) rotateX(45deg);
}
.coin .edge .segment:nth-child(5) {
  transform: rotateY(90deg) rotateX(56.25deg);
}
.coin .edge .segment:nth-child(6) {
  transform: rotateY(90deg) rotateX(67.5deg);
}
.coin .edge .segment:nth-child(7) {
  transform: rotateY(90deg) rotateX(78.75deg);
}
.coin .edge .segment:nth-child(8) {
  transform: rotateY(90deg) rotateX(90deg);
}
.coin .edge .segment:nth-child(9) {
  transform: rotateY(90deg) rotateX(101.25deg);
}
.coin .edge .segment:nth-child(10) {
  transform: rotateY(90deg) rotateX(112.5deg);
}
.coin .edge .segment:nth-child(11) {
  transform: rotateY(90deg) rotateX(123.75deg);
}
.coin .edge .segment:nth-child(12) {
  transform: rotateY(90deg) rotateX(135deg);
}
.coin .edge .segment:nth-child(13) {
  transform: rotateY(90deg) rotateX(146.25deg);
}
.coin .edge .segment:nth-child(14) {
  transform: rotateY(90deg) rotateX(157.5deg);
}
.coin .edge .segment:nth-child(15) {
  transform: rotateY(90deg) rotateX(168.75deg);
}
.coin .edge .segment:nth-child(16) {
  transform: rotateY(90deg) rotateX(180deg);
}
.floor {
  visibility: hidden;
  position: absolute;
  width: 150px;
  height: 150px;
  left: 50%; /* Position from the left */
  transform: translate(-50%); /* Move it back by half its width and height */
}
.floor .line {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -3.125px;
  width: 150px;
  height: 6.25px;
  transform-origin: center left;
  border-radius: 6.25px;
  background: linear-gradient(90deg, white 20%, transparent 20%);
  background-repeat: no-repeat;
  opacity: 0;
}

.floor .line.anim {
  animation: lines 0.6s ease-out forwards;
  animation-delay: 0.65s;
}
.floor .line:nth-child(1) {
  transform: rotate(30deg) scale(1.1);
}
.floor .line:nth-child(2) {
  transform: rotate(60deg);
}
.floor .line:nth-child(3) {
  transform: rotate(90deg) scale(1.1);
}
.floor .line:nth-child(4) {
  transform: rotate(120deg);
}
.floor .line:nth-child(5) {
  transform: rotate(150deg) scale(1.1);
}
.floor .line:nth-child(6) {
  transform: rotate(180deg);
}
.floor .line:nth-child(7) {
  transform: rotate(210deg) scale(1.1);
}
.floor .line:nth-child(8) {
  transform: rotate(240deg);
}
.floor .line:nth-child(9) {
  transform: rotate(270deg) scale(1.1);
}
.floor .line:nth-child(10) {
  transform: rotate(300deg);
}
.floor .line:nth-child(11) {
  transform: rotate(330deg) scale(1.1);
}
.floor .line:nth-child(12) {
  transform: rotate(360deg);
}
@keyframes flip {
  0% {
    transform: rotateY(0) rotateX(0deg) scale(1);
  }
  10% {
    transform: rotateY(45deg) rotateX(calc(var(--flips) / 3)) scale(1.6);
  }
  60% {
    transform: rotateY(-30deg) rotateX(calc(var(--flips) / 1.5)) scale(2);
  }
  100% {
    transform: rotateY(0) rotateX(var(--flips)) scale(1);
  }
}
@keyframes lines {
  40% {
    opacity: 1;
    background-position: -120px 0;
  }
  70% {
    opacity: 1;
    background-position: 75px 0;
  }
  100% {
    opacity: 1;
    background-position: 150px 0;
  }
}

#coinflipContainer {
  position: relative;
  margin-top: 100px;
}

.coinflipWrapper {
  position: absolute; /* Position the wrapper absolutely */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center the wrapper */
  width: 100%; /* Ensure it takes full width */
  height: 100%; /* Ensure it takes full height */
  display: flex; /* Center children inside */
  align-items: center;
  justify-content: center;
}

.coinflipContainer {
  aspect-ratio: 1/1;
  width: 50%;
  max-width: 250px;
  background: #0f212e;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Remove absolute positioning */
  /* No transform here */
  transform-origin: center; /* Center for scaling */
}

.coinflipContainer.anim {
  animation: circles 0.6s forwards; /* Retain the final state */
  animation-delay: 1s;
}

@keyframes circles {
  0% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(1);
  }
}

#coinflipSwitch {
  position: absolute;
  bottom: 0px;
}

#headsTails button {
  margin-top: 15%;
  font-size: medium;
  height: 60px;
  width: 45%;
  max-width: 250px;
  margin-inline: 2.5px;
  color: black;
  box-shadow: inset 0 -2px 5px rgba(0, 0, 0, 0.2); /* Slight inset shadow */
  position: relative;
}

#headsTails button:active {
  transform: scale(0.99);
}

#heads {
  text-align: right;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  background: rgba(255, 179, 0, 1);
  border-top: #ffd164 2px solid;
  border-bottom: #7e5900 2px solid;
}

#tails {
  text-align: left;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  background: rgba(234, 230, 223, 1);
  border-top: white 2px solid;
  border-bottom: #74726e 2px solid;
}

.left-element {
  aspect-ratio: 1/1;
  height: 80%;
  position: absolute;
  left: 6px;
  top: 10%;
  border: 2px solid #ffd700;
  border-radius: 50px;
}

.right-element {
  aspect-ratio: 1/1;
  height: 80%;
  position: absolute;
  right: 6px;
  top: 10%;
  border: 2px solid white;
  border-radius: 50px;
}

.cfButtonNames h3 {
  color: black;
  font-size: large;
}

.cfButtonNames h4 {
  opacity: 0.5;
  font-size: small;
}

#cfSoloInputContainer {
  width: 92%;
  max-width: 510px;
  margin: auto;
  margin-top: 10px;
  height: 60px;
  border-radius: 50px;
}

#doubleSoloCF {
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  aspect-ratio: 1/1;
}

#cf_solo_amount {
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  text-indent: 10px;
  font-size: large;
}

#headsCoin {
  display: grid;
  place-items: center;
  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 216, 0, 1) 0%, rgba(255, 187, 0, 1) 100%);
  border: 12px solid linear-gradient(180deg, rgba(255, 216, 0, 1) 0%, rgba(255, 187, 0, 1) 100%);
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.5); /* Shadow now appears upwards */
  font-family: "Raleway", sans-serif;
  color: #ff9500;
  text-shadow: 0.5px 0.5px 0 #ffb752, -0.5px -0.5px 0 #ffd8a2;
}

#tailsCoin {
  display: grid;
  place-items: center;
  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(247, 247, 247, 1) 0%, rgba(176, 174, 170, 1) 100%);
  border: 12px solid linear-gradient(180deg, rgba(247, 247, 247, 1) 0%, rgba(176, 174, 170, 1) 100%);
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.5); /* Shadow now appears upwards */
  font-family: "Raleway", sans-serif;
  color: #fbfbfa;
  text-shadow: 0.5px 0.5px 0 #cbbdbd, -0.5px -0.5px 0 #eae6df;
}

#ocho_waitlist_green_btn,
#ocho_waitlist_yellow_btn,
#ocho_waitlist_blue_btn,
#ocho_waitlist_red_btn {
  height: 40px;
}

#selected_balance {
  margin: 0px;
  margin-right: 30px;
  display: flex;
  text-align: left;
  align-content: center;
  align-items: center;
  font-size: medium;
  width: fit-content;
  white-space: nowrap;
}

#selected_currency {
  padding: 5px;
  padding-right: 10px;
  padding-left: 10px;
  height: 45px;
  border: none;
  border-radius: 50px;
  transition: 0.2s;

  background: rgba(66, 93, 131, 0.2);
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#selected_currency:hover {
  background: rgba(66, 93, 131, 0.3);
}

.currency-img {
  margin: 0px;
  -webkit-filter: drop-shadow(0px 2px 0px #00000050);
  filter: drop-shadow(0px 2px 0px #00000050);
}

.selected {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 5px;
  border-radius: 4px;
}

.options {
  display: none; /* Hidden by default */
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  right: 0;
  border-radius: 20px;

  z-index: 1;
  margin-top: 10px;
  color: white;
  padding: 10px;
  width: fit-content;
  min-width: 150px;

  background: #102334;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
}

.currency_option {
  display: flex;
  align-items: center;
  padding: 5px;
  cursor: pointer;
  border: none;
  width: 100%;
  /* aspect-ratio: 0/0; */
  box-shadow: none;
  border-radius: 25px;
  transition: 0.2s;
  margin-top: 2.5px;
}

.currency_option img {
  -webkit-filter: drop-shadow(0px 2px 0px #00000050);
  filter: drop-shadow(0px 2px 0px #00000050);
}

.currency_option:hover {
  background-color: #213c55;
  box-shadow: none;
}

.currency_token {
  display: flex;
  align-items: center;
  padding: 5px;
  cursor: pointer;
  border: none;
  width: 100%;
  box-shadow: none;
  border-radius: 25px;
  transition: 0.2s;
  margin-top: 2.5px;
}

.currency_token:hover {
  background-color: #213c55;
  box-shadow: none;
}

.currency_token_container {
  max-height: 120px;
  overflow-y: scroll;
  scrollbar-width: 2px;
  border-radius: 25px;
  background: #162c40;
  display: none;
}

.currency-img {
  height: 20px;
  margin-right: 10px;
}

#balanceDropdownArrow {
  width: 25px;
  transition: 0.2s;
  position: absolute;
  right: 10px;
}

@keyframes Xreverse1 {
  from {
    transform: rotateX(0deg);
  }
  to {
    transform: rotateX(180deg);
  }
}

@keyframes Xreverse2 {
  from {
    transform: rotateX(180deg);
  }
  to {
    transform: rotateX(0deg);
  }
}

.Xreversed1 {
  animation: Xreverse1 0.2s forwards; /* Adjust duration as needed */
}

.Xreversed2 {
  animation: Xreverse2 0.2s forwards; /* Adjust duration as needed */
}

.switch input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.switch {
  display: inline-block;
  font-size: 20px; /* 1 */
  height: 1em;
  width: 2em;
  background: #bdb9a6;
  border-radius: 1em;
  cursor: pointer;
}

.switch div {
  height: 1em;
  width: 1em;
  border-radius: 1em;
  background: #fff;
  box-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.3);
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  transition: all 300ms;
}

.switch input:checked + div {
  -webkit-transform: translate3d(100%, 0, 0);
  -moz-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}

.createOchoTitle {
  display: flex;
  align-items: center;
  width: 60%;
  margin: auto;
  margin-bottom: 5px;
  background-color: var(--secondary-color);
  border-radius: 15px;
  padding: 10px;
  border: 2px #1475e1 solid;
  box-shadow: 0px 2px 1px #00000040;
}

.createOchoTitle span {
  width: 70%;
  text-align: left;
}

.createOchoSpecifications {
  background-color: var(--secondary-color);
  padding: 10px;
  border-radius: 15px;
  margin-top: 5px;
  margin-bottom: 20px;
  border: 2px var(--tertiary-color) solid;
  box-shadow: 0px 2px 1px #00000040;
}

.createOchoSpecifications * {
  margin-bottom: 0px !important;
}

#createOchoPlayersButton {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60%;
  margin: auto;
  background-color: var(--secondary-color);
  border-radius: 15px;
  padding: 10px;
  border: 2px #1475e1 solid;
  box-shadow: 0px 2px 1px #00000040;
  font-size: medium;
}

#createOchoPlayersButton:hover {
  background-color: #0f212e;
}

.instruction {
  margin-top: 0px;
  font-size: small;
  opacity: 0.5;
}

#ocho_private_code {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  box-shadow: 0px 2px 1px #00000040;
}

#createOchoPrivateTitle {
  margin-bottom: 0px;
}

.headerStuff {
  display: none;
  flex-direction: row;
  position: relative;
  max-width: 100%;
  min-width: 200px;
  align-items: center;
  justify-content: center;
}

.custom_dropdown {
  max-width: 200px;
  min-width: 110px;
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.balanceUpdates {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  font-size: medium;
  background-color: transparent;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 40px;
  height: 35px;
  width: fit-content;
  transition: transform 0.5s ease, opacity 0.5s ease;
  opacity: 0; /* Start fully visible */
  color: transparent;
}

.balanceUpdatesResult {
  height: 15px;
  width: 15px;
  margin-right: 2px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  image-rendering: optimizeQuality;
}

.animate-down {
  color: rgb(255, 255, 255, 0.75) !important; /* Change text color to red */
  transform: translate(-50%, 8px) !important; /* Move down */
}

.animate-up {
  color: #00e701 !important; /* Change text color to green */
  transform: translate(-50%, -8px) !important; /* Move up */
}

.headerConnect {
  height: 45px;
  width: 50%;
  max-width: 450px;
  border-radius: 50px;
  font-size: medium;
  background-color: #0075ff;
  border-bottom: #0057bb solid;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* display: none; */
}

.headerConnect:hover {
  background-color: #1481ff;
}

#halloweenBat {
  position: fixed;
  height: fit-content;
  width: fit-content;
  background-color: transparent !important;
  box-shadow: none !important;
  transition: 0s !important;
  z-index: 9000;
}

#batGif {
  image-rendering: pixelated;
  height: 50px;
  width: auto;
}

#fallingSkel {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  height: fit-content;
  width: fit-content;
  background-color: transparent !important;
  box-shadow: none !important;
  transition: 0s !important;
  z-index: 9000;
  border-radius: 100px;
  aspect-ratio: 1/1;
}

#claimableSkel {
  height: 75px;
  width: auto;
  border-radius: 50px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.spinning {
  animation: spin 2s linear infinite;
}

/* .center {
  width: 100px;
  height: 100px;
  margin: auto;
}
.circle {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  cursor: pointer;
}
.wave {
  background-color: #3f68c5;
  position: absolute;
  top: 110%;
  height: 200%;
  width: 200%;
  border-radius: 38%;
  left: -50%;
  transform: rotate(360deg);
  transition: all 5s ease;
  animation: wave 30s linear infinite;
}
@keyframes wave {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(3600deg);
  }
}
.circle:hover .wave {
  top: 0%;
} */

.progress-circle {
  position: relative;
  width: 100%;
  height: 100%;
}

.circular-progress {
  transform: rotate(130deg);
  width: 100%;
  height: 100%;
}

.circle-bg {
  fill: none;
  stroke: #172940;
  stroke-width: 3;
  box-shadow: 0px 2px 1px #00000040;
}

.circle {
  fill: none;
  stroke: #fb8004;
  stroke-width: 3;
  stroke-dasharray: 100; /* Adjust this value for a different maximum */
  stroke-dashoffset: 100; /* Set this to (100 - value) for the offset */
  transition: stroke-dashoffset 0.5s ease;
}

.percentage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.2em;
  color: #fff;
  height: 82%;
  width: 82%;
  border-radius: 50px;
}

#headerProfilePic {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  height: 83%;
  width: 83%;
  border-radius: 50px;
  image-rendering: pixelated;
  border: 1px solid transparent;
  background-size: 45px;
  -webkit-filter: drop-shadow(0px 2px 0px #00000050);
  filter: drop-shadow(0px 2px 0px #00000050);
}

#headerRank {
  position: absolute;
  right: 8px;
  bottom: 2px;
  height: 21px;
  width: 21px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.userCard {
  height: 120px;
  position: relative;
  width: 96%;
  max-width: 600px;
  border: 3px solid;
  border-radius: 15px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
  /* background-image: url(../../SkellySlots/effect.png), linear-gradient(180deg, rgba(150, 63, 149, 1) 0%, rgba(80, 21, 83, 1) 100%); */
  /* border-color: rgb(150, 63, 149); */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.5), 0px 3px 5px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
}

.userCardDecoration {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-filter: drop-shadow(0px 2px 0px #00000050);
  filter: drop-shadow(0px 2px 0px #00000050);
}

.profilePicture {
  background-image: url(../../SkellySlots/testprofile.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 114px;
  aspect-ratio: 1/1;
  border-radius: 1px;
  box-sizing: border-box;
  image-rendering: pixelated;
  -webkit-filter: drop-shadow(0px 2px 0px #00000050);
  filter: drop-shadow(0px 2px 0px #00000050);
}

.profileElements {
  flex: 1; /* Take remaining space */
  display: flex; /* Nested flexbox for elements */
  flex-direction: column; /* Stack elements vertically */
  margin-left: 5px; /* Optional: Space between picture and elements */
  height: 100%;
  width: 30%;
}

.profileName {
  height: 33%;
}

.profileName p {
  font-size: 30px !important;
}

.inactiveButton {
  background-color: rgba(0, 0, 0, 0.3) !important;
  border-bottom: #00000040 solid !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
}

#welcomebonus {
  color: white;
  border-radius: 20px;
  background-color: red;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 96%;
  max-width: 500px;
  height: 60%;
  max-height: 500px;
  background: rgb(20, 28, 51);
  background: linear-gradient(180deg, rgba(20, 28, 51, 1) 0%, rgba(1, 63, 148, 1) 100%);
  border: rgba(1, 63, 148, 1) solid;
}

#welcomebonus h2 {
}

#welcomebonus h3 {
  color: rgba(255, 255, 255, 0.8);
}

#claimWelcomeBonus {
  border-radius: 50px;
  background-color: #0075ff;
  border-bottom: solid #0057bb;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  font-size: 18px;
  height: 50px;
  width: 85%;
}

#claimWelcomeBonus:hover {
  background-color: #1381ff;
}

#bonusPrize {
  height: 200px;
}

#welcomeBonusAmount {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: 25px;
}

#welcomeBonusAmount img {
  height: 40px;
  margin-right: 5px;
}

#welcomeBonusAmount p {
  margin: 0px;
}

/* NOTIF ----------------------------------------------- */

#notif_container {
  z-index: 100;
  position: fixed;
  top: 60px;
  right: 0;
  width: 300px;
  height: fit-content;
  padding-right: 5px;
}

.notif {
  margin-top: 5px;
  width: 100%;
  min-height: 40px;
  height: fit-content;
  background-color: rgba(220, 0, 0, 0.9);
  border-radius: 5px;
  display: flex;
}

.notif button {
  width: 40px;
  border-radius: 5px 0 0 5px;
  background-color: rgba(0, 0, 0, 0.2);
  box-shadow: none;
}

.notif button:hover {
  background-color: rgba(0, 0, 0, 0.4);
}

.notif p {
  color: white;
  display: flex;
  align-items: center;
  margin: 0;
  padding-left: 5px;
  padding-right: 5px;
  font-size: 11px;
}

canvas {
  pointer-events: none;
}

#miniSlotsContainer {
  display: flex;
  justify-content: start;
  align-items: center;
  padding: 5px;
  width: 100%;
  margin: auto;
  height: fit-content;
  /* box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25); */
  /* background: linear-gradient(180deg, rgba(1, 63, 148, 0.05) 0%, rgba(1, 63, 148, 0.5) 100%); */
  border-radius: 15px;
}

#miniSlotsRules {
  width: 25%;
  padding-right: 15px;
  align-self: flex-start;
}

#miniSlotsSlots {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
  width: 50%;
  position: relative;
  /* box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25); */
  /* background: linear-gradient(180deg, rgba(1, 63, 148, 0.05) 0%, rgba(1, 63, 148, 0.5) 100%); */
  border-radius: 15px;
}

#miniSlotsScreen {
  width: 25%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

#miniSlotsSpin {
  background-color: rgb(13, 184, 13);
  border-bottom: green solid;
}

#miniSlotsSpin:hover {
  background-color: rgb(15, 194, 15);
}

#miniSlotsSlotMachine {
  width: 350px;
  aspect-ratio: 485/322;
  position: relative;
}

#miniSlotMachineLayer2,
#miniSlotMachineLayer1,
#miniSlotMachineReels {
  max-width: 350px;
}

#miniSlotMachineLayer1 {
  -webkit-filter: drop-shadow(0px 2px 0px #00000050);
  filter: drop-shadow(0px 5px 0px #00000050);
}

#miniSlotMachineReels {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  aspect-ratio: 485/322;
  display: flex;
  align-items: center;
  justify-content: center;
}

.miniSlotMachineReels {
  width: 80px;
  height: 232.36px;
  /* border: 1px solid rgba(0, 0, 0, 0.3); */
  /* overflow: hidden; */
  background-image: url(../../SkellySlots/slots/reel.png);
  background-repeat: repeat-y;
  background-size: cover !important;
  margin-inline: 3%;
}

#miniSlotsButtons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  height: 50px;
  width: 100%;
  max-width: 350px;
  gap: 5px;
}

#lever {
  position: absolute;
  top: 50%;
  right: 0%;
  transform: translateY(-60%);
  width: fit-content;
  height: fit-content;
  cursor: pointer;
  background-color: transparent;
  box-shadow: none;
}

#lever img {
  aspect-ratio: 294/773;
  width: 75px;
}

.miniSlotsButton {
  height: 40px;
  width: 24%;
  border-radius: 3px;
  font-size: medium;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0075ff;
  border-bottom: #0057bb solid;
  flex-shrink: 0;
}

#miniSlotsMinus,
#miniSlotsPlus {
  width: 40px;
  height: 40px;
  font-size: x-large;
  color: rgba(255, 255, 255, 0.75);
}

#miniSlotsResult {
  flex-grow: 1;
  background-color: black;
  height: 40px;
  width: 120px;
  border-radius: 5px;
  color: white;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: #0075ff 3px solid;
  border-bottom: #0057bb solid;
  box-shadow: 0px 2px 1px #0000004d;
  min-width: 80px;
}

#miniSlotsSlotMachine img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.miniSlotsButton:hover {
  background-color: #1481ff;
}

#miniSlotsBonus {
  width: 25%;
}

#miniSlotsBonus img {
  width: 75%;
  border-radius: 2px;
}

.miniSlotsRule {
  color: white;
  display: flex;
  justify-content: end;
  align-items: center;
  flex-direction: row;
  position: relative;
}

.miniSlotsRule span {
  /* margin-right: 5px; */
}

.miniSlotsRule img {
  height: 30px;
  width: 30px;
  /* border-radius: 50px; */
}

.miniSlotsRule span {
  /* margin-left: 5px; */
}

#miniSlotsBonusButtons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  height: 100%;
}

.miniSlotsBonusButton {
  height: 55px;
  aspect-ratio: 1/1;
  border-radius: 3px;
  font-size: small;
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes spinReel {
  from {
    background-position: 0 0; /* Start position */
  }
  to {
    background-position: 0 var(--spin-to-position); /* End position using the custom property */
  }
}

.miniSlotSpin {
  animation: spinReel 2s ease-in-out forwards;
  /* Remove the transition on #reel1, #reel2, #reel3 */
}

#reel1,
#reel2,
#reel3 {
  /* No transition needed if we're using animation */
  transform-origin: top center;
  /* Optional: set overflow:hidden on the reels if you want to prevent overflow when they move */
  /* overflow: hidden; */
}

#miniSlotMachineReels .miniSlotMachineReels {
  position: relative;
  width: 80px;
  height: 100%;
  /* border: 1px solid rgba(0, 0, 0, 0.3); */
  border-radius: 3px;
  overflow: hidden;
  background-position: 0 0;
  background-repeat: repeat-y;
}
.slots .reel::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.4) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.4) 100%);
  box-shadow: inset 0 0 6px 2px rgba(0, 0, 0, 0.3);
}

@keyframes glow {
  50% {
    -webkit-filter: drop-shadow(0px 0px 5px #ffffff);
    filter: drop-shadow(0px 0px 5px #ffffff);
  }
}

/* Default state: No glow */
[anim="glow"]:not(.glowing) {
  box-shadow: none;
  transition: box-shadow 0.3s ease;
}

/* Apply the glow animation when .glowing class is added */
[anim="glow"].glowing {
  animation: glow 600ms infinite alternate;
}

@keyframes shakeAndScale {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.05);
  }
  50% {
    transform: scale(0.95);
  }
  75% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* Only apply the animation when the class is added */
.shaking {
  animation: shakeAndScale 0.5s infinite ease-in-out;
}

.shakingAndGlowing {
  animation: shakeAndScale 0.5s infinite ease-in-out, glow 1s infinite alternate ease-in-out;
}

.reelLight {
  width: 100%;
  height: 80px;
  background-color: transparent;
  opacity: 1;
  /* border-radius: 50%; */
  visibility: hidden;
  background-size: 80px;
  background-position: center;
  background-repeat: no-repeat;
}

.miniSlotMachineReels {
  display: flex;
  justify-content: center;
  align-items: center;
}

@keyframes marquee {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  20% {
    transform: translateX(0%);
    opacity: 1;
  }
  50% {
    transform: translateX(0%);
    opacity: 1;
  }
  80% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

#miniSlotsWin {
  margin-top: 5px;
  height: 20px;
  width: 100%;
  background-color: transparent;
  color: white;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Ensures text doesn't show outside the div */
  position: relative;
}

#miniSlotsWin h1 {
  font-size: 100%;
  font-weight: 900;
  position: absolute;
  white-space: nowrap; /* Prevents text from breaking */
  visibility: hidden;
}

.rb_container {
  flex: 1; /* if inside a flex parent */
  padding: 1rem;
  margin: 0.5%;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(1, 63, 148, 0.05) 0%, rgba(1, 63, 148, 0.5) 100%);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
  color: white;
  max-width: 100%; /* Ensures it doesn't overflow */
  box-sizing: border-box;
  height: 300px;

  display: flex;
  flex-direction: column;
}

.rb_title {
  text-align: center;
  color: white;
  flex-shrink: 0; /* Prevent the title from stretching */
}

.rb_grid {
  flex-grow: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas:
    "skellies  gold  description description"
    "rank  bonus  description description"
    "amounts amounts  collect collect";
  gap: 5px;
  width: 100%;
  box-sizing: border-box;
}

.rb_box {
  color: white !important;
  border-radius: 3px;
  border-bottom: 2px solid #0c1a26;
  background-color: #0f212e;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  color: black;
  overflow: hidden;
  position: relative;
}

.rb_box h4 {
  position: absolute;
  right: 3px;
  bottom: -3px;
  text-shadow: 0px 1px 1px black;
  font-size: 12px;
}

.rb_box h5 {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  width: 100%;
}

/* Grid area assignment */
#rb_skellies {
  grid-area: skellies;
  display: flex;
  flex-direction: column;
  justify-content: center; /* center by default */
  align-items: center;
  position: relative;
}

#rb_amounts {
  grid-area: amounts;
  border: 2px solid #0c1a26;
  background-color: #09161f;
}

#rb_gold {
  grid-area: gold;
  background: radial-gradient(ellipse farthest-corner at right bottom, #fedb37 0%, #fdb931 8%, #9f7928 30%, #8a6e2f 40%, transparent 80%),
    radial-gradient(ellipse farthest-corner at left top, #ffffff 0%, #ffffac 8%, #d1b464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
  border-bottom: 2px solid #302c08;
}
#rb_rank {
  grid-area: rank;
}

#rb_description {
  grid-area: description;
}

#rb_currentLevel {
  position: absolute;
  aspect-ratio: 1/1;
  height: 75%;
  bottom: 3px;
}

#rb_bonus {
  grid-area: bonus;
}
#rb_collect {
  background-color: transparent;
  border: none;
  border-radius: 0;
  grid-area: collect;
}

#rb_collect_btn {
  height: 100%;
  width: 100%;
  background-color: #0075ff;
  border-bottom: #0057bb solid;
  transition: background-color 0.2s ease;
  font-size: 16px;
  border-radius: 10px;
}

#rb_collect_btn:hover {
  background-color: #1481ff;
}

#rb_gold {
  position: relative;
  animation: jump 1.5s infinite ease;
  overflow: hidden;
}

#rb_gold_image {
  height: 100%;
  aspect-ratio: 1/1;
  background-image: url(../../SkellySlots/gold.gif);
  background-position: center;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  background-size: contain;

  /* Inset shadow around edges */
  /* box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.6); */

  /* Darken the image too */
  filter: brightness(20%);
}

#rb_gold::after {
  content: "";
  position: absolute;
  height: 200%;
  width: 40px;
  top: -50%;
  left: -50%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
  transform: rotate(45deg);
  animation: shine 1.5s infinite ease;
}

@keyframes jump {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes shine {
  0% {
    left: -50%;
  }
  50% {
    left: 150%;
  }
  100% {
    left: 150%;
  }
}