body, html {
  overflow-x: hidden;
  width: 100%;
}

.roulette_overflow{
	overflow: hidden;
	width: 600px;  
               /*width: 1200px;       for bakground width 1200px*/
	margin: auto;
	margin-top: 10px;
}


#roulette_area:before {
  content: "";
  position: absolute;
  background: #ffffff;
  height: 100%;
  width: 4px;
  margin: 0 auto;
  left: 0;
  right: 0;
}

.timer_bar{
	background-color: #424242;
	border-style: groove;
	border-color: grey;
	border-width: 2px;
	margin-bottom: 10px;
}

.timer {
  width: 0%;
  height: 25px;
  background-color: #c9302c;
  transition: opacity .2s linear, width 5s linear; 
}

.timer:after {
  display: block;
  content: '';
  clear: both;
}

#out {
  width: 100%;
  height: 120px;
  line-height: 120px;
  color: white;
  font-size: 60px;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  transition: opacity .4s ease;
  transform: scale(0) rotate(0deg);
  margin-bottom: 20px;
}


@keyframes out{
  0%{transform: scale(0) rotate(0deg);}
  70%{transform: scale(1.1) rotate(2deg);}
  100%{transform: scale(1) rotate(0deg);}
}


.button{
	margin-top: 50px;
  background-color: #c2fbd7;
  border-radius: 100px;
  box-shadow: rgba(44, 187, 99, .2) 0 -25px 18px -14px inset;
  color: green;
  cursor: pointer;
  display: inline-block;
  padding: 7px 20px;
  text-align: center;
  text-decoration: none;
  transition: all 250ms;
  border: 0;
  font-size: 16px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button:hover {
  box-shadow: rgba(44,187,99,.35) 0 -25px 18px -14px inset;
  transform: scale(1.05) rotate(-1deg);
}

.btn{
  margin-left: 3px;
  margin-right: 3px;
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  color: #FFF;
  border-bottom: solid 4px #627295;
  border-radius: 3px;
}

.btn:active {
  -ms-transform: translateY(4px);
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  border-bottom: none;
}

.btn-green{
  background-color: green;
}

.btn-red{
  background-color: red;
}

.btn-black{
  background-color: black;
}

#cheat{
	margin-top: 20px;
  margin-bottom: 150px;
}

.spin_animation {
    -webkit-transition: all 6000ms cubic-bezier(0.34, 0.87, 0.52, 1); 
    -moz-transition: all 6000ms cubic-bezier(0.34, 0.87, 0.52, 1); 
    -o-transition: all 6000ms cubic-bezier(0.34, 0.87, 0.52, 1); 
    transition: all 6000ms cubic-bezier(0.34, 0.87, 0.52, 1);

	  -webkit-transition-timing-function: cubic-bezier(0.34, 0.87, 0.52, 1); 
    -moz-transition-timing-function: cubic-bezier(0.34, 0.87, 0.52, 1); 
    -o-transition-timing-function: cubic-bezier(0.34, 0.87, 0.52, 1); 
    transition-timing-function: cubic-bezier(0.34, 0.87, 0.52, 1);
}

.spin_animation_back{
  transition: all 700ms cubic-bezier(0.34, 0.87, 0.52, 1);
  transition-timing-function: cubic-bezier(0.34, 0.87, 0.52, 1);
}


@media only screen and (max-width: 450px) {
  .roulette_overflow {
    transform: translateX(-120px);
  }
}



.contentmodal {
    width: 100%;
    /*max-width: 550px;*/
    height: auto;
    z-index: 2;
    position: relative;
    margin: 20px auto;
    margin-top: 30px;
    background: linear-gradient(179deg, #36353D, #201D24);
    border-radius: 20px;
    padding: 10px;
    margin-inline: auto;
    transition: all .3s;
    box-shadow: 0 12px 30px #0f0f19f0;
    padding-bottom: 25px;
}


.modal-header {
    border-bottom: none;
}
.modal-footer {
    border-top: none;
}

.modal-body {
    margin: auto;
     font-size: larger;
}

.icon-c {
    color: #ffffff;
}




/* Class สำหรับ animation */
.slide-down-animation {
  animation: slideDown 0.3s ease-out forwards;
  opacity: 0;
}

/* Class สำหรับ container */
.bets-container {
  overflow: hidden;
}

/* Keyframes */
@keyframes slideDown {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Class สำหรับแต่ละรายการเดิมพัน */
.bet-item {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid black;
}

/* Class สำหรับส่วนอื่นๆ */
.rank-badge {
  height: 20px;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0 0.375rem;
  border-radius: 4px;
  background-color: #e0e0e0;
  margin-right: 0.5rem;
}

.username {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.amount {
/*  color: #4CAF50;
  font-family: monospace;*/
}


.t-w {
    color:white !important;
    
}




#image-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  opacity: 0;
  animation: fadeInOverlay 0.5s forwards;
}

.overlay-image {
  max-width: 90%;
  max-height: 90vh;
  object-fit: contain;
  cursor: pointer;
  animation: scaleUp 0.3s ease forwards;
}

/* Fade-in background */
@keyframes fadeInOverlay {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ขยายจากเล็กไปใหญ่ */
@keyframes scaleUp {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}



.anticon-sync-rotate {
  animation: spin 1s infinite ease-in-out;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}