.wifi0{
    background:url("../images/wifi0.png");
    width:32px;
    height:28px;
    background-position: center;
    background-size: cover;
    margin-left:10px;
}
.wifi1{
    background: url("../images/wifi1.png");
    width: 32px;
    height: 28px;
    background-position: center;
    background-size: cover;
    margin-left: 10px;
}
.wifi2 {
    background: url("../images/wifi2.png");
    width: 32px;
    height: 28px;
    background-position: center;
    background-size: cover;
    margin-left: 10px;
}
.wifi3 {
    background: url("../images/wifi3.png");
    width: 32px;
    height: 28px;
    background-position: center;
    background-size: cover;
    margin-left: 10px;
}
.wifi4 {
    background: url("../images/wifi4.png");
    width: 32px;
    height: 28px;
    background-position: center;
    background-size: cover;
    margin-left: 10px;
}
.wifi5 {
    background: url("../images/wifi5.png");
    width: 32px;
    height: 28px;
    background-position: center;
    background-size: cover;
    margin-left: 10px;
}
.wifioff {
    background: url("../images/wifioff.png");
    width: 32px;
    height: 28px;
    background-position: center;
    background-size: cover;
    margin-left: 10px;
}



.card-header>div {
    display: flex;
    height: 40px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.nav-link.active {
    color: var(--bs-nav-link-color);
}

.nav-link{
}
.nav-link .icon{
    width: 30px;
    margin-top: -3px;
    margin-right: 10px;
}

.card-body .icon{
    width: 20px;
    margin-top: -4px;
}

.card-text .icon{
    width: 20px;
    margin-top: 0;
}
.m-icon1 {
    background-image: url(../images/wx/m-online.png);
    background-size: cover;
    background-position: center;
    width: 30px;
    height: 30px;
    margin-top: -4px;
    margin-right: 10px;
}

.m-icon2 {
    background-image: url(../images/wx/m-warn.png);
    background-size: cover;
    background-position: center;
    width: 30px;
    height: 30px;
    margin-top: -4px;
    margin-right: 10px;
}

.m-icon3 {
    background-image: url(../images/wx/m-state.png);
    background-size: cover;
    background-position: center;
    width: 30px;
    height: 30px;
    margin-top: -4px;
    margin-right: 10px;
}

.m-icon4 {
    background-image: url(../images/wx/m-weight.png);
    background-size: cover;
    background-position: center;
    width: 30px;
    height: 30px;
    margin-top: -4px;
    margin-right: 10px;
}

.m-icon5 {
    background-image: url(../images/wx/m-meter.png);
    background-size: cover;
    background-position: center;
    width: 30px;
    height: 30px;
    margin-top: -4px;
    margin-right: 10px;
}

.user-img-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.user-img {
    height: 100px;
    width: 105px;
    border-radius: 50%;
    background: #0083ff;
    background-size:contain;
    background-position: center;
    background-image: url('../images/wx/logo.png');
    background-repeat: no-repeat;
    border: 2px solid #ebebeb;
}

.waterfall {
    column-count: 3;
    column-gap: 20px;
    break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}

.waterfall > div {
    height: 100%;
    overflow: auto;
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
    .waterfall {
        column-count: 3;
    }
}

@media screen and (min-width: 768px) and (max-width: 992px) {
    .waterfall {
        column-count: 2;
    }
}

@media screen and (max-width: 768px) {
    .waterfall {
        column-count: 1;
    }
}