app-root {
	display: block;
	width: 100%;
	height: 100%;
}

.preload-spinner {
	display: none !important;
}

/* preload content loader styles start */

body.preload-content-loading {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: var(--body-bg-color);
}

.preload-content-loading app-root {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}

.preload-content-loading .preload-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
}

.preload-content-loading .spinner {
	position: relative;
	width: 70px;
	height: 70px;
	padding: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.preload-content-loading .spinner img {
	object-fit: scale-down;
	object-position: center;
}

.preload-content-loading .spinner-body {
	background: transparent;
	width: 200px;
	height: 200px;
	background-size: cover;
	vertical-align: middle;
}

.preload-content-loading .spinner::after {
	content: '';
	box-sizing: border-box;
	width: 70px;
	height: 70px;
	position: absolute;
	top: calc(50% - 35px);
	left: calc(50% - 35px);
	border-radius: 50%;
	border-top: 2px solid var(--loader-spinner-color);
	border-left: 2px solid var(--loader-spinner-color);
	border-right: 2px solid var(--transparent);
	animation: spinner .6s linear infinite;
}

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

/* preload content loader styles end */