html, body{font-family: 'Open Sans', sans-serif;font-weight: 400;}
body{background-color: transparent;overflow: hidden;margin:20px;}

a{text-decoration: none;}
input, textarea{outline: none;}
::-webkit-input-placeholder {
	color: #b3b3b3;
	font-size: 16px;
	font-weight: 400;
	font-family: 'Open Sans', sans-serif;
}
:-moz-placeholder { /* Firefox 18- */
	color: #b3b3b3;  
	font-size: 16px;
	font-weight: 400;
	font-family: 'Open Sans', sans-serif;
}
::-moz-placeholder {  /* Firefox 19+ */
	color: #b3b3b3;  
	font-size: 16px;
	font-weight: 400;
	font-family: 'Open Sans', sans-serif;
}
:-ms-input-placeholder {  
	color: #b3b3b3;  
	font-size: 16px;
	font-weight: 400;
	font-family: 'Open Sans', sans-serif;
}

.form .chat-content input:focus, .form .chat-content textarea:focus, .start-btn:hover{transition:0.3s ease 0s;-webkit-transition:0.3s ease 0s;-moz-transition:0.3s ease 0s;}

/* Index Page */
.chat-wrapper{
	border-radius: 15px 15px 15px 15px;
	-webkit-border-radius: 15px 15px 15px 15px;
	-moz-border-radius: 15px 15px 15px 15px;
	max-width:100%;
	overflow: hidden;
	bottom:0; right: 0;
	width: 100%;
	-webkit-box-shadow: 0px 0px 20px 0px #00000042;
	-moz-box-shadow: 0px 0px 20px 0px #00000042;
	box-shadow: 0px 0px 20px 0px #00000042;
	background-color: #FFF;
}
.chat-wrapper.open{max-width: 400px;}
.chat-wrapper h2{background: #009dd1;color: #fff;font-weight: 600;font-size: 16px;padding: 10px 13px;margin: 0;display: block;font-weight: normal}
.chat-wrapper.open h2{padding: 16px;font-size: 16px;}
/*.chat-wrapper h2.maximized{display: none;} */
#maximize{float: right;margin: 1px 3px;}
#minimize{float: right;margin-right:20px; }
#close{float: right;margin-right: -2px;}
.chat-content{display: block;height: 500px;}

.chat-content .chat{height: 260px;vertical-align: bottom;}
.chat-content #chatDiv{overflow-y: hidden;background-color: #FFF;}
.chat-content .chatList{height: 100%;overflow-y: auto;list-style-type: none;margin: 0;padding: 0;padding-top: 35px;}
.chat-heading {padding: 13px 13px 14px 22px;border-bottom: 1px solid #dfdfdf;margin:0;background: #ffffff;}
.chat-heading p{font-size: 16px;color: #9c9c9c;display: inline-block;font-weight: 400;}
.chat-heading .logo{float: right;}
.chat-heading p span{font-size: 18px;color: #414141;display: block;margin-top: 2px;font-weight: 600;margin-bottom: 3px;}
.chat h4{display: inline-block;margin:0; color: #a7a7a7;font-size: 16px;font-weight: 400;}
.chat .sent-msg{padding: 5px 13px 5px 17px; background: #ffffff;}
.chat .time{float: right;font-size: 16px;color: #a7a7a7;margin: 4px 1px;}
.chat p{font-size: 16px;color: #414141;font-weight: 600;margin: 5px 0;line-height: 18px;width: 90%;}
.reply{padding: 13px 13px 13px 15px;background: #f2fcff }	
.type-area{border-top: 1px solid #e3e3e3;border-bottom: 1px solid #e3e3e3;padding-right: 3px;background-color: #FFF;}
.type-area #send{background: url("") no-repeat 100% center;height: 100%;width: 15%;height: 56px;border: none;cursor: pointer;margin-top: 3px;}
.type-area textarea{color: #414141;font-size: 16px;border: 0;width: 80%;resize: none;padding: 13px 13px 18px 5px;box-sizing: border-box;font-weight: 600;margin-top: 2px;vertical-align: top;font-family: 'open sans';}
.type-area textarea:focus, #send:focus{outline: none;}
.note{background: #f5f5f5;text-align: right;padding: 5px 13px;font-size: 16px;color: #a1a1a1;position: relative;}
.note img{vertical-align: middle;margin-left: 5px;cursor: pointer;}

.chat-heading .live-chat{display: inline-block;position: relative;top:1px;left:5px;}
.chat-heading .live-chat em{font-size: 16px;color:#9c9c9c;font-style: normal;position: relative;top:-2px;left:4px;}

/*.type-area span{font-size: 11px;color:#9c9c9c;padding: 5px 13px 10px 5px;display: block;} */
.operator-area{min-height: 15px;padding: 5px 13px 10px 5px;background-color: #FFF;}
.operator-area span#operator_typing_id{font-size: 16px;color:#9c9c9c;display: block;}

p.description{font-size: 16px;color: #6f6f6f;display: none;position: absolute;bottom: 22px;right: 0px;max-width: 320px;width: 273px;border: 1px solid #cacaca;background: #fff;text-align: left;box-shadow: 0 0 8px -2px #000;-webkit-box-shadow: 0 0 8px -2px #000;-moz-box-shadow: 0 0 8px -2px #000;padding: 7px 10px 10px;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;line-height: 16px;font-weight: 300;}
.description .down-arrow{position: absolute;bottom: -8px;right: 13px;}

/* Live Chat Form*/
.form{max-width: 400px;}
.form h2.maximized{padding: 16px;font-size: 16px;display: block;}
/* .form .chat-content{display: block;height:auto; min-height: auto!important; padding:0px;position: relative;box-sizing: border-box;padding-top: 15px;} */
.form .chat-content{display: block;height:495px;padding: 13px 22px;position: relative;padding-bottom: 63px;box-sizing: border-box;overflow-y: scroll;}
.form .chat-content label{font-size: 16px;color: #414141;margin-bottom: 6px;font-weight: 400;display: inline-block;}
.form .chat-content label span{color: #f00;clear: both;margin-left: 4px;display: inline-block;}
.form .chat-content input, .form .chat-content textarea,.form .chat-content select{width: 100%;border: 1px solid #d8d8d8;line-height: 30px;padding:3px 5px;border-radius: 8px;margin-bottom: 14px;resize:none;box-sizing: border-box; font-size: 16px;color: #414141;font-weight: 600;}
.form .chat-content textarea{line-height: 18px;}

.form .chat-content input:focus, .form .chat-content textarea:focus{border:1px solid #009dd1;}

/*.form .note{position: fixed;bottom: 0;left: 0;width: 100%;box-sizing: border-box;z-index:999;} */
.form .note{width: 100%;box-sizing: border-box;}
.form .chat-content .start-btn{background:#009dd1;line-height: 36px;font-size: 16px;font-weight:bold;width:100%;border-radius: 10px;color: #fff;border: none;text-transform: uppercase; padding: 0 9px;cursor: pointer;}
.type-area span{font-size: 16px;color:#9c9c9c;padding: 0 13px 10px 21px;display: block;}
.chat-heading .live-chat{display: inline-block;position: relative;top:1px;left:5px;}
.chat-heading .live-chat em{font-size: 16px;color:#9c9c9c;font-style: normal;position: relative;top:-2px;left:4px;}
/* Start Live Chat*/
.start-chat .chat-content{display: table;width: 100%;box-sizing: border-box;}
.start-chat form{display: table-cell;vertical-align: middle;text-align: center;}
.start-chat .chat-content .start-btn{line-height: 56px;font-size: 20px;padding: 0 23px;}

.chat-wrapper .chat-content .start-btn:hover{background: #00ace5;}

.error_message{color: red;font-weight: bold;padding-bottom: 10px;}

@media (max-width: 767px){
	.chat-wrapper{ max-width:100%; left: 13px; right: 13px;}
        .chat-content{height: 495px;}
        .chat-content #chatDiv{height:280px;}
	.chat-content .chatList {height:100%;}
	.chat-wrapper.open{ max-width:100%;}
	.chat-content .chat{ margin:0px; padding:0px; width: 100%;}
	/*.chat-wrapper .chat-heading{ position: absolute; left:0px; right:0px; padding:7px 10px 7px 10px;height:56px} */
	.chat-wrapper .chat-heading p{ margin:0px; padding:0px;}
	/*.chat-wrapper .chat-heading p span{ margin:0px; position: repeat; top:-2px;}*/
	.chat-wrapper .chat-heading p span{ margin:5px 0 0 0; position: repeat; top:-2px;}
	.chat-wrapper .chat-heading .logo{ float: right;}
	.chat-wrapper .type-area textarea{ max-height: 55px;margin-bottom: 5px;}
	.chat-wrapper .chat-heading .live-chat{ display: block;}
	.chat-wrapper h2{ font-size: 16px;}
	.type-area textarea {padding: 5px 13px 0 13px;}
	.type-area #send {height: 30px;}
	.type-area span {padding: 0 10px 10px 13px}
	/*.chat-content .chat{max-height:177px;}*/
	p.description{ width: 263px; }
}

/************ Landscape view ************/
@media (max-device-width:736px) and (max-device-height: 414px) { 
        .chat-content {max-height:290px;}
	.chat-wrapper{max-width: 100%;}
	.chat-wrapper.open{max-width:100%;}
        .chat-content #chatDiv {max-height:145px;}
	.chat-content .chatList {height:100%;}
}

@media (max-device-width:732px) and (max-device-height:412px) {
	.chat-content .chatList {max-height:150px;}
}

@media (max-device-width:667px) and (max-device-height:375px) { 
        .chat-content {max-height:260px;}
	.chat-content #chatDiv {max-height:120px;}
	.chat-content .chatList {height:100%;}
	.type-area{ max-height: 60px;}
	.chat-wrapper .type-area textarea{ max-height: 29px;}
        .chat-wrapper{max-width: 100%;}
	.chat-wrapper.open{max-width: 100%;}
}

@media (max-device-width:640px) and (max-device-height:360px) {
	.chat-content #chatDiv{ max-height: 190px;}
        .chat-content .chatList{ height:100%;}
}



@media (max-device-width:568px) and (max-device-height:320px) {
        .chat-content {max-height:210px;}
	.chat-content #chatDiv{ max-height: 65px;}
        .chat-content .chatList{ height:100%;}
}

@media (max-device-width:480px) and (max-device-height:320px) {
        .chat-content {max-height:210px;}
	.chat-content #chatDiv{ max-height: 65px;}
        .chat-content .chatList{ height:100%;}
	/*	.type-area{ max-height: 40px;}*/
}


/************ Portrait view ************/

@media (max-device-width:414px) and (max-device-height:736px) { 
        .chat-content {max-height:325px;}
	.chat-content #chatDiv{height:145px;}
	.chat-content .chatList {height:100%;}
        .chat-wrapper{max-width: 100%;}
	.chat-wrapper.open{max-width:100%;}
}

@media (max-device-width:375px) and (max-device-height:667px) { 
        .chat-content {max-height:325px;}
        .chat-content #chatDiv{height:150px;}
        .chat-content .chatList{height:100%;}
	.chat-wrapper{max-width: 100%;}
	.chat-wrapper.open{max-width:100%;}

}

@media (max-device-width:320px) and (max-device-height:568px) {
        .chat-content {max-height:325px !important;}
        .chat-content #chatDiv{max-height:150px;}
        .chat-content .chatList{height:100%;}
	.chat-wrapper{max-width: 100%;}
	.chat-wrapper.open{max-width: 100%;}

}

@media (max-device-width:320px) and (max-device-height:480px) {
        .chat-content {max-height:325px !important;}
        .chat-content #chatDiv{max-height:150px;}
        .chat-content .chatList{height:100%;}
	.chat-wrapper{max-width: 100%;}
	.chat-wrapper.open{max-width: 100%;}

}

@media (max-device-width:375px) and (max-device-height:667px) {
        .chat-content {max-height:325px !important;}
        .chat-content #chatDiv{max-height:150px;}
        .chat-content .chatList{height:100%;}
	.chat-wrapper{max-width: 100%;}
	.chat-wrapper.open{max-width: 100%;}

}

@media (max-device-width:414px) and (max-device-height:736px) {
        .chat-content {max-height:325px !important;}
        .chat-content #chatDiv{max-height:150px;}
        .chat-content .chatList{height:100%;}
	.chat-wrapper{max-width: 100%;}
	.chat-wrapper.open{max-width: 100%;}

}






@media (max-width: 400px){
	/* Index Page */
        .chat-content {max-height:325px;}
        .chat-content #chatDiv{height:160px;}
	.chat-content .chatList {height:100%;}
        
	.chat-wrapper.open h2{padding: 13px;}
	/*.chat-heading, .chat .sent-msg, .chat .reply{padding: 10px;} */
	.chat-wrapper h2, .chat h4{font-size: 16px;}
	.chat-wrapper.open h2, .chat p{font-size: 16px;}
	.chat p{width: 80%;}
	.chat-heading p span{font-size: 16px;}

	/* Form */
	/* .form .chat-content{min-height: 420px;} */
	.form .chat-content label{font-size: 16px;}
	.form .chat-content input, .form .chat-content textarea{margin-bottom: 10px;font-size: 16px;}

	/* Start Chat*/
	.start-chat .chat-content .start-btn{line-height: 45px;font-size: 16px;}
}
/* @media (max-device-width:1366px) {
	.chat-content{height:330px !important;}
}  */ 

/*Designer: 04-03-2019*/

	.chat-wrapper.open {
		max-width: 100%;
	}
	.chat-wrapper {
		position: relative;
		right: 0;
		left: 0;
		bottom: 0;
		height: calc(100vh - 115px);
		padding-bottom: 27px;
		width: 100%;
		padding-top: 52px;
	}
	.chat-wrapper .note{
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
	}
	.chat-wrapper h2{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
	}
	.chat-wrapper .chat-content{
		overflow: auto;
		position: relative;
		left: 0;
		right: 0;
		bottom: 0;
		height: calc(100vh - 115px);
	}
	
	/**new chat design*/
	
.mesgs img{ 
	/*max-width:100%;*/
	width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-left: 10px;
}
.mesgs .inbox_msg {
  border: 1px solid #c4c4c4;
  clear: both;
  overflow: hidden;
}
.mesgs .incoming_msg{
	/*display :inline-flex;*/
	display :inline-block;
	margin: 10px 0 10px;
	width : 100%;
}

.operatorLogo img{
	margin-right:5px;
	width: 47px;
    height: 47px;
    border-radius: 50%;
}

.mesgs .incoming_msg_img {
  display: inline-block;
  /*width: 6%;*/
  width: 10%;
}
.mesgs .received_msg {
  display: inline-block;
  padding: 0 0 0 10px;
  vertical-align: top;
  /*width: 92%;*/
  width: 85%;
 }
 .mesgs .received_withd_msg p {
  /* background: #ebebeb none repeat scroll 0 0; */
  border-radius: 8px;
 /* color: #646464;*/
 /*  font-size: 14px; */
  margin: 0;
  padding: 5px 10px 5px 12px;
  /* width: 100%; */
  width: 90%;
  word-wrap: break-word;
  font-weight:normal;
}
.mesgs .time_date {
  color: #747474;
  display: block;
  font-size: 16px;
  margin: 8px 0 0;
}
.mesgs .received_withd_msg { width: 75%; }
.mesgs {
  float: left;
 /*  padding: 30px 15px 0 15px; */
  margin : 30 px 0px 0px 0px;
  height: 100%;
  overflow: auto;
  width : 100%;
  /*width: 60%;*/
}

.mesgs .msg_history{
	padding : 0 10px;
}

 .mesgs .sent_msg p {
  /* background: #05728f none repeat scroll 0 0; */
  border-radius: 8px;
/*  font-size: 14px;*/
  margin: 0; 
  /*color:#fff;*/
  padding: 5px 10px 5px 12px;
  /* width:100%; */
  width: 90%;
  word-wrap: break-word;
  font-weight:normal;
}
.mesgs .outgoing_msg{ overflow:hidden; margin:10px 0 10px;}
.mesgs .sent_msg {
  float: right;
  width: 75%;
}
.mesgs .type_msg {border-top: 1px solid #c4c4c4;position: relative;}
.mesgs .msg_send_btn {
  /*background: #05728f none repeat scroll 0 0;*/
  border: medium none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  font-size: 17px;
  height: 33px;
  position: absolute;
  right: 0;
  top: 11px;
  width: 33px;
}

/*
.formError .formErrorContent {
	font-size: 16px!important;
}

.messageformError {
	margin-top: -34px!important;
}
*/