/*
  flex-direction: row | row-reverse | column | column-reverse;
  flex-wrap: nowrap | wrap | wrap-reverse;
  flex-flow: <flex-direction> || <flex-wrap>;
  justify-content: flex-start | flex-end | center | space-between | space-around;
  flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

  align-items: flex-start | flex-end | center | baseline | stretch;
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

  align-content: flex-start | flex-end | center | space-between | space-around | stretch;


  order: <integer>;
  flex-grow: <number>;
  flex-shrink: <number>;
  flex-basis: <length> | auto;
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
  align-self: auto | flex-start | flex-end | center | baseline | stretch;*/


/*

.pw- 开头的 class名称，必须跟在id后面使用，不能单独使用。

*/



html, body{
    padding: 0px;
    margin: 0px;
    font-family:PingFangSC-Regular, \5fae\8f6f\96c5\9ed1, Arial;
    overflow:hidden;
    width: 100%;
    height: 100%;
    font-size: 10.66px;
    background: url("https://duckchat.akaxin.com/border_line.png") no-repeat ;
}

/**:focus {outline: none;}*/


/* Basic Layout**/

.wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: stretch;
    background-color: rgba(245,244,249,1);
}

.layout-left {
    width:35.64rem;
    background: white;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    flex-shrink: 0;

}

.left-sidebar {
    width: 7.5rem;
    background: rgba(0,0,0,0.95);
}

.left-body {
    background: rgba(255,255,255,1);
    width: 28.14rem;
    display: flex;
    flex-direction: column;
}


.layout-right {
    position: relative;
    display: flex;
    align-items: stretch;
    flex-direction: column;
    flex-grow: 1;
    padding: 1rem 1rem 0 1rem;
    width:98rem;
}


.right-body {
    background: green;
    flex-grow: 1;
    height: 90%;
    position: relative;
    display: flex;
    align-items: stretch;
    flex-direction: row;
    overflow-y: hidden;

}

.right-body-chat {
    background: #fff;
    flex-grow: 1;
    border-bottom: 0.2rem solid rgba(0,0,0,0.1);
    height: 1;
    overflow: hidden;
    padding: 2rem 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.right-body-sidebar {
    width:28.14rem;
    background:#fff;
    box-shadow:-0.09rem 0rem 0.38rem 0rem rgba(223,223,223,1);
    flex-shrink: 0;
    border-left: 0.1rem solid rgba(223,223,223,1);
    overflow-y: scroll;
}

.right-chatbox {
    flex-grow: 1;
    flex-shrink: 1;
    overflow-y: scroll;
    height: 1;
    overflow-x: hidden;
}
.right-chatbox:focus{
    background-color: white;
}

/* layout - Left */
.l-sb-item {
    height: 7.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.chatSession-select,
.chatSession-unselect,
.friend-select,
.friend-unselect {
    height:3rem;
}

.group-select,
.group-unselect {
    height:2rem;
}
.l-sb-item:hover {
    background:rgba(255,255,255,0.2);
}

.l-sb-item-active {
    border-left: 0.75rem solid rgba(75,58,178,1);
}

.l-sb-item img {
    width:3rem;
}

.l-sb-item .useravatar {
    width: 4rem;
    border-radius: 50%;
    height: 4rem;
}

.left-body-header {
    height: 7.5rem;
    box-shadow:0rem 0.09rem 0.38rem -0.09rem rgba(0,0,0,0.2);
    background:rgba(255,255,255,1);
    flex-shrink: 0;
}

.left-body-container {
    flex-grow: 1;
    width: 100%;
    /*display: block;*/
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-top:7rem;
}

.left-body-create-group {
    display: flex;
    flex-direction: column;
    height:10rem;
    background:rgba(255,255,255,1);
    position: absolute;
    bottom: 0;
    width: 28rem;
    border:0.09rem solid rgba(255,255,255,1);
    box-shadow: 0rem -0.09rem 0.38rem 0rem rgba(223,223,223,1);
}

.left-body-chatsession{
    flex-grow: 1;
    flex-shrink : 1;
    width: 100%;
    overflow-y: scroll;
    display: block;
    box-shadow:0rem 0.09rem 0.38rem 0rem rgba(0,0,0,0.2);
    margin-bottom: 10rem;
}

.create-group-btn {
    margin:0 auto;
    justify-content: center;
    align-items: center;
    width:18.33rem;
    height:3.83rem;
    background:rgba(245,244,249,1);
    border-radius:0.94rem;
    border:0.09rem solid rgba(76,59,177,1);
    font-size:1.33rem;
    font-family:PingFangSC-Regular;
    color:rgba(76,59,177,1);
    line-height:1.83rem;
    outline: none;
    position: absolute;
    left: 0;
    right:0;
    top:0;
    bottom: 0;
    margin: auto;
    cursor: pointer;
}
#open-temp-chat,
#add-friend,
#set-speaker,
#set-admin,
#remove-admin,
#remove-speaker,
#remove-group-chat,
.group-user-img,
.emotions,
.upload-img,
.send_msg,
.add-friend-btn,
.create_button {
    cursor: pointer;
}
.chatsession-row {
    position: relative;
    height: 7rem;
    width: 100%;
}

.send_msg,
.create_button,
.add_member_to_group,
.cancle_invite_people {
    outline: none;
}
.chatsession-row:hover {
    background: #F5F4F9;
    cursor: pointer;
}

.chatsession-row-img {
    position: absolute;
    left: 1.78rem;
    top: 0.94rem;
}


.chatsession-row-img img {
    width: 4.68rem;
}

.chatsession-row-header {
    position: absolute;
    left: 7.5rem;
    top: 1rem;
    right: 1.78rem;
    height: 1.5rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.chatsession-row-title {
    font-size:1.5rem;
    color:#141030;
}

.chatsession-row-time {
    font-size:1.31rem;
    color:rgba(0,0,0,0.4);
}

.chatsession-row-desc {
    position: absolute;
    left: 7.5rem;
    bottom:1rem;
    font-size:1.31rem;
    color:rgba(20,16,48,0.2);
    overflow: hidden;
}



/* right-body */
.right-head {
    height: 6rem;
    background: #fff;
    border-bottom: 0.2rem solid rgba(0,0,0,0.1);
    position: relative;
}
.right-head .title {
    font-size:2.25rem;
    color:rgba(20,16,48,1);
    position: absolute;
    left: 3.1rem;
    top: 1.88rem;
}

.right-head .actions {
    position: absolute;
    right: 1.97rem;
    bottom: 0.56rem;

    height: 3.75rem;
    text-align: right;
}

.right-head .actions img {
    width: 3.75rem;
    margin-left: 1.88rem;
}

.right-input {
    width: 100%;
    height: 12.1rem;
}

/* chat message list   */
.msg-row {
    margin-top: 2rem;
    display: flex;
    flex-direction: row;
}

.msg-body, .right-msg-body {
    flex-grow: 1;
    padding: 0 1rem;
}

.msg-nickname-time {
    margin-top: 0.23rem;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
}
.text-align-left .msg-nickname-time {
    position: absolute;
}

.text-align-left .msg-content {
    margin-top: 2rem;
}

.text-align-left #group-user-menu {
    position: absolute;
    top:2rem;
}

.msg-avatar img {
    width: 4.68rem;
}

.msg-nickname {
    font-size:1.31rem;
    color:rgba(20,16,48,0.6);
    font-weight: bold;
}

.msg-time {
    font-size:1.31rem;
    color: rgba(20,16,48,0.6);
}

.msg-content {
    font-size:1.31rem;
    color:#141030;
    line-height: 1.88rem;
    width: auto;
    display: inline-block;
    padding: 1rem;
    background:rgba(244,244,249,1);
    border-radius:0rem 0.94rem 0.94rem 0.94rem;
}

.msg-content-img {
    font-size:1.31rem;
    color:#141030;
    line-height: 1.88rem;
    width: auto;
    display: inline-block;
    border-radius:0rem 0.94rem 0.94rem 0.94rem;
}

/*左右显示的修正*/

.msg-left {
    padding-left: 2.72rem;
    padding-right: 18.95rem;
    margin-bottom: 2rem;
}

.msg-right {
    display: flex;
    flex-direction: row-reverse;
    padding-right: 2.72rem;
    padding-left: 18.95rem;
    margin-bottom: 2rem;
}

.msg-right .msg-nickname-time {
    flex-direction: row-reverse;
}

.msg-right .msg-content {
    color:#FFFFFF;
    background:rgba(92,72,207,1);
    border-radius:0.94rem 0rem 0.94rem 0.94rem;
}

.msg-right .msg-content-img {
    color:#FFFFFF;
    border-radius:0.94rem 0rem 0.94rem 0.94rem;
}
.msg-left .msg-content-img {
    color:#FFFFFF;
    border-radius:0.94rem 0rem 0.94rem 0.94rem;
    margin-top: 2rem;
}


.msg-right .msg-content-img .msg_img{
    border-radius: 0.94rem 0rem 0.94rem 0.94rem;
}

.msg-left .msg-content-img .msg_img{
    border-radius: 0rem 0.94rem  0.94rem 0.94rem;
}

/*right-input*/
.right-input {
    display: flex;
    flex-direction: column;
    height: 10.98rem;
    flex-shrink: 0;
    box-shadow:0rem -0.09rem 0.38rem 0rem rgba(223,223,223,1);
}

.right-input .input-tools {
    padding: 0.94rem;
    padding-bottom: 0rem;
    height: 3.2rem;
    display: flex;
    margin-left: 1rem;
}

.right-input .input-tools img {
    width: 2.44rem;
    height: 2.44rem;
    margin-right: 1.31rem;
}

.right-input .input-box {
    flex-grow: 1;
    display: flex;
    align-items: stretch;
    margin-top: 1.5rem;
    margin-left: 2rem;
}

.right-input .input-box textarea {
    border: none;
    flex-grow: 1;
    font-size:1.5rem;
    color:#C9C9C9;
    line-height:2.06rem;
    padding-top: 3rem;
    resize: none;
    word-break: break-all;
}

.msg_content::-webkit-input-placeholder {
    height:1.5rem;
    font-size:1.5rem;
    font-family:PingFangSC-Regular;
    color:rgba(153,153,153,1);
    line-height:1.5rem;
}
.input-line {
    height:0.19rem;
    color:rgba(153,153,153,1);
    margin-left: 2rem;
    overflow: hidden;
    margin-right: 16rem;
}
.right-input .input-box textarea:focus {
    outline: 0;
}

.right-input .input-box .input-btn {
    width: 15rem;
    display: flex;
    flex-direction: column-reverse;
    border-radius:0.47rem;
}

.right-input .input-box .input-btn button {
    width:13.13rem;
    height:3.75rem;
    background:rgba(76,59,177,1);
    border-radius:0.47rem;
    font-size:1.69rem;
    color: #fff;
    line-height:2.35rem;
}

/* mask and new window */
.wrapper-mask {
    background: rgba(0, 0, 0, 0.8);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    z-index: 9999;
    overflow: hidden;
    visibility: hidden;

    display: flex;
    justify-content: center;
    align-items: center;
}

.pop-window {
    background: #fff;
    overflow: hidden;
}


#group-invite-people{
    width: 60rem;
    height: 56.29rem;
    display: flex;
    align-items: stretch;
}

#group-invite-people .pw-left{
    width: 30rem;
    border-right: #c9c9c9 solid 0.09rem;
    overflow: hidden;
    overflow-y: scroll;
    padding-top: 3.75rem;
}


#group-remove-people {
    width:39rem;
    height:57rem;
    background:rgba(255,255,255,1);
    box-shadow:0rem 0.17rem 2.25rem 0rem rgba(0,0,0,0.3);
}


.remove-people-div {
    overflow: scroll;
    height: 45rem;
}

#group-invite-people .pw-right {
    width: 30rem;
    display: flex;
    flex-direction: column;
    margin-left: 1rem;
}

.pw-right-header {
    height: 3.75rem;
    overflow: hidden;
    display: flex;
    align-items: center;

    font-size:1.88rem;
    color:rgba(20,16,48,1);
    padding-left: 2.16rem;
}

.pw-right-body {
    flex-grow: 1;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 0;
    margin-bottom: 1rem;
}

.pw-right-btn {
    height: 6.57rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.pw-right-btn button {
    margin-right: 3.75rem;
}

.btn-default {
    height: 3.94rem;
    padding: 0.84rem 1.97rem;
    border-radius:0.38rem;
    border:0.09rem solid rgba(76,59,177,1);
    font-size:1.88rem;
    color:rgba(76,59,177,1);
}

.btn-primary {
    height: 3.94rem;
    padding: 0.84rem 1.97rem;
    background:rgba(76,59,177,1);
    border-radius:0.38rem;
    font-size:1.88rem;
    color:rgba(255,255,255,1);
}

#create-group, #edit-remark, #add-friend-div,#permission-join {
    width:75rem;
    height:47rem;
    background:rgba(255,255,255,1);
    border-radius:0.94rem;
    position: relative;
}

#selfInfo {
    width:38.37rem;
    height:23.45rem;
    background:rgba(255,255,255,1);
    box-shadow:0rem 0.19rem 1.41rem 0.09rem rgba(153,153,153,1);
    border-radius:0.56rem;
    border:0.09rem solid rgba(223,223,223,1);
    position: absolute;
    top:2rem;
    left:8rem;
}
.self-qrcode {
    text-align:left;
    height: 5rem;
    font-size:1.31rem;
    font-family:PingFangSC-Regular;
    color:rgba(20,16,48,1);
    line-height:5rem;
    cursor: pointer;
}
.self-qrcode span{
    padding-left:2rem;
}
.self-qrcode:hover {
    background:rgba(245,244,249,1);
}

#triangle_left {
    position: absolute;
    top:1rem;
    left:-0.5rem;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-right: 10px solid white;
    border-bottom: 10px solid transparent;
}

.box_div {
    /*background-color: antiquewhite;*/
    height:250px;
    margin: auto 50px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.create_group_box_div_input {
    background-color: #ffffff;
    border-style:none;
    outline: none;
    height:1.88rem;
    font-size:1.88rem;
    font-family:PingFangSC-Regular;
    color:rgba(20,16,48,1);
    line-height:1.88rem;
    margin-left: 23rem;
    margin-top: 5rem;
    padding: 0.5rem;
    width:28rem;
    overflow: hidden;
}

.create_group_box_div_input:active{
    outline: none;
}

.create_group_box_div_input::-webkit-input-placeholder{
    height:1.88rem;
    font-size:1.88rem;
    color:rgba(153,153,153,1);
    line-height:1.88rem;
}

/*box 头 比如---创建群组---*/
.header_tip_font{
    justify-content:center;
    text-align: center;
    margin-top:11rem;
    height:3.75rem;
    font-size:2.63rem;
    color:rgba(76,59,177,1);
    line-height:3.75rem;
}

.create_button,
.create_button:hover,
.create_button:focus,
.create_button:active{
    margin-top: 4rem;
    width:28.14rem;
    height:4.69rem;
    background:rgba(76,59,177,1);
    border-radius:0.94rem;

    font-size:1.67rem;
    color:rgba(255,255,255,1);
    line-height:1.67rem;
}

.line {
    width:28.14rem;
    height:0.01rem;
    border:0.09rem solid rgba(153,153,153,1);
    overflow: hidden;
    text-align: center;
    margin: 0 auto;
    margin-top: 0.1rem;
}

.group-name-span {
    width:4.75rem;
    height:1.17rem;
    font-size:1.5rem;
    color:rgba(20,16,48,1);
    line-height:1.17rem;
}

.no_data{
    width:100%;
    height:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 24rem;
}
.no_data_img{
    width:10rem;
    height:11rem;
    display: block;
}


.rgb02{
    color:rgba(0,0,0,0.2);
}

.no_data_tip{
    height:2.08rem;
    font-size:1.5rem;
    display: block;
    color:rgba(153,153,153,1);
    line-height:2.08rem;
}

.text-align-left {
    text-align: left;
    position:relative;
    word-break: break-all;
}

.text-align-right {
    text-align: right;
    word-break: break-all;
}

.rgb108 {
    color:rgba(20,16,48,1);
}

.data_tip{
    height:1.69rem;
    font-size:1.31rem;
    font-family:PingFangSC-Regular;
    color:rgba(153,153,153,1);
    line-height:1.69rem;
    margin-left: 23rem;
    width: 29rem;
    word-break: break-all;
    padding: 0.5rem;
}

#group-user-menu {
    display: inline-block;
    justify-content: center;
    background:rgba(255,255,255,1);
    box-shadow:0rem 0.17rem 1.17rem 0rem rgba(223,223,223,1);
    border-radius:0.5rem;
    border:0.08rem solid rgba(223,223,223,1);
    text-align: center;
    z-index:222;
    left: 1rem;
}

#group-user-menu .item {
    margin:0 auto;
    height:2.83rem;
    text-align: center;
    font-size:1.17rem;
    width: 9.17rem;
    color:rgba(20,16,48,1);
    line-height:2.83rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

#group-user-menu .item:hover {
    background:rgba(76,59,177,1);
    color:rgba(255,255,255,1);
}

.chatsession-row-active {
    background:rgba(245,244,249,1);
}

.permission-join-operation {
    height:1.33rem;
    font-size:1.67rem;
    color:rgba(20,16,48,1);
    margin-bottom:3rem;
    display: flex;
    cursor: pointer;
}
.imgDiv  {
    width: 2rem;
    height:2rem;
    margin-left: 2rem;
}

#emojies {
    height: 18rem;
    overflow: scroll;
    flex-direction: row;
    padding-left: 2rem;
    background:rgba(255,255,255,1);
    box-shadow:0rem 0.08rem 0.5rem 0.08rem rgba(223,223,223,1);
    z-index: 222;
    margin-bottom: 1rem;
    margin-left: 1rem;
}

#emoji-row .emoji-row {
    display: flex;
    height:16rem;
    padding-right: 2rem
}
.emoji-row {
    padding-right: 2rem
}

.emoji-row item {
    font-size: 3rem;
}

.emoji-row item:hover{
    cursor: pointer;
}

.right-input .input-box textarea:focus{
    color:rgba(20,16,48,1);
}

.msg_status {
    display: flex;
    flex-direction: row-reverse;
}
.msg_status_img {
    position: relative;
    display: none;
}
.msg_status_img img {
    position: absolute;
    bottom:0;
    right:1rem;
}

.showbox {
    position: relative;
    margin-right: 3rem;
}
.loader {
    position: absolute;
    bottom:0;
}

.loader:before {
    content: '';
    display: block;
    padding-top: 100%;
}

.circular {
    animation: rotate 2s linear infinite;
    height: 2rem;
    transform-origin: center center;
    width: 2rem;
    margin: auto;
    bottom:0;
}
.path {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    stroke-linecap: round;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}
@keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35px;
    }
    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124px;
    }
}
@keyframes color {
    100%, 0% {
        stroke: #4C3BB1;
    }
    40% {
        stroke: #4C3BB1;
    }
    66% {
        stroke: #4C3BB1;
    }
    80%, 90% {
        stroke: #4C3BB1;
    }
}

#msgImage {
    overflow: scroll;
    display: none;
}

.user-image-upload {
    border-radius: 50%;
}

.user-info-avatar {
    border-radius: 50%;
    width:4.68rem;
    height:4.68rem;
}
 .unread-num {
    top:1.5rem;
    right:1rem;
    width: 2rem;
    height: 2rem;

    background-color: red;
    position: absolute;
    border-radius: 50%;
    color: white;
     text-align: center;
     line-height: 2rem;
}

.unread-num-mute {
    top:2rem;
    right:1.5rem;
    width: 1rem;
    height: 1rem;
    background-color: red;
    position: absolute;
    border-radius: 50%;
    color: white;
    text-align: center;
    line-height: 2rem;
}

.chatsession-row-img .unread-num {
    top:0rem;
    right:-1rem;
}
.msg-notice {
    font-size:1.31rem;
    color:rgba(255,255,255,1);
    width: auto;
    max-width:50rem;
    min-width: 3rem;
    display: inline-block;
    height: 3rem;
    line-height: 3rem;
    max-height: 20rem;
    background:rgba(223,223,223,1);
    border-radius:0.56rem;
    text-align: center;
    padding: 0.5rem;
    word-break: break-all;
    word-wrap: break-word;
    margin-bottom: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
}
.text-align-center {
    text-align: center;
}

.user-image-for-add {
    width: 8rem;
    height:8rem;
    border-radius: 50%;
}

.l-sb-logout {
    position: absolute;
    bottom: 1rem;
    cursor: pointer;
    width: 7.5rem;
}

.logout {
    width: 3rem;
    height: 3rem;
    line-height: 5rem;
    font-size:1.31rem;
    font-family:PingFangSC-Medium;
    color:rgba(255,255,255,1);
    align-items: center;
    justify-content: end;
    margin: 0 auto;
    text-align: center;
}

/*.logout:hover {*/
    /*background-color: #4C3BB1;*/
/*}*/

.permission-join, .can-guest-read-message, .quit-group,
.delete-group,.mute-group,.remove_member,.remove_member_from_group,
.delete-friend, .edit-remark, .add-friend, .mute-friend,.add_friend,
.invite_people, .cancle_invite_people, .add_member_to_group,
.user-image-upload,.user-img-carmera,.see_group_profile,.mark_down,
.refused-apply, .agreed-apply{
    cursor: pointer;
}
.add-friend {
    border-bottom: 1px solid rgba(223,223,223,1);
    border-top: 1px solid rgba(223,223,223,1);
}

.mute {
    position: absolute;

    bottom: 1rem;
    right: 2rem;
    top: 4rem;
}
.mute_div {
    background-color: red;
    width: 1rem;
    height:1rem;
    border-radius: 50%;
    position: absolute;
    top:0;
    right:0;
}

.apply_friend_list_num {
    width: 1rem;
    height:1rem;
    background-color: red;
    position: absolute;
    top: 2rem;
    right: 2rem;
    border-radius: 50%;
    color: white;
}
.apply_friend_num {
    width: 2rem;
    height:2rem;
    background-color: red;
    position: absolute;
    top: 0.5rem;
    right:0rem;
    border-radius: 50%;
    color: white;
    text-align: center;
    line-height: 2rem;
}

.group-desc-body {
    font-size:1.13rem;
    color:rgba(153,153,153,1);
}
.group-desc-body textarea {
    width:24.27rem;
    height:13.04rem;
    font-size:1.13rem;
    color:rgba(153,153,153,1);
    overflow: scroll;
    outline: none;
    border:none;
    background: white;
    resize:none;
}

.add_member_to_group {
    width:9.76rem;
    height:3.93rem;
    background:rgba(76,59,177,1);
    border-radius:0.38rem;
    border:0.09rem solid rgba(76,59,177,1);
}

.cancle_invite_people {
    width:9.76rem;
    height:3.94rem;
    border-radius:0.38rem;
    border:0.09rem solid rgba(76,59,177,1);
}
.chat-dialog {
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
}

.no-chat-dialog-div {
    background-color: white;
    width: 100%;
    height: 100%;
    justify-content: center;
    text-align: center;
    margin: 0 auto;
    display: flex
}
.no-chat-dialog {
    width: 30rem;
    height: 30rem;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    display: table-cell;
}
.no-room-data {
    margin: auto;
    position: absolute;
    top: 40%;
    bottom: 0;
    right: 0;
    left: 0;
    text-align: center;
}

.no-data-tip {
    font-size:1.69rem;
    color:rgba(153,153,153,1);
    display: block;
}
.share-group {
    cursor: pointer;
}
#share_group {
    width:75rem;
    height: 47rem;
    background:rgba(255,255,255,1);
    border-radius:0.94rem;
    position: relative;
}

.copy-share-group,
.copy-share-group:hover,
.copy-share-group:after,
.copy-share-group:focus {
    width:11.26rem;
    height:4.69rem;
    border-radius:0.47rem;
    border:0.09rem solid rgba(76,59,177,1);
    font-size:1.88rem;
    color:rgba(76,59,177,1);
    line-height: 4.69rem;
    background:rgba(255,255,255,1);
    cursor: pointer;
    outline: none;
    margin-bottom: 5rem;
    margin-right:3rem;
    margin-left: 25rem;
    margin-top:1rem;
}

.save-share-group,
.save-share-group:hover,
.save-share-group:active,
.save-share-group:focus {
    width:11.26rem;
    height:4.69rem;
    background:rgba(76,59,177,1);
    border-radius:0.47rem;
    border:0.09rem solid rgba(76,59,177,1);
    font-size:1.88rem;
    color:rgba(255,255,255,1);
    line-height: 4.69rem;
    cursor: pointer;
    outline: none;
    margin-bottom: 5rem;
    margin-top:1rem;
}

.edit_remark_for_friend,.apply-friend {
    cursor: pointer;
}
.edit_remark_for_friend {
    margin-top: 7rem;
}
.edit_remark_for_friend:hover{
    margin-top: 7rem;
    cursor: pointer;
}
#selfInfoDiv {
    width: 38rem;
    height:25rem;
}

.selfNickNameDiv {
    text-align: left;
    font-size:1.5rem;
    width: 38rem;
    margin-left: 0rem;
    text-align: center;
    cursor: pointer;
}

.editNickNameIcon {
    width: 1rem;
    height:1rem
}

.selfNickNameDiv .nickname {
    font-size:1.88rem;
    font-family:PingFangSC-Medium;
    font-weight:500;
    color:rgba(20,16,48,1);
    margin-left: 0rem;
    margin-top: 0rem;
    text-align: center;
}
.selfNickNameDiv .loginName {
    font-size:1.13rem;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(102,102,102,1);
    margin-left: 0rem;
    margin-top: 0rem;
    text-align: center;
}
button:active{
    outline: none;
}

.preemptive_version {
    width:7rem;
    height:34rem;
    left:-0.3rem;
    position: absolute;
    bottom:8rem;
    cursor: pointer;
}

.app_download {
    width: 2rem;
    height:3rem;
}

.preemptiveVersionDiv {
    cursor: pointer;
}

.appDownload {
    cursor: pointer;
    text-align: center;
    width:8rem;
    left:-0.3rem;
    position: absolute;
    bottom:2rem;
    cursor: pointer;
}

.qrcodeCanvas {
    width:23rem;
    height: 23rem;
    text-align: center;
    background:rgba(255,255,255,1);
    box-shadow:0rem 0.19rem 0.75rem 0.09rem rgba(223,223,223,1);
    border-radius:0.56rem;
    padding:1rem 0rem 0rem 1rem ;
}

.group_avatar {
    width:6rem;
    height:6rem;
    border-radius: 50%;
}

.group-profile-desc {
    position: absolute;
    visibility: visible;
    width: 100%;
    margin-bottom: 2rem;
    margin-left: 0.5rem;
}
.add-friend-div-img{
    margin-top: 5rem;
    text-align: center;
    position: relative
}
.user-nickname-for-add{
    text-align: center;
    position: relative;
    font-size:1.31rem;
    font-family:PingFangSC-Regular;
    color:rgba(20,16,48,1);
}
.qrcodeCanvas-title {
    display: flex;
    margin-bottom: 3rem;
    justify-content: left;
}

.web-msg-click {
    cursor: pointer;
}

#search-user-div {
    width:39.4rem;
    height:56.29rem;
    background:rgba(255,255,255,1);
    box-shadow:0rem 0.19rem 2.53rem 0rem rgba(0,0,0,0.3);
}
.search-user-header {
    width:39.4rem;
    height:5.63rem;
    background:rgba(255,255,255,1);
    box-shadow:0rem 0.09rem 0.38rem 0rem rgba(223,223,223,1);
    position: relative;
    text-align: center;
}
.search-user-content {
    height:50rem;
    overflow-y: scroll;
}
.search-user-header-content {
    width:35rem;
    height:3rem;
    background:rgba(235,235,242,1);
    border-radius:0.38rem;
    margin-left: 2rem;
    text-align: left;
    position: absolute;
    top:1rem;
}

.search-user-input {
    margin-left: 0rem;
    margin-top: 0rem;
    background:rgba(235,235,242,1);
    padding-left: 4rem;

}
.search-user-header img{
    width: 2rem;
    height: 2rem;
    position: absolute;
    left: 3rem;
    top: 1.5rem;
}
.search-user {
    height:6rem;
    text-align: left;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}

.search-user img {
    width:4rem;
    height:4rem;
    border-radius: 50%;
}

.search-add-friend-btn {
    width:5.63rem;
    height:2.63rem;
    background:rgba(76,59,177,1);
    border-radius:0.38rem;
    font-size:1.31rem;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(255,255,255,1);
    margin-top:2rem;
    margin-right:2rem;
    cursor: pointer;
    outline: none;
}
.search-user-info {
    position: relative;
}

.search-user-info img{
    margin-top:1rem;
    margin-left: 2rem;
}

.search-user-info span {
    margin-top: 0rem;
    position: absolute;
    top: 2rem;
    left: 7rem;
}

.search-user:hover {
    background:rgba(244,244,249,1);
}

.search-user-img {
    height:50rem;
    text-align: center;
    position: relative;
}
.search-user-img img{
    width:12rem;
    height:10rem;
    border-radius: 0;
    position:absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.close_div, .close_div img {
    cursor:pointer;
    width:2rem;
    height:2rem;
    position: absolute;
    top:1rem;
    right:1rem;
}