@CHARSET "ISO-8859-1";

/* Display triggers */
.ajax-spinner-preview .ajax-spinner,
.ajax-simple-loader-preview .ajax-simple-overlay {
	display: block;
}

/* --- SIMPLE LOADER START --- */
/* Simple Loader Specific Overlay override (if you want fixed positioning) */
.ajax-simple-overlay {
  position: fixed; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.2); 
  z-index: 10001;
  display: none; 
}

.ajax-simple-loader {
    width: 72px;
    height: 72px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -36px;
    margin-left: -36px;
    z-index: 10001;
}

.ajax-simple-loader::before, 
.ajax-simple-loader::after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    border-radius: 50%;
    border: 4px solid transparent; 
}

/* Outer Blue Ring */
.ajax-simple-loader::before {
    inset: 0px;
    border-top-color: #2563EB;
    border-right-color: #2563EB;
    animation: fluidRotate 1.2s linear infinite;
}

/* Inner White Ring */
.ajax-simple-loader::after {
    inset: 6px;
    border-bottom-color: #FFFFFF;
    border-left-color: #FFFFFF;
    animation: fluidRotate 0.8s linear infinite reverse;
}

@keyframes fluidRotate {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* --- SIMPLE LOADER END --- */

/* Ultra-Minimal Close Button */
#close-preview-btn-div span {
	display: none;
	position: absolute;
	z-index: 10003;
    top: 16px;
    right: 16px;
    font-size: 28px;
    color: black;
	cursor: pointer;
    border: none;
    background: transparent;
    border-radius: 50%;
    height: 40px;
    width: 40px;
    font-weight: 300;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    line-height: 40px;
    text-align: center;
}

#close-preview-btn-div span:after {
	content: "\00D7";
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#close-preview-btn-div span:hover {
    color: #0F172A;
    background: rgba(0, 0, 0, 0.04);
}

/* Hairline Circular Spinner */
/* Premium Deep Frosted Glass Overlays */
.ajax-spinner {
	position: absolute;
	top: 0px;
	left: 0px;
    height: 100%;
    width: 100%;
	z-index: 10001;
    background-color: rgba(241, 245, 249, 0.4); 
    display: none;
}

.ajax-spinner .spinner {
	position: absolute;
	display: block;
    top: calc(50% - 60px);
    left: calc(50% - 60px);
	z-index: 15;
    border: 2px solid rgba(15, 23, 42, 0.08);
    border-top: 2px solid #0F172A;
	border-radius: 50%;
	width: 120px;
	height: 120px;
    background-color: #FFFFFF; 
    box-shadow: 0 12px 40px rgba(30, 64, 175, 0.20), 0 4px 15px rgba(30, 64, 175, 0.10);
    animation: borderSpin 0.8s cubic-bezier(0.6, 0.2, 0.4, 0.8) infinite;
}

.ajax-spinner .spinner-img-container {
	width: 120px;
	height: 120px;
	position: absolute;
    top: calc(50% - 60px);
    left: calc(50% - 60px);
	z-index: 16;
	display: block;
}

.ajax-spinner .spinner-img-1 { height: 56px; width: 70px; position: absolute; left: calc(50% - 35px); top: calc(35% - 30px); }
.ajax-spinner .spinner-img-2 { height: 26px; width: auto; position: absolute; top: 60%; left: 13px; }
.ajax-spinner .spinner-img { top: 37%; left: 16px; position: absolute; width: auto; height: 26px; }

/* Elegant, Whispering Animated Bars */
.spinner-animated-bar {
	display: inline-block;
	position: absolute;
    width: 70px;
	height: 20px;
    bottom: 25px;
    left: 14px;
}

.spinner-animated-bar div {
	display: inline-block;
	position: absolute;
    bottom: 0;
    width: 3px;
    height: 20px;
    border-radius: 4px;
    background: #0F172A;
    transform-origin: bottom;
    animation: smooth-bar-wave 1.1s ease-in-out infinite; 
}

/* Kept your original spacing, but applied the new animation timing */
.spinner-animated-bar div:nth-child(1) { left: 20px; animation-delay: -0.60s; }
.spinner-animated-bar div:nth-child(2) { left: 30px; animation-delay: -0.48s; }
.spinner-animated-bar div:nth-child(3) { left: 40px; animation-delay: -0.36s; }
.spinner-animated-bar div:nth-child(4) { left: 50px; animation-delay: -0.24s; }
.spinner-animated-bar div:nth-child(5) { left: 60px; animation-delay: -0.12s; }
.spinner-animated-bar div:nth-child(6) { left: 70px; animation-delay: 0s; }
 
@keyframes borderSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Hardware-accelerated smooth wave animation */
@keyframes smooth-bar-wave {
    0%, 100% { 
        transform: scaleY(0.2); /* Shrinks to 20% height */
        background: #94A3B8; /* Lighter color when small */
    }
    50% { 
        transform: scaleY(1); /* Grows to 100% height */
        background: #0F172A; /* Darker color when tall */
}
}
/* Tiny, precise Datatable Spinner */
.datatable-spinner {
	background: transparent;
    width: 35px;
    height: 35px;
	border-radius: 50%;
    border: 4px solid rgba(15, 23, 42, 0.1);
    border-top: 4px solid #0F172A;
    animation: borderSpin 0.6s linear infinite;
	position: relative;
	left: 50%;
	z-index:10;
}