/*
  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, "MicrosoftYaHei";
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: rgba(245, 244, 249, 1);
    font-size: 10.66px;

}

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

/* Basic Layout**/

.wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: stretch;
}

.layout-all-row {
    width: 100%;
    /*background: white;*/
    background: rgba(245, 245, 245, 1);;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    flex-shrink: 0;

}

.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: 1.78rem 1.78rem 0 1.78rem;

}

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

.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: 2.81rem;
}

.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;*/
    padding-top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.left-body-create-group {
    display: flex;
    flex-direction: column;
    height: 9.17rem;
    background: rgba(255, 255, 255, 1);
    position: relative;
}

.left-body-chatsession {
    flex-grow: 1;
    flex-shrink: 1;
    width: 100%;
    overflow-y: scroll;
    display: block;
    padding-top: 2rem;
}

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

.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: 1.41rem;
    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: 1.41rem;

    height: 1.51rem;
    font-size: 1.31rem;
    color: rgba(20, 16, 48, 0.2);

    overflow: hidden;
}

/* right-body */
.right-head {
    height: 5.72rem;
    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 {
    margin-top: 2rem;
    position: absolute;
}

.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;
    /*justify-content: flex-end;*/
    /*background: red;*/
}

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

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

.msg_content::-webkit-input-placeholder {
    height: 1.5rem;
    font-size: 1.5rem;
    font-family: PingFangSC-Regular;
    color: rgba(201, 201, 201, 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 {
    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: 75.05rem;
    height: 46.9rem;
    background: rgba(255, 255, 255, 1);
    border-radius: 0.94rem;
}

#selfInfo {
    width: 65.67rem;
    height: 42.21rem;
    background: rgba(255, 255, 255, 1);
    border-radius: 0.94rem;
}

.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(205, 205, 205, 1);
    line-height: 1.88rem;
    margin-left: 23rem;
    margin-top: 5rem;
    padding: 0.5rem;
}

.create_group_box_div_input::-webkit-input-placeholder {
    height: 1.88rem;
    font-size: 1.88rem;
    font-family: PingFangSC-Regular;
    color: rgba(223, 223, 223, 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;
    font-family: PingFangSC-Medium;
    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;
    font-family: PingFangSC-Medium;
    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;
    font-family: PingFangSC-Regular;
    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 {
    width: 10.5rem;
    height: 2.08rem;
    font-size: 1.5rem;
    display: block;
    font-family: PingFangSC-Regular;
    color: rgba(153, 153, 153, 1);
    line-height: 2.08rem;
}

.text-align-left {
    text-align: left;
    position: relative;
}

.text-align-right {
    text-align: right;
}

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

#group-user-menu {
    display: inline-block;
    justify-content: center;
    width: 9.17rem;
    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;
    font-family: PingFangSC-Regular;
    color: rgba(20, 16, 48, 1);
    line-height: 2.83rem;
}

#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;
    font-family: PingFangSC-Regular;
    color: rgba(20, 16, 48, 1);
    margin-bottom: 3rem;
    display: flex;
    cursor: pointer;
}

.imgDiv {
    width: 2rem;
    height: 2rem;
    margin-left: 2rem;
}

#emojies {
    width: 38rem;
    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;
}

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

.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 {
    padding: 1.03rem;
    overflow: scroll;
}

.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;
    min-width: 3rem;
    display: inline-block;
    height: 2.81rem;
    line-height: 2.81rem;
    background: rgba(223, 223, 223, 1);
    border-radius: 0.56rem;
    text-align: center;
}

.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, .cancle_invite_people, .add_member_to_group {
    cursor: pointer;
}

.mute {
    position: absolute;
    bottom: 1rem;
    right: 2rem;
}

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

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

.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;
    font-family: PingFangSC-Regular;
    color: rgba(153, 153, 153, 1);
    display: block;
}

.friend-right-body{
    flex-grow: 1;
    height: 90%;
    position: relative;
    align-items: stretch;
    flex-direction: row;
    overflow: scroll;
    background: rgba(255, 255, 255, 1);
}

.list-item-center {
    width: 100%;
    /*height: 11rem;*/
    /*background: rgba(255, 255, 255, 1);*/
    padding-top: 20px;
    /*padding-left: 1rem;*/

}

.item-row {
    background: rgba(255, 255, 255, 1);
    display: flex;
    flex-direction: row;
    text-align: center;
    height: 50px;
    /*margin-bottom: 2rem;*/
}

/*.item-row:hover{*/
    /*background: rgba(255, 255, 255, 0.2);*/
/*}*/

.item-row:active{
    background: rgba(255, 255, 255, 0.2);
}

.item-header {
    width: 50px;
    height: 50px;
}

.division-line {
    height: 1px;
    background: rgba(243, 243, 243, 1);
    margin-left: 40px;
    overflow: hidden;
}

.item-body {
    width: 100%;
    height: 50px;
    margin-left: 1rem;
    margin-top: 1rem;
    flex-direction: row;
}

.item-body-display {
    display: flex;
    justify-content: space-between;
    /*margin-right: 7rem;*/
    /*margin-bottom: 3rem;*/
    line-height: 3rem;
}

.item-body-tail {
    margin-right: 10px;
}

.apply-friend-msg {
    width: 100%;
    display: flex;
    height: 1.33rem;
    font-size: 1.33rem;
    font-family: PingFangSC-Regular;
    color: rgba(20, 16, 48, 1);
    line-height: 1.33rem;
}

.apply-friend-msg span {
    color: rgba(153, 153, 153, 1);
    margin-right: 1rem;
}

.site-manage-image {
    width: 40px;
    height: 40px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 16px;
    /*border-radius: 50%;*/
}

.more-img {
    width: 8px;
    height: 13px;
    /*border-radius: 50%;*/
}

.item-body-desc {
    height: 3rem;
    font-size: 16px;
    font-family: PingFangSC-Regular;
    /*color: rgba(76, 59, 177, 1);*/
    margin-left: 11px;
    line-height: 3rem;
}

.apply-friend-body span {
    font-family: PingFangSC-Regular;
    color: rgba(20, 16, 48, 1);
}

.refused-apply {
    width: 6rem;
    height: 3rem;
    border-radius: 0.33rem;
    border: 0.08rem solid rgba(76, 59, 177, 1);
    font-size: 1.17rem;
    font-family: PingFangSC-Regular;
    color: rgba(76, 59, 177, 1);
    margin-right: 1rem;
}

.agreed-apply {
    width: 6rem;
    height: 3rem;
    background: rgba(76, 59, 177, 1);
    border-radius: 0.33rem;
    border: 0.08rem solid rgba(76, 59, 177, 1);
    font-size: 1.17rem;
    font-family: PingFangSC-Regular;
    color: rgba(255, 255, 255, 1);
}