﻿
html,
body,
#reactDiv {
	height: 100%;
}

:root {
	--loader-width: 70px;
	--loader-height: 70px;
	--line-width: 3px;
	--animation-duration: 2s;
	--loader-initial-scale: 0.1;
}

.center-container {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%
}

.container-margin {
	margin-left: 20px;
	margin-top: 0;
	margin-bottom: 0.5rem;
	color: rgb(156,159,164);
	font-size: 1.75rem;
	font-weight: 500;
	line-height: 1.2;
	font-family: 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}


@keyframes momentum {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(-360deg);
	}
}

.loading-spinner,
.loading-spinner:before,
.loading-spinner:after {
	box-sizing: border-box;
	flex-grow: 0;
	flex-shrink: 0;
}

.loading-spinner {
	--primary-circle-offset: calc(((var(--loader-width,100px) * 0.2) / 2) - var(--line-width,4px));
	--secondary-circle-offset: calc(((var(--loader-width,100px) * 0.4) / 2) - var(--line-width,4px)); /*- (var(--line-width,4px) * 2)*/
	position: relative;
	width: var(--loader-width, 100px);
	height: var(--loader-height, 100px);
	transform-origin: center center;
	border-radius: 50%;
	border: var(--line-width, 4px) solid rgba(0,0,0,0);
	border-top-color: rgb(79,120,166); /*Color 1*/
	animation: momentum var(--animation-duration, 1s) linear infinite;
}

	.loading-spinner:before {
		content: "";
		position: absolute;
		transform-origin: center center;
		top: var(--primary-circle-offset,10px);
		left: var(--primary-circle-offset,10px);
		width: calc(var(--loader-width,100px) * 0.8);
		height: calc(var(--loader-height,100px) * 0.8);
		border-radius: 50%;
		border: var(--line-width,4px) solid rgba(0,0,0,0);
		border-top-color: rgb(234,162,37); /*Color 2*/
		opacity: 0.7;
		filter: hue-rotate(3eg);
		animation: momentum calc(var(--animation-duration, 1s) * 2) linear infinite;
	}

	.loading-spinner:after {
		content: "";
		position: absolute;
		top: var(--secondary-circle-offset,20px);
		left: var(--secondary-circle-offset,20px);
		width: calc(var(--loader-width,100px) * 0.6);
		height: calc(var(--loader-height,100px) * 0.6);
		border-radius: 50%;
		transform-origin: center center;
		border: var(--line-width,4px) solid rgba(0,0,0,0);
		border-top-color: rgb(156,159,164); /*Color 3*/
		opacity: 0.3;
		filter: hue-rotate(6eg);
		animation: momentum var(--animation-duration, 1s) linear infinite;
	}
