@font-face {font-family:HarmonyOS;font-style: normal;font-display: swap;src: url('/static/theme-diy/hw.woff2') format('woff2');}
@font-face{font-weight:900;font-family:dianzhenzt;src:url("/static/theme-diy/ailmm.woff2")}
body{background:#e6eef4;font-family:"dianzhenzt" !important}
.header{font-family:"HarmonyOS","dianzhenzt"!important}
.container{font-family:"HarmonyOS","dianzhenzt"!important}
#app{font-family:"HarmonyOS","dianzhenzt"!important}
.ui.inverted.segment{background:#e6eef4}
.ui.menu{background:#e6eef4;border:none!important;box-shadow:0 0 0 #e6eef4!important;-webkit-box-shadow:0 0 0 #e6eef4!important;}
.ui.menu .active{border:none!important;border-radius:10px!important;background:#e6eef4!important;box-shadow:inset 5px 5px 16px #d6dde3,inset -5px -5px 16px #f6ffff!important}
.ui.menu .item:before{width:0!important}
.ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless)>.container>.item:not(.right):not(.borderless):first-child{border-left:none!important}
.ui.menu.fixed{position:static}
.nb-container{padding-top:40px!important;}
.ui.menu{margin-top:20px!important;}
#app .styled{box-shadow:0 0 0 #e6eef4;-webkit-box-shadow:0 0 0 #e6eef4}
#app .accordion{background:#e6eef4;border-style:none}
#app .accordion .content .card{border-radius:20px;background:#e6eef4;box-shadow:-6px -6px 12px #b8bec3,6px 6px 12px #fff}
.ui.progress {
	border-radius: 999px;
	background: linear-gradient(145deg, #dce5ec, #f2f8ff);
	box-shadow: inset 4px 4px 8px #bcc3c9, inset -4px -4px 8px #ffffff;
}

.ui.progress .bar {
	min-width: 1.8em !important;
	border-radius: 999px !important;
	line-height: 1.65em !important;
	box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.35), -1px -1px 2px rgba(44, 62, 80, 0.2);
	transition: width .35s ease, filter .25s ease;
}

.ui.progress .bar small {
	color: #f7fbff !important;
	text-shadow: 0 1px 2px rgba(15, 23, 42, 0.45);
	font-weight: 700;
}

.ui.progress.offline .bar {
	background: linear-gradient(135deg, #748399, #5a677a) !important;
	filter: saturate(.75);
}

.metric-progress.fine .bar,
.metric-progress.warning .bar,
.metric-progress.error .bar,
.metric-progress.danger .bar {
	filter: saturate(1.05);
}

.metric-progress.danger .bar {
	filter: saturate(1.2) brightness(.88);
}

.metric-cpu.fine .bar { background: linear-gradient(135deg, #3a86ff, #4f7dff, #6863ff) !important; }
.metric-cpu.warning .bar { background: linear-gradient(135deg, #4f7dff, #6f66ff, #8552ff) !important; }
.metric-cpu.error .bar { background: linear-gradient(135deg, #5f59f0, #764ce0, #8f39c9) !important; }
.metric-cpu.danger .bar { background: linear-gradient(135deg, #4537bf, #5a2fa6, #6d2487) !important; }

.metric-mem.fine .bar { background: linear-gradient(135deg, #1bc5a3, #23c7b8, #35ccd0) !important; }
.metric-mem.warning .bar { background: linear-gradient(135deg, #13b993, #0fbfa6, #1eb9c0) !important; }
.metric-mem.error .bar { background: linear-gradient(135deg, #0fa57e, #12927e, #177f80) !important; }
.metric-mem.danger .bar { background: linear-gradient(135deg, #0a745b, #0f6460, #125556) !important; }

.metric-swap.fine .bar { background: linear-gradient(135deg, #ffb347, #ffbf5f, #ffd36f) !important; }
.metric-swap.warning .bar { background: linear-gradient(135deg, #ff9d42, #ffb347, #ffc85b) !important; }
.metric-swap.error .bar { background: linear-gradient(135deg, #ff7f3f, #ff9441, #ffab45) !important; }
.metric-swap.danger .bar { background: linear-gradient(135deg, #db5d24, #c9501e, #b44318) !important; }

.metric-disk.fine .bar { background: linear-gradient(135deg, #f86b8a, #ff7092, #ff8a9f) !important; }
.metric-disk.warning .bar { background: linear-gradient(135deg, #f25277, #ff5d82, #ff7393) !important; }
.metric-disk.error .bar { background: linear-gradient(135deg, #d93f66, #eb4a70, #ff607f) !important; }
.metric-disk.danger .bar { background: linear-gradient(135deg, #a92d4d, #be3251, #cf3a56) !important; }
.service-status .good{border-radius: 7px!important;background: linear-gradient(145deg, #23c74a, #1ea73e)!important;box-shadow: 0px 0px 0px #20b342!important;}
.service-status .danger{border-radius: 7px!important;background: linear-gradient(145deg, #c71e1e, #a71919)!important;box-shadow: 0px 0px 0px #20b342!important;}
.service-status .warning{border-radius: 7px!important;background: linear-gradient(145deg, #ffa51a, #de8b16)!important;box-shadow: 0px 0px 0px #ed9417!important;}
.service-status .table{border:none!important;border-radius:7px;background:#e6eef4;box-shadow:-13px -13px 25px #d4dbe0,13px 13px 25px #f8ffff}
.service-status .table td .button{border:none!important;border-radius:7px;background:#e6eef4;box-shadow:inset -3px -3px 6px #c4cacf,inset 3px 3px 6px #fff}
.service-status table thead .center{border:none!important;background:#e6eef4!important}
.service-status .table td{border:none!important}
.ui.right.center.popup{margin:-3px 0 0 .914286em!important;-webkit-transform-origin:left 50%!important;transform-origin:left 50%!important}
.ui.bottom.left.popup{margin-top:3px!important;margin-left:1px!important}
.ui.top.left.popup{margin-bottom:10px!important;margin-left:0!important}
.ui.top.right.popup{margin-right:0!important;margin-bottom:8px!important}
.ui.left.center.popup{margin:-3px .91428571em 0 0!important;-webkit-transform-origin:right 50%!important;transform-origin:right 50%!important}
.ui.left.center.popup:before,.ui.right.center.popup:before{border:0 solid #fafafaeb!important;background:#fafafaeb!important}
.ui.top.popup:before{border-color:#fafafaeb transparent transparent!important}
.ui.popup:before{border-color:#fafafaeb transparent transparent!important}
.ui.bottom.left.popup:before{border:1px solid transparent!important;border-color:#fafafaeb transparent transparent!important;border-radius:0!important;background:#fafafaeb!important;-webkit-box-shadow:0 0 0 0 #fafafaeb!important;box-shadow:0 0 0 0 #fafafaeb!important;-webkit-tap-highlight-color:transparent!important}
.ui.bottom.right.popup:before{border:1px solid transparent!important;border-color:#fafafaeb transparent transparent!important;border-radius:0!important;background:#fafafaeb !important -webkit-box-shadow: 0 0 0 0 #fafafaeb!important;box-shadow:0 0 0 0 #fafafaeb!important;-webkit-tap-highlight-color:transparent!important}
.ui.top.left.popup:before{border:1px solid transparent!important;border-color:#fafafaeb transparent transparent!important;border-radius:0!important;background:#fafafaeb!important;-webkit-box-shadow:0 0 0 0 #fafafaeb!important;box-shadow:0 0 0 0 #fafafaeb!important;-webkit-tap-highlight-color:transparent!important}
.ui.top.right.popup:before{border:1px solid transparent!important;border-color:#fafafaeb transparent transparent!important;border-radius:0!important;background:#fafafaeb!important;-webkit-box-shadow:0 0 0 0 #fafafaeb!important;box-shadow:0 0 0 0 #fafafaeb!important;-webkit-tap-highlight-color:transparent!important}
.ui.left.center.popup:before{border:1px solid transparent!important;border-color:#fafafaeb transparent transparent!important;border-radius:0!important;background:#fafafaeb!important;-webkit-box-shadow:0 0 0 0 #fafafaeb!important;box-shadow:0 0 0 0 #fafafaeb!important;-webkit-tap-highlight-color:transparent!important}
.status.cards .ui.content.popup{min-width:20rem!important;border:1px solid transparent!important;border-radius:5px!important;background-color:#fafafaeb!important;font-family:Arial,Helvetica,sans-serif!important;line-height:2rem!important}
#app .accordion .title{text-shadow:2px 2px 3px #c4cacf,-2px -2px 3px #fff;color:#787878!important;font-weight:900!important}
#app .accordion .content{padding-top:1.5em!important}
.description .wide{margin-top:1em}
.description .wide:nth-child(odd){text-shadow:2px 2px 3px #c4cacf,-2px -2px 3px #fff;color:#787878!important;font-weight:500}
.description .wide:nth-child(8){text-shadow:2px 2px 3px #c4cacf,-2px -2px 3px #fff;color:#787878!important;font-weight:500}
.description .wide:nth-child(10){text-shadow:2px 2px 3px #c4cacf,-2px -2px 3px #fff;color:#787878!important;font-weight:500}
.description .wide:nth-child(12){text-shadow:2px 2px 3px #c4cacf,-2px -2px 3px #fff;color:#787878!important;font-weight:500}
.description .wide:nth-child(16){text-shadow:2px 2px 3px #c4cacf,-2px -2px 3px #fff;color:#787878!important;font-weight:500}
.description .wide:nth-child(18){text-shadow:2px 2px 3px #c4cacf,-2px -2px 3px #fff;color:#787878!important;font-weight:500}
/*.description .wide:nth-child(20){text-shadow:2px 2px 3px #c4cacf,-2px -2px 3px #fff;color:#787878!important;font-weight:500}*/
.description .wide:nth-child(24){text-shadow:2px 2px 3px #c4cacf,-2px -2px 3px #fff;color:#787878!important;font-weight:500}
.stackable .card .content .header{text-align:center;text-shadow:2px 2px 3px #c4cacf,-2px -2px 3px #fff;color:#525151!important;font-weight:500}
.stackable .card .content .header .popup{text-align:left;color:#000!important;text-shadow:0 0 0 #333!important;font-weight:100!important}
.ui.menu .item>img:not(.ui){display:none}
#app .accordion .content .card:not(:first-child){margin-left:10px}
.ui.menu .container .item{text-shadow:2px 2px 3px #c4cacf,-2px -2px 3px #fff;color:#787878!important;font-weight:500}
.right.menu .positive{background:#e6eef4!important;text-shadow:2px 2px 3px #c4cacf,-2px -2px 3px #fff;color:#787878!important;font-weight:500;}
.service-status .table{text-shadow:2px 2px 3px #c4cacf,-2px -2px 3px #fff;color:#787878!important;font-weight:500;}
.celled .aligned .thirteen .fine{width:95%!important;}
.celled .aligned .thirteen .fine small{color:#EEE!important;text-shadow:0px 0px #FFF;}
.service-status>h2{text-shadow:2px 2px 3px #c4cacf, -2px -2px 3px #fff}

.ui.success.message{border-radius: 11px!important;background: #e6eef4!important;box-shadow:  7px 7px 15px #cfd6dc,-7px -7px 15px #fdffff!important;color:#1a531b!important;}
.ui.error.message{border-radius: 11px!important;background: #e6eef4!important;box-shadow:  7px 7px 15px #cfd6dc,-7px -7px 15px #fdffff!important;color:red!important;}
.ui.warning.message{border-radius: 11px!important;background: #e6eef4!important;box-shadow:  7px 7px 15px #cfd6dc,-7px -7px 15px #fdffff!important;color:#F7C709!important;}
/*网络监控美化*/
.ui .service-status .active{border: none!important;border-radius: 10px!important;background: #e6eef4!important;box-shadow: inset 5px 5px 16px #d6dde3,inset -5px -5px 16px #f6ffff!important}
/*按钮*/
.ui .service-status .buttonstyle{margin-top: 3px;margin-left:5px; text-shadow: 2px 2px 3px #c4cacf,-2px -2px 3px #fff;color: #787878!important;font-weight: 500;border-radius: 10px;background: linear-gradient(145deg, #f6ffff, #cfd6dc);box-shadow:  3px 3px 6px #c4cacf,-3px -3px 6px #ffffff;}
.chart-diy{background: #e6eef4;box-shadow:  9px 9px 18px #c4cacf,-9px -9px 18px #ffffff;}