.online-widget {
    display: block;
    position: fixed;
    right: 50px;
    width: 400px;
    background: #a9a9a9;
    border-radius: 10px 10px 0 0;
    z-index: 9999;
    bottom: -300px;
}

.online-message-box {
    height: 300px;
    overflow-y: auto;
    background: linear-gradient(to top, #ffffff, #d0d0d0);
    border-radius: 5px;
    margin: -5px 1px 1px 1px;
    position: relative;
    padding: 3px;
    z-index: -1;
}

.online-message-me{
    padding: 8px;
    display: block;
    max-width: 85%;
    float: right;
    background: #f1f1f1;
    margin: 3px;
    border-radius: 15px 15px 0 15px;
    margin-right: 42px;
}

.online-message-manager{
    padding: 8px;
    display: block;
    max-width: 85%;
    float: left;
    background: #97bbd3;
    margin: 3px;
    border-radius: 15px 15px 15px 0;
    margin-left: 42px;
}

.online-message-item {
    width: 100%;
    display: flow-root;
    position: relative;
    margin-bottom: 6px;
    margin-top: 5px;
}

.online-message-form{
    position: absolute;
    left: 5px;
    bottom: 10px;
    width: 370px;
}

.online-message-button {
    background: #9aacc4;
    border: 0px;
    border-radius: 5px;
    padding: 5px 8px;
    color: white;
}

.online-message-button:focus{
    outline:none;
}

.online-message-input {
    width: 325px;
    margin-left: 8px;
    padding: 5px;
    border-radius: 6px;
    border: 1px solid #a9a9a9;
}

@media all and (max-width:450px){
    .online-widget {
        right: 1px;
        width: calc(100vw);
    }

    .online-message-input {
        width: calc(100vw - 60px);
    }
}

.online-message-input:focus{
    outline:none;
}

.online-message-title {
    color: white;
    /*font-weight: bolder;*/
    text-align: right;
    cursor: pointer;
    background: #5E5E5E;
    border-radius: 10px;
    padding: 10px 20px;
}

.online-message-icon{
    position: absolute;
    font-weight: normal;
    font-size: 10px;
    border: 2px solid white;
    padding: 3px 4px 3px 4px;
    border-radius: 24px;
}

.online-message-last-space{
    height: 50px;
}

.online-manager-username{
    padding: 3px 15px;
}

.online-my-icon{
    float: right;
    bottom: -10px;
    position: absolute;
    right: 0px;
}

.online-manager-icon{
    float:left;
    bottom: -10px;
    position: absolute;
}

.online-manager-icon > img{
    border-radius: 20px;
}