.title {

    font-style: 18px

}



.chat-advisory {

    display: inline-block;

    background: rgba(0, 0, 0, .2);

    position: fixed;

    z-index: 9999;

    right: 0;

    bottom: 40px;

    width: 70px;

    height: 70px;

    text-align: center

}



.chat-advisory:hover {

    cursor: pointer

}



.chat-advisory-img {

    width: 46px;

    height: 46px;

    margin-top: 12px

}



.chat-box {

    background-color: #fff;

    width: 360px;

    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .2);

    border-radius: 2px;

    position: fixed;

    z-index: 1000;

    bottom: 6px;

    right: 78px;

    display: none;

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'

}



.chat-header-box {

    height: 32px;

    display: flex;

    justify-content: space-between;

    padding: 0 16px;

    align-items: center

}



.chat-header-box .chat-header-name {

    font-size: 14px;

    font-weight: 500;

    line-height: 32px;

    color: #595959

}



.chat-header-box .chat-header-close {

    width: 10px;

    height: 10px;

    cursor: pointer;

    color: #D9D9D9

}



.chat-content {

    background-color: #EEE;

    height: 338px;

    padding-left: 15px;

    padding-right: 15px;

    padding-bottom: 12px;

    overflow-y: auto

}



.chat-content .chat-message-s {

    margin-top: 12px

}



.chat-content .chat-message-s .chat-time {

    font-size: 12px;

    vertical-align: top;

    line-height: 24px;

    color: #999

}



.chat-content .chat-message-s .chat-message-time .chat-avatar {

    height: 24px;

    width: 24px;

    border-radius: 50%;

    margin-right: 4px

}



.chat-content .chat-message-s .chat-right .chat-avatar {

    margin-left: 4px;

    margin-right: 0

}



.chat-content .chat-message-area {

    padding-left: 30px

}



.chat-content .chat-message-text {

    color: #595959;

    text-align: left;

    display: inline-block;

    padding: 8px;

    background-color: #fff;

    border-radius: 8px;

    max-width: 288px;

    word-break: break-all;

    word-wrap: break-word;

    font-size: 14px

}



.chat-content .chat-right {

    text-align: right

}



.chat-content .chat-message-area.chat-right {

    padding-right: 32px

}



.chat-content .chat-message-area.chat-right .chat-message-text {

    background-color: #D9D9D9

}



.chat-status {

    font-size: 12px;

    padding-left: 24px;

    padding-bottom: 2px;

    color: #999;

    background-color: #EEE

}



.chat-content::-webkit-scrollbar,

.chat-emoji-content::-webkit-scrollbar,

.chat-textarea::-webkit-scrollbar {

    width: 6px;

    height: 1px

}



.chat-content::-webkit-scrollbar-thumb,

.chat-emoji-content::-webkit-scrollbar-thumb,

.chat-textarea::-webkit-scrollbar-thumb {

    border-radius: 10px;

    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);

    background: #B2B2B2

}



.chat-content::-webkit-scrollbar-track,

.chat-emoji-content::-webkit-scrollbar-track,

.chat-textarea::-webkit-scrollbar-track {

    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);

    border-radius: 10px;

    background: #EDEDED

}



.chat-input {

    display: flex;

    flex-direction: column

}



.chat-input .chat-emoji-img-box {

    height: 32px

}



.chat-input .chat-emoji-img-box:focus {

    outline: 0

}



.chat-input .chat-emoji {

    position: relative

}



.chat-input .chat-emoji-img {

    width: 16px;

    margin: 8px 16px

}



.chat-input .chat-emoji-img:hover {

    cursor: pointer

}



.chat-input .chat-emoji-content {

    box-sizing: content-box;

    display: none;

    max-width: 216px;

    height: 98px;

    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .2);

    padding: 12px 12px 6px;

    background-color: #fff;

    position: absolute;

    top: -118px;

    overflow-y: auto

}



.chat-input .chat-emoji-content .chat-emoji-Item {

    cursor: pointer;

    display: inline-block;

    padding: 1px

}



.chat-input .chat-textarea {

    box-sizing: border-box;

    padding-left: 16px;

    outline: 0;

    border: none;

    resize: none;

    width: 98%;

    height: 95px;

    overflow-y: auto;

    font-size: 14px;

    font-weight: 400;

    color: #595959;

    line-height: 22px

}



.chat-input .chat-textarea::placeholder {

    font-size: 14px;

    font-weight: 400;

    color: #BFBFBF

}



.chat-input .chat-send-box {

    text-align: right;

    position: relative

}



.chat-input .chat-send-box .chat-send {

    display: inline-block;

    height: 24px;

    line-height: 24px;

    vertical-align: middle

}



.chat-input .chat-send-box .chat-send-content-default .chat-send-img-default {

    opacity: 1

}



.chat-input .chat-send-box .chat-send-content-default {

    display: inline-block;

    margin-right: 16px;

    margin-bottom: 8px;

    padding-left: 8px;

    cursor: not-allowed;

    padding-right: 8px;

    background-color: #eee;

    font-size: 13px;

    color: #bfbfbf;

    border: 1px solid #D9D9D9;

    border-radius: 2px

}



.chat-input .chat-send-box .chat-send-content-default.active {

    cursor: pointer;

    background-color: #fff;

    border-color: #d9d9d9;

    color: #595959

}



.chat-input .chat-send-box .chat-send-img-default {

    width: 14px;

    height: auto;

    vertical-align: middle;

    margin-right: 8px

}



.chat-input .chat-send-box .chat-text-popver {

    position: absolute;

    width: 136px;

    height: 36px;

    background: #FFF;

    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .15);

    border-radius: 4px;

    font-size: 14px;

    font-weight: 400;

    color: #595959;

    bottom: 46px;

    right: 16px;

    text-align: center;

    line-height: 36px;

    z-index: 99;

    display: none

}



.chat-input .chat-send-box .chat-text-popver.active {

    display: block

}



.chat-input .chat-send-box .chat-text-popver::after {

    display: block;

    content: '';

    border-width: 7px 8px;

    border-style: solid;

    border-color: #fff transparent transparent;

    position: absolute;

    left: 65%;

    bottom: -14px;

    z-index: 99

}



@media screen and (min-width:300px) and (max-width:400px) {

    .chat-box {

        right: 0

    }

}



.chat-content-low {

    height: 200px

}