/* normal css */
    .damia-preloader {
      position: fixed;
      z-index: 2147483647;
      top: 0;
      left: 0;
      height: 100vh;
      width: 100vw;
      background: linear-gradient(to bottom right, #ffffff, #ecf0f3);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      transition: opacity 0.5s ease;
    }
/* HTML: <div class="loader"></div> */
/* HTML: <div class="loader"></div> */
.n_loader {
  height: 40px;
  aspect-ratio: 2.5;
  --_g0: no-repeat radial-gradient(farthest-side,red 90%,#0000);
  --_g1: no-repeat radial-gradient(farthest-side,orange 90%,#0000);
  --_g2: no-repeat radial-gradient(farthest-side,green 90%,#0000);
  --_g: no-repeat radial-gradient(farthest-side,black 90%,#0000);
  background:var(--_g0), var(--_g1), var(--_g2), var(--_g);
  background-size: 20% 50%;
  animation: l43 1s infinite linear; 
  margin-bottom: 3rem;
}
@keyframes l43 {
  0%     {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
  16.67% {background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
  33.33% {background-position: calc(0*100%/3) 100%,calc(1*100%/3) 0   ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
  50%    {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 100%,calc(2*100%/3) 0   ,calc(3*100%/3) 50% }
  66.67% {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 100%,calc(3*100%/3) 0   }
  83.33% {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 100%}
  100%   {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
}
  
/*  */

    .pay_load {
      position: fixed;
      z-index: 2147483647;
      top: 0;
      left: 0;
      height: 100vh;
      width: 100vw;
      background: linear-gradient(to bottom right, #ffffff, #ecf0f3);
      display:none;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      transition: opacity 0.5s ease;
    }

/* HTML: <div class="loader"></div> */
/* HTML: <div class="loader"></div> */
/* HTML: <div class="loader"></div> */
.p_loader {
  margin: 4rem auto;
  --s: 50px;
  height: var(--s);
  aspect-ratio: 2.5;
  --_g: var(--color-success-bg) 90%,#0000;
  --_g0: no-repeat radial-gradient(farthest-side          ,var(--_g));
  --_g1: no-repeat radial-gradient(farthest-side at top   ,var(--_g));
  --_g2: no-repeat radial-gradient(farthest-side at bottom,var(--_g));
  background: var(--_g0), var(--_g1), var(--_g2), var(--_g0), var(--_g1), var(--_g2);
  background-size: 20% 50%,20% 25%,20% 25%;
  animation: l45 1s infinite; 
}
@keyframes l45 {
  0%   {background-position:calc(0*100%/3) 50%,calc(1*100%/3) calc(50% + calc(var(--s)/8)),calc(1*100%/3) calc(50% - calc(var(--s)/8)), calc(3*100%/3) 50%,calc(2*100%/3) calc(50% + calc(var(--s)/8)),calc(2*100%/3) calc(50% - calc(var(--s)/8))}
  33%  {background-position:calc(0*100%/3) 50%,calc(1*100%/3) 100%           ,calc(1*100%/3) 0              , calc(3*100%/3) 50%,calc(2*100%/3) 100%           ,calc(2*100%/3) 0              }
  66%  {background-position:calc(1*100%/3) 50%,calc(0*100%/3) 100%           ,calc(0*100%/3) 0              , calc(2*100%/3) 50%,calc(3*100%/3) 100%           ,calc(3*100%/3) 0              }
  90%,
  100% {background-position:calc(1*100%/3) 50%,calc(0*100%/3) calc(50% + calc(var(--s)/8)),calc(0*100%/3) calc(50% - calc(var(--s)/8)), calc(2*100%/3) 50%,calc(3*100%/3) calc(50% + calc(var(--s)/8)),calc(3*100%/3) calc(50% - calc(var(--s)/8))}
}
    /* end payment loader */



        .wait_load {
      position: fixed;
      z-index: 9999;
      top: 0;
      left: 0;
      height: 100vh;
      width: 100vw;
      background: linear-gradient(to bottom right, #ffffff, #ecf0f3);
      display: none;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      transition: opacity 0.5s ease;
    }
    .w_loader {
  width: 60px;
  height: 60px;
  border: 3px dotted var(--color-success-bg);
  border-style: solid solid dotted dotted;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  animation: rotation 2s linear infinite;
}
.w_loader::after {
  content: '';  
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 3px dotted var(--color-success-bg1);
  border-style: solid solid dotted;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  animation: rotationBack 1s linear infinite;
  transform-origin: center center;
}
    
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 
@keyframes rotationBack {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}