/** [QbiAI] 2022.07.26 version 8.0.5.22 **/
/** QbiAI-WebChat-Style-03.css **/
#AI3-WebChat body {
    background-color: transparent;
}

#dvSmartAgentMainFrm {
    border       : 1px solid #e06e88;
    border-radius: 15px;
}

#AI3-WebChat .accesskey_U {
    color: #e06e88 !important;
}

#AI3-WebChat .EditorZone {
    border-top: 1px solid #e06e88;
}

#MessageList {
    bottom          : 45px;
    padding         : 5px 10px;
    border-top      : 2px solid #e06e88;
    background-image: url(../../image/03/back.jpg);
}

#ChatZone {
    top             : 45px;
    background-image: url(../../image/03/back.jpg);
}

#ChatZone>#MessageList {
    bottom          : 45px;
    background-image: url(../../image/03/back.jpg);
}

#AI3-WebChat .RichMenuZone {
    height          : 45px;
    padding         : 5px 15px 0px 15px;
    background-color: #e06e88 !important;
    border-top      : 1px solid #e06e88;
}

#ToolZone {
    bottom    : 35px;
    min-height: 45px;
    background: transparent;
}

#AI3-WebChat .ChatMessageRight .ChatMessageContent {
    border          : 1px solid #b83a57;
    background-color: #b83a57;
    color           : #ffffff;
}

#AI3-WebChat .ChatMessageRight .ChatMessageContent:hover {
    border          : 1px solid #b83a57;
    background-color: #b83a57;
    color           : #ffffff;
}

#AI3-WebChat .ChatMessageContent {
    border-radius: 15px;
}

#AI3-WebChat .ChatMessageLeft .ChatMessageContent {
    border          : 1px solid #fae9ed;
    background-color: #fae9ed;
}

#AI3-WebChat .ChatMessageLeft .ChatMessageContent:hover {
    border          : 1px solid #fae9ed;
    background-color: #fae9ed;
}

#AI3-WebChat .QuickreplySlide {
    padding         : 0px !important;
    height          : 30px !important;
    font-size       : 14px;
    background-color: #b83a57 !important;
}

#AI3-WebChat .bg-color {
    background-color: #e06e88 !important;
    height          : 45px;
}

#AI3-WebChat .font-color {
    color: #ffffff !important;
}

#AI3-WebChat .ChatMessage.ChatMessageRight .ChatMessageFileContentInfo {
    color: #fff;
}

#AI3-WebChat .ChatMessage.ChatMessageRight .Link[href] {
    color: #fff;
}

#AI3-WebChat .ChatMessage.ChatMessageRight .link-text {
    color: #fff !important;
}

#AI3-WebChat .ChatMessage.ChatMessageRight label[action] {
    color: #fff;
}

#ToolZone>.swiper-container>.QuickReply_Vertical>.QuickreplySlide {
    background: #b8556c;
}

#AI3-WebChat .cardsSlide {
    background-color: white;
}

#AI3-WebChat .avatar_box .potrait .avatar_pic {
    background-color: #e06e88;
}

#AI3-WebChat .avatar_box .potrait .avatar_pic .avatar_pic_icon {
    background: url(../../image/03/camera.svg) no-repeat center center;
}

#AI3-WebChat .modal-header button {
    /* Modal Header close button */
    color: white !important;
}

#AI3-WebChat .modal-header button:hover {
    color      : #e06e88 !important;
    text-shadow: 4px 4px 3px rgba(20%, 20%, 40%, 0.5) !important;
}

#AI3-WebChat .modal-header div {
    /* Modal Header Font */
    color: white;
}

#AI3-WebChat .modal-header {
    background-color: #b83a57;
}

#AI3-WebChat .modal-footer div>button {
    background-color: #b83a57 !important;
    color           : white !important;
}

#dropdown-menu {
    /* Dropdown Menu  Background */
    background-color: white;
}

#dropdown-menu>li>span {
    color: #b83a57;
}

#AI3-WebChat .dropdown-menu .divider {
    /* Dropdown Menu  Divider */
    background-color: #e06e88;
}

#forgetPasswordlink {
    background-color: #e06e88 !important;
    color           : white !important;
    font-weight     : bold;
}

#registerAcount {
    font-weight     : bold;
    background-color: #b83a57 !important;
    color           : white !important;
}

#loginbtn {
    font-weight     : bold;
    background-color: #b83a57 !important;
    color           : white !important;
}

#AI3-WebChat .fullwidthBtn {
    background-color: #b83a57 !important;
    color           : white !important;
}

#AI3-WebChat .fullwidthBtn:hover {
    color     : white;
    box-shadow: 4px 4px 3px rgba(20%, 20%, 40%, 0.5);
}

#AI3-WebChat .btn {
    background: #b83a57;
    color     : #fff;
}

#AI3-WebChat .btn_box button {
    background: #b83a57;
    color     : #fff;
}

#AI3-WebChat .btn_box div {
    background: #b83a57;
    color     : #fff;
}

#AI3-WebChat .avatar_nickname_edit {
    color: #b83a57;
}

#AI3-WebChat .nicknamebtn {
    font-weight     : bold;
    background-color: #b83a57 !important;
    color           : white !important;
}

#s_submit {
    background : transparent;
    border     : solid 2px #e06e88;
    font-weight: bold;
    color      : #b83a57;
}

/* [QbiAI] 2022.10.27 add height */
#AI3-WebChat .rightZoneHeader {
    height       : 47px;
    border-bottom: solid 2px #b83a57;
}

#webmakecallbtn {
    color: white;
}

#webmakecallbtn:hover {
    color: #b83a57;
}

#AI3-WebChat .leave-chat {
    background: url(../../image/03/close.svg) no-repeat center center;
}

#AI3-WebChat .leave-chat:hover {
    background: url(../../image/03/close-hover.svg) no-repeat center center;
}

#ChangeEditorButton {
    background: url(../../image/03/keyboard.svg) no-repeat center center;
}

#ChangeEditorButton:hover {
    background: url(../../image/03/keyboard-hover.svg) no-repeat center center;
}

#ChangeRichMenuButton {
    background     : url(../../image/03/richmenu.png) no-repeat center center;
    background-size: contain;
}

#ChangeRichMenuButton:hover {
    background     : url(../../image/03/richmenu-hover.png) no-repeat center center;
    background-size: contain;
}


#SendButton {
    background       : url(../../image/03/sendIcon1.svg);
    background-size  : contain;
    height           : 26px !important;
    background-repeat: no-repeat;
}

#SendButton:hover {
    background       : url(../../image/03/sendIcon3.svg);
    background-size  : contain;
    height           : 26px !important;
    background-repeat: no-repeat;
}

#SendButton.active {
    background       : url(../../image/03/sendIcon2.svg);
    background-size  : contain;
    height           : 26px !important;
    background-repeat: no-repeat;
}

#audio-wave {
    background       : url(../../image/03/audio-wave.gif);
    background-size  : contain;
    height           : 26px !important;
    background-repeat: no-repeat;
    margin-left      : 5px;
}

#SpeechToTextBtn {
    background       : url(../../image/03/mic.png);
    background-size  : contain;
    height           : 26px !important;
    background-repeat: no-repeat;
    margin-left      : 5px;
}

#SpeechToTextEndBtn {
    background       : url(../../image/03/mic-animate.png);
    background-size  : contain;
    height           : 26px !important;
    background-repeat: no-repeat;
    margin-left      : 5px;
}

#play-tts-btn {
    background       : url(../../image/03/speaker.png);
    background-size  : contain;
    height           : 20px !important;
    width            : 20px !important;
    background-repeat: no-repeat;
    margin-left      : 5px;
}

#AI3-WebChat .collapseRightZone {
    background: url(../../image/03/angle-left-solid.svg) no-repeat center center;
}

#AI3-WebChat .collapseRightZone:hover {
    background: url(../../image/03/angle-left-solid-hover.svg) no-repeat center center;
}

#ApplyAgentButton {
    background     : url(../../image/03/chat.svg) no-repeat center center;
    background-size: contain;
}

#ApplyAgentButton:hover {
    background     : url(../../image/03/chat-hover.svg) no-repeat center center;
    background-size: contain;
}

#AttachmentButton {
    background     : url(../../image/03/attachment.svg) no-repeat center center;
    background-size: contain;
}

#AttachmentButton:hover {
    background     : url(../../image/03/attachment-hover.svg) no-repeat center center;
    background-size: contain;
}

#ImageButton {
    background     : url(../../image/03/image2.png) no-repeat center center;
    background-size: contain;
}

#ImageButton:hover {
    background     : url(../../image/03/image2-hover.png) no-repeat center center;
    background-size: contain;
}

#EmojiButton {
    background     : url(../../image/03/emoji-happy.svg) no-repeat center center;
    background-size: contain;
}

#EmojiButton:hover {
    background     : url(../../image/03/emoji-happy-hover.svg) no-repeat center center;
    background-size: contain;
}

#hamburger-menu {
    background     : url(../../image/03/list.svg) no-repeat center center;
    background-size: contain;
}

#hamburger-menu:hover {
    background     : url(../../image/03/list-hover.svg) no-repeat center center;
    background-size: contain;
}

#AI3-WebChat .dynamic_tab {
    border-top: solid #b8556c 1px;
}

#AI3-WebChat .dynamic_cont {
    background-image: url(../../image/03/back.jpg);
}

#AI3-WebChat .member .dynamic_tab_icon {
    background     : url(../../image/03/people_setup.svg) no-repeat center center;
    background-size: contain;
}

#AI3-WebChat .member.active .dynamic_tab_icon {
    background     : url(../../image/03/people_setup-active.svg) no-repeat center center;
    background-size: contain;
}

#AI3-WebChat .addservicerecord .dynamic_tab_icon {
    background     : url(../../image/03/servicecase.png) no-repeat center center;
    background-size: contain;
}

#AI3-WebChat .addservicerecord.active .dynamic_tab_icon {
    background     : url(../../image/03/servicecase-active.png) no-repeat center center;
    background-size: contain;
}

#AI3-WebChat .servicerecord .dynamic_tab_icon {
    background     : url(../../image/03/list.png) no-repeat center center;
    background-size: contain;
}

#AI3-WebChat .servicerecord.active .dynamic_tab_icon {
    background     : url(../../image/03/list-active.png) no-repeat center center;
    background-size: contain;
}

#AI3-WebChat .swiper-button-next {
    background-image: url("../../image/03/swiper_arrow_next.png");
}

#AI3-WebChat .swiper-button-prev {
    background-image: url("../../image/03/swiper_arrow_prev.png");
}

#LoginButton {
    background     : url(../../image/03/user-solid.svg) no-repeat center center;
    background-size: contain;
}

#LoginButton:hover {
    background     : url(../../image/03/user-solid-hover.svg) no-repeat center center;
    background-size: contain;
}

#Editor {
    border: none;
}

#AI3-WebChat .service-group-item {
    background: #efb6c3;
}

#AI3-WebChat .service-group-item:hover {
    background: #b83a57;
    color     : #fff;
}

#AI3-WebChat .hotTopic-item {
    background: #efb6c3;
}

#AI3-WebChat .hotTopic-item:hover {
    background: #b83a57;
    color     : #fff;
}

/* [QbiAI] original style */
#AI3-WebChat .chat-logo {
    width  : 25px;
    margin : 12px 5px 0px 1px;
    padding: 0px;
}

#AI3-WebChat .chat-logo img {
    width: 100%;
}

#AI3-WebChat .navbar-header {
    background-color: #e06e88;
    height          : 45px;
}

#AI3-WebChat .navbar-default {
    background-color: #e06e88 !important;
    border-color    : #e06e88 !important;
}

#AI3-WebChat .flexAlignCenter>.navbar-brand {
    margin: 12px 5px 0px 1px;
}

#AI3-WebChat .chat-nvbarTitle {
    margin-top: 3px;
}

#AI3-WebChat .RichMenuPannel {
    bottom: 45px;
}

#AI3-WebChat .QuickReply_div {
    color: #ffffff !important;
}

/* 20210409 add start */
#AI3-WebChat .logout-icon {
    width          : 15px;
    height         : 20px;
    margin-right   : 0.4rem;
    margin-top     : 1.8px;
    cursor         : pointer;
    background     : url(../../image/03/logout.svg) no-repeat center center;
    background-size: contain;
}

#AI3-WebChat .logout-icon:hover {
    width          : 15px;
    height         : 20px;
    margin-right   : 0.4rem;
    cursor         : pointer;
    background     : url(../../image/03/logout-hover.svg) no-repeat center center;
    background-size: contain;
}

#AI3-WebChat .hamburger-menu {
    width          : 20px;
    height         : 18px;
    margin-right   : 0.4rem;
    cursor         : pointer;
    background     : url(../../image/03/list.svg) no-repeat center center;
    background-size: contain;
}

#AI3-WebChat .hamburger-menu:hover {
    width          : 20px;
    height         : 18px;
    margin-right   : 0.4rem;
    cursor         : pointer;
    background     : url(../../image/03/list-hover.svg) no-repeat center center;
    background-size: contain;
}

/* 20210409 add end */

/* [QbiAI] 2022.02.16 */
#AI3-WebChat .webcallicon {
    color: #FFFFFF;
}

/* [QbiAI] 2022.07.14 */
#imgICON {
    min-width: 100px !important;
}