/*FONTS CSS*/
@import url('font-icons.css');

@font-face {
  font-family: 'Block Berthold';
  src:url('../fonts/BlockBE-Condensed.eot');
  src:url('../fonts/BlockBE-Condensed.eot?#iefix') format('embedded-opentype'),
  url('../fonts/BlockBE-Condensed.woff2') format('woff2'),
  url('../fonts/BlockBE-Condensed.woff') format('woff'),
  url('../fonts/BlockBE-Condensed.ttf') format('truetype'),
  url('../fonts/BlockBE-Condensed.svg#BlockBE-Condensed') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'HelveticaNeue';
  src:url('../fonts/HelveticaNeueMedium.eot');
  src:url('../fonts/HelveticaNeueMedium.eot?#iefix') format('embedded-opentype'),
  url('../fonts/HelveticaNeueMedium.woff2') format('woff2'),
  url('../fonts/HelveticaNeueMedium.woff') format('woff'),
  url('../fonts/HelveticaNeueMedium.ttf') format('truetype'),
  url('../fonts/HelveticaNeueMedium.svg#HelveticaNeueMedium') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'icons';
  src: url('../fonts/icons.eot?id4w01');
  src: url('../fonts/icons.eot?id4w01#iefix') format('embedded-opentype'),
  url('../fonts/icons.ttf?id4w01') format('truetype'),
  url('../fonts/icons.woff?id4w01') format('woff'),
  url('../fonts/icons.svg?id4w01#icons') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

:root {
  --clr-body: #191919;
  --clr-base: #fff;
  --clr-theme: #d0021b;
  --clr-theme1: #f47524;
  --clr-white: #ffffff;
  --clr-dark: #000000;
  --clr-yellow: #ffd040;
  --clr-red: #df1a23;
  --clr-light: #f1ede8;
  --clr-x-light: #e3dfda;
  --clr-green: #62a744;
  /*Fonts*/
  --font-head: 'Block Berthold';
  --font-base: 'HelveticaNeue';
  --font-htp-head: var(--font-head);
  --font-htp-base: var(--font-head);
  --font-htp-btn: var(--font-head);

  /*Loader Color*/
  --bg-loader: rgba(0, 0, 0, 0.8);
  --clr-loader: var(--clr-theme);
  /*Buttons*/
  --btn-primary:url('../images/green-btn.svg');
  --btn-green:url('../images/green-btn-lg.svg');
  --btn-secondary:url('../images/yellow-btn.svg');
  --btn-base:url('../images/red-btn.svg');
  --btn-black:url('../images/dark-btn.svg');
  --btn-dark-black:url('../images/black-btn.svg');

  /*Border*/
  --bdr-base: #ddd;
  --bdr-btn: #f6ca45;

  --bg-body:url("../images/main-bg.webp");
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  line-height: 1.3em;
}

* {
  ::-webkit-scrollbar {
    width: 5px;
    border-radius: 20px;
    height: 5px;
  }

  ::-webkit-scrollbar-thumb {
    background-color: var(--clr-theme1);
    border-radius: 20px;
    width: 5px;
    height: 5px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }
}

:focus {
  outline: none;
}

html {
  height: 100%;
  -webkit-text-size-adjust: none;
}

body {
  height: 100%;
  font-size: 3.4vmin;
  overflow: hidden;
  font-family: var(--font-base);
  color: var(--clr-base);
  background: var(--clr-base);
  line-height: 1.3em;
  font-weight: normal;
  letter-spacing: 0.1vmin;
}

a {
  text-decoration: none;
  outline: none;
  color: var(--clr-base);
  outline: none;
  cursor: pointer;
}

a:hover,
a:focus {
  text-decoration: none;
  outline: none;
}

img {
  padding: 0;
  margin: 0;
  max-width: 100%;
  border: none;
  height: auto;
}

p {
  line-height: 1.3em;
  margin: 0;
  padding: 0;
  font-size: 1.4vmin;
  color: var(--clr-base);
  font-weight: normal;
}

/*HEADING CSS*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  margin: 0;
  padding: 0;
  color: var(--clr-base);
  font-family: var(--font-head);
}

/*LIST CSS*/
ul,
ul li,
ol,
ol li {
  padding: 0;
  margin: 0;
  list-style: none;
}

/*INPUT CSS*/
.form-group {
  float: left;
  width: 100%;
  margin-bottom: 1.6vmin;
  position: relative;
}

.input-group {
  float: left;
  width: 100%;
  position: relative;
}

select,
select option {
  width: 100%;
  box-sizing: border-box;
  -moz-appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
}

.form-control {
  float: left;
  width: 100%;
  font-size: 4vmin;
  outline: medium none;
  height: 8vmin;
  color: var(--clr-base);
  border: 0;
  background: var(--clr-white);
  line-height: 1.3em;
  padding: 0;
  font-family: var(--font-base);
  font-weight: normal;
  border-radius: 0.5vmin;
  padding: 0 2vmin;
  color: var(--clr-dark);
}

.form-control:focus {
  outline: none;
  transition: all 0.3s ease 0s;
}

.form-control:disabled {
  background: #f2f2f2;
  color: #C7C6C6;
}

input[type="submit"],
input[type="text"],
input[type="password"],
textarea {
  -webkit-appearance: none;
}

input[type="submit"],
button {
  cursor: pointer;
  border: 0;
}

textarea.form-control {
  resize: vertical;
  height: 10vmin;
}

/*NORMAL CSS*/
::selection {
  background: #0067ab;
  color: #fff;
}

::-moz-selection {
  background: #0067ab;
  color: #fff;
}

.containers {
  margin: 0 auto;
  width: 100%;
  max-width: 500px;
  padding: 0 10px;
}

.pull-left {
  float: left;
}

.pull-right {
  float: right;
}

.block {
  float: left;
  width: 100%;
}

.event-none {
  pointer-events: none;
}

.disabled {
  pointer-events: none;
  opacity: 0.5;
}

.icon {
  display: inline-block;
  font-size: 2vmin;
  vertical-align: middle;
}

/*BUTTON CSS*/
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.2vmin;
  height: 100%;
  padding: 1.4vmin 2.4vmin;
  text-align: center;
  color: #333;
  font-size: 4.2vmin;
  font-family: var(--font-head);
  font-weight: normal;
  border-radius: 0.5vmin;
  background: #f9f9f9;
  -webkit-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
  border: 0;
  text-transform: uppercase;
}

.btn:hover {
  transform: scale(0.99);
}

.btn-label {
  float: left;
}

.btn-icon {
  float: left;
  width: 6vmin;
}

.btn-icon img {
  float: left;
  width: 100%;
}

.btn-primary {
  background-image: var(--btn-primary);
  color: var(--clr-white);
  background-size: 100% 100%;
  background-color: transparent;
}

.btn-green{
  background-image: var(--btn-green);
  color: var(--clr-white);
  background-size: 100% 100%;
  background-color: transparent;
}

.btn-secondary {
  background-image: var(--btn-secondary);
  color: var(--clr-dark);
  background-size: 100% 100%;
  background-color: transparent;
}

.btn-base {
  background-image: var(--btn-base);
  color: var(--clr-white);
  background-size: 100% 100%;
  background-color: transparent;
}

.btn-black {
  background-image: var(--btn-black);
  color: var(--clr-white);
  background-size: 100% 100%;
  background-color: transparent;
}

.btn-dark-black {
  background-image: var(--btn-dark-black);
  color: var(--clr-white);
  background-size: 100% 100%;
  background-color: transparent;
}

/* Loader CSS */
.loading-wrapper {
  position: fixed;
  float: left;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  text-align: center;
}

.loader-overlay {
  background: var(--bg-loader);
}

.page-overlay {
  float: left;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.loading-wrapper.content-loader {
  position: absolute;
  height: 100%;
}

.loading-wrapper.content-relative {
  position: relative;
  height: 200px;
  background: none;
  z-index: 1;
}

.loading-wrapper.scroll-loader {
  position: relative;
  height: 80px;
}

.loader-ring {
  display: inline-block;
  position: relative;
  width: 42px;
  height: 42px;
  border: 4px solid var(--clr-loader);
  border-color: var(--clr-loader) transparent var(--clr-loader) var(--clr-loader);
  animation: lds-ring 650ms linear infinite;
  border-radius: 50%;
}

@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }

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

/*Page CSS*/
.main-section {
  float: left;
  width: 100%;
  height: 100dvh;
}

.page-container {
  float: left;
  width: 100%;
  height: 100%;
}

/*Set Screens*/
.screen-wrap {
  float: left;
  width: 100%;
  height: 100dvh;
  background: rgba(0, 0, 0, 0.7);
  position: relative;
  z-index: 999;
  background-size: cover;
}

.screen-wrap-inner {
  float: left;
  width: 100%;
  height: 100%;
  padding: 2vmin 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.screen-widget {
  float: left;
  width: 100%;
}

.clear-bg {
  background: none !important;
}

.add-overlay {
  background: rgba(0, 0, 0, 0.7) !important;
}

.modal-item .screen-wrap-inner {
  animation: fadeInDown 0.3s;
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

/*Splash Screen CSS Start*/
.brand-logo-wrap {
  float: left;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.brand-logo-figure {
  float: left;
  width: 100%;
  max-width: 58vmin;
}

.brand-logo-figure img {
  float: left;
  width: 100%;
}

.action-info {
  float: left;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1vmin;
}

.action-info-inner {
  float: left;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 1vmin;
  max-width: 62vmin;
}

.button-bar {
  float: left;
  width: 100%;
}

.button-bar-inner {
  float: left;
  width: 100%;
  display: flex;
  gap: 1vmin;
  flex-wrap: wrap;
  flex-direction: column;
}

.button-col {
  float: left;
  width: 100%;
}

.button-col .btn {
  width: 100%;
}

.action-info .btn {
  justify-content: space-between;
  padding: 1.5vmin 3.4vmin 1.5vmin 3vmin;
}

.splash-remain-top {
  float: left;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 3.8vmin;
}

.remain-block {
  float: left;
  width: 100%;
  max-width: 62vmin;
  padding: 2vmin 3vmin 0 2vmin;
  position: relative;
  background:url('../images/splash-remain-bg.svg') no-repeat;
  background-size: 100% 100%;
}

.remain-fig {
  float: left;
  width: 100%;
}

.remain-fig img {
  float: left;
  width: 100%;
}

.remain-wrap {
  float: left;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.remain-col {
  float: left;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.remain-left {
  float: left;
  width: 100%;
  max-width: 65%;
}

.remain-right {
  float: left;
  width: 100%;
  max-width: 35%;
}

.remain-right-wrap {
  float: left;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0 1vmin;
}

.remain-title {
  float: left;
  width: 100%;
  color: var(--clr-dark);
  font-family: var(--font-head);
  font-size: 3.5vmin;
  text-transform: uppercase;
}

.remain-time {
  text-align: center;
  border-radius: 0.5vmin;
  min-width: 6vmin;
  display: flex;
  flex-direction: column;
  color: var(--clr-base);
  background: #ff0000;
  font-size: 2.2vmin;
  font-family: var(--font-head);
}

.remain-time-value {
  padding: 0;
}

.remain-time-label {
  font-size: 1.8vmin;
  padding: 0.5vmin 0;
  border-radius: 0 0 0.5vmin 0.5vmin;
  text-transform: uppercase;
  background: #c70001;
}

.remain-game-ft {
  float: left;
  width: 100%;
  text-align: center;
  font-family: var(--font-head);
  font-size: 2.8vmin;
  padding: 2vmin 0 1vmin;
}

.remain-prize-block {
  background:url('../images/splash-remain-bg-1.svg') no-repeat;
  background-size: 100% 100%;
  padding: 2vmin 3vmin;
}

.remain-prize-block .remain-game-ft {
  display: none;
}

.snap-ribbon{
  float: left;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.span-ribbon-inner{
  float: left;
  width: 100%;
  position: relative;
  max-width: 35vmin;
}
.ribbon-fig{
  float: left;
  width: 100%;
}
.ribbon-fig img{
  float: left;
  width: 100%;
}
.ribbon-title{
  float: left;
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotate(-45deg);
  
}
.ribbon-text{
  font-family: var(--font-head);
  text-transform: uppercase;
  color: #ffdf07;
  font-size: 3.8vmin;
  position: relative;
  top: -6vmin;
}

/* Splash Footer Start*/
.powered-by-outer {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-top: 0px;
  flex-wrap: wrap;
  text-align: center;
  position: fixed;
  bottom: 0.85vmin;
  left: 0;
  right: 0;
  font-size: 0;
}

.powered-text {
  float: left;
  width: 100%;
  font-size: 1.1vmin;
  color: rgba(255, 255, 255, 0.8);
  font-weight:600;
  text-transform: uppercase;
  margin-bottom: 0.6vmin;
}

.footer-logos {
  float: left;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-footer {
  float: left;
  width: 100%;
  max-width: 23vmin;
}

.logo-footer img {
  float: left;
  width: 100%;
}


/*Splash Screen CSS End*/

/*Point Challenge CSS Start*/
.congrats-splash-top .remain-block {
  background: transparent;
  padding: 0px;
  max-height: inherit;
}
.contest-splash-top.splash-remain-top, .congrats-splash-top.splash-remain-top {
  margin-top: 1vmin;
}
.contest-splash-top .remain-block {
  background: url('../images/point-challenge-desk-bg.svg') no-repeat;
  background-size: 100% 100%;
  max-height: inherit;
}
.contest-splash-top .remain-wrap {
  padding: 1vmin 0px 1.25vmin;
  margin-top: 1.5vmin;
}
.point-chall-block {
  float: left;
  width: 100%;
}
.point-chall-outer {
  float: left;
  width: 100%;
  position: relative;
  z-index: 1;
}
.point-chall-rays {
  float: left;
  width: 100%;
  position: absolute;
  max-width: 22vmin;
  top: 5vmin;
  margin: 0 auto;
  left: 0;
  right: 0;
  z-index: -1;
}
.point-chall-head-bar {
  float: left;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5vmin;
}
.point-chall-head {
  float: left;
  display: flex;
  align-items: center;
  font-family: var(--font-head);
  color: var(--clr-white);
  text-transform: uppercase;
}
.point-chall-head .col {
  float: left;
}
.point-chall-head .col.right {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}
.point-chall-num {
  font-size: 12vmin;
  color: var(--clr-yellow);
  line-height: 0.85em;
}
.point-chall-head-label {
  font-size: 7.8vmin;
  letter-spacing: 0.025em;
  line-height: 0.85em;
}
.point-chall-head-text {
  font-size: 2.55vmin;
  letter-spacing: 0.025em;
}
.total-chall-point-bar {
  float: left;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 0.4vmin;
}
.total-chall-point {
  float: left;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 4.8vmin;
  font-family: var(--font-head);
  color: var(--clr-white);
  line-height: 1em;
  background: var(--clr-yellow);
  --radius: 5vmin;
  border-radius: var(--radius);
  padding: 0.4vmin 4vmin;
  letter-spacing: 0.1em;
  min-width: 33vmin;
  position: relative;
  z-index: 1;
}
.total-chall-point:before {
  content: "";
  position: absolute;
  --spacing: 0.5vmin;
  left: var(--spacing);
  width: calc(100% - (var(--spacing) * 2));
  height: 100%;
  background: #b10215;
  border-radius: var(--radius);
  z-index: -1;
}
.progress-bar {
  float: left;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 0.6vmin;
  padding: 2vmin 0px;
}
.progress-bar .col {
  float: left;
  display: flex;
  align-items: center;
}
.progress-bar .col.left {
  width: 100%;
  max-width: 40vmin;
}
.progress-col {
  float: left;
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  --icon-size: 6vmin;
  padding-right: calc(var(--icon-size) - 1vmin);
}
.progress {
  float: left;
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  height: 4vmin;
  --radius: 5vmin;
  --radius-small: 1vmin;
  border-radius: var(--radius) var(--radius-small) var(--radius-small) var(--radius);
  --border-size: 0.225vmin;
  border: var(--border-size) solid var(--clr-white);
  background: var(--clr-dark);
  padding-right: 1vmin;
  overflow: hidden;
}
.progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto 0;
  float: left;
  width: 100%;
  max-width: var(--prog-fill-value);
  height: 100%;
  --radius: 5vmin;
  border-radius: var(--radius) var(--radius-small) var(--radius-small) var(--radius);
  background-color: #fcad3b;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.12) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.12) 75%, transparent 75%, transparent);
  background-size: 1.5vmin 1.5vmin;
  box-shadow: 0px 0px 1vmin rgba(255, 141, 0, 1) inset, 0px 0px 1vmin rgba(255, 141, 0, 1) inset, 0px 0px 1vmin rgba(255, 141, 0, 1) inset;
}
.progress-fig {
  position: absolute;
  top: calc((var(--icon-size) / 4) * -1);
  right: 0;
  width: var(--icon-size);
  float: right;
  z-index: 1;
}
.prog-count {
  display:inline-flex;
  align-items: center;
  position: absolute;
  left: 0.5vmin;
  top: 0;
  bottom: 0;
  height: 100%;
  font-size: 2.4vmin;
  line-height: 1.4em;
  font-family: var(--font-head);
  color: var(--clr-white);
  --text-stroke-size:0.156vmin;
  --text-stroke-size-neg:calc(var(--text-stroke-size) * -1);
  text-shadow: var(--text-stroke-size-neg) var(--text-stroke-size-neg) 0 var(--clr-dark), var(--text-stroke-size) var(--text-stroke-size-neg) 0 var(--clr-dark), var(--text-stroke-size-neg) var(--text-stroke-size) 0 var(--clr-dark), var(--text-stroke-size) var(--text-stroke-size) 0 var(--clr-dark);
}
.total-chall-limit {
  font-size: 2.8vmin;
  font-family: var(--font-head);
  color: var(--clr-white);
}
.last-updated-bar {
  float: left;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: -1vmin;
}
.last-updated-pre {
  float: left;
  font-size: 2vmin;
  color: var(--clr-yellow);
}
.point-chall-action {
  float: left;
  width: 100%;
  display: flex;
  justify-content: center;
}
.point-chall-action .button-bar {
  display: flex;
  gap: 0 1.6vmin;
  max-width: 17vmin;
}
.point-chall-action .btn-black {
  background: url('../images/dark-btn-sm-2.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.point-chall-action .button-col .btn {
  font-size: 2vmin;
  padding: 0px 1vmin;
}

.leaderboard-challenge-contest .leaderboard-top {
  background: url('../images/leaderboard-point-challenge-bg-desk.svg') no-repeat 0 0;
  background-size: 100% 100%;
  position: relative;
  padding-bottom: 1.225vmin;
  min-height: 45vmin;
}
.leaderboard-challenge-contest .leaderboard-top:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2vmin;
  height: 5.86vmin;
  width: 100%;
  background: var(--clr-white);
  z-index: -1;
}
.leaderboard-challenge-contest .leaderboard-data {
  max-height: 23.2vmin;
}
.contest-congrats-reward .reward-wallet-text {
  margin-bottom: 0px;
}
.contest-congrats-reward .progress-bar {
  margin-bottom: 4vmin;
}
.contest-congrats-reward .my-code-logo-wrap {
  padding: 1vmin 1.2vmin;
}
/*Point Challenge CSS End*/

.screen-widget.splash-widget {
  padding-bottom: 4vmin;
}

.close-modal {
  float: left;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2.5vmin;
}

.close-icon {
  float: left;
  width: 100%;
  cursor: pointer;
  -webkit-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
  display: flex;
  justify-content: center;
  align-items: center;
}

.close-icon:hover {
  transform: scale(0.92);
}

.close-icon img {
  float: left;
  width: 100%;
}

.back-to-bar {
  float: left;
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1.5vmin;
}

.back-to-btn {
  float: left;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 4.75vmin;
  gap: 0.6vmin;
  font-size: 2.2vmin;
  color: var(--clr-theme);
  text-transform: uppercase;
}

.back-to-btn .icon {
  font-size: 1.6vmin;
}

.screen-footer {
  float: left;
  width: 100%;
  position: absolute;
  bottom: 1vmin;
}

.footer-inner {
  float: left;
  width: 100%;
  display: flex;
  justify-content: center;
}

/* My Codes CSS Start */
.my-code-info {
  float: left;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 2vmin;
}

.my-code-card {
  float: left;
  width: 100%;
  max-width: 70vmin;
  background: var(--clr-theme);
  border-radius: 0.8vmin;
}

.my-code-code-info {
  float: left;
  width: 100%;
  text-align: center;
}

.card-title {
  float: left;
  width: 100%;
  font-size: 2.5vmin;
  font-family: var(--font-base);
  color: var(--clr-dark);
  letter-spacing: 0;
  text-align: center;
}

.card-title span {
  float: left;
  width: 100%;
  text-align: center;
  font-weight: 500;
}

.card-title-label {
  width: 100%;
  color: var(--clr-yellow);
}

.card-pre {
  float: left;
  width: 100%;
  font-size: 3.5vmin;
  text-transform: uppercase;
  text-shadow: 0px 0.3vmin 0px rgba(0, 0, 0, 0.27);
  margin-top: 1vmin;
}

.my-code-action {
  float: left;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1.5vmin;
}

.my-code-widget .brand-logo-figure {
  max-width: 38vmin;
}

.my-code-card .button-col .btn {
  font-size: 3.8vmin;
}

.enter-code-info {
  float: left;
  width: 100%;
}

.enter-code-info .my-code-action {
  margin-top: 0.75vmin;
}

.enter-code-outer {
  float: left;
  width: 100%;
  margin-top: 1vmin;
  margin-bottom: 1.5vmin;
  position: relative;
}

.enter-my-code {
  float: left;
  width: 100%;
}

.enter-my-code .form-control {
  border: 0.22vmin solid var(--clr-dark);
  font-size: 2.8vmin;
}

.enter-my-code .form-control::placeholder {
  color: #c7c7c7;
}

.my-code-logo-wrap {
  float: left;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0 1vmin;
  padding: 0.45vmin 1.2vmin;
  position: relative;
}

.my-code-logo-wrap::after {
  content: '';
  position: absolute;
  bottom: 0;
  top: auto;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 0.2vmin;
  width: calc(100% - 2vmin);
  background: rgba(255, 255, 255, 0.431);
}

.client-logo-figure {
  float: left;
  width: 100%;
  max-width: 15vmin;
}

.client-logo-figure img {
  float: left;
  width: 100%;
}

.my-code-mid {
  float: left;
  width: 100%;
}

.code-tab-wrap {
  float: left;
  width: 100%;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  padding: 0 2vmin;
  margin-top: 2vmin;
}

.my-code-wrap .code-tab-wrap {
  max-height: 24.5vmin;
  overflow: hidden;
  overflow-y: scroll;
}

.code-tab-content {
  float: left;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0, 0, 0, 0.102);
  max-width: calc(100% - 0.4vmin);
  margin-left: 0.2vmin;
  margin-right: 0.2vmin;
  border-radius: 0.4vmin;
  margin-top: 0.8vmin;
}

.code-tab-content:first-child {
  margin: 0;
  float: left;
  width: 100%;
  max-width: 100%;
}

.code-tab-content:nth-child(2) {
  margin-top: 0.4vmin;
}

.code-title-wrap {
  float: left;
  width: 100%;
  margin-top: 1vmin;
  position: relative;
  z-index: 2;
}

.congrats-wrap .code-title-wrap {
  margin-top: 1vmin;
}

.code-tab-title {
  text-align: center;
  font-size: 5.8vmin;
}

.code-title-pre {
  float: left;
  width: 100%;
  text-align: center;
  font-size: 2.5vmin;
  margin-top: 0.5vmin;
  font-family: var(--font-base);
}

.code-tab-title-pre {
  float: left;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  font-size: 3vmin;
  font-family: var(--font-base);
  margin-top: 0.75vmin;
}

.code-tab-title-pre span {
  text-transform: none;
}

.congrats-wrap .code-tab-title {
  text-transform: uppercase;
}

.code-tab-head-wrap {
  background: var(--clr-theme);
  position: sticky;
  top: 0;
  z-index: 2;
  height: 3vmin;
}

.code-tab-head {
  font-size: 1.8vmin;
  font-family: var(--font-head);
  font-weight: 400;
  color: var(--clr-x-light);
  float: left;
  width: 100%;
  display: flex;
  align-items: center;
}

.code-tab-data {
  float: left;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0.75vmin 0;
  font-size: 2vmin;
  gap: 1vmin;
  font-family: var(--font-head);
}

.code-tab-head:first-child,
.code-tab-data:first-child {
  padding-left: 3vmin;
}

.code-tab-head:last-child,
.code-tab-data:last-child {
  display: flex;
  justify-content: center;
}

.code-tab-head:nth-child(2) {
  padding-left: 2vmin;
}

.code-copy-data {
  float: left;
  width: 100%;
  min-width: 10vmin;
  max-width: 13vmin;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  font-family: var(--font-head);
  background: var(--clr-dark);
  border: 0.21vmin dotted var(--bdr-btn);
  padding: 1vmin 1.5vmin;
  border-radius: 0.4vmin;
  position: relative;
}

.clock-icon {
  float: left;
  width: 100%;
  max-width: 2vmin;
  margin-right: -0.25vmin;
}

.clock-icon img {
  float: left;
  width: 100%;
}

.copy-icon {
  float: left;
  width: 100%;
  min-width: 1.2vmin;
  max-width: 1.2vmin;
  position: absolute;
  right: 0.4vmin;
  bottom: 0.4vmin;
}

.copy-icon-fig {
  float: left;
  width: 100%;
}

.copy-icon-fig img {
  float: left;
  width: 100%;
}

.my-code-bottom {
  float: left;
  width: 100%;
  padding: 3vmin 2vmin 1.8vmin;
  background: var(--clr-base);
  border-radius: 0 0 0.8vmin 0.8vmin;
}

.code-md-bg {
  float: left;
  width: 100%;
  position: relative;
  bottom: -1.4vmin;
}

.md-bg-fig {
  float: left;
  width: 100%;
}

.md-bg-fig img {
  float: left;
  width: 100%;
  min-height: 12vmin;
}

.md-bg-line-fig {
  float: left;
  width: 100%;
  position: absolute;
}

.md-bg-line-fig img {
  float: left;
  width: 100%;
  min-height: 7.5vmin;
}

.code-coke-cup {
  float: left;
  width: 100%;
  max-width: 7vmin;
  position: absolute;
  right: 4vmin;
}

.code-coke-cup img {
  float: left;
  width: 100%;
}

.my-code-wrap .copy-code-inner {
  font-size: 1.25vmin;
}

.my-code-wrap .copy-code {
  z-index: 3;
  top: -4vmin;
}

.alert-info {
  float: left;
  width: 100%;
  padding-top: 0.2vmin;
  padding-left: 0.5vmin;
  font-size: 1.25vmin;
  font-family: var(--font-base);
  font-weight: 500;
  position: absolute;
  top: calc(100% - 0.15vmin);
}

.danger-alert {
  color: var(--clr-red);
}

.submit-alert {
  color: var(--clr-green);
}

/* My Codes CSS End */

/* Congrats CSS Start */
.congrats-mid {
  float: left;
  width: 100%;
  position: relative;
}

.congrats-coke-mid {
  float: left;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.congrats-bg {
  float: left;
  width: 100%;
  position: absolute;
  max-width: 60vmin;
}

.congrats-bg img {
  float: left;
  width: 100%;
}

.congrats-rays {
  float: left;
  width: 100%;
  position: absolute;
  max-width: 43vmin;
  top: 0;
}

.congrats-rays img {
  float: left;
  width: 100%;
}

.coke-cup {
  float: left;
  width: 100%;
  max-width: 19vmin;
  z-index: 1;
  position: absolute;
  filter: drop-shadow(0 0 5vmin #ff3f56);
}

.coke-cup img {
  float: left;
  width: 100%;
}

.congrats-wrap .button-bar-inner {
  flex-wrap: nowrap;
  flex-direction: row;
  gap: 0 1.6vmin;
}

.congrats-wrap .btn-primary {
  background:url('../images/green-btn-sm.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.congrats-wrap .btn-black {
  background:url('../images/dark-btn-sm.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.congrats-wrap .button-col .btn {
  font-size: 3vmin;
  padding: 1.8vmin 0.5vmin;
}

.congrats-wrap .card-title {
  text-align: center;
  font-size: 3.2vmin;
  padding: 0 3.8vmin;
}

.congrats-card-bg {
  float: left;
  width: 100%;
  position: relative;
  bottom: -1vmin;
  margin-top: -3vmin;
}

.congrats-card-bg img {
  float: left;
  width: 100%;
}

.congrats-wrap .md-bg-fig {
  position: absolute;
  bottom: -1vmin;
}

.congrats-code-info {
  float: left;
  width: 100%;
}

.congrats-wrap .btn-icon {
  width: 5vmin;
}

.congrats-coke-left {
  float: left;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  flex-direction: column;
  gap: 1vmin 0;
  padding-top: 3.5vmin;
  padding-left: 10vmin;
  max-width: max-content;
}

.congrats-coke-right {
  float: left;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  max-width: 40%;
}

.share-game-title {
  color: var(--clr-yellow);
  font-size: 2.65vmin;
  font-family: var(--font-base);
  text-align: center;
  padding: 0 9vmin;
  margin-top: 1vmin;
  margin-bottom: 2vmin;
  position: relative;
  z-index: 2;
}
.share-game-bottom{
  color: var(--clr-yellow);
  font-size: 2.65vmin;
  font-family: var(--font-base);
  text-align: center;
  padding: 0 10vmin;
  margin-top: 5vmin;
  position: relative;
  z-index: 2;
  margin-bottom: -4vmin;
}

.share-code-wrap {
  float: left;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 9vmin;
  flex-wrap: wrap;
}

.congrats-copy-data {
  font-size: 3.8vmin;
  max-width: max-content;
  padding: 1vmin 2.6vmin 1vmin 1.4vmin;
  border-radius: 1vmin;
  position: relative;
}

.copy-code {
  content: '';
  position: absolute;
  display: none;
  top: -4.5vmin;
  padding: 0.57vmin;
  left: auto;
  right: auto;
  bottom: auto;
  float: left;
  width: 100%;
  max-width: max-content;
  background: var(--clr-dark);
  border-radius: 0.5vmin;
  box-shadow: 0px 0px 1vmin rgba(255, 255, 255, 0.5);
  border: 0.1vmin solid var(--clr-base);
}

.copy-code-inner {
  float: left;
  width: 100%;
  font-size: 1.5vmin;
  text-transform: none;
}

.copy-code::after {
  position: absolute;
  content: '';
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 1vmin;
  width: 1vmin;
  background: var(--clr-dark);
  border-bottom: 0.1vmin solid var(--clr-base);
  border-right: 0.1vmin solid var(--clr-base);
  top: calc(100% - 0.5vmin);
  transform: rotate(45deg);
}

.code-copy-data:hover .copy-code {
  display: block;
}

.congrats-copy-icon {
  min-width: 2vmin;
  max-width: 2vmin;
}

.expire-in {
  float: left;
  width: 100%;
  text-align: center;
}

.expire-title {
  float: left;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 1vmin;
  color: var(--clr-x-light);
  font-size: 1.35vmin;
  text-transform: uppercase;
  font-family: var(--font-base);
}

.expire-wrap {
  float: left;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 1vmin;
}

.clock-time {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2vmin;
  line-height: normal;
  font-family: var(--font-base);
}

.clock-time span {
  min-width: 3vmin;
}

.congrats-share .congrats-rays {
  max-width: 30vmin;
  top: -4vmin
}

.arrow-icon {
  float: left;
  width: 100%;
  position: absolute;
  max-width: 6vmin;
  left: 2vmin;
  top: -2.5vmin;
  transform: rotate(-46deg);
}

.coke-r{
  font-size: 1.3vmin;
}

.coke-r-head{
  font-size: 2vmin;
}
.arrow-icon img {
  float: left;
  width: 100%;
}

.congrats-popup-line {
  float: left;
  width: 100%;
  position: absolute;
  bottom: 8.8vmin;
}

.congrats-popup-line img {
  float: left;
  width: 100%;
  min-height: 8.8vmin;
}

.share-popup-line {
  float: left;
  width: 100%;
  position: absolute;
  bottom: 0.5vmin;
}

.share-popup-line img {
  float: left;
  width: 100%;
  min-height: 8.8vmin;
}

.congrats-share .coke-cup {
  max-width: 12vmin;
  top: 0.5vmin;
}

.share-popup-md-bg {
  float: left;
  width: 100%;
  position: absolute;
  bottom: -2vmin;
}

.share-popup-md-bg img {
  float: left;
  width: 100%;
}

.desk-item {
  display: block;
}

.mob-item {
  display: none;
}

/* Congrats CSS End */

/* Better Luck CSS Start */
.better-luck-pre {
  color: var(--clr-yellow);
  font-size: 3.3vmin;
  font-family: var(--font-base);
  text-align: center;
  padding: 0 3vmin;
  margin-top: 0.8vmin;
  position: relative;
  z-index: 2;
}

.coke-bottle {
  float: left;
  width: 100%;
  max-width: 24vmin;
  z-index: 2;
}

.coke-bottle img {
  float: left;
  width: 100%;
}

.coke-bottle-bg {
  float: left;
  width: 100%;
  position: absolute;
  max-width: 53vmin;
  top: -9vmin;
  left: 5.45vmin;
}

.coke-bottle-bg img {
  float: left;
  width: 100%;
}

.luck-popup-line {
  float: left;
  width: 100%;
  position: absolute;
  bottom: 0.15vmin;
  z-index: 1;
}

.luck-popup-line img {
  float: left;
  width: 100%;
  min-height: 8.8vmin;
}

.luck-popup-ft-bg {
  float: left;
  width: 100%;
  position: absolute;
  bottom: -2vmin;
}

.luck-popup-ft-bg img {
  float: left;
  width: 100%;
}

.better-luck .code-tab-title {
  line-height: normal;
  font-size: 4.8vmin;
}

/* Better Luck CSS End */

/* Game Summary CSS Start */
.summary-cols {
  float: left;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
  padding: 4vmin 0;
}

.summary-cols .col {
  float: left;
  width: 100%;
}

.score {
  float: left;
  width: 100%;
}

.summary-left {
  position: relative;
}

.summary-left::after {
  content: '';
  position: absolute;
  right: 0;
  height: 100%;
  width: 0.2vmin;
  background: linear-gradient(rgb(255, 212, 217, 0.15) 0%, rgb(255, 212, 217) 50%, rgb(255, 212, 217, 0.15)100%);
  border-radius: 5vmin;
}

.score-title {
  text-align: center;
  font-size: 4vmin;
  font-family: var(--font-head);
}

.score-text {
  text-align: center;
  font-size: 3.45vmin;
  font-family: var(--font-base);
  font-weight: 600;
  color: var(--clr-yellow);
}

.game-summary .card-title {
  padding: 1vmin;
}

/* Game Summary CSS End */

/* Common How to CSS Start */
.base-modal {
  float: left;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.base-modal-outer {
  float: left;
  width: 100%;
  max-width: 90vmin;
  background: var(--clr-white);
  border-radius: 0.5vmin;
}

.base-modal-head {
  float: left;
  width: 100%;
  font-family: var(--font-htp-head);
  background: var(--clr-theme);
  height: 8vmin;
  border-radius: 0.5vmin 0.5vmin 0 0;
  padding: 0 2vmin;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: url('../images/modal-head-bg.svg') no-repeat 0 0;
  background-size: 100%;
  position: relative;
}

.base-modal-head-figure {
  float: left;
  width: 100%;
  max-width: 18vmin;
}

.base-modal-head-figure img {
  float: left;
  width: 100%;
}

.modal-head-mid {
  float: left;
  width: 100%;
  position: absolute;
  top: 0;
  z-index: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  height: 100%;
  align-items: center;
  pointer-events: none;
  padding: 0 2vmin;
}

.modal-head-mid-label {
  font-size: 4vmin;
  text-transform: uppercase;
}

.base-modal-body {
  float: left;
  width: 100%;
}

.modal-block {
  --size: 37.9vmin;
  float: left;
  width: 100%;
  display: flex;
}

.how-to-modal-block {
  float: left;
  width: 100%;
  text-align: center;
}

.modal-block.how-to-modal-block {
  --size: 44.9vmin;
}

.modal-block-left {
  flex: 1;
  padding: 1vmin 2vmin;
}

.how-to-modal-inner {
  float: left;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.how-to-modal-content {
  float: left;
  width: 100%;
}

.how-to-title {
  float: left;
  width: 100%;
  text-align: center;
  color: var(--clr-dark);
  text-transform: uppercase;
  font-size: 6vmin;
  margin-bottom: 2vmin;
}

.how-to-title {
  font-size: 3.5vmin;
  letter-spacing: 0;
}

.how-to-modal-block .how-to-title {
  margin-bottom: 0vmin;
  font-family: var(--font-htp-head);
}

.how-to-pre-label {
  float: left;
  width: 100%;
  color: var(--clr-dark);
  font-size: 2.2vmin;
  font-family: var(--font-base);
  letter-spacing: 0;
}

.modal-ft-btn-bar {
  float: left;
  width: 100%;
  margin: 1.6vmin 0 0.6vmin;
}

.how-to-modal-block .button-bar {
  display: flex;
  justify-content: center;
  align-items: center;
}

.how-to-modal-block .button-bar-inner {
  justify-content: center;
  flex-direction: row;
  gap: 0.8vmin 1vmin;
  max-width: 33vmin;
}

.how-to-modal-block .button-col {
  min-width: 16vmin;
  max-width: 16vmin;
}

.how-to-modal-block .button-col.w-full{
  min-width: 100%;
  max-width: 100%;
}

.how-to-modal-block .button-col.w-full .btn{
  padding: 0.8vmin 0;
}

.how-to-modal-block .button-col.w-full .btn span{
  width: 100%;
}

.how-to-modal-block .btn-icon{
  width: 3.8vmin;
  right: 4vmin;
  position: relative;
}

.how-to-modal-block .modal-ft-btn-bar .btn {
  padding: 1vmin 0;
  height: 100%;
  font-size: 2vmin;
  font-family: var(--font-htp-btn);
  float: left;
  width: 100%;
}

.modal-block-right {
  float: right;
  width: var(--size);
  min-width: var(--size);
}

.modal-block-gigure {
  float: left;
  width: 100%;
}

.modal-block-gigure img {
  float: left;
  width: 100%;
}

.target-info {
  float: left;
  width: 100%;
  padding: 2.5vmin;
}

.targets-list {
  float: left;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1.5vmin;
}

.target-box {
  float: left;
  flex: 1;
  text-align: center;
  background: var(--clr-x-light);
}

.target-figure-wrap {
  float: left;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1vmin;
}

.target-figure {
  float: left;
  width: 100%;
  max-width: 12vmin;
}

.target-figure img {
  float: left;
  width: 100%;
}

.target-point {
  float: left;
  width: 100%;
  text-transform: uppercase;
  font-size: 2.5vmin;
  background: var(--clr-red);
  padding: 0.8vmin;
  font-family: var(--font-htp-head);
}

.target-info .modal-ft-btn-bar {
  margin-top: 3vmin;
}

.target-info .button-col {
  max-width: max-content;
}

.target-info .modal-ft-btn-bar .btn {
  padding: 1vmin 2.85vmin;
}

.d-none {
  display: none;
}

.no-record-block {
  float: left;
  width: 100%;
  display: none;
}

.no-record-inner {
  float: left;
  width: 100%;
  text-align: center;
  padding: 4vmin 0;
}

.no-record-title {
  font-size: 4vmin;
  font-family: var(--font-htp-head);
  text-transform: uppercase;
  color: var(--clr-dark);
}

.no-record-title span {
  text-transform: none;
}

/* How to Scenarios CSS Start */
.how-to-scenarios .how-to-modal-block{
  flex-direction: column;
}
.modal-block-bottom{
  float: left;
  width: 100%;
}
.modal-block-top{
  float: left;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-fig-block{
  float: left;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  max-width: 23vmin;
}
.modal-rays{
  float: left;
  width: 100%;
}
.modal-rays img{
  float: left;
  width: 100%;
}
.modal-cup{
  float: left;
  width: 100%;
  position: absolute;
  max-width: 13.5vmin;
}
.modal-cup img{
  float: left;
  width: 100%;
}

.modal-block-bottom .how-to-pre-label{
  max-width: 70%;
  /* font-family: var(--font-head); */
}
.modal-block-bottom .how-to-modal-content{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.how-to-scenarios .modal-ft-btn-bar{
  margin: 3vmin 0 2vmin;
}

.how-to-scenarios .button-col.w-full{
  min-width: 27vmin;
  max-width: 27vmin;
}
.how-to-scenarios .button-col.w-full .btn{
  padding: 1.2vmin 0;
}
.how-to-scenarios .btn-icon{
  right: 2vmin;
}
/* How to Scenarios CSS End */

@media (max-width: 1024px) and (orientation: portrait) {
  .base-modal-outer {
    border-radius: 1vmin;
  }

  .modal-block {
    --size: 100%;
    flex-direction: column;
  }

  .base-modal-head {
    height: 7.4vmax;
    border-radius: 1vmin 1vmin 0 0;
  }

  .base-modal-head-figure {
    max-width: 16vmax;
  }

  .modal-head-mid-label {
    font-size: 5vmin;
  }

  .modal-block-left {
    padding: 3vmin;
  }

  .how-to-title {
    font-size: 5vmin;
  }

  .how-to-pre-label {
    font-size: 3.5vmin;
  }

  .how-to-modal-block .button-col {
    min-width: 24vmin;
    max-width: 24vmin;
  }

  .how-to-modal-block .modal-ft-btn-bar .btn {
    font-size: 4vmin;
    padding: 1.4vmin 0;
  }

  .modal-block-right {
    width: 100%;
    order: -1;
    margin-top: -0.2vmin;
  }

  .remain-col {
    gap: 1vmin;
  }

  .remain-left {
    max-width: 60%;
  }

  .remain-right {
    max-width: 40%;
  }

  .target-point {
    font-size: 4vmin;
  }

  .target-info .button-col {
    max-width: max-content;
  }

  .target-info .modal-ft-btn-bar .btn {
    padding: 1vmin 2.85vmin;
  }

  .m-none {
    display: none;
  }

  .d-none {
    display: block;
  }

  .no-record-title {
    font-size: 5vmin;
  }

  .how-to-modal-block .button-bar-inner{
    max-width: 50vmin;
    gap: 1vmin;
  }
  .how-to-modal-block .button-col.w-full .btn{
    padding: 1.4vmin 0;
  }
  .modal-ft-btn-bar{
    margin-top: 3vmin;
  }
  .how-to-modal-block .btn-icon{
    width: 7.25vmin;
  }

  .modal-fig-block{
    max-width: 35vmin;
  }
  .modal-cup{
    max-width: 20vmin;
  }
  .how-to-scenarios .modal-ft-btn-bar .btn{
    font-size: 3vmin;
  }
  .how-to-scenarios .modal-ft-btn-bar{
    margin: 4vmin 0;
  }

  .how-to-scenarios .button-col.w-full{
    min-width: 40vmin;
    max-width: 40vmin;
  }
}

@media(max-width:767px) and (orientation: portrait) {
  .base-modal-head-figure {
    max-width: 24vmin;
  }

  .modal-head-mid-label{
    font-size:5.5vmin;
  }

  .no-record-inner {
    padding: 6vmin 0;
  }
  .how-to-pre-label {
    font-size: 3.8vmin;
  }

  .how-to-modal-block .button-bar-inner{
    max-width: 60vmin;
    gap: 1.5vmin 3vmin;
  }

  .how-to-modal-block .button-col {
    min-width: 28vmin;
    max-width: 28vmin;
  }

  .base-modal-head {
    height: 6.4vmax;
  }
  
  .how-to-modal-block .button-col.w-full{
    min-width: 100%;
    max-width: 100%;
  }

  .target-info .button-col {
    min-width: max-content;
    max-width: max-content;
  }  

  .modal-fig-block{
    max-width: 48vmin;
  }

  .modal-cup{
    max-width: 30vmin;
  }

  .modal-block-bottom{
    margin-top: 3vmin;
  }

  .modal-block-bottom .how-to-pre-label{
    max-width: 100%;
    font-size: 4.8vmin;
    padding: 0 3vmin;
  }
  .how-to-scenarios .modal-ft-btn-bar .btn{
    font-size: 5vmin;
    padding: 2vmin 0;
  }

  .how-to-scenarios .modal-ft-btn-bar{
    margin: 6vmin 0;
  }

  .how-to-scenarios .button-col{
    min-width: 36vmin;
    max-width: 36vmin;
  }
  .how-to-modal-block .button-col.w-full .btn{
    padding: 2vmin 0;
  }

  .how-to-scenarios .btn-icon{
    width: 10.25vmin;
  }
}

/* Common How to CSS End */

/* Prizes and Faq CSS Start */
.prizes-faq-info {
  float: left;
  width: 100%;
}

.modal-title {
  float: left;
  width: 100%;
  text-align: center;
  margin-bottom: 3vmin;
}

.modal-title-label {
  display: inline-flex;
  font-size: 6vmin;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 2vmin;
  font-family: var(--font-htp-head);
}

.modal-title-label:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: .8vmin;
  background: var(--clr-white);
  border-radius: 4vmin;
  content: '';
}

.prizes-faq {
  float: left;
  width: 100%;
  padding: 1.2vmin;
  max-height: 60dvh;
  overflow: auto;
}

.acc-list {
  float: left;
  width: 100%;
}

.acc-item {
  float: left;
  width: 100%;
  background: var(--clr-light);
  margin-bottom: 1vmin;
  border-radius: 0.1vmin;
}

.acc-title {
  float: left;
  width: 100%;
  cursor: pointer;
  display: flex;
}

.acc-title-label {
  float: left;
  flex: 1;
  font-size: 2.6vmin;
  color: var(--clr-dark);
  text-transform: uppercase;
  align-self: center;
  padding: 1vmin 2vmin;
  font-family: var(--font-htp-head);
  letter-spacing: 0;
}

.acc-title-icon {
  float: left;
  width: 5vmin;
  min-height: 5vmin;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--clr-x-light);
  font-size: 3vmin;
  color: var(--clr-theme1);
}

.open .acc-title-icon:before {
  content: "\eaa5";
}

.acc-content {
  float: left;
  width: 100%;
  padding: 2vmin 2vmin;
  display: none;
}

.acc-info {
  float: left;
  width: 100%;
}

.acc-pre {
  float: left;
  width: 100%;
  font-size: 1.8vmin;
  font-family: var(--font-base);
  color: var(--clr-dark);
  letter-spacing: normal;
}

.prizes-faq-info .close-icon {
  float: left;
  width: 5.5vmin;
  cursor: pointer
}

@media (max-width: 1024px) and (orientation: portrait) {
  .modal-title {
    margin-bottom: 2.5vmax;
  }

  .prizes-faq {
    padding: 2vmin;
  }

  .acc-title-label {
    font-size: 2.4vmax;
  }

  .modal-title-label {
    font-size: 3.8vmax;
  }

  .acc-title-icon {
    min-height: 6vmax;
    min-width: 6vmax;
    font-size: 3vmax;
  }

  .acc-pre {
    font-size: 2.1vmax;
  }

  .prizes-faq-info .close-icon {
    width: 7vmin;
  }


  .coke-r{
    font-size: 2.2vmin;
  }
  
  .coke-r-head{
    font-size: 2.8vmin;
  }

  .powered-text {
    font-size: 1.25vmin;
  }
  .logo-footer {
    max-width: 25vmin;
  }
}

@media(max-width:767px) and (orientation: portrait) {
  .prizes-faq-info .close-icon {
    width: 10vmin;
  }
  .acc-pre{
    font-size: 4vmin;
  }
  
  .coke-r{
    font-size: 2.8vmin;
  }

  .coke-r-head{
    font-size: 3.8vmin;
  }

  .powered-by-outer{
    bottom: 1vmin;
  }

  .powered-text {
    font-size: 2vmin;
  }
  .logo-footer {
    max-width: 38vmin;
  }
}

/* Prizes and Faq CSS End */


@media(max-width:1024px) and (min-width:768px) and (orientation: portrait) {
  .remain-title {
    font-size: 3.2vmin;
    line-height: normal;
  }

  .remain-time{
    font-size: 2.5vmin;
  }

  .remain-time-label{
    font-size: 2.2vmin;
  }

  .action-info .btn {
    font-size: 3.8vmin;
  }

  .remain-game-ft {
    font-size: 3vmin;
  }

  .back-to-btn {
    max-width: 5.34vmin;
  }

}

@media(max-width:767px) and (orientation: portrait) {

  .back-to-bar {
    margin-top: 2vmin;
  }

  /*Splash Screen CSS Start*/
  .brand-logo-figure {
    max-width: 75vmin;
  }

  .action-info-inner {
    max-width: 85vmin;
  }

  .remain-block {
    max-width: 85vmin;
    max-height: 22vmin;
  }

  .remain-prize-block {
    height: auto;
  }

  .action-info .btn {
    height: 13vmin;
    padding: 0 4vmin;
    font-size: 4.85vmin;
  }

  .btn-icon {
    width: 8vmin;
  }

  .action-info {
    margin-top: 2vmin;
  }

  .remain-title {
    font-size: 4.1vmin;
  }

  .remain-time {
    font-size: 3.5vmin;
    min-width: 10vmin;
    border-radius: 0.8vmin;
  }

  .remain-time-label {
    font-size: 2.8vmin;
    padding: 0.4vmin 0;
    border-radius: 0 0 0.8vmin 0.8vmin;
  }

  .remain-col{
    gap: 0 2vmin;
  }

  .remain-game-ft {
    font-size: 4.4vmin;
  }

  .button-bar-inner {
    gap: 2vmin;
  }

  /*Splash Screen CSS End*/

  /*Point Challenge CSS Start*/
  .contest-splash-top .remain-block {
    background: url('../images/point-challenge-mob-bg.svg') no-repeat;
    background-size: 100% 100%;
  }
  .contest-splash-top .remain-wrap {
    padding: 3vmin 0px 3vmin;
    margin-top: 0px;
  }
  .point-chall-rays {
    max-width: 34vmin;
  }
  .point-chall-head-bar {
    margin-bottom: 0vmin;
    margin-top: 1vmin;
  }
  .point-chall-num {
    font-size: 18vmin;
  }
  .point-chall-head-label {
    font-size: 11.7vmin;
  }
  .point-chall-head-text {
    font-size: 3.825vmin;
  }
  .total-chall-point {
    font-size: 7.2vmin;
    padding: 0.6vmin 4vmin;
    min-width: 48vmin;
  }
  .total-chall-point:before {
    --spacing: 0.8vmin;
  }
  .progress-bar {
    padding: 3.5vmin 0px;
  }
  .progress-bar .col.left {
    max-width: 60vmin;
  }
  .progress-col {
    --icon-size: 10vmin;
    padding-right: calc(var(--icon-size) - 2vmin);
  }
  .progress {
    height: 7vmin;
    --border-size: 0.615vmin;
    background: var(--clr-dark);
    padding-right: 2vmin;
  }
  .prog-count {
    font-size: 3.85vmin;
  }
  .total-chall-limit {
    font-size: 4.2vmin;
  }
  .last-updated-bar {
    margin-top: -2vmin;
  }
  .last-updated-pre {
    font-size: 3.2vmin;
  }
  .point-chall-action {
    margin-top: 1vmin;
  }
  .point-chall-action .button-bar {
    max-width: 30vmin;
  }
  .point-chall-action .button-col .btn {
    font-size: 3.5vmin;
    padding: 0.8125vmin 1vmin;
  }

  .contest-congrats-reward .progress-bar {
    margin-bottom: 3vmin;
  }

  .leaderboard-challenge-contest .leaderboard-top {
    background: url('../images/leaderboard-point-challenge-bg.svg') no-repeat 0 0;
    background-size: 100% 100%;
    position: relative;
    min-height: 76vmin;
    padding-bottom: 0px;
  }
  .leaderboard-challenge-contest .leaderboard-top:before {
    bottom: -2vmin;
    height: 8vmin;
  }
  .leaderboard-challenge-contest .leaderboard-data {
    max-height: 40.25vmin;
  }
  .leaderboard-challenge-contest .leaderboard-title-wrap {
    padding: 0px;
    margin: 0px;
  }
  .leaderboard-challenge-contest .point-chall-action {
    padding-bottom: 2.5vmin;
    margin-top: 0px;
  }
  /*Point Challenge CSS End*/

  /* My Codes CSS Start */
  .my-code-card {
    max-width: 88vmin;
    border-radius: 1.8vmin;
  }

  .my-code-bottom {
    border-radius: 0 0 1.8vmin 1.8vmin;
    padding: 4.5vmin 2.5vmin 3vmin;
  }

  .congrats-wrap .card-title {
    font-size: 4.2vmin;
    padding: 0 3vmin 1vmin;
  }

  .client-logo-figure {
    max-width: 25vmin;
  }

  .code-title-pre {
    font-size: 3.5vmin;
  }

  .code-tab-head {
    font-size: 3vmin;
  }

  .code-tab-data {
    font-size: 3vmin;
  }

  .code-copy-data {
    font-size: 3.5vmin;
    padding: 1.4vmin 2.2vmin;
    max-width: 22vmin;
    border: 0.24vmin dotted var(--bdr-btn);
    border-radius: 1vmin;
  }

  .copy-icon {
    min-width: 2.2vmin;
    max-width: 2.2vmin;
    right: 0.6vmin;
    bottom: 0.6vmin;
  }

  .clock-icon {
    max-width: 3vmin;
  }

  .card-title {
    font-size: 5vmin;
  }

  .card-title span {
    font-size: 3.5vmin;
  }

  .my-code-card .button-col .btn {
    font-size: 4.5vmin;
    padding: 3vmin 0;
  }

  .enter-my-code .form-control {
    height: 12vmin;
    font-size: 4vmin;
    border: 0.52vmin solid var(--clr-dark);
    border-radius: 1.5vmin;
  }

  .code-coke-cup {
    max-width: 9vmin;
  }

  .code-tab-content {
    border-radius: 0.8vmin;
  }

  .back-to-btn {
    max-width: 7.8vmin;
  }

  .code-title-wrap {
    margin-top: 1.3vmin;
  }

  .code-tab-wrap {
    padding-top: 2.5vmin;
  }

  .code-tab-title-pre {
    font-size: 4vmin;
  }

  .congrats-wrap .button-col .btn {
    font-size: 4vmin;
  }

  .congrats-coke .button-col .btn{
    font-size:3.65vmin;
  }

  .code-tab-title {
    font-size: 6.5vmin;
  }

  .md-bg-line-fig img {
    min-height: 11vmin;
  }

  .md-bg-fig img {
    min-height: 16vmin;
  }

  .my-code-wrap .code-tab-wrap {
    max-height: 39vmin;
  }

  .code-tab-head-wrap {
    height: 4vmin;
  }

  .code-tab-content:nth-child(2) {
    margin-top: 0.6vmin;
  }

  .copy-code::after {
    height: 1.2vmin;
    width: 1.2vmin;
  }

  .enter-code-outer {
    margin-bottom: 3vmin;
  }

  .alert-info {
    font-size: 2.2vmin;
    padding-left: 1.5vmin;
    top: calc(100% - 0.1vmin);
  }

  /* My Codes CSS End */

  /* Congrats CSS Start */
  .congrats-coke .congrats-card-bg {
    bottom: -0.7vmin;
  }

  .congrats-coke .code-title-wrap {
    margin-top: 3vmin;
  }

  .code-tab-title-pre {
    margin-top: 1.8vmin;
  }

  .congrats-rays {
    max-width: 85vmin;
  }

  .congrats-share .button-col .btn {
    font-size: 3.5vmin;
  }

  .coke-cup {
    max-width: 37vmin;
  }

  .congrats-copy-data {
    font-size: 5vmin;
    padding-right: 4.2vmin;
    max-width: max-content;
    border: 0.51vmin dotted var(--bdr-btn);
    border-radius: 1.8vmin;
  }

  .congrats-coke-left {
    margin-left: 0;
    padding-top: 0;
    padding-left: 8vmin;
  }

  .congrats-copy-icon {
    min-width: 3vmin;
    max-width: 3vmin;
  }

  .expire-title {
    font-size: 2.7vmin;
    margin-top: 2vmin;
  }

  .clock-time span {
    font-size: 3.2vmin;
    min-width: 5vmin;
  }

  .congrats-wrap .code-title-wrap {
    margin-top: 4vmin;
  }

  .share-game-title {
    margin-top: 2.5vmin;
    line-height: 1.5em;
    font-size: 4vmin;
    padding: 0 7vmin;
  }

  .share-game-bottom{
    font-size: 4vmin;
    margin-bottom: -9vmin;
    padding: 0 8vmin;
  }

  .share-code-wrap {
    min-height: 50vmin;
  }

  .congrats-share .congrats-rays {
    max-width: 45vmin;
    top: auto;
  }

  .congrats-share .coke-cup {
    max-width: 21vmin;
    top: auto;
  }

  .arrow-icon {
    max-width: 8vmin;
    left: 1vmin;
    transform: rotate(-50deg);
  }

  .code-tab-data {
    padding: 1vmin 0;
  }

  .congrats-popup-line {
    bottom: 18.8vmin;
  }

  .congrats-popup-line img {
    min-height: 10.8vmin;
  }

  .share-popup-line {
    bottom: 2.5vmin;
  }

  .share-popup-line img {
    min-height: 10.8vmin;
  }

  .congrats-coke .my-code-bottom {
    padding: 5.2vmin 2.5vmin 3vmin;
  }

  .code-copy-data:hover .copy-code {
    display: none;
  }

  .copy-code-inner {
    font-size: 3vmin;
  }

  .copy-code {
    padding: 1vmin 2vmin;
    border-radius: 1.4vmin;
    top: -7.5vmin;
  }

  .desk-item {
    display: none;
  }

  .mob-item {
    display: block;
  }

  .my-code-wrap .copy-code-inner {
    font-size: 2vmin;
  }

  .my-code-wrap .copy-code {
    top: -6.5vmin;
  }

  /* Congrats CSS End */

  /* Better Luck CSS Start */
  .coke-bottle-bg {
    max-width: 100%;
    left: 0;
    top: -15vmin;
  }

  .better-luck .code-title-wrap {
    margin-top: 3vmin;
  }

  .better-luck .code-tab-title {
    font-size: 6.25vmin;
  }

  .better-luck-pre {
    font-size: 5vmin;
  }

  .coke-bottle {
    max-width: 35vmin;
    margin-left: 0;
    padding: 4vmin 0 1vmin;
  }

  .luck-popup-line {
    bottom: 1.2vmin;
  }

  .better-luck .button-col .btn {
    font-size: 3.5vmin;
  }

  .better-luck .btn-icon {
    width: 5.75vmin;
  }

  /* Better Luck CSS End */

  /* Game Summary CSS Start */
  .game-summary .code-title-wrap {
    margin-top: 3vmin;
  }

  .game-summary .code-tab-title {
    font-size: 6.25vmin;
  }

  .score-title {
    font-size: 5vmin;
  }

  .score-text {
    font-size: 4.9vmin;
  }

  .summary-cols {
    padding: 7vmin 0;
  }

  .game-summary .button-col .btn {
    font-size: 3.5vmin;
  }

  .game-summary .btn-icon {
    width: 5.75vmin;
  }

  .game-summary .card-title {
    padding: 2vmin 0;
  }

  .summary-left::after {
    width: 0.4vmin;
  }

  .input-field-focus{
    overflow: hidden;
  }

  /* Game Summary CSS End */
  .input-field-focus .screen-wrap-inner{
    justify-content: start;
    animation: fadeInUp 0.3s;
    margin-top: -7dvh;
  }

}

@media (orientation: landscape) {
  .remain-block {
    max-width: 80vmin;
  }

  .splash-widget .button-bar-inner .button-col {
    max-width: calc(50% - 0.5vmin);
  }

  .no-enter-code.splash-widget .button-bar-inner .button-col:first-child {
    max-width: 100%;
  }

  .splash-widget .button-bar-inner {
    flex-direction: unset;
  }

  .action-info-inner {
    max-width: 80vmin;
  }

  .splash-widget .button-bar-inner {
    gap: 1vmin;
  }

  .action-info .btn {
    font-size: 3.5vmin;
    padding: 1.5vmin 2.4vmin 1.5vmin 2vmin;
  }

  .btn-icon {
    width: 5vmin;
  }

  .remain-time-value {
    padding: 0.3vmin 0;
  }
  
  .congrats-widget .button-bar-inner .button-col {
    max-width: calc(50% - 0.5vmin);
  }

  .congrats-widget .button-bar-inner {
    flex-direction: unset;
  }

  .action-info-inner {
    max-width: 80vmin;
  }

  .congrats-widget .button-bar-inner {
    gap: 1vmin;
  }


}

@media(width:540px) and (height:720px) and (orientation: portrait) {
  .coke-cup {
    max-width: 30vmin;
  }

  .congrats-card-bg img {
    height: 60vmin;
  }

  .congrats-rays {
    max-width: 63vmin;
  }

  .congrats-popup-line {
    bottom: 13.3vmin;
  }
}

@media (max-width: 540px) and (orientation: portrait) {
  .clock-time {
    font-size: 8px;
  }

  .clock-time span {
    font-size: 12px;
    min-width: 18px;
  }
}



/* Congratulations Hit Target Screen CSS Start */

.congrats-splash .brand-logo-figure{
  max-width: 48vmin;
}

.congrats-reward {
  float: left;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0;
}

.reward-block {
  float: left;
  width: 100%;
  max-width: 80vmin;
  padding: 0.2vmin 2vmin 4vmin 2vmin;
  position: relative;
  background:url('../images/congrats-reward-bg.svg') no-repeat;
  background-size: 100% 100%;
}
.reward-title-wrap {
  float: left;
  width: 100%;
  margin-top: 1vmin;
  position: relative;
  z-index: 2;
  text-transform: uppercase;
  text-align: center;
}

.reward-title {
  float: left;
  width: 100%;
  font-size: 5.8vmin;
  line-height: normal;
}

.reward-title-pre {
  float: left;
  width: 100%;
  text-align: center;
  font-size: 2.5vmin;
  font-family: var(--font-base);
  line-height: normal;
}

.reward-wallet-text {
  float: left;
  width: 100%;
  color: var(--clr-yellow);
  font-size: 2.23vmin;
  font-family: var(--font-base);
  text-align: center;
  padding: 0 8vmin;
  margin-bottom: 2vmin;
  position: relative;
  z-index: 2;
}
.congrats-code-block{
  float: left;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: -2vmin 0;
}
.congrats-fig-block{
  float: left;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  max-width: 18vmin;
}
.congrats-rays-fig{
  float: left;
  width: 100%;
  z-index: 1;
}
.congrats-rays-fig img{
  float: left;
  width: 100%;
}
.congrats-cup-fig{
  float: left;
  width: 100%;
  position: absolute;
  max-width: 13vmin;
  z-index: 2;
}
.congrats-cup-fig img{
  float: left;
  width: 100%;
}
.congrats-stars-bg{
  float: left;
  width: 100%;
  position: absolute;
  max-width: 33vmin;
}
.congrats-stars-bg img{
  float: left;
  width: 100%;
}

.congrats-action-info{
  margin-top: 1.5vmin;
}

@media screen and (max-width: 1024px) and (orientation:portrait) {
  .congrats-action-info .action-info-inner{
    max-width: 80vmin;
  }
  .congrats-action-info .action-info-inner{
    padding-right: 0.8vmin;
  }
  .congrats-action-info .action-info-inner .button-bar-inner{
    flex-direction: row;
    flex-wrap: nowrap;
  }
}
@media screen and (max-width: 767px) and (orientation:portrait) {
  .congrats-reward{
    margin-top: 1vmin;
  }
  .congrats-splash .brand-logo-figure{
    max-width: 64vmin;
  }
  .reward-title{
    font-size: 6.2vmin;
  }
  .reward-title-pre{
    font-size: 2.8vmin;
  }
  .congrats-stars-bg{
    max-width: 40vmin;
  }
  .congrats-cup-fig{
    max-width: 18vmin;
  }
  .congrats-fig-block{
    max-width: 26vmin;
  }
  .reward-wallet-text{
    font-size: 3.2vmin;
    padding: 0 4vmin;
  }
  .reward-block{
    padding: 0.6vmin 2vmin 8vmin 2vmin;
    background:url('../images/congrats-reward-bg-mob.svg') no-repeat;
    background-size: 100% 100%;
    max-width: 84vmin;
  }
  .congrats-action-info{
    margin-top: 2vmin;
  }
  .congrats-action-info .action-info-inner .button-bar-inner{
    flex-wrap: wrap;
    flex-direction: column-reverse;
  }
  .congrats-action-info .action-info-inner{
    max-width: 84vmin;
  }
  .congrats-action-info .action-info .btn{
    font-size: 5vmin;
  }
}

@media (orientation: landscape) {
  .congrats-action-info .action-info-inner{
    padding-right: 0.8vmin;
  }
}
/* Congratulations Hit Target Screen CSS End */

/* Leaderboard Screen CSS Start */
.leaderboard-wrap{
  float: left;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.leaderboard-top{
  float: left;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.6vmin 1.5vmin 0;
  min-height: 7vmin;
  background: url('../images/leaderboard-head-bg.svg') no-repeat 0 0;
  background-size: 100% 100%;
}
.leaderboard-title-wrap{
  float: left;
  width: 100%;
  position: relative;
  margin-top: 0.5vmin;
}

.leaderboard-title-wrap .code-tab-title{
  text-transform: uppercase;
  font-size: 5vmin;
}

.leaderboard-title-wrap::before{
  content: '';
  position: absolute;
  bottom: auto;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 0.12vmin;
  width: 100%;
  background: rgba(255, 255, 255, 0.431);
}
.leaderboard-block{
  float: left;
  width: 100%;
  max-width: 80vmin;
}
.leaderboard-mid{
  float: left;
  width: 100%;
  background: var(--clr-base);
}
.leaderboard-data{
  float: left;
  width: 100%;
  padding: 0 0.2vmin;
  max-height: 36.3vmin;
  overflow: hidden;
  overflow-y: auto;
}
.leader-tab{
  float: left;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #efefef;
  margin-top: 0.15vmin;
}
.leader-tab.selected{
  background: #f6bc26;
}
.leader-header{
  float: left;
  width: 100%;
  padding: 0 0.2vmin;
}

.leader-tab.selected{
  margin-top: 0;
  margin-bottom: 0.2vmin;
}

.leader-tab-head, .leader-tab-data{
  float: left;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.leader-head-title, .leader-data-title{
  float: left;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5vmin;
  color: var(--clr-base);
  font-family: var(--font-head);
  padding: 0.6vmin 0;
}
.leader-head-title{
  background: var(--clr-dark);
}
.leader-data-title{
  color: #2b2b2b;
}
.leader-data-text{
  color: #2b2b2b;
  font-size: 1.4vmin;
  font-family: var(--font-head);
}
.leader-data-icon{
  float: left;
  width: 100%;
  max-width: 2vmin;
}
.leader-data-icon img{
  float: left;
  width: 100%;
}
.leader-tab-icon{
  float: left;
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 0 0.4vmin;
}
.leader-tab-icon{
  padding-left: 1.5vmin;
}
.leader-tab-icon .leader-data-title{
  float: auto;
  width: auto;
}
.leader-tab-head:first-child .leader-head-title{
  justify-content: start;
  padding-left:1.5vmin;
}
.leader-tab-head:last-child .leader-head-title, .leader-tab-data:last-child .leader-data-title{
  justify-content: end;
  padding-right:1.5vmin;
}
.leaderboard-bottom{
  float: left;
  width: 100%;
  background: var(--clr-base);
  border-radius:0 0 0.8vmin 0.8vmin;
}
.leaderboard-btn-block{
  float: left;
  width: 100%;
}
.btn-block-inner{
  float: left;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn-block-inner .button-bar{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1vmin;
}
.leaderboard-btn-block .button-bar-inner{
  flex-direction: row;
  flex-wrap: nowrap;
  max-width: 54vmin;
  gap: 0 0.6vmin;
  display: flex;
  justify-content: center;
}
.leaderboard-bottom .button-col{
  max-width: calc(50% - 0.3vmin);
}
.leaderboard-bottom .button-col .btn{
  font-size: 2vmin;
  padding: 0.4vmin 2vmin;
  justify-content: space-between;
}
/* .leaderboard-bottom .button-col:last-child .btn{
  justify-content: center;
} */

.leaderboard-bottom .btn-icon{
  width: 2.85vmin;
}
.more-btn-block{
  float: left;
  width: 100%;
  padding: 0.5vmin 0 0.6vmin;
}
.more-btn-block-inner{
  float: left;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.show-more-btn{
  float: left;
  width: 100%;
  color: var(--clr-dark);
  font-size: 1.56vmin;
  font-family:var(--font-head);
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 54vmin;
  padding: 1.2vmin 0;
  border: 0.2vmin solid var(--clr-dark);
  border-radius: 0.3vmin;
}
.show-more-btn span{
  line-height: normal;
}
.show-more-btn .icon{
  font-size: 1.8vmin;
  line-height: normal;
}

@media screen and (max-width: 1024px) and (orientation:portrait) {
  .leaderboard-title-wrap .code-tab-title{
    font-size: 4vmin;
  }
  .leader-head-title, .leader-data-title{
    font-size: 1.8vmin;
  }
  .leader-data-text{
    font-size: 1.6vmin;
  }
  .more-btn-block{
    padding: 0.8vmin 0 0.68vmin;
  }
  .leaderboard-data{
    max-height: 40.6vmin;
  }
}

@media screen and (max-width: 767px) and (orientation:portrait) {
  .leaderboard-block{
    max-width: 84vmin;
  }
  .leaderboard-data{
    max-height: 87.1vmin;
    margin-top: 0;
  }
  .leaderboard-top{
    background: url(../images/leaderboard-head-bg-mob.svg) no-repeat 0 0;
    background-size: 100% 100%;
  }
  .leaderboard-top .client-logo-figure{
    max-width: 30vmin;
    padding: 1vmin;
  }
  .leaderboard-title-wrap{
    padding: 1vmin 0;
  }
  .leaderboard-title-wrap .code-tab-title{
    font-size: 10vmin;
  }
  .leaderboard-mid{
    padding-top: 0.45vmin;;
  }
  .leader-head-title, .leader-data-title{
    font-size: 3.4vmin;
    padding: 1.6vmin 0;
  }
  .leader-data-text{
    font-size: 2.8vmin;
  }
  .leader-tab{
    margin-top: 0.24vmin;
  }
  .leader-tab.selected{
    background: #f6bc26;
  }
  .leader-tab.selected{
    margin-top: 0;
    margin-bottom: 1vmin;
  }
  .leader-data-icon{
    max-width: 4vmin;
  }
  .show-more-btn{
    max-width: 100%;
    font-size: 3.8vmin;
    padding: 2.6vmin 0;
    border-radius: 0.8vmin;
  }
  .show-more-btn .icon{
    font-size: 4vmin;
  }
  .more-btn-block{
    padding: 1.4vmin 0 0.68vmin;
  }
  .more-btn-block-inner{
    padding: 0 1.4vmin;
  }
  .btn-block-inner .button-bar{
    padding: 1.4vmin 2.4vmin;
  }
  .leaderboard-btn-block .button-bar-inner{
    max-width: 100%;
    gap: 0 1.6vmin;
  }
  .leaderboard-bottom .button-col{
    max-width: calc(50% - 0.8vmin);
  }
  .leaderboard-bottom .button-col .btn{
    padding: 2.6vmin 2vmin;
    font-size: 5vmin;
    justify-content: center;
  }
  .leaderboard-bottom .btn-icon{
    width: 6vmin;
  }
  .leaderboard-bottom{
    border-radius: 0 0 2vmin 2vmin;
  }
}
/* Leaderboard Screen CSS End */

/* Enter Nickname Screen CSS Start */
.enter-code-mid .code-title-pre{
  font-size: 3.5vmin;
  padding: 0 8vmin;
}
.enter-code-mid .code-md-bg{
  bottom: 3.3vmin;
}
.enter-code-mid .md-bg-line-fig{
  bottom: 2.4vmin;
}
.enter-nickname .my-code-bottom{
  margin-top: -4vmin;
  padding: 2vmin 1.4vmin 1.8vmin;
}
.enter-nickname .form-control{
  height: 6.4vmin;
  text-align: center;
  font-size: 1.68vmin;
}
.enter-nickname .form-control::placeholder {
  color: #6a6a6a;
}
.enter-nickname .my-code-action{
  margin-top: 0.34vmin;
}
@media screen and (max-width: 767px) and (orientation:portrait) {
  .enter-nickname .my-code-widget .brand-logo-figure{
    max-width: 64vmin;
  }
  .enter-nickname .brand-logo-wrap{
    display: none;
  }
  .enter-nickname .code-tab-title{
    font-size: 12.5vmin;
  }
  .enter-nickname .code-title-pre{
    font-size: 5.5vmin;
    padding: 0 4vmin;
  }
  .enter-nickname .form-control{
    height: 13.4vmin;
    font-size: 4.2vmin;
  }
  .enter-nickname .my-code-bottom{
    padding: 2vmin 3.4vmin 2.6vmin;
  }
  .enter-nickname .md-bg-line-fig{
    bottom: 6vmin;
  }
  .enter-nickname .code-md-bg{
    bottom: -0.7vmin;
  }
  .enter-nickname .my-code-bottom{margin-top: 0;}
  .enter-nickname .button-col .btn{font-size: 4.5vmin; padding:2.75vmin 0;}
}
/* Enter Nickname Screen CSS End */