.loading-container-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999999;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.loader {
  position: relative;
  width: 5em;
  height: 5em;
  -webkit-transform: rotate(165deg);
  -ms-transform: rotate(165deg);
  transform: rotate(165deg);
}

.loader:before,
.loader:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 1em;
  height: 1em;
  border-radius: 0.5em;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.loader:before {
  -webkit-animation: before8 1.5s infinite;
  animation: before8 1.5s infinite;
}

.loader:after {
  -webkit-animation: after6 1.5s infinite;
  animation: after6 1.5s infinite;
}

@-webkit-keyframes before8 {
  0%,
  100% {
    width: 1em;
    box-shadow: 2em -1em rgb(173 0 29 / 75%), -2em 1em rgb(25 35 167 / 75%);
  }
  35% {
    width: 5em;
    box-shadow: 0 -1em rgb(173 0 29 / 75%), 0 1em rgb(25 35 167 / 75%);
  }
  70% {
    width: 1em;
    box-shadow: -2em -1em rgb(173 0 29 / 75%), 2em 1em rgb(25 35 167 / 75%);
  }
}

@keyframes before8 {
  0%,
  100% {
    width: 1em;
    box-shadow: 2em -1em rgb(173 0 29 / 75%), -2em 1em rgb(25 35 167 / 75%);
  }
  35% {
    width: 5em;
    box-shadow: 0 -1em rgb(173 0 29 / 75%), 0 1em rgb(25 35 167 / 75%);
  }
  70% {
    width: 1em;
    box-shadow: -2em -1em rgb(173 0 29 / 75%), 2em 1em rgb(25 35 167 / 75%);
  }
}

@-webkit-keyframes after6 {
  0%,
  100% {
    height: 1em;
    box-shadow: 1em 2em rgb(1 93 0 / 75%), -1em -2em rgba(233, 169, 32, 0.75);
  }
  35% {
    height: 5em;
    box-shadow: 1em 0 rgb(1 93 0 / 75%), -1em 0 rgba(233, 169, 32, 0.75);
  }
  70% {
    height: 1em;
    box-shadow: 1em -2em rgb(1 93 0 / 75%), -1em 2em rgba(233, 169, 32, 0.75);
  }
}

@keyframes after6 {
  0%,
  100% {
    height: 1em;
    box-shadow: 1em 2em rgb(1 93 0 / 75%), -1em -2em rgba(233, 169, 32, 0.75);
  }
  35% {
    height: 5em;
    box-shadow: 1em 0 rgb(1 93 0 / 75%), -1em 0 rgba(233, 169, 32, 0.75);
  }
  70% {
    height: 1em;
    box-shadow: 1em -2em rgb(1 93 0 / 75%), -1em 2em rgba(233, 169, 32, 0.75);
  }
}

.loader {
  position: absolute;
  top: calc(50% - 1.25em);
  left: calc(50% - 1.25em);
}