.joperator
{
    width: 250px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #f8f8f8;
    border-bottom: 10px solid #c4c4c4;
    border-radius: 10px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.19);
    
    transition: .2s all ease-in-out;
}

.joperator[data-state="offline"]
{
    border-bottom-color: #cc0000 !important;
}

.joperator[data-state="online.available"]
{
    border-bottom-color: #1ab36d !important;
}

.joperator[data-state="online.busy"]
{
    border-bottom-color: #ff7800 !important;
}

.joperator:hover
{
    background-color: #efefef;
}

.joperator-image
{
    padding: 20px;
}

.joperator-image img
{
    border-radius: 4px;
}

.joperator-fullname
{
    font-size: 16px;
    font-weight: 500;
}

.joperator-state
{
    width: 100%;
    height: 20px;
    text-align: center;
}

.joperator-controls
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.joperator-controls a
{
    white-space: nowrap;
}

.joperator-controls a i
{
    margin-right: 6px;
    font-size: 14px;
}
.joperator:not([data-state="online.available"]) a
{
    background-color: #bcbcbc !important;
    border-color: transparent !important;
}