/*chat*/
.userChatBox{
    position: fixed;
    bottom: 0;
    right: 20px;
    z-index: 999999;
    max-width: 410px;
}
#enduserchatwindow, #loginform
{
    margin:0px;
    font-family: Arial, Helvetica, sans-serif;
    background-repeat: no-repeat;
    background-color: #2893E7;
}

#enduserchatwindow, #loginform
{
    border-radius: 15px;
}

.chatwindow
{
    /*margin: auto;	*/
    margin:10px 10px 0 10px;
    border: 1px solid #cccccc;
    width: 100%;
    background: #F1F3F5;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-size : 12px;
    border-collapse:collapse;
    border-radius: 7px 7px 0 0;
    padding: 10px;
}

.chatoutput
{
    margin: 20px auto 0;
    border: 1px solid #cccccc;
    max-width: 360px;
    width: 100%;
    background: #E9ECEF;
    text-align:left;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-size : 12px;
    padding:2px;
    min-height:130px;
    overflow-y: auto;
    overflow-x: auto; /* old ie in case does not wrap giant words */
    word-wrap: break-word;
    max-height: 300px;
}


.usertypingnotification
{
    max-width: 380px;
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:normal;
    font-size : 10px;
    margin-top:2px;
    margin-bottom:0px;
}

.msgresponsearea
{
    clear:both;
    border: 1px solid #cccccc;
    max-width: 380px;
    width: 100%;
    background: #E9ECEF;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-size : 12px;
    padding:5px;
    margin-top:5px;
    margin-bottom:10px;
}

.caption
{
    display: table;
    font-size : 14px;
    color:#E30018;
    width: 100%;
}
.caption div.cell{
    display: table-cell;
}

.chatwindow .icon
{
    width: 60px;
    height: 35px;
    padding: 0px;
    margin: 0px;
    border: 0px;
    background-image: url(../images/chaticon.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.adminusername
{
    font-weight:bold;
    color:#03F;
    padding-right:5px;
}
.username
{
    font-weight:bold;
    color:#900;
    padding-right:5px;
}

.msgtxt
{
    font-family: Arial, Helvetica, sans-serif;
    font-weight:normal;
    font-size:12px;
    color:#333;
    width:240px;
    height:35px;
    overflow-y: auto;
    resize:none;

}

#loginform
{
    border: 1px solid #063;
    width:460px;
    height:360px;
    background-color:#F8FFFA;
    color: #030;
    font-family:Arial, Helvetica, sans-serif;
    font-size:18pt;
    margin:10px;
    padding:10px;
}

.chatUserChannel{
    float: left;
    max-width: 400px;
    margin: 10px;
}

.caption .name{color: #000}
.caption .email{ color: #555; font-size: 10px; font-weight: normal}

#chatBoxNotify{
    position: fixed;
    width: 400px;
    height: 120px;
    top: 50%;
    margin-top: -60px;
    left: 50%;
    margin-left:-200px;
    text-align: center;
    border: 2px solid #ccc;
    background: #fff;
    padding: 30px;
    -webkit-box-shadow: 1px -1px 29px 17px rgba(0,0,0,0.36);
    box-shadow: 1px -1px 29px 17px rgba(0,0,0,0.36);
    z-index: 9999;
}
/*chat end*/
.chatoutput  .message-item {margin-bottom: 5px; clear: both;}
.chatoutput  .message-item .msg{
    display: inline-block;
    background: #fff;
    border-radius: 5px;
    padding: 2px 5px;
    border: 1px solid #ccc;
    margin-left: 20px;
    margin-right: 20px;

}
.chatoutput  .you .sender{
    display: block;
    text-align: left;
}

.chatoutput  .char{
    display: none;
}

.chatoutput  .admin .sender{
    display: block;
    text-align: right;
}

.chatoutput  .admin{
    display: block;
    text-align: right;
}

.chatoutput  .client .sender{
    display: block;
    text-align: right;
}

.chatoutput  .client{
    display: block;
    text-align: right;
}
.sendmessage {
    display: none;
}

.chat_history div{
    margin: 5px 0px;
    border-bottom: 1px dotted #f1f1f1;
}

/*** iPhone and iOS Form Input Zoom Fixes ***/
/* Fix Input Zoom on devices older than iPhone 5: */
@media screen and (device-aspect-ratio: 2/3) {
    select, textarea, input[type="text"], input[type="password"],
    input[type="datetime"], input[type="datetime-local"],
    input[type="date"], input[type="month"], input[type="time"],
    input[type="week"], input[type="number"], input[type="email"],
    input[type="url"]{ font-size: 16px; }
}

/* Fix Input Zoom on iPhone 5, 5C, 5S, iPod Touch 5g */
@media screen and (device-aspect-ratio: 40/71) {
    select, textarea, input[type="text"], input[type="password"],
    input[type="datetime"], input[type="datetime-local"],
    input[type="date"], input[type="month"], input[type="time"],
    input[type="week"], input[type="number"], input[type="email"],
    input[type="url"]{ font-size: 16px; }
}

/* Fix Input Zoom on iPhone 6, iPhone 6s, iPhone 7  */
@media screen and (device-aspect-ratio: 375/667) {
    select, textarea, input[type="text"], input[type="password"],
    input[type="datetime"], input[type="datetime-local"],
    input[type="date"], input[type="month"], input[type="time"],
    input[type="week"], input[type="number"], input[type="email"],
    input[type="tel"], input[type="url"]{ font-size: 16px; }
}

/* Fix Input Zoom on iPhone 6 Plus, iPhone 6s Plus, iPhone 7 Plus, iPhone 8, iPhone X, XS, XS Max  */
@media screen and (device-aspect-ratio: 9/16) {
    select, textarea, input[type="text"], input[type="password"],
    input[type="datetime"], input[type="datetime-local"],
    input[type="date"], input[type="month"], input[type="time"],
    input[type="week"], input[type="number"], input[type="email"],
    input[type="tel"], input[type="url"]{ font-size: 16px; }
}

@media (max-width:500px){
    .msgtxt{
        width: 180px;
    }
    .sendmessage{
        display: inline-block!important;
    }
}