/*Настройки отображения групп*/

.telegram-button {
	height: 3em;
  	color: #d7ebfb;
  	background: #2167a9;
  	border-top-left-radius: 8px;
  	border-top-right-radius: 8px;
	width:120px;
	position: fixed;
	bottom:0;
	left:50%;
	z-index:98;
	text-align:right;
	padding:3px;
	/*
	display: flex;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	*/
}


.tlContainer {
  position: fixed;
  z-index: 99;  
  bottom: 0;
  left:50%;	
 /* pointer-events: none;*/
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #F7F7F7;
/*  max-height: 500px;*/
  height:580px;	
  width: 450px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;	
  flex-direction:column;	
  justify-content: space-between;	
}
	
.tlContainer .wcHeader {
	height: 3em;
	color: #d7ebfb;
	background: #2167a9;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
/*	cursor: default;*/
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	
	align-items: center;
	min-width: 130px;
	width:100%;
}

.tlContainer .wcButtons {
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
	
.tlContainer .wcButtons a {
	color: #fff;
	padding: 5px;
    cursor: pointer !important;
}


.tlContainer .wcInput,
.tlContainer-lihgt .wcInput
{
	font-size: 20px;
	padding: 15px 0 15px 20px;
	min-height: 65px;
	line-height: 31px;
	border-radius: 10px;
}

.tlContainer .wcInputs .wcInput[contentEditable="true"]:empty:not(:focus)::before,
.tlContainer-light .wcInputs .wcInput[contentEditable="true"]:empty:not(:focus)::before
{
  content: attr(data-placeholder);
  pointer-events: none;
  color: grey;
}


.tlContainer .wcInputs .wcInput:focus,
.tlContainer-light .wcInputs .wcInput:focus
{
  background: #fff;
}


.tlContainer .wcInputs .wcInput,
.tlContainer-light .wcInputs .wcInput
{
  	font-size: 15px;
	padding: 6px 7px 6px 7px;
	min-height: 60px;
	line-height: 21px;
	border-radius: 10px;
	background: #e6f2fbe0;  /*#d7ebfbe0;*/
	width: 100%;
	min-width:350px;
	max-height: 40vh;
	overflow-y: auto;
	border: 1px solid #99bbdf4a;
}

/*Mobile*/
@media  only screen and (max-width: 767px) {
	.tlContainer .wcInputs .wcInput,
	.tlContainer-light .wcInputs .wcInput
	{	 
	  width:300px;	
	}

}


.tlContainer .wcInputs
{
	margin: 20px;
}

/* 07-07
.tlContainer-light {
  z-index: 99;  
  bottom: 0; 
 /* pointer-events: none;*/
/***
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #F7F7F7;
/*  max-height: 500px;*/
 /* width: 450px;*/
/***  max-width:70%;	
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;	
  flex-direction:column;	
  justify-content: space-between;	
}

*/

.tlContainer-light {
  position:fixed;
  z-index: 99;  
  bottom: 0; 
 /* pointer-events: none;*/
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #F7F7F757;/*#F7F7F7;*/
/*  max-height: 500px;*/
 /* width: 450px;*/
  max-width:88%;	
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;	
 /* flex-direction:column;*/	
  justify-content: space-between;	
   align-items: center; /* Выравнивание по вертикали */	
   margin-bottom:21px;	
}

.tlContainer-light:hover {
	 background: #ffffffd4;
}

.tlContainer-light .wcInputs {
	margin-bottom:5px;
	margin-top: 5px;
	background: #DBECFB;
	padding: 3px;
	border-radius: 5px;
}

.spr-single-table .one-msg {
	margin: 7px;	
	width: auto;	
	display: block;
	background-color: #FBFFF6;
	border: 2px solid #FBFFF6;
	border-radius: 8px;
	padding: 10px;
}

.spr-single-table .col2 {
	max-height: 300px;
	overflow-y: auto;
	
}



#msg-telegram .one-msg {
	margin: 7px 4px;
	margin-left: 3px;
	width: 68%;	
	display: block;
	margin-left: 32%;
	background-color: #FBFFF6;
	border: 2px solid #FBFFF6;
	border-radius: 8px;
	padding: 10px;
}

#msg-telegram .one-msg-out {
	margin: 7px 4px;
	margin-left: 3px;
	width: 68%;	
	display: block;
	margin-left: 0%;
	background-color: #FFF;
	border: 2px solid #FFF;
	border-radius: 8px;
	padding: 10px;
}


#msg-telegram .view-date {	
		text-align:center;
	}

#msg-telegram .view-time {
		font-size:13px;
		text-align:right;
	}
#msg-telegram  p {
	padding-bottom: 1px;
}

#msg-telegram .from-name { 
  font-weight:600;
	  color: #047304;
}

#msg-telegram  {
	padding-bottom: 120px;
}

/*передача файла*/
.wcImageAttach {
	height: 40px;
	font-size: 15px
}

.wcImageAttach input {
   /* position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;*/
    opacity: .001;
    cursor: pointer;
    z-index: 1000;
    margin: 0;
	width: 50px;
}

.wcImageAttach {
    background: transparent url(../images/load.png) center center no-repeat;
	width: 50px;	
}


.wcSmileAttach {
    background: transparent url(../images/emoticon.svg) center center no-repeat;
	width: 50px;
	margin-left:10px;
	min-width:50px;
	height:50px;
	cursor:pointer;
}

.wcAudioAttach {
    background: transparent url(../images/microphone-light1.svg) center center no-repeat;
	width: 50px;
	margin:0 0 10px 1px;
	min-width:50px;
	height:50px;
	cursor:pointer;
}


.wcImageAttach:hover,
.wcSmileAttach:hover,
.wcAudioAttach:hover
{
	background-color: #eff3f6;
}

.tlContainer-light button.emoji,
.tlContainer-light span.emojitext,
.msg-in-one-tlg p 
{
	/* font-family: 'Arial Unicode MS', Arial, sans-serif;*/
    /*font-family: 'Montserrat','Noto Color Emoji', Arial, sans-serif;*/
	font-family: 'Montserrat', Arial, Helvetica,'Noto Color Emoji', sans-serif;
}

.emoji {
	/*border: none;*/
	font-size: 30px;
	margin: 3px;
	border:1px solid #fff;
	color: #FFCC4D;
  	font-weight: 700;
}

.emoji:hover {
	box-shadow: 0px 5px 20px #aab9c3;
	background-color: #fff;
	color: #FFCC4D;
}