.loading-wrap {
  background-color: #ffffff;
  opacity: 1;
  background-image:  repeating-linear-gradient(to right, transparent 0, transparent 2px, #ffffff 2px, #ffffff 6px, transparent 6px, transparent 8px), repeating-linear-gradient(to bottom, transparent 0, transparent 2px, #ffffff 2px, #ffffff 6px, transparent 6px, transparent 8px), linear-gradient(to bottom, #f3f3f3 0.72px, transparent 0.72px), linear-gradient(to right, #f3f3f3 0.72px, transparent 0.72px) ;
  background-size: 100% 100%, 100% 100%, 24px 24px, 24px 24px;
  background-position: 0 0, 0 0, 0 -0.24px, -0.24px 0;

  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

/*region*/
.logo{
  width: 64px;
  height: 64px;
  object-fit: contain;
}

/*endregion ----------------*/
.loader2 {
  --color-1: #6b7280;
  --size: 1px;
  font-size: calc(18 * var(--size));
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  display: inline-block;
  letter-spacing: calc(2 * var(--size));
  color: var(--color-1);
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 30%,
    #000 70%,
    transparent 100%
  );
  mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  -webkit-mask-size: 250% 100%;
  mask-size: 250% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  box-sizing: border-box;
  animation: animloader2 2s linear infinite;
}

@keyframes animloader2 {
  0% {
    -webkit-mask-position: 150% 0;
    mask-position: 150% 0;
  }
  100% {
    -webkit-mask-position: -150% 0;
    mask-position: -150% 0;
  }
}