@media only screen and (max-width: 1101px) {
    .flex_or_block2 {
        display: block;
    }
    .justify_content2 {
        justify-content: center;
    }
    ._1000px_nav {
        display: none;
    }
    ._1000px_nav2 {
        display: unset;
    }
    .table_row_me {
        display: none;
    }
    .flex_or_block2_none {
        display: none;
    }
    .flex_or_block2_none2 {
        display: flex;
    }
    .top_25_105 {
        top: 110%;
    }
    .width_45_35 {
        width: 35%;
    }
    .flex_or_none {
        display: none;
    }
    .justify_content3 {
        justify-content: center;
        align-items: baseline;
    }
    .padding_10_0 {
        padding: 5px 0;
    }
    .flex_or_none2 {
        display: flex;
    }
    .justify_content4 {
        justify-content: left;
    }
    .width_302_100 {
        width: 100%;
    }
    .small_chat {
        height: calc(100vh - 160px)
    }
    .width_92_50 {
        padding-top: 25px;
    }
    .width_92_502 {
        min-height: calc(110vh - 0px)
    }
    .padding_30_40 {
        padding-top: 20px;
    }
    .padding_2_0 {
        padding-bottom: 1px;
        padding-right: 0px
    }
    .padding_2_0_2 {
        padding-bottom: 1px;
        padding-right: 0px
        padding-left: 0px;
        padding-top: 3px;
    }
    .padding_400_0 {
        padding-bottom: 0px;
    }
}
@media only screen and (min-width: 1100px) {
    .width_45_35 {
        width: 45%;
    }
    .table_row_me {
        display: table-cell;
    }
    .padding_400_0 {
        padding-bottom: 400px;
    }
    .padding_30_40 {
        padding-top: 40px;
    }
    .padding_2_0 {
        padding-bottom: 0px;
        padding-right: 5px
    }
    .padding_2_0_2 {
        padding-bottom: 0px;
        padding-right: 5px;
        padding-left: 20px;
    }
    .flex_or_block2 {
        display: flex;
    }
    .justify_content2 {
        justify-content: left;
    }
    ._1000px_nav {
        display: unset;
    }
    ._1000px_nav2 {
        display: none;
    }
    .flex_or_block2_none {
        display: flex;
    }
    .flex_or_block2_none2 {
        display: none;
    }
    .top_25_105 {
        top: 25%;
    }
    .flex_or_none {
        display: flex;
    }
    .justify_content3 {
        justify-content: right;
        align-items: center;
    }
    .padding_10_0 {
        padding:  0;
    }
    .flex_or_none2 {
        display: none;
    }
    .justify_content4 {
        justify-content: center;
    }
    .width_302_100 {
        min-width: 302px; max-width: 302px;
    }
    .small_chat {
        height: calc(100vh - 190px)
    }
    .width_92_50 {
        padding-top: 77px;
    }
    .width_92_502 {
        min-height: calc(110vh - 77px)
    }
}
@media only screen and (max-width: 501px) {

    .width_45_35 {
        width: 45%;
    }
    .flex_or_block3 {
        display: block;
    }

    .padding_100 {
        padding-top: 125px;
    }
    .medium_nav { display: none}
    .medium_nav2 { display: unset}
    .text_align2 {
        text-align: center;
    }
    .width_100_130 {
        min-width: 100px;
    }
}
@media only screen and (min-width: 500px) {
    .flex_or_block3 {
        display: flex;
    }

    .padding_100 {
        padding-top: 25px;
    }
    .medium_nav { display: unset}
    .medium_nav2 { display: none}
    .text_align2 {
        text-align: left;
    }
    .width_30_100 {
        width: 100%;
    }
    .width_25_100 {
        width: 25%;
    }
    .width_70_100 {
        width: 70%;
    }
    .width_40_100 {
        width: 40%;
    }
    .width_100_130 {
        min-width: 130px;
    }
    .big_nav2 {
        display: flex;
    }

}
@media only screen and (max-width: 1401px) {
    .right_5_5 {
        right: 1%;
    }
        .width_75_100 {
        width: 100%;
    }
    .big_nav2 {
        display: unset;
    }

    .text_align {
        text-align: center;
    }
    .width_padding10 {
        padding: 10px 0px;
    }
    .width_300px_100 {
        width: 100%;
    }
    .width_30_100 {
        width: 100%;
    }
    .width_30_90 {
        width: 90%;
    }
    .width_25_100 {
        width: 100%;
    }
    .width_40_100 {
        width: 100%;
    }
    .width_70_100 {
        width: 100%;
    }
    .padding_0_5 { padding: 3%}
    .padding_0_10 {
        padding: 0%;
    }
    .width_50_100 {
        width: 100%;
    }
    .padding_5_0 {
        padding:  0
    }
    .justify_content {
        justify-content: center;
    }
    .width_20_100 {
        width: 100%;
        padding: 5% 0%;
    }
    .width_1_100 {
        width: 100%;
        padding: 0.7% 0%;
    }
    .padding_40_0 {
        padding: 10px 0;
    }
    .small_nav {
        display: unset;
    }
    .big_nav {
        display: none;
    }
    .flex_or_block {
        display: block;
    }
    .block_or_flex {
        display: flex;
    }
    .middle_part {
        width: 100%;
        height: 100%;
        padding-left: 15px;
        padding-right: 15px;


    }
    .text_change {
        font-size: 12px
    }
    .high_type {
        min-height: calc(93vh);
    }
    .padding_0_40 {
        padding-right: 0;
        padding-bottom: 20px;
    }
    .padding_0_40__ {
        padding-bottom: 20px; padding-top: 40px;
    }
    .flex_or_none3 {
        display: flex;
    }
}
@media only screen and (min-width: 1400px) {
    .padding_0_40__ {
        padding-bottom: 20px; padding-top: 0px;
    }
        .width_75_100 {
        width: 75%;
    }
    .right_5_5 {
        right: 5.5%;
    }
    .width_300px_100 {
        width: 500px;
        max-width: 500px;
    }
    .text_align {
        text-align: left;
    }
    .width_padding10 {
        padding: 0px 0px;
    }
    .width_30_100 {
        width: 25%;
    }
    .width_25_100 {
        width: 30%;
    }
    .width_30_90 {
        width: 90%;
    }
    .padding_0_5 {
        padding: 0%;
    }
    .padding_0_10 {
        padding:0 10%;
    }
    .padding_40_0 {
        padding: 10px 20px;
    }
    .padding_0_40 {
        padding-right: 40px;
    }
    .width_20_100 {
        width: 20%;
        padding: 0 0.5%;
    }
    .width_50_100 {
        width: 50%;
    }
    .padding_5_0 {
        padding:  0 5%
    }
    .justify_content {
        justify-content: flex-end;
    }

    .width_1_100 {
        width: 0.7%;
        padding: 0 1%;
    }
    .small_nav {
        display: none;
    }
    .big_nav {
        display: unset;
    }
    .flex_or_block {
        display: flex;
    }
    .block_or_flex {
        display: block;
    }
    .middle_part {
        width: 30%;
        height: calc(100vh - 78px);
        padding-top: 15px;
        padding-bottom: 15px;
        transition: width 0.2s, height 0.2s;
        min-width: 150px;
    }
    .text_change {
        font-size: 17px
    }
    .high_type {
        height: calc(93vh);
    }
    .flex_or_none3 {
        display: none;
    }
}
@media only screen and (min-width: 1700px) {
    .top_25_105 {
        top: 31%;
    }
    .padding_110_500 {
        padding: 0;
    }
}
@media only screen and (max-width: 1701px) {
    .top_25_105 {
        top: 110%;
    }
    .padding_110_500 {
        padding: 75px;
    }
}
.hover_item {

}

.btn2 {
    transition: all 0.25s ease;
}
.hover_item:hover {
    outline: 1px solid white;
    transition: outline 0.5s;
}
.margin_10 {
    margin-top: -2px !important;
}

.progress {
  background: rgba(255,255,255,0.1);
  justify-content: flex-start;
  border-radius: 100px;
  align-items: center;
  position: relative;
  padding: 0 5px;
  display: flex;
  height: 30px;
  width: 100%
}

.progress-value {
  animation: load2 1s normal forwards;
  box-shadow: 0 10px 40px -10px #fff;
  border-radius: 100px;
  background: #5471b9;
  height: 20px;
  width: 0;
}
.blacked-out {
color: #5471b9;
background-color: #5471b9; /* Makes text blend with background */
transition: background-color 0.3s;
cursor: pointer;
    font-size: 16px;
}

.blacked-out:hover {
background-color: transparent; /* Reveals text */
}

.leaderboard {
  width: 95%;
  max-width: 700px;
  border-radius: 8px;
  overflow: hidden;
}
.leaderboard-header {
  background: #5471B9FF;
  color: #fff;
  text-align: center;
  padding: 20px;
  font-size: 2em;
  font-weight: bold;
}
.leaderboard-list {
  list-style: none;
  margin: 0;
  padding: 0;
    width: 100%;
}
.leaderboard-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  transition: background 0.2s;
    cursor: pointer;
}
.leaderboard-item:hover {
  background: #252734;
}
.rank {
  width: 30px;
  text-align: center;
  font-weight: bold;
  color: #5471B9FF;
  flex-shrink: 0;
    font-size: 1.2em;
}
.username {
  flex-grow: 1;
  font-weight: 500;
    color: white;
    text-align: left;
    font-size: 1.4em;
}
@media only screen and (max-width: 501px) {
    .wagered { color: #bbbbbb; font-size: 1.4em; flex-grow: 1}
}
@media only screen and (min-width: 500px) {
    .wagered { color: #bbbbbb; font-size: 1.4em}
}
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 10%;
  margin: 0 10px;
  object-fit: cover;
  border: 1px solid gold;
  flex-shrink: 0;
}
.score {
  font-weight: bold;
  margin-left: 10px;
    color: green;
    min-width: 45px;
    font-size: 1.4em;
}
.leaderboard-item:last-child {
  border-bottom: none;
}


.hover_green {
    background-color: rgba(84, 113, 185, 0.5);
}
.hover_green:hover {
    background-color: rgba(113,250,140, 0.5);
    transition: background-color 0.25s;
}
 @-webkit-keyframes bg-scrolling-reverse {
	 100% {
		 background-position: 10px 10px;
	}
}
 @-moz-keyframes bg-scrolling-reverse {
	 100% {
		 background-position: 40px 40px;
	}
}
 @-o-keyframes bg-scrolling-reverse {
	 100% {
		 background-position: 40px 40px;
	}
}
 @keyframes bg-scrolling-reverse {
	 100% {
		 background-position: 80px 80px ;
	}
}
 @-webkit-keyframes bg-scrolling {
	 0% {
		 background-position: 40px 40px;
	}
}
 @-moz-keyframes bg-scrolling {
	 0% {
		 background-position: 40px 40px;
	}
}
 @-o-keyframes bg-scrolling {
	 0% {
		 background-position: 40px 40px;
	}
}
 @keyframes bg-scrolling {
	 0% {
		 background-position: 40px 40px;
	}
}
 #progressPath {
    transition: stroke-dashoffset 0.5s ease;
}
@keyframes spin22 {
    0% {
      stroke-dashoffset: 997.6906127929688;
    }
    100% {
      stroke-dashoffset: 0;
    }
  }
@keyframes spin222 {
    0% {
      stroke-dashoffset: 997.6906127929688;
    }
    100% {
      stroke-dashoffset: 0;
    }
  }
#spinnerPath {
    stroke: gold;
    stroke-width: 9;
    fill: none;
    stroke-linejoin: miter;
    stroke-linecap: round;
  stroke-dasharray: 0 997.6906127929688; /* total length of the path */
  stroke-dashoffset: 997.6906127929688;
  }
#spinnerPath2 {
    stroke: gold;
    stroke-width: 9;
    fill: none;
    stroke-linejoin: miter;
    stroke-linecap: round;
  stroke-dasharray: 0 997.6906127929688; /* total length of the path */
  stroke-dashoffset: 997.6906127929688;
  }
 .loader {
  width: 100px; /* control the size */
  aspect-ratio: 1;
  display: grid;
  -webkit-mask: conic-gradient(from 22deg, #0003,#000);
          mask: conic-gradient(from 22deg, #0003,#000);
  animation: load 1.5s steps(8) infinite;
}
.alt {
  animation: load 1.5s linear infinite;
}

.hover_b3 {
    color: grey;
}

.hover_b3:hover {
    color: #5471b9;
    cursor: pointer;
    user-select: none;
}

.loader,
.loader:before {
  --_g: linear-gradient(rgba(84, 113, 185, 0.7) 0 0) 50%; /* update the color here */
  background:
    var(--_g)/34% 8%  space no-repeat,
    var(--_g)/8%  34% no-repeat space;
}
.loader:before {
  content: "";
  transform: rotate(45deg);
}
@keyframes load {
  from {transform: rotate(0turn)}
  to   {transform: rotate(1turn)}
}


.loader_ody {
  margin:0;
  min-height:150px;
  display:grid;
  place-content:center;
  grid-auto-flow:column;
  gap:50px;
}

/* Main styles */
.body {
	 color: #5471b9;
	 font: 400 10.6666666667px exo, ubuntu, "segoe ui", helvetica, arial, sans-serif;
	 text-align: center;
	/* img size is 50x50 */
background-color: rgba(29, 31, 44, 1);


}

.canvasjs-chart-credit {
    display: none;
}

.body2 {
	 color: #5471b9;
	 font: 400 10.6666666667px exo, ubuntu, "segoe ui", helvetica, arial, sans-serif;
	 text-align: center;
	/* img size is 50x50 */
background-color: #212121;
  background-size: 40px 40px;
  background-image: radial-gradient(circle, rgba(117,150,229,0.7) 1px, rgba(0, 0, 0, 0) 1px);
	 -webkit-animation-timing-function: linear;
	 -moz-animation-timing-function: linear;
	 -o-animation-timing-function: linear;
	 animation-timing-function: linear;
}
.hover_g:hover div{ color: white }
.hover_g:hover { color: white }
.hover_g { color: #cccccc }
.hover_g:hover a{ color: white }
.hover_g a{ color: #cccccc }


.hover_g2:hover a{ color: darkgreen }
.hover_g2:hover { color: darkgreen }
.hover_g2 { color: rgba(84, 113, 185, 1) }

.hover_b:hover { color: rgba(84, 113, 185, 0.7); cursor: pointer; background-color: rgba(33, 33, 33,1) }
.hover_b { color: white }


.hover_b2:hover { color: rgba(84, 113, 185, 0.7); cursor: pointer; background-color: rgb(122, 122, 122)
}
.hover_b2 { color: white }

.hover_w:hover div { color: white }
.hover_w:hover { color: white }
.hover_w { color: grey }

.hover_w3:hover div { color: white }
.hover_w3:hover { color: white }
.hover_w3 { color: #9293A6FF }


.hover_w2:hover { color: grey }
.hover_w2 { color: white }


.btn_white {
    border: 1px solid #5471b9;
}
.btn_white:hover {
    border: 1px solid;
    transition: 0.5s;
}

.fade-in {
	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 0.5s;
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.body ::-webkit-scrollbar {
    height: 12px;
    width: 14px;
    background: transparent;
    z-index: 12;

}

/* Track */
.body ::-webkit-scrollbar-track {
}

/* Handle */
.body ::-webkit-scrollbar-thumb {
    width: 10px;
    background-color: #434953;
    border-radius: 10px;
    z-index: 12;
    border: 4px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    transition: background-color .32s ease-in-out;
    margin: 4px;
    min-height: 32px;
    min-width: 32px;
    cursor: pointer;
}


/* Handle on hover */
.body ::-webkit-scrollbar-thumb:hover {
}

html {
    overflow: scroll;
    overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 0;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: #FF0000;
}

@keyframes shine {
    0% {
        left: -10%;
    }
    100% {
        left: 110%
    }
}

.roll_game {animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);}

@keyframes mymove {
  from {right: 100px;}
  to {right: 7000px;}
}

.roll_game {
  width: 100px;
  font-weight: bold;
  position: relative;
  animation: mymove 3.5s;
  animation-fill-mode: forwards;
}


.hover_o {
    opacity: 1
}

.hover_o:hover {
    opacity: 0.8;
    transition: 0.25s
}

.hover_o2 {
    opacity: 0.95

}

.hover_o2:hover {
    opacity: 1;
    transition: 0.25s
}

.hover_o3 {
    opacity: 1; font-size: 30px;

}

.hover_o3:hover {
    opacity: 1;
    transition: 0.25s; font-size: 31px;
}

.hover_o4 {
    transform: scale(1);
    transition: transform 0.15s ease;
}

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

.hover_o5 {
    transform: scale(1);
    transition: transform 0.05s ease;
}

.hover_o5:hover {
    transform: scale(1.01);
}

.hover_o6 {
    opacity: 1;
    transition: opacity 0.05s ease;
}

.hover_o6:hover {
    opacity: 0.8;
}

@keyframes mymove2 {
  from {right: 0px;}
  to {right: 10000px;}
}

.roll_game2 {
  width: 100px;
  font-weight: bold;
  animation: mymove2 cubic-bezier(.18,.98,.67,1) 4.5s forwards;
    display: flex;
}
#roll_game_main::before {
content: "";
    position: absolute;
    bottom: 0px;
    left: 0px;
    pointer-events: none;
    background-image: linear-gradient(to left, rgba(255, 255, 255, 0), rgb(20, 23, 30) 75%);
    height: 100%;
    width: 15em;
    z-index: 10;
}

#roll_game_main::after {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: 0px;
    right: 0px;
    pointer-events: none;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(20, 23, 30) 75%);
    height: 100%;
    width: 15em;
}
.roll_game3 {animation-timing-function: cubic-bezier(1,1,0,0);}

@keyframes mymove3 {
  from {right: 75px;}
  to {right: 10000px;}
}

.roll_game3 {
  width: 75px;
  font-weight: bold;
  position: relative;
  animation: mymove3 20s forwards;
}


.image_hover div {
    display: none;
}

.image_hover:hover div{
    display: block;
}


.slidecontainer {
  width: 100%; justify-items: center; justify-content: center;
}

.slider {
  -webkit-appearance: none;
  height: 15px;
  border-radius: 5px;
  background: rgba(84, 113, 185, 0.2);
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
    max-width: 425px;
    width: 100%;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: rgba(113,250,140, 0.7);
  cursor: pointer;
}

tr {
 background-color: #c8c8c8;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: rgba(113,250,140, 0.7);
  cursor: pointer;
}


#coin {
  position: relative;
  margin: 0 auto;
  width: 300px;
  height: 300px;
  cursor: pointer;
}
#coin div {
  width: 100%;
  height: 100%;
  -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
          border-radius: 50%;
}
.side-a {
}
.side-b {
}

#coin {
  transition: -webkit-transform 1s ease-in;
  -webkit-transform-style: preserve-3d;
}
#coin div {
  position: absolute;
  -webkit-backface-visibility: hidden;
}
.side-a {
  z-index: 100;
}
.side-b {
  -webkit-transform: rotateY(-180deg);

}
#coin.heads {
  -webkit-animation: flipHeads 3s cubic-bezier(.2,.5,.52,1) forwards;
  -moz-animation: flipHeads 3s cubic-bezier(.2,.5,.52,1) forwards;
    -o-animation: flipHeads 3s cubic-bezier(.2,.5,.52,1) forwards;
       animation: flipHeads 3s cubic-bezier(.2,.5,.52,1) forwards;
}
#coin.tails {
  -webkit-animation: flipTails 3s cubic-bezier(.2,.5,.52,1) forwards;
  -moz-animation: flipTails 3s cubic-bezier(.2,.5,.52,1) forwards;
    -o-animation: flipTails 3s cubic-bezier(.2,.5,.52,1) forwards;
       animation: flipTails 3s cubic-bezier(.2,.5,.52,1) forwards;
}


@-webkit-keyframes flipHeads {
  from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
  to { -webkit-transform: rotateY(1620deg); -moz-transform: rotateY(1620deg); transform: rotateY(1620deg); }
}
@-webkit-keyframes flipTails {
  from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
  to { -webkit-transform: rotateY(1800deg); -moz-transform: rotateY(1800deg); transform: rotateY(1800deg); }
}

.custom-tooltip {
  --bs-tooltip-bg: rgba(84, 113, 185, 1);
  --bs-tooltip-color: white;
    cursor: pointer; user-select: none;
      pointer-events: none;

}

.custom-tooltip:hover {

}



.fredoka-1 {
  font-family: "Fredoka", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings:
    "wdth" 125;
}


.luckiest-guy-regular {
  font-family: "Luckiest Guy", cursive;
  font-weight: 400;
  font-style: normal;
}

.JackpotRing_spinner {
  -webkit-animation: JackpotRing_spinner 4s cubic-bezier(.2,.5,.52,1);
  -moz-animation: JackpotRing_spinner 4s cubic-bezier(.2,.5,.52,1) forwards;
    -o-animation: JackpotRing_spinner 4s cubic-bezier(.2,.5,.52,1) forwards;
       animation: JackpotRing_spinner 4s cubic-bezier(.2,.5,.52,1) forwards;
}

@-webkit-keyframes JackpotRing_spinner {
  from { -webkit-transform: rotate(0); -moz-transform: rotate(0); transform: rotate(0) ; }
  to { -webkit-transform: rotate(3600deg); -moz-transform: rotate(3600deg); transform: rotate(3600deg); }
}

.JackpotRing_spinner0 {
  -webkit-animation: JackpotRing_spinner0 4s cubic-bezier(.2,.5,.52,1);
  -moz-animation: JackpotRing_spinner0 4s cubic-bezier(.2,.5,.52,1) forwards;
    -o-animation: JackpotRing_spinner0 4s cubic-bezier(.2,.5,.52,1) forwards;
       animation: JackpotRing_spinner0 4s cubic-bezier(.2,.5,.52,1) forwards;
}

@-webkit-keyframes JackpotRing_spinner0 {
  from { -webkit-transform: rotate(0); -moz-transform: rotate(0); transform: rotate(0) ; }
  to { -webkit-transform: rotate(-3600deg); -moz-transform: rotate(-3600deg); transform: rotate(-3600deg); }
}


.JackpotRing_spinner01 {
  -webkit-animation: JackpotRing_spinner01 4s cubic-bezier(.2,.5,.52,1);
  -moz-animation: JackpotRing_spinner01 4s cubic-bezier(.2,.5,.52,1) forwards;
    -o-animation: JackpotRing_spinner01 4s cubic-bezier(.2,.5,.52,1) forwards;
       animation: JackpotRing_spinner01 4s cubic-bezier(.2,.5,.52,1) forwards;
}

@-webkit-keyframes JackpotRing_spinner01 {
  from { -webkit-transform: rotate(0); -moz-transform: rotate(0); transform: rotate(0) ; }
  to { -webkit-transform: rotate(-3600deg); -moz-transform: rotate(-3600deg); transform: rotate(-3600deg); }
}
.JackpotRing_spinner2 {
  -webkit-animation: JackpotRing_spinner2 6s cubic-bezier(.2,.5,.52,1);
  -moz-animation: JackpotRing_spinner2 6s cubic-bezier(.2,.5,.52,1) forwards;
    -o-animation: JackpotRing_spinner2 6s cubic-bezier(.2,.5,.52,1) forwards;
       animation: JackpotRing_spinner2 6s cubic-bezier(.2,.5,.52,1) forwards;
}

@-webkit-keyframes JackpotRing_spinner2 {
  from { -webkit-transform: rotate(0); -moz-transform: rotate(0); transform: rotate(0) ; }
  to { -webkit-transform: rotate(-3600deg); -moz-transform: rotate(-3600deg); transform: rotate(-3600deg); }
}


.JackpotRing_spinner4 {
  -webkit-animation: JackpotRing_spinner4 2s cubic-bezier(.2,.5,.52,1);
  -moz-animation: JackpotRing_spinner4 2s cubic-bezier(.2,.5,.52,1) forwards;
    -o-animation: JackpotRing_spinner4 2s cubic-bezier(.2,.5,.52,1) forwards;
       animation: JackpotRing_spinner4 2s cubic-bezier(.2,.5,.52,1) forwards;
}

@-webkit-keyframes JackpotRing_spinner4 {
  from { -webkit-transform: rotate(0); -moz-transform: rotate(0); transform: rotate(0) ; }
  to { -webkit-transform: rotate(-720deg); -moz-transform: rotate(-720deg); transform: rotate(-720deg); }
}


.JackpotRing_spinner6 {
  -webkit-animation: JackpotRing_spinner6 4s cubic-bezier(.2,.5,.52,1);
  -moz-animation: JackpotRing_spinner6 4s cubic-bezier(.2,.5,.52,1) forwards;
    -o-animation: JackpotRing_spinner6 4s cubic-bezier(.2,.5,.52,1) forwards;
       animation: JackpotRing_spinner6 4s cubic-bezier(.2,.5,.52,1) forwards;
}

@-webkit-keyframes JackpotRing_spinner6 {
  from { -webkit-transform: rotate(0); -moz-transform: rotate(0); transform: rotate(0) ; }
  to { -webkit-transform: rotate(3600deg); -moz-transform: rotate(3600deg); transform: rotate(3600deg); }
}

.JackpotRing_spinner7 {
  -webkit-animation: JackpotRing_spinner7 6s cubic-bezier(.2,.5,.52,1);
  -moz-animation: JackpotRing_spinner7 6s cubic-bezier(.2,.5,.52,1) forwards;
    -o-animation: JackpotRing_spinner7 6s cubic-bezier(.2,.5,.52,1) forwards;
       animation: JackpotRing_spinner7 6s cubic-bezier(.2,.5,.52,1) forwards;
}

@-webkit-keyframes JackpotRing_spinner7 {
  from { -webkit-transform: rotate(0); -moz-transform: rotate(0); transform: rotate(0) ; }
  to { -webkit-transform: rotate(-3600deg); -moz-transform: rotate(-3600deg); transform: rotate(-3600deg); }
}

.UpgraderSpinner1 {
  -webkit-animation: UpgraderSpinner1 3s cubic-bezier(.2,.47,.33,1);
  -moz-animation: UpgraderSpinner1 3s cubic-bezier(.2,.47,.33,1) forwards;
    -o-animation: UpgraderSpinner1 3s cubic-bezier(.2,.47,.33,1) forwards;
       animation: UpgraderSpinner1 3s cubic-bezier(.2,.47,.33,1) forwards;
}

@-webkit-keyframes UpgraderSpinner1 {
  from { -webkit-transform: rotate(0); -moz-transform: rotate(0); transform: rotate(0) ; }
  to { -webkit-transform: rotate(1080deg); -moz-transform: rotate(1080deg); transform: rotate(1080deg); }
}

.press-start-2p-regular {
  font-family: "Press Start 2P", system-ui;
  font-weight: 400;
  font-style: normal;
}

.glow_pending {
    animation: glow123 1s ease-in-out infinite alternate;
}

@keyframes glow123 {
  from {
    box-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #0073e6, 0 0 5px #0073e6, 0 0 5px #0073e6, 0 0 5px #0073e6, 0 0 5px #0073e6;
  }
  to {
    box-shadow: 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #0073e6, 0 0 7px #0073e6, 0 0 7px #0073e6, 0 0 7px #0073e6, 0 0 7px #0073e6;
  }
}

.hover_blue_fill:hover  path{
 fill: #5471B9E5;
    stroke: #5471B9E5
}

.hover_gray_fill:hover path {
    fill: gray;
    stroke: gray;
}

@keyframes mymove4 {
  from {right: 0px}
  to {right: 10000px;}
}

.roll_game4 {
    font-weight: bold;
    animation: mymove4  linear 10s infinite;
    display: flex;
}

#roll_level_main::before {
content: "";
    position: absolute;
    bottom: 0px;
    left: 0px;
    pointer-events: none;
    background-image: linear-gradient(to left, rgba(255, 255, 255, 0), rgb(20, 23, 30) 75%);
    height: 100%;
    width: 15em;
    z-index: 10;
}

#roll_level_main::after {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: 0px;
    right: 0px;
    pointer-events: none;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(20, 23, 30) 75%);
    height: 100%;
    width: 15em;
}







#roll_level_main2::before {
content: "";
    position: absolute;
    bottom: 0px;
    left: 0px;
    pointer-events: none;
    background-image: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(29, 31, 44, 1) 75%);
    height: 100%;
    width: 25%;
    z-index: 10;
}

#roll_level_main2::after {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: 0px;
    right: 0px;
    pointer-events: none;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(29, 31, 44, 1) 75%);
    height: 100%;
    width: 25%;
}


#roll_level_main2_::before {
content: "";
    position: absolute;
    bottom: 0px;
    left: 0px;
    pointer-events: none;
    background-image: linear-gradient(to left, rgba(255, 255, 255, 0), rgb(45 47 64 / 1) 75%);
    height: 100%;
    width: 25%;
    z-index: 10;
}

#roll_level_main2_::after {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: 0px;
    right: 0px;
    pointer-events: none;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(45 47 64 / 1) 75%);
    height: 100%;
    width: 25%;
}



@keyframes mymove5 {
  from { transform: translateX(0); }
  to { transform: translateX(-6750px); }
}

.roll_roulette {
    position: relative; /* needed for right to work */
    font-weight: bold;
    display: flex;
    animation: mymove5 7s cubic-bezier(.2, .47, .33, 1) forwards;
}
@keyframes mymove5-reverse {
  from { transform: translateX(0); }
  to { transform: translateX(-6750px); }
}




.transformed {
  opacity: 1;
  transform: scale(1.1) rotate(0deg);
  transition: transform 0.3s ease;;
}
.transformed2 {
  opacity: 0.5;
  transform: scale(1) rotate(0deg);
  transition: transform 0.3s ease;
}



.roulette_bets::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 25%;
    pointer-events: none;
    z-index: 10;
    background-image: linear-gradient(to top, rgba(29, 31, 44, 1), rgba(255, 255, 255, 0) 75%);
}


.play-regular {
  font-family: "Play", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.play-bold {
  font-family: "Play", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.anton-regular {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.bebas-neue-regular {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
}


.glow-point.green {
            background: #03e703;
}

.glow-point.green::before {
    background: #03e703;
}

@keyframes glow-green {
    0%, 100% {
        box-shadow: 0 0 10px #03e703,
                    0 0 20px #03e703,
                    0 0 30px #03e703;
    }
    50% {
        box-shadow: 0 0 20px #03e703,
                    0 0 40px #03e703,
                    0 0 60px #03e703;
    }
}

.glow-point.green::before {
    animation: glow-green 2s ease-in-out infinite;
}

.live-indicator {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 12px 15px;
            border-radius: 25px;
        }

        .glow-point {
            position: relative;
            width: 7px;
            height: 7px;
            background: #ff0000;
            border-radius: 50%;
            animation: pulse 2s ease-in-out infinite;
        }

        .glow-point::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
            background: #ff0000;
            border-radius: 50%;
            animation: glow 2s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% {
                transform: scale(1);
                opacity: 1;
            }
            50% {
                transform: scale(0.9);
                opacity: 0.8;
            }
        }

        @keyframes glow {
            0%, 100% {
                box-shadow: 0 0 10px #ff0000,
                            0 0 20px #ff0000,
                            0 0 30px #ff0000,
                            0 0 40px #ff0000;
            }
            50% {
                box-shadow: 0 0 20px #ff0000,
                            0 0 30px #ff0000,
                            0 0 40px #ff0000,
                            0 0 60px #ff0000,
                            0 0 80px #ff0000;
            }
        }

        .live-text {
            color: #ff0000;
            font-size: 12px;
            letter-spacing: 1px;
        }




.intro,
.intro a{
  color:#fff;
  font-family:
}
/* customizable snowflake styling */
.snowflake {
  color: #fff;
  font-size: 1em;
  font-family: Arial;
  text-shadow: 0 0 1px #000;
}

@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%{-webkit-transform:translateX(0px);transform:translateX(0px)}50%{-webkit-transform:translateX(30px);transform:translateX(30px)}100%{-webkit-transform:translateX(0px);transform:translateX(0px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%{transform:translateX(0px)}50%{transform:translateX(30px)}100%{transform:translateX(0px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}