*{margin: 0; padding: 0;}
:root {
    --siqcw-custom-text-color: #356B58;
    --siqcw-custom-icon-color: #356B58;
    --siqcw-custom-bg-color: #356B58;
    --siqcw-custom-border-color: #356B58;
    --siqcw-visitor-bubble-gradient-color: linear-gradient(0deg,hsla(0,0%,100%,.84),hsla(0,0%,100%,.84)),var(--siqcw-custom-bg-color);
    --siqcw-common-color: #333;
    --siqcw-chatbubble-width: 65%;
    --siqcw-common-radius: 10px;
    --siqcw-header-box-shadow-bg: rgba(0,0,0,.2);
    --siqcw-tooltip-bg-color: #333;
    --siqcw-primary-color: #fff;
    --siqcw-primary-bg-color: #fff;
    --siqcw-search-close-bg: #eee;
    --siqcw-search-close-hover-bg: #ddd;
    --siqcw-search-close-dark-bg: #444;
    --siqcw-search-close-hover-dark-bg: #555;
    --siqcw-loader-bg-color: rgba(255,255,255,.3);
    --siqcw-progress-load-cont-bg: #f0f0f0;
    --siqcw-progress-load-bar-bg: rgba(0,0,0,.1);
    --zsiq-chat-cont-height: 100%;
    --siqcw-agent-bubble-bg-color: #fff;
    --siqcw-agent-msg-text-color: #333;
    --siqcw-tag-border-color: #ddd;
    --siqcw-tag-text1-color: #666;
    --siqcw-article-widget-bg-color: #fff;
    --siqcw-common-color: #333;
    --siqcw-border-color-e1: #e1e1e1;
    --siqcw-input-bg-color: #ffffff;
    --bot-widget-width: 100%;
}

.siqcw-tooltip {
    position: absolute;
    background-color: var(--siqcw-tooltip-bg-color);
    color: var(--siqcw-primary-color);
    border-radius: 4px;
    max-width: 300px;
    word-break: break-word;
    font-size: .8rem;
    padding: 4px 10px;
}
.siqcw-tooltip:before {
    content: "";
    width: 8px;
    height: 8px;
    background-color: inherit;
    transform: rotate(90deg);
    position: absolute;
}
.siqcw-tooltip .internal-link,.siqcw-tooltip a {
    color: var(--siqcw-primary-color);
}
.t-top {
    animation: .3s fadein-up ease-out;
}
.t-top:before {
    top: -4px;
    transform: rotate(45deg);
}
.t-btm {
    animation: .3s fadein-down ease-out;
}
.t-btm:before {
    bottom: -4px;
    transform: rotate(-135deg);
}
.t-lft {
    animation: .3s fadein-right ease-out;
}
.t-lft:before {
    left: -4px;
    transform: rotate(-45deg);
}
.t-rgt {
    animation: .3s fadein-left ease-out;
}
.t-rgt:before {
    right: -4px;
    transform: rotate(135deg);
}
.tL:before {
    left: 15px;
}
.tR:before {
    right: 15px;
}
.tT:before {
    top: 15px;
}
.tB:before {
    bottom: 15px;
}
.tH-C:before {
    left: 0;
    right: 0;
    margin: auto;
}
.tV-C:before {
    top: 0;
    bottom: 0;
    margin: auto;
}
.siqcw-pop-close,.siqcw-search-close {
    position: absolute;
    width: 22px;
    height: 22px;
    background-color: var(--siqcw-search-close-bg);
    border-radius: 100%;
    font-size: 12px;
    right: 10px;
    top: 0;
    bottom: 0;
    margin: auto;
    justify-content: center;
}
.siqcw-pop-close:focus-visible,.siqcw-pop-close:hover,.siqcw-search-close:focus-visible,.siqcw-search-close:hover {
    background-color: var(--siqcw-search-close-hover-bg);
    color: var(--siqcw-primary-color);
}
.siqcw-pop-close {
    background-color: var(--siqcw-search-close-dark-bg);
    right: 10px;
    top: 10px;
    bottom: auto;
}
.siqcw-pop-close:focus-visible,.siqcw-pop-close:hover {
    background-color: var(--siqcw-search-close-hover-dark-bg);
}
.siqcw-chat-cont {
    box-shadow: 0 1px 5px 0 rgba(0,0,0,.2);
    width: 100%;
    height: var(--zsiq-chat-cont-height);
    border: none;
    position: relative;
    border-radius: 18px;
    background-color: var(--siqcw-primary-bg-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
@keyframes loader-anim {
    0% {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(1turn);
    }
}
.cir-loader {
    height: 1em;
    width: 1em;
    background-color: transparent;
    border-width: 3px;
    border-style: solid;
    border-color: #939393 hsla(0,0%,57.6%,.3) hsla(0,0%,57.6%,.3);
    border-radius: 100%;
    animation: loader-anim .6s linear infinite;
    font-size: inherit;
}
.white-load {
    border-color: #fff var(--siqcw-loader-bg-color) var(--siqcw-loader-bg-color);
}
.skel-load {
    background-color: var(--siqcw-progress-load-cont-bg);
    border-radius: 4px;
    display: flex;
    align-items: center;
    position: relative;
}
.skel-load:after {
    content: "";
    background-color: var(--siqcw-progress-load-bar-bg);
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    width: 15px;
    filter: blur(5px);
    animation: skel-load 1s infinite;
}
.skel-load-title {
    height: 17px;
}
.skel-load-desc {
    height: 10px;
}
.skel-load-rhs {
    border-radius: 3px;
}
.skel-load-prof {
    border-radius: 100%;
}
.w75 {
    width: 75%;
}
.w50 {
    width: 50%;
}
.w40 {
    width: 40%;
}
.w-92 {
    width: 92px;
}
.w-120 {
    width: 120px;
}
@keyframes skel-load {
    0% {
        left: 0;
    }
    to {
        left: 100%;
    }
}
@keyframes fadein-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes fadein-down {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes fadein-left {
    from {
        opacity: 0;
        transform: translateX(10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes fadein-right {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
.w100 {
    width: 100%;
}
.siqcw-name-cont {
    position: relative;
}
.posrel {
    position: relative;
}
.mR5 {
    margin-right: 5px;
}
.textL {
    text-align: left;
}
.font13 {
    font-size: 13px;
}
.siqcw-name-div {
    display: block;
}
.elips {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.widget-layout {
    display: flex;
    flex-direction: column;
}
.h100 {
    height: 100%;
}
.flex {
    display: flex;
}
.fdirection {
    flex-direction: column;
}
.wh100 {
    width: 100%;
    height: 100%;
}
.img-container {
    width: 100%;
}
.siqcw-image {
    max-width: 100%;
    height: auto;
}
.cur-zoomin {
    cursor: zoom-in;
}
.widget-container {
    /* width: 100%; */
}
.chat-bubble {
    background-color: var(--siqcw-agent-bubble-bg-color);
    color: var(--siqcw-agent-msg-text-color);
    margin-top: 4px;
    display: inline-block;
    max-width: 100%;
}
.chat-bubble.past-bot-msg.widget-card {
    min-width: min-content;
}
.chat-bubble.past-bot-msg.bookings-widget,
.chat-bubble.past-bot-msg.crm-booking-card {
    min-width: var(--siqcw-chatbubble-width);
}
.tag-wrap .tag-div:not(:hover,:focus-visible,.sel) {
    border: 1px solid var(--siqcw-tag-border-color);
    color: var(--siqcw-tag-text1-color);
}
.last_msg .widget-layout .time-slot-btn .widget-footer-btn,
.widget-layout .time-slot-btn .widget-footer-btn {
    border-radius: 0;
}
.article-widget {
    padding: 0;
    background-color: var(--siqcw-article-widget-bg-color);
}
.article-widget .img-container {
    width: auto;
}
.article-widget .widget-container {
    width: 100%;
    padding: 8px 14px 20px;
}
.article-widget .siqcw-image {
    border-radius: 0;
}
.article-widget .clrB {
    color: var(--siqcw-common-color);
    text-decoration: underline;
}
.video-widget {
    padding: 0;
}
.video-widget .widget-container {
    width: 100%;
    padding-bottom: 20px;
}
.video-widget .img-container,
.video-widget .siqcw-image {
    border-radius: 0;
}
.video-widget .clrB {
    color: var(--siqcw-common-color);
    border-bottom: none;
}
.video-widget .siqcw-image {
    padding: 0 12px;
}
.attach-img {
    padding: 0;
}
.attach-img .widget-container {
    width: 100%;
    padding: 8px 14px 20px;
}
.widget-card {
    padding: 0;
    min-width: var(--siqcw-chatbubble-width);
    margin-bottom: 10px;
}
.widget-card .widget-container {
    width: 100%;
    padding-bottom: 30px;
}
.flexC {
    display: flex;
    align-items: center;
}
.clr3 {
    color: #333;
}
.fshrink {
    flex-shrink: 0;
}
.sel-country-wrp {
    padding: 8px 12px;
    background: #f5f5f5;
    border-radius: 4px;
}
.curP {
    cursor: pointer;
}
.v-divider {
    width: 1px;
    height: 24px;
    background: #e0e0e0;
}
.mLR10 {
    margin-left: 10px;
    margin-right: 10px;
}
.w100 {
    width: 100%;
}
.h100 {
    height: 100%;
}
.siqcw-input {
    border: none;
    outline: none;
    padding: 8px 12px;
    font-size: 14px;
    background: transparent;
}
.pR15 {
    padding-right: 15px;
}
.posrel {
    position: relative;
}
.justifyE {
    justify-content: flex-end;
}
.theme-blue-clr {
    color: #007aff;
}
.font14 {
    font-size: 14px;
}
.lineN {
    line-height: normal;
}
.mL5 {
    margin-left: 5px;
}
.bubble-time {
    padding: 4px 0;
    color: #999;
    font-size: 12px;
}
.chat-bubble-cont {
    width: 100%;
}
.input-widget {
    padding: 12px;
}
.siqcw-input-cont {
    margin-top: 12px;
    padding: 8px;
    background: #f5f5f5;
    border-radius: 8px;
}
.clr3 {
    color: var(--siqcw-common-color);
}
.input-wid {
    height: 38px;
    border-radius: 8px;
    border: solid 1px var(--siqcw-border-color-e1);
    margin: 8px 0;
    padding: 0 15px;
    background-color: var(--siqcw-input-bg-color);
    width: var(--bot-widget-width);
}
.wh100 {
    width: 100%;
    height: 100%;
}
.flexC {
    display: flex;
    align-items: center;
}
.fshrink {
    flex-shrink: 0;
}
.sel-country-wrp {
    padding: 8px 12px;
}
.curP {
    cursor: pointer;
}
.font14 {
    font-size: 14px;
}
.elips {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.siqico-darrow {
    font-style: normal;
}
.clrA {
    color: #999;
}
.ifont16 {
    font-size: 16px;
}
.mL5 {
    margin-left: 5px;
}
.v-divider {
    width: 1px;
    height: 24px;
    background: #ddd;
}
.mLR10 {
    margin-left: 10px;
    margin-right: 10px;
}
.posrel {
    position: relative;
}
.pR15 {
    padding-right: 15px;
}

.text-center::after{content: ' '; display: inline-block; width: 0; height: 100%; vertical-align: middle; margin-top: 4px;}
body{font-size: 15px; background-color：#ffffff00; font-family: "Microsoft YaHei","宋体", Arial, "新宋体";}
.clearfix::after{ content:""; display:block; clear:both;}
.service{width: 100%; max-width: 640px; height: 100%; position: fixed; left: 0; right: 0; margin:auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
.pc-service{width: 372px; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
.msg-head{height: 40px;color: #fff;font-size: 17px;text-align: center;position: relative;display: flex;align-items: center;justify-content: center;z-index: 1}
.msg-head:after {
    content: "";
    width: 100%;
    height: 100%;
    box-shadow: 0 1px 5px 0 var(--siqcw-header-box-shadow-bg);
    position: absolute;
    left: 0;
    background-color: var(--siqcw-custom-bg-color);
    z-index: 0
}
.msg-head a{width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;position: absolute;left: 2px;text-decoration: none;color: #ffffff;z-index: 2}
.msg-head > span {
    z-index: 2;
    position: relative;
}
.msg-head a i{font-size: 22px;}
.msg-head .tha{height: 20px; line-height:22px;}
.msg-head .thb{height:20px; line-height:20px; font-size:16px;}
.msg-box{-webkit-box-flex: 1;-ms-flex: 1;flex: 1;background-color: #ffffff;padding: 10px 10px 0;line-height: 1.3;-webkit-box-sizing: border-box;box-sizing: border-box;overflow-y: auto;} 
.msg{margin-bottom: 10px;display: flex;flex-direction: column;}
.msg:last-of-type{margin-bottom: 16px}
.msg .img1{width:45px; height: 45px; float: left;display: none;}
.msg .img2{display: none;}
.msg .content{/* max-width: 65%; */float: left;/* border: 1px solid #f1eded; */border-radius: 10px;/* background-color: #f5f5f5; */margin: 6px 0 0 0;padding: 8px;-webkit-box-sizing: border-box;box-sizing: border-box;position: relative;text-align: justify;}
.content .indicate{width: 0; height: 0; border: 12px solid; border-color: transparent; position: absolute; top: 5px;}
.msg .content .left-indicate{border-right-color: #fff;  left: -20px;}
.msg .content .right-indicate{display: none;}
.msg.on .img1{display: none;}
.msg.on{display: flex; justify-content: flex-end; align-items: flex-start; flex-direction: column; }
.msg.on .img1{display: none;}
.msg.on .siqcw-name-cont{text-align: right;}
.msg.on .img2{width:45px; height: 45px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: bold; color: #333; order: 2; flex-shrink: 0; }
/* 客服消息样式 */
.msg:not(.on) .siqcw-name-cont{text-align: left;}
.msg:not(.on) .content{margin: 0;padding: 0;align-self: flex-start;}
.msg:not(.on) .chat-bubble{background-color: #f5f5f5;color: #333;margin-top: 4px;padding: 10px 14px;border-radius: 10px;word-break: break-word;/* border: 1px solid #f1eded; */}

/* 用户消息样式 */
.msg.on .content{margin: 0;padding: 0;order: 1;align-self: flex-end;}
.msg.on .chat-bubble{background: var(--siqcw-visitor-bubble-gradient-color);color: var(--siqcw-common-color);margin-top: 4px;padding: 10px 14px;border-radius: var(--siqcw-common-radius);word-break: break-word;}

/* 通用样式 */
.textmsg-div{display: flex;align-items: center;}
.virtual-div{display: inline-block;vertical-align: middle;}
.flexC{display: flex;align-items: center;}
.bubble-time{color: #999;font-size: 12px;margin-top: 8px;justify-content: flex-end;}
.justifyE{justify-content: flex-end;}
.msg.on .content .left-indicate{display: none;}
.msg.on .content .right-indicate{/* border-left-color: var(--siqcw-custom-bg-color); *//* right: -20px; *//* display: block; */}
.msg-box p{margin-top: -6px}
input, textarea{border: none;} 
input:focus, textarea:focus{outline: none; outline-offset: 0;}
.msg-post{height: 50px; background-color: #eeeeee; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 6px; -webkit-box-sizing: border-box; box-sizing: border-box;}
.msg-post textarea{-webkit-box-flex: 1; -ms-flex: 1; flex: 1;}
.msg-post label{position: absolute; right: 90px; bottom: 5px; height: 38px; line-height: 38px;}
.msg-post label .iconfont{font-size: 36px; color: #c2c2c3; vertical-align: -1px;}
.msg-post input[type="file"]{display: none;}
.msg-post .Btn, .msg-post button, .msg-post input[type="button"]{padding: 0 12px; font-size: 18px; margin-left: 8px; background-color: #356B58; border-radius: 50%; color: #fff; cursor: pointer; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: none;}
.send-icon {
    font-style: normal;
    transform: rotate(0deg);
}
.msg-post .back{width: 50px; line-height: 38px; text-align: center; background-color: #35ace0; border-radius: 3px;}
.msg-post .back a{text-decoration:none; color:inherit;}

.service-box{-webkit-box-flex: 1;-ms-flex: 1;flex: 1; font-size: 14px; background-color: #ffffff00; overflow-y: auto; vertical-align: baseline;}
.user-box{padding: 10px 10px 0;}
.user-box a{text-decoration:none; color:inherit;}
.user-list{height: 46px; background-color: #f2f2f2; padding: 5px; display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 10px; border-radius: 5px;}
.user-list img{width: 46px;}
.user-list .user{margin-left: 6px; padding-top: 3px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; width: 0;}
.user-list .user .name{height: 23px; line-height: 23px; font-size: 17px; color: #333;}
.user-list .user .name .ison{margin-left: 6px; font-size: 13px; color: #860808; vertical-align: 1px;}
.user-list .user .last-msg{height: 20px; line-height: 20px; color: #808080; padding-left: 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.user-list .data{width: 82px; text-align: right;}
.user-list .data .time{height: 27px; line-height: 27px; color: #555;}
.user-list .data .num{ width: 20px; height: 17px; border-radius: 8px; background-color: red; color: #fff; text-align: center; line-height: 19px;margin-left: 62px;}
.foot{height: 38px; background-color: #ffffff00; padding: 6px; display: -webkit-box; display: -ms-flexbox; display: flex; padding-right: 0;}
.foot > div{-webkit-box-flex: 1;-ms-flex: 1;flex: 1; padding: 1px; margin-right: 6px; background-color: #F4C249; border-radius: 5px; color: #fff; text-align: center; line-height: 38px;}
.foot a{display: block; height: 100%; text-decoration:none; color:inherit;}

.pc-main{width: 1014px; height: 100%; position: fixed; left: 0; right: 0; margin:auto;}
.pc-left{width: 372px; height:100%; float: left; border:1px solid #ffffff00; border-right: none; -webkit-box-sizing: border-box; box-sizing: border-box;}
.pc-right{width: 642px; height:100%; float: left; border:1px solid #ffffff00; -webkit-box-sizing: border-box; box-sizing: border-box;}

.flex {display: flex;}
.fdirection {flex-direction: column;}
.w100 {width: 100%;}
.mB20 {margin-bottom: 20px;}
.siqcw-vismsg-grp {}
.flexE {justify-content: flex-end;}
.textR {text-align: right;}
.textL {text-align: left;}
.font13 {font-size: 13px;}
.chat-bubble-cont {}
.single_msg {}
.past-bot-msg {}
.textmsg-div {}
.mL10 {margin-left: 10px;}
.dib-mid {display: inline-block; vertical-align: middle;}
.bubble-time {}
.img-container {width: 100%;}
.siqcw-image {max-width: 100%; height: auto;}
.cur-zoomin {cursor: zoom-in;}
.widget-container { /* width: 100%; */ }
.mT15 {margin-top: 15px;}
.wh100.textR.mT15 {text-align: center !important; display: flex; justify-content: center; gap: 15px;}
.tag-div {padding: 10px 16px; background-color: #356B58; color: #fff; border-radius: 20px; cursor: pointer; display: inline-block;}
.tag-div:hover {background-color: #2a5545;}
.sug-tag-wid {}
.mB10 {margin-bottom: 0px;}
.textC {text-align: center;}
.clr9 {color: #999;}
.p15 {padding: 15px;}
.pT10 {padding-top: 10px;}
.pB10 {padding-bottom: 10px;}