body{padding: 20px 20px 50vh 20px;}
#logo{ width: 200px; margin-top: 15px; }
#pagetitle{  display: inline-block; margin: 30px 20px; }

.serverType{border-bottom: solid 8px #EEE;align-items:end;/* height: 25%; */}
	.serverType>*{ text-align: center; min-width: 120px;;}
	h4.spacer{margin: 80px auto 0px!important}

.server{ display:flex; color:#8dc63f; position: relative; width: 100px; height:80px; margin: 0 auto -21px; transition: all 300ms;}
	.server svg{width:100%; position: absolute; top:0}
		.server svg.icon{ color:#444!important; }
		.server svg.status{  transform: translateY(50%); }

	.server:after { content:'NORMAL'; text-align: center; position:absolute; bottom:0; transform:translateY(100%); font-size:11px; color:#AAA; font-weight:900; width:100%; }
		.server.warn1, .warn1{ color:#f7941d; }
			.server.warn1:after{ content:'HIGH LOAD'; color:inherit; }

		.server.warn2, .warn2{ color:#f15b29; }
			.server.warn2:after{ content:'VERY HIGH LOAD'; color:inherit; }

		.server.offline, .offline{ color:#be1e2d; }
			.server.offline:after{ content:'OFFLINE'; color:inherit; }
	.server b{ border-radius:50px; width:8px; height:8px; position:absolute; right:5px; top:4px; background-color: currentColor; }
	.server.offline b{background:#999!important}
		.greenback{background:#8dc63f!important;}
		.orangeback{background:#FF6600!important;}
		.redback, .server.offline b.greenback{background:red!important;}


#msg{ position:fixed; bottom:20px; padding:30px 5vw; left:20px; right:20px; overflow-y:auto; max-height:25vh; text-align:center; }
	#msg.warn1, #msg.warn2,#msg.offline{border:solid 2px currentColor}
	#msg p{margin-bottom:10px;}