/* Loading spinner shown before the React app mounts. Lives in an external file
   (not an inline <style> block) so the CSP style-src needs no 'unsafe-inline'. */
.cxq-spinner {
  position: relative;
  width: 103.92px;
  height: 120px;
  margin: auto;
}

.cxq-spinner-hexagon {
  position: absolute;
  width: 103.92px;
  height: 60px;
  border-radius: 5px/10px;
  opacity: 0.4;
  top: 30px;
}

.cxq-spinner-hexagon-1 {
  background: #ae9bcf;
}

.cxq-spinner-hexagon-2 {
  background: #ffce5e;
}

.cxq-spinner-hexagon:before,
.cxq-spinner-hexagon:after {
  position: absolute;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  background: inherit;
  content: '';
}

.cxq-spinner-hexagon:before {
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
}

.cxq-spinner-hexagon:after {
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
}

.cxq-spinner--doubleBounce .cxq-spinner-hexagon {
  -webkit-animation: doubleBounce 2s infinite ease-in-out;
  animation: doubleBounce 2s infinite ease-in-out;
}

.cxq-spinner--doubleBounce .cxq-spinner-hexagon:nth-child(2) {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
@-webkit-keyframes doubleBounce {
  0%,
  100% {
    -webkit-transform: scale(0.2);
    transform: scale(0.2);
  }
  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes doubleBounce {
  0%,
  100% {
    -webkit-transform: scale(0.2);
    transform: scale(0.2);
  }
  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.innerContainer {
  position: fixed;
  top: 45%;
  left: 45%;
  transform: translate(-50%, -50%);
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  height: 150px;
  width: 150px;
}
@media only screen and (max-width: 767px) {
  .innerContainer {
    left: 30%;
  }
}
