.h-chat-header .toolbar i {
    color: white;
}

.h-chat-header .status {
    position: absolute;
    background-color: white;
    width: 124px;
    height: 112px;
    top: 32px;
    z-index: 9;
    border: 1px solid #a9a9a9;
    border-spacing:0px;
}

    .h-chat-header .status span {
        display: block;
        text-align: center;
        border-spacing:0px;
        border: 1px solid #ccc;
    }

        .h-chat-header .status span:hover {
            background-color: #e1e1e1;
        }

.h-chat-part {
    width: 512px;
    top: 50%;
    position: absolute;
    left: 35%;
    height: 366px;
    border: 1px solid #ccc;
    box-shadow: 5px 5px rgba(102,102,102,.1);
    border-radius: 2px;
    background-color: white;
}


    .h-chat-part > .h-chat-header {
        background-color: #215eba;
        height: 29px;
        border-bottom: 1px solid #ccc;
        padding: 2px 9px;
        line-height: 26px;
        cursor: pointer;
    }

        .h-chat-part > .h-chat-header > div.title {
            float: left;
            font-weight: bold;
            color:white;
        }

        .h-chat-part > .h-chat-header > div.toolbar {
            float: right;
        }


    .h-chat-part > .h-chat-body {
        position: relative;
        height: 332px;
    }

        .h-chat-part > .h-chat-body > div.scroll-part {
            background-color: #e1e1e1;
            height: 296px;
            overflow: auto;
        }

            .h-chat-part > .h-chat-body > div.scroll-part > ul > li {
                padding: 10px 10px;
                margin-bottom: 3px;
                min-height: 43px;
            }

                .h-chat-part > .h-chat-body > div.scroll-part > ul > li.h-chat-me {
                    text-align: right;
                }

                .h-chat-part > .h-chat-body > div.scroll-part > ul > li.h-chat-others {
                    text-align: left;
                }

                .h-chat-part > .h-chat-body > div.scroll-part > ul > li.h-chat-me > span {
                    float: right;
                }

                .h-chat-part > .h-chat-body > div.scroll-part > ul > li.h-chat-others > span {
                    float: left;
                }

                .h-chat-part > .h-chat-body > div.scroll-part > ul > li.h-chat-me > span.user-img {
                    margin-left: 5px;
                }

                .h-chat-part > .h-chat-body > div.scroll-part > ul > li.h-chat-others > span.user-img {
                    margin-right: 5px;
                }

                .h-chat-part > .h-chat-body > div.scroll-part > ul > li.h-chat-me > span.user-msg {
                    background: #b7dcfe;
                    color: #317787;
                }

                .h-chat-part > .h-chat-body > div.scroll-part > ul > li.h-chat-others > span.user-msg {
                    background: #ffda87;
                    color: #a07617;
                }

                .h-chat-part > .h-chat-body > div.scroll-part > ul > li > span.user-img > img {
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                }

                .h-chat-part > .h-chat-body > div.scroll-part > ul > li > span.user-msg {
                    min-height: 20px;
                    display: inline-block;
                    min-width: 40px;
                    padding: 3px 4px;
                    border-radius: 4px;
                }

        .h-chat-part > .h-chat-body > div.typing-part {
            position: absolute;
            bottom: 0;
            background-color: white;
            display: block;
            width: 100%;
            height: 37px;
        }

            .h-chat-part > .h-chat-body > div.typing-part > textarea.texting {
                height: 40px;
                width: 464px;
                margin-top: 5px;
            }

            .h-chat-part > .h-chat-body > div.typing-part > a.send-this {
            }