/* 【星语的小木屋】用户在线状态样式 */
.fetl-user-online-status{
    display:grid !important;
    grid-template-columns:repeat(4,1fr);
    gap:calc(1.938rem - 5px);
    margin-bottom:calc(1.938rem - 5px);
}
.fetl-user-online-status>div{
    position:relative;
    background:var(--muted-border-color);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    padding:6px;
    min-width:50px;
    min-height:50px;
    border-radius:var(--main-radius);
    border:2px dashed transparent;
    cursor:pointer !important;
    transition:.15s;
    text-align:center;
    font-weight:400;
    text-shadow:0 0 0;
    line-height:1.44;
}
.fetl-user-online-status>div:hover{
    border-color:var(--theme-color);
}
.fetl-user-online-status>div.fetl-active{
    border:2px solid var(--theme-color) !important;
}
.fetl-user-online-status>div.fetl-active:before {
    position: absolute;
    top: -1px;
    text-align: center;
    font-size: 0.725rem;
    content: ""; 
    font-family: 'remixicon' !important;
    width: 16px;
    height: 16px;
    line-height: 14px;
    opacity: 0.9;
    color: #fff;
    right: -1px;
    left: auto;
    font-weight: 600;
    background-color: var(--theme-color);
    border-radius: 0 var(--main-radius) 0 5px;
    transition: all 0.2s;
    z-index: 1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='12' height='12'%3E%3Cpath fill='white' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px;
}
.fetl-wd-k-all{
    word-break:keep-all;
}
.fetl-user-online-status>div span:first-child{
    width:13px;
    height:13px;
    border-radius:100%;
    box-shadow:0 0 0 2px #fff;
}
.fetl-user-online-status>div span:last-child{
    font-size:.95rem;
    color:var(--muted-color);
}
[data-sta="online"] span:first-child{
    background-color:#36c76c !important;
}
[data-sta="away"] span:first-child{
    background-color:#ffd648 !important;
}

[data-sta="busy"] span:first-child{
    background-color:#ff6692 !important;
}
[data-sta="offline"] span:first-child{
    background-color:#526b7a !important;
}
.fetl-avatar-status-box{
    position:relative;
    display:inline-block;
}
.fetl-online-status-dot{
    position:absolute;
    bottom:1px;
    left:1px;
    width:7px;
    height:7px;
    border-radius:100%;
    box-shadow:0 0 0 2px #fff;
    z-index:2;
}
.fetl-status-online{
    background-color:#36c76c !important;
}
.fetl-status-away{
    background-color:#ffd648 !important;
}
.fetl-status-busy{
    background-color:#ff6692 !important;
}
.fetl-status-offline{
    background-color:#526b7a !important;
}
@media (max-width:991px){
    .fetl-user-online-status>div{
        min-width:auto;
        min-height:auto;
    }
}
@media (max-width:768px){
    .fetl-user-online-status{
        gap:10px;
    }
    .fetl-user-online-status>div{
        min-width:40px;
        min-height:40px;
        padding:4px;
    }
}
.zib-widget .fetl-user-online-status{
    width:100%;
}