*{padding: 0;margin: 0;}
/*全局滚动条*/
::-webkit-scrollbar {width: 6px;height: 6px;background-color: transparent;}
::-webkit-scrollbar-thumb {border-radius: 10px;background-color: #dadada;}
::-webkit-scrollbar-track {border-radius: 10px;background-color: transparent;}
html{width: 100%;height: 100%;}
img{width: 100%;height: 100%;display: block;}
.login-box{padding: 20px;}
.login-box h3{font-size: 16px;padding-bottom: 10px;}
.login-box .tips{background-color: #e5f5ff;border: 1px solid #87d5ff; padding: 10px 15px;color: #015480;font-size: 14px; line-height: 17px;word-break: break-all;}
.login-box .tips img{width: 20px;height: 20px;display: inline-block;border-radius: 4px;margin-left: 5px;}
.login-box .btn{padding: 10px 0;}
.login-box p{text-align: right;}
.login-box p a{color: #04498c;font-size: 12px;}

.csimbody{width: 100%;height: 100%;background: #eff8ff;padding: 40px;box-sizing: border-box;}
.csimbody .loading{position: absolute;top:0;left:0;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;background: #f3f5f8;z-index: 999999;}
.csimbody .loading i{display: inline-block;font-size:40px;color: #999;}
.csimbody .csimbox{width: 100%;height: 100%;background-image: linear-gradient(0deg, #fff, #f3f5f8);box-shadow: 8px 8px 20px 0 rgba(55, 99, 170, .19);border-radius: 10px;overflow: hidden;display: flex;justify-content: flex-start;}
/*侧边*/
.csimbody .csimbox .csim-side{width: 60px;height: 100%;background: linear-gradient(131deg, #2F6CFF 18.16%, #2F9BFF 92.34%);display: flex;justify-content: space-between;flex-direction: column;padding: 20px 10px;box-sizing: border-box;}
.csimbody .csimbox .csim-side .top .logo{width: 40px;height: 40px;margin-bottom: 5px;overflow: hidden;border-radius: 4px;}
.csimbody .csimbox .csim-side .bottom{width: 100%;display: flex;flex-direction: column;gap: 4px;}
.csimbody .csimbox .csim-side .btn{width: 100%;font-size: 12px;color: #fff;text-align: center;cursor: pointer;white-space: nowrap;overflow: hidden;}
/*左边*/
.csimbody .csimbox .csim-left{width: 400px;height: 100%;background: #fff;}
.csimbody .csimbox .csim-left .top{width: 100%;padding: 12px 15px;background: #fff;box-sizing: border-box;}
.csimbody .csimbox .csim-left .top .widget{width: 100%;display: flex;justify-content: space-between;align-content: center;gap: 10px;}
.csimbody .csimbox .csim-left .top .widget .search{width: 100%;flex: 1;background: #f2f2f2;display: flex;justify-content: flex-start;align-items: center;padding: 0 12px;box-sizing: border-box;gap: 10px;}
.csimbody .csimbox .csim-left .top .widget .search .icon{line-height: 30px;font-size: 14px;color: #999;}
.csimbody .csimbox .csim-left .top .widget .search input{width: 100%;flex: 1;height: 30px;background: transparent;border: 0;}
.csimbody .csimbox .csim-left .top .widget .add{width: 30px;height: 30px;background: #f2f2f2;display: flex;justify-content: center;align-items: center;color: #999;font-size: 15px;cursor: pointer;}
.csimbody .csimbox .csim-left .top .type{width: 100%;height: 40px;width: 100%;height: 40px;display: flex;justify-content: space-between;align-items: center;}
.csimbody .csimbox .csim-left .top .type .ta{line-height: 40px;font-size: 16px;color: #333;position: relative;transition: all .3s ease-in-out;cursor: pointer;}
.csimbody .csimbox .csim-left .top .type .ta text{width: 0;height: 3px;border-radius: 2px;background: #2F6CFF;display: block;position: absolute;bottom: 6px;left: 50%;transform: translateX(-50%);}
.csimbody .csimbox .csim-left .top .type .ta.on{color: #2F6CFF;}
.csimbody .csimbox .csim-left .top .type .ta.on text{width: 30px;transition: all .3s ease-in-out;}
.csimbody .csimbox .csim-left .list{width: 100%;height: calc(100% - 95px);overflow-y: auto;padding: 0 5px;box-sizing: border-box;position: relative;}
.csimbody .csimbox .csim-left .list .loading{background: #fff;height: 50%;}
.csimbody .csimbox .csim-left .list .li{width: 100%;display: flex;padding: 10px 10px;box-sizing: border-box;display: flex;justify-content: flex-start;align-items: center;gap: 10px;border-bottom: 1px solid #f9f9f9;cursor: pointer;transition: all .3s ease-in-out;border-radius: 0;}
.csimbody .csimbox .csim-left .list .li:hover {background-color: #f2f2f2;cursor: pointer;border-radius: 4px;}
.csimbody .csimbox .csim-left .list .li.on{background-color: #f2f2f2;}
.csimbody .csimbox .csim-left .list .li .img{width: 40px;height: 40px;border-radius: 4px;overflow: hidden;}
.csimbody .csimbox .csim-left .list .li .info{width: calc(100% - 50px);}
.csimbody .csimbox .csim-left .list .li .info .title{width: 100%;display: flex;justify-content: space-between;align-items: center;}
.csimbody .csimbox .csim-left .list .li .info .title .h1{flex: 1;font-size: 14px;color: #333;display: flex;justify-content: flex-start;align-items: center;}
.csimbody .csimbox .csim-left .list .li .info .title .h1 .tags{border-radius: 2px;transform: scale(.8);border: 1px solid #2F6CFF;}
.csimbody .csimbox .csim-left .list .li .info .title .h1 .tags span{font-size: 12px;padding: 0 4px;color: #2F6CFF;}
.csimbody .csimbox .csim-left .list .li .info .title .h1 text{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;flex: 1;}
.csimbody .csimbox .csim-left .list .li .info .title .time{width: 95px;margin-left: 10px;display: flex;justify-content: flex-end;align-items: center;font-size: 12px;color: #999;gap: 5px;}
.csimbody .csimbox .csim-left .list .li .info .title .time .muted{width:16px;height: 16px;}
.csimbody .csimbox .csim-left .list .li .info .text{margin-top: 4px;font-size: 14px;color: #aaa;padding-right: 20px;box-sizing: border-box;position: relative;}
.csimbody .csimbox .csim-left .list .li .info .text .txt{width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.csimbody .csimbox .csim-left .list .li .info .text .dian{min-width: 10px;height: 20px;padding: 0 5px;background: #f00;border-radius: 50%;position: absolute;top: 0px;right: 0;transform: translateY(-50%);line-height: 20px;text-align: center;color: #fff;font-size: 12px;transform: scale(.8);}
.csimbody .csimbox .csim-left .list .li .info .text .dian.on{height: 10px;padding: 0;color: transparent;}
.custom-menu li {padding: 10px 20px;cursor: pointer;white-space: nowrap;}
.custom-menu li:hover {background-color: #eff8ff;}
/*对话框*/
.csimbody .csimbox .csim-mian{width: calc(100% - 380px - 60px);}
.csimbody .csimbox .csim-mian .notselected{width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;flex-direction: column;}
.csimbody .csimbox .csim-mian .notselected .icon{width: 80px;height: 80px;}
.csimbody .csimbox .csim-mian .notselected .text{font-size: 16px;color: #999;padding-top: 10px;}
.csimbody .csimbox .csim-mian .chatbox{width: 100%;height: 100%;position: relative;}
.csimbody .csimbox .csim-mian .chatbox .loading{background: rgba(255,255,255,.02);height: calc(100% - 200px);}
.csimbody .csimbox .csim-mian .chatbox .loading i{color: #666;}
.csimbody .csimbox .csim-mian .chatbox .chatitem{width: 100%;height: calc(100% - 200px);display: flex;flex-direction: column;position: relative;}
/*会话框头部*/
.csimbody .csimbox .csim-mian .chatbox .top{width: 100%;height: 50px;background: #fff;padding: 0 20px;box-sizing: border-box;display: flex;justify-content: space-between;align-items: center;}
.csimbody .csimbox .csim-mian .chatbox .top .name{font-size: 16px;color: #333;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.csimbody .csimbox .csim-mian .chatbox .top .name a{text-decoration: underline;color: #2f6cff;}
.csimbody .csimbox .csim-mian .chatbox .top .more{font-size: 16px;color: #333;cursor: pointer;}
.csimbody .csimbox .csim-mian .chatbox .top .back{padding-right: 12px;display: none;}
/*会话框主题对话内容*/
.csimbody .csimbox .csim-mian .chatbox .chat{width: 100%;flex:1;overflow-y: scroll;}
.csimbody .csimbox .csim-mian .chatbox .chat .chat-view{width: 100%;display: flex;flex-direction: column;padding: 10px 0;box-sizing: border-box;}
.csimbody .csimbox .csim-mian .chatbox .chat .chat-view .pageload{text-align: center;color: #bbb;}
.csimbody .csimbox .csim-mian .chatbox .chat .chat-view .tipbox{width: 100%;text-align: center;font-size: 14px;color: #999;}
.csimbody .csimbox .csim-mian .chatbox .chat .chat-view .sysmsg{width: 100%;text-align: center;font-size: 14px;color: #999;padding-bottom: 10px;}
.csimbody .csimbox .csim-mian .chatbox .chat .chat-view>.nav{width: 100%;display: flex;justify-content: flex-start;align-items: center;padding: 10px 20px;box-sizing: border-box;transition-property: background-color;transition-duration: 2s;}
.csimbody .csimbox .csim-mian .chatbox .chat .chat-view>.nav.active-msg{background: #e9f5ff;}
.csimbody .csimbox .csim-mian .chatbox .chat .chat-view>.nav>.li{width: 80%;display: flex;justify-content: flex-start;align-items: flex-start;gap: 10px;}
.csimbody .csimbox .csim-mian .chatbox .chat .chat-view>.nav>.li .img{width: 40px;height: 40px;border-radius: 4px;overflow: hidden;}
.csimbody .csimbox .csim-mian .chatbox .chat .chat-view>.nav>.li .img.on{cursor: pointer;}
.csimbody .csimbox .csim-mian .chatbox .chat .chat-view>.nav>.li .img.isimg{display: none;}
.csimbody .csimbox .csim-mian .chatbox .chat .chat-view>.nav>.li .info{width: calc(100% - 50px);flex: 1;display: flex;flex-direction: column;align-items: flex-start;gap: 5px;}
.csimbody .csimbox .csim-mian .chatbox .chat .chat-view>.nav>.li .info .username{display: flex;align-items: center;}
.csimbody .csimbox .csim-mian .chatbox .chat .chat-view>.nav>.li .info .username .t1{cursor: pointer;font-size: 14px;color: #666;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 200px;}
.csimbody .csimbox .csim-mian .chatbox .chat .chat-view>.nav>.li .info .username .t2{font-size: 10px;margin-left: 8px;background: #1ab94d;color: #fff;padding: 1px 3px;border-radius: 2px;cursor: default;}
.csimbody .csimbox .csim-mian .chatbox .chat .chat-view>.nav>.li .info .username .t1:hover{color: #2F6CFF;}
.csimbody .csimbox .csim-mian .chatbox .chat .chat-view>.nav>.li .info .username .t1:hover:after {content: "@";margin-left: 3px;font-size: 12px;position: relative;top: -2px;}
.csimbody .csimbox .csim-mian .chatbox .chat .chat-view>.nav>.li .info .reply{max-width: 100%;margin-bottom: 4px;padding: 5px 10px;background: #e3e3e3;border-radius: 4px;font-size: 14px;color: #6a6a6a;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;cursor: pointer;}
.csimbody .csimbox .csim-mian .chatbox .chat .chat-view>.nav>.li .info .text{max-width: 100%;padding: 5px 10px;background: #fff;border-radius: 4px;font-size: 14px;color: #333;line-height: 1.6;box-shadow: #eee 0 0 5px;word-break: break-all;}
.csimbody .csimbox .csim-mian .chatbox .chat .chat-view>.nav>.li .info .text .nickname{color: #0b65ff;padding: 1px 4px;font-size: 14px;}
.csimbody .csimbox .csim-mian .chatbox .chat .chat-view>.nav>.li .info .chatimg{background-color: #fff;padding: 10px;border-radius: 10px;box-sizing: border-box;box-shadow: #eee 0 0 5px;cursor: pointer;}
.csimbody .csimbox .csim-mian .chatbox .chat .chat-view>.nav>.li .info .chatimg img{width: auto;height: auto;max-width: 500px;max-height: 400px;}
.csimbody .csimbox .csim-mian .chatbox .chat .chat-view>.nav>.li .info .chatvod{width: 100%;max-width: 500px;background-color: #fff;padding: 10px;border-radius: 10px;box-sizing: border-box;box-shadow: #eee 0 0 5px;}
.csimbody .csimbox .csim-mian .chatbox .chat .chat-view>.nav>.li .info .chatvod .vod{position: relative;width: 100%;padding-top: 56.25%;overflow: hidden;background: #111;box-shadow: #eee 0 0 5px;}
.csimbody .csimbox .csim-mian .chatbox .chat .chat-view>.nav>.li .info .chatvod .vod video{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;display: block;}
.csimbody .csimbox .csim-mian .chatbox .chat .chat-view>.nav>.li .info pre {display: flex;flex-direction: column;border-radius: 6px;padding: 5px;font-size: 16px;}
.csimbody .csimbox .csim-mian .chatbox .chat .chat-view>.nav>.li .info .down{box-sizing: border-box;padding: 10px;box-shadow: #eee 0 0 5px;background: #fff;border-radius: 4px;display: flex;justify-content: flex-start;align-items: center;cursor: pointer;}
.csimbody .csimbox .csim-mian .chatbox .chat .chat-view>.nav>.li .info .down .left{width: 100%;flex: 1;margin-right: 10px;}
.csimbody .csimbox .csim-mian .chatbox .chat .chat-view>.nav>.li .info .down .left .t1{max-width: 220px;font-size: 15px;color: #666;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.csimbody .csimbox .csim-mian .chatbox .chat .chat-view>.nav>.li .info .down .left .t2{font-size: 12px;color: #999;padding-top: 5px;}
.csimbody .csimbox .csim-mian .chatbox .chat .chat-view>.nav.on{justify-content: flex-end;}
.csimbody .csimbox .csim-mian .chatbox .chat .chat-view>.nav.on>.li{justify-content: flex-end;}
.csimbody .csimbox .csim-mian .chatbox .chat .chat-view>.nav.on>.li .img{display: none;}
.csimbody .csimbox .csim-mian .chatbox .chat .chat-view>.nav.on>.li .img.isimg{display: block;}
.csimbody .csimbox .csim-mian .chatbox .chat .chat-view>.nav.on>.li .info{align-items: flex-end}
.csimbody .csimbox .csim-mian .chatbox .chat .chat-view>.nav.on>.li .info .username{display: none;}
.csimbody .csimbox .csim-mian .chatbox .chat .chat-view>.nav.on>.li .info .text{background: #c9e7ff;}
/*会话框底部输入框*/
.csimbody .csimbox .csim-mian .chatbox .bottom{position: relative;width: 100%;height: 200px;background: #f7f7f7;padding: 0 20px;box-sizing: border-box;display: flex;flex-direction: column;}
.csimbody .csimbox .csim-mian .chatbox .bottom .widget{width: 100%;height: 45px;display: flex;justify-content: flex-start;align-items: center;gap: 24px;}
.csimbody .csimbox .csim-mian .chatbox .bottom .widget .ta{height: 45px;display: flex;justify-items: center;justify-content: center;line-height: 45px;cursor: pointer;}
.csimbody .csimbox .csim-mian .chatbox .bottom .widget .ta i{font-size: 20px;color: #333;transition: all .3s ease-in-out;font-weight: 600;}
.csimbody .csimbox .csim-mian .chatbox .bottom .widget .ta i.layui-icon-picture-fine{font-size: 22px;}
.csimbody .csimbox .csim-mian .chatbox .bottom .widget .ta:hover i{color: #2F6CFF;}
.csimbody .csimbox .csim-mian .chatbox .bottom .reply{max-width: 100%;padding: 2px 10px;background: #e9e9e9;border-radius: 3px;font-size: 13px;color: #666;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;margin-bottom: 5px;position: relative;padding-right: 20px;}
.csimbody .csimbox .csim-mian .chatbox .bottom .reply .delete{position: absolute;top: 0;right: 0;cursor: pointer;height: 25px;width: 25px;}
.csimbody .csimbox .csim-mian .chatbox .bottom .reply .delete i{font-size: 20px;color: #bbb;position: relative;top: -2px;}
.csimbody .csimbox .csim-mian .chatbox .bottom .edittext{width: 100%;height: 100%;flex: 1;position: relative;}
.csimbody .csimbox .csim-mian .chatbox .bottom .edittext .textarea{width: 100%;height: 110px;background: transparent;border: 0;overflow-y: auto;}
.csimbody .csimbox .csim-mian .chatbox .bottom .edittext .textarea:focus {outline: none}
.csimbody .csimbox .csim-mian .chatbox .bottom .edittext .textarea .nickname{color: #2F6CFF;margin-right: 5px;cursor: no-drop;}
.csimbody .csimbox .csim-mian .chatbox .bottom.on .edittext .textarea{height: 80px;}
.csimbody .csimbox .csim-mian .chatbox .bottom .btns{width: 100%;height: 45px;display: flex;justify-content: flex-end;align-items: center;gap: 20px;}
.csimbody .csimbox .csim-mian .chatbox .bottom .btns .tip{font-size: 14px;color: #999;}
.csimbody .csimbox .csim-mian .chatbox .bottom .btns .btn{background: linear-gradient(131deg, #2F6CFF 18.16%, #2F9BFF 92.34%);width: 100px;text-align: center;line-height: 35px;border-radius: 4px;font-size: 14px;color: #fff;cursor: pointer;transition: all .3s ease-in-out;}
.csimbody .csimbox .csim-mian .chatbox .bottom .btns .btn:hover {box-shadow: 0 5px 20px #7994c166;transform: translateY(-1px);border-radius: 4px;}
.csimbody .csimbox .csim-mian .chatbox .bottom .new-msg-bar{position: absolute;display: flex;flex-direction: row;align-items: center;right: 20px;top: -50px;font-size: 12px;background-color: #ffffff;color: #5488ff;border-radius: 15px;line-height: 27px;padding: 0 10px;pointer-events: auto;cursor: pointer;border: 1px solid #a6c1ff;}
.csimbody .csimbox .csim-mian .chatbox .bottom .new-msg-bar i{font-weight: 600;margin-right: 2px;}
.csimbody .csimbox .csim-mian .chatbox .bottom .load-send{position: absolute;top: 0;left: 0;display: flex;align-items: center;font-size: 14px;background: rgb(255 255 255 / 10%);color: #999;width: 100%;height: 100%;justify-content: center;z-index: 99;}
/*群详情*/
.csimbody .csimbox .csim-mian .chatbox .groupinfopopu{width: 100%;height: calc(100% - 50px);position: absolute;top: 50px;left: 0;z-index: 9999;display: none;justify-content: flex-end;transition: all .3s ease-in-out;}
.csimbody .csimbox .csim-mian .chatbox .groupinfopopu.on{display: flex;background-color: rgba(0,0,0,0);}
.csimbody .csimbox .csim-mian .chatbox .groupinfopopu.on.show{background-color: rgba(0,0,0,.2);}
.csimbody .csimbox .csim-mian .chatbox .groupinfopopu .groupinfo{width: 375px;height: 100%;background-image: linear-gradient(180deg, #fff, #f3f5f8);transform: translateX(375px);transition: all .3s ease-in-out;overflow-y: auto;}
.csimbody .csimbox .csim-mian .chatbox .groupinfopopu .groupinfo.on{transform: translateX(0);}
.csimbody .csimbox .csim-mian .chatbox .groupinfopopu .groupinfo .groupbox{width: 100%;padding: 10px;box-sizing: border-box;}
.csimbody .csimbox .csim-mian .chatbox .groupinfopopu .groupinfo .groupbox .search{width: 100%;height: 36px;background: #f6f7fa;border-radius: 2px;display: flex;justify-content: flex-start;align-items: center;padding: 0 12px;box-sizing: border-box;gap: 10px;}
.csimbody .csimbox .csim-mian .chatbox .groupinfopopu .groupinfo .groupbox .search .icon{line-height: 30px;font-size: 14px;color: #999;}
.csimbody .csimbox .csim-mian .chatbox .groupinfopopu .groupinfo .groupbox .search input{width: 100%;flex: 1;height: 30px;background: transparent;border: 0;color: #333;}
.csimbody .csimbox .csim-mian .chatbox .groupinfopopu .groupinfo .userlist{width: 100%;background: #f6f7fa;padding: 10px;box-sizing: border-box;}
.csimbody .csimbox .csim-mian .chatbox .groupinfopopu .groupinfo .userlist .ul{width: 100%;max-height: 164px;display: flex;justify-content: flex-start;flex-wrap: wrap;overflow: hidden;}
.csimbody .csimbox .csim-mian .chatbox .groupinfopopu .groupinfo .userlist .ul.on{max-height: 9999999px;}
.csimbody .csimbox .csim-mian .chatbox .groupinfopopu .groupinfo .userlist .ul .li{width: 20%;display: flex;justify-content: center;align-items: center;flex-direction: column;margin: 5px 0;}
.csimbody .csimbox .csim-mian .chatbox .groupinfopopu .groupinfo .userlist .ul .li.cur{cursor: pointer;}
.csimbody .csimbox .csim-mian .chatbox .groupinfopopu .groupinfo .userlist .ul .li .img{width: 50px;height: 50px;border-radius: 4px;position: relative;overflow: hidden;}
.csimbody .csimbox .csim-mian .chatbox .groupinfopopu .groupinfo .userlist .ul .li .img .type{width: 20px;height: 20px;line-height: 20px;text-align: center;font-size: 12px;background: #f00;color: #fff;position: absolute;top: 0;right: 0;transform: scale(.9);border: 1px solid #fff;border-radius: 4px;}
.csimbody .csimbox .csim-mian .chatbox .groupinfopopu .groupinfo .userlist .ul .li .name{width: 50px;margin: 0 auto;font-size: 12px;color: #666;padding-top: 5px;text-align: center;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.csimbody .csimbox .csim-mian .chatbox .groupinfopopu .groupinfo .userlist .mores{width: 100%;display: flex;justify-content: center;align-items: center;gap: 30px;margin-top: 10px;}
.csimbody .csimbox .csim-mian .chatbox .groupinfopopu .groupinfo .userlist .mores .btn{font-size: 14px;color: #999;cursor: pointer;transition: all .3s ease-in-out;}
.csimbody .csimbox .csim-mian .chatbox .groupinfopopu .groupinfo .userlist .mores .btn:hover{color: #2F6CFF;}
.csimbody .csimbox .csim-mian .chatbox .groupinfopopu .groupinfo .btnlist{width: 100%;background: #fff;padding: 0 10px;box-sizing: border-box;}
.csimbody .csimbox .csim-mian .chatbox .groupinfopopu .groupinfo .btnlist .li{height: 50px;width: 100%;display: flex;justify-content: space-between;align-items: center;border-top: 1px solid #f2f2f2;cursor: pointer;}
.csimbody .csimbox .csim-mian .chatbox .groupinfopopu .groupinfo .btnlist .li:nth-child(1){border-top: 0;}
.csimbody .csimbox .csim-mian .chatbox .groupinfopopu .groupinfo .btnlist .li .name{font-size: 15px;color: #333;}
.csimbody .csimbox .csim-mian .chatbox .groupinfopopu .groupinfo .btnlist .li .img{width: 40px;height: 40px;}
.csimbody .csimbox .csim-mian .chatbox .groupinfopopu .groupinfo .btnlist .li .text{font-size: 14px;color: #666;width: calc(100% - 100px);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;text-align: right;}
.csimbody .csimbox .csim-mian .chatbox .groupinfopopu .groupinfo .btnlist .li .layui-form-switch{margin-top: 0;}
.csimbody .csimbox .csim-mian .chatbox .groupinfopopu .groupinfo .btnlist .li .layui-form-onswitch {border-color: #2F6CFF;background-color: #2F6CFF;}
.csimbody .csimbox .csim-mian .chatbox .groupinfopopu .groupinfo .exitbtn{width: 100%;line-height: 50px;margin-top: 10px;text-align: center;font-size: 15px;color: #f00;background: #fff;cursor: pointer;}
.csimbody .csimbox .csim-mian .chatbox .groupinfopopu .groupinfo .btnlist .li2{display: flex;align-items: center;height: 50px;width: 100%;padding: 10px 0;}
.csimbody .csimbox .csim-mian .chatbox .groupinfopopu .groupinfo .btnlist .li2 img{width: 40px;height: 40px;border-radius: 5px;margin-right: 5px;}
.csimbody .csimbox .csim-mian .chatbox .groupinfopopu .groupinfo .btnlist .li2 span{font-size: 14px;color: #333;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}


.mark-bg-view{position: absolute;z-index: 999;display: none;width: 100%;height: 100%;top:0;left:0;background: rgba(0,0,0,.01)}
.custom-menu {position: absolute;background: white;border: 1px solid #ccc;box-shadow: 2px 2px 5px rgba(0,0,0,0.2);z-index: 1000;display: none;list-style-type: none;padding: 8px;border-radius: 8px;}
.custom-menu li {padding: 10px 12px;cursor: pointer;white-space: nowrap;}
.custom-menu li:hover {background-color: #eff8ff;border-radius: 4px;}

.chat-menu{position: absolute;background: #252a30;box-shadow: 2px 2px 5px rgba(0,0,0,0.2);z-index: 1000;display: none;list-style-type: none;padding: 10px 20px;margin: 0;border-radius: 8px;}
.chat-menu .list{width: 100%;display: flex;justify-content: center;align-items: center;gap: 20px;position: relative;}
.chat-menu .list:after{content: "";position: absolute;top: -15px;left: 50%;background-color: #252a30;width: 10px;height: 10px;transform: rotate(45deg);}
.chat-menu.on .list:after{top: 30px;}
.chat-menu .list li{color: #fff;font-size: 14px;cursor: pointer;white-space: nowrap;}
.chat-menu .list li:hover{color: #7ca3ff;}
/*分享群弹窗*/
.csimbody .sharepopu{width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: rgba(0, 0, 0, .6);z-index: 99999;justify-content: flex-end;display: none;}
.csimbody .sharepopu.on{display: flex;}
.csimbody .sharepopu .sharebox{width: 305px;background: #f5f5f5;border-radius: 20px;padding: 55px 15px 15px;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.csimbody .sharepopu .sharebox .share{width: 100%;height: 24.375rem;align-items: center;justify-content: center;border-radius: .625rem;background-color: #fff;position: relative;}
.csimbody .sharepopu .sharebox .share .groupimg{width: 100px;height: 100px;border-radius: 50%;position: absolute;top: -30px;left: 50%;transform: translateX(-50%);overflow: hidden;}
.csimbody .sharepopu .sharebox .share .name{padding-top: 80px;font-size: 15px;color: 333;width: 90%;margin: 0 auto;text-align: center;}
.csimbody .sharepopu .sharebox .share .code{width: 200px;height: 200px;margin: 0 auto;margin-top: 20px;}
.csimbody .sharepopu .sharebox .share .tip{font-size: 12px;text-align: center;color: #999;width: 100%;padding-top: 20px;}
.none{display: none!important;}
@media screen and (max-width: 959px) {
    .csimbody{padding: 0;}
    .csimbody .csimbox{border: 0 solid #fff;}
    .csimbody .csimbox .csim-side{display: none;}
    .csimbody .csimbox .csim-left{width: 100%;}
    .csimbody .csimbox .csim-mian{display: none;position: fixed;top: 0;left: 0;z-index: 99;width: 100%;height: 100%;background: #fff;}
    .csimbody .csimbox .csim-mian.on{display: flex;}
    .csimbody .csimbox .csim-mian .chatbox .top{display: flex;padding: 0 10px;}
    .csimbody .csimbox .csim-mian .chatbox .top .back{display: inline-block;}
    .csimbody .csimbox .csim-mian .chatbox .chat{padding: 10px;background: #f9f9f9;}
    .csimbody .csimbox .csim-mian .chatbox .chat .nav .li{width: 90%;}
    .csimbody .csimbox .csim-mian .chatbox .chat .chat-view>.nav>.li .info .chatimg img{max-width: 100%;}
    .csimbody .csimbox .csim-mian .chatbox .chat .chat-view>.nav>.li .info .chatvod{width: 100%;}
    .csimbody .csimbox .csim-mian .chatbox .chat .chat-view>.nav>.li .info .down .left .t1{min-width: 180px;}
    .csimbody .csimbox .csim-mian .chatbox .bottom{padding: 0 10px;}
    .csimbody .csimbox .csim-mian .chatbox .groupinfopopu .groupinfo{width: 100%;}
    .csimbody .sharepopu .sharebox{width: 280px;}
    ::-webkit-scrollbar {width: 0;}

}