/*
 * Startup screen, shown by each app's index.html until the first route is ready. It loads before
 * the app's CSS, so the values are literal copies of the tokens in src/base/styles/overrides.css:
 * the .app-backdrop navy (--shell-bg #0b163f) with the primary (--brand-blue #175cff) glow, so the
 * screen hands over to the app frame or the SSO page without a white flash. The logo is the white
 * file (logo-white.svg) rather than a filter, which renders blurred on 1x screens.
 */
#loadingScreen {
	position: absolute;
	width: 100vw;
	height: 100vh;
	background:
		radial-gradient(ellipse 760px 540px at 0 0, rgba(23, 92, 255, 0.55) 0%, rgba(23, 92, 255, 0.2) 45%, transparent 100%),
		#0b163f;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	z-index: 9999;
	top: 0;
	left: 0;
	padding: 0;
	margin: 0;
}

.linear-progress-material {
	background: rgba(255, 255, 255, 0.15);
	height: 4px;
	position: relative;
	width: 252px;
	margin: 0 auto;
	margin-top: 2rem;
	overflow: hidden;
	-webkit-animation: start 0.3s ease-in;
	animation: start 0.3s ease-in;
}

.linear-progress-material .bar {
	position: absolute;
	background: #175cff;
	transition: transform 0.2s linear;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 100%;
}
.linear-progress-material .bar1 {
	-webkit-animation: growBar1 2.5s infinite, moveBar1 2.5s infinite;
	animation: growBar1 2.5s infinite, moveBar1 2.5s infinite;
}

.hideLoader {
	animation: fadeout 0.5s;
}

@keyframes growBar1 {
	0% {
		-webkit-animation-timing-function: linear;
		animation-timing-function: linear;
		transform: scaleX(0.1);
	}
	36.6% {
		-webkit-animation-timing-function: cubic-bezier(0.33473, 0.12482, 0.78584, 1);
		animation-timing-function: cubic-bezier(0.33473, 0.12482, 0.78584, 1);
		transform: scaleX(0.1);
	}
	69.15% {
		-webkit-animation-timing-function: cubic-bezier(0.22573, 0, 0.23365, 1.37098);
		animation-timing-function: cubic-bezier(0.22573, 0, 0.23365, 1.37098);
		transform: scaleX(0.83);
	}
	100% {
		transform: scaleX(0.1);
	}
}

@keyframes moveBar1 {
	0% {
		left: -105.16667%;
		-webkit-animation-timing-function: linear;
		animation-timing-function: linear;
	}
	20% {
		left: -105.16667%;
		-webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582);
		animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582);
	}
	69.15% {
		left: 21.5%;
		-webkit-animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635);
		animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635);
	}
	100% {
		left: 95.44444%;
	}
}

@keyframes fadeout {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}