@use '../../../../../vendor/twbs/bootstrap/scss/bootstrap' as *;
@use "../../../scss/data2ui_mini-bootstrap";
@use "../../../../../assets/styles/variables" as variables;

/*** LOADER ***/

.brightness {
  filter: brightness(0.1) invert(1);
}

.greyscale {
  filter: brightness(0) invert(0.85);
}

.light-saturation {
  filter: brightness(0.6) invert(0);
}

.blur {
  filter: blur(4px);
}

.opacity {
  filter: opacity(0);
}

/************************************** Standard spinner loader ************************************/
.spinner-loader {
  width: 9em;
  height: 9em;
  border: 1em dotted #FFF;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  z-index: 10;
  box-sizing: border-box;
  animation: rotation 2s linear infinite;


  &.dark {
    border: 1.3em dotted #000;
  }

  &.primary {
    border: 1.3em dotted variables.$primary;
  }

  &.secondary {
    border: 1.3em dotted variables.$secondary;
  }

  &.tertiary {
    border: 1.3em dotted variables.$tertiary;
  }

  &.success {
    border: 1.3em dotted variables.$success;
  }

  &.warning {
    border: 1.3em dotted variables.$warning;
  }

  &.danger {
    border: 1.3em dotted variables.$danger;
  }
}

/************************************** Spinner loader Cicrle filled ************************************/

.spinner-loader-circle-filled {
  width: 6em;
  height: 6em;
  border: 1em solid #FFF;
  border-radius: 50%;
  position: relative;
  transform: rotate(45deg);
  box-sizing: border-box;
  z-index: 10;

  &:before {
    content: "";
    position: absolute;
    box-sizing: border-box;
    inset: -1em;
    border-radius: 50%;
    border: 1em solid #000;
    animation: prixClipFix 2s infinite linear;
  }

  &.dark {
    border: 1em solid #000;

    &:before {
      border: 1em solid #fff;
    }
  }

  &.primary {
    border: 1em solid variables.$primary;

    &:before {
      border: 1em solid #fff;
    }
  }

  &.secondary {
    border: 1em solid variables.$secondary;

    &:before {
      border: 1em solid #fff;
    }
  }

  &.tertiary {
    border: 1em solid variables.$tertiary;

    &:before {
      border: 1em solid #fff;
    }
  }

  &.success {
    border: 1em solid variables.$success;

    &:before {
      border: 1em solid #fff;
    }
  }

  &.warning {
    border: 1em solid variables.$warning;

    &:before {
      border: 1em solid #fff;
    }
  }

  &.danger {
    border: 1em solid variables.$danger;

    &:before {
      border: 1em solid #fff;
    }
  }
}

@keyframes prixClipFix {
  0% {
    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)
  }
  25% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
  }
  50% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)
  }
  75% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)
  }
  100% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)
  }
}


/************************************** Spinner loader with transparence ************************************/
.spinner-loader-transparent {
  //margin: 50px auto;
  margin: auto;
  font-size: 25px;
  width: 1em !important;
  height: 1em !important;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: load-light 1.1s infinite ease;
  animation: load-light 1.1s infinite ease;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  z-index: 10;

  &.dark {
    animation: load-dark 1.1s infinite ease;
  }

  &.primary {
    animation: load-primary 1.1s infinite ease;
  }

  &.secondary {
    animation: load-secondary 1.1s infinite ease;
  }

  &.tertiary {
    animation: load-tertiary 1.1s infinite ease;
  }

  &.success {
    animation: load-success 1.1s infinite ease;
  }

  &.warning {
    animation: load-warning 1.1s infinite ease;
  }

  &.danger {
    animation: load-danger 1.1s infinite ease;
  }
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes load-primary {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em variables.$primary, 1.8em -1.8em 0 0em rgba(variables.$primary, 0.2), 2.5em 0em 0 0em rgba(variables.$primary, 0.2), 1.75em 1.75em 0 0em rgba(variables.$primary, 0.2), 0em 2.5em 0 0em rgba(variables.$primary, 0.2), -1.8em 1.8em 0 0em rgba(variables.$primary, 0.2), -2.6em 0em 0 0em rgba(variables.$primary, 0.5), -1.8em -1.8em 0 0em rgba(variables.$primary, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$primary, 0.7), 1.8em -1.8em 0 0em variables.$primary, 2.5em 0em 0 0em rgba(variables.$primary, 0.2), 1.75em 1.75em 0 0em rgba(variables.$primary, 0.2), 0em 2.5em 0 0em rgba(variables.$primary, 0.2), -1.8em 1.8em 0 0em rgba(variables.$primary, 0.2), -2.6em 0em 0 0em rgba(variables.$primary, 0.2), -1.8em -1.8em 0 0em rgba(variables.$primary, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$primary, 0.5), 1.8em -1.8em 0 0em rgba(variables.$primary, 0.7), 2.5em 0em 0 0em variables.$primary, 1.75em 1.75em 0 0em rgba(variables.$primary, 0.2), 0em 2.5em 0 0em rgba(variables.$primary, 0.2), -1.8em 1.8em 0 0em rgba(variables.$primary, 0.2), -2.6em 0em 0 0em rgba(variables.$primary, 0.2), -1.8em -1.8em 0 0em rgba(variables.$primary, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$primary, 0.2), 1.8em -1.8em 0 0em rgba(variables.$primary, 0.5), 2.5em 0em 0 0em rgba(variables.$primary, 0.7), 1.75em 1.75em 0 0em variables.$primary, 0em 2.5em 0 0em rgba(variables.$primary, 0.2), -1.8em 1.8em 0 0em rgba(variables.$primary, 0.2), -2.6em 0em 0 0em rgba(variables.$primary, 0.2), -1.8em -1.8em 0 0em rgba(variables.$primary, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$primary, 0.2), 1.8em -1.8em 0 0em rgba(variables.$primary, 0.2), 2.5em 0em 0 0em rgba(variables.$primary, 0.5), 1.75em 1.75em 0 0em rgba(variables.$primary, 0.7), 0em 2.5em 0 0em variables.$primary, -1.8em 1.8em 0 0em rgba(variables.$primary, 0.2), -2.6em 0em 0 0em rgba(variables.$primary, 0.2), -1.8em -1.8em 0 0em rgba(variables.$primary, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$primary, 0.2), 1.8em -1.8em 0 0em rgba(variables.$primary, 0.2), 2.5em 0em 0 0em rgba(variables.$primary, 0.2), 1.75em 1.75em 0 0em rgba(variables.$primary, 0.5), 0em 2.5em 0 0em rgba(variables.$primary, 0.7), -1.8em 1.8em 0 0em variables.$primary, -2.6em 0em 0 0em rgba(variables.$primary, 0.2), -1.8em -1.8em 0 0em rgba(variables.$primary, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$primary, 0.2), 1.8em -1.8em 0 0em rgba(variables.$primary, 0.2), 2.5em 0em 0 0em rgba(variables.$primary, 0.2), 1.75em 1.75em 0 0em rgba(variables.$primary, 0.2), 0em 2.5em 0 0em rgba(variables.$primary, 0.5), -1.8em 1.8em 0 0em rgba(variables.$primary, 0.7), -2.6em 0em 0 0em variables.$primary, -1.8em -1.8em 0 0em rgba(variables.$primary, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$primary, 0.2), 1.8em -1.8em 0 0em rgba(variables.$primary, 0.2), 2.5em 0em 0 0em rgba(variables.$primary, 0.2), 1.75em 1.75em 0 0em rgba(variables.$primary, 0.2), 0em 2.5em 0 0em rgba(variables.$primary, 0.2), -1.8em 1.8em 0 0em rgba(variables.$primary, 0.5), -2.6em 0em 0 0em rgba(variables.$primary, 0.7), -1.8em -1.8em 0 0em variables.$primary;
  }
}

@keyframes load-primary {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em variables.$primary, 1.8em -1.8em 0 0em rgba(variables.$primary, 0.2), 2.5em 0em 0 0em rgba(variables.$primary, 0.2), 1.75em 1.75em 0 0em rgba(variables.$primary, 0.2), 0em 2.5em 0 0em rgba(variables.$primary, 0.2), -1.8em 1.8em 0 0em rgba(variables.$primary, 0.2), -2.6em 0em 0 0em rgba(variables.$primary, 0.5), -1.8em -1.8em 0 0em rgba(variables.$primary, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$primary, 0.7), 1.8em -1.8em 0 0em variables.$primary, 2.5em 0em 0 0em rgba(variables.$primary, 0.2), 1.75em 1.75em 0 0em rgba(variables.$primary, 0.2), 0em 2.5em 0 0em rgba(variables.$primary, 0.2), -1.8em 1.8em 0 0em rgba(variables.$primary, 0.2), -2.6em 0em 0 0em rgba(variables.$primary, 0.2), -1.8em -1.8em 0 0em rgba(variables.$primary, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$primary, 0.5), 1.8em -1.8em 0 0em rgba(variables.$primary, 0.7), 2.5em 0em 0 0em variables.$primary, 1.75em 1.75em 0 0em rgba(variables.$primary, 0.2), 0em 2.5em 0 0em rgba(variables.$primary, 0.2), -1.8em 1.8em 0 0em rgba(variables.$primary, 0.2), -2.6em 0em 0 0em rgba(variables.$primary, 0.2), -1.8em -1.8em 0 0em rgba(variables.$primary, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$primary, 0.2), 1.8em -1.8em 0 0em rgba(variables.$primary, 0.5), 2.5em 0em 0 0em rgba(variables.$primary, 0.7), 1.75em 1.75em 0 0em variables.$primary, 0em 2.5em 0 0em rgba(variables.$primary, 0.2), -1.8em 1.8em 0 0em rgba(variables.$primary, 0.2), -2.6em 0em 0 0em rgba(variables.$primary, 0.2), -1.8em -1.8em 0 0em rgba(variables.$primary, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$primary, 0.2), 1.8em -1.8em 0 0em rgba(variables.$primary, 0.2), 2.5em 0em 0 0em rgba(variables.$primary, 0.5), 1.75em 1.75em 0 0em rgba(variables.$primary, 0.7), 0em 2.5em 0 0em variables.$primary, -1.8em 1.8em 0 0em rgba(variables.$primary, 0.2), -2.6em 0em 0 0em rgba(variables.$primary, 0.2), -1.8em -1.8em 0 0em rgba(variables.$primary, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$primary, 0.2), 1.8em -1.8em 0 0em rgba(variables.$primary, 0.2), 2.5em 0em 0 0em rgba(variables.$primary, 0.2), 1.75em 1.75em 0 0em rgba(variables.$primary, 0.5), 0em 2.5em 0 0em rgba(variables.$primary, 0.7), -1.8em 1.8em 0 0em variables.$primary, -2.6em 0em 0 0em rgba(variables.$primary, 0.2), -1.8em -1.8em 0 0em rgba(variables.$primary, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$primary, 0.2), 1.8em -1.8em 0 0em rgba(variables.$primary, 0.2), 2.5em 0em 0 0em rgba(variables.$primary, 0.2), 1.75em 1.75em 0 0em rgba(variables.$primary, 0.2), 0em 2.5em 0 0em rgba(variables.$primary, 0.5), -1.8em 1.8em 0 0em rgba(variables.$primary, 0.7), -2.6em 0em 0 0em variables.$primary, -1.8em -1.8em 0 0em rgba(variables.$primary, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$primary, 0.2), 1.8em -1.8em 0 0em rgba(variables.$primary, 0.2), 2.5em 0em 0 0em rgba(variables.$primary, 0.2), 1.75em 1.75em 0 0em rgba(variables.$primary, 0.2), 0em 2.5em 0 0em rgba(variables.$primary, 0.2), -1.8em 1.8em 0 0em rgba(variables.$primary, 0.5), -2.6em 0em 0 0em rgba(variables.$primary, 0.7), -1.8em -1.8em 0 0em variables.$primary;
  }
}


@-webkit-keyframes load-secondary {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em variables.$secondary, 1.8em -1.8em 0 0em rgba(variables.$secondary, 0.2), 2.5em 0em 0 0em rgba(variables.$secondary, 0.2), 1.75em 1.75em 0 0em rgba(variables.$secondary, 0.2), 0em 2.5em 0 0em rgba(variables.$secondary, 0.2), -1.8em 1.8em 0 0em rgba(variables.$secondary, 0.2), -2.6em 0em 0 0em rgba(variables.$secondary, 0.5), -1.8em -1.8em 0 0em rgba(variables.$secondary, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$secondary, 0.7), 1.8em -1.8em 0 0em variables.$secondary, 2.5em 0em 0 0em rgba(variables.$secondary, 0.2), 1.75em 1.75em 0 0em rgba(variables.$secondary, 0.2), 0em 2.5em 0 0em rgba(variables.$secondary, 0.2), -1.8em 1.8em 0 0em rgba(variables.$secondary, 0.2), -2.6em 0em 0 0em rgba(variables.$secondary, 0.2), -1.8em -1.8em 0 0em rgba(variables.$secondary, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$secondary, 0.5), 1.8em -1.8em 0 0em rgba(variables.$secondary, 0.7), 2.5em 0em 0 0em variables.$secondary, 1.75em 1.75em 0 0em rgba(variables.$secondary, 0.2), 0em 2.5em 0 0em rgba(variables.$secondary, 0.2), -1.8em 1.8em 0 0em rgba(variables.$secondary, 0.2), -2.6em 0em 0 0em rgba(variables.$secondary, 0.2), -1.8em -1.8em 0 0em rgba(variables.$secondary, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$secondary, 0.2), 1.8em -1.8em 0 0em rgba(variables.$secondary, 0.5), 2.5em 0em 0 0em rgba(variables.$secondary, 0.7), 1.75em 1.75em 0 0em variables.$secondary, 0em 2.5em 0 0em rgba(variables.$secondary, 0.2), -1.8em 1.8em 0 0em rgba(variables.$secondary, 0.2), -2.6em 0em 0 0em rgba(variables.$secondary, 0.2), -1.8em -1.8em 0 0em rgba(variables.$secondary, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$secondary, 0.2), 1.8em -1.8em 0 0em rgba(variables.$secondary, 0.2), 2.5em 0em 0 0em rgba(variables.$secondary, 0.5), 1.75em 1.75em 0 0em rgba(variables.$secondary, 0.7), 0em 2.5em 0 0em variables.$secondary, -1.8em 1.8em 0 0em rgba(variables.$secondary, 0.2), -2.6em 0em 0 0em rgba(variables.$secondary, 0.2), -1.8em -1.8em 0 0em rgba(variables.$secondary, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$secondary, 0.2), 1.8em -1.8em 0 0em rgba(variables.$secondary, 0.2), 2.5em 0em 0 0em rgba(variables.$secondary, 0.2), 1.75em 1.75em 0 0em rgba(variables.$secondary, 0.5), 0em 2.5em 0 0em rgba(variables.$secondary, 0.7), -1.8em 1.8em 0 0em variables.$secondary, -2.6em 0em 0 0em rgba(variables.$secondary, 0.2), -1.8em -1.8em 0 0em rgba(variables.$secondary, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$secondary, 0.2), 1.8em -1.8em 0 0em rgba(variables.$secondary, 0.2), 2.5em 0em 0 0em rgba(variables.$secondary, 0.2), 1.75em 1.75em 0 0em rgba(variables.$secondary, 0.2), 0em 2.5em 0 0em rgba(variables.$secondary, 0.5), -1.8em 1.8em 0 0em rgba(variables.$secondary, 0.7), -2.6em 0em 0 0em variables.$secondary, -1.8em -1.8em 0 0em rgba(variables.$secondary, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$secondary, 0.2), 1.8em -1.8em 0 0em rgba(variables.$secondary, 0.2), 2.5em 0em 0 0em rgba(variables.$secondary, 0.2), 1.75em 1.75em 0 0em rgba(variables.$secondary, 0.2), 0em 2.5em 0 0em rgba(variables.$secondary, 0.2), -1.8em 1.8em 0 0em rgba(variables.$secondary, 0.5), -2.6em 0em 0 0em rgba(variables.$secondary, 0.7), -1.8em -1.8em 0 0em variables.$secondary;
  }
}

@keyframes load-secondary {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em variables.$secondary, 1.8em -1.8em 0 0em rgba(variables.$secondary, 0.2), 2.5em 0em 0 0em rgba(variables.$secondary, 0.2), 1.75em 1.75em 0 0em rgba(variables.$secondary, 0.2), 0em 2.5em 0 0em rgba(variables.$secondary, 0.2), -1.8em 1.8em 0 0em rgba(variables.$secondary, 0.2), -2.6em 0em 0 0em rgba(variables.$secondary, 0.5), -1.8em -1.8em 0 0em rgba(variables.$secondary, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$secondary, 0.7), 1.8em -1.8em 0 0em variables.$secondary, 2.5em 0em 0 0em rgba(variables.$secondary, 0.2), 1.75em 1.75em 0 0em rgba(variables.$secondary, 0.2), 0em 2.5em 0 0em rgba(variables.$secondary, 0.2), -1.8em 1.8em 0 0em rgba(variables.$secondary, 0.2), -2.6em 0em 0 0em rgba(variables.$secondary, 0.2), -1.8em -1.8em 0 0em rgba(variables.$secondary, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$secondary, 0.5), 1.8em -1.8em 0 0em rgba(variables.$secondary, 0.7), 2.5em 0em 0 0em variables.$secondary, 1.75em 1.75em 0 0em rgba(variables.$secondary, 0.2), 0em 2.5em 0 0em rgba(variables.$secondary, 0.2), -1.8em 1.8em 0 0em rgba(variables.$secondary, 0.2), -2.6em 0em 0 0em rgba(variables.$secondary, 0.2), -1.8em -1.8em 0 0em rgba(variables.$secondary, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$secondary, 0.2), 1.8em -1.8em 0 0em rgba(variables.$secondary, 0.5), 2.5em 0em 0 0em rgba(variables.$secondary, 0.7), 1.75em 1.75em 0 0em variables.$secondary, 0em 2.5em 0 0em rgba(variables.$secondary, 0.2), -1.8em 1.8em 0 0em rgba(variables.$secondary, 0.2), -2.6em 0em 0 0em rgba(variables.$secondary, 0.2), -1.8em -1.8em 0 0em rgba(variables.$secondary, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$secondary, 0.2), 1.8em -1.8em 0 0em rgba(variables.$secondary, 0.2), 2.5em 0em 0 0em rgba(variables.$secondary, 0.5), 1.75em 1.75em 0 0em rgba(variables.$secondary, 0.7), 0em 2.5em 0 0em variables.$secondary, -1.8em 1.8em 0 0em rgba(variables.$secondary, 0.2), -2.6em 0em 0 0em rgba(variables.$secondary, 0.2), -1.8em -1.8em 0 0em rgba(variables.$secondary, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$secondary, 0.2), 1.8em -1.8em 0 0em rgba(variables.$secondary, 0.2), 2.5em 0em 0 0em rgba(variables.$secondary, 0.2), 1.75em 1.75em 0 0em rgba(variables.$secondary, 0.5), 0em 2.5em 0 0em rgba(variables.$secondary, 0.7), -1.8em 1.8em 0 0em variables.$secondary, -2.6em 0em 0 0em rgba(variables.$secondary, 0.2), -1.8em -1.8em 0 0em rgba(variables.$secondary, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$secondary, 0.2), 1.8em -1.8em 0 0em rgba(variables.$secondary, 0.2), 2.5em 0em 0 0em rgba(variables.$secondary, 0.2), 1.75em 1.75em 0 0em rgba(variables.$secondary, 0.2), 0em 2.5em 0 0em rgba(variables.$secondary, 0.5), -1.8em 1.8em 0 0em rgba(variables.$secondary, 0.7), -2.6em 0em 0 0em variables.$secondary, -1.8em -1.8em 0 0em rgba(variables.$secondary, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$secondary, 0.2), 1.8em -1.8em 0 0em rgba(variables.$secondary, 0.2), 2.5em 0em 0 0em rgba(variables.$secondary, 0.2), 1.75em 1.75em 0 0em rgba(variables.$secondary, 0.2), 0em 2.5em 0 0em rgba(variables.$secondary, 0.2), -1.8em 1.8em 0 0em rgba(variables.$secondary, 0.5), -2.6em 0em 0 0em rgba(variables.$secondary, 0.7), -1.8em -1.8em 0 0em variables.$secondary;
  }
}


@-webkit-keyframes load-tertiary {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em variables.$tertiary, 1.8em -1.8em 0 0em rgba(variables.$tertiary, 0.2), 2.5em 0em 0 0em rgba(variables.$tertiary, 0.2), 1.75em 1.75em 0 0em rgba(variables.$tertiary, 0.2), 0em 2.5em 0 0em rgba(variables.$tertiary, 0.2), -1.8em 1.8em 0 0em rgba(variables.$tertiary, 0.2), -2.6em 0em 0 0em rgba(variables.$tertiary, 0.5), -1.8em -1.8em 0 0em rgba(variables.$tertiary, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$tertiary, 0.7), 1.8em -1.8em 0 0em variables.$tertiary, 2.5em 0em 0 0em rgba(variables.$tertiary, 0.2), 1.75em 1.75em 0 0em rgba(variables.$tertiary, 0.2), 0em 2.5em 0 0em rgba(variables.$tertiary, 0.2), -1.8em 1.8em 0 0em rgba(variables.$tertiary, 0.2), -2.6em 0em 0 0em rgba(variables.$tertiary, 0.2), -1.8em -1.8em 0 0em rgba(variables.$tertiary, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$tertiary, 0.5), 1.8em -1.8em 0 0em rgba(variables.$tertiary, 0.7), 2.5em 0em 0 0em variables.$tertiary, 1.75em 1.75em 0 0em rgba(variables.$tertiary, 0.2), 0em 2.5em 0 0em rgba(variables.$tertiary, 0.2), -1.8em 1.8em 0 0em rgba(variables.$tertiary, 0.2), -2.6em 0em 0 0em rgba(variables.$tertiary, 0.2), -1.8em -1.8em 0 0em rgba(variables.$tertiary, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$tertiary, 0.2), 1.8em -1.8em 0 0em rgba(variables.$tertiary, 0.5), 2.5em 0em 0 0em rgba(variables.$tertiary, 0.7), 1.75em 1.75em 0 0em variables.$tertiary, 0em 2.5em 0 0em rgba(variables.$tertiary, 0.2), -1.8em 1.8em 0 0em rgba(variables.$tertiary, 0.2), -2.6em 0em 0 0em rgba(variables.$tertiary, 0.2), -1.8em -1.8em 0 0em rgba(variables.$tertiary, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$tertiary, 0.2), 1.8em -1.8em 0 0em rgba(variables.$tertiary, 0.2), 2.5em 0em 0 0em rgba(variables.$tertiary, 0.5), 1.75em 1.75em 0 0em rgba(variables.$tertiary, 0.7), 0em 2.5em 0 0em variables.$tertiary, -1.8em 1.8em 0 0em rgba(variables.$tertiary, 0.2), -2.6em 0em 0 0em rgba(variables.$tertiary, 0.2), -1.8em -1.8em 0 0em rgba(variables.$tertiary, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$tertiary, 0.2), 1.8em -1.8em 0 0em rgba(variables.$tertiary, 0.2), 2.5em 0em 0 0em rgba(variables.$tertiary, 0.2), 1.75em 1.75em 0 0em rgba(variables.$tertiary, 0.5), 0em 2.5em 0 0em rgba(variables.$tertiary, 0.7), -1.8em 1.8em 0 0em variables.$tertiary, -2.6em 0em 0 0em rgba(variables.$tertiary, 0.2), -1.8em -1.8em 0 0em rgba(variables.$tertiary, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$tertiary, 0.2), 1.8em -1.8em 0 0em rgba(variables.$tertiary, 0.2), 2.5em 0em 0 0em rgba(variables.$tertiary, 0.2), 1.75em 1.75em 0 0em rgba(variables.$tertiary, 0.2), 0em 2.5em 0 0em rgba(variables.$tertiary, 0.5), -1.8em 1.8em 0 0em rgba(variables.$tertiary, 0.7), -2.6em 0em 0 0em variables.$tertiary, -1.8em -1.8em 0 0em rgba(variables.$tertiary, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$tertiary, 0.2), 1.8em -1.8em 0 0em rgba(variables.$tertiary, 0.2), 2.5em 0em 0 0em rgba(variables.$tertiary, 0.2), 1.75em 1.75em 0 0em rgba(variables.$tertiary, 0.2), 0em 2.5em 0 0em rgba(variables.$tertiary, 0.2), -1.8em 1.8em 0 0em rgba(variables.$tertiary, 0.5), -2.6em 0em 0 0em rgba(variables.$tertiary, 0.7), -1.8em -1.8em 0 0em variables.$tertiary;
  }
}

@keyframes load-tertiary {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em variables.$tertiary, 1.8em -1.8em 0 0em rgba(variables.$tertiary, 0.2), 2.5em 0em 0 0em rgba(variables.$tertiary, 0.2), 1.75em 1.75em 0 0em rgba(variables.$tertiary, 0.2), 0em 2.5em 0 0em rgba(variables.$tertiary, 0.2), -1.8em 1.8em 0 0em rgba(variables.$tertiary, 0.2), -2.6em 0em 0 0em rgba(variables.$tertiary, 0.5), -1.8em -1.8em 0 0em rgba(variables.$tertiary, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$tertiary, 0.7), 1.8em -1.8em 0 0em variables.$tertiary, 2.5em 0em 0 0em rgba(variables.$tertiary, 0.2), 1.75em 1.75em 0 0em rgba(variables.$tertiary, 0.2), 0em 2.5em 0 0em rgba(variables.$tertiary, 0.2), -1.8em 1.8em 0 0em rgba(variables.$tertiary, 0.2), -2.6em 0em 0 0em rgba(variables.$tertiary, 0.2), -1.8em -1.8em 0 0em rgba(variables.$tertiary, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$tertiary, 0.5), 1.8em -1.8em 0 0em rgba(variables.$tertiary, 0.7), 2.5em 0em 0 0em variables.$tertiary, 1.75em 1.75em 0 0em rgba(variables.$tertiary, 0.2), 0em 2.5em 0 0em rgba(variables.$tertiary, 0.2), -1.8em 1.8em 0 0em rgba(variables.$tertiary, 0.2), -2.6em 0em 0 0em rgba(variables.$tertiary, 0.2), -1.8em -1.8em 0 0em rgba(variables.$tertiary, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$tertiary, 0.2), 1.8em -1.8em 0 0em rgba(variables.$tertiary, 0.5), 2.5em 0em 0 0em rgba(variables.$tertiary, 0.7), 1.75em 1.75em 0 0em variables.$tertiary, 0em 2.5em 0 0em rgba(variables.$tertiary, 0.2), -1.8em 1.8em 0 0em rgba(variables.$tertiary, 0.2), -2.6em 0em 0 0em rgba(variables.$tertiary, 0.2), -1.8em -1.8em 0 0em rgba(variables.$tertiary, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$tertiary, 0.2), 1.8em -1.8em 0 0em rgba(variables.$tertiary, 0.2), 2.5em 0em 0 0em rgba(variables.$tertiary, 0.5), 1.75em 1.75em 0 0em rgba(variables.$tertiary, 0.7), 0em 2.5em 0 0em variables.$tertiary, -1.8em 1.8em 0 0em rgba(variables.$tertiary, 0.2), -2.6em 0em 0 0em rgba(variables.$tertiary, 0.2), -1.8em -1.8em 0 0em rgba(variables.$tertiary, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$tertiary, 0.2), 1.8em -1.8em 0 0em rgba(variables.$tertiary, 0.2), 2.5em 0em 0 0em rgba(variables.$tertiary, 0.2), 1.75em 1.75em 0 0em rgba(variables.$tertiary, 0.5), 0em 2.5em 0 0em rgba(variables.$tertiary, 0.7), -1.8em 1.8em 0 0em variables.$tertiary, -2.6em 0em 0 0em rgba(variables.$tertiary, 0.2), -1.8em -1.8em 0 0em rgba(variables.$tertiary, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$tertiary, 0.2), 1.8em -1.8em 0 0em rgba(variables.$tertiary, 0.2), 2.5em 0em 0 0em rgba(variables.$tertiary, 0.2), 1.75em 1.75em 0 0em rgba(variables.$tertiary, 0.2), 0em 2.5em 0 0em rgba(variables.$tertiary, 0.5), -1.8em 1.8em 0 0em rgba(variables.$tertiary, 0.7), -2.6em 0em 0 0em variables.$tertiary, -1.8em -1.8em 0 0em rgba(variables.$tertiary, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$tertiary, 0.2), 1.8em -1.8em 0 0em rgba(variables.$tertiary, 0.2), 2.5em 0em 0 0em rgba(variables.$tertiary, 0.2), 1.75em 1.75em 0 0em rgba(variables.$tertiary, 0.2), 0em 2.5em 0 0em rgba(variables.$tertiary, 0.2), -1.8em 1.8em 0 0em rgba(variables.$tertiary, 0.5), -2.6em 0em 0 0em rgba(variables.$tertiary, 0.7), -1.8em -1.8em 0 0em variables.$tertiary;
  }
}


@-webkit-keyframes load-success {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em variables.$success, 1.8em -1.8em 0 0em rgba(variables.$success, 0.2), 2.5em 0em 0 0em rgba(variables.$success, 0.2), 1.75em 1.75em 0 0em rgba(variables.$success, 0.2), 0em 2.5em 0 0em rgba(variables.$success, 0.2), -1.8em 1.8em 0 0em rgba(variables.$success, 0.2), -2.6em 0em 0 0em rgba(variables.$success, 0.5), -1.8em -1.8em 0 0em rgba(variables.$success, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$success, 0.7), 1.8em -1.8em 0 0em variables.$success, 2.5em 0em 0 0em rgba(variables.$success, 0.2), 1.75em 1.75em 0 0em rgba(variables.$success, 0.2), 0em 2.5em 0 0em rgba(variables.$success, 0.2), -1.8em 1.8em 0 0em rgba(variables.$success, 0.2), -2.6em 0em 0 0em rgba(variables.$success, 0.2), -1.8em -1.8em 0 0em rgba(variables.$success, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$success, 0.5), 1.8em -1.8em 0 0em rgba(variables.$success, 0.7), 2.5em 0em 0 0em variables.$success, 1.75em 1.75em 0 0em rgba(variables.$success, 0.2), 0em 2.5em 0 0em rgba(variables.$success, 0.2), -1.8em 1.8em 0 0em rgba(variables.$success, 0.2), -2.6em 0em 0 0em rgba(variables.$success, 0.2), -1.8em -1.8em 0 0em rgba(variables.$success, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$success, 0.2), 1.8em -1.8em 0 0em rgba(variables.$success, 0.5), 2.5em 0em 0 0em rgba(variables.$success, 0.7), 1.75em 1.75em 0 0em variables.$success, 0em 2.5em 0 0em rgba(variables.$success, 0.2), -1.8em 1.8em 0 0em rgba(variables.$success, 0.2), -2.6em 0em 0 0em rgba(variables.$success, 0.2), -1.8em -1.8em 0 0em rgba(variables.$success, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$success, 0.2), 1.8em -1.8em 0 0em rgba(variables.$success, 0.2), 2.5em 0em 0 0em rgba(variables.$success, 0.5), 1.75em 1.75em 0 0em rgba(variables.$success, 0.7), 0em 2.5em 0 0em variables.$success, -1.8em 1.8em 0 0em rgba(variables.$success, 0.2), -2.6em 0em 0 0em rgba(variables.$success, 0.2), -1.8em -1.8em 0 0em rgba(variables.$success, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$success, 0.2), 1.8em -1.8em 0 0em rgba(variables.$success, 0.2), 2.5em 0em 0 0em rgba(variables.$success, 0.2), 1.75em 1.75em 0 0em rgba(variables.$success, 0.5), 0em 2.5em 0 0em rgba(variables.$success, 0.7), -1.8em 1.8em 0 0em variables.$success, -2.6em 0em 0 0em rgba(variables.$success, 0.2), -1.8em -1.8em 0 0em rgba(variables.$success, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$success, 0.2), 1.8em -1.8em 0 0em rgba(variables.$success, 0.2), 2.5em 0em 0 0em rgba(variables.$success, 0.2), 1.75em 1.75em 0 0em rgba(variables.$success, 0.2), 0em 2.5em 0 0em rgba(variables.$success, 0.5), -1.8em 1.8em 0 0em rgba(variables.$success, 0.7), -2.6em 0em 0 0em variables.$success, -1.8em -1.8em 0 0em rgba(variables.$success, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$success, 0.2), 1.8em -1.8em 0 0em rgba(variables.$success, 0.2), 2.5em 0em 0 0em rgba(variables.$success, 0.2), 1.75em 1.75em 0 0em rgba(variables.$success, 0.2), 0em 2.5em 0 0em rgba(variables.$success, 0.2), -1.8em 1.8em 0 0em rgba(variables.$success, 0.5), -2.6em 0em 0 0em rgba(variables.$success, 0.7), -1.8em -1.8em 0 0em variables.$success;
  }
}

@keyframes load-success {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em variables.$success, 1.8em -1.8em 0 0em rgba(variables.$success, 0.2), 2.5em 0em 0 0em rgba(variables.$success, 0.2), 1.75em 1.75em 0 0em rgba(variables.$success, 0.2), 0em 2.5em 0 0em rgba(variables.$success, 0.2), -1.8em 1.8em 0 0em rgba(variables.$success, 0.2), -2.6em 0em 0 0em rgba(variables.$success, 0.5), -1.8em -1.8em 0 0em rgba(variables.$success, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$success, 0.7), 1.8em -1.8em 0 0em variables.$success, 2.5em 0em 0 0em rgba(variables.$success, 0.2), 1.75em 1.75em 0 0em rgba(variables.$success, 0.2), 0em 2.5em 0 0em rgba(variables.$success, 0.2), -1.8em 1.8em 0 0em rgba(variables.$success, 0.2), -2.6em 0em 0 0em rgba(variables.$success, 0.2), -1.8em -1.8em 0 0em rgba(variables.$success, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$success, 0.5), 1.8em -1.8em 0 0em rgba(variables.$success, 0.7), 2.5em 0em 0 0em variables.$success, 1.75em 1.75em 0 0em rgba(variables.$success, 0.2), 0em 2.5em 0 0em rgba(variables.$success, 0.2), -1.8em 1.8em 0 0em rgba(variables.$success, 0.2), -2.6em 0em 0 0em rgba(variables.$success, 0.2), -1.8em -1.8em 0 0em rgba(variables.$success, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$success, 0.2), 1.8em -1.8em 0 0em rgba(variables.$success, 0.5), 2.5em 0em 0 0em rgba(variables.$success, 0.7), 1.75em 1.75em 0 0em variables.$success, 0em 2.5em 0 0em rgba(variables.$success, 0.2), -1.8em 1.8em 0 0em rgba(variables.$success, 0.2), -2.6em 0em 0 0em rgba(variables.$success, 0.2), -1.8em -1.8em 0 0em rgba(variables.$success, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$success, 0.2), 1.8em -1.8em 0 0em rgba(variables.$success, 0.2), 2.5em 0em 0 0em rgba(variables.$success, 0.5), 1.75em 1.75em 0 0em rgba(variables.$success, 0.7), 0em 2.5em 0 0em variables.$success, -1.8em 1.8em 0 0em rgba(variables.$success, 0.2), -2.6em 0em 0 0em rgba(variables.$success, 0.2), -1.8em -1.8em 0 0em rgba(variables.$success, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$success, 0.2), 1.8em -1.8em 0 0em rgba(variables.$success, 0.2), 2.5em 0em 0 0em rgba(variables.$success, 0.2), 1.75em 1.75em 0 0em rgba(variables.$success, 0.5), 0em 2.5em 0 0em rgba(variables.$success, 0.7), -1.8em 1.8em 0 0em variables.$success, -2.6em 0em 0 0em rgba(variables.$success, 0.2), -1.8em -1.8em 0 0em rgba(variables.$success, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$success, 0.2), 1.8em -1.8em 0 0em rgba(variables.$success, 0.2), 2.5em 0em 0 0em rgba(variables.$success, 0.2), 1.75em 1.75em 0 0em rgba(variables.$success, 0.2), 0em 2.5em 0 0em rgba(variables.$success, 0.5), -1.8em 1.8em 0 0em rgba(variables.$success, 0.7), -2.6em 0em 0 0em variables.$success, -1.8em -1.8em 0 0em rgba(variables.$success, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$success, 0.2), 1.8em -1.8em 0 0em rgba(variables.$success, 0.2), 2.5em 0em 0 0em rgba(variables.$success, 0.2), 1.75em 1.75em 0 0em rgba(variables.$success, 0.2), 0em 2.5em 0 0em rgba(variables.$success, 0.2), -1.8em 1.8em 0 0em rgba(variables.$success, 0.5), -2.6em 0em 0 0em rgba(variables.$success, 0.7), -1.8em -1.8em 0 0em variables.$success;
  }
}


@-webkit-keyframes load-warning {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em variables.$warning, 1.8em -1.8em 0 0em rgba(variables.$warning, 0.2), 2.5em 0em 0 0em rgba(variables.$warning, 0.2), 1.75em 1.75em 0 0em rgba(variables.$warning, 0.2), 0em 2.5em 0 0em rgba(variables.$warning, 0.2), -1.8em 1.8em 0 0em rgba(variables.$warning, 0.2), -2.6em 0em 0 0em rgba(variables.$warning, 0.5), -1.8em -1.8em 0 0em rgba(variables.$warning, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$warning, 0.7), 1.8em -1.8em 0 0em variables.$warning, 2.5em 0em 0 0em rgba(variables.$warning, 0.2), 1.75em 1.75em 0 0em rgba(variables.$warning, 0.2), 0em 2.5em 0 0em rgba(variables.$warning, 0.2), -1.8em 1.8em 0 0em rgba(variables.$warning, 0.2), -2.6em 0em 0 0em rgba(variables.$warning, 0.2), -1.8em -1.8em 0 0em rgba(variables.$warning, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$warning, 0.5), 1.8em -1.8em 0 0em rgba(variables.$warning, 0.7), 2.5em 0em 0 0em variables.$warning, 1.75em 1.75em 0 0em rgba(variables.$warning, 0.2), 0em 2.5em 0 0em rgba(variables.$warning, 0.2), -1.8em 1.8em 0 0em rgba(variables.$warning, 0.2), -2.6em 0em 0 0em rgba(variables.$warning, 0.2), -1.8em -1.8em 0 0em rgba(variables.$warning, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$warning, 0.2), 1.8em -1.8em 0 0em rgba(variables.$warning, 0.5), 2.5em 0em 0 0em rgba(variables.$warning, 0.7), 1.75em 1.75em 0 0em variables.$warning, 0em 2.5em 0 0em rgba(variables.$warning, 0.2), -1.8em 1.8em 0 0em rgba(variables.$warning, 0.2), -2.6em 0em 0 0em rgba(variables.$warning, 0.2), -1.8em -1.8em 0 0em rgba(variables.$warning, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$warning, 0.2), 1.8em -1.8em 0 0em rgba(variables.$warning, 0.2), 2.5em 0em 0 0em rgba(variables.$warning, 0.5), 1.75em 1.75em 0 0em rgba(variables.$warning, 0.7), 0em 2.5em 0 0em variables.$warning, -1.8em 1.8em 0 0em rgba(variables.$warning, 0.2), -2.6em 0em 0 0em rgba(variables.$warning, 0.2), -1.8em -1.8em 0 0em rgba(variables.$warning, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$warning, 0.2), 1.8em -1.8em 0 0em rgba(variables.$warning, 0.2), 2.5em 0em 0 0em rgba(variables.$warning, 0.2), 1.75em 1.75em 0 0em rgba(variables.$warning, 0.5), 0em 2.5em 0 0em rgba(variables.$warning, 0.7), -1.8em 1.8em 0 0em variables.$warning, -2.6em 0em 0 0em rgba(variables.$warning, 0.2), -1.8em -1.8em 0 0em rgba(variables.$warning, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$warning, 0.2), 1.8em -1.8em 0 0em rgba(variables.$warning, 0.2), 2.5em 0em 0 0em rgba(variables.$warning, 0.2), 1.75em 1.75em 0 0em rgba(variables.$warning, 0.2), 0em 2.5em 0 0em rgba(variables.$warning, 0.5), -1.8em 1.8em 0 0em rgba(variables.$warning, 0.7), -2.6em 0em 0 0em variables.$warning, -1.8em -1.8em 0 0em rgba(variables.$warning, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$warning, 0.2), 1.8em -1.8em 0 0em rgba(variables.$warning, 0.2), 2.5em 0em 0 0em rgba(variables.$warning, 0.2), 1.75em 1.75em 0 0em rgba(variables.$warning, 0.2), 0em 2.5em 0 0em rgba(variables.$warning, 0.2), -1.8em 1.8em 0 0em rgba(variables.$warning, 0.5), -2.6em 0em 0 0em rgba(variables.$warning, 0.7), -1.8em -1.8em 0 0em variables.$warning;
  }
}

@keyframes load-warning {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em variables.$warning, 1.8em -1.8em 0 0em rgba(variables.$warning, 0.2), 2.5em 0em 0 0em rgba(variables.$warning, 0.2), 1.75em 1.75em 0 0em rgba(variables.$warning, 0.2), 0em 2.5em 0 0em rgba(variables.$warning, 0.2), -1.8em 1.8em 0 0em rgba(variables.$warning, 0.2), -2.6em 0em 0 0em rgba(variables.$warning, 0.5), -1.8em -1.8em 0 0em rgba(variables.$warning, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$warning, 0.7), 1.8em -1.8em 0 0em variables.$warning, 2.5em 0em 0 0em rgba(variables.$warning, 0.2), 1.75em 1.75em 0 0em rgba(variables.$warning, 0.2), 0em 2.5em 0 0em rgba(variables.$warning, 0.2), -1.8em 1.8em 0 0em rgba(variables.$warning, 0.2), -2.6em 0em 0 0em rgba(variables.$warning, 0.2), -1.8em -1.8em 0 0em rgba(variables.$warning, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$warning, 0.5), 1.8em -1.8em 0 0em rgba(variables.$warning, 0.7), 2.5em 0em 0 0em variables.$warning, 1.75em 1.75em 0 0em rgba(variables.$warning, 0.2), 0em 2.5em 0 0em rgba(variables.$warning, 0.2), -1.8em 1.8em 0 0em rgba(variables.$warning, 0.2), -2.6em 0em 0 0em rgba(variables.$warning, 0.2), -1.8em -1.8em 0 0em rgba(variables.$warning, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$warning, 0.2), 1.8em -1.8em 0 0em rgba(variables.$warning, 0.5), 2.5em 0em 0 0em rgba(variables.$warning, 0.7), 1.75em 1.75em 0 0em variables.$warning, 0em 2.5em 0 0em rgba(variables.$warning, 0.2), -1.8em 1.8em 0 0em rgba(variables.$warning, 0.2), -2.6em 0em 0 0em rgba(variables.$warning, 0.2), -1.8em -1.8em 0 0em rgba(variables.$warning, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$warning, 0.2), 1.8em -1.8em 0 0em rgba(variables.$warning, 0.2), 2.5em 0em 0 0em rgba(variables.$warning, 0.5), 1.75em 1.75em 0 0em rgba(variables.$warning, 0.7), 0em 2.5em 0 0em variables.$warning, -1.8em 1.8em 0 0em rgba(variables.$warning, 0.2), -2.6em 0em 0 0em rgba(variables.$warning, 0.2), -1.8em -1.8em 0 0em rgba(variables.$warning, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$warning, 0.2), 1.8em -1.8em 0 0em rgba(variables.$warning, 0.2), 2.5em 0em 0 0em rgba(variables.$warning, 0.2), 1.75em 1.75em 0 0em rgba(variables.$warning, 0.5), 0em 2.5em 0 0em rgba(variables.$warning, 0.7), -1.8em 1.8em 0 0em variables.$warning, -2.6em 0em 0 0em rgba(variables.$warning, 0.2), -1.8em -1.8em 0 0em rgba(variables.$warning, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$warning, 0.2), 1.8em -1.8em 0 0em rgba(variables.$warning, 0.2), 2.5em 0em 0 0em rgba(variables.$warning, 0.2), 1.75em 1.75em 0 0em rgba(variables.$warning, 0.2), 0em 2.5em 0 0em rgba(variables.$warning, 0.5), -1.8em 1.8em 0 0em rgba(variables.$warning, 0.7), -2.6em 0em 0 0em variables.$warning, -1.8em -1.8em 0 0em rgba(variables.$warning, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$warning, 0.2), 1.8em -1.8em 0 0em rgba(variables.$warning, 0.2), 2.5em 0em 0 0em rgba(variables.$warning, 0.2), 1.75em 1.75em 0 0em rgba(variables.$warning, 0.2), 0em 2.5em 0 0em rgba(variables.$warning, 0.2), -1.8em 1.8em 0 0em rgba(variables.$warning, 0.5), -2.6em 0em 0 0em rgba(variables.$warning, 0.7), -1.8em -1.8em 0 0em variables.$warning;
  }
}


@-webkit-keyframes load-danger {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em variables.$danger, 1.8em -1.8em 0 0em rgba(variables.$danger, 0.2), 2.5em 0em 0 0em rgba(variables.$danger, 0.2), 1.75em 1.75em 0 0em rgba(variables.$danger, 0.2), 0em 2.5em 0 0em rgba(variables.$danger, 0.2), -1.8em 1.8em 0 0em rgba(variables.$danger, 0.2), -2.6em 0em 0 0em rgba(variables.$danger, 0.5), -1.8em -1.8em 0 0em rgba(variables.$danger, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$danger, 0.7), 1.8em -1.8em 0 0em variables.$danger, 2.5em 0em 0 0em rgba(variables.$danger, 0.2), 1.75em 1.75em 0 0em rgba(variables.$danger, 0.2), 0em 2.5em 0 0em rgba(variables.$danger, 0.2), -1.8em 1.8em 0 0em rgba(variables.$danger, 0.2), -2.6em 0em 0 0em rgba(variables.$danger, 0.2), -1.8em -1.8em 0 0em rgba(variables.$danger, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$danger, 0.5), 1.8em -1.8em 0 0em rgba(variables.$danger, 0.7), 2.5em 0em 0 0em variables.$danger, 1.75em 1.75em 0 0em rgba(variables.$danger, 0.2), 0em 2.5em 0 0em rgba(variables.$danger, 0.2), -1.8em 1.8em 0 0em rgba(variables.$danger, 0.2), -2.6em 0em 0 0em rgba(variables.$danger, 0.2), -1.8em -1.8em 0 0em rgba(variables.$danger, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$danger, 0.2), 1.8em -1.8em 0 0em rgba(variables.$danger, 0.5), 2.5em 0em 0 0em rgba(variables.$danger, 0.7), 1.75em 1.75em 0 0em variables.$danger, 0em 2.5em 0 0em rgba(variables.$danger, 0.2), -1.8em 1.8em 0 0em rgba(variables.$danger, 0.2), -2.6em 0em 0 0em rgba(variables.$danger, 0.2), -1.8em -1.8em 0 0em rgba(variables.$danger, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$danger, 0.2), 1.8em -1.8em 0 0em rgba(variables.$danger, 0.2), 2.5em 0em 0 0em rgba(variables.$danger, 0.5), 1.75em 1.75em 0 0em rgba(variables.$danger, 0.7), 0em 2.5em 0 0em variables.$danger, -1.8em 1.8em 0 0em rgba(variables.$danger, 0.2), -2.6em 0em 0 0em rgba(variables.$danger, 0.2), -1.8em -1.8em 0 0em rgba(variables.$danger, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$danger, 0.2), 1.8em -1.8em 0 0em rgba(variables.$danger, 0.2), 2.5em 0em 0 0em rgba(variables.$danger, 0.2), 1.75em 1.75em 0 0em rgba(variables.$danger, 0.5), 0em 2.5em 0 0em rgba(variables.$danger, 0.7), -1.8em 1.8em 0 0em variables.$danger, -2.6em 0em 0 0em rgba(variables.$danger, 0.2), -1.8em -1.8em 0 0em rgba(variables.$danger, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$danger, 0.2), 1.8em -1.8em 0 0em rgba(variables.$danger, 0.2), 2.5em 0em 0 0em rgba(variables.$danger, 0.2), 1.75em 1.75em 0 0em rgba(variables.$danger, 0.2), 0em 2.5em 0 0em rgba(variables.$danger, 0.5), -1.8em 1.8em 0 0em rgba(variables.$danger, 0.7), -2.6em 0em 0 0em variables.$danger, -1.8em -1.8em 0 0em rgba(variables.$danger, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$danger, 0.2), 1.8em -1.8em 0 0em rgba(variables.$danger, 0.2), 2.5em 0em 0 0em rgba(variables.$danger, 0.2), 1.75em 1.75em 0 0em rgba(variables.$danger, 0.2), 0em 2.5em 0 0em rgba(variables.$danger, 0.2), -1.8em 1.8em 0 0em rgba(variables.$danger, 0.5), -2.6em 0em 0 0em rgba(variables.$danger, 0.7), -1.8em -1.8em 0 0em variables.$danger;
  }
}

@keyframes load-danger {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em variables.$danger, 1.8em -1.8em 0 0em rgba(variables.$danger, 0.2), 2.5em 0em 0 0em rgba(variables.$danger, 0.2), 1.75em 1.75em 0 0em rgba(variables.$danger, 0.2), 0em 2.5em 0 0em rgba(variables.$danger, 0.2), -1.8em 1.8em 0 0em rgba(variables.$danger, 0.2), -2.6em 0em 0 0em rgba(variables.$danger, 0.5), -1.8em -1.8em 0 0em rgba(variables.$danger, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$danger, 0.7), 1.8em -1.8em 0 0em variables.$danger, 2.5em 0em 0 0em rgba(variables.$danger, 0.2), 1.75em 1.75em 0 0em rgba(variables.$danger, 0.2), 0em 2.5em 0 0em rgba(variables.$danger, 0.2), -1.8em 1.8em 0 0em rgba(variables.$danger, 0.2), -2.6em 0em 0 0em rgba(variables.$danger, 0.2), -1.8em -1.8em 0 0em rgba(variables.$danger, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$danger, 0.5), 1.8em -1.8em 0 0em rgba(variables.$danger, 0.7), 2.5em 0em 0 0em variables.$danger, 1.75em 1.75em 0 0em rgba(variables.$danger, 0.2), 0em 2.5em 0 0em rgba(variables.$danger, 0.2), -1.8em 1.8em 0 0em rgba(variables.$danger, 0.2), -2.6em 0em 0 0em rgba(variables.$danger, 0.2), -1.8em -1.8em 0 0em rgba(variables.$danger, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$danger, 0.2), 1.8em -1.8em 0 0em rgba(variables.$danger, 0.5), 2.5em 0em 0 0em rgba(variables.$danger, 0.7), 1.75em 1.75em 0 0em variables.$danger, 0em 2.5em 0 0em rgba(variables.$danger, 0.2), -1.8em 1.8em 0 0em rgba(variables.$danger, 0.2), -2.6em 0em 0 0em rgba(variables.$danger, 0.2), -1.8em -1.8em 0 0em rgba(variables.$danger, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$danger, 0.2), 1.8em -1.8em 0 0em rgba(variables.$danger, 0.2), 2.5em 0em 0 0em rgba(variables.$danger, 0.5), 1.75em 1.75em 0 0em rgba(variables.$danger, 0.7), 0em 2.5em 0 0em variables.$danger, -1.8em 1.8em 0 0em rgba(variables.$danger, 0.2), -2.6em 0em 0 0em rgba(variables.$danger, 0.2), -1.8em -1.8em 0 0em rgba(variables.$danger, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$danger, 0.2), 1.8em -1.8em 0 0em rgba(variables.$danger, 0.2), 2.5em 0em 0 0em rgba(variables.$danger, 0.2), 1.75em 1.75em 0 0em rgba(variables.$danger, 0.5), 0em 2.5em 0 0em rgba(variables.$danger, 0.7), -1.8em 1.8em 0 0em variables.$danger, -2.6em 0em 0 0em rgba(variables.$danger, 0.2), -1.8em -1.8em 0 0em rgba(variables.$danger, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$danger, 0.2), 1.8em -1.8em 0 0em rgba(variables.$danger, 0.2), 2.5em 0em 0 0em rgba(variables.$danger, 0.2), 1.75em 1.75em 0 0em rgba(variables.$danger, 0.2), 0em 2.5em 0 0em rgba(variables.$danger, 0.5), -1.8em 1.8em 0 0em rgba(variables.$danger, 0.7), -2.6em 0em 0 0em variables.$danger, -1.8em -1.8em 0 0em rgba(variables.$danger, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(variables.$danger, 0.2), 1.8em -1.8em 0 0em rgba(variables.$danger, 0.2), 2.5em 0em 0 0em rgba(variables.$danger, 0.2), 1.75em 1.75em 0 0em rgba(variables.$danger, 0.2), 0em 2.5em 0 0em rgba(variables.$danger, 0.2), -1.8em 1.8em 0 0em rgba(variables.$danger, 0.5), -2.6em 0em 0 0em rgba(variables.$danger, 0.7), -1.8em -1.8em 0 0em variables.$danger;
  }
}


@-webkit-keyframes load-light {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}

@keyframes load-light {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}


@-webkit-keyframes load-dark {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 1), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.5), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.7), 1.8em -1.8em 0 0em rgba(0, 0, 0, 1), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.5), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7), 2.5em 0em 0 0em rgba(0, 0, 0, 1), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5), 2.5em 0em 0 0em rgba(0, 0, 0, 0.7), 1.75em 1.75em 0 0em rgba(0, 0, 0, 1), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.5), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.7), 0em 2.5em 0 0em rgba(0, 0, 0, 1), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.5), 0em 2.5em 0 0em rgba(0, 0, 0, 0.7), -1.8em 1.8em 0 0em rgba(0, 0, 0, 1), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.5), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.7), -2.6em 0em 0 0em rgba(0, 0, 0, 1), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.5), -2.6em 0em 0 0em rgba(0, 0, 0, 0.7), -1.8em -1.8em 0 0em rgba(0, 0, 0, 1);
  }
}

@keyframes load-dark {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 1), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.5), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.7), 1.8em -1.8em 0 0em rgba(0, 0, 0, 1), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.5), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7), 2.5em 0em 0 0em rgba(0, 0, 0, 1), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5), 2.5em 0em 0 0em rgba(0, 0, 0, 0.7), 1.75em 1.75em 0 0em rgba(0, 0, 0, 1), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.5), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.7), 0em 2.5em 0 0em rgba(0, 0, 0, 1), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.5), 0em 2.5em 0 0em rgba(0, 0, 0, 0.7), -1.8em 1.8em 0 0em rgba(0, 0, 0, 1), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.5), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.7), -2.6em 0em 0 0em rgba(0, 0, 0, 1), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.5), -2.6em 0em 0 0em rgba(0, 0, 0, 0.7), -1.8em -1.8em 0 0em rgba(0, 0, 0, 1);
  }
}

/************************************** Spinner loader zoom fadeout ************************************/
.spinner-loader-circle-zoom-fadeout {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 7rem;
  margin-top: 3rem;
  margin-bottom: 3rem;
  z-index: 10;

  &:before, &:after {
    content: "";
    position: absolute;
    border-radius: 50%;
    animation: pulsOut 1.8s ease-in-out infinite;
    filter: drop-shadow(0 0 1rem rgba(255, 255, 255, 0.75));
  }

  &:before {
    width: 100%;
    padding-bottom: 100%;
    box-shadow: inset 0 0 0 1rem #fff;
    animation-name: pulsIn;
  }

  &:after {
    width: calc(100% - 2rem);
    padding-bottom: calc(100% - 2rem);
    box-shadow: 0 0 0 0 #fff;
  }

  &.dark {
    &:before, &:after {
      animation: pulsOut-dark 1.8s ease-in-out infinite;
    }

    &:before {
      animation-name: pulsIn-dark;
    }

    &:after {
      width: calc(100% - 2rem);
      padding-bottom: calc(100% - 2rem);
      box-shadow: 0 0 0 0 #000;
    }
  }

  &.primary {
    &:before, &:after {
      animation: pulsOut-primary 1.8s ease-in-out infinite;
    }

    &:before {
      animation-name: pulsIn-primary;
    }

    &:after {
      width: calc(100% - 2rem);
      padding-bottom: calc(100% - 2rem);
      box-shadow: 0 0 0 0 variables.$primary;
    }
  }

  &.secondary {
    &:before, &:after {
      animation: pulsOut-secondary 1.8s ease-in-out infinite;
    }

    &:before {
      animation-name: pulsIn-secondary;
    }

    &:after {
      width: calc(100% - 2rem);
      padding-bottom: calc(100% - 2rem);
      box-shadow: 0 0 0 0 variables.$secondary;
    }
  }

  &.tertiary {
    &:before, &:after {
      animation: pulsOut-tertiary 1.8s ease-in-out infinite;
    }

    &:before {
      animation-name: pulsIn-tertiary;
    }

    &:after {
      width: calc(100% - 2rem);
      padding-bottom: calc(100% - 2rem);
      box-shadow: 0 0 0 0 variables.$tertiary;
    }
  }

  &.success {
    &:before, &:after {
      animation: pulsOut-success 1.8s ease-in-out infinite;
    }

    &:before {
      animation-name: pulsIn-success;
    }

    &:after {
      width: calc(100% - 2rem);
      padding-bottom: calc(100% - 2rem);
      box-shadow: 0 0 0 0 variables.$success;
    }
  }

  &.warning {
    &:before, &:after {
      animation: pulsOut-warning 1.8s ease-in-out infinite;
    }

    &:before {
      animation-name: pulsIn-warning;
    }

    &:after {
      width: calc(100% - 2rem);
      padding-bottom: calc(100% - 2rem);
      box-shadow: 0 0 0 0 variables.$warning;
    }
  }

  &.danger {
    &:before, &:after {
      animation: pulsOut-danger 1.8s ease-in-out infinite;
    }

    &:before {
      animation-name: pulsIn-danger;
    }

    &:after {
      width: calc(100% - 2rem);
      padding-bottom: calc(100% - 2rem);
      box-shadow: 0 0 0 0 variables.$danger;
    }
  }

}

@keyframes pulsIn {
  0% {
    box-shadow: inset 0 0 0 1rem #fff;
    opacity: 1;
  }
  50%, 100% {
    box-shadow: inset 0 0 0 0 #fff;
    opacity: 0;
  }
}

@keyframes pulsOut {
  0%, 50% {
    box-shadow: 0 0 0 0 #fff;
    opacity: 0;
  }
  100% {
    box-shadow: 0 0 0 1rem #fff;
    opacity: 1;
  }
}

@keyframes pulsIn-dark {
  0% {
    box-shadow: inset 0 0 0 1rem #000;
    opacity: 1;
  }
  50%, 100% {
    box-shadow: inset 0 0 0 0 #000;
    opacity: 0;
  }
}

@keyframes pulsOut-dark {
  0%, 50% {
    box-shadow: 0 0 0 0 #000;
    opacity: 0;
  }
  100% {
    box-shadow: 0 0 0 1rem #000;
    opacity: 1;
  }
}

@keyframes pulsIn-primary {
  0% {
    box-shadow: inset 0 0 0 1rem variables.$primary;
    opacity: 1;
  }
  50%, 100% {
    box-shadow: inset 0 0 0 0 variables.$primary;
    opacity: 0;
  }
}

@keyframes pulsOut-primary {
  0%, 50% {
    box-shadow: 0 0 0 0 variables.$primary;
    opacity: 0;
  }
  100% {
    box-shadow: 0 0 0 1rem variables.$primary;
    opacity: 1;
  }
}

@keyframes pulsIn-secondary {
  0% {
    box-shadow: inset 0 0 0 1rem variables.$secondary;
    opacity: 1;
  }
  50%, 100% {
    box-shadow: inset 0 0 0 0 variables.$secondary;
    opacity: 0;
  }
}

@keyframes pulsOut-secondary {
  0%, 50% {
    box-shadow: 0 0 0 0 variables.$secondary;
    opacity: 0;
  }
  100% {
    box-shadow: 0 0 0 1rem variables.$secondary;
    opacity: 1;
  }
}

@keyframes pulsIn-tertiary {
  0% {
    box-shadow: inset 0 0 0 1rem variables.$tertiary;
    opacity: 1;
  }
  50%, 100% {
    box-shadow: inset 0 0 0 0 variables.$tertiary;
    opacity: 0;
  }
}

@keyframes pulsOut-tertiary {
  0%, 50% {
    box-shadow: 0 0 0 0 variables.$tertiary;
    opacity: 0;
  }
  100% {
    box-shadow: 0 0 0 1rem variables.$tertiary;
    opacity: 1;
  }
}

@keyframes pulsIn-success {
  0% {
    box-shadow: inset 0 0 0 1rem variables.$success;
    opacity: 1;
  }
  50%, 100% {
    box-shadow: inset 0 0 0 0 variables.$success;
    opacity: 0;
  }
}

@keyframes pulsOut-success {
  0%, 50% {
    box-shadow: 0 0 0 0 variables.$success;
    opacity: 0;
  }
  100% {
    box-shadow: 0 0 0 1rem variables.$success;
    opacity: 1;
  }
}

@keyframes pulsIn-warning {
  0% {
    box-shadow: inset 0 0 0 1rem variables.$warning;
    opacity: 1;
  }
  50%, 100% {
    box-shadow: inset 0 0 0 0 variables.$warning;
    opacity: 0;
  }
}

@keyframes pulsOut-warning {
  0%, 50% {
    box-shadow: 0 0 0 0 variables.$warning;
    opacity: 0;
  }
  100% {
    box-shadow: 0 0 0 1rem variables.$warning;
    opacity: 1;
  }
}

@keyframes pulsIn-danger {
  0% {
    box-shadow: inset 0 0 0 1rem variables.$danger;
    opacity: 1;
  }
  50%, 100% {
    box-shadow: inset 0 0 0 0 variables.$danger;
    opacity: 0;
  }
}

@keyframes pulsOut-danger {
  0%, 50% {
    box-shadow: 0 0 0 0 variables.$danger;
    opacity: 0;
  }
  100% {
    box-shadow: 0 0 0 1rem variables.$danger;
    opacity: 1;
  }
}

/************************************** Standard spinner Ball on Bar chart ************************************/

.spinner-loader-bar-chart-ball {
  position: relative;
  width: 75px;
  height: 100px;
  background-repeat: no-repeat;
  background-image: linear-gradient(#fff 50px, transparent 0),
  linear-gradient(#fff 50px, transparent 0),
  linear-gradient(#fff 50px, transparent 0),
  linear-gradient(#fff 50px, transparent 0),
  linear-gradient(#fff 50px, transparent 0);
  background-size: 8px 100%;
  background-position: 0px 90px, 15px 78px, 30px 66px, 45px 58px, 60px 50px;
  animation: pillerPushUp 4s linear infinite;
  z-index: 10;

  &:after {
    content: '';
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 10px;
    height: 10px;
    background: #000;
    border-radius: 50%;
    animation: ballStepUp 4s linear infinite;
  }


  &.primary {
    &:after {
      background: variables.$primary;
    }
  }

  &.secondary {
    &:after {
      background: variables.$secondary;
    }
  }

  &.tertiary {
    &:after {
      background: variables.$tertiary;
    }
  }

  &.success {
    &:after {
      background: variables.$success;
    }
  }

  &.warning {
    &:after {
      background: variables.$warning;
    }
  }

  &.danger {
    &:after {
      background: variables.$danger;
    }
  }


}

@keyframes pillerPushUp {
  0%, 40%, 100% {
    background-position: 0px 90px, 15px 78px, 30px 66px, 45px 58px, 60px 50px
  }
  50%, 90% {
    background-position: 0px 50px, 15px 58px, 30px 66px, 45px 78px, 60px 90px
  }
}

@keyframes ballStepUp {
  0% {
    transform: translate(0, 0)
  }
  5% {
    transform: translate(8px, -14px)
  }
  10% {
    transform: translate(15px, -10px)
  }
  17% {
    transform: translate(23px, -24px)
  }
  20% {
    transform: translate(30px, -20px)
  }
  27% {
    transform: translate(38px, -34px)
  }
  30% {
    transform: translate(45px, -30px)
  }
  37% {
    transform: translate(53px, -44px)
  }
  40% {
    transform: translate(60px, -40px)
  }
  50% {
    transform: translate(60px, 0)
  }
  57% {
    transform: translate(53px, -14px)
  }
  60% {
    transform: translate(45px, -10px)
  }
  67% {
    transform: translate(37px, -24px)
  }
  70% {
    transform: translate(30px, -20px)
  }
  77% {
    transform: translate(22px, -34px)
  }
  80% {
    transform: translate(15px, -30px)
  }
  87% {
    transform: translate(7px, -44px)
  }
  90% {
    transform: translate(0, -40px)
  }
  100% {
    transform: translate(0, 0);
  }
}


@keyframes rotate {
  0% {
    transform: rotate(0deg) scale(0.8)
  }
  50% {
    transform: rotate(360deg) scale(1.2)
  }
  100% {
    transform: rotate(720deg) scale(0.8)
  }
}

@keyframes ball1 {
  0% {
    box-shadow: 30px 0 0 variables.$secondary;
  }
  50% {
    box-shadow: 0 0 0 variables.$secondary;
    margin-bottom: 0;
    transform: translate(15px, 15px);
  }
  100% {
    box-shadow: 30px 0 0 variables.$secondary;
    margin-bottom: 10px;
  }
}

@keyframes ball2 {
  0% {
    box-shadow: 30px 0 0 #fff;
  }
  50% {
    box-shadow: 0 0 0 #fff;
    margin-top: -20px;
    transform: translate(15px, 15px);
  }
  100% {
    box-shadow: 30px 0 0 #fff;
    margin-top: 0;
  }
}

/************************************** Spinner Thermometer ************************************/

.spinner-loader-triple-circles {
  width: 6em;
  height: 6em;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  border: 5px solid;
  border-color: #FFF #FFF transparent transparent;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
  z-index: 10;

  &:after,&:before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border: 4px solid;
    border-color: transparent transparent #ffffff #ffffff;
    width: 4em;
    height: 4em;
    border-radius: 50%;
    animation: rotationBack 0.5s linear infinite;
    transform-origin: center center;
  }
  &:before {
    width: 2em;
    height: 2em;
    border-color: #FFF #FFF transparent transparent;
    animation: rotation 1.5s linear infinite;
  }

  &.dark {
    border-color: transparent transparent #000000 #000000;
    &:after,&:before {
      border-color: transparent transparent lighten(#000000,20%) lighten(#000000,20%);
    }
    &:before {
      border-color: lighten(#000000, 40%) lighten(#000000, 40%) transparent transparent;
    }
  }

  &.primary {
    border-color: transparent transparent darken(variables.$primary,30%) darken(variables.$primary,30%);
    &:after,&:before {
      border-color: transparent transparent variables.$primary variables.$primary;
    }
    &:before {
      border-color: lighten(variables.$primary, 20%) lighten(variables.$primary, 20%) transparent transparent;
    }
  }

  &.secondary {
    border-color: transparent transparent darken(variables.$secondary,30%) darken(variables.$secondary,30%);
    &:after,&:before {
      border-color: transparent transparent variables.$secondary variables.$secondary;
    }
    &:before {
      border-color: lighten(variables.$secondary, 20%) lighten(variables.$secondary, 20%) transparent transparent;
    }
  }

  &.tertiary {
    border-color: transparent transparent darken(variables.$tertiary,30%) darken(variables.$tertiary,30%);
    &:after,&:before {
      border-color: transparent transparent variables.$tertiary variables.$tertiary;
    }
    &:before {
      border-color: lighten(variables.$tertiary, 20%) lighten(variables.$tertiary, 20%) transparent transparent;
    }
  }

  &.success {
    border-color: transparent transparent darken(variables.$success,30%) darken(variables.$success,30%);
    &:after,&:before {
      border-color: transparent transparent variables.$success variables.$success;
    }
    &:before {
      border-color: lighten(variables.$success, 20%) lighten(variables.$success, 20%) transparent transparent;
    }
  }

  &.warning {
    border-color: transparent transparent darken(variables.$warning,30%) darken(variables.$warning,30%);
    &:after,&:before {
      border-color: transparent transparent variables.$warning variables.$warning;
    }
    &:before {
      border-color: lighten(variables.$warning, 20%) lighten(variables.$warning, 20%) transparent transparent;
    }
  }

  &.danger {
    border-color: transparent transparent darken(variables.$danger,30%) darken(variables.$danger,30%);
    &:after,&:before {
      border-color: transparent transparent variables.$danger variables.$danger;
    }
    &:before {
      border-color: lighten(variables.$danger, 20%) lighten(variables.$danger, 20%) transparent transparent;
    }
  }

}


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


/************************************** Spinner Cloud ************************************/

.spinner-loader-cloud {
  width: 175px;
  height: 80px;
  display: block;
  margin: auto;
  background-image: radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), radial-gradient(circle 50px at 50px 50px, #FFF 100%, transparent 0), radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), linear-gradient(#FFF 50px, transparent 0);
  background-size: 50px 50px, 100px 76px, 50px 50px, 120px 40px;
  background-position: 0px 30px, 37px 0px, 122px 30px, 25px 40px;
  background-repeat: no-repeat;
  position: relative;
  box-sizing: border-box;
  z-index: 10;
  &:after {
    content: '';
    left: 0;
    right: 0;
    margin: auto;
    bottom: 20px;
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 5px solid;
    border-color: variables.$secondary transparent;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
  }
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


/************************************** Spinner Thermometer ************************************/
.spinner-loader-thermometer {
  width: 20px;
  height: 30px;
  display: block;
  margin: 80px auto 20px;
  border-radius: 50%;
  background: #910000;
  border: 5px solid #FFF;
  position: relative;
  box-sizing: border-box;
  z-index: 10;

  &:before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    width: 15px;
    height: 80px;
    border: 5px solid #FFF;
    border-bottom: none;
    background: #FFF;
    color: #910000;
    border-radius: 50px 50px 0 0;
    box-shadow: 0px 0px inset;
    box-sizing: border-box;
    animation: animloader 6s linear infinite;
  }
}


@keyframes animloader {
  0% {
    box-shadow: 0px 0px  inset;
  }
  100% {
    box-shadow: 0px -80px  inset;
  }
}

/************************************** Spinner Sun ************************************/
.spinner-loader-sun {
  width: 48px;
  height: 48px;
  background: #eb9c00;
  display: block;
  margin: 20px auto;
  position: relative;
  box-sizing: border-box;
  animation: rotationBack 1s ease-in-out infinite reverse;
  z-index: 10;

  &:before {
    content: '';
    box-sizing: border-box;
    left: 0;
    top: 0;
    transform: rotate(45deg);
    position: absolute;
    width: 48px;
    height: 48px;
    background: #eb9c00;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  }
  &:after {
    content: '';
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    background: #FFF;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  }
}

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

/************************************** Spinner hourglass ************************************/

.spinner-loader-hourglass {
  box-sizing: border-box;
  display: inline-block;
  width: 50px;
  height: 80px;
  border-top: 5px solid #000000;
  border-bottom: 5px solid #000000;
  position: relative;
  background: linear-gradient(#ffffff 30px, transparent 0) no-repeat;
  background-size: 2px 40px;
  background-position: 50% 0px;
  animation: spinx 5s linear infinite;
  z-index: 10;

  &:before, &:after {
    content: "";
    width: 40px;
    left: 50%;
    height: 35px;
    position: absolute;
    top: 0;
    transform: translatex(-50%);
    background: rgba(255, 255, 255, 0.4);
    border-radius: 0 0 20px 20px;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: 0 0px;
    animation: lqt 5s linear infinite;
  }
  &:after {
    top: auto;
    bottom: 0;
    border-radius: 20px 20px 0 0;
    animation: lqb 5s linear infinite;
  }

  &.primary {
    border-top: 5px solid variables.$primary;
    border-bottom: 5px solid variables.$primary;
  }

  &.secondary {
    border-top: 5px solid variables.$secondary;
    border-bottom: 5px solid variables.$secondary;
  }

  &.tertiary {
    border-top: 5px solid variables.$tertiary;
    border-bottom: 5px solid variables.$tertiary;
  }

  &.success {
    border-top: 5px solid variables.$success;
    border-bottom: 5px solid variables.$success;
  }

  &.warning {
    border-top: 5px solid variables.$warning;
    border-bottom: 5px solid variables.$warning;
  }

  &.danger {
    border-top: 5px solid variables.$danger;
    border-bottom: 5px solid variables.$danger;
  }



}

@keyframes lqt {
  0%, 100% {
    background-image: linear-gradient(#ffffff 40px, transparent 0);
    background-position: 0% 0px;
  }
  50% {
    background-image: linear-gradient(#ffffff 40px, transparent 0);
    background-position: 0% 40px;
  }
  50.1% {
    background-image: linear-gradient(#ffffff 40px, transparent 0);
    background-position: 0% -40px;
  }
}
@keyframes lqb {
  0% {
    background-image: linear-gradient(#ffffff 40px, transparent 0);
    background-position: 0 40px;
  }
  100% {
    background-image: linear-gradient(#ffffff 40px, transparent 0);
    background-position: 0 -40px;
  }
}
@keyframes spinx {
  0%, 49% {
    transform: rotate(0deg);
    background-position: 50% 36px;
  }
  51%, 98% {
    transform: rotate(180deg);
    background-position: 50% 4px;
  }
  100% {
    transform: rotate(360deg);
    background-position: 50% 36px;
  }
}

/************************************** Spinner moonlight ************************************/

.spinner-loader-moonlight {
  width: 100px;
  height: 100px;
  background: linear-gradient(
                  165deg,
                  rgba(255, 255, 255, 1) 0%,
                  rgb(220, 220, 220) 40%,
                  rgb(170, 170, 170) 98%,
                  rgb(10, 10, 10) 100%
  );
  border-radius: 50%;
  position: relative;
  z-index: 10;
}

.loader:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 100%;
  border-bottom: 0 solid #ffffff05;
  box-shadow: 0 -10px 20px 20px #ffffff40 inset,
  0 -5px 15px 10px #ffffff50 inset, 0 -2px 5px #ffffff80 inset,
  0 -3px 2px #ffffffbb inset, 0 2px 0px #ffffff, 0 2px 3px #ffffff,
  0 5px 5px #ffffff90, 0 10px 15px #ffffff60, 0 10px 20px 20px #ffffff40;
  filter: blur(3px);
  animation: 2s rotate linear infinite;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg)
  }
}


/* ============================================================
   Overlay mode for LoadingEffect
   ============================================================ */

.loading-overlay-active {
  position: relative;
}

.loading-overlay-active::before {
  content: none;
}

.loading-overlay-active > .loader-content {
  z-index: 20;
  pointer-events: none;
}

.loading-overlay-active.position-relative {
  overflow: hidden;
}

#map-loader-overlay {
  background: transparent !important;
  pointer-events: none !important;
}