@font-face {
    font-family: 'hk_groteskregular';
    src: url('hkgrotesk-regular-webfont.woff2') format('woff2'),
         url('hkgrotesk-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'hk_groteskbold';
    src: url('hkgrotesk-bold-webfont.woff2') format('woff2'),
         url('hkgrotesk-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


header {
  border-bottom: solid 1px rgba(205, 208, 219, 0.4); }
strong { font-family: 'hk_groteskbold', sans-serif; }
.header-links {
  padding: 30px 0;
  display: flex;
  justify-content: space-between;
  align-items: center; }

.navbar {
  width: 100%; }
h2 {
  color: var(--heading-color); }

.navbar-icon {
  background: url(/img/icons/dark/menu.svg) !important;
  background-size: cover !important; }

#nav-ul {
  width: 100%;
  display: flex;
  justify-content: space-between; }
  #nav-ul a {
    font-size: 16px;
    font-weight: 600; }
    #nav-ul a:hover {
      transition: .3s; }

.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .show > .nav-link {
  color: #249fff!important;
  font-weight: 600; }

#play-now, #how-to-play-link, #about-link {
  color: var(--header-link-color); }

#register-btn {
  border-radius: 5px;
  background-color: #249fff;
  font-weight: bold;
  font-size: 14px !important;
  color: #ffffff;
  padding: 6px 17px;
  text-transform: uppercase;
  margin-top: 4px; }

.invalid-feedback {
  margin-top: -20px!important;
  margin-bottom: 10px!important;
}

.logo {
  background: var(--header-logo) no-repeat;
  background-size: contain;
  background-position: center;
  width: 200px;
  height: 40px; }

.logo-2 {
  display: none;
  background: var(--header-logo) no-repeat;
  background-size: contain;
  background-position: center;
  width: 250px;
  height: 40px; }

.navbar-collapse {
  margin-top: 20px; }

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

html {
  scroll-behavior: smooth; }

body {
  font-family: 'hk_groteskregular', sans-serif;
  background-color: var(--bg-color); }

.advertisement {
  height: 90px;
  background-color: #cdd0db;
  margin-top: 33px;
  line-height: 90px;
  font-size: 12px;
  font-weight: bold;
  color: #545d64;
  text-align: center; }

.game-features {
  padding: 30px 10px 20px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between; }
  .game-features > div {
    display: flex;
    align-items: center;
    text-align: center; }

.timer {
  display: flex;
  width: 99px;
  height: 40px;
  line-height: 40px;
  color: var(--font-color);
  font-size: 16px;
  font-weight: 500;
  background-color: var(--div-background);
  text-align: center; }

.time {
  border: solid 1px var(--div-border);
  width: 62px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px; }

.play-pause {
  width: 36px;
  border: solid 1px var(--div-border);
  border-left: none;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  text-align: center;
  background-image: url(/img/icons/light/pause.svg);
  background-repeat: no-repeat;
  background-size: 12px;
  background-position: center;
  cursor: pointer; }

.date {
  margin-left: 15px;
  font-size: 14px;
  font-weight: 500;
  color: var(--font-color); 
  border: 0px!important;
  background-color: var(--bg-color)!important;
  background-image: url(/img/icons/light/calendar.png); 
  background-position: 0px 0px;
  background-repeat: no-repeat;
  padding-left:30px;
  background-size: 20px;
  cursor: pointer;
  }
  
  .solved-date {
      background: #d4edda;
  }
    
  .datepicker.datepicker-inline td, .datepicker.datepicker-inline th, .datepicker.dropdown-menu td, .datepicker.dropdown-menu th {
    padding: 5px!important;
  }
.calendar-icon {
  width: 20px;
  margin-left: -15px;
}

.theme-color {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100px;
  height: 40px;
  border-radius: 3px;
  border: solid 1px var(--div-border);
  background-color: var(--div-background); }

.light-mode {
  width: 14px;
  height: 14px;
  margin-left: 5px;
  background: var(--sun-background) no-repeat;
  background-size: contain; }

.dark-mode {
  width: 14px;
  height: 14px;
  margin-right: 5px;
  background: var(--moon-background) no-repeat;
  background-size: contain; }

#navbar-button {
  border-color: var(--responsive-menu-border); }

.toggle-validation {
  width: 180px;
  height: 40px;
  line-height: 40px;
  margin-left: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--font-color);
  border-radius: 3px;
  border: solid 1px var(--div-border);
  background-color: var(--div-background);
  text-align: left;
  padding-left: 15px; }

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0; }

/* Firefox */
input[type=number] {
  -moz-appearance: textfield; }

.sudoku-actions .keypad {
  padding: 0px 15px; }
  .sudoku-actions .keypad .row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px; }
  .sudoku-actions .keypad .col {
    text-align: center;
    padding: 0; }
    .sudoku-actions .keypad .col.bl {
      border-left: var(--keypad-border); }
    .sudoku-actions .keypad .col.bt {
      border-top: var(--keypad-border); }
    .sudoku-actions .keypad .col.bb {
      border-bottom: var(--keypad-border); }
    .sudoku-actions .keypad .col.br {
      border-right: var(--keypad-border); }
    .sudoku-actions .keypad .col.key {
      width: 100%;
      height: 100%;
      display: block;
      font-size: 25px;
      font-weight: 600;
      padding: 20px 0;
      color: var(--key-color);
      transition: -webkit-box-shadow .2s ease-in;
      transition: box-shadow .2s ease-in;
      transition: box-shadow .2s ease-in, -webkit-box-shadow .2s ease-in;
      background: var(--keypad-color); }
      .sudoku-actions .keypad .col.key:hover {
        text-decoration: none;
        background: var(--focused-key);
        box-shadow: inset 0 0 0 0.5px #D8DCE4;
        transition: .3s; }
      .sudoku-actions .keypad .col.key:focus {
        background: var(--focused-key);
        box-shadow: inset 0 0 0 0.5px #D8DCE4;
        outline: none; }
.sudoku-actions .actions .row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px; }
  .sudoku-actions .actions .row > div:first-child {
    padding-right: 0; }
  .sudoku-actions .actions .row > div:last-child {
    padding-left: 0; }
.sudoku-actions .actions .col a {
  width: 100%;
  height: 100%;
  display: block;
  padding: 25px 0px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  color: var(--font-color);
  border: var(--keypad-border);
  background-color: #ffffff;
  border-top: none; }
  .sudoku-actions .actions .col a:hover {
    text-decoration: none; }
  .sudoku-actions .actions .col a img {
    height: 18px;
    margin-bottom: 4px; }

#undo {
  border-right: none;
  background: url(/img/icons/light/undo.svg);
  background-repeat: no-repeat;
  background-size: 22px;
  background-position: center 23px;
  background-color: var(--keypad-color); }
  #undo:hover {
    text-decoration: none;
    background-color: var(--focused-key);
    box-shadow: inset 0 0 0 0.5px #D8DCE4;
    transition: .3s; }
  #undo:focus {
    background-color: var(--focused-key);
    box-shadow: inset 0 0 0 0.5px #D8DCE4;
    outline: none; }

#restart {
  border-radius: none;
  background-image: url(/img/icons/light/restart.svg);
  background-repeat: no-repeat;
  background-size: 22px;
  background-position: center 23px;
  background-color: var(--keypad-color); }
  #restart:hover {
    text-decoration: none;
    background-color: var(--focused-key);
    box-shadow: inset 0 0 0 0.5px #D8DCE4;
    transition: .3s; }
  #restart:focus {
    background-color: var(--focused-key);
    box-shadow: inset 0 0 0 0.5px #D8DCE4;
    outline: none; }

.flex-div {
  display: flex;
  flex-direction: column;
  justify-content: space-between; }

.view-leaderboard {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  height: 60px;
  border-radius: 3px;
  border: var(--leaderboard-border);
  background-color: var(--leaderboard-color);
  font-size: 15px;
  font-weight: 600; }
  .view-leaderboard:hover {
    text-decoration: none; }
  .leaderboard-icon {
    width: 20px;
    height: 20px;
    background: url(/img/icons/light/leaderboard.svg) no-repeat;
    background-size: contain;
    background-position: center; }
  .view-leaderboard span {
    font-size: 15px;
    font-weight: 600;
    color: var(--leaderboard-font); }

.leaderboard-arrow {
  width: 15px;
  height: 15px;
  background: url(/img/icons/light/navigate-up-arrow.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center; }

.how-to-play-h2 {
  margin: 0px auto 13px auto;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  color: var(--heading-color); }

.playing-on-mobile-h2 {
  font-size: 20px;
  font-weight: 500;
  color: var(--heading-color); }

.how-to-play-div p, .page-content {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.33;
  color: #798792; }

.blue-circle {
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: #249fff;
  border-radius: 50%;
  margin-right: 5px; }

/*leaderboard*/
#leaderboard {
  display: none;
  width: 100%;
  border: var(--leaderboard-border);
  border-top: none;
  background: var(--leaderboard-color); }
  #leaderboard a {
    color: var(--font-color); }
    #leaderboard a:hover {
      text-decoration: none; }

.player-row {
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
  padding-left: 15px;
  padding-right: 15px;
  border-top: none;
  border-bottom: none;
  border-radius: 0px; }

.player,
.time-record {
  font-size: 14px;
  font-weight: 500;
  color: var(--font-color); }

.register-btn {
  display: block;
  width: 150px;
  line-height: 29px;
  height: 29px;
  margin: 0 auto;
  border-radius: 5px;
  background-color: #249fff;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  color: #ffffff !important; }

.leaderboard-paragraph {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.17;
  text-align: center;
  color: #798792;
  padding-top: 9px;
  max-width: 182px;
  margin: 0 auto;
  padding-bottom: 17px; }

button {
  outline: none !important; }

.register-div {
  border-radius: 3px;
  border: solid 1px #cdd0db;
  background-color: var(--register-background-color);
  max-width: 440px;
  margin: 30px auto;
  padding-top: 50px; }
  .register-div h2 {
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    max-width: 275px;
    margin: 0 auto;
    color: var(--register-h2-color);
    padding-bottom: 17px; }
  .register-div p {
    max-width: 379px;
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.33;
    margin: 0 auto;
    color: #798792;
    padding: 0 20px; }
  .register-div a {
    text-decoration: none;
    color: #249fff;
  }

.register-input,
label {
  display: block; }

form {
  margin-top: 29px; }
  form div {
    width: 80%;
    margin: 0 auto; }
    form div input {
      width: 100%;
      height: 50px;
      border-radius: 3px;
      border: solid 1px #cdd0db;
      background-color: #ffffff;
      font-size: 15px;
      font-weight: 500;
      line-height: 1.33;
      color: #232324;
      padding-left: 12px;
      margin-bottom: 20px; }
    form div ::placeholder {
      opacity: 0.3;
      color: #798792; }
    form div label {
      font-size: 13px;
      font-weight: 600;
      color: #8b8f9f; }

.registration-button {
  display: block;
  border-radius: 5px;
  background-color: #249fff;
  width: 139px;
  height: 39px;
  line-height: 39px;
  text-align: center;
  border: none;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  color: #ffffff;
  text-transform: uppercase;
  margin: 41px auto; }

@media screen and (max-width: 1199px) {
  .view-leaderboard {
    padding: 0 10px; }
    .view-leaderboard span {
      font-size: 13px; } }
@media screen and (max-width: 991px) {
  .view-leaderboard span {
    font-size: 15px; }

  .navbar {
    justify-content: space-between; }

  .logo {
    display: none; }

  .logo-2 {
    display: initial; }

  #register-btn {
    width: 165px; }

  @-moz-document url-prefix() {
    #register-btn {
      width: 165px; } } }
@media screen and (max-width: 767px) {
  .view-leaderboard span {
    font-size: 12px; }
  .view-leaderboard .leaderboard-arrow {
    display: none; }

  .game-features {
    flex-direction: column-reverse;
    align-items: flex-start; }
    .game-features > div:first-child {
      margin-top: 20px; } }
@media screen and (max-width: 576px) {
  .mininumber {
    font-size: 8px !important; }

  .sudoku-grid td input {
    font-size: 18px !important; }

  .view-leaderboard {
    margin-top: 20px;
    padding: 0 25px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px; }
    .view-leaderboard span {
      font-size: 18px; }
    .view-leaderboard .leaderboard-arrow {
      display: initial; }

  .game-features > div:first-child {
    width: 100%;
    justify-content: space-between; }

  .playing-on-mobile-h2 {
    padding-top: 20px;
    text-align: center; }

  .paragraph-1 p,
  .paragraph-2 p {
    padding: 0 15px; } }
@media screen and (max-width: 370px) {
  .logo-2 {
    width: 200px; } }
@media (min-width: 576px) {
  .col-sm-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%; } }
footer {
  margin-top: 60px;
  height: 71px;
  text-align: center;
  background: var(--footer-background);
  border-top: solid 1px var(--footer-border);
  padding-top: 23px;
  font-size: 12px;
  font-weight: 500; }
  footer > div {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center; }
    footer > div span {
      color: var(--footer-font); }
    footer > div span:last-child {
      font-size: 10px;
      font-weight: bold;
      padding-left: 5.4px; }

.xwordmedia {
  width: 100px;
  height: 24px;
  background: var(--footer-logo) no-repeat;
  background-size: 100px;
  background-position: center;
  margin-left: 5px; }

.switch {
  position: relative;
  display: inline-block; }

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

.slider {
  position: absolute;
  cursor: pointer;
  background-color: var(--slider-bg);
  transition: .4s;
  width: 36px;
  height: 18px;
  transform: translateX(-50%); }

.slider-1 {
  top: 7px;
  left: 0;
  right: 2px;
  bottom: 2px; }

.slider-2 {
  top: 12px;
  right: -60px; }

@-moz-document url-prefix() {
  .slider-1 {
    top: 7px;
    left: 5px;
    right: 2px;
    bottom: 2px; }

  .slider-2 {
    top: 12px;
    right: -45px; } }
.slider-1:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  bottom: 2px;
  background-color: #8ecdff;
  border: solid 1px #8ecdff;
  -webkit-transition: .4s;
  transition: .4s; }

.slider-2:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  bottom: 2px;
  background-color: #8ecdff;
  border: solid 1px #8ecdff;
  -webkit-transition: .4s;
  transition: .4s;
  left: 18px; }

input:checked + .slider:before {
  background-color: var(--slider-before-color);
  transform: translateX(-12px); }

/* Rounded sliders */
.slider.round {
  border-radius: 34px; }

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

.player {
  display: flex;
  align-items: center; }

.flag img {
  width: 20px;
  height: 16px;
  align-self: stretch;
  margin-left: 5px;
  background-size: cover !important; }


@keyframes opacity-animation {
  0% {
    opacity: 0; }
  50% {
    opacity: 0.3; }
  100% {
    opacity: 1; } }
.opacity-0 {
  opacity: 0; }

.opacity-animation-1 {
  -webkit-animation: opacity-animation 0.3s;
  animation: opacity-animation 0.3s; }

.opacity-animation-2 {
  -webkit-animation: opacity-animation 0.5s;
  animation: opacity-animation 0.5s; }

.opacity-animation-3 {
  -webkit-animation: opacity-animation 0.7s;
  animation: opacity-animation 0.7s; }

.opacity-animation-4 {
  -webkit-animation: opacity-animation 0.9s;
  animation: opacity-animation 0.9s; }

.opacity-animation-5 {
  -webkit-animation: opacity-animation 1.1;
  animation: opacity-animation 1.1s; }

.opacity-animation-6 {
  -webkit-animation: opacity-animation 1.3s;
  animation: opacity-animation 1.3s; }

.opacity-animation-7 {
  -webkit-animation: opacity-animation 1.5s;
  animation: opacity-animation 1.5s; }

.opacity-animation-8 {
  -webkit-animation: opacity-animation 1.7s;
  animation: opacity-animation 1.7s; }

.opacity-animation-9 {
  -webkit-animation: opacity-animation 1.9s;
  animation: opacity-animation 1.9s; }


:root {
  --bg-color: #fff;
  --header-link-color: #8b8f9f;
  --header-logo: url(/img/icons/light/logo.svg);
  --div-background: #ffffff;
  --div-border: #cdd0db;
  --responsive-menu-border: rgba(0, 0, 0, .1);
  --slider-bg: #f7f8fa;
  --slider-before-color: #fff;
  --timer-color: #8b8f9f;
  --sun-background: url(/img/icons/light/light.svg);
  --moon-background: url(/img/icons/light/dark.svg);
  --font-color: #8b8f9f;
  --key-color: #353948;
  --leaderboard-color: #ffffff;
  --leaderboard-border: solid 1px #cdd0db;
  --leaderboard-font: #979cb1;
  --keypad-border: solid 1px #D8DCE4;
  --keypad-color: #ffffff;
  --heading-color: #353948;
  --footer-background: #ffffff;
  --footer-border: rgba(53, 57, 72, 0.1);
  --footer-logo: url(/img/bitmap-dark.png);
  --footer-font: #353948;
  --focused-key: #FBFDFF;
  --mininumber: #8b8f9f;
  --sudoku-color-1: #f7f8fa;
  --sudoku-color-2: #edf3ff;
  --sudoku-color-3: #fff6ef;
  --sudoku-color-4: #dee3ee;
  --sudoku-color-5: #e2e6f8;
  --sudoku-font-1: #000;
  --sudoku-font-2: #249fff;
  --register-background-color: #fff;
  --register-h2-color: #353948;
  --resume-background: url(/img/icons/light/start.svg); 
  --alert-success-color: #155724;
  --alert-success-bg: #d4edda;
  --alert-success-border: #c3e6cb;
}

[data-theme="dark"] {
  --bg-color: #142735;
  --header-link-color: #8b8f9f;
  --header-logo: url(/img/icons/dark/logo.svg);
  --div-background: rgba(255, 255, 255, 0.05);
  --div-border: #64727d;
  --responsive-menu-border: #ffffff;
  --slider-bg: #64727d;
  --slider-before-color: #64727d;
  --timer-color: #c3cdd5;
  --sun-background: url(/img/icons/dark/light.svg);
  --moon-background: url(/img/icons/dark/dark.svg);
  --font-color: #c3cdd5;
  --key-color: #c3cdd5;
  --leaderboard-color: rgba(255, 255, 255, 0.05);
  --leaderboard-border: solid 1px #64727d;
  --leaderboard-font: #c3cdd5;
  --keypad-border: solid 1px #64727d;
  --keypad-color: rgba(255, 255, 255, 0.05);
  --heading-color: #c3cdd5;
  --footer-background: #0f3048;
  --footer-border: rgba(255, 255, 255, .3);
  --footer-logo: url(/img/bitmap-white.png);
  --footer-font: #ffffff;
  --focused-key: rgb(46, 54, 65);
  --mininumber: #c3cdd5;
  --sudoku-color-1: #0f3048;
  --sudoku-color-2: #25465e;
  --sudoku-color-3: #284b57;
  --sudoku-color-4: #10395a;
  --sudoku-color-5: #142735;
  --sudoku-font-1: #ffffff;
  --sudoku-font-2: #93cfff;
  --register-background-color: #274a57;
  --register-h2-color: #fff;
  --alert-success-color: #cdd0db;
  --alert-success-bg: #28572c;
  --alert-success-border: #092b0c;
}


.alert-success {
    color: var(--alert-success-color);
    background-color: var(--alert-success-bg);
    border-color: var(--alert-success-border);
}

.sudoku-grid .row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px; }
.sudoku-grid .sudoku {
  width: 100%;
  border: solid 2px #aab0c5; }
.sudoku-grid td {
  width: 11.11%;
  position: relative;
  border: solid 1px #cdd0db; }
  .sudoku-grid td input {
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    background: transparent; /*var(--sudoku-color-5);*/
    left: 0;
    right: 0;
    border: none;
    text-align: center;
    font-size: 25px;
    font-weight: bold;
    color: var(--sudoku-font-1) !important;
    opacity: 1;
    outline: none; }
    .sudoku-grid td input:focus {
      border: solid 1px #249fff !important; }
.sudoku-grid td::after {
  content: '';
  display: block;
  margin-top: 100%; }

.mininumber {
  position: absolute;
  font-size: 11px;
  font-weight: bold;
  color: var(--mininumber);
  top: 2px;
  left: 2px; }

.sudoku-grid .sudoku .br {
  border-right: solid 2px #aab0c5; }

.sudoku-grid .sudoku .bb {
  border-bottom: solid 2px #aab0c5; }

.sudoku-color-1 {
  background-color: var(--sudoku-color-1) !important; }

.sudoku-color-2 {
  background-color: var(--sudoku-color-2) !important; }

.sudoku-color-3 {
  background-color: var(--sudoku-color-3) !important; }

.sudoku-color-4 {
  background-color: var(--sudoku-color-4) !important; }

.sudoku-color-5 {
  background-color: var(--sudoku-color-5) !important; }

.sudoku-font-1 {
  color: #353948; }

.sudoku-font-2 {
  color: #249fff; }

/*# sourceMappingURL=styles.css.map */


.paused-overlay {
  width: 100%;
  height: 100%;
  background: rgb(205, 208, 219, .5);
  opacity: 1;
  position: absolute;
  z-index: 10;
  display: none;
}
.paused-overlay .resume {
  background: var(--resume-background) no-repeat;
  filter: brightness(0.5) sepia(1) hue-rotate(150deg) saturate(15);
  background-size: 100%;
  width: 100px;
  height: 100px;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.paused-overlay .resume path {
  fill: #fff;
}

.congratulations-overlay {
  width: 100%;
  height: 100%;
  background: rgb(37, 159, 255, .8);
  opacity: 1;
  position: absolute;
  z-index: 10;

  color: #fff;
  text-align: center;
  display: none;
}
.congratulations-overlay .content {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.alert-info {
    color: var(--leaderboard-font)!important;
    background-color: var(--sudoku-color-2)!important;
    border-color: #cdd0db!important;
}

input[type="text"]:disabled {
  -webkit-text-fill-color: var(--sudoku-font-1)!important; /* Override iOS / Android font color change */
  -webkit-opacity:1; /* Override iOS opacity change affecting text & background color */
}

/* PYRO ======================================= */
.pyro > .before,
.pyro > .after {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
  -moz-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  -webkit-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  -o-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  -ms-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
}

.pyro > .after {
  -moz-animation-delay: 1.25s, 1.25s, 1.25s;
  -webkit-animation-delay: 1.25s, 1.25s, 1.25s;
  -o-animation-delay: 1.25s, 1.25s, 1.25s;
  -ms-animation-delay: 1.25s, 1.25s, 1.25s;
  animation-delay: 1.25s, 1.25s, 1.25s;
  -moz-animation-duration: 1.25s, 1.25s, 6.25s;
  -webkit-animation-duration: 1.25s, 1.25s, 6.25s;
  -o-animation-duration: 1.25s, 1.25s, 6.25s;
  -ms-animation-duration: 1.25s, 1.25s, 6.25s;
  animation-duration: 1.25s, 1.25s, 6.25s;
}

@-webkit-keyframes bang {
  to {
    box-shadow: 161px -16.6666666667px #ff004d, -210px -57.6666666667px #4400ff, -242px -332.6666666667px #00aeff, 158px -19.6666666667px #0037ff, 118px -294.6666666667px #ff8000, 58px -202.6666666667px #ee00ff, 55px -58.6666666667px #007bff, 3px -392.6666666667px #26ff00, 149px -336.6666666667px #ff0084, 62px -213.6666666667px #ff1500, 164px -191.6666666667px #ff9100, 143px 41.3333333333px #88ff00, -65px -233.6666666667px #ff00dd, 131px -376.6666666667px #00ff6a, -146px -287.6666666667px #c400ff, -37px -118.6666666667px #b700ff, -173px -243.6666666667px #ff0033, 213px -165.6666666667px #001eff, 186px -217.6666666667px #ff00ae, 11px -403.6666666667px #00ffc8, -214px -233.6666666667px #ff7700, -5px -349.6666666667px #ff00d9, -149px -54.6666666667px #ff00ae, -176px -406.6666666667px #ff0095, 85px 64.3333333333px #ff2b00, -41px -64.6666666667px #ff0051, -50px -70.6666666667px #00ccff, -34px -298.6666666667px #ff00ea, -29px -369.6666666667px #0055ff, -50px -412.6666666667px #001aff, 237px 20.3333333333px #8400ff, -223px -366.6666666667px #ff00ae, 121px -297.6666666667px #0095ff, 75px 32.3333333333px #fbff00, 131px 25.3333333333px #2b00ff, 250px 77.3333333333px #00d0ff, 53px -133.6666666667px #fff700, 2px -290.6666666667px #4d00ff, 182px -248.6666666667px #ff007b, 95px -6.6666666667px #ff3300, -108px -5.6666666667px #0011ff, -223px -45.6666666667px #8400ff, 221px -333.6666666667px #ff0091, 243px -183.6666666667px #00ff48, 226px 4.3333333333px #003cff, -142px -97.6666666667px #00ccff, -7px -393.6666666667px #ff4000, 247px -80.6666666667px #ff1a00, 140px -263.6666666667px #3300ff, 163px -178.6666666667px #0026ff, -47px -87.6666666667px #ff6f00;
  }
}
@-moz-keyframes bang {
  to {
    box-shadow: 161px -16.6666666667px #ff004d, -210px -57.6666666667px #4400ff, -242px -332.6666666667px #00aeff, 158px -19.6666666667px #0037ff, 118px -294.6666666667px #ff8000, 58px -202.6666666667px #ee00ff, 55px -58.6666666667px #007bff, 3px -392.6666666667px #26ff00, 149px -336.6666666667px #ff0084, 62px -213.6666666667px #ff1500, 164px -191.6666666667px #ff9100, 143px 41.3333333333px #88ff00, -65px -233.6666666667px #ff00dd, 131px -376.6666666667px #00ff6a, -146px -287.6666666667px #c400ff, -37px -118.6666666667px #b700ff, -173px -243.6666666667px #ff0033, 213px -165.6666666667px #001eff, 186px -217.6666666667px #ff00ae, 11px -403.6666666667px #00ffc8, -214px -233.6666666667px #ff7700, -5px -349.6666666667px #ff00d9, -149px -54.6666666667px #ff00ae, -176px -406.6666666667px #ff0095, 85px 64.3333333333px #ff2b00, -41px -64.6666666667px #ff0051, -50px -70.6666666667px #00ccff, -34px -298.6666666667px #ff00ea, -29px -369.6666666667px #0055ff, -50px -412.6666666667px #001aff, 237px 20.3333333333px #8400ff, -223px -366.6666666667px #ff00ae, 121px -297.6666666667px #0095ff, 75px 32.3333333333px #fbff00, 131px 25.3333333333px #2b00ff, 250px 77.3333333333px #00d0ff, 53px -133.6666666667px #fff700, 2px -290.6666666667px #4d00ff, 182px -248.6666666667px #ff007b, 95px -6.6666666667px #ff3300, -108px -5.6666666667px #0011ff, -223px -45.6666666667px #8400ff, 221px -333.6666666667px #ff0091, 243px -183.6666666667px #00ff48, 226px 4.3333333333px #003cff, -142px -97.6666666667px #00ccff, -7px -393.6666666667px #ff4000, 247px -80.6666666667px #ff1a00, 140px -263.6666666667px #3300ff, 163px -178.6666666667px #0026ff, -47px -87.6666666667px #ff6f00;
  }
}
@-o-keyframes bang {
  to {
    box-shadow: 161px -16.6666666667px #ff004d, -210px -57.6666666667px #4400ff, -242px -332.6666666667px #00aeff, 158px -19.6666666667px #0037ff, 118px -294.6666666667px #ff8000, 58px -202.6666666667px #ee00ff, 55px -58.6666666667px #007bff, 3px -392.6666666667px #26ff00, 149px -336.6666666667px #ff0084, 62px -213.6666666667px #ff1500, 164px -191.6666666667px #ff9100, 143px 41.3333333333px #88ff00, -65px -233.6666666667px #ff00dd, 131px -376.6666666667px #00ff6a, -146px -287.6666666667px #c400ff, -37px -118.6666666667px #b700ff, -173px -243.6666666667px #ff0033, 213px -165.6666666667px #001eff, 186px -217.6666666667px #ff00ae, 11px -403.6666666667px #00ffc8, -214px -233.6666666667px #ff7700, -5px -349.6666666667px #ff00d9, -149px -54.6666666667px #ff00ae, -176px -406.6666666667px #ff0095, 85px 64.3333333333px #ff2b00, -41px -64.6666666667px #ff0051, -50px -70.6666666667px #00ccff, -34px -298.6666666667px #ff00ea, -29px -369.6666666667px #0055ff, -50px -412.6666666667px #001aff, 237px 20.3333333333px #8400ff, -223px -366.6666666667px #ff00ae, 121px -297.6666666667px #0095ff, 75px 32.3333333333px #fbff00, 131px 25.3333333333px #2b00ff, 250px 77.3333333333px #00d0ff, 53px -133.6666666667px #fff700, 2px -290.6666666667px #4d00ff, 182px -248.6666666667px #ff007b, 95px -6.6666666667px #ff3300, -108px -5.6666666667px #0011ff, -223px -45.6666666667px #8400ff, 221px -333.6666666667px #ff0091, 243px -183.6666666667px #00ff48, 226px 4.3333333333px #003cff, -142px -97.6666666667px #00ccff, -7px -393.6666666667px #ff4000, 247px -80.6666666667px #ff1a00, 140px -263.6666666667px #3300ff, 163px -178.6666666667px #0026ff, -47px -87.6666666667px #ff6f00;
  }
}
@-ms-keyframes bang {
  to {
    box-shadow: 161px -16.6666666667px #ff004d, -210px -57.6666666667px #4400ff, -242px -332.6666666667px #00aeff, 158px -19.6666666667px #0037ff, 118px -294.6666666667px #ff8000, 58px -202.6666666667px #ee00ff, 55px -58.6666666667px #007bff, 3px -392.6666666667px #26ff00, 149px -336.6666666667px #ff0084, 62px -213.6666666667px #ff1500, 164px -191.6666666667px #ff9100, 143px 41.3333333333px #88ff00, -65px -233.6666666667px #ff00dd, 131px -376.6666666667px #00ff6a, -146px -287.6666666667px #c400ff, -37px -118.6666666667px #b700ff, -173px -243.6666666667px #ff0033, 213px -165.6666666667px #001eff, 186px -217.6666666667px #ff00ae, 11px -403.6666666667px #00ffc8, -214px -233.6666666667px #ff7700, -5px -349.6666666667px #ff00d9, -149px -54.6666666667px #ff00ae, -176px -406.6666666667px #ff0095, 85px 64.3333333333px #ff2b00, -41px -64.6666666667px #ff0051, -50px -70.6666666667px #00ccff, -34px -298.6666666667px #ff00ea, -29px -369.6666666667px #0055ff, -50px -412.6666666667px #001aff, 237px 20.3333333333px #8400ff, -223px -366.6666666667px #ff00ae, 121px -297.6666666667px #0095ff, 75px 32.3333333333px #fbff00, 131px 25.3333333333px #2b00ff, 250px 77.3333333333px #00d0ff, 53px -133.6666666667px #fff700, 2px -290.6666666667px #4d00ff, 182px -248.6666666667px #ff007b, 95px -6.6666666667px #ff3300, -108px -5.6666666667px #0011ff, -223px -45.6666666667px #8400ff, 221px -333.6666666667px #ff0091, 243px -183.6666666667px #00ff48, 226px 4.3333333333px #003cff, -142px -97.6666666667px #00ccff, -7px -393.6666666667px #ff4000, 247px -80.6666666667px #ff1a00, 140px -263.6666666667px #3300ff, 163px -178.6666666667px #0026ff, -47px -87.6666666667px #ff6f00;
  }
}
@keyframes bang {
  to {
    box-shadow: 161px -16.6666666667px #ff004d, -210px -57.6666666667px #4400ff, -242px -332.6666666667px #00aeff, 158px -19.6666666667px #0037ff, 118px -294.6666666667px #ff8000, 58px -202.6666666667px #ee00ff, 55px -58.6666666667px #007bff, 3px -392.6666666667px #26ff00, 149px -336.6666666667px #ff0084, 62px -213.6666666667px #ff1500, 164px -191.6666666667px #ff9100, 143px 41.3333333333px #88ff00, -65px -233.6666666667px #ff00dd, 131px -376.6666666667px #00ff6a, -146px -287.6666666667px #c400ff, -37px -118.6666666667px #b700ff, -173px -243.6666666667px #ff0033, 213px -165.6666666667px #001eff, 186px -217.6666666667px #ff00ae, 11px -403.6666666667px #00ffc8, -214px -233.6666666667px #ff7700, -5px -349.6666666667px #ff00d9, -149px -54.6666666667px #ff00ae, -176px -406.6666666667px #ff0095, 85px 64.3333333333px #ff2b00, -41px -64.6666666667px #ff0051, -50px -70.6666666667px #00ccff, -34px -298.6666666667px #ff00ea, -29px -369.6666666667px #0055ff, -50px -412.6666666667px #001aff, 237px 20.3333333333px #8400ff, -223px -366.6666666667px #ff00ae, 121px -297.6666666667px #0095ff, 75px 32.3333333333px #fbff00, 131px 25.3333333333px #2b00ff, 250px 77.3333333333px #00d0ff, 53px -133.6666666667px #fff700, 2px -290.6666666667px #4d00ff, 182px -248.6666666667px #ff007b, 95px -6.6666666667px #ff3300, -108px -5.6666666667px #0011ff, -223px -45.6666666667px #8400ff, 221px -333.6666666667px #ff0091, 243px -183.6666666667px #00ff48, 226px 4.3333333333px #003cff, -142px -97.6666666667px #00ccff, -7px -393.6666666667px #ff4000, 247px -80.6666666667px #ff1a00, 140px -263.6666666667px #3300ff, 163px -178.6666666667px #0026ff, -47px -87.6666666667px #ff6f00;
  }
}
@-webkit-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@-moz-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@-o-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@-ms-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@-webkit-keyframes position {
  0%,
  19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%,
  39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%,
  59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%,
  79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%,
  99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}
@-moz-keyframes position {
  0%,
  19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%,
  39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%,
  59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%,
  79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%,
  99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}
@-o-keyframes position {
  0%,
  19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%,
  39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%,
  59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%,
  79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%,
  99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}
@-ms-keyframes position {
  0%,
  19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%,
  39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%,
  59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%,
  79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%,
  99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}
@keyframes position {
  0%,
  19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%,
  39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%,
  59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%,
  79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%,
  99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}
.dataTables_filter label {
  float: right!important;
}
.dataTables_length, .dataTables_info, .dataTables_paginate {
  display: none!important;
}
.dataTable, .dataTables_info, .dataTables_filter {
  color: var(--leaderboard-font)!important;
}
.my-score {
  background-color: #fff3cd;
  font-family: 'hk_groteskbold', sans-serif;
  color: black;
}
.my-score td {
  font-weight: bolder;
}
.complete-leaderboard-link {
  border-radius: 5px;
  background-color: #249fff;
  font-weight: bold;
  font-size: 14px !important;
  color: #ffffff;
  padding: 6px 17px;
  text-transform: uppercase;
  margin-top: 4px;
}
.complete-leaderboard-link:hover {
  color: #ffffff;
  text-decoration: none;
}