/* YITH LIVE CHAT FREE WORDPRESS PLUGIN


                            11
                          11111
                         111111        000
                        1111111      00000
                        1111111     000000
                         11111      00000
                                    00000
                                   000000
                                   000000
    000      00000        000      000000    0000
  000000    0000000     00000    00000000000000000
 0000000   00000000    0000000  000000000000000000
00000000  0000000000  00000000  000000000000  0000
00000000  000000000  000000000     00000      0000
0 000000     000000  00 00000     000000      0000
  000000     000000     00000     000000      0000
  000000     000000     00000     00000       000   000
  000000    0000000     00000     00000       000 000000
  00000     0000000    000000     00000      00000000000
 000000    00000000    000000    000000      00000000000
 000000   00000000    000000    0000000      00000  0000
 00000000000000000   00000000  00000000    000000   000
 00000000000000000 000000000000000000000000000000   000  00
 00000000000000000000 00000000000000000000000000   0000 000
 0000000000 00000000  0000000000 00000000000 000   0000000
 00000000   000000     0000000    00000000   000   000000
   000    0000000      00000       00000       00   000
        00000000
      0000000000
     0000000000
   00000 000000
  00000  000000
  0000  000000
 000000000000
 000000000000
 00000000000
 0000000000
 000000000
  0000000
    00
*/

.chat-clear {
    *zoom: 1;
}

.chat-clear:before,
.chat-clear:after {
    display: table;
    content: "";
    line-height: 0;
}

.chat-clear:after {
    clear: both;
}

/**
 * Reset
 * ------------------------------
 */
.chat-widget *,
.chat-chat-btn * {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    font-weight: inherit;
    vertical-align: baseline;
    background: transparent;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    text-shadow: none;
}

.chat-widget strong {
    font-weight: bold;
}

.chat-widget input[type="text"],
.chat-widget input[type="email"],
.chat-widget select {
    vertical-align: middle;
}

.chat-widget input[type="text"],
.chat-widget input[type="email"],
.chat-widget textarea {
    color: #333;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    line-height: 16px;
    border: none;
    background-color: #fff;
    outline: none;
    resize: none;
    text-shadow: none;
    text-transform: none;
    height: inherit;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-transition: border .2s, background-color .3s;
    -moz-transition: border .2s, background-color .3s;
    -o-transition: border .2s, background-color .3s;
    transition: border .2s, background-color .3s;
    -webkit-font-smoothing: antialiased;
}

.chat-widget input[type="text"]:focus,
.chat-widget input[type="email"]:focus,
.chat-widget textarea:focus {
    border: none;
    outline: none;
    resize: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.chat-widget ul, .chat-widget li {
    list-style: none;
}

.chat-widget input::-webkit-input-placeholder,
.chat-widget isindex::-webkit-input-placeholder,
.chat-widget textarea::-webkit-input-placeholder {
    color: darkGray;
}

/**
 * Common widget and button styles
 */
.chat-widget,
.chat-chat-btn {
    font-family: 'Open Sans', sans-serif;
    font-weight: normal;
    position: fixed;
    line-height: 1;
    display: none;
    right: 40px;
    bottom: 0;
}

.chat-chat-btn {
    width: 260px;
    border-radius: 5px 5px 0 0;
}

/**
 * Widget wrapper
 */
.chat-widget {
    font-size: 14px;
    -webkit-box-shadow: 0 1px 12px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 12px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
    overflow: hidden;
    z-index: 999999;
}

.chat-widget a,
.chat-widget a:hover {
    text-decoration: none;
}

.chat-lead,
.chat-welc {
    color: #4d4d4d;
    font-size: 13px;
    line-height: 24px;
    margin-bottom: 20px;
}

/**
 * Chat Button & Chat Header
 */
.chat-header,
.chat-chat-btn {
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    -webkit-transition: background-color .3s;
    -moz-transition: background-color .3s;
    -o-transition: background-color .3s;
    transition: background-color .3s;
    z-index: 999999;
    cursor: pointer;
    color: #ffffff;
    background-color: #009EDB;
}

.chat-header > .chat-ico,
.chat-chat-btn > .chat-ico {
    font-size: 26px;
    padding: 12px 18px;
}

.chat-header > .chat-title,
.chat-chat-btn > .chat-title {

    display: block;
    float: left;
    overflow: hidden;
    margin: 19px 0 18px 0;
    font-size: 13px;
    font-weight: bold;
    text-align: left;
    text-transform: uppercase;
}

.chat-header > .chat-ico.ylc-toggle,
.chat-chat-btn > .chat-ico.ylc-toggle {
    float: right;
}

.chat-header > .chat-ico.chat,
.chat-chat-btn > .chat-ico.chat {
    float: left;
}

/**
 * Chat body
 */
.chat-body {
    position: relative;
    background-color: #fff;
    line-height: 16px;
    overflow: auto;
    border-left: 1px solid #dfdfdf;
    border-right: 1px solid #dfdfdf;
}

/**
 * Offline form
 * ------------------------------
 */
.chat-form {
    padding: 18px;
    font-family: 'Open Sans', sans-serif;
    text-align: left;
    color: #969696;
    font-size: 12px;
}

.chat-form label {
    display: inline-block;
    margin-bottom: 7px;
}

.chat-form label:after {
    content: "*";
    color: red;
}

.chat-form .form-line {
    position: relative;
    margin-bottom: 20px;
}

.chat-form .form-line .chat-ico {
    position: absolute;
    top: 12px;
    right: 13px;
    font-size: 20px;
    color: #b1b1b1;
}

.chat-form input[type="text"],
.chat-form input[type="email"],
.chat-form textarea,
.chat-form input[type="text"]:focus,
.chat-form input[type="email"]:focus,
.chat-form textarea:focus {
    width: 100%;
    font-size: 13px;
    border: 1px solid #cdcdcd;
    padding: 13px 52px 13px 13px;
    margin: 0;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.chat-form input[type="text"]:focus,
.chat-form input[type="email"]:focus,
.chat-form textarea:focus {
    background-color: #f5f5f5;
    border-color: #ccc;
}

.chat-form .chat-checkbox label {
    line-height: 18px;
    margin: 0 0 0 20px;
    display: block;
}

.chat-form .chat-checkbox label:after {
    content: "";
}

.chat-form .chat-checkbox input {
    height: 18px;
    float: left;
}

.chat-send {
    text-align: center;
}

.chat-form-btn {
    display: block;
    width: inherit;
    border: none;
    padding: 19px 0 18px 0;
    background-color: #009EDB;
    color: #ffffff;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
}

.chat-form-btn:hover {
    color: #ffffff;
}

.chat-disabled {
    color: #999 !important;
    background-color: #ddd !important;
    cursor: default !important;
}

.chat-ntf {
    display: none;
    color: #888;
    margin: 15px;
    text-align: left;
    font-size: 13px;
}

.chat-online > .chat-ntf {
    margin-bottom: 7px;
}

.chat-ntf.chat-error {
    color: #e54440;
}

.chat-ntf.chat-success {
    color: #008000;
}

.chat-ntf.chat-typing {
    min-height: 16px;
    margin: 0
}

.chat-ntf.chat-sending {
    min-height: 32px;
    line-height: 32px;
    background: url('../images/loading.gif') no-repeat right center;
}

.chat-ntf.chat-sending.chat-conn {
    display: block;
}

/**
 * Chat Conversation
 */

.chat-cnv {
    position: relative;
    min-height: 180px;
    max-height: 220px;
    padding: 7px 18px;
    text-align: left;
    overflow: auto;
    -webkit-transition: padding .2s;
    -moz-transition: padding .2s;
    -ms-transition: padding .2s;
    -o-transition: padding .2s;
    transition: padding .2s;

}

.chat-cnv-line {
    position: relative;
    margin: 15px 0;
}

.chat-cnv-line .chat-avatar {
    position: absolute;
    top: 20px;
    left: 0;
    width: 35px;
}

.chat-cnv-line.chat-you .chat-avatar {
    right: 0;
    left: auto;
}

.chat-cnv-line .chat-avatar img {
    width: 35px;
    border-radius: 35px;
}

.chat-cnv-time {
    text-align: right;
    color: #898989;
    font-size: 11px;
    line-height: 20px;
}

.chat-cnv-line.chat-you .chat-cnv-time {
    margin-right: 50px;
}

.chat-cnv-line .chat-cnv-msg {
    background-color: #e5f6fd;
    padding: 10px 18px;
    border-radius: 7px;
    color: #444;
    line-height: 18px;
    font-size: 12px;
    cursor: default;
    margin-left: 50px;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
}

.chat-cnv-line.chat-you .chat-cnv-msg {
    background-color: #f2f2f2;
    margin-left: 0;
    margin-right: 50px;
}

.chat-cnv-line .chat-cnv-msg .chat-cnv-author {
    font-size: 13px;
    font-weight: bold;
    line-height: 20px;
    text-transform: capitalize;
}

.chat-cnv-line .chat-cnv-msg:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 5px solid;
    top: 50%;
    margin-top: -5px;
    color: #ffffff;
    border-right-color: #e5f6fd;
    right: 100%;
    margin-right: -50px;
}

.chat-cnv-line.chat-you .chat-cnv-msg:after {
    border-right-color: transparent;
    border-left-color: #f2f2f2;
    right: auto;
    left: 100%;
    margin-right: 0;
    margin-left: -50px;
}

.chat-cnv-reply {
    width: 100%;
    border-top: 1px solid #eee;
    bottom: 0;
    left: 0;
}

.chat-cnv-input {
    padding: 0;
    cursor: text;
}

.chat-cnv-input textarea.chat-reply-input {
    width: 100%;
    height: 20px;
    font-size: 13px;
    line-height: 20px;
    padding: 10px 15px !important;
    max-height: 60px;
    overflow: hidden;
    display: block;
}

.chat-cnv-input textarea.chat-cnv-input.chat-disabled {
    color: #ccc !important;
    background-color: #fff !important;
}

.chat-tools {
    padding: 7px 18px;
    min-height: 39px;
}

.chat-tools a {
    display: inline-block;
    color: #bbb;
    border: 1px solid #eee;
    padding: 4px 7px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    float: right
}

.chat-tools a:hover {
    color: #666;
    border-color: #ddd;
}

.chat-evaluation {
    color: #4d4d4d;
    font-size: 13px;
    line-height: 24px;
}

.chat-evaluation a,
.chat-transcript a {
    display: block;
    border: 1px solid #eee;
    padding: 7px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    margin: 10px 0;
    text-align: center;
}

.chat-evaluation a.bad {
    color: #e54440;
}

.chat-evaluation a.good {
    color: #008000;
}

.chat-evaluation a:hover,
.chat-transcript a:hover {
    background-color: #ddd;
    border-color: #ddd;
}

/**
 * Scroll style
 */
.chat-widget ::-webkit-scrollbar {
    width: 7px;
    height: 10px;
}

.chat-widget ::-webkit-scrollbar-button:start:decrement,
.chat-widget ::-webkit-scrollbar-button:end:increment {
    display: none;
}

.chat-widget ::-webkit-scrollbar-track-piece {
    background-color: #efefef;
}

.chat-widget ::-webkit-scrollbar-thumb:vertical {
    background-color: #999;
}

/**
* CSS animations
* ------------------------------
* animate.css (daneden.me)
*/
.chat-anim {
    -webkit-animation-duration: .4s;
    animation-duration: .4s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

/* bounceInUp */
@-webkit-keyframes chat-bounceInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        transform: translateY(2000px);
    }

    60% {
        opacity: 1;
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }

    80% {
        -webkit-transform: translateY(10px);
        transform: translateY(10px);
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes chat-bounceInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        -ms-transform: translateY(2000px);
        transform: translateY(2000px);
    }

    60% {
        opacity: 1;
        -webkit-transform: translateY(-30px);
        -ms-transform: translateY(-30px);
        transform: translateY(-30px);
    }

    80% {
        -webkit-transform: translateY(10px);
        -ms-transform: translateY(10px);
        transform: translateY(10px);
    }

    100% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

.chat-bounceInUp {
    -webkit-animation-name: chat-bounceInUp;
    animation-name: chat-bounceInUp;
}

/* bounceInDown */
@-webkit-keyframes chat-bounceInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        transform: translateY(-2000px);
    }

    60% {
        opacity: 1;
        -webkit-transform: translateY(30px);
        transform: translateY(30px);
    }

    80% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes chat-bounceInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        -ms-transform: translateY(-2000px);
        transform: translateY(-2000px);
    }

    60% {
        opacity: 1;
        -webkit-transform: translateY(30px);
        -ms-transform: translateY(30px);
        transform: translateY(30px);
    }

    80% {
        -webkit-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        transform: translateY(-10px);
    }

    100% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

.chat-bounceInDown {
    -webkit-animation-name: chat-bounceInDown;
    animation-name: chat-bounceInDown;
}

/* fadeInUp */
@-webkit-keyframes chat-fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(200px);
        transform: translateY(200px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes chat-fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(200px);
        -ms-transform: translateY(200px);
        transform: translateY(200px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

.chat-fadeInUp {
    -webkit-animation-name: chat-fadeInUp;
    animation-name: chat-fadeInUp;
}

/* fadeInDown */
@-webkit-keyframes chat-fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-200px);
        transform: translateY(-200px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes chat-fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-200px);
        -ms-transform: translateY(-200px);
        transform: translateY(-200px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

.chat-fadeInDown {
    -webkit-animation-name: chat-fadeInDown;
    animation-name: chat-fadeInDown;
}