::-webkit-scrollbar {
    width: 8px;
  
}
::-webkit-scrollbar-button {
    background: #eee
}
::-webkit-scrollbar-track-piece {
    background: #eee
}
::-webkit-scrollbar-thumb {
    background: #666
	
}

/* Button used to open the chat form - fixed at the bottom of the page */
.open-button {
  background-color: #555;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  bottom: 23px;
  right: 28px;
  width: 280px;
}

/* The popup chat - hidden by default */
.chat-popup {
  display: none;
  position: fixed;
  bottom: 0;
  right: 15px;
  border: 3px solid #f1f1f1;
  z-index: 9;
}

/* Add styles to the form container */
.form-container {
  min-width: 300px;
  max-width: 450px;
  background-color: white;
}

/* Full-width textarea */

/* When the textarea gets focus, do something */
.form-container textarea:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit/send button */
.form-container .btn {
  background-color: #4CAF50;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
  background-color: red;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}
	
	
.msg_each {
	width: 100%;
	overflow: hidden;
}
.msg_each .icon {
	width: 55px;
	height: 55px;
}
.msg_each .icon img{
	width: 55px;
	height: 55px;
}
.msg_each .cont {
	width: auto;
	padding-left: 13px;
}

/* width */
#msg_container::-webkit-scrollbar {
width: 6px;
}

/* Track */
#msg_container::-webkit-scrollbar-track {
background: #f1f1f1; 
}

/* Handle */
#msg_container::-webkit-scrollbar-thumb {
background: #888; 
}

/* Handle on hover */
#msg_container::-webkit-scrollbar-thumb:hover {
background: #555; 
}


.chat-messages {
	width: 100%;
	padding: 30px;
	/* max-height: 500px; */
	height: calc(100% - 360px);
	overflow-y: scroll;
}

.chat-messages .message {
	
	margin-bottom: 15px;
	border-top: 1px solid #ccc;
	border-radius: 5px;
	overflow-wrap: break-word;

}

.chat-messages .message .meta {
	font-size: 15px;
	
	color: #000;
	opacity: 0.7;
	margin-bottom: 7px;
}

.chat-messages .message .meta span {
	font-weight: normal;
	margin-left: 8px;
	
}
.message {
	width: 100%;

	
	/*	overflow: hidden;*/
	clear: both;
}
.chat-messages .message .profile-photo {
	margin-top: 6px;
	width: 50px;
	float: left;
}
.chat-messages .message .cont {
	margin-top: 6px;
	width: calc(100% - 74px);
	margin-left: 24px;
	float: left;
}
.chat-messages .message .cont .level {
	width: 100%;
	display: table;
}
.chat-messages .message .cont .level .meta{
	width: 80%;
	display: table-cell;
}
.chat-messages .message .cont .level .meta .displayname{
	float: left;
	font-weight: bold;
	margin-right: 8px;
}
.chat-messages .message .cont .level .meta .time{
	float: left;
	margin-right: 8px;
	color: #000;
	font-size: 11px;
	margin-top: 4px;
}
.chat-messages .message .cont .level .meta .edited {
	float: left;
	margin-right: 8px;
	color: #000;
	font-size: 11px;
	margin-top: 4px;
}
.chat-messages .message .cont .level  .more {
	width: 20%;
	display: table-cell;
	text-align: right;
	margin-left: 24px;
}
.chat-messages .message .profile-photo img{
	width: 45px;
	height: 45px;
	border-radius: 5px;
}
.chat-form-container {
	min-height: 80px;
	padding: 20px 30px;
	background: #aaa;
}

.chat-form-container form {
	display: flex;
}

.chat-form-container input[type='text'] {
	font-size: 16px;
	padding: 5px;
	height: 40px;
	flex: 1;
}

#msg {
	display: block;
	width: 100%;
	font-size: 16px;
	flex: 1;
	
  padding: 15px;
  
  border: none;
  background: #f1f1f1;
  resize: none;
  height: 55px;
	
}
.message .file {
	
	
}
.message .thumbnail-container {
	
	margin-bottom: 13px;
}
.message .thumbnail-container .thumbnail {
	display: inline-block;
	position: relative;
}
.message .thumbnail-container .thumbnail .button-container {
	position: absolute;
	right: 8px;
	display: none;
}
.message .thumbnail-container .thumbnail:hover .button-container {
	display: block;
}
.message .thumbnail-container .thumbnail .image-container {
	
}
.message .thumbnail-container .thumbnail .image-container .img {
	
	margin-right: 8px;
	border-radius: 4px;
	border: 1px solid #aaa;
	width: 420px;
	height: 280px;
	object-fit: cover;
	object-position: 50% 50%;
	cursor: pointer;
}
.message .thumbnail-container .thumbnail .file-container {
	border: 1px solid #ccc;
	padding: 8px 18px;
	border-radius: 4px;
	margin-right: 8px;
	max-width: 300px;
	overflow: hidden;
}
.message .thumbnail-container .thumbnail .file-container .file-icon{
	width: 50px;
	float: left;
}
.message .thumbnail-container .thumbnail .file-container .file-info{
	max-width: 180px;
	float: left;
	text-overflow: ellipsis;
	overflow: hidden;
  white-space: nowrap;
}
.message .img:hover{
	
	cursor: url('icon/icons1-zoom-in-24.png'), auto;
}

/* Join Page */
.join-container {
	max-width: 500px;
	margin: 80px auto;
	color: #fff;
}

.join-header {
	text-align: center;
	padding: 20px;
	background: var(--dark-color-a);
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

.join-main {
	padding: 30px 40px;
	background: var(--dark-color-b);
}

.join-main p {
	margin-bottom: 20px;
}

.join-main .form-control {
	margin-bottom: 20px;
}

.join-main label {
	display: block;
	margin-bottom: 5px;
}

.join-main input[type='text'] {
	font-size: 16px;
	padding: 5px;
	height: 40px;
	width: 100%;
}

.join-main select {
	font-size: 16px;
	padding: 5px;
	height: 40px;
	width: 100%;
}

.join-main .btn {
	margin-top: 20px;
	width: 100%;
}
.date-separator {
background: #eee;	
text-align: center;
font-weight: bold;
overflow: hidden;
}
@media (max-width: 700px) {

	.chat-main {
		display: block;
	}

	.chat-sidebar {
		display: none;
	}
}
.center-cropped {
	width: 300px;
	height: 300px;
	/*background-image: url('https://images.unsplash.com/photo-1569867037406-6b9ad775b22e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60');*/
	background-position: center center;
	background-repeat: no-repeat;
	overflow: hidden;
}
.center-cropped img {
	min-height: 100%;
	min-width: 100%;
	opacity: 0;
	
}

/* Style the Image Used to Trigger the Modal */
#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.chat-modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

#modal-box {
	
	margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
	 background: #fff;
	
}
/* Modal Content (Image) */
.chat-modal .modal-content {
  
  max-width:100%;
  max-height:100%;
  object-fit: contain;
  
	
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
	
 
	position: fixed;
  display: block;
  
  
  text-align: center;
  color: #ccc;
   background-color: rgba(255,255,255,0.14); /* Black w/ opacity */
	left: 0px;
	right: 0px;
	bottom: 0px;
	height: 44px;
	line-height: 44px;
}

/* Add Animation - Zoom in the Modal */
/*.modal-content, #caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}*/

@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

/* The Close Button */
/*.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}*/
.btn-left {
  position: absolute;
  top: 50%;
  left: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}
.btn-left:hover,
.btn-left:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
.btn-right {
  position: absolute;
  top: 50%;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}
.btn-right:hover,
.btn-right:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    
  }
}
.dropdown {
	z-index: 1!important;
}
.dropdown a{
	cursor: pointer;
}
.thumbnail-container {
	
}
.cdr{
	width: 32px;
	height: 32px;
	background: url("icon/files/cdr.png") no-repeat;
}
.csv{
	width: 32px;
	height: 32px;
	background: url("icon/files/csv.png") no-repeat;
}
.eps{
	width: 32px;
	height: 32px;
	background: url("icon/files/eps.png") no-repeat;
}
.pdf{
	width: 32px;
	height: 32px;
	background: url("icon/files/pdf.png") no-repeat;
}
.ai{
	width: 32px;
	height: 32px;
	background: url("icon/files/ai.png") no-repeat;
}
.doc{
	width: 32px;
	height: 32px;
	background: url("icon/files/doc.png") no-repeat;
}
.docx{
	width: 32px;
	height: 32px;
	background: url("icon/files/docx.png") no-repeat;
}
.eps{
	width: 32px;
	height: 32px;
	background: url("icon/files/eps.png") no-repeat;
}
.html{
	width: 32px;
	height: 32px;
	background: url("icon/files/html.png") no-repeat;
}
.iso{
	width: 32px;
	height: 32px;
	background: url("icon/files/iso.png") no-repeat;
}
.mov{
	width: 32px;
	height: 32px;
	background: url("icon/files/mov.png") no-repeat;
}
.php{
	width: 32px;
	height: 32px;
	background: url("icon/files/php.png") no-repeat;
}
.psd{
	width: 32px;
	height: 32px;

	background: url("icon/files/psd.png") no-repeat;
}
.tif{
	width: 32px;
	height: 32px;
	background: url("icon/files/tif.png") no-repeat;
}
.ppt{
	width: 32px;
	height: 32px;
	background: url("icon/files/ppt.png") no-repeat;
}
.pptx{
	width: 32px;
	height: 32px;
	background: url("icon/files/pptx.png") no-repeat;
}
.txt{
	width: 32px;
	height: 32px;
	background: url("icon/files/txt.png") no-repeat;
}
.xml{
	width: 32px;
	height: 32px;
	background: url("icon/files/xml.png") no-repeat;
}
.rar{
	width: 32px;
	height: 32px;
	background: url("icon/files/rar.png") no-repeat;
}
.xls{
	width: 32px;
	height: 32px;
	background: url("icon/files/xls.png") no-repeat;
}
.xlsx{
	width: 32px;
	height: 32px;
	background: url("icon/files/xlsx.png") no-repeat;
}
.zip{
	width: 32px;
	height: 32px;
	background: url("icon/files/zip.png") no-repeat;
}
.unknown{
	width: 32px;
	height: 32px;
	background: url("icon/files/unknown.png") no-repeat;
}
input[type="file"] {
    display: none;
}
.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}



#main-chatroom-container {
  display: flex;
  height: 100%;
}
#main-chatroom-container .chat-partners {
  width: 260px;
  
  background: #ccc;
	
}
#main-chatroom-container .main-messages-container {
  flex-grow: 1;
  float: left;
  background: #fff;
  position: relative;
  display: flex;
  flex-direction: column;
	height: 100%;
  
	
}
#main-chatroom-container .main-messages-container .mix-messages-containers {
	
  /*
	overflow-y: auto;
  	overflow-x: hidden;
	*/
	top: 0px;
	min-height: calc(100% - 100px); /* 100% - height of the footer */
	height: calc(100% - 100px); /* 100% - height of the footer */
	max-height: calc(100% - 100px); /* 100% - height of the footer */
	position: relative;
	list-style-type: none;
	padding: 0;
	flex: 1;
	background: none;
}
#main-chatroom-container .main-messages-container .mix-messages-containers .loader-container {
	
}
#main-chatroom-container .main-messages-container .mix-messages-containers .inner-content {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 0px;
}
#main-chatroom-container .main-messages-container .mix-messages-containers .inner-content .message {
  margin: 0px;
  padding: 4px 6px;
  /*background-color: #f3f3f3;*/
  border-radius: 8px;
	/*border: 1px solid #ccc;*/
  display: flex;
  overflow: none;
}
#main-chatroom-container .main-messages-container .mix-messages-containers .inner-content .message .profile {
  
  width: 60px;
}
#main-chatroom-container .main-messages-container .mix-messages-containers .inner-content .message .profile img {
  width: 45px;
  height: 45px;
	border-radius: 50%;
}
#main-chatroom-container .main-messages-container .mix-messages-containers .inner-content .message .content {
	flex-grow: 1;
	
	width: auto;
	
}
.messagesList {
  overflow-y: none;
}
#main-chatroom-container .main-messages-container .control-panel {
  flex-shrink: 0; /* Prevent footer from shrinking */
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px;
}
#messenger-sidebar-container {
	position: relative;
	top: 0px;
   left: 0px;
   right: 0px;
	height: calc(100% - 230px);
   min-height: calc(100% - 230px);
   
	overflow-x: hidden;
	overflow-y: auto;
	
	bottom: 30px;
}
.chatrooms-container .chatroom {
	background: #fff;
	cursor: pointer;
	margin-bottom: 0px;
	border-bottom: 1px solid #ccc;
}
.chatrooms-container .chatroom.bg-primary{

}
.chatrooms-container .chatroom .participants-container {
	margin-top: 3px;
	width: 100%;
	height: 34px;
	display: table;
}
.chatrooms-container .chatroom .participants-container .participant{
	
	overflow: hidden;
	
	padding: 3px 4px;
	border-radius: 4px;
	width: 34px;
	height: 34px;
	margin: 4px 0px 4px 0px;
	display: inline-block;
	
}
.chatrooms-container .chatroom .participants-container .participant img {
  width: 100%;
  height: auto;
  border-radius: 50%;
}
.chatrooms-container .chatroom .desc {
	height: 24px;
	padding: 1px 8px;
	color: #ccc;
	white-space: nowrap;       /* Prevents the text from wrapping to the next line */
    overflow: hidden;          /* Hides the overflow text */
    text-overflow: ellipsis;   /* Adds ellipsis when text overflows */
}

.chatrooms-container .chatroom.bg-primary .group-name {
  color: #fff;
}
.chatrooms-container .chatroom.bg-primary .desc {
  color: #fff;
	font-size: 14px;
}
.btn-load-messages {
  position: absolute; /* Position relative to the nearest positioned ancestor */
  top: 64px; /* 10px from the top of the container */
  right: 50%; /* 10px from the right of the container */
  z-index: 1000; /* Ensure the button is above other content */
  background: none;
}
.hide {
  display: none;
}
.loading {
  width: 35px;
  height: 35px;
  /*background-image: url("../images/loading.gif");*/
  left: 0px;
  top: 0px;
}
#editor.tm-editor  {
	padding: 6px;
}