/*
 * Pre-bootstrap styles (application loader + unsupported-browser message).
 * External file instead of inline <style>/style="" in index.html because the
 * Content Security Policy is strict (style-src 'self', no 'unsafe-inline').
 * Visibility toggles are done from application-loader.js through the CSSOM
 * (element.style.xxx = ...), which CSP does not restrict.
 */

#not-supported-browser-message {
	display: none;
	color: #607d8b;
	font-family: sans-serif;
	margin: 60px auto;
	height: 400px;
	width: 1200px;
	align-content: center;
	text-align: center;
	padding: 20px;
	border: 4px #009688 solid;
}

	#not-supported-browser-message h2 {
		color: #607d8b;
	}

	#not-supported-browser-message ul.browser-list {
		text-align: left;
		margin-left: auto;
		margin-right: auto;
		width: 300px;
		font-size: 20px;
	}

#applicationLoader {
	background: #f8f8f8;
	color: #424242;
	position: fixed;
	display: flex;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	visibility: hidden
}

#applicationLoaderContent {
	margin: auto;
}

#applicationName {
	text-align: center;
	font-size: 28px;
	font-weight: 700;
	margin: 20px;
	font-family: Helvetica, sans-serif
}

#serverOfflineMessage {
	display: none;
	text-align: center;
	font-size: 18px;
	font-weight: 700;
	margin: 20px;
	font-family: Helvetica, sans-serif
}

#loaderIconContainer {
	margin-bottom: 70px;
}

#loaderIcon {
	display: block;
	width: 70px;
	margin: auto;
	height: 70px;
}

#reloadLink {
	display: none;
	text-align: center;
	width: 100%;
	margin-top: 10px;
	font-size: 18px;
	font-weight: bold;
	text-decoration: none;
}