/*
 * ❤ PROJECT NIRAK ❤ MMXXVI.I
 *
 * Copyright (c) 2026
 * Made with heart ❤ and much coffee ☕ by Project Nirak
 *
 * @version   Nirak 2026.1 - 2.0.1
 * @author    Project Nirak - Nikolaus Flamann <development@nirak.at>
 * @license   Nirak Custom License (NCL) v1.1 - https://nirak.at/license/ncl
 * @copyright Modification Copyright (c) OpenDXP (https://www.opendxp.ch)
 * @license   https://www.gnu.org/licenses/gpl-3.0.html  GNU General Public License version 3 (GPLv3)
 */

#loader {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 6;
	top: 0;
}

.loading {
	background: #ccc;
}

.loading #loader {
	background: rgba(255, 255, 255, 0.38)
}

.black.loading #loader {
	background: rgba(46, 46, 46, 0.8)
}


#loader .container {
	position: absolute;
	width: 320px;
	height: 240px;
	left: 50%;
	top: 50%;
	margin-left: -160px;
	margin-top: -120px;
	border-radius: 4px;
	transition: opacity 400ms;
}

#loader * {
	box-sizing: border-box;
}


.loading-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0);
	transition: background-color .2s ease-out;
}

.loading-anim {
	position: relative;
	width: 200px;
	height: 200px;
	margin: auto;
	perspective: 800px;
	transform-style: preserve-3d;
	transform: translateZ(-100px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) scale(0.5);
	opacity: 0;
	transition: all .2s ease-out;
}

.loading-anim .circle {
	width: 100%;
	height: 100%;
	animation: spin 5s linear infinite;
}

.loading-anim .rect {
	position: absolute;
	border-radius: 50%;
	border: 3px solid rgba(161, 0, 255, 0.44);
	box-shadow: 0 0 4px rgba(0, 0, 0, 1.0);
}

.loading-anim .out {
	top: 15%;
	left: 15%;
	width: 70%;
	height: 70%;
	border-left-color: transparent;
	border-right-color: transparent;
	animation: spin 2s linear reverse infinite;
}

.loading-anim .in {
	top: 18%;
	left: 18%;
	width: 64%;
	height: 64%;
	border-top-color: transparent;
	border-bottom-color: transparent;
	animation: spin 2s linear infinite;
}

.loading-anim .mid {
	top: 40%;
	left: 40%;
	width: 20%;
	height: 20%;
	border-left-color: transparent;
	border-right-color: transparent;
	animation: spin 1s linear infinite;
}

.loading .loading-anim {
	transform: translateZ(0) rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(1);
	opacity: 1;
}

.loading .loading-overlay {
	background: rgba(165, 35, 35, 0.4);
}

.dot {
	position: absolute;
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: rgba(0, 255, 0, 0.65);
	box-shadow: 0 0 4px rgba(0, 0, 0, 1.0);
	animation: jitter 5s ease-in-out infinite, fade-in-out 5s linear infinite;
}

.dot:nth-child(1) {
	top: 90px;
	left: 180px;
	animation-delay: 0s;
}

.dot:nth-child(2) {
	top: 135px;
	left: 168px;
	animation-delay: 0.41667s;
}

.dot:nth-child(3) {
	top: 168px;
	left: 135px;
	animation-delay: 0.83333s;
}

.dot:nth-child(4) {
	top: 180px;
	left: 90px;
	animation-delay: 1.25s;
}

.dot:nth-child(5) {
	top: 168px;
	left: 45px;
	animation-delay: 1.66667s;
}

.dot:nth-child(6) {
	top: 135px;
	left: 12px;
	animation-delay: 2.08333s;
}

.dot:nth-child(7) {
	top: 90px;
	left: 0px;
	animation-delay: 2.5s;
}

.dot:nth-child(8) {
	top: 45px;
	left: 12px;
	animation-delay: 2.91667s;
}

.dot:nth-child(9) {
	top: 12px;
	left: 45px;
	animation-delay: 3.33333s;
}

.dot:nth-child(10) {
	top: 0px;
	left: 90px;
	animation-delay: 3.75s;
}

.dot:nth-child(11) {
	top: 12px;
	left: 135px;
	animation-delay: 4.16667s;
}

.dot:nth-child(12) {
	top: 45px;
	left: 168px;
	animation-delay: 4.58333s;
}

.dot-01 {
	background-color: rgba(29, 56, 101, 0.62);
}

.dot-02 {
	background-color: rgba(45, 29, 101, 0.62);
}

.dot-03 {
	background-color: rgba(12, 55, 112, 0.62);
}

.dot-04 {
	background-color: rgba(50, 27, 126, 0.62);
}

.dot-05 {
	background-color: rgba(17, 55, 126, 0.62);
}

.dot-06 {
	background-color: rgba(120, 11, 128, 0.62);
}

.dot-07 {
	background-color: rgba(100, 14, 124, 0.62);
}

.dot-08 {
	background-color: rgba(126, 17, 110, 0.62);
}

.dot-09 {
	background-color: rgba(135, 5, 90, 0.62);
}

.dot-10 {
	background-color: rgba(136, 35, 4, 0.62);
}

.dot-11 {
	background-color: rgba(122, 106, 67, 0.62);
}

.dot-12 {
	background-color: rgba(62, 106, 58, 0.62);
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@keyframes jitter {
	0% {
		transform: scale(1, 1);
	}
	25% {
		transform: scale(0.7, 0.7);
	}
	50% {
		transform: scale(1, 1);
	}
	75% {
		transform: scale(1.3, 1.3);
	}
	100% {
		transform: scale(1, 1);
	}
}

@keyframes fade-in-out {
	0% {
		opacity: 0.8;
	}
	25% {
		opacity: 0.2;
	}
	75% {
		opacity: 1;
	}
	100% {
		opacity: 0.8;
	}
}