/* CSS Document */
:root {
  --gutter: 4px;
  --input-dark: rgba(39, 39, 39, 1);
  --input-border-dark: rgba(85, 85, 85, 1);
  --Black: rgba(0, 0, 0, 1);
  --White: rgb(255, 255, 255, 1);
  --Transparent: rgba(0, 0, 0, 0);
  --Primary: #ffdd00;
  --Primary-clear: rgba(255, 221, 0, 0);
  --Interactive-accent: #8599b6;
  --Interactive-accent90: rgba(var(--Interactive-accent), 0.9);
  --Interactive-accent80: rgba(var(--Interactive-accent), 0.8);
  --Interactive-accent70: rgba(var(--Interactive-accent), 0.7);
  --Interactive-accent60: rgba(var(--Interactive-accent), 0.6);
  --Interactive-accent50: rgba(var(--Interactive-accent), 0.5);
  --Interactive-accent40: rgba(var(--Interactive-accent), 0.4);
  --Interactive-accent30: rgba(var(--Interactive-accent), 0.3);
  --Interactive-accent20: rgba(var(--Interactive-accent), 0.2);
  --Interactive-accent10: rgba(var(--Interactive-accent), 0.1);
  --systemPrimary: var(--Primary);
  --systemRed: #ff0034;
  --systemOrange: #ff9f0a;
  --systemYellow: #ffd60a;
  --systemGreen: #30d158;
  --systemBlue: #0a84ff;
  --systemMint: #63e6e2;
  --systemTeal: #40c8e0;
  --systemCyan: #64d2ff;
  --systemPurple: #bf5af2;
  --systemBrown: #a2845e;
  --systemPink: #ff375f;
  --systemClear: var(--Transparent);
  --systemBlack: var(--Black);
  --systemGray: #8e8e93;
  --systemGray2: #636366;
  --systemGray3: #48484a;
  --systemGray4: #3a3a3c;
  --systemGray5: #2c2c2e;
  --systemGray6: #1c1c1e;
  --systemWhite: var(--White);
  --tintedPrimary: rgba(120, 120, 128, 0.6);
  --tintedSecondary: rgba(120, 120, 128, 0.3);
  --tintedTertialy: rgba(120, 120, 128, 0.25);
  --tintedQuarternary: rgba(120, 120, 128, 0.18);
  --separator: #2C2C2E;
  --opaqueSeparator: #30d158;
  --link: var(--systemPrimary);
  --separatorDefault: #30d158;
  --systemFill: var(--systemWhite);
  --primaryFill: #30D158;
  --secondarySystemFill: #30D158;
  --tertiarySystemFill: #30D158;
  --quaternarySystemFill: #30D158;
  --systemGroupedBackground: #1A1A1A;
  --secondarySystemGroupedBackground: #2C2C2E;
  --tertiarySystemGroupedBackground: #57FF44;
  --systemBackground: #000000;
  --secondarySystemBackground: #1C1C1E;
  --tertiarySystemBackground: #30D158;
  --border-large: 50px;
  --borderTile: 50px;
  --button-radius: 50px;
  --label-Dark: #FFFFFF;
  --label-Light: #8E8E93;
  --label-Primary: var(--systemWhite);
  --label-Secondary: #6C6C6C;
  --label-Tertiary: #30D158;
  --label-Quaternary: #30D158;
  --label-Placeholder: #30D158;
  --label-always-white: var(--systemWhite);
  --label-always-black: var(--systemBlack);
  --label-reversed-color: var(--systemWhite);
  --labelButton-primary: #8E8E93;
  --Button-Main-Fill: var(--systemPrimary);
  --Button-Tinted-Fill: #30D158;
  --Button-Main-Outline: #30D158;
  --Button-Primary: var(--systemWhite);
  --Button-Primary-Fill: var(--systemBlack);
  --Button-Primary-Outline: #30D158;
  --Button-Gray-Fill: #30D158;
  --Button-Disable-Fill: var(--systemGray3);
  --Button-Disable-Outline: #30D158;
  --Label-Disable: var(--systemGray5);
  --button-always-light: #30D158;
  --button-always-dark: #30D158;
  --Button-Hover-Fill: #30D158;
  --Button-Active-Fill: #30D158;
  --tile-button-text:var(--systemBlack);
  --tile-button: var(--systemGray5);
  --tile-border-color: var(--tertiarySystemGroupedBackground);
  --tile-background-color: var(--systemGroupedBackground);
  --Bend-full: 100px;
  --Bend-xxLarge: 30px;
  --Bend-xLarge: 20px;
  --Bend-large: 16px;
  --Bend-medium: 12px;
  --Bend-small: 8px;
  --Bend-xsmall: 4px;
  --Bend: 8px;
  --Tile-border-radius: 10px;
  --Button-radius: 8px;
  --Gutter-xxLarge: 20px;
  --Gutter-xLarge: 16px;
  --Gutter-large: 12px;
  --Gutter-medium: 8px;
  --Gutter-small: 6px;
  --Gutter-xSmall: 4px;
  --Padding-left-Padding-right: 8px;
  --Padding-top-Padding-bottom: 8px;
  --Large-Title: 34px;
  --Title-1: 28px;
  --Title-2: 22px;
  --Title-3: 20px;
  --Headline: 17px;
  --Body: 17px;
  --Subheadline: 15px;
  --Callout: 16px;
  --Footnote: 13px;
  --Caption: 12px;
  --Smaller: 11px;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto, helvetica neue, Arial, noto sans, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
  font-size: var(--Body);
  font-weight: 400;
  color: var(--label-Primary);
  padding: 0;
  margin: 0;
  background-color: var(--systemBackground);
  max-width: 990px;
  margin: auto;
}

.mgb-s {
  margin-bottom: calc(var(--gutter) * 2);
}

.mgb-m {
  margin-bottom: calc(var(--gutter) * 4);
}

.mgb-l {
  margin-bottom: calc(var(--gutter) * 6);
}

.mgb-xl {
  margin-bottom: calc(var(--gutter) * 8);
}

.mglr-m {
  margin-left: calc(var(--gutter) * 4);
  margin-right: calc(var(--gutter) * 4);
}

.mglr-s {
  margin-left: calc(var(--gutter) * 2);
  margin-right: calc(var(--gutter) * 2);
}

.mglr-auto {
  margin-left: auto;
  margin-right: auto;
}

.mglr-mobile-16 {
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 600px) {
  .mglr-mobile-16 {
    margin-left: calc(var(--gutter) * 4);
    margin-right: calc(var(--gutter) * 4);
  }
}

/* Web CSS */
.sectiontitle {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.sectiontitle.main {
  font-size: var(--Title-1);
  font-weight: bold;
  text-align: center;
}
.sectiontitle.title {
  font-size: var(--Title-2);
  font-weight: bold;
  text-align: center;
}
.sectiontitle.subtitle {
  font-size: var(--Body);
  text-align: center;
}

.flexcenter {
  display: flex;
  justify-content: center;
}

.clientselect {
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow-x: auto;
  white-space: nowrap;
  -ms-overflow-style: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  gap: var(--Gutter-medium);
  flex-wrap: wrap;
  padding: 0px;
}
@media screen and (max-width: 600px) {
  .clientselect {
    flex-wrap: nowrap;
    padding: 0px 16px;
  }
}
.clientselect .copobtn {
  padding: 0px calc(var(--Padding-left-Padding-right) * 2);
}

.slot-v {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 24px;
  grid-row-gap: 48px;
}
@media screen and (max-width: 600px) {
  .slot-v {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 8px;
    grid-row-gap: 16px;
  }
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  border-radius: var(--Bend-medium);
  flex: 1;
  flex-grow: 1;
  background: var(--systemGroupedBackground);
}
.card .cardbox {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
}
.card .cardbox .cardpic img {
  width: 100%;
  max-width: 100%;
  border-radius: var(--Bend-medium) var(--Bend-medium) 0px 0px;
}
.card .cardbox .frame {
  padding: calc(var(--Padding-top-Padding-bottom) * 2) 0px;
}
@media screen and (max-width: 600px) {
  .card .cardbox .frame {
    padding: calc(var(--Padding-top-Padding-bottom) * 1) 0px;
  }
}
.card .cardbox .frame .cardlabel {
  display: flex;
  flex-direction: column;
  height: 44px;
  align-items: center;
  padding: 0px var(--Padding-left-Padding-right);
  position: relative;
  align-self: stretch;
  width: 100%;
  text-align: center;
  overflow: hidden;
  font-size: var(--Subheadline);
  margin-bottom: 16px;
}
.card .cardbox .frame .slotbtn {
  display: flex;
  width: 100%;
  align-items: center;
  padding: 0px var(--Padding-left-Padding-right);
}

.copobtn {
  background-color: var(--secondarySystemGroupedBackground);
  border-radius: var(--Bend-full);
  color: var(--labelButton-primary);
  display: flex;
  height: 28px;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: var(--Subheadline);
  font-weight: bold;
  cursor: pointer;
  /* Yellow Shadow */
}
.copobtn.medium {
  height: 36px;
}
.copobtn.outline {
  background-color: var(--systemBackground);
  border: 1px solid var(--labelButton-primary);
  color: var(--labelButton-primary);
}
.copobtn.active {
  background-color: var(--Button-Main-Fill);
  color: var(--label-always-black);
}
.copobtn.glow {
  -webkit-animation: glowing 2s infinite;
  -moz-animation: glowing 2s infinite;
  -o-animation: glowing 2s infinite;
  animation: glowing 2s infinite;
}
@-moz-keyframes glowing {
  0%, 100% {
    -moz-box-shadow: 1px 0px 19px 4px var(--Button-Main-Fill), inset 0px 0px 10px rgba(255, 255, 255, 0.5);
    box-shadow: 1px 0px 19px 4px var(--Button-Main-Fill), inset 0px 0px 10px rgba(255, 255, 255, 0.5);
  }
  50% {
    -moz-box-shadow: 0px 0px 0px 0px rgba(255, 245, 3, 0), inset 0px 0px 0px rgba(255, 255, 255, 0);
    box-shadow: 0px 0px 0px 0px rgba(255, 245, 3, 0), inset 0px 0px 0px rgba(255, 255, 255, 0);
  }
}
@-webkit-keyframes glowing {
  0%, 100% {
    -webkit-box-shadow: 1px 0px 19px 4px var(--Button-Main-Fill), inset 0px 0px 10px rgba(255, 255, 255, 0.5);
    box-shadow: 1px 0px 19px 4px var(--Button-Main-Fill), inset 0px 0px 10px rgba(255, 255, 255, 0.5);
  }
  50% {
    -webkit-box-shadow: 0px 0px 0px 0px rgba(255, 245, 3, 0), inset 0px 0px 0px rgba(255, 255, 255, 0);
    box-shadow: 0px 0px 0px 0px rgba(255, 245, 3, 0), inset 0px 0px 0px rgba(255, 255, 255, 0);
  }
}
@-o-keyframes glowing {
  0%, 100% {
    box-shadow: 1px 0px 19px 4px var(--Button-Main-Fill), inset 0px 0px 10px rgba(255, 255, 255, 0.5);
  }
  50% {
    box-shadow: 0px 0px 0px 0px rgba(255, 245, 3, 0), inset 0px 0px 0px rgba(255, 255, 255, 0);
  }
}
@keyframes glowing {
  0%, 100% {
    box-shadow: 1px 0px 19px 4px var(--Button-Main-Fill), inset 0px 0px 10px rgba(255, 255, 255, 0.5);
  }
  50% {
    box-shadow: 0px 0px 0px 0px rgba(255, 245, 3, 0), inset 0px 0px 0px rgba(255, 255, 255, 0);
  }
}

.sec-terms {
  margin-top: calc(var(--gutter) * 4);
}

.sec-terms .content {
  padding: 0;
  margin: 0;
}

.sec-terms .q-n-a {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: normal;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: transparent;
  background-clip: border-box;
  border: 1px solid var(--systemGroupedBackground);
  border-radius: var(--Bend-medium);
  background: var(--systemGroupedBackground);
  padding: 0px calc(var(--Padding-left-Padding-right) * 2);
}

.sec-terms .q-n-a .fade {
  opacity: 0;
}

.sec-terms .q-n-a .fade.show {
  opacity: 1;
}

.sec-terms .q-n-a .collapse {
  display: none;
}

.sec-terms .q-n-a .collapse.show {
  display: block;
}

.sec-terms .q-n-a .collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  transition: height 0.35 ease;
}

.sec-terms .q-n-a .answer {
  color: var(--label-always-white);
  margin-top: calc(var(--gutter) * 2);
  margin-bottom: calc(var(--gutter) * 4);
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  border-top: 2px solid var(--separator);
}

.sec-terms .q-n-a .answer .reply {
  padding-top: calc(var(--gutter) * 2);
}

.sec-terms .group-faq {
  margin-top: 0;
  display: grid;
  row-gap: calc(var(--gutter) * 4);
}

.sec-terms .group-faq .question {
  padding-top: calc(var(--gutter) * 2);
  padding-bottom: calc(var(--gutter) * 2);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  cursor: pointer;
}

.sec-terms .group-faq .question .no {
  width: 36px;
  order: 1;
}

.sec-terms .group-faq .question .ask {
  flex: 1;
  order: 2;
  color: var(--label-Secondary);
}

.sec-terms .group-faq .question.collapsed .icon-bottom {
  transform: rotate(270deg);
}

.sec-terms .group-faq .question .icon-bottom {
  transform: rotate(90deg);
  background: var(--label-Secondary);
  width: 19px;
  order: 3;
  background-repeat: no-repeat;
  background-position: calc(100% - 0px) center;
  background-size: 20px;
  cursor: pointer;
}

.sec-terms .group-faq .q-n-a {
  padding-top: calc(var(--gutter) * 1);
  padding-bottom: calc(var(--gutter) * 1);
}

.icon-bottom {
  -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='back' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 16 16' style='enable-background:new 0 0 16 16%3B' xml:space='preserve'%3E%3Cpath id='Path_128' d='M10.6 15.6c0.6 0.5 1.4 0.5 2 0c0.5-0.5 0.6-1.3 0.1-1.8c0 0-0.1-0.1-0.1-0.1L6.4 8l6.1-5.7c0.5-0.5 0.6-1.3 0.1-1.8c0 0-0.1-0.1-0.1-0.1c-0.6-0.5-1.4-0.5-2 0L3.4 7.1C2.9 7.5 2.9 8.3 3.3 8.9c0 0 0.1 0.1 0.1 0.1L10.6 15.6z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='back' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 16 16' style='enable-background:new 0 0 16 16%3B' xml:space='preserve'%3E%3Cpath id='Path_128' d='M10.6 15.6c0.6 0.5 1.4 0.5 2 0c0.5-0.5 0.6-1.3 0.1-1.8c0 0-0.1-0.1-0.1-0.1L6.4 8l6.1-5.7c0.5-0.5 0.6-1.3 0.1-1.8c0 0-0.1-0.1-0.1-0.1c-0.6-0.5-1.4-0.5-2 0L3.4 7.1C2.9 7.5 2.9 8.3 3.3 8.9c0 0 0.1 0.1 0.1 0.1L10.6 15.6z'/%3E%3C/svg%3E");
  mask-size: cover;
}

.bottom {
  overflow-y: auto;
  padding-top: 16px;
  height: 100%;
}
.bottom .appbox {
  display: flex;
  max-width: 640px;
  height: 100%;
  margin: auto;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
}
@media screen and (max-width: 600px) {
  .bottom .appbox {
    margin: 0px calc(var(--gutter) * 4);
  }
}
.bottom .appbox .lotiegame {
  border-radius: calc(var(--Bend-medium) * 2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0px;
  overflow: hidden;
}
.bottom .appbox .lotiegame .gameinfo {
  position: absolute;
  padding: 0px calc(var(--Padding-left-Padding-right) * 2);
  z-index: 1;
}
.bottom .appbox .lotiegame .gameinfo .key1 {
  font-weight: bold;
  font-size: var(--Title-1);
}
.bottom .appbox .lotiegame .gameinfo .key2 {
  font-weight: bold;
  font-size: var(--Title-1);
}
.bottom .appbox .lotiegame .gameinfo .key3 {
  font-weight: bold;
  font-size: var(--Title-2);
}
.bottom .appbox .lotiegame img {
  border-radius: calc(var(--Bend-medium) * 2);
  width: 100%;
}
.bottom .appbox .freetoken {
  display: grid;
  grid-template-columns: 1fr 110px;
  grid-template-rows: 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  align-items: center;
  justify-content: space-between;
  background-color: var(--systemGroupedBackground);
  padding: calc(var(--gutter) * 4);
  border-radius: calc(var(--Bend-medium) * 1);
  position: absolute;
  width: 100%;
  bottom: 16px;
}
.bottom .appbox .freetoken .freeamt {
  font-weight: bold;
  font-size: var(--Title-2);
}
.bottom .appbox .freetoken .freeetc {
  font-weight: bold;
  font-size: var(--Footnote);
}
.bottom .appbox .menu-close {
  width: 30px;
  height: 30px;
  display: block;
  background: url(../images/freespin/Button-X.svg);
  background-size: contain;
  margin-bottom: calc(var(--gutter) * 4);
  cursor: pointer;
  background-color: var(--tile-button);
  border-radius: var(--Bend-full);
}

.bottom .list-item {
  margin: 35px 0;
  padding: 0px 20px;
}

.menu {
  position: fixed;
  left: 0;
  top: 44px;
  width: 0;
  height: 0;
  z-index: 150;
}

.app-menu-container {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  height: 100%;
  -webkit-transform: translateY(100%);
  transform: translateY(100vh);
  z-index: 170;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
}

.app-menu {
  background-color: var(--systemBackground);
  color: white;
  position: fixed;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  overflow: hidden;
  width: 100%;
  max-width: 700px;
  height: 90%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  will-change: transform;
  z-index: 160;
  pointer-events: auto;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.menu--visible .app-menu-container {
  -webkit-transform: none;
  transform: none;
  pointer-events: none;
}

.menu--animatable .app-menu-container {
  transition: all 130ms ease-in;
}

.menu--visible.menu--animatable .app-menu-container {
  transition: all 330ms ease-out;
}

.menu-background {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  will-change: opacity;
  display: none;
  transition: opacity 0.3s cubic-bezier(0, 0, 0.3, 1);
}

.menu--visible .menu-background {
  opacity: 0.5;
  pointer-events: auto;
}

.menu--background-visible .menu-background {
  display: block;
}

.no-transition {
  transition: none !important;
}