/*chatlist*/
#chatpanel{
	position: fixed;
	top: 0;
	bottom:0;
	background: white;
	width: 250px;
	z-index:51;
	border-left: 1px solid #EDEEF2;
	transition: right 0.5s;
    -moz-transition: right 0.5s; /* Firefox 4 */
    -webkit-transition: right 0.5s; /* Safari and Chrome */
    -o-transition: right 0.5s; /* Opera */
	overflow-y: scroll;
	overflow-x: hidden;
	box-shadow: 5px 1px 40px rgba(0,0,0,.1);

}
#chatpanel p {
    color: white;
    font-size: 13px;
    height: 40px;
    text-align: center;
    font-weight: bold;
    line-height: 3.5;
    margin: 0;
    padding: 10px;
    text-transform:lowercase;
    background: #b22326;
    background: -moz-linear-gradient(45deg, #b22326 1%, #891727 50%, #6d0617 51%, #b22326 100%);
    background: -webkit-linear-gradient(45deg, #b22326 1%,#891727 50%,#6d0617 51%,#b22326 100%);
    background: linear-gradient(45deg, #b22326 1%,#891727 50%,#6d0617 51%,#b22326 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b22326', endColorstr='#b22326',GradientType=1 );
}

#chatpanel p i {
	padding-right:5px
}

.chatpanelon{
	right: 0px;
}
.chatpaneloff{
	right: -251px;
}

#chatlist div {
    padding: 23px 8px;
    word-wrap: break-word;
    font-weight: 500;
    font-size: 12px;
    border-bottom: 1px solid #EDEEF2;
    color: #242323;
	overflow-x: hidden;
	transition: 0.5s
}

#chatlist div:hover{
    background: rgb(249, 247, 247);
	transition:0.5s
}
#chatlist div img {
    margin: 0px;
    margin-bottom: 1px;
    width: 7px;
}
#chatlist div .langlist img{
	width: 14px;
}
.matched {
    position: relative;
    background: rgb(255, 255, 255);
    cursor: pointer;
}

.matched:nth-child(2):after { 
content:"\A"; 
font-weight:normal; 

}
.unmatched{
	position: relative;
	background: rgb(255,255,255);
	cursor: pointer;
}
#hidebutton {
    position: fixed;
    top: 142px;
    transition: right 0.5s;
    -moz-transition: right 0.5s;
    -webkit-transition: right 0.5s;
    -o-transition: right 0.5s;
    cursor: pointer;
    padding: 7px 8px;
    border-radius: 50% 50% 0% 50%;
	-moz-border-radius: 50% 50% 0% 50%;
	-webkit-border-radius: 50% 50% 0% 50%;
    background: #a90533;
    z-index: 51;
    color: #fff;
	border: 2px solid #FFF;
    font-weight: bold;
    font-size: 18px;
    -webkit-box-shadow: -6px 3px 12px 0px rgba(143,143,143,0.3);
    -moz-box-shadow: -6px 3px 12px 0px rgba(143,143,143,0.3);
    box-shadow: -6px 3px 12px 0px rgba(143,143,143,0.3);
    -webkit-text-stroke: 1px;
}  


#hidebutton:hover {
background: #a01e43
}

.hidebuttonon{
	right: 250px;
}
.hidebuttonoff{
	right: 0px;
}
#foradminstatus, #forasupplierstatus, #chatsoundstatus{
	cursor: pointer;
}

#foradminstatus,#forasupplierstatus  {
font-size: 14px;
text-transform: uppercase;
font-weight: bold;
}


#foradminstatus img, #forasupplierstatus img{
	width: 8px;
}
#chatpaneldiv span, #chatpaneldiv div{
	padding: 3px;
	text-align: center;
    font-size: 14px;
}

#chatpaneldiv div {
padding-top:10px;
    font-weight: 500;
    color: #666;
}


#chatpaneldiv .margin-left{
margin-left:56px
}

#chatpaneldiv  input[type='text']{
    width: 210px;
    height: 25px;
    margin: 5px 4px;
	padding: 5px;
}


#chatsoundstatus i {
font-size:17px
}

.langlist {
    position: absolute;
    right: 7px;
    bottom: 3px;
}
/*chatlist*/
/*dialogue*/
.dialogue{
	position: fixed;
    bottom: 0px;
    height: auto;
    width: 250px;
    border: 1px solid rgba(241, 241, 242, 1);
    border-bottom: 0;
    background: white;
    border-radius: 21px 6px 0px 0px;
    z-index: 90;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    -webkit-box-shadow: 4px 3px 16px 2px rgba(202, 199, 199, 0.49);
    -moz-box-shadow: 4px 3px 16px 2px rgba(202, 199, 199, 0.49);
    box-shadow: 4px 3px 16px 2px rgba(202, 199, 199, 0.49);
}

.top{
	z-index: 91;
}



/* Let's get this party started */
.messages::-webkit-scrollbar {
    width: 6px;
	overflow:auto;
	
}

 
/* Handle */
.messages::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 18px;
      background: rgb(198, 195, 195);

}


/* Chatpanel */
/* Chrome */
#chatpanel::-webkit-scrollbar-track
{
	background-color: #F5F5F5;
}


#chatpanel::-webkit-scrollbar {
    width: 10px;
	overflow:auto
}

#chatpanel::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
          background: rgb(198, 195, 195);
}

.spancenter {
text-align:center
}

 .messageinput::-webkit-scrollbar { 
    display: block; 
}
 
.dialogue .name {
    color: black;
    padding: 8px;
    padding-top: 13px;
    border-bottom: 1px solid #EDEEF2;
    border-radius: 21px 6px 0px 0px;
}


.dialogue .name table{
	width: 100%;
}
.dialogue .name table tbody tr td:nth-child(2){
	text-align: right;
	font-weight: bold;
	width: 80px;
}
.dialogue .name table tbody tr td:nth-child(2) span{
	cursor: pointer;
	padding-left: 5px;
}
.dialogue .name table tbody tr td:nth-child(2) span img{
	width: 10px;
}
.messages{
	border: 0;
	height: 300px;
	overflow-y: scroll;
	font-size: 14px;
	font-weight: normal;
	font-family: 'Poppins';
	margin-top: 3px;
}

.seenField {
    border-bottom: 1px solid #EDEEF2;
    font-size: 11px;
    height: 15px;
    color: #90949c;
    text-align: right;
    padding-right: 20px;
}

.dialogueStartTime {
    border-bottom: 1px solid #EDEEF2;
    width: 90%;
    color: #666;
    font-size: 11px;
    text-align: center;
    font-weight: 500;
    margin: 10px auto 10px auto;
}

.dialogue .messageinput{
	resize: none;
	width: 240px;
	height: 16px;
	margin: 0;
	padding: 5px;
	padding-top: 10px;
	padding-bottom: 10px;
	border: 0;
	font-family: 'Poppins';
	font-weight:500;
	font-size: 12px;	
}

.dialogue .messageinput:active{
box-shadow:none;
border:none
}

.dialogue .messageinput:hover, .dialogue .messageinput:focus{
    box-shadow: none !important;
    border: none !important;
}

.name table tbody tr td {
    font-size: 12px;
    padding: 0px;
    float: left;
    font-weight: 500;
    display: inline-block;
    width: 145px;
    height: 14px;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
    color: #777;
}

.messages .me a {
color:white;
 -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
display:inline-block;
font-style:italic
}

.messages .another a {
color:#6b6b6b;
 -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
display:inline-block;
font-style:italic
}

.messages .message{
	max-width: 85%;
	margin: 3px;
	padding: 5px 8px 4px;
	border-radius: 3px;
	display: table;
	word-wrap: break-word;
}

.messages .another{
	background: #f1f0f0;
	color:#6b6b6b;
	font-weight:500;
	position:relative;
	margin-left: 7px;
	font-size:12px;
	border-radius: 0px 10px 10px 10px;
}


.chatSupplierEmail  {
font-weight:normal;
word-break: break-all;
}

.dialogue .name table tbody tr img {
width:6%
}


/*
.messages .another:after {
    content: '';
    position: absolute;
	top: 33%;
	left: -4px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 10px 5px 0;
	border-color: transparent #EAEDF4 transparent transparent;
}
*/
.messages .me{
	background:#4080ff;
	color: white;
	margin-left: auto;
	margin-right: 7px;
	text-align:right;
	font-weight:500;
	position:relative;
	font-size:12px;
	border-radius: 10px 0px 10px 10px;
}

/*
.messages .me:after {
    content: '';
    position: absolute;
    width: 0;
    top: 33%;
    right: -4px;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 10px;
    border-color: transparent transparent transparent #6A6972;
}
*/
.hidden{
	bottom: -359px;
}
.blink_me {
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    
    -moz-animation-name: blinker;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    
    animation-name: blinker;
    animation-duration: 1.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@-moz-keyframes blinker {  
    0% { background: #dadada; }
    50% { background: #c72239; }
    100% { background: #d6d3d3; }
}

@-webkit-keyframes blinker {  
    0% { background: #dadada; }
    50% { background: #ffffff; }
    100% { background: #d6d3d3; }
}

@keyframes blinker {  
    0% { background: #dadada; }
    50% { background: #ffffff; }
    100% { background: #d6d3d3; }
}

/*dialodue*/
/*hidden dialogue*/
#hiddenOpenedChatWindowButton{
	position: fixed;
	bottom:0;
	padding: 5px;
	background: #b4b4b4;
	color: white;
	font-weight: bold;
	cursor: pointer;
	padding: 8px;
	border-radius: 5px 5px 0px 0px;
	width: 20px;
	text-align: center;
}
#hiddenOpenedChatWindowList{
	position: fixed;
	bottom: 34px;
	border: 1px solid rgb(200,200,200);
	background: rgb(255,255,255);
	list-style: none;
	padding: 0px;
	margin:0px;
	display: none;
}
#hiddenOpenedChatWindowList:hover{
	display: block;
}

#hiddenOpenedChatWindowList li {
    border: 1px solid #EDEEF2;
    background: rgb(250,250,250);
    float: none;
    width: 190px;
    padding: 10px;
    margin: 0;
    font-weight: 500;
    font-size: 12px;
    white-space: nowrap;
    overflow:hidden !important;
    text-overflow: ellipsis;
}
#hiddenOpenedChatWindowList li:hover{
	cursor: pointer;
	background: #EDEEF2;
	color: black;
}
/*hidden dialogue*/

.element {
  display: inline-flex;
  align-items: center;
    color: #c1c3c7;
}

.element input {
  display: none;
}

.element i {
cursor:pointer;
font-weight:bold
}

.chatAdminPost, .chatSupplierEmail {
    font-weight: normal;
    font-size: 12px;
    color: #898383;
    padding-left: 11px !important;
    display: table;
    margin-top: 6px;
}

.dialogue .messageinput::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  font-weight:normal;
  color:#bfbfbf;
}
.dialogue .messageinput::-moz-placeholder { /* Firefox 19+ */
  font-weight:normal;
  color:#bfbfbf;
}
.dialogue .messageinput:-ms-input-placeholder { /* IE 10+ */
  font-weight:normal;
  color:#bfbfbf;
}
.dialogue .messageinput:-moz-placeholder { /* Firefox 18- */
  font-weight:normal;
  color:#bfbfbf;
}

.dialogue .name table tbody tr img {
    width: 5%;
    vertical-align: middle;
    margin-top: -1.8px;
}

/*chat*/

#chatpaneldiv div:nth-child(2), #chatpaneldiv div:nth-child(4), #chatpaneldiv div:nth-child(6) {
	color:#bd4c9a;
	border-top: 1px solid #e7e1e1;
	font-size:12px;
	    padding-top: 11px !important;
    padding-bottom: 5px;
}

#chatpaneldiv div:nth-child(2) {
	border-top:none;
}

#chatpaneldiv div:nth-child(8) {
	border-top:1px solid #e7e1e1;
}

#foradminstatus, #forasupplierstatus {
    font-size: 13px !important;
    text-transform: lowercase !important;
    font-weight: bold;
}

#chatpaneldiv span, #chatpaneldiv div {
    font-size: 13px !important;
}

#chatpaneldiv div {
	padding-top:0px !important
}

#chatpaneldiv .spancenter {
	padding-bottom:10px
}

#hidebutton {
	    box-shadow: -1px 5px 30px rgba(7, 51, 84, 0.4);
    -webkit-box-shadow: -1px 5px 30px rgba(7, 51, 84, 0.4);
    -moz-box-shadow: -1px 5px 30px rgba(7, 51, 84, 0.4);
}

#chatlist div {
	color: #777;
    font-weight: 600;
}

.chatAdminPost, .chatSupplierEmail {
font-weight: 300;
}

.messages .message {
    line-height: 1.3;
}

@media only screen and (max-width: 1400px) {
.dialogue .name table tbody tr img {
	width:5%;
	vertical-align:middle;
	margin-top:-2px
}
}