:root {
  --body-background-color: black;
  --main-border-padding: 30px;
  --main-border-width: 5px;
  --main-border: var(--main-border-width) solid #174a7d;
  --vertical-line-width: 20px;
  --vertical-line-height: 120px;
  --vertical-line-position-top: calc(50% - calc(var(--vertical-line-height) / 2));
  --vertical-line-position-left-right: calc(var(--main-border-padding) + var(--main-border-width) - var(--vertical-line-width));
  --horizontal-line-width: 100px;
  --horizontal-line-height: 10px;
  /* TODO: make work when '--main-border-padding' value is percentage */
  --horizontal-line-position-top: calc(var(--main-border-padding) - var(--main-border-width));
  --horizontal-line-position-left-right: 80px;
}

@font-face {
  font-family: "bernier_regular";
  src: url("./assets/fonts/bernier_regular.ttf") format("TrueType");
}
@font-face {
  font-family: "graphik_medium";
  src: url("./assets/fonts/GraphikMedium.otf") format("OpenType");
}
html {
  height: 100%;
}

body {
  margin: 0;
  font-family: "graphik_medium";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  background-color: var(--body-background-color);
}

*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.full-screen, .ui #basketball_view_game_picture .flashVideo, .ui #basketball_view_game_picture .confettiVideo, .ui #basketball_view_game_finish .flashVideo, .ui #basketball_view_game_finish .confettiVideo, .ui #view_medal .flashVideo, .ui #view_medal .confettiVideo, .ui #view_medal, .ui #view_countdown, .ui #view_game_play, .ui #view_intro .introVideo, .ui #view_intro, .ui #view_loading, .ui .basketball {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  top: 0;
  left: 0;
}

.center, .ui #basketball_view_multiplayer_scores, .ui #basketball_view_game_leaderboard2, .ui #basketball_view_game_leaderboard, .ui #basketball_view_waiting_for_player .cont .countdown, .ui #basketball_view_waiting_for_player, .ui #basketball_view_waiting_for_opponent, .ui #basketball_view_game_final_score, .ui #basketball_view_game_investment, .ui #basketball_view_game_instructions, .ui #basketball_view_game_choose, .ui #view_intro .button, .ui #view_intro, .timer {
  display: flex;
  justify-content: center;
  align-items: center;
}

.background {
  background-image: url("assets/style/basketball/background.png");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  position: absolute;
}

.logo {
  background-image: url("assets/style/basketball/logo.png");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  width: 692px;
  height: 138px;
  top: 5%;
  position: absolute;
}

.title {
  background-image: url("assets/style/basketball/title.png");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  width: 689px;
  height: 394px;
  top: 10%;
  position: absolute;
}

.topscore_logo {
  background-image: url("assets/style/basketball/topscore_logo.png");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  width: 293px;
  height: 198px;
  top: 60%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}

.topscore_label {
  background-image: url("assets/style/basketball/topscore_label.png");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  width: 314px;
  height: 65px;
  top: 60%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}

.leaderboard {
  width: 100%;
  height: 600px;
  position: absolute;
  top: 68%;
  color: #000AD0;
}
.leaderboard .leaderboard_titles {
  width: 80%;
  left: 50%;
  transform: translate(-50%, 0%);
  font-size: 24px;
  height: 40px;
  position: absolute;
  pointer-events: none;
  display: inline-flex;
  justify-content: space-between;
  text-align: center;
}
.leaderboard .leaderboard_titles .title1 {
  width: 40%;
  text-align: left;
}
.leaderboard .leaderboard_titles .title2 {
  width: 30%;
  text-align: right;
}
.leaderboard .leaderboard_titles .title3 {
  width: 25%;
  text-align: right;
}
.leaderboard .leaderboardCont {
  top: 40px;
  width: 100%;
  height: 500px;
  position: absolute;
  display: flex;
  flex-direction: column;
  align-content: center;
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: hidden;
  overflow-y: overlay;
}
.leaderboard .leaderboardCont.dontHideOverflow {
  overflow-x: initial;
  overflow-y: initial;
}
.leaderboard .leaderboardCont::-webkit-scrollbar {
  display: none;
}
.leaderboard .leaderboardCont .row {
  width: 80%;
  margin-left: 50%;
  margin-bottom: 65px;
  transform: translate(-50%, 0%);
  pointer-events: none;
  display: inline-flex;
  justify-content: space-between;
  text-align: center;
  font-size: 35px;
  position: relative;
}
.leaderboard .leaderboardCont .row .col1 {
  width: 40%;
  text-align: left;
}
.leaderboard .leaderboardCont .row .col2 {
  width: 30%;
  text-align: right;
}
.leaderboard .leaderboardCont .row .col3 {
  width: 25%;
  text-align: right;
}
.leaderboard .leaderboardCont .row .winner {
  border: 2px #0009d0 solid;
  width: calc(100% + 30px);
  height: 80px;
  left: -15px;
  top: -20px;
  position: absolute;
}

.cursor {
  width: 100px;
  height: 100px;
  z-index: 1000;
  position: absolute;
}
.cursor .point {
  width: 30%;
  height: 30%;
  top: 35%;
  left: 35%;
  border-radius: 50%;
  background-image: url("assets/style/dot.png");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  transition: background 0.5s;
}
.cursor .gauge {
  transform: rotate(-90deg);
}
.cursor .gauge .progress {
  r: 19.5;
  stroke: #fff !important;
  stroke-width: 9;
  stroke-dasharray: 100;
  transition: all 0.1s;
}
.timer {
  position: absolute;
  top: var(--timer-position-top);
  left: var(--timer-position-left);
  text-align: center;
  font-size: 42px;
  width: var(--timer-width);
  height: var(--timer-width);
  background: url("assets/style/timer-frames.png") no-repeat center center/contain;
  line-height: var(--timer-width);
  color: white;
  font-family: "graphik_medium";
}
.timer.timer-1 {
  color: white;
  font-weight: 600;
}
.timer.timer-2 {
  color: red;
  font-weight: 400;
  text-shadow: -2px -1px 0 white, 2px -1px 0 white, -2px 1px 0 white, 2px 1px 0 white;
}

.ui {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  padding: var(--main-border-padding);
}
.ui .view, .ui .global {
  width: 100%;
  height: 100%;
  position: absolute;
}
.ui .global {
  z-index: 10;
  padding: var(--main-border-padding);
  pointer-events: none;
}
.ui .global .border {
  width: 100%;
  height: 100%;
  border: var(--main-border);
}
.ui .global .border .line-left-right, .ui .global .border .line-right, .ui .global .border .line-left {
  position: fixed;
  width: var(--vertical-line-width);
  height: var(--vertical-line-height);
  top: var(--vertical-line-position-top);
}
.ui .global .border .line-left {
  left: var(--vertical-line-position-left-right);
  background: url("assets/style/line-left.png") no-repeat center center/contain;
}
.ui .global .border .line-right {
  right: var(--vertical-line-position-left-right);
  background: url("assets/style/line-right.png") no-repeat center center/contain;
}
.ui .global .border .line-top-bottom-1-2, .ui .global .border .line-bottom-2, .ui .global .border .line-bottom-1, .ui .global .border .line-top-2, .ui .global .border .line-top-1 {
  position: fixed;
  width: var(--horizontal-line-width);
  height: var(--horizontal-line-height);
}
.ui .global .border .line-top-1 {
  top: var(--horizontal-line-position-top);
  left: var(--horizontal-line-position-left-right);
  background: url("assets/style/line-top.png") no-repeat center center/contain;
}
.ui .global .border .line-top-2 {
  top: var(--horizontal-line-position-top);
  right: var(--horizontal-line-position-left-right);
  background: url("assets/style/line-top.png") no-repeat center center/contain;
}
.ui .global .border .line-bottom-1 {
  bottom: var(--horizontal-line-position-top);
  left: var(--horizontal-line-position-left-right);
  background: url("assets/style/line-bottom.png") no-repeat center center/contain;
}
.ui .global .border .line-bottom-2 {
  bottom: var(--horizontal-line-position-top);
  right: var(--horizontal-line-position-left-right);
  background: url("assets/style/line-bottom.png") no-repeat center center/contain;
}
.ui .global .jm-logo {
  width: 350px;
  position: fixed;
  transform: rotate(-15deg);
  bottom: -10px;
  right: -10px;
  z-index: 2;
}
.ui .global .jm-logo .jom-logo-img {
  max-width: 100%;
}
.ui .views {
  --count-text-width: 75px;
  --count-text-position-left: calc((100% - var(--count-text-width)) / 2);
  --count-text-position-top: 15%;
  /* 60% */
  --game-text-width: 50%;
  --game-text-position-left: calc((100% - var(--game-text-width)) / 2);
  --game-text-position-top: 10%;
  /* 50% */
  --medal-width: 70%;
  --medal-position-left: calc((100% - var(--medal-width)) / 2);
  --medal-position-top: calc(10% + 30px);
  --instructions-width: 60%;
  --timer-width: 12%;
  --timer-position-left: calc((100% - var(--timer-width)) / 2);
  --timer-position-top: 7%;
  --countdown_img-width: 30%;
  --countdown_img-position-left: calc((100% - var(--countdown_img-width)) / 2);
  --countdown_img-position-top: 10%;
  --congratulations_img-width: 80%;
  --congratulations_img-position-left: calc((100% - var(--congratulations_img-width)) / 2);
  --congratulations_img-position-top: calc((100% - var(--congratulations_img-width)) / 2);
}
.ui .basketball .header {
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
  background-image: url("./assets/style/basketball/header.png");
  width: 100%;
  height: 600px;
  position: absolute;
  top: 0%;
  pointer-events: none;
}
.ui .basketball .scan_text {
  background-size: 100% auto;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-image: url("./assets/style/basketball/scan_text_empty.png");
  width: 1600px;
  height: 460px;
  position: absolute;
  bottom: 10%;
  pointer-events: none;
}
.ui .basketball .scan_text .qr {
  width: 268px;
  height: 268px;
  position: absolute;
  top: 160px;
  left: 50%;
  transform: translate(-50%, -50%);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url("./assets/style/basketball/qr.png");
}
.ui .basketball .footer {
  background-size: 100% auto;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-image: url("./assets/style/basketball/footer.png");
  width: 100%;
  height: 400px;
  position: absolute;
  bottom: 0%;
  pointer-events: none;
}
.ui .basketball .display {
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
  background-image: url("./assets/style/basketball/display.png");
  width: 1080px;
  height: 400px;
  position: absolute;
  top: 6%;
  left: 50%;
  pointer-events: none;
  transform-origin: top left;
  transform: translateX(-50%);
  font-family: "graphik_medium";
  color: #fff;
  font-size: 68px;
}
.ui .basketball .display .displayScore {
  position: absolute;
  top: 75px;
  left: 20px;
}
.ui .basketball .display .displayTimer {
  position: absolute;
  top: 75px;
  left: 820px;
}
.ui .basketball .home {
  background-size: contain;
  background-position: top center;
  background-repeat: no-repeat;
  background-image: url("./assets/style/basketball/home.png");
  width: 80px;
  height: 80px;
  position: absolute;
  bottom: 30px;
  right: 40px;
  cursor: pointer;
  pointer-events: all;
}
.ui .basketball .back {
  background-size: contain;
  background-position: top center;
  background-repeat: no-repeat;
  background-image: url("./assets/style/basketball/back.png");
  width: 80px;
  height: 80px;
  position: absolute;
  bottom: 30px;
  left: 40px;
  cursor: pointer;
  pointer-events: all;
}
.ui .basketball .timesup {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("./assets/style/basketball/times_up.png");
  width: 580px;
  height: 153px;
  transform-origin: top left;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  opacity: 0;
  pointer-events: none;
  position: absolute;
}
@keyframes showtimesUpFrames {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.ui .basketball .timesup.showtimesUp {
  animation: showtimesUpFrames 2s;
}
.ui .basketball .niceShoot {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("./assets/style/basketball/nice_shooting.png");
  width: 760px;
  height: 400px;
  transform-origin: top left;
  transform: translate(-50%, -50%);
  top: 40%;
  left: 50%;
  opacity: 0;
  pointer-events: none;
  position: absolute;
}
@keyframes showNiceShoot {
  0% {
    opacity: 0;
    top: 50%;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    top: 35%;
  }
}
.ui .basketball .niceShoot.showNice {
  animation: showNiceShoot 1s;
}
.ui #view_loading {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  font-family: "graphik_medium";
}
.ui #view_intro {
  background-color: #2e2e2e;
}
.ui #view_intro .introVideo {
  -o-object-fit: contain;
     object-fit: contain;
}
.ui #view_intro .button {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  color: #fff;
  z-index: 100;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: all 0.5s;
}
.ui #view_intro .button.hover {
  transform: scale(1.4);
}
.ui #view_sub_choose {
  --title-img-width: 40%;
  --btn-width: 25%;
  --btn-position-top: 43%;
  --btn-horizontal-position: 40%;
}
.ui #view_sub_choose .btn-hot {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  width: var(--btn-width);
  height: var(--btn-width);
  top: 0;
  bottom: 0;
  left: calc(var(--btn-horizontal-position) * -1);
  right: 0;
  margin: auto;
  transition: all 0.5s;
}
.ui #view_sub_choose .btn-hot.hover {
  transform: scale(1.2);
}
.ui #view_sub_choose .btn-cold {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  width: var(--btn-width);
  height: var(--btn-width);
  top: 0;
  bottom: 0;
  left: var(--btn-horizontal-position);
  right: 0;
  margin: auto;
  transition: all 0.5s;
}
.ui #view_sub_choose .btn-cold.hover {
  transform: scale(1.2);
}
.ui #view_sub_choose .btn-hot-img,
.ui #view_sub_choose .btn-cold-img {
  max-width: 100%;
}
.ui #view_sub_choose .title-img {
  position: fixed;
  width: 30%;
  width: var(--title-img-width);
  top: 10%;
  left: calc(50% - var(--title-img-width) / 2);
}
.ui .view_instructions {
  position: fixed;
  width: var(--instructions-width);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.ui #view_game_play .bar {
  position: fixed;
  right: 15px;
  top: 120px;
  width: 35px;
  height: 27%;
  z-index: 20;
}
.ui #view_game_play .bar .icon {
  width: 50px;
  height: 50px;
  top: -42px;
  left: -8px;
  position: absolute;
  border-radius: 50%;
  background-color: #174a7d;
}
.ui #view_game_play .bar .icon .inside {
  top: calc(5% - 0px);
  left: calc(5% - 0px);
  width: 90%;
  height: 90%;
  position: absolute;
  background-image: url("./assets/style/burger_icon.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border: solid 3px #ed2924;
  border-radius: 50%;
}
.ui #view_game_play .bar .container {
  width: 100%;
  height: 100%;
  border: var(--main-border);
  background-color: #2e2e2e;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
}
.ui #view_game_play .bar .container .item {
  border: solid 1px #fff;
  background-color: #ff0000;
  width: 100%;
  height: 8.3333333333%;
}
.ui #view_game_play .bar_small {
  height: 20%;
}
.ui #view_game_play .bar_small .item {
  height: 14.2857142857% !important;
}
.ui #view_countdown .view_countdown_img {
  width: var(--countdown_img-width);
  height: var(--countdown_img-width);
  position: absolute;
  top: var(--countdown_img-position-top);
  left: var(--countdown_img-position-left);
  background-size: contain;
  background-position: top;
  background-repeat: no-repeat;
}
.ui #view_countdown .view_countdown_img.img1 {
  background-image: url("./assets/style/countdown.png");
}
.ui #view_countdown .view_countdown_img.img2 {
  background-image: url("./assets/style/countdown2.png");
}
.ui #basketball_view_game_play .countdown {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 180px;
  height: 150px;
  transform-origin: top left;
  transform: translate(0%, 0%);
  bottom: 220px;
  left: 30px;
  position: absolute;
  background-image: url("./assets/style/basketball/empty.png");
  display: flex;
  justify-content: center;
  align-items: center;
  color: #0009d0;
  font-size: 75px;
}
.ui #basketball_view_game_play .names {
  background-size: contain;
  background-position: left;
  background-repeat: no-repeat;
  background-size: contain;
  text-transform: uppercase;
  width: 800px;
  height: 150px;
  transform-origin: top left;
  transform: translate(0%, 0%);
  bottom: 30px;
  left: 30px;
  position: absolute;
  background-image: url("./assets/style/basketball/names_frame.png");
  display: flex;
  justify-content: center;
  align-items: center;
  color: #0009d0;
  font-size: 55px;
}
.ui #view_congratulations .view_congratulations_text {
  display: none;
  width: var(--congratulations_img-width);
  height: var(--congratulations_img-width);
  position: absolute;
  top: var(--congratulations_img-position-top);
  left: var(--congratulations_img-position-left);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("./assets/style/congratulations.png");
}
.ui #view_congratulations .view_congratulations_img {
  display: none;
  width: var(--congratulations_img-width);
  height: var(--congratulations_img-width);
  position: absolute;
  top: var(--congratulations_img-position-top);
  left: var(--congratulations_img-position-left);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: all 0.5s;
}
.ui #view_congratulations .view_congratulations_img.gold {
  background-image: url("./assets/style/congratulations_gold.png");
}
.ui #view_congratulations .view_congratulations_img.silver {
  background-image: url("./assets/style/congratulations_silver.png");
}
.ui #view_congratulations .view_congratulations_img.bronze {
  background-image: url("./assets/style/congratulations_bronze.png");
}
.ui #view_congratulations .view_congratulations_img.hidden {
  opacity: 0;
  top: 100%;
}
.ui #view_scan_phone {
  --qr-code-width: 40%;
}
.ui #view_scan_phone .btn-back {
  display: inline-block;
  position: fixed;
  width: 20%;
  top: 30%;
  left: 20%;
  transition: all 0.5s;
}
.ui #view_scan_phone .btn-back.hover {
  transform: scale(1.2);
}
.ui #view_scan_phone .btn-back-img,
.ui #view_scan_phone .btn-home-img {
  max-width: 100%;
}
.ui #view_scan_phone .btn-home {
  display: inline-block;
  position: fixed;
  width: 20%;
  top: 30%;
  left: 20%;
  transition: all 0.5s;
}
.ui #view_scan_phone .btn-home.hover {
  transform: scale(1.2);
}
.ui #view_scan_phone .scan-qr-code {
  position: fixed;
  width: 30%;
  width: var(--qr-code-width);
  top: 10%;
  left: calc(50% - var(--qr-code-width) / 2);
}
.ui #view_scan_phone .qr-code-cont {
  position: fixed;
  width: 440px;
  top: 25%;
  right: 15%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
}
.ui #view_scan_phone .qr-code-cont .qr-code {
  width: 440px;
}
.ui #view_scan_phone .qr-code-cont .qr-code-label {
  height: 45px;
}
.ui #view_medal .game-text {
  background-image: url("./assets/style/game-text-2.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top;
  position: fixed;
  width: var(--game-text-width);
  height: var(--game-text-width);
  top: var(--game-text-position-top);
  left: var(--game-text-position-left);
}
.ui #view_medal .medal, .ui #view_medal .bun {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top;
  position: fixed;
  width: 50%;
  height: var(--medal-width);
  top: 10%;
  left: 25%;
}
.ui #view_medal .medal.gold, .ui #view_medal .gold.bun {
  background-image: url("./assets/style/gold-title.png");
}
.ui #view_medal .medal.silver, .ui #view_medal .silver.bun {
  background-image: url("./assets/style/silver-title.png");
}
.ui #view_medal .medal.bronze, .ui #view_medal .bronze.bun {
  background-image: url("./assets/style/bronze-title.png");
}
.ui #view_medal .bun {
  display: none;
}
.ui #view_medal .bun.bun_cold {
  background-image: url("./assets/style/medal_bun.png");
}
.ui #view_medal .bun.bun_mikes {
  background-image: url("./assets/style/medal_bun_mike.png");
}
.ui #view_medal .bun.bun_hot {
  background-image: url("./assets/style/medal_bun_hot.png");
}
.ui #view_medal .confettiVideo {
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0.3;
}
.ui #view_medal .flashVideo {
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0.8;
  z-index: 20;
}
.ui #basketball_view_game_choose .btn-1 {
  position: absolute;
  transform: translate(-50%, -50%) scale(0.9);
  top: 41%;
}
.ui #basketball_view_game_choose .logo {
  top: 5%;
}
.ui #basketball_view_game_choose .title {
  top: 17%;
  transform: scale(0.8);
}
.ui #basketball_view_game_choose .topscore_logo {
  top: 53%;
}
.ui #basketball_view_game_choose .topscore_label {
  top: 65%;
}
.ui #basketball_view_game_instructions {
  flex-direction: column;
}
.ui #basketball_view_game_instructions .blend {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.7);
}
.ui #basketball_view_game_instructions .instruction {
  width: 55%;
  height: 35%;
  -o-object-fit: contain;
  object-fit: contain;
  z-index: 10;
  margin-top: -10%;
}
.ui #basketball_view_game_instructions .btn-1 {
  z-index: 10;
  margin-top: 10%;
}
.ui #basketball_view_game_get_ready .getReady {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("./assets/style/basketball/get_ready.png");
  width: 760px;
  height: 400px;
  transform-origin: top left;
  transform: translate(-50%, -50%);
  top: 40%;
  left: 50%;
  position: absolute;
}
.ui #basketball_view_game_get_ready .countdown {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 226px;
  height: 194px;
  transform-origin: top left;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  position: absolute;
}
.ui #basketball_view_game_get_ready .countdown.num1 {
  background-image: url("./assets/style/basketball/1.png");
}
.ui #basketball_view_game_get_ready .countdown.num2 {
  background-image: url("./assets/style/basketball/2.png");
}
.ui #basketball_view_game_get_ready .countdown.num3 {
  background-image: url("./assets/style/basketball/3.png");
}
.ui #basketball_view_game_finish .niceShooting {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("./assets/style/basketball/nice_shooting.png");
  width: 800px;
  height: 300px;
  transform-origin: top left;
  transform: translate(-50%, -50%);
  top: 35%;
  left: 50%;
  position: absolute;
}
.ui #basketball_view_game_finish .getReady {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("./assets/style/basketball/get_ready_photo.png");
  width: 800px;
  height: 300px;
  transform-origin: top left;
  transform: translate(-50%, -50%);
  top: 35%;
  left: 50%;
  position: absolute;
}
.ui #basketball_view_game_finish .confettiVideo {
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0.3;
}
.ui #basketball_view_game_finish .flashVideo {
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0.8;
  z-index: 20;
}
.ui #basketball_view_game_investment .cont {
  width: 689px;
  height: 1300px;
  position: absolute;
  z-index: 10;
  top: 28%;
}
.ui #basketball_view_game_investment .cont .investment_bg {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  position: absolute;
}
.ui #basketball_view_game_investment .cont .score_label {
  position: relative;
  width: 100%;
  height: 50px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 127px;
  color: #000AD0;
  font-family: "graphik_medium";
  top: 200px;
}
.ui #basketball_view_game_investment .cont .field, .ui #basketball_view_game_investment .cont .field2 {
  position: relative;
  font-family: "graphik_medium";
  font-size: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #000AD0;
  background: transparent;
  border: none;
  width: 60%;
  height: 110px;
  top: 300px;
  left: 50%;
  transform: translateX(-50%);
}
.ui #basketball_view_game_investment .cont .field:focus, .ui #basketball_view_game_investment .cont .field2:focus {
  outline: none;
}
.ui #basketball_view_game_investment .cont .field2 {
  top: 310px;
}
.ui #basketball_view_game_investment .cont .additionalTexts {
  font-size: 46px;
  position: absolute;
  top: 535px;
  left: 285px;
}
.ui #basketball_view_game_investment .cont .additionalTexts div {
  display: inline-block;
}
.ui #basketball_view_game_investment .cont .additionalTexts .additional_amount {
  color: #0009d0;
  font-weight: bold;
  margin-right: 5px;
}
.ui #basketball_view_game_investment .cont .additionalTexts .additional_text {
  font-size: 42px;
}
.ui #basketball_view_game_investment .cont .chart {
  width: 100%;
  height: 300px;
  display: flex;
  position: absolute;
  top: 120px;
}
.ui #basketball_view_game_investment .cont .chart .side {
  display: flex;
  flex-direction: column-reverse;
  position: relative;
  height: 100%;
  width: 50%;
}
.ui #basketball_view_game_investment .cont .chart .side .bar {
  position: relative;
  background-color: #000;
  width: 100%;
  height: 50px;
}
.ui #basketball_view_game_investment .cont .chart .side .texts .bar_title {
  font-size: 16px;
}
.ui #basketball_view_game_investment .cont .chart .side .texts .bar_amount {
  font-size: 78px;
  font-weight: bold;
}
.ui #basketball_view_game_investment .cont .chart .side.second {
  color: #0009d0;
}
.ui #basketball_view_game_investment .cont .chart .side.second .bar {
  background-color: #0009d0;
}
.ui #basketball_view_game_investment .cont .next {
  width: 367px;
  height: 124px;
  position: absolute;
  display: block;
  top: 750px;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.ui #basketball_view_game_investment .cont .next .img {
  position: absolute;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}
.ui #basketball_view_game_final_score .cont {
  width: 843px;
  height: 590px;
  position: absolute;
  z-index: 10;
  top: 27%;
}
.ui #basketball_view_game_final_score .cont .final_score_bg {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  position: absolute;
}
.ui #basketball_view_game_final_score .cont .score_label {
  position: relative;
  width: 100%;
  height: 50px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 127px;
  color: #000AD0;
  font-family: "graphik_medium";
  top: 200px;
  opacity: 0;
  pointer-events: none;
}
.ui #basketball_view_game_final_score .cont .field, .ui #basketball_view_game_final_score .cont .field2 {
  position: relative;
  font-family: "graphik_medium";
  font-size: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #000AD0;
  background: transparent;
  border: none;
  width: 61%;
  height: 108px;
  top: 188px;
  left: 50%;
  transform: translateX(-50%);
}
.ui #basketball_view_game_final_score .cont .field:focus, .ui #basketball_view_game_final_score .cont .field2:focus {
  outline: none;
}
.ui #basketball_view_game_final_score .cont .field::-moz-placeholder, .ui #basketball_view_game_final_score .cont .field2::-moz-placeholder {
  color: #000AD0;
}
.ui #basketball_view_game_final_score .cont .field::placeholder, .ui #basketball_view_game_final_score .cont .field2::placeholder {
  color: #000AD0;
}
.ui #basketball_view_game_final_score .cont .field::-ms-input-placeholder, .ui #basketball_view_game_final_score .cont .field2::-ms-input-placeholder {
  color: #000AD0;
}
.ui #basketball_view_game_final_score .cont .field.error, .ui #basketball_view_game_final_score .cont .error.field2 {
  color: #ff0000 !important;
  border: solid 12px #ff0000 !important;
}
.ui #basketball_view_game_final_score .cont .field2 {
  top: 200px;
}
.ui #basketball_view_game_final_score .cont .next {
  width: 367px;
  height: 124px;
  position: relative;
  display: block;
  top: 320px;
  left: 50%;
  transform: translate(-50%, -50%);
}
.ui #basketball_view_game_final_score .cont .next .img {
  position: relative;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}
.ui #basketball_view_waiting_for_opponent .cont {
  width: 843px;
  height: 590px;
  position: absolute;
  z-index: 10;
  top: 27%;
}
.ui #basketball_view_waiting_for_opponent .cont .waiting_bg {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  position: absolute;
}
.ui #basketball_view_waiting_for_opponent .cont .next {
  width: 367px;
  height: 124px;
  position: relative;
  display: block;
  top: 700px;
  left: 50%;
  transform: translate(-50%, -50%);
}
.ui #basketball_view_waiting_for_opponent .cont .next .img {
  position: relative;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}
.ui #basketball_view_waiting_for_player .cont {
  width: 843px;
  height: 590px;
  position: absolute;
  z-index: 10;
  top: 27%;
}
.ui #basketball_view_waiting_for_player .cont .countdown {
  width: 100%;
  height: 100%;
  position: absolute;
  font-size: 220px;
  color: #000AD0;
}
.ui #basketball_view_waiting_for_player .cont .next {
  width: 367px;
  height: 124px;
  position: relative;
  display: block;
  top: 700px;
  left: 50%;
  transform: translate(-50%, -50%);
}
.ui #basketball_view_waiting_for_player .cont .next .img {
  position: relative;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}
.ui #basketball_view_game_leaderboard .title {
  top: 17%;
  transform: scale(0.8);
}
.ui #basketball_view_game_leaderboard .topscore_label {
  top: 58% !important;
  display: none;
}
.ui #basketball_view_game_leaderboard .more_scores {
  width: 40%;
  height: 6%;
  transform: translate(-50%, 0%);
  top: 58%;
  left: 50%;
  -o-object-fit: contain;
     object-fit: contain;
  position: absolute;
  cursor: pointer;
}
.ui #basketball_view_game_leaderboard .cont {
  width: 843px;
  height: 552px;
  position: absolute;
  z-index: 10;
  top: 32%;
}
.ui #basketball_view_game_leaderboard .cont .final_score_bg {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  position: absolute;
}
.ui #basketball_view_game_leaderboard .cont .qr_score_bg {
  margin-left: 5%;
  width: 90%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  position: absolute;
}
.ui #basketball_view_game_leaderboard .cont .score_label {
  position: relative;
  width: 100%;
  height: 50px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 127px;
  color: #000AD0;
  font-family: "graphik_medium";
  top: 200px;
}
.ui #basketball_view_game_leaderboard .leaderboard {
  top: 62%;
  display: none;
}
.ui #basketball_view_game_leaderboard .topscore_label {
  top: 65%;
}
.ui #basketball_view_game_leaderboard2 .title {
  top: 17%;
  transform: scale(0.8);
}
.ui #basketball_view_game_leaderboard2 .leaderboard {
  top: 45%;
  height: 900px;
}
.ui #basketball_view_game_leaderboard2 .leaderboard .leaderboardCont {
  height: 900px;
}
.ui #basketball_view_game_leaderboard2 .topscore_label {
  top: 40% !important;
}
.ui #basketball_view_multiplayer_scores .title {
  top: 17%;
  transform: scale(0.8);
}
.ui #basketball_view_multiplayer_scores .leaderboard {
  top: 35%;
  height: 900px;
}
.ui #basketball_view_multiplayer_scores .leaderboard .leaderboard_titles {
  display: none;
}
.ui #basketball_view_multiplayer_scores .leaderboard .leaderboardCont {
  height: 900px;
}
.ui #basketball_view_multiplayer_scores .multiplayer_scores_label {
  top: 30% !important;
  font-size: 80px;
  color: #0009d0;
  z-index: 100;
  position: absolute;
}
.ui #basketball_view_multiplayer_scores .next {
  z-index: 100;
  margin-top: 500px;
  cursor: pointer;
}
.ui #basketball_view_game_picture .niceShooting {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("./assets/style/basketball/get_ready_photo.png");
  width: 800px;
  height: 300px;
  transform-origin: top left;
  transform: translate(-50%, -50%);
  top: 35%;
  left: 50%;
  position: absolute;
}
.ui #basketball_view_game_picture .confettiVideo {
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0.3;
}
.ui #basketball_view_game_picture .flashVideo {
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0.8;
  z-index: 20;
}
.ui #basketball_view_scan {
  background-color: rgba(0, 0, 0, 0.5);
}
.ui #basketball_view_scan .btn-back {
  display: inline-block;
  position: fixed;
  width: 20%;
  top: 30%;
  left: 20%;
  transition: all 0.5s;
}
.ui #basketball_view_scan .btn-back.hover {
  transform: scale(1.2);
}
.ui #basketball_view_scan .scanTitle {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("./assets/style/basketball/scan.png");
  width: 800px;
  height: 300px;
  transform-origin: top left;
  transform: translate(-50%, -50%);
  top: 30%;
  left: 50%;
  position: absolute;
}
.ui #basketball_view_scan .btn-back-img,
.ui #basketball_view_scan .btn-home-img {
  max-width: 100%;
}
.ui #basketball_view_scan .btn-home {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  width: 25%;
  top: 50%;
  left: 20%;
  transition: all 0.5s;
}
.ui #basketball_view_scan .btn-home.hover {
  transform: scale(1.2);
}
.ui #basketball_view_scan .qr-code-cont {
  position: fixed;
  width: 400px;
  top: 45%;
  right: 15%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
}
.ui #basketball_view_scan .qr-code-cont .qr-code {
  width: 400px;
}
.ui .count-text {
  position: fixed;
  width: var(--count-text-width);
  top: var(--count-text-position-top);
  left: var(--count-text-position-left);
}