.supportchat { position: fixed !important; bottom: 1.8em; right: -0.5em; display: block !important; z-index: 999;}
#supportchat { box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;}
#chat-container { position: fixed; top: 16vh; left: 0; margin-inline: 8%; width: 84%; height: 600px; z-index: 999; border-radius: 6px; border: 1px solid #c4c4c4; box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;}
.chat-container { position: relative; display: flex; min-height: 400px; background-color: #fff; border: 1px solid #ddd; border-radius: 4px;}
.close-div { position: absolute; top: 3px; right: 3px; z-index: 99; padding: 2px; cursor:pointer;}
.close-div i { font-size: 18px;}
.chat-container .chat-left { flex: 30%; cursor: pointer;}
.chat-container .chat-messages { flex: 70%; overflow-y: auto; background-color: #DDD; border-color: transparent; border-top-right-radius: 4px; border-bottom-right-radius: 4px;}
.chat-head .avt-ele, .chat-prew .chat-message i { position: absolute; width: 42px; height: 42px; overflow: hidden; left: 10px; display: inline-block; vertical-align: middle; font-size: 18px; line-height: 42px; color: #fff; text-align: center; border-radius: 50%; font-style: normal; text-transform: uppercase;}
.chat-prew.chat-search-list { height: 550px; overflow-y: scroll;}
.chat-prew .chat-message { display: flex; padding: 10px 0px; border-bottom: 1px solid #ccc;}
.chat-prew .chat-message:hover { background-color: #F2F2F2;}
.chat-message.selected { background-color: #F2F2F2;}
.chat-prew .avt-cnt { flex: 15%; position: relative; min-width: 54px;}
.chat-prew .prw-cnt { flex: 85%;}
.chat-prew .msg-cnt, .chat-prew .nam-cnt { display: flex;}
.chat-prew .msg-ele { min-height: 20px; flex: 90%; height: 22px; overflow: hidden; text-overflow: ellipsis;}
.chat-head .avt-cnt { flex: 10%; position: relative; min-width: 54px;}
.chat-head .prw-cnt { flex: 90%;}
.chat-head .avt-ele { top: -20px;}
.nam-cnt .nam-ele { flex: 85%; font-weight: bold; position: relative;}
.nam-cnt .nam-ele .ctype:before { padding-right: 5px;}
.nam-cnt .tim-ele { flex: 15%;}
.msg-cnt .unr-ele { flex: 10%;}
.msg-cnt .unr-ele label {background-color: #28a745;display: inline-block;font-size: 12px;font-weight: 600;line-height: 1em;min-height: 1em;min-width: .9em;vertical-align: top;color: #FFF;border-radius: 1.1em;padding: 0.35em 0.45em 0.25em;text-align: center;}
.tim-ele {color: #888;font-size: 11px;}
#chat-page .message-cnt {display: flex;flex-direction: column;position: relative;padding-left: 9%;padding-right: 9%;padding-bottom: 7px;}
#chat-page .message-txt-cnt {border-radius: 7.5px;background-color: white;box-shadow: 0 1px .5px #000,.13;flex: none;font-size: 14.2px;line-height: 19px;padding: 6px 7px 8px 9px;}
.message-lft {border-top-left-radius: 0;align-items: flex-start;}
.message-rgt {border-top-right-radius: 0;align-items: flex-end;}
.message-cen {align-items: center;}
#chat-page .message-rgt .message-txt-cnt {background-color: #dcf8c6;}
#chat-page .message-cen .message-txt-cnt {background-color: lightblue;text-transform: uppercase;}
#chat-page .message-txt-cnt span.sepr {width: 57px;display: inline-block;vertical-align: middle;}
#chat-page .time-div {float: right;margin: -10px 0 -5px 4px;}
#chat-page .time-div span {color: #888;font-size: 11px;height: 15px;line-height: 15px;white-space: nowrap;}
#chat-head {display: flex;box-sizing: border-box;height: 59px;width: 100%;align-items: center;position: relative;z-index: 9;background-color: #ECECEC;}
.chat-body {flex: 1 1 0;order: 2;position: relative;z-index: 9;}
.chat-body-cnt {box-sizing: border-box;display: flex;flex-direction: column;height: 100%;overflow-x: hidden;overflow-y: scroll;position: absolute;top: 0;transition: background .3s ease-out .1s;width: 100%;z-index: 100;}
.chat-body-top {flex: 1 1 auto;min-height: 12px;}
.chat-body-bottom {flex: 0 0 auto;}
#chat-foot {min-height: 62px;order: 3;position: relative;flex: none;width: 100%;box-sizing: border-box;z-index: 1;background-color: #ECECEC;display: block;}
.chat-foot {align-items: flex-end;box-sizing: border-box;display: flex;flex-direction: row;max-width: 100%;min-height: 62px;position: relative;z-index: 2;}
.chat-foot-txt {box-sizing: border-box;flex: 1 1 auto;font-size: 15px;font-weight: 400;line-height: 20px;min-height: 20px;min-width: 0;outline: none;width: inherit;will-change: width;padding: 9px 12px 11px;margin: 5px 5px;}
.chat-foot-rgt {box-sizing: border-box;flex: none;min-height: 52px;padding: 5px 10px;}
.chat-foot-rgt a {font-size: 20px;padding: 0px 5px;}
.chat-message-cnt {display: flex;flex-direction: column;height: 100%;}
.chat-search {flex: none;}
.chat-search-cnt {flex: none;height: 49px;position: relative;display: flex;}
.chat-search-txt {box-sizing: border-box;flex: 1 1 auto;font-size: 15px;font-weight: 400;line-height: 20px;min-height: 20px;min-width: 0;outline: none;width: inherit;will-change: width;margin: 5px 5px;}
.chat-search-rgt {box-sizing: border-box;flex: none;padding: 10px 10px 10px 6px;}
.chat-search-rgt i {font-size: 20px;color: #CCC;}
.chat-msgtxt {border-bottom: 1px solid #ccc;padding: 15px 10px 5px;color: #999;font-size: 16px;text-transform: uppercase;}
.chat-search .btn-support {background-color: #DDD;border-color: #CCC;}
.chat-search .btn-support.active {background-color: #5cb85c;border-color: #4cae4c;}
.chat-search .btn-support i {font-size: 14px;color: #fff;}
.chatback {display: none;}
.avt-onl {color: darkseagreen;font-size: 70%;position: absolute;top: 15%;padding-left: 4px;}
#support #head-support .chat-popinfo {position: relative;}
#support #head-support .chat-popinfo sup {background-color: #28a745;color: #FFF;font-weight: bolder;font-size: 90%;padding: 3px 6px;border-radius: 10px;height: 16px;position: absolute;right: -10px;line-height: 10px;}
@media all and (max-width: 767px) {
    .chat-container {display: block;position: relative;}
    .chat-container .chat-left {flex: 100%;cursor: pointer;position: absolute;width: 100%;}
	.chat-container #close-chat {top: 0.5em;right: 0.5em;z-index: 99;}
    .chat-container .chat-messages {flex: 100%;overflow-y: auto;background-color: #DDD;height: 100%;position: absolute;width: 100%;}
    .chat-container.onlist .chat-messages {display: none;}
    .chat-container.onlist .chat-left {display: block;}
    .chat-container.ondetail .chat-messages {display: block;}
    .chat-container.ondetail .chat-left {display: none;}
    .chatback {display: block;font-size: 20px;position: absolute;left: 0;top: -8px;padding-left: 5px;}
    .chat-head .avt-ele {left: 25px;}
    .chat-head .prw-cnt {flex: 75%;}
    .chat-head .avt-cnt {flex: 25%;}
    .chat-search-cls {padding-inline: 10px;}
    .close-div { position: absolute; top: 7px; right: 3px; z-index: 99; padding: 4px; height: 25px;}
}