@import 'toastify';
@import 'uppy';
@import "overlay-scrollbars";

@import "contextify/main";
@import "variables";
@import "resizable";

@import "loaders";

// DARK MODE START
body.bm-messages-dark {
        --main-bm-color-dark: 255, 255, 255;
        --bm-text-color-dark: 255, 255, 255;
        --bm-bg-color-dark: 24, 29, 44;
        --bm-bg-secondary-dark: 29, 35, 51;
        --bm-border-color-dark: 63,72,95;
        --bm-border-secondary-color-dark: 63, 72, 95;
        --bm-hover-bg-dark: 28,35,56;

        --bm-button-hover-dark: #ffffff24;
        --bm-button-active-dark: #ffffff45;

        --bm-placeholder-dark: 181, 193, 211;

        --bm-scrollbar: rgba(255, 255, 255, 0.1);
        --bm-scrollbar-active: rgba(255, 255, 255, 0.55);
        --bm-scrollbar-focus: rgba(255, 255, 255, 0.7);

        --main-bm-color: var(--main-bm-color-dark) !important;
        --bm-text-color: var(--bm-text-color-dark);
        --bm-bg-color: var(--bm-bg-color-dark);
        --bm-bg-secondary: var(--bm-bg-secondary-dark);
        --bm-border-color: var(--bm-border-color-dark);
        --bm-border-secondary-color: var(--bm-border-secondary-color-dark);
        --bm-hover-bg: var(--bm-hover-bg-dark);
        --bm-placeholder: var(--bm-placeholder-dark);

        --bm-sticky-date-bg-dark: #1d2333;
        --bm-sticky-date-bg: var(--bm-sticky-date-bg-dark);
        --bm-sticky-date-color-dark: #fff;
        --bm-sticky-date-color: var(--bm-sticky-date-color-dark);

        --bm-tooltip-bg-dark: 0, 0, 0;
        --bm-tooltip-color-dark: 255,255,255;

        --bm-tooltip-bg: var(--bm-tooltip-bg-dark);
        --bm-tooltip-color: var(--bm-tooltip-color-dark);

        --left-message-bg-color-dark: 232, 232, 232;
        --left-message-bg-color: var(--left-message-bg-color-dark) !important;
        --left-message-text-color-dark: 0, 0, 0;
        --left-message-text-color: var(--left-message-text-color-dark) !important;
        --left-message-nickname-color-dark: 255, 255, 255;
        --left-message-nickname-color: var(--left-message-nickname-color-dark) !important;

        --right-message-bg-color-dark: 64, 78, 114;
        --right-message-bg-color: var(--right-message-bg-color-dark) !important;

        --right-message-text-color-dark: 255, 255, 255;
        --right-message-text-color: var(--right-message-text-color-dark) !important;

        --right-message-nickname-color-dark: 255, 255, 255;
        --right-message-nickname-color: var(--right-message-nickname-color-dark) !important;

        --bm-button-hover: var(--bm-button-hover-dark);
        --bm-button-active: var(--bm-button-active-dark);

        .bpbmuc,
        .bp-messages-wrap.bp-better-messages-list .tabs > div .unread-count,
        .bp-messages-wrap .threads-list .thread .unread-count,
        .bp-messages-wrap .bm-reply .bm-attachment[data-count]:after,
        .bp-messages-wrap .threads-list .thread .unread-mention{
            background: rgba(63, 75, 111, 1);
        }

        .bp-messages-wrap{
            h1, h2, h3, h4, h5, h6{
                color: rgba( var(--bm-text-color), 1 )
            }
        }

        .bp-messages-wrap .bm-reply .bm-attachment,
        .bp-messages-wrap .bm-reply .bm-gif,
        .bp-messages-wrap .bm-reply .bm-stickers,
        .bp-messages-wrap .bm-reply .bm-emojies {
            color: rgba(var(--main-bm-color), 1) !important;
        }

        .bp-messages-wrap .bm-messages-list .bm-list .bm-messages-stack .bm-content .bm-messages-listing .bm-message .message-controls > span,
        .bp-messages-wrap .empty,
        .bp-messages-wrap .empty-thread span,
        .bp-messages-wrap .empty-thread svg,
        .bm_user_selector .bm_user_selector__indicator{
            color: rgba(var(--main-bm-color), 1) !important;
        }

        .bp-messages-wrap .bpbm-empty-icon svg * {
            stroke: rgba(var(--main-bm-color), 1) !important;
        }

        .bp-better-messages-mini .chat,
        .bp-better-messages-list{
            box-shadow: none !important;
        }

        .bp-messages-wrap .chat-header .thread-info .thread-info-data .group-online.online-now,
        .bp-messages-wrap .chat-header .thread-info .thread-info-data .last-online.online-now,
        .bp-messages-wrap.bp-better-messages-mini .chats .chat .head .thread-info .thread-info-data .group-online.online-now,
        .bp-messages-wrap.bp-better-messages-mini .chats .chat .head .thread-info .thread-info-data .last-online.online-now
        {
            color: #43e443;
        }

        .bp-messages-wrap .chat-footer .bpbm-user-me .bpbm-user-me-popup{
            box-shadow: none;
        }

        .bp-messages-wrap .bpbm-chat-content .bpbm-chat-main .bm-before-message-list .bpbm-group-call-in-progress{
            background: rgba( var(--bm-bg-secondary), 1 );
        }

        #bp-better-messages-mini-mobile-open{
            background: rgba( var(--bm-bg-color), 1 ) !important;
        }

        .bpbm-checkbox:checked + label::before{
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23000' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
        }

        .bpbm-radio:checked + label::before{
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23000' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
        }

        .contexify_item:not(.contexify_item-disabled):hover > .contexify_itemContent, .contexify_item:not(.contexify_item-disabled):focus > .contexify_itemContent{
            color: rgba(var(--bm-text-color), 1);
            background-color: rgba(var(--bm-hover-bg), 1);
        }

        .bm-editor-format-tooltip{
            background: rgba(var(--bm-bg-color), 1);
            border: 1px solid rgba(var(--bm-border-color), 1);
        }

        .bm-modal-window .bm-modal-window-inner,
        .bpbm-join-to-chat-button,
        .bp-messages-wrap button{
            background: rgba(var(--bm-bg-secondary), 1) !important;
            border: 1px solid rgba(var(--bm-border-color), 1) !important;
            box-shadow: none;
        }



        /*
        *    EMOJI SELECTOR
        */
        .bm-emoji-picker-container {
            --rgb-background: var(--bm-bg-color);
            --rgb-color: var(--bm-text-color);
            --rgb-accent: var(--main-bm-color);
            --color-border: rgba(var(--bm-bg-secondary), 1);
            --rgb-input: var(--bm-bg-secondary);
        }

}
// DARK MODE END

body.bm-messages-light{
    .bm-emoji-picker-container {
        --rgb-background: var(--bm-bg-color);
        --rgb-color: var(--bm-text-color);
        --rgb-accent: var(--main-bm-color);
        --color-border: rgba(var(--bm-bg-secondary), 1);
        --rgb-input: var(--bm-bg-color);
    }
}

.bm-editor-format-tooltip{
    padding: 2px 10px 2px;
    position: absolute;
    z-index: 800;
    top: -10000px;
    left: -10000px;
    font-size: 18px;
    margin-top: -6px;
    opacity: 0;
    border-radius: 4px;
    transition: opacity 0.75s;
    background-color: rgba( var(--main-bm-color), 1 );

    > span{
        cursor: pointer;
        color:  #fff;
        display: inline-block;
        opacity: 1;

        &.bm-active{
            opacity: 1;
        }

        & + span{
            margin-left: 15px;
        }
    }


}

button.bm-button{
    background: rgba(var(--bm-button-bg), 1) !important;
    color: rgba(var(--bm-button-color), 1) !important;
    font-size: 15px !important;
    line-height: 14px !important;
    padding: 7px 14px !important;
    border-radius: 2px !important;
    border: none !important;
    outline: none !important;
    cursor: pointer !important;

    &[disabled]{
        background: gray !important;
        cursor: not-allowed !important;
    }
}

.contexify_item > .contexify_itemContent > span{
    margin-left: 5px;
}
.bp-messages-wrap-group{
    .bpbm-chat-content{
        height: calc( 100% - 44px ) !important;
    }
}

.bp-messages-wrap-chat{
    .bpbm-chat-content{
        height: calc( 100% - 44px ) !important;
    }
}

.bp-messages-wrap-main,
.bp-messages-chat-wrap,
.bp-messages-wrap-group,
.bp-messages-single-thread-wrap{
    margin-top: 0 !important;
}

.bp-messages-wrap {
    padding: 0;
    background: rgba( var(--bm-bg-color), 1 );
    border-radius: var(--bm-border-radius) !important;
    border: 1px solid rgba( var(--bm-border-color), 1);
    position: relative;
    clear: both;
    box-sizing: border-box !important;
    color: rgba(var(--bm-text-color), 1);
    text-align: left;
    overflow: hidden;
    font-family: var(--bm-font-family);
    line-height: normal;
    font-weight: normal;

    .bm-inline-whitespace{
        width: 0 !important;
        display: inline-block !important;
    }
    .bm-message-content-centered{
        > svg{
            margin-right: 5px;
        }

        > *{
            vertical-align: middle;
        }
    }

    label{
        color: rgba(var(--bm-text-color), 1);
    }

    @media screen and (-webkit-min-device-pixel-ratio:0) {
        select,
        textarea,
        input {
            font-size: 16px;
        }
    }

    .bpbm-display-none{
        display: none !important;
    }

    &.bm-threads-list{
        border: 0;
        border-radius: 0 !important;
        box-shadow: none;
    }

    p{
        margin: 0;
        white-space: break-spaces;
    }

    button{
        background: rgba(var(--main-bm-color), 1) !important;
        color: rgba(255, 255, 255, 1) !important;
        font-size: 15px !important;
        line-height: 14px !important;
        padding: 7px 14px !important;
        border-radius: 2px !important;
        border: none !important;
        outline: none !important;
        cursor: pointer !important;
    }

    a{
        color: rgba(var(--bm-text-color), 1) !important;
        box-shadow: none !important;
    }

    *{
        box-sizing: border-box !important;
        font-family: var(--bm-font-family);
        vertical-align: initial;
        //color: rgba(var(--bm-text-color), 1);
        //transform: translateX(0%) translateZ(0px);
    }

    input, textarea{
        &, &:focus {
            outline: 0 !important;
            box-shadow: none !important;
            border: 0 !important;
        }
    }



    @import "parts/typing";


    .bm-animation-enter {
        opacity: 0;
    }

    .bm-animation-enter-active {
        opacity: 1;
        transition: ease-in-out 100ms;
    }
    .bm-animation-exit {
        opacity: 1;
    }
    .bm-animation-exit-active {
        opacity: 0;
        transition: ease-in-out 100ms;
    }

    .bp-messages-threads-wrapper{
        display: flex;
        width: 100%;
        height: 700px;
    }


    .bm-mentions{
        border-top: 1px solid rgb(var(--bm-border-secondary-color));
        background: white;
        max-height: 165px;
        overflow: auto;
        width: 100%;
        z-index: 2 !important;

        .bm-mention{
            display: flex;
            border-top: 1px solid rgb(var(--bm-border-secondary-color));
            padding: 10px;
            font-size: 15px;
            align-items: center;
            justify-content: flex-start;
            flex-direction: row;
            cursor: pointer;

            &:first-child{
                border-top: none;
            }

            .avatar{
                margin-right: 4px;
            }

            &.bm-mention-active{
                background: rgb(var(--bm-hover-bg));
                //color: white;
            }
        }
    }


    .bm-thread-settings-container{
        overflow: auto;
        position: absolute;
        background: rgba( var(--bm-bg-color), 1 );
        display: block;
        z-index: 11;
        width: 100%;
    }

    &.bp-better-messages-mini{
        .bm-messages-list .bm-list .bm-messages-stack {
            .bm-pic{
                width: 20px;
                height: 20px;
                left: 10px;

                .bm-placeholder-wrapper{
                    width: 20px !important;
                    height: 20px !important;
                }
            }

            .bm-content {
                margin-top: -20px;
                padding-left: 40px;
            }

            &.bm-right-side{
                .bm-pic{
                    left: calc(100% - 30px);
                    right: 0;
                }

                .bm-content {
                    padding-right: 40px;
                    margin-top: -20px;
                }
            }
        }
    }

    .bm-messages-list{
        position: relative;
        height: 100%;
        min-height: 0;


        &:not(.not-interacted) .bm-list.bm-just-scrolled{
            .bm-sticky-date{
                position: sticky;
                z-index: 3;
            }
        }

        &.bm-template-modern .bm-list .bm-messages-stack .bm-content .bm-messages-listing .bm-message.selected .bm-message-content:after {
            border-radius: var(--bm-message-border-radius) !important;
        }

        .bpbm-scroll-down{
            display: block;
            position: absolute;
            bottom: 15px;
            right: 15px;
            width: 30px;
            height: 30px;
            background: rgba( var(--bm-bg-secondary), 1 );
            box-shadow: 0 0 2px 0 rgba(var(--main-bm-color), 0.5);
            color: rgba(var(--main-bm-color), 1);
            font-size: 18px;
            border-radius: 100%;
            z-index: 2;
            cursor: pointer;
            text-align: center;
            transition: opacity, box-shadow 0.2s ease-in-out;

            svg{
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
            }

            &:hover{
                box-shadow: 0 0 3px 0 rgba(var(--main-bm-color), 1);
                opacity: 1;
            }
        }

        .bm-list{
            height: 100%;
            text-align: center;
            //overflow: scroll;
            //display: flex;
            //flex-direction: column-reverse;
            overflow: auto;

            .os-viewport{
                padding-top: 15px;
                padding-bottom: 1px;
                overflow: unset;
            }

            .os-padding{
                overflow: unset;
            }

            .simplebar-content{
                //display: flex;
                //flex-direction: column-reverse;
                //overflow: auto;
            }

            .bm-conversation-start{
                color: rgba(var(--bm-text-color), 1) !important;
                font-size: 11px;
                display: inline-block;
                padding: 5px 10px;
                opacity: 0.3;
                border-radius: 3px;
                min-height: 30px;
                user-select: none;

            }

            .bm-date-stack{
                //position: relative;

                .bm-unread-messages{
                    background: rgba(var(--main-bm-color), 0.1);
                    color: rgba(var(--bm-text-color), 0.5);
                    height: 20px;
                    width: 100%;
                    text-align: center;
                    font-size: 11px;
                    line-height: 20px;
                    margin-bottom: 10px;
                }
            }

            .bm-sticky-date{
                cursor: default;
                background: var(--bm-sticky-date-bg);
                color: var(--bm-sticky-date-color);
                top: 10px;
                display: inline-block;
                left: 0;
                right: 0;
                border-radius: var(--bm-date-radius) !important;
                padding: 3px 7px;
                z-index: 2;
                font-size: 11px;
                line-height: 15px;
                margin: 10px auto;
                opacity: 0.85;
            }

            .bm-messages-stack{
                //position: relative;
                margin-bottom: 15px;
                text-align: left;


                &.bm-stack-hidden{
                    opacity: 0.5;
                }

                /** Left Side Color **/
                &.bm-left-side{
                    .bm-content {
                        .bm-info{
                            display: flex;
                            align-items: center;

                            a{
                                color: rgba(var(--left-message-nickname-color), 1) !important;
                            }

                            .bm-name{

                                .bm-name-moderator,
                                .bm-name-verified{
                                    color: rgba(var(--left-message-nickname-color), 1);
                                    //margin-left: 0;
                                    //margin-right: 5px;
                                }
                            }
                        }

                        .bm-messages-listing {
                            .bm-message{
                                padding-right: 10px !important;

                                .bm-replied-message,
                                .bpbm-replied-message{
                                    border-color: rgba(var(--left-message-text-color), 1) !important;
                                    background: rgba( var(--left-message-text-color), 0.10 ) !important;
                                }

                                .bm-message-content:not(.bm-hide-background){
                                    border-radius: var(--bm-message-border-radius) !important;
                                    background : rgba(var(--left-message-bg-color), 1);
                                    color      : rgba(var(--left-message-text-color), 1);

                                    *{
                                        color: rgba(var(--left-message-text-color), 1) !important;
                                    }

                                    .bm-attachments .bm-files .bm-file{
                                        border-color: rgba( var(--left-message-text-color), 1 )
                                    }

                                    .bm-message-info .bm-time{
                                        color  : rgba(var(--left-message-text-color), 0.8);
                                    }



                                    a{
                                        color: rgba(var(--left-message-text-color), 1);
                                    }


                                    .url-wrap{
                                        border-color: rgba(var(--left-message-text-color), 1) !important;

                                        .url-description .url-title{
                                            color: rgba(var(--left-message-text-color), 1) !important;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

                /** Right Side Color **/
                &.bm-right-side{
                    .bm-content {
                        .bm-info{
                            display: flex;
                            align-items: center;
                            flex-direction: row-reverse;

                            a{
                                color: rgba(var(--right-message-nickname-color), 1) !important;
                            }

                            .bm-name{
                                flex-direction: row-reverse;

                                .bm-name-moderator,
                                .bm-name-verified{
                                    color: rgba(var(--right-message-nickname-color), 1);
                                    margin-left: 0;
                                    margin-right: 5px;
                                }

                                margin-left: 5px;
                                .bm-time{
                                    color: rgba(var(--bm-text-color), 0.5);
                                    font-size: 11px;
                                }
                            }
                        }

                        .bm-messages-listing {
                            .bm-message{
                                padding-left: 10px !important;

                                .bm-replied-message,
                                .bpbm-replied-message{
                                    border-color: rgba(var(--right-message-text-color), 1) !important;
                                    background: rgba( var(--right-message-text-color), 0.10 ) !important;
                                }

                                .bm-message-content:not(.bm-hide-background){
                                    border-radius: var(--bm-message-border-radius) !important;
                                    background : rgba(var(--right-message-bg-color), 1);
                                    color      : rgba(var(--right-message-text-color), 1);

                                    *{
                                        color: rgba(var(--right-message-text-color), 1) !important;
                                    }

                                    a{
                                        color: rgba(var(--right-message-text-color), 1);
                                    }

                                    .bm-attachments .bm-files .bm-file{
                                        border-color: rgba( var(--right-message-text-color), 1 )
                                    }

                                    .bm-message-info .bm-time{
                                        color  : rgba(var(--right-message-text-color), 0.8);
                                    }

                                    .url-wrap{
                                        border-color: rgba(var(--right-message-text-color), 1) !important;

                                        .url-description .url-title{
                                            color: rgba(var(--right-message-text-color), 1) !important;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

                &.bm-right-side{
                    text-align: right;
                    .bm-pic{
                        left: calc(100% - 50px);
                        right: 0;
                    }

                    .bm-content {
                        //position: relative;
                        padding-left: 0;
                        padding-right: 60px;
                        margin-top: -35px;

                        .bm-info{
                            text-align: right;

                            .name{
                                .bm-placeholder-wrapper{
                                    margin-left: auto;
                                }
                            }
                        }

                        .bm-messages-listing {
                            .bm-message {
                                flex-direction: row-reverse !important;

                                .bm-message-info{
                                    //float: left !important;
                                    .bm-time {
                                        //margin-left: 0 !important;
                                        //margin-right: 10px;
                                    }
                                }

                                .message-controls {
                                    flex-direction: row-reverse !important;
                                    margin-left: 0;
                                    margin-right: 5px;
                                }
                            }
                        }
                    }
                }

                &.bm-hide-avatars{
                    .bm-content {
                        position: relative;
                        padding-left: 15px;
                        margin-top: 0 !important;
                    }

                    &.bm-right-side .bm-content {
                        padding-left: 0;
                        padding-right: 15px;
                    }
                }


                .bm-pic{
                    position: sticky;
                    top: 10px;
                    left: 15px;
                    width: 35px;
                    height: 35px;
                    display: block;
                    z-index: 1;

                    > span{
                        display: block;
                        width: 100%;
                        height: 100%;
                    }
                }

                .bm-content {
                    //position: relative;
                    padding-left: 60px;
                    //margin-top: -40px;
                    margin-top: -35px;

                    .bm-info{
                        margin-bottom: 5px;

                        .name{
                            font-weight: bold;
                            text-decoration: none;
                            border: none;
                            color: rgba(var(--main-bm-color), 1);
                            margin-right: 5px;

                            span, a{
                                font-weight: bold;
                                text-decoration: none;
                                font-size: 13px;
                                border: none;
                                color: rgba( var(--main-bm-color), 1 );
                                box-shadow: none;
                            }
                        }

                        .bm-time{
                            color: rgba(var(--bm-text-color), 0.5);
                            font-size: 11px;
                        }
                    }

                    .bm-messages-listing {
                        margin: 0 !important;
                        padding: 0 !important;


                        .bm-message {
                            display: flex;
                            width: auto;
                            margin-bottom: 10px;
                            padding: 0 0 0 0 !important;
                            max-width: 100%;
                            background: none;
                            flex-direction: row;
                            align-items: center;

                            &:hover {
                                background: none;
                            }

                            iframe{
                                max-width: 100%;
                            }

                            .bp-messages-iframe-container {
                                display: block;
                                position: relative;
                                overflow: hidden;
                                padding-top: 56.25%;
                                margin: 10px 0 0;
                                padding-bottom: 3px;
                                border-radius: 2px;

                                > * {
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                    width: 100%;
                                    height: 100%;
                                    border: 0;
                                    margin: 0;
                                }
                            }

                            .bm-message-info{
                                display: block;
                                float: right;
                                .bm-time{
                                    cursor: default;
                                    color: rgba( var( --bm-text-color ), 1);
                                    font-size: 10px;
                                    margin-left: 10px;
                                    white-space: nowrap;
                                }
                            }


                            &.selected{
                                .bm-message-content{
                                    &:after{
                                        position: absolute;
                                        left: 0;
                                        right: 0;
                                        top: 0;
                                        bottom: 0;
                                        content: "";
                                        background: black;
                                        opacity: 0.1;
                                    }
                                }
                            }

                            .bm-replied-message,
                            .bpbm-replied-message{
                                display: block;
                                background: rgba( var(--main-bm-color), 0.03 );
                                border-left: 2px solid rgba( var(--main-bm-color), 1 );
                                padding: 5px 10px 5px 10px;
                                font-size: 80%;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                overflow: hidden;
                                margin-bottom: 5px;
                                user-select: none;


                                .bm-replied-message-text .bpbm-call,
                                .bpbm-replied-message-text .bpbm-call{
                                    white-space: nowrap;
                                    text-overflow: ellipsis;
                                    overflow: hidden;
                                }

                                .bm-replied-message-name,
                                .bpbm-replied-message-name{
                                    display: block;
                                    //color: rgba( var(--main-bm-color), 1 );
                                    font-weight: bold;
                                    margin-bottom: 5px;
                                }

                                video{
                                    max-height: 130px !important;
                                }

                                .bpbm-sticker{
                                    img{
                                        max-height: 130px;
                                        width: auto !important;
                                    }
                                }

                                .videos .video,
                                .images{
                                    padding: 0 !important;
                                }
                            }

                            .bm-message-content {
                                position: relative;
                                //background: #e8e8e8;
                                color: rgba(var(--bm-text-color), 1);

                                padding: 7px 12px;
                                max-width: 90%;
                                word-break: break-all;
                                font-size: var(--bm-message-font-size);
                                line-height: var(--bm-message-line-height);
                                text-align: left;
                                //overflow: hidden;

                                a{
                                    color: rgba(var(--bm-text-color), 1);
                                }

                                &.favorited-page{
                                    cursor: pointer;
                                }

                                &:hover .bm-reactions-selector {
                                    display: block;
                                }

                                .bm-reactions-selector {
                                    display: none;
                                    position: absolute;
                                    padding: 0;
                                    border: none;
                                    box-shadow: 0 1px 3px 0 #b0b0b0;
                                    background: white;
                                    border-radius: 50px !important;
                                    z-index: 900;
                                    bottom: -9px;
                                    right: -9px;
                                    //width: 20px;
                                    //height: 20px;

                                    &:hover{
                                        padding: 3px 2px;
                                        //width: 28px;
                                        overflow-y: hidden;

                                        .bm-reaction-icon{
                                            display: block;
                                            margin-top: 1px;
                                            margin-bottom: 1px;
                                            padding: 2px;

                                            > img{
                                                width: 20px !important;
                                                height: 20px !important;
                                            }
                                        }
                                    }

                                    .bm-reaction-icon{
                                        display: none;
                                        cursor: pointer;
                                        padding: 4px;

                                        > img{
                                            display: block !important;
                                            margin: 0 !important;
                                            padding: 0 !important;
                                            //transition: width, height 0.2s linear;
                                        }

                                        &:last-child{
                                            display: block;
                                        }
                                    }
                                }

                                &.no-padding{
                                    padding: 0 !important;
                                }

                                &.bm-hide-background{
                                    background: none;
                                    padding: 0 !important;

                                    .bm-message-info .bm-time {
                                        color: gray !important;
                                    }
                                }

                                &.has-iframe {
                                    width: 100%;
                                    max-width: 600px;
                                }

                                &.voice-message {
                                    width: 100%;
                                    max-width: 600px;

                                    &+.message-controls{
                                        margin-top: -15px;
                                    }
                                }

                                .bm-attachments-space-hack{
                                    width: 100%;
                                    display: block;
                                    min-width: 300px;
                                }

                                /*&.has-files {
                                    width: 100%;
                                    max-width: 600px;
                                }*/

                                .bm-message-content-text{
                                    //display: inline-flex;
                                    //align-items: center;
                                    //white-space: break-spaces;
                                    //flex-wrap: wrap;
                                    word-break: break-word;
                                    white-space: normal;

                                    .bp-messages-iframe-container{
                                        display: block;
                                        position: relative;
                                        overflow: hidden;
                                        padding-top: 56.25%;
                                        margin: 10px 0 0;
                                    }
                                }

                                .bm-voice-message{
                                    display: flex;
                                    flex-wrap: nowrap;
                                    align-content: center;
                                    justify-content: flex-start;
                                    align-items: center;
                                    margin-top: 5px;
                                    min-height: 30px;

                                    .bm-voice-message-play{
                                        width: 35px;
                                        font-size: 30px;
                                        text-align: left;
                                        cursor: pointer;
                                        color: rgba( var(--main-bm-color), 1 );
                                    }

                                    .bm-waveform{
                                        width: 80%;
                                        width: calc(100% - 35px);

                                        wave{
                                            //border-right-color: rgba( var(--main-bm-color), 1 ) !important;
                                            max-width: 100%;
                                            overflow: hidden !important;
                                        }
                                    }
                                }

                                .bpbm-sticker {
                                    max-width: 200px;
                                    width: 100%;
                                    display: block;
                                }

                                .bpbm-sticker img {
                                    width: 100%;
                                    height: auto;
                                    display: block;
                                    max-width: 100%;
                                }

                                .bm-mention{
                                    display: inline-flex;
                                    align-items: center;
                                    flex-direction: row;
                                    background: rgb(0 0 0 / 10%);
                                    padding: 2px 5px;
                                    vertical-align: middle;

                                    &.bm-mention-current{
                                        font-weight: bold;
                                    }

                                    > .avatar{
                                        margin-right: 5px;
                                    }
                                }

                                .bm-reactions{
                                    display: flex;
                                    margin-top: 4px;
                                    flex-direction: row;
                                    align-items: center;
                                    justify-content: flex-start;

                                    .bm-reaction {
                                        display: flex;
                                        flex-direction: row;
                                        flex-wrap: nowrap;
                                        align-content: center;
                                        justify-content: flex-start;
                                        align-items: center;
                                        margin-right: 5px;

                                        img {
                                            height: 13px !important;
                                            width: 13px !important;
                                        }

                                        .bm-reaction-count {
                                            font-size: 11px;
                                            margin-left: 2px;
                                        }
                                    }
                                }

                                .bm-attachments{
                                    width: 100%;
                                    //min-width: 300px;

                                    .bm-images{
                                        overflow: hidden;
                                        a{
                                            //position: absolute;
                                            max-height: 300px;
                                            max-width: 300px;
                                            overflow: hidden;
                                            margin-bottom: 5px;

                                            img{
                                                opacity: 0;
                                                width: 100%;
                                                height: 100%;
                                            }
                                        }
                                    }

                                    .bm-videos{
                                        overflow: hidden;

                                        .bm-video{
                                            max-width: 100%;
                                            max-height: 300px;
                                        }
                                    }

                                    .bm-audios{
                                        overflow: hidden;

                                        .bm-audio{
                                            max-width: 100%;
                                            height: 30px;
                                        }
                                    }

                                    .bm-files{
                                        .bm-file{
                                            border: 1px solid rgba(var(--bm-text-color), 1);
                                            display: block;
                                            overflow: hidden;
                                            border-radius: 4px;
                                            -moz-transition: border-color .2s ease-in-out,-moz-box-shadow .2s ease-in-out;
                                            -o-transition: border-color .2s ease-in-out,box-shadow .2s ease-in-out;
                                            -webkit-transition: border-color .2s ease-in-out,-webkit-box-shadow .2s ease-in-out;
                                            transition: border-color .2s ease-in-out,box-shadow .2s ease-in-out;
                                            width: 100%;
                                            text-decoration: none;
                                            margin: 2px 0;
                                            padding: 5px 12px;
                                            outline: 0;
                                            color: inherit !important;
                                            box-sizing: border-box;
                                            align-items: center;
                                            white-space: normal;

                                            svg {
                                                margin-right: 5px;
                                            }

                                            .size{
                                                margin-left: 5px;
                                            }
                                        }
                                    }
                                }

                                .url-wrap {
                                    border: 1px solid rgba(var(--bm-text-color), 1);
                                    overflow: hidden;
                                    border-radius: 4px;
                                    -moz-transition: border-color 0.2s ease-in-out, -moz-box-shadow 0.2s ease-in-out;
                                    -o-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
                                    -webkit-transition: border-color 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
                                    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
                                    display: block;
                                    width: 100%;
                                    text-decoration: none;
                                    margin: 5px 0;
                                    outline: 0;
                                    color: rgba(var(--bm-text-color), 1);

                                    *{
                                        border-color: rgba(var(--bm-text-color), 1);
                                        color: rgba(var(--bm-text-color), 1);
                                    }

                                    + br {
                                        display: none;
                                    }

                                    &:hover {
                                        -moz-box-shadow: 0 0 4px rgb(220, 220, 220);
                                        -webkit-box-shadow: 0 0 4px rgb(220, 220, 220);
                                        box-shadow: 0 0 4px rgb(220, 220, 220);
                                        border-color: rgb(220, 220, 220);
                                    }

                                    .url-image {
                                        display: block;
                                        box-shadow: none;
                                        border-radius: 0;
                                        margin: 0;
                                        display: block;
                                        height: 150px;
                                        width: 100%;
                                        background-size: cover;
                                        background-repeat: no-repeat;
                                        background-position: center;
                                    }

                                    .url-image + .url-description {
                                        border-top: 1px solid #fafbfc;
                                    }

                                    .url-description {
                                        padding: 15px;
                                        display: block;

                                        .url-title {
                                            display: block;
                                            color:  rgba(var(--bm-text-color), 1) !important;
                                            font-size: 120%;
                                            line-height: 100%;
                                        }
                                    }

                                    .url-title i {
                                        font-size: 75%;
                                    }

                                    .url-site {
                                        display: block;
                                        font-size: 80%;
                                        margin: 6px 0 0px;
                                    }
                                }

                            }

                            .message-controls{
                                display: flex;
                                margin-left: 5px;
                                font-size: 13px;

                                > span{
                                    position: relative;
                                    font-size: 15px;
                                    visibility: hidden;
                                    margin: 0 5px;
                                    width: 15px;
                                    height: 15px;
                                    cursor: pointer;
                                    color: gray;
                                    text-align: center;

                                    > svg{
                                        position: absolute;
                                        bottom: 0;
                                        top: 0;
                                        left: 0;
                                        right: 0;
                                        margin: auto;
                                    }

                                    &.bm-status{
                                        visibility: visible;
                                        cursor: default;

                                        &[data-status="seen"]{
                                            color: rgba( var(--main-bm-color), 1 );
                                        }
                                    }

                                    &.favorite{

                                        color: #fdae00 !important;

                                        i:before {
                                            content: "";
                                            font-weight: 400;
                                        }

                                        &.active {
                                            visibility: visible;
                                            i:before{
                                                font-weight: bold;
                                            }
                                        }
                                    }
                                }
                            }

                            &.selected, &:hover{
                                .message-controls{
                                    > span {
                                        visibility: visible;
                                    }
                                }
                            }

                            .bpbm-gif {
                                display: block;
                                border-radius: 2px;
                                overflow: hidden;

                                video{
                                    height: auto;
                                    //width: auto;
                                }
                            }

                            .bm-attachments {
                                padding: 4px 0;

                                > * + * {
                                    margin-top: 5px;
                                }
                            }

                            .videos {
                                .video {
                                    padding: 0;

                                    video {
                                        border-radius: 2px;
                                        overflow: hidden;
                                    }

                                    & + .video {
                                        padding-top: 5px;
                                    }
                                }
                            }

                            .images {
                                padding: 3px 0;

                                a {
                                    display: block;
                                    width: auto;
                                    height: auto;
                                    background: none !important;
                                    padding-bottom: 0;
                                    border: 0;
                                    margin: 0;
                                    border-radius: 2px;
                                    overflow: hidden;
                                    max-width: 300px;

                                    & + a {
                                        padding-top: 10px;
                                    }

                                    img {
                                        display: block !important;
                                    }

                                }
                            }
                        }
                    }
                }
            }

        }

        &.bm-template-standard{
            .bm-list .bm-messages-stack {
                .bm-content {
                    .bm-messages-listing {
                        .bm-message {
                            //display: block !important;
                            max-width: calc(100% - 15px) !important;
                            align-items: flex-start !important;
                            margin: -5px -5px 5px !important;

                            &.selected .bm-message-content{
                                border-radius: 3px !important;
                                overflow: hidden;
                            }

                            .bpbm-gif{
                                display: inline-block;

                                video{
                                    width: auto;
                                    display: inline-block;
                                }
                            }

                            .bm-message-content {
                                width: 100% !important;
                                max-width: 100% !important;
                                background: none !important;
                                padding: 5px !important;

                                .bm-voice-message {
                                    margin-top: 0 !important;
                                }

                                &.voice-message {
                                    max-width: initial !important;
                                    width: 100% !important;
                                }
                            }

                            .bm-message-info {
                                line-height: 1 !important;

                                .bm-time {
                                    margin-left: 0 !important;
                                }
                            }

                            .message-controls {
                                float: right;
                                flex-direction: row-reverse;
                            }
                        }
                    }
                }
            }
        }
    }

    .chat-header{
        display: flex;
        position: relative;
        height: 44px;
        min-height: 44px;
        background: rgba( var(--bm-bg-secondary), 1 );
        border-bottom: 1px solid rgba(var(--bm-border-secondary-color), 1);
        line-height: 42px;
        box-sizing: border-box;
        align-items: center;
        flex-direction: row;
        justify-content: flex-start;
        z-index: 1;
        font-size: 1.1rem;

        > .bm-btn{
            position: relative;
            width: 50px;
            text-align: center;
            height: 42px;
            line-height: 42px;
            text-decoration: none;
            cursor: pointer;
        }

        .thread-info{
            display: inline-flex;
            line-height: 15px;
            font-size: 14px;
            margin-right: auto !important;
            align-items: center;
            margin-left: 5px !important;
            margin-bottom: 0 !important;
            margin-top: 0 !important;

            .avatar{
                display: block;
                margin-right: 8px;
                height: 30px;
                width: 30px;
                min-width: 30px;

                a, img{
                    margin: 0;
                    display: block;
                }
            }


            .avatar-group{
                position: relative;
                width: 34px;
                display: grid;
                grid-template-columns: 15px 15px;
                grid-template-rows: 15px 15px;
                grid-gap: 2px 2px;
                margin-right: 6px;

                &.avatars-count-2{
                    grid-template-rows: 15px;
                }

                .avatar{
                    width: 15px;
                    height: 15px;
                    min-width: 15px;
                    margin-right: 0;
                }
            }

            .thread-info-data{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
                align-content: flex-start;
                max-width: 100%;
                max-width: calc(100% - 30px);

                .name{
                    margin-bottom: 2px;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    max-width: 100%;
                    overflow: hidden;

                    a{
                        color: rgba(var(--bm-text-color), 1);
                        line-height: 1;
                    }
                }

                .sub-name{
                    font-size: 12px;
                    line-height: 14px;
                    min-height: 12px;
                    text-overflow: ellipsis;
                    max-width: 100%;
                    overflow: hidden;
                    white-space: nowrap;

                    .group-online{
                        text-overflow: ellipsis;
                        max-width: 100%;
                        overflow: hidden;
                        white-space: nowrap;
                    }


                    .bm-thread-sync{
                        display: flex;
                        align-items: center;
                        justify-content: flex-start;

                        i{
                            font-size: 10px;
                            vertical-align: middle;
                            margin-right: 5px;
                        }
                    }
                }

                .group-online,
                .last-online{

                    &.online-now{
                        color: green;
                    }
                }

            }
        }
    }

    .new-thread{
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
        padding: 20px;

        .bm-reply{
            margin-top: auto;
        }
    }

    .bm-reply{
        position: relative;
        display: flex;
        background: rgba( var(--bm-bg-color), 1 );
        border-top: 1px solid rgba( var(--bm-border-color), 0.62 );
        //align-items: flex-end;
        width: 100%;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        z-index: 10;
        //min-height: 50px;
        //overflow: hidden;


        > * {
            position: relative;
            background: rgba( var(--bm-bg-color), 1 );
            z-index: 5;
        }

        .bm-reply-restricted{
            width: 100%;
            text-align: center;
            font-size: 16px;
            margin: 10px 10px;
            white-space: normal;
            background: rgba(var(--main-bm-color), 0.05);
            border: 1px solid rgba(var(--main-bm-color), 0.1);
            overflow: hidden;
            border-radius: 3px;
            padding: 12px 10px;

            a{
                text-decoration: underline !important;
            }
        }

        .bm-attachment{
            position: relative;
            display: flex;
            min-width: 50px;
            height: 100%;
            text-align: center;
            font-size: 24px;
            color: rgba( var(--bm-text-color), 0.36 );
            cursor: pointer;
            align-items: center;
            justify-content: center;

            &.bm-attachment-progress{
                font-size: 16px;
            }

            &[data-count]:after{
                content: attr(data-count);
                position: absolute;
                font-size: 8px;
                display: block;
                width: 15px;
                height: 15px;
                line-height: 15px;
                border-radius: 100%;
                background: rgba( var(--main-bm-color), 1 );
                color: white;
                left: 6px;
                bottom: 28px;
            }

            svg{
                position: absolute;
                bottom: 14px;
                left: 0;
                right: 0;
                margin: auto;
                transform: rotate(45deg);
            }

            .bm-attachment-files-count{
                margin-left: 8px;
                font-size: 18px;
            }
        }

        .bm-emojies{
            width: 50px;
            text-align: center;
            font-size: 21.1px;
            color: rgba(var(--bm-text-color), 0.36);
            cursor: pointer;
            padding-bottom: 12px;
            position: relative;
            height: 100%;

            svg{
                position: absolute;
                bottom: 15.1px;
                left: 0;
                right: 0;
                margin: auto;
            }
        }

        .bm-gif{
            width: 45px;
            text-align: center;
            font-size: 18.5px;
            color: rgba(var(--bm-text-color), 0.36);
            cursor: pointer;
            padding-bottom: 12px;

            position: relative;
            height: 100%;

            svg{
                position: absolute;
                bottom: 16.6px;
                left: 0;
                right: 0;
                margin: auto;
                border: 1.49px solid;
                border-radius: 3px;
            }
        }

        .bm-stickers{
            width: 50px;
            text-align: center;
            font-size: 20px;
            color: rgba(var(--bm-text-color), 0.36);
            cursor: pointer;
            padding-bottom: 12px;
            position: relative;
            height: 100%;

            svg{
                position: absolute;
                bottom: 16px;
                left: 0;
                right: 0;
                margin: auto;
            }
        }

        .bm-send-message{
            position: relative;
            width: 60px;
            text-align: center;
            font-size: 20px;
            color: rgba(var(--main-bm-color), 1);
            cursor: pointer;
            height: 100%;

            svg{
                position: absolute;
                bottom: 16px;
                left: 0;
                right: 10px;
                margin: auto;
            }
        }

        &.bm-attachments .bm-editor{
            padding-left: 0;
        }


        .bm-editor{
            position: relative;
            width: 100%;
            padding: 12px 0 12px 16px;
            max-height: 150px;
            z-index: 5;
            overflow-y: auto;
            overflow-x: hidden;

            *{
                font-size: 16px;
                //vertical-align: middle;
                line-height: 24px;
            }

            .bm-editor-content{
                outline: 0;
                border: 0;
                margin: 0;
                padding: 0;
                white-space: normal;
                min-height: 24px;
                background: rgba(var(--bm-bg-color), 1) !important;
                color: rgba(var(--bm-text-color), 1) !important;

                .bm-inline-emoji{
                    display: inline-block;
                }

                &:empty::before {
                    content: attr(placeholder);
                    color: rgba( var(--bm-placeholder), 0.33 );
                    white-space: nowrap;
                }

                &:empty:focus::before {
                    content: "";
                }
            }

            p{
                margin: 0 !important;
            }

            .bm-inline-mention{
                padding: 0 3px;
                margin: 0 1px;
                vertical-align: middle;
                display: inline-flex;
                border-radius: 3px;
                background-color: rgba( var(--bm-mention-bg), 1 );
                color: rgba( var(--bm-mention-color), 1 );
                align-items: center;
                box-shadow: none;

                > .avatar{
                    margin-right: 5px;
                }
            }

            > div[role="textbox"] {
            }
        }
    }

    &.bp-messages-mobile{
        input, textarea{
            font-size: 16px !important;
        }
        .bm-reply .bm-editor{
            font-size: 16px;
        }
    }

    .threads-list-wrapper{
        position: relative;
        height: 100%;
        max-height: 100%;

        .threads-list-loading-more{
            margin: 10px 0;
        }
    }

    &.bp-better-messages-mini {

        .chats {
            display: block;
            //height: 500px;

            .chat {
                position: relative;
                border-radius: var(--bm-mini-chats-border-radius);
                overflow: hidden;
                display: inline-block;
                vertical-align: bottom;
                margin: 0 10px;
                width: var(--bm-mini-chats-width);
                min-width: var(--bm-mini-chats-width);
                max-width: 100%;
                background: rgba( var(--bm-bg-color), 1 );
                box-shadow: 0 0 3px 1px rgba(var(--bm-border-secondary-color), 1);
                pointer-events: auto;
                bottom: 0;
                border: 1px solid rgba(var(--bm-border-secondary-color), 1);

                transition: bottom 0.5s linear;
                height: 36px;

                &.open{
                    height: var(--bm-mini-chats-height);

                    .head{
                        height: 44px;
                    }
                }

                &:not(.open){

                    .head {
                        .avatar {
                            //height: 20px !important;
                            //width: 20px !important;
                        }
                    }
                }


                &.mini-chat-new{
                    .head{
                        > span{
                            margin-right: auto;
                            font-size: 15px;
                            margin-left: 10px;
                        }
                    }

                    .bm-alert{
                        font-size: 13px;
                    }
                }

                .head {
                    position: relative;
                    z-index: 1;
                    padding: 5px;
                    height: 36px;
                    border-radius: 0;
                    background: rgba( var(--bm-bg-secondary), 1 );
                    //cursor: pointer;
                    border-bottom: 1px solid rgba( var(--bm-border-color), 0.62 );
                    display: flex !important;
                    font-size: 13px;
                    box-sizing: border-box;
                    justify-content: flex-start;
                    align-items: center;
                    width: 100%;

                    .thread-info{
                        display: inline-flex;
                        line-height: 15px;
                        font-size: 14px;
                        margin-right: auto;
                        align-items: center;
                        border-radius: var(--bm-widgets-button-radius);
                        height: 35px;
                        padding: 2px 4px 2px 4px;
                        cursor: pointer;
                        position: relative;
                        width: 100%;

                        &.thread-info-loaded .thread-info-arrow-down{
                            position: relative;
                            font-weight: 900;
                            font-size: 18px;
                            margin-left: auto;
                            color: rgba(var(--main-bm-color), 1);
                        }

                        &:not(.thread-info-hover-disabled):hover{
                            background: var(--bm-button-hover);
                        }

                        .avatar{
                            display: block;
                            margin-right: 8px;
                            height: 30px;
                            width: 30px;

                            a, img{
                                margin: 0;
                                display: block;
                            }
                        }

                        > .avatar{
                            min-width: 30px;
                        }

                        .avatar-group{
                            position: relative;
                            width: 34px;
                            display: grid;
                            grid-template-columns: 15px 15px;
                            grid-template-rows: 15px 15px;
                            grid-gap: 2px 2px;
                            margin-right: 6px;

                            &.avatars-count-2{
                                grid-template-rows: 15px;
                            }

                            .avatar{
                                width: 15px;
                                height: 15px;
                                min-width: 15px;
                                margin-right: 0;
                            }
                        }

                        .thread-info-data{
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: flex-start;
                            align-content: flex-start;
                            max-width: 100%;
                            min-width: 1px;

                            .name{
                                margin-bottom: 2px;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                max-width: 100%;
                                overflow: hidden;
                                min-width: 1px;
                                a {
                                    color: rgba(var(--bm-text-color), 1) !important;
                                }
                            }

                            .sub-name{
                                font-size: 12px;
                                line-height: 14px;
                                min-height: 12px;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                max-width: 100%;
                                overflow: hidden;
                            }

                            .group-online,
                            .last-online{
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                max-width: 100%;
                                overflow: hidden;
                                font-size: 12px;

                                &.online-now{
                                    color: green;
                                }
                            }

                        }
                    }

                    .controls{
                        line-height: 20px;
                        display: flex;
                        align-content: center;
                        align-items: center;
                        flex-direction: row;
                        font-size: 14px;

                        > *{
                            position: relative;
                            display: block;
                            cursor: pointer;
                            color: rgba( var(--main-bm-color), 1 );
                            //margin-left: 10px;
                            font-size: 18px;
                            width: 30px;
                            height: 30px;
                            border-radius: var(--bm-widgets-button-radius) !important;
                            opacity: 1;

                            > svg{
                                position: absolute;
                                top: 0;
                                bottom: 0;
                                left: 0;
                                right: 0;
                                margin: auto;
                            }

                            &:hover{
                                background: var(--bm-button-hover);
                            }

                            &:active{
                                background: var(--bm-button-active);
                            }

                            /*&.audio-call{
                                font-size: 13px;
                                line-height: 13px;
                            }

                            &.minimize{
                                font-size: 18px;
                                line-height: 18px;
                            }

                            &.close{
                                font-size: 18px;
                                line-height: 18px;
                            } */
                        }

                    }
                }

                .chat-content{
                    position: relative;
                    max-width: 100%;
                    display: flex;
                    width: 100%;
                    height: calc( 100% - 44px );
                    flex-direction: column;
                }
            }

            .chat:not(.open) > * {
                display: none;
            }

            .chat:not(.open) span.writing {
                display: none !important;
            }


            .chat .head .title {
                display: inline-block;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .chat .head .title strong {
                font-weight: normal;
            }

            .chat .head.blink {
                background: #f1f1f1;
            }

            .chat .head .unread-count {
                background: rgba( var(--main-bm-color), 1 );
                border-radius: 100%;
                color: white;
                font-size: 10px;
                display: inline-block;
                width: 15px;
                min-width: 15px;
                height: 15px;
                line-height: 15px;
                vertical-align: middle;
                text-align: center;
                margin-right: 6px;
            }

            .chat .head .unread-count:after,
            .bp-better-messages-list .tabs > div[data-tab="messages"] .unread-count:after,
            .chat .head .unread-count:before,
            .bp-better-messages-list .tabs > div[data-tab="messages"] .unread-count:before {
                display: none;
            }

            .chat .head .unread-count.count-0 {
                display: none;
            }

        }
    }

    &.bp-better-messages-list .tabs > div .unread-count {
        background: rgba( var(--main-bm-color), 1 );
        border-radius: 100%;
        color: white;
        font-size: 10px;
        display: inline-block;
        width: 15px;
        height: 15px;
        line-height: 15px;
        vertical-align: middle;
        text-align: center;
        margin-right: 4px;
    }

    .bm-placeholder {
        margin: 0 auto;
        position: absolute;
        background-color: #eee;
        width: 100%;
        height: 100%;
    }

    @keyframes bm-placeHolderShimmer{
        0%{
            background-position: -468px 0
        }
        100%{
            background-position: 468px 0
        }
    }

    .bm-animated-background {
        animation-duration: 1.25s;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
        animation-name: bm-placeHolderShimmer;
        animation-timing-function: linear;
        background: darkgray;
        background: linear-gradient(to right, #eeeeee 10%, #dddddd 18%, #eeeeee 33%);
        background-size: 800px 104px;
        height: 100%;
        position: relative;
    }

    #bm-new-thread-title{
        margin: 0 auto 0 0 !important;
        padding: 0 !important;
        font-size: 16px;
    }

    .bm_thread_subject_input{
        position: relative;
        z-index: 1;
        align-items: center;
        background-color: rgba( var(--bm-bg-color), 1 );
        border-color: rgba(var(--bm-border-color), 0.62);
        //border-radius: 4px;
        border-style: solid;
        border-width: 0;
        cursor: default;
        display: flex;
        flex-wrap: nowrap;
        outline: 0 !important;
        transition: all 100ms;
        box-sizing: border-box;
        padding: 7px 15px;
        border-bottom: 1px solid rgba( var(--bm-border-color), 0.62 );
        justify-content: flex-start;
        font-size: 16px;
        height: auto !important;
        min-height: 40px !important;

        .bm-to-label{
            padding-right: 10px;
            font-weight: bold;
            white-space: nowrap;
            font-size: 16px;
            margin: 0;
        }

        input.thread_subject__input[type=text]{
            color: inherit;
            background: 0 center;
            opacity: 1;
            width: 100%;
            font: inherit;
            min-width: 2px;
            border: 0 !important;
            margin: 0 !important;
            outline: 0 !important;
            padding: 0 !important;
            font-size: 16px;
            color: rgba(var(--bm-text-color), 1) !important;
            background: none !important;
            border-radius: 0;

            &::placeholder {
                color: rgba( var(--bm-placeholder ), 0.33 );
            }

            &:focus, &:active{
                border: 0 !important;
                margin: 0 !important;
                outline: 0 !important;
                padding: 0 !important;
            }
        }
    }

    .bm_thread_create_error{
        background: red;
        color: white;
    }

    .bm-alert{
        position: relative;
        color: var(--bm-alert-info-color);
        background-color: var(--bm-alert-info-bg);
        border: var(--bm-alert-info-border-color);
        font-size: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0.5rem 0.5rem;
        line-height: 28px;

        p{
            font-size: 16px;
        }

        &.bm-error{
            color: var(--bm-alert-error-color);
            background-color: var(--bm-alert-error-bg);
            border: var(--bm-alert-error-border-color);
        }

        &.bm-info{
            background: rgba( var(--bm-bg-color), 1 );
            color: rgba(var(--bm-text-color), 1);
            border-bottom: 1px solid rgba(var(--bm-border-color), 0.62);

            button{
                background: rgba(var(--bm-button-bg), 1);
                color: rgba(var(--bm-button-color), 1);
                font-size: 14px;
                line-height: 14px;
                padding: 5px 10px;
                border-radius: 2px;
                border: 0;
            }
        }

        a{
            color: inherit;
            text-decoration: underline !important;
        }

        .bm_icon{
            font-size: 1rem;
            padding: 0 1rem;
        }

        ul{
            padding: 0;
            list-style: none;
            margin: 0 0;

            li{
                padding: 0;
                margin: 0;
                list-style: none;
            }
        }
    }

    .bm-notice{

        a{
            color: inherit;
            text-decoration: underline !important;
        }

        .bm_icon{
            font-size: 1rem;
            padding: 0 1rem;
        }

        p{
            margin: 0;
            color: inherit;
        }

        ul{
            list-style: none;
            margin: 1rem 0;

            li{
                padding: 0;
                margin: 0;
                list-style: none;
            }
        }
    }

    .chat-tabs{
        padding: 0;
        margin: 0 !important;
        border-radius: 0;
        background: rgba( var(--bm-bg-color), 1 );
        font-size: 13px;
        box-sizing: content-box !important;
        display: flex;
        width: 100%;
        user-select: none;

        > div{
            display: block;
            flex-grow: 1;
            text-align: center;
            padding: 0;
            box-sizing: border-box;
            cursor: pointer;
            width: 1px;
            line-height: 36px;
            height: 36px;

            border-top: 3px solid rgba( var(--main-bm-color), 0.03);
            padding-bottom: 3px;
            padding-bottom: env(safe-area-inset-bottom);

            &.active{
                background: rgba( var(--main-bm-color), 0.03);
                border-color: rgba( var(--main-bm-color), 0.5 );
            }
        }
    }

    .bm-slide-container{
        position: relative;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        min-height: 0;

        > .bm-slide{
            width: 100%;
            height: 100%;
        }
    }

    &.bm-search-popup{
        max-width: 320px;
        width: 100%;
        margin-top: 5px;

        > .bm-search-results{
            max-height: 400px;

            .bp-messages-user-list .user{
                width: auto;
                display: flex;
            }


            .threads-list .thread .pic{
                width: 30px;
                height: 30px;

                a{
                    width: 30px;
                }

                img{
                    width: 30px;
                    height: 30px;
                }
            }

        }
    }
}


.bm_user_selector{
    position: relative;
    font-size: 16px !important;
    z-index: 1;
    padding: 0 15px;
    border-bottom: 1px solid rgba( var(--bm-border-color), 0.62 );
    background-color: rgba( var(--bm-bg-color), 1 );


    .bm_user_selector__control{
        border: 0 !important;
        box-shadow: none !important;
        background-color: rgba( var(--bm-bg-color), 1 ) !important;

        &.bm_user_selector__control--is-focused{
            border: 0 !important;
            box-shadow: none !important;
        }

        input.bm_user_selector__input[type="text"]{
            border: 0 !important;
            margin: 0 !important;
            outline: 0 !important;
            padding: 0 !important;
            height: auto !important;
            min-height: 40px !important;
            box-shadow: none !important;
            color: rgba(var(--bm-text-color), 1) !important;
            background: none !important;


            &:focus, &:active{
                border: 0 !important;
                margin: 0 !important;
                outline: 0 !important;
                padding: 0 !important;
                box-shadow: none !important;
            }
        }
    }

    .bm-to-label{
        font-weight: bold;
        font-size: 16px;
        white-space: nowrap;
        margin: 0;
    }

    input,
    .bm_user_selector__placeholder{
        font-size: 16px !important;
        color: rgba(var(--bm-placeholder), 0.5);
    }

    .bm_user_selector__multi-value{
        display: flex;
        align-items: center;
        flex-direction: row;
        font-size: 0.9rem;
        padding: 1px 1px;
        background-color: rgba(var(--bm-mention-bg), 1);
        color: rgba(var(--bm-mention-color), 1);

        .avatar{
            margin: 0px 2px 0px 1px;
            width: 20px;
            height: 20px;
        }

        .name{
            font-size: 13px;
        }

        .bm_user_selector__multi-value__remove{
            display: block;

            svg{
                vertical-align: middle;
            }
        }
    }

    .bm_user_selector__menu{
        left: 0;
        width: 100%;
        margin-top: 1px;
        right: 0;
        background-color: rgba( var(--bm-bg-color), 1 );
        box-shadow: none;
        border-bottom: 1px solid rgba(var(--bm-border-color), 0.62);
        border-radius: 0;

        .bm_user_selector__menu-list{
            .bm_user_selector__option{
                display: flex;
                align-items: center;
                font-size: 1rem;
                padding: 0.2rem 0.5rem;
                cursor: pointer;

                .avatar{
                    margin-right: 0.3rem;
                    width: 30px;
                    height: 30px;
                }

                .name{
                    font-size: 16px;
                }

                &.bm_user_selector__option_focused{
                    background-color: rgba(var(--bm-hover-bg), 1);
                }
            }
        }

    }

    .bm_user_selector__menu-loading,
    .bm_user_selector__menu-notice--no-options{
        color: rgba( var(--bm-placeholder), 0.7 );
        text-align: center;
        font-size: 16px;
        margin: 5px 0;
    }
}

.bm-spinner{
    width: 100%;
    text-align: center;
    margin-top: 100px;
    font-size: 30px;
    color: #767676;
}

.bm-deleted-thread{
    .bm-deleted-thread-restore{
        font-weight: bold;
        text-decoration: underline;
        font-size: 14px;
    }
}

body.bm-mobile-device{

    .Toastify__toast {
        max-width: 90% !important;
        margin: auto !important;
        border-radius: 5px !important;
        margin-bottom: 5px !important;
    }

}

.bm-toast-close-all-notifications{
    background: black !important;
    color: white !important;
    display: block;
    text-align: center;
    position: relative;
    box-sizing: border-box;
    margin-top: -0.5rem;
    margin-bottom: 1rem;
    padding: 2px;
    font-size: 13px;
    border-radius: 4px;
    box-shadow: 0 1px 10px 0 rgb(0 0 0 / 10%), 0 2px 15px 0 rgb(0 0 0 / 5%);
    overflow: hidden;
    font-family: var(--toastify-font-family);
    cursor: pointer;
}

.bm-toast-site-message{
    background: black !important;
    color: white !important;
    user-select: none;
    opacity: 1;

    .Toastify__toast-body{
        padding: 0;
    }

    .bm-toast-site-message-container{
        display: flex;
        align-items: flex-start;

        .bm-toast-site-message-avatar{
            > .avatar{
                display: block !important;
            }

            margin-right: 10px;
            min-width: 45px;
            max-width: 45px;
        }

        .bm-toast-site-message-info {
            .bm-toast-site-message-title {
                font-weight: bold;
            }
            .bm-toast-site-message-subject {
                font-size: 11px;
                line-height: 11px;
                margin: 2px 0;
            }

            .bm-toast-site-message-content {

            }
        }
    }
}

.bm-toast-site-notification{
    background: black !important;
    color: white !important;
    user-select: none;
    opacity: 1;

    .Toastify__toast-body{
        padding: 0;
    }

    .bm-toast-site-notification-container{
        display: flex;
        align-items: flex-start;

        .bm-toast-site-notification-image{
            > .avatar{
                display: block !important;
            }

            margin-right: 10px;
            min-width: 45px;
            max-width: 45px;
        }

        .bm-toast-site-notification-info {
            .bm-toast-site-notification-title {
                font-weight: bold;
            }

            .bm-toast-site-notification-content {

            }
        }
    }
}

.bm-toast-site-call{
    background: black !important;
    color: white !important;
    user-select: none;
    opacity: 1;

    .Toastify__toast-body{
        padding: 0;
    }

    .bm-toast-site-call-container{
        display: flex;
        align-items: flex-start;

        .bm-toast-site-call-avatar{
            > .avatar{
                display: block !important;
            }

            margin-right: 10px;
            min-width: 45px;
        }

        .bm-toast-site-call-info {
            width: 100%;

            .bm-toast-site-call-title {
                font-weight: bold;
            }

            .bm-toast-site-call-content {
                display: flex;
                align-items: center;
                align-content: center;

                    .bm-toast-site-call-text{
                        margin-right: auto;
                    }

                    .bm-toast-site-call-action-answer{
                        display: inline-block;
                        width: 30px;
                        height: 30px;
                        background: green;
                        border-radius: 50%;
                        position: relative;
                        margin-right: 5px;

                        > svg{
                            transform: rotate(260deg);
                        }
                    }

                    .bm-toast-site-call-action-reject{
                        display: inline-block;
                        width: 30px;
                        height: 30px;
                        background: red;
                        border-radius: 50%;
                        position: relative;

                        > svg{
                            transform: rotate(135deg);
                        }
                    }

                    svg{
                        position: absolute;
                        left: 0;
                        right: 0;
                        top: 0;
                        bottom: 0;
                        margin: auto;
                    }
            }
        }
    }
}

body.bm-mobile-device-ios-old .bp-messages-wrap .bm-reply{
    align-items: flex-end;
    min-height: 50px;
    overflow: hidden;
}

.bm-toast-push-proposal-container{
    background: black !important;
    color: white !important;
    user-select: none;
    opacity: 1;
    font-size: 14px;
    cursor: default;
    padding: 0 2px;

    .bm-toast-push-proposal-title{
        line-height: 20px;
        margin-bottom: 5px;
    }

    .bm-toast-push-proposal-content{
        > button {
            padding: 2px 10px;
            background: none;
            font-weight: normal;
            border: 0;
            color: white !important;
            margin: 0!important;
        }

        .bm-toast-push-proposal-agree{
            background: green;
            margin-right: 5px;
        }

        .bm-toast-push-proposal-dismiss:hover{
            background: #ffffff24;
        }
    }
}

.bm-modal-window {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 100001;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    pointer-events: none;


    &.bm-modal-add-participant .bm-modal-window-inner{
        height: 350px;
        width: 600px;
        overflow: unset;
        position: relative;

        .bm_user_selector{
            border: 1px solid rgba( var(--bm-border-color), 0.62 );
            border-radius: 2px;
            padding: 0;
        }

        .bm-action-buttons{
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            text-align: right;
            padding: 5px;
        }
    }

    .bm-modal-window-inner {
        display: flex;
        flex-direction: column;
        background-color: rgba( var(--bm-bg-color), 1 );
        color: rgba( var(--bm-text-color ) );
        border-radius: 0.5em;
        max-width: 95%;
        max-height: 100%;
        padding: 0;
        margin: auto;
        box-shadow: 0 2px 3px 3px #0000001c;
        overflow: hidden;
        pointer-events: auto;
    }

    .bm-modal-window-header {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 10px;

        h3{
            margin: 0;
            color: rgba( var(--bm-text-color ) );
            font-size: 18px;
        }

        .bm-modal-window-close{
            margin-left: auto;
            cursor: pointer;
            font-size: 25px;
            line-height: 15px;
        }
    }

    .bm-modal-window-content {
        position: relative;
        height: 100%;
        min-width: 300px;
        min-height: 50px;
        padding: 10px;
    }
}
#bm-modal-window-overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
    background-color: black;
    opacity: 0.5;
}

.bm-toasts {
    &.Toastify__toast--info{
        background: rgb(0 0 0 / 85%);
    }

    .Toastify__toast-body {
        margin: 0;
        a {
            color: white !important;
            text-decoration: underline !important;

            &:hover {
                color: white !important;
            }
        }

        p {
            margin: 0;
        }
    }
}
.bp-messages-wrap .chat-header > strong{
    font-size: 13px;
    vertical-align: top;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 200px;
    overflow: hidden;
    display: inline-block;
    text-align: left;
}

.bp-messages-wrap .chat-header > strong:first-child{
    padding-left: 20px;
}

.bp-messages-wrap .chat-header > a,
.bp-messages-wrap .chat-header > span{
    display: inline-block;
    line-height: inherit;
    color: rgba( var(--main-bm-color), 1 ) !important;
    text-decoration: none !important;
    border: none;
    font-size: 18px;
}

.bp-messages-wrap .chat-header .thread-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
    justify-content: flex-end;

    > a,
    > span,
    > div.expandingButtons {
        position: relative;
        color: rgba(var(--main-bm-color), 1) !important;
        font-size: 18px;
        height: 42px;
        width: 50px;
        cursor: pointer;

        > svg {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
        }
    }
}

.bp-messages-wrap .chat-header .mobileClose{
    display:none;
}

.bp-messages-wrap .chat-header h3 {
    margin: 0 0 0 20px;
}

.bp-messages-wrap .chat-header .new-message,
.bp-messages-wrap .chat-footer .new-message {
    position: relative;
    width: 50px;
    height: 42px;
    line-height: 42px;
    text-align: center;
}

.bp-messages-wrap .chat-footer .new-message {
    color: rgba(var(--main-bm-color), 1);
    font-size: 20px;
}

.bp-messages-wrap .chat-header .block-user {
    position: relative;
    float: right;
    width: 50px;
    text-align: center;
    cursor: pointer;
}

.bp-messages-wrap .chat-header .mini-chat {
    position: relative;
    float: right;
    width: 50px;
    text-align: center;
    cursor: pointer;
}

.bp-messages-wrap .chat-header .video-call {
    position: relative;
    float: right;
    width: 50px;
    text-align: center;
    cursor: pointer;
}

.bp-messages-wrap .chat-header .bpbm-maximize,
.bp-messages-wrap .chat-header .bpbm-minimize,
.bp-messages-wrap .chat-header .bm-search-btn {
    position: relative;
    float: right;
    width: 50px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    cursor: pointer;
}

.bp-messages-wrap .chat-header .group-call,
.bp-messages-wrap .chat-header .group-audio-call {
    position: relative;
    width: 50px;
    text-align: center;
    float: right;
    cursor: pointer;
}

.bp-messages-wrap .chat-header .audio-call {
    position: relative;
    float: right;
    width: 50px;
    text-align: center;
    cursor: pointer;
}

.bp-messages-wrap .chat-header .mass-message {
    position: relative;
    float: right;
    width: 50px;
    text-align: center;
    cursor: pointer;
}

.bp-messages-wrap .chat-header .starred-messages {
    position: relative;
    /* float: right; */
    width: 50px;
    text-align: center;
    height: 42px;
    line-height: 42px;
    text-decoration: none;
}
.bp-messages-wrap .chat-header .push-notifications {
    float: right;
    width: 50px;
    display: inline-block;
    height: 42px;
    line-height: 42px;
    text-align: center;
    vertical-align: top;
    outline: none;
    font-size: 13px;
    cursor: pointer;
    display: none;
}

.bp-messages-wrap .chat-header .bpbm-search {
    float: right;
    text-align: center;
    height: 44px;
    line-height: 44px;
    text-decoration: none;
}

.bp-messages-wrap .chat-header .bpbm-search form {
    display: inline-block;
    position: relative;
    margin: 7px 8px 7px 0 !important;
    height: 30px;
    line-height: 30px;
}

.bp-messages-wrap .chat-header .bpbm-search form .close {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    margin: auto;
    bottom: 0;
    width: 27px;
    font-size: 15px;

    svg{
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        margin: auto;
    }
}

.bp-messages-wrap .chat-header .bpbm-search form input[type=text]::placeholder {
    color: rgba( var(--bm-placeholder ), 0.33 );
}

.bp-messages-wrap .chat-header .bpbm-search form .close i{
    line-height: 30px !important;
}

.bp-messages-wrap .chat-header .bpbm-search form input[type="text"] {
    max-height: 30px !important;
    min-height: 30px !important;
    display: inline-block;
    background: rgba(var(--bm-bg-color), 1) !important;
    border-radius: 3px;
    border: 1px solid rgba(var(--bm-border-secondary-color), 1) !important;
    max-width: 200px;
    box-sizing: border-box;
    padding: 10px 25px 10px 10px;
    font-size: 13px;
    transition: border-color 0.2s;
    color: rgba( var(--bm-text-color), 1 ) !important;;

    &:focus{
        border-color: rgba(var(--bm-border-active), 1) !important;
    }
}

.bp-messages-wrap .chat-header .bpbm-search form input:focus {
    border-color: rgba( var(--main-bm-color), 1 );
    outline: 0;
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba( var(--main-bm-color), 0.6 );
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba( var(--main-bm-color), 0.6 );
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba( var(--main-bm-color), 0.6 );
}

.bp-messages-wrap .chat-header .bpbm-search a {
    width: 50px;
    display: inline-block;
    height: 42px;
    line-height: 42px;
    vertical-align: top;
    outline: none;
    font-size: 13px;
    border: none;
}

.bp-messages-wrap .chat-header .participants {
    float: right;
    min-width: 50px;
    text-align: center;
    height: 42px;
    line-height: 42px;
    text-decoration: none;
}

.bp-messages-wrap .chat-header .participants + .participants{
    display: none !important;
}

.bp-messages-wrap .chat-header .bpbm-unmute-thread,
.bp-messages-wrap .chat-header .bpbm-mute-thread {
    float: right;
    width: 50px;
    text-align: center;
    height: 42px;
    line-height: 42px;
    text-decoration: none;
}

.bp-messages-wrap .chat-header .bpbm-leave-thread {
    float: right;
    width: 50px;
    text-align: center;
    height: 42px;
    line-height: 42px;
    text-decoration: none;
}

.bp-messages-wrap .empty {
    text-align: center;
    margin: 30px 0 30px;
    color: rgba( var( --bm-text-color ), 0.6);
}

.bp-messages-wrap .threads-list .empty {padding: 30px 0 20px;}
.bp-messages-wrap .threads-list .empty .bpbm-empty-icon {font-size: 50px;line-height:50px;margin: 10px auto;}
.bp-messages-wrap .threads-list .empty .bpbm-empty-icon i{font-size: 50px}
.bp-messages-wrap .threads-list .empty .bpbm-empty-message{margin: 10px auto;}
.bp-messages-wrap .threads-list .empty .bpbm-empty-link{margin: 10px auto;}

.bpbm-empty-link a{
    color: rgba(var(--main-bm-color), 1) !important;
}

.bp-messages-wrap .thread-not-selected .empty {padding: 20px 0 20px;}
.bp-messages-wrap .thread-not-selected .empty .bpbm-empty-icon {font-size: 50px;margin: 10px auto;}
.bp-messages-wrap .thread-not-selected .empty .bpbm-empty-icon i{font-size: 50px}
.bp-messages-wrap .thread-not-selected .empty .bpbm-empty-message{margin: 10px auto;}
.bp-messages-wrap .thread-not-selected .empty .bpbm-empty-or{margin: 0px auto;}
.bp-messages-wrap .thread-not-selected .empty .bpbm-empty-link{margin: 10px auto;}

.bp-messages-wrap .bpbm-favorite-empty {padding: 30px 0 20px;}
.bp-messages-wrap .bpbm-favorite-empty .bpbm-empty-icon {font-size: 50px;margin: 10px auto;}
.bp-messages-wrap .bpbm-favorite-empty .bpbm-empty-icon i{font-size: 50px}
.bp-messages-wrap .bpbm-favorite-empty .bpbm-empty-message{margin: 10px auto;}

.bp-messages-wrap .bpbm-search-empty {padding: 30px 0 20px;}
.bp-messages-wrap .bpbm-search-empty .bpbm-empty-icon {font-size: 50px;margin: 10px auto;}
.bp-messages-wrap .bpbm-search-empty .bpbm-empty-icon i{font-size: 50px}
.bp-messages-wrap .bpbm-search-empty .bpbm-empty-message{margin: 10px auto;}

.bp-messages-wrap .chat-header .back {
    position: relative;
    width: 42px;
    min-width: 42px;
    text-align: center;
    height: 100%;

    & + .thread-info{
        margin-left: 0 !important;
    }

    svg{
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }
}

.bm-svg{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

.bm-svg-animate{
    animation-name: bm-svg-animate;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    transform-origin: 50% 50%;
}
@keyframes bm-svg-animate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


.bp-messages-wrap .scroller {
    overflow: hidden;
    overflow-y: auto;
    width: auto;
    width: 100%;
    height: 100%;
    text-align: initial;
    vertical-align: initial;
    float: none;
    margin: 0;
    cursor: initial;
    z-index: initial !important;
    position: relative;
}

.bp-messages-wrap.bp-messages-mobile .scroller {
    max-height: 100%;
    max-height: calc(100% - 44px);
}

.bp-messages-wrap.bp-messages-mobile input,
.bp-messages-wrap.bp-messages-mobile textarea,
.bp-messages-wrap.bp-messages-mobile .new-message form > div input,
.bp-messages-wrap.bp-messages-mobile .new-message form > div .taggle_input[type="text"]{
    font-size: 16px !important;
    line-height: 20px !important;
}

.bp-messages-wrap .list {
    //display: table;
    //width: 100%;
    //margin: 0;
    //table-layout: fixed;
}


.bp-messages-wrap .starred .list, .bp-messages-wrap .search .list {
    margin-top: 20px;
}

/*
body.bp-messages-mobile *:not(input,textarea) {
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
} */

body.bp-messages-mobile .bm-medium-editor-mention-panel{
    z-index: 100001;
}


.bp-messages-wrap.bp-messages-mobile .threads-list .thread .time{
    display: table-cell !important;
    padding-right: 0;
    padding-left: 0;
    width: 1px;
    margin-right: 0;
    vertical-align: top;
    //padding-top: 10px;
}

.bp-messages-wrap.bp-messages-mobile .threads-list .thread .time .delete{
    display: block !important;
    position: relative;
    top: 0;
    right: 0px;
    padding-right: 0px;
}


.bp-messages-wrap .clearfix::before, .bp-messages-wrap .clearfix::after {
    content: "";
    display: table;
}

.bp-messages-wrap .clearfix::after {
    clear: both;
}

.bp-messages-wrap .clearfix {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

.bp-messages-wrap .threads-list {
    position: relative;
    display: table;
    width: 100%;
    table-layout: auto;
}

.bp-messages-wrap .threads-list.empty{
    //height: 100%;
    padding-bottom: 0;
}

.bp-messages-wrap .bp-messages-side-threads .threads-list{
    height: auto;
}

.bp-messages-wrap .threads-list .thread {
    display: table-row;
    vertical-align: top;
    /* position: relative; */

    .bm-typing-container{
        white-space: normal;
    }
}


.bp-messages-wrap .threads-list .thread.no-avatars > .bm-info{
    padding-left: 15px;
}


.bp-messages-wrap .threads-list .thread .deleted {
    display: none;
    left: 0;
    right: 0;
    position: absolute;
    width: 100%;
    text-align: center;
    background: #fff6f6 !important;
    z-index: 2;
    padding: 0;
}


.bp-messages-wrap .threads-list .thread.bp-messages-active-thread {
    background: rgba( var(--main-bm-color), 0.03 );
}

.bp-messages-wrap .threads-list .thread.unread {
    background: #fdfdfd;
    background: rgba(253, 253, 253, 0.4);
}

.bp-messages-wrap .threads-list .thread:last-child > * {
    border-bottom: 0;
}

.bp-messages-wrap .threads-list .thread > * {
    display: table-cell;
    vertical-align: top;
    padding-bottom: 15px;
    padding-top: 15px;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(var(--bm-border-secondary-color), 0.4);
    line-height: initial;
}

.bp-messages-wrap .threads-list .thread .pic {
    padding-left: 15px;
    width: 50px;
    height: 50px;
    padding-right: 15px;
    text-align: left;
    box-sizing: content-box !important;
    position: relative;
    opacity: 1;
    z-index: 1;
}

.bp-messages-wrap .threads-list .thread .pic.group {
    vertical-align: middle;
    text-align: left;
    line-height: 0;
    width: 55px;
    height: 55px;
    box-sizing: content-box !important;
}

.bp-messages-wrap .avatar {
    border: 0 !important;
}

.bp-messages-wrap .threads-list .thread .pic img {
    display: block;
    vertical-align: top;
    /* width: 100%; */
    border-radius: var(--bm-avatar-radius) !important;
}

.bp-messages-wrap .threads-list .thread .pic.group > *{
    margin: 0.5px 0.5px !important;
    width: 25px !important;
    height: 25px !important;
    border: 0 !important;
    display: inline-block;
    box-sizing: border-box;
}

.bp-messages-wrap .threads-list .thread .pic.group > * .avatar{
    width: 25px !important;
    height: 25px !important;
}

.no-count.bp-better-messages-unread {
    display: none !important;
}
.bp-messages-wrap .threads-list .thread .bm-info .name {
    font-size: 13px;
    line-height: 13px;
    margin-bottom: 6px;
    padding: 0;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;

    .bm-thread-icon{
        margin-left: 5px;
        color: rgba( var( --bm-text-color ), 0.6);

        svg{
            vertical-align: middle;
        }
    }
}

.bp-messages-wrap .threads-list .thread .bm-info .name + h4 {
    font-size: 10px;
    margin: 0 0 4px;
    text-transform: none;
    font-weight: normal;
    line-height: 12px;

}

.bp-messages-wrap .threads-list .thread .bm-info h4 {
    margin: 0 0 4px;
    font-size: 13px;
    line-height: 13px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: initial;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;
    word-break: break-word;
    color: rgba( var( --bm-text-color ), 1);

    .bm-thread-icon{
        margin-left: 5px;
        color: rgba( var( --bm-text-color ), 0.6);
    }
}

.bp-messages-wrap .threads-list .thread .bm-info .last-message {
    margin: 0;
    font-size: 12px;
    /* IE 5.5-7 */
    /* Firefox 1.0-2.0 */
    /* current browsers */
    /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;    /* Instead use this non-standard one: */
    word-break: break-word;      /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    line-height: 13px;
    padding: 0;

    display: flex;
    align-items: flex-start;

    .bm-last-message-avatar{
        min-width: 15px;
        margin-right: 5px;
    }

    .bm-last-message-content {
        > br + br {
            display: none;
        }

        .last-message-rich {
            display: flex;
            align-items: center;
            //margin-top: 5px;

            > svg {
                margin-right: 3px;
            }
        }

    }

}

.bp-messages-wrap .threads-list .thread .bm-info .bm-live-chat-online{
    display: flex;
    font-size: 11px;
    align-items: center;
    margin-top: 2px;

    .bm-live-chat-online-indicator {
        background: #28B62C;
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        -webkit-animation: pulse-animation 2s infinite linear;
        margin-right: 5px;
    }

    @-webkit-keyframes pulse-animation {
        0% { -webkit-transform: scale(1); }
        25% { -webkit-transform: scale(1); }
        50% { -webkit-transform: scale(1.2) }
        75% { -webkit-transform: scale(1); }
        100% { -webkit-transform: scale(1); }
    }
}

.bp-messages-wrap .threads-list .thread .bm-info p .avatar {
    vertical-align: middle;
    margin-right: 5px !important;
    width: 10px;
    height: 10px;
    display: inline-block;
}


.bp-messages-wrap .threads-list .thread .bm-info p .avatar img{
    display: block;
}

.bp-messages-wrap .threads-list .thread .bm-info p .bpbm-gifs-icon{
    vertical-align: middle;
}

.bp-messages-wrap .threads-list .thread .time {
    padding-left: 10px;
    position: relative;
    padding-right: 2px;
    text-align: center;
    width: 1px;
    font-size: 12px;
    white-space: nowrap;


    .bm-status{
        display: block;
        opacity: 1 !important;
        position: relative;
        margin: 5px 0 0;
        cursor: pointer;
        text-align: center;
        color: gray;
        font-size: 11px;

        &[data-status="seen"]{
            color: rgba( var(--main-bm-color), 1 );
        }

        > svg{
            width: 14px;
        }
    }
}

.bp-messages-wrap .threads-list .thread .actions {
    text-align: center;
    width: 1px;
    font-size: 12px;
    padding-right: 8px;

    > * {
        opacity: 0;
    }
}

.bp-messages-wrap.bp-messages-mobile .threads-list .thread .actions{
    padding-right: 4px;
    //padding-left: 2px;
}

.bp-messages-wrap:not(.bp-messages-mobile) .threads-list .thread:hover > * {
    background: rgba( var(--bm-hover-bg), 1 );
    cursor: pointer;
}
.bp-messages-wrap:not(.bp-messages-mobile) .threads-list .thread:hover .actions > * {
    opacity: 1;
}

.bp-messages-wrap .threads-list .thread .actions .bm-more-actions {
    font-size: 15px;
    color: #cacaca;
    line-height: 1;
}

.bp-messages-wrap .threads-list .thread .unread-mention {
    background: rgba(var(--main-bm-color), 1);
    color: white;
    height: 20px;
    width: 20px;
    border-radius: 100%;
    font-size: 12px;
    margin-right: 5px;
    position: relative;

    > svg{
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
    }
}

.bp-messages-wrap .threads-list .thread .unread-count {
    background: rgba(var(--main-bm-color), 1);
    color: white;
    height: 20px;
    width: 20px;
    border-radius: 100%;
    font-weight: bold;
    padding: 0;
    line-height: 20px;
    font-size: 11px;
    display: block;
}

.bp-messages-wrap .threads-list .thread .bm-info .user {
    line-height: 14px;
    margin-bottom: 4px;
}

.bp-messages-wrap .threads-list .thread .bm-info .user a {
    text-decoration: none;
}

.bp-messages-wrap div.new-message {
    padding: 20px 20px;
    overflow: auto;
    height: 100%;

    h4{
        margin: 0 0 1em;
    }
}

.bp-messages-wrap div.new-message form{
    margin: 0;
}

.bp-messages-wrap .new-message form > div {
    margin-bottom: 20px;
    position: relative;
}

.bp-messages-wrap .new-message form > div label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 14px;
}


.bp-messages-wrap .new-message form > div textarea{
    min-height: 80px;
    padding-top: 10px !important;
}

.bp-messages-wrap .new-message form > div input, .bp-messages-wrap .new-message form > div textarea {
    display: block;
    width: 100% !important;
    box-sizing: border-box !important;
    background-color: #fff !important;
    border: 1px solid #ccc !important;
    -moz-border-radius: 3px !important;
    -webkit-border-radius: 3px !important;
    border-radius: 3px !important;
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075) !important;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075) !important;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075) !important;
    -moz-transition: border-color 0.15s ease-in-out, -moz-box-shadow 0.15s ease-in-out !important;
    -o-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
    -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
    font-size: 14px !important;
    padding-left: 12px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    line-height: 12px !important;
    height: initial !important;
    min-height: 10px !important;
}


.bp-messages-wrap .new-message form > div textarea {
    min-height: 5em !important;
    outline: none;
}
.bp-messages-wrap .new-message form > div input:focus {
    border-color: rgba( var(--main-bm-color), 1 ) !important;
    outline: 0 !important;
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba( var(--main-bm-color), 0.6 ) !important;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba( var(--main-bm-color), 0.6 ) !important;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba( var(--main-bm-color), 0.6 ) !important;
}


.bp-messages-wrap .writing {
    position: absolute;
    bottom: 82px;
    left: 0;
    height: 30px;
    line-height: 30px;
    padding-left: 78px;
    font-size: 10px;
    box-sizing: border-box;
    width: 100%;
    background: rgb(255,255,255);
    background: -moz-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(250,251,252,1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(250,251,252,1) 100%);
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(250,251,252,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#fafbfc",GradientType=1);
    z-index: 4;
}

.bp-messages-wrap.bp-better-messages-mini .writing{
    padding-left: 12px;
}



.bp-messages-wrap .active .taggle_list {
    border-color: rgba( var(--main-bm-color), 1 );
    outline: 0;
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba( var(--main-bm-color), 0.6 );
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba( var(--main-bm-color), 0.6 );
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba( var(--main-bm-color), 0.6 );
}

.bp-messages-wrap .taggle_list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 !important;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #ccc;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-transition: all 0.15s ease-in-out;
    -o-transition: all 0.15s ease-in-out;
    -webkit-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
    font-size: 14px;
    padding-left: 12px !important;
    margin-bottom: 0 !important;
    height: auto !important;
    overflow: hidden;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    line-height: 12px;
}

.bp-messages-wrap .taggle_list input.taggle_input[type="text"],
.bp-messages-wrap .taggle_list input.taggle_input[type="text"]:focus{
    border: none !important;
    outline: none !important;
    height: auto !important;
    font-size: 16px;
    font-weight: 300;
    padding-top: 0;
    padding-bottom: 0;
    min-height: 10px;
}

.bp-messages-wrap .taggle_list li {
    float: left;
    display: inline-block;
    white-space: nowrap;
    font-weight: 500;
    margin-bottom: 0px;
    margin-left: 0 !important;
}

.bp-messages-wrap .taggle_list .taggle {
    margin-right: 8px;
    background: #E2E1DF;
    padding: 1px 10px;
    border-radius: 3px;
    position: relative;
    cursor: pointer;
    transition: all .3s;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    font-size: 12px;
    margin-top: 3px;
    margin-bottom: 3px;
    padding-top: 0px;
    padding-bottom: 0px;
    min-height: 30px;
    line-height: 30px;
}

.bp-messages-wrap .taggle_list .taggle_hot {
    background: #cac8c4;
}

.bp-messages-wrap .taggle_list .taggle .close:active {
    background: none !important;
    background-image: none !important;
    background-color: none !important;
}

.bp-messages-wrap .taggle_list .taggle .close {
    font-size: 1.1rem;
    position: absolute;
    top: 0;
    right: 2px;
    bottom: 0;
    text-decoration: none;
    padding-left: 2px;
    padding-top: 3px;
    padding-right: 2px;
    background-image: none !important;
    line-height: 0.5;
    color: #ccc;
    color: rgba(0, 0, 0, 0.2);
    padding-bottom: 4px;
    display: none;
    border: 0;
    background: none;
    cursor: pointer;
    outline: 0;
}

.bp-messages-wrap .taggle_list .taggle:hover {
    /* padding: 5px; */
    padding-right: 25px;
    background: #ccc;
    transition: all .3s;
}

.bp-messages-wrap .taggle_list .taggle:hover > .close {
    display: inline-block;
    width: 20px;
}

.bp-messages-wrap .taggle_list .taggle .close:hover {
    color: #990033;
}

.bp-messages-wrap .taggle_placeholder {
    position: absolute;
    color: #CCC;
    top: 12px;
    left: 8px;
    transition: opacity, .25s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#wcfm-main-contentainer input.taggle_input[type="text"],
.bp-messages-wrap .new-message form > div .taggle_input[type="text"] {
    padding: 0px !important;
    padding-left: 0;
    float: left;
    background: none;
    width: 100%;
    max-width: 100%;
    font-size: 14px !important;
    margin: 0;
    border: 0 !important;
    box-shadow: none !important;
}

.bp-messages-wrap .taggle_sizer {
    padding: 0;
    margin: 0;
    position: absolute;
    top: -500px;
    z-index: -1;
    visibility: hidden;
}

/*container styles*/
.bp-messages-wrap textarea.input, .bp-messages-wrap .textarea.input {
    border: 0;
    background: #FDFDFD;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(255, 255, 255, 0.7);
    min-height: 60px;
    padding: 8px;
    border-radius: 3px;
    color: #555;
    transition: all .25s;
    cursor: text;
    margin-bottom: 10px;
    position: relative;
}

.bp-messages-wrap .textarea.input:focus, .bp-messages-wrap .textarea.input.active, .bp-messages-wrap textarea.input:focus, .bp-messages-wrap textarea.input.active {
    background: #fff;
    transition: all .25s;
}

.bp-messages-wrap .textarea.input, textarea.input {
    height: auto;
}

.bp-messages-wrap .textarea.tags {
    position: relative;
}

.bp-messages-wrap .textarea.tags * {
    box-sizing: content-box !important;
}

.bp-messages-wrap .placeholder_input {
    position: relative;
}

.bp-messages-wrap .placeholder_input span {
    position: absolute;
    color: #AAA;
    top: 50%;
    margin-top: -11px;
    left: 10px;
}

.bp-messages-wrap .placeholder_input input {
    width: 120px;
}

.bp-messages-wrap .ui-autocomplete {
    position: absolute;
    top: 0;
    left: 0;
}

.bp-messages-wrap .ui-menu {
    list-style: none;
    padding: 2px;
    margin: 0;
    display: block;
    outline: none;
}

.bp-messages-wrap .ui-widget-content {
    background: #fff;
    color: #990033;
}

.bp-messages-wrap .ui-menu .ui-menu-item {
    margin: 0;
    padding: 0;
    width: 100%;
}

.bp-messages-wrap .ui-menu .ui-menu-item a {
    text-decoration: none;
    display: block;
    padding: 2px .4em;
    line-height: 1.5;
    min-height: 0;
    font-weight: normal;
    color: #8a8a8a;
    cursor: pointer;
}

.bp-messages-wrap .ui-menu .ui-menu-item a:hover {
    color: #fff;
    background: #990033;
}

.bp-messages-wrap .ui-state-hover, .bp-messages-wrap .ui-widget-content .ui-state-hover, .bp-messages-wrap .ui-widget-header .ui-state-hover, .bp-messages-wrap .ui-state-focus, .bp-messages-wrap .ui-widget-content .ui-state-focus, .bp-messages-wrap .ui-widget-header .ui-state-focus {
    background: #fafbfc;
    cursor: pointer;
}

.bp-messages-wrap .ui-state-hover a, .bp-messages-wrap .ui-state-hover a:hover, .bp-messages-wrap .ui-state-hover a:link, .bp-messages-wrap .ui-state-hover a:visited {
    color: #fff;
}

.bp-messages-wrap .ui-state-active, .bp-messages-wrap .ui-widget-content .ui-state-active, .bp-messages-wrap .ui-widget-header .ui-state-active {
    /* border: 1px solid #aaaaaa; */
    background: #ffffff;
    font-weight: normal;
    color: #212121;
}

.bp-messages-wrap .ui-helper-hidden {
    display: none;
}

.bp-messages-wrap .ui-helper-hidden-accessible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.bp-messages-wrap .autocomplete {
    max-height: 200px;
    overflow: scroll;
    position: absolute;
    top: 66px;
    background: white;
    width: 99.5%;
    left: 0.25%;
    z-index: 2;
}

.bp-messages-wrap .autocomplete ul li {
    display: block;
    padding: 6px 8px;
}

.bp-messages-wrap .autocomplete ul li.selected, .autocomplete ul li:hover {
    background: #ff6633;
    color: #fff;
    cursor: pointer;
}

.bp-messages-wrap .ui-autocomplete {
    max-height: 200px;
    overflow: scroll;
    width: 99% !important;
}

.bbpm-avatar {
    position: relative;
    display: inline-block;
    max-width: 100%;
    //max-height: 100%;
    padding: 0 !important;
    overflow: initial !important;
    color: #8ac176;
    transition: color 0.5s ease;
    border-radius: var(--bm-avatar-radius) !important;
    //overflow: hidden !important;

    img{
        display: block;
        border-radius: var(--bm-avatar-radius) !important;
    }
}

.bbpm-avatar::before {
    display: block;
    opacity: 0;
    position: absolute;
    content: '';
    background-color: currentColor;
    border-radius: 50%;
    bottom: -1px;
    right: -1px;
    border: 1px solid #fff;
    height: 20%;
    width: 20%;
    //transition: opacity .25s ease-in-out;
    //-moz-transition: opacity .25s ease-in-out;
    //-webkit-transition: opacity .25s ease-in-out;
    z-index: 2;
}

.bbpm-avatar.online::before {
    opacity: 1;
}


.bp-messages-wrap img.wp-smiley, .bp-messages-wrap img.emoji, .bp-messages-wrap .emojione {
    display: inline !important;
    border: none !important;
    box-shadow: none !important;
    height: 1.3em !important;
    width: 1.3em !important;
    margin: 0 .07em !important;
    vertical-align: -0.1em !important;
    background: none !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    top: initial !important;
    text-indent: initial !important;
    line-height: initial !important;
}


.threads-list-wrapper.all-loaded .threads-list{
    padding-bottom: 0;
}

.threads-list-wrapper .loading-messages{
    top: auto;
    bottom: 10px;
}

.loading-messages {
    margin: 0 auto 0;
    width: 70px;
    text-align: center;
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 10px;
}

.loading-messages > div {
    width: 10px;
    height: 10px;
    background-color: #8b8b8b;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.loading-messages .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.loading-messages .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

.bm-spin-animation{
    -webkit-animation: bm-spin 2s linear infinite;
    animation: bm-spin 2s linear infinite;
}

@-webkit-keyframes bm-spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes bm-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@-webkit-keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0)
    }
    40% {
        -webkit-transform: scale(1.0)
    }
}

@keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    40% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
}

.bp-better-messages-mini {
    position: fixed;
    bottom: 0;
    right: 70px;
    box-shadow: none !important;
    border: 0 !important;
    overflow: unset;
    z-index: 800;
    pointer-events: none;
    background: none !important;
    white-space: nowrap;
}


.bp-messages-wrap.bp-better-messages-list .messages .scroller{
    max-height: 351px !important;
    height: 9999px;
}

/** +40px **/
.bp-messages-wrap.bp-better-messages-list .messages.no-chat-footer .scroller{
    max-height: 351px !important;
}

.bp-messages-wrap.bp-better-messages-list .friends .scroller,
.bp-messages-wrap.bp-better-messages-list .um-friends .scroller,
.bp-messages-wrap.bp-better-messages-list .ps-friends .scroller,
.bp-messages-wrap.bp-better-messages-list .bpbm-groups .scroller,
.bp-messages-wrap.bp-better-messages-list .ps-groups .scroller,
.bp-messages-wrap.bp-better-messages-list .bmum-groups .scroller{
    max-height: 351px !important;
    height: 9999px;
}

.bp-messages-wrap.bp-better-messages-mini .bp-messages-threads-wrapper {
    max-height: 395px;
}

#bp-better-messages-mini-mobile-open{
    display: none;
}

#bp-better-messages-mini-mobile-open .bp-better-messages-mini-mobile-open-icon{
    font-size: 28px;
    line-height: 52px;

    > svg{
        vertical-align: initial;
    }
}

#bp-better-messages-mini-mobile-open .count{
    position: absolute;
    top: -6px;
    right: -6px;
    font-size: 12px;
    line-height: 14px;
    padding: 2px 4px;
    height: 17px;
    background: red;
    border-radius: 2px;
    box-sizing: border-box;
}

.bp-messages-wrap-main.bp-messages-mobile,
.bp-messages-wrap-group.bp-messages-mobile,
.bp-messages-chat-wrap.bp-messages-mobile{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    background: white;
    border-radius: 0;
    border: 0;
    box-shadow: none;

    .chat-footer{
        height: calc( 44px + env(safe-area-inset-bottom) );
        padding-bottom: env(safe-area-inset-bottom);
    }
}

#bp-better-messages-mini-mobile-container,
#bp-better-messages-mobile-view-container{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    background: white;
    border-radius: 0;
    border: 0;
    box-shadow: none;

    .chat-footer{
        height: calc( 44px + env(safe-area-inset-bottom) );
        padding-bottom: env(safe-area-inset-bottom);
    }
}

body.bm-mobile-device {
    .bp-messages-wrap .chat-header .mini-chat,
    .bp-better-messages-mini,
    .bp-better-messages-list{
        display: none !important;
    }

    #bp-better-messages-mini-mobile-open{
        display: block;
        position: fixed;
        background: rgba( var(--main-bm-color), 1 );
        color: white;
        width: 50px;
        height: 50px;
        text-align: center;
        padding: 0;
        margin: 0;
        line-height: 50px;
        font-size: 25px;
        bottom: 20px;
        right: 20px;
        border-radius: 2px;
        box-shadow: none;
        border: none;
        z-index: 10;

        i{
            line-height: 50px;
        }

        &.bpbm-mobile-open-left{
            left: 20px;
            right: auto;
        }
    }
}

@media screen and (max-width: 800px) {
    .bp-messages-wrap .chat-header .mini-chat,
    .bp-better-messages-mini,
    .bp-better-messages-list{
        display: none !important;
    }

    #bp-better-messages-mini-mobile-open{
        display: block;
        position: fixed;
        background: rgba( var(--main-bm-color), 1 );
        color: white;
        width: 50px;
        height: 50px;
        text-align: center;
        padding: 0;
        margin: 0;
        line-height: 50px;
        font-size: 25px;
        bottom: 20px;
        right: 20px;
        border-radius: 2px;
        box-shadow: none;
        border: none;
        z-index: 10;

        i{
            line-height: 50px;
        }

        &.bpbm-mobile-open-left{
            left: 20px;
            right: auto;
        }
    }
}

.bp-messages-wrap i {
    font-size: inherit;
}


.bp-messages-wrap .pic{
    width: 50px;
    height: 50px;
    position: relative;
    opacity: 1;
    z-index: 1;
}

.bp-messages-wrap .pic img{
    height: 50px;
    width: 50px;
}
.bp-messages-wrap .pic.group img{
    height: 23px;
}


/* @media screen and (max-width: 700px) { */

.bp-messages-wrap.bp-messages-mobile{
    //position: static !important;
    //top: 0;
    //left: 0;
    //right: 0;
    //bottom: 0;
    //z-index: 10000;
    //background: white;
    border-radius: 0;
    border: 0;
    box-shadow: none;
    margin: 0 !important;
    max-width: 100% !important;

    .contexify__item__content {
        padding: 6px 12px;
    }
}

.bp-messages-wrap.bp-messages-mobile .chat-header .mobileClose{
    position: relative;
    color: rgba(var(--main-bm-color), 1) !important;
    display:inline-block;
    float: right;
    width: 45px;
    text-align: center;
}

.bp-messages-wrap .chat-header .expandingButtons{
    display:inline-block;
    /* position: relative; */
    float: right;
    width: 45px;
    text-align: center;
    cursor: pointer;
    //font-size: 17px;
    user-select: none;
}

.bp-messages-wrap .expandingButtons .bpbm-dropdown-menu{
    display: none;
    position: absolute;
    top: 100%;
    right: 0px;
    z-index: 1000;
    /* display: none; */
    min-width: 10rem;
    padding: 0.2rem 0;
    margin: .125rem 0 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: rgba( var(--bm-bg-secondary), 1 );
    background-clip: padding-box;
    border: 1px solid rgba( var(--bm-border-color), 0.62 );
    border-radius: 0;
    //box-shadow: 0px 1px 1px 0px #00000033;
}

.bp-messages-wrap .expandingButtons.expandingButtonsOpen .bpbm-dropdown-menu{
    display: block;
}

.bp-messages-wrap.bp-better-messages-mini .expandingButtons.expandingButtonsOpen .bpbm-dropdown-menu{
    right: 12px;
}

.bp-messages-wrap .expandingButtons .bpbm-dropdown-menu .bpbm-dropdown-item{
    display: flex;
    align-items: center;
    flex-direction: row;
    width: 100%;
    padding: 0 10px;
    clear: both;
    font-weight: 400;
    font-size: 14px;
    margin: 0;
    height: 40px;
    line-height: 40px;
    color: rgba(var(--bm-text-color), 1);
    text-align: left;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    box-sizing: border-box;

    .bpbm-dropdown-item-icon{
        position: relative;
        height: 30px;
        width: 30px;
        margin-right: 5px;
        font-size: 16px;
        text-align: center;

        svg{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
    }
}


.bp-messages-wrap .expandingButtons .bpbm-dropdown-menu .bpbm-dropdown-item:hover{
    background: rgba( var(--main-bm-color), 0.03 );
}

.bp-messages-wrap.bp-messages-mobile .chat-header .bpbm-search{
    display: inline-block;
    float: none;
}

.bp-messages-wrap.bp-messages-mobile .chat-header .bpbm-search a{
    height: 44px;
    line-height: 44px;
}

.bp-messages-wrap.bp-messages-mobile .bm-reply{
    //padding-bottom: 10px;
}

.bp-messages-wrap .new-message .message{
    position: relative;
    background: none;
    padding: 0;
    margin: 0;
}

.bp-messages-wrap.bp-messages-mobile .threads-list .thread .pic.group{
    width: 55px;
}

.bp-messages-wrap.bp-messages-mobile .threads-list .thread .pic{
    padding-left: 15px !important;
    padding-right: 15px !important;
    opacity: 1;
    position: relative;
    z-index: 1;
}


.bp-better-messages-list{
    position: fixed;
    border-radius: var(--bm-mini-chats-border-radius) !important;
    overflow: hidden !important;
    bottom: 0;
    border: 1px solid rgba(var(--bm-border-secondary-color), 1);
    overflow: unset;
    z-index: 800;
    right: var( --bm-mini-widgets-offset );
    width: var(--bm-mini-widgets-width);
    max-width: 100%;
    background: rgba( var(--bm-bg-color), 1 );
    box-shadow: 0 0 3px 1px rgba(var(--bm-border-secondary-color), 1);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;

    &.bm-opened{
        height: var(--bm-mini-widgets-height);
    }

    .tabs-content{
        height: 100%;
        min-height: 0;

        > div.active{
            height: 100%;
        }
    }
}

.bp-better-messages-list + .bp-better-messages-mini{
    right: var(--bm-mini-chats-offset);
}
.bp-better-messages-list .tabs{
    padding: 0;
    margin: 0 !important;
    line-height: 35px;
    height: 35px;
    border-radius: 5px 5px 0 0;
    background: rgba( var(--bm-bg-color), 1 );
    border-bottom: 1px solid rgba( var(--bm-border-color), 0.62 );
    font-size: 13px;
    box-sizing: content-box !important;
    /* box-shadow: 0 0 3px 1px #d7d8db; */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-flow: nowrap;
}

.bp-better-messages-list .tabs > div{
    display: inline-flex;
    width: 100%;
    text-align: center;
    padding: 0;
    box-sizing: border-box;
    cursor: pointer;
    white-space: nowrap;
    align-items: center;
    justify-content: center;
    align-content: center;
    flex-direction: row;

    > svg{
        font-size: 16px;
        margin-right: 4px;
    }
}

.bp-better-messages-list .tabs > div.active{
    background: rgba( var(--bm-bg-secondary), 1 );
}

.bp-better-messages-list .tabs > div[data-tab=bpbm-close] {
    //display: none;
    width: 40px;
    min-width: 40px;
    padding: 0 5px 0 5px;
}

.bp-better-messages-list .tabs-content > div{
    display: none;
    height: 400px;
}
.bp-better-messages-list .tabs-content > div.active{
    display: block;
}
.bp-messages-wrap.bp-better-messages-list .threads-list .thread .pic img{
    width: 25px;
    height: 25px;
}
.bp-messages-wrap.bp-better-messages-list .threads-list .thread .pic.group > *{
    width: 12px !important;
    height: 12px !important;
    vertical-align: top;
}
.bp-messages-wrap.bp-better-messages-list .threads-list .thread .pic.group > * .avatar{
    width: 12px !important;
    height: 12px !important;
}
.bp-messages-wrap.bp-better-messages-list .threads-list .thread .pic{
    width: 25px;
    padding-left: 15px;
    padding-right: 10px;
    height: 25px;
    opacity: initial;
    position: relative;
    z-index: 1;
}

.bp-messages-wrap.bp-better-messages-list .threads-list .thread .pic.group{
    width: 30px;
    vertical-align: top;
}

.bp-messages-wrap.bp-better-messages-list .chat-header{
    border-top: 1px solid rgba( var(--bm-border-color), 0.62 );
    border-bottom: none;
    height: 40px;
    line-height: 37px;
}

.bp-messages-wrap .threads-list .thread .loading{
    margin: 0 auto 0;
    padding: 0 !important;
    width: 100%;
    height: 100%;
    text-align: center;
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: white;
    z-index: 2;
}

.bp-messages-wrap .threads-list .thread.loading .loading {
    display: block;
}


.bp-messages-wrap .threads-list .thread .loading > div {
    width: 10px;
    height: 10px;
    background-color: #8b8b8b;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.bp-messages-wrap .threads-list .thread .loading .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.bp-messages-wrap .threads-list .thread .loading .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

.bp-messages-wrap .empty-thread{
    height: 100%;
    text-align: center;
    margin: 20px 0 40px;
    font-size: 16px;
}
.bp-messages-wrap .empty-thread svg{
    font-size: 50px !important;
    color: #9d9d9d;
}
.bp-messages-wrap .empty-thread span{
    display: block;
    margin-top: 20px;
    color: gray;
    white-space: normal;
    padding: 0 10px;
}

.bp-messages-user-list{
    position: relative;
    width: 100%;
    padding: 0;
    background: rgba( var(--bm-bg-color), 1 );
    height: 100%;

    .bpbm-loader-icon{
        text-align: center;
        font-size: 24px;
        margin-top: 40px;
    }
}

.bm-load-more-participants-div {
    display: block;
    text-align: center;
    padding: 0 0 10px;

    .bm-load-more-participants {
        display: inline-block;
        padding: 5px 15px;
        background: rgba( var(--main-bm-color), 1 );
        color: rgba( var(--bm-bg-color), 1 );
        white-space: nowrap;
        cursor: pointer;
    }
}

.bp-messages-user-list .bp-messages-user-list-loader{
    text-align: left;
    font-size: 28px;
    padding: 10px !important;
}

.bp-messages-user-list .user{
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;
    background: none !important;
    cursor: default !important;
    font-size: 15px;

    .threads-list-item-note{
        color: gray;
        font-size: 10px;
        margin-left: 5px;

        > span{
            display: block;
        }
    }
}
.bp-messages-user-list .user:not(.not-clickable):hover{
    background: rgba( var(--bm-hover-bg), 1 ) !important;
    cursor: pointer !important;
}
.bp-messages-user-list .user > *{
    padding-top: 7px;
    padding-bottom: 7px;
}
.bp-messages-user-list .user:first-child > *{
    //padding-top: 10px;
}
.bp-messages-user-list .user:last-child > *{
    //padding-bottom: 10px;
}
.bp-messages-user-list .user .pic{
    width: 30px;
    height: 30px;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: content-box !important;

    position: relative;
    opacity: 1;
    z-index: 1;
}
.bp-messages-user-list .user .pic img{
    width: 30px;
    height: 30px;
}
.bp-messages-user-list .user .name{
    font-size: 13px;
    word-break: break-word;
}

.bp-messages-user-list .user .bm-msg-status{
    color: gray;
    font-style: italic;
    font-size: 90%;
    padding-left: 10px;
}

.bp-messages-user-list .user .actions{
    display: flex;
    margin-left: auto;
    padding: 5px 10px 5px 10px;
    white-space: nowrap;
    align-items: center;
}

.bp-messages-user-list .user.threads-list-item .actions{
    padding-right: 0;
}

.bp-messages-user-list .user .actions > a,
.bp-messages-user-list .user .actions > span{
    position: relative;
    padding: 0;
    display: block;
    font-size: 16px;
    width: 16px;
    height: 16px;
    margin: 0 5px;
    cursor: pointer;
    color: rgba(var(--bm-text-color), 1);

    > svg{
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }
}

.bp-messages-user-list .user .loading{
    margin: 0 auto 0;
    padding: 0 !important;
    width: 100%;
    height: 100%;
    text-align: center;
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: white;
    z-index: 2;
}

.bp-messages-user-list .user.loading .loading{
    display: block;
}

.bp-messages-user-list .user .loading > div {
    width: 10px;
    height: 10px;
    background-color: #8b8b8b;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.bp-messages-user-list .user .loading .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.bp-messages-user-list .user .loading .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}



.bp-messages-group-list{
    position: relative;
    width: 100%;
    padding: 0;
    background: rgba( var(--bm-bg-color), 1 );
    height: 100%;
    font-size: 15px;

    .bpbm-loader-icon{
        text-align: center;
        font-size: 24px;
        margin-top: 40px;
    }
}
.bp-messages-group-list .group{
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;
    background: none !important;
    cursor: default !important;
}
.bp-messages-group-list .group:hover{
    background: rgba( var(--bm-hover-bg), 1 ) !important;
    cursor: pointer !important;
}
.bp-messages-group-list .group > *{
    padding-top: 7px;
    padding-bottom: 7px;
}
.bp-messages-group-list .group:first-child > *{
    //padding-top: 10px;
}
.bp-messages-group-list .group:last-child > *{
    //padding-bottom: 10px;
}
.bp-messages-group-list .group .pic{
    width: 30px;
    height: 30px;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: content-box !important;

    position: relative;
    opacity: 1;
    z-index: 1;
}
.bp-messages-group-list .group .pic img{
    width: 30px;
    height: 30px;
}
.bp-messages-group-list .group .name{
    font-size: 13px;
    word-break: break-word;
}

.bp-messages-group-list .group .actions{
    padding: 5px 15px;
    white-space: nowrap;
    margin-left: auto;
}
.bp-messages-group-list .group .actions > a{
    padding: 10px 3px;
    display: inline-block;
    color: rgba(var(--bm-text-color), 1);
    font-size: 12px;
}

.bp-messages-group-list .group.loading .loading{
    display: block;
}

.bp-messages-group-list .group .loading > div {
    width: 10px;
    height: 10px;
    background-color: #8b8b8b;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.bp-messages-group-list .group .loading .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.bp-messages-group-list .group .loading .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

.bp-messages-wrap .chat-controls{
    position: absolute;
    background: #fafbfc;
    padding: 9px 15px;
    border-bottom: 1px solid rgba( var(--bm-border-color), 0.62 );
    display: none;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    box-sizing: border-box;
    bottom: 0;
}

.bp-messages-wrap .chat-controls .edit-message{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 15px;
    width: 100%;
    height: 100%;
    background: inherit;
}

.bp-messages-wrap .chat-controls .edit-message .bpbm-edit-cancel{
    float: right;
}

.bp-messages-wrap .chat-controls a{
    text-decoration: none;
    background: #427a9b;
    color: white !important;
    font-size: 11px;
    padding: 2px 10px;
    vertical-align: top;
    display: inline-block;
    border-radius: 2px;
    line-height: 20px;
    user-select: none;
}

.bp-messages-wrap .chat-controls a .fas{
    color: white;
    line-height: 20px;
}

.bp-messages-wrap .chat-controls a.bpbm-fave{
    background: #dc9f19;
}
.bp-messages-wrap .chat-controls a.bpbm-edit{}
.bp-messages-wrap .chat-controls a.bpbm-delete{
    float: right;
    background: #ad1f1f !important;
    color: white !important;
    text-decoration: none !important;
}

.bp-messages-wrap .chat-controls a.bpbm-delete i{
    color: white !important;
}

.bp-messages-wrap.bp-better-messages-mini .chat-controls a{
    padding-top: 4px;
    padding-bottom: 4px;
}

.bp-messages-wrap .chat-controls a i{
    font-size: 9px;
    vertical-align: middle;
}

.bp-messages-wrap .participants-panel,
.bp-messages-wrap .bm-thread-settings{
    position: relative;
    width: 100%;
    z-index: 2;
    padding: 10px;
    background: rgba( var(--bm-bg-color), 1 );
    //max-height: 500px;

    h4{
        margin: 0 !important;
        padding: 10px 10px !important;
        font-weight: 400;
        font-size: 20px;
    }


    .bm-thread-add-participant-title {
        display: flex;
        align-items: center;
        .bm-thread-add-participant {
            display: block;
            position: relative;
            margin-left: auto;
            cursor: pointer;
            width: 24px;
            height: 24px;
        }
    }
}

.bm-name{
    display: inline-flex;
    align-items: center;

    .bm-name-moderator,
    .bm-name-verified{
        display: inline-flex;
    }
}


.bm-name-verified{
    margin-left: 5px;
}

.bp-messages-wrap .participants-panel{
    .participants-panel-filters{
        padding: 0px 10px 5px !important;

        > span {
            display: inline-block;
            border: 1px solid rgba(var(--bm-border-secondary-color), 1);
            padding: 3px 10px;
            font-size: 13px;
            margin-right: 6px;
            border-radius: 15px;
            cursor: pointer;
            user-select: none;

            &.bm-active{
                font-weight: bold;
            }
        }
    }
}

.bp-messages-wrap .participants-panel .add-user{padding: 5px 10px 10px;}
.bp-messages-wrap .participants-panel .add-user p{margin: 0 0 5px;font-weight: bold;}
.bp-messages-wrap .participants-panel .add-user > button{
    margin-top: 8px;
}

.bp-messages-wrap .add-user-panel{
    display: none;
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
    overflow: auto;
    padding: 20px 10px;
    background: rgba( var(--bm-bg-color), 1 );
}

.bp-messages-wrap .add-user-panel.open{
    display: block;
}

.bp-messages-wrap .add-user-panel h4 {
    margin: 0 0 10px!important;
    padding: 0!important;
}
.bp-messages-wrap .add-user-panel .buttons{
    margin-top: 20px;
}

.bp-messages-wrap .add-user-panel .buttons button{
    margin-right: 10px;
    cursor: pointer;
    display: inline-block;
    color: white;
    background: rgba( var(--main-bm-color), 1 );
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 8px;
    padding-bottom: 8px;
    user-select: none;
    vertical-align: top;
    border: 0;
    border-radius: 2px;
    box-shadow: 0 1px 3px 0 #cccccc;
    font-size: 14px !important;
    line-height: 17px;
}

.bp-messages-mobile-tap{
    display: none;
}

.bp-messages-wrap.mobile-ready:not(.bp-messages-mobile) .bp-messages-mobile-tap{
    display: block;
    text-align: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff9e;
    box-sizing: border-box;
    color: #216f95;
    z-index: 10;
}

body.uppy-Dashboard-isFixed #wpadminbar,
body.bp-messages-mobile #wpadminbar{
    display: none;
}

/**
* Youzer
*/
.bpbm-youzify-btn{
    a{
        color: #898989;
        border: 1px solid #eee;
        background-color: transparent;
        font-size: 13px;
        height: initial;
        min-width: 110px;
        font-weight: 600;
        line-height: 22px;
        padding: 12px 20px;
        text-align: center;
        display: inline-block;
        vertical-align: middle;

        i{
            font-weight: 600;
            margin-right: 8px;
            font-size: 14px;
        }
    }
}

body.bp-messages-mobile #yz-profile-header,
body.bp-messages-mobile .yz-sidebar-column,
body.bp-messages-mobile footer,
body.bp-messages-mobile #yz-profile-navmenu{
    display: none !important;
}

.bp-messages-wrap .bpbm-user-option-title{
    margin: 0 0 10px !important;
    font-size: 18px;
}

.bp-messages-wrap .bpbm-user-options .push-notifications-control{
    margin: 10px 0 0;
}

.bp-messages-wrap .bpbm-user-options {
    padding: 20px;
    font-size: 16px;

    button{
        cursor: pointer;
        display: inline-block;
        color: white;
        background: rgba( var(--main-bm-color), 1 );
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 8px;
        padding-bottom: 8px;
        user-select: none;
        border: 0;
        border-radius: 2px;
        box-shadow: 0 1px 3px 0 #cccccc;
    }
}

.bp-messages-wrap .bpbm-user-options .bpbm-user-option{
    margin: 0 0 10px;
    font-size: 16px;
}

.bp-messages-wrap .bpbm-user-options .bpbm-user-option-toggle{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 16px;
}

.bp-messages-wrap .bpbm-user-options .bpbm-user-option-toggle label{
    display: inline;
    font-size: 16px;
    padding: 0;
    margin: 0;
}

.bp-messages-wrap .bpbm-user-options .bpbm-user-option-toggle input[type="checkbox"]{
    display: none;
}

.bp-messages-wrap .bpbm-user-options .bpbm-user-option-description{
    color: rgba( var( --bm-text-color ), 0.8 );
    font-size: 90%;
    margin: 8px 0 0;
}

.bp-messages-wrap .bpbm-user-options .bpbm-user-blacklist{
    margin: 10px 0;

    table{
        border: none;

        td{
            border: 1px solid #e4e4e4;
            padding: 5px 10px;
        }
    }

    table+.bpbm-user-blacklist-empty{
        display: none;
    }

    .bpbm-user-blacklist-empty{
        text-align: center;
        padding: 30px 0;
        border: 1px solid #e4e4e4;

        svg{
            display: block;
            font-size: 36px;
            margin: 10px auto;
        }
    }
}
.bp-messages-wrap .bpbm-user-options .bpbm-user-blacklist ul{list-style: none;padding: 0px 10px;margin: 5px 0 5px;border: 1px solid #dedfe1;}
.bp-messages-wrap .bpbm-user-options .bpbm-user-blacklist ul li{
    list-style: none;
    border: 1px solid #dedfe1;
    padding: 2px 10px;
    margin: 10px 0;
}

.bp-messages-wrap .bpbm-user-options {
    padding: 20px;
    font-size: 16px;
}

.bp-messages-wrap .bpbm-thread-options {
    padding: 0 10px;
    font-size: 16px;
}

.bp-messages-wrap .bpbm-thread-options .bpbm-thread-option{
    margin: 0 0 10px;
    font-size: 16px;
}

.bp-messages-wrap .bpbm-thread-options .bpbm-thread-option-toggle{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 16px;
}

.bp-messages-wrap .bpbm-thread-options .bpbm-thread-option-toggle label{
    display: inline;
    font-size: 16px;
    padding-left: 0;
}

.bp-messages-wrap .bpbm-thread-options .bpbm-thread-option-toggle input[type="checkbox"]{
    margin-right: 5px;
}
.bp-messages-wrap .bpbm-thread-options .bpbm-thread-option-toggle input[type="text"]{
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(var(--bm-border-secondary-color), 1) !important;
}

.bp-messages-wrap .bpbm-thread-options .bpbm-thread-option-description{
    color: rgba( var(--bm-text-color), 0.9 );
    font-size: 90%;
}




.bp-better-messages-restrict-send-message{
    list-style: none!important;
    padding: 10px 5px !important;
    margin: 0 auto !important;
    text-align: center!important;
    font-size: 16px;
}

.bp-better-messages-restrict-send-message li{
    list-style: none!important;
}



.bp-messages-wrap .bp-messages-audio-container{
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    min-height: 200px;
    z-index: 5;
}


.bp-messages-group-call-controls-v2{
    position: absolute;
    z-index: 2;
    background: rgba(var(--bm-bg-color), 1);
    width: 100%;
    height: 44px;
    padding: 0 10px;
    border-top: 1px solid rgba( var(--bm-border-color), 0.62 );
    border-left: 1px solid rgba( var(--bm-border-color), 0.62 );
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .bp-messages-group-call-controls-buttons {
        > span {
            position: relative;
            display: inline-block;
            padding: 0;
            height: 34px;
            width: 34px;
            font-size: 15px;
            line-height: 34px;
            color: black;
            background: white;
            box-sizing: border-box;
            border-radius: 50px;
            text-transform: uppercase;
            margin-left: 5px;
            cursor: pointer;
            border: 1px solid #e3e3e3;
            vertical-align: middle;
        }

        .bpbm-exit-room {
            background: red;
            color: white;
        }
    }

    .bpbm-call-settings {
        height: auto;
        margin-bottom: 10px;
    }
}

.bp-messages-group-call-input-video-inner{
    .bp-messages-group-call-controls{
        position: relative;
        line-height: 28px;
        padding-top: 5px;
        padding-bottom: 5px;
        z-index: 2;

        .bpbm-call-settings{
            height: auto;
            margin-bottom: 10px;
        }

        .bpbm-call-in-progress{
            > span {
                height: 34px;
                width: 34px;
                font-size: 16px;
                line-height: 34px;
            }
        }
    }
}

.bp-messages-private-call {
    .bp-messages-call-controls {
        transition: bottom 0.5s ease-in-out;

        .bpbm-call-buttons > * {
            position: relative;
            > svg{
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
            }
        }


        &.show-on-hover {
            bottom: -999px;
        }

        &.show-on-tap {
            bottom: -999px;
        }
    }

    &:hover{
        .bp-messages-call-controls.show-on-hover {
            bottom: 0;
        }
    }

    &.bpbm-tapped{
        .bp-messages-call-controls.show-on-tap {
            bottom: 0;
        }
    }
}

.bp-messages-call-controls .bpbm-call-buttons > *{
    pointer-events: auto;
}

.bp-messages-group-call-controls > *{
    pointer-events: auto;
}

.bp-messages-call-controls,
.bp-messages-group-call-controls{
    position: absolute;
    width: 100%;
    //height: 80px;
    bottom: 0;
    left: 0;
    z-index: 10;
    text-align: center;
    line-height: 82px;
    //bpbm-call-settingoverflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;

    .bpbm-call-buttons > *{
        pointer-events: auto;
    }

    .bpbm-answer{
        background: green;
        display: inline-block;
        padding: 12px 12px;
        font-size: 20px;
        line-height: 19px;
        color: white;
        box-sizing: border-box;
        border-radius: 50px;
        text-transform: uppercase;
        margin-left: 5px;
        cursor: pointer;
        vertical-align: middle;
        height: 44px;
        width: 44px;
    }

    .bpbm-reject{
        background: red;
        display: inline-block;
        padding: 12px 12px;
        font-size: 20px;
        line-height: 19px;
        color: white;
        box-sizing: border-box;
        border-radius: 50px;
        text-transform: uppercase;
        margin-left: 5px;
        cursor: pointer;
        vertical-align: middle;
    }

    .bpbm-reject i{
        transform: rotate(135deg);
    }

    .bpbm-cancel{
        background: red;
        display: inline-block;
        padding: 12px 12px;
        font-size: 20px;
        line-height: 19px;
        height: 44px;
        width: 44px;
        color: white;
        box-sizing: border-box;
        border-radius: 50px;
        text-transform: uppercase;
        margin-left: 5px;
        cursor: pointer;
        vertical-align: middle;

        svg{
            transform: rotate(135deg);
        }
    }

    .bpbm-disable-mic,
    .bpbm-enable-mic,
    .bpbm-pic-in-pic{
        position: relative;
        background: white;
        display: inline-block;
        padding: 0;
        height: 44px;
        width: 44px;
        font-size: 20px;
        line-height: 44px;
        color: black;
        box-sizing: border-box;
        border-radius: 53px;
        text-transform: uppercase;
        margin-left: 5px;
        cursor: pointer;
        vertical-align: middle;
    }

    .bp-messages-full-screen-call{
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        z-index: 9998;
    }

    .bpbm-configure-call,
    .bpbm-switch-full-screen,
    .bpbm-switch-share-screen,
    .bpbm-fs-enable,
    .bpbm-fs-disable,
    .bpbm-switch-camera-video,
    .bpbm-disable-video,
    .bpbm-enable-video{
        background: white;
        display: inline-block;
        padding: 0;
        height: 44px;
        width: 44px;
        font-size: 20px;
        line-height: 44px;
        color: black;
        box-sizing: border-box;
        border-radius: 53px;
        text-transform: uppercase;
        margin-left: 5px;
        cursor: pointer;
        position: relative;
        vertical-align: middle;
    }


    .bpbm-cancel i{
        transform: rotate(135deg);
    }

    .bpbm-call-end{
        background: red;
        display: inline-block;
        padding: 0;
        height: 44px;
        width: 44px;
        font-size: 20px;
        line-height: 44px;
        color: white;
        box-sizing: border-box;
        border-radius: 50px;
        text-transform: uppercase;
        margin-left: 5px;
        cursor: pointer;
        vertical-align: middle;
    }

    .bpbm-call-end i{
        transform: rotate(135deg);
    }
}

.bpbm-call-settings{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    line-height: initial;
    height: 60px;
    color: black;

    > .bpbm-call-setting{
        width: 30%;
        max-width: 300px;
        padding: 0 1%;
        flex: 1 1 0px;

        label{
            display: inline-block;
            margin-bottom: 5px;
            color: white;
            background: #00000075;
            padding: 3px 8px;
            font-size: 12px;
            border-radius: 15px;
        }
    }

}

.bpbm-switch-camera-select-wrap,
.bpbm-switch-audio-select-wrap,
.bpbm-switch-mic-select-wrap {
    display: grid;
    grid-template-areas: "select";
    align-items: center;
    position: relative;
    max-width: 100%;
    border: 1px solid #777;
    border-radius: 0.25em;
    padding: 1px 8px 1px 8px;
    font-size: 12px;
    cursor: pointer;
    line-height: 1.1;
    background-color: #fff;
    background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
    pointer-events: auto;
    select,
    &::after {
        grid-area: select;
    }

    // Custom arrow
    &:not(.select--multiple)::after {
        content: "";
        justify-self: end;
        width: 0.8em;
        height: 0.5em;
        background-color: #777;
        clip-path: polygon(100% 0%, 0 0%, 50% 100%);
    }

    select {
        // A reset of styles, including removing the default dropdown arrow
        appearance: none;
        background-color: transparent;
        border: none;
        padding: 0.8em 1em 0.8em 0;
        margin: 0;
        width: 100%;
        font-family: inherit;
        font-size: inherit;
        cursor: inherit;
        line-height: inherit;
        z-index: 1;
        outline: none;
        background: none;
        &::-ms-expand {
            display: none;
        }
    }
}


.bp-messages-wrap.bp-messages-popup .bpbm-answer{
    background: green;
    display: inline-block;
    padding: 0;
    height: 35px;
    width: 35px;
    font-size: 15px;
    line-height: 35px;
    color: white;
    box-sizing: border-box;
    border-radius: 50px;
    text-transform: uppercase;
    margin-left: 5px;
    cursor: pointer;
    text-align: center;
}

.bp-messages-wrap.bp-messages-popup .bpbm-reject{
    background: red;
    display: inline-block;
    padding: 0;
    height: 35px;
    width: 35px;
    font-size: 15px;
    line-height: 35px;
    color: white;
    box-sizing: border-box;
    border-radius: 50px;
    text-transform: uppercase;
    margin-left: 5px;
    cursor: pointer;
    text-align: center;
}

.bp-messages-wrap.bp-messages-popup .bpbm-answer i,
.bp-messages-wrap.bp-messages-popup .bpbm-reject i{
    vertical-align: middle;
}

.bp-messages-wrap.bp-messages-popup .bpbm-reject i{
    transform: rotate(135deg);

}

.bp-messages-wrap.bp-messages-popup {
    box-shadow: none;
    background: none;
    border: none;
    clear: none;
}
.bp-messages-wrap.bp-messages-popup .caller-image{

}

.bp-messages-call-popup{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: flex;
    justify-content: space-between;
}

.bp-messages-wrap.bp-messages-popup .bpbm-call-in{
    white-space: nowrap;
    text-align: right;
}

.bp-messages-call-popup > *{
    vertical-align: middle;
}

.bp-messages-call-popup > .caller-name{
    padding: 0 5px;
    font-size: 12px;
    line-height: 14px;
}

.bp-messages-video-container .bp-messages-main-placeholder{
    background: gray;
    width: 100%;
    height: 100%;
    display: block;
    min-height: 400px;
    padding: 0;
    overflow: hidden;
    margin: 0;
    position: relative;

    .bp-messages-placeholder-no-access-message{
        color: white;
        text-align: center;
        margin: 30px auto 10px;
        background: #bd1616;
        padding: 10px 10px 15px;
        border-radius: 10px;
        max-width: 90%;
        width: 100%;

        .bp-messages-placeholder-no-access-message-icon{
            font-size: 30px;
        }

        .bp-messages-placeholder-no-access-message-text{
            margin-top: 5px;
            font-size: 18px;
        }
    }
}

.bp-messages-video-container .bp-messages-main-placeholder .bp-messages-call-animation {
    background: #fff;
    width: 100px;
    height: 100px;
    position: relative;
    margin: 30px auto 0;
    border-radius: 100% !important;
    overflow: hidden;
    /* border: solid 5px #fff; */
    animation: bp-messages-call-play 2s ease infinite;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    pointer-events: none;
}

.bp-messages-call-animation > .avatar{
    width: 100%;
    height: 100%;
}

.bp-messages-video-container .bp-messages-main-placeholder .bp-messages-call-animation.bp-messages-animation-pause{
    animation: none;
}

.bp-messages-video-container .bp-messages-main-placeholder .bp-messages-call-animation img {
    width: 100px;
    height: 100px;
    border-radius: 100%;
    position: absolute;
    left: 0;
    top: 0;
}


.bp-messages-video-container .bp-messages-main-placeholder .bp-messages-placeholder-message {
    position: relative;
    text-align: center;
    color: white;
    margin-top: 20px;
    pointer-events: none;
}

.bp-messages-video-container .bp-messages-main-placeholder .bp-messages-placeholder-video{position: absolute;width: 100%;height: 100%;object-fit: cover;}

.bp-messages-video-container .bp-messages-main-placeholder .bp-messages-placeholder-video video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bp-messages-audio-container .bp-messages-main-placeholder{
    background: gray;
    width: 100%;
    height: 100%;
    display: block;
    min-height: 400px;
    padding: 0;
    overflow: hidden;
    margin: 0;
    position: relative;

    .bp-messages-placeholder-no-access-message{
        display: none;
        color: white;
        text-align: center;
        margin: 30px auto 10px;
        background: #bd1616;
        padding: 10px 10px 15px;
        border-radius: 10px;
        max-width: 90%;
        width: 100%;

        .bp-messages-placeholder-no-access-message-icon{
            font-size: 30px;
        }

        .bp-messages-placeholder-no-access-message-text{
            margin-top: 5px;
            font-size: 18px;
        }
    }
}

.bp-messages-audio-container .bp-messages-main-placeholder .bp-messages-call-animation{
    background: #fff;
    width: 100px;
    height: 100px;
    position: relative;
    margin: 30px auto 0;
    border-radius: 100% !important;
    /* border: solid 5px #fff; */
    animation: bp-messages-call-play 2s ease infinite;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}

.bp-messages-audio-container .bp-messages-main-placeholder .bp-messages-call-animation img{
    width: 100px;
    height: 100px;
    border-radius: 100%;
    position: absolute;
    left: 0;
    top: 0;
}


.bp-messages-audio-container .bp-messages-main-placeholder .bp-messages-placeholder-message {
    position: relative;
    text-align: center;
    color: white;
    margin-top: 20px;
}


@keyframes bp-messages-call-play {

    0% {
        transform: scale(1);
    }
    15% {
        box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.4);
    }
    25% {
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.4), 0 0 0 20px rgba(255, 255, 255, 0.2);
    }
    25% {
        box-shadow: 0 0 0 15px rgba(255, 255, 255, 0.4), 0 0 0 30px rgba(255, 255, 255, 0.2);
    }

}

/**
    Side threads list
*/

.bp-messages-column{
    width: calc(100% - 320px);
    position: relative;
    display: flex;
    flex-direction: column;
    transition: width 0.3s ease-in-out;
    overflow: hidden;
}
body.bp-messages-mobile .bp-messages-threads-wrapper .bp-messages-column{
    width: 100%;
}

.bp-messages-threads-wrapper.threads-hidden .bp-messages-column{
    width: 100%;
    height: 100%;
}

.bp-messages-threads-wrapper .bp-messages-column .preloader{
    top: 0;
    height: 100%;
}

.bp-messages-wrap .bp-messages-side-threads{
    display: none;
    width: 320px;
    border-right: 1px solid rgba( var(--bm-border-color), 0.62 );
    flex-direction: column;
    justify-content: space-between;
    transition: width 0.3s ease-in-out;

    .bm-side-content{
        height: 100%;
        min-height: 0;
    }
}

.bp-messages-wrap .bp-messages-threads-wrapper:not(.threads-hidden) .bp-messages-side-threads{
    display: flex;
}

.bp-messages-wrap .bp-messages-side-threads > *{
    width: 320px;
    border-right: 1px solid rgba( var(--bm-border-color), 0.62 );
}

.bp-messages-wrap .bp-messages-side-threads > .scroller{
    max-height: 100% !important;
}

.bp-messages-wrap .bp-messages-side-threads .threads-list .thread .pic{
    width: 30px;
    height: 30px;


    position: relative;
    opacity: 1;
    z-index: 1;
}

.bp-messages-wrap .bp-messages-side-threads .threads-list .thread .pic img{
    width: 30px;
    height: 30px;
    border-radius: var(--bm-avatar-radius) !important;
    overflow: hidden;
}

.bp-messages-wrap .bp-messages-side-threads .threads-list .thread .pic.group{
    width: 35px;
    height: 35px;
    text-align: left;
}

.bp-messages-wrap .bp-messages-side-threads .threads-list .thread .pic.group > * {
    width: 14px !important;
    height: 14px !important;
}

.bp-messages-wrap .bp-messages-side-threads .threads-list .thread .pic.group > * .avatar{
    width: 14px !important;
    height: 14px !important;
}


.bp-messages-wrap .bp-messages-side-threads .threads-list .thread .time .time-wrapper{
    /*display: none;*/
    font-size: 9px;
    vertical-align: top;
}

.bp-messages-wrap.mobile-ready .bp-messages-side-threads{
    display: none !important;
}

.bp-messages-wrap.mobile-ready:not(.bp-better-messages-mini){
    overflow: hidden;
}
.bp-messages-wrap.mobile-ready:not(.bp-better-messages-mini) .scroller{
    min-height: 200px;
}

.bp-messages-wrap.mobile-ready .bp-messages-threads-wrapper{
    display: flex;
}

body.bp-messages-mobile .bp-messages-wrap .bp-messages-threads-wrapper{
    height: 100% !important;
    max-height: 100% !important;
}

.bp-messages-wrap.mobile-ready .bp-messages-threads-wrapper .bp-messages-column{
    display: flex;
}

body.bp-messages .bp-navs.bp-subnavs{
    display: none !important;
}

body.bp-messages-mobile .bp-messages-hide-on-full-screen,
body.bp-messages-full-screen .bp-messages-hide-on-full-screen{
    display: none !important;
}

body.bp-messages-mobile,
.bp-messages-wrap.mobile-ready{
    .chat-header {
        .bpbm-maximize{
            display: none !important;
        }
        .bpbm-minimize{
            display: none !important;
        }
    }
}

.bm-toasts-container{
    font-weight: normal;
}

.bm-emoji-picker-container {
    z-index: 801;
    width: 352px;
    font-weight: normal;
    border-radius: 10px;
    border: 1px solid rgba(var(--bm-border-color), 0.62);
}

body.bp-messages-full-screen,
body.bp-messages-mobile{
    #wpadminbar{
        display: none !important;
    }

    .bm-editor-format-tooltip{
        z-index: 10000001;
    }

    .bp-messages-threads-wrapper{
        height: 100% !important;
        max-height: 100% !important;
    }

    .contexify{
        z-index: 10000001 !important;
        //bottom: 0;
        //top: auto !important;
        //width: 100%;
    }

    .uppy-Dashboard--modal{
        .uppy-Dashboard-overlay {
            z-index: 10000001;
        }

        .uppy-Dashboard-inner {
            z-index: 10000002;
        }
    }

    .Toastify__toast-container{
        z-index: 10000001;
    }

    #better-messages-modals-container{
        position: relative;
        z-index: 10000001;
    }

    .bm-emoji-picker-container {
        z-index: 10000001;
        /*width: 100%;
        left: 0 !important;

        em-emoji-picker{
            margin: 0 auto;
        }*/
    }

    .bpbmmfp-bg {
        z-index: 10000001;
    }

    .bpbmmfp-wrap{
        z-index: 10000002;
    }

    .chat-header {
        .mini-chat,
        .bpbm-maximize{
            display: none;
        }
        .bpbm-minimize{
            display: block !important;
        }
    }

    .bp-better-messages-mini,
    .bp-better-messages-list{
        display: none;
    }
}

.bpbm-browser-push-proposal{

}

.bpbm-browser-push-proposal .bpbm-browser-push-proposal-text{
    display: block;
    font-size: 12px;
    margin-bottom: 10px;
}

.bpbm-browser-push-proposal-controls{
    user-select: none;
    display: block;
}

.bpbm-browser-push-proposal .bpbm-browser-push-proposal-controls{
    display: block;
}

.bpbm-browser-push-proposal .bpbm-browser-push-proposal-controls .BPBMenablePushNotifications{
    display: inline-block;
    margin: 0 10px 0 0;
    outline: 0;
    padding: 10px;
    font-size: 12px;
    background: green;
    color: white;
}

.bpbm-browser-push-proposal .bpbm-browser-push-proposal-controls .BPBMdismissPushProposal{
    display: inline-block;
    margin: 0;
    outline: 0;
    padding: 10px;
    font-size: 12px;
    background: black;
    color: white;
}

.bpbm-private-message-link-buddypress{
    display: block;
    text-decoration: none;
    color: initial;
    margin: 10px 0 0;
    font-size: 12px;
}

.bp-messages-wrap.mobile-ready .bp-messages-side-threads{
    display: none !important;
}

.bp-messages-wrap.mobile-ready  .bp-messages-threads-wrapper .bp-messages-column{
    //display: block;
    height: 100%;
}

.bp-messages-wrap.mobile-ready .bp-messages-threads-wrapper .bp-messages-column{
    width: 100%
}


body.bp-messages-mobile{
    overflow: hidden !important;
    overscroll-behavior-x: none;
}

.bpbm-deleted-user-link{
    cursor: default !important;
    text-decoration: none !important;
    background: none !important;
}

.bp-messages-wrap .chat-header .bp-verified-badge{
    height: 17px;
    width: 17px;
}

.bp-messages-wrap .bp-verified-badge{
    background-color: rgba( var(--main-bm-color), 1 ) !important
}

.bp-messages-wrap .chat-header .bp-verified-badge-tooltip{
    display: none !important;
}

.bp-messages-wrap .threads-list .thread .bm-info .name  .bp-verified-badge,
.bp-better-messages-mini .chats .chat .head .bp-verified-badge{
    height: 12px;
    width: 12px;
    background-size: 6px;
}

.bp-messages-wrap .mejs-button>button{
    background: transparent url(../../../../../wp-includes/js/mediaelement/mejs-controls.svg) !important;
    border: 0 !important;
    cursor: pointer;
    display: block;
    font-size: 0;
    height: 20px;
    line-height: 0;
    margin: 10px 6px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    text-decoration: none;
    width: 20px;
}

.bp-messages-wrap .bulk-message {
    .os-viewport{
        padding: 20px;
    }

    .reports{
        overflow: auto;
        font-size: 12px;
        margin-bottom: 20px;

        .reports-list{

            td, th{
                padding: 5px;
            }
            .delete{
                color: darkred;
                cursor: pointer;
                font-size: 15px;
            }
        }
    }

    form > div {
        margin-bottom: 20px;
        position: relative;

        label {
            margin-bottom: 5px;
            font-size: 14px;
            vertical-align: middle;

            &.bm-bold{
                display: block;
                font-weight: bold;
                margin-bottom: 3px;
            }
        }

        input[type="text"]{
            display: block;
            width: 100%;
            font-size: 16px !important;
            border-radius: 0 !important;
            padding: 8px 10px;
            min-height: 0;
            margin-bottom: 0;
            height: auto;
            background: rgba(var(--bm-bg-color), 1) !important;
            border: 1px solid rgba(var(--bm-border-secondary-color), 1) !important;
            color: rgba(var(--bm-text-color), 1) !important;
        }

        .bm-editor{
            display: block;
            width: 100%;
            border: 1px solid rgba( var(--bm-border-color), 0.62 ) !important;
            font-size: 16px !important;
            border-radius: 0 !important;
            padding: 8px 10px;

            > .bm-editor-content{
                min-height: 80px !important;
                outline: 0;
                border: 0;
                margin: 0;
                padding: 0;
                white-space: normal;
            }
        }

        .bm-attachment{
            background: rgba(var(--bm-button-bg), 1) !important;
            color: rgba(var(--bm-button-color), 1) !important;
            font-size: 15px !important;
            line-height: 14px !important;
            padding: 7px 14px !important;
            border-radius: 2px !important;
            border: none !important;
            outline: none !important;
            cursor: pointer !important;
        }
    }


    .progress{
        height: 35px;
        line-height: 33px;
        width: 100%;
        background: #fcfcfc;
        border: 1px solid #f2f2f2;
        color: black;
        position: relative;
        margin-bottom: 20px;
    }

    .progress-value{
        background: #dddddd;
        height: 33px;
    }

    .progress-text{
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        top: 0;
        bottom: 0;
        text-align: center;
    }

    .roles{
        margin-top: 5px;
        margin-left: 10px;
    }

    .box {
        background: rgba( var(--bm-bg-secondary), 1 );
        padding: 10px;
        border: 1px solid rgba( var(--bm-border-color), 0.62 );
    }

    ul{
        padding: 0;
        margin: 0;
        list-style: none;

        > li{
            list-style: none;
            margin: 0 0 5px;
            font-size: 12px;

            input{
                margin: 0 5px 0 0;
                vertical-align: middle;
            }
        }
    }
}

body.bp-messages-mobile .bp-better-messages-list,
body.bp-messages-mobile .bp-better-messages-mini{
    display: none;
}

.bpbm-stickers-selector{
    margin: 0;
    border-top: 1px solid rgba( var(--bm-border-color), 0.62 );
    user-select: none;
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba( var(--bm-bg-secondary), 1 );
    z-index: 15;
}

.bpbm-stickers-selector .bpbm-stickers-head{
    display: flex;
    margin: 0;
    align-content: space-between;
    border-bottom: 1px solid rgba( var(--bm-border-color), 0.62 );
    padding: 0;
}

.bpbm-stickers-selector .bpbm-stickers-head .bpbm-stickers-tabs{
    width: 100%;
    display: block;
    //height: 45px;
    /* padding-bottom: 10px; */
    max-width: calc(100% - 40px);
    white-space: nowrap;
    //overflow-x: auto;
    position: relative;
    border-right: 1px solid rgba( var(--bm-border-color), 0.62 );
}


.bpbm-stickers-selector .bpbm-stickers-head .bpbm-stickers-tabs span{
    height: 40px;
    display: inline-block;
    width: 40px;
    padding: 0;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    line-height: 40px;
    font-size: 20px;
    position: relative;


    svg{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }

}

.bpbm-stickers-selector .bpbm-stickers-head .bpbm-stickers-close{
    display: block;
    width: 40px;
    font-size: 28px;
    padding: 0;
    cursor: pointer;
    text-align: center;
    line-height: 40px;
    position: relative;

    svg{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }

}

.bpbm-stickers-selector .bpbm-stickers-head .bpbm-stickers-tabs span:hover,
.bpbm-stickers-selector .bpbm-stickers-head .bpbm-stickers-tabs span.bpbm-stickers-tabs-active{
    background: var(--bm-button-active);
}

.bpbm-stickers-selector .bpbm-stickers-head .bpbm-stickers-tabs span img{
    display: block;
    cursor: pointer;
    padding: 5px;
    max-height: 100%;
    margin: 0;
    max-width: 100%;
}

.bpbm-stickers-selector .bpbm-stickers-head .bpbm-stickers-tabs span .fas{
    font-size: 18px;
    line-height: 30px;
    padding: 5px 10px;
}

.bpbm-stickers-selector .bpbm-stickers-selector-sticker-container{
    display: block;

    > .os-viewport{
        height: 160px;
    }
}
.bpbm-stickers-selector .bpbm-stickers-selector-sticker-list{
    //overflow: auto;
    padding: 0;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

.bpbm-stickers-selector .bpbm-stickers-selector-sticker-list:after{
    content: "";
    flex: auto;
}

.bpbm-stickers-selector .bpbm-stickers-selector-sticker-list .bpbm-stickers-selector-empty{
    width: 100%;text-align: center;line-height: 150px;font-size: 13px;
}

.bpbm-stickers-selector .bpbm-stickers-selector-sticker-list .bpbm-stickers-selector-sticker{margin: 5px;height: 70px;width: 70px;cursor: pointer;border-radius: 3px;}

.bpbm-stickers-selector .bpbm-stickers-selector-sticker-list .bpbm-stickers-selector-sticker:hover{
    background: var(--bm-button-hover);
}
.bpbm-stickers-selector .bpbm-stickers-selector-sticker-list .bpbm-stickers-selector-sticker img{
    max-width: 100%;
    height: auto;
}

.bpbm-stickers-selector .bpbm-stickers-selector-sticker-container .loading-messages{
    display: block;
    position: relative;
    height: 160px;
    top: 0;
    line-height: 160px;
    width: 100%;
}

.bpbm-stickers-selector .bpbm-stickers-search{
    //padding: 5px 10px;
    height: 40px;
    display: block;
    //overflow: hidden;
    border-bottom: 1px solid rgba( var(--bm-border-color), 0.62 );
}


.bpbm-stickers-selector .bpbm-stickers-selector-sticker-list{
    //height: 160px;
}
.bpbm-stickers-selector .bpbm-stickers-search+.bpbm-stickers-selector-sticker-list{
    height: 120px;
}


.bpbm-stickers-selector .bpbm-stickers-search+.bpbm-stickers-selector-sticker-list .bpbm-stickers-selector-empty{
    line-height: 120px;
}

.bpbm-stickers-selector .bpbm-stickers-search input{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 5px 8px;
    height: 39px;
    min-height: 39px;
    max-height: 39px;
    width: 100%;
    outline: 0 !important;
    border-radius: 0 !important;
    //border: 1px solid rgba( var(--bm-border-color), 0.62 ) !important;
    color: rgba(var(--bm-text-color), 1) !important;
    background: rgba(var(--bm-bg-color), 1) !important;
    //border: 1px solid rgba( var(--bm-border-color), 0.62 ) !important;

    &::placeholder {
        color: rgba( var(--bm-placeholder ), 0.33 );
    }
}


.bpbm-gifs-selector{
    margin: 0;
    border-top: 1px solid rgba( var(--bm-border-color), 0.62 );
    user-select: none;
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba( var(--bm-bg-secondary), 1 );
    z-index: 15;
}

.bpbm-gifs-selector .bpbm-gifs-head{
    display: flex;
    margin: 0;
    align-content: space-between;
    border-bottom: 1px solid rgba( var(--bm-border-color), 0.62 );
    padding: 0;
}

.bpbm-gifs-selector .bpbm-gifs-head .bpbm-gifs-tabs{
    width: 100%;
    display: block;
    height: 40px;
    /* padding-bottom: 10px; */
    max-width: calc(100% - 40px);
    white-space: nowrap;
    /* overflow-x: auto; */
    position: relative;
    border-right: 1px solid rgba( var(--bm-border-color), 0.62 );
}

.bpbm-gifs-selector .bpbm-gifs-head .bpbm-gifs-tabs{
    height: 40px;
}

.bpbm-gifs-selector .bpbm-gifs-head .bpbm-gifs-tabs span{
    height: 40px;
    display: inline-block;
    width: 40px;
    padding: 0;
    font-size: 20px;
    line-height: 20px;
    position: relative;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
}

.bpbm-gifs-selector .bpbm-gifs-head .bpbm-gifs-tabs span[data-package-id="search"]{
    float: right;
    width: 100%;
    max-width: calc(100% - 50px);
    background: none !important;
    margin: 2.5px 5px 2.5px 0px;
}
.bpbm-gifs-selector .bpbm-gifs-head .bpbm-gifs-tabs span[data-package-id="search"] input{
    outline: none;
    padding: 0 0 0 10px;
    margin: 0;
    box-sizing: border-box;
    border-radius: 1px !important;
    line-height: 35px;
    font-size: 13px;
    height: 35px;
    min-height: 35px;
    width: 100%;
    text-align: left;
    border: 1px solid rgba( var(--bm-border-color), 0.62 ) !important;
    color: rgba(var(--bm-text-color), 1) !important;
    background: rgba(var(--bm-bg-color), 1) !important;

    &::placeholder {
        color: rgba( var(--bm-placeholder ), 0.33 );
    }
}

.bpbm-gifs-selector .bpbm-gifs-head .bpbm-gifs-close{
    height: 40px;
    display: block;
    position: relative;
    font-size: 20px;
    width: 40px;
    padding: 0;
    cursor: pointer;
    text-align: center;
}

.bpbm-gifs-selector .bpbm-gifs-head .bpbm-gifs-close > i{
    font-size: 18px;
    line-height: 30px;
    padding: 5px 10px;
}
.bpbm-gifs-selector .bpbm-gifs-head .bpbm-gifs-tabs span:hover,
.bpbm-gifs-selector .bpbm-gifs-head .bpbm-gifs-tabs span.bpbm-gifs-tabs-active{
    background: #0000000a;
}

.bpbm-gifs-selector .bpbm-gifs-head .bpbm-gifs-tabs span img{
    display: block;
    cursor: pointer;
    padding: 5px;
    max-height: 100%;
    margin: 0;
    max-width: 100%;
}

.bpbm-gifs-selector .bpbm-gifs-head .bpbm-gifs-tabs span .fas{
    font-size: 18px;
    line-height: 30px;
    padding: 5px 10px;
}

.bpbm-gifs-selector .bpbm-gifs-selector-gif-container{
    display: block;

    > .os-viewport{
        height: 200px;
    }
}
.bpbm-gifs-selector .bpbm-gifs-selector-gif-list{
    padding: 0 10px;
    min-height: 160px;
    margin: 0;
}


.bpbm-gifs-selector .bpbm-gifs-selector-gif-list:after{
    content: "";
    flex: auto;
}

.bpbm-gifs-selector .bpbm-gifs-selector-gif-list .bpbm-gifs-selector-empty{
    width: 100%;
    text-align: center;
    line-height: 160px;
    font-size: 13px;
}

.bpbm-gifs-selector .bpbm-gifs-selector-gif-list .bpbm-gifs-selector-gif{
    margin: 0 1.5px 3px;
    cursor: pointer;
    border-radius: 3px;
    display: block;
}

.bpbm-gifs-selector .bpbm-gifs-selector-gif-list .bpbm-gifs-selector-gif:hover{
    background: #0000000a;
}
.bpbm-gifs-selector .bpbm-gifs-selector-gif-list .bpbm-gifs-selector-gif img{
    max-width: 100%;
    height: auto;
    display: block;
}

.bpbm-gifs-selector .bpbm-gifs-selector-gif-container .loading-messages{
    display: block;
    position: relative;
    height: 160px;
    top: 0;
    line-height: 160px;
    width: 100%;
}

.bpbm-gifs-selector .bpbm-gifs-search{
    padding: 5px 10px;
    height: 40px;
    display: block;
    border-bottom: 1px solid rgba( var(--bm-border-color), 0.62 );
}


.bpbm-gifs-selector .bpbm-gifs-selector-gif-list:not(.empty){
    /* height: 160px; */
    /* overflow: auto; */
    display: block;
    padding: 0;
    column-width: 150px;
    column-count: auto;
    column-gap: 0;
    margin-top: 5px;
}


.bpbm-gifs-selector .bpbm-gifs-selector-gif-list.empty{
    display: block;
}

.bp-better-messages-mini .chats .chat .bpbm-gifs-selector .bpbm-gifs-selector-gif-list:not(.empty){
    column-width: 130px;
}

.bpbm-gifs-selector .bpbm-gifs-search+.bpbm-gifs-selector-gif-list{
    height: 120px;
}


.bpbm-gifs-selector .bpbm-gifs-search+.bpbm-gifs-selector-gif-list .bpbm-gifs-selector-empty{
    line-height: 120px;
}

.bpbm-gifs-selector .bpbm-gifs-search input{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 5px 8px;
    height: 30px;
    min-height: 30px;
    max-height: 30px;
    width: 100%;
    outline: 0 !important;
    border: 1px solid #e9eaec;
    background: #ffffff;
}


.bp-messages-wrap .message .bpbm-stickers-btn{
    z-index: 5;
    display: block;
    position: absolute;
    right: 5px;
    top: 30px;
    padding-right: 4px;
    height: 24px;
    text-align: center;
    font-size: 16px;
    line-height: 24px;
    cursor: pointer;
    color: #cbcbcb;
}

.bp-messages-wrap .message .bpbm-stickers-btn i{
    font-weight: 400;
}

.bp-messages-wrap .message .bpbm-stickers-btn+.bpbm-gifs-btn{
    right: 25px;
}

.bp-messages-wrap .message .bpbm-gifs-btn{
    z-index: 5;
    display: block;
    position: absolute;
    right: 5px;
    top: 30px;
    padding-right: 4px;
    height: 24px;
    text-align: center;
    line-height: 24px;
    cursor: pointer;
    color: #cbcbcb;
    width: 24px;
    font-size: initial;
}

.bp-messages-wrap .threads-list .thread .time .bpbm-counter-row{
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    margin-top: 5px;
}

.bp-messages-wrap .threads-list .thread .time .bpbm-counter-row .bm-thread-icon{
    display: block;
    font-size: 13px;
}

.bpbm-video-popup{
    position: fixed;
    background: #00000057;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
}

.bpbm-video-popup .bpbm-popup-content{
    height: 80%;
    width: 80%;
    max-height: 80%;
    max-width: 80%;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    border: 1px solid #eaeaea91;
    box-shadow: 0 0 3px 1px #eaeaea91;
    border-radius: 1%;
    overflow: hidden;
}

.bpbm-video-popup .bpbm-popup-content .bp-messages-video-container{
    height: 100% !important;
}

.bpbm-video-popup .bpbm-popup-content .bp-messages-video-container .bp-messages-main-placeholder{
    height: 100% !important;
}

.bpbm-video-popup .bpbm-popup-content .bp-messages-video-container .bp-messages-main-placeholder .bp-messages-placeholder-video {
    width: auto;
}

.bpbm-video-popup .bpbm-popup-content .bp-messages-video-container .bp-messages-main-placeholder .bp-messages-placeholder-video video{
    object-fit: contain;
    width: auto;
}


.bp-messages-wrap video{
    visibility: visible;
}

.bpbmuc{
    background: rgba( var(--main-bm-color), 1 );
    border-radius: 100%;
    color: white;
    font-size: 10px;
    display: inline-block;
    width: 15px;
    height: 15px;
    line-height: 15px;
    vertical-align: middle;
    text-align: center;
    margin-right: 6px;
}

.bpbmuc.bpbmuc-hide-when-null.bpbmuc-preserve-space[data-count="0"]{
    visibility: hidden;
}
.bpbmuc.bpbmuc-hide-when-null:not(.bpbmuc-preserve-space)[data-count="0"]{
    display: none;
}

.bpbm-notice{
    position: relative;
    padding: .75rem 1.25rem !important;
    margin-bottom: 1rem;
    border: 1px solid #ffeeba;
    border-radius: .25rem;
    color: #856404;
    background-color: #fff3cd;
}

.bpbm-gif{
    position: relative;
    display: inline-block;
}

body.bp-messages-mobile .message-content > .bpbm-gif {
    max-width: 90%;
}
.bpbm-gif video{
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 300px;
    margin: 0;
    padding: 0;
}

.bpbm-gif .bpbm-gif-play{
    position: absolute;
    width: 100%;
    height: 100%;
    background: #00000085;
    cursor: pointer;
    z-index: 2;
}

.bpbm-gif .bpbm-gif-play svg{
    display: inline-block;
    position: absolute;
    font-style: normal !important;
    width: 45px;
    height: 45px;
    font-size: 45px;
    color: white;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    cursor: pointer;
}

.bm-style-btn,
a.bm-style-btn:hover,
a.bm-style-btn:focus{
    display: inline-block;
    color: white;
    cursor: pointer;
    background: rgba(var(--main-bm-color), 1);
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
    font-size: 12px;
    border-radius: 3px;
}


a.bpbm-pm-button,
a.bpbm-pm-button:hover,
a.bpbm-pm-button:focus{
    &:not(.bm-no-style){
        display: inline-block;
        color: white;
        background: rgba( var(--main-bm-color), 1 );
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

.bpbm-join-to-chat-button,
.bpbm-join-to-chat-button:hover,
a.bpbm-join-to-chat-button,
a.bpbm-join-to-chat-button:hover{
    cursor: pointer;
    display: inline-block;
    color: white !important;
    background: rgba( var(--main-bm-color), 1 );
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 14px;
    margin-top: 8px;
    user-select: none;
}

.bpbm-preview-message{
    border-top: 1px solid rgba( var(--bm-border-color), 0.62 );
    display: flex;
    align-items: center;
    padding: 0 10px;
    width: 100%;
    background: rgba( var(--bm-bg-color), 1 );
    position: relative;
    z-index: 5;
}

.bpbm-preview-message .bpbm-preview-message-cancel{
    position: relative;
    cursor: pointer;
    display: block;
    color: rgba(var(--main-bm-color), 1);
    font-size: 24px;
    text-align: center;
    width: 30px;
    min-width: 30px;
    height: 30px;
}
.bpbm-preview-message .bpbm-preview-message-content{
    overflow: hidden;
    padding: 10px 10px;
    user-select: none;
}

.bpbm-preview-message .bpbm-preview-message-content .bpbm-preview-message-text{
    font-size: 12px;
    line-height: 13px;
    overflow: hidden;
    /* height: 35px; */
    padding: 0;
    margin: 0;
    width: 100%;
    /* padding: 10px 10px; */
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bpbm-preview-message .bpbm-preview-message-content .bpbm-preview-message-text .bpbm-preview-desc{
    display: block;
    margin-top: 2px;
}

.bpbm-preview-message .bpbm-preview-message-content .bpbm-preview-message-name{
    display: block;
    font-size: 12px;
    font-weight: bold;
    color: rgba( var(--main-bm-color), 1 );
    padding: 0;
    margin: 0;
}

.message-content.reply-enabled >.bpbm-gif,
.message-content.reply-enabled > .images,
.message-content.reply-enabled > .videos video{
    max-width: calc(100% - 30px);
}

.bp-messages-wrap .bpbm-search-in-list{
    width: 100%;
    padding: 0;
    margin: 0;
}
.bp-messages-wrap .bpbm-search-in-list > input{
    width: 100%;
    margin: 0;
    line-height: initial;
    color: rgba(var(--bm-text-color), 1) !important;
    min-height: 10px;
    display: block;
    outline: none !important;
    background: rgba(var(--bm-bg-color), 1);
    border-radius: 0;
    border-bottom: 1px solid rgba(var(--bm-border-secondary-color), 1) !important;
    box-sizing: border-box;
    padding: 5px 10px 5px 10px;
    height: 45px;
    font-size: 13px;
    transition: border-color 0.2s;

    &::placeholder{
        color: rgba( var(--bm-placeholder ), 0.33 );
    }

    &:focus{
        //border-color: rgba(var(--bm-border-active), 1) !important;
    }
}

/** **/

.bp-messages-wrap.bpbm-template-modern .list{
    display: block;
}

/**
  * Call Wrap
 */

.bp-messages-call-wrap{
    position: relative;
    width: 0;
    height: 100%;
    overflow: hidden;

    .bp-messages-call-container{
        border-left: 1px solid rgba(var(--bm-border-color), 0.62);
    }

    &:hover > .bpbm-switch-chat{
        opacity: 0.5;
    }

    > .bpbm-switch-chat{
        font-size: 12px;
        opacity: 0;
        position: absolute;
        z-index: 10;
        background: black;
        color: white;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 18px;
        text-align: center;
        height: 40px;
        line-height: 40px;
        border-radius: 0 4px 4px 0;
        cursor: pointer;
        transition: opacity 0.2s ease-in-out;

        &:hover{
            opacity: 1;
        }
    }



    .bp-messages-video-container{
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
        min-height: 200px;
        z-index: 5;

        .bm-video-contain{
            &video, video {
                object-fit: contain !important;
            }
        }
    }

    .bp-messages-video-container .bp-messages-main-video{
        background: #d4d4d4;
        width: 100%;
        display: block;
        padding: 0;
        overflow: hidden;
        margin: 0;
        position: relative;
        height: 100%;
    }

    .bp-messages-video-container .bp-messages-main-video > video{
        width: 100%;
        height: 100%;
        /* max-height: 550px; */
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: 0;
        padding: 0;
        display: block;
        object-fit: contain;
    }


    .bp-messages-video-container .bp-messages-small-video{
        height: auto;
        position: absolute;
        //width: 100px;
        max-width: 50%;
        max-height: 50%;
        bottom: 10px;
        right: 10px;
        overflow: hidden;
        z-index: 9;
        min-width: 50px;
        min-height: 50px;

        > video{
            margin: 0;
            padding: 0;
            max-width: 100%;
            vertical-align: middle;
            height: 100%;
            width: 100%;
            object-fit: cover;
            object-position: center;
        }
    }

    .bp-messages-video-container .bp-messages-small-video-2{
        height: auto;
        position: absolute;
        //width: 100%;
        max-width: 50%;
        max-height: 50%;
        bottom: 10px;
        left: 10px;
        overflow: hidden;
        z-index: 9;
        min-width: 50px;
        min-height: 50px;


        .bm-switch-videos{
            color: white;
            position: absolute;
            bottom: 2px;
            font-size: 10px;
            left: 2px;
            padding: 0;
            display: block;
            z-index: 3;
            cursor: pointer;

            > i{
                background: #0000006b;
                display: inline-block;
                padding: 4px;
                border-radius: 100%;
                cursor: pointer;
            }
        }

        > video{
            margin: 0;
            padding: 0;
            max-width: 100%;
            vertical-align: middle;
            height: 100%;
            width: 100%;
            object-fit: cover;
            object-position: center;
        }
    }

    .bp-messages-video-container .bp-messages-small-video-3{
        position: absolute;
        //width: 100%;
        height: auto;
        max-width: 50%;
        max-height: 50%;
        top: 10px;
        right: 10px;
        overflow: hidden;
        z-index: 9;
        min-width: 50px;
        min-height: 50px;

        > video{
            margin: 0;
            padding: 0;
            max-width: 100%;
            vertical-align: middle;
            height: 100%;
            width: 100%;
            object-fit: cover;
            object-position: center;
        }
    }
}

.bp-messages-wrap {

    a, a:active, a:hover, a:focus{
        text-decoration: none !important;
    }

    &.bpbm-call-view{
        .bp-messages-side-threads{
            width: 0;
            overflow: hidden;
        }

        .bp-messages-column{
            width: 100%;
        }

        .bpbm-chat-main .bm-before-message-list .bpbm-group-call-in-progress{
            display: none !important;
        }
    }

    &.bp-messages-full-screen{
        position: fixed !important;
        width: 100%;
        height: 100%;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 10000000;
        border-radius: 0 !important;
        border: 0 !important;
    }

    .bm-search-results{
        //width: calc(100% - 1px);
        height: 100%;

        .loading-messages{
            display: block;
            top: 50px
        }

        .threads-list{
            padding-bottom: 0;
        }

        .bm-search-results-section{

            &+.bm-search-results-section{
                .bm-search-results-header {
                    border-top: 1px solid rgba(var(--bm-border-secondary-color), 1);
                }
            }

            .bm-search-results-header {
                margin: 0;
                padding: 6px 10px 6px;
                border-bottom: 1px solid rgba(var(--bm-border-secondary-color), 1);
                font-size: 14px;
                background: rgba( var(--bm-bg-secondary), 1 );
                line-height: initial;
            }

            .bp-messages-user-list{}
        }
    }

    &.bp-better-messages-list{
        .chat-footer .bpbm-user-me .bpbm-user-me-avatar{
            .avatar{
                width : 25px;
                height: 25px;
            }
        }
    }

    .threads-list-index + .thread-not-selected{
        display: none;
    }

    .bp-messages-threads-wrapper.no-threads{
        .bp-messages-side-threads{
            display: none !important;

            &+.bp-messages-column{
                width: 100%;
            }
        }
    }

    &:not(.bp-messages-mobile,.mobile-ready) .bp-messages-threads-wrapper:not(.threads-hidden,.no-threads){
        .chat-header{
            &.bpbm-index{
                .new-message{
                    display: none;
                }

                .bpbm-search{
                    display: none;
                }

                .starred-messages{
                    float: right;
                }
            }
        }

        .threads-list-index{
            display: none;
        }

        .threads-list-index + .thread-not-selected{
            display: flex;
            height: auto;
            align-content: center;
            justify-content: center;
            align-items: center;
        }

        .threads-list-index + .thread-not-selected + .chat-footer{
            display: none;
        }
    }

    .chat-header{

        &.side-header {
            display: flex;
            justify-content: flex-start;
            border-right: 0;

            .new-message + .bpbm-search{
                padding-left: 0;
                width: calc(100% - 50px);
            }

            .bpbm-search {
                width: 100%;
                line-height: initial;
                padding-right: 10px;
                padding-left: 10px;

                form{
                    width: 100%;

                    .close{
                        display: none;
                    }

                    input{
                        width: 100%;
                        max-width: 100%;
                        border-width: 1px;
                        text-align: left;
                    }
                }
            }
        }

        .settings {
            position: relative;
            width: 50px;
            font-size: 16px;
            text-align: center;
            height: 42px;
            line-height: 42px;
            text-decoration:none;
            float: right;
        }
    }

    &.bp-messages-mobile{

        .chat-header{
            .settings{
                display: block;
            }
        }

        .threads-list .thread .actions .bm-more-actions{
            opacity: 1;
            *{
                opacity: 1;
            }
        }

        .bpbm-chat-content{
            flex-direction: column-reverse;

            &.bpbm-call-view, &.bpbm-call-audio-view{
                &.bpbm-hide-chat{
                    .bpbm-chat-main{
                        height: 0;
                    }

                    .bp-messages-call-wrap{
                        height: 100%;
                    }
                }

                .bpbm-chat-main{
                    height: 60%;
                    max-width: 100%;
                    //width: 0;
                    //overflow: hidden;
                }

                .bp-messages-call-wrap{
                    height: 40%;
                    //width: 100%;


                    .bpbm-switch-chat {
                        svg {
                            transform: rotate(-90deg);
                        }
                    }
                }
            }

            .bpbm-chat-main {
                width: 100% !important;
                max-width: 100%;
            }

            &.bpbm-hide-chat{
                .bp-messages-call-wrap {
                    .bpbm-switch-chat {
                        svg {
                            transform: rotate(90deg);
                        }
                    }
                }
            }

            .bp-messages-call-wrap{
                height: 0;
                width: 100%;


                .bpbm-switch-chat{
                    bottom: 0;
                    left: 0;
                    right: 0;
                    top: auto;
                    opacity: 0.5;
                    height: 18px;
                    width: 40px;
                    line-height: 18px;
                    border-radius: 4px 4px 0px 0;

                    i{
                        transform: rotate(270deg);
                    }
                }
            }
        }
    }

    .bpbm-chat-content{
        position: relative;
        display: flex;
        width: 100%;
        height: 100%;
        flex-direction: row;
        min-height: 0;

        > * {
            transition: width 0.3s ease-in-out, max-width 0.3s ease-in-out, height 0.3s ease-in-out, max-height 0.3s ease-in-out;
        }

        &.bpbm-call-view{
            .bpbm-chat-main {
                max-width: 350px;
            }

            .bp-messages-call-wrap{
                background: rgba(var(--bm-bg-color), 1);
                width: 100%;
            }

            &.bpbm-hide-chat{
                .bpbm-chat-main{
                    width: 0;
                    overflow: hidden;
                }

                .bpbm-switch-chat svg{
                    transform: rotate(180deg);
                }
            }
        }


        &.bpbm-call-audio-view{
            .bp-messages-call-wrap{
                width: 100%;
                max-width: 350px;
            }

            &.bpbm-hide-chat{
                .bpbm-chat-main{
                    width: 0;
                    overflow: hidden;
                }
                .bp-messages-call-wrap{
                    max-width: 100%;
                }
            }
        }

        .bpbm-chat-main{
            position: relative;
            max-width: 100%;
            display: flex;
            width: 100%;
            height: 100%;
            flex-direction: column;
            min-height: 0;

            .bm-before-message-list{
                position: relative;
                z-index: 1;

                .bpbm-group-call-in-progress{
                    padding: 0 20px;
                    background: rgba( var(--main-bm-color), 1 );
                    color: white;
                    font-size: 15px;
                    line-height: 40px;
                    overflow: hidden;
                    text-align: center;

                    .bpbm-group-call-in-progress-info{
                        svg{
                            vertical-align: middle;
                            margin-right: 5px;
                        }
                    }

                    .bpbm-group-call-in-progress-join{
                        margin-left: 5px;
                        button{
                            display: inline-block;
                            background: green !important;
                            border: 1px solid white !important;
                            font-size: 14px;
                            color: white;
                            margin: 0 0;
                            padding: 1px 21px !important;
                            outline: 0 !important;
                            box-shadow: none;
                            cursor: pointer;
                            text-align: center;
                            border-radius: 3px;
                            text-transform: uppercase;
                        }
                    }
                }

                .bpbm-top-pinned-message{
                    display: flex;
                    padding: 8px 10px 8px 20px;
                    background: rgba( var(--main-bm-color), 1 );
                    color: white;
                    text-align: center;
                    align-items: flex-start;
                    max-height: 48px;
                    overflow: hidden;
                    cursor: default;
                    border-radius: 0 !important;
                    position: absolute;
                    z-index: 2;
                    opacity: 0.4;
                    transition: opacity 0.3s ease-in-out;


                    &:hover{
                        max-height: none;
                        opacity: 1;
                    }

                    .bpbm-top-pinned-message-icon{
                        padding-right: 10px;
                        line-height: 24px;
                    }

                    .bpbm-top-pinned-message-content{
                        font-size: 12px;
                        line-height: 18px;

                        p{
                            margin: 0;
                        }
                    }
                }
            }
        }


        &.bpbm-hide-chat{
            .bpbm-switch-chat{
                i{
                    transform: rotate(180deg);
                }
            }
        }
    }

    .bbpm-avatar{
        img{
            display: block;
            transition: none;
        }
    }

    img.avatar{
        transition: none;
        max-width: 100%;
        max-height: 100%;
    }

    .chat-footer{
        display: flex;
        position: relative;
        height: 44px;
        line-height: 42px;
        box-sizing: border-box;
        border-bottom: none;
        border-top: 1px solid rgba(var(--bm-border-secondary-color), 1);
        background: rgba( var(--bm-bg-secondary), 1 );

        > a{
            position: relative;
            color: rgba(var(--main-bm-color), 1) !important;
            font-size: 18px;
            display: inline-block;
            vertical-align: top;
            line-height: inherit;
            text-decoration: none !important;
            border: none;

            > svg{
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                top: 0;
                margin: auto;
            }
        }

        .settings {
            width: 50px;
            text-align: center;
            height: 42px;
            line-height: 42px;
            text-decoration:none;
        }

        .new-message {
            display: block;
            width: 50px;
            height: 42px;
            text-align: center;
            position: relative;
            cursor: pointer;
        }

        .bpbm-user-me{
            position: relative;
            display: flex;
            line-height: initial;
            margin-left: auto;
            padding: 6px 8px;
            cursor: pointer;
            user-select: none;
            align-items: center;
            height: 100%;
            box-sizing: border-box;

            &.bpbm-open, &:hover{
                background: #0000000f;
            }

            .bpbm-user-me-avatar{
                margin-right: 10px;

                .avatar{
                    display: block;
                    width: 30px;
                    height: 30px;
                }
            }

            .bpbm-user-me-name{
                display: block;
                font-size: 14px;
                margin-bottom: 2px;
            }

            .bpbm-status{
                display: block;
                font-size: 12px;
                margin-top: 2px;

                .current-status{
                    display: flex;
                    align-items: center;

                    svg{
                        margin-right: 5px;
                    }
                }
            }

            .bpbm-user-me-popup{
                position: absolute;
                bottom: 50px;
                right: 0;
                min-width: 100%;
                z-index: 10;
                background: var();
                box-sizing: border-box;
                border: 1px solid rgba(var(--bm-border-color), 1);
                padding: 0;
                border-radius: 3px;
                box-shadow: 0 1px 1px 0 #d7d8db;
                cursor: default;
                white-space: nowrap;

                .bpbm-user-me-popup-list{
                    display: block;
                    background: rgba( var(--bm-bg-color), 1 );

                    .bpbm-user-me-popup-list-item{
                        display: block;
                        padding: 10px;
                        cursor: pointer;
                        font-size: 13px;

                        &:hover{
                            background: #0000000f;
                        }

                        .bpbm-user-me-popup-list-item-title{
                            display: flex;
                            align-content: center;
                            align-items: center;
                            flex-direction: row;

                            > svg{
                                margin-right: 5px;
                            }
                        }

                        .bpbm-user-me-popup-list-item-desc{
                            display: block;
                            font-size: 80%;
                            opacity: 0.8;
                            margin-top: 8px;
                        }


                        &+.bpbm-user-me-popup-list-hr{
                            display: block;
                            border-bottom: 1px solid rgba(var(--bm-border-color), 1);
                        }
                    }

                    .bpbm-user-me-popup-list-hr{
                        display: none;
                    }
                }
            }
        }

    }

    &.bpbm-not-logged-in{
    }


    .bm-connection-control{
        .bm-connection-quality {
            display: flex;
            padding: 3px 7px;
            border-radius: 3px;
            font-size: 9px;
            opacity: 0.4;
            color: white;
            background: #eda703;
            cursor: default;
            transition: opacity 0.2s ease-in-out;
            text-align: center;
            align-items: center;

            svg{
                font-size: 120%;
            }

            &:hover, &.bm-opacity{
                opacity: 1;
            }

            &.bm-state-connected{
                color: white;
                background: #007528;
            }

            &.bm-state-disconnected{
                color: white;
                background: darkred;
            }

            > span {
                text-transform: capitalize;
                margin-left: 4px;
            }
        }
    }

    .bp-messages-group-audio-call-container{
        height: 100%;
        max-height: calc(100% - 44px);
        overflow: auto;

        .bm-connection-control{
        }

        .bpbm-call-settings{
            position: absolute;
            bottom: 55px;
            z-index: 2;
            left: 0;
            right: 0;
            margin: auto;
        }

        .bp-messages-group-call-audios-grid{
            position: relative;
            box-sizing: border-box;
            padding: 5px;

            > .bp-messages-group-call-input-audio{
                position: absolute;
                display: block;
                z-index: 1;
                width: calc( 100% - 10px );
                margin: 5px;

                .bp-messages-group-call-input-audio-screen{
                    .bp-messages-group-call-input-audio-screen-wrapper{
                        position: relative;
                        width: 100%;
                        height: 0;
                        padding-bottom: 60%;
                        background: gray;

                        video{
                            position: absolute;
                            width: 100%;
                            height: 100%;
                        }
                    }
                }

                .bp-messages-group-call-input-audio-inner{
                    padding: 0;
                    box-shadow: 0 1px 5px 1px rgba( var(--bm-border-color), 1 );
                    display: block;
                    border: 1px solid rgba( var(--bm-border-color), 1 );
                    background: rgba(var(--bm-bg-secondary), 1);
                    color: rgba(var(--bm-text-color), 1);
                    border-radius: 3px;
                    overflow: hidden;

                    .bp-messages-group-call-input-audio-inner-info{
                        padding: 5px;
                        display: block;
                        .bpbm-caller-info{
                            display: flex;
                            align-content: center;
                            align-items: center;
                            flex-direction: row;
                            justify-content: flex-start;

                            .bpbm-info-avatar{
                                padding-right: 10px;
                                .avatar{
                                    display: block;
                                }

                                img{
                                    display: block;
                                    height: 45px;
                                    border-radius: 3px;
                                }
                            }

                            .bpbm-info-name{
                                font-size: 15px;
                            }

                            .bpbm-caller-actions{
                                display: flex;
                                align-items: center;
                                margin-left: auto;
                                padding-right: 10px;

                                > .bpbm-admin-controls{
                                    display: flex;

                                    .bpbm-unmute{
                                        display: none;
                                    }

                                    > span {
                                        position: relative;
                                        display: block;
                                        background: #e9e9e9;
                                        border-radius: 50px;
                                        width: 30px;
                                        height: 30px;
                                        text-align: center;
                                        line-height: 30px;
                                        font-size: 12px;
                                        cursor: pointer;
                                        margin-right: 10px;

                                        &.bpbm-kick{
                                            background: #d62020;
                                            color: white;
                                            font-size: 11px;
                                        }
                                    }
                                }

                                .bpbm-mic-status{
                                    > i {

                                        display: block;
                                        background: #e9e9e9;
                                        border-radius: 50px;
                                        width: 30px;
                                        height: 30px;
                                        text-align: center;
                                        line-height: 30px;
                                        font-size: 12px;
                                    }
                                }
                            }
                        }
                    }


                }
            }
        }

        .bp-messages-group-call-audios-control{
            position: absolute;
            bottom: 0;
            background: #fafbfc;
            width: 100%;
            //height: 95px;
            padding: 10px;
            border-top: 1px solid rgba( var(--bm-border-color), 0.62 );
            border-left: 1px solid rgba( var(--bm-border-color), 0.62 );

            .bm-audio-chat-control{
                display: flex;
                align-items: center;

                .microphone-control-selector{
                    width: 100%;
                    max-width: 200px;
                    margin-right: 10px;
                    label{
                        display: block;
                        font-size: 12px;
                        margin-bottom: 5px;
                    }

                    .bpbm-switch-mic-select{
                        max-width: 100%;
                    }
                }

                .speaker-control-selector{
                    width: 100%;
                    max-width: 200px;
                    margin-right: 10px;
                    label{
                        display: block;
                        font-size: 12px;
                        margin-bottom: 5px;
                    }

                    .bpbm-switch-audio-select{
                        max-width: 100%;
                    }
                }

                .bm-audio-chat-additional-controls{
                    margin-left: auto;
                }

                .bm-audio-chat-control-group{
                    text-align: right;
                }

                .bpbm-switch-mic-switcher{
                    display: flex;
                    align-items: center;
                    margin-left: 10px;

                    > span{
                        cursor: pointer;
                        display: inline-block;
                        background: rgba( var(--main-bm-color), 1 );
                        color: rgba( var(--bm-bg-color), 1 );
                        height: 39px;
                        width: 100px;
                        font-size: 13px;
                        text-align: center;
                        line-height: 39px;
                        border-radius: 3px 0 0 3px;

                        &:hover{
                            //background: black;
                        }

                        &[aria-disabled="true"]{
                            background: gray;
                            cursor: not-allowed;
                        }
                    }

                    .bm-end-call{
                        display: inline-block;
                        border-radius: 0px 3px 3px 0px;
                        font-size: 13px;
                        //opacity: 0.7;
                        color: white;
                        background: #c92e2e;
                        cursor: pointer;
                        transition: opacity 0.2s ease-in-out;
                        width: 45px;
                        text-align: center;

                        &:hover, &.bm-opacity{
                            //opacity: 1;
                        }
                    }
                }
            }
        }
    }

    .bp-messages-call-wrap-group{
        .bp-messages-group-call-videos-grid{
            position: relative;
            box-sizing: border-box;
            padding: 5px;
            //display: flex;
            //flex-wrap: wrap;
            //padding-left: 0;

            > .bp-messages-group-call-input-video{
                display: block;
                position: absolute;
                z-index: 1;
                color: #fff;
                width: 300px;
                height: 300px;
                overflow: hidden;
                padding: 2.5px;

                &.bpbm-active-speaker{
                }

                &.bpbm-cover-video{
                    > .bp-messages-group-call-input-video-inner {
                        video {
                            object-fit: cover;
                        }
                    }
                }

                > .bp-messages-group-call-input-video-inner{
                    position: relative;
                    width: 100%;
                    height: 100%;
                    background: gray;
                    border-radius: 5px;
                    background-repeat: no-repeat;
                    background-position: center;
                    transition: box-shadow 0.15s ease-in-out;

                    .bpbm-media-container{
                        transform: translate3d(0, 0, 0);
                        position: absolute;
                        z-index: 1;
                        width: 100%;
                        height: 100%;
                        display: flex;
                        align-content: center;
                        justify-content: center;
                        align-items: center;
                        overflow: hidden;

                        &.bpbm-screen-shared{
                            video[datatype="camera"]{
                                position: absolute;
                                bottom: 5px;
                                right: 5px;
                                max-height: 60px;
                                opacity: 0.7;
                                transition: opacity 0.15s ease-in-out;
                                cursor: grab;

                                &:hover{
                                    opacity: 1;
                                }
                            }
                        }
                    }

                    video{
                        position: relative;
                        display: block;
                        max-width: 100%;
                        margin: 0 auto;
                        height: 100%;
                        object-fit: contain;
                    }

                    audio{
                        display: none !important;
                    }

                    &:hover .bpbm-admin-controls{
                        display: flex !important;
                    }

                    &.bp-messages-group-call-video-secondary{
                        &:hover{
                            .bpbm-caller-status{
                                display: none !important;
                            }
                        }
                        .bpbm-info-name{
                            .bpbm-name {
                                display: none !important;
                            }
                            .bpbm-admin-controls {
                                margin-left: 0 !important;
                            }
                        }
                    }

                    .bpbm-group-call-input-video-inner-info{
                        transform: translate3d(0, 0, 0);
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        right: 0;
                        width: 100%;
                        padding: 0;
                        background: #0000001c;
                        z-index: 2;
                        display: flex;
                        flex-direction: column;
                        align-content: center;
                        justify-content: space-between;

                        .bpbm-info-avatar{
                            display: none;
                        }

                        .bpbm-caller-info{
                            display: flex;
                            align-content: center;
                            justify-content: space-between;
                            align-items: center;
                            padding: 0 10px;

                            > * {
                                padding: 5px 0;
                            }

                            .bpbm-info-name{
                                display: flex;
                                flex-direction: row;
                                align-content: center;
                                justify-content: flex-start;
                                align-items: center;

                                color: white;

                                a{
                                    color: white !important;
                                }
                            }

                            .bpbm-admin-controls{
                                display: none;
                                margin-left: 5px;

                                > span {
                                    text-align: center;
                                    position: relative;
                                    display: block;
                                    cursor: pointer;
                                    margin-right: 5px;
                                    width: 15px;
                                    height: 15px;
                                }
                            }

                            .bpbm-caller-status{
                                text-align: right;
                                > span {
                                    margin-left: 5px;
                                    //display: none;
                                }
                            }
                        }
                    }
                }
            }
        }

        .bpbm-call-settings{
            position: absolute;
            bottom: 55px;
            z-index: 2;
            left: 0;
            right: 0;
            margin: auto;
        }

        .bp-messages-group-call-input-video{
            video{
                //display: block;
                //max-width: 100%;
                //height: 200px;
                //width: 100%;
                //object-fit: contain;
            }
        }
    }
}

.tippy-box[data-theme="bpbmtheme"][data-animation=fade][data-state=hidden] {
    opacity: 0
}

.bm-tooltip {
    position: relative;
    background-color: rgba( var(--bm-tooltip-bg), 1 );
    opacity: 0.85;
    color: rgba( var(--bm-tooltip-color), 1 );
    border-radius: 4px;
    font-size: 13px;
    padding: 4px 8px;
    line-height: 1.4;
    outline: 0;
    z-index: 100001;
    transition-property: transform, visibility, opacity;
}

.bpbm-send-files{
    display: none !important;
    position: relative;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    background-color: rgba( var(--main-bm-color), 1 );
    text-align: center;
    cursor: pointer;
    &.bpbm-has-files{
        display: block !important;
    }
}

.new-message button[type="submit"]{
    cursor: pointer;
    display: inline-block;
    color: white;
    background: rgba( var(--main-bm-color), 1 );
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 8px;
    padding-bottom: 8px;
    user-select: none;
    border: 0;
    border-radius: 2px;
    box-shadow: 0 1px 3px 0 #cccccc;
    margin-bottom: 20px;
}

.woocommerce-MyAccount-navigation-link--bp-messages .bp-better-messages-unread{
    margin-left: 5px;
}

#buddypress #profile-header #item-buttons {
    > #bpbm-audio-call.generic-button > .grimlock-btn.bpbm-audio-call:before{
        font-family: var(--grimlock-icon-phone-font-family) !important;
        content: var(--grimlock-icon-phone) !important;
        font-weight: 100;
        font-style: normal;
    }

    > #bpbm-video-call.generic-button > .grimlock-btn.bpbm-video-call:before{
        font-family: var(--grimlock-icon-video-font-family) !important;
        content: var(--grimlock-icon-video) !important;
        font-weight: 100;
        font-style: normal;
    }

    .dropdown-menu{
        > #bpbm-audio-call.generic-button > .grimlock-btn.bpbm-audio-call:before{
            min-width: 22px;
            margin-right: 0.5rem;
            color: inherit !important;
            opacity: .7;
            font-size: 1rem !important;
            display: inline-flex;
            min-height: 22px;
            line-height: 0;
            justify-content: center;
            align-items: center;
            top: -0.1em;
            position: relative;
            font-family: var(--grimlock-icon-phone-font-family) !important;
            content: var(--grimlock-icon-phone) !important;
            font-weight: 100;
            font-style: normal;
        }

        > #bpbm-video-call.generic-button > .grimlock-btn.bpbm-video-call:before{    min-width: 22px;
            margin-right: 0.5rem;
            color: inherit !important;
            opacity: .7;
            font-size: 1rem !important;
            display: inline-flex;
            min-height: 22px;
            line-height: 0;
            justify-content: center;
            align-items: center;
            top: -0.1em;
            position: relative;
            font-family: var(--grimlock-icon-video-font-family) !important;
            content: var(--grimlock-icon-video) !important;
            font-weight: 100;
            font-style: normal;
        }
    }
}

/**
    Ultimate Member
 */
.um-profile-body.messages.messages-default{
    max-width: 100% !important;
}

.um-profile {
    .um-messaging-btn {
        float: right;
        margin: 0;
    }
}

@media screen and (max-width: 500px) {
    .um-profile {
        .um-messaging-btn {
            float: none;
            margin-top: 10px;
        }
    }
}


.um-members-grid{
    .um-member-card {
        .um-members-bpbm-btn {
            margin: 2px 0;

            .um-button{
                padding: 10px 15px !important;
                transition: none !important;
                display: inline-block !important;
                margin: 0 auto !important;
                min-width: 110px;
                width: auto;
                text-align: center;
                font-size: 13px;
            }
        }
    }
}

.um-members-list{
    .um-member-card-footer {
        .um-members-bpbm-btn {
            margin: 2px 0;

            .um-button{
                padding: 10.4px 15px !important;
                transition: none !important;
                display: inline-block !important;
                margin: 0 auto !important;
                min-width: 110px;
                width: auto;
                text-align: center;
                font-size: 13px;
            }
        }
    }
}

.bpbm-users-avatars-list{
    display : block;
    width: 100%;
    max-width: 100%;
    padding-bottom: 10px;
    position: relative;
    margin: 0 0;
    white-space: nowrap;
    overflow-y: hidden;
    overflow-x: hidden;
    user-select: none;

    .bpbm-users-avatars-list-item{
        display: inline-block;
        text-align: center;
        margin: 0 10px 0 0;
        width: 70px;
        overflow: hidden;
        vertical-align: top;
        cursor: pointer;

        .bpbm-users-avatars-list-item-avatar{
            display: block;
            padding: 0 5px;
            text-align: center;

            img{
                margin: 0 auto !important;
                border-radius: 100%;
            }
        }
        .bpbm-users-avatars-list-item-name{
            display: block;
            white-space: normal;
            text-align: center;
            text-overflow: ellipsis;
            overflow: hidden;
            margin-top: 5px;
            max-height: 30px;
            font-size: 11px;
            line-height: 15px;
        }
    }
}

.bp-messages-wrap .bm-side-tabs{
    padding: 0;
    margin: 0 !important;
    line-height: 35px;
    height: 35px;
    border-radius: 0;
    background: rgba( var(--bm-bg-color), 1 );
    font-size: 13px;
    box-sizing: content-box !important;
    display: flex;
    width: 100%;
    user-select: none;

    &.bpbm-mobile-only{
        height: auto;
        line-height: 37px;
        font-size: 14px;

        &.bm-side-tabs-border-top{
            > div {
                border-top: 3px solid #f5f5f5;
                padding-bottom: 3px;
                padding-bottom: env(safe-area-inset-bottom);

                &.active{
                    border-top: 3px solid #dadada;
                }
            }
        }
    }

    > div{
        display: inline-block;
        width: 100%;
        text-align: center;
        padding: 0;
        box-sizing: border-box;
        cursor: pointer;
        transition: background-color, border-color 0.2s;

        &.active{
            background: rgba( var(--bm-bg-secondary), 1 );
        }

        > svg{
            vertical-align: middle;
        }
    }

    &.bm-side-tabs-border-top{
        > div {
            border-top: 1px solid #f5f5f5;

            &.active{
                border-top: 1px solid #dadada;
            }
        }
    }

    &.bm-side-tabs-border-bottom{
        > div {
            border-bottom: 1px solid rgba(var(--bm-border-secondary-color), 0.5);

            &.active{
                border-bottom: 1px solid rgba(var(--bm-border-secondary-color), 1);
            }
        }
    }
}

.bp-messages-wrap{

    .bpbm-mobile-only{
        //display: none;

        &.chat-footer{
            .settings{
                //display: none;
            }
        }
    }

    &.bp-messages-mobile{
        .bpbm-mobile-only{
            //display: block;

            &.bm-side-tabs{
                display: flex;
            }
        }
    }

    .bpbm-desktop-only{
        display: block;
    }

    &.bp-messages-mobile{
        .bpbm-desktop-only{
            display: none;
        }
    }


    .bp-messages-side-threads,
    .bp-messages-column {
        .bpbm-friends-list, .bpbm-um-friends-list, .bpbm-ps-friends-list, .bpbm-groups-list, .bpbm-ps-groups-list, .bpbm-bmum-groups-list {
            width: calc(100% - 1px);

            .bpbm-loader-icon {
                text-align: center;
                font-size: 24px;
                margin-top: 40px;
            }
        }
    }

    .bpbm-empty-icon{
        font-size: 24px;

    }

    .bpbm-empty-text{
        font-size: 16px;
        margin: 10px 0;
    }
}

.bp-messages-wrap .bpbm-user-options .bpbm-user-mobile-devices{
    margin: 10px 0;

    table{
        border: none;

        td{
            border: 1px solid #e4e4e4;
            padding: 5px 10px;
        }
    }

    table+.bpbm-user-mobile-devices-empty{
        display: none;
    }

    .bpbm-user-mobile-devices-empty{
        text-align: center;
        padding: 30px 0;
        border: 1px solid #e4e4e4;

        i{
            display: block;
            font-size: 36px;
            margin: 10px 0;
        }
    }
}

body.beehive{
    #bpbm-video-call.generic-button a:before{
        content: "\ec27" !important;
    }

    #bpbm-audio-call.generic-button a:before{
        content: "\eb15" !important;
    }
}

body.buddyboss-theme {
    #header-messages-dropdown-elem:not(.selected) {
        .bm-notification-list{
            display: none;
        }
    }
}

span.bm-user, a.bm-user{
    .avatar{
        margin-right: 5px;
    }
    > *{
        vertical-align: middle;
    }
}

.bpbm-checkbox{
    display: none !important;
    position: absolute !important;
    z-index: -1 !important;
    opacity: 0 !important;

    &+label {
        display: inline-flex !important;
        align-items: center;
        user-select: none;
        padding: 0 !important;
        margin: 0;
        font-size: 16px !important;

    }

    &+label::before {
        position: relative !important;
        content: '';
        display: inline-block;
        width: 1em;
        top: 0 !important;
        height: 1em;
        flex-shrink: 0;
        flex-grow: 0;
        border: 1px solid #adb5bd;
        border-radius: 0.25em;
        margin-right: 0.5em;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 50% 50%;
    }


    &+label::after {
        content: none !important;
    }

    &+label::before {
        content: '';
        display: inline-block;
        width: 1em;
        height: 1em;
        flex-shrink: 0;
        flex-grow: 0;
        border: 1px solid #adb5bd;
        border-radius: 0.25em;
        margin-right: 0.5em;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 50% 50%;
    }

    &:checked+label::before {
        border-color: rgba( var(--main-bm-color), 1 );
        background-color: rgba( var(--main-bm-color), 1 );
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
    }

    &:not(:disabled):not(:checked)+label:hover::before {
        border-color: rgba( var(--main-bm-color), 1 );
    }

    &:not(:disabled):active+label::before {
        background-color: rgba( var(--main-bm-color), 1 );
        border-color: rgba( var(--main-bm-color), 1 );
    }

    &:focus+label::before {
        box-shadow: 0 0 0 0.2rem rgba( var(--main-bm-color), 0.25 );
    }

    &:focus:not(:checked)+label::before {
        border-color: rgba( var(--main-bm-color), 1 );
    }

    &:disabled+label::before {
        background-color: #e9ecef;
    }
}

.bpbm-radio{
    display: none;
    position: absolute;
    z-index: -1;
    opacity: 0;

    &+label {
        display: inline-flex !important;
        align-items: center;
        user-select: none;
    }

    &+label::before {
        content: '';
        display: inline-block;
        width: 1em;
        height: 1em;
        flex-shrink: 0;
        flex-grow: 0;
        border: 1px solid #adb5bd;
        border-radius: 0.25em;
        margin-right: 0.5em;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 50% 50%;
    }

    &:checked+label::before {
        border-color: rgba( var(--main-bm-color), 1 );
        background-color: rgba( var(--main-bm-color), 1 );
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
    }

    &:not(:disabled):not(:checked)+label:hover::before {
        border-color: rgba( var(--main-bm-color), 1 );
    }

    &:not(:disabled):active+label::before {
        background-color: rgba( var(--main-bm-color), 1 );
        border-color: rgba( var(--main-bm-color), 1 );
    }

    &:focus+label::before {
        box-shadow: 0 0 0 0.2rem rgba( var(--main-bm-color), 0.25 );
    }

    &:focus:not(:checked)+label::before {
        border-color: rgba( var(--main-bm-color), 1 );
    }

    &:disabled+label::before {
        background-color: #e9ecef;
    }
}

body.bm-mobile-device-android{
}

.bm-dropzone{
    border: 2px dashed rgba( var(--bm-border-color), 1 );
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
    z-index: 10;
    background: rgba( var(--bm-bg-color), 1 );
    text-align: center;
    line-height: 100px;
    font-size: 18px;
    text-transform: uppercase;
    color: rgba( var(--bm-text-color), 1 );

    &.bm-dropzone-dragging-over{
        background: rgba( var(--bm-hover-bg), 1 );
        border: 2px dashed #2275d7;
    }
}

/*
    Youzify Group Tab
 */
.youzify-group-navmenu a#nav-messages:before {
    display: inline-block;
    font-family: "Font Awesome 5 Free"!important;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 10px;
    font-size: 14px;
    content: '\f086';
}

.bm-loading{
    display: flex;
    text-align: center;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;

    .bm-loading-icon{
        display: block;
        font-size: 2rem;
    }

    .bm-loading-text{
        display: block;
        font-size: 1rem;
        padding-top: 1rem;
    }
}

html[dir="rtl"]{
    .bm-name-verified{
        margin-right: 5px;
        margin-left: 0;
    }

    .bpbm-radio + label::before,
    .bpbm-checkbox + label::before{
        margin-left: 0.5em;
        margin-right: 0;
    }

    .contexify_item > .contexify_itemContent > span{
        margin-left: 0;
        margin-right: 5px;
    }

    .bp-messages-wrap{
        text-align: right;


        &:not(.bp-messages-mobile) .bp-messages-call-wrap > .bpbm-switch-chat{
            transform: rotate(180deg);
        }

        #bm-new-thread-title {
            margin: 0 0 0 auto !important;
        }

        .bp-messages-side-threads{
            border-left: 1px solid rgba(var(--bm-border-color), 0.62);
            border-right: none;

            > *{
                border-left: 1px solid rgba(var(--bm-border-color), 0.62);
                border-right: none;
            }
        }

        .expandingButtons {
            .bpbm-dropdown-menu{
                left: 0;
                right: auto;

                .bpbm-dropdown-item-icon{
                    margin-left: 5px;
                    margin-right: 0;
                }
            }
        }

        .bm-voice-message-play{
            transform: rotate(180deg);
        }

        .chat-header{
            &.side-header{
                border-left: none;

                .new-message + .bpbm-search{
                    padding-right: 0;
                    padding-left: 10px;
                }
            }

            .back{
                transform: rotate(180deg);

                + .thread-info {
                    margin-left: auto !important;
                    margin-right: 0 !important;

                    .avatar{
                        margin-right: 0;
                        margin-left: 8px;
                    }

                    .avatar-group{
                        margin-left: 6px;
                        margin-right: 0;
                    }
                }
            }
        }

        .chat-footer {
            .bpbm-user-me{
                flex-direction: row-reverse;
                margin-left: 0;
                margin-right: auto;

                .bpbm-status {
                    .current-status {
                        svg {
                            margin-left: 5px;
                            margin-right: 0;
                        }
                    }
                }

                .bpbm-user-me-popup .bpbm-user-me-popup-list .bpbm-user-me-popup-list-item .bpbm-user-me-popup-list-item-title > svg{
                    margin-left: 5px;
                    margin-right: 0
                }
            }
        }

        .threads-list {
            .thread {
                .pic{
                    text-align: right;

                    &.group{
                        text-align: right;
                    }
                }

                .time{
                    padding-right: 10px;
                    padding-left: 5px;
                }

                .bm-info {
                    h4 {
                        .bm-thread-icon{
                            margin-right: 5px;
                            margin-left: 0;
                        }
                    }

                    .last-message {
                        .bm-last-message-avatar{
                            margin-left: 5px;
                            margin-right: 0;
                        }
                    }
                }

                .actions{
                    padding-left: 8px;
                    padding-right: 0;
                }
            }
        }

        .bm-reply {
            .bm-send-message {
                svg{
                    right: 0;
                    left: 10px;
                }
            }

            .bm-editor{
                padding-right: 16px;
                padding-left: 0;
            }

            &.bm-attachments .bm-editor{
                padding-right: 0px;
            }
        }

        &.bp-better-messages-mini {
            .chats {
                .chat {
                    .head {
                        .thread-info {
                            &.thread-info-loaded .thread-info-arrow-down{
                                margin-left: 0;
                                margin-right: auto;
                            }

                            .avatar {
                                margin-right: 0;
                                margin-left: 8px;
                            }

                            .avatar-group{
                                margin-right: 0;
                                margin-left: 6px;
                            }
                        }
                    }

                    .bm-messages-list .bm-list .bm-messages-stack{
                        &.bm-left-side {
                            .bm-pic {
                                right: calc(100% - 30px)
                            }
                        }
                        &.bm-right-side {
                            .bm-pic {
                                right: 10px;
                            }
                        }
                    }
                }
            }
        }
    }

    .bm-messages-list{

        &.bm-template-standard{
            .bm-list {
                .bm-messages-stack {
                    .bm-pic {
                        right: 15px;
                        left: auto;
                    }

                    .bm-content {
                        padding-left: 0;
                        padding-right: 60px;

                        .bm-info{
                            display: flex;
                            align-items: center;

                            .name{
                                margin-left: 5px;
                                margin-right: 0;
                            }
                        }

                        .bm-messages-listing .bm-message {

                            .message-controls{
                                //flex-direction: row;
                                margin-right: auto;
                            }

                            .bm-message-content{
                                display: flex;
                                flex-direction: row;
                                text-align: right;
                            }

                        }
                    }
                }
            }
        }

        &.bm-template-modern{
            .bm-list .bm-messages-stack .bm-content .bm-messages-listing .bm-message .bm-message-info{
                float: left;

                .bm-time{
                    margin-left: 0;
                    margin-right: 10px;
                }
            }

            .bm-list {
                .bm-messages-stack{

                    .bm-messages-listing {
                        .bm-message-content {

                            text-align: right !important;
                            .bm-reactions{
                                flex-direction: row-reverse !important;
                            }
                            .bm-reactions-selector{
                                left: -9px;
                                right: auto !important;
                            }
                        }
                    }

                    &.bm-left-side{
                        .bm-pic{
                            right: calc(100% - 50px);
                        }


                        .bm-content{
                            .bm-info{
                                .bm-name{
                                    flex-direction: row-reverse;
                                }
                                flex-direction: row-reverse;
                            }

                            .bm-messages-listing {
                                .bm-message{
                                    flex-direction: row-reverse !important;
                                    .message-controls{
                                        flex-direction: row-reverse !important;
                                    }

                                }
                            }
                        }
                    }

                    &.bm-right-side {
                        .bm-pic{
                            right: 15px;
                        }

                        .bm-content{
                            .bm-info{
                                .bm-name{
                                    flex-direction: row;
                                }

                                flex-direction: row;
                            }

                            .bm-messages-listing {
                                .bm-message{
                                    flex-direction: row !important;
                                    .message-controls{
                                        flex-direction: row !important;
                                    }

                                }
                            }
                        }
                    }
                }
            }

        }
    }
    .bp-better-messages-list {
        .tabs {
            > div {
                > svg{
                    margin-left: 4px;
                    margin-right: 0;
                }
            }
        }
    }

    .bm_user_selector .bm_user_selector__menu .bm_user_selector__menu-list .bm_user_selector__option .avatar {
        margin-left: 0.3rem;
        margin-right: 0;
    }

    .bm_thread_subject_input .bm-to-label{
        padding-right: 0;
        padding-left: 10px;
    }

    .bp-messages-user-list .user .actions,
    .bp-messages-group-list .group .actions{
        margin-left: 0;
        margin-right: auto;
    }

    .bpbm-chat-content .bpbm-chat-main .bm-before-message-list .bpbm-group-call-in-progress .bpbm-group-call-in-progress-info svg{
        margin-left: 5px;
        margin-right: 0;
    }
    .bpbm-chat-content .bpbm-chat-main .bm-before-message-list .bpbm-group-call-in-progress .bpbm-group-call-in-progress-join{
        margin-left: 0;
        margin-right: 5px;
    }

    .bp-messages-group-call-controls-v2,
    .bp-messages-call-wrap .bp-messages-call-container {
        border-left: none;
        border-right: 1px solid rgba(var(--bm-border-color), 0.62);
    }

    .bp-messages-group-audio-call-container .bp-messages-group-call-audios-grid > .bp-messages-group-call-input-audio .bp-messages-group-call-input-audio-inner .bp-messages-group-call-input-audio-inner-info .bpbm-caller-info .bpbm-info-avatar{
        padding-right: 0;
        padding-left: 10px;
    }
}

body.in-bbapp{
    .bp-messages-wrap .chat-header .mobileClose{
        display: none !important;
    }
}

#bm-pg-messages{
    margin: 5px 0;
}

#wpum-profile #wpum-profile-bm-pm-link{
    float: right;
    margin-right: 20px;
    margin-top: 20px;
}

body.buddyboss-theme.bb-template-v1:not(.wcfm-dashboard-page), body.buddyboss-theme.bb-template-v2:not(.wcfm-dashboard-page){
    #buddypress .bb_more_options .bb_more_options_list {
        a.bpbm-audio-call:before{
            content: "\eeef";
            font-family:"bb-icons" !important;
            font-size: 16px;
            display: inline-block;
            margin-right: 10px;
            width: 20px;
            text-align: center;
            vertical-align: middle;
        }
        a.bpbm-video-call:before{
            content: "\ef65";
            font-family:"bb-icons" !important;
            font-size: 16px;
            display: inline-block;
            margin-right: 10px;
            width: 20px;
            text-align: center;
            vertical-align: middle;
        }
    }
}

.bm-message-status-panel{
    .bm-message-status-panel-users{
        margin: 10px 0 0;

        .bm-message-status-panel-no-results{
            color: gray;
            font-style: italic;
        }

        .bp-messages-user-list{
            max-height: 400px;
            overflow: auto;
        }
    }
}

.bm-message-reactions-panel{
    .bm-message-reactions-panel-users{
        margin: 10px 0 0;

        .bm-message-reactions-panel-no-results{
            color: gray;
            font-style: italic;
        }

        .bp-messages-user-list{
            max-height: 400px;
            overflow: auto;
        }
    }
}

.bpbm-pm-button.bm-wpforo-btn{
    padding: 1px 5px 1px 5px !important;
    border-radius: 2px !important;
    background: rgba( var(--main-bm-color), 1 ) !important;
    color: white !important;
}

.bm-thread-moderation{
    .bm-thread-moderation-stats{
        display: flex;
        padding: 10px 10px !important;

        .bm-thread-moderation-stats-item{
            display: flex;
            width: 125px;
            padding: 20px 0;
            height: 95px;
            background: rgba(0, 0, 0, 0.1490196078);
            margin-right: 10px;
            cursor: pointer;
            text-align: center;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;

            > strong{
                display: block;
                font-size: 14px;
            }

            > i {
                display: block;
                font-style: normal;
                font-size: 28px;
            }
        }
    }
}

.bm-moderation-actions-panel{
    .bm-user-popup {
        margin-bottom: 10px;
    }

    .bm-moderation-actions-form{
        label{
            display: block;
            font-size: 14px;
            opacity: 0.8;
            margin-bottom: 5px;
        }

        .bm-moderation-actions-row{
            display: flex;
            align-content: center;
            align-items: center;
            margin-bottom: 5px;
            justify-content: space-between;

            > div{
                width: 49%;
            }
        }

        .bm-moderation-actions-button{
            font-size: 14px;
            width: 100%;
            text-align: center;
        }

        input{
            max-height: 30px !important;
            min-height: 30px !important;
            display: inline-block;
            background: rgba(var(--bm-bg-color), 1) !important;
            border-radius: 3px;
            border: 1px solid rgba(var(--bm-border-secondary-color), 1) !important;
            max-width: 200px;
            box-sizing: border-box;
            font-size: 13px;
            transition: border-color 0.2s;
            color: rgba(var(--bm-text-color), 1) !important;
            padding: 5px;
            min-height: 30px;
            width: 100%;
            vertical-align: middle;
        }

        select{
            max-height: 30px !important;
            min-height: 30px !important;
            display: inline-block;
            background: rgba(var(--bm-bg-color), 1) !important;
            border-radius: 3px;
            border: 1px solid rgba(var(--bm-border-secondary-color), 1) !important;
            max-width: 200px;
            box-sizing: border-box;
            font-size: 13px;
            transition: border-color 0.2s;
            color: rgba(var(--bm-text-color), 1) !important;
            padding: 5px;
            width: 100%;
            height: auto;
            vertical-align: middle;
        }
    }
}

.bm-user-popup{
    display: flex;

    .bm-user-popup-user-info{
        margin-bottom: 5px;

        .last-online{
            font-size: 10px;
        }
    }

    .bm-user-popup-avatar{
        margin-right: 10px;
    }

    .bm-user-popup-name{

    }
}

.bm-thread-info{
    .bm-product-info{
        display: flex;
        padding: 10px;
        border-bottom: 1px solid rgba(var(--bm-border-secondary-color), 1);

        .bm-product-image{
            margin-right: 10px;
            min-width: 50px;
            a {
                display: block;
                border: 1px solid rgba(var(--bm-border-secondary-color), 1);
                border-radius: 3px;
                overflow: hidden;

                img {
                    display: block;
                    width: 50px;
                    height: 50px;
                }
            }
        }

        .bm-product-details {
            .bm-product-title {
                font-size: 15px;
                font-weight: bold;
                margin-bottom: 3px;
            }

            .bm-product-price{

                del{
                    margin-left: 5px;
                    opacity: 0.5;
                }
            }
        }
    }
}

:root{
    --bm-live-chat-btn-bg-color: 0, 121, 255;
    --bm-live-chat-btn-content-color: #FFFFFF;

    --bm-live-chat-widget-attractive-bg: 0, 121, 255;
    --bm-live-chat-widget-attractive-text: 255,255,255;

    --bm-live-chat-widget-border-color: #e3e3e3;
    --bm-live-chat-widget-border-radius: 5px;

    --bm-live-chat-widget-bg-color: #fff;

    --bm-live-chat-widget-input-text: #000;
    --bm-live-chat-widget-input-border: #ccc;
    --bm-live-chat-widget-input-border-active: #0079ff;
}

.bm-livechat-button{
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: rgba(var(--bm-live-chat-btn-bg-color), 1);
    color: var(--bm-live-chat-btn-content-color);
    border-radius: 50px;
    box-shadow: 0 1px 1px 1px #00000024;
    cursor: pointer;

    .bm-livechat-button-icon{
        position: absolute;
        margin: auto;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        width: 30px;
        height: 30px;
    }
}

.bm-livechat-modal{
    position: fixed;
    bottom: 0;
    right: 20px;
    background: var(--bm-live-chat-widget-bg-color);;
    width: 340px;
    height: 500px;
    //border: 1px solid var(--bm-live-chat-widget-border-color);
    border-radius: var(--bm-live-chat-widget-border-radius) var(--bm-live-chat-widget-border-radius) 0 0;
    overflow: hidden;
    //box-shadow: 0 1px 2px 2px rgb(0 0 0 / 10%);
    display: flex;
    flex-direction: column;

    .bm-livechat-modal-head{
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        align-content: center;
        flex-direction: row;
        background: rgba( var(--bm-live-chat-widget-attractive-bg), 1 );
        color: rgba( var(--bm-live-chat-widget-attractive-text), 1 );
        //border-bottom: 1px solid var(--bm-live-chat-widget-border-color);
        box-shadow: 0 2px 3px rgb(0 0 0 / 10%);
        padding: 10px;
        min-height: 50px;

        .bm-livechat-modal-head-index{
            font-size: 18px;
        }

        .bm-livechat-modal-head-conversation{
            font-size: 18px;
            display: flex;
            flex-direction: row;
            align-items: center;
            align-content: center;
            justify-content: flex-start;
            width: 100%;

            .bm-lc-modal-head-conversation-menu{
                margin-left: auto;
            }

            .bm-lc-modal-head-conversation-menu-btn{
                position: relative;
                display: block;
                cursor: pointer;
                font-size: 18px;
                width: 30px;
                height: 30px;
                border-radius: var(--bm-widgets-button-radius) !important;
                opacity: 1;
                background-color: rgb(0 0 0 / 0%);
                transition-property: background-color;
                transition-duration: 150ms;
                transition-timing-function: linear;

                &:hover{
                    background-color: rgb(0 0 0 / 15%);
                }

                > svg{
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    right: 0;
                    top: 0;
                    margin: auto;
                }
            }

            .bm-lc-modal-head-conversation-back-btn{
                position: relative;
                display: block;
                cursor: pointer;
                font-size: 18px;
                width: 30px;
                height: 30px;
                border-radius: var(--bm-widgets-button-radius) !important;
                opacity: 1;
                background-color: rgb(0 0 0 / 5%);
                transition-property: background-color;
                transition-duration: 150ms;
                transition-timing-function: linear;
                margin-right: 10px;

                &:hover{
                    background-color: rgb(0 0 0 / 15%);
                }

                > svg{
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    right: 0;
                    top: 0;
                    margin: auto;
                }
            }

            .bm-lc-modal-head-conversation-info{
                display: flex;

                .bbpm-avatar{
                    margin-right: 8px;
                }

                .bm-lc-modal-head-conversation-info-data{
                    .bm-lc-modal-head-conversation-info-name{
                        font-size: 15px;
                        line-height: 15px;
                    }
                }
            }
        }
        /*.bm-livechat-modal-head-left{
            > span{
                cursor: pointer;
            }
        }

        .bm-livechat-modal-head-center{
            margin: auto;
            > span{
                cursor: pointer;
            }
        }

        .bm-livechat-modal-head-right{
            > span{
                cursor: pointer;
            }
        } */
    }

    .bmlc-card{
        background: var(--bm-live-chat-widget-bg-color);
        margin: 0 10px 10px;
        padding: 10px 10px;
        border-radius: var(--bm-live-chat-widget-border-radius);
        box-shadow: 0 2px 3px 1px rgb(0 0 0 / 10%);
        color: #434343;
    }

    .bmlc-subject{
        display: flex;

        .bmlc-subject-image{
            margin-right: 10px;
            img{
                max-width: 100px;
                max-height: 100%;
            }
        }

        .bmlc-subject-info{

            .bmlc-subject-info-title{
            }

            .bmlc-subject-info-subtitle{
                color: #606060;
            }
        }
    }

    .bm-livechat-modal-body{
        position: relative;
        z-index: 1;
        background: #f7f7f7;
        //padding: 10px 0;
        height: 100%;

        .bmlc-body-conversation{
            display: flex;
            flex-direction: column;
            position: absolute;
            top: 0;
            z-index: 2;
            width: 100%;
            height: 100%;
            background: white;
            border-radius: 0 !important;
            border-top: 0;
            border-bottom: 0;
            border-left: 1px solid var(--bm-live-chat-widget-border-color);
            border-right: 1px solid var(--bm-live-chat-widget-border-color);
        }

        .bmlc-body-threads{
            border-left: 1px solid var(--bm-live-chat-widget-border-color);
            border-right: 1px solid var(--bm-live-chat-widget-border-color);
            padding-top: 10px;
            height: 100%;

            .bmlc-body-threads-title{
                font-size: 18px;
                line-height: 18px;
                margin-bottom: 10px;
            }

            .bmlc-threads-list{
                position: relative;
                display: table;
                width: 100%;
                table-layout: auto;
                height: auto;

                .thread{
                    display: table-row;
                    vertical-align: top;

                    &:hover {
                        cursor: pointer;

                        > *{
                            background-color: rgba(var(--bm-live-chat-widget-attractive-bg), 1);
                            color: rgba(var(--bm-live-chat-widget-attractive-text), 1);
                        }
                    }

                    > * {
                        display: table-cell;
                        vertical-align: top;
                        padding-bottom: 15px;
                        padding-top: 15px;
                        border: none;
                        border-bottom: 1px solid rgba(var(--bm-live-chat-widget-border-color), 0.4);
                        line-height: initial;

                        transition-property: color, background-color;
                        transition-duration: 150ms;
                        transition-timing-function: linear;

                        background-color: rgba(var(--bm-live-chat-widget-attractive-bg), 0.03);

                        &:first-child{
                            padding-left: 15px;
                            border-radius: var(--bm-live-chat-widget-border-radius) 0 0 var(--bm-live-chat-widget-border-radius);
                        }

                        &:last-child{
                            padding-right: 15px;
                            border-radius: 0 var(--bm-live-chat-widget-border-radius) var(--bm-live-chat-widget-border-radius) 0;
                        }
                    }

                    .bm-info {
                        h4 {
                            margin: 0 0 4px;
                            font-size: 13px;
                            line-height: 13px;
                            font-weight: 600;
                            text-transform: none;
                            letter-spacing: initial;
                            display: flex;
                            align-items: center;
                            flex-direction: row;
                            justify-content: flex-start;
                            word-break: break-word;
                            color: inherit;

                            .bm-thread-icon{
                                margin-left: 5px;
                                color: rgba( var( --bm-text-color ), 0.6);
                            }
                        }
                    }

                    .time{
                        font-size: 12px;
                    }

                }
            }
        }

        .bmlc-auth-form{
            margin: 0;
            padding: 0;
            width: 100%;

            > div{
                margin-bottom: 10px;

                input[type="text"][autocomplete="name"],
                input[type="email"][autocomplete="email"]{
                    width: 100%;
                    background: var(--bm-live-chat-widget-bg-color);
                    border: 1px solid var(--bm-live-chat-widget-input-border);
                    outline: none;
                    border-radius: var(--bm-live-chat-widget-border-radius);
                    padding: 6px 10px;
                    box-shadow: none;
                    color: black;
                    font-size: 16px;

                    &:focus{
                        border-color: var(--bm-live-chat-widget-input-border-active);
                    }
                }

                button[type="submit"]{
                    width: 100%;
                    background: var(--bm-live-chat-widget-attractive-bg);
                    color: rgba( var(--bm-live-chat-widget-attractive-text), 1 );
                    outline: none;
                }
            }
        }
    }
}