/*************************************************/
/* This file was automatically generated by sass */
/* Don't edit it directly                        */
/*************************************************/
/* Clearfix */
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table; }

.clearfix:after {
  clear: both; }

/* For IE 6/7 only */
.clearfix {
  *zoom: 1; }

body.lock-position {
  height: 100%;
  overflow: hidden;
  width: 100%;
  position: fixed; }

body {
  margin: 0;
  padding: 0;
  text-align: center;
  overflow: hidden;
  width: 100vw;
  background: #141E30;
  background: linear-gradient(to bottom, #243B55, #141E30);
  color: white;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  touch-action: none;
  /* disable double-tap zoom */
  overscroll-behavior-y: contain; }

html, body {
  height: 100%; }

html,
body {
  height: 100%;
  width: 100%;
  overflow: auto; }

* {
  box-sizing: border-box; }

[hidden] {
  display: none !important; }

[disabled] {
  pointer-events: none;
  opacity: 0.3; }

.background {
  width: 100vw;
  height: 100vh;
  background: #021148; }

.color-0 {
  background: #db4c67;
  fill: #db4c67; }

.color-1 {
  background: #ff8459;
  fill: #ff8459; }

.color-2 {
  background: #ffec02;
  fill: #ffec02; }

.color-3 {
  background: #73ff6c;
  fill: #73ff6c; }

.color-4 {
  background: #00c5ba;
  fill: #00c5ba; }

.color-5 {
  background: #3753be;
  fill: #3753be; }

.color-6 {
  background: #9c52ff;
  fill: #9c52ff; }

.color-7 {
  background: #ef71f2;
  fill: #ef71f2; }

canvas {
  position: absolute;
  top: 70px;
  left: 0;
  right: 0;
  bottom: 0; }

#svg {
  position: absolute;
  top: 0;
  left: 0; }

#svg rect {
  transition: all 0.2s linear; }

h1 {
  text-transform: uppercase;
  font-size: 40px; }

.rotate-phone {
  display: none; }

.phone-icon {
  position: relative;
  height: 60px;
  width: 60px;
  margin: 0 auto;
  fill: white;
  animation: rotate 4s infinite ease-in-out; }

.splash a:link, a:visited {
  color: #CDF352; }

.splash-main b {
  background: #ffec02;
  color: black;
  padding: 0 4px; }

@keyframes rotate {
  0%, 10% {
    transform: rotate(0deg); }
  40%, 60% {
    transform: rotate(-90deg); }
  95%, 100% {
    transform: rotate(0deg); } }

@media screen and (max-width: 500px) {
  .rotate-phone {
    display: block; } }

.splash {
  font-size: 16px;
  padding: 20px;
  line-height: 1.5;
  width: 100%;
  max-width: 700px;
  overflow: auto; }

button.splash-button {
  cursor: pointer;
  margin: 40px auto;
  padding: 14px;
  font-family: inherit;
  font-size: 22px;
  display: block;
  border: 2px solid #ffec02;
  background-color: transparent;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #ffec02;
  text-align: center;
  transition: background-color 0.2s linear;
  width: 200px; }

button.splash-button:hover {
  background-color: #ffec02;
  color: black; }

button.splash-button.small {
  padding: 8px;
  font-size: 16px; }

.splash-button.loading span {
  animation: pulsing-fade 1.2s ease-in-out infinite; }

@keyframes pulsing-fade {
  50% {
    opacity: 0.3; } }

.loading {
  font-size: 1.5em;
  text-transform: uppercase;
  color: #ffec02; }

.controls {
  display: flex;
  position: absolute;
  /* center hack */
  width: 100vw;
  bottom: 20px;
  height: 100px;
  z-index: 2; }
  .controls button {
    display: block;
    border: none;
    box-shadow: none;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    transition: transform 0.2s linear;
    font-family: inherit;
    font-size: 20px;
    font-weight: bold;
    -webkit-user-select: none;
    /* Safari 3.1+ */
    -moz-user-select: none;
    /* Firefox 2+ */
    -ms-user-select: none;
    /* IE 10+ */
    user-select: none;
    /* Standard syntax */
    line-height: 1; }
    .controls button[active] {
      transform: scale(0.9, 0.9); }
    .controls button span {
      pointer-events: none; }
  .controls .utility-l, .controls .utility-r {
    flex: 0 0 150px;
    display: flex; }
    .controls .utility-l button, .controls .utility-r button {
      position: relative;
      background: transparent;
      fill: white;
      cursor: pointer;
      flex: 0 0 60px;
      height: 60px; }
      .controls .utility-l button:hover, .controls .utility-r button:hover {
        fill: #CDF352; }
      .controls .utility-l button img, .controls .utility-r button img {
        display: block;
        width: 30px;
        height: 30px;
        margin: auto auto; }
    @media (max-width: 991.98px) {
      .controls .utility-l button, .controls .utility-r button {
        flex: 0 0 40px; }
        .controls .utility-l button img, .controls .utility-r button img {
          width: 25px;
          height: 25px; } }
  .controls .utility-l {
    padding-right: 20px;
    align-items: flex-end;
    justify-content: flex-start; }
    @media (max-width: 991.98px) {
      .controls .utility-l {
        flex: 0 0 50px;
        padding-right: 10px; } }
  .controls .keyboard {
    flex-grow: 1;
    display: flex; }
  .controls .utility-r {
    flex: 0 0 150px;
    align-items: flex-end;
    justify-content: flex-end;
    padding-left: 20px; }
    @media (max-width: 991.98px) {
      .controls .utility-r {
        flex: 0 0 50px;
        flex-direction: column;
        padding-left: 10px; } }

@media screen and (max-width: 700px) {
  .controls {
    height: 70px; }
  canvas {
    top: 70px; } }

.embed-focus-tip {
  position: absolute;
  /* center hack */
  width: 60vw;
  left: 20vw;
  bottom: 200px;
  z-index: 3;
  font-size: 20px;
  line-height: 24px;
  padding: 12px 1em;
  font-weight: bold;
  border-radius: 24px;
  background-color: rgba(255, 255, 255, 0.75);
  color: #07195f;
  opacity: 0;
  transition: opacity 0.5s linear;
  pointer-events: none; }
  .embed-focus-tip.visible {
    opacity: 1; }

.dialog {
  font-weight: 300;
  line-height: 1.4;
  background: #1C2C42;
  color: white;
  padding: 24px;
  z-index: 10;
  position: fixed;
  top: 20px;
  left: 50%;
  width: 80%;
  max-width: 600px;
  transform: translateX(-50%);
  border: 5px solid #cab900;
  text-align: left; }
  .dialog h1 {
    font-size: 1.5em;
    font-weight: bold;
    margin: 0 0 0; }
  .dialog h2 {
    font-size: 1.2em;
    font-weight: bold;
    margin: 0 0 0; }
  .dialog button.splash-button {
    margin: 40px auto 10px; }

.dialog select {
  color: white;
  font-family: inherit;
  font-size: 14px;
  border: none;
  border-bottom: 2px solid #ffec02;
  background: transparent;
  box-shadow: none;
  margin-bottom: 6px;
  width: 200px;
  height: 25px; }

/***********************
 * Radio buttons
 ***********************/
.control-indicator {
  border: solid #ffec02 2px;
  color: #ffec02;
  border-radius: 2px; }

label.radio {
  position: relative;
  display: inline-block;
  padding-left: 24px;
  margin-right: 24px;
  cursor: pointer; }

label.radio > input[type="radio"] {
  position: absolute;
  opacity: 0;
  z-index: -1; }

label.radio > input:checked ~ .control-indicator {
  background-color: #ffec02; }

label.radio > .control-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

#inputNumButtons {
  vertical-align: middle; }

.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
  vertical-align: middle; }

.lds-ellipsis div {
  position: absolute;
  top: 27px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ffec02;
  animation-timing-function: cubic-bezier(0, 1, 1, 0); }

.lds-ellipsis div:nth-child(1) {
  left: 6px;
  animation: lds-ellipsis1 0.6s infinite; }

.lds-ellipsis div:nth-child(2) {
  left: 6px;
  animation: lds-ellipsis2 0.6s infinite; }

.lds-ellipsis div:nth-child(3) {
  left: 26px;
  animation: lds-ellipsis2 0.6s infinite; }

.lds-ellipsis div:nth-child(4) {
  left: 45px;
  animation: lds-ellipsis3 0.6s infinite; }

@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0); }
  100% {
    transform: scale(1); } }

@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1); }
  100% {
    transform: scale(0); } }

@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0); }
  100% {
    transform: translate(19px, 0); } }

.lds-ellipsis-btn-lg {
  height: 48px; }
  .lds-ellipsis-btn-lg div {
    top: 18px; }

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