@import url('https://fonts.googleapis.com/css2?family=Bruno+Ace+SC&family=Fascinate+Inline&family=Galindo&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Libre+Franklin:ital,wght@0,100..900;1,100..900&family=Orbitron:wght@400..900&family=Outfit:wght@100..900&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: non
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Opera */
}

body {
  font-family: "Josefin Sans", sans-serif !important;
  background-color: #000;
  color: #fff;
  overflow-x: hidden;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: non
}

.container {
  padding: 1rem 2rem 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.top-bar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-bubbles {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  gap: 1rem;
  align-items: center;
  z-index: 999;
}

.bubble {
  background: #222;
  border-radius: 16px;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.1);
}

#tsparticles {
  z-index: -1 !important;
}

.profile {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #555;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  cursor: pointer;
}

.dp {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.search-bar {
  margin: 2rem auto 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* width:800px; */
  padding-right: 60px !important;
}

.search-input {
  width: 500px !important;
  /* max-width: 600px; */
  padding: 0.8rem 1.2rem !important;
  border-radius: 50px !important;
  border: 2px solid #fff;
  outline: none;
  font-size: 1.2rem;
  border: solid #272323 4px !important;
  background: #2422216e;
  color: #fff;
  margin-bottom: 1rem;
  height: 55px;
}

.badge-container {
  display: flex;
  /* gap: 0.5rem; */
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

.badge {
  padding: 0.2rem 1rem;
  background: linear-gradient(297deg, #0049ff, #8a8989);
  border-radius: 25px;
  cursor: pointer;
  font-size: 0.85rem;
  margin-right: 8px;
  transition: transform 0.2s;
}

.badge:hover {
  transform: scale(1.05);
}

.movablegames {
  width: 100%;
  display: flex;
  margin-top: 30px;
  flex-direction: column;

}

.gamesScroller {
  width: 100%;
  display: flex;
  margin-top: 30px;
  flex-direction: column;
  height: 260px;
  margin-bottom: 30px;

}

.scrollTitle {
  font-size: 17px;
  color: #fff;
  margin-top: 5px;
  margin-bottom: 15px;
  font-weight: bolder;
}

.outerCont {
  width: 100%;
  height: 280px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.leftScrollbtn {
  position: absolute;
  z-index: 2;
  left: 0;
  display: flex;
  margin-left: 10px;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  border: 2px solid #fff;
  justify-content: center;
  align-items: center;
  background-color: #000;
}

.rightScrollbtn {
  position: absolute;
  z-index: 2;
  right: 0;
  display: flex;
  margin-right: 10px;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  border: 2px solid #fff;
  justify-content: center;
  align-items: center;
  background-color: #000;
}

.innerCont {
  width: 100%;
  height: 280px;
  display: block;
  flex-direction: row;
  max-width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  scroll-behavior: smooth
}


.game-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.2rem;
  padding-bottom: 150px;
  margin-top: 30px;
}

.game-card {
  position: relative;
  background: #1a1a1a;
  height: 260px;
  width: 323px;
  border-radius: 5px;
  overflow: hidden;
  transition: transform 0.2s;
  border-top: solid 3px #fff;
  cursor: pointer;
}

.game-card:hover {
  /* transform: scale(1.53);
    z-index:999; */
}

.game-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.game-card::after {
  content: attr(data-title);
  position: absolute;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  width: 100%;
  text-align: center;
  padding: 0.4rem;
  font-size: 0.95rem;
}

.game-name {
  background-color: rgba(0, 0, 0, 0.9);
  color: #fff;
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 1.6em;
  font-weight: bolder;
}

.game-category {
  background-color: #e74a02;
  color: #fff;
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 0.7em;
  margin-top: 5px;
  display: flex;
  align-self: flex-start;
}


.game-card2 {
  position: relative;
  background: #1a1a1a;
  height: 270px;
  width: 270px;
  border-radius: 5px;
  overflow: hidden;
  transition: transform 0.2s;
  border-top: solid 3px #fff;
  cursor: pointer;
  margin-right: 8px;
  display: inline-block;
}

.game-card2:hover {
  transform: scale(1.1);
  z-index: 999;
}

.game-card2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.game-card2::after {
  content: attr(data-title);
  position: absolute;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  width: 100%;
  text-align: center;
  padding: 0.4rem;
  font-size: 0.95rem;
}

.game-name2 {
  background-color: rgba(0, 0, 0, 0.9);
  color: #fff;
  padding: 4px 5px;
  border-radius: 7px;
  font-size: 1.1em;
  font-weight: bolder;
}

.game-category2 {
  background-color: #e74a02;
  color: #fff;
  padding: 3px 4px;
  border-radius: 5px;
  font-size: 0.7em;
  margin-top: 3px;
  display: flex;
  align-self: flex-start;
}


.challenge-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #111;
  transition: transform 0.3s ease;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
  padding-bottom: 20px;
  height: 290px !important;
  z-index: 9
}

.challenges {
  overflow-x: auto;
  display: flex;
  padding: 1rem;
  gap: 1rem;
  height: 290px !important;
  padding-top: 55px;
}

.challenge-card {
  background: #000;
  border-radius: 10px;
  min-width: 220px;
  height: 110px;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.05);
  margin-top: 15px;
}

.top-toggle-title {
  background: #000;
  padding: 0.7rem;
  cursor: pointer;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -30px;
  border-top: 3px solid #bcbdbd;

}


.toggleIcon {
  border-radius: 100px;
  background-color: #292929;
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.challengeTitle {
  color: #ccc;
  text-align: left;
  display: flex;
  flex: 1;
  font-size: 15px;
}

.createChallenge {
  border-radius: 100px;
  padding: 5px;
  background-color: #423b3b;
  margin-left: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff !important;
  padding-right: 9px;
  padding-left: 9px;
}

.collapsed {
  transform: translateY(85%);
}

.voice-assistant-legacy {
  position: fixed;
  left: 20px;
  top: 20px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: #f1ede5;
  background-size: 400% 400%;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
  cursor: pointer;
  z-index: 99999999999;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.speaking {
  animation: pulse 2s infinite;
}

@keyframes pulse {

  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

.highlight {
  outline: 3px solid yellow;
  transition: outline 0.3s;
}

/* Challenge Card */
.challenge-card {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  border-radius: 20px;
  padding: 20px;
  /* gap: 30px; */
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
  border: 2px solid #fff;
  margin-right: 20px;
}

.challenge-card:hover {
  transform: scale(1.02);
}

.player {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
}

.player img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
}

.player-info {
  margin-top: 10px;
  text-align: center;
}

.versus img {
  width: 60px;
  margin: 10px;
  /* transform: rotate(45deg); */
}

/* Modal */
.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: rgba(0, 0, 0, 0.7);
}

.modal-content {
  background: rgba(0, 0, 0, 0.78);
  margin: 5% auto;
  padding: 30px;
  border-radius: 15px;
  width: 650px;
  position: relative;
  animation: fadeIn 0.4s;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  flex-direction: column;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.close {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 30px;
  color: #555;
  cursor: pointer;
}

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

.details p {
  font-size: 16px;
  margin-bottom: 6px;
  color: #ff6600;
}

.countdown {
  text-align: center;
  margin: 20px 0;
}

#timer {
  font-size: 32px;
  font-weight: bold;
  color: #ff5722;
}

.buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

button.accept {
  background: #4caf50;
  color: white;
  border: 2px solid #fff;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Josefin Sans", sans-serif !important;

}

button.accept:hover {
  background: #43a047;
}

button.decline {
  background: #f44336;
  color: white;
  border: 2px solid #fff;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Josefin Sans", sans-serif !important;
}

.requestText {
  color: #fff !important;
  text-align: center;
  font-size: 12px;
}

.requestBubble {
  border-radius: 100px;
  height: 30px;
  width: 30px;
  background-color: rgb(133, 4, 4);
  display: flex;
  justify-content: center;
  align-items: center;

}

.backdrop {
  background-color: rgba(0, 0, 0, 0.94);
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: -1
}

button.decline:hover {
  background: #e53935;
}

.classyRank {
  margin-top: 10px;
  border-radius: 100px;
  background-color: #fff;
  color: #000 !important;
  padding: 9px;
}

.childRequest {
  padding: 8px;
  border-radius: 50px;
  background-color: #007bff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  padding-right: 10px;
  padding-left: 10px;
  border: 2px solid #545151;
}

.requestSelected {
  background: #0ec038;
}

.childNickname {
  font-size: 13px;
  color: #fff;
}

body {
  font-family: 'Poppins', sans-serif;
}

.hidden {
  display: none;
}

.popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.popup-content {
  background: white;
  padding: 30px;
  width: 90%;
  max-width: 500px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  position: relative;
}

.popup-content h2 {
  margin-bottom: 20px;
  text-align: center;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  font-weight: 600;
  display: block;
  margin-bottom: 8px;
}

input[type="text"],
input[type="number"],
input[type="datetime-local"],
select {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 10px;
}

.game-picker {
  display: flex;
  gap: 10px;
}

.game-picker button {
  background: #007BFF;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

.game-picker button:hover {
  background: #0056b3;
}

.player-card {
  margin-top: 10px;
  padding: 15px;
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 12px;
}

.form-actions {
  text-align: center;
  margin-top: 20px;
}

.create-btn {
  background: #28a745;
  color: white;
  padding: 12px 30px;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  cursor: pointer;
  margin-right: 10px;
}

.create-btn:hover {
  background: #218838;
}

.close-btn {
  background: #dc3545;
  color: white;
  padding: 12px 30px;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  cursor: pointer;
}

.close-btn:hover {
  background: #c82333;
}

.game-list {
  max-height: 200px;
  overflow-y: auto;
  margin-top: 15px;
}

.game-list div {
  padding: 10px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}

.game-list div:hover {
  background: #f0f0f0;
}

.newChallenge {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  padding: 20px;
  flex-direction: column;
  z-index: 9999;
}

.newChallengeTitle {
  color: #fff;
  font-size: 20px;
  margin-top: 25px;
  display: flex;
  align-self: center;
}

.stepText {
  color: #fff;
  font-size: 15px;
  margin-top: 5px;
  display: flex;
  align-self: center;
}

.searchBox {
  margin-top: 60px;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 400px;
  height: 60px;
  border-radius: 100px;
  background-color: #efefef;
  border: 2px solid #fff;

}

.searchInput {
  font-size: 20px;
  color: #fff;
  width: 100%;
  height: 100%;
  border-radius: 100px !important;
  padding-left: 25px !important;
  background-color: #585b5e;
  font-family: "Josefin Sans", sans-serif !important;
}

.searchInput::placeholder {
  font-family: "Josefin Sans", sans-serif !important;
  font-size: 20px;
  color: #fff;
  opacity: 1;
  /* ensures the color shows clearly */
}

.gamesList {
  border-top: #ccc solid 2px;
  min-height: 500px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 2rem;
  padding: 2rem;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
  margin-top: 40px;
  overflow-y: scroll;
  padding-bottom: 200px;

}

.game-item-card {
  position: relative;
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 200px;
  height: 200px;
  margin: 12px;
  border: 2px solid #efefef;
  cursor: pointer;
}

.game-item-title {
  font-size: 12px;
  color: #000;
  align-self: center;
  margin: 5px;
  z-index: 999;
  position: absolute;
  background-color: #d8ddea;
  padding: 8px;
  top: 0;
  border-radius: 5px;
  border: #000 1px solid;

}

.game-item-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.game-item-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.closeBtn {
  position: absolute;
  right: 0;
  margin: 20px;
  top: 0;
  z-index: 9;
}

.closeBtn2 {

  border-radius: 100px;
  background-color: #ff0404;
  color: #fff;
  font-size: 14px;
  padding: 10px;
  display: flex;
}

.premiumBtn {

  min-width: 220px;
  height: 120px;
  background: linear-gradient(270deg, #ff5e01, #7873f5);
  background-size: 400% 400%;
  animation: moveGradient 6s ease-in-out infinite alternate;
  border-radius: 130px;
  border: 5px solid #fff;
  padding-left: 50px;
  padding-right: 50px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 60px;
  margin-bottom: 60px;
  cursor: pointer;

}

@keyframes moveGradient {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 100% 50%;
  }
}

.premiumBtnIcon {
  width: 100px;
  height: 100px;
}

.premiumBtnText {
  color: #fff;
  font-size: 55px;
  margin-left: 10px;
  margin-top: 7px;
}

.firstSide {

  display: flex;
  flex: 5;
  min-height: 400px;
  align-items: center;
  margin-right: 5px;
  flex-direction: column;
}

.secondSide {
  display: flex;
  flex: 5;
  min-height: 400px;
  align-items: center;
  margin-left: 5px;
  flex-direction: column;
}

.centerSide {
  display: flex;
  min-width: 800px;
  flex: 5;
  min-height: 400px;
  align-items: center;
  flex-direction: column;
  align-self: center;
}

.sideByside {

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 500px;
}

.verticalDivider {
  width: 3px;
  height: 300px;
  background-color: #efefef;
  display: flex;
  border-radius: 50px;
}

.verticalDividerAlt {
  width: 10px;
  height: 300px;
  background: linear-gradient(45deg, #356eaf, #f48523);
  display: flex;
  border-radius: 50px;
}

.sideTitle {
  font-size: 18px;
  color: #049bff;
  margin-bottom: 30px;
}


.playBtn {
  width: 200px;
  height: 60px;
  border-radius: 100px;
  background-color: #585b5e;
  border: 2px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 60px;
}

.playText {
  font-size: 20px;
  color: #fff;
  margin-left: 5px;
}

.playIcon {
  width: 50px;
  height: 50px;
}

.requestBtn {
  width: 150px;
  height: 40px;
  border-radius: 100px;
  background-color: #585b5e;
  border: 2px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

.requestBtnText {
  font-size: 14px;
  color: #fff;
  margin-left: 9px;
}

.friendsList {
  width: 100%;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  margin-top: 30px;
  align-items: center;

}

.friendImgCont {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  border-radius: 50px;
  overflow: hidden;
  border: 2px solid #fff
}

.friendItem {
  min-width: 400px;
  height: 70px;
  border-radius: 110px;
  padding: 10px;
  display: flex;
  flex-direction: row;
  background-color: #000;
  border: #fff solid 2px;
  align-items: center;
  margin-bottom: 5px;
}

.friendIcon {
  width: 30px;
  height: 30px;
  display: flex;
  margin-left: 20px;
}

.friendImg {
  width: 100%;
  height: 100%;
  object-fit: cover;

}

.adjust {
  display: flex;
  flex: 1
}

.friendName {
  font-size: 19px;
  color: #fff;
}

.playerImgCont {
  width: 150px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 150px;
  border: 5px solid #eb4503;

}

.playerImg {
  width: 100%;
  height: 100%;
  object-fit: cover;

}

.playerNickname {
  font-size: 23px;
  color: #fff;
  font-weight: bolder;
  margin-top: 30px;
}

.playerRank {
  font-size: 17px;
  color: #fff;
  text-align: center;
  margin-left: 8px;
}

.rankCont {
  padding: 10px;
  border-radius: 50px;
  background-color: #eb4503;
  border: 2px solid #fff;
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  min-width: 150px;
  text-align: center;
}

.versusIcon {
  width: 150px;
  height: 150px;
  display: flex;
  align-self: center;
  margin-left: -70px;

}

@keyframes slideFromLeft {
  0% {
    left: -150px;
  }

  100% {
    left: calc(50% - 110px);
  }

  /* Slight left offset */
}

@keyframes slideFromRight {
  0% {
    right: -150px;
  }

  100% {
    right: calc(50% - 110px);
  }

  /* Slight right offset */
}



.challenger {
  animation: backInLeft;
  /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s;
}

.opponent {
  animation: backInRight;
  /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s;
}

.vers {
  animation: animate__rotateIn;
  animation-duration: 2s;
  animation-delay: 2s
}

.kids {
  display: flex;
  flex-direction: row;

}

#challengeFeedback {
  font-size: 20px;
  color: #f84f00;
  width: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  align-self: center;
}

#countdownBox,
#countdownBox2 {
  margin-top: 70px;
  display: flex;
  align-self: center;
  font-size: 40px;
}

.lookupPop {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.96);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 99999999;
}

.lookupInfo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: -200px;
  align-items: center;

}

.lookupGlobe {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
}

.lookupText {
  font-size: 17px;
  color: #fff;
  text-align: center;
}

.otherWaiters {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  overflow-x: scroll;
  max-width: 100%;
  align-items: center;
  padding: 10px;
  padding-top: 50px;
  padding-left: 30px;
}

.waiterItem {
  height: 230px;
  width: 230px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  position: relative;
  border: 3px solid #fff;
  cursor: pointer;
}

.waiterItem:hover {
  transform: scale(1.05);
}

.waiterImgCont {
  width: 230px;
  height: 230px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.waiterImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.waiterGameImgCont {
  width: 90px;
  height: 90px;
  border-radius: 100px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  align-self: center;
  margin-top: -45px;
  border: 5px solid #fff;
}

.waiterGameImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.waiterInfo {
  position: absolute;
  bottom: 0;
  display: flex;
  flex-direction: column;
  right: 0;
  left: 0;
  padding: 10px;
}

.waiterName {
  font-size: 15px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.89);
  padding: 5px;
  padding-left: 9px;
  padding-right: 9px;
  border-radius: 6px;
  margin-bottom: 3px;
  display: flex;
  align-self: baseline;
}

.waiterGameName {
  font-size: 20px;
  color: #fff;
  background-color: rgb(1, 117, 20);
  padding: 7px;
  padding-left: 11px;
  padding-right: 11px;
  border-radius: 6px;
  margin-bottom: 3px;
  display: flex;
  align-self: baseline;
}

.waiterGameCategory {
  font-size: 12.5px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.89);
  padding: 4px;
  padding-left: 7px;
  padding-right: 7px;
  border-radius: 5px;
  margin-right: 3px;
  display: flex;
  align-self: baseline;
}

.waiterClass {
  font-size: 12.5px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.89);
  padding: 4px;
  padding-left: 7px;
  padding-right: 7px;
  border-radius: 5px;
}

.waiterRank {
  font-size: 12.5px;
  color: #fff;
  background-color: rgba(255, 0, 0, 0.89);
  padding: 4px;
  padding-left: 7px;
  padding-right: 7px;
  border-radius: 5px;
}

.rightAlign {
  display: flex;
  flex-direction: row;
}



.alertNotice {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

}

.alertNoticeImage {
  width: 100px;
  height: 100px;
  display: flex;
  align-self: center;
}

.alertNoticeText {
  font-size: 16px;
  color: #fff;
  text-align: center;
}

.bgCont {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: -1
}

.bgImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chInfo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: center;
}

.playerChCont {
  width: 120px;
  height: 120px;
  border-radius: 120px;
  border: 3px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 18px;
  overflow: hidden;
}

.playerChImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.playerChNick {
  background-color: #ff6600;
  color: #fff;
  padding: 8px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 50px;
  font-size: 18px;
  margin-bottom: 8px;
}


.playerChRank {
  background-color: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 30px;
  font-size: 15px;
}

.playerChInfo {
  font-size: 20px;
  color: #fff;
  text-align: center;
  width: 100%;
  margin-top: 28px;
}

.chGameInfo {
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 10px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  margin-top: 35px;
  align-self: center;
  justify-content: center;
  align-items: center;
  width: 110%;
  border-bottom: 2px solid #ff6600;
}

#gName {
  font-size: 25px
}

.spaceLeft {
  margin-left: 8px;
}

.start-btn {
  font-size: 2em;
  padding: 20px 60px;
  color: #fff;
  background: linear-gradient(45deg, #ff416c, #ff4b2b);
  border: none;
  border-radius: 15px;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(255, 65, 108, 0.6), 0 0 40px rgba(255, 75, 43, 0.4);
  animation: pulse 2s infinite;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  font-family: 'Orbitron', sans-serif !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

.start-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 0 30px rgba(255, 65, 108, 0.8), 0 0 60px rgba(255, 75, 43, 0.6);
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 20px rgba(255, 65, 108, 0.5), 0 0 40px rgba(255, 75, 43, 0.3);
  }

  50% {
    box-shadow: 0 0 25px rgba(255, 65, 108, 0.7), 0 0 50px rgba(255, 75, 43, 0.5);
  }

  100% {
    box-shadow: 0 0 20px rgba(255, 65, 108, 0.5), 0 0 40px rgba(255, 75, 43, 0.3);
  }
}


.profilePage {

  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  display: flex;
  z-index: 9999999;
  background-color: rgba(0, 0, 0, 0.89);
  flex-direction: row;
}

.profilePageMenu {
  border-top: 2px solid #fff;
  margin-top: 200px;
  display: flex;
  flex: 2;
  flex-direction: column;
  background-color: #b45f4e3b;
}

.profilePageDisplay {
  display: flex;
  flex: 8;
  height: 100%;
  border-left: 2px solid #fff;
  justify-content: center;
  align-items: center;
  position: relative;
  background-image: url('https://media.istockphoto.com/id/1316650399/vector/gamification-in-business-educational-entertainment-game-design-concept-in-neon-blue-dark.jpg?s=612x612&w=0&k=20&c=YutOJ3U1cA-aUQW5qCPOqs6EaLOnhDe6ZYerUWupW-k=');
  /* Replace with your image */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.kidsContent {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.newKidContainer {
  display: flex;
  flex: 1;
  flex-direction: column;

}

.editKidsContainer {
  display: flex;
  flex: 4;
  flex-direction: column;
  background-color: rgba(0, 0, 0, 0.75);
  border-radius: 10px;
  padding: 10px;
}

.containerTitle {
  color: #0db0e1;
  font-size: 15px;
  margin-bottom: 20px;
}

.containerText {
  width: 70%;
  min-height: 100px;
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
  color: #fff;
  font-size: 17px;
}

.centered {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  padding: 100px;
  flex-direction: column;
}

.deleteBtn {

  display: flex;
  flex-direction: row;
  margin-top: 50px;
  min-width: 200px;
  background-color: #000;
  border: 2px solid #fff;
  border-radius: 5px;
  height: 50px;
  padding: 10px;
  justify-content: center;
  align-items: center;
}


.gameDetailsPopup {
  display: flex;
  flex-direction: row;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: #000;
  z-index: 999999;
}

.gameDetails {
  display: flex;
  flex: 1;
  flex-direction: column;


}

.gameZoomCover {
  width: 100%;
  height: 80%;
  border-bottom: 1px solid #efefef;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.gameZoomCoverImgCont {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;

}

.gameZoomCoverImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gameZoomMeta {
  position: absolute;
  z-index: 1;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  background-color: rgba(0, 0, 0, 0.65);
  justify-content: end;
}

.gameZoomMetaHead {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.gameZoomMetaHeadName {
  padding: 10px;
  border-radius: 5px;
  background-color: #cf0202;
  color: #fff;
  font-size: 20px;
  margin-bottom: 10px;
  display: inline-flex;
  align-self: flex-start;
  margin-left: 10px;
  margin-top: 10px;
}

.gameZoomMetaBadges {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
  padding-left: 10px;
  padding-right: 10px;
}

.gameBadge {
  padding: 5px;
  border-radius: 5px;
  margin-right: 10px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-left: 5px;
  padding-right: 5px;
}

.ash {
  background: linear-gradient(60deg, #141414, #09a4b6);
}

.green {
  background: linear-gradient(60deg, #141414, #018f25);
}

.yellow {
  background: linear-gradient(60deg, #141414, #37313f);
}

.purple {
  background: linear-gradient(60deg, #141414, #63002e);
}

.yourPlace {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: #37313f;
  display: flex;
  padding: 10px;
  flex-direction: column;
  border-top: 3px solid #fff;
}

.placeText {
  color: #ffa600;
}

.gameZoomMetaDescription {
  display: flex;
  flex-direction: column;
}

.gameZoomMetaDescText {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  color: #fff;
}

.gameZoomMetaDescInst {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  color: #fff;
}

.gameZoomPlayers {
  display: flex;
  flex-direction: row;

}

.player {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 5;
  height: 100%;
}

.playerSync {
  margin-bottom: 40px;
  color: #fff;
  font-size: 14px;
}

.playerStatus {
  color: #dee907;
  font-size: 50px;
}

.gameZoomPlayers {
  width: 100%;
  height: 20%;
}

.leftDivider {
  border-left: 1px solid #efefef;
}

.leaderBoard {
  display: flex;
  flex-direction: column;
  width: 350px;
  height: 100%;
  border-left: 1px solid #efefef;
  position: relative;
}

.leaderBoardTitle {
  width: 100%;
  height: 70px;
  display: flex;
  border-bottom: 1px solid #efefef;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;

}

.leaderBoardTitleText {
  color: #fff;
  font-size: 18px;
  margin-left: -35px;
}

.leaderBoardList {
  width: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow-y: scroll;
}

.leaderBoardItem {
  width: 100%;
  padding: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  min-height: 65px;
}

.leaderBoardRankCont {
  width: 40px;
  height: 40px;
  border-radius: 50px;
  border: 3px solid #ffa600;
  display: flex;
  justify-content: center;
  align-items: center;
}

.leaderBoardRankText {
  color: #fff;
  font-size: 14px;
}

.leaderProfCont {
  width: 55px;
  height: 55px;
  border-radius: 55px;
  margin-left: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #fff;
  overflow: hidden;
}

.leaderProfPic {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.leaderProfNick {
  margin-left: 15px;
  color: #fff;
  font-size: 18px;
}

.leaderProfScore {
  margin-left: 15px;
  color: #0084d1;
  font-size: 20px;
  font-weight: bolder;
}


.deleteIcon {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.deleteText {
  color: #fff;
  font-size: 16px;
}

.profilePageMenuTitle {
  padding: 5px;
  color: #fff;
  font-size: 13px;
  margin-bottom: 10px;
  border-bottom: 2px solid #fff;

}

.subTitle {
  color: #ff4a03;
  font-size: 13px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 5px;
}

.profileItem {

  padding: 7px;
  display: flex;
  flex-direction: row;
  align-items: center;
  max-width: 90%;
}

.selectedProfile {
  background-color: #ff4a0375;
  border: 2px solid #fff;
  border-radius: 100px;
}

.profImgCont {
  width: 45px;
  height: 45px;
  border-radius: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin-right: 10px;
}

.profImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profNick {
  color: #fff;
  font-size: 15px;
}

.displayMenu {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: row;
  align-self: center;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  height: 50px;
  border-left: 2px solid #fff;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.75)
}

.displayMenuItem {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 10px;
  padding-right: 10px;
  min-width: 120px;
  overflow: hidden;

}

.displayMenuItemText {
  color: #fff;
  font-size: 14px;
}

.selectedDisplayMenu {
  background-color: #8c2e0b94
}

.profilePageContent {
  width: 100%;
  height: 100%;
  padding-top: 170px;
  padding-left: 40px;

}

.opaque {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.75)
}

.firstCurve {
  border-top-left-radius: 100px !important;
  border-bottom-left-radius: 100px !important;
}

.inherited {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  z-index: 1
}

.inputTextCont {
  border: 2.5px solid #fff;
  border-radius: 10px;
  padding: 6px;
  padding-left: 10px;
  padding-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 280px;
  background-color: rgba(0, 0, 0, 0.75);
  height: 60px;

}

.inputText {
  width: 100% !important;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  font-size: 15px;
  color: #fff;
  border: none !important;
  outline: none;
}

.selectBg {
  color: #000 !important;

}

.greyBg {
  background-color: #a6a2a2ba !important;
}

.addKidBtn {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px;
  margin-top: 10px
}

.addKidText {
  color: #218838;
  font-size: 13px;
  margin-left: 8px;
}

.inputCont {
  display: flex;
  flex-direction: column;
  width: 280px;
  height: 100px;
  margin: 8px;
  margin-right: 15px;
}

.inputLabel {
  font-size: 14px;
  color: #fff;
  margin-bottom: 8px;
}

.doubleColItems {
  display: flex;
  flex-direction: row;
  margin-bottom: 15px;
}

.updateBtn {
  width: 200px;
  border-radius: 100px;
  height: 50px;
  display: flex;
  justify-content: center;
  flex-direction: row;
  border: 2px solid #fff;
  align-items: center;
  padding-left: 15px;
  padding-right: 15px;
  background: linear-gradient(45deg, #0049ff, #218838)
}

.btnText {
  font-size: 17px;
  color: #fff;
  margin-left: 8px;

}

.alignExtremeRight {

  width: 100%;
  height: 200px;
  display: flex;
  justify-content: flex-start;
}

.walletBalance {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-right: 10px;

}

.walletFigures {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

.walletFigure {
  color: #218838;
  font-size: 30px;
  font-weight: bolder;
  margin-left: 15px;

}

.walletTitle {
  color: #fff;
  font-size: 15px;
  font-weight: bolder;
  margin-left: 15px;
  margin-bottom: 10px;

}

.someSpace {
  display: flex;
  width: 120px;
  height: 10px;
}

.walletOperations {
  background-color: rgb(24 196 88 / 51%);
  padding: 20px;
  border-radius: 10px;
  width: 95%;
}


.walletTopUp {
  display: flex;
  flex-direction: column;
  flex: 5;
}

.walletWithdraw {
  display: flex;
  flex-direction: column;
  flex: 5;
}

.pink {
  color: #d80491
}

.walletIcon {
  width: 70px;
  height: 70px;
}

.walletHistory {
  width: 95%;
  height: 250px;
  overflow-y: scroll;
  padding: 20px;
  display: flex;
  flex-direction: column;
  background-color: rgba(0, 0, 0, 0.75);
  border-radius: 10px;
}

.historyItems {
  display: flex;
  flex-direction: column;

}

.transItem {

  display: flex;
  flex-direction: row;
  margin-bottom: 17px;
}

.transInfo {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  margin-right: 50px;
  min-width: 500px
}

.transMeta {
  color: #fff;
  font-size: 16px;
  margin-bottom: 3px;
}

.transTime {
  color: #ccc;
  font-size: 12px;
}

.doubleActions {
  width: 200px;
  height: 50px;
  border-radius: 60px;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  background: linear-gradient(45deg, #0049ff, #218838);
  border: 2px solid #fff;
  cursor: pointer;
}

.rightAction {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 5;
  border-left: 2px solid #fff;
}

.leftAction {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 5;

}

.actionText {
  color: #fff;
  font-size: 14px;
  margin-left: 5px;

}


.actionText2 {
  color: #fff;
  font-size: 14px;
  margin-right: 5px;
}


.logs {
  display: flex;
  flex-direction: column;
  padding: 15px;
  width: 100%;
  height: 80%;
  overflow-y: scroll;
}

.historyTitle {
  color: #ff4901;
  font-size: 15px;
  margin-bottom: 25px;
}

.logItem {
  display: flex;
  flex-direction: row;
  margin-bottom: 18px;
  width: 100%;
  align-items: center;
}

.profPicCont {
  width: 50px;
  height: 50px;
  border-radius: 70px;
  border: 2px solid #fff;
  margin-right: 9px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.profPic {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.logInfo {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.logText {
  color: #fff;
  font-size: 15px;
  margin-bottom: 5px;

}


.logDate {
  color: #747272;
  font-size: 12px;

}

.ui.table.transparent {
  background-color: transparent !important;
  color: white;
}

.ui.table.transparent thead {
  color: #ff4901 !important;
}

.ui.table.transparent th,
.ui.table.transparent td {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.ui.table.transparent thead th {
  background-color: rgba(255, 255, 255, 0.05);
  color: #ff4901 !important;
}

.ui.table.transparent tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.subjectsCovered {
  width: 100%;
  display: block;
  padding: 10px;

}

.subjectItem {
  min-width: 160px;
  padding: 10px;
  border-radius: 5px;
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 10px;
  background-color: #049bff;

}

.subjectName {
  color: #fff;
  font-size: 15px;
}

.subjectScore {
  color: #fff;
  font-size: 15px;
  border-radius: 70px;
  background-color: #e02007;
  padding: 6px;
  margin-left: 6px;
}

.selectedSubjectItem {
  background-color: #1a1a1a;
  border: 2px solid #fff;
}

.topicsPopup {
  position: fixed;
  right: 0;
  top: 0;
  z-index: 99999;
  background-color: #000;
  border-left: #ffffff solid 2px;
  border-top: #ffffff solid 2px;
  border-bottom: #ffffff solid 2px;
  display: flex;
  flex-direction: column;
  min-width: 300px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  overflow: hidden;
}

.topicsHead {
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 2px solid #fff;
  background-color: #383434;
}

.topicsBody {
  width: 100%;
  display: flex;
  height: 400px;
  flex-direction: column;
  padding: 10px;
  overflow-y: scroll;
}

.topicsFooter {
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border-top: #ffffff solid 2px;
  background-color: #383434;
  padding: 20px;
}

.topicItem {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

.topicText {
  color: #fff;
  font-size: 18px;
}

.topicItemText {
  display: flex;
  color: #fff;
  font-size: 15px;
  margin-right: 5px;
  flex: 1
}

.topicItemScore {
  color: #fff;
  font-size: 15px;
  border-radius: 70px;
  background-color: #e02007;
  padding: 6px;
}

#analyticsContent {
  overflow-y: scroll
}

.soundItem {
  min-width: 200px;
  height: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 10px;
  cursor: pointer;
}

.soundItemText {
  color: #fff;
  font-size: 15px;
  margin-right: 16px;
}

.toggleIndicator {
  border-radius: 100px;
  background-color: #222;
  width: 80px;
  height: 40px;
  display: flex;
  overflow: hidden;

}

.toggleDot {
  width: 40px;
  height: 40px;
  display: flex;
  border-radius: 40px;
}

.onBg {
  background-color: #218838 !important;
  justify-content: flex-end;
}

.offBg {
  background-color: #882121 !important;
  justify-content: flex-start;
}

.onDot {
  background-color: #02350d;
  border: 1px #fff solid;
}

.offDot {
  background-color: #350202;
  border: 1px #fff solid;
}

.settingsComponent {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.settingsBottom {
  border-top-left-radius: 100px;
  border-bottom-left-radius: 100px;
  min-width: 200px;
  height: 70px;
  display: flex;
  flex-direction: row;
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.75);
  padding: 10px;
  padding-left: 20px;
  padding-right: 40px;
  justify-content: center;
  overflow: hidden;
  border: 2px solid #fff;
  align-self: center;
  margin-right: -10px;


}

.settingsMenuItem {
  min-width: 100px;
  border-radius: 5px;
  padding: 10px;
  border: 1px solid #fff;
  margin-right: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 45px;

}

.settingsMenuItemText {
  color: #fff;
  font-size: 14px;
}

.selectedSettingsItem {
  background-color: #0056b3;
}

.subscribedScreen,
.unsubscribedScreen {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.premiumText {
  color: #fff;
  font-size: 30px;
  font-weight: bolder;
}

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

.premiumIcon {
  width: 150px;
  height: 150px;
  object-fit: cover;
  margin-top: 20px;
  margin-bottom: 20px;
}

.premiumExpiry {
  color: #ccc;
  font-size: 14px;
  margin-bottom: 30px;
}

.premiumFeatures {

  background-color: rgba(0, 0, 0, 0.75);
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  width: 90%;
  min-height: 200px;
  padding: 20px;
}

.premiumFeature {
  color: #fff;
  font-size: 14px;
  margin-bottom: 10px;
}

.premiumInfo {
  color: #ffffff;
  font-size: 14px;
  padding: 10px;
  border-radius: 100px;
  background-color: #53514f;
  text-align: center;
  margin-bottom: 15px;
  padding-left: 15px;
  padding-right: 15px;
}

.reachUs {
  color: #ffffff;
  font-size: 14px;
  margin-top: 10px;
  margin-bottom: 50px;
}

.supportItem {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 10px;

}

.supportText {
  color: #ffffff;
  font-size: 15px;
  margin-left: 15px;
}

.extraInfo {
  color: #ffff;
  font-size: 12px;
  margin-top: 20px;
  background-color: rgba(0, 0, 0, 0.75);
  padding: 10px;
}

.docTitle {
  color: #ffffff;
  font-size: 30px;
  margin-bottom: 35px;
  text-align: center;
  width: 100%;
}

.docInfo {
  width: 80%;
  height: 80%;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  align-self: center;
}

.highlightCss {
  background-color: #775a00;
}

#avatar {
  width: 100px;
  height: 100px;
  border-radius: 100px;
}

.cols {
  display: flex;
  flex-direction: column;
  position: relative;
}

.swal2-container {
  z-index: 9999999 !important;
}

#completeWithdraw {
  margin-top: 15px;
}

.createNewGame {
  width: 100%;
  min-height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  align-self: center;
}

.newIcon {
  width: 80px;
  height: 80px;
  display: flex;
  align-self: center;
  margin-bottom: 10px;
}

.newInfo {
  font-size: 16px;
  width: 100%;
  padding: 10px;
  text-align: center;
  margin-bottom: 10px;
}

.createItems {
  width: 100%;
  display: block;
  margin-bottom: 15px;
}

.createNewTopic {
  width: auto;
  height: 40px;
  display: inline-flex;
  border-radius: 10px;
  background-color: #7e4423;
  flex-direction: row;
  padding: 5px;
  margin: 10px;
  justify-content: center;
  align-items: center;
  align-self: flex-start
}

.topicText {
  font-size: 17px;
  color: #fff;
  font-weight: bolder;
  display: flex;
  flex: 1;
  margin-right: 10px;
}

.generateGames {
  font-size: 16px;
  color: #fff;
  font-weight: bolder;
  display: flex;
  padding: 10px;
  border-radius: 60px;
  text-align: center;
  margin-top: 10px;
  align-self: center;
  background-color: #0049ff;
  border: 3px solid #fff;
  margin-bottom: 10px;
}

.userSelection {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.74);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 999999
}

.userBody {
  width: 650px;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column
}

.userBodyText {
  font-size: 35px;
  color: #fff;
  margin-bottom: 15px;
}

.userList {
  width: 100%;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

.userItem {
  display: flex;
  width: 80%;
  border-radius: 70px;
  height: 70px;
  flex-direction: row;
  padding: 8px;
  border: 2px solid #fff;
  margin-bottom: 10px;
  justify-content: center;
  align-items: center;
}

.highLightedProfile {
  background-color: #3d3737 !important;
}

.userItemPhoto {
  width: 45px;
  height: 45px;
  border-radius: 50px;
  margin-right: 8px;
}

.userItemName {
  font-size: 18px;
  color: #fff;
  font-weight: bold;
  display: flex;
  flex: 1
}

.activelySelected {
  border: 5px #fffb04 solid !important;
  z-index: 9
}

.speechTrigger {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999999999;
}

.speechBox {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 300px;
  justify-content: center;
  align-items: center;
  background: linear-gradient(120deg, #0056b3, #882121);
  border-radius: 300px;
  border: 5px solid #fff;
}

.speechBox2 {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 300px;
  justify-content: center;
  align-items: center;
  background: linear-gradient(120deg, #018f25, #dc3545);
  border-radius: 300px;
  border: 5px solid #fff;
}

.speechIcon {
  width: 100px;
  height: 100px;
  margin-bottom: 50px;
}

.speechLabel,
.speechLabel2 {
  font-family: "Josefin Sans", sans-serif !important;
  font-size: 28px;
  color: #fff;
}