/* 淺色模式 */
body{
    background: #eee !important;
}
.card *,tr td,div.divb *{
    color: #666 !important;
}
#table,div.card,div.divb {
	background: #eee !important;
    box-shadow: 8px 8px 20px #ccc, -8px -8px 20px #fff !important;
}
/* 深色模式 */
body.bbmy{
    background: #424242 !important;
}
.card.bbmy *,tr.bbmy td,div.divb.bbmy *{
    color: #999 !important;
}
#table.bbmy,div.card.bbmy,div.divb.bbmy {
	background: #424242 !important;
    box-shadow: 8px 8px 20px #262626, -8px -8px 20px #535353 !important;
}
/* 自定義代碼 */
div.bmy{
    width: 100%;
    margin: 50px auto;
	padding: 20px;
}
div.topbmy{
    height: auto;
}
    div.topbmy div{
        width: 25px;
        height: 25px;
        line-height: 30px;
        text-align: center;
        float: right;
        margin-top: -30px;
        cursor:pointer;
        background-image: url(/img/0.png);
        background-size: 100% 100%;
    }
    div.topbmy div.bbmy{
        background-image: url(/img/1.png);
    }
div.bottombmy{
    height: auto;
    text-align: center;
}
@media only screen and (min-width:1200px) {
	div.divb{
        width: 1155px;
        height: auto;
        border-radius: 15px;
        margin: 30px auto;
    }
}
@media only screen and (max-width:1200px) {
	div.divb{
        width: calc(100vw - 44px);
        height: auto;
        border-radius: 15px;
        margin: 30px auto;
    }
}

#header {
	height: 25rem;
	position: relative;
	display: none;
}
#header:before {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 1;
	width: 100%;
	background: rgba(66,64,64,.15)
}
#header:after {
	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: #999;
	margin-bottom: 0
}
tr.tableRow[data-v-555af8ce] {
	vertical-align: middle
}
tr.expandRow td>div[data-v-555af8ce] {
	overflow: hidden;
	transition: max-height .5s ease;
	max-height: 4em
}
tr.expandRow td>div.collapsed[data-v-555af8ce] {
	max-height: 0
}
div.progress[data-v-555af8ce] {
	display: inline-block;
	overflow: hidden;
	height: 25px;
	width: 50px;
	border-radius: 6px;
	margin-bottom: 0!important
}
div.progress div.bar[data-v-555af8ce] {
	height: 25px;
	border-radius: 6px;
	font-size: .9rem;
	line-height: 25px;
	color: #fff
}
tr td[data-v-555af8ce] {
	font-weight: 700;
	border: none!important;
	white-space: nowrap;
	margin: 20px;
}
#table {
	font-size: 1rem;
	border: none;
	text-align: center;
	vertical-align: middle;
	border-radius: 15px;
}
#table thead tr th {
	color: #9da2a6;
	white-space: nowrap
}
.updated {
	margin-bottom: -15px;
	margin-left: 5px
}
div.updated{
    text-align: center;
    color: #ccc;
}
div.card[data-v-cf75da64] {
	padding: 24px;
	border-radius: .5rem;
	background-color: hsla(0,0%,100%,.8);
	border-radius: 15px;
}
div.card div.card-header span[data-v-cf75da64] {
	font-size: 1.25rem;
	font-weight: 400;
	vertical-align: middle
}
div.card div.card-header p[data-v-cf75da64] {
	color: #919699
}
div.card div.card-content p[data-v-cf75da64] {
	margin-bottom: 0
}
div.card div.progress[data-v-cf75da64] {
	margin: 1.2em 0
}
.flag-icon[data-v-cf75da64] {
	display: inline;
	vertical-align: middle;
	width: 70px;
	margin-right: 8px
}
#cards {
	padding: 3.4rem 5px 3.5rem 5px;
}
@media only screen and (max-width:767px) {
	#cards{
	    padding: 0!important;
	    margin-top: 30px!important;
	}
	#cards .column {
		width: 100%!important;
		margin: 0!important;
	    padding: 0!important;
	    margin-bottom: 20px!important;
	}
}
.footer p {
    display: none;
	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/bg_parts.b38c798f.png) repeat-y 0 0,url(../img/bg.34e52f2c.png) repeat 0 0
}
div.bar {
	min-width: 0!important
}
@media only screen and (min-width:1200px) {
	.container {
		width: 1155px;
		margin: 0 auto;
		border: none;
	}
}
@media only screen and (max-width:1200px) {
	#app .container {
		width: auto;
		margin: 22px;
		border: none;
	}
	#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.e38df367.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
	}
}