:root {
  --primary-color: #460E9A;
  /* TODO: change? */
  --card-bg-color: #2c2072;
  --card-radius: 2rem;
  --yellow: #e0f300;
  --cyan: #00ffc3;
  --magenta: #ff3beb;
  --white: #fff;
  --text-dark: #2c2073;
  --bg-dark: #1c163f;
  --bg-tooltip: #ff3beb;
  --black: #000;
}

table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before {

  background-color: black !important;
}

html {
  overflow-x: hidden;
}

a {
  color: var(--cyan);
  text-decoration: none;
}

.tooltip-line a {
  color: yellow;
  font-weight: bold;
}

.grecaptcha-badge {
  visibility: hidden !important;
}

body {
  padding-top: 10px;
  background: #1C1C33;
  font-family: Poppins, Arial, sans-serif;
  font-size: 1.2rem;
  color: var(--white);
  margin: 0;
  /* background: url("/assets/redesign/body-bg-compressed.jpg"); */
  background-color: rgb(32, 18, 69);
  background-size: contain;
  background-size: 100vw;
  background-repeat: repeat;
}

.space-background {
  background: url("/assets/redesign/body-bg-compressed.jpg");
  background-size: contain;
  background-size: 100vw;
  background-repeat: repeat;
}

.hidden {
  display: none !important;
}

.yellow {
  color: var(--yellow);
}

.cyan {
  color: var(--cyan);
}

.magenta {
  color: var(--magenta);
}

/* 
section,
footer {
  z-index: 22;
  position: relative;
} */

nav {
  position: relative;
}

section {
  padding: 6rem 1rem;
}

section.cta-purple {
  padding: 5rem 1rem;
}

@media screen and (max-width: 650px) {
  section {
    padding: 5rem 1rem;
  }
}

@keyframes fadein {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.fade-in-on-load {
  opacity: 0;
  -webkit-animation: fadein 2s forwards;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 2s forwards;
  /* Firefox < 16 */
  -ms-animation: fadein 2s forwards;
  /* Internet Explorer */
  -o-animation: fadein 2s forwards;
  /* Opera < 12.1 */
  animation: fadein 2s forwards;
  animation-delay: 1s;
}

footer {
  /* opacity:0 !important; */
  padding-top: 4rem;
  background-color: #28125d;

}



.content-wrapper {
  max-width: 1248px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
}

.content-wrapper.wrapper-nav {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

.glowi {
  animation: glowi-good 0.5s ease-in-out infinite alternate;
}

@keyframes glowi-good {
  from {
    opacity: 0.5;
  }

  to {
    opacity: 1;
  }
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 1rem;
  color: #444;
}

.hp-game .wrapper {
  display: grid;
  grid-template-columns: minmax(200px, .25fr) auto minmax(200px, .25fr);
  grid-gap: 1rem;
  color: #444;
}

.hp-game .col.stretch {
  grid-column-start: 2;
  grid-row-start: 1;
  grid-row-end: span 3;
}

.hp-arena .wrapper {
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 3rem;
}

.hp-arena .col.card,
.roy-usecases .col.card {
  grid-column: span 2;
}

section.roy-usecases {
  padding-top: 5rem;
  padding-bottom: 7rem;
}

.roy-usecases .wrapper {
  grid-template-columns: repeat(8, 1fr);
  grid-gap: 1rem;
}

.hp-skinwars .section-leadin {
  margin-bottom: 2rem;
}

.hp-skinwars .col.card {
  width: 14rem;
  justify-self: center;
}

.hp-skinwars .skinwars-right {
  grid-column: 2 / 4;
}

.hp-skinwars .skin {
  width: 95%;
}

.hp-skinwars .skin-card {
  padding: 0.5rem 0;
}

.hp-skinwars .skin-card h3 {
  margin-top: 0;
}

.hp-skinwars .card-desc {
  margin-top: 0.5rem;
  font-weight: 700;
}

.hp-skinwars .first-skin {
  margin-top: -2rem;
  margin-bottom: 2rem;
}

.hp-skinwars .cta-skin-wars {
  margin-top: 3rem;
  text-align: center;
  color: #fff;

  margin-left: auto;
  margin-right: auto;
  max-width: 50rem;
  padding: 0 2rem 1rem 2rem;
}

.hp-skinwars .disclaimer-skin-wars {
  font-size: 0.8rem;
  text-align: center;
}

.hp-game .card-content h3 {
  margin-bottom: 0.75rem;
}

.hp-game .card-content p {
  margin-top: 0.75rem;
}


@media screen and (max-width: 1250px) {
  .hp-game .wrapper {
    grid-template-columns: repeat(3, 1fr);
  }

  .hp-game .col.stretch {
    grid-column-start: 1;
    grid-column-end: span 3;
    grid-row-start: 2;
    grid-row-end: span 1;
  }

}

@media screen and (max-width: 1250px) {
  .hp-skinwars .skinwars-left {
    display: none;
  }
}

@media screen and (max-width: 950px) {
  .hp-game .wrapper {
    grid-template-columns: repeat(2, 1fr);
  }

  .hp-game .col.stretch {
    grid-column-start: 1;
    grid-column-end: span 2;
    grid-row-start: 4;
    grid-row-end: span 1;
  }

  .hp-arena .wrapper {
    grid-template-columns: repeat(4, 1fr);
  }

  .hp-arena .col.card:last-child:nth-child(2n + 1) {
    grid-column-end: -2;
  }
}

@media screen and (max-width: 650px) {
  .hp-game .wrapper {
    grid-template-columns: 1fr;
  }

  .hp-game .col.stretch {
    grid-column-end: span 1;
    grid-row-start: 1;

    min-height: 15rem;
  }

  .hp-game .col.card.hide-on-mobile {
    display: none;
  }

  .hp-arena .wrapper,
  .roy-usecases .wrapper {
    grid-template-columns: 1fr;
  }

  .hp-arena .wrapper .col.card,
  .roy-usecases .wrapper .col.card {
    grid-column: 1;
  }
}

@media screen and (max-width: 760px) {
  .hp-skinwars .cta-skin-wars {
    padding: 0;
  }

  .hp-skinwars .skinwars-right .wrapper {
    grid-template-columns: 1fr;
  }

  .hp-skinwars .first-skin {
    margin-top: 0;
    margin-bottom: 0;
    order: -1;
  }
}

.col {
  color: var(--white);
  border-radius: 5px;
  padding: 1rem;
}

.cta-dark {
  background: rgb(82, 31, 230);
  background: linear-gradient(180deg, rgba(44, 32, 115, 0.55) 0%, rgba(82, 31, 230, 0.35) 100%);
}

.cta-dark-inv {
  background: rgb(82, 31, 230);
  background: linear-gradient(180deg, rgba(82, 31, 230, 0.25) 0%, rgba(44, 32, 115, 0.55) 100%);
}

.cta-purple {
  background: rgb(82, 31, 230);
  background: linear-gradient(180deg, rgba(82, 31, 230, 1) 0%, rgba(44, 32, 115, 1) 100%);
}

.section-title {
  font-size: 2.8rem;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.section-title.align-left {
  text-align: left;
}

.section-sub-title {
  text-align: center;
  color: white;
  margin-bottom: 3rem;
}

.accordions .section-sub-title {
  margin-bottom: 0rem;
  margin-top: 3rem;
  font-size: 2rem;
  grid-column: 1 / -1;
}

.section-leadin {
  margin: auto;
  max-width: 50rem;
  padding: 0 2rem 3rem 2rem;
  text-align: center;
}

.card {
  background-color: var(--card-bg-color);
  border-radius: var(--card-radius);
  text-align: center;
  padding: 0;
  -webkit-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
}

.card-content {
  padding: 1rem 2rem;
}

.hp-arena .card-content,
.roy-usecases .card-content {
  padding-top: 0;
  padding-bottom: 2rem;
}

.card-title-img {
  border-radius: var(--card-radius) var(--card-radius) 0 0;
  object-fit: cover;
  width: 100%;
  height: 10rem;
}

.inline-pip {
  width: 16px;
  height: 16px;
}

.feature-pc {
  position: relative;
  background: url("/assets/redesign/feature-pc.png");
  background-size: cover;
  border-radius: var(--card-radius);
  min-height: 25rem;

  padding: 0;
  overflow: hidden;
}

.gameplay-video {
  position: absolute;
  top: 0;
  left: 0;

  object-fit: cover;
  height: 100%;
  width: 100%;
}

@media screen and (max-width: 650px) {
  .card-content {
    padding: 0.5rem 2rem;
  }

  section.hp-game {
    padding-top: 9rem;
  }

  .section-title {
    font-size: 2.5rem;
  }

  .section-leadin {
    padding: 0 0 3rem 0;
  }
}

/* Buttons */
.cta-button {
  display: inline-block;
  width: auto;
  margin-left: auto;
  margin-right: auto;
  padding: 0.5rem 2rem;
  border-radius: 1.3rem;
  font-size: 1.2rem;
  font-family: Poppins, Arial, sans-serif;
  font-weight: 700;
  color: var(--text-dark);
  text-transform: uppercase;
  border: none;
  text-decoration: none;
  transition: all 0.2s;
  line-height: 1;
  cursor: pointer;
}

.micro-tab-button {
  font-size: 0.8rem !important;
  padding: 0.2rem 1rem !important;
  margin-right: 0.2rem;
  margin-left: 0.2rem;
}

button.cta-button {
  appearance: none;
}

.cta-button.small {
  padding: 0.4rem 1.6rem;
  border-radius: 1.1rem;
  font-size: 1rem;
}

.cta-button.extra-small {
  padding: 0.4rem 0.4rem;
  border-radius: 1rem;
  font-size: 0.8rem;
  /* font-weight: 500; */
}

.cta-button:hover {
  background-color: transparent;
  transform: scale(1.08) translate3d(0, 0, 0) perspective(1px);
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
}

.cta-button.small:hover {
  background-color: transparent;
  transform: scale(1.05) translate3d(0, 0, 0) perspective(1px);
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
}

.cta-button.extra-small:hover {
  background-color: transparent;
  transform: scale(1.05) translate3d(0, 0, 0) perspective(1px);
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
}


button.cta-button:disabled,
button.cta-button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
  transform: scale(1);
  color: var(--text-dark);
  background-color: var(--white);
}

.cta-button.leadin-button {
  padding: 0.65rem 3rem;
  margin-top: 2rem;
}

.cta-button-cyan {
  background-color: var(--cyan);
  border: 2px solid var(--cyan);
}

.cta-button-cyan:hover {
  color: var(--cyan);
}

button.cta-button.cta-button-cyan:disabled,
button.cta-button.cta-button-cyan[disabled] {
  opacity: 0.5;
  transform: scale(1);
  color: var(--text-dark);
  background-color: var(--cyan);
}

.cta-button-magenta {
  background-color: var(--magenta);
  border: 2px solid var(--magenta);
  color: var(--white);
}

.cta-button-secondary:hover {
  /* background-color: var(--card-bg-color);
  border: 2px solid var(----card-bg-color); 
  color: var(--white);
      border-radius: 1.3rem;
        border-bottom-left-radius: 0rem;
        border-bottom-right-radius: 0rem; */
}

.cta-button-magenta:hover {
  color: var(--magenta);
}

button.cta-button.cta-button-magenta:disabled,
button.cta-button.cta-button-magenta[disabled] {
  opacity: 0.5;
  transform: scale(1);
  color: var(--white);
  background-color: var(--magenta);
}

.cta-button-magenta.inverse {
  background-color: transparent;
  border: 2px solid var(--magenta);
  color: var(--magenta);
}


.dropdown .cta-button-magenta {
  transition-delay: 0.15s;
}

.accordion a.accordion-title {
  transition: all 0.2s;
}

.accordion a.accordion-title {
  transition-delay: 0.15s;
}

.accordion.active a.accordion-title {
  transition-delay: 0s;
}

.dropdown .cta-button-magenta:hover {
  background-color: var(--magenta);
  transform: none;
  color: var(--white);
  transition-delay: 0s;
  transition: none;
}

.cta-button-yellow {
  background-color: var(--yellow);
  border: 2px solid var(--yellow);
}

.cta-button-yellow:hover {
  color: var(--yellow)
}

button.cta-button.cta-button-yellow:disabled,
button.cta-button.cta-button-yellow[disabled] {
  opacity: 0.5;
  transform: scale(1);
  color: var(--text-dark);
  background-color: var(--yellow);
}

.cta-button-white {
  background-color: var(--white);
  border: 2px solid var(--white);
}

.cta-button-white:hover {
  color: var(--white)
}

/* Dropdowns */

.dropdown,
.accordion {
  position: relative;
  display: inline-block;
}

.dropdown:hover a.cta-button,
.accordion.active a.accordion-title {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.dropdown-content,
.accordion .accordion-text {
  position: absolute;
  background-color: var(--magenta);
  min-width: 100%;
  z-index: 1;
  border-bottom-left-radius: 1.3rem;
  border-bottom-right-radius: 1.3rem;
}

.dropdown-content-secondary,
.accordion .accordion-text {
  position: absolute;
  top: -10px;
  background-color: var(--card-bg-color);
  min-width: 100%;
  z-index: 1;
  /* border-bottom-left-radius: 1.3rem;
  border-bottom-right-radius: 1.3rem; */
  border-radius: 1.3rem;
}

.dropdown:hover .dropdown-content-secondary,
.dropdown-content-secondary:hover,
.accordion.active .accordion-text {
  display: block;
}

ul.sub-menu.dropdown-content-secondary {
  z-index: 23;
}

ul.sub-menu.dropdown-content-secondary,
.accordion .accordion-text {
  max-height: 0;
  transition: max-height 0.2s ease-out;
  overflow: hidden;
}

.accordion .accordion-text {
  position: relative;
}

.dropdown:hover .dropdown-content,
.dropdown-content:hover,
.accordion.active .accordion-text {
  display: block;
}

ul.sub-menu.dropdown-content {
  z-index: 23;
}

ul.sub-menu.dropdown-content,
.accordion .accordion-text {
  max-height: 0;
  transition: max-height 0.2s ease-out;
  overflow: hidden;
}

.dropdown:hover .sub-menu,
.accordion.active .accordion-text {
  max-height: 800px;
  transition: max-height 0.2s ease-in;
}

.mobile-shortcut {
  display: none;
}

@media screen and (max-width: 768px) {
  .mobile-shortcut {
    display: block;
  }

  .hide-on-mobile {
    display: none !important;
  }

  .dropdown:hover a.cta-button {
    border-bottom-left-radius: 2rem;
    border-bottom-right-radius: 2rem;
  }

  section,
  footer {
    z-index: 1;
  }
}

.social-footer {
  padding-top: 4rem;
}

.social-footer ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.social-footer ul li {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.social-footer ul li a {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  height: 40px;
  width: 40px;
  background-color: var(--white);
  border-radius: 50%;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-left: 10px;
  margin-top: 10px;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

.social-footer ul li a:hover {
  background: #00ffc3;
  transform: scale(1.1);
}


ul.footer-nav,
.content ul {
  list-style: none;
  margin-top: 0;
}

ul.footer-nav {
  margin-left: 1rem;
}

.content ul {
  padding-left: 0;
}

ul.footer-nav li,
.content ul li {
  padding-bottom: 0.5rem;
  color: var(--white);
}

ul.footer-nav li:hover {
  color: var(--cyan)
}

ul.footer-nav li::before,
.content ul li::before {
  content: "\003E";
  margin-right: 0.5rem;
}

.content .dropdown ul li::before {
  content: none;
}

a.footer-nav-link {
  color: inherit;
  text-decoration: none;
  text-transform: uppercase;
}

footer h3 {
  margin-top: 0;
  margin-bottom: 0.4rem;
}

footer p {
  margin-top: 0.2rem;
}

footer .footer-copyright {
  margin-top: 2rem;
  background: #000;
  text-align: center;
  padding: 1rem 0.5rem;
  font-size: 1rem;
}



@media screen and (max-width: 768px) {
  .footer-logo {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
  }

  .social-footer {
    text-align: center;
  }

  .footer-about {

    display: none;
  }

  footer .footer-copyright {
    padding: 1rem 2.5rem;
  }
}

.hero {
  padding-bottom: 10rem;
}

.hero .hero-left {
  position: relative;
  z-index: 1;
}

.hero h1.hero-title {
  font-size: 6.5rem;
  text-transform: uppercase;
  margin-top: 3rem;
  margin-bottom: 3rem;
  line-height: 1;
}

.hero p.leadin-text {
  width: 75%;
}

@media screen and (max-width: 1250px) {
  .hero h1.hero-title {
    font-size: 4rem;
    margin-top: 1rem;
  }

  .hero p.leadin-text {
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .hero .hero-left {
    text-align: center;
  }

  .hero {
    padding-top: 1rem;
  }
}

nav .logo {
  min-width: 280px;
  padding: 1rem;
  padding-left: 0.5rem;
}

nav .logo img {
  width: 280px;
  height:45.2px
}

nav.navbar {
  display: flex;
  flex-direction: row;
  z-index: 2;
  font-family: Poppins, sans-serif;
  font-size: 1.2rem;
}

nav.navbar ul.main-nav {
  display: inline-flex;
  list-style: none;
  flex-grow: 1;
  align-items: right;
  justify-content: flex-end;
  align-self: center;
}

nav.navbar ul.main-nav li {
  margin-left: 1rem;
  margin-top: 0.35rem;
}

nav.navbar ul.main-nav li a,
.leadin ul.sub-menu li a {
  color: var(--white);
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
}

nav.navbar ul.main-nav li a:hover,
.leadin ul.sub-menu li a:hover {
  color: var(--cyan);
}

nav.navbar ul.main-nav li a.cta-button-nav {
  margin-top: -1rem;
  padding: 0.3rem 1.8rem;
}

nav.navbar ul.main-nav li a.cta-button-nav:hover {
  color: var(--white);
}

nav .nav-wrapper {
  display: flex;
  flex-grow: 1;
}

nav.navbar ul.main-nav li ul.sub-menu,
.leadin ul.sub-menu {
  padding: 0;
  width: 100%;
  list-style: none;
}

nav.navbar ul.main-nav li ul.sub-menu li,
.leadin ul.sub-menu li {
  margin: 0;
}

nav.navbar ul.main-nav li ul.sub-menu li a,
.leadin ul.sub-menu li a {
  display: block;
  padding: 0.5rem 1rem;
  text-align: center;
}

.leadin ul.sub-menu {
  margin-top: 0;
}

@media screen and (max-width: 1250px) {
  nav.navbar ul.main-nav li {
    margin-left: 1.2rem;
    font-size: 0.9rem;
  }

  nav.navbar ul.main-nav li a.cta-button-nav {
    font-size: 1rem;
  }

  nav.navbar ul.main-nav {
    margin-top: 1.2rem;
    margin-right: 1rem;
    padding-left: 0;
  }

  nav .logo {
    min-width: 240px;
    height: 38.73px;
    margin-top: 0.25rem;
  }

  nav .logo img {
    width: 240px;
    height:38.73px;
  }
}

@media screen and (max-width: 650px) {
  nav .logo img {
    width: 230px;
  }
}

.planet {
  position: absolute;
  margin-left: 4rem;
  margin-top: 10rem;
  z-index: 0;
  max-width: 100%;
}

.alien,
.devil,
.derp,
.bomb {
  position: absolute;
  z-index: 1;
  width: 100%;
  max-width: 424px;
}

.alien {
  margin-top: 1rem;
  margin-left: 15rem;
  transform: rotate(-15deg);
}

.devil {
  margin-left: -8rem;
  margin-top: 16rem;
  transform: rotate(-15deg) scale(0.9);
}

.bomb {
  transform: rotate(-30deg) scale(0.9);
  margin-left: -5rem;
  margin-top: 5rem;
}

.derp {
  transform: rotate(-30deg) scale(0.8);
  margin-top: 25rem;
  margin-left: -20rem;
}

.planet1 {
  position: absolute;
  z-index: 0;
  margin-left: -35rem;
  margin-top: 0;
  z-index: 0;
}

@media screen and (max-width: 1440px) {
  .bomb {
    margin-left: 0;
  }

  .derp {
    transform: rotate(-40deg) scale(0.8);
    margin-left: -13rem;
  }

  .planet1 {
    margin-left: -25rem;
  }
}

@media screen and (max-width: 1250px) {

  .alien {
    margin-top: 1rem;
    margin-left: 7rem;
    transform: rotate(-15deg) scale(0.8);
  }

  .devil {
    margin-left: -8rem;
    margin-top: 14rem;
    transform: rotate(-15deg) scale(0.7);
  }

  .planet {
    position: absolute;
    margin-left: 4rem;
    margin-top: 5rem;
    transform: scale(0.8);
  }

  .bomb {
    transform: rotate(-40deg) scale(0.7);
    margin-left: 0;
  }

  .derp {
    transform: rotate(-40deg) scale(0.7);
    margin-top: 20rem;
    margin-left: -7rem;
  }

  .planet1 {
    position: absolute;
    z-index: 0;
    margin-left: -25rem;
    margin-top: -4rem;
    z-index: 0;
    transform: scale(0.8);
  }

}

@media screen and (max-width: 650px) {

  .alien {
    margin-top: 0rem;
    margin-left: 3rem;
    transform: rotate(-5deg) scale(0.53);
  }

  .devil {
    margin-left: -8rem;
    margin-top: 3rem;
    transform: rotate(-5deg) scale(0.45);
  }

  .planet {
    position: absolute;
    left: 0rem;
    margin-top: 16rem;
    transform: scale(0.8);
  }
}

@media screen and (max-width: 425px) {
  .planet {
    position: absolute;
    margin-left: 0;
    margin-top: -3rem;
    transform: scale(0.8);
  }
}


.bg-pip {
  width: 1.2rem;
  height: 1.2rem;
  animation: pulse 10s infinite;
  position: absolute;
  z-index: 0;
}

@keyframes pulse {
  0% {
    transform: scale(0);
  }

  5% {
    transform: scale(0);
  }

  10% {
    transform: scale(1.1);
  }

  11% {
    transform: scale(1);
  }

  95% {
    transform: scale(1);
  }

  96% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(0.0);
  }
}


.mobile-nav {
  display: none;
  margin: 1.8rem;
  position: relative;

  z-index: 1;

  -webkit-user-select: none;
  user-select: none;
}

.mobile-nav input {
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;

  cursor: pointer;

  opacity: 0;
  z-index: 2;

  -webkit-touch-callout: none;
}

.mobile-nav span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: var(--white);
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;
}

.mobile-nav span:first-child {
  transform-origin: 0% 0%;
}

.mobile-nav span:nth-last-child(2) {
  transform-origin: 0% 100%;
}

.mobile-nav input:checked~span {
  opacity: 1;
  transform: rotate(45deg) translate(0, -2px);
  background: var(--white);
}

.mobile-nav input:checked~span:nth-last-child(2) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

.mobile-nav input:checked~span:nth-last-child(1) {
  transform: rotate(-45deg) translate(0, -3px);
}

@media screen and (max-width: 768px) {
  nav .logo {
    margin: 0 1rem;
  }

  nav .nav-wrapper {
    flex-basis: 100%
  }

  nav.navbar ul.main-nav {
    display: none;
    padding-left: 2.5rem;
  }

  .mobile-nav {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    margin: 1.5rem;
    margin-top: 1rem;
  }

  nav.navbar .nav-wrapper.mobile ul.main-nav {
    display: block;
    background: rgba(255, 255, 255, 0.1);
    margin-top: 0;
    margin-right: 0;
  }

  nav.navbar .nav-wrapper.mobile ul.main-nav li {
    display: block;
    margin: 1rem 0 1rem 0;
  }
}

.highlight-cyan {
  color: var(--cyan) !important;
}

.highlight-magenta {
  color: var(--magenta) !important;
}

.highlight-yellow {
  color: var(--yellow) !important;
}

[v-cloak] {
  display: none
}

.loader {
  border: 32px solid #f3f3f3;
  border-top: 32px solid magenta;
  border-radius: 50%;
  width: 320px;
  height: 320px;

  animation: spin 2s linear infinite;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
  margin-bottom: 800px;
}

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

  100% {
    transform: rotate(360deg);
  }
}


/* FAQs */

.content h1.section-title {
  font-size: 3.5rem;
}

.wrapper.accordions .accordion {
  grid-column: 1 / -1;
}

.accordions .accordion {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.accordions .accordion-title {
  position: relative;
  display: flex;
  padding: 1rem 2rem;
  border-radius: 2rem;
}

.accordions .accordion-title h3 {
  margin: 0;
  font-size: 1.25rem;
}

.accordions.magenta .accordion-title {
  background: var(--magenta);
}

.accordions.magenta a.accordion-title h3 {
  color: var(--white);
}

.accordions.cyan .accordion-title {
  background: var(--cyan);
}

.accordions.cyan a.accordion-title h3 {
  color: var(--text-dark);
}

.accordions.yellow .accordion-title {
  background: var(--yellow);
}

.accordions.yellow a.accordion-title h3 {
  color: var(--text-dark);
}

.accordions .accordion-text {
  background-color: var(--card-bg-color);
  text-align: left;
  padding: 0 2rem;
  box-sizing: border-box;
  -webkit-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
}

.roy-iframe {
  padding: 2rem;
  background: var(--white);
  border-radius: 2rem;
}

.main-leadin {
  margin-bottom: 3rem;
}

.token-allocation {
  max-width: 100%;
}

.roy-token-wrapper {
  margin-top: 6rem;
}

/* Game Page */

section.gp-game {
  padding-top: 1.5rem;
}

.gp-game .wrapper {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) auto minmax(200px, 1fr);
  grid-gap: 1.6rem;
  column-gap: 1.45rem;
  color: #444;
}

.gp-game .wrapper .wrapper {
  display: grid;
  grid-template-columns: minmax(50%, 1fr) minmax(50%, 1fr);
  grid-gap: 0rem;
  color: #444;
  max-width: 100%;
}


.gp-game .wrapper .top .wrapper {
  grid-template-columns: minmax(250px, 1fr) auto minmax(250px, 1fr);
  grid-gap: 1rem;
  align-items: flex-end;
}

.gp-game .col.stretch {
  width: 800px;
  height: 600px;
  grid-column-start: 2;
  grid-row-start: 2;
  grid-row-end: span 3;
  /* border: 5px solid rgb(94 89 255); */
  /* border: #F3F6FF 3px solid; */
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0px 0px 0px 5px #5E59FF;
  justify-self: center;
  align-self: center;
}

.gp-game .col.top,
.gp-game .col.bottom {
  padding: 0;
  line-height: 1.1;
}

@media screen and (max-width: 1400px) {
  .gp-game .wrapper {
    column-gap: 1rem;
    row-gap: 1rem;
  }
}

@media screen and (max-width: 1250px) {
  .gp-game .wrapper {
    grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr);
    width: 810px;
    justify-self: center;
  }

  .gp-game .wrapper .top .wrapper {
    grid-template-columns: minmax(200px, 1fr) auto minmax(200px, 1fr);
    width: 810px;
  }

  .gp-game .wrapper .col.top.spacer,
  .gp-game .wrapper .col.bottom.spacer {
    display: none;
  }

  .gp-game .wrapper .col.top.info {
    grid-column: 1 / 3;
  }

  .gp-game .wrapper .col.bottom.info {
    grid-column: 1 / 3;
    grid-row-start: 5;
    grid-row-end: span 1;
  }

  .gp-game .col.stretch {
    width: 800px;
    height: 600px;
    grid-column: 1 / 3;
    grid-row-start: 2;
    grid-row-end: span 3;
    /* border: 5px solid rgb(94 89 255); */
  }

  .gp-game .wrapper .wrapper.stats {
    max-width: 100%;
  }

  .gp-game .card {
    justify-self: center;
    width: 15rem;
  }
}

@media screen and (max-width: 810px) {
  .gp-game .wrapper {
    width: 100%;
    justify-self: center;
  }

  .gp-game .wrapper .top .wrapper {
    grid-template-columns: 1fr auto 1fr;
    width: 100%;
  }

  .gp-game .wrapper .wrapper {
    grid-template-columns: 1fr;
  }

  .gp-game .col.stretch {
    width: calc(100% - 1.5rem);
    height: unset;
    aspect-ratio: 4 / 3;
    grid-column: 1 / 3;
    grid-row-start: 2;
    grid-row-end: unset;
  }

  .gp-game .wrapper .col.top.info {
    grid-column: 1 / 3;
  }

  .gp-game .wrapper .wrapper .col {
    text-align: center;
  }

  .gp-game .wrapper .col.bottom.info {
    grid-column: 1 / 3;
    grid-row-start: 3;
  }

  .top-content,
  .top-content.align-center,
  .top-content.align-right {
    text-align: center;

  }

}

@media screen and (max-width: 667px) {
  .gp-game .wrapper {
    grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr);
    justify-self: center;
  }

  .gp-game .wrapper .top .wrapper {
    grid-template-columns: 100%;
    width: 100%;
  }

  .gp-game .wrapper .col.top.spacer,
  .gp-game .wrapper .col.bottom.spacer {
    display: none;
  }

  .gp-game .wrapper .col.top.info {
    grid-column: 1 / 3;
  }

  .gp-game .wrapper .col.bottom.info {
    grid-column: 1 / 3;
    grid-row-start: 5;
    grid-row-end: span 1;
  }

  .gp-game .col.stretch {
    width: calc(100% - 1.5rem);
    height: unset;
    aspect-ratio: 4 / 3;
    grid-column: 1 / 3;
    grid-row-start: 2;
    grid-row-end: span 3;
  }

  .gp-game .card {
    justify-self: center;
    width: 100%;
    max-width: 15rem;
  }

}

.top-content {
  height: 100%;
  width: 100%;
}

@media screen and (max-width: 415px) {
  .gp-game .wrapper {
    grid-template-columns: 1fr;
    width: 100%;
    justify-self: center;
  }

  .gp-game .wrapper .wrapper {
    grid-template-columns: 1fr;
  }

  .gp-game .col.stretch {
    width: calc(100% - 1.5rem);
    height: unset;
    aspect-ratio: 4 / 3;
    grid-column: unset;
    grid-row-start: 2;
    grid-row-end: unset;
  }

  .gp-game .wrapper .col.top.info {
    grid-column: unset;
  }

  .gp-game .wrapper .wrapper .col {
    text-align: center;
  }

  .gp-game .wrapper .col.bottom.info {
    grid-column: unset;
    grid-row-start: 3;
  }

  .top-content,
  .top-content.align-center,
  .top-content.align-right {
    text-align: center;
  }
}


.gp-game .card-content {
  padding: 0.75rem 1rem;
}

.gp-game .card-title-tiny {
  opacity: 1.0;
  font-size: 0.76rem;
  font-weight: 600;
}

.gp-game .card-body {
  font-size: 0.9rem;
  margin-top: 0.4rem;
  margin-bottom: 0.4rem;
}

.progress-container {
  width: 100%;
  background-color: var(--bg-dark);
  border-radius: 1rem;
  margin-bottom: 0.4rem;
}

.progress-bar {
  width: 75%;
  min-width: 5%;
  height: 0.6rem;
  border-radius: 1rem;
  transform-origin: center left;
  transition: all 0.2s;
}

.progress-highlight {
  transform: scale(1.05);
  transition: all 0.2s;
}

.progress-bar.elo-rating {
  width: 95%;
}

.progress-bar.skin-sp {
  width: 50%;
}

.yellow .progress-bar {
  background-color: var(--yellow);
}

.cyan .progress-bar {
  background-color: var(--cyan);
}

.magenta .progress-bar {
  background-color: var(--magenta);
}

.white .progress-bar {
  background-color: var(--white);
}

.progress-name {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.2;
  display: inline;
}

.progress-value {
  font-weight: 600;
  font-size: 0.8rem;
}

.progress-type,
.progress-value {
  color: var(--white);
  line-height: 1.2;
  display: inline;
  margin-left: 4px;
}

#elo-rating-wrapper {
  margin-top: 0.75rem;
  margin-bottom: 0.5rem
}

.wallet-balance,
.stats-number {
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.2;
}

.roy-balance-wrapper,
.vp-balance-wrapper {
  margin-bottom: 10px;
  font-size: 1.2rem;
  margin-top: 1px;
}

.boxes-wrapper {
  margin-top: 0.2rem;
  text-align: left;
  display: flex;
  flex-wrap: wrap;
}

.boxes-wrapper .box {
  display: flex;
  width: 1.4rem;
  height: 1.4rem;
  background-color: rgb(32, 18, 69);
  margin: 0.15rem 0.17rem;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.boxes-wrapper .box.yellow {
  background-color: var(--yellow);
}

.boxes-wrapper .box.cyan {
  background-color: var(--cyan);
}

.boxes-wrapper .box.magenta {
  background-color: var(--magenta);
}

.boxes-wrapper .box.black {
  border: 0.19rem solid var(--white);
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  font-weight: 700;
}

.card-title {
  font-weight: 700;
  line-height: 1.2;
}

a.card-link {
  display: block;
  text-transform: uppercase;
  font-size: 1rem;
  color: var(--magenta);
  font-weight: 700;
  margin-top: 0.5rem;
  line-height: 1.2;
}

a.card-link:hover {
  color: var(--cyan);
}

.gp-game .wrapper .wrapper.stats {
  display: grid;
  grid-template-columns: minmax(25%, 1fr) minmax(25%, .1fr) minmax(25%, 1fr) minmax(25%, 1fr);
  grid-gap: 0rem;
  color: #444;
}

.gp-game .wrapper .wrapper .col {
  padding: 0.1rem;
}

.gp-game .stats .stats-wrapper {
  font-size: 0.5rem;
  font-weight: 600;
}

.gp-game .stats .stats-wrapper.context {
  font-size: 0.7rem;
  font-weight: 600;
}

.gp-game .stats .context .context-value,
.gp-game .stats .stats-value {
  display: block;
  line-height: 1.1;
}

.gp-game .stats-value {
  font-size: 1.2rem;
  font-weight: 700;
}

.gp-game .stats-card .card-title-tiny {
  margin-top: 0.35rem;
}

.gp-game .stats-card .card-title-tiny.first {
  margin-top: 0rem;
}

.gp-game .skin-name {
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.3rem;
}

/* .gp-game .skin-img max width to 50% and settings link margin top to 10px... */

.gp-game .skin-img {
  margin-top: 4%;
  max-width: 50%;
  margin-bottom: 2%;
  max-height: 90px;
}

.gp-game .skin-sp-value {
  font-size: 1.2rem;
  font-weight: 700;
}

.gp-game .top-content.server {
  padding-left: 1rem;
}

.gp-game .top-content.prize {
  font-size: 1rem;
  padding-right: 1rem;
}

.gp-game .bottom-content {
  padding: 1rem;
  padding-top: 0;
}

.gp-game .top-content .server-current {
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
}

.gp-game .top-content .server-switch {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--magenta);
}

.gp-game .top-content .player-name {
  text-transform: uppercase;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--white);
}

.gp-game .top-content .player-unlink {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--cyan);
}

.gp-game .top-content .prize-first {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--white);
  text-align: right;
}

@media screen and (max-width: 810px) {
  .gp-game .top-content.server {
    padding-left: 0;
  }

  .gp-game .top-content .player-name {
    font-size: 0.9rem;
  }

  .gp-game .top-content .prize-first {
    font-size: 0.6rem;
  }

  .gp-game .top-content.prize {
    padding-right: 0;
    font-size: 0.6rem;
  }

  .gp-game .top-content .server-current {
    font-size: 0.65rem;
  }
}



@media screen and (max-width: 415px) {
  .gp-game .top-content .server-current {
    padding-left: 1.5rem;
  }
}

.align-right {
  text-align: right;
}

.align-center {
  text-align: center;
}

.gp-game .bottom-content.game-buttons {
  padding-right: 0;
}

a.cta-button.tip-button {
  margin-right: 0.5rem;
}

.gp-game .bottom-content.game-info {
  font-size: 0.9rem;
  font-weight: 600;
  text-align: left;
}


@media screen and (max-width: 810px) {
  .gp-game .bottom-content.game-info {
    text-align: center;
  }

  .gp-game .bottom-content.game-buttons {
    text-align: center;
    padding-left: 0;
  }
}

/* Toasts */

.toast-container {
  position: fixed;
  z-index: 100000;
  bottom: 0.0rem;
  right: 0;
  margin: 1rem;
  transition: all 0.5s;
  pointer-events: none;

}

.toast.minimized {
  /* height: 0px; */
  pointer-events: none;
  transition: all 0.5s;
  opacity: 0;
  margin-bottom: -50px;
  /* transform: translate(200px) */
}

.toast.remove {
  opacity: 0;
  transition: all 0.5s;
}


.toast {

  pointer-events: all;
  margin-top: 1rem;
  font-size: 1rem;
  height: fit-content;
  color: var(--card-bg-color);
  max-width: 22rem;
  background-color: white;
  border-radius: 1rem;
  -webkit-box-shadow: 0px 2px 10px 0px rgb(0 0 0 / 15%);
  -moz-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 2px 10px 0px rgb(0 0 0 / 15%);
  transition: all 0.5s;
  /* opacity:0; */
  overflow: hidden;
  z-index: 10000000;

}

.toast.yellow {
  color: var(--text-dark);
  background-color: var(--yellow);
}

.toast.magenta {
  color: var(--white);
  background-color: var(--magenta);
}

.toast.cyan {
  color: var(--text-dark);
  background-color: var(--cyan);
}

.toast .toast-header {
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  padding: 0.75rem 1rem;
  padding-bottom: 0.25rem
}

.toast .toast-title {
  flex-grow: 1;
}

.toast .toast-time {
  margin-right: 0.75rem;
  font-size: 0.6rem;
  font-weight: 600;
  margin-top: 0.2rem;
  opacity: 0.6;
}

.toast a.toast-close.close {
  color: black;
  font-weight: 600;
  padding-right: 0.1rem;
  z-index: 10000;
}

.toast.magenta a.toast-close.close {
  color: var(--white);
}

.toast .toast-body {
  height: fit-content;
  padding: 1rem;
  font-size: 0.8rem;
  width: 90%;
  padding-top: 0.25rem;
  padding-bottom: 0.75rem;
  font-weight: 500;
}

.toast-icon {
  margin-right: 0.2rem;
}

.balance-highlight {
  transform: scale(1.2);
  transition: all 0.2s;
}

.wallet-balance {
  transition: all 0.2s;
}

.server-select {
  display: inline;
}

.server-select select {
  max-height: 20px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Remove default arrow */
  padding-left: 10px;
  padding-right: 10px;
  /* padding-bottom:10px; */
  background: var(--card-bg-color);
  border-radius: 8px;
  border: none;
  color: white;
  font-weight: 700;
  font-size: 16px;
  font-family: Poppins, Arial, sans-serif;
}



.server-select select::-ms-expand {
  display: none;
  /* Hide the default arrow in Internet Explorer 10 and Internet Explorer 11 */
}

.server-select select:active,
.server-select select:focus-visible {
  outline: none;
}

@media screen and (max-width: 810px) {

  .server-select select {
    font-size: 0.6rem;
    padding-right: 0;
  }
}

.mod-banner {
  position: relative;
  background: var(--bg-dark);
  z-index: 10000;
  padding: 0.5rem 3rem;
  margin-top: -10px;
  text-align: center;
  font-weight: 600;
  margin-bottom: 1.5rem;
  -webkit-box-shadow: 0px 2px 10px 0px rgb(0 0 0 / 15%);
  -moz-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 2px 10px 0px rgb(0 0 0 / 15%);
  font-size: 1rem;
}

.mod-banner.magenta {
  background-color: var(--magenta);
  color: var(--white);
}

.mod-banner.cyan {
  background-color: var(--cyan);
  color: var(--text-dark);
}

.mod-banner.yellow {
  background-color: var(--yellow);
  color: var(--text-dark);
}

a.discord-button {
  background: var(--white);
  padding: 0.4rem 2rem 0.2rem 2rem;
  border-radius: 2rem;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-dark);
  display: inline-flex;
  justify-content: center;
  transition: all 0.2s;

}

a.discord-button:hover {
  transform: scale(1.1) translate3d(0, 0, 0) perspective(1px);
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
}

a.discord-button img {
  padding-left: 0.2rem;
}

.top-content.align-center.player {
  min-width: 280px;
  /* fix for 1px jump on login */
}

.tooltip-info {
  position: relative;
  background: #c0cefa;
  padding: 0.15rem;
  border-radius: 0.52rem;
  width: 0.6rem;
  height: 0.6rem;
  font-size: 0.6rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: var(--text-dark);
  font-weight: 700;
  margin-left: 0.1rem;
  line-height: 1;
}

.tooltip-info .tooltip-line {
  font-size: 0.75rem;
  line-height: 1.2;
}


.tooltip-text {
  visibility: hidden;
  min-width: 17rem;
  background-color: var(--bg-tooltip);
  color: var(--white);
  text-align: center;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  position: absolute;
  z-index: 100;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.2s;
  margin-bottom: 2.25rem;
  font-weight: 600;
  -webkit-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
}

.tooltip-text-below {
  visibility: hidden;
  min-width: 17rem;
  background-color: var(--bg-tooltip);
  color: var(--white);
  text-align: center;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  position: absolute;
  z-index: 100;
  -webkit-transform: translateY(+50%);
  transform: translateY(+50%);
  opacity: 0;
  transition: opacity 0.2s;
  margin-bottom: -2.25rem;
  font-weight: 600;
  -webkit-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
}

.tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -0.5rem;
  border-width: 0.5rem;
  border-style: solid;
  border-color: var(--bg-tooltip) transparent transparent transparent;
  -webkit-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
}

.tooltip-text-below::after {
  content: "";
  position: absolute;
  top: -15px;
  left: 50%;
  margin-left: -0.5rem;
  border-width: 0.5rem;
  border-style: solid;
  border-color: transparent transparent var(--bg-tooltip) transparent;
  -webkit-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px -2px -10px 0px rgba(0, 0, 0, 0.15);
}

.tooltip-info:hover {
  cursor: pointer;
}

.tooltip-info:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
  position: absolute;
  z-index: 100;
}

.tooltip-info:hover .tooltip-text-below {
  visibility: visible;
  opacity: 1;
  position: absolute;
  z-index: 100;
}


.tooltip-line {
  margin-bottom: 0.2rem;
  display: inline-block;
}

.gp-game .wrapper .mobile-info {
  text-align: center;
  /* display: none; */
}

.gp-game .wrapper .mobile-info .wrapper {
  color: var(--white);
}

@media screen and (max-width: 810px) {
  .gp-game .wrapper .mobile-info {
    grid-column: 1 / 3;
    grid-row-start: 4;
    display: grid;
  }

  .gp-game .wrapper .mobile-info .wrapper {
    grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr);
  }

  .gp-game .wrapper .mobile-info .touch-info {
    grid-column: 1 / 3;
  }
}

@media screen and (max-width: 667px) {
  .gp-game .wrapper .mobile-info {
    grid-column: 1 / 3;
    grid-row-start: 6;
    display: grid;
  }

  .gp-game .wrapper .mobile-info .wrapper {
    grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr);
  }

  .gp-game .wrapper .mobile-info .touch-info {
    grid-column: 1 / 3;
  }
}


@media screen and (max-width: 415px) {
  .gp-game .wrapper .mobile-info {
    grid-column: unset;
    grid-row-start: 4;
    display: grid;
  }

  .gp-game .wrapper .mobile-info .wrapper {
    grid-template-columns: 1fr
  }

  .gp-game .wrapper .mobile-info .touch-info {
    grid-column: unset;
  }
}


@media screen and (max-width: 1366px) and (max-height: 840px) {
  section.gp-game {
    padding-top: 0;
  }

  nav .logo {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    margin-top: 0;
  }

  nav.navbar ul.main-nav {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
  }
}

@media screen and (max-width: 768px) and (max-height: 840px) {
  section.gp-game {
    padding-top: 0;
  }

  nav .logo {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}


/* Settings Page */
.setting label {
  cursor: pointer;
}

.setting {
  text-align: left;
  margin-left: 0.25rem;
  margin-right: 0.25rem;
  margin-bottom: 0.75rem;
}

.switch {
  position: relative;
  display: inline-block;
  width: 3rem;
  height: 1.75rem;
  margin-right: 0.5rem;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-dark);
  -webkit-transition: .4s;
  transition: .4s;
}

.toggle:before {
  position: absolute;
  content: "";
  height: 1.25rem;
  width: 1.25rem;
  left: 0.25rem;
  bottom: 0.25rem;
  background-color: var(--white);
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.toggle {
  background-color: var(--magenta);
}

input:focus+.toggle {
  box-shadow: none;
}

input:checked+.toggle:before {
  -webkit-transform: translateX(1.25rem);
  -ms-transform: translateX(1.25rem);
  transform: translateX(1.25rem);
}

.toggle.round {
  border-radius: 1.5rem;
}

.toggle.round:before {
  border-radius: 50%;
}

.radiobtns {
  display: block;
  position: relative;
  padding-left: 2.2rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-bottom: 0.5rem;
}

.radiobtns input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.radiobtn {
  position: absolute;
  top: 0;
  left: 0;
  height: 1.75rem;
  width: 1.75rem;
  background-color: var(--bg-dark);
  border-radius: 50%;
}

.radiobtns input:checked~.radiobtn {
  background-color: var(--magenta);
}

.radiobtn:after {
  content: "";
  position: absolute;
  display: none;
}

.radiobtns input:checked~.radiobtn:after {
  display: block;
}

.radiobtns .radiobtn:after {
  top: 0.25rem;
  left: 0.25rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--white);
}

.setting-title {
  text-align: left;
  display: flex;
  margin-bottom: 0.25rem;
  font-weight: 700;
  margin-top: 2rem;
}

.setting-title.nomargin {
  margin-top: 0rem;
}

.slider {
  -webkit-appearance: none;
  height: 1rem;
  border-radius: 0.5rem;
  background: var(--magenta);
  outline: none;
  opacity: 1;
  -webkit-transition: .2s;
  transition: opacity .2s;
  margin-top: 2rem;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--white);
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--white);
  cursor: pointer;
}

.server a.cta-button {
  margin-left: 0.5rem;
}



/* TESTING --- REMOVE ON LIVE VERSION */

.testing {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: var(--bg-dark);
  z-index: 1000000000000;
  padding: 1rem 3rem;
}

.test-button {
  background: var(--magenta);
  border-radius: 2rem;
  color: var(--white);
  border: none;
  padding: 0.4rem 0.8rem;
  font-family: Poppins, Arial, sans-serif;
  font-weight: 600;
}

.test-button:hover {
  cursor: pointer;
  background: var(--cyan);
  color: var(--text-dark)
}


/* Tournament Page */


.gp-game .wrapper .wrapper.leaderboard {
  grid-template-columns: minmax(90%, 1fr) minmax(10%, 1fr);
}

.gp-game .wrapper .wrapper.leaderboard.points {
  grid-template-columns: minmax(80%, 1fr) minmax(20%, 1fr);
}

.leaderboard .card-body {
  text-align: left;
  display: inline-flex;
  font-weight: 600;
}

.tournament-info .card-body {
  text-align: left;
  font-weight: 600;
}

.leaderboard .card-body .leaderboard-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 99%;
  padding-left: 0.2rem;
}

.gp-game .leaderboard .card-body,
.gp-game .tournament-info .card-body,
.gp-game .tournament-rules .card-body {
  margin-top: 0.1rem;
  margin-bottom: 0.1rem;
}

.gp-game p.card-body.leaderboard {
  margin-bottom: 0.1rem;
}

.gp-game .card-body.align-right {
  justify-content: right;
  text-align: right;
}

.gp-game.tournament .card-title {
  margin-bottom: 0.5rem;
}

.gp-game.tournament .roy-balance-wrapper,
.gp-game.tournament .vp-balance-wrapper {
  margin-bottom: 0.75rem;
}

.gp-game .leaderboard .card-body.first {
  color: var(--yellow);
}

.gp-game.tournament .tournament-timer {
  color: var(--yellow);
  font-weight: 600;
}

.tournament-info .card-body.align-right {
  font-size: 0.7rem;
}

.tournament-info .card-body.align-right span,
.tournament-info .card-body.tournament-timer.align-right {
  font-size: 0.9rem;
}

.tournament-info .card-body.tournament-timer.align-right {
  /* margin-bottom: 0.5rem; */
  -webkit-animation: timer-pulse 1s ease-in-out infinite alternate;
  -moz-animation: timer-pulse 1s ease-in-out infinite alternate;
  animation: timer-pulse 1s ease-in-out infinite alternate;
}

@keyframes timer-pulse {
  from {
    transform: scale(1.0);
  }

  to {
    transform: scale(1.05);
  }
}

.tournament-rules {
  font-weight: 600;
}

.tournament-rules .card-body.tournament-placement {
  margin-bottom: 1rem;
}

.tournament-rules .card-body.tournament-goal {
  margin-top: 1rem;
}

/* Training Page */

.gp-game.training .card-body p {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

/* Private Game Page */

.gp-game .wrapper .wrapper.private-game-info {
  grid-template-columns: minmax(35%, 1fr) minmax(65%, 1fr);
}

.gp-game.private .card-body p {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.private-game-info .card-body {
  text-align: left;
  font-weight: 600;
}

.private-game-info .card-body.align-right {
  font-size: 0.7rem;
}

.private-game-info .card-body.align-right span {
  font-size: 0.9rem;
}

.private-game-info .col {
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
}

.gp-game.private .no-margin-top {
  margin-top: 0;
}

.gp-game.private .roy-balance-wrapper,
.gp-game.private .vp-balance-wrapper {
  margin-bottom: 0.85rem;
}


.wheel2 {
  position: absolute;
  left: 60px;
  top: 60px;
  font-size: 17px;
  width: 80px;
  text-align: center;
  background: white;
  color: black;
  height: 80px;
  border-radius: 160px;
  line-height: 80px;
  overflow-y: clip;
  vertical-align: middle;
}

.hp-game {
  z-index: 1;
  position: relative;
}

.glowing-drop-shadow {
  /* background-color: #ccc; */
  /* border: 1px solid transparent; */
  -webkit-animation: glow 1s infinite alternate;
  -webkit-transition: border 1s linear, box-shadow 1s linear;
  -moz-transition: border 1s linear, box-shadow 1s linear;
  transition: border 1s linear, box-shadow 1s linear;
}


@-webkit-keyframes glow {
  to {
    border-color: #fdfdfd;
    -webkit-box-shadow: 0 0 0px 3px #fdfdfd;
    -moz-box-shadow: 0 0 0px 3px #fdfdfd;
    box-shadow: 0 0 0px 3px #fdfdfd;
  }
}

.modal {
  /* display: none; /* Hidden by default */
  display: block;
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--black);
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-dialog.card {
  max-width: 26rem;
  margin: 10% auto;
}

.modal-header {
  display: flex;
}


.modal-input {
  display: block;
  width: 100%;
  height: 2.2rem;
  border-radius: 0.5rem;
  border: none;
  padding: 0.5rem;
  margin-bottom: 1rem;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  font-family: Poppins, Arial, sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--text-dark);

}

.input-currency-wrapper {
  display: flex;
  margin-bottom: 1rem;
}

.modal-input.with-currency {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  display: inline-flex;
  margin-bottom: 0;
}

.input-currency {
  display: inline-flex;
  padding: 0.5rem;
  padding-left: 0.4rem;
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  background: var(--white);
  color: var(--text-dark);
  font-family: Poppins, Arial, sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  transition: all 0.30s ease-in-out;
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
}

.input-currency:hover {
  box-shadow: 0 0 5px var(--yellow);
}


.modal-form label {
  display: block;
  text-align: left;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.1rem 0.2rem;
}

.withdraw-info-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 1.5rem;
}

.withdraw-info {
  text-align: left;
}

.withdraw-info span {
  font-size: 0.8rem;
  display: block;
}

.withdraw-info span {
  font-size: 0.8rem;
  font-weight: 600;
  display: block;
  padding-left: 0.2rem;
}

.withdraw-confirmation-wrapper {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin-top: 2rem;
  align-items: center;
  margin-bottom: 1rem;
}

.withdraw-summary {
  grid-column: 1 / 6;
  text-align: left;
  line-height: 1;
}

.withdraw-summary span.label {
  font-size: 0.8rem;
  font-weight: 600;
}

.withdraw-summary span.fee {
  font-size: 0.6rem;
  font-weight: 600;
}

.withdraw-summary span.value {
  font-weight: 700;
  color: var(--magenta);
  font-size: 1.55rem;
  display: block;
  margin-top: 0.3rem;
}

.modal-submit:hover {
  cursor: pointer;
}

input[type=text],
select {
  transition: all 0.30s ease-in-out;
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
}

input[type=text]:focus,
select:focus {
  box-shadow: 0 0 5px var(--magenta);
}

.modal-title {
  margin-top: 0.5rem;
  text-align: left;
  font-size: 1.6rem;
  display: inline-block;
  flex-grow: 1;
  margin-bottom: 1.5rem;
}

.modal-dialog a.modal-close.close {
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 600;
}

.blockchain-info span.label {
  display: block;
  text-align: left;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.1rem 0.2rem;
}

.blockchain-info img.img {
  max-width: 4rem;
}

.blockchain-info {
  text-align: left;
  margin-top: 1.5rem;
}

.blockchain-info-wrapper {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
}

.blockchain-info .description {
  font-size: 0.8rem;
  margin-left: 1rem;
}

.withdraw-setting label {
  font-weight: 400;
  font-size: 0.7rem;
  align-items: center;
  display: flex;
}

.wallet .wrapper {
  grid-template-columns: repeat(3, 1fr);
}

.wallet .wrapper .wrapper {
  grid-template-columns: repeat(2, 1fr);
}

.wallet .wrapper .wrapper .col {
  padding: 0.5rem;
}

.wallet-card-portfolio {
  grid-column: 2 / 4;
}

.wallet .card-title-tiny {
  font-size: 0.7rem;
  font-weight: 600;
  margin-top: 0.4rem;
  margin-bottom: 0.1rem;
}

.wallet .card-content {
  padding: 0.75rem 1rem;
}

/* .no-wallet .card-content {
  padding-top: 0;
  padding-bottom: 2rem;
} */

.no-wallet .wrapper {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 1rem;
}

.no-wallet .additional-info {
  margin-top: 2rem;
  text-align: center;
}

table {
  caption-side: bottom;
  border-collapse: collapse;
}

.table-dark {
  --bs-table-bg: #212529;
  --bs-table-striped-bg: #2c3034;
  --bs-table-striped-color: #fff;
  --bs-table-active-bg: #373b3e;
  --bs-table-active-color: #fff;
  --bs-table-hover-bg: #323539;
  --bs-table-hover-color: #fff;
  color: #fff;
  border-color: #373b3e;
  font-size: 14px;


}

th {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}

.table> :not(:last-child)> :last-child>* {
  border-bottom-color: currentColor;
}

.table> :not(caption)>*>* {
  padding: 0.5rem 0.5rem;
  background-color: var(--bs-table-bg);
  background-image: linear-gradient(var(--bs-table-accent-bg), var(--bs-table-accent-bg));
  border-bottom-width: 1px;
}


.better-scollbar::-webkit-scrollbar {
  width: 20px;
  background-color: transparent;
}

.better-scollbar::-webkit-scrollbar-track {
  background-color: transparent;
}

.better-scollbar::-webkit-scrollbar-thumb {
  background-color: #d6dee1;
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
}

.better-scollbar::-webkit-scrollbar-thumb:hover {
  background-color: #a8bbbf;
}

/* entire container, keeps perspective */
.flip-container {
  perspective: 1000px;
}

.flip-container,
.front {
  transform-style: preserve-3d;
}


/* flip speed goes here */
.flipper {
  transition: 0.6s;
  transition-delay: 0.6s;
  transform-style: preserve-3d;
  position: absolute;
}

/* hide back of pane during swap */
.front,
.back {
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.front {
  z-index: 1;
}

.back {
  transform: rotateX(-180deg);
  animation: toFront 0.3s linear normal forwards;
}

.vertical.flip-container {
  position: relative;
}

/* .vertical.flip-container .back {
  animation-delay: 0.3s;
  animation: toBack 0.3s linear normal forwards;
}  */

@keyframes toBack {
  0% {
    z-index: 0;
  }

  100% {
    z-index: 1;
  }
}

@keyframes toFront {
  0% {
    z-index: 1;
  }

  100% {
    z-index: 0;
  }
}

@keyframes glow2 {
  0% {
    box-shadow: 0 0 5px -5px #e4e1f4;
  }

  50% {
    box-shadow: 0 0 5px 5px #e4e1f4;
  }

  100% {
    box-shadow: 0 0 5px -5px #e4e1f4;
  }
}

.vertical.flip-container .flipper {
  transform-origin: 100% 115px;
  /* half of height */
}

.flip-panel {
  transform: rotateX(-180deg);
}

.glow-panel {
  animation: toBack 0.3s 0.3s linear normal forwards, glow2 1.2s 0s;
}

/* .vertical.flip-container:hover .flipper {
  transform: rotateX(-180deg);
  
} */