@import url('theme-variables.css');

.pace {
    -webkit-pointer-events: none;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.pace .pace-progress {
    background: -webkit-gradient(linear, left top, right top, color-stop(20%, var(--theme-design-primary-color)), color-stop(40%, #2ab57d), color-stop(60%, #4ba6ef), color-stop(80%, var(--theme-design-primary-color)), to(var(--theme-design-dark-color)));
    background: linear-gradient(to right, var(--theme-design-primary-color) 20%, #2ab57d 40%, #4ba6ef 60%, #ffbf53 80%, var(--theme-design-dark-color) 100%);
    position: fixed;
    z-index: 2000;
    top: 0;
    right: 100%;
    width: 100%;
    height: 3px
}

.pace-inactive .pace-progress {
    display: none
}

.pace .pace-activity {
    display: block;
    position: fixed;
    z-index: 2000;
    top: 0;
    right: 0;
    width: 150px;
    height: 150px;
    background: var(--theme-design-primary-color);
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
    -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg);
    transform: translateX(100%) translateY(-100%) rotate(45deg);
    pointer-events: none
}

.pace.pace-active .pace-activity {
    -webkit-transform: translateX(50%) translateY(-50%) rotate(45deg);
    transform: translateX(50%) translateY(-50%) rotate(45deg)
}

.pace .pace-activity::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    content: '';
    position: absolute;
    display: block;
    bottom: 18px;
    left: 65px;
    width: 20px;
    height: 20px;
    border: solid 2px transparent;
    border-top-color: #fff;
    border-left-color: #fff;
    border-radius: 50%;
    -webkit-animation: pace-spinner .4s linear infinite;
    animation: pace-spinner .4s linear infinite
}

@-webkit-keyframes pace-spinner {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes pace-spinner {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

/*# sourceMappingURL=preloader.min.css.map */



@keyframes pace-spinner-blink {
    0% {
        /* opacity: 1; */
        transform: rotateY(0deg);
    }

    50% {
        /* opacity: 0; */
        transform: rotateY(180deg);
    }

    100% {
        /* opacity: 1; */
        transform: rotateY(360deg);
    }
}

.pace.pace-active .pace-activity {
    transform: unset;
    width: 100% !important;
    height: 100vh !important;
    background-color: #22222280 !important;
    opacity: 1;
}

.pace .pace-activity {
    width: 100% !important;
    height: 100vh !important;
    background-color: #2222229a !important;
    transform: unset;
    transition: opacity 0.5s ease;
    opacity: 0;
}

/* .pace .pace-activity::after{

    left: 50% !important;
    top: 45% !important; 
    width: 50px;
    height: 50px;
    border-radius: 0;
    padding: 10px;
    content: '';
    border:0;
    border-radius: 50% 50%;
    border: 5px solid #fff;
    border-top: 5px solid #ffffff00;
    transform-origin: center;
}

@media (max-width: 992px){
    .pace .pace-activity::after{
        width: 50px;
        height: 50px;
        left: 45% !important; 
    }
    
} */


/* HTML: <div class="loader"></div> */
/* .pace .pace-activity::after {
    content: '';
    left: 50%;
    top: 50%;
    
    border: 0;
    border-radius: 0;

    --c:no-repeat linear-gradient(var(--theme-design-primary-color) 0 0);
    background: 
      var(--c),var(--c),var(--c),
      var(--c),var(--c),var(--c),
      var(--c),var(--c),var(--c);
    background-size: 16px 16px;
    animation: 
      l32-1 0.7s infinite,
      l32-2 0.7s infinite;
      background-position: center;
  }
  @keyframes l32-1 {
    0%,100% {width:45px;height: 45px}
    35%,65% {width:65px;height: 65px; left: 49%; top: 49%;}
  }
  @keyframes l32-2 {
    0%,40%  {background-position: 0 0,0 50%, 0 100%,50% 100%,100% 100%,100% 50%,100% 0,50% 0,  50% 50% }
    60%,100%{background-position: 0 50%, 0 100%,50% 100%,100% 100%,100% 50%,100% 0,50% 0,0 0,  50% 50% }
  } */
.pace .pace-activity::after {
    content: '';
    left: 50%;
    top: 50%;

    border: 0;
    border-radius: 0;

    width: 50px;
    height: 50px;
    --b: 8px;
    /* aspect-ratio: 1; */
    border-radius: 50%;
    padding: 1px;
    background: conic-gradient(#0000 10%, var(--theme-design-primary-color)) content-box;
    /* -webkit-mask: repeating-conic-gradient(#0000 0deg,#000 1deg 20deg,#0000 21deg 36deg),
      radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b)));*/
    -webkit-mask: repeating-conic-gradient(#0000 0deg, #000 0deg 244deg, #0000 0deg 36deg),
          radial-gradient(farthest-side, #0000 calc(100% - var(--b) - 1px), #000 calc(100% - var(--b)));
    -webkit-mask-composite: destination-in;
    mask-composite: intersect; 

    /* animation:l4 1s infinite steps(10); */
}

@keyframes l4 {
    to {
        transform: rotate(1turn)
    }
}

body:has(> .pace.pace-active) {
    pointer-events: none;
}