@keyframes fade-out {
	0% {
	   opacity: 1;
	}

	50% {
		opacity: 1;
	 }
 
	100% {
	   opacity: 0;
	}
 }

 @keyframes bounceOut {
    0% {
        transform: scale3d(1,1,1);
		opacity: 1;
    }
    20% {
        transform: scale3d(1.2, 1.2, 1.2);
		opacity: 1;
    }

    40% {
        transform: scale3d(1.2, 1.2, 1.2);
		opacity: 1;
    }

    100% {
        transform: scale3d(0.1, 0.1, 0.1);
		opacity: 0;
    }
}

 @keyframes load-screen-squares {
	0% {
	   transform: translateX(0px);
	   opacity: 0;
	}

	10% {
	   opacity: 1;
	}

	80% {
	   opacity: 1;
	}

	100% {
	   transform: translateX(400px);
	   opacity: 0
	}
 }

 @keyframes rotate {
	from {
	   transform: rotate(0deg)
	}

	to {
	   transform: rotate(360deg)
	}
 }

 #load-screen {
	overflow: hidden;
	z-index: 99999;
	position: absolute;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;

	background: var(--load-screen-background-color);
	color: var(--load-screen-text-color);

 }

@media (prefers-color-scheme: dark) {
	#load-screen {
		--load-screen-text-color: white;
		--load-screen-background-color: #0F0F0F;
	}
}

@media (prefers-color-scheme: light) {
	#load-screen {
		--load-screen-text-color: #0F0F0F;
		--load-screen-background-color: white;
	}
}

 body.dark #load-screen {
	--load-screen-text-color: white;
	--load-screen-background-color: #0F0F0F;
 }

body.light #load-screen {
	--load-screen-text-color: #0F0F0F;
	--load-screen-background-color: white;
 }


 body.inline #app-load-screen {
	display: none;
 }

 #inline-load-screen {
	display: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	box-sizing: border-box;
	border-width: 1.5px;
	border-style: solid;
	border-color: #0078d4 #a9d3f2 #a9d3f2;
	animation: rotate 950ms cubic-bezier(0.53, 0.21, 0.29, 0.67) infinite;
	position: relative;
	left: calc(50% - 20px);
 }

 body.inline #inline-load-screen {
	display: block;
 }

 #load-screen.fade-out {
	opacity	: 0;
	animation: fade-out 600ms;
 }

 #load-screen .before-fade-out {
	opacity: 0;
	animation: 300ms bounceOut;
 }

 #load-screen-content {
	max-width: 400px;
	position: relative;
	animation: fade-in 0.25s reverse;
	left: 50%;
	margin-left: -200px;
	top: 40%;
 }

 #load-screen-content svg {
	position: relative;
	left: 180px;
 }

 #load-screen .square {
	position: absolute;
	top: 80px;
	width: 5px;
	height: 5px;
	background: var(--load-screen-text-color);
	animation: load-screen-squares 1.7s cubic-bezier(.28, .82, .82, .29) infinite;
	opacity: 0;
 }

 #load-screen .square:nth-child(1) {
	animation-delay: 0.01s;
 }

 #load-screen .square:nth-child(2) {
	animation-delay: 0.11s;
 }

 #load-screen .square:nth-child(3) {
	animation-delay: 0.21s;
 }

 #load-screen .square:nth-child(4) {
	animation-delay: 0.31s;
 }

 #load-screen .square:nth-child(5) {
	animation-delay: 0.41s;
 }