/* Begin grid loading mask */
.grid-wrapper {
  position: relative;
}
.grid-wrapper.loading-block .th-grid-container,
.grid-wrapper.loading-block .td-grid-container {
  opacity: 1;
  transition: 0.3s ease-in-out all;
}
.js .grid-wrapper.loading-block .th-grid-container,
.js .grid-wrapper.loading-block .td-grid-container {
  opacity: 1;
}
/* End grid loading mask */

/* Spinner (f.ex. login page signin) */
.spinner {
  width: 70px;
  text-align: center;
  display: inline-block;
}

.spinner.spinner-xs {
  width: 30px;
}

.spinner > div {
  width: 18px;
  height: 18px;
  background-color: #333;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner.white > div {
  background-color: #fff;
}

.spinner.spinner-xs > div {
  width: 8px;
  height: 8px;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

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

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

/* Begin page-loading mask */
.pageloading-mask,
.zone-spinner {
  background: #fff;
  background: rgba(255, 255, 255, 1);
  opacity: 0.5;
  z-index: 9999;
}

.zone-spinner {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  bottom: 0;
  right: 0;
}

.pageloading-mask div::before,
.zone-spinner div::before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 10px;
  text-indent: -9999em;
}
.pageloading-mask div::before,
.zone-spinner div::before {
  width: 8em;
  height: 8em;
  margin: -5em 0 0 -5em;
  border: 1em solid rgba(0, 0, 0, 0.2);
  border-left: 1em solid #000;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background: 0 0;
  -webkit-animation: page-loading-animation 1.1s infinite linear;
  animation: page-loading-animation 1.1s infinite linear;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.pageloading-mask div {
  background-image: none;
}

@-webkit-keyframes page-loading-animation {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes page-loading-animation {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/* End page-loading mask */

/* the container for the dots */
.loader .loader-horizontal {
  position: relative; /* dots are positioned against the container */
  overflow: hidden; /* dots should not be visible beyond the container */

  /* container styles: feel free to change */
  width: 100%;
  height: 50px;
}

/* the dots */
.loader .loader-horizontal div {
  position: absolute;
  left: -5%; /* at first they are hidden to the left of the container */

  /* -webkit- prefix is required to support Chrome etc. */
  -webkit-animation-name: horizontal-loader; /* the name of the animation */
  animation-name: horizontal-loader;

  -webkit-animation-duration: 3s; /* self-explanatory :) */
  animation-duration: 3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: cubic-bezier(
    0,
    0.67,
    0.99,
    0.34
  ); /* feel free to fine tune the easing */
  animation-timing-function: cubic-bezier(0, 0.67, 0.99, 0.34);
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;

  /* dot styles: feel free to change */
  width: 6px;
  height: 6px;
  background: #333;
  border-radius: 100%;
  top: 20px;
}

/* these delays control the distance between dots */
.loader .loader-horizontal div:nth-child(2) {
  -webkit-animation-delay: 0.08s;
  animation-delay: 0.08s;
}
.loader .loader-horizontal div:nth-child(3) {
  -webkit-animation-delay: 0.16s;
  animation-delay: 0.16s;
}
.loader .loader-horizontal div:nth-child(4) {
  -webkit-animation-delay: 0.24s;
  animation-delay: 0.24s;
}
.loader .loader-horizontal div:nth-child(5) {
  -webkit-animation-delay: 0.32s;
  animation-delay: 0.32s;
}

/* declaration of the animation */
/* the values 10% and 90% (which is just 100%-10%) control the delay between animation loops */
@-webkit-keyframes horizontal-loader {
  10%,
  90.01% {
    left: -5%;
  }
  90% {
    left: 105%;
  }
}

@keyframes horizontal-loader {
  10%,
  90.01% {
    left: -5%;
  }
  90% {
    left: 105%;
  }
}