/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0; }

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block; }

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */ }

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent; }

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */ }

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder; }

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%; }

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -0.25em; }

sup {
  top: -0.5em; }

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none; }

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */ }

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible; }

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none; }

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; }

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0; }

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText; }

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em; }

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */ }

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline; }

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto; }

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto; }

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */ }

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */ }

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block; }

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item; }

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none; }

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none; }

/*!
 * Font Awesome Free 5.14.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */
.fa,
.fas,
.far,
.fal,
.fad,
.fab {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1; }

.fa-lg {
  font-size: 1.3333333333em;
  line-height: 0.75em;
  vertical-align: -.0667em; }

.fa-xs {
  font-size: .75em; }

.fa-sm {
  font-size: .875em; }

.fa-1x {
  font-size: 1em; }

.fa-2x {
  font-size: 2em; }

.fa-3x {
  font-size: 3em; }

.fa-4x {
  font-size: 4em; }

.fa-5x {
  font-size: 5em; }

.fa-6x {
  font-size: 6em; }

.fa-7x {
  font-size: 7em; }

.fa-8x {
  font-size: 8em; }

.fa-9x {
  font-size: 9em; }

.fa-10x {
  font-size: 10em; }

.fa-fw {
  text-align: center;
  width: 1.25em; }

.fa-ul {
  list-style-type: none;
  margin-left: 2.5em;
  padding-left: 0; }
  .fa-ul > li {
    position: relative; }

.fa-li {
  left: -2em;
  position: absolute;
  text-align: center;
  width: 2em;
  line-height: inherit; }

.fa-border {
  border: solid 0.08em #eee;
  border-radius: .1em;
  padding: .2em .25em .15em; }

.fa-pull-left {
  float: left; }

.fa-pull-right {
  float: right; }

.fa.fa-pull-left,
.fas.fa-pull-left,
.far.fa-pull-left,
.fal.fa-pull-left,
.fab.fa-pull-left {
  margin-right: .3em; }

.fa.fa-pull-right,
.fas.fa-pull-right,
.far.fa-pull-right,
.fal.fa-pull-right,
.fab.fa-pull-right {
  margin-left: .3em; }

.fa-spin {
  animation: fa-spin 2s infinite linear; }

.fa-pulse {
  animation: fa-spin 1s infinite steps(8); }

@keyframes fa-spin {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

.fa-rotate-90 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
  transform: rotate(90deg); }

.fa-rotate-180 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
  transform: rotate(180deg); }

.fa-rotate-270 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
  transform: rotate(270deg); }

.fa-flip-horizontal {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
  transform: scale(-1, 1); }

.fa-flip-vertical {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
  transform: scale(1, -1); }

.fa-flip-both, .fa-flip-horizontal.fa-flip-vertical {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
  transform: scale(-1, -1); }

:root .fa-rotate-90,
:root .fa-rotate-180,
:root .fa-rotate-270,
:root .fa-flip-horizontal,
:root .fa-flip-vertical,
:root .fa-flip-both {
  filter: none; }

.fa-stack {
  display: inline-block;
  height: 2em;
  line-height: 2em;
  position: relative;
  vertical-align: middle;
  width: 2.5em; }

.fa-stack-1x,
.fa-stack-2x {
  left: 0;
  position: absolute;
  text-align: center;
  width: 100%; }

.fa-stack-1x {
  line-height: inherit; }

.fa-stack-2x {
  font-size: 2em; }

.fa-inverse {
  color: #fff; }

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

.sr-only-focusable:active, .sr-only-focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto; }

/*!
 * Font Awesome Free 5.14.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../assets/fonts/fa-regular-400.eot");
  src: url("../assets/fonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../assets/fonts/fa-regular-400.woff2") format("woff2"), url("../assets/fonts/fa-regular-400.woff") format("woff"), url("../assets/fonts/fa-regular-400.ttf") format("truetype"), url("../assets/fonts/fa-regular-400.svg#fontawesome") format("svg"); }

.far {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400; }

/*!
 * Font Awesome Free 5.14.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("../assets/fonts/fa-solid-900.eot");
  src: url("../assets/fonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../assets/fonts/fa-solid-900.woff2") format("woff2"), url("../assets/fonts/fa-solid-900.woff") format("woff"), url("../assets/fonts/fa-solid-900.ttf") format("truetype"), url("../assets/fonts/fa-solid-900.svg#fontawesome") format("svg"); }

.fa,
.fas {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900; }

/*!
 * Font Awesome Free 5.14.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */
@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../assets/fonts/fa-brands-400.eot");
  src: url("../assets/fonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../assets/fonts/fa-brands-400.woff2") format("woff2"), url("../assets/fonts/fa-brands-400.woff") format("woff"), url("../assets/fonts/fa-brands-400.ttf") format("truetype"), url("../assets/fonts/fa-brands-400.svg#fontawesome") format("svg"); }

.fab {
  font-family: 'Font Awesome 5 Brands';
  font-weight: 400; }

.fa-500px:before {
  content: "\f26e"; }

.fa-arrow-alt-circle-right:before {
  content: "\f35a"; }

.fa-sync-alt:before {
  content: "\f2f1"; }

.fa-caret-right:before {
  content: "\f0da"; }

.fa-asterisk:before {
  content: "\f069"; }

.fa-atom:before {
  content: "\f5d2"; }

.fa-circle-notch:before {
  content: "\f1ce"; }

.fa-cog:before {
  content: "\f013"; }

.fa-compact-disc:before {
  content: "\f51f"; }

.fa-compass:before {
  content: "\f14e"; }

.fa-crosshairs:before {
  content: "\f05b"; }

.fa-fan:before {
  content: "\f863"; }

.fa-slash:before {
  content: "\f715"; }

.fa-snowflake:before {
  content: "\f2dc"; }

.fa-spinner:before {
  content: "\f110"; }

.fa-sync:before {
  content: "\f021"; }

.fa-sync-alt:before {
  content: "\f2f1"; }

.fa-upload:before {
  content: "\f093"; }

.fa-camera:before {
  content: "\f030"; }

.fa-arrow-right:before {
  content: "\f061"; }

.fa-arrow-left:before {
  content: "\f060"; }

.fa-undo:before {
  content: "\f0e2"; }

.fa-circle:before {
  content: "\f111"; }

.fa-dot-circle:before {
  content: "\f192"; }

.fa-square:before {
  content: "\f0c8"; }

.fa-check-square:before {
  content: "\f14a"; }

:root {
  --app_min_width: 320px;
  --app_min_width: 320px;
  --app_max_width: 425px;
  --app_min_font_size: 12px;
  --app_max_font_size: 16px;
  --ui_margin: 10px;
  --ui_padding: 15px;
  --ios_background_color: #2f2f2f;
  --app_background_color: #2f2f2f;
  --app_background_image: none;
  --screen_background_image: none;
  --screen_background_color: #f9f9f9;
  --screen_border_radius: 8px;
  --modal_margin: 20px;
  --modal_padding: 10px;
  --modal_color: #2f2f2f;
  --modal_background_color: #f9f9f9;
  --modal_border_radius: 12px;
  --heading_color: #1b1b1b;
  --heading_font_family: sans-serif;
  --heading_font_weight: bold;
  --heading_case: capitalize;
  --h1_font_size: 2rem;
  --h2_font_size: 1.8rem;
  --h3_font_size: 1.6rem;
  --h4_font_size: 1.4rem;
  --h5_font_size: 1.2rem;
  --h6_font_size: 1.1rem;
  --h1_line_height: 2rem;
  --h2_line_height: 1.8rem;
  --h3_line_height: 1.6rem;
  --h4_line_height: 1.4rem;
  --h5_line_height: 1.2rem;
  --h6_line_height: 1.1rem;
  --text_color: #2f2f2f;
  --text_spacing: 1rem;
  --text_font_family: sans-serif;
  --text_font_weight: normal;
  --text_case: none;
  --link_color: #5d71e8;
  --link_hover_color: #8a98ee;
  --small_font_size: 0.8rem;
  --small_line_height: 0.8rem;
  --button_case: none;
  --button_padding: 10px;
  --button_border_radius: 6px;
  --button_font_family: sans-serif;
  --button_color: #f9f9f9;
  --button_background_color: #5d71e8;
  --button_background_hover_color: #8a98ee;
  --button_border_width: 0px;
  --button_border_color: #cccccc;
  --button_primary_font_family: sans-serif;
  --button_primary_color: #1b1b1b;
  --button_primary_background_color: #00e6b4;
  --button_primary_background_hover_color: #80ffe3;
  --button_primary_border_width: 0px;
  --button_primary_border_color: #cccccc;
  --button_secondary_font_family: sans-serif;
  --button_secondary_color: #f9f9f9;
  --button_secondary_background_color: #F95550;
  --button_secondary_background_hover_color: #fb8581;
  --button_secondary_border_width: 0px;
  --button_secondary_border_color: #cccccc;
  --roundbutton_size: 4rem;
  --roundbutton_small_size: 3rem;
  --input_height: 2rem;
  --input_checkbox_size: 2rem;
  --input_spacing: 0.8rem;
  --input_border_color: #2f2f2f;
  --input_border_invalid_color: #F95550;
  --input_border_valid_color: #00e6b4;
  --input_border_radius: 4px;
  --input_border_width: 1px;
  --label_display: block;
  --label_font_family: sans-serif;
  --label_font_weight: normal;
  --label_case: capitalize;
  --label_font_size: 1rem;
  --label_line_height: 1rem;
  --label_spacing: 0.3rem;
  --label_color: #2f2f2f;
  --placeholder_case: capitalize;
  --placeholder_color: #9a9a9a;
  --loading_bar_empty_color: #f9f9f9;
  --loading_bar_filled_color: #00e6b4;
  --loading_elements_color: #f9f9f9;
  --loading_elements_background_color: #2f2f2f;
  --leaderboard_border_width: 1px;
  --leaderboard_border_color: #2f2f2f;
  --leaderboard_color: #2f2f2f;
  --leaderboard_background_color: #f9f9f9;
  --leaderboard_th_border_width: 3px;
  --leaderboard_th_border_color: #2f2f2f;
  --leaderboard_th_color: #2f2f2f;
  --leaderboard_th_background_color: #cccccc;
  --leaderboard_user_border_width: 3px;
  --leaderboard_user_border_color: #2f2f2f;
  --leaderboard_user_color: #2f2f2f;
  --leaderboard_user_background_color: #cccccc; }

@keyframes frames {
  from {
    background-position: 0% 0; }
  to {
    background-position: 100% 0; } }

.animation {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0 0;
  box-sizing: border-box; }

/*
//Animation Example:
.animationContainer {
	@include ratioBox(FRAME_WIDTH, FRAME_HEIGHT);

	.animation {
		background-image: url('../assets/images/spritesheets/sheet.png');
		animation: frames 2s steps(FRAME_COUNT-1) forwards;
	}
}
*/
@media (max-width: 1023px) {
  .desktop {
    display: none; } }

@media (min-width: 1024px) and (max-width: 1279px) {
  .desktop {
    display: none; } }

@media (min-width: 1280px) {
  .desktop {
    display: block; } }

@media (max-width: 1023px) {
  .mobile {
    display: block; } }

@media (min-width: 1024px) and (max-width: 1279px) {
  .mobile {
    display: block; } }

@media (min-width: 1280px) {
  .mobile {
    display: none; } }

body,
p,
label {
  font-weight: var(--text_font_weight);
  font-family: var(--text_font_family);
  color: var(--text_color);
  text-transform: var(--text_case); }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--heading_font_weight);
  font-family: var(--heading_font_family);
  color: var(--heading_color);
  text-transform: var(--heading_case);
  margin-top: var(--text_spacing);
  margin-bottom: var(--text_spacing); }

p {
  margin-top: var(--text_spacing);
  margin-bottom: var(--text_spacing); }

h1 {
  font-size: var(--h1_font_size);
  line-height: var(--h1_line_height); }

h2 {
  font-size: var(--h2_font_size);
  line-height: var(--h2_line_height); }

h3 {
  font-size: var(--h3_font_size);
  line-height: var(--h3_line_height); }

h4 {
  font-size: var(--h4_font_size);
  line-height: var(--h4_line_height); }

h5 {
  font-size: var(--h5_font_size);
  line-height: var(--h5_line_height); }

h6 {
  font-size: var(--h6_font_size);
  line-height: var(--h6_line_height); }

.smallText {
  font-size: var(--small_font_size);
  line-height: var(--small_font_size); }

label {
  font-weight: var(--label_font_weight);
  font-family: var(--label_font_family);
  text-transform: var(--label_case);
  font-size: var(--label_font_size);
  line-height: var(--label_line_height);
  color: var(--label_color); }

::placeholder {
  color: var(--placeholder_color);
  text-transform: var(--placeholder_case);
  opacity: 1; }

:-ms-input-placeholder {
  color: var(--placeholder_color);
  text-transform: var(--placeholder_case); }

::-ms-input-placeholder {
  color: var(--placeholder_color);
  text-transform: var(--placeholder_case); }

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

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

textarea,
select,
[type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'], input:not([type]), textarea {
  display: block;
  clear: both;
  -webkit-appearance: none;
  border-style: solid;
  border-width: var(--input_border_width);
  border-color: var(--input_border_color);
  border-radius: var(--input_border_radius);
  width: 100%;
  height: var(--input_height);
  box-sizing: border-box;
  padding: 0 0.5rem;
  color: var(--text_color); }
  textarea:valid,
  select:valid,
  [type='color']:valid, [type='date']:valid, [type='datetime']:valid, [type='datetime-local']:valid, [type='email']:valid, [type='month']:valid, [type='number']:valid, [type='password']:valid, [type='search']:valid, [type='tel']:valid, [type='text']:valid, [type='time']:valid, [type='url']:valid, [type='week']:valid, input:not([type]):valid, textarea:valid {
    border-color: var(--input_border_valid_color); }
  textarea:invalid,
  select:invalid,
  [type='color']:invalid, [type='date']:invalid, [type='datetime']:invalid, [type='datetime-local']:invalid, [type='email']:invalid, [type='month']:invalid, [type='number']:invalid, [type='password']:invalid, [type='search']:invalid, [type='tel']:invalid, [type='text']:invalid, [type='time']:invalid, [type='url']:invalid, [type='week']:invalid, input:not([type]):invalid, textarea:invalid {
    border-color: var(--input_border_invalid_color); }
  textarea[value=""], textarea[data-value=""],
  select[value=""],
  select[data-value=""],
  [type='color'][value=""],
  [type='color'][data-value=""], [type='date'][value=""], [type='date'][data-value=""], [type='datetime'][value=""], [type='datetime'][data-value=""], [type='datetime-local'][value=""], [type='datetime-local'][data-value=""], [type='email'][value=""], [type='email'][data-value=""], [type='month'][value=""], [type='month'][data-value=""], [type='number'][value=""], [type='number'][data-value=""], [type='password'][value=""], [type='password'][data-value=""], [type='search'][value=""], [type='search'][data-value=""], [type='tel'][value=""], [type='tel'][data-value=""], [type='text'][value=""], [type='text'][data-value=""], [type='time'][value=""], [type='time'][data-value=""], [type='url'][value=""], [type='url'][data-value=""], [type='week'][value=""], [type='week'][data-value=""], input:not([type])[value=""], input:not([type])[data-value=""], textarea[value=""], textarea[data-value=""] {
    border-color: var(--input_border_color); }
  textarea:focus,
  select:focus,
  [type='color']:focus, [type='date']:focus, [type='datetime']:focus, [type='datetime-local']:focus, [type='email']:focus, [type='month']:focus, [type='number']:focus, [type='password']:focus, [type='search']:focus, [type='tel']:focus, [type='text']:focus, [type='time']:focus, [type='url']:focus, [type='week']:focus, input:not([type]):focus, textarea:focus {
    outline: none !important;
    border-color: var(--input_border_color);
    border-width: calc(var(--input_border_width) + 1px); }

input[type="date"],
select {
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-style: solid;
  border-width: var(--input_border_width);
  border-color: var(--input_border_color);
  border-radius: var(--input_border_radius);
  height: var(--input_height);
  background-size: 12px;
  background-position: calc(100% - 10px) center;
  background-repeat: no-repeat;
  background-color: #ffffff; }

select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23000000'><polygon points='0,25 100,25 50,75'/></svg>"); }

.fieldContainer {
  position: relative;
  margin-bottom: var(--input_spacing); }
  .fieldContainer::after {
    clear: both;
    content: "";
    display: block; }
  .fieldContainer label {
    margin-bottom: var(--label_spacing);
    display: var(--label_display); }

.checkboxField,
.radioField {
  height: var(--input_checkbox_size); }
  .checkboxField input,
  .radioField input {
    position: absolute;
    opacity: 0;
    width: var(--input_checkbox_size);
    height: var(--input_checkbox_size);
    top: 0;
    left: 0; }
  .checkboxField label,
  .radioField label {
    display: block;
    height: var(--input_checkbox_size);
    line-height: var(--input_checkbox_size); }
  .checkboxField label:before,
  .radioField label:before {
    font-family: 'Font Awesome 5 Free';
    margin-right: var(--label_spacing);
    font-size: var(--input_checkbox_size);
    vertical-align: middle; }
  .checkboxField input:focus + label,
  .radioField input:focus + label {
    font-weight: bold; }

.checkboxField label:before {
  content: "\f0c8"; }

.checkboxField input:checked + label:before {
  content: "\f14a"; }

.radioField label:before {
  content: "\f111"; }

.radioField input:checked + label:before {
  content: "\f192"; }

html,
body {
  font-size: 12px; }
  @media screen and (min-width: 320px) {
    html,
    body {
      font-size: calc(12px + 4 * ((100vw - 320px) / 105)); } }
  @media screen and (min-width: 425px) {
    html,
    body {
      font-size: 16px; } }

html {
  height: 100%;
  width: 100%;
  min-height: 100%;
  max-height: 100%;
  position: fixed;
  position: sticky;
  overflow: hidden; }

body {
  height: 100%;
  min-height: 100%;
  max-height: 100%; }

body {
  background: var(--ios_background_color); }

a {
  color: var(--link_color);
  -webkit-touch-callout: none; }
  a:hover {
    color: var(--link_hover_color); }

img {
  -webkit-touch-callout: none; }

img.downloadable {
  -webkit-touch-callout: default; }

#app {
  width: 100%;
  height: 100%;
  height: -webkit-fill-available;
  height: fill-available;
  position: relative;
  background: var(--app_background_color);
  background-image: var(--app_background_image);
  background-position: center;
  background-size: cover;
  overflow: hidden; }

::-webkit-scrollbar {
  display: none; }

.modalCover {
  z-index: 10;
  transition: all 0.8s;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3); }
  .modalCover.closed {
    opacity: 0;
    pointer-events: none; }

.modal {
  position: absolute;
  background: var(--modal_background_color);
  color: var(--modal_color);
  border-radius: var(--modal_border_radius);
  width: calc(100% - var(--modal_margin) * 2);
  max-height: calc(100% - var(--modal_margin) * 2);
  max-width: calc(var(--app_max_width) - var(--modal_margin) * 2);
  margin: 0px auto;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.2);
  transition: all 0.8s; }
  .modal .modalContent {
    position: relative;
    margin: var(--modal_margin);
    text-align: center;
    width: calc(100% - var(--modal_margin) * 2);
    height: calc(100% - var(--modal_margin) * 2); }
    .modal .modalContent img {
      max-width: 100%; }
    .modal .modalContent .button {
      clear: both;
      display: block;
      margin-bottom: 20px; }
  .modal.open {
    top: 50%; }
  .modal.closed {
    top: -1000px; }

.screen {
  position: absolute;
  margin: var(--ui_margin);
  background: var(--screen_background_color);
  background-image: var(--screen_background_image);
  background-position: center;
  background-size: cover;
  border-radius: var(--screen_border_radius);
  width: calc(100% - var(--ui_margin) * 2);
  height: calc(100% - var(--ui_margin) * 2);
  max-width: var(--app_max_width);
  margin: var(--ui_margin) auto;
  transform: translateX(-50%);
  left: 50%; }
  .screen .screenContent {
    position: relative;
    margin: var(--ui_padding);
    width: calc(100% - var(--ui_padding) * 2);
    height: calc(100% - var(--ui_padding) * 2);
    overflow: scroll;
    scrollbar-width: none; }
    .screen .screenContent img {
      max-width: 100%; }
    .screen .screenContent canvas {
      max-width: 100%; }
  .screen.LoadingMessage {
    width: 100%;
    height: 100%;
    border-radius: 0;
    margin: 0; }

iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none; }

.button {
  color: var(--button_color);
  background: var(--button_background_color);
  border-style: solid;
  border-width: var(--button_border_width);
  border-color: var(--button_border_color);
  border-radius: var(--button_border_radius);
  font-family: var(--button_font_family);
  padding: var(--button_padding);
  cursor: pointer;
  text-transform: var(--button_case);
  line-height: 1; }
  .button:hover, .button:active, .button:focus {
    background: var(--button_background_hover_color);
    text-decoration: none; }
  .button.button-primary {
    color: var(--button_primary_color);
    background: var(--button_primary_background_color);
    border-style: solid;
    border-width: var(--button_primary_border_width);
    border-color: var(--button_primary_border_color);
    font-family: var(--button_primary_font_family); }
    .button.button-primary:hover, .button.button-primary:active, .button.button-primary:focus {
      background: var(--button_primary_background_hover_color);
      text-decoration: none; }
  .button.button-secondary {
    color: var(--button_secondary_color);
    background: var(--button_secondary_background_color);
    border-style: solid;
    border-width: var(--button_secondary_border_width);
    border-color: var(--button_secondary_border_color);
    font-family: var(--button_secondary_font_family); }
    .button.button-secondary:hover, .button.button-secondary:active, .button.button-secondary:focus {
      background: var(--button_secondary_background_hover_color);
      text-decoration: none; }
  .button.button-centered {
    margin-left: auto !important;
    margin-right: auto !important;
    float: none;
    display: block; }
  .button:focus {
    outline: none !important; }

.roundButton {
  color: var(--button_color);
  background: var(--button_background_color);
  border-radius: 50%;
  font-family: var(--button_font_family);
  border: none;
  cursor: pointer;
  text-decoration: none;
  width: var(--roundbutton_size);
  height: var(--roundbutton_size);
  font-size: calc(var(--roundbutton_size) / 2); }
  .roundButton:hover, .roundButton:active {
    background: var(--button_background_hover_color);
    text-decoration: none; }
  .roundButton.roundButton-centered {
    margin-left: auto !important;
    margin-right: auto !important;
    float: none;
    display: block; }
  .roundButton.roundButton-small {
    width: var(--roundbutton_small_size);
    height: var(--roundbutton_small_size);
    font-size: calc(var(--roundbutton_small_size) / 2); }

.loadingMessage.initial {
  background: none; }

.loadingMessage.transfer {
  background: rgba(0, 0, 0, 0.5); }

.loadingMessage p {
  color: --loading_elements_color;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  text-align: center; }
  .loadingMessage p i {
    font-size: 8rem; }

.squareFrame {
  position: absolute;
  width: 100%;
  position: relative; }
  .squareFrame::before {
    content: "";
    width: 1px;
    margin-left: -1px;
    float: left;
    height: 0;
    padding-top: 100%; }
  .squareFrame::after {
    content: "";
    display: table;
    clear: both; }
  .squareFrame img,
  .squareFrame video,
  .squareFrame canvas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    overflow: hidden; }

/*
.loading_01 {
	@include ratioBox(940px, 940px); // Size of one frame

	.animation {
		background-image: url('../assets/images/spritesheets/loading_01_sheet.png');
		animation: frames 2s steps(59) infinite; //number of frames -1
	}
}
*/
.colorBlock {
  display: block;
  clear: both;
  margin: 0px auto;
  width: 100%;
  height: 10px;
  background: #ff0000; }

.leaderboardTable {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0px; }
  .leaderboardTable thead tr {
    border: var(--leaderboard_th_border_width) solid var(--leaderboard_th_border_color);
    color: var(--leaderboard_th_color);
    background: var(--leaderboard_th_background_color); }
  .leaderboardTable th,
  .leaderboardTable td {
    border: var(--leaderboard_border_width) solid var(--leaderboard_border_color);
    color: var(--leaderboard_color);
    background: var(--leaderboard_background_color);
    padding: 2px 10px; }
  .leaderboardTable th {
    font-weight: bold;
    color: var(--leaderboard_th_color);
    background: var(--leaderboard_th_background_color); }
  .leaderboardTable tr.spacer td {
    border: none; }
  .leaderboardTable tr.userScore {
    font-weight: bold;
    border: var(--leaderboard_user_border_width) solid var(--leaderboard_user_border_color);
    color: var(--leaderboard_user_color);
    background: var(--leaderboard_user_background_color); }
    .leaderboardTable tr.userScore td {
      color: var(--leaderboard_user_color);
      background: var(--leaderboard_user_background_color); }
  .leaderboardTable tbody td {
    text-align: center; }
  .leaderboardTable tbody td:first-child {
    text-align: left; }
  .leaderboardTable tbody td:last-child {
    text-align: right; }

.AgeGateScreen {
  text-align: center; }

.CompositeCameraScreen {
  text-align: center; }

.DataCollect form {
  max-height: calc(100%);
  overflow-y: scroll; }

.RewardScreen {
  text-align: center; }

.SplashScreen {
  text-align: center; }

.ThanksScreen {
  text-align: center; }

.MessageScreen {
  text-align: center; }

.ReceiptScannerScreen,
.QrScannerScreen {
  text-align: center; }
  .ReceiptScannerScreen .squareFrame,
  .QrScannerScreen .squareFrame {
    overflow: hidden;
    width: 80%;
    margin: 0px auto; }
    .ReceiptScannerScreen .squareFrame img,
    .ReceiptScannerScreen .squareFrame video,
    .ReceiptScannerScreen .squareFrame canvas,
    .QrScannerScreen .squareFrame img,
    .QrScannerScreen .squareFrame video,
    .QrScannerScreen .squareFrame canvas {
      min-height: 100%;
      max-width: 100%;
      height: auto; }

.ReceiptScannerScreen .roundButton,
.CompositeCameraScreen .roundButton {
  margin: 1rem; }

.LoadingMessage p {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  text-align: center; }

.LoadingMessage img {
  display: block;
  clear: both;
  margin: 10px auto; }

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