.loader{justify-content:center;align-items:center;gap:6px;display:none;text-align:center;padding:$spacing-xl 0;span{width:8px;height:8px;border-radius:50%;background-color:#000;// Customize this color if needed animation:dot-bounce .6s infinite ease-in-out alternate;display:inline-block;&:nth-child(2){animation-delay:.2s}
&:nth-child(3){animation-delay:.4s}
}
}
@keyframes dot-bounce{from{transform:translateY(0);opacity:.5}
to{transform:translateY(-8px);opacity:1}
}
#loader-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(101,112,124,0.60);backdrop-filter:blur(6px);z-index:1050;display:flex;align-items:center;justify-content:center;transition:opacity .3s ease,visibility .3s ease;opacity:1;visibility:visible}
#loader-overlay.d-none{opacity:0;visibility:hidden;pointer-events:none}
#loader-overlay .text-center{background-color:#fff;box-shadow:0 20px 24px -4px rgba(32,32,34,0.10),0 8px 8px -4px rgba(0,0,0,0.06);text-align:center}
#loader-overlay .loader-gif{margin-bottom:$spacing-2xl;animation:fadeIn .4s ease;max-width:256px;max-height:117px;width:100%;height:100%}
#loader-overlay .loader-message{animation:fadeIn .6s ease;width:312px;@include media-breakpoint-down(md){width:100%}
}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}
to{opacity:1;transform:translateY(0)}
}
.py-5xl{padding-top:2rem;padding-bottom:2rem}
@media(min-width:992px){.py-5xl{padding-top:3.5rem;padding-bottom:3.5rem}
}
.px-5xl{padding-left:2rem;padding-right:2rem}
@media(min-width:992px){.px-5xl{padding-left:3.5rem;padding-right:3.5rem}
}
.item-rounded{border-radius:1rem}
@media(min-width:992px){.item-rounded{border-radius:1.5rem}
}
.search-spinner{position:absolute;top:50%;right:.75rem;transform:translateY(-50%);gap:3px;pointer-events:none;display:none;&.search-spinner--active{display:none;align-items:center}
span{display:block;width:6px;height:6px;border-radius:50%;background:var(--primary-default);animation:spinner-bounce 1s infinite ease-in-out;&:nth-child(2){animation-delay:.15s}
&:nth-child(3){animation-delay:.3s}
}
}
@keyframes spinner-bounce{0,80%,100%{transform:scale(0.6);opacity:.4}
40%{transform:scale(1);opacity:1}
}