<!-- BEGIN: MAIN -->
<script src="themes/itbirja/js/pages/mainfox.js" type="text/javascript"></script>
<style type="text/css">


  @media only screen and (max-width: 767px) {
    .all_page {
      padding-top: 94px;
    }
  }
  @media only screen and (max-width: 767px) {
    .all_page {
      padding-top: 94px;
    }
  }


</style>

<style>

.not-show {
  display: none !important;
}

.row-wrap {
  flex-wrap: wrap;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}
.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}
body {
  background: #f6f6f6;
}
.chat_wrap {
  width: 100%;
  height: 85vh;
  margin-top: 20px;
  background: #fff;
  border: 1px solid #e2e2e2;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 8px;
  display: flex;
}
.chat_list_wrap {
  width: 311px;
  border-right: 1px solid #e2e2e2;
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: none;
}
.chat_list_wrap .chat_search {
  width: 100%;
  padding: 11px;
  height: 55px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-bottom: 1px solid #e4e4e4;
}
.chat_list_wrap .chat_search .fake_wrap_input {
  width: 100%;
  position: relative;
}
.chat_list_wrap .chat_search .fake_wrap_input .fake_input_placeholder {
  position: absolute;
  font-size: 14px;
  color: #4c4c4c;
  bottom: 0;
  top: 0;
  margin: auto;
  display: flex;
  align-items: center;
  transition: all 0.3s;
  transform: translateX(82px);
}
.chat_list_wrap .chat_search .fake_wrap_input .fake_input_placeholder span {
  transition: all 0.3s;
}
.chat_list_wrap .chat_search .fake_wrap_input .fake_input_placeholder.act {
  transform: translateX(0px);
}
.chat_list_wrap .chat_search .fake_wrap_input .fake_input_placeholder.act span {
  opacity: 0;
}
.chat_list_wrap .chat_search .fake_wrap_input .fake_input_placeholder img {
  margin-left: 10px;
  margin-right: 7px;
}
.chat_list_wrap .chat_search .sound_check {
  margin-left: 12px;
}
.chat_list_wrap .chat_search input {
  height: 32px;
  border: 1px solid #e2e2e2;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 4px;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  outline: none;
  padding: 3px 3px 3px 7px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  padding-left: 30px;
}
.chat_list_wrap .chat_list_items {
  width: 100%;
  height: 1000px;
  overflow-y: scroll;
  overflow-x: hidden;
}
.chat_list_wrap .chat_list_items::-webkit-scrollbar {
  width: 10px;
  transition: all 0.3s;
  position: absolute;
  /* ширина scrollbar */
}
.chat_list_wrap .chat_list_items::-webkit-scrollbar-track {
  background: transparent;
  /* цвет дорожки */
}
.chat_list_wrap .chat_list_items::-webkit-scrollbar-thumb {
  background-color: transparent;
  /* цвет плашки */
  border-radius: 20px;
  border: 3px solid #fff;
  transition: all 1s;
  /* закругления плашки */
}
.chat_list_wrap .chat_list_items:hover::-webkit-scrollbar-thumb {
  background-color: #959595;
  /* цвет плашки */
  border-radius: 20px;
  transition: all 1s;
  border: 3px solid #fff;
  /* закругления плашки */
}
.chat_list_wrap .chat_list_items .chat_list_item {
  padding: 9px 8px 15px 12px;
  background: rgba(0, 0, 0, 0);
  display: flex;
  width: 100%;
  transition: background 0.3s;
  cursor: pointer;
  position: relative;
}
.chat_list_wrap .chat_list_items .chat_list_item:hover,
.chat_list_wrap .chat_list_items .chat_list_item.act {
  background: #f6f6f6!important;
}
.chat_list_wrap .chat_list_items .chat_list_item .chat_list_item_avatar {
  width: 48px;
  height: 48px;
  border-radius: 48px;
  display: flex;
  align-items: center;
  background: #e17076;
  justify-content: center;
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 22px;
  flex: none;
}
.chat_list_wrap .chat_list_items .chat_list_item .chat_list_item_content {
  padding-left: 8px;
  width: 100%;
}
.chat_list_wrap .chat_list_items .chat_list_item .chat_list_item_content_row {
  padding-top: 4px;
  display: flex;
  justify-content: space-between;
}
.chat_list_wrap .chat_list_items .chat_list_item .chat_list_item_content_row .chat_list_item_date {
  margin-top: 1px;
  font-size: 12px;
  line-height: 16px;
  color: #8a8a8a;
}
.chat_list_wrap .chat_list_items .chat_list_item .chat_list_item_content_row .chat_list_item_name {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: #333;
}
.chat_list_wrap .chat_list_items .chat_list_item .chat_list_item_content_row .chat_list_item_message {
  font-size: 12px;
  line-height: 16px;
  color: #333;
}
.d-flex {
  display: inline-flex;
}
.chat__list-star svg {
  fill: none;
  stroke: none;
  stroke-width: 1px;
}
.chat__list-star svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke-width: 1px;
  stroke: #999;
}
.chat__list-star {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0 0 0 5px;
  min-width: 14px;
  max-width: 14px;
  height: 14px;
}
.chat__list-star {
  min-width: 16px;
  max-width: 16px;
  height: 16px;
  margin: 0 0 0 4px;
}
.chat_messages_block {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.chat_messages_block .chat_messages_block_head {
  display: flex;
  align-items: center;
  height: 100%;
  height: 55px;
  flex: none;
  justify-content: space-between;
  border-bottom: 1px solid #e4e4e4;
  padding: 0 11px;
}
.chat_messages_block .chat_messages_block_head_avatar {
  background: #a695e7;
  width: 36px;
  height: 36px;
  border-radius: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  position: relative;
}
.chat_messages_block .chat_messages_block_head_avatar .online_status {
  position: absolute;
  left: 25px;
  right: auto;
  top: 25px;
  bottom: auto;
  display: block!important;
  background: #a5a5a5;
  width: 12px!important;
  height: 12px!important;
  border-radius: 100%;
  border: 2px solid #fff;
}
.chat_messages_block_user_info {
  margin: -2px 0 0 8px;
}
.chat_messages_block_user_info .chat_messages_block_user_info_top {
  display: flex;
  align-items: center;
}
.chat_messages_block_user_info .chat_messages_block_user_info_top .chat_messages_block_user_info_name {
  font-weight: 600;
  color: #333!important;
  font-size: 14px;
  line-height: 20px;
}
.chat_messages_block_user_info .chat_messages_block_user_info_top svg {
  margin-left: 8px;
}
.chat_messages_block_user_info .chat_messages_block_user_info_top .online_time_last {
  font-size: 12px;
  line-height: 16px;
  color: #8a8a8a;
}
.chat_messages_block_user_info .chat_messages_block_user_info_online_time {
  margin-top: 1px;
  font-size: 12px;
  line-height: 16px;
  color: #8a8a8a;
}
.chat_messages_block_btns {
  display: flex;
}
.chat_messages_block_btns_orders {
  width: 86px;
  height: 32px;
  font-size: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-color: #04b70a;
  background-color: #04b70a;
  color: #fff;
  border-radius: 4px;
  font-weight: bold;
  transition: background 0.3s;
  cursor: pointer;
}
.chat_messages_block_btns_orders svg {
  margin-right: 3px;
}
.chat_messages_block_btns_orders:hover {
  background-color: #38da3e;
}
.files_btn {
  width: 32px;
  height: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: 8px;
  cursor: pointer;
  border-radius: 4px;
  position: relative;
}
.files_btn .files_btn_items {
  background: #fff;
  box-shadow: 0 8px 34px rgba(0, 0, 0, 0.06), 0 1px 6px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 288px;
  top: 30px;
  right: -2px;
  color: #333;
  z-index: 10;
  position: absolute;
  display: none;
}
.files_btn .files_btn_items span {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: #333;
  margin-right: 4px;
  transition: all 0.3s;
}
.files_btn .files_btn_items span.col_files {
  color: #a5a5a5;
}
.files_btn .files_btn_items svg {
  margin-right: 12px;
}
.files_btn .files_btn_items .files_btn_item {
  padding: 12px 8px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e2e2e2;
  transition: all 0.3s;
}
.files_btn .files_btn_items .files_btn_item:hover {
  background: #f1fcf4;
}
.files_btn .files_btn_items .files_btn_item:hover span {
  color: #04b70a !important;
}
.files_btn .files_btn_items .files_btn_item:hover svg {
  transition: all 0.3s;
}
.files_btn .files_btn_items .files_btn_item:hover svg path {
  transition: all 0.3s;
}
.files_btn .files_btn_items .files_btn_item:hover svg path:nth-child(1) {
  fill: #f1fcf4;
}
.files_btn .files_btn_items .files_btn_item:hover svg path:nth-child(2) {
  fill: #04b70a !important;
}
.files_btn .files_btn_items .files_btn_item:hover svg g path {
  fill: #04b70a !important;
}
.files_btn .files_btn_items .files_btn_item:last-child {
  border: none;
}
.files_btn .files_btn_circle {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #a5a5a5;
  margin: 1.5px 0;
}
.files_btn:hover {
  background-color: #f6f7f2;
}
.message_read_status {
  margin-left: 20px;
}
.claim_btn,
.quote_btn {
  opacity: 0;
  transition: all 0.3s;
  margin-left: 8px;
}
.claim_btn:hover g,
.quote_btn:hover g {
  fill: #0f7add;
}
.messages_block_content {
  height: 100%;
  width: 100%;
  padding-top: 20px;
  overflow-y: scroll;
  overflow-x: hidden;
}
.messages_block_content::-webkit-scrollbar {
  width: 10px;
  transition: all 0.3s;
  position: absolute;
  /* ширина scrollbar */
}
.messages_block_content::-webkit-scrollbar-track {
  background: transparent;
  /* цвет дорожки */
}
.messages_block_content::-webkit-scrollbar-thumb {
  background-color: transparent;
  /* цвет плашки */
  border-radius: 20px;
  border: 3px solid #fff;
  transition: all 1s;
  /* закругления плашки */
}
.messages_block_content:hover::-webkit-scrollbar-thumb {
  background-color: #959595;
  /* цвет плашки */
  border-radius: 20px;
  transition: all 1s;
  border: 3px solid #fff;
  /* закругления плашки */
}
.messages_block_content .messages_block_content_message_item {
  width: 100%;
  padding: 0 11px;
  min-height: 72px;
  padding-top: 12px;
  padding-bottom: 4px;
  transition: all 0.3s;
  margin-top: 12px!important;
}
.messages_block_content .messages_block_content_message_item:hover {
  background: #f6f7f2;
}
.messages_block_content .messages_block_content_message_item:hover .claim_btn,
.messages_block_content .messages_block_content_message_item:hover .quote_btn {
  opacity: 1;
}
.messages_block_content .messages_block_content_message_item_head {
  display: flex;
  justify-content: space-between;
}
.messages_block_content .messages_block_content_message_item_head .chat_messages_block_head_avatar {
  margin-right: 10px;
}
.messages_block_content .messages_block_content_message_item_head .messages_block_content_user_name {
  color: #333!important;
  font-size: 14px;
  line-height: 22px;
  font-weight: 700!important;
}
.messages_block_content_message_text {
  color: #333;
  font-size: 14px!important;
  padding-left: 47px;
  max-width: 700px;
  margin-bottom: 8px!important;
  line-height: 22px!important;
}
.msbc_left {
  display: flex;
}
.msbc_right {
  display: flex;
  align-items: center;
}
.msbc_right .msbc_right_time {
  font-size: 12px!important;
  color: #8a8a8a!important;
}
.messages_block_message_write_block {
  width: 100%;
  min-height: 57px;
  flex: none;
  border-top: 1px solid #a5a5a5;
  border-color: rgba(226, 226, 226, 0.5);
  display: flex;
  align-items: center;
}
.messages_block_message_write_block textarea {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border: none;
  outline: none;
  padding-left: 10px;
  padding-right: 30px;
  display: flex;
  height: 40px;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 14px!important;
  line-height: 22px;
  line-height: 22px!important;
  color: #333!important;
  resize: none;
  overflow: hidden;
}
.messages_block_message_write_block .file_btn_send {
  margin-left: 13px;
  margin-right: 10px;
  cursor: pointer;
}
.emoji {
  display: flex;
  align-items: center;
}
.emoji svg {
  transition: all 0.3s;
}
.emoji:hover svg {
  fill: #177de6;
}
.send_btn {
  display: flex;
  align-items: center;
  margin-left: 10px;
  margin-right: 19px;
}
.file_btn_send_wrap {
  width: 47px;
}
.hide_seatch_input_wrap {
  display: none;
  position: absolute;
  left: 10px;
}
.chat_search_wrap_mob {
  height: 64px;
  padding: 16px 16px 16px 12px;
  border-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  display: none;
}
.chat_search_wrap_mob .hide_seatch_input {
  height: 32px;
  border: 1px solid #e2e2e2;
  border-radius: 4px;
  width: 311px;
  display: flex;
  align-items: center;
  background: #fff;
  padding-left: 10px;
}
.chat_search_wrap_mob .hide_seatch_input input {
  outline: none;
  height: 32px;
  padding: 15px;
  width: 100%;
  border: none;
  background: transparent;
}
.chat_search_wrap_mob .chat_search_wrap_mob_title {
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
  color: #111;
  padding: 1px 0 3px;
}
.chat_search_wrap_mob .chat_btns {
  display: flex;
  align-items: center;
}
.chat_search_wrap_mob .sound_check {
  margin-left: 17px;
}
.chat_messages_block_head_mob {
  padding: 0 8px;
  height: 64px;
  display: flex;
  align-items: center;
  flex: none;
  position: sticky;
  top: 0px;
  text-decoration: none;
  justify-content: space-between;
  border-bottom: 1px solid #e4e4e4;
}
.chat_messages_block_head_mob_left {
  display: flex;
  align-items: center;
}
.ip_btn_mob {
  margin-right: 14px;
}
.chat_messages_block_head_mob_user_info {
  margin-left: 16px;
}
.chat_messages_block_head_mob_user_info .chat_messages_block_head_mob_user_info_top {
  display: flex;
  align-items: center;
}
.chat_messages_block_head_mob_user_info .chat_messages_block_head_mob_user_info_top .chat_messages_block_head_mob_user_info_name {
  font-weight: 600;
  color: #333!important;
  font-size: 14px;
  line-height: 20px;
}
.chat_messages_block_head_mob_user_info .chat_messages_block_head_mob_user_info_top .mob_online_status {
  display: flex;
  margin-left: 8px;
  font-size: 12px;
  line-height: 16px;
  align-items: center;
  color: #666;
}
.chat_messages_block_head_mob_user_info .chat_messages_block_head_mob_user_info_top .mob_online_status .mob_online_status_circle {
  width: 8px!important;
  height: 8px!important;
  padding: 0;
  border: 0;
  margin-right: 6px;
  position: static;
  border-radius: 6px;
  display: block!important;
  background-color: #a5a5a5;
}
.mob_date_time {
  font-size: 12px;
  line-height: 16px;
  color: #8a8a8a;
  display: flex;
  align-items: center;
  margin-top: 6px;
}
.popup_bg {
  width: 100%;
  height: 100vh;
  left: 0;
  bottom: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  display: none;
}
.close_popup {
  position: absolute;
  right: 16px;
  top: 10px;
  cursor: pointer;
}
.ip_popup_wrap {
  border-radius: 25px;
  width: 716px;
  min-height: 729px;
  background: #fff;
  height: fit-content;
  margin: auto;
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  padding: 0 25px 25px;
  display: none;
}
.ip_popup_wrap .ip_popup_wrap_title {
  padding-top: 25px !important;
  display: block;
  color: #333;
  font-size: 24px !important;
  font-weight: 600;
  line-height: 29px !important;
}
.ip_popup_wrap .ip_popup_wrap_subtitle {
  display: block;
  font-size: 15px;
  color: #333;
  margin-top: 20px;
  line-height: 23px;
  margin-bottom: 10px;
  font-weight: 600;
}
.ip_popup_wrap .ip_list {
  padding-left: 50px;
  position: relative;
  margin-bottom: 20px;
}
.ip_popup_wrap .ip_list li {
  font-size: 13px;
  line-height: 23px;
}
.ip_popup_wrap .ip_list_img {
  width: 25px;
  height: 25px;
  position: absolute;
  left: 0;
  background: url(sprite-icon.png);
  background-position: -135px -4494px;
  display: inline-block;
  background-color: rgba(0, 0, 0, 0);
  background-repeat: no-repeat;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
}
.ip_popup_wrap .ip_text_img {
  background: url(offer_sprite.png) no-repeat;
  display: block;
  width: 32px;
  height: 32px;
  margin-right: 8px;
  background-position: -5px -45px;
  position: relative;
  top: -1px;
  flex: none;
}
.ip_popup_wrap .ip_text_wrap {
  display: flex;
}
.ip_popup_wrap .ip_text_wrap textarea {
  width: 100%;
  border: 1px solid #A5A5A5;
  line-height: 1.4 !important;
  height: 228px;
  min-height: 145px;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 18px !important;
  color: #000 !important;
  padding: 10px !important;
  outline: none;
  resize: vertical;
}
.ip_textarea_wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
}
.ip_textarea_wrap p {
  margin-top: 3px;
  color: #999;
  font-size: 12px;
  line-height: 16px;
}
.ip_popup_rubric {
  margin-top: 20px !important;
}
.ip_popup_rubric .ip_popup_rubric_title {
  font-size: 15px;
  font-weight: 600;
  line-height: 23px;
  color: #333;
  margin-bottom: 10px;
  display: block;
}
.ip_popup_rubric .ip_popup_rubric_img {
  background: url(offer_sprite.png) no-repeat;
  display: block;
  width: 32px;
  height: 32px;
  margin-right: 8px;
  background-position: -85px -85px;
  position: relative;
}
.ip_popup_rubric .ip_popup_rubric_input_wrap {
  display: flex;
  align-items: center;
}
.ip_popup_rubric .ip_popup_rubric_input_wrap select {
  padding: 0 0 0 8px;
  height: 25px;
  border: 1px solid #A5A5A5;
  border-radius: 2px;
  background-clip: padding-box;
  text-decoration: none;
  white-space: nowrap;
  outline: none;
  background: white;
  font-size: 12px;
  font-family: 'Open Sans', sans-serif;
  height: 32px !important;
  padding-top: 3px !important;
  width: 307px;
  font-size: 15px;
  line-height: 24px;
}
.ip_popup_inputs_bottom_wrap {
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
}
.ip_popup_inputs_bottom_wrap .ip_popup_inputs_price_wrap {
  display: flex;
  align-items: center;
  font-size: 15px;
  line-height: 23px;
}
.ip_popup_inputs_bottom_wrap .ip_popup_inputs_price_wrap select {
  padding: 0 0 0 8px;
  height: 25px;
  border: 1px solid #A5A5A5;
  border-radius: 2px;
  background-clip: padding-box;
  text-decoration: none;
  white-space: nowrap;
  outline: none;
  background: white;
  font-size: 12px;
  font-family: 'Open Sans', sans-serif;
  height: 32px !important;
  padding-top: 3px !important;
  width: 122px;
  font-size: 15px;
  line-height: 24px;
  margin-left: 10px;
}
.ip_popup_inputs_bottom_wrap .ip_popup_inputs_price_wrap input {
  font-size: 14px !important;
  line-height: 20px !important;
  width: 175px;
  height: 32px;
  padding: 15px;
  color: #000;
  background-color: #fff;
  border: 1px solid #A5A5A5;
  border-radius: 3px;
  box-shadow: none;
  box-sizing: border-box;
  margin-left: 10px;
}
.ip_popup_inputs_bottom_wrap .ip_popup_inputs_price_wrap .ip_popup_inputs_price_wrap_img {
  background: url(offer_sprite.png) no-repeat;
  display: block;
  width: 32px;
  height: 32px;
  margin-right: 8px;
  position: relative;
  top: -1px;
  background-position: -5px -5px;
}
.ip_popup_line {
  margin: 15px 0;
  height: 0;
  border: none;
  width: 100%;
  border-top: 1px solid #e8e8e8;
}
.ip_popup_btn_cancel {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 320.5px;
  margin: 0!important;
  padding: 0!important;
  text-decoration: none;
  border: 1px solid #ebebeb;
  font-size: 18px;
  line-height: 30px;
  text-align: center;
  border-radius: 3px;
  padding: 0 15px;
  box-sizing: border-box;
  cursor: pointer;
  color: #000;
  background: #ffffff;
  background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f6f6f6));
  background: -webkit-linear-gradient(top, #ffffff 0%, #f6f6f6 100%);
  background: -o-linear-gradient(top, #ffffff 0%, #f6f6f6 100%);
  background: -ms-linear-gradient(top, #ffffff 0%, #f6f6f6 100%);
  background: linear-gradient(to bottom, #ffffff 0%, #f6f6f6 100%);
}
.ip_popup_btns {
  display: flex;
  justify-content: space-between;
}
.ip_popup_btn_go {
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  font-size: 18px;
  width: 50%;
  line-height: 30px;
  text-align: center;
  border-radius: 3px;
  padding: 0 14px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
  background: #fff;
  background: -o-linear-gradient(top, #ffffff 0, #f6f6f6 100%);
  background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f6f6f6));
  background: linear-gradient(180deg, #ffffff 0, #f6f6f6);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#f6f6f6", GradientType=0);
  background: #87b948;
  background: -o-linear-gradient(top, #87b948 0, #5da042 100%);
  background: -webkit-gradient(linear, left top, left bottom, from(#87b948), to(#5da042));
  background: linear-gradient(180deg, #87b948 0, #5da042);
}
.ip_popup_inputs_time_wrap_img {
  background: url(offer_sprite.png) no-repeat;
  display: block;
  width: 32px;
  height: 32px;
  margin-right: 8px;
  position: relative;
  top: -1px;
  background-position: -45px -5px;
}
@media screen and (max-width: 600px) {
  .chat_search {
    display: none;
  }
  .chat_search_wrap_mob {
    display: none;
  }
  .chat_list_wrap {
    width: 100%;
    border-right: none;
  }
  .chat_wrap {
    border-radius: 0;
  }
  .chat_wrap {
    height: 100vh;
    margin-top: 0;
  }
}
.chat__conversation-empty {
    color: #111;
    padding-bottom: 72px;
}
.chat__conversation-empty {
    position: absolute;
    left: 60%;
    top: 60%;
    width: 340px;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    text-align: center;
    color: #8a8a8a;
}
.chat__conversation-empty img {
    display: block;
    margin: 0 auto;
}
.chat__conversation-empty-title {
    margin: 16px 0 0;
    font-size: 18px!important;
    line-height: 24px;
    font-weight: 600;
    color: #111;
    padding: 5px 0 3px;
}
.chat__conversation-empty-title {
    margin: 2px 0 16px;
    font-weight: 600;
    font-size: 30px;
    line-height: 100%;
    color: #555;
}

.chat_messages_block_new {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.chat_messages_block_new_block {
  margin-top: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1.2rem;
    font-weight: 600;
}

</style>

<div class="container">
  <div class="chat_wrap">
    <div class="chat_list_wrap">
      <div class="chat_search">
        <div class='fake_wrap_input'>
          <div class="fake_input_placeholder">
          <img src="https://img.icons8.com/metro/26/000000/search.png"/ style="width: 13px">
            <span>Поиск</span>
          </div>
          <input type="" name="" id="search_input">

        </div>
          <svg class='sound_check' xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
            width="24" height="24"
            viewBox="0 0 172 172"
            style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#8a8a8a"><path d="M19.61735,14.27734c-2.18814,0.00053 -4.1576,1.32735 -4.98005,3.35504c-0.82245,2.02769 -0.33375,4.35156 1.23575,5.87624l33.82471,33.82471h-15.65609c-8.88667,0 -16.125,7.23833 -16.125,16.125v25.08333c0,8.88667 7.23833,16.125 16.125,16.125h23.71859l33.04085,29.38053c1.89917,1.68417 4.22693,2.54752 6.62777,2.54752c1.3975,0 2.79556,-0.28667 4.15723,-0.89583c3.655,-1.64833 5.9139,-5.1628 5.9139,-9.1403v-21.42302l40.95638,40.95638c1.34815,1.40414 3.35005,1.96976 5.23366,1.47871c1.88361,-0.49105 3.35459,-1.96203 3.84563,-3.84564c0.49105,-1.88361 -0.07457,-3.88552 -1.47871,-5.23366l-132.58333,-132.58333c-1.01222,-1.0424 -2.4033,-1.63064 -3.85628,-1.6307zM97.35889,25.39827c-2.36416,0.0196 -4.67653,0.89723 -6.55778,2.55452l-21.21305,18.88249l37.91195,37.91195v-49.30583c0,-3.9775 -2.2589,-7.49197 -5.9139,-9.1403c-1.37063,-0.61813 -2.80872,-0.91459 -4.22721,-0.90283zM138.46224,43.02099c-0.69483,0.05599 -1.38966,0.24748 -2.04362,0.58789c-2.65167,1.36167 -3.65724,4.62082 -2.29557,7.23665c11.21583,21.42833 12.25808,42.32448 3.15641,63.68115l8.09749,8.09749c12.1475,-25.4775 11.57249,-51.27806 -1.72168,-76.71973c-1.02125,-1.98875 -3.10854,-3.05143 -5.19303,-2.88347zM122.5612,60.95866c-0.70099,0.02016 -1.41178,0.18337 -2.09261,0.49691c-2.6875,1.25417 -3.86384,4.40834 -2.64551,7.13167c4.44333,9.71083 5.19107,19.16831 2.28857,28.77165l8.38444,8.38444c5.73333,-13.83167 5.44667,-27.80359 -0.89583,-41.63526c-0.91375,-2.01562 -2.93609,-3.20988 -5.03906,-3.14941z"></path></g></g></svg>
      </div>
      <div class="chat_search_wrap_mob">
        <span class="chat_search_wrap_mob_title">Чат</span>
        <div class="hide_seatch_input_wrap">
          <div class="hide_seatch_input">
            <img src="https://img.icons8.com/metro/26/000000/search.png"/ style="width: 15px">
            <input type="text" name="" placeholder="Поиск по логинам или сообщениям">
          </div>
        </div>
        <div class="chat_btns">
          <img src="https://img.icons8.com/metro/26/000000/search.png"/ style="width: 18px" class="search_trigger">
          <svg class='sound_check' xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
            width="24" height="24"
            viewBox="0 0 172 172"
            style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#8a8a8a"><path d="M19.61735,14.27734c-2.18814,0.00053 -4.1576,1.32735 -4.98005,3.35504c-0.82245,2.02769 -0.33375,4.35156 1.23575,5.87624l33.82471,33.82471h-15.65609c-8.88667,0 -16.125,7.23833 -16.125,16.125v25.08333c0,8.88667 7.23833,16.125 16.125,16.125h23.71859l33.04085,29.38053c1.89917,1.68417 4.22693,2.54752 6.62777,2.54752c1.3975,0 2.79556,-0.28667 4.15723,-0.89583c3.655,-1.64833 5.9139,-5.1628 5.9139,-9.1403v-21.42302l40.95638,40.95638c1.34815,1.40414 3.35005,1.96976 5.23366,1.47871c1.88361,-0.49105 3.35459,-1.96203 3.84563,-3.84564c0.49105,-1.88361 -0.07457,-3.88552 -1.47871,-5.23366l-132.58333,-132.58333c-1.01222,-1.0424 -2.4033,-1.63064 -3.85628,-1.6307zM97.35889,25.39827c-2.36416,0.0196 -4.67653,0.89723 -6.55778,2.55452l-21.21305,18.88249l37.91195,37.91195v-49.30583c0,-3.9775 -2.2589,-7.49197 -5.9139,-9.1403c-1.37063,-0.61813 -2.80872,-0.91459 -4.22721,-0.90283zM138.46224,43.02099c-0.69483,0.05599 -1.38966,0.24748 -2.04362,0.58789c-2.65167,1.36167 -3.65724,4.62082 -2.29557,7.23665c11.21583,21.42833 12.25808,42.32448 3.15641,63.68115l8.09749,8.09749c12.1475,-25.4775 11.57249,-51.27806 -1.72168,-76.71973c-1.02125,-1.98875 -3.10854,-3.05143 -5.19303,-2.88347zM122.5612,60.95866c-0.70099,0.02016 -1.41178,0.18337 -2.09261,0.49691c-2.6875,1.25417 -3.86384,4.40834 -2.64551,7.13167c4.44333,9.71083 5.19107,19.16831 2.28857,28.77165l8.38444,8.38444c5.73333,-13.83167 5.44667,-27.80359 -0.89583,-41.63526c-0.91375,-2.01562 -2.93609,-3.20988 -5.03906,-3.14941z"></path></g></g></svg>
        </div>
      </div>
      <div class="chat_list_items">
        <!-- BEGIN: DS_ROW -->
        <div class="chat_list_item">
          <div class="chat_list_item_avatar">
            <img src="<!-- IF {DS_OPPONENT_AVATAR_SRC} -->{DS_OPPONENT_AVATAR_SRC}<!-- ELSE -->themes/itbirja/files/avatar/medium/noprofilepicture.gif<!-- ENDIF -->" class="avatar rounded dib v-align-m" alt="{DS_OPPONENT_NICKNAME}" height="50" width="50">
          </div>
          <div class="chat_list_item_content">
            <div class="chat_list_item_content_row">
              <div class="chat_list_item_name">
                <span class="<!-- IF {DS_NEW_CNT} > 0 -->bold<!-- ENDIF -->">
                  {DS_OPPONENT_NICKNAME}
                </span>
                <span class="js-user-online-block" data-user-id="{DS_OPPONENT_ID}" data-is-online="<!-- IF {DS_OPPONENT_ONLINE} == 1 -->true<!-- ELSE -->false<!-- ENDIF -->" data-darktheme="true">
                  <i class="icon ico-<!-- IF {DS_OPPONENT_ONLINE} == 1 -->online<!-- ELSE -->offlineDark<!-- ENDIF --> js-online-icon"></i>
                </span>
                <!-- <span class="dialog-preview__new-count"<!-- IF !{DS_NEW_CNT} --> style="display: none;"<!-- ENDIF -->>{DS_NEW_CNT}</span> -->
                &nbsp;
              </div>
              <div class="d-flex">
                <span class="chat_list_item_date">{}</span>
                <div class="chat__list-star tooltipstered"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 2.09745L9.83036 5.67374L9.9417 5.89127L10.1817 5.93708L14.0297 6.67139L11.3118 9.66048L11.1563 9.83149L11.1859 10.0607L11.7097 14.1274L8.22587 12.3634L8 12.249L7.77414 12.3634L4.2903 14.1274L4.81414 10.0607L4.84367 9.83149L4.68817 9.66048L1.97027 6.67139L5.81827 5.93708L6.0583 5.89127L6.16964 5.67374L8 2.09745Z"></path></svg></div>
              </div>
            </div>
            <div class="chat_list_item_content_row row-wrap">
              <div class="ellipsis">
                <!-- IF {PHP.type} == 'important' -->
                <svg title="Пометить как важное" class="message__star" onclick="var tmstar=$(this);$.get('index.php?e=ds&m=impotrant&id={DS_MSG_ID}',function(data){if(data=='2'){tmstar.closest('tr').addClass('_msg_in_star');}else{tmstar.closest('tr').removeClass('_msg_in_star');}});" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18">
                  <defs>
                    <path id="uo60a" d="M534.33 442.2l1.78 4.43 4.56.41c.32.03.45.44.2.66l-3.45 3.15 1.03 4.69c.08.32-.26.58-.53.4l-3.92-2.48-3.92 2.48c-.27.18-.6-.08-.53-.4l1.03-4.69-3.46-3.15c-.24-.22-.1-.63.2-.66l4.57-.41 1.78-4.43c.12-.3.54-.3.66 0z"/>
                  </defs>
                  <g>
                    <g transform="translate(-525 -440)">
                      <use fill="#d7d7db" xlink:href="#uo60a"/>
                    </g>
                  </g>
                </svg>
                <!-- ENDIF -->
                <a href="{DS_DIAOG_URL}">{DS_TEXT}</a>
                <!-- IF !{DS_STATUS} AND 1 == 2 -->
                  <span class="dialog-preview__readed">✓</span>
                <!-- ENDIF -->
              </div>
              <!-- IF {DS_NEW_OF_LAST20DAY_MSG} -->
              <i class="color-red db f12 f-normal">Требуется обязательный ответ в течение {PHP.cfg.ds.waitanswer24hour_time.title.r} <span style="border-bottom:1px dashed;cursor:pointer;" class="tooltipster" data-tooltip-text="<span style='font-style:initial;'>Покупатели надеются на быстрый ответ. Чем быстрее вы отвечаете, тем выше шанс продать услугу. Если вы несколько раз подряд не отвечаете на новые обращения покупателей, то {PHP|cot_sitename('padeg', '_i')} блокируются на несколько дней.<br><br>Внимание! Требование обязательного ответа действует только на <b>первое</b> личное сообщение или индивидуальный заказ от нового покупателя (или того, с которым вы не переписывались более 20 дней).</span>">Почему?</span></i>
              <!-- ENDIF -->
            </div>
          </div>
        </div>
        <!-- ENDIF -->
        <!-- END: DS_ROW -->
      </div>
    </div>
    <div class="chat_messages_block not-show">
      <div class="chat_messages_block_head">
        <div style="display: flex;">
          <div class="chat_messages_block_head_avatar">
            <span>V</span>
            <div class="online_status"></div>
          </div>
          <div class="chat_messages_block_user_info">
            <div class="chat_messages_block_user_info_top">
              <div class="chat_messages_block_user_info_name">userName</div>
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.55597 3.32285L7.07345 2L5.76434 2.5513C3.56214 3.47869 2 5.58396 2 8.05807C2 11.4114 4.85789 14.076 8.31497 14.076C10.2058 14.076 11.9094 13.2829 13.0699 12.0186L14.0635 10.9361L12.5962 11.0137C12.4819 11.0198 12.3667 11.0228 12.2506 11.0228C8.86907 11.0228 6.18315 8.43173 6.18315 5.30196C6.18315 4.60558 6.31486 3.93921 6.55597 3.32285ZM3.2 8.05807C3.2 6.57469 3.91443 5.23617 5.05173 4.34774C5.00652 4.65977 4.98315 4.97834 4.98315 5.30196C4.98315 8.75965 7.62942 11.5862 11.052 12.1288C10.2622 12.6011 9.32417 12.876 8.31497 12.876C5.45947 12.876 3.2 10.6891 3.2 8.05807Z" fill="#A5A5A5"/>
              </svg>
              <div class="online_time_last">20:02</div>
            </div>
            <div class="chat_messages_block_user_info_online_time">Офлайн 19ч.</div>
          </div>
        </div>
        <div class="chat_messages_block_btns">
          <div class="chat_messages_block_btns_orders">
            <svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="8" fill="white"></circle> <path d="M7.99933 10.8284L7.99933 5.17157" stroke="#04B70A" stroke-width="1.2" stroke-linecap="round"></path> <path d="M10.8284 8.00006L5.17157 8.00006" stroke="#04B70A" stroke-width="1.2" stroke-linecap="round"></path></svg>	
            <span>Заказ</span>
          </div>
          <div class="files_btn">
            <span class="files_btn_circle"></span>
            <span class="files_btn_circle"></span>
            <span class="files_btn_circle"></span>
            <div class="files_btn_items">
              <div class="files_btn_item">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" class="kwork-conversation__header-menu-icon"><path fill="#fff" d="M0 0h24v24H0z"></path><g clip-path="url(#chat-menu-trash)"><path d="M15.272 7.703v8.655c0 1.7-1.252 3.23-2.953 3.395-1.955.188-3.59-1.342-3.59-3.256V6.386c0-1.072.77-2.045 1.832-2.152 1.227-.123 2.258.834 2.258 2.037v8.6a.82.82 0 0 1-.818.818.82.82 0 0 1-.818-.818V7.703a.62.62 0 0 0-.614-.614.62.62 0 0 0-.614.614v7.044c0 1.072.77 2.045 1.832 2.15 1.227.123 2.258-.834 2.258-2.037V6.41c0-1.7-1.252-3.23-2.953-3.395A3.27 3.27 0 0 0 7.5 6.272V16.31c0 2.348 1.718 4.45 4.058 4.67 2.69.245 4.94-1.85 4.94-4.483V7.703a.62.62 0 0 0-.614-.614.62.62 0 0 0-.614.614z" fill="#a5a5a5" class="gray"></path></g><defs><clipPath id="chat-menu-trash"><path fill="#fff" transform="translate(3 3)" d="M0 0h18v18H0z"></path></clipPath></defs></svg>
                <span>Файлы</span>
                <span class="col_files">(1)</span>
              </div>
              <div class="files_btn_item">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" class="kwork-conversation__header-menu-icon"><path fill="#fff" d="M0 0h24v24H0z"></path><path d="M14.5 5.75V4.5h-5v1.25H5.75V7h12.5V5.75H14.5zM7 8.25v8.842c0 .816.433 1.158 1.25 1.158h7.5c.817 0 1.25-.342 1.25-1.158V8.25H7zm3.75 7.5H9.5v-5h1.25v5zm3.75 0h-1.25v-5h1.25v5z" fill="#a5a5a5" class="gray"></path></svg>
                <span>Удалить чат</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="messages_block_content not-show js-msg-block">
        <div class="messages_block_content_message_item">
          <div class="messages_block_content_message_item_head">
            <div class="msbc_left"> 
              <div class="chat_messages_block_head_avatar"><span>v</span></div>
              <div class="messages_block_content_user_name">userName</div>
            </div>
            <div class="msbc_right">
              <svg class='quote_btn' xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
              width="18px" height="18px"
              viewBox="0 0 172 172"
              style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#8a8a88"><path d="M48.375,35.83333c-16.82167,0 -30.45833,13.63666 -30.45833,30.45833c0,16.82167 13.63666,30.45833 30.45833,30.45833c6.12587,-0.00168 12.10889,-1.85049 17.16781,-5.30501c-3.113,13.2702 -8.64719,22.51699 -14.09538,28.91862c-8.20228,9.63768 -15.81706,12.60465 -15.81706,12.60465c-1.82928,0.68015 -3.14622,2.29832 -3.44063,4.22762c-0.29441,1.92929 0.47997,3.8666 2.02313,5.06138c1.54316,1.19478 3.61266,1.45933 5.40675,0.69115c0,0 10.30189,-4.19969 20.01627,-15.6141c9.71439,-11.4144 19.19743,-30.32423 19.19743,-59.25098c0.00049,-0.2623 -0.01823,-0.52429 -0.05599,-0.78385c0.27285,-8.24151 -2.80756,-16.24148 -8.53727,-22.17168c-5.72972,-5.9302 -13.61905,-9.28382 -21.86507,-9.29447zM123.625,35.83333c-16.82167,0 -30.45833,13.63666 -30.45833,30.45833c0,16.82167 13.63666,30.45833 30.45833,30.45833c6.12587,-0.00168 12.10889,-1.85049 17.16781,-5.30501c-3.113,13.2702 -8.64719,22.51699 -14.09538,28.91862c-8.20228,9.63768 -15.81706,12.60465 -15.81706,12.60465c-1.82927,0.68015 -3.14621,2.29832 -3.44062,4.22762c-0.29441,1.92929 0.47997,3.86659 2.02313,5.06137c1.54316,1.19478 3.61266,1.45933 5.40674,0.69115c0,0 10.30189,-4.19969 20.01627,-15.6141c9.71439,-11.4144 19.19743,-30.32423 19.19743,-59.25098c0.00049,-0.2623 -0.01823,-0.52429 -0.05599,-0.78385c0.27285,-8.24151 -2.80756,-16.24148 -8.53727,-22.17168c-5.72972,-5.9302 -13.61905,-9.28382 -21.86507,-9.29447z"></path></g></g></svg>
              <svg xmlns="http://www.w3.org/2000/svg" class='claim_btn' x="0px" y="0px" width="20" height="20" viewBox="0 0 172 172" style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#8a8a88"><path d="M123.238,21.5h-74.476l-37.23083,64.5l37.23083,64.5h74.48317l37.23083,-64.5zM93.16667,121.83333h-14.33333v-14.33333h14.33333zM93.16667,93.16667h-14.33333v-43h14.33333z"></path></g></g></svg>
              <svg xmlns="http://www.w3.org/2000/svg" class='message_read_status' width="16" height="16" fill="none"><g clip-path="url(#A)"><path d="M.5 9l3 3L10 4.5m5 0L8.5 12 7 10.5" stroke="#a5a5a5" stroke-width="1.6"/></g><defs><clipPath id="A"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
              <div class="msbc_right_time">14:34</div>
            </div>
          </div>
          <p class="messages_block_content_message_text">Вёрстка будет семантически верной, разбитой по заголовкам, артиклям, правильно составлены заголовки, описания страниц и мета-теги</p>
        </div>
        <div class="messages_block_content_message_item">
          
          <div class="messages_block_content_message_item_head">
            <div class="msbc_left"> 
              <div class="chat_messages_block_head_avatar" style="background: red"><span>я</span></div>
              <div class="messages_block_content_user_name">пользователь</div>
            </div>
            <div class="msbc_right">
              <svg class='quote_btn' xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
              width="18px" height="18px"
              viewBox="0 0 172 172"
              style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#8a8a88"><path d="M48.375,35.83333c-16.82167,0 -30.45833,13.63666 -30.45833,30.45833c0,16.82167 13.63666,30.45833 30.45833,30.45833c6.12587,-0.00168 12.10889,-1.85049 17.16781,-5.30501c-3.113,13.2702 -8.64719,22.51699 -14.09538,28.91862c-8.20228,9.63768 -15.81706,12.60465 -15.81706,12.60465c-1.82928,0.68015 -3.14622,2.29832 -3.44063,4.22762c-0.29441,1.92929 0.47997,3.8666 2.02313,5.06138c1.54316,1.19478 3.61266,1.45933 5.40675,0.69115c0,0 10.30189,-4.19969 20.01627,-15.6141c9.71439,-11.4144 19.19743,-30.32423 19.19743,-59.25098c0.00049,-0.2623 -0.01823,-0.52429 -0.05599,-0.78385c0.27285,-8.24151 -2.80756,-16.24148 -8.53727,-22.17168c-5.72972,-5.9302 -13.61905,-9.28382 -21.86507,-9.29447zM123.625,35.83333c-16.82167,0 -30.45833,13.63666 -30.45833,30.45833c0,16.82167 13.63666,30.45833 30.45833,30.45833c6.12587,-0.00168 12.10889,-1.85049 17.16781,-5.30501c-3.113,13.2702 -8.64719,22.51699 -14.09538,28.91862c-8.20228,9.63768 -15.81706,12.60465 -15.81706,12.60465c-1.82927,0.68015 -3.14621,2.29832 -3.44062,4.22762c-0.29441,1.92929 0.47997,3.86659 2.02313,5.06137c1.54316,1.19478 3.61266,1.45933 5.40674,0.69115c0,0 10.30189,-4.19969 20.01627,-15.6141c9.71439,-11.4144 19.19743,-30.32423 19.19743,-59.25098c0.00049,-0.2623 -0.01823,-0.52429 -0.05599,-0.78385c0.27285,-8.24151 -2.80756,-16.24148 -8.53727,-22.17168c-5.72972,-5.9302 -13.61905,-9.28382 -21.86507,-9.29447z"></path></g></g></svg>

              <svg xmlns="http://www.w3.org/2000/svg" class='message_read_status' width="16" height="16" fill="none"><g clip-path="url(#A)"><path d="M.5 9l3 3L10 4.5m5 0L8.5 12 7 10.5" stroke="#a5a5a5" stroke-width="1.6"/></g><defs><clipPath id="A"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
              <div class="msbc_right_time">14:34</div>
            </div>
          </div>
          <p class="messages_block_content_message_text">Вёрстка будет семантически верной, разбитой по заголовкам, артиклям, правильно составлены заголовки, описания страниц и мета-теги</p>
        </div>
        <div class="messages_block_content_message_item">
          
          <div class="messages_block_content_message_item_head">
            <div class="msbc_left"> 
              <div class="chat_messages_block_head_avatar"><span>v</span></div>
              <div class="messages_block_content_user_name">userName</div>
            </div>
            <div class="msbc_right">
              <svg class='quote_btn' xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
              width="18px" height="18px"
              viewBox="0 0 172 172"
              style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#8a8a88"><path d="M48.375,35.83333c-16.82167,0 -30.45833,13.63666 -30.45833,30.45833c0,16.82167 13.63666,30.45833 30.45833,30.45833c6.12587,-0.00168 12.10889,-1.85049 17.16781,-5.30501c-3.113,13.2702 -8.64719,22.51699 -14.09538,28.91862c-8.20228,9.63768 -15.81706,12.60465 -15.81706,12.60465c-1.82928,0.68015 -3.14622,2.29832 -3.44063,4.22762c-0.29441,1.92929 0.47997,3.8666 2.02313,5.06138c1.54316,1.19478 3.61266,1.45933 5.40675,0.69115c0,0 10.30189,-4.19969 20.01627,-15.6141c9.71439,-11.4144 19.19743,-30.32423 19.19743,-59.25098c0.00049,-0.2623 -0.01823,-0.52429 -0.05599,-0.78385c0.27285,-8.24151 -2.80756,-16.24148 -8.53727,-22.17168c-5.72972,-5.9302 -13.61905,-9.28382 -21.86507,-9.29447zM123.625,35.83333c-16.82167,0 -30.45833,13.63666 -30.45833,30.45833c0,16.82167 13.63666,30.45833 30.45833,30.45833c6.12587,-0.00168 12.10889,-1.85049 17.16781,-5.30501c-3.113,13.2702 -8.64719,22.51699 -14.09538,28.91862c-8.20228,9.63768 -15.81706,12.60465 -15.81706,12.60465c-1.82927,0.68015 -3.14621,2.29832 -3.44062,4.22762c-0.29441,1.92929 0.47997,3.86659 2.02313,5.06137c1.54316,1.19478 3.61266,1.45933 5.40674,0.69115c0,0 10.30189,-4.19969 20.01627,-15.6141c9.71439,-11.4144 19.19743,-30.32423 19.19743,-59.25098c0.00049,-0.2623 -0.01823,-0.52429 -0.05599,-0.78385c0.27285,-8.24151 -2.80756,-16.24148 -8.53727,-22.17168c-5.72972,-5.9302 -13.61905,-9.28382 -21.86507,-9.29447z"></path></g></g></svg>
              <svg xmlns="http://www.w3.org/2000/svg" class='claim_btn' x="0px" y="0px" width="20" height="20" viewBox="0 0 172 172" style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#8a8a88"><path d="M123.238,21.5h-74.476l-37.23083,64.5l37.23083,64.5h74.48317l37.23083,-64.5zM93.16667,121.83333h-14.33333v-14.33333h14.33333zM93.16667,93.16667h-14.33333v-43h14.33333z"></path></g></g></svg>
              <svg xmlns="http://www.w3.org/2000/svg" class='message_read_status' width="16" height="16" fill="none"><g clip-path="url(#A)"><path d="M.5 9l3 3L10 4.5m5 0L8.5 12 7 10.5" stroke="#a5a5a5" stroke-width="1.6"/></g><defs><clipPath id="A"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
              <div class="msbc_right_time">14:34</div>
            </div>
          </div>
          <p class="messages_block_content_message_text">Вёрстка будет семантически верной, разбитой по заголовкам, артиклям, правильно составлены заголовки, описания страниц и мета-теги</p>
        </div>
        <div class="messages_block_content_message_item">
          
          <div class="messages_block_content_message_item_head">
            <div class="msbc_left"> 
              <div class="chat_messages_block_head_avatar" style="background: red"><span>я</span></div>
              <div class="messages_block_content_user_name">пользователь</div>
            </div>
            <div class="msbc_right">
              <svg class='quote_btn' xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
              width="18px" height="18px"
              viewBox="0 0 172 172"
              style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#8a8a88"><path d="M48.375,35.83333c-16.82167,0 -30.45833,13.63666 -30.45833,30.45833c0,16.82167 13.63666,30.45833 30.45833,30.45833c6.12587,-0.00168 12.10889,-1.85049 17.16781,-5.30501c-3.113,13.2702 -8.64719,22.51699 -14.09538,28.91862c-8.20228,9.63768 -15.81706,12.60465 -15.81706,12.60465c-1.82928,0.68015 -3.14622,2.29832 -3.44063,4.22762c-0.29441,1.92929 0.47997,3.8666 2.02313,5.06138c1.54316,1.19478 3.61266,1.45933 5.40675,0.69115c0,0 10.30189,-4.19969 20.01627,-15.6141c9.71439,-11.4144 19.19743,-30.32423 19.19743,-59.25098c0.00049,-0.2623 -0.01823,-0.52429 -0.05599,-0.78385c0.27285,-8.24151 -2.80756,-16.24148 -8.53727,-22.17168c-5.72972,-5.9302 -13.61905,-9.28382 -21.86507,-9.29447zM123.625,35.83333c-16.82167,0 -30.45833,13.63666 -30.45833,30.45833c0,16.82167 13.63666,30.45833 30.45833,30.45833c6.12587,-0.00168 12.10889,-1.85049 17.16781,-5.30501c-3.113,13.2702 -8.64719,22.51699 -14.09538,28.91862c-8.20228,9.63768 -15.81706,12.60465 -15.81706,12.60465c-1.82927,0.68015 -3.14621,2.29832 -3.44062,4.22762c-0.29441,1.92929 0.47997,3.86659 2.02313,5.06137c1.54316,1.19478 3.61266,1.45933 5.40674,0.69115c0,0 10.30189,-4.19969 20.01627,-15.6141c9.71439,-11.4144 19.19743,-30.32423 19.19743,-59.25098c0.00049,-0.2623 -0.01823,-0.52429 -0.05599,-0.78385c0.27285,-8.24151 -2.80756,-16.24148 -8.53727,-22.17168c-5.72972,-5.9302 -13.61905,-9.28382 -21.86507,-9.29447z"></path></g></g></svg>

              <svg xmlns="http://www.w3.org/2000/svg" class='message_read_status' width="16" height="16" fill="none"><g clip-path="url(#A)"><path d="M.5 9l3 3L10 4.5m5 0L8.5 12 7 10.5" stroke="#a5a5a5" stroke-width="1.6"/></g><defs><clipPath id="A"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
              <div class="msbc_right_time">14:34</div>
            </div>
          </div>
          <p class="messages_block_content_message_text">Вёрстка будет семантически верной, разбитой по заголовкам, артиклям, правильно составлены заголовки, описания страниц и мета-теги</p>
        </div>
        <div class="messages_block_content_message_item">
          <div class="messages_block_content_message_item_head">
            <div class="msbc_left"> 
              <div class="chat_messages_block_head_avatar"><span>v</span></div>
              <div class="messages_block_content_user_name">userName</div>
            </div>
            <div class="msbc_right">
              <svg class='quote_btn' xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
              width="18px" height="18px"
              viewBox="0 0 172 172"
              style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#8a8a88"><path d="M48.375,35.83333c-16.82167,0 -30.45833,13.63666 -30.45833,30.45833c0,16.82167 13.63666,30.45833 30.45833,30.45833c6.12587,-0.00168 12.10889,-1.85049 17.16781,-5.30501c-3.113,13.2702 -8.64719,22.51699 -14.09538,28.91862c-8.20228,9.63768 -15.81706,12.60465 -15.81706,12.60465c-1.82928,0.68015 -3.14622,2.29832 -3.44063,4.22762c-0.29441,1.92929 0.47997,3.8666 2.02313,5.06138c1.54316,1.19478 3.61266,1.45933 5.40675,0.69115c0,0 10.30189,-4.19969 20.01627,-15.6141c9.71439,-11.4144 19.19743,-30.32423 19.19743,-59.25098c0.00049,-0.2623 -0.01823,-0.52429 -0.05599,-0.78385c0.27285,-8.24151 -2.80756,-16.24148 -8.53727,-22.17168c-5.72972,-5.9302 -13.61905,-9.28382 -21.86507,-9.29447zM123.625,35.83333c-16.82167,0 -30.45833,13.63666 -30.45833,30.45833c0,16.82167 13.63666,30.45833 30.45833,30.45833c6.12587,-0.00168 12.10889,-1.85049 17.16781,-5.30501c-3.113,13.2702 -8.64719,22.51699 -14.09538,28.91862c-8.20228,9.63768 -15.81706,12.60465 -15.81706,12.60465c-1.82927,0.68015 -3.14621,2.29832 -3.44062,4.22762c-0.29441,1.92929 0.47997,3.86659 2.02313,5.06137c1.54316,1.19478 3.61266,1.45933 5.40674,0.69115c0,0 10.30189,-4.19969 20.01627,-15.6141c9.71439,-11.4144 19.19743,-30.32423 19.19743,-59.25098c0.00049,-0.2623 -0.01823,-0.52429 -0.05599,-0.78385c0.27285,-8.24151 -2.80756,-16.24148 -8.53727,-22.17168c-5.72972,-5.9302 -13.61905,-9.28382 -21.86507,-9.29447z"></path></g></g></svg>
              <svg xmlns="http://www.w3.org/2000/svg" class='claim_btn' x="0px" y="0px" width="20" height="20" viewBox="0 0 172 172" style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#8a8a88"><path d="M123.238,21.5h-74.476l-37.23083,64.5l37.23083,64.5h74.48317l37.23083,-64.5zM93.16667,121.83333h-14.33333v-14.33333h14.33333zM93.16667,93.16667h-14.33333v-43h14.33333z"></path></g></g></svg>
              <svg xmlns="http://www.w3.org/2000/svg" class='message_read_status' width="16" height="16" fill="none"><g clip-path="url(#A)"><path d="M.5 9l3 3L10 4.5m5 0L8.5 12 7 10.5" stroke="#a5a5a5" stroke-width="1.6"/></g><defs><clipPath id="A"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
              <div class="msbc_right_time">14:34</div>
            </div>
          </div>
          <p class="messages_block_content_message_text">Вёрстка будет семантически верной, разбитой по заголовкам, артиклям, правильно составлены заголовки, описания страниц и мета-теги</p>
        </div>
        <div class="messages_block_content_message_item">
          <div class="messages_block_content_message_item_head">
            <div class="msbc_left"> 
              <div class="chat_messages_block_head_avatar" style="background: red"><span>я</span></div>
              <div class="messages_block_content_user_name">пользователь</div>
            </div>
            <div class="msbc_right">
              <svg class='quote_btn' xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
              width="18px" height="18px"
              viewBox="0 0 172 172"
              style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#8a8a88"><path d="M48.375,35.83333c-16.82167,0 -30.45833,13.63666 -30.45833,30.45833c0,16.82167 13.63666,30.45833 30.45833,30.45833c6.12587,-0.00168 12.10889,-1.85049 17.16781,-5.30501c-3.113,13.2702 -8.64719,22.51699 -14.09538,28.91862c-8.20228,9.63768 -15.81706,12.60465 -15.81706,12.60465c-1.82928,0.68015 -3.14622,2.29832 -3.44063,4.22762c-0.29441,1.92929 0.47997,3.8666 2.02313,5.06138c1.54316,1.19478 3.61266,1.45933 5.40675,0.69115c0,0 10.30189,-4.19969 20.01627,-15.6141c9.71439,-11.4144 19.19743,-30.32423 19.19743,-59.25098c0.00049,-0.2623 -0.01823,-0.52429 -0.05599,-0.78385c0.27285,-8.24151 -2.80756,-16.24148 -8.53727,-22.17168c-5.72972,-5.9302 -13.61905,-9.28382 -21.86507,-9.29447zM123.625,35.83333c-16.82167,0 -30.45833,13.63666 -30.45833,30.45833c0,16.82167 13.63666,30.45833 30.45833,30.45833c6.12587,-0.00168 12.10889,-1.85049 17.16781,-5.30501c-3.113,13.2702 -8.64719,22.51699 -14.09538,28.91862c-8.20228,9.63768 -15.81706,12.60465 -15.81706,12.60465c-1.82927,0.68015 -3.14621,2.29832 -3.44062,4.22762c-0.29441,1.92929 0.47997,3.86659 2.02313,5.06137c1.54316,1.19478 3.61266,1.45933 5.40674,0.69115c0,0 10.30189,-4.19969 20.01627,-15.6141c9.71439,-11.4144 19.19743,-30.32423 19.19743,-59.25098c0.00049,-0.2623 -0.01823,-0.52429 -0.05599,-0.78385c0.27285,-8.24151 -2.80756,-16.24148 -8.53727,-22.17168c-5.72972,-5.9302 -13.61905,-9.28382 -21.86507,-9.29447z"></path></g></g></svg>

              <svg xmlns="http://www.w3.org/2000/svg" class='message_read_status' width="16" height="16" fill="none"><g clip-path="url(#A)"><path d="M.5 9l3 3L10 4.5m5 0L8.5 12 7 10.5" stroke="#a5a5a5" stroke-width="1.6"/></g><defs><clipPath id="A"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
              <div class="msbc_right_time">14:34</div>
            </div>
          </div>
          <p class="messages_block_content_message_text">Вёрстка будет семантически верной, разбитой по заголовкам, артиклям, правильно составлены заголовки, описания страниц и мета-теги</p>
        </div>
        <div class="messages_block_content_message_item">
          
          <div class="messages_block_content_message_item_head">
            <div class="msbc_left"> 
              <div class="chat_messages_block_head_avatar"><span>v</span></div>
              <div class="messages_block_content_user_name">userName</div>
            </div>
            <div class="msbc_right">
              <svg class='quote_btn' xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
              width="18px" height="18px"
              viewBox="0 0 172 172"
              style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#8a8a88"><path d="M48.375,35.83333c-16.82167,0 -30.45833,13.63666 -30.45833,30.45833c0,16.82167 13.63666,30.45833 30.45833,30.45833c6.12587,-0.00168 12.10889,-1.85049 17.16781,-5.30501c-3.113,13.2702 -8.64719,22.51699 -14.09538,28.91862c-8.20228,9.63768 -15.81706,12.60465 -15.81706,12.60465c-1.82928,0.68015 -3.14622,2.29832 -3.44063,4.22762c-0.29441,1.92929 0.47997,3.8666 2.02313,5.06138c1.54316,1.19478 3.61266,1.45933 5.40675,0.69115c0,0 10.30189,-4.19969 20.01627,-15.6141c9.71439,-11.4144 19.19743,-30.32423 19.19743,-59.25098c0.00049,-0.2623 -0.01823,-0.52429 -0.05599,-0.78385c0.27285,-8.24151 -2.80756,-16.24148 -8.53727,-22.17168c-5.72972,-5.9302 -13.61905,-9.28382 -21.86507,-9.29447zM123.625,35.83333c-16.82167,0 -30.45833,13.63666 -30.45833,30.45833c0,16.82167 13.63666,30.45833 30.45833,30.45833c6.12587,-0.00168 12.10889,-1.85049 17.16781,-5.30501c-3.113,13.2702 -8.64719,22.51699 -14.09538,28.91862c-8.20228,9.63768 -15.81706,12.60465 -15.81706,12.60465c-1.82927,0.68015 -3.14621,2.29832 -3.44062,4.22762c-0.29441,1.92929 0.47997,3.86659 2.02313,5.06137c1.54316,1.19478 3.61266,1.45933 5.40674,0.69115c0,0 10.30189,-4.19969 20.01627,-15.6141c9.71439,-11.4144 19.19743,-30.32423 19.19743,-59.25098c0.00049,-0.2623 -0.01823,-0.52429 -0.05599,-0.78385c0.27285,-8.24151 -2.80756,-16.24148 -8.53727,-22.17168c-5.72972,-5.9302 -13.61905,-9.28382 -21.86507,-9.29447z"></path></g></g></svg>
              <svg xmlns="http://www.w3.org/2000/svg" class='claim_btn' x="0px" y="0px" width="20" height="20" viewBox="0 0 172 172" style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#8a8a88"><path d="M123.238,21.5h-74.476l-37.23083,64.5l37.23083,64.5h74.48317l37.23083,-64.5zM93.16667,121.83333h-14.33333v-14.33333h14.33333zM93.16667,93.16667h-14.33333v-43h14.33333z"></path></g></g></svg>
              <svg xmlns="http://www.w3.org/2000/svg" class='message_read_status' width="16" height="16" fill="none"><g clip-path="url(#A)"><path d="M.5 9l3 3L10 4.5m5 0L8.5 12 7 10.5" stroke="#a5a5a5" stroke-width="1.6"/></g><defs><clipPath id="A"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
              <div class="msbc_right_time">14:34</div>
            </div>
          </div>
          <p class="messages_block_content_message_text">Вёрстка будет семантически верной, разбитой по заголовкам, артиклям, правильно составлены заголовки, описания страниц и мета-теги</p>
        </div>
        <div class="messages_block_content_message_item">
          <div class="messages_block_content_message_item_head">
            <div class="msbc_left">
              <div class="chat_messages_block_head_avatar" style="background: red"><span>я</span></div>
              <div class="messages_block_content_user_name">пользователь</div>
            </div>
            <div class="msbc_right">
              <svg class='quote_btn' xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
              width="18px" height="18px"
              viewBox="0 0 172 172"
              style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#8a8a88"><path d="M48.375,35.83333c-16.82167,0 -30.45833,13.63666 -30.45833,30.45833c0,16.82167 13.63666,30.45833 30.45833,30.45833c6.12587,-0.00168 12.10889,-1.85049 17.16781,-5.30501c-3.113,13.2702 -8.64719,22.51699 -14.09538,28.91862c-8.20228,9.63768 -15.81706,12.60465 -15.81706,12.60465c-1.82928,0.68015 -3.14622,2.29832 -3.44063,4.22762c-0.29441,1.92929 0.47997,3.8666 2.02313,5.06138c1.54316,1.19478 3.61266,1.45933 5.40675,0.69115c0,0 10.30189,-4.19969 20.01627,-15.6141c9.71439,-11.4144 19.19743,-30.32423 19.19743,-59.25098c0.00049,-0.2623 -0.01823,-0.52429 -0.05599,-0.78385c0.27285,-8.24151 -2.80756,-16.24148 -8.53727,-22.17168c-5.72972,-5.9302 -13.61905,-9.28382 -21.86507,-9.29447zM123.625,35.83333c-16.82167,0 -30.45833,13.63666 -30.45833,30.45833c0,16.82167 13.63666,30.45833 30.45833,30.45833c6.12587,-0.00168 12.10889,-1.85049 17.16781,-5.30501c-3.113,13.2702 -8.64719,22.51699 -14.09538,28.91862c-8.20228,9.63768 -15.81706,12.60465 -15.81706,12.60465c-1.82927,0.68015 -3.14621,2.29832 -3.44062,4.22762c-0.29441,1.92929 0.47997,3.86659 2.02313,5.06137c1.54316,1.19478 3.61266,1.45933 5.40674,0.69115c0,0 10.30189,-4.19969 20.01627,-15.6141c9.71439,-11.4144 19.19743,-30.32423 19.19743,-59.25098c0.00049,-0.2623 -0.01823,-0.52429 -0.05599,-0.78385c0.27285,-8.24151 -2.80756,-16.24148 -8.53727,-22.17168c-5.72972,-5.9302 -13.61905,-9.28382 -21.86507,-9.29447z"></path></g></g></svg>
              <svg xmlns="http://www.w3.org/2000/svg" class='message_read_status' width="16" height="16" fill="none"><g clip-path="url(#A)"><path d="M.5 9l3 3L10 4.5m5 0L8.5 12 7 10.5" stroke="#a5a5a5" stroke-width="1.6"/></g><defs><clipPath id="A"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
              <div class="msbc_right_time">14:34</div>
            </div>
          </div>
          <p class="messages_block_content_message_text">Вёрстка будет семантически верной, разбитой по заголовкам, артиклям, правильно составлены заголовки, описания страниц и мета-теги</p>
        </div>
      </div>
      <div class="messages_block_message_write_block not-show">
        <div class="file_btn_send_wrap">
          <input type="file" name="" hidden>
          <svg class='file_btn_send' xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none"><g clip-path="url(#mf-add-files)"><path d="M20.363 10.27v11.54c0 2.28-1.67 4.308-3.938 4.527-2.607.25-4.788-1.79-4.788-4.34V8.515c0-1.43 1.025-2.727 2.443-2.87a2.73 2.73 0 0 1 3.011 2.716v11.453c0 .6-.49 1.09-1.09 1.09s-1.09-.49-1.09-1.09V10.27c0-.447-.37-.818-.818-.818s-.818.37-.818.818v9.39c0 1.43 1.025 2.727 2.443 2.87 1.636.164 3.01-1.112 3.01-2.716V8.548c0-2.28-1.67-4.308-3.938-4.527C12.193 3.77 10 5.8 10 8.362v13.384c0 3.13 2.29 5.934 5.4 6.228C19 28.3 22 25.51 22 21.997V10.27c0-.447-.37-.818-.818-.818s-.818.37-.818.818z" fill="#a5a5a5"></path></g><defs><clipPath id="mf-add-files"><path fill="#fff" transform="translate(4 4)" d="M0 0h24v24H0z"></path></clipPath></defs></svg>
        </div>
        <textarea placeholder="Введите сообщение"></textarea>
        <div class="emoji">
          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#a5a5a5"><path fill-rule="evenodd" d="M16 28c6.627 0 12-5.373 12-12S22.627 4 16 4 4 9.373 4 16s5.373 12 12 12zm0 2c7.732 0 14-6.268 14-14S23.732 2 16 2 2 8.268 2 16s6.268 14 14 14z"></path><path d="M13 15.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 1 1 3 0zm9 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 1 1 3 0z"></path><path fill-rule="evenodd" d="M20.383 20.9a1 1 0 0 1-.082 1.412c-1.228 1.093-2.74 1.687-4.294 1.688s-3.068-.59-4.297-1.678a1 1 0 0 1 1.327-1.497c.885.785 1.93 1.176 2.968 1.175s2.082-.395 2.967-1.182a1 1 0 0 1 1.412.082z"></path></svg>
        </div>
        <div class="send_btn">
          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none"><path class="inactive" fill-rule="evenodd" d="M8.79 6.214c-.488-1.465 1.07-2.77 2.427-2.03l20.054 10.94a1 1 0 0 1 0 1.756l-20.054 10.94c-1.355.74-2.915-.565-2.427-2.03l.827-2.482c.724-2.172 1.116-4.425 1.177-6.684L17 16l-6.207-.62c-.06-2.26-.453-4.512-1.177-6.684L8.79 6.214zm1.788-.328l.747 2.24c.66 1.982 1.065 4.026 1.213 6.084l8.967 1.223c.284.04.495.28.495.568s-.212.53-.495.567L12.537 17.8c-.148 2.058-.553 4.102-1.213 6.084l-.747 2.24L29.12 16 10.577 5.886z" fill="#a5a5a5" opacity=".48"></path><path class="active" d="M10.785 27.026L30.84 16.088a.1.1 0 0 0 0-.176L10.785 4.974c-.638-.348-1.372.266-1.142.955l.827 2.482a24 24 0 0 1 1.155 5.675l9.88 1.347c.284.04.495.28.495.568s-.212.53-.495.567l-9.88 1.347c-.154 1.92-.54 3.825-1.155 5.675l-.827 2.482c-.23.69.504 1.303 1.142.955z" fill="#177de6"></path></svg>
        </div>
      </div>
    </div>
    <div class="chat_messages_block_new">
        <div class="chat_messages_block_new_block">
            <img src="https://res.cloudinary.com/dqf6pxwdv/image/upload/v1610403870/chat-conversation-empty-new_2_b4ehq2.svg">
            <span>Выберите собеседника</span>
        </div>
    </div>
  </div>
</div>
<div class="popup_bg"></div>
<div class="ip_popup_wrap">
  <div class="close_popup">
    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
      width="30" height="30"
      viewBox="0 0 172 172"
      style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#333333"><path d="M45.74349,34.28802c-4.66401,0.00578 -8.85992,2.83567 -10.61285,7.15775c-1.75292,4.32207 -0.71362,9.27524 2.62873,12.52819l32.02604,32.02604l-32.02604,32.02604c-2.99552,2.87604 -4.20218,7.14678 -3.15461,11.16516c1.04756,4.01838 4.18566,7.15647 8.20404,8.20403c4.01838,1.04756 8.28912,-0.1591 11.16516,-3.15462l32.02604,-32.02604l32.02604,32.02604c2.87603,2.99556 7.14679,4.20225 11.1652,3.1547c4.0184,-1.04756 7.15652,-4.18567 8.20408,-8.20408c1.04756,-4.0184 -0.15913,-8.28917 -3.1547,-11.1652l-32.02604,-32.02604l32.02604,-32.02604c3.39139,-3.29657 4.4111,-8.33702 2.56778,-12.6926c-1.84331,-4.35558 -6.17151,-7.13275 -10.89903,-6.99334c-2.97902,0.08876 -5.80647,1.33381 -7.88333,3.47135l-32.02604,32.02604l-32.02604,-32.02604c-2.16155,-2.22196 -5.13056,-3.4742 -8.23047,-3.47135z"></path></g></g></svg>
    </div>
  <span class="ip_popup_wrap_title">Индивидуальное предложение</span>
  <span class="ip_popup_wrap_subtitle">Как вы будете решать задачу клиента</span>
  <div class="ip_list">
    <div class="ip_list_img"></div>
    <ol>
      <li>Укажите, какие услуги и в каком объеме будут предоставлены покупателю.</li>
      <li>Опишите свой релевантный опыт. Продемонстрируйте 1-3 примера выполнения похожей <br>работы.</li>
    </ol>
  </div>
  <div class="ip_text_wrap">
    <div class="ip_text_img"></div>
    <div class="ip_textarea_wrap">
      <textarea placeholder="Напишите, как вы будете решать задачу клиента"></textarea>
      <p>0 из 2000 символов (минимум 150)</p>
    </div>
  </div>
  <div class="ip_popup_rubric">
    <span class="ip_popup_rubric_title">Рубрика:</span>
    <div class="ip_popup_rubric_input_wrap">
      <div class="ip_popup_rubric_img"></div>
      <select>
        <option>Выберите рубрику</option>
        <option>Выберите рубрику</option>
        <option>Выберите рубрику</option>
        <option>Выберите рубрику</option>
      </select>
    </div>
  </div>
  <div class="ip_popup_inputs_bottom_wrap">
    <div class="ip_popup_inputs_price_wrap">
      <div class="ip_popup_inputs_price_wrap_img"></div>
      <span>Стоимость</span>
      <input type="text" name="" placeholder="500 - 5 000 000">
    </div>
    <div class="ip_popup_inputs_price_wrap">
      <div class="ip_popup_inputs_time_wrap_img"></div>
      <span>Срок выполнения</span>
      <select>
        <option>1 день</option>
        <option>2 день</option>
        <option>3 день</option>
        <option>4 день</option>
        <option>5 день</option>
        <option>6 день</option>
        <option>7 день</option>
      </select>
    </div>
  </div>
  <div class="ip_popup_line"></div>
  <div class="ip_popup_btns">
    <div class="ip_popup_btn_cancel"><span>Отменить</span></div>
    <div class="ip_popup_btn_go"><span>Предложить</span></div>
  </div>
</div>
<script type="text/javascript" src='https://code.jquery.com/jquery-3.5.1.min.js'></script>
<script type="text/javascript">

$('.files_btn').click(function(){
  $('.files_btn_items').fadeToggle(300)
})

$('.chat_messages_block_btns_orders').click(function(){
  $('.popup_bg').fadeIn(300);
  $('.ip_popup_wrap').fadeIn(300);
})
$('.close_popup, .popup_bg').click(function(){
  $('.popup_bg').fadeOut(300);
  $('.ip_popup_wrap').fadeOut(300);
})

  $('.fake_input_placeholder').click(function(){
    $(this).toggleClass('act');
    $(this).parent().find('input').focus();
  })

  function isChatChecked() {

    const seletors = ['.js-msg-block', '.chat_messages_block', '.messages_block_message_write_block'];

    if($('.chat_list_item').hasClass('act')) {
       seletors.forEach(element => {
         $('.chat_messages_block_new').addClass('not-show');
         $(element).removeClass('not-show');
       })
    }

    else {
      if(!$(element).hasClass('not-show') === false) {
        $(element).addClass('not-show');
        $('.chat_messages_block_new').removeClass('not-show');
      }
    }

  }

  $('.chat_list_item').on('click', function (e) {
      $(this).addClass('act');
      isChatChecked();
  });

  // $('.chat_search input').on('keyup',function(){
  //   	var $this = $(this),
  //       	val = $this.val();
  //   	if(val.length >= 1){
  //     	$('#btn').show(100);
  //     	$('.fake_input_placeholder').addClass('act')
  //   	}else {
  //     	$('#btn').hide(100);
  //     	$('.fake_input_placeholder').removeClass('act')
  //   	}
  // });

  console.log($('.chat_list_items'));

  $('.chat_list_items').find('.chat_list_item').each(index, el => {
    console.log(li);
  });

  $('.file_btn_send_wrap svg').click(function(){
    $(this).parent().find('input').click();
  })
  $('.chat_search').focusin(function(){
    $('.fake_input_placeholder').addClass('act')
  })
  $('.chat_search').focusout(function(){
    console.log($('.fake_wrap_input input').val())
    if ($('#search_input').val() == '') {
      $('.fake_input_placeholder').removeClass('act')
    }
  })

  var textarea = document.querySelector('textarea');

  textarea.addEventListener('keyup', function(){
    if(this.scrollTop > 0){
      this.style.height = this.scrollHeight + "px";
    }
  });
</script>



<div class="m-visible profile-tab inbox-button-block">
  <div class="profile-tab_block clearfix profile-tab_block_message">
    <a href="{PHP.sq|cot_url('ds', 'sq='$this)}" class="<!-- IF !{PHP.type} --> active<!-- ENDIF -->">Все</a>
    <a href="{PHP.sq|cot_url('ds', 'type=unread&sq='$this)}" class="<!-- IF {PHP.type} == 'unread' -->active<!-- ENDIF -->">Непрочитаные</a>
    <a href="{PHP.sq|cot_url('ds', 'type=important&sq='$this)}" class="<!-- IF {PHP.type} == 'important' -->active<!-- ENDIF -->">Важные</a>
  </div>
</div>
<div class="centerwrap pt20 clearfix inbox_top">
  <h1 class="f32 m-hidden">
    <!-- IF {PHP.type} == 'important' -->Важные сообщения<!-- ELSE --><!-- IF {PHP.type} == 'important' -->Непрочитаные сообщения<!-- ELSE -->Сообщения<!-- ENDIF --><!-- ENDIF -->
  </h1>
  <div class="btn-group btn-group_4 m-hidden">
    <a href="{PHP.sq|cot_url('ds', 'sq='$this)}" class="white-btn<!-- IF !{PHP.type} --> green-btn<!-- ENDIF -->">Все</a>
    <a href="{PHP.sq|cot_url('ds', 'type=unread&sq='$this)}" class="white-btn<!-- IF {PHP.type} == 'unread' --> green-btn<!-- ENDIF -->">Непрочитаные</a>
    <a href="{PHP.sq|cot_url('ds', 'type=important&sq='$this)}" class="white-btn<!-- IF {PHP.type} == 'important' --> green-btn<!-- ENDIF -->">Важные сообщения</a>

   <!-- BEGIN: DS_MODER -->
    <a href="index.php?e=ds&type={PHP.type}&sq={PHP.sq}&support=1" class="white-btn red-btn">Диалоги ТП</a>
    <a role="button" class="white-btn" onclick="$(this).next().toggle();">Новое смс</a>
    <div style="font-size: 14px;display: none;">
      <br>
      <form action="{PHP|cot_url('ds', 'm=modersend')}" method="POST">
        <label>
          <input type="radio" name="rmodertotype" value="tousers" checked="checked">
          Отправить конкретным пользователям
        </label>
        <br>
        <label>
          <input type="radio" name="rmodertotype" value="togroup">
          Отправить группе пользователей
        </label>
        <hr>

        <div id="dssend_tousers" style="display: block;">
          Выберите пользователей
          <br>
          <div class="rmoderselectusersimple" style="display: none">
            {DS_MODERSENDTOUSER}
          </div>
          <div class="rmoderselectuserextra">
            {DS_MODERSENDTOUSER}
            <br>
            <a role="button">+ добавить пользователя</a>
          </div>
          <hr>
        </div>
        <div id="dssend_togroup" style="display: none;">
          <label>
            <input type="checkbox" name="rmodertogroup[7]" value="7">
            Покупатели
          </label>
          <br>
          <label>
            <input type="checkbox" name="rmodertogroup[4]" value="4">
            Продавцы
          </label>
          <hr>
        </div>

        <div style="margin-bottom: 10px;">
          <input type="text" name="rmodername" class="input-styled" placeholder="Имя менеджера" value="{PHP.usr.profile.user_MODERNAME}" style="width: 50%; float: left;" />
          <!-- IF {PHP.usr.maingrp} == 5 -->
          <label style="float: left;width: calc(50% - 20px);padding: 15px 0px 0px 20px;">
            <input type="checkbox" name="rmodernameshide" value="1">
            Скрыть имя менеджера (Отправитель "{PHP.cfg.ds.supportinfo.name}")
          </label>
          <!-- ENDIF -->
          <div class="clearfix"></div>
        </div>
        <input type="text" name="rmodertheme" class="input-styled" placeholder="Тема сообщения" style="width: 100%; margin-bottom: 10px;" />
        <textarea name="rmodertext" class="textarea-styled" placeholder="Текст сообщения" style="width: 100%; margin-bottom: 10px;"></textarea>
        <!-- IF {PHP.usr.maingrp} == 5 -->
        <label>
          <input type="checkbox" name="rmoderfromauto" value="1">
          Отправить в виде уведомления
        </label>
        <!-- ENDIF -->
        <br>
        <input type="submit" value="Отправить" class="green-btn" />
      </form>
      <script>
        $('[name="rmodertotype"]').change(function() {
          $('#dssend_tousers').hide();
          $('#dssend_togroup').hide();
          if($(this).val() == 'togroup') {
            $('#dssend_togroup').show();
          } else if($(this).val() == 'togroup') {
            $('#dssend_tousers').show();
          }
        });
        $('.rmoderselectuserextra a').click(function() {
          $(this).before($('.rmoderselectusersimple').html() + '<br>');
        });
      </script>
    </div>
  <!-- END: DS_MODER -->

    <div class="ds_msg_search_form inline">
      <form action="{PHP|cot_url('ds')}" method="get" name="dsmsgsearch">
        <input type="hidden" name="type" value="{PHP.type}" />
        <div class="fields__row">
          <div class="field__inline w200">
            <input type="text" name="sq" value="{PHP.sq}" class="input js-input__calendar w110" data-position="bottom left" placeholder="Поиск по сообщениям" data-placeholder="Поиск по сообщениям">
          </div>
          <div class="field__inline">
            <input type="submit" role="button" name="" class="input w50" value="Поиск" style="padding: 5px;">
          </div>
        </div>
      </form>
    </div>
  </div>

  <div class="ds_msg_search_form m-visible">
    <form action="{PHP|cot_url('ds')}" method="get" name="dsmsgsearch">
      <input type="hidden" name="type" value="{PHP.type}" />
      <div class="fields__row">
        <div class="field__inline w200">
          <input type="text" name="sq" value="{PHP.sq}" class="input js-input__calendar w110" data-position="bottom left" placeholder="Поиск по сообщениям" data-placeholder="Поиск по сообщениям">
        </div>
        <div class="field__inline">
          <input type="submit" role="button" name="" class="input w50" value="Поиск" style="padding: 5px;">
        </div>
      </div>
    </form>
  </div>

  <div class="message_sound_block sm-hidden">
    <i class="tooltipster js-message-sound-ico icon ico-bell hidden" onclick="setMessageSound($(this));" data-tooltip-side="left" data-tooltip-text="Звуковые уведомления отключены. Включить"></i>
    <i class="tooltipster js-message-sound-ico icon ico-bell_active " onclick="setMessageSound($(this));" data-tooltip-side="left" data-tooltip-text="Звуковые уведомления включены. Отключить"></i>
  </div>
  <div class="message_sound_block m-visible">
    <i class="tooltipster js-message-sound-ico icon ico-bell hidden" onclick="setMessageSound($(this));" data-tooltip-side="left" data-tooltip-text="Звуковые уведомления отключены. Включить"></i>
    <i class="tooltipster js-message-sound-ico icon ico-bell_active " onclick="setMessageSound($(this));" data-tooltip-side="left" data-tooltip-text="Звуковые уведомления включены. Отключить"></i>
  </div>

  <script>
   if(!MESSAGE_SOUND_ENABLE) $(".message_sound_block .js-message-sound-ico").toggleClass("hidden");
  </script>

</div>
<div class="message_list-block">
  <table class="centerwrap table-style mt25 mb15 response-table response-table_full-width m-table-inbox m-m0 m-p0">
    <thead>
      <tr>
        <td class="w32p">
          <div class="pl20">
            <!-- IF {PHP.type} == 'unread' OR {PHP.type} == 'important' -->
              Отправитель
            <!-- ELSE -->
              Получатель
            <!-- ENDIF -->
          </div>
        </td>
        <td class="w50p">&nbsp;</td>
        <td>
          Обновлен
        </td>
        <td></td>
      </tr>
    </thead>
  </table>
</div>

<!-- END: MAIN -->

