.lucky-draw-page{
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	
	height: 100dvh;
  overflow: hidden;
}

.roulette-section{
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	perspective: 1000px;  
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	
	position: absolute;
	top: 55%;
	left: 50%;
	transform: translate(-50%,-50%);
	padding: 4rem;
}
.roulette-section .box{
	width: 35rem;
	height: 6.5rem;
	background: lightgray;
	border-radius: 10rem;
	/* border: 1px solid red; */
}
.roulette-view{
	position: relative;
	height: 18.75rem;
	width: 35rem;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}
.roulette{
	position: absolute;
	transform-style: preserve-3d;
	/* transform: rotateY(58deg); */
}
.roulette .wheel{
	margin: 0 auto;
	height: 121px;
	width: 600px;
	float: left;
	
	transform-style: preserve-3d;
}
.roulette .wheel .slot{
	padding: 1rem 2rem;
	height: 111px;
	width: 600px;
	position: absolute;
	box-sizing: border-box;
	/* border: solid 1px black; */
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}
.roulette .wheel .slot p:first-child{
	font-size: 2rem;
}
.roulette .wheel .slot p:not(:first-child){
	font-size: 1.4rem;
	color: grey;
}
.spin-btn {
	margin: 5rem auto 0;
	width: 5rem;
	border: solid 1px white;
}
.name-btn{
  width: 11rem;
  border: solid 1px white;
  position: absolute;
  right: 5%;
  bottom: 5%;
}
.luckylist {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: white;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}
.luckylist .closebtn {
  position: absolute;
  top: 3%;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
.luckylist .namelist:first-child{
  margin-top: 2.75%;
  margin-left: 2rem;
}
.luckylist .namelist{
  margin-top: 3.5%;
  margin-left: 2rem;
  border-bottom: 1px solid #9e9e9e;
  padding-bottom:  1em;
}
.luckylist .luckyindex{
  background: var(--theme-color);
  padding: 0px 22px;
  color: white;
}
.luckylist .luckyname{
  margin-left: 1rem;
}
.lucky-draw-page .modal{
  top: 50% !important;
  left: 50%;
  transform: translate(-50%,-50%)!important;
  right: auto !important;
  width: 28%;
  border-radius: var(--form-border-radius);
}
.lucky-draw-page .modal .modal-content{
  padding: 13px;
  margin: 1.25rem;
  text-align: center;
}
.lucky-draw-page .modal .modal-footer {
  padding: 1em 0;
  text-align: center;
  height: fit-content;
}
@keyframes firework {
  0% { transform: translate(var(--x), var(--initialY)); width: var(--initialSize); opacity: 1; }
  50% { width: 0.5vmin; opacity: 1; }
  100% { width: var(--finalSize); opacity: 0; }
}
.firework,
.firework::before,
.firework::after
{
  --initialSize: 0.5vmin;
  --finalSize: 45vmin;
  --particleSize: 500vmin;
  --color1: yellow;
  --color2: khaki;
  --color3: white;
  --color4: lime;
  --color5: gold;
  --color6: mediumseagreen;
  --y: -1vmin;
  --x: -50%;
  --initialY: 60vmin;
  content: "";
  animation: firework 2.75s infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, var(--y));
  width: var(--initialSize);
  aspect-ratio: 1;
  background: 
	/*
	radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 0% 0%,
	radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 100% 0%,
	radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 100% 100%,
	radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 0% 100%,
	*/
	
	radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 50% 0%,
	radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 100% 50%,
	radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 50% 100%,
	radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 0% 50%,
	
	/* bottom right */
	radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 80% 90%,
	radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 95% 90%,
	radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 90% 70%,
	radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 100% 60%,
	radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 55% 80%,
	radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 70% 77%,
	
	/* bottom left */
	radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 22% 90%,
	radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 45% 90%,
	radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 33% 70%,
	radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 10% 60%,
	radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 31% 80%,
	radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 28% 77%,
	radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 13% 72%,
	
	/* top left */
	radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 80% 10%,
	radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 95% 14%,
	radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 90% 23%,
	radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 100% 43%,
	radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 85% 27%,
	radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 77% 37%,
	radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 60% 7%,
	
	/* top right */
	radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 22% 14%,
	radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 45% 20%,
	radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 33% 34%,
	radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 10% 29%,
	radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 31% 37%,
	radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 28% 7%,
	radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 13% 42%
	;
  background-size: var(--initialSize) var(--initialSize);
  background-repeat: no-repeat;
}
.firework::before {
  --x: -50%;
  --y: -50%;
  --initialY: -50%;
/*   transform: translate(-20vmin, -2vmin) rotate(40deg) scale(1.3) rotateY(40deg); */
  transform: translate(-50%, -50%) rotate(40deg) scale(1.3) rotateY(40deg);
/*   animation: fireworkPseudo 2s infinite; */
}
.firework::after {
  --x: -50%;
  --y: -50%;
  --initialY: -50%;
/*   transform: translate(44vmin, -50%) rotate(170deg) scale(1.15) rotateY(-30deg); */
  transform: translate(-50%, -50%) rotate(170deg) scale(1.15) rotateY(-30deg);
/*   animation: fireworkPseudo 2s infinite; */
}
.firework:nth-child(2) {
  --x: 30vmin;
}
.firework:nth-child(2),
.firework:nth-child(2)::before,
.firework:nth-child(2)::after {
  --color1: pink;
  --color2: violet;
  --color3: fuchsia;
  --color4: orchid;
  --color5: plum;
  --color6: lavender;  
  --finalSize: 40vmin;
  left: 30%;
  top: 60%;
  animation-delay: -0.8s;
}
.firework:nth-child(3) {
  --x: 120vmin;
  --y: -50svmin;
}
.firework:nth-child(3),
.firework:nth-child(3)::before,
.firework:nth-child(3)::after {
  --color1: cyan;
  --color2: lightcyan;
  --color3: lightblue;
  --color4: PaleTurquoise;
  --color5: SkyBlue;
  --color6: lavender;
  --finalSize: 35vmin;
  left: 75%;
  top: 60%;
  animation-delay: -0.6s;
}
.firework:nth-child(4) {
  --x: 5vmin;
  --y: -50svmin;
}
.firework:nth-child(4),
.firework:nth-child(4)::before,
.firework:nth-child(4)::after {
 --color1: pink;
   --color2: violet;
   --color3: fuchsia;
   --color4: orchid;
   --color5: plum;
   --color6: lavender;  
   --finalSize: 40vmin;
  left: 5%;
  top: 60%;
  animation-delay: -0.8s;
}
.firework:nth-child(5) {
  --x: 5vmin;
  --y: -10svmin;
}
.firework:nth-child(5),
.firework:nth-child(5)::before,
.firework:nth-child(5)::after {
 --color1: darkcyan;
   --color2: darkblue;
   --color3: blue;
   --color4: aquamarine;
   --color5: cyan;
   --color6: azure;  
   --finalSize: 40vmin;
  left: 5%;
  top: 30%;
  animation-delay: -0.6s;
}
.firework:nth-child(6) {
  --x: 125vmin;
  --y: -10svmin;
}
.firework:nth-child(6),
.firework:nth-child(6)::before,
.firework:nth-child(6)::after {
 --color1: indianRed;
   --color2: lightcoral;
   --color3: darksalmon;
   --color4: salmon;
   --color5: lightsalmon;
   --color6: maroon;  
   --finalSize: 40vmin;
  left: 80%;
  top: 30%;
  animation-delay: -0.8s;
}
.firework:nth-child(7) {
  --x: 50vmin;
  --y: -85svmin;
}
.firework:nth-child(7),
.firework:nth-child(7)::before,
.firework:nth-child(7)::after {
 --color1: green;
   --color2: greenyellow;
   --color3: lawngreen;
   --color4: lightgreen;
   --color5: lime;
   --color6: limegreen;
   --finalSize: 150vmin;
  left: -50%;
  top: 70%;
  animation-delay: -0.9s;
}
.firework:nth-child(8) {
  --x: 200vmin;
  --y: -85svmin;
}
.firework:nth-child(8),
.firework:nth-child(8)::before,
.firework:nth-child(8)::after {
 --color1: orange;
   --color2: orangered;
   --color3: sandybrown;
   --color4: chocolate;
   --color5: yellow;
   --color6: gold;  
   --finalSize: 150vmin;
  left: 100%;
  top: 70%;
  animation-delay: -0.9s;
}