article#messager{display: flex; width: 100%; height:85vh; margin:0;}


.messager_listChat{display: flex; flex-direction: column; width:340px; overflow-y: auto; flex-shrink:0; border-right:1px #c7c9cd solid;  height:85vh;}
.messager_listChat_caption{display: flex; padding:10px; background:#eef2fa; font-size: 16px; margin:0 0 5px 0;}

.messager_listChat .chat_{display: flex; position: relative; align-items: center; width: 100%; cursor:pointer; padding:5px; margin:5px 0 5px 0;border-left:5px #eef2fa solid;}
.chat_ .chat_counter{width:18px; height:18px; font-size:11px;  background: #da3b44; border-radius: 50%; color:#fff; display: flex; justify-content: center; align-items: center; position: absolute; right:5px; bottom:5px;}

.messager_listChat .chat_.current, .messager_listChat .chat:hover{border-left:5px #da3b44 solid;}
.messager_listChat .chat_.current{background:#eef2fa}
.chat_img{width:90px; flex-shrink: 0;}
.chat_img img{width:80px; height:60px; display:block; object-fit: contain; object-position: center; background:#bbb; border-radius: 5px;}

.chat_info{width: 100%; display: flex; font-size:12px; flex-direction: column; line-height: 1.3;}
.chat_info_product div{max-height:28px; overflow:hidden}

.chat_dayPub{display: flex; align-items: center; justify-content: center; font-size: 12px; color:#9c9c9c; padding:5px;}

.messager_dialog{width: 100%; padding-left:10px; flex-direction: column; position:relative; height:85vh; display: flex;  }
#messager_list{width: 100%; height: 100%;  overflow-y: auto; display: flex; flex-direction: column;}

#innerMessages{display: flex; flex-direction: column;}
#innerMessages .chat_msg{background:#eef2fa; width:70%;  padding:10px; border-radius: 10px; display: flex; justify-content: space-between; align-items: end; margin:5px 0;}   
#innerMessages .chat_msg small{font-size: 12px; color:#9c9c9c; }
#innerMessages .chat_msg.chat_my{margin-right:30%;}
#innerMessages .chat_msg.chat_admin{margin-left:30%; background:#effaee;}

#innerMessages .chat_msg img{max-width: 300px; max-height:200px;}

#innerMessages .chat_msg a{color:blue}

#innerMessages .chat_msg.chat_viewed small span{color:#007700}

#chatAttach{display: block; font-size: 12px; position:relative; width:150px; height:16px; margin:5px 0;}
#chatAttach input{position: absolute; z-index: 2; width:100%; height:100%; position: absolute; left: 0; top: 0; opacity:0;}
#chatAttach div{position: absolute; z-index: 1; width:100%; height:100%; position: absolute; left: 0; top: 0; display: flex; align-items: center;  cursor:pointer;}
#chatAttach div i{margin-right:5px;}

#messager_sender{position:relative; height:70px; flex-shrink: 0; padding:10px; bottom:0; left:0; width: 100%; border-top:1px #c7c9cd solid; }
#messager_sender form{position: relative; display: flex; align-items: center;}
#messager_sender textarea{ width:100%; outline:none; font-size:14px; padding:5px;  line-height: 1.2; resize:none; height:36px; margin:0;}
#messager_sender button,#messager_sender button:hover{flex-shrink: 0; margin-top:0; background: none; color:#777; font-size: 22px; padding:0 10px; border:none; overflow:hidden;}
#messager_sender button:hover{color:#333;}


.cart2order form{display: flex; flex-direction: column;}
.cart2order form input{height:42px; width:100%; font-size:16px; padding:5px; margin:0;}
a.chat{display:none;}

@media (max-width: 800px)
{
    .messager_listChat_caption{display:none;}
    .messager_listChat{width:55px;}
    .messager_dialog{padding-left:10px;}

    .chat_img{width:40px; flex-shrink: 0;}
.chat_img img{width:40px; height:30px; display:block; object-fit: contain; object-position: center; background:#bbb; border-radius: 5px;}

.chat_info{display:none;}
.chat_info_product div{display:none;}

    article#messager,.messager_dialog{height:80vh}

    .wrap__static{padding:10px 3px !important}
    #messager_sender button,#messager_sender button:hover{margin:0;}
}



.modalContent {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 0px;
    opacity: 0;
    height: 0px;
    z-index: 9999;
    overflow: hidden;
    transition: opacity 0.3s;
    display: flex;
  }
  
  .modalContent.show {
    position: fixed;
    left: 0;
    opacity: 1;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
  }
  
  .blacker-modal {
    position: absolute;
    z-index: 10;
    background: rgba(0, 0, 0, 0.6);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  
  .cart2order {
    width: 90%;
    padding: 30px;
    font-size: 18px;
    text-align: center;
    box-shadow: 0 0 20px rgb(0 0 0 / 70%);
    position: relative;
    z-index: 20;
    display: flex;
    flex-direction: column;
    max-width: 500px;
    margin: auto;
    background: #fff;
    border-radius: 20px;
  }
  .cart2order button {
    background: #a70000;
    color: #fff;
    margin: 10px auto;
    height: 40px;
    border-radius: 10px;
    border: none;
    width: 200px;
}
  .btn-modal {
    display: inline-block;
    cursor: pointer;
    border: none;
    color: #fff;
    font-size: 11px;
    line-height: 1.6;
    text-transform: uppercase;
    padding: 13px 38px 10px 38px;
    margin: 5px 0px;
    border-radius: 20px;
    transition: all 0.2s ease-in;
    background: #a70000;
    outline: none;
  }

  .cart2order__return-link {
    cursor: pointer;
    color: #06298b;
    text-transform: lowercase;
    font-size: 14px;
  }