.hc-luckywheel ul,
.hc-luckywheel li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.luckywheel-wrapper {
  position: absolute;
  top: 60.78px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(100% - 60.78px);
}

.hc-luckywheel {
  position: relative;
  width: min(80vw, 80vh);
  /*Change this when change size*/
  /* 500px */
  height: min(80vw, 80vh);
  /*Change this when change size*/
  /* 500px */
  border-radius: 50%;
  /* box-shadow: 0 2px 3px #333, 0 0 2px #000; */
  box-shadow: -5px 0px 10px 5px rgb(0 0 0 / 50%);
  /* position: fixed; */
  /* top: 50%; */
  /* left: 50%; */
  /* margin-top: -250px; */
  /* margin-left: -250px; */
  /* modification */
  /* transform: translate(-50%, -50%) rotate(-90deg); */
  transform: rotate(-90deg);
  /* box-sizing: content-box; */
  overflow: hidden;
}

.hc-luckywheel::after {
  --border-color: #c5190a;
  content: "";
  display: block;
  position: relative;
  height: 100%;
  border: 14px solid var(--border-color);
  border-radius: 50%;
  box-shadow: inset 0 0 3px 2px rgb(0 0 0 / 60%);
  z-index: 1;
}

.hc-luckywheel-container {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 1;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  background-clip: padding-box;
  background-color: #216cc0;
  /* rotating duration and animation*/
  /* -webkit-transition: transform 6s ease-out;
  transition: transform 6s ease-out; */
  -webkit-transition: transform var(--transition-duration) cubic-bezier(0, .75, 0, 1);
  transition: transform var(--transition-duration) cubic-bezier(0, .75, 0, 1);
  --transition-duration: 6s;
}

.hc-luckywheel-container canvas {
  width: inherit;
  height: inherit;
  border-radius: 50%;
}

.hc-luckywheel-list {
  position: absolute;
  left: 0;
  top: 0;
  width: inherit;
  height: inherit;
  z-index: 2;
}

/* 
.hc-luckywheel-list::after {
  content: "";
  display: block;
  position: relative;
  height: 100%;
  box-shadow: inset 0 0 5px 1px rgb(0 0 0 / 75%);
  border-radius: 50%;
} */

.hc-luckywheel-item {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  color: #232323;
  font-weight: bold;
  /* text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6); */
}

.hc-luckywheel-item span {
  position: relative;
  display: block;
  padding-top: 20px;
  /* width: 50px; */
  margin: 0 auto;
  text-align: center;
  -webkit-transform-origin: 50% min(40vw, 40vh);
  /*Change this when change size*/
  /* 50% 250px */
  /* second part is half of hc-luckywheel */
  -ms-transform-origin: 50% min(40vw, 40vh);
  /*Change this when change size*/
  /* 50% 250px */
  /* second part is half of hc-luckywheel */
  transform-origin: 50% min(40vw, 40vh);
  /*Change this when change size*/
  /* 50% 250px */
  /* second part is half of hc-luckywheel */
}

.hc-luckywheel-item img {
  position: relative;
  top: -20px;
  left: 0px;
  width: 100px;
  /*Change this when change size*/
  height: 100px;
  /*Change this when change size*/
}

.hc-luckywheel .hc-luckywheel-btn {
  position: absolute;
  left: 50%;
  /*Change this when change size*/
  /* 210px */
  top: 50%;
  /*Change this when change size*/
  /* 210px */
  z-index: 3;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border-bottom: none;
  color: #f4e9cc;
  background-color: #e44025;
  line-height: 80px;
  text-align: center;
  font-size: 20px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
  /* box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6); */
  filter: drop-shadow(0 0px 4px rgba(0, 0, 0, 0.6));
  text-decoration: none;
  transform: translate(-50%, -50%);
}

.hc-luckywheel .hc-luckywheel-btn::after {
  position: absolute;
  display: block;
  content: "";
  overflow: hidden;
  /* left: 10px;
  top: -45px;
  width: 0;
  height: 0;
  border-width: 30px;
  border-style: solid;
  border-color: transparent;
  border-bottom-color: #e44025; */
  width: 100%;
  height: 100%;
  border-width: 0;
  border-style: none;
  left: 0;
  top: -85%;
  background-color: #e44025;
  clip-path: polygon(50% 65%, 15% 100%, 85% 100%);
}

.hc-luckywheel .hc-luckywheel-btn.disabled {
  pointer-events: none;
  background: #b07a7b;
  color: #ccc;
}

.hc-luckywheel .hc-luckywheel-btn.disabled::after {
  background-color: #b07a7b;
  border-bottom-color: #b07a7b;
}

.hc-luckywheel .hc-luckywheel-btn:hover {
  filter: drop-shadow(0 0px 6px rgba(0, 0, 0, 0.6));
  text-decoration: none;
  color: #f4e9cc;
}

.hc-luckywheel .hc-luckywheel-btn:active {
  filter: drop-shadow(0 0px 1px rgba(0, 0, 0, 0.6));
  border-bottom-color: transparent;
}

.hc-luckywheel .hc-luckywheel-btn:focus {
  outline: none;
}

/* body{ margin:0; padding:0; height:100vh; width:100%; } */

/* .bg {
  background-image: url('../images/bg.png');
} */

/* custom styles */
.hc-luckywheel-item span {
  padding-top: min(40vw, 40vh);
  /* 245px */
  /* half of hc-luckywheel size */
}

.hc-luckywheel-btn span {
  user-select: none;
  display: block;
  transform: rotate(90deg);
  text-transform: uppercase;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  position: relative;
  z-index: 1;
}

/* text list  */
.curve {
  transform: rotateZ(90deg);
  text-align: left;
  font-size: 1em;
  padding-left: min(2vw, 2vh);
  transition: 1s;
  user-select: none;
}

.fs-2vh {
  font-size: min(2vh, 2vw);
}

.fs-1\.2vh {
  font-size: min(1.2vh, 1.2vw);
}

.curve.empty {
  opacity: 0.3;
}

p.curve::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #000000;
  height: 3px;
  width: 0;
  left: 0;
  transition: .5s;
}

p.curve.empty::after {
  width: 50%;
}

/* confetti */
#confetti {
  position: fixed;
  top: 0;
  left: 0;
}