﻿html {
	min-height: 100%;
}

body {
	height: 100%;
	margin: 0;
}

.overlay {
	background-color: rgba(0, 0, 0, 0.8);
	position: fixed; /* Sit on top of the page content */
	display: none; /* Hidden by default */
	width: 100%; /* Full width (cover the whole page) */
	height: 100%; /* Full height (cover the whole page) */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	/*background-color: rgba(0,0,0,0.5);*/ /* Black background with opacity */
	z-index: 2;

}

	.overlay .loader {
		border: 16px solid #18635c;
		border-top: 16px solid #7F552B; /* #9a622a this is actual brown colour but overlay 'lightens' it*/
		border-radius: 50%;
		width: 120px;
		height: 120px;
		animation: spin 1s linear infinite;
		position: absolute;
		top: 50%;
		left: 50%;
	}

.processingOverlay {
	background-color: rgba(0, 0, 0, 0.8);
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 2;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

	.processingOverlay .processingContainer {
		padding-left: 40px;
		padding-top: 0px;
		position: absolute;
		top: 35%;
		left: 35%;
	}

	.processingOverlay #processing {
		height: 200px;
		background: url(/images/proceess-background.png) no-repeat transparent;
		position: relative;
	}

	.processingOverlay .processingLoader {
		height: 200px;
		display: flex;
	}

	/*_NatmedLayoutElementWhite*/
	.processingOverlay .processingLoaderNLEW {
		height: 200px;
		display: flex;
	}

	.processingOverlay .processingLoader h1 {
		margin: 0;
		font-size: 80px;
		color: #FFF;
		padding: 25px 100px 0 0px;
		padding-top: 25px;
		padding-right: 100px;
		padding-bottom: 0px;
		padding-left: 0px;
		font-weight: 700;
	}

		/*_NatmedLayoutElementWhite*/
	.processingOverlay .processingLoaderNLEW h1 {
		margin: 0;
		font-size: 80px;
		color: #FFF;
		padding: 25px 100px 0 0px;
		padding-top: 25px;
		padding-right: 100px;
		padding-bottom: 0px;
		padding-left: 5px;
		font-weight: 700;
	}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}
