/***********************************************************************
	Waiting Area
***********************************************************************/

.waiting-area {
	opacity: 1;
	transition: opacity .3s linear .2s;
}

	.waiting-area.loading {
		opacity: 0;
		transition: none;
		height: 0;
	}
	 

/***********************************************************************
	Loading Area
***********************************************************************/
.loading-container {
	margin-top: 20%;
	position: absolute;
	margin-left: 20%;
}

.loading-area {
	overflow: hidden;   
	width: 100%;
	padding: 0;
	z-index: 10;
	text-align: center;
	/*position: fixed;*/ 
	top: 50%;
}

	.loading-area.loading {
		height: 60px;
		opacity: 1;
		margin: 40px 0;
	}

	.loading-area .loading-text {
		text-align: center;
		font-size: 1.6em;
		font-style: italic;
		font-family: "Lato", Calibri, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		display: inline-block;
		vertical-align: middle;
		padding-right: 20px;
	}


	/***********************************************************************
	Loading Area - Standard
***********************************************************************/

	.loading-area.loading-standard {
		opacity: 0;
		top: 0;
		margin: 0;
		padding-top: 125px;
		/*background-color: rgba(255,255,255,.9);*/ /* IE9 issue */
		height: 100%;
		box-sizing: border-box;
	}

		.loading-area.loading-standard .loading-text {
			font-size: 1.4em;
		}


	/***********************************************************************
	Loading Area - Inline
***********************************************************************/

	.loading-area.inline {
		margin: 0 0 0 0;
		vertical-align: middle;
		display: inline-block;
		position: static;
		width: auto;
		top: auto;
		left: auto;
	}

.form-table .loading-area.inline,
.grid-table .loading-area.inline {
	position: absolute;
}

.loading-area.inline .loading-text {
	font-size: 1.1em;
	padding-right: 5px;
}

.loading-area.inline .loading-animation {
	height: 20px;
	padding-right: 0;
}

/***********************************************************************
	Loading Legacy
***********************************************************************/

.loading-area.loading-legacy {
	position: relative;
	opacity: 1;
	height: auto;
	display: none;
}

/***********************************************************************
	Loading Area - Animation
***********************************************************************/

.loading-animation {
	width: 70px;
	height: 50px;
	text-align: center;
	font-size: 10px;
	display: inline-block;
	vertical-align: middle;
	padding-right: 20px;
}

	.loading-animation .animate {
		height: 100%;
		width: 6px;
		display: inline-block;
		-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
		-moz-animation: stretchdelay 1.2s infinite ease-in-out;
		-o-animation: stretchdelay 1.2s infinite ease-in-out;
		animation: stretchdelay 1.2s infinite ease-in-out;
		 background-color: #E31937;

	}

	.loading-animation .animate2 {
		-webkit-animation-delay: -1.1s;
		-moz-animation-delay: -1.1s;
		-o-animation-delay: -1.1s;
		animation-delay: -1.1s;
	}

	.loading-animation .animate3 {
		-webkit-animation-delay: -1.0s;
		-moz-animation-delay: -1.0s;
		-o-animation-delay: -1.0s;
		animation-delay: -1.0s;
	}

	.loading-animation .animate4 {
		-webkit-animation-delay: -0.9s;
		-moz-animation-delay: -0.9s;
		-o-animation-delay: -0.9s;
		animation-delay: -0.9s;
	}

	.loading-animation .animate5 {
		-webkit-animation-delay: -0.8s;
		-moz-animation-delay: -0.8s;
		-o-animation-delay: -0.8s;
		animation-delay: -0.8s;
	}


/***********************************************************************
	Animation definitions
***********************************************************************/

@-webkit-keyframes stretchdelay {
	0%, 40%, 100% {
		-webkit-transform: scaleY(0.4);
	}

	20% {
		-webkit-transform: scaleY(1.0);
	}
}

@-moz-keyframes stretchdelay {
	0%, 40%, 100% {
		-moz-transform: scaleY(0.4);
	}

	20% {
		-moz-transform: scaleY(1.0);
	}
}

@keyframes stretchdelay {
	0%, 40%, 100% {
		-ms-transform: scaleY(0.4);
		-o-transform: scaleY(0.4);
		transform: scaleY(0.4);
	}

	20% {
		-ms-transform: scaleY(1.0);
		-o-transform: scaleY(1.0);
		transform: scaleY(1.0);
	}
}