.main-chat-box {
	 padding: 50px 0;
}
 .main-chat-box .chat-box {
	 background-color: #fff;
}
 .main-chat-box .chat-box .top-bar {
	 display: flex;
	 justify-content: space-between;
	 align-items: center;
	 border: 1px solid #ebecf9;
	 padding: 20px 40px;
}
 .main-chat-box .chat-box .top-bar > div {
	 display: flex;
	 flex-wrap: wrap;
	 align-items: center;
	 column-gap: 20px;
}
 .main-chat-box .chat-box .top-bar > div a {
	 color: #000;
	 font-size: 20px;
	 opacity: 80%;
}
 .main-chat-box .chat-box .top-bar > div .chat-search {
	 position: relative;
}
 .main-chat-box .chat-box .top-bar > div .chat-search input {
	 width: 280px;
	 height: 35px;
	 padding-left: 40px;
	 border: 1px solid #ebecf9;
	 border-radius: 35px;
	 outline: none;
}
 .main-chat-box .chat-box .top-bar > div .chat-search input::placeholder {
	 color: #ebecf9;
}
 .main-chat-box .chat-box .top-bar > div .chat-search label {
	 position: absolute;
	 left: 15px;
	 top: 50%;
	 transform: translateY(-50%);
	 color: #ebecf9;
}
 .main-chat-box .chat-box .main-chat {
	 display: flex;
	 flex-wrap: wrap;
}
 .main-chat-box .chat-box .main-chat .chat-tab {
	 width: 190px;
	 float: left;
	 text-align: center;
	 box-shadow: 0 0 5px 1px #000 1a;
}
 .main-chat-box .chat-box .main-chat .chat-tab ul li a {
	 padding: 20px;
	 display: inline-block;
	 width: 100%;
	 background-color: #f9f9f9;
}
 .main-chat-box .chat-box .main-chat .chat-tab ul li a .profile-name {
	 font-size: 18px;
	 color: #1f2135;
	 font-weight: 600;
	 margin-top: 15px;
}
 .main-chat-box .chat-box .main-chat .chat-tab ul li a.active .profile-name, .main-chat-box .chat-box .main-chat .chat-tab ul li a:hover .profile-name {
	 color: #fff;
}
 .main-chat-box .chat-box .main-chat .msger {
	 width: calc(100% - 190px);
	 float: left;
	 display: flex;
	 flex-flow: column wrap;
	 justify-content: space-between;
	 height: 612px;
}
 .main-chat-box .chat-box .main-chat .msger .msger-chat {
	 width: 100%;
	 border-right: 1px solid #ebecf9;
	 flex: 1;
	 overflow-y: auto;
	 padding: 10px;
}
 .main-chat-box .chat-box .main-chat .msger .msger-chat::-webkit-scrollbar {
	 width: 2px;
}
 .main-chat-box .chat-box .main-chat .msger .msger-chat::-webkit-scrollbar-track {
	 background: #f9f9f9;
}
 .main-chat-box .chat-box .main-chat .msger .msger-chat .msg {
	 display: flex;
	 align-items: flex-start;
	 margin-bottom: 10px;
	 position: relative;
	 padding-top: 30px;
}
 .main-chat-box .chat-box .main-chat .msger .msger-chat .msg:last-of-type {
	 margin-bottom: 0;
}
 .main-chat-box .chat-box .main-chat .msger .msger-chat .msg .msg-info-time {
	 position: absolute;
	 top: 0;
	 left: 50%;
	 transform: translateX(-50%);
}
 .main-chat-box .chat-box .main-chat .msger .msger-chat .msg .msg-img {
	 width: 60px;
	 float: left;
	 min-width: 60px;
	 height: 60px;
	 margin-right: 10px;
}
 .main-chat-box .chat-box .main-chat .msger .msger-chat .msg .msg-bubble {
	 max-width: 450px;
	 float: left;
	 padding: 10px 20px;
	 border-radius: 35px;
	 background: #c7cae1;
	 margin-top: 30px;
}
 .main-chat-box .chat-box .main-chat .msger .msger-chat .msg.left-msg .msg-bubble {
	 border-top-left-radius: 0;
}
 .main-chat-box .chat-box .main-chat .msger .msger-chat .msg.right-msg {
	 flex-direction: row-reverse;
}
 .main-chat-box .chat-box .main-chat .msger .msger-chat .msg.right-msg .msg-img {
	 margin: 0 0 0 10px;
}
 .main-chat-box .chat-box .main-chat .msger .msger-chat .msg.right-msg .msg-bubble {
	 color: #fff;
	 border-top-right-radius: 0;
}
 .main-chat-box .chat-box .main-chat .msger .msger-inputarea {
	 width: 100%;
	 padding: 10px 30px;
	 display: flex;
	 align-items: center;
	 border: 1px solid #ebecf9;
}
 .main-chat-box .chat-box .main-chat .msger .msger-inputarea span {
	 display: inline-block;
	 width: 24px;
	 float: left;
	 margin-right: 20px;
}
 .main-chat-box .chat-box .main-chat .msger .msger-inputarea i {
	 font-size: 24px;
	 color: #c7cae1;
}
 .main-chat-box .chat-box .main-chat .msger .msger-inputarea input {
	 width: calc(100% - 44px - 44px);
	 height: 35px;
	 float: left;
	 border: 1px solid #ebecf9;
	 border-radius: 35px;
	 outline: none;
	 padding-left: 20px;
}
 .main-chat-box .chat-box .main-chat .msger .msger-inputarea button {
	 width: 24px;
	 float: left;
	 padding: 0;
	 margin: 0;
	 border: none;
	 outline: none;
	 background-color: transparent;
	 margin-left: 20px;
}