/*
  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;}*/

::-webkit-input-placeholder,
::-moz-placeholder ,
:-ms-input-placeholder,
:-moz-placeholder {
    color:rgba(153,153,153,1);
}



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

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

.left-sidebar {
    width: 7.5rem;
    background: rgba(0,0,0,0.95) !important;
    height: 100%;
}

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


.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;
    position: relative;
    display: flex;
    align-items: stretch;
    flex-direction: row;
    overflow-y: hidden;
    top: 7.1rem;
    right: 1rem;
    left: 1rem;
    bottom: 0;
    display: flex;
    position: absolute;
}

.right-body-chat {
    background: #fff;
    flex-grow: 1;
    border-bottom: 0.2rem solid rgba(0,0,0,0.1);
    height: 1;
    overflow: hidden;
    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;
}

.right-chatbox-div {
    flex-grow: 1;
    flex-shrink: 1;
    overflow-y: scroll;
    height: 1;
    overflow-x: hidden;
}

.right-chatbox-div: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: 10%;
    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;*/
    height: 100%;
}

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

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

.group-list-contact-row,.friend-list-contact-row, .search-list-contact-row {
    overflow-y: scroll;
    flex-grow: 1;
    flex-shrink : 1;
    height: 100%;
}

.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
/*.u2-profile:hover,*/
/*.group-profile:hover*/

{
    background: #F5F4F9;
    cursor: pointer;
}

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


.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;
    line-height: 1.5rem;
}

.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;
    box-shadow:0rem 0.09rem 0.09rem 0rem rgba(0,0,0,0.2);
}
.right-head .title {
    font-size:2.25rem;
    color:rgba(20,16,48,1);
    position: absolute;
    left: 3.1rem;
    top: 1.88rem;
}
.right-head .plugin-title {
    font-size:2.25rem;
    color:rgba(20,16,48,1);
    position: absolute;
    left: 6.1rem;
    top: 1.88rem;
}

.right-head .actions {
    position: absolute;
    right: 1.97rem;
    bottom: 0.56rem;
    height: 3.75rem;
    text-align: right;
}

.right-head .plugin_back {
    position: absolute;
    left: 2.1rem;
    top: 1.88rem;
}

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

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

/* 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 {
    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: 4rem;
    height:4rem;
    border-radius: 10%;
}

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

.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;
    border:0.09rem solid rgba(201,201,201,1);
    cursor: pointer;
}

.msg-left .msg-content-img .msg_img{
    border-radius: 0rem 0.94rem  0.94rem 0.94rem;
    border:0.09rem solid rgba(201,201,201,1);
    cursor: pointer;
}

/*right-input*/
.right-input {
    display: flex;
    flex-direction: column;
    height: 9rem;
    flex-shrink: 0;
    margin-bottom: 1rem;
    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.25rem;
    height: 2.25rem;
    margin-right: 1.31rem;
}

.right-input .input-box {
    flex-grow: 1;
    display: flex;
    align-items: stretch;
}

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

.msg_content::-webkit-input-placeholder,
.msg_content::-moz-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;
    background:rgba(201,201,201,1);
    margin-left: 2rem;
    overflow: hidden;
    margin-right: 16rem;
}
.right-input .input-box textarea:focus {
    outline: 0;
}

.right-input .input-box .input-btn {
    margin-right: 2rem;
}

.right-input .input-box .input-btn button {
    width:11.26rem;
    height:3.75rem;
    background:rgba(76,59,177,1);
    border-radius:0.47rem;
    font-size:1.88rem;
    font-family:PingFangSC-Medium;
    font-weight:500;
    color:rgba(255,255,255,1);
}

/* 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: 100002;
    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: 29rem;
    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);
}

#group-speaker-people, #group-member-list {
    height:59rem;
    background:rgba(255,255,255,1);
    box-shadow:0rem 0.17rem 2.25rem 0rem rgba(0,0,0,0.3);
    position: relative;
}

.group-member-content{
    height:54rem;
    width: 39.4rem;
    overflow-y: scroll;
    margin-top: 0.1rem;
}
.group-member-info {
    position: absolute;
    top:11rem;
    margin-left: -42.5rem;
    width:42.21rem;
    text-align: center;
    height:25.33rem;
    background:rgba(255,255,255,1);
    border-radius:0.56rem;
    border:0.09rem solid rgba(223,223,223,1);
}
.group-member-img {
    text-align: center;
    margin-top: 3rem;
}

.group-member-img img {
    width:7rem;
    height: 7rem;
    border-radius: 50%;
}

.group-member-line{
    width:38.46rem;
    height:0.09rem;
    background:rgba(223,223,223,1);
    margin-left: 2rem;
    margin-top: 4rem;
}
.group-member-nickname  {
    height:1.69rem;
    font-size:1.88rem;
    font-family:PingFangSC-Medium;
    font-weight:500;
    color:rgba(20,16,48,1);
    line-height:1.69rem;
}

.group-member-loginname {
    font-size:1.13rem;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(102,102,102,1);
}

.group-member-btn{
    width:17.82rem;
    height:3.75rem;
    background:rgba(76,59,177,1);
    border-radius:0.38rem;
    font-size:1.31rem;
    font-family:PingFangSC-Medium;
    font-weight:500;
    color:rgba(255,255,255,1);
    cursor: pointer;
    outline: none;
    margin-top:2rem;
}
.sub-speaker-div{
    display: flex;
    justify-content: space-between;
    margin-left: 2rem;
    overflow-y: scroll;
}
.sub-speaker-title {
    height:5rem;
    font-size:1.31rem;
    font-family:PingFangSC-Medium;
    font-weight:500;
    color:rgba(102,102,102,1);
    line-height:5rem;
    margin-left: 1rem;
    margin-right: 1rem;
}
.remove-all-speaker, .group_speakers_set_div {
    margin-right: 1rem;
    width:12.95rem;
    height:5rem;
    font-size:1.31rem;
    font-family:PingFangSC-Medium;
    font-weight:500;
    color:rgba(76,59,177,1);
    line-height:5rem;
    cursor: pointer;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.speaker-line{
    width:35.18rem;
    height:0.09rem;
    background:rgba(243,243,243,1);
    margin-left: 2rem;
}

.speaker-content{
    height:48rem;
    overflow-y: scroll;
}

.speaker-group-member-div {
    overflow-y: scroll;
}

.remove_speaker_btn {
    width:4.69rem;
    height:2.63rem;
    border-radius:0.38rem;
    border:0.09rem solid rgba(76,59,177,1);
    font-size:1.13rem;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(76,59,177,1);
    cursor: pointer;
    outline: none;
}
.speaker_remove_people, .speaker_add_people {
    cursor: pointer;
    outline: none;
}
.remove_member_btn_div {
    cursor: pointer;
    outline: none;
    margin-right: 1rem;
    margin-top: 1rem;
}

.add_speaker_btn {
    width:4.69rem;
    height:2.63rem;
    background:rgba(76,59,177,1);
    border-radius:0.38rem;
    font-size:1.13rem;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(255,255,255,1);
    cursor: pointer;
    outline: none;
}
.remove-people-div {
    overflow: scroll;
    height: 45rem;
}

#group-invite-people .pw-right {
    width: 31rem;
    display: flex;
    flex-direction: column;
}

.pw-right-header {
    overflow: hidden;
    height:4.69rem;
    background:rgba(255,255,255,1);
    box-shadow:0rem 0.09rem 0.38rem 0rem rgba(223,223,223,1);

    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;
    margin-top: 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:38rem;
    height:47rem;
    background:rgba(255,255,255,1);
    border-radius:0.94rem;
    position: relative;
}

#more-info {
    height:59rem;
    width:39rem;
    background:rgba(255,255,255,1);
    box-shadow:0rem 0.19rem 2.53rem 0rem rgba(0,0,0,0.3);
}
.more-info {
    cursor: pointer;
}

.more-info-title {
    height:4.69rem;
    background:rgba(255,255,255,1);
    box-shadow:0rem 0.09rem 0.38rem 0rem rgba(223,223,223,1);
    font-size:1.88rem;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(27,27,27,1);
    line-height:4.69rem;
    display: flex;
    justify-content: center;
}
.custom_info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin:2rem 3rem 0rem 3rem;
}
.custom_name {
    height:1.5rem;
    font-size:1.5rem;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(27,27,27,1);
    line-height:1.5rem;
}
.custom_value {
    height:1.5rem;
    font-size:1.5rem;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(153,153,153,1);
    line-height:1.5rem;
}

#selfInfo {
    width:38.37rem;
    min-width: 38rem;
    height:auto;
    min-height: 20rem;
    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;
}

#selfCutsomInfoDiv {
    overflow-y: scroll;
    position: absolute;
    width: 100%;
    display: none;
    overflow-x:hidden;
}

.self_profile_item {
    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_profile_item span{
    padding-left:2rem;
}
.self_profile_item: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: 5rem;
    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,
.create_group_box_div_input::-moz-placeholder{
    height:1.31rem;
    font-size:1.88rem;
    color:rgba(153,153,153,1);
}

/*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;
    background-color: rgba(153,153,153,1);
    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-right{
    text-align: left;
    position:relative;
    word-break: break-all;
    cursor: pointer;
}

.text-align-left-text pre,
.text-align-right-text pre{
    margin:0px;
    padding:0px;
    display: inline;
    white-space: pre-wrap;
}

.text-align-left-text pre a,
.text-align-left-text pre a:hover,
.text-align-left-text pre a:visited {
    font-size:1.31rem;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(255,255,255,1);
}

.text-align-right-text pre a,
.text-align-right-text pre a:hover,
.text-align-right-text pre a:visited {
    font-size:1.31rem;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(48,165,255,1);
}


.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: 5rem;
    width: 29rem;
    word-break: break-all;
    padding: 0.5rem;
}

#group-user-menu, #msg-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;
    cursor: pointer;
}

#msg-menu .item {
    margin:0 auto;
    height:2.25rem;
    text-align: center;
    font-size:1.17rem;
    width: 8rem;
    color:rgba(20,16,48,1);
    line-height:2.25rem;
    padding-left: 1rem;
    padding-right: 1rem;
    cursor: pointer;
}

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

#msg-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;
    justify-content: space-between;
}
.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: 10%;
}

.user-info-avatar {
    border-radius: 10%;
    width:5rem;
    height:5rem;
}
.unread-num {
    top:1.5rem;
    right:1rem;
    width: 1.8rem;
    height: 1.8rem;
    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:-0.5rem;
    right:-0.5rem;
}
.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:7rem;
    height: 7rem;
    border-radius: 10%;
}

.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;
    width: 1.4rem;
    height: 1.5rem;
}

.mute_div {
    background-color: red;
    width: 1rem;
    height:1rem;
    border-radius: 50%;
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    margin: auto;
}

.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;
}
.friend-list-div, .group-list-div {
    width:28.14rem;
    height:2.81rem;
    background:rgba(255,255,255,1);
    margin-top:3rem;
    font-size:1.31rem;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(201,201,201,1);
    margin-left: 2rem;
}


.group-member-body {
    max-height: 14rem;
    margin-bottom: 1rem;
}
.group-member-body-div {
    display: flex;
}
.see_all_group_member {
    height:1.5rem;
    font-size:1.31rem;
    font-family:PingFangSC-Medium;
    font-weight:500;
    color:rgba(76,59,177,1);
    line-height:1.5rem;
    cursor: pointer;
    outline: 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 , .group_speakers{
    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:20rem;
}

.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;
}

/*.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;
}
.add-friend-div-img{
    margin-top: 3rem;
    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-input::-webkit-input-placeholder,
.search-user-input::-moz-placeholder{
    font-size:1.31rem;
    font-family:PingFangSC-Regular;
    color:rgba(153,153,153,1);
}

.search-user-header img{
    width: 2rem;
    height: 2rem;
    position: absolute;
    left: 3rem;
    top: 1.5rem;
}

.search-user,create-group,.search-user-detail {
    height:6rem;
    text-align: left;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}
.create-group {
    position: relative;
}

.search-user-detail 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;
    width:24rem;
}

.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;
}

#selfQrcodeDiv {
    width: 100%;
    height:100%;
    cursor: pointer;
}
#selfQrcodeCanvas {
    margin-top:3rem;
    display: flex;
    justify-content: center;
    cursor: pointer;
}

#selfQrcodeCanvas {
    height: 100%;
    margin-top: 3rem;
}

#selfQrcode {
    width: 17rem;
    height:17rem;
}

#download-app-div {
    width:75.05rem;
    height:46.9rem;
    background:rgba(255,255,255,1);
    border-radius:0.94rem;
}
.app_download_header {
    height:3.1rem;
    font-size:2.25rem;
    font-family:PingFangSC-Medium;
    font-weight:500;
    color:rgba(20,16,48,1);
    line-height:3.1rem;
    display: flex;
    justify-content: center;
    margin-top:3rem;
    margin-bottom: 1rem;
}

.app_download_subheader {
    height:2.35rem;
    font-size:1.69rem;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(20,16,48,1);
    line-height:2.35rem;
    display: flex;
    justify-content: center;
}

#download-app-div #qrcodeCanvas {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}
.ios_info, .android_info {
    width:11rem;
    height:1.88rem;
    font-size:2.25rem;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(102,102,102,1);
    display: flex;
}

.download_button_div {
    display: flex;
    justify-content: space-between;
    width: 24rem;
}


.download_ios {
    width:11.26rem;
    height:3.75rem;
    background:rgba(99,169,255,1);
    border-radius:0.38rem;
    border:0.19rem solid rgba(76,169,255,1);
    margin-left: 25rem;
    margin-top:3rem;
    font-size:1.88rem;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(255,255,255,1);
    line-height: 3.75rem;
    margin-right: 2rem;
    outline:  none;
    cursor: pointer;
}

.download_android {
    width:11.26rem;
    height:3.75rem;
    margin-top:3rem;
    background:rgba(90,200,44,1);
    border:0.19rem solid rgba(90,200,44,1);
    border-radius:0.38rem;
    font-size:1.88rem;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(255,255,255,1);
    outline:  none;
    cursor: pointer;
}

.left_msg_file_div {
    width:23.64rem;
    height:6.94rem;
    background:rgba(255,255,255,1);
    box-shadow:0rem 0.09rem 0.38rem 0rem rgba(233,233,233,1);
    border-radius:0.56rem 0rem 0.56rem 0.56rem;
    display: flex;
    cursor: pointer;
    border: 1px solid #ccc;
}

.left_msg_file_div img {
    width:5rem;
    height:5rem;
    margin-top: 1rem;
    margin-left: 1rem;
}

.msg_file_info {
    font-size:1.31rem;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(33,33,33,1);
    margin-left: 1rem;
    margin-top:2rem;
}

.msg_file_size {
    color:rgba(153,153,153,1);
}

.right_msg_file_div {
    width:23.64rem;
    height:6.94rem;
    background:rgba(255,255,255,1);
    border-radius:0rem 0.56rem  0.56rem 0.56rem;
    border:0.09rem solid rgba(201,201,201,1);
    display: flex;
    justify-content:space-between;
    cursor: pointer;
}

.right_msg_file_div img {
    width:5rem;
    height:5rem;
    margin-top: 1rem;
    margin-left: 1rem;
}

.right_msg_file_info {
    font-size:1.31rem;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(33,33,33,1);
    margin-left:1rem;
    margin-top:2rem;
    text-align: left;
    width: 17rem;
}

.group_owner{
    height:1.69rem;
    background:rgba(244,67,54,1);
    border: 0.09rem solid rgba(244,67,54,1);
    border-radius:0.19rem;
    font-size:0.94rem;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(255,255,255,1);
}

.group_admin{
    height:1.69rem;
    background:rgba(47,182,161,1);
    border: 0.09rem solid rgba(47,182,161,1);
    border-radius:0.19rem;
    font-size:0.94rem;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(255,255,255,1);
}
.remove_group_btn{
    height:2.63rem;
    border-radius:0.38rem;
    border:0.09rem solid rgba(76,59,177,1);
    font-size:1.13rem;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(76,59,177,1);
    cursor: pointer;
    outline: none;
}
.clear_room_chat {
    cursor: pointer;
}
.plugin-iframe {
    height: 100%;
    width: 100%;
    overflow: hidden;
    outline: none;
    border: none;
}

.open_new_page, .close_plugin,.chat_plugin {
    cursor: pointer;
}
.plugin_back {
    cursor: pointer;
    width: 3rem;
    height:3rem;
}

#chat_plugin {
    width: 41rem;
    height: 23.45rem;
    background: rgba(255,255,255,1);
    box-shadow: 0rem 0.09rem 0.56rem 0.09rem rgba(223,223,223,1);
    margin: 1rem;
    z-index: 10001;
}
.chat_plugin_iframe {
    width:100%;
    height:90%;
    border:none;
    outline: none;
    overflow-y: scroll;
}

.plugin_logo {
    border-radius: 50%;
}

.sound_mute, .site_mute {
    width: 5rem;
    height:3rem;
    position: absolute;
    right:3rem;
    top:1rem;
    bottom:1rem;
    margin:auto;
    cursor: pointer;
}

.master_tip{
    width: 4rem;
    height:1.3rem;
    background:rgba(249,183,38,1);
    border-radius:0.19rem;
    text-align: center;
    font-size:0.94rem;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(255,255,255,0.87);
    line-height:1.3rem;
}

.chat_master_tip{
    width:2.63rem;
    background:rgba(249,183,38,1);
    border-radius:0.19rem;
    text-align: center;
    font-size:0.94rem;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(255,255,255,0.87);
    height: 1.3rem;
    margin-right: 5px;
}

.plugin-right-body{
    width: 100%;
    height: 100%;
}
.search_group_friend {
    height:7rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.search_group_friend img{
    width: 1.5rem;
    height:1.5rem;
    position: absolute;
    left: 2rem;
    top: 2.5rem;
    margin: auto;
    cursor: pointer;
}
.search_group_friend input{
    width:90%;
    padding-left: 3rem;
    height:2.81rem;
    background:rgba(244,244,246,1);
    border-radius:0.19rem;
    border:0.09rem solid #E9E8ED;
    outline: none;
    cursor: pointer;
}
.search_see_friend_all_tip,.search_see_group_all_tip {
    height:3rem;
    line-height: 3rem;
    font-size:12px;
    font-family:PingFangSC-Medium;
    font-weight:500;
    color:rgba(127,118,180,1);
    line-height:12px;
    margin-left: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.msg_content_for_click {
    position: relative;
}
.self_custom_info {
    height: 2.25rem;
    margin-left: 2rem;
    margin-top: 1rem;
    font-size: 1.31rem;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(27,27,27,1);
    line-height: 2rem;
    display: flex;
    justify-content: space-between;
}
.custom_name_tip {
    height: 2.5rem;
    line-height: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.self_custom_info input {
    width:18.76rem;
    height:2.25rem;
    border-radius:0.19rem;
    border:0.09rem solid;
    outline: none;
    cursor: pointer;
    border:1px solid #E5E5E5;
    margin-right: 10rem;
}

.edit_self_custom {
    position: absolute;
    right: 1rem;
    top: 1rem;
    margin: auto;
    height: 1.31rem;
    font-size: 1.31rem;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(27,27,27,1);
    line-height: 1.31rem;
    cursor: pointer;
}