#header {
	height: 25rem;
	position: relative;
}

#header:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 1;
	width: 100%;
	background: rgba(66,64,64,.15)
}

#header:after {
	content: "Pixiv: 86597206";
	position: absolute;
	right: 15px;
	bottom: 0;
	z-index: 2;
	color: #cdcdcd;
	text-shadow: 1px 1px 1px #666
}

#header-content {
	position: absolute;
	z-index: 3;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	text-shadow: 2px 2px 2px #666;
	text-align: center
}

#header h1 {
	font-size: 3.57rem;
	white-space: nowrap
}

#header p {
	font-size: 1.5rem;
	color: #f0f8ff
}

p.error {
	text-align: center;
	color: #616366;
	margin-bottom: 0
}

tr.tableRow[data-v-30a393ce] {
	background-color: hsla(0,0%,98%,.8);
	vertical-align: middle
}

tr.expandRow td>div[data-v-30a393ce] {
	overflow: hidden;
	transition: max-height .5s ease;
	max-height: 4em
}

tr.expandRow td>div.collapsed[data-v-30a393ce] {
	max-height: 0
}
div#whitemask {
    height: 100%;
    width: 100%;
    background: rgba(255,255,255,.3);
}
div.progress[data-v-30a393ce] {
	display: inline-block;
	overflow: hidden;
	height: 25px;
	width: 50px;
	border-radius: 6px;
	margin-bottom: 0!important
}

div.progress div.bar[data-v-30a393ce] {
	height: 25px;
	border-radius: 6px;
	font-size: .9rem;
	line-height: 25px;
	color: #fff
}

tr td[data-v-30a393ce] {
	color: #616366;
	font-weight: 700;
	border: none!important;
	white-space: nowrap
}

#table {
	font-size: 1rem;
	border: none;
	text-align: center;
	vertical-align: middle
}

#table thead tr th {
	color: #9da2a6;
	white-space: nowrap
}

.updated {
	margin-bottom: -15px;
	margin-left: 5px
}

div.card[data-v-981db0a2] {
	padding: 24px;
	box-shadow: 5px 5px 25px 0 rgba(46,61,73,.2);
	border-radius: .5rem;
	background-color: hsla(0,0%,100%,.8)
}

div.card div.card-header span[data-v-981db0a2] {
	font-size: 1.25rem;
	font-weight: 400;
	vertical-align: middle
}

div.card div.card-header p[data-v-981db0a2] {
	color: #919699
}

div.card div.card-content p[data-v-981db0a2] {
	margin-bottom: 0
}

div.card div.progress[data-v-981db0a2] {
	margin: 1.2em 0
}

.flag-icon[data-v-981db0a2] {
	display: inline;
	vertical-align: middle;
	width: 70px;
	margin-right: 8px
}

#cards {
	padding-top: 3.4rem;
	padding-bottom: 3.5rem
}

@media only screen and (max-width:767px) {
	#cards .column {
		width: 100%!important;
		margin: 0 auto!important
	}
}

.footer p {
	text-align: center;
	padding-bottom: 15px
}

.footer p a {
	vertical-align: middle;
	transition: color .3s ease
}

.footer p a:hover {
	color: #ff779a
}

body {
	background: url(../img/cover.9bbd2f35.png),no-repeat;
	background-position: center;
	background-attachment: fixed;
}

div.bar {
	min-width: 0!important
}

@media only screen and (min-width:1200px) {
	.container {
		width: 1155px;
		margin: 0 auto
	}
}

@media only screen and (max-width:1200px) {
	#app .container {
		width: auto;
		margin: 0 .8rem
	}

	#table thead tr th,#table tr.tableRow td {
		padding: .7em
	}
}

@media only screen and (max-width:1075px) {
	#type,tr td:nth-child(3) {
		display: none
	}
}

@media only screen and (max-width:992px) {
	body,html {
		font-size: 13px
	}
}

@media only screen and (max-width:910px) {
	#location,tr td:nth-child(4) {
		display: none
	}
}

@media (max-width:768px) {
	body,html {
		font-size: 12px
	}

	#servers div.progress {
		width: 40px
	}

	#cards .card div.card-header span {
		font-size: 1.55rem
	}

	#cards .card div.card-content p {
		font-size: 1.25rem;
		margin-bottom: .6rem
	}

	#app #header {
		height: 20rem;
		background: url(../img/cover_mobile.513a0abf.png) no-repeat 50%!important
	}
}

@media only screen and (max-width:720px) {
	#uptime,tr td:nth-child(5) {
		display: none
	}
}

@media only screen and (max-width:660px) {
	#load,tr td:nth-child(6) {
		display: none
	}
}

@media only screen and (max-width:600px) {
	#traffic,tr td:nth-child(8) {
		display: none
	}
}

@media only screen and (max-width:533px) {
	#name,tr td:nth-child(2) {
		min-width: 20px;
		max-width: 60px;
		text-overflow: ellipsis;
		overflow: hidden
	}

	#hdd,tr td:nth-child(11) {
		display: none
	}

	#cpu,#ram {
		min-width: 20px;
		max-width: 40px
	}
}