/* colors */
/* logo icon colors */
/* color shades */
/* heatmap display */
/* categorical display */
/* colors */
/* logo icon colors */
/* color shades */
/* heatmap display */
/* categorical display */
/* /styles/mixins.scss */
.engagio-loading .spinner {
  text-align: center; }

.engagio-loading--xxs .spinner > div {
  height: 12px;
  width: 12px; }

.engagio-loading--xs .spinner > div {
  height: 16px;
  width: 16px; }

.engagio-loading--sm .spinner > div {
  height: 24px;
  width: 24px; }

.engagio-loading .spinner > div {
  animation: sk-bouncedelay 1400ms infinite ease-in-out both;
  background-color: #ff8964;
  border-radius: 100%;
  display: inline-block;
  margin: 0 5px;
  opacity: 0.6; }

.engagio-loading .spinner .bounce1 {
  animation-delay: -320ms;
  background-color: #007a87; }

.engagio-loading .spinner .bounce2 {
  animation-delay: -160ms;
  background-color: #fbd96d; }

.engagio-loading--greyscale .spinner > div {
  background-color: #8d8d8d; }

.engagio-loading--greyscale .spinner .bounce1 {
  background-color: #d1d1d1; }

.engagio-loading--greyscale .spinner .bounce2 {
  background-color: #bababa; }

@keyframes sk-bouncedelay {
  0%, 80%, 100% {
    transform: scale3d(0, 0, 0); }
  40% {
    transform: scale3d(1, 1, 1); } }