﻿.loading {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/*background-color: rgba(0, 0, 0, 0.7) !important;*/
	background-color: rgba(0, 0, 0, 0.7);
	/*color: #fff;*/
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	z-index: 98;
	overflow: hidden;
}

	.loading .type {
		width: 50px;
		height: 50px;
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		margin-block: 10px;
	}

		.loading .type.spin {
			background-image: url("data:image/svg+xml; base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQogIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAwIDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KICAgIDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik03Myw1MGMwLTEyLjctMTAuMy0yMy0yMy0yM1MyNywzNy4zLDI3LDUwIE0zMC45LDUwYzAtMTAuNSw4LjUtMTkuMSwxOS4xLTE5LjFTNjkuMSwzOS41LDY5LjEsNTAiPg0KICAgICAgPGFuaW1hdGVUcmFuc2Zvcm0gDQogICAgICAgICBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIA0KICAgICAgICAgYXR0cmlidXRlVHlwZT0iWE1MIiANCiAgICAgICAgIHR5cGU9InJvdGF0ZSINCiAgICAgICAgIGR1cj0iMXMiIA0KICAgICAgICAgZnJvbT0iMCA1MCA1MCINCiAgICAgICAgIHRvPSIzNjAgNTAgNTAiIA0KICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+DQogIDwvcGF0aD4NCjwvc3ZnPg==");
		}

		.loading .type.dots {
			background-image: url("data:image/svg+xml; base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQogIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAwIDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KICA8Y2lyY2xlIGZpbGw9IiNmZmYiIHN0cm9rZT0ibm9uZSIgY3g9IjYiIGN5PSI1MCIgcj0iNiI+DQogICAgPGFuaW1hdGUNCiAgICAgIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiDQogICAgICBkdXI9IjFzIg0KICAgICAgdmFsdWVzPSIwOzE7MCINCiAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIg0KICAgICAgYmVnaW49IjAuMSIvPiAgICANCiAgPC9jaXJjbGU+DQogIDxjaXJjbGUgZmlsbD0iI2ZmZiIgc3Ryb2tlPSJub25lIiBjeD0iNDYiIGN5PSI1MCIgcj0iNiI+DQogICAgPGFuaW1hdGUNCiAgICAgIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiDQogICAgICBkdXI9IjFzIg0KICAgICAgdmFsdWVzPSIwOzE7MCINCiAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiANCiAgICAgIGJlZ2luPSIwLjIiLz4gICAgICAgDQogIDwvY2lyY2xlPg0KICA8Y2lyY2xlIGZpbGw9IiNmZmYiIHN0cm9rZT0ibm9uZSIgY3g9Ijg2IiBjeT0iNTAiIHI9IjYiPg0KICAgIDxhbmltYXRlDQogICAgICBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5Ig0KICAgICAgZHVyPSIxcyINCiAgICAgIHZhbHVlcz0iMDsxOzAiDQogICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgDQogICAgICBiZWdpbj0iMC4zIi8+ICAgICANCiAgPC9jaXJjbGU+DQo8L3N2Zz4=");
		}

		.loading .type.square {
			background-image: url("data:image/svg+xml; base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQogIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCiAgIDxyZWN0IGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSI0IiB4PSIyNSIgeT0iMjUiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCI+DQogIDxhbmltYXRlVHJhbnNmb3JtDQogICAgIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSINCiAgICAgZHVyPSIwLjVzIg0KICAgICBmcm9tPSIwIDUwIDUwIg0KICAgICB0bz0iMTgwIDUwIDUwIg0KICAgICB0eXBlPSJyb3RhdGUiDQogICAgIGlkPSJzdHJva2VCb3giDQogICAgIGF0dHJpYnV0ZVR5cGU9IlhNTCINCiAgICAgYmVnaW49InJlY3RCb3guZW5kIi8+DQogIDwvcmVjdD4NCiAgIDxyZWN0IHg9IjI3IiB5PSIyNyIgZmlsbD0iI2ZmZiIgd2lkdGg9IjQ2IiBoZWlnaHQ9IjUwIj4NCiAgPGFuaW1hdGUNCiAgICAgYXR0cmlidXRlTmFtZT0iaGVpZ2h0Ig0KICAgICBkdXI9IjEuM3MiDQogICAgIGF0dHJpYnV0ZVR5cGU9IlhNTCINCiAgICAgZnJvbT0iNTAiIA0KICAgICB0bz0iMCINCiAgICAgaWQ9InJlY3RCb3giIA0KICAgICBmaWxsPSJmcmVlemUiDQogICAgIGJlZ2luPSIwcztzdHJva2VCb3guZW5kIi8+DQogIDwvcmVjdD4NCjwvc3ZnPg==");
		}

		.loading .type.circle {
			/*background-image: url("data:image/svg+xml; base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMNyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQogIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCiA8cGF0aCBmaWxsPSIjZmZmIiBkPSJNMzEuNiwzLjVDNS45LDEzLjYtNi42LDQyLjcsMy41LDY4LjRjMTAuMSwyNS43LDM5LjIsMzguMyw2NC45LDI4LjFsLTMuMS03LjljLTIxLjMsOC40LTQ1LjQtMi01My44LTIzLjMNCiAgYy04LjQtMjEuMywyLTQ1LjQsMjMuMy01My44TDMxLjYsMy41eiI+DQogICAgICA8YW5pbWF0ZVRyYW5zZm9ybSANCiAgICAgICAgIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgDQogICAgICAgICBhdHRyaWJ1dGVUeXBlPSJYTUwiIA0KICAgICAgICAgdHlwZT0icm90YXRlIg0KICAgICAgICAgZHVyPSI0cyIgDQogICAgICAgICBmcm9tPSIwIDUwIDUwIg0KICAgICAgICAgdG89IjM2MCA1MCA1MCIgDQogICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4NCiAgPC9wYXRoPg0KIDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik00Mi4zLDM5LjZjNS43LTQuMywxMy45LTMuMSwxOC4xLDIuN2M0LjMsNS43LDMuMSwxMy45LTIuNywxOC4xbDQuMSw1LjVjOC44LTYuNSwxMC42LTE5LDQuMS0yNy43DQogIGMtNi41LTguOC0xOS0xMC42LTI3LjctNC4xTDQyLjMsMzkuNnoiPg0KICAgICAgPGFuaW1hdGVUcmFuc2Zvcm0gDQogICAgICAgICBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIA0KICAgICAgICAgYXR0cmlidXRlVHlwZT0iWE1MIiANCiAgICAgICAgIHR5cGU9InJvdGF0ZSINCiAgICAgICAgIGR1cj0iMnMiIA0KICAgICAgICAgZnJvbT0iMCA1MCA1MCINCiAgICAgICAgIHRvPSItMzYwIDUwIDUwIiANCiAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICA8L3BhdGg+DQo8L3N2Zz4=");*/
			background-image: url("data:image/svg+xml; base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMNyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQogIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCiA8cGF0aCBmaWxsPSIjQUFCNEJDIiBkPSJNMzEuNiwzLjVDNS45LDEzLjYtNi42LDQyLjcsMy41LDY4LjRjMTAuMSwyNS43LDM5LjIsMzguMyw2NC45LDI4LjFsLTMuMS03LjljLTIxLjMsOC40LTQ1LjQtMi01My44LTIzLjMNCiAgYy04LjQtMjEuMywyLTQ1LjQsMjMuMy01My44TDMxLjYsMy41eiI+DQogICAgICA8YW5pbWF0ZVRyYW5zZm9ybSANCiAgICAgICAgIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgDQogICAgICAgICBhdHRyaWJ1dGVUeXBlPSJYTUwiIA0KICAgICAgICAgdHlwZT0icm90YXRlIg0KICAgICAgICAgZHVyPSI0cyIgDQogICAgICAgICBmcm9tPSIwIDUwIDUwIg0KICAgICAgICAgdG89IjM2MCA1MCA1MCIgDQogICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4NCiAgPC9wYXRoPg0KIDxwYXRoIGZpbGw9IiM2NDZENzQiIGQ9Ik00Mi4zLDM5LjZjNS43LTQuMywxMy45LTMuMSwxOC4xLDIuN2M0LjMsNS43LDMuMSwxMy45LTIuNywxOC4xbDQuMSw1LjVjOC44LTYuNSwxMC42LTE5LDQuMS0yNy43DQogIGMtNi41LTguOC0xOS0xMC42LTI3LjctNC4xTDQyLjMsMzkuNnoiPg0KICAgICAgPGFuaW1hdGVUcmFuc2Zvcm0gDQogICAgICAgICBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIA0KICAgICAgICAgYXR0cmlidXRlVHlwZT0iWE1MIiANCiAgICAgICAgIHR5cGU9InJvdGF0ZSINCiAgICAgICAgIGR1cj0iMnMiIA0KICAgICAgICAgZnJvbT0iMCA1MCA1MCINCiAgICAgICAgIHRvPSItMzYwIDUwIDUwIiANCiAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICA8L3BhdGg+DQo8L3N2Zz4=");
		}

		.loading .type.bars {
			background-image: url("data:image/svg+xml; base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQogIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAwIDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KICAgIDxyZWN0IHg9IjUiIHk9IjEwIiB3aWR0aD0iMTUiIGhlaWdodD0iNTAiIGZpbGw9IiNmZmYiPg0KICAgICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlVHlwZT0ieG1sIg0KICAgICAgICBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InRyYW5zbGF0ZSINCiAgICAgICAgdmFsdWVzPSIwIDA7IDAgMjA7IDAgMCINCiAgICAgICAgYmVnaW49IjAiIGR1cj0iMC44cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+DQogICAgPC9yZWN0Pg0KICAgIDxyZWN0IHg9IjQwIiB5PSIxMCIgd2lkdGg9IjE1IiBoZWlnaHQ9IjUwIiBmaWxsPSIjZmZmIj4NCiAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZVR5cGU9InhtbCINCiAgICAgICAgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJ0cmFuc2xhdGUiDQogICAgICAgIHZhbHVlcz0iMCAwOyAwIDIwOyAwIDAiDQogICAgICAgIGJlZ2luPSIwLjJzIiBkdXI9IjAuOHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgIDwvcmVjdD4NCiAgICA8cmVjdCB4PSI3NSIgeT0iMTAiIHdpZHRoPSIxNSIgaGVpZ2h0PSI1MCIgZmlsbD0iI2ZmZiI+DQogICAgICA8YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVUeXBlPSJ4bWwiDQogICAgICAgIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0idHJhbnNsYXRlIg0KICAgICAgICB2YWx1ZXM9IjAgMDsgMCAyMDsgMCAwIg0KICAgICAgICBiZWdpbj0iMC40cyIgZHVyPSIwLjhzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4NCiAgICA8L3JlY3Q+DQo8L3N2Zz4=");
		}

	.loading .text {
		padding: 0.5rem;
		font-size: 1rem;
		font-family: inherit;
		font-weight: normal;
		color: #646D74;
		text-align: center;
	}

.loading-alignX-left {
	align-items: flex-start;
}

.loading-alignX-center {
	align-items: center;
}

.loading-alignX-right {
	align-items: flex-end;
}

.loading-alignY-top {
	justify-content: flex-start;
}

.loading-alignY-center {
	justify-content: center;
}

.loading-alignY-bottom {
	justify-content: flex-end;
}

body > .loading .type {
	width: 100px;
	height: 100px;
}

body > .loading .text {
	padding: 1rem;
	font-size: 1.2rem;
}
