/*
 Main Css File For This Plugin
 Desgin by elies in 2022/06/20
 QQ Group 943535956
 More Addon Download https://addon.dismall.com/developer-99014.html
 Css Version 1.1
*/

/* define common css */
#viewui-robot{width: 100%;font-family: 'Microsoft YaHei';font-size: 12px;color: #5d5d5d;margin: 5px 0;}
#viewui-robot .viewui-robot-main{display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;border: 1px solid #e2e2e2;border-top: 0;-webkit-border-radius: 0 0 10px 10px;-ms-border-radius: 0 0 10px 10px;-o-border-radius: 0 0 10px 10px;-moz-border-radius: 0 0 10px 10px;border-radius: 0 0 10px 10px;background: #ffffff;}

/* define header css */
#viewui-robot .viewui-robot-header{height: 56px;line-height: 56px;background: #edf2f8;border: 1px solid #e2e2e2;border-bottom: 0;-webkit-border-radius: 10px 10px 0 0;-ms-border-radius: 10px 10px 0 0;-o-border-radius: 10px 10px 0 0;-moz-border-radius: 10px 10px 0 0;border-radius: 10px 10px 0 0;padding-left: 20px;cursor: default;}
#viewui-robot .viewui-robot-header h3{display: inline-block;height: 100%;font-size: 1.33em;color: #415772;font-weight: 700;}
#viewui-robot .viewui-robot-header span{font-size: 1em;color: #5d6f87;padding-left: 10px;}

/* define section css  */
#viewui-robot .viewui-robot-section{display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-direction: normal;-webkit-box-orient: vertical;-moz-flex-direction: column;-webkit-flex-direction: column;flex-direction: column;width: 100%;}
#viewui-robot .viewui-robot-section-openaside{width: 70%;}
#viewui-robot .viewui-robot-section-openaside #viewui-robot-talklist,#viewui-robot .viewui-robot-section-openaside .viewui-robot-input{border-right: 1px solid #e2e2e2;}
#viewui-robot .viewui-robot-section #viewui-robot-talklist{height: 300px;overflow-y: scroll;-moz-flex-grow: 1;-webkit-flex-grow: 1;flex-grow: 1;padding-top: 15px;}
#viewui-robot .viewui-robot-section #viewui-robot-talklist .viewui-robot-talklist-date{text-align: center;margin-bottom: 15px;}
#viewui-robot .viewui-robot-section #viewui-robot-talklist .viewui-robot-talklist-date span{display: inline-block;padding: 0 28px;height: 24px;line-height: 24px;background: #f3f3f3;font-size: 1em;color: #a2a2a2;-webkit-border-radius: 10px;-ms-border-radius: 10px;-o-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;}
#viewui-robot .viewui-robot-section #viewui-robot-talklist .viewui-robot-talklist-talk{padding: 0 20px;overflow: hidden;margin-bottom: 20px;}
#viewui-robot .viewui-robot-section #viewui-robot-talklist .viewui-robot-talklist-talk:last-child{margin-bottom: 0;}
#viewui-robot .viewui-robot-section #viewui-robot-talklist .viewui-robot-talklist-talk .viewui-robot-talklist-avatar{float: right;display: inline-block;width: 47px;height: 47px;margin-left: 15px;}
#viewui-robot .viewui-robot-section #viewui-robot-talklist .viewui-robot-talklist-talk .viewui-robot-talklist-avatar img{width: 48px; height: 48px;-webkit-border-radius: 100px;-ms-border-radius: 100px;-o-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;border: 1px solid #e2e2e2;}
#viewui-robot .viewui-robot-section #viewui-robot-talklist .viewui-robot-talklist-talk .viewui-robot-talklist-info{float: right;width: 80%;}
#viewui-robot .viewui-robot-section #viewui-robot-talklist .viewui-robot-talklist-talk .viewui-robot-talklist-info .viewui-robot-talklist-info-name{font-size: 1em;color: #a2a2a2;text-align: right;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
#viewui-robot .viewui-robot-section #viewui-robot-talklist .viewui-robot-talklist-talk .viewui-robot-talklist-info .viewui-robot-talklist-info-message{position: relative;float: right;min-height: 20px;background: #d7ebff;padding: 10px 12px;-webkit-border-radius: 6px;-ms-border-radius: 6px;-o-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;margin: 5px 0;font-size: 1.083em;line-height: 1.54;color: #565656;word-break: break-all;word-wrap: break-word;}
#viewui-robot .viewui-robot-section #viewui-robot-talklist .viewui-robot-talklist-talk .viewui-robot-talklist-info .viewui-robot-talklist-info-message:before{content: '';position: absolute;top: 10px;right: -6px;width: 0;height: 0;border-bottom: 4.6px solid transparent;border-left: 6.7px solid #d7ebff;border-top: 5.3px solid transparent;}
#viewui-robot .viewui-robot-section #viewui-robot-talklist .viewui-robot-talklist-robot .viewui-robot-talklist-avatar{float: left;margin-left: 0;margin-right: 15px;}
#viewui-robot .viewui-robot-section #viewui-robot-talklist .viewui-robot-talklist-robot .viewui-robot-talklist-info{float: left;}
#viewui-robot .viewui-robot-section #viewui-robot-talklist .viewui-robot-talklist-robot .viewui-robot-talklist-info .viewui-robot-talklist-info-name{text-align: left;}
#viewui-robot .viewui-robot-section #viewui-robot-talklist .viewui-robot-talklist-robot .viewui-robot-talklist-info .viewui-robot-talklist-info-message{float: left;background: #f3f3f3;}
#viewui-robot .viewui-robot-section #viewui-robot-talklist .viewui-robot-talklist-robot .viewui-robot-talklist-info .viewui-robot-talklist-info-message:before{content: '';position: absolute;top: 10px;left: -6px;right: 0;width: 0;height: 0;border-top: 4.6px solid transparent;border-bottom: 5.3px solid transparent;border-right: 6.7px solid #f3f3f3;border-left: none;}
#viewui-robot .viewui-robot-section #viewui-robot-talklist .viewui-robot-talklist-info .viewui-robot-talklist-info-message a{color: blue;text-decoration: underline;cursor: pointer;}
#viewui-robot .viewui-robot-section #viewui-robot-talklist .viewui-robot-talklist-info .viewui-robot-talklist-info-message a[onclick]{text-decoration: none;}
#viewui-robot .viewui-robot-section #viewui-robot-talklist .viewui-robot-talklist-info .viewui-robot-talklist-info-questionlist{width: 50%;
border: 1px solid #ededed;padding: 8px 10px;margin: 5px 0;-webkit-border-radius: 6px;-ms-border-radius: 6px;-o-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;}
#viewui-robot .viewui-robot-section #viewui-robot-talklist .viewui-robot-talklist-info .viewui-robot-talklist-info-questionlist .viewui-robot-talklist-info-questionlist-title{font-size: 1.083em;color: #a2a2a2;letter-spacing: .9px;border-bottom: 1px solid #ededed;padding-bottom: 8px;cursor: default;}
#viewui-robot .viewui-robot-section #viewui-robot-talklist .viewui-robot-talklist-info .viewui-robot-talklist-info-questionlist .viewui-robot-talklist-info-questionlist-title:before{content: '';display: inline-block;width: 17px;height: 17px;background: url(../image/question.png) center no-repeat;vertical-align: middle;margin-right: 2px;}
#viewui-robot .viewui-robot-section #viewui-robot-talklist .viewui-robot-talklist-info .viewui-robot-talklist-info-questionlist ul li{border-bottom: 1px solid #ededed;cursor: pointer;padding-left: 3px;background: url(../image/arrow.png) right center no-repeat;padding-right: 9px;}
#viewui-robot .viewui-robot-section #viewui-robot-talklist .viewui-robot-talklist-info .viewui-robot-talklist-info-questionlist ul li:last-child{border-bottom: 0;}
#viewui-robot .viewui-robot-section #viewui-robot-talklist .viewui-robot-talklist-info .viewui-robot-talklist-info-questionlist ul li a{display: block;font-size: 1.083em;line-height: 28px;color: #565656;text-decoration: none;}
#viewui-robot .viewui-robot-section #viewui-robot-talklist .viewui-robot-talklist-info .viewui-robot-talklist-info-questionlist ul li a:hover{color: #5497da;}
#viewui-robot .viewui-robot-section .viewui-robot-input{min-height: 190px;-moz-flex-grow: 0;-webkit-flex-grow: 0;flex-grow: 0;}
#viewui-robot .viewui-robot-section .viewui-robot-input .viewui-robot-input-box{height: 32px;}
#viewui-robot .viewui-robot-section .viewui-robot-input .viewui-robot-input-box ul{height: 24px;padding: 3px 15px 0 15px;overflow: hidden;}
#viewui-robot .viewui-robot-section .viewui-robot-input .viewui-robot-input-box ul li{float: left;border: 1px solid #e2e2e2;height: 22px;line-height: 22px;-webkit-border-radius: 10px;-ms-border-radius: 10px;-o-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;text-align: center;cursor: pointer;margin-right: 5px;}
#viewui-robot .viewui-robot-section .viewui-robot-input .viewui-robot-input-box ul li a{display: block;padding: 0 8px;font-size: 1em;color: #a2a2a2;text-decoration: none;}
#viewui-robot .viewui-robot-section .viewui-robot-input .viewui-robot-input-box ul li:hover{border: 1px solid;border-color: #4ca5f1;background: #4ca5f1;}
#viewui-robot .viewui-robot-section .viewui-robot-input .viewui-robot-input-box ul li:hover a{color: #ffffff;}
#viewui-robot .viewui-robot-section .viewui-robot-input .viewui-robot-input-tools{border-top: 1px solid #e2e2e2;}
#viewui-robot .viewui-robot-section .viewui-robot-input .viewui-robot-input-tools ul{padding: 8px 15px 0 15px;overflow: hidden;}
#viewui-robot .viewui-robot-section .viewui-robot-input .viewui-robot-input-tools ul li{float: left;margin-right: 10px;}
#viewui-robot .viewui-robot-section .viewui-robot-input .viewui-robot-input-tools ul li a{display: inline-block;width: 22px;height: 22px;cursor: pointer;text-decoration: none;}
#viewui-robot .viewui-robot-section .viewui-robot-input .viewui-robot-input-tools ul li a:hover{opacity: .7;}
#viewui-robot .viewui-robot-section .viewui-robot-input .viewui-robot-input-tools ul li a.enlargefont{background: url(../image/enlargefont.png) center no-repeat;background-size: 20px;}
#viewui-robot .viewui-robot-section .viewui-robot-input .viewui-robot-input-tools ul li a.reducefont{background: url(../image/reducefont.png) center no-repeat;background-size: 20px;}
#viewui-robot .viewui-robot-section .viewui-robot-input .viewui-robot-input-tools ul li a.clear{background: url(../image/clear.png) center no-repeat;background-size: 18px;}
#viewui-robot .viewui-robot-section .viewui-robot-input .viewui-robot-input-tools ul li a.closemusic{background: url(../image/closemusic.png) center no-repeat;background-size: 18px;}
#viewui-robot .viewui-robot-section .viewui-robot-input .viewui-robot-input-tools ul li a.openmusic{background: url(../image/openmusic.png) center no-repeat;background-size: 18px;}
#viewui-robot .viewui-robot-section .viewui-robot-input .viewui-robot-input-textarea{padding: 3px 15px 10px 15px;}
#viewui-robot .viewui-robot-section .viewui-robot-input .viewui-robot-input-textarea textarea{outline: none;width: 100%;height: 75px;border: 0;font-size: 1.1em;color: #5d5d5d;}
#viewui-robot .viewui-robot-section .viewui-robot-input .viewui-robot-input-textarea textarea::-webkit-input-placeholder{color: #c3c3c3;font-size: 1.083em;}
#viewui-robot .viewui-robot-section .viewui-robot-input .viewui-robot-input-footer{padding: 0 15px;padding-bottom: 5px;text-align: right;}
#viewui-robot .viewui-robot-section .viewui-robot-input .viewui-robot-input-footer .viewui-robot-input-font{float: left;font-size: 1.083em;}
#viewui-robot .viewui-robot-section .viewui-robot-input .viewui-robot-input-footer #viewui-robot-input-fontcount{font-weight: 700;margin: 3px;}
#viewui-robot .viewui-robot-section .viewui-robot-input .viewui-robot-input-footer button{background: #4ca5f1;border: 0;box-shadow: none;font-size: 1.16em;color: #ffffff;padding: 3px 10px;-webkit-border-radius: 5px;-ms-border-radius: 5px;-o-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;cursor: pointer;}
#viewui-robot .viewui-robot-section .viewui-robot-input .viewui-robot-input-footer button:hover{opacity: .9;}

/* define aside css */
#viewui-robot .viewui-robot-aside{width: 30%;background: #ffffff;}
#viewui-robot .viewui-robot-aside .viewui-robot-aside-title{font-size: 1.16em;color: #a2a2a2;height: 24px;line-height: 24px;padding-left: 8px;margin-bottom: 5px;cursor: default;}
#viewui-robot .viewui-robot-aside .viewui-robot-aside-box{padding-left: 10px;padding-bottom: 15px;margin: 10px 0;border-bottom: 1px solid #e2e2e2;}
#viewui-robot .viewui-robot-aside .viewui-robot-aside-box ul{overflow: hidden;}
#viewui-robot .viewui-robot-aside .viewui-robot-aside-box ul li{float: left;width: 72px;height: 80px;margin: 0 8px;margin-bottom: 10px;}
#viewui-robot .viewui-robot-aside .viewui-robot-aside-box ul li a{display: block;width: 100%;height: 100%;text-decoration: none;}
#viewui-robot .viewui-robot-aside .viewui-robot-aside-box ul li .viewui-robot-aside-box-icon{width: 60px;height: 60px;-webkit-border-radius: 4px;-ms-border-radius: 4px;-o-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;margin: 0 auto;}
#viewui-robot .viewui-robot-aside .viewui-robot-aside-box ul li .viewui-robot-aside-box-icon img{display: block;margin: 0 auto;padding-top: 17px;}
#viewui-robot .viewui-robot-aside .viewui-robot-aside-box ul li a span{display: block;text-align: center;color: #565656;font-size: 1em;margin-top: 3px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
#viewui-robot .viewui-robot-aside .viewui-robot-aside-box ul li:hover .viewui-robot-aside-box-icon{background: #f3f6fa;}
#viewui-robot .viewui-robot-aside .viewui-robot-aside-questions{padding-left: 10px;}
#viewui-robot .viewui-robot-aside .viewui-robot-aside-questions ul{padding-left: 10px;}
#viewui-robot .viewui-robot-aside .viewui-robot-aside-questions ul li{height: 26px;line-height: 26px;display: block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
#viewui-robot .viewui-robot-aside .viewui-robot-aside-questions ul li a{color: #5d5d5d;font-size: 1em;text-decoration: none;}
#viewui-robot .viewui-robot-aside .viewui-robot-aside-questions ul li a::before{content: '';display: inline-block;width: 4px;height: 4px;background: #000000;border-radius: 100px;vertical-align: middle;margin-right: 8px;}
#viewui-robot .viewui-robot-aside .viewui-robot-aside-questions ul li:hover a{color: #4ca5f1;}