.loader {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: block;
  margin: 15px auto;
  position: relative;
  color: #272727;
  box-sizing: border-box;
  animation: shadowRolling 2s linear infinite;
}
  
  @keyframes shadowRolling {
    0% {
      box-shadow: 0px 0 currentColor, 0px 0 currentColor, 0px 0 currentColor, 0px 0 currentColor;
    }
    12% {
      box-shadow: 100px 0 currentColor, 0px 0 transparent, 0px 0 transparent, 0px 0 transparent;
    }
    25% {
      box-shadow: 110px 0 currentColor, 100px 0 currentColor, 0px 0 transparent, 0px 0 transparent;
    }
    36% {
      box-shadow: 120px 0 currentColor, 110px 0 currentColor, 100px 0 currentColor, 0px 0 transparent;
    }
    50% {
      box-shadow: 130px 0 currentColor, 120px 0 currentColor, 110px 0 currentColor, 100px 0 currentColor;
    }
    62% {
      box-shadow: 200px 0 transparent, 130px 0 currentColor, 120px 0 currentColor, 110px 0 currentColor;
    }
    75% {
      box-shadow: 200px 0 transparent, 200px 0 transparent, 130px 0 currentColor, 120px 0 currentColor;
    }
    87% {
      box-shadow: 200px 0 transparent, 200px 0 transparent, 200px 0 transparent, 130px 0 currentColor;
    }
    100% {
      box-shadow: 200px 0 transparent, 200px 0 transparent, 200px 0 transparent, 200px 0 transparent;
    }
  }



  /* HTML: <div class="loader"></div> */
.loadersearch {
  display: block;
  margin: 36px auto;
  border-radius: 10px;
  height: 4px;
  width: 90%;
  --c:no-repeat linear-gradient(var(--color-primary-front));
  background: var(--c),var(--c),var(--color-light);
  background-size: 60% 100%;
  animation: l16 3s infinite;
}
@keyframes l16 {
  0%   {background-position:-150% 0,-150% 0}
  66%  {background-position: 250% 0,-150% 0}
  100% {background-position: 250% 0, 250% 0}
}

/* HTML: <div class="loader"></div> */
.loader-default{
  display: block;
  margin: 0px auto;
  border-radius: 10px;
  height: 10px;
  width: 350px;
  --c: no-repeat linear-gradient(var(--color-primary-front));
  background: var(--c), var(--c), var(--color-neutral-300);
  background-size: 60% 100%;
  animation: l16 3s infinite;
}
@keyframes l16 {
  0%   {background-position:-150% 0,-150% 0}
  66%  {background-position: 250% 0,-150% 0}
  100% {background-position: 250% 0, 250% 0}
}

/* 
.gallery-scroll::-webkit-scrollbar {
  width:10px;
}

.gallery-scroll::-webkit-scrollbar-track {
  background:rgb(255, 0, 0);
}

.gallery-scroll::-webkit-scrollbar-thumb {
  background:rgb(255, 251, 0);
  border-radius:20px;
}

*/

.gallery-scroll::-webkit-scrollbar {
  width:10px !important;
}

/*track*/
.gallery-scroll::-webkit-scrollbar-track {
  background:var(--color-light);
}

/*thumb*/
.gallery-scroll::-webkit-scrollbar-thumb {
  background:var(--color-primary-front);
}

/*track*/
.dark .gallery-scroll::-webkit-scrollbar-track {
  background:var(--color-dark-3);
}

/*thumb*/
.dark .gallery-scroll::-webkit-scrollbar-thumb {
  background:var(--color-primary-front);
}

.ck-popup-height .ck-editor__editable {
  min-height: 150px;   /* visina editora */
  max-height: 200px;   /* opcionalno */
  overflow-y: auto;
}

.ck.ck-content.ck-editor__editable {
  min-height: 200px;
}

.loader-product{
  display: block;
  position: relative;
  height: 20px;
  width: 140px;
  background-image: 
  linear-gradient(#FFF 20px, transparent 0), 
  linear-gradient(#FFF 20px, transparent 0), 
  linear-gradient(#FFF 20px, transparent 0), 
  linear-gradient(#FFF 20px, transparent 0);
  background-repeat: no-repeat;
  background-size: 20px auto;
  background-position: 0 0, 40px 0, 80px 0, 120px 0;
  animation: pgfill 1s linear infinite;
}

@keyframes pgfill {
  0% {   background-image: linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0); }
  25% {   background-image: linear-gradient( var(--color-primary-front) 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0); }
  50% {   background-image: linear-gradient(var(--color-primary-front) 20px, transparent 0), linear-gradient(var(--color-primary-front) 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0); }
  75% {   background-image: linear-gradient(var(--color-primary-front) 20px, transparent 0), linear-gradient(var(--color-primary-front) 20px, transparent 0), linear-gradient(var(--color-primary-front) 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0); }
  100% {   background-image: linear-gradient(var(--color-primary-front) 20px, transparent 0), linear-gradient(var(--color-primary-front) 20px, transparent 0), linear-gradient(var(--color-primary-front) 20px, transparent 0), linear-gradient(var(--color-primary-front) 20px, transparent 0); }
}

.popularSwiper {
  overflow: visible !important;
}

.popularSwiper .swiper-wrapper {
  overflow: visible !important;
}

.popularSwiper .swiper-slide {
  overflow: visible !important;
}
.hero-prev, .hero-next {
  color: white; /* ili šta god */
}
.heroSwiper .swiper-pagination-bullet {
  background: white !important;
}

.heroSwiper .swiper-pagination-bullet-active {
  background: white !important;
}
/* Osnovni bullets – svetlija bela */
.heroSwiper .swiper-pagination-bullet {
  width: 18px !important;
  height: 4px !important;
  border-radius: 9999px !important;
  background: rgb(255 255 255) !important; /* svetlija bela */
  transition: all 0.2s ease;
}

/* Aktivni bullet – čisto bela i malo duži */
.heroSwiper .swiper-pagination-bullet-active {
  background: white !important;
  width: 24px !important;
}
.ck.ck-balloon-panel.ck-powered-by-balloon[class*=position_border]{
  display: none !important;
}