#chat-box {
    display: table;
    position: relative;
    width: 100%;
    height: 100%;
    border-collapse: collapse;

    > div {
        display: table-row;
    }

    #chat-header {
        position: absolute;
        height: 45px;
        left: 0;
        top: 0;
        right: 0;
        padding: 12px;
        overflow: hidden;
        border-bottom: @scaled-one-px-value-ie solid @border-toolbar-ie;
        border-bottom: @scaled-one-px-value solid @border-toolbar;
        background-color: @background-toolbar-ie;
        background-color: @background-toolbar;

        label {
            .font-size-medium();
            .font-weight-bold();
            margin-top: 2px;
        }
    }

    .area {
        position: absolute;
        border-bottom: 1px solid @border-toolbar-ie;
        border-bottom: 1px solid @border-toolbar;
        overflow: hidden;
    }

    .ps-scrollbar-y-rail {
        margin-top: 5px;
        margin-bottom: 5px;
        right: 4px;

        .rtl & {
            right: unset !important;
            left: 4px;
        }
    }

    #chat-title {
        label {
            padding: 18px 20px;
            .font-size-large();
        }
    }

    #chat-users {
        left: 0;
        top: 0;
        right: 0;
        height: 125px;
        padding-bottom: 5px;
        padding-top: 50px;
        .ps-scrollbar-y-rail {
            margin-top: 50px;
        }
        ul {
            margin: 0;
            padding: 0;
            overflow: hidden;

            li {
                list-style: none;
                padding: 2px 0 2px 20px;
                overflow: hidden;

                &.offline {
                    display: none;
                }
                .rtl & {
                    padding: 2px 20px 2px 0;
                }
            }
        }

        .color {
            display: inline-block;
            vertical-align: middle;
            margin: 0 10px 3px 0;
            width: 6px;
            height: 6px;
            border-radius: 6px;

            .rtl & {
                margin: 0 0 3px 10px;
            }
        }

        .name {
            .font-size-medium();
            .font-weight-bold();
            display: block;
            padding: 0 10px 0 0;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            line-height: normal;
            height: 16px;
            .rtl & {
                padding: 0 0 0 10px;
            }
        }
    }

    #chat-messages {
        left: 0;
        top: 70px;
        right: 0;
        bottom: 110px;
        .font-size-medium();

        ul {
            margin: 0;
            padding: 0;

            li {
                display: flex;
                list-style: none;

                padding: 5px 10px 8px 20px;
                white-space: pre-wrap;
                white-space: -moz-pre-wrap;
                white-space: -o-pre-wrap;
                word-wrap: break-word;

                .rtl & {
                    padding: 5px 20px 8px 10px;
                }

                .user {
                    .font-weight-bold();
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                .user-name {
                    color: @text-normal-ie;
                    color: @text-normal;
                    .font-size-medium();
                    .font-weight-bold();
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .color {
                    display: inline-block;
                    width: 26px;
                    height: 26px;
                    border-radius: 20px;
                    border-width: @scaled-two-px-value;
                    margin-right: 8px;
                    vertical-align: middle;
                    background-color: #ffffff;
                    background-size: cover;
                    background-position: center;
            
                    text-align: center;
                    line-height: 26px;
                    color: #ffffff;
                    font-weight: 700;
            
                    .rtl & {
                        margin-right: 0px;
                        margin-left: 8px;
                    }
                }

                .user-content {
                    flex: 1;
                    overflow: hidden;
                    line-height: 12.65px;
                }

                .message {
                    word-wrap: break-word;
                    width: 100%;
                    &.user-select {
                        cursor: text;
                    }
                    //&.service {
                    //    text-align: center;
                    //    color: #CECECE;
                    //    text-shadow: 0 1px 0 #fff;
                    //    padding-right: 20px;
                    //}
                }
            }
        }
    }

    #chat-options {
        #chat-options-ct {
            padding: 10px 20px 40px 20px;
            height: 100%;
        }

        textarea {
            width: 100%;
            height: 100%;
            resize: none;
            margin-bottom: 5px;
            border: 1px solid @border-regular-control-ie;
            border: 1px solid @border-regular-control;
            .font-size-medium();

            &:focus {
                border-color: @border-control-focus-ie;
                border-color: @border-control-focus;
                .box-shadow(@shadow-fill-input-ie);
                .box-shadow(@shadow-fill-input);
            }
        }
    }
}