/* This is legacy code */
/* styles initial loading icon, while angular is bootstrapping and styles messages for non supported browsers like ie */

.loadit {
	background: #fff;
	display: flex;
	height: 100%;
	justify-content: center;
	left: 0;
	min-width: 0;
	minalign-items: center;
	opacity: 0;
	position: fixed;
	top: 0;
	transition: opacity 0.8s ease-in-out;
	width: 100%;
	z-index: -1;
}

@keyframes loading-spinner {
	to {
		transform: rotate(360deg);
	}
}

.loading-spinner:before {
	animation: loading-spinner 0.8s ease infinite;
	border-bottom-color: #f1a038;
	border-radius: 50%;
	border-top-color: #f1a038;
	border: 2px solid transparent;
	box-sizing: border-box;
	content: '';
	height: 20px;
	left: 50%;
	margin-left: -10px;
	margin-top: -10px;
	position: absolute;
	top: 50%;
	width: 20px;
}
/* .loadit screen is visible when app is not bootstraped yet, .my-app is empty */

app-root:empty + .loadit {
	opacity: 1;
	z-index: 100;
}

.ie-message {
	display: none;
}

/* IE8 */
@media \0screen {
	.ie-message {
		display: block;
		font-family: 'Verdana';
		font-size: 1em;
		height: 200px;
		line-height: 22px;
		margin: auto;
		position: relative;
		text-align: left;
		top: 50px;
		width: 400px;
	}

	.ie-message img {
		float: left;
		width: 25%;
	}

	.ie-message .ie-text {
		float: left;
		margin-left: 5%;
		width: 70%;
	}

	.loadit {
		display: none;
	}
}

/* IE9 */
@media screen and (min-width: 0\0) and (min-resolution: 0.001dpcm) {
	.ie-message {
		display: block;
		font-family: 'Verdana';
		font-size: 1em;
		height: 200px;
		margin: auto;
		position: relative;
		text-align: left;
		top: 20vh;
		width: 400px;
		z-index: 10;
	}

	.ie-message img {
		float: left;
		width: 25%;
	}

	.ie-message .ie-text {
		float: left;
		margin-left: 5%;
		width: 70%;
	}

	.loadit {
		display: none;
	}
}

/* IE10+ */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	.ie-message {
		display: block;
		font-family: 'Verdana';
		font-size: 1em;
		height: 200px;
		margin: auto;
		position: relative;
		text-align: left;
		top: 20vh;
		width: 400px;
		z-index: 10;
	}

	.ie-message img {
		float: left;
		width: 25%;
	}

	.ie-message .ie-text {
		float: left;
		margin-left: 5%;
		width: 70%;
	}

	.loadit {
		display: none;
	}
}