
.bp-messages-chat-wrap {
       height: 100%;

       .bp-messages-wrap{
              height: 100%;
              border: 1px solid #ffffff30;
              background-color: #060212;
              margin-top:10px;
       

              .chat-header{
                     border-bottom: 1px solid #ffffff30;
                     background-color:  #151120;
                     color:#f1f1f1;
                     padding: 10px;
                     height: auto;
                    .thread-info .avatar-group {
                            grid-template-columns: 30px 15px;
                            display: none;
                            .avatar {
                                   width: 30px; 
                                   height: 30px;
                            }
                     }
                     .thread-actions>div.expandingButton,
                     .thread-actions>span{
                            width: 40px;
                     }
              }
              
              .bm-reply{
                     background-color: #151120;
                     border-top: 1px solid #ffffff30;

                     &>*{
                            background-color: #151120;
                     }
                     .bm-editor .bm-editor-content {
                            background-color: #151120!important; 
                     }
              }
       }
       .bp-messages-threads-wrapper{
              height: 100%;
       }
}
   
.bpbm-join-to-chat-button,
a.bpbm-join-to-chat-button{
       border: 1px solid var(--middle-grey);
       color: var(--bs-body-color);
       transition: 300ms ease;
       background: transparent;
       border-radius: 24px;
       padding: 10px 20px;
}

.bpbm-join-to-chat-button:hover,  
a.bpbm-join-to-chat-button:hover{
       color: var(--bs-body-bg)!important;
       background-color: var(--bs-body-color)!important;
       border: 1px solid var(--bs-body-color);
       border-radius: 24px;
       padding: 10px 20px;
}

.bm-login-form{
       height: 100%;
       color: #f1f1f1!important;
       background-color: #151120!important; 
       border: 1px solid #ffffff30!important;
       border-radius: 8px;
       margin: 0px !important;
       
       .bm-login-text{
            color: #f1f1f1!important;   
       }
       input[type="text"], 
       input[type="password"]  {
              border-radius: 8px;
              border: 1px solid #ffffff30!important;
              background-color:transparent!important;
              padding: 10px 15px;
              color: inherit;
              color: #f1f1f1;
       }
       
       input[type="submit" ] {
              margin-top: 16px;
              border: none;
              width: 100%;
              border-radius: 24px;
              padding: 12px 24px 12px 24px;
              color: #F1F1F1;
              background: var(--add-to-cart-button-normal);
              transition: 300ms ease;

       }
       .login-remember label{
              display: flex;
              gap:10px;
              align-items: center;
       }
}