/**************** SIDS DIY LOADER *************/

app-root:empty + .pre-loader {
  display: block;
}

.pre-loader {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.95);
}

.loader,
.loader:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}

.loader {
  font-size: 6px;
  text-indent: -9999em;
  border: 1.1em solid rgba(185, 184, 188, 0.2);
  border-left-color: rgba(48, 50, 56, 0.2);
  -webkit-animation: load 1.1s infinite linear;
  animation: load 1.1s infinite linear;
  top: 45%;
  margin: 0 auto;
  transform: translate(-50%, -50%);
  position: relative;
}

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

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

.cssload-loading {
  position: relative;
  width: 20px;
  height: 20px;
  background: #e71e2d;
  display: block;
  margin: 18px auto;
  animation: 1.15s cssload-spin infinite;
  -o-animation: 1.15s cssload-spin infinite;
  -ms-animation: 1.15s cssload-spin infinite;
  -webkit-animation: 1.15s cssload-spin infinite;
  -moz-animation: 1.15s cssload-spin infinite;
}

.cssload-loading::before, .cssload-loading::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  animation: 0.58s infinite alternate linear
}

.cssload-loading::before {
  background: rgb(77, 77, 77);
  -o-animation: 0.58s infinite alternate linear
}

.cssload-loading::before {
  background: rgb(77, 77, 77);
  -ms-animation: 0.58s infinite alternate linear
}

.cssload-loading::before {
  background: rgb(77, 77, 77);
  -webkit-animation: 0.58s infinite alternate linear
}

.cssload-loading::before {
  background: rgb(77, 77, 77);
  -moz-animation: 0.58s infinite alternate linear
}

.cssload-loading::before {
  background: rgb(77, 77, 77);
  animation-name: cssload-blur1;
  -o-animation-name: cssload-blur1;
  -ms-animation-name: cssload-blur1;
  -webkit-animation-name: cssload-blur1;
  -moz-animation-name: cssload-blur1;
}

.cssload-loading::after {
  background: rgb(255, 255, 255);
  animation-name: cssload-blur2;
  -o-animation-name: cssload-blur2;
  -ms-animation-name: cssload-blur2;
  -webkit-animation-name: cssload-blur2;
  -moz-animation-name: cssload-blur2;
}

@keyframes cssload-spin {
  to {
    transform: rotate(360deg);
  }
}

@-o-keyframes cssload-spin {
  to {
    -o-transform: rotate(360deg);
  }
}

@-ms-keyframes cssload-spin {
  to {
    -ms-transform: rotate(360deg);
  }
}

@-webkit-keyframes cssload-spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}

@-moz-keyframes cssload-spin {
  to {
    -moz-transform: rotate(360deg);
  }
}

@keyframes cssload-blur1 {
  to {
    transform: rotate(-30deg);
  }
}

@-o-keyframes cssload-blur1 {
  to {
    -o-transform: rotate(-30deg);
  }
}

@-ms-keyframes cssload-blur1 {
  to {
    -ms-transform: rotate(-30deg);
  }
}

@-webkit-keyframes cssload-blur1 {
  to {
    -webkit-transform: rotate(-30deg);
  }
}

@-moz-keyframes cssload-blur1 {
  to {
    -moz-transform: rotate(-30deg);
  }
}

@keyframes cssload-blur2 {
  to {
    transform: rotate(-15deg);
  }
}

@-o-keyframes cssload-blur2 {
  to {
    -o-transform: rotate(-15deg);
  }
}

@-ms-keyframes cssload-blur2 {
  to {
    -ms-transform: rotate(-15deg);
  }
}

@-webkit-keyframes cssload-blur2 {
  to {
    -webkit-transform: rotate(-15deg);
  }
}

@-moz-keyframes cssload-blur2 {
  to {
    -moz-transform: rotate(-15deg);
  }
}

/*end busy loader */