.jsxc_online, .jsxc_chat, .jsxc_away, .jsxc_xa, .jsxc_dnd {
    &:before {
        content: " ";
        display: block;
        width: 12px;
        height: 12px;
        border-radius: 100%;
        line-height: 12px;
        text-align: center;
        color: #fff;
        z-index: 99;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
        box-sizing: content-box;
    }
}

.jsxc_online:before {
    background-color: $state_online;
}

.jsxc_chat:before {
    background-image: image-url("presence_chat.svg");
    background-color: $state_chat;
}

.jsxc_away:before {
    background-image: image-url("presence_away.svg");
    background-color: $state_away;
}

.jsxc_xa:before {
    background-image: image-url("presence_xa.svg");
    background-color: $state_xa;
}

.jsxc_dnd:before {
    background-image: image-url("presence_dnd.svg");
    background-color: $state_dnd;
}

.jsxc_hidden {
    display: none;
}

.jsxc_invalid {
    border: 2px solid $invalid_border !important;
}
