:root {
    --mainLiveChat-color: #c4161c;
    --mainLiveChat-phone-color: #17bd37;
    --main-border-radius: 1.2vw;
    --main-border-radius-header: .9vw;
    --main-border-radius-photo: .6vw;
}

.white {color: #fff;}

.liveChat .s0{font-size: 2.7vw;}
.liveChat .s1{font-size: 2vw;}
.liveChat .s2{font-size: 1.8vw; line-height: 2.4vw;}
.liveChat .s3{font-size: 1.4vw;}
.liveChat .s4{font-size: 1.2vw; line-height: 2vw;}
.liveChat .s5{font-size: 1vw; line-height: 1.8vw;}
.liveChat .s6{font-size: .9vw; line-height: 1.5vw;}
.liveChat .s7{font-size: .8vw; line-height: 1.2vw;}
.liveChat .s8{font-size: .7vw; line-height: .9vw;}
.liveChat .s9{font-size: .6vw; line-height: .8vw;}

.liveChat .chatHeader .image:after {
    content: '';
    background-color: #14ff39;
    border-radius: .5vw;
    display: block;
    width: .45vw;
    height: .45vw;
    position: absolute;
    top: -.1vw;
    right: -.1vw;
    border: .17vw solid #fff;
}
.liveChat .chatHeader .image:after {
    border-color: var(--mainLiveChat-color);
    top: -0.25vw;
    right: -0.25vw;
}

.liveChat, .liveChat .chatHeader, .liveChat .chatHeader .itemHeader {
    border-radius: 2.8vw 2.8vw 0 0;
}

.liveChat {
    position: fixed;
    bottom: -1px;
    right: 4vw;
    width: 21vw;
    background: #fff;
    box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.16);
    z-index: 5;
}

.liveChat, .liveChat .chatHeader {
    border-radius: var(--main-border-radius) var(--main-border-radius) 0 0;
}
.liveChat .chatHeader {
    background-color: var(--mainLiveChat-color);
    padding: .3vw;
    cursor: pointer;
    user-select: none;
}
.liveChat .chatHeader .itemHeader {
    border-radius: var(--main-border-radius-header);
    padding: .4vw;
}
.liveChat .chatHeader .itemHeader:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
.liveChat .chatHeader .image {
    background-size: cover;
    border-radius: var(--main-border-radius-photo);
    height: 2.9vw;
    width: 2.9vw;
    margin-right: .8vw;
    display: inline-block;
    float: left;
    position: relative;
}

.liveChat .chatHeader .image.callIcon {
    background: url(/lib/liveChat/img/ic-chatPhone.png) no-repeat 50% / contain;
}
.liveChat .chatHeader .desc {
    margin: -.3vw 0 .2vw;
}
.liveChat .chatHeader .close {
    width: 1.3vw;
    cursor: pointer;
    display: none;
    position: absolute;
    top: .7vw;
    right: 1vw;
    padding: .7vw;
}
.liveChat .chatHeader .close:hover,
.liveChat .sendMessage:hover,
.liveChat .phoneForm .button:hover {
    opacity: .7;
}
.liveChat .chatHeader .close:after {
    content: '';
    width: 100%;
    height: .25vw;
    background-color: #fff;
    border-radius: 1vw;
    display: block;
}
.liveChat .showCallForm {
    display: none;
}

.liveChat .messageBox {
    background-color: #fff;
    padding: .7vw;
    overflow-y: auto;
    height: 23vw;
    display: none;
}
.liveChat .userMessage {
    display: none;
}
.liveChat .userMessage textarea {
    background: #F2F2F2;
    border-top: 1px solid #e3e3e3;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    padding: .9vw 3.3vw .9vw 1.3vw;
    width: 100%;
    resize: none;
    display: block;
    overflow: hidden;
    box-sizing: border-box;
    margin: 0 !important;
}
.liveChat .messages [class^="m"] {
    background: #F5F5F5;
    border: 1px solid #EAEAEA;
    border-radius: .8vw .8vw .8vw 0;
    padding: .45vw .6vw;
    position: relative;
    margin-bottom: .8vw;
    width: 84%;
    display: inline-block;
}
.liveChat .messages .m2, .liveChat .messages .m2 .time {
    background-color: var(--mainLiveChat-color);
    color: #fff;
    float: right;
    border-radius: .8vw .8vw 0 .8vw;
}
.liveChat .messages .time {
    margin-top: .4vw;
    float: right;
}
.liveChat .sendMessage {
    background: url(/lib/liveChat/img/ic-chat_sendMessage.png) no-repeat 50% / contain;
    height: 1.5vw;
    width: 1.5vw;
    position: absolute;
    right: 1vw;
    bottom: .8vw;
    cursor: pointer;
}
.liveChat .loader {
    margin-bottom: .8vw;
}
.liveChat .loader i {
    background: url(/lib/liveChat/img/ic-loader.gif) no-repeat 50% / cover;
    height: 0.8vw;
    width: 1.5vw;
    display: inline-block;
    margin: 0 .4vw -.14vw 0;
    opacity: .7;
}
.liveChat .phoneForm {
    background: #F5F5F5;
    border: 1px solid #EAEAEA;
    border-radius: .8vw;
    padding: .6vw;
    margin-bottom: .8vw;
}
.liveChat .phoneForm input {
    text-align: left;
    padding: .6vw;
}
.liveChat .phoneForm input, .liveChat .phoneForm .button {
    margin: 0 0 .5vw;
    width: 100%;
    box-sizing: border-box;
}
.liveChat .phoneForm .button {
    margin: 4px 0 4px 0;
    text-align: center;
    transform: none;
    display: block;
    padding: 7px 21px;
}

.liveChat *::-webkit-scrollbar,
.liveChat *::-webkit-scrollbar-thumb {
    width: 4px;
    background-clip: padding-box;
    color: #afafaf;
}

.liveChat *::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 0 10px;
}
.mChatHeader{
    display: none;
}


@media screen and (max-width: 510px) {
    .liveChat .s0, .mChatHeader .s0 {font-size: 8.3vw;}
    .liveChat .s1, .mChatHeader .s1 {font-size: 4.1vw; line-height: 5.9vw;}
    .liveChat .s2, .mChatHeader .s2 {font-size: 5.4vw; line-height: 7vw;}
    .liveChat .s3, .mChatHeader .s3 {font-size: 4.8vw;}
    .liveChat .s4, .mChatHeader .s4 {font-size: 3.6vw; line-height: 1.5;}
    .liveChat .s5, .mChatHeader .s5 {font-size: 3vw; line-height: 1.7;}
    .liveChat .s6, .mChatHeader .s6 {font-size: 3.2vw; line-height: 1.4;}
    .liveChat .s7, .mChatHeader .s7 {font-size: 3vw; line-height: 1.3;}
    .liveChat .s8, .mChatHeader .s8 {font-size: 2.4vw; line-height: 1.2;}
    .liveChat .s9, .mChatHeader .s9 {font-size: 2vw; line-height: 1;}


    .liveChat .chatHeader .image:after {
        transform-origin: 0 0;
        transform: scale(5);
    }
    .liveChat .chatHeader .image:after {
        border-color: var(--mainLiveChat-color);
        top: -1.25vw;
        right: 1.25vw;
    }

    .liveChat {
        margin: 0 6.4vw;
        width: calc(100% - 12.8vw);
        right: auto;
        display: none;
    }

    .liveChat .chatHeader {
        padding: 3vw 3vw 3.8vw;
    }

    .liveChat, .liveChat .chatHeader, .liveChat .chatHeader .itemHeader {
        border-radius: 2.8vw 2.8vw 0 0;
    }

    .liveChat .chatHeader .itemHeader:hover {
        background-color: inherit;
    }

    .liveChat .chatHeader .image {
        border-radius: 1.8vw;
        height: 12vw;
        width: 12vw;
        margin: -1vw 4vw -1vw -1vw;
    }

    .liveChat .messageBox {
        padding: 3vw;
        height: 52vh;
    }

    .liveChat .messages [class^="m"] {
        border-radius: 2.8vw 2.8vw 2.8vw 0;
        padding: 1.5vw 2vw;
        margin-bottom: 4vw;
        width: 89%;
    }
    .liveChat .messages .m2 {
        border-radius: 2.8vw 2.8vw 0 2.8vw;
    }

    .liveChat .phoneForm {
        border-radius: 2.8vw;
        padding: 2vw;
    }

    .liveChat .loader i {
        height: 2.9vw;
        width: 4.5vw;
        margin: 0 1vw -0.3vw 0;
    }

    .liveChat .chatHeader .close {
        width: 3.4vw;
        top: 3vw;
        right: 3vw;
    }
    .liveChat .chatHeader .close:after {
        height: 0.7vw;
    }
    .liveChat .userMessage textarea {
        padding: 4.6vw 12vw 4.6vw 3vw;
    }
    .liveChat .sendMessage {
        background-size: 43%;
        height: 8vw;
        width: 8vw;
        right: -.1vw;
        bottom: -.1vw;
        padding: 2.6vw 3.7vw 3vw 3.7vw;
    }
    .liveChat .phoneForm input {
        border-radius: 2vw;
    }
    .liveChat .phoneForm input, .liveChat .phoneForm .button {
        margin: 0 0 2vw;
        padding: 2.6vw 3vw;
    }
    .liveChat .phoneForm .button {
        margin: 1vw 0 0 0;
    }
    .liveChat .messages .time {
        position: relative;
        bottom: -1vw;
    }
    .mChatHeader{
        display: flex;
        position: fixed;
        right: 4vw;
        bottom: 4vw;
        width: 64vw;
        flex-direction: row-reverse;
        z-index: 2;
    }
    .mChatHeader .message, .mChatHeader .image{
        box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.16);
    }
    .mChatHeader .image{
        background: url(/lib/liveChat/img/ic-smallChat.png) no-repeat 50% / 50% var(--mainLiveChat-color);
        border-radius: 25vw;
        height: 15vw;
        width: 15vw;
        display: inline-block;
        float: right;
        transition: background-color 800ms;
    }
    .mChatHeader .image.phone{
        background: url(/lib/liveChat/img/ic-smallChatPhone.png) no-repeat 50% / 50% var(--mainLiveChat-phone-color);
    }
    .mChatHeader .message {
        margin: auto 4vw auto 0;
        padding: 1.2vw 2vw;
        background: rgba(255, 255, 255, .9);
        border: 1px solid rgba(30, 30, 30, .1);
        border-radius: 2vw 2vw 0 2vw;
        display: none;
    }
    .mChatHeader .message .s5 {
        margin-top: -1.1vw;
    }
    .mChatHeader .m2{
        display: none;
    }
}