/* Technetium PHP Framework version 2.8
   Author: Tony Leung
   E-mail: tony.leung@cruzium.com
   
   Loader.js - v2.1.1
 */

body.loader-open {
	overflow:hidden;
}
#ajax-loader {
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	background:rgba(0, 0, 0, 0.4);
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center;
	-webkit-box-pack:center;
	-ms-flex-pack:center;
	justify-content:center;
	z-index:99998;
}
#ajax-loader > div:not([class]) {
	width:52px;
	height:52px;
	padding:10px;
	border-radius:10px;
	background:#000000 url(images/ajax-loader.gif) no-repeat center;
}

/* Colorful Bar Animation
   https://www.pexels.com/blog/css-only-loaders/#5colorfulbaranimation 
   
   HTML:
   <div class="colorful-loading">
     <div class="bar"></div>
     <div class="bar"></div>
     <div class="bar"></div>
     <div class="bar"></div>
   </div>
 */
.colorful-loading {
	width:50px;
	height:18px;
	position:absolute;
	top:50%;
	left:50%;
	margin:-9px 0 0 -25px;
}
.colorful-loading .bar {
	width:4px;
	height:100%;
	border-radius:4px;
	vertical-align:top;
	display:inline-block;
	animation:colorful-loading 1s ease-in-out infinite;
}
.colorful-loading .bar:nth-child(1) {
	background-color:#3498DB;
	animation-delay:0;
}
.colorful-loading .bar:nth-child(2) {
	background-color:#C0392B;
	animation-delay:0.09s;
}
.colorful-loading .bar:nth-child(3) {
	background-color:#F1C40F;
	animation-delay:.18s;
}
.colorful-loading .bar:nth-child(4) {
	background-color:#27AE60;
	animation-delay:.27s;
}
@keyframes colorful-loading {
	0% {
		transform:scale(1);
	}
	20% {
		transform:scale(1, 2.2);
	}
	40% {
		transform:scale(1);
	}
}