.beta-tag-bubble {
    overflow: hidden;
    position: absolute;
    bottom: 50%;
    /* right: 50%; */
    border-radius: 3.2rem;
    width: auto;
    height: 3.2rem;
    background: rgba(0, 0, 0, 0.80);
    padding: 1rem;
    color: white;
    -webkit-transition: all 0.55s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.55s cubic-bezier(0.645, 0.045, 0.355, 1);
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  
  .unexpanded-text {
    white-space: nowrap;
    margin-left: 0rem;
    font-size: 0 !important;
    line-height: 1rem;
    color: black;
    text-decoration: none;
    opacity: 0;
    -webkit-transition-delay: 2s;

    /* Safari */
    transition-delay: 2s;
    -webkit-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  
  .beta-tag-bubble .expanded {
    overflow: visible;
    border-radius: 3.2rem;
    padding: 1rem;

    height: 30px;

    color: white;
    -webkit-transition: all 0.55s cubic-bezier(0.645, 0.045, 0.355, 1) 0.4;
    transition: all 0.55s cubic-bezier(0.645, 0.045, 0.355, 1) 0.4;
    transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  
  .expanded-text {
    opacity: 1;
    -webkit-transition-delay: 2s;
    font-size: 1rem !important;
    line-height: 1rem;
    margin-left: 0.4rem;


    /* Safari */
    color: white;
    transition-delay: 2s;
    -webkit-transition: opacity 1s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: opacity 1s cubic-bezier(0.645, 0.045, 0.355, 1);
  }

  /* For containers of betatag... so we don't have to 
  rewrite everywhere */
.beta-tag-container {
  position: fixed;
  top: 3rem;
  left: 50%;
  z-index: 999;
  height: 30px;
  animation: slide-down-transform 1s 2s;
}

.beta-tag-container.right{
  right: 3%;
  left: auto;
  /* left: 0; */
  animation: slide-left 1s 2s;
}

.beta-tag-container.left{
  left: 3%;
  right: auto;
  animation: slide-right 1s 2s;
}.scene-renderer {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
}

.scene-renderer .scene-renderer-content {
  width: 1040px;
  height: 585px;
  display: block;
  overflow: hidden;
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 24px;
}

.scene-renderer-controller {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.scene-renderer .timer-container {
  position: absolute;
  z-index: 99999;
}.toast-container {
  position: absolute;
  left: 50%;
  top: 50%;
  color: #fff;
  z-index: 1000;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.6);
  border-radius: 2rem;
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  font-size: 2rem;
  padding: 2rem 4rem;
}
.toast-container.with-flag {
  padding-left: 6rem;
  background-image: url(/sdkdemo/assets/flag-color.ee3a7220.gif);
  background-repeat: no-repeat;
  background-size: 6rem;
  background-position: 0.5rem center;
}
.toast-container.bottom {
  top: auto;
  bottom: 3rem;
  transform: none;
}

.toast-container.right {
  left: auto;
  right: 3rem;
  transform: none;
}

.toast-container b {
  margin-left: 2rem;
  font-size: 3rem;
  line-height: 2rem;
}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  .toast-container {
    font-size: 1.6rem;
    padding: 1rem 2rem;
  }
}
.player-avatar-strip {
  display: flex;
  /* justify-content: center; */
  position: absolute;
  z-index: 10;
  top: calc(0.5rem + var(--sat));
  /* bottom: 0; */
  left: 0;
  right: 0;
  overflow-x: auto;
}

.player-avatar-strip .player-score-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 0rem 0.5rem;
  border-radius: 2rem;
  padding: 0.2rem;
}

.player-avatar-strip .player-score-container > span {
  color: #ffffff;
  font-family: "Lilita One";
  font-style: normal;
  font-weight: 400;
  font-size: 2rem;
  margin: 0rem 1rem;
}

.player-avatar-strip .avatar-holder {
  background-color: rgba(255, 255, 255, 0.8);
  background-size: 23px;
  background-position: center;
  background-repeat: no-repeat;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  margin: 0.1rem;
  border: 0.15rem solid transparent;
}

.player-avatar-strip.mobile .avatar-holder {
  width: 2.5rem;
  height: 2.5rem;
}

.player-avatar-strip.mobile .player-score-container > span {
  font-size: 1.5rem;
  margin: 0rem 0.7rem;
}
.player-avatar-parent {
  height: 10rem;
  position: relative;
}

.player-avatar-parent.bottom {
  display: flex;
    flex-direction: column;
    pointer-events: none;
    justify-content: flex-end;
    height: 100vh;
}



.player-avatar-strip {
  /* display: flex; */
  /* justify-content: center; */
  position: absolute;
  z-index: 10;
  /* bottom: 0; */
  left: 0;
  right: 0;
  overflow-x: auto;
  display: flex;
}

.player-avatar-strip.top {
  top: calc(0.5rem + var(--sat));
}

.player-avatar-strip.bottom {
  bottom: calc(0.5rem + var(--sat));
  position: relative;
}

.player-avatar-strip.noabsolute {
  position: initial;
  overflow: hidden;
  flex-wrap: wrap;
}

.player-avatar-strip.centered {
  justify-content: center;
}

/* .player-avatar-strip .avatar-holder{
    overflow-y: visible;
} */

.player-avatar-strip .player-score-container.icon-only {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0rem 0.5rem;
  border-radius: 2rem;
  transform: scale(0);
  padding: 0.2rem;
  position: relative;
  overflow-y: visible;
  transition: 0.4s;
}

.player-avatar-strip .player-score-container .score-container{
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 0rem 0.5rem;
  border-radius: 0.6rem;
  padding: 0.1rem;
  background-color: #ffffff;
  bottom: -1.0rem;
  overflow: visible;
}

.player-avatar-strip .player-score-container .cartoon-dialog-box {
  background: white;
  color: black;
  box-shadow: 0 3px 0px 0px black;
  /* border-radius: 26px; */
  border: 2px solid black;
  padding: 5px 19px;
  max-width: 100%;
  width: fit-content;
  white-space: nowrap;
  user-select: none;
}

/*       ScrollBar 1        */

#scrollbar1::-webkit-scrollbar {
  width: 10vw;
  max-width: 20vw;
  height: 0.5rem;

}

#scrollbar1::-webkit-scrollbar-track {
  margin: 0px 44vw;

  height: 0.5rem;

  border-radius: 8px;
  background-color: #ffffff3c;
  /* border: 1px solid #cacaca; */
  max-width: 20rem;
  width: 20rem;
}

#scrollbar1::-webkit-scrollbar-thumb {
  border-radius: 8px;
/* border: 3px solid transparent; */
  background-clip: content-box;
  background-color: #fff;
}

.player-avatar-strip .player-score-container > span {
  color: #ffffff;
  font-family: "Lilita One";
  font-style: normal;
  font-weight: 400;
  font-size: 2rem;
  margin: 0rem 1rem;
}

.player-avatar-strip .avatar-holder {
  background-color: rgba(255, 255, 255, 0.8);
  background-size: 23px;
  background-position: center;
  background-repeat: no-repeat;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  margin: 0.1rem;
  border: 0.15rem solid transparent;
}

.player-avatar-strip .empty-avatar-holder {
  /* margin: 0.1rem;
  height: 3.2rem;
  width: 3.2rem;
  background-color: #000000;
  border-radius: 50%;
  opacity: 0.13; */
  margin: 0.1rem;
  height: 3.2rem;
  width: 3.2rem;
  background-color: #ffffff;
  border-radius: 50%;
  opacity: 0.13;
  border: none;
}

.player-avatar-strip.mobile .avatar-holder {
  width: 2.5rem;
  height: 2.5rem;
}

.player-avatar-strip.mobile .player-score-container > span {
  font-size: 1.5rem;
  margin: 0rem 0.7rem;
}
/* rain drop styles */
.rain-container {
  position: absolute;
  top: 0;
  bottom: -100px;
  left: 0;
  right: 0;
  z-index: -1;
  /* overflow: hidden; */
}

.rain-container.dark {
  background: linear-gradient(#131a21, #3a3793);
}

.drop {
  background-image: url("data:image/png;base64,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");
  background-repeat: no-repeat;
  background-size: contain;
  width: 13px;
  height: 142px;
  position: absolute;
  top: -200px;
  /* -webkit-animation: fall 1.63s linear infinite;
  -moz-animation: fall 1.63s linear infinite;
  animation: fall 1.63s linear infinite; */
}

.drop.two {
  background-image: url("data:image/png;base64,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");
}
.drop.three {
  background-image: url("data:image/png;base64,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");
}
.drop.four {
  background-image: url("data:image/png;base64,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");
}

/* drop animation styles */
@-webkit-keyframes fall {
  to {
    margin-top: 150vh;
  }
}
@-moz-keyframes fall {
  to {
    margin-top: 150vh;
  }
}

@keyframes fall {
  to {
    margin-top: 150vh;
  }
}
.winner-all-elements-container {

}

.winner-card-container {
    font-family: 'Russo One', sans-serif;
    min-width: 20rem;
    text-align: center;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.winner-fish {
    background-color: black;
    color: white;
    height: fit-content;
    font-size: 1rem;
    padding: 10px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rotating-stars .rotating-star {
    animation: spin 2s infinite alternate ease-in-out;
}

.winner-fish:before {
    content: "";
    background: url('/sdkdemo/assets/star1.b5c3c9e1.svg');
    background-size: 10px;
    background-size: contain;
    background-repeat: no-repeat;
    width: 3rem;
    height: 3rem;
    display: inline-block;
}

.winner-fish:after {
    content: "";
    background: url('/sdkdemo/assets/star1.b5c3c9e1.svg');
    background-size: 10px;
    background-size: contain;
    background-repeat: no-repeat;
    width: 3rem;
    height: 3rem;
    display: inline-block;
}

.winner-background-rain {
    top: -10rem;
    position: absolute;
    width: 20rem;
    height: auto;
    overflow: hidden;

    /* https://makandracards.com/makandra/475887-letting-a-dom-element-fade-into-transparency */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 50%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 50%, transparent 100%);

}

@keyframes spin {
    from { rotate: 0deg; padding-bottom: "3px" }
    to { rotate: 360deg; padding-bottom: "0px" }
  }.subContainer {
  width: fit-content;
  height: fit-content;
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  font-size: 5rem;
}
.subContainer .square {
  position: absolute;
  width: 1rem;
  height: 1rem;
  z-index: 0;
  will-change: transform;
}
.subContainer .circle {
  position: absolute;
  width: 1rem;
  height: 1rem;
  z-index: 0;
  will-change: transform;
  border-radius: 100%;
}
.subContainer .triangle {
  position: absolute;
  z-index: 0;
  border-style: solid;
  border-width: 0 1rem 2rem 1rem;
}

.startConfetti .square {
  animation: square 0.9s linear 1 forwards;
}
.startConfetti .circle {
  animation: circle 0.9s linear 1 forwards;
}
.startConfetti .triangle {
  animation: triangle 0.8s linear 1 forwards;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 papayawhip;
  }
  100% {
    box-shadow: 0 0 0 2rem transparent;
  }
}
@keyframes square {
  0% {
    transform: translate(0%, 0%) rotate(0deg);
    background: yellow;
  }
  100% {
    transform: translate(1100%, -900%) rotate(180deg);
    background: transparent;
  }
}
@keyframes circle {
  0% {
    transform: translate(0%, 0%) rotate(0deg);
    background: #11a683;
  }
  100% {
    transform: translate(-700%, -700%);
    background: transparent;
  }
}
@keyframes triangle {
  0% {
    transform: translate(0%, 0%) rotate(0deg);
    border-color: transparent transparent crimson transparent;
  }
  100% {
    transform: translate(0%, -1000%) rotate(180deg);
    border-color: transparent transparent transparent transparent;
  }
}.confetti-canvas {
    display: block;
    vertical-align: bottom;
}

/* ---- tsparticles container ---- */
#tsparticles {
position: fixed;
width: 100%;
height: 100%;
z-index: 9999;
}.avatar-holder {
    width: 2rem !important;
    height: 2rem !important;
  }
  
.player-score-container > span {
  font-size: 1.4rem !important;
}

/* Animation for flying card */
@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: scale(.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.14);
  }
  70% { transform: scale(.8); }
  /* 80% { transform: scale(1.05); }
  92% { transform: scale(0.9); } */
  100% { transform: scale(1); }

}:root {
  font-size: 4vh;
}