/*

    meChat 1.4 (07/19/2016)
    Created by Jhonatan Henrique (escarlate)
    Available exclusively at CodeCanyon.net

*/

/* add properties to all elements of mechat */
.me-chat-box *, .me-chat-box *:before, .me-chat-box *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: "Open Sans", Arial, sans-serif; /* default font family */
    font-size: 14px; /* default font size */   
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* remove tap highlight (iOS) */
}

/* style of chatboxes */
.me-chat-box
{
    display: block;
    position: fixed;
    height: 300px; /* default height */
    width: 235px; /* default width */
    bottom: 0px;
    right: 0px;
    z-index: 1000; /* default z-index */
}

/* chatbox header */

    /* parent */
.me-chat-box-header
{
    display: block;
    background-color: #000000; /* default header color */
    height: 28px; /* default height */
    width: 100%;
    border-top-left-radius: 2px; /* default border top radius */
    border-top-right-radius: 2px; /* default border top radius */
    border: 0px; 
    float: left;
    cursor: pointer;
}

        /* header name */
.me-chat-box-header-name
{
    display: inline-block;
    width: calc(100% - 64px);    
    height: 28px;
    line-height: 28px;
    padding-left: 5px;
    color: #FFFFFF;
    font-family: helvetica, arial, sans-serif;    
    font-size: 12px;
    font-weight: bold;
    float: left; /* left justified */
}

        /* header status dot */
.me-chat-box-header-status
{
    float: left;
    line-height: 28px;
    width: 20px;
    font-size: 16px; /* default font size */
    text-align: right;
    color: #B9B9B9; /* default font color for offline */
}


        /* header close button */
.me-chat-box-header-close
{
    display: inline-block;
    height: 30px;
    line-height: 30px;
    width: 26px;
    float: right; /* right justified */
    text-align: center;
    font-size: 22px; /* default font size */
    font-weight: normal; /* default font weight */
    color: #FFFFFF; /* default font color */
}

/* chatbox body */

    /* parent */
.me-chat-box-body
{
    display: block;
    height: 100%;
    width: 100%;
    float: left;
}

        /* alert */
.me-chat-box-body-alert
{
    position: absolute;
    background-color: #909090; /* default background color */
    color: #FFFFFF; /* default font color */
    padding: 10px; /* default padding */
    width: 180px; /* default width */
    text-align: center; /* align text to center */
    border-radius: 20px; /* default border radius */
    display: none; /* show only with the function  */
    top: 50px; /* top distance */    
    margin: 0 auto; /* align to center */
    left: 0; /* align to center */
    right: 0; /* align to center */    
}

        /* emoji menu */

            /* parent */
.me-chat-box-body-emoji
{
    display: block;
    height: calc(100% - 88px);
    background-color: #edeef1; /* default background color */
    overflow: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* momentum scroll (iOS) */
    padding: 0px;
    width: 100%;
}
                /* table */
.me-chat-box-body-emoji table
{
    width: 100%;
}

                    /* row  */
.me-chat-box-body-emoji td
{
    width: 20%;
    height: 52px;
    background-color: #ccc; /* default background color */
}
                    /* row (event: hover) */
.me-chat-box-body-emoji td:hover
{
    background-color: #9E9E9E; /* default background color: hover */
    cursor: pointer; /* pointer: hover */
}

                        /* image */
.me-chat-box-body-emoji td img
{
    display: block;
    margin: 0 auto;
}

/* content */
.me-chat-box-body-content {
    display: block;
    height: calc(100% - 58px);
    background-color: #f6f7f9;
    overflow: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* momentum scroll (iOS) */
    padding: 0px 10px;
    width: 100%;
}

/* message */
.me-chat-box-body-content-message {
    height: auto;
    width: 100%;
    margin: 0px;
    padding: 3px 0px; /* distance between posts */
    float: left;
}

                    /* expand "seen time" of the last message */
.me-chat-box-body-content-message:last-child .me-chat-box-message-sent-seen {
    height: 12px;
    opacity: 1;
    margin: 2px 0px;
}

                    /* message popover (event: hover) */
.me-chat-box-message-popover
{
    display: none;
    width: auto;
    height: 24px;
    position: fixed;
    top: 0px;
    line-height: 24px;
    background-color: #232325; /* default background color */
    border-radius: 3px; /* default border radius */
    padding: 0 8px;
    z-index: 1500; /* default z-index */
}

                        /* popover caret right */
.me-chat-box-message-popover-caretright
{
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    right: -4px;
    margin: auto;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #232325; /* default background color */
}

                        /* popover caret left */
.me-chat-box-message-popover-caretleft
{
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -4px;
    margin: auto;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 5px solid #232325; /* default background color */
}

                        /* popover content */
.me-chat-box-message-popover-content
{
    color: #FFFFFF; /* default font color */
    font-size: 11px; /* default font size */
    font-weight: bold; /* default font weight */
    text-align: center; /* align text to center */
}

                    /* received message date */
.me-chat-box-message-received-date
{
    display: inline-block;
    width: 100%;
    color: #757575; /* default font color */
    font-size: 12px; /* default font size */
    font-weight: bold; /* default font weight */
    text-align: left; /* align text to left */
    float: left;
    height: 0; 
    opacity: 0;
    margin-bottom: 0;
}

                    /* sent message date */
.me-chat-box-message-sent-date
{
    display: inline-block;
    width: 100%;
    color: #757575; /* default font color */
    font-size: 12px; /* default font size */
    font-weight: bold; /* default font weight */
    text-align: right; /* align text to right */
    float: left;
    height: 0; 
    opacity: 0;
    margin-bottom: 0;
}

                    /* seen date of the sent message */
.me-chat-box-message-sent-seen
{
    display: inline-block;
    width: 100%;
    color: #757575; /* default font color */
    font-size: 10px; /* default font size */
    font-weight: bold; /* default font weight */
    text-align: right; /* align text to left */
    float: left;
    height: 0; 
    opacity: 0;
    margin-top: 0;
}

                    /* expand "seen time", "received time" and "sent time" */
.me-chat-box-message-received-date.expand, .me-chat-box-message-sent-date.expand, .me-chat-box-message-sent-seen.expand
{
    height: 12px;
    opacity: 1;
    margin: 6px 0;
}

                    /* button to load old messages */
.me-chat-box-message-load
{
    padding: 8px; /* default padding */
    text-align: center; /* align text to center */
    color: #FFFFFF; /* default font color */    
    border-radius: 10px; /* default border radius */
    width: 80%; /* default width */
    margin: 0 auto;    
    display: block;
    cursor: pointer; /* pointer: hover */
}

                    /* time separator */
.me-chat-box-message-timeseparator
{    
    color: #90949c; /* default font color */  
    font-size: 11px; /* default font size */  
    font-weight: bold; /* default font weight */  
    text-align: center; /* align text to center */
    width: 100%;    
}

                    /* message received user picture */
.me-chat-box-message-received-userpicture
{
    width: 32px; /* default width */
    height: 32px; /* default height */
    margin-right: 5px; /* default margin-left */
    float: left; /* left justified */
    border-radius: 5px; /* default border radius */
    background-color: #DEDEDE; /* default background color */
    background-size: contain;
    background-position: center;
}
.me-chat-box-message-received-userpicture + .me-chat-box-message-received
{
    border-top-left-radius: 5px;
}

                    /* message received */
.me-chat-box-message-received
{
    float: left; /* left justified */
    height: auto;
    width: auto;
    max-width: calc(100% - 45px);
    text-align: left;
    font-size: 12px; /* default font size */
    font-weight: 400; /* default font weight */ 
    color: #000000; /* default font color */    
    padding: 4px 8px; /* default padding */
    border-radius: 12px; /* default border radius */
    word-wrap: break-word;
    white-space: pre-line;
}

                    /* message sent */
.me-chat-box-message-sent
{
    float: right; /* right justified */
    height: auto;
    width: auto;
    max-width: calc(100% - 45px);
    text-align: left;
    font-size: 12px; /* default font size */
    font-weight: 400; /* default font weight */ 
    color: #000000; /* default font color */    
    padding: 4px 8px; /* default padding */
    border-radius: 12px; /* default border radius */
    word-wrap: break-word;
    white-space: pre-line;
}

                    /* message with emoji */
.me-chat-box-message-received [data-mechat-emoji], .me-chat-box-message-sent [data-mechat-emoji]
{
    display: inline-block;
    width: 16px; /* default width */
    height: 16px;
    margin: 0 3px;
    margin-bottom: -3px;
}

                    /* message with image */
.me-chat-box-message-with-image
{
    width: calc(100% - 60px); /* default width */
}

                    /* message with only one image */
.me-chat-box-message-with-oneimage
{
    width: calc(100% - 60px); /* default width */
    padding: 0px !important; /* default padding */
}
.me-chat-box-message-with-oneimage > .me-chat-box-message-image
{
    margin: 0 !important; /* default margin */
}

                        /* message image */
.me-chat-box-message-image
{
    width: 100%;
    height: 90px; /* default height */    
    background-size: cover; /* default size */
    background-position: center;
    background-color: #FFFFFF; /* default background color if not load */
    border-radius: 5px; /* default border radius */
    margin: 5px 0px; /* default margin (top, bottom) */
    cursor: pointer; /* pointer: hover */
}

                        /* message loading image */
.me-chat-box-message-image-loading
{
    width: 100%;
    height: 100%;
    background-size: 96px; /* default size */
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent; /* default background color */
    border-radius: 5px; /* default border radius */
    margin: 0 0; /* default margin (top, bottom) */
    cursor: pointer; /* pointer: hover */
}

                    /* message with youtube video */
.me-chat-box-message-with-youtube
{
    width: calc(100% - 60px); /* default width */
}

                    /* message with only one youtube video */
.me-chat-box-message-with-oneyoutube
{
    width: calc(100% - 60px); /* default width */
    padding: 0px !important; /* default padding */
}
.me-chat-box-message-with-oneyoutube > .me-chat-box-message-youtube
{
    margin: 0 !important; /* default margin */
}

                    /* message youtube video */
iframe.me-chat-box-message-youtube
{
    width: 100%; /* default width */
    height: 100px; /* default height */
    vertical-align: top; /* default vertical-align */  
    margin: 5px 0; /* default margin (top, bottom) */    
    border-radius: 5px; /* default border radius */
}

                    /* error message */
.me-chat-box-message-error
{
    float: right; /* right justified */
    height: auto;
    width: calc(100% - 60px);
    text-align: left;
    font-size: 13px; /* default font size */
    font-weight: 400; /* default font weight */ 
    color: #000000; /* default font color */    
    padding: 5px 5px; /* default padding */
    border-radius: 5px; /* default border radius */
    word-wrap: break-word;
    background-color: #C2433A; /* default background color */
}

                    /* success message */
.me-chat-box-message-success
{
    float: right; /* right justified */
    height: auto;
    width: calc(100% - 60px);
    text-align: left;
    font-size: 13px; /* default font size */
    font-weight: 400; /* default font weight */ 
    color: #000000; /* default font color */    
    padding: 5px 5px; /* default padding */
    border-radius: 5px; /* default border radius */
    word-wrap: break-word;
    background-color: #6E9F35; /* default background color */
}

        /* submit */

            /* parent */
.me-chat-box-body-submit
{
    display: block;
    position: relative;
    height: auto; /* default height */
    background-color: #FFFFFF; /* default background color */
    overflow: hidden;
    width: 100%;   
}

.me-chat-box-body-submit input {
    display: block;
    width: 100%;
    height: 30px; /* default height */
    padding: 6px; /* default padding */
    font-size: 13px; /* default font size */
    font-weight: 400; /* default font weight */
    resize: none; /* not resizable */
    outline: none; /* hide outline */
    overflow: hidden;
    border: 0;
    border-top: #dedede 1px solid; /* border top */
    -webkit-appearance: none;
    border-radius: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
}

                /* editable content  */
.me-chat-box-body-submit .me-chat-box-body-submit-contenteditable
{
    display: block;
    width: 100%;
    height: 32px; /* default height */
    padding: 8px; /* default padding */
    font-size: 12px; /* default font size */
    font-weight: 400; /* default font weight */    
    color: initial;
    outline: none; /* hide outline */
    overflow-y: auto;
    resize: none;
    border: 0;
    border-top: #dedede 1px solid; /* border top */
    -webkit-appearance: none;
    border-radius: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    white-space: pre-wrap;
}

                /* elastic editable content  */
.me-chat-box-body-submit .me-chat-box-body-submit-contenteditable.elastic
{
    height: auto;
    min-height: 32px;
    max-height: 100px;
    overflow: auto;
}

                    /* editable content emoji  */
.me-chat-box-body-submit .me-chat-box-body-submit-contenteditable [data-mechat-emoji]
{
    display: inline-block;
    width: 16px; /* default width */
    height: 16px;
    margin: 0 3px;
    margin-bottom: -3px;
}

                /* editable content placeholder  */
.me-chat-box-body-submit .me-chat-box-body-submit-contenteditable-placeholder
{
    display: block;
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 12px;
    color: #D0D0D0;
}

/* parent */
.me-chat-box-body-submit-icon {
    display: block;
    width: 100%;  /* default width */
    height: 30px; /* default height */
    float: left;
    border-top: rgba(204, 204, 204, 0.33) 1px solid; /* border top */
    background-color: #FFFFFF; /* default background color */
}

                        /* icon */     
.me-chat-box-icon
{
    width: 16px; /* default width */    
    height: 16px; /* default height */
    margin: 5px;
    float: left;
    display: block;
    background-color: #FFFFFF; /* default background-color */
    background-size: contain;
    background-position: center;
}

/* chatbox manager (Menu) */

    /* parent */
.me-chat-box-manager
{
    display: block;
    height: 100%;
    width: 100%;   
}

        /* tabs */
.me-chat-box-manager-tabs
{
    height: 40px;
    width: 100%;
    display: block;
}

            /* tab */
.me-chat-box-manager-tabs > a
{
    text-decoration: none; /* remove underline */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;    
}
.me-chat-box-manager-tabs > a:hover
{
    text-decoration: none;
    background-color: #ccc; /* default background color on hover */
    cursor: pointer; /* pointer: hover */
}
.me-chat-box-manager-tab
{
    background-color: #e6e6e6; /* default background color */
    height: 40px; /* default height */
    width: 33.33%; /* default width */
    display: block;
    float: left;
    border-right: #ccc 1px solid; /* default border right */
    border-bottom: #ccc 1px solid; /* default border bottom */
    margin-top: -1px;
    line-height: 40px;
    text-align: center; /* align text to center */
    font-size: 11px; /* default font size */
    font-weight: 500; /* default font weight */    
    color: #616161; /* default font color */
    background-size: 15px;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #f0f0f0;    
}

        /* content of tab */

            /* parent */
.me-chat-box-manager-content
{
    background-color: #f6f7f9; /* default background color */
    display: none; /* show only with the function  */
    /*height: calc(100% - 40px);*/ /* default height */
    height: 100%; /* default height */
}

            /* list */
.me-chat-box-manager-content ul
{
    color: #000000; /* default font color */
    width: 100%;
    height: calc(100% - 35px); /* default height */      
    list-style-type: none;
    padding-left: 0px;
    margin-bottom: 0px;
    overflow: hidden;
    overflow-y: auto;
}

                /* list item */        
.me-chat-box-manager-content ul li
{
    height: 40px; /* default height */
    line-height: 18px;
    text-align: left;
    border-bottom: #e0e0e0 1px solid;
}

                /* list item (event: hover) */
.me-chat-box-manager-content ul li:hover, .me-chat-box-manager-content ul li:focus
{
    cursor: pointer; /* pointer: hover */
    background-color: #e9ebee; /* default background color */
}

.me-chat-box.me-chat-box-hidden {
    bottom: -272px;
}


/* popup */

/* backdrop */
.me-chat-popup
{
    display: block;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000; /* default z-index */
    background-color: rgba(0, 0, 0, 0.85);
}

    /* image */
.me-chat-popup img
{
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

        /* close button */
.me-chat-popup-close
{    
    display: block;
    width: 40px; /* default width */
    height: 40px; /* default height */
    line-height: 40px;
    position: absolute;
    top: 0;
    right: 0;
    text-align: center;
    text-shadow: #FFFFFF 0px 0px 1px;
    font-size: 30px; /* default font size */
    color: #FFFFFF; /* default font color */    
    cursor: pointer;    
}

.me-chat-box-header-status.offline { color: #B9B9B9; }
.me-chat-box-header-status.online { color: #42BC42; }
.me-chat-box-header-status.away { color: #fd918b; }