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

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

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

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

@font-face {
  font-family: 'Acumin Pro';
  src: url('../fonts/AcuminPro-Black.eot');
  src: url('../fonts/AcuminPro-Black.eot?#iefix') format('embedded-opentype'),
      url('../fonts/AcuminPro-Black.woff2') format('woff2'),
      url('../fonts/AcuminPro-Black.woff') format('woff'),
      url('../fonts/AcuminPro-Black.ttf') format('truetype');
  font-weight: 900;
  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: #00b388;
  --clr-theme1: #1d3c34;
  --clr-theme2: #c99700;
  --clr-white: #ffffff;
  --clr-dark: #000000;
  --clr-dark-theme1: #152c26;
  --clr-dark-theme2: var(--clr-theme1);
  --clr-yellow: #ffd040;
  --clr-red: #df1a23;
  --clr-light: #fff0d8;
  --clr-x-light: #d5d6cd;
  --clr-green: #62a744;
  /*Fonts*/
  --font-head: 'Acumin Pro', sans-serif;
  --font-base: 'Acumin Pro', sans-serif;
  --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);

  /*Border*/
  --bdr-base: #c7c9c7;
  --bdr-btn: var(--clr-theme1);
}

* {
  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;
}

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;
}
.highlight-text {
  color: var(--clr-theme);
}

/*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: 900;
  border-radius: 1vmin;
  background: #f9f9f9;
  -webkit-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
  border: 0;
  text-transform: uppercase;
  line-height:1em;
}

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

.btn-label {
  float: left;
  position: relative;
  line-height:1em;
}

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

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

.btn-primary {
  background: var(--clr-theme2);
  color: var(--clr-white);
}

.btn-green{
  background: var(--clr-theme1);
  color: var(--clr-white);
}

.btn-secondary {
  background: var(--clr-light);
  color: var(--clr-dark-theme2);
}

.btn-yellow {
  background: var(--clr-yellow);
  color: var(--clr-dark-theme2);
}

.btn-base {
  background: var(--clr-theme);
  color: var(--clr-white);
}

.btn-black {
  background: var(--clr-theme);
  color: var(--clr-white);
}

.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;
}

.show-leaderboard.action-info {
  margin-top: 5vmin;
} 

.show-leaderboard .action-info-inner {
  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: 3.8vmin 0px 2vmin;
}

.remain-block {
  float: left;
  width: 100%;
  max-width: 62vmin;
  padding: 3vmin 3vmin;
  position: relative;
  background:var(--clr-white);
  border-radius: 2vmin;
}

.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%;
}

.remain-right {
  float: left;
  width: 100%;
  flex: 1;
}

.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-theme1);
  font-family: var(--font-head);
  font-size: 3.5vmin;
  text-transform: uppercase;
  font-weight: 900;
}

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

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

.remain-time-label {
  font-size: 1.8vmin;
  padding: 0.2vmin 0px 0.3vmin;
  border-radius: 0 0 0.5vmin 0.5vmin;
  text-transform: uppercase;
  background: var(--clr-theme);
  font-weight: 600;
}

.remain-game-ft {
  float: left;
  width: 100%;
  text-align: center;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 2.8vmin;
  color: var(--clr-dark-theme1);
 }

.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: 1vmin;
  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: linear-gradient(to right, rgb(32,59,52) -10%, rgb(16,180,141) 70%, rgb(226,255,134) 130%);
  border-radius: 1.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;
}

.summary-action {
  float: left;
  width: 100%;
  margin-top: 1.5vmin;
}
.summary-action .button-bar-inner {
  flex-wrap: nowrap;
  flex-direction: row;
  gap: 0px 1.6vmin;
}
.my-code-card .summary-action .button-col .btn {
  font-size: 3vmin;
  padding: 1.8vmin 0.5vmin;
}
.summary-screen .my-code-bottom {
  padding: 1vmin 3vmin 3vmin;
}

.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.12vmin solid var(--clr-x-light);
  font-size: 2.8vmin;
  font-weight: bold;
}

.enter-my-code .form-control::placeholder {
  color: rgba(21, 44, 38, 0.5);
}

.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: 2vmin;
  position: relative;
  z-index: 2;
}

.leaderboard-top-block .code-title-wrap {
  margin-bottom: 0.4vmin;
  margin-top: 1.2vmin;
}

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

.code-tab-title {
  text-align: center;
  font-size: 5.6vmin;
  font-weight: 900;
  padding-bottom: 1vmin;
}

.code-title-pre {
  float: left;
  width: 100%;
  text-align: center;
  font-size: 2.5vmin;
  margin-top: 0.5vmin;
  margin-bottom: 2.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;
}

.summary-screen .enter-code-mid .code-title-pre {
  margin-bottom: 0px;
}
.game-score-wrap {
  float: left;
  width: 100%;
  text-align: center;
  margin: 0.4vmin 0px 1vmin;
}
.game-score-label {
  font-size: 6vmin;
  font-weight: 900;
  line-height: 0.85em;
  font-family: var(--font-head);
  color: var(--clr-theme1);
  background: var(--clr-theme1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  z-index: 1;
}
.game-score-label:before {
  content: attr(data-content);
  position: absolute;
  left: 0;
  right: 0;
  -webkit-text-stroke:0.625vmin var(--clr-white);
  z-index: -1;
}


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

.my-code-prize-block {
  float: left;
  width: 100%;
  padding: 1vmin 1vmin;
  background: var(--clr-theme2);
}
.prize-title-pre {
  text-align: center;
  font-size: 2.8vmin;
  font-family: var(--font-head);
  font-weight: bold;
  color: var(--clr-white);
  margin-top: 0.3vmin;
}

.my-code-prize-block.copy-code-block {
  padding:2vmin 0px;
}
.copy-code-block .code-tab-data {
  padding-left: 0px !important;
}

.prize-text-wrap {
  float: left;
  width: 100%;
  margin-top: 1.5vmin;
}
.prize-text-pre {
  text-align: center;
  font-size: 2.5vmin;
  color: var(--clr-dark-theme1);
  font-weight: 600;
  padding: 0px 5vmin;
}

.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: 20vmin;
  max-width: max-content;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  font-family: var(--font-head);
  font-weight: 900;
  color: var(--clr-white);
  font-size: 3.4vmin;
  border: 0.22vmin dashed var(--clr-white);
  padding: 0.4vmin 6vmin 0.7vmin 3vmin;
  border-radius: 1vmin;
  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: 2vmin;
  max-width: 2vmin;
  position: absolute;
  right: 1.8vmin;
  bottom: 1.7vmin;
}

.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-white);
  border-radius: 0 0 1.8vmin 1.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-theme1);
  color: var(--clr-white);
  font-weight: normal;
  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-theme1);
  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: 9vmin;
  border-radius: 0.5vmin 0.5vmin 0 0;
  padding: 0 2vmin;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(to right, rgb(32,59,52) 5%, rgb(16,180,141) 60%, rgb(201,151,0) 90%);
  position: relative;
}

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

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

.htw-modal-logo-fig {
  float: left;
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 5.5vmin 0px 4.5vmin;
}
.htw-modal-logo-fig img {
  float: left;
  width: 100%;
  max-width: 32.5vmin;
}

.modal-head-mid {
  float: left;
  width: 100%;
  position: absolute;
  top: 0;
  left: 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;
  font-family: var(--font-head);
  font-weight: 900;
  position: relative;
}

.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;
  flex-direction: column;
}

.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);
  font-weight: 900;
  color: var(--clr-dark-theme1);
}

.how-to-scenarios .how-to-modal-block .how-to-title {
  margin-top: 4vmin;
}

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

.prizes-list-block {
  float: left;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 4vmin;
  padding: 0vmin 5vmin;
  margin-top: 3vmin;
}
.prizes-list-block .item {
  float: left;
  width: 100%;
  display: flex;
  justify-content: center;
  flex: 1;
}
.prize-card {
  float: left;
  width: 100%;
  background: var(--clr-light);
  border: 0.125vmin solid #c99700;
  padding: 1.6vmin 3vmin 2.6vmin;
}
.prize-card-inner {
  float: left;
  width: 100%;
}
.prize-point {
  float: left;
  width: 100%;
  text-align: center;
  color: var(--clr-theme1);
  font-size: 7.4vmin;
  font-weight: 900;
  line-height: 0.85em;
}
.prize-point sub {
  display: inline-block;
  font-size: 60%;
  line-height: 0.85em;
  position: relative;
  bottom: 1.6vmin;
}
.prize-label {
  float: left;
  width: 100%;
  text-align: center;
  color: var(--clr-theme1);
  font-size: 2.4vmin;
  font-weight: bold;
  line-height: 1.2em;
  padding: 0px 1.2vmin;
  margin-bottom: 0.6vmin;
}
.prize-pre {
  float: left;
  width: 100%;
  text-align: center;
  color: #c99700;
  font-size: 1.8vmin;
  font-weight: 600;
  font-style: italic;
  line-height: 1.2em;
}

.modal-ft-btn-bar {
  float: left;
  width: 100%;
  margin: 2vmin 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: 1.2vmin;
  justify-content: space-between;
}

.how-to-modal-block .btn-icon{
  width: 2.8vmin;
}

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

.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-light);
}

.target-figure-wrap {
  float: left;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2vmin 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-theme1);
  padding: 0.6vmin 1vmin 0.6vmin;
  font-family: var(--font-htp-head);
  font-weight: 900;
}

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

.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: 6vmin 0px 4vmin;
}

.no-record-title {
  font-size: 2.4vmin;
  font-family: var(--font-htp-head);
  font-weight: bold;
  text-transform: uppercase;
  color: var(--clr-theme1);
}

.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 0px 3vmin;
}

.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: 8.2vmin;
  }

  .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: calc(25vmin - 0.5vmin);
    max-width: calc(25vmin - 0.5vmin);
  }

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

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

  .remain-col {
    gap: 1vmin;
  }

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

  .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: 4vmin;
  }

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

  .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: 10.2vmin;
  }

  .htw-modal-logo-fig img {
    max-width: 52.5vmin;
  }

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

  .no-record-inner {
    padding: 11vmin 0px 6vmin;
  }
  .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: calc(30vmin - 1.5vmin);
    max-width: calc(30vmin - 1.5vmin);
  }

  .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: 5vmin 0;
  }

  .how-to-scenarios .how-to-modal-block .how-to-title {
    margin-top: 1vmin;
  }

  .prizes-list-block {
    flex-wrap: wrap;
    flex-direction: column;
  }
  .prize-card {
    max-width: 60vmin;
    min-height: 33vmin;
    display: flex;
    align-items: center;
  }
  .prize-point {
    font-size: 12.4vmin;
  }
  .prize-point sub {
    bottom: 2.6vmin;
  } 
  .prize-label {
    font-size: 4.2vmin;
  }
  .prize-pre {
    font-size: 3.2vmin;
  }

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

  .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;
  }

  .splash-remain-top {
    margin:5vmin 0 3vmin;
  }

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

  .show-leaderboard.action-info {
    margin-top: 7vmin;
  } 

  .show-leaderboard .action-info-inner {
    max-width: 88vmin;
  }

  .remain-block {
    max-width: 88vmin;
    max-height: 22vmin;
    border-radius: 3vmin;
    padding: 4vmin 3vmin;
  }

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

  .action-info .btn {
    height: 13vmin;
    padding: 0 4vmin;
    font-size: 5.2vmin;
    border-radius: 1.6vmin;
  }

  .btn-icon {
    width: 8vmin;
  }

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

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

  .remain-time {
    font-size: 3.5vmin;
    min-width: 10vmin;
    border-radius: 0.8vmin;
  }
  .remain-time-value {
    padding: 0.5vmin 0px 0.6vmin;
  }
  .remain-time-label {
    font-size: 2.8vmin;
    padding: 0.5vmin 0px 0.5vmin;
    border-radius: 0 0 0.8vmin 0.8vmin;
  }

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

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

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

  /*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: 8vmin;
    padding: 0.8vmin 11vmin 1.2vmin 5vmin;
    border: 0.24vmin dashed var(--clr-white);
    border-radius: 1.4vmin;
  }

  .copy-icon {
    min-width: 5.2vmin;
    max-width: 5.2vmin;
    right: 2.2vmin;
    bottom: 3.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: 3vmin;
    border-width: 0.52vmin;
    border-radius: 1.6vmin;
  }

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

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

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

  .leaderboard-top-block .code-title-wrap {
    margin-bottom: 0.86vmin;
    margin-top: 1.8vmin;
  }

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

  .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;
    top: calc(100% - 0.8vmin);
  }

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

  .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;
    top: 0.4vmin;
    position: relative;
  }

  .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:4dvh;
  }

}

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

  .splash-widget .button-bar-inner .button-col {
    max-width: 100%;
  }

  .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.2vmin 0px 0.4vmin;
  }
  
  .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: 70vmin;
  }

  .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%;
  max-height: 36.3vmin;
  overflow: hidden;
  overflow-y: auto;
}
.leader-tab{
  float: left;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.leaderboard-data .leader-tab:not(.selected) {
  border-bottom: 0.125vmin solid var(--bdr-base);
}
.leader-tab.selected {
  background: var(--clr-theme2);
}
.leader-tab.selected .leader-data-title {
  color: var(--clr-white);
}
.leader-header{
  float: left;
  width: 100%;
}
.leader-header .leader-tab{
  margin-bottom: 0px;
}
.leader-tab.selected{
  margin-top: 0;
  margin-bottom: 0px;
}

.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);
  font-weight: 600;
  padding: 1vmin 0px 0.8vmin;
}
.leader-head-title{
  background: var(--clr-theme1);
  padding: 1.6vmin 0px 1vmin;
  font-weight: bold;
}
.leader-data-title{
  color: var(--clr-dark-theme2);
}
.user-title-fig{
  display:flex;
  align-items:center;
  justify-content:center;
}
.user-title-fig img{
  max-width:9vmin;
}
.leader-data-text{
  color: var(--clr-dark-theme2);
  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 .leader-data-title{
  float: inherit;
  width: auto;
  align-items: flex-start;
}
.leader-tab-icon .leader-data-title sup{
  font-size:60%;
}
.leader-tab-head:first-child, .leader-tab-data:first-child{
  width: 30vmin;
  justify-content: center;
}
.leader-tab-head:last-child, .leader-tab-data:last-child{
  justify-content: center;
  width: 30vmin;
}
.leaderboard-bottom{
  float: left;
  width: 100%;
  background: var(--clr-white);
  border-radius:0 0 1.8vmin 1.8vmin;
  padding: 1.8vmin 2vmin 1.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;
  gap: 0 0.6vmin;
  display: flex;
  justify-content: center;
}
.leaderboard-bottom .button-bar-inner {
  flex-wrap: nowrap;
  flex-direction: row;
  gap: 0px 1.6vmin;
}
.leaderboard-bottom .button-col .btn{
  font-size: 3vmin;
  padding: 1.8vmin 0.5vmin;
}
/* .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;
  margin-bottom: 1vmin;
}
.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-theme1);
  font-size: 2.6vmin;
  font-weight: bold;
  font-family:var(--font-head);
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.4vmin 0px 0.8vmin;
  border: 0.2vmin solid var(--clr-dark);
  border-radius: 1vmin;
}
.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;
  }
  .leader-head-title, .leader-data-title {
    font-size: 3.2vmin;
    padding: 2vmin 0px 1.4vmin;
  }
  .leader-data-title {
    padding: 1.4vmin 0px 1.8vmin;
  }
  .user-title-fig img {
    max-width: 18vmin;
  }
  .leader-head-title {
    padding: 2.6vmin 0px 2vmin;
  }
  .leader-data-text{
    font-size: 2.8vmin;
  }
  .leader-data-icon{
    max-width: 4vmin;
  }
  .leader-tab-head:first-child, .leader-tab-data:first-child, .leader-tab-head:last-child, .leader-tab-data:last-child{
    width: 46vmin;
  }
  .leader-tab {
    margin-bottom: 1px;
  }
  .show-more-btn{
    max-width: 100%;
    font-size: 3.8vmin;
    padding: 3.6vmin 0 2.6vmin;
    border-radius: 1.6vmin;
  }
  .show-more-btn .icon{
    font-size: 4vmin;
  }
  .more-btn-block{
    padding: 1.4vmin 0 0.68vmin;
  }
  .more-btn-block-inner{
    padding: 0;
  }
  .btn-block-inner .button-bar{
    padding: 1.4vmin 2.4vmin;
  }
  .leaderboard-btn-block .button-bar-inner{
    max-width: 100%;
    gap: 0 1.6vmin;
  }
  .leaderboard-btn-block .button-bar{
    padding: 1.4vmin 0px;
    margin-bottom: 0px;
  }
  .leaderboard-bottom .button-col{
    max-width: calc(50% - 0.8vmin);
  }
  .leaderboard-bottom .button-col .btn {
    padding: 2.6vmin 2vmin;
    font-size: 4vmin;
    justify-content: center;
    height: 13vmin;
    border-radius: 1.6vmin;
}
  .leaderboard-bottom .btn-icon{
    width: 6vmin;
  }
  .leaderboard-bottom{
    border-radius: 0 0 2vmin 2vmin;
    padding: 2vmin 4.4vmin 3.6vmin;
  }
}
/* Leaderboard Screen CSS End */

/* Enter Nickname Screen CSS Start */
.enter-code-mid .code-title-pre{
  font-size: 2.8vmin;
  padding: 0 10vmin;
}
.enter-code-mid .code-md-bg{
  bottom: 3.3vmin;
}
.enter-code-mid .md-bg-line-fig{
  bottom: 2.4vmin;
}
.enter-nickname .my-code-bottom{
  padding:2vmin 3vmin 3vmin;
}
.enter-nickname .form-control{
  height: 6.4vmin;
  text-align: center;
  font-size: 2.68vmin;
}
.enter-nickname .form-control::placeholder {
  color: rgba(21, 44, 38, 0.5);
}
.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, .summary-screen .my-code-widget .brand-logo-figure {
    max-width: 64vmin;
  }
  .enter-nickname .brand-logo-wrap{
    display: flex;
  }
  .enter-nickname .code-tab-title{
    font-size: 7.5vmin;
  }
  .enter-nickname .code-title-pre, .summary-screen .code-title-pre {
    font-size: 4.2vmin;
    padding: 0 8vmin;
    margin-top: 1.4vmin;
    margin-bottom: 4vmin;
  }
  .game-score-wrap {
    margin: 1vmin 0px 3vmin;
  }
  .game-score-label {
    font-size: 10vmin;
  }
  .game-score-label:before {
    -webkit-text-stroke: 1.25vmin var(--clr-white);
  }
  .my-code-prize-block {
    padding:2vmin 1vmin;
  }
  .my-code-prize-block.copy-code-block {
    padding: 3vmin 0px;
  }
  .prize-title-pre{
    font-size: 4.2vmin;
  }
  .enter-nickname .form-control{
    height: 13vmin;
    font-size: 4.8vmin;
  }
  .enter-nickname .my-code-bottom{
    padding: 4vmin 4.4vmin 4.6vmin;
  }
  .summary-screen .my-code-bottom{
    padding: 2vmin 4.4vmin 4.6vmin;
  }
  .prize-text-wrap {
    margin-top: 2.5vmin;
  }
  .prize-text-pre {
    font-size: 3.6vmin;
    padding: 0px 1.8vmin;
  }
  .summary-action {
    margin-top: 2.5vmin;
  }
  .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, .summary-screen .button-col .btn{font-size: 4.8vmin; padding:2.75vmin 0;border-radius:1.6vmin; height:13vmin;}
  .my-code-card .summary-action .button-col .btn{font-size: 4vmin;}
}
/* Enter Nickname Screen CSS End */


@media only screen and (max-width:992px) and (orientation:landscape){
  .btn-label{top:0.3vmin;} 
}

@media only screen and (max-width: 480px) and (orientation: portrait) {
  .btn-label{top:0.6vmin;} 
  .code-copy-data > span{position:relative; top:0.6vmin;}
  .code-tab-title, .modal-head-mid-label{position:relative; top:0.6vmin;}
}

/* CSS rules for iOS devices Start */
@supports (-webkit-touch-callout: none) {
    
  @media (orientation: portrait) {
    .code-copy-data > span{position:relative; top:0.6vmin;}
    .btn-label{top:0.6vmin;}
    .code-tab-title, .modal-head-mid-label{position:relative; top:0.6vmin;}
    .input-field-focus .screen-wrap-inner{margin-top:-7vmin;}
  }

}
/* CSS rules for iOS devices End */

/* Terms and Conditions CSS Start */
.terms-conditions-widget{display:flex; flex-direction:column; justify-content:center; align-items:center;}
.terms-conditions-info{max-width:80vmin; --radius:2vmin;}
.terms-conditions-head{float:left; width:100%;}
.terms-conditions-head-inner{float:left; width:100%; background:linear-gradient(100deg, #1f3b33 0%, #0fb38d 70%, #e1ff85 114%); border-radius:var(--radius) var(--radius) 0 0; padding:2vmin 0;}
.terms-conditions-title{float:left; width:100%; text-align:center; font-size:5vmin; font-weight:900; text-transform:uppercase;}
.terms-conditions-wrap{float:left; width:100%; background:#ffffff; padding:2vmin 1vmin 2vmin 2vmin; border-radius:0 0 var(--radius) var(--radius);}
.terms-conditions-wrap-inner{float:left; width:100%;padding-right:0.8vmin; max-height:58vmin; overflow:auto;}
/* Scrollbar Track background */
.terms-conditions-wrap-inner::-webkit-scrollbar-track{background:#d5d5d5;}
.terms-conditions-info .brand-logo-figure{max-width:48vmin; margin-bottom:2vmin;}

.terms-conditions-wrap h3{float:left;width:100%;color:#1d3c34;font-size:2.1vmin;font-weight:600;line-height:1.2em;padding-bottom:1.2vmin;padding-top: 0.5vmin;}
.terms-conditions-wrap p strong{font-size:1.7vmin;font-weight:600;text-align:right;display: inline-block;line-height: 1em;position: absolute;left:0vmin;top: 0;width: 3.2vmin;padding-right: 0.4vmin;}
.terms-conditions-wrap p{float:left;width:100%;}
.terms-conditions-wrap p, .terms-conditions-wrap a{color:#3a3a3a;font-size:1.7vmin;line-height: 1.2em;position: relative;}
.terms-conditions-wrap p{padding: 0vmin 0vmin 1vmin; padding-left:3.6vmin; }
.terms-conditions-wrap a{color:#15886d;text-decoration:underline;}
.lower-alpha{float:left; width:100%; padding-left:6vmin; counter-reset:list;}
ol.lower-alpha > li{position: relative; color:#3a3a3a;font-size:1.7vmin;}
ol.lower-alpha > li:before { content: "(" counter(list, lower-alpha) ") "; counter-increment:list; margin-left:-2.8vmin; width:2.8vmin; font-weight:600; display: inline-block; text-align: right; padding-right: 3px; box-sizing: border-box; }
.clause-highlight{background:#e5e5e5;padding:2px 2px 0px;}
@media only screen and (max-width:992px) and (orientation: landscape) {
.terms-conditions-wrap p strong,
.terms-conditions-wrap p, .terms-conditions-wrap a{font-size:2.1vmin;}
	
}
@media only screen and (max-width: 480px) and (orientation: portrait) {
  .terms-conditions-wrap{padding:3vmin 1.4vmin 3vmin 2.5vmin;}
  .terms-conditions-info{max-width:80vmin; --radius:3.8vmin;}
  .terms-conditions-info .brand-logo-figure{max-width:58vmin;}
  .terms-conditions-info{max-width:calc(100% - 20px);}
  .terms-conditions-title{font-size:6vmin;}
  .terms-conditions-head-inner{padding:4vmin 0;}
  .terms-conditions-wrap-inner{padding-right:1.2vmin; max-height:100vmin;}
  .terms-conditions-wrap p strong{font-size:3.4vmin;}
  .terms-conditions-wrap p{padding: 0vmin 0vmin 1.4vmin;padding-left:5.4vmin; }
  .terms-conditions-wrap p, .terms-conditions-wrap a{font-size:3.2vmin;}
  .terms-conditions-wrap h3{font-size:3.6vmin;margin-bottom:2vmin;}
  .terms-conditions-wrap p strong{top:0.3vmin; width:5vmin; padding-right:2vmin;}
  ol.lower-alpha > li{font-size:3.2vmin;}
  ol.lower-alpha > li:before{margin-left:-5vmin; width:5vmin;}
}
/* Terms and Conditions CSS End */

/* Table CSS*/
.terms-conditions-table-outer{float: left;width: 100%;overflow-x: auto;margin-bottom: 12px; }
.terms-conditions-table {width: 100%;border: 1px solid rgba(51, 51, 51, 0.3);white-space: normal;margin-bottom: 14px;border-spacing: 0;margin: 0;padding: 0;color:#3a3a3a; }
.terms-conditions-table thead tr th{font-weight:600;color:#ffffff;background:#1d3c34;line-height:1.1em;text-transform:none;font-size:13px;padding:4px 4px 4px 8px;}
.terms-conditions-table tbody tr td{padding:6px 4px 4px 8px;vertical-align:top;line-height:1.2em;color:#3a3a3a;font-size:13px;border-bottom:1px solid rgba(51, 51, 51, 0.3);border-right:1px solid rgba(51, 51, 51, 0.3);}
.terms-conditions-table tbody tr:last-child td{border-bottom:0px;}
.terms-conditions-table tbody tr td:last-child{border-right:0px;}
.terms-conditions-table > tbody > tr > td:nth-child(1),
.terms-conditions-table > tbody > tr > td:nth-child(2){font-weight:600;}
.terms-conditions-table tbody tr td p{float: left;width: 100%;color: #3a3a3a;font-size:13px;line-height: 1.2em;padding:0px;margin-bottom:6px;position: relative;}
.terms-conditions-table tbody tr td p strong{float:none;position: relative;width:auto;color: #3a3a3a;font-size:13px;line-height: 1.2em;}
.terms-conditions-table tbody tr td p em{line-height: 1.2em;}
.promotion-periods-table {width:100%;border:1px solid rgba(51, 51, 51, 0.3);white-space: normal;border-spacing: 0;margin:0px 0px 8px;     padding:0px; 	color:#3a3a3a; }
.promotion-periods-table thead tr th{font-size:12px;}
.left-align{text-align:left;}
 ol.lists-number{float:left;width:100%;padding-left:24px;margin-bottom:8px;}
 ol.lists-number > li{ list-style:decimal;margin-bottom:4px;}
 ul.lists-list{float:left;width:100%;padding-left:24px;margin-bottom:8px;}
 ul.lists-list > li{ list-style:disc;margin-bottom:4px;}
.terms-conditions-wrap .table-text{float:left;width:100%;color:#3a3a3a;font-size:13px;line-height:1.2em;padding:0px;margin:6px 0px;position:relative;font-style:italic;}
.text-heading{float:left;width:100%;margin-bottom:2px;}
.text-underline{float:left;text-decoration:underline;}
/* Table CSS*/