online-status

body { 
	margin:0px; 
	padding:0px;
	overflow-y:hidden !important; 
}

.notif-body {
	background:#fff;
}

.cnts-Form {
	display:block; 
	width:100%; 
	max-width:400px; 
	height:100%; 
	position:fixed; 
	top:0px; 
	bottom:0px; 
	left:50%; 
	transform:translateX(-50%); 
	padding:0px; 
	background:#fff;
}

.tw-loda {
	background:#fff; 
	width:100%; 
	height:100%; 
	position:fixed; 
	top:0px; 
	left:0px; 
	right:0px;
	bottom:0px; 
	z-index:1; 
	display:flex;
}

.nonotifs {
  position:fixed;
  top:150px;
  width:100%;
  height:150px;
  font-weight: 500;
  font-family: 'Roboto';
  display: block;
  margin-top: 50px;
  box-sizing: border-box;
  padding-left: 10px;
  padding-right: 10px;
  line-height: 20px;
  font-size: 16px;
  text-align: center;
  color: rgba(69, 69, 69, 0.4);
}

.twin-heda {
	position:fixed;
	width:100%;
	height:50px;
	display:flex;
	box-sizing:border-box;
	padding-left:10px;
}

.twin-hedaAdd {
	top:50px !important;
}

#tw-msg-heda {
	box-sizing:border-box; 
	padding-left:10px; 
	padding-right:10px;
}

.tw-conhaus {
	width:100%;	
	box-sizing:border-box; 
}

.tw-serchdv {
	position:fixed;
	height:56px;
	left:50%;
	transform:translateX(-50%);
	top:56px;
	width:100%; 
	display:flex;
	max-width:380px;
}

.twin-wrapper {
	position:fixed; 
	top:50px;
	bottom:0px;
	height:calc(100% - 50px); 
	overflow-y:auto;
	width:100%;
	left: 50%;
    transform: translateX(-50%); 
	padding-bottom:10px;
	box-sizing:border-box;
}

.twin-wrapperAdd {
	top:50px !important;
	height:calc(100% - 50px) !important;
}

#nomeso {
	max-width:380px;
}

.twin-wrapper-msg {
	position:fixed;
	left:50%;
	transform:translateX(-50%); 
	width:100%;
	max-width:380px;
	top:112px;
	bottom:0px;
	height:calc(100% - 112px); 
	overflow-y:auto; 
	padding-bottom:10px;
	box-sizing:border-box;
}

@media screen and (max-width: 880px) {
   .twin-wrapper-msg {    
   top:57px;
   height:calc(100% - 57px); 
   max-width:600px;
   }
   #nomeso {
	max-width:600px;
   }
}

@media screen and (max-width: 640px) {
   .twin-wrapper-msg {    
   top:51px;
   height:calc(100% - 51px); 
   }
}

.twin-lyns {
	width:100%;
	min-height:70px;
	margin-top:1px;
	margin-bottom:1px;
}

.twin-content {
	width:calc(100% - 20px);	
	margin-left:auto;
	margin-right:auto;
	border-radius:14px;
	cursor:pointer;
	display:flex;
	box-sizing:border-box;
	padding:5px 10px;
	text-decoration:none;
	outline:none;
	color:#202020;
}

@media screen and (max-width: 640px) {
   .twin-content {
   width:100%;    
   border-radius:0px;
   }
}

@media screen and (min-width: 641px) {
   .twin-content:hover {    
   background:#eee;
   }
}

@media screen and (min-width: 641px) {
	.twin-content:hover .ic-green {
		border:3px solid #eee;
	}
}

.twin-content-ADD:hover {    
	background:#eee !important;
}

.twin-content-ADD:hover .ic-green {    
	border:3px solid #eee !important;
}

.twin-content-ADD:hover .typing-indicator {
	background:#eee;
}

#twin-content-noti {
	background:#fafafa;
}

@media screen and (max-width: 360px) {
   .twin-content-noti-sm {    
	width:100% !important;	
	border-radius:0px !important;
	padding:5px 10px !important;
   }
}

.tw-notsall {
	color:#6c2bd9;
	background:#eee5ff;
	box-sizing:border-box;
	margin-top:7px;
	cursor:pointer;	
	padding-left:10px;
	padding-right:10px;
	border-radius:36px;
	height:36px;
	line-height:36px;
	display:inline-block;
}

.tw-notsall:hover {
	background:#e6d6ff;
}

.tw-lp-imdiv {
	width: 60px;
    display: flex;
    position: relative;
	height:60px;
}

.tw-lp-details {
	width:calc(100% - 60px);
    display:flex;
	box-sizing:border-box;
	padding-left:7px;
}

.tw-lp-details-msgs {
	width:calc(100% - 140px);
	height:60px;
    display: block;
	box-sizing:border-box;
	padding-left:0px;
}

.tw-last-msgs {
	width:80px;
	height:60px;
	box-sizing:border-box;
}

.tw-lp-mid {
	margin-top:auto;
	margin-bottom:auto;
}

.tw-lp-im {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-top: auto;
  margin-bottom: auto;
  border: 1px solid #e4e4e4;
  object-fit: cover;
  object-position: center center;
  box-sizing:border-box;
}

.tw-cmic {
  width: 25px;
  height: 25px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  bottom:0px;
  right:0px;
}

.tw-lp-det-ina {
  display: block;
  font-size: 15px;
  line-height: 21px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  box-sizing:border-box;
  padding-top:5px;
}

.tw-lpMsg {
  display: block;
  font-size: 15px;
  line-height: 20px;
  white-space:nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing:border-box;
  padding-top:10px;
}

.online-status-inbox; {
    display:inline-block;
    margin-left:7px;
    font-size:11px;
    font-weight:normal;
    vertical-align:middle;
}

.tw-detdv {
  display:block;
  font-size:13px;
  color:#999999;
  margin-top:5px;
  margin-bottom:2px;
}

.tw-meso {
  width:100%;
  white-space:nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top:5px;
}

.typing-indicator {
   width:100%; 
   position:absolute; 
   bottom:0px; 
   color:#6c2bd9; 
   font-family: 'Inter',sans-serif; 
   background:#fff; 
}

.tw-lp-det-msg {
	text-align:right;
	font-size:13px;
    color: #999999;
	height:30px;
	line-height:30px;
	box-sizing:border-box;
	padding-top:5px;
}

.tw-tick {
	margin-top:6px;
	position:relative;
	height:30px;
	line-height:30px;
	display:flex;
}

.tw-sp1 {
	position:absolute;
	top:2px;
	right:0px;
	color:#6c2bd9;
}

.tw-sp2 {
	display:inline-block;
	box-sizing:border-box;
	background:#6c2bd9;
	color:#fff;
	height:20px;
	text-align:center;
	line-height:20px;
	min-width:20px;
	padding-left:4px;
	padding-right:4px;
	border-radius:20px;
	font-size:10px;	
	position:absolute;
	right:0px;
}