/*
 * Style of the loader displayed before the app initialization.
 * To be removed once a clean solution is implemented.
 * */

.loader-container {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 158.3904px;
	height: 102.4px;
	width: 100%;
	height: 100%;
}

.loader-container .loader {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 158.3904px;
	height: 102.4px;
}

.loader-container .loader::after {
	height: 4.8px;
	width: 11.2px;
	content: '';
	display: block;
	position: absolute;
	top: auto;
	bottom: 0;
	left: 0;
	border-radius: 50%;
	background-color: #666;
	opacity: 0.3;
	animation: shadow-l 1.5s infinite linear;
}

.roller {
	position: absolute;
	animation: rollercoaster 1.5s infinite linear;
	transform: rotate(135deg);

	width: 64px;
	height: 64px;
	top: 13.2544px;
	left: 13.2544px;
}

.roller:last-child {
	left: auto;
	right: 13.2544px;

	transform: rotate(-45deg);
	animation: rollercoaster-last 1.5s infinite linear;
}

.roller::before {
	content: '';
	display: block;
	background: black;
	border-radius: 50%;
	width: 16px;
	height: 16px;
}

#global-loader1::after {
	animation-delay: 0;
}

#global-loader1 .roller {
	animation-delay: 0;
}

#global-loader1 .roller::before {
	background: #0f6fde;
}

#global-loader2::after {
	animation-delay: .15s;
}

#global-loader2 .roller {
	animation-delay: .15s;
}

#global-loader2 .roller::before {
	background: #208459;
}

#global-loader3::after {
	animation-delay: .3s;
}

#global-loader3 .roller {
	animation-delay: .3s;
}

#global-loader3 .roller::before {
	background: #f5ae23;
}

#global-loader4::after {
	animation-delay: .45s;
}

#global-loader4 .roller {
	animation-delay: .45s;
}

#global-loader4 .roller::before {
	background: #020e1d;
}

#global-loader5::after {
	animation-delay: .6s;
}

#global-loader5 .roller {
	animation-delay: .6s;
}

#global-loader5 .roller::before {
	background: #cd3310;
}

@keyframes shadow-l {
	0% { transform: translateX(67.8816px) scale(1, 1); opacity: 0.3; }
	8% { transform: translateX(33.9408px) scale(2, 2); }
	20% { transform: translateX(0) scale(1, 1); }
	40% { transform: translateX(33.9408px) scale(0.5, 0.5); opacity: 0.1; }
	50% { transform: translateX(67.8816px) scale(1, 1); opacity: 0.3; }
	58% { transform: translateX(101.8224px) scale(2, 2); }
	70% { transform: translateX(135.7632px) scale(1, 1); opacity: 0.3; }
	80% { transform: translateX(101.8224px) scale(0.5, 0.5); opacity: 0.1; }
	100% { transform: translateX(67.8816px) scale(1, 1); opacity: 0.3; }
}

@keyframes rollercoaster {
	0% { transform: rotate(135deg); }
	8% { transform: rotate(225deg); }
	20% { transform: rotate(315deg); }
	40% { transform: rotate(405deg); }
	50% { transform: rotate(495deg); opacity: 1; }
	50.1% { transform: rotate(495deg); opacity: 0; }
	100% { transform: rotate(495deg); opacity: 0; }
}

@keyframes rollercoaster-last {
	0% { opacity: 0; }
	49.9% { opacity: 0; }
	50% { transform: rotate(-45deg); opacity: 1; }
	58% { transform: rotate(-135deg); }
	70% { transform: rotate(-225deg); }
	80% { transform: rotate(-315deg); }
	100% { transform: rotate(-405deg); }
}