/* 覆写semantic */
 .ui.grid {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 2px;
}
.status.cards .wide.column:nth-child(1) {
    margin-top: 0rem !important;
}
.status.cards .wide.column:nth-child(2) {
    margin-top: 0rem !important;
}
.status.cards .description {
    padding-bottom: 0rem !important;
}
/* end */
.ui.success.message{
    background-color: #fff
}
.status.cards .ui.content.popup{
    border-radius: 18px;
    padding-top: 15px;
    padding-bottom: 15px;
    background: rgba(255, 255, 255, .4);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.fi{
    width: 1.5em !important;
    height: 1em !important;
    line-height: 1em !important;
    background-size: cover !important;
    border-radius: 4px;
    border: 1px solid #f1f1f1;
    margin-right: 3px;
}
.ui.styled.accordion, .ui.styled.accordion .accordion{
    background: rgb(255 255 255 / 0%);
}
i.fl-debian {
    color: #d70a53;
}
i.windows.icon {
    color: #00A4EF;
}
i.fl-ubuntu {
    color: #E95420;
}
i.fl-centos {
    color: #9ECE26;
}
.ui.card>.content>.header:not(.ui), .ui.cards>.card>.content>.header:not(.ui){
    margin-top:0;
}
.ui.cards>.card,.ui.message {
    box-shadow:0 3px 6px rgba(140,149,159,0.15);
    border-radius: 18px;
    border: 1px solid #d0d7de;
}
.ui.divider:not(.vertical):not(.horizontal){
    border:none;
    margin: 0.5rem 0 !important;
}
.ui.grid>[class*="thirteen wide"].column{
    width: calc(100% - 40px) !important;
}
.ui.grid>[class*="three wide"].column{
    width: 40px !important;
}
#app .ui.fluid.accordion {
    box-shadow: none;
    margin-bottom: 0rem !important;
}
.status.cards .header > .info.icon{
    cursor: pointer;
}
.ui.styled.accordion .accordion .content, .ui.styled.accordion .card .content{
    padding: 0.7em 1em;
}
.service-status .progress.offline .bar{
    background-color:#ff4a4a !important;
}
.status.cards .wide.column{
    height:1.6rem !important;
    padding: 0 !important;
}
div.ui.styled.accordion > .content {
    padding: 0.5em 0;
}
div.ui.styled.accordion .title {
    padding: 0.75em 0 0.3em;
}
.statistical .description{
    font-size: 15px;
    font-weight: 600;
    margin-top: 0.3em !important;
}
.statistical .content{
    min-height: 63px;
    padding: 0.5em 1em !important;
}
.statistical i.bi{
    margin-right: 5px;
}
.statistical .content:hover{
    cursor: pointer;
}
.bi-server{
    color: rgb(74, 134, 232);
}
i.icon {
    margin-right: 0 !important;
}
.statistical .bi-cpu-fill, .statistical .bi-pin-map-fill{
    color: rgb(0, 172, 13);
}
.statistical .bi-memory{
    color: rgb(153, 0, 255);
}
.bi-hdd-rack-fill{
    color: rgb(152, 0, 0);
}
.bi-speedometer2{
    color: rgb(175 161 1);
}
.bi-diagram-2-fill{
    color: rgb(1 175 151);
}
.bi-diagram-3-fill{
    margin-right: 2px;
}
#chart-ui > .card{
    width: 100%;
    padding: 15px;
    border-radius: 18px;
}
.mb-3{
    margin-bottom:3px;
}
.temperatures{
    font-size: 11px;
    background: rgb(135 156 171);
    color: #fff;
    border-radius: 20px;
    padding: 0 5px;
}
hr{
    border-top: 1px solid #d0d7de;
    border-bottom: none;
}
.statistical-top ol{
    padding: 0;
    margin: 0;
    list-style: none;
}
.statistical-top ol li{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.nb-container{
    padding-top: 75px !important;
}
.nb-container.pdt-15{
    padding-top: 15px !important;
}

/* 嵌套环形进度条 */
.progress-container {
    position: absolute;
    width: 50px;
    height: 50px;
    right: 15px;
    bottom: 35px;
    visibility: hidden;
}

.progress-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform: rotate(-90deg);
}

.progress-ring circle {
    fill: none;
    stroke-linecap: round;
    transition: stroke-dashoffset 1.5s ease-in-out;
}

/* 背景圆环 */
.progress-bg {
    stroke: #f0f0f0;
}

/* 蓝色进度条 */
.blue {
    stroke: #0a94f2;
}

/* 黄色进度条 */
.yellow {
    stroke: #0a94f2;
}

/* 灰色进度条 */
.gray {
    stroke: #9E9E9E;
}
/* 离线状态进度条颜色 */
.progress-container.offline .yellow, .progress-container.offline .blue{
    stroke: slategray !important;
}

.description-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0 !important;
    gap: 12px;
}
.dp-item {
    display: flex;
    flex-direction: column;
}
.dp-footer {
    font-size: 13px;
    padding-left: 60px;
    margin-top: -5px;
}
.dp-header {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.dp-header i, .dp-body i{
    width: 20px;
}
.dp-header span, .dp-body span{
    width: 40px;
}
.dp-num{
    text-align: right;
    font-size: 13px;
}
.dp-header .dp-bar{
    flex: 1;
    height: 7px;
    background: #f0f0f0;
    border-radius: 5px;
    overflow: hidden;
}
.dp-bar-fill {
    height: 100%;
    width: 0%;
    background: rgb(10, 148, 242);
    transition: width .1s ease, background-color .1s ease;
    border-radius: 5px;
    transition-duration: 300ms;
    min-width: unset;
}
.divider {
    border-top: 1px solid #dfe6ed;
    margin: 8px 0;
    width: 100%;
}

.description-network {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    justify-content: center;
}
.dpn-up,.dpn-down{
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 5px;
    align-items: center;
    justify-content: center;
}
.dpn-item-header{
    font-size: 16px;
    font-weight: 600;
    background: #fff;
    padding: 3px 10px;
    border-radius: 21px;
    border: 1.5px solid #d0d7de;
    display: flex;
    width: 125px;
    transition: all 0.2s ease-in-out;
}
.dpn-item-header i {
    width: 16px;
}
.description-network span {
    flex: 1;
    text-align: center;
}
.dp-body{
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 0 !important;
}


.specific-info{
    display: flex;
    flex-direction: row;
    margin-top: 5px;
    gap: 5px;
    width: 100%;
    padding: 0 2px;
}
.specific-info span,.specific-info.offline span {
    background: #7080907d;
    color: #fff;
    padding: 0px 4px;
    font-size: 0.8rem;
    border-radius: 3px;
}
span.si-v4{
    background: #00a43319;
    color: #00713fde;
}
span.si-v6{
    background: #0011ee0f;
    color: #0600abac;
}
span.si-bw{
    background: #287cff30;
    color: #0049a5ac;
}
span.si-rt{
    background: #ee00e617;
    color: #ab0081ac;
}
span.si-pr{
    background: #ffcc2942;
    color: #884b00ac;
}

#world-map{
    margin-top: 0;
}
#world-map .card{
    width: 100%;
    padding: 20px;
}
#world-map svg{
    margin: 0 auto;
}
#world-map svg path {
    fill: #f6f8fa;
    stroke: #d0d7deba;
    stroke-width: .592;
    transition: fill .5s;
}
#world-map svg circle{
    fill: #0a94f2;
    stroke: #d0d7deba;
    stroke-width: .592;
    transition: fill .5s;
    display: none;
}
#world-map svg path:hover, #world-map svg circle:hover {
    stroke: #00ac0d;
    cursor: pointer;
}
.bs-warn{
    background: #FF9800;
    border-color: #FF9800;
    color: #ffffff;
}
.bs-danger{
    background: #F44336;
    border-color: #F44336;
    color: #ffffff;
}
.world-map-tooltip {
  position: absolute;
  color: #191919;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  pointer-events: none; /* 不影响鼠标事件 */
  display: none;
  z-index: 9999;
  background: rgba(255, 255, 255, .4);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 4px 0 rgba(34, 36, 38, .12), 0 2px 10px 0 rgba(34, 36, 38, .15);
  min-width: 150px;
}
.world-map-tooltip .map-servers span{
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 20px;
    margin-right: 5px;
}
.world-map-tooltip .online{
    background: #00ac0d;
}
.world-map-tooltip .offline{
    background: #F44336;
}
#mapRegionName{
    position: absolute;
    bottom: 20px;
    left: 20px;
}
.ui[class*="very basic"].table tr > :nth-child(n+7):nth-child(-n+11){
    display: none;
}

/* 嵌套环形进度条 end */
@media (max-width:1580px) {
    .ui.container {
        width: 95% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}
@media screen and (min-width:767.2px) and (max-width:960px) {
    .ui.four.cards>.card{
        width: calc(50% - 1.5em);
    }
}
@media screen and (min-width:960.2px) and (max-width:1290px) {
    .ui.four.cards>.card{
        width: calc(33.33% - 1.5em);
    }
}
@media screen and (min-width:700px) and (max-width:950px) {
    .ui.five.cards>.card{
        width: calc(50% - 1.5em) !important;
        margin: 0.75em !important;
    }
    .ui.stackable.cards .card:first-child{
        margin-top: 0.75em !important;
    }
    .ui.stackable.cards{
        display: flex !important;
    }
}
@media screen and (min-width:950.2px) and (max-width:1250px) {
    .ui.five.cards>.card{
        width: calc(33.33% - 1.5em);
    }
}
@media screen and (min-width:1250.2px) and (max-width:1500px) {
    .ui.five.cards>.card{
        width: calc(25% - 1.5em);
    }
}
@media only screen and (max-width: 767px) {
    /*.ui.menu:not(.vertical) .right.menu{
        margin-left:0 !important;
    }*/
    .statistical{
        padding: 5px;
    }
    .statistical.doubling.cards>.card {
        width: calc(50% - 1.5em) !important;
        margin-bottom: 0.5em !important;
        margin-top: 0.2em !important;
    }
    .statistical.doubling .ui.card:nth-child(even) {
        margin-left: 0.5em !important;
    }
    .statistical.doubling .ui.card:nth-child(odd) {
        margin-right: 0.5em !important;
    }
    .statistical .description{
        font-size: 14px !important;
        font-weight: normal !important;
        white-space: nowrap;
    }
    div.ui.styled.accordion > .content{
        margin-top: 0.8rem;
    }
    #world-map .card {
        padding: 5px 0 !important;
    }
}
@media only screen and (max-width: 400px) {
    .statistical-top ol li{
        font-size: 12px;
    }
}
/* dark style */
@media (prefers-color-scheme: dark) {
    body {
        background: #1b1b1d !important; 
    }
    .ui.cards>.card{
        background: #242526 !important;
        border-color: #242526 !important;
    }
    .ui.fixed.menu.nb-menu{
        background: #242526 !important;
    }
    .ui.styled.accordion .active.title,.ui.card>.content>.description, .ui.cards>.card>.content>.description,.ui.card>.content>.header, .ui.cards>.card>.content>.header,.ui.menu .item,.ui.menu .active.item,.footer a{
        color: rgba(255,255,255,.7) !important;
    }
    .ui.inverted.segment, .ui.primary.inverted.segment{
        background: #242526 !important;
        color: rgb(255 255 255 / 70%) !important;
    }
    .status.cards .ui.content.popup{
        background: #242526;
        color: rgba(255,255,255,.7);
        border-color: #414141;
    }
    .ui.left.center.popup:before, .ui.right.center.popup:before{
        background: #242526;
        box-shadow: 1px -1px 0 0 #414141;
    }
    .footer .ui a{
        color: rgb(190 190 190) !important;
    }
}