:root {
	--c-var-window_width						:0px;
	--c-var-window_height						:0px;
	--c-var-main_content_width					:0px;
	--c-var-main_content_height					:0px;
	--c-var-loader_inside_color					: #6e9fee;
	--c-var-loader_outside_color				: #5365d7;
	
	/* dynamic content */
	--c-var-dynamic-content-size: 56px;
	--c-var-dynamic-content-speed: 1s;
	--c-var-dynamic-content-accent: #6aa6ff;
	--c-var-dynamic-content-accent-2: #9b6bff;
	--c-var-dynamic-content-bg-rgb: 255 255 255; /* R G B */
	--c-var-dynamic-content-pointer-events: none; /* auto = block clicks */
}

.--c-dynamic-content,
.--c-ajax-loading {
	position: relative; /* anchor overlay */
}

/* Backdrop (dim/blur) */
.--c-dynamic-content.is-loading::before,
.--c-ajax-loading::before {
	content: "";
	position: absolute;
	z-index:8;
	inset: 0;
	background:
		radial-gradient(900px 300px at 20% -20%,
			color-mix(in srgb,
				var(--c-var-dynamic-content-accent) 40%, transparent) 14%,
			transparent 60%),
		radial-gradient(900px 300px at 120% 120%,
			color-mix(in srgb,
				var(--c-var-dynamic-content-accent-2) 40%, transparent) 14%,
			transparent 60%),
		rgba(var(--c-var-dynamic-content-bg-rgb)/.6);
	backdrop-filter: blur(1px) saturate(120%);
	-webkit-backdrop-filter: blur(1px) saturate(120%);
	pointer-events: var(--c-var-dynamic-content-pointer-events);
}

/* Centered spinner ring */
.--c-dynamic-content.is-loading::after,
.--c-ajax-loading::after {
	content: "";
	position: absolute;
	z-index:9;
	top: 2%;
	left: 50%;
	width: var(--c-var-dynamic-content-size);
	height: var(--c-var-dynamic-content-size);
	transform: translate(-50%, -50%);
	border-radius: 999px;
	background:
		conic-gradient(from 0turn,
			var(--c-var-dynamic-content-accent),
			var(--c-var-dynamic-content-accent-2),
			var(--c-var-dynamic-content-accent));
	/* make it a ring */
	-webkit-mask:
		radial-gradient(farthest-side,#0000 60%,#000 61%);
	mask:
		radial-gradient(farthest-side,#0000 60%,#000 61%);
	filter: drop-shadow(0 4px 10px rgba(0,0,0,.12));
	animation: cdc-spin var(--c-var-dynamic-content-speed) linear infinite;
	pointer-events: var(--c-var-dynamic-content-pointer-events);
}

@keyframes cdc-spin{
	to{ transform: translate(-50%,-50%) rotate(1turn); }
}

.--c-modal_ajax_loader,
.--c-modal_iframe_loader								{position: relative;height:100%;display: flex;align-items: center;justify-content: center;}
.--c-content_loading_animation							{
	width: 48px;
	height: 48px;
	border: 5px solid var(--c-var-loader_outside_color);
	border-radius: 50%;
	display: inline-block;
	box-sizing: border-box;
	position: relative;
	animation: --c-content_loading_pulse 1s linear infinite;
}
.--c-content_loading_animation:after {
	content: '';
	position: absolute;
	width: 48px;
	height: 48px;
	border: 5px solid var(--c-var-loader_inside_color);
	border-radius: 50%;
	display: inline-block;
	box-sizing: border-box;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	animation: --c-content_loading_scaleUp 1s linear infinite;
}
@keyframes --c-content_loading_scaleUp {
  0% { transform: translate(-50%, -50%) scale(0) }
  60% , 100% { transform: translate(-50%, -50%)  scale(1)}
}
@keyframes --c-content_loading_pulse {
  0% , 60% , 100%{ transform:  scale(1) }
  80% { transform:  scale(1.2)}
}