scroll {
    width: 30%;
    border: 1px solid grey;
    overflow: scroll;
    display: inline-block;
    border-radius: 5px;
}

.scroll-width-thin {
    scrollbar-width: thin;
}

.alert-OnlineChatSupport {
    position: fixed;
    right: 10px;
    bottom: 10px;
    background: #fff;
    width: 400px;
    border-radius: 5px;
    z-index: 1005;
    text-align: justify;
}

.chat_container {
    box-shadow: 0 5px 40px rgba(0, 0, 0, .16) !important;
    position: fixed;
    right: 10px;
    bottom: 10px;
    background: #fff;
    width: 400px;
    border-radius: 5px;
    z-index: 1005;
}

    .chat_container .chat_header {
        padding: 10px;
        border-radius: inherit;
        background-color: #e8862d;
        height: 60px;
        border-bottom-left-radius: initial;
        border-bottom-right-radius: initial;
        position: relative;
        padding-left: 65px;
    }

        .chat_container .chat_header .headerBtns {
            border-radius: 50%;
            padding: 7px;
            position: absolute;
            cursor: pointer;
        }

            .chat_container .chat_header .headerBtns img {
                width: 16px;
            }

            .chat_container .chat_header .headerBtns:hover {
                background-color: #c82f29;
            }

        .chat_container .chat_header .closechat {
            left: 10px;
            top: 15px;
        }

        .chat_container .chat_header .setting {
            left: 40px;
            top: 15px;
        }


        .chat_container .chat_header .userlist {
            display: block;
            float: right;
        }

            .chat_container .chat_header .userlist li {
                padding: 0;
                border-radius: 50%;
                border: 1px solid #db241e;
                cursor: pointer;
                position: relative;
            }

                .chat_container .chat_header .userlist li:hover {
                    border: 1px solid #bf5f5c;
                }

            .chat_container .chat_header .userlist img {
                height: 38px;
                width: 38px;
                border-radius: inherit;
                -webkit-filter: sepia(0);
                filter: sepia(0);
                -webkit-transition: .3s ease-in-out;
                transition: .3s ease-in-out;
            }

                .chat_container .chat_header .userlist img:hover {
                    -webkit-filter: sepia(100%);
                    filter: sepia(100%);
                }

        .chat_container .chat_header .Title {
            display: block;
            float: right;
            color: #fff;
            margin-right: 10px;
        }

            .chat_container .chat_header .Title .mTitle {
                font-weight: bold;
                font-size: 15px;
            }

            .chat_container .chat_header .Title .sTitle {
                font-size: 12px;
            }

    .chat_container .body-footer {
        position: relative;
    }

        .chat_container .body-footer .overlay-chatbody {
            display: none;
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.99);
            z-index: 2000;
        }

            .chat_container .body-footer .overlay-chatbody.active {
                display: block;
            }

            .chat_container .body-footer .overlay-chatbody .form-horizontal {
                padding: 50px 15px;
            }

        .chat_container .body-footer .chat-type {
            padding: 13px 20px;
            background-color: #aed9b1;
            color: #fff;
            text-align: center;
            display: none;
        }

            .chat_container .body-footer .chat-type.active {
                display: block;
            }

.hide {
    display: none !important;
}

.chat_container .chat_body {
    padding: 10px;
    border-radius: inherit;
    position: relative;
}

    .chat_container .chat_body .content {
        height: 350px;
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXIAAAI6BAMAAADI6d6mAAAAKlBMVEX////////////////////////////x8fH////39/f7+/v09PT9/f3s7OyTXgTDAAAABnRSTlMB1SuUj71gDVe7AAAI40lEQVR42u3dPW/bRhgHcAL5Dh06d+iYz9ChH6F7gfZReLxZhGhlyZCtKwla9pCFhPyyRpClrBQUtWsDO/4wNXlO4ia2TJM63f2R/yHIZuCHB6fnXvjcXRAEP/0o29qw+f9UfGpvfglu2rPXAieXF89v5L8JoFz+vAm5QMrlefAzqPxV8Cuo/I/gB1D570EBKleBgMrlcfllXrcYUD5t5EeAcl8b5ZRT/n3IdYUqD1NUubqC7efHKapcLSpQuYTXsFnxAlWur1DlZQoqD0eouSWuQOXhW47+lLfOiSNUuayWqHKdFagjkYIdQyVnzNnPfckt4Ye4bkO8fB4e/V23ncvtz1siM0rvXK6s9/LQktx+i2DljDljLhIv6jYDjPnYDGSAMW8rZ8wdxNzS6L+HmMd2Zlz25RbXRJRTTrl9+XS5Z/moqaDJess3o31X4Zjan8O+cv2xwpjzfiMPhwIqLytU+VxQ5Rew8oQx37t8AitfpahylaDKpTxEletsDCqH/YVSTjnllFNOOeWUU0455ZRTTjnllFNOOeWUU0455ZRTTjnllFO+1zZIYeUHBag8Cg+qnvLJwkktRiTrUdVLfjo/yZZO5HKa9JGrkYh+WTmRS3nRQ97USnU5T6lPTKt6yHV21F3e1KfpDgVTata0RdFDfkNPO8uNOXfTW0TUu85yUyh16kw+6ywfOpXrWdoz5hM38l6/0Pmd/8GyYiEi4diJvN9IFNZ/fexkJFqP+s1bsiOZuqh/jb6etjxZrmfxyEHIgWe5g4KrOcp7yAdDVPkkQZUnMIe2vpa/jVJQeaXGoHInK5wdyVcFqnzfVzruTq4TVLlg5sVajpkXa7keo8pxTlZ+I4fMi0FzLRPifDGY1q1A7S1cE1FOOeWUU0455ZRTTjnllDtpOp8XmPJsnnd8vsuxPBqLhFeI8rqEQHfb13QrN/uC3bbB3cqNWQ8B5f+7o5pyyrc11fRzBSg3tWzdNsEdy2u0ngmgXF1WUi4R5bKJ444fNTnLpZxyyimnnHLKKaeccsq/C7kyz2/FhSW5tleCX5lmJ+Z6Gs+vEXvLdDY/U0M4ebWejc4gX2zPDppjm1EBJ5+Y386qgpNHZo9q30eMdyB/YT6u5Xhy2TRBTwDlTdD3XsS+k3y+OXJwzmQn8jro+07nOxpDo6UMCki5XlQl6Cw3Wk5A5bKYo8qja1S5FLByrkMpp5xyyimnXHSeF5jybJ5/fYEkhnwwFtlcI8qb67YmgHJzt4j/dwB8KzeLeDXEk9/uyQLKVeVmjcMxlHJw+cx80BwCxvzeD5rsLZRTTjnllFNOOeWUU0455ZRTTjnllFNOOeWUU0455ZS7lq/jClOuRgVozM8L0N6iR6j9fM/ncnYpf2oZUnMpVDZLRfSscCl/+jHLmUh4XXeywVvBkg9SWRVy8y+rsHqLqLHMRcJhp3eGdijv8KDXcVn/TXyeupV3qHEMm6Ol0dxxbpF/7B+0PG9KfF7uWq6z3Pa8xRz8jXY+41ITVLn9RjnllFNOOeWO5Sd1KwHlq0XTAOWWZrmUU0455ZRTTjnllH+v8vJIRLI4FZGs8EM+aLd7rRci6kol5vEsP+QtPy+ZDyNlJd3ezbIhD9vdBXH7beStTnzp5wNZj1rRF+uxiB5tbH/3VGet5bJp9fk4agoSVtbLEqI4bS2X8sKnhKcP2sslW/pEb9MhP8l1duRT0JP2ctGzyiP6BFa+Qu0tt9EE/IU+IeaniVfw9v18M/IL3jq3tBz999eilvlc+Xb7lm4zwXjCLHdvLZy1nbcciWfytnNFrqApp7xje1+hyrMUVK6TMag8Sueg8rKy/hhKYKmz2K9GtyO/YVvfCbMjXxUiGaQ8F/s3kVqRN/XcagwoN+GeA8rNBnu3h9idym/TiuW8aEN+S7acF23IP3UTu19lbMiz24cQXxZwv1CuiSin3LQ1qrx/snclX6Wg8h2cPA5QQ+5IvovD3gFSyNUsPiicyruGPDuS9aVTeceQh+O7fxsAhbyZPX9e3rqQd90VyO/870Yedvw7M+yWgDMu009WsHLEmJsNnAmgvDkf/iIBlDc56XNJAJJcf6zulD5BreY2o/xL6RPWOnS6OOQKmnLKKaeccsopp5xyyu9p7/NDTLk6yGdLSHlWiLyrAOXqWkTCMaDcVCXMAeVmp6kElJu94AGg/MT0do5ElPvXwgpVfs+nJRC5uoTt56slqlx/c5cGTG5R//oqf/SRgKGv8vkjVbxrX+VqnDyykKk8la+K7VW8x4WvuWWyvY7hnjWMJ3KdiN62wLrnDQFP5HXAJ5DyupNvO91wz2F0T+RzEdl2ukF/qPyUqyZZbyuSWid+yk1H2ZoXy/QB+ZlT+eShSfid/vLQvMXlzsmnhLg1L+qHRv+ycCj/FOxJl94SuryU4zw3bct9duHowV/oxuEe4fpW/vBzGPfc0fEltxx7vfYfbhmJBj7Lt47+54LVvvTzBFSufLvwp7XcaT7vJZ8LqvxCGPN9y89TVLn27U6u9vl8jZrPgcdQv+ct2+T6GFVeLkHl4RVqVuzygidH/37yM1i5UE455ZRTTjnllFNOOeWUU/69yXXrjeDmoussLkT0zAd5+9t73jcPkK2vRf5aeiB/yu095gGySatXQuzLn3JhknmAbJD2v0032G/Ibx8gU0npw71zT7ujyjxAVvpw75x29FpNsOeQeyR3FfL+cichDz/EcW+5k+3rqBDBnLdQTjnl+uQMVD49nBSQcp2IWkLKw0JkCimPKpENZsyrHdz0bU1+eHKC2VvUYrF4UK6Wor0ukHo4K54e5gWmXE/9rmLgviLllFNOOYZc5aBynaHKV0vU3rJA7eePX1Lmq/zx9xd8lQ8qyvcuL2B/obD9/PE1sLf5/NFDCN7Kw8sKdca1iTnLpZxyyimnnHLKKaeccsopp5xyyimnnHLKKaeccsopp5xyyimnnHLKKaeccgfyAhSugh9A5b8Hv4LK/wh+BpW/Cp6Byp8HwW+Q8D+DIHj2GhD+4ibkQfDTj3DwN78EwX/aUwvU8OxFjwAAAABJRU5ErkJggg==");
        overflow: hidden;
    }

        .chat_container .chat_body .content:hover {
            overflow-y: auto;
        }

        .chat_container .chat_body .content .MoreMessageDiv {
            width: 100%;
            font-size: 1.8em;
            text-align: center;
        }

        .chat_container .chat_body .content .receiver_content .receiver_message {
            width: 250px;
            padding: 10px;
            border-radius: 3px;
            margin: 10px 5px;
            margin-right: 10px;
            background-color: #e7f2fd;
            position: relative;
            /*white-space: pre-line;*/
            padding-bottom: 25px;
        }

            .chat_container .chat_body .content .receiver_content .receiver_message .send-date {
                position: absolute;
                bottom: 2px;
                left: 5px;
                font-size: 12px;
                color: #91a58f;
            }

            .chat_container .chat_body .content .receiver_content .receiver_message:before {
                font: normal normal normal 16px/1 FontAwesome;
                content: "\f0da";
                color: #e7f2fd;
                position: absolute;
                bottom: -2px;
                right: -5px;
            }

        .chat_container .chat_body .content img.chat-image {
            width: 100%;
            cursor: pointer;
        }

        .chat_container .chat_body .content .receiver_content .download-file {
            color: #41a732;
            font-weight: bold;
            white-space: initial;
        }

            .chat_container .chat_body .content .receiver_content .download-file:hover {
                color: #63e450;
            }

        .chat_container .chat_body .content .sender_content {
            direction: ltr;
            position: relative;
            padding-left: 42px;
        }

            .chat_container .chat_body .content .sender_content .supporter {
                border-radius: 50%;
                position: absolute;
                left: 0px;
                bottom: 0px;
                background-color: #d2d2d2;
            }

                .chat_container .chat_body .content .sender_content .supporter img {
                    border-radius: inherit;
                    width: 40px;
                    height: 40px;
                }

            .chat_container .chat_body .content .sender_content .sender_message {
                width: 250px;
                padding: 10px;
                border-radius: 3px;
                margin: 5px;
                margin-left: 10px;
                background-color: #e8fae9;
                position: relative;
                direction: rtl;
                padding-bottom: 25px;
                /*white-space: pre-line;*/
            }

                .chat_container .chat_body .content .sender_content .sender_message:before {
                    font: normal normal normal 16px/1 FontAwesome;
                    content: "\f0d9";
                    color: #e8fae9;
                    position: absolute;
                    bottom: -2px;
                    left: -5px;
                }

                .chat_container .chat_body .content .sender_content .sender_message .send-date {
                    position: absolute;
                    bottom: 2px;
                    right: 5px;
                    font-size: 12px;
                    color: #91a58f;
                }

    .chat_container .chat_body .emojiList {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 250px;
        overflow-y: auto;
        display: none;
        background-color: #fff;
    }

        .chat_container .chat_body .emojiList.active {
            display: block;
        }

        .chat_container .chat_body .emojiList .emojiItem {
            font-size: 30px;
            padding: 5px;
            width: 43px;
            height: 50px;
            text-align: center;
            display: flex;
            float: right;
            cursor: pointer;
            align-items: center;
            -webkit-transition: .3s ease-in-out;
            transition: .3s ease-in-out;
        }

            .chat_container .chat_body .emojiList .emojiItem:hover {
                font-size: 35px;
            }

#ModalImage .modal-content {
    text-align: center;
}

    #ModalImage .modal-content #zoom-image-chat {
        max-width: 100%;
    }
/*.chat_container .chat_body .emojiList .emojiItem:nth-child(9n+10) {
                    clear: both;
                }*/
.chat_container .chat_footer {
    display: flex;
    padding: 10px;
    border-radius: inherit;
    border-top-left-radius: initial;
    border-top-right-radius: initial;
}

    .chat_container .chat_footer.press {
        box-shadow: 0 13px 29px rgba(170, 170, 170, 0.16) !important
    }


    .chat_container .chat_footer .textDiv {
        display: block;
        float: right;
        width: calc(100% - 105px);
    }

        .chat_container .chat_footer .textDiv textarea {
            width: 100%;
            border: none;
            resize: none;
            height: 50px;
            overflow-y: auto;
            box-sizing: border-box;
            line-height: 21px;
            padding: 14px 5px;
        }

            .chat_container .chat_footer .textDiv textarea.empty {
                border: 1px solid #db241e;
            }

            .chat_container .chat_footer .textDiv textarea:focus {
                outline: none;
            }

    .chat_container .chat_footer .BtnDiv {
        display: flex;
        align-items: center;
        float: right;
        width: 105px;
    }

        .chat_container .chat_footer .BtnDiv a {
            padding: 5px;
        }

            .chat_container .chat_footer .BtnDiv a img {
                width: 25px;
            }

            .chat_container .chat_footer .BtnDiv a.emojiBtn.select {
                border-radius: 50%;
                background-color: #db241e;
            }

            .chat_container .chat_footer .BtnDiv a.uploadFile label {
                cursor: pointer;
            }

.sender_div {
    width: 550px;
}

    .sender_div .chat_body {
        padding-right: 150px;
    }

        .sender_div .chat_body .clientusers {
            position: absolute;
            top: 5px;
            right: 0;
            height: calc(100% - 10px);
            width: 130px;
            overflow-y: hidden;
            overflow-x: hidden;
            background-color: #fff;
            border-left: 1px solid #eee;
        }

            .sender_div .chat_body .clientusers:hover {
                overflow-y: auto;
                overflow-x: hidden;
            }

            .sender_div .chat_body .clientusers .userList {
                margin-bottom: 0;
            }

                .sender_div .chat_body .clientusers .userList li {
                    display: flex;
                    align-items: center;
                    cursor: pointer;
                    padding: 10px 5px 10px 15px;
                    padding-left: 35px;
                    position: relative;
                }

                    .sender_div .chat_body .clientusers .userList li:hover {
                        background-color: #e9ebef
                    }

                    .sender_div .chat_body .clientusers .userList li.selected {
                        background-color: #e9ebef
                    }

                    .sender_div .chat_body .clientusers .userList li img {
                        width: 30px;
                        margin-left: 5px;
                    }

                    .sender_div .chat_body .clientusers .userList li .client-name {
                        font-size: 0.8em;
                    }

                    .sender_div .chat_body .clientusers .userList li .badge.badge-red {
                        background-color: #ea3d36;
                        position: absolute;
                        left: 15px;
                    }

                    .sender_div .chat_body .clientusers .userList li .fa-arrows-h {
                        position: absolute;
                        left: 5px;
                        color: #69bbf1;
                        font-weight: bold;
                        font-size: 1.1em;
                        display: none;
                    }

                        .sender_div .chat_body .clientusers .userList li .fa-arrows-h:hover {
                            color: #2a81ba;
                            font-size: 1.2em;
                        }

                    .sender_div .chat_body .clientusers .userList li:hover .fa-arrows-h {
                        display: block;
                    }

.online_chat {
    border-radius: 50%;
    box-shadow: 0 5px 40px rgba(0, 0, 0, .16) !important;
    position: fixed;
    right: 20px;
    bottom: 20px;
    cursor: pointer;
    background-color: #e8862d;
    padding: 5px;
    z-index: 100;
}

    .online_chat:hover {
        box-shadow: 0 5px 50px rgba(1, 1, 1, 0.33) !important;
    }

        .online_chat:hover img {
            height: 50px;
        }

    .online_chat img {
        border-radius: inherit;
        height: 40px;
        -webkit-transition: .1s ease-in-out;
        transition: .1s ease-in-out;
    }

    .online_chat .badge {
        z-index: 102;
        position: absolute;
        top: -8px;
        left: -8px;
        padding: 5px;
        background: #fa3b35;
    }

#SelectTypeForm {
    margin-top: 100px;
    padding: 0 50px;
}

#ChangeSupporterForm {
    margin-top: 100px;
    padding: 0 20px;
}

.DisableItemsSelect {
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}

::-webkit-scrollbar-thumb {
    background-color: #d9d9d9;
    border-radius: 17px;
}

::-webkit-scrollbar {
    width: 6px;
    background-color: transparent;
    border-radius: 0;
    -webkit-border-radius: 0;
}

.form-horizontal .control-label {
    text-align: right;
}

@media screen and (min-width: 100px) and (max-width: 767px) {
    .chat_container {
        bottom: 0;
        right: 0;
        width: 100%;
    }

        .chat_container .chat_body .content {
            height: 290px;
        }

        .chat_container .chat_header {
            overflow: hidden;
        }

    .body-disabel-chat {
        overflow: hidden;
    }

    .sender_div .chat_body {
        padding-right: 100px;
    }

    .chat_container .chat_body .content .sender_content .sender_message {
        width: initial;
    }

    .chat_container .chat_body .content .receiver_content .receiver_message {
        width: initial;
    }

    .sender_div .chat_body .clientusers {
        width: 100px;
    }

    .chat_container .chat_body .content {
        overflow-y: auto;
    }
}