html, body {height:100%; margin:0;}

.liveHelp {cursor:pointer;}


.chatPopUp {position:fixed; bottom:0; right:50px; height:300px; width:250px; background-color:#ffffff; z-index:999; text-shadow:none; border-radius:0px; -o-border-radius:0px; -moz-border-radius:0px; -webkit-border-radius:0px; border:1px solid #CCCCCC; border-bottom:0 none;}

.chatPop, .chatPop input, .chatPop textarea, .chatPop select {font-family:Arial,Helvetica,sans-serif;}
.chatPop .chatTitle {font-size:13px; font-weight:bold; padding:5px; color:#ffffff; background-color:#000000;}
.chatPop .chatTitle .close {width:11px; height:11px; margin:5px 0 0 5px; float:right; background:url("chatClose.png") no-repeat scroll right top transparent;}
.chatPop .chatTitle .close:hover {background-position:right bottom;}
.chatPop .chatTitle .minimize {width:11px; height:11px; margin-top:5px; float:right; background:url("chatMinimize.png") no-repeat scroll right top transparent;}

.chatPop .chatBody {height:250px;}
.chatPop .chat .sendWrap {display:none;}

.chatPop input[type="text"], .chatPopUp textarea {width:230px; padding:2px; font-size:12px; background-color:#ffffff; border:none;}
.chatPop #History {height:230px; width:240px; padding:2px 5px 5px; overflow-y:auto; overflow-x:hidden; border-radius:0; -o-border-radius:0; -moz-border-radius:0; -webkit-border-radius:0;}
.chatPop #History p {font-size:12px; margin:3px; color:#787878;}
.chatPop #History p b {font-weight:bold; font-size:12px;}
.chatPop #message {height:30px; width:96%; margin:0 auto; border:1px solid #E3E3E3; box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -webkit-box-sizing:border-box;}
.chatPop #message.chatSelected {border:0; margin:0 4px; box-shadow:0 0 1px 1px #59A7FF; -o-box-shadow:0 0 1px 1px #59A7FF; -moz-box-shadow:0 0 1px 1px #59A7FF; -webkit-box-shadow:0 0 1px 1px #59A7FF;}

.chatPop #History p.systemMessage {color:#1F92AF; font-weight:bold;}
.chatPop #History p.systemMessage.response {font-weight:normal; margin-top:-7px; margin-bottom:3px;}
.chatPop #History p.incomming, .chatPop #History p.outgoing {color:#000000;}


/* Chat Offline & Enter Details */
.chatPop .enterDetails, .chatPopUp .offline, .chatPop .offline {width:240px; padding:2px 5px 5px; color:#000000;}
.chatPop .enterDetails p, .chatPopUp .offline p, .chatPop .offline p {margin:10px 0; font-size:13px; line-height:16px;}

.chatPop .enterDetails label, .chatPopUp .offline label, .chatPop .offline label {width:60px; display:inline-block; font-size:12px;}
.chatPop .enterDetails input[type="text"], .chatPopUp .enterDetails textarea,
.chatPop .offline input[type="text"], .chatPopUp .offline textarea, .chatPop .offline input[type="text"], .chatPopUp .offline textarea {width:166px; margin-bottom:5px; font-size:12px; color:#787878; border:1px solid #cccccc;}


/* Button - display none */
.chatPop .sendWrap {text-align:right;}
.chatPop input[type="button"] {color:#ffffff; cursor:pointer; background-color:rgba(106, 106, 106, 0.8); border:none; height:auto; font-size:14px; padding:3px 20px;}

.chatPop input:hover[type="button"] {background-color: rgba(0, 0, 0, 0.8);}

/* Chat Minimized */
.chatPop.closed {height:30px;}
.chatPop.closed .chatTitle .minimize {background:url("chatMinimize.png") no-repeat scroll right top transparent;}







/* Mobile Chat Maximum width of 600 pixels. */
  

@media screen and (max-device-width:600px)
{

input, textarea, select {-webkit-appearance: none;}
  
.chatPopUp {width:100%; height:100%; right:0; bottom:0!important;}
.chatPop {height:100%;}
  
.chatPop #OuterHistory {min-height:100%; height:100%;}
.chatPop .chatBody .chat {height:100%; position: relative;}
.chatPop .sendWrap {margin:0; height: 100%;}
.chatPop .chat .sendWrap {display: block; margin: 0;}
.chatPop #History {width:96%; height:auto; padding:0 2%; position: absolute; bottom: 15%; max-height: 85%;}

.chatPop #History p, .chatPop #History p b {font-size:15px;}
.chatPop #History p.outgoing {width:65%; background:#eee; padding:5px 2%; border-radius:5px; position: relative; margin:5px 4px; float:right; box-shadow:-1px 1px 2px #bbb; line-height:1.28;}
.chatPop #History p.outgoing:after, .chatPopUp #History p.outgoing::after {position:absolute; right:-7px; top:5px; content:''; width:0; height:0; border-left:solid 7px #eee; border-top:solid 5px transparent; border-bottom:solid 5px transparent;}
.chatPop #History p.incomming {width:65%; background:#c7defe; padding:5px 2%; border-radius:5px; position:relative; margin:5px 4px; float:left; box-shadow:1px 1px 2px #bbb; line-height:1.28;}
.chatPop #History p.incomming:after, .chatPopUp #History p.incomming::after {position:absolute; left:-7px; top:5px; content:''; width:0; height:0; border-right:solid 7px #BEDEFD; border-top:solid 5px transparent; border-bottom:solid 5px transparent;}
  
.chatPop .chatTitle {font-size:25px; padding:2%; font-weight:normal; height:5%;}
.chatPop .chatBody {padding:0; height:92%;}
.chatPop .chatBody .enterDetails, .chatPopUp .enterDetails, .chatPopUp .offline, .chatPop .chatBody .offline {width:90%; margin:0 auto;}
.chatPop .chatBody .enterDetails p, .chatPopUp .enterDetails p, .chatPopUp .offline p, .chatPop .chatBody .offline p {font-size:19px; line-height:19px; margin-bottom:10px;}
.chatPop .chatBody .enterDetails label, .chatPopUp .enterDetails label, .chatPopUp .offline label, .chatPop .chatBody .offline label {font-size:19px; width:15%; height:35px; float:right;}
.chatPop .chatBody .enterDetails input, .chatPopUp .enterDetails input[type="text"], .chatPopUp .enterDetails textarea, .chatPopUp .offline input[type="text"], .chatPopUp .offline textarea, .chatPop .chatBody .offline input[type="text"] {width:70%; font-size:19px; float:left;}
.chatPop .chatBody .enterDetails .sendWrap {text-align:center; margin:0;}
.chatPop .chatBody .enterDetails .sendWrap input, .chatPopUp input[type="button"], .chatPop .chatBody .offline input[type="button"] {font-size:19px; margin-top:10px; padding:5px 2%; width:50%;}
.chatPop .chatTitle a.close, .chatPopUp .chatTitle a.minimize {padding:0 1%; margin-top:2%;}

.typeBox  {width:96%; height:11%; padding:2%; position:absolute; bottom:0; background:#EEEEEE;}  
.chatPop #message {width:100%; height:100%; border:1px solid #bbb; border-radius:5px; box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -webkit-box-sizing:border-box; resize:none; font-size:16px;}
.chatPop #message.chatSelected {box-sizing:border-box; margin:0; border:1px solid #bbb; border-radius:5px; box-shadow:none; width: 80%; float: right;}
.chatPop.closed {height:44px;}
  
.chatPop input[type="button"] {padding: 0; float: left; width: 17%; height: 100%; border-radius: 5px;}
 
.chatPop .chatTitle .minimize {display:none;}
.chatPop .chatTitle .close {width:16px; height:16px; background:url("chatCloseMobile.png") no-repeat scroll right top transparent; background-size:16px;}
.chatPop .chatTitle .close:hover {background-position:right top;}
  
}