@media (max-width: 320px) {
    ul.photopile li a {
        max-width: 850px;
    }
}

@media (min-width: 321px) and (max-width: 568px) {
    ul.photopile li a {
        max-width: 1000px;
    }
}

@media (min-width: 569px) and (max-width: 768px) {
    ul.photopile li a {
        max-width: 1150px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    ul.photopile li a {
        max-width: 1250px;
    }
}

/*-----------------------------------------------------------------------------
 *  Minimum height of the photopile's container div.
 *  This is a placeholder for the gallery while it loads which reduces
 *  shuffling around of elements before the gallery has rendered.
 *----------------------------------------------------------------------------*/

.js div.photopile-wrapper {
    //min-height: 80%;
    height: fit-content;
}


div#photopile-nav-next:hover,
div#photopile-nav-prev:hover {
    /*background-image: url('../images/nav-sprites.png');*/
    opacity: 1;
}

/*-----------------------------------------------------------------------------
 *  Make sure path to navigation sprite is correct
 *----------------------------------------------------------------------------*/

/*----- end customization -----*/

/* Prevent FOUC */
.js ul.photopile {
    display: none;

}

.passedBordClass{
    width: 100%;
    height: 0%;
    z-index: 0;
    transform: translateY(0%) translatex(0%) rotate(0deg) scale(1);
    transition: 0s;
    transform-origin: 0% 0%;
    background: brown;
}
.prepareBordClass{
    width: 100%;
    height: inherit;
    z-index: 0;
    transform: translateY(0%) translatex(0%) rotate(0deg) scale(1);
    transition: 0s;
    transform-origin: 0% 0%;

    position: absolute;
    z-index: 0;
    background-size: 50%;
    background-position: left top;
    top: 0px;
    overflow: hidden;
}
/* Thumbnails */
ul.photopile {
    position: relative;
    background-image: url('https://rainynight100-common.oss-cn-hangzhou.aliyuncs.com/img.png');

    width: 100%;
    height: 0%;

    margin: 0;
    padding: 0;
    list-style: none;
    top: 0px;
    z-index: 1;
    background-size: 580px;
    background-position: left top;
    //box-shadow: 0 0 14px rgba(61, 61, 61, 0.86);
}

ul.photopile li {


    width: 100%;
    user-select: none;
}

ul.photopile li a {
    cursor: grab;
    //border: 1px solid #6F6F6F;
}

ul.photopile li.photopile-active-thumbnail:hover,
ul.photopile li.photopile-active-thumbnail a:hover {
    cursor: default;
}

ul.photopile li a img {
    display: block;
    margin: 0;
    padding: 0px;
  //  border: 1px solid #6F6F6F;
    width: 100%;
    border-radius: 2px;
/ / height: auto;
/ / max-width: 190 px;
}

/* Photo container */
div#photopile-active-image-container {
    border: 1px solid #6F6F6F;
    box-shadow: 0 20px 80px black;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: auto;

}

div#photopile-active-image-container img {
    margin: 0 auto;
    height: auto;
    width: 100%;
}

div#photopile-active-image-info {
    position: absolute;
    width: fit-content;
    background: rgba(0, 0, 0, 0.3);
    bottom: -30px;
    height: fit-content;
    margin-left: auto;
    margin-right: auto;
    right: 50%;
}

div#photopile-active-image-info p {
    color: white;
    font-size: 12px;
    padding: 3px 8px;
}


/* Navigator */
div#photopile-nav-next{
    right: 50%;
    margin-right: -135px;
    margin-bottom: 10px;
    /* background-position: -50px 0; */
    background: none;
    /* border-radius: 50%; */
    width: 25px;
    height: 25px;
    background: white;
    border-radius: 4px;
    opacity: 0.5;
    cursor: pointer;
    position: absolute;
    bottom: -40px;
}
div#photopile-nav-prev {
    right: 50%;
    margin-right: 135px;
    margin-bottom: 10px;
    /* background-position: -50px 0; */
    background: none;
    /* border-radius: 50%; */
    width: 25px;
    height: 25px;
    background: white;
    border-radius: 4px;
    opacity: 0.5;
    cursor: pointer;
    position: absolute;
    bottom: -40px;
}


div#photopile-nav-prev:hover {
    background-position: 0 -50px;
}
/*.topBarContainer{
    height: 160px;
    //z-index: 1000000000000;
}
.topBarContainer:hover .photopile-wrapper{
    background-color:rgba(0,0,0,0.3);
    -webkit-filter:blur(2px);
    -moz-filter:blur(2px);
    -ms-filter:blur(2px);
    -o-filter:blur(2px);
    filter:blur(2px);
}*/
.bigavatar {
    width: 50px;

    height: 50px;
}

.divclass {
    width: 60px;

    height: 60px;

    overflow: hidden;
    border-radius: 50%;
    margin: 10px;
    top: -5px;
    left: 0px;
    position: absolute;
 //   box-shadow: 10px 0 40px #5e5e5e;;
}
.friendclassContainer {
    margin: 3px;
    margin-left: 7px;
    margin-top: 7px;
    width: 60px;
    display: inline-block;
}

.friendclassContainerSearch {
    //position: absolute;
    width: 60px;
    //display: inline-block;

}
.requestFriendclassContainer{
    top:100px;
    margin: 3px;
    margin-left: 7px;
    margin-top: 7px;
    display: inline-block;
    width: 97%;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 7px;

}
.friendclass {
    width: 60px;

    height: 60px;
    position: relative;
    overflow: hidden;
    //border:  solid #f8f5f5;

    border-color: rgb(208, 208, 208);
    //border-color: #CCDDFF;
    border-width: 2px;
    border-radius: 10%;
    margin: 3px;
    margin-left: 7px;
    margin-top: 7px;
    top: -5px;
    left: 0px;

    box-shadow: 1px 1px 1px 1px rgb(12, 12, 12);

}
.logoClass{
    width: 40px;
    height: 40px;
}
.knockerAvatarClass{
    position: relative;
    left: 0px;
    width: 40px;
    height: 40px;
    transition: 0.2s;
    top: 1px;
    overflow: hidden;
    border-color: black;
     margin: 2px;
    /* margin-top: 2px; */
    font-size: 12px;
    align-items: center;
    display: flex;
    border-radius: 4px;
    box-shadow: rgb(1 1 1 / 48%) 1px 1px 1px 1px;
    background: white;
}
.knockerAvatarClass:hover{
    animation-name: avatar-shake;
    //animation-name: reply-avatar-shake;
    animation-timing-function: ease-in-out;
    animation-duration: 0.4s;
    animation-iteration-count: 1;
    transform-origin: center;
}
@keyframes avatar-shake {
    /*    0% {transform: scale(1);opacity: 1;rotate(0deg)}
        50% {transform: scale(1.1);opacity: 0.1;rotate(-13.5deg)}
        100% {transform: scale(1);opacity: 1;rotate(0deg)}*/
    0% {
        transform: translate(0px, 0px) rotate(0deg)
    }
    20% {
        transform: translate(0px, 0px) rotate(7deg) scale(1)
    }

    40% {
        transform: translate(0px, 2px) rotate(10deg) scale(1)
    }

    70% {
        transform: translate(1px, 2px) rotate(-10deg) scale(1)
    }
    100% {
        transform: translate(0px, 0px) rotate(0deg)
    }
}

@keyframes reply-avatar-shake {
    /*    0% {transform: scale(1);opacity: 1;rotate(0deg)}
        50% {transform: scale(1.1);opacity: 0.1;rotate(-13.5deg)}
        100% {transform: scale(1);opacity: 1;rotate(0deg)}*/
    0% {
        transform: translate(0px, 0px) rotate(0deg)
    }
    20% {
        transform: translate(0px, 0px) rotate(7deg) scale(1)
    }

    40% {
        transform: translate(0px, 0px) rotate(10deg) scale(1)
    }

    70% {
        transform: translate(0px, 0px) rotate(-10deg) scale(1)
    }
    100% {
        transform: translate(0px, 0px) rotate(0deg)
    }
}
.knockerModeClass{
    position: relative;
    /* left: 42px; */

    transition: 0.7s;
    height: auto;
     top: 5px;
    overflow: hidden;
    border-width: 11112px;
    border-color: black;

    width: fit-content;
    padding: 6px;
    align-items: center;
    justify-content: center;
    background: #c4c4c4f0;
    margin-left: 4px;
    height: 29px;
    border-radius: 5px;
    white-space: nowrap;
    margin-top: auto;
    margin-bottom: auto;
    display: none;
}
.befriendsButtonInFollowingListClass{
    border: none;
//position: absolute;
    top: 6px;
    left: 168px;
    width: 20px;
    margin: 2px;
    background: none;
    border-radius: 3px;
}
.befriendsButtonClass{
    border: none;
    //position: absolute;
    top: 6px;
    left: 168px;
    width: 50px;
    margin: 2px;
    background: none;
    border-radius: 3px;
}
.befriendsButtonClass:hover{
    background: lightgray;
}
.befriendsButtonInFollowingListClass:hover{
    background: lightgray;
}
.deleteFriendsButtonClass{
    border: none;
 //   position: relative;
    top: 6px;
    left: 168px;
    width: 20px;
    background: none;
}
.deleteFriendsButtonClass:hover{
    background: rgba(205, 202, 202, 0.87);
}
.befriendsButtonClass .buttonInfo{
    display: none;
    position: absolute;
    top: -20px;
    width: min-content;
    white-space: nowrap;
}
.befriendsButtonInFollowingListClass .buttonInfo{
    display: none;
    position: absolute;
    top: -20px;
    width: min-content;
    white-space: nowrap;
}
.befriendsButtonClass:hover .buttonInfo{
    display: block;
}
.befriendsButtonInFollowingListClass:hover .buttonInfo{
    display: block;
}
.deleteFriendsButtonClass .buttonInfo{
    display: none;
    position: absolute;
    top: -20px;
    width: min-content;
    white-space: nowrap;
}
.deleteFriendsButtonClass:hover .buttonInfo{
    display: block;
}
.followingFriendButtonClass .buttonInfo{
    display: none;
    position: absolute;
    top: -20px;
    width: min-content;
    white-space: nowrap;
}
.followingFriendButtonClass:hover .buttonInfo{
    display: block;
}
.followingFriendButtonClass{
    border: none;
   // position: relative;
    top: 22px;
    left: 168px;
    width: 20px;
    background: none;
}
.followingFriendButtonClass:hover{
    background: rgba(205, 202, 202, 0.87);
}
.followingButtonClass{
    border: none;
    //position: absolute;
    top: 22px;
    left: 168px;
    width: 50px;
    background: none;
    border-radius: 3px;
    margin: 2px;
}
.followingButtonClass:hover{
    background: lightgray;
}
.timeLineSelectClass{

    float: left;
    position: fixed;
    width: auto;
    margin: 0px;
    left: 26px;
    padding: 0px;
    height: 25px;
    top: 75px;
    z-index: 3;
    white-space: nowrap;
    display: none;
    opacity: 0.8
}
.timeLineSelectClass .hideSelectTimeLineInfoClass{
    position: absolute;
    top: 27px;
    font-size: 12px;
    background: white;
    opacity: 0.8;
    border-radius: 3px;
    z-index: 1000000;
    display: none;
    white-space:nowrap;

}
.timeLineSelectClass:hover .hideSelectTimeLineInfoClass{
    display: block;
}

.timeLineToolClass{

    background: none;


}
.logoContainerClass{
    background-image: url("https://rainynight100-common.oss-cn-hangzhou.aliyuncs.com/logon.png") !important;
    background-size: cover;
    transform: rotate(-90deg);
}
.timeLineToolClass:hover{
 /*   background: rgba(1, 2, 2, 0.32);
    border-radius: 10%;*/
}
.timeLineToolClass .hideMyTimeLineInfoClass{
    position: absolute;
    top: 0px;
    font-size: 12px;

    opacity: 0.8;
    border-radius: 3px;
    z-index: 1000000;
    display: none;
    white-space:nowrap;
    transform: rotate(-90deg);
    transform-origin: left top;
    padding-left: 11px;
    left: 8px;
}
.timeLineToolClass:hover .hideMyTimeLineInfoClass{
    display: block;
}
.knockerModeMineClass{
    position: absolute;
    left: 3px;
    width: 0;
    //transition: 0.7s;
    height: 30px;
    top: 48px;

    border-width: 11112px;
    //border-color: black;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.64);
    //background: rgba(137, 137, 137, 0.37);
//   box-shadow: 2px 1px 2px 0px rgba(12, 12, 12, 0.49) inset;
//  background-color: rgb(40, 172, 254);
}
.knockerModeMineClassNew{
    position: fixed;
    left: 0px;
    width: 0;
    height: 20px;
    top: 68px;
    z-index: 3;

}
.timeLineContainerClassNew .hoverClass{
    opacity: 0;
}
.timeLineContainerClassNew:hover .hoverClass{
    opacity: 1;
}
.headLineClass{
    width: 1px;
    height: 63px;
    position: fixed;
    margin-top: 5px;
    border-left: 2px solid rgb(0, 0, 0);
    left: 25px;
    top: 34px;
    display: none;
    transition:0.4s;
    transition: all 0.5s ease 0s;
    box-shadow: -0.3px 0px 3px 0px;
    z-index: 1;
}
.timeLineContainerClass{
    position: absolute;
    left: 0px;
    bottom:0px;
    height: 100%;
    display: flex;
}
.textContainerClass{
    background: none !important;
    position: relative !important;
    width: auto !important;
    height: 100%;
    transform: none !important;
    max-width: 250px;
    overflow: scroll;
    scrollbar-width: none;
    min-width: 80px;
}
.textContainerClass::-webkit-scrollbar{
    width: 0px;
    height: 0px;
}
.timeLineContainerClassNew{
    position: absolute;
    left: 0px;
    bottom:0px;
    display: none;
    height: 100%;
    display: flex;
    transform: rotate(90deg);
    transform-origin: left bottom;

    border-radius: 5px 5px 0 0px;
    opacity: 1;
    z-index: 1;
}

.timeLineContainerClassNew:hover{
    opacity: 1;
}
.personTimeLineTitleClass{
    position: relative;
    left: 0px;
    top: 20px;
    border-radius: 4px;
    /* padding-left: 30px; */
    width: 100px;
    transform: rotate(90deg);
    transform-origin: left bottom;
    z-index: 1;

}
.eachFriendButtonContainer{
    position: relative;
    right: 0px;
    top: -12px;
    left: 206px;
    width: 40px;
    display: flex;
}
.personTimeLineTitleOpenClass{
    position: relative;
    /* left: 40px; */
    top: 10px;
    border-radius: 4px;
    padding-left: 30px;
    width: 30px;

}
.personTimeLineContainerClass{
    position: relative;
    /* left: 40px; */
    top: -35px;
    border-radius: 4px;
    //background: white;
    width: 200px;
}
.personTimeLineShowNameClass{
    border-radius: 4px;
    background: white;
    width: auto;
    height: 20px;
    position: absolute;
    box-shadow: rgb(1 1 1 / 48%) 1px 1px 1px 1px;
    padding-left: 6px;
    padding-right: 6px;
    left: 6px;
}
.buttonCommonClass{

    border-radius: 2px;
    white-space:nowrap;
    border: none;
    background: rgba(170, 170, 170, 0.24);
    padding: 0px;
    margin:6px;
    height: 24px;
    width: 90%;
    display: none;
    margin-top:2px;
    margin-bottom: 0px;
}
.buttonCommonClass:hover{
    background: gray;
}

.logoutButtonClass{
    border-radius: 2px;
    white-space:nowrap;
    border: none;
    background: rgba(170, 170, 170, 0.24);
    padding: 0px;
    margin:4px;
    margin-top:2px;
    margin-bottom: 0px;
    height: 24px;
    width:90%;
    display: none;
    background: red;

}
.logoutButtonClass:hover{
    background: gray;
}
.changeNicknameClass{

    opacity: 1;
    top: 60px;
    left: 7px;
    transform: rotate(0deg);
    position: absolute;
    width: 90px;
    transition: 0.1s;
    white-space: nowrap;
    overflow: hidden;
    border-radius: 2px;
    //box-shadow: rgba(1, 1, 1, 0.41) 1px 1px 1px 1px;
    padding-left: 4px;
    border: none;
    padding-right: 4px;
    background: white;
    padding: 5px;
    display: none;
    background: rgba(170, 170, 170, 0.24);
}
.changeNicknameClass:hover{
    background: rgba(170, 170, 170, 0.86);
}
.checkIdClass{
    opacity: 1;
    top: 92px;
    left: 7px;
    transform: rotate(0deg);
    position: absolute;
    width: 90px;
    transition: 0.1s;
    white-space: nowrap;
    overflow: hidden;
    border-radius: 2px;
    //box-shadow: rgba(1, 1, 1, 0.41) 1px 1px 1px 1px;
    padding-left: 4px;
    border: none;
    padding: 5px;
    background: rgba(170, 170, 170, 0.24);
    display: none;

}
.checkIdClass:hover{
    background: rgba(170, 170, 170, 0.86);
}
.changeAvatarDivClass{
    opacity: 0;

    left: 7px;
    transform: rotate(0deg);
    position: absolute;
    width: 90px;
    top: 32px;

    transition: 0.1s;
    white-space:nowrap;
    overflow: hidden;
    border-radius: 2px;
//box-shadow: rgba(1, 1, 1, 0.41) 1px 1px 1px 1px;
    padding-left: 4px;
    border: none;
    padding: 3px;

    background: rgba(170, 170, 170, 0.24);
    display: none;

}
.changeAvatarClass{


    opacity: 0;
    border-radius: 2px;
    white-space: nowrap;
    border: none;
    background: rgba(170, 170, 170, 0.24);
    padding: 0px;
    margin: 6px;
    height: 24px;
    width: 90%;
    display: none;
    margin-top: 2px;
    margin-bottom: 0px;
    top: 24px;
    display: none;
    position: absolute;
}
.changeAvatarClass:hover{
    background: rgba(170, 170, 170, 0.11);
}
.timeLineTitleClassNew{
    height: 100%;
    width: 50px;
    text-align: center;
    font-family: auto;
    overflow: scroll;
    float: left;
    border: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    border: 0;
    display: block;
    background: none;
    appearance:none;
    font-size:14px;
    position: relative;
    padding:5px
}
.timeLineTitleClassNew::-webkit-scrollbar{
    width: 0px;
    height: 0px;
}

.timeLineTitleClassNewNew{
    height: 100%;
    min-width: 30px;
    width: auto;
    white-space: nowrap;
    text-align: center;
    font-family: auto;
    overflow: scroll;
    float: left;
    border: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    border: 0;
    display: block;
    background: none;
    appearance:none;
    font-size:14px;
    position: relative;
//padding:5px
}
.timeLineTitleClassNewNew::-webkit-scrollbar{
    width: 0px;
    height: 0px;
}
.deleteTimeLineButtonClass{
    position: absolute;
    height: 22.5px;
    width: 23px;
    left: 30px;
    top: -24px;
    background: none;
    /* color: white; */
    border-radius: 3px;
    display: none;
    margin-top: 7px;
    border: none;
}
.editeTimeLineButtonClass{
    position: absolute;
    height: 22.5px;
    width: 23px;
    left: 50px;
    top: -24px;
    background: none;
    //color: white;
    border-radius: 3px;
    display: none;
    margin-top: 7px;
    border: none;
}
.timeLineShowClassNew{
    height: 30px;
    width: 70px;
    float: left;
    border: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: none;
    appearance:none;

    position: absolute;
    width: 100%;
    left: 0;
    opacity: 0;
    cursor: pointer;
}
.timeLineShowClassNew:focus{
    background: none;
   box-shadow: none;
    border: none;
}
.personTimeLineHeadClass{
    height: 25px;
    width: 70px;
    float: left;
    border: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    border: 0;
    appearance:none;

    width: 100%;
    left: 0;
    //opacity: 0;
}
.personTimeLineHeaderLineClass{
    position: absolute;
    height: 60px;
    width: 1px;
    /* float: left; */
    /* width: 4%; */
    /* height: 60px; */
    /* position: absolute; */
    /* margin-top: 5px; */
    border-left: 2px solid rgb(0, 0, 0);
    left: 27px;
    /* top: 34px; */
    /* display: none; */
    /* transition: 0.4s; */
    box-shadow: -0.3px 0px 3px 0px;
}
.personTimeLineShowClassNew{
    height: 20px;
    width: 70px;
    float: left;
    border: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: none;
    appearance:none;

    //position: absolute;
    width: 100%;
    left: 0;
    opacity: 0;
}
.lockTimelineInfoButtonClass{
    position: relative;
    height: 100%;
    width: 30px;
    float: left;

    border: none;
    margin-left: 1%;
}
.addNewTimeLineClassNew{
   position: relative;
    height: 100%;
    width: 30px;
    float: left;
   //background: none;

    border: none;
    margin-left: 1%;
}

.listAvatarClass{
    position: relative;
    right: 0px;
    top: 0px;
    width: 28px;
    height: 28px;
    overflow: hidden;
    border-width: 1px;
    border-color: black;
    border-radius: 3px;
    margin: 3px;
    margin-top: 2px;
     box-shadow: 2px 1px 2px 0px rgba(12, 12, 12, 0.49);
    background-color:white;
    z-index: 20;
    display: flow;

}
.shareButtonClass{
    position: absolute;
    left: -28px;
    top: 0px;
    width: 28px;
    height: 18px;
    overflow: hidden;
}

.ownerBorderAvatarClass{
    position: relative;
   /* left: 10px;
    bottom: -10px;*/
    width: 38px;
    height: 38px;
    overflow: hidden;
    border-width: 11112px;
    border-color: black;
    border-radius: 3px;
    margin: 3px;
    margin-top: 2px;
    display: grid;
    /* box-shadow: 2px 1px 2px 0px rgba(12, 12, 12, 0.49) inset; */
    box-shadow: 2px 1px 2px 0px rgba(12, 12, 12, 0.49);
    background-color: rgb(255 255 255 / 43%);

}

.ownerBorderAvatarClass .befriendsContainerClass{
    position: absolute;
    left: 0px;
    bottom: -30px;
    width: 0px;
    height: 28px;
    overflow: hidden;
    border-color: black;
    border-radius: 3px;
    margin: 3px;
    margin-top: 2px;
    /* box-shadow: 2px 1px 2px 0px rgba(12, 12, 12, 0.49) inset; */


}
.ownerBorderAvatarClass .beFollowContainerClass{
    position: absolute;
    left: 0px;
    top: -23px;
    width: 0px;
    height: 28px;
    overflow: hidden;
    border-color: black;
    border-radius: 3px;
    margin: 3px;
    margin-top: 2px;
    /* box-shadow: 2px 1px 2px 0px rgba(12, 12, 12, 0.49) inset; */


}
.ownerBorderAvatarClass:hover .befriendsContainerClass{

    width: 68px;
}
.ownerBorderAvatarClass:hover .beFollowContainerClass{

    width: 38px;
}

.backImgAvatarContainer{
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    background-position: center center;
    background-size: cover;
}
.topAvatarContainer{
    width: 100%;
    position: absolute;
    overflow: hidden;

    height: 100%;
    background-position: center center;
    background-size: cover;
}
.addTipTextClass{

    position: relative;
    top: -41px;
    width: 60px;
    height: 20px;
    background: #c4c4c4f0;
    border-radius: 4px;
    padding: 2px;
    display: none;


}
.tipsbox:hover .addTipTextClass{
    display: block;
}
.otherUserAvatarContainer{
    position: absolute;
    top:0px
}
.followingCount{
    position: absolute;
    z-index: 1000;
    /* font-weight: 700; */
    /* line-height: 29px; */
    text-align: center;

    text-shadow: none;
    -webkit-text-stroke-width: 0px;
    text-align: center;
    color: #0c0c0c;
    font-size: 1px;
    background-color: #ffd968;
    border-radius: 5px;
    top: 1px;
    left: 1px;
    height: 15px;
    width: 15px;
    /* padding: 1px; */
    padding-left: 2px;
}

.nameDivClass{
    overflow: hidden;
    white-space: nowrap;
}
.nameDivClassSearch{
    position: absolute;
    white-space: nowrap;
    display: inline-block;
}
.myAvatarClass{
    width: 110%;
    background-color: rgba(255, 255, 255, 0.78);
    overflow: hidden;
//border-radius: 50%;
    box-shadow: 2px 1px 2px 0px rgba(12, 12, 12, 0.49) inset;
    display: none;
}
.friendAvatarClass{
    width: 100%;
    background-color: rgba(255, 255, 255, 0.78);
    overflow: hidden;
    display: none;
    //border-radius: 50%;

}
.imgclass {
    position: absolute;
    //border-radius: 2px;
    margin: 0px;
    width: 80px;
    height: auto;
    /* min-height: 100px;

     min-width: 100%;*/

    /* For the following settings we set 100%, but it can be higher if needed

    See the answer's update */

    //left: -20%;
    //top: -10%;


}

.yummer-wapper {
    width: 100%;
    height: 100%;
    top: 0;
    position: absolute;
    overflow: scroll;
    z-index: -1;
}
.yummer-wapper::-webkit-scrollbar{
    width: 0px;
    height: 0px;
}
.OopsUnionContainerClass{
    width: 50px;
    height: 100%;
    left: -150px;
    background: rgba(255, 255, 255, 0.5);
    position: fixed;
    backdrop-filter: blur(4px);
    z-index: 100;
    box-shadow: 1px 0px 5px -1px rgba(12, 12, 12, 0.49);
}
.OopsUnionContainerClass:hover{
    left: 0px;
}

.postFloorContainerClass{
    width: 100px;
    height: 100%;
    right: 50px;
    background: rgba(255, 255, 255, 0.5);
    position: fixed;
    backdrop-filter: blur(4px);
    z-index: 100;
    box-shadow: 1px 0px 5px -1px rgba(12, 12, 12, 0.49);
    display: none;

}
.postFloorContainerClass:hover{

}
.postFloorUploadContainerClass{
    width: 50%;
    height: 80%;
    left: 300px;
    margin: auto;
    margin-top: 60px;
    background: rgba(255, 255, 255, 0.5);
    position: fixed;
    backdrop-filter: blur(4px);
    z-index: 100;
    box-shadow: 1px 0px 5px -1px rgba(12, 12, 12, 0.49);
    border-radius: 8px;
    border-style: dashed;
    background: #fffbf5;
    display: none;

}


.OopsUnionUl{

}

.rutiClass{

    width: fit-content;
    height: 5%;
    display: flex;
    margin-left: 10px;
}
.backToMainContainerClass{
width: 100%;
float: left;
display: flex;
background: #28acfe;
border-radius: 3px;
}
.backToMainContainerClass:hover{
background: white;
}
.backToMainClass{
width: fit-content;
margin: auto;
}
.floorContentTitleAddEditClass{

    width: 98%;
    margin: 1%;
    height: 5% !important;
    float: left;
    display: flex;
    border-radius: 4px;
    border-style: solid;
}
.floorContentAddEditClass{

    width: 98%;
    margin: 1%;
    height: 20% !important;
    float: left;
    display: flex;
    margin-left: 1% !important;
    border-style: solid;
    box-shadow: none !important;
    margin-bottom: 1% !important;
    border-radius: 4px;
}

.newFloorInputImageButtonClass{
    width: 98%;
    margin: 1%;
    height: 30% !important;
    float: left;
    position: relative;
    margin-left: 1% !important;
    border-style: solid;
}
.newPostInputImageButtonClass{
    width: 98%;
    margin: 1%;
    height: 30% !important;
    float: left;
    position: relative;
    margin-left: 1% !important;
    border-style: solid;
}
.eachImagePreviewClass{
    width: 15%;
    background-position: center center; /* 设置背景图片居中 */
    background-size: cover; /* 背景图片覆盖整个div */
    background-repeat: no-repeat; /* 设置背景图片不重复 */
    margin: 5px;
}
.uploadReplyImageClass{
    width: 150px;
    height: auto;

    overflow: hidden;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 3px;
    box-shadow: 1px 1px 1px 1px rgb(2 2 2 / 43%);
}
.input-image-preview-container{
    width: fit-content;
}
.inputButtonUnionClass{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    z-index: 1;
    opacity: 0.1;
    border-radius: 4px;
}
.newPostInputFloorImagePreviewClass{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    z-index: 0;
    display: flex;
    overflow: hidden;
}
.eachOopsUnionClass{

width: 100%;
height: 55px ;
float: left;
display: flex;
}
.eachOopsUnionClass:hover{
background: white;
}
.openedUnionContainerClass{
background: rgb(255, 169, 0);
position: absolute;
left: 52px;
width: 70px;
height: 70px;
border-radius: 50%;
display: none;
z-index: 2;
box-shadow: rgb(1 1 1 / 12%) 1px 1px 1px 1px;
}
.eachFloorClass{

width: 100%;
height: 35px;
float: left;
display: flex;
}
.eachFloorClass:hover{
background: white;
}
.tagTitleClass{
width: fit-content;
height: fit-content;
margin: auto;

}
.addPostClass{
display: none;
position: absolute;
white-space: nowrap;
background: white;
height: fit-content;
font-size: medium;
width: fit-content;
margin: auto;
opacity: 0.5;
border-radius: 5px;
padding: 4px;
border-style: dashed;
transform: rotate(-5deg);
top: 6px;
left: 70px;
}

.openedUnionContainerClass:hover .addPostClass{
display: block;
}
.clickNextclass{
width: 50%;
height: 100%;
cursor: pointer;
}

.clickPreclass{
width: 50%;
height: 100%;
cursor: pointer;

}
/*.clickPreclass{
width: 100px;
height: 25px;
background: rgba(255, 255, 255, 0.51);
cursor: pointer;
position: fixed;
top: 0px;
left: 900px;
right: 41px;
border-radius: 4px;
padding: 1px;
text-align: center;
z-index: 10000000000000000000000000000000000000;
}
.clickPreclass:hover{
background: rgba(255, 255, 255, 0.77);
}
.clickNextclass{
width: 100px;
height: 25px;
background: rgba(255, 255, 255, 0.51);
cursor: pointer;
position: fixed;
top: 0px;
left: 1010px;
border-radius: 4px;
padding: 1px;
text-align: center;
z-index: 10000000000000000000000000000000000000;
}
.clickNextclass:hover{
background: rgba(255, 255, 255, 0.77);
}*/
.avatar_class {
    border-radius: 16%;
    height: auto;
    max-width: 50px;
    min-width: 40px;
    width: 7%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: absolute;
    left: 10px;
    top: 5px;
    box-shadow: 10px 0 40px #5e5e5e;;
}

.picBroadOwner-name {
   position: absolute;
    float: left;
    right: 2px;
    top: 46px;
   // right: 1%;
    width: 200px;
    height:100%;
    text-align: center;
    color: #000000;

}
.my-line-button {
    position: relative;
    top: 0px;
    left: 8px;

    width: 20px;
    height: 50%;
    text-align: center;
    font-size: 12px;
    color: #000000;
}
.person-line-button {
    position: absolute;
    float: left;
    top: 15px;
    right: 5px;
    width: 20px;
    height: 50%;
    text-align: center;
    font-size: 1px;
    color: #000000;
    display: none;
}
.person-close-line-button {
    position: absolute;
    float: left;
    top: 28px;
    right: -30px;
    width: 20px;
    height: 50%;
    text-align: center;
    font-size: 14px;
    color: #000000;

}
.my-name {
    position: relative;
    float: left;
    top: 0px;
    margin-top: 5px;
    margin-bottom: 5px;
   // left: 10px;
    min-width: 100%;
    width: auto;
    height: 25px;
    text-align: center;
    display: none;
    color: white;
}
.my-name::-webkit-scrollbar{
    width: 0px;
    height: 0px;
}
.myNameClass{
    max-width: 130px;
    text-align: left;
    z-index: -1;
    overflow: scroll;
    display: flex;
    color: black;
}
.myNameClass::-webkit-scrollbar{
    width: 0px;
    height: 0px;
}
.my-detail {
    position: absolute;
    top: 8px;
    right: 4px;
    width: 70px;
    height: auto;
}

.knockerAvatarClassContainer {
    //position:absolute;
    width: 100px;
    height:100px;
    right: 0px;
    display: block;
    float: left;
    z-index: 1000000;
    background-position: center center;
    background-size: cover;
}
.myAvatarClassContainer {

    position:relative;
    width: 43px;
    height:43px;

    display: none;
    left: 0px;
    transition: 0.2s;
    z-index: 1000000;
    margin:auto;

}
.otherPersonAvatarClassContainer {

    position: relative;
    width: fit-content;
    height: 40px;
    display: block;
    left: 0px;
    z-index: 1000000;
    margin-top: 2px;
    margin-left: 2px;
    display: flex;
}

.mytestmainclass {
    border-radius: 5px;
    width: auto;
    height: auto;
   //filter: drop-shadow(4px 4px 4px gray);

}
.imageShadowclass{

    width: calc(100% - 4px);
    height: calc(100% - 4px);
    position: absolute;
    top: 0px;
    z-index: 1;
    box-shadow: none;

}
.borderInPicClass{
    position: absolute;
    left: 30%;
    top: 10%;
    width: 20%;
    height: 20%;
    background: none;
    border: 1px solid black;
    opacity: 0.5;
    transition: 0.2s;
    z-index: 1;
}
.borderInPicClass .buttonAI{
    position: absolute;
    left: 0;
    top: -20px;
    width: 20px;
    height: 20px;
    background: none;
    border:none;
    opacity: 0.0;
    background-color:black;
    z-index: 1;
}
.borderInPicClass:hover .buttonAI{

    opacity: 1;

}
.borderInPicClass:hover{
    opacity: 1;
    box-shadow: 0px 0px 2px 0px #000000;
}
.imgBackCommentBehindClass{
    border: none;
    background: none;
}

.imgBackCommentDeleteClass{
    border: none;
    background: none;
}
.li_class_message .chatsBehindClass {
    position: relative;
    background: none;
    width: auto;
    border: none;
    height: 20px;
    margin-left: 4px;
    top: 0px;
    right: 0px;

}
.li_class_message .chatsBehindClass:hover{
    background: lightgray;
}

.li_class_message .chatsDeleteClass {
    position: relative;

    width: 20px;
    height: 20px;
// display:inline;

    bottom: 0px;
    right: 0px;
    background: none;
    border: none;
    padding-left: 2px;
    top: 0px;

}
.li_class_message .chatsDeleteClass:hover{
    background: lightgray;
}

.markCanvasClass{

    cursor: crosshair;
    touch-action: none;
    position: absolute;
    top: 0px;
    left: 0px;
    display: none;
}
.largePicButtonClass{

    bottom: 0px;
    width: 37px;
    height: 26px;
    right: 0px;

    position: absolute;
    border: 0;
    background: white;

    border-radius: 8px 0px 0px 0px;
    overflow: hidden;
    transition-delay: 1s;
    transition: 0.2s;
    opacity: 0;
    z-index:1;
}
.largePicButtonShowWideClass{

    bottom:2px;
    width: 100%;
    height: 15px;
    right: 0px;

    position: absolute;
    border: 0;
    background: white;

    border-radius: 0px 0px 3px 3px;
    overflow: hidden;
    transition-delay: 1s;
    transition: 0.2s;
    opacity: 0.2;
    z-index:1;
}
.largePicButtonShowWideClass:hover{
    opacity: 1;
}

.largePicButtonShowTallClass{

    bottom: 0px;
    width: 15px;
    height: 100%;
    right: -13px;

    position: absolute;
    border: 0;
    background: white;

    border-radius: 0px 3px 3px 0px;
    overflow: hidden;
    transition-delay: 1s;
    transition: 0.2s;
    opacity: 0.7;
    z-index:1;
}
.largePicButtonShowTallClass:hover{
    opacity: 1;
}

.markPicButtonClass{
    position: absolute;
    width: 0px;
    top: 3px;
    left: 0px;
    background: white;
    height: 30px;

    border: 0;
    border-radius: 2px 0px 0px 2px;
    overflow: hidden;
    transition: 0.6s;
    opacity: 0.5;
    z-index:1;
}
.markPicButtonClass:hover{
    opacity: 1;
}

.locatePicButtonClass{
    position: absolute;
    width: 0px;
    top: 74px;
    left: 0px;
    background: white;
    height: 30px;

    border: 0;
    border-radius: 2px 0px 0px 2px;
    overflow: hidden;
    transition: 0.6s;
    opacity: 0.5;
    z-index:1;
}
.locatePicButtonClass:hover{
    opacity: 1;
}

.cutPicButtonClass{
    position: absolute;
    width: 0px;
    top: 40px;
    left: 0px;
    background: white;
    height: 30px;

    border: 0;
    border-radius: 2px 0px 0px 2px;
    overflow: hidden;
    transition: 0.6s;
    opacity: 0.5;
    display: none;
    z-index:1;
}
.cutPicButtonOkClass{
    position: absolute;
    width: 0px;
    top: 74px;
    left: 0px;
    background: white;
    height: 30px;

    border: 0;
    border-radius: 2px 0px 0px 2px;
    overflow: hidden;
    transition: 0.6s;
    opacity: 0.5;
    z-index:1;
    display: none;
}
.deletePicInGroupButtonClass{

    position: absolute;
    width: 0px;
    top: 108px;
    left: 0px;
    background: white;
    height: 30px;

    border: 0;
    border-radius: 2px 0px 0px 2px;
    overflow: hidden;
    transition: 0.6s;
    opacity: 0.5;
    z-index:1;
}
.picButtonTopContainerClass{
  //  background: rgb(251, 245, 238);
    position: absolute;
    bottom: -21px;
//left: 40%;
    width: 100%;
    height: 20px;
    /* opacity: 0.5; */

    border: 0;
    /* display: none; */
    border-radius: 4px 0px 0px 2px;
    transition: 0.5s;
    z-index: 10;
    display: flex;
    text-align: center;
}

.basePicButtonClass{
    min-width: 40px !important;
    width: fit-content !important;
    height: 100% !important;
    text-align: center !important;
    font-size: larger;
    padding-right: 3px;
}
.showPicReplyButtonClass{
    //position: absolute;
    //top: -20px;
    left: 5px;
    min-width: 50px;
    height: 20px;
    /* opacity: 0.5; */

    border: 0;
    /* display: none; */
    border-radius: 4px 0px 0px 2px;
    transition: 0.2s;
    z-index: 1;
    display: flex;
    text-align: center;
}

.locationMarkDivClass{
    //position: absolute;
    //top: -20px;
    left: 40%;
    min-width: 20px;
    height: 20px;
    /* opacity: 0.5; */

    border: 0;
    /* display: none; */
    border-radius: 4px 0px 0px 2px;
    transition: 0.2s;
    z-index: 10;
    text-align: center;
    display: flex;
}
.uploadLiveVideoButtonClass{

    position: absolute;
    width: 0px;
    top: 38px;
    left: 0px;
    background: white;
    height: 30px;

    border: 0;
    border-radius: 2px 0px 0px 2px;
    overflow: hidden;
    transition: 0.6s;
    z-index:1;
    opacity: 0.5;
}
.uploadLiveVideoButtonClass:hover{
    opacity: 1;
}
.testReverseButtonClass{

    width: fit-content;
    top: -25px;

    min-width: 20px;
    height: 25px;
    /* opacity: 0.5; */

    border: 0;
    /* display: none; */
    border-radius: 4px 0px 0px 2px;
    transition: 0.2s;
    z-index: 1;
    text-align: center;
    display: flex;
    font-size: larger;
}
.basePicButtonClass:hover{
    color: red;
}
.testReverseButtonClass:hover .imgbackChatSvgClass{
    stroke: red;
}
.showPicTagsButtonClass{
    //position: absolute;
    //top: -20px;
    right: 5px;
    min-width: 50px;
    height: 20px;
    /* opacity: 0.5; */

    border: 0;
    /* display: none; */
    border-radius: 4px 0px 0px 2px;
    transition: 0.2s;
    z-index: 1;
    text-align: center;
    display: flex;
}

.apointCenterClass{
    width:10px;
    height:10px;
    border-radius:50%;
    position:absolute;
    opacity: 1;
    background-color: #2873fe;

    animation-name: head-point-breath ;
    animation-duration: 0.7s;
    animation-iteration-count:infinite;
    transform-origin: center;
    z-index: 10;
    top: -4px;
}

.tagPointClass{
    width:10px;
    height:10px;
    border-radius:50%;
    position:absolute;
    opacity: 1;
    background-color: red;

    z-index: 10;
}



.messageTextContainer .deleteImageReplyButtonClass{
    width: 17px;
    height: 17px;
    border-radius: 3px;
    position: absolute;
    opacity: 1;
     background-color: white;
    z-index: 1;
    left: -10px;
    top: 12px;
    display: none !important;
}
.messageTextContainer:hover .deleteImageReplyButtonClass{
    display: block !important;
}


.apointClass{
    width: 16px;
    height: 16px;
    border-radius: 50%;
    left: 1px;
    top: 7px;
    opacity: 1;
    stroke: #2873fe;
}
.apointClass:hover{

    animation-name: point-breath;
    animation-timing-function: ease-in-out;
    animation-duration: 0.6s;
    animation-iteration-count: 1;
    transform-origin: center;
}
.locationMarkAnimationClass{

    //position:absolute;
    backface-visibility: visible;
    transform-origin: center;
    opacity: 1;
}
.locationMarkAnimationClass:hover{

    animation-name: breath-flip;
    animation-timing-function: ease-in-out;
    animation-duration: 0.8s;
    animation-iteration-count: 1;
}

.locationMarkSvg{
    margin: 4px;

}
.locationMarkAnimationClass:hover .locationMarkSvg{
    stroke: red;
}
@keyframes breath-flip {
    0% {transform: scale(1);opacity: 1;}
    50% {transform: scale(1.2);opacity: 0.9;}
    100% {transform: scale(1);opacity: 1;}
}


@keyframes point-breath {
    0% {transform: scale(1);opacity: 1;}
    50% {transform: scale(1.2);opacity: 1;}
    100% {transform: scale(1);opacity: 1;}
}

@keyframes reply-container-show {
    0% {transform: scale(1) translateY(50px);opacity: 0;}
    60% {transform: scale(1) ;opacity: 0.7;}
    85% {transform: scale(1) ;opacity: 1;}
    100% {transform: scale(1) translateY(0px);opacity: 1;}
}

@keyframes add-comment {
/*    0% {transform: scale(1);opacity: 1;rotate(0deg)}
    50% {transform: scale(1.1);opacity: 0.1;rotate(-13.5deg)}
    100% {transform: scale(1);opacity: 1;rotate(0deg)}*/
    0% {
        transform: translate(0px, 0px) rotate(0deg)
    }


    40% {
        transform: translate(-1px, 1px) rotate(10deg)
    }

    70% {
        transform: translate(-1px, 2px) rotate(-10deg)
    }
    100% {
        transform: translate(0px, 0px) rotate(0deg)
    }
}


.apointRedClass{
    width:23px;
    height:23px;
    //border-radius:50%;
   // position:absolute;
    left: 1px;
    top: 0px;
    margin: 2px;
}
.showPicTagsButtonClass:hover .apointRedClass{
    animation-name: point-red-breath;
    animation-delay: 0.3s;
    animation-timing-function: ease-in-out;
    animation-duration: 1s;
    animation-iteration-count: 1;
    transform-origin: center;
}

@keyframes point-red-breath {

    0% {
        transform: translate(0px, 0px) rotate(0deg)
    }
    20% {
        transform: translate(0px, 0px) rotate(7deg) scale(1)
    }



    70% {
        transform: translate(0px, 0px) rotate(-4deg) scale(1)
    }
    100% {
        transform: translate(0px, 0px) rotate(0deg)
    }
}

.cutPicButtonOrgClass{
    position: absolute;
    transition: 0.5s;
    width: 0px;
    top:40px;
    left: 0px;
    background: white;
    height: 30px;
    overflow: hidden;
    border: 0;
    border-radius: 2px 0px 0px 2px;
    opacity: 0.5;
    z-index:1;
}

.cutPicButtonClass:hover{
   opacity: 1;
}
.largePicButtonClass:hover{
   opacity: 1;
}
.cutPicButtonOkClass:hover{
    opacity: 1;
}
.deletePicInGroupButtonClass:hover{
    opacity: 1;
}
.showPicReplyButtonClass:hover{
    opacity: 1;
}

.cutPicButtonOrgClass:hover{
    opacity: 1;
}

.playVideoClass{
    left: 0px;
    top:105%;
    width: 30px;
    height: 20px;
    position: absolute;
    transition: 0.5s;
    //display: none;
}
.stopVideoClass{
    left: 35px;
    top:105%;
    width: 30px;
    height: 20px;
    position: absolute;
    transition: 0.5s;
    //display: none;
}

.subclassA {

    width: auto;
    position: relative;
    border-radius: 5px;
    height: auto;


}
.subclassACut {

    width: 100%;
    position: relative;
    border-radius: 5px;
  /*  //text-align: center;
   // line-height: 100px;
 //   z-index: 10;
    //clip-path: inset(7px 7px 7px 7px round 10px);
    //clip-path: polygon(0px 0px, 50%  50%, 100% 50%, 100% 100%,0 100%);*/
}

.subclassB {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;

    z-index: 1;
    display: none;
}

.subclassC {
    position: absolute;
    text-align: center; /*让文字水平居中*/
    float: left;
    position: absolute;
    top: -5px;
    left: 40%;
    width: 100%;

    z-index: 1000;
    display: none;
}

.subclassPhotoMessage {
    position: absolute;
    text-align: center; /*让文字水平居中*/
    float: left;

    top: -5px;
    left: 40%;
    width: 100%;

    display: block;
}

.video_play {
    width: 100%;
}


.box {
    position: relative;
    contenteditable :true;
    outline: none;
// float: left;
    color: #0c0c0c;
 //line-height: 50%; /*让黄色div中的文字内容垂直居中*/
    text-align: center; /*让文字水平居中*/


/ / left: 10 %;
/ / top: 50 %;
    margin: 0 auto;
    position: absolute;top:50%;left:50%;transform:translate(-50%,-50%);


    /* margin-top: -50px;
     margin-left: 200px;*/
}
.textNameBox {
    position: relative;
    width: auto;
    height: auto;
//display: inline-block;
    top: 0px;
    left: 2px;
    /* margin-top: -50px;
     margin-left: 200px;*/
}
.imgBackTextbox {
    position: relative;
   width: auto;
    height: auto;
   max-width: calc(100% - 38px);
    left: 48px;
    top: -7px;
    /* margin-top: -50px;
     margin-left: 200px;*/
}
.textbox {
    position: relative;
   width: auto;
    height: auto;
    //display: inline-block;
    //top: -14px;
    left: 48px;
    /* margin-top: -50px;
     margin-left: 200px;*/
}
.textboxPoint{
    position: absolute;
    TOP: 5px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7) inset, 1px 1px 1px rgba(255, 255, 255, 0.1) inset;
    background: #dddddd;
}
.li_class_group_title {
    position: absolute;
    z-index: 100000;
    width: auto;
    height: auto;
    max-width: 360px;
    cursor: grab;
}

.li_class_group_owner_title {
    width: auto !important;
    max-width: 1360px;
    cursor: grab;
    display: flex;
    position: absolute;
}
.li_text_edit_button{
    width: 40px;
    height: 20px;
    position: absolute;
    top :-20px
}
.li_text_delete_button{
    width: 40px;
    height: 20px;
    position: absolute;
    left: 41px;
    top :-20px
}
.li_text_move_button{
    width: 25px;
    height: 15px;
    position: absolute;
    top: -17px;
    left: 0px;
    border: none;
    border-radius: 1px;
    /* box-shadow: 1px 1px 0px 0px rgba(0, 0, 1, 0.41); */
    opacity: 0.2;
    background: none;
}
.li_text_move_button:hover{

    opacity:1
}
.li_text_save_button{
    width: 40px;
    height: 20px;
    position: relative;
    top :-40px;
    left: 40px;
    border: none;
    border-radius: 1px;
    box-shadow: 1px 1px 0px 0px rgba(0, 0, 1, 0.41);
}
.li_class_pangbai {
    position: absolute;
    z-index: 100000;
    width: auto;
    height: auto;
// transition:top 7s;
    max-width: 360px;
    min-width: 200px;
    cursor: grab;
}

.li_class_message {
    position: absolute;
    z-index: 100000;
    width: auto;
    height: auto;
   // transition:top 7s;
    max-width: 1000px;
    min-width: 200px;
    cursor: grab;

}
.li_class_slip_paper{
    box-shadow: 1px 1px 1px 1px rgb(2 2 2 / 25%);
    border-radius: 8px;
    padding: 5px;
    background: white;
}

.resizeDivClass{
    background:none;
    width:calc(100% + 10px);
    height:calc(100% + 10px);
    content: '';
    top:0px;
    left:0px;
    position: absolute;

    z-index: -99;
    cursor: col-resize;
}
.borderClass{
    position: absolute;
    left: 10%;
    top: 10%;
    width: 20%;
    height: 20%;
    background: none;
    border: 1px solid rgb(255 255 255 / 61%);
    opacity: 1;
    z-index: 1;
    transition: 0.7s;
    border-radius: 2px;
    box-shadow:0 0 3px rgba(61, 61, 61, 0.66);

}
.borderClass:hover{
    opacity: 1;
}
.li_class {
    position: absolute;
}

.li_class .photo-knock-info-backborad-right {

    position: absolute;
    display: none;
    width: 0px;
    height: 0%;

}
.li_class .photo-knock-info-wide {
    position: absolute;
    top:0px;
    color: rgba(1, 2, 2);
    Font-size: 15px;

    border-style: solid;
    border-width: 0px;
    border-bottom-width: 0;


    border-radius: 7px 7px 5px 5px;
/*    display: none;
*/
    height: 100%;

    width: 100%;
    //display: none;
    transition: 1s;
    cursor: ew-resize;
    z-index: -100;
    /*   width: 200%;
       top:-30px;
       background-color: white;
       height: 120%;
       left: -10%;*/
}


/*
.li_class:hover .photo-knock-info-wide {
    display: block;
    top:-20px;

    width: calc(100% + 40px);

    height:calc(130% + 20px);
}
*/

/*.li_class .photo-knock-info-wide:hover {
    left: -20px;
    top: -20px;
    transition: 0.2s;
    background-color: white;
    border-radius: 3px 3px 3px 3px;

    box-shadow: 0 0 14px #3D3D3D;

}*/
.li_class .photo-knock-info-wide:hover .photoContainer {
    box-shadow: 0 0 14px #3D3D3D inset;

}
.li_class .photo-knock-info-wide:hover .photo-knock-info-backborad-right {
    width: 40px;
    height: 100%;
    position: absolute;
    display: block;
    top:0px;
    right: -40px;
    border-radius: 0px 7px 7px 0px;

    z-index: -100;
    background-color: white;
    transition: 2s;
}


.li_class .photo-knock-info {
    position: absolute;


    top:0px;

    Font-size: 15px;

    border-style: solid;
    border-width: 0px;
    border-bottom-width: 0;

    transition: 0.2s;
    border-radius: 3px 3px 3px 3px;
    //display: none;
    width: 100%;
    height: 100%;
    cursor: ew-resize;

    transition: 0.2s;

    /*   width: 200%;
       top:-30px;
       background-color: white;
       height: 120%;
       left: -10%;*/
}

/*
.li_class:hover .photo-knock-info {
    display: block;
    top:-20px;
    width: calc(130% + 20px);

    height:calc(100% + 40px);
    //background-color: none;

    //left: -10%;

    transition: 0.2s;

}*/

.li_class .photo-knock-info:hover {

    background-color: white;

    left: -20px;
    transition: 0.7s;
    box-shadow: 0 0 14px #3D3D3D;

}


.li_class .photo-knock-info:hover ul.photopile li a  {
    //box-shadow:  0px 0px 20px 10px rgba(0,0,0,0.5) inset;
    box-shadow: 0 0 24px #3D3D3D inset;

}
/*ul.photopile li a:hover{
    box-shadow: 0 0 24px #3D3D3D ;
}*/

.li_class .photo-knock-info .photo-knock-info-detail {
    position: absolute;
    display: none;

    right: 0px;
    padding: 10px;
    transition: 0.4s;
    relation: absolute;

    width: 25%;
    height: 100%;
    bottom: 0px;
    position: absolute;
    transition: 0.4s;
    cursor: grab;
    word-wrap: break-word;
}

.li_class .photo-knock-info .input-button-class{
    position: absolute;
    right: 0px;
    bottom: 0px;
    height: 20px;
    width: 35px;
    border: none;
    display: none;
    background-color: white;
}

.li_class .photo-knock-info-wide .photo-knock-info-detail {
    position: absolute;
    display: none;
    bottom: 0px;
    right: 0px;
    padding: 10px;
    transition: 0.4s;
    width: 100%;
    cursor: grab;
    height: 20%;
    word-break: break-all;
}

.li_class .photo-knock-info-wide:hover .photo-knock-info-detail {
   // display: block;
}


.li_class .photo-knock-info-backborad-bottom {
/*    position: absolute;
  //  display: none;
    top: 0px;
    height: 100%;
    width: 100%;
   background-color: white;
    transition: 0.4s;*/

    position: absolute;
    display: none;
    width: 0%;
    border-radius: 0px 0px 7px 7px;
    transition: 0.4s;
}

.li_class .photo-knock-info:hover .photo-knock-info-backborad-bottom {
    position: absolute;
    display: block;

    height: 45px;
    width: 100%;
    bottom: -45px;
   // left: -10%;
    background-color: white;
    border-radius: 0px 0px 7px 7px;
    transition: 0.4s;
    z-index: -100;

}


.li_class .photo-knock-info:hover .photo-knock-info-detail {

}

.li_class .photo-knock-info:hover .input-button-class {

    display: block;

}

.photoContainer{

    position: relative;
    top:0px;
    display: block;
    padding: 2px;
    outline: none;
    text-decoration: none;
    background: white;
    box-shadow: 0 0 14px rgba(61, 61, 61, 0.66);
    cursor: grab;
    border-radius: 3px;
}

.li_class .input-message{
    width: 40%;
    height: 50%;
    right: 0px;
    bottom: 0px;
    position: absolute


}

 .messageTextContainer{

    top:10%;
    left: 20%;

     max-width: 260px;

    position: absolute;

    padding: 0px;
    display: block;
     opacity: 0;
     transition: 0.7s;
    z-index: 100000000000;
}

.imgBackMessageTextContainer{

    top:10%;
    left: 20%;

    max-width: 260px;
    height: 30px;


    padding: 0px;
    display: block;
    z-index: 100000000000;
}
.messageTextContainerEdit{

    max-width: 260px;
    height: 30px;
    position: absolute;

    padding: 0px;
    display: flex;
    z-index: 100000000000;
}
.textBroadContainerClass{
     height: auto;
    width: auto;
     //width:1000px;
   //  background-color: white;
 }
.photoContainerMessage{

    position: relative;

    width: auto;

    border-radius: 5px;
}
.subPhotoContainerMessage{
    position: relative;
    left: 0;
    width: 100%;
   // height: 30px;
   // left: 50px;
    //border: #0c0c0c;
   // background-color: #ffffff;
    border-radius: 5px;
}

.li_class .photo-message-info {
    width:30px;
    height: 0px;
    right: 0px;
   // color: rgb(255, 255, 255);
   // background-color: white;
    Font-size: 0px;



    border-style: solid;
    border-width: 0px;
    border-bottom-width: 0;


    position: absolute;
    bottom: 0px;
    transition: 0.1s;
    padding: 0px;
    overflow: hidden;
    white-space: nowrap;
    display: none;
    z-index: -1;
}

.li_class:hover .photo-message-info {
    width: 30px;
    height: 20px;
    color: rgba(1, 2, 2, 0.87);
    Font-size: 15px;
    bottom: -20px;
    border-radius: 2px;
    border-style: solid;
    text-align: right;
    border-bottom-width: 0;

    box-shadow: none;
    transition: 0.5s;
    display: block;
    z-index: 1000000000;
}
.li_class:hover .cutPicButtonClass {

    left: -18px;
    width: 18px;
    height: 30px;
    display: none;
    /* opacity: 0.5; */
    position: absolute;
    border: 0;
    background: white;

    border-radius: 4px 0px 0px 2px;
}
.li_class:hover .markPicButtonClass {

    left: -18px;
    width: 18px;
    height: 30px;
    display: block;
    /* opacity: 0.5; */
    position: absolute;
    border: 0;
    background: white;

    border-radius: 4px 0px 0px 2px;
}
.li_class:hover .locatePicButtonClass {

    left: -18px;
    width: 18px;
    height: 30px;
    display: block;
    /* opacity: 0.5; */
    position: absolute;
    border: 0;
    background: white;

    border-radius: 4px 0px 0px 2px;
}
.li_class:hover .largePicButtonClass {

    display: block;
    /* opacity: 0.5; */
    position: absolute;
    border: 0;



}
.li_class:hover .cutPicButtonOkClass {

    left: -18px;
    width: 18px;
    height: 30px;
    display: none;
    background: white;

}
.li_class:hover .deletePicInGroupButtonClass {

    left: -18px;
    width: 18px;
    height: 30px;
    display: block;
    background: white;

}
.li_class:hover .uploadLiveVideoButtonClass {

    left: -18px;
    width: 18px;
    height: 30px;
    display: block;
    background: white;

}
/*.li_class:hover .showPicReplyButtonClass {
    top:-30px;
    left: 0px;
    width: 40px;
    height: 30px;
    display: block;
    background: white;
    opacity: 1;
}*/
.li_class:hover .cutPicButtonOrgClass {
    top:80px;
    left: -18px;
    width: 18px;
    height: 30px;
    display: block;

    opacity: 0.5;
}

.img-wrapper {
   // z-index: 100000;
    width: 300px;
    /* height: 138px; */
}

.img-wrapper .img {
    /* width: 300px; */
   // height: 138px;
    background-color: rgb(221, 143, 143);
}
.img-wrapper .title {
    /* width: 100%; */
    //margin-top: 0px;
    //text-align: center;
    height: 0px;
    //line-height: 28px;
    //background-color: rgb(12, 12, 12);
    transition: 0.4s;
}

.img-wrapper:hover .title {
    /* width: 100%; */
    //margin-top: 100px;
    //text-align: center;
    height: 20px;
    //line-height: 138px;
    background-color: rgb(12, 12, 12);
    transition: 0.5s;
}
.label{
    border-width: 2px;
    border-radius: 2%;
    float: left;
    font-size: 17px;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
.tipsbox {
    width: fit-content;
    min-width: 60px;
    display: block;
    height: 30px;
    position: relative;
    border-radius: 5px;
   // background: linear-gradient(to right, #0c0c0c 60%, #2d2d2d 100%);
   // background: linear-gradient(to right, #abbd73 0, #b9c983 100%);
 //   background: linear-gradient(to right, #CCDDFF 0, #c5d1ec 100%);
    background: linear-gradient(to right, #ececec 0, #efefef 100%);
    /*background-image: url('../images/img.png');*/
    margin-bottom: 6px;
    margin-right: 3px;
    padding: 6px 10px 7px 10px;
   // color: darkslategray;
    color: #100d0d;
    box-shadow: 1px 2px 1px -1px #777;
    transition: background 200ms ease-in-out;
    text-align:right;
    float: left;
    left: 4px;
}

.tipsbox a{
    color: #0c0c0c;
    text-decoration:none;
    font-size: 13px;
}
.tipsContainerClass{
    position: absolute;
    display: flow;
    width: 100% !important;
    top: 150px;
}
.messageSendContainerClass{
    position: absolute;
    display: flow;
    width: 28% !important;
    top: 120px;
    right: 5px;
    background: cornflowerblue;
    padding: 4px;
    border-radius: 3px;
    text-align: center;
}
.tipsshadow {
    position: relative;
}
    .tipsshadow:before {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 13px;
    right: 0px;
    width: 83%;
    height: 19px;
    top: 0;
    box-shadow: 0 9px 5px #000000ad;
    transform: rotate(4deg);
    transition: all 150ms ease-in-out;
}

.tipsbox:hover {
    background: linear-gradient(to right, #f1f1f1 0, #f1f1f1 100%);
    box-shadow: 1px 1.3px 1px -1px #777;
   // background: linear-gradient(to right, #0c0c0c 0%, #0c0c0c 100%);
   // background: linear-gradient(to right, #D0D0D0FF 0%, #D0D0D0FF 100%);
}

.tipsshadow:hover::before {
    -webkit-transform: rotate(0deg);
    box-shadow: 0 1px 1px rgba(141, 140, 140, 0.68);
    transform: rotate(0deg);
    bottom: 20px;
    z-index: -10;
    box-shadow: none
}

.tipscircle {
    position: absolute;
    top: 2px;
    left: 2px;
    border-radius: 50%;
   // box-shadow: inset 1px 1px 1px 0px rgba(0, 0, 0, 0.5), inset 0 0 0 25px antiquewhite;
    box-shadow: inset 1px 1px 1px 0px rgba(0, 0, 0, 0.5), inset 0 0 0 0px rgba(94, 94, 94, 0.49);
    width: 7px;
    height:7px;
    display: inline-block;
    text-align:right;
    padding:0 0px 0 0;
    background: white;
}
.tipslittle1circle {
    position: relative;
    top: 20%;
    left: 3px;
    border-radius: 50%;
// box-shadow: inset 1px 1px 1px 0px rgba(0, 0, 0, 0.5), inset 0 0 0 25px antiquewhite;
    box-shadow: inset 1px 1px 1px 0px rgba(0, 0, 0, 0.23), inset 0 0 0 25px rgba(94, 94, 94, 0.49);
    width: 4px;
    height:4px;
    display: inline-block;
    text-align:right;
    padding:0 0px 0 0;
}
.tipslittle2circle {
    position: absolute;
    top: 75%;
    left: 1px;
    border-radius: 60%;
// box-shadow: inset 1px 1px 1px 0px rgba(0, 0, 0, 0.5), inset 0 0 0 25px antiquewhite;
    box-shadow: inset 1px 1px 1px 0px rgba(0, 0, 0, 0.23), inset 0 0 0 25px rgba(94, 94, 94, 0.49);
    width: 4px;
    height:4px;
    display: inline-block;
    text-align:right;
    padding:0 0px 0 0;
}
.tipslittle3circle {
    position: absolute;
    top: 80%;
    left: 1px;
    border-radius: 50%;
// box-shadow: inset 1px 1px 1px 0px rgba(0, 0, 0, 0.5), inset 0 0 0 25px antiquewhite;
    box-shadow: inset 1px 1px 1px 0px rgba(0, 0, 0, 0.23), inset 0 0 0 25px rgba(94, 94, 94, 0.49);
    width: 4px;
    height:4px;
    display: inline-block;
    text-align:right;
    padding:0 0px 0 0;
}
.input-text-bottom{}
.messageClassMark{}

.bordNextPreContainerClass{
    position: absolute;
    z-index: 1000000000000000000010000000000000000000100000000000000000001000000000000000000010000000000000000000;
    background: none;
    width: 40px;
    height: 70px;
    bottom: 0;
    right: 0;
}
.pageButtonContainerClass{
    margin: auto;
    height: 50%;
    display: flex;
}
.pageButtonClass{
    width: fit-content;
    height: fit-content;
    margin: auto;
}
.friendsRequestContainerClass{
    font-size: 40px;
    z-index: 1000000;
    position: relative;
    /* left: 10px; */
    height: 35px;
    width: 48px;
}
.friendsRequestContainerClass .friendsRequestTextClass{
    font-size: 12px;
    position: absolute;
    bottom: 15px;
    white-space: nowrap;
     display: none;
    left: 53px;

}
.friendsRequestContainerClass:hover .friendsRequestTextClass{

    display: block;
}

.friendsRequestContainerClass .num-tag {
    position: absolute;
    text-align: center;
    font-size: 14px;
    color: #fff;
    border-radius: 3px;
    z-index: 10000001;
    left: 30px;
    width: fit-content;
    height: 18px;
    padding: 1px;
    padding-left: 2px;
    cursor: pointer;
}

.friendReqClass {
    width: 60px;

    height: 60px;
    position: relative;
    overflow: hidden;
//border:  solid #f8f5f5;

    border-color: rgb(208, 208, 208);
//border-color: #CCDDFF;
    border-width: 2px;
    border-radius: 10%;
    margin: 3px;
    margin-left: 7px;
    margin-top: 7px;
    top: -5px;
    left: 0px;
    float: left;

    box-shadow: 1px 1px 1px 1px rgb(12, 12, 12);

}


.commenterClass {
    width: 40px;

    height: 40px;
    position: relative;
    overflow: hidden;
//border:  solid #f8f5f5;

    border-color: rgb(208, 208, 208);
//border-color: #CCDDFF;
    border-width: 2px;
    border-radius: 10%;
    margin: 3px;
    margin-left: 7px;
    margin-top: 7px;
    top: -5px;
    left: 0px;
    float: left;

    box-shadow: 1px 1px 1px 1px rgba(1, 2, 2, 0.87)

}

.imgBackTextContainer{
    height: auto;
    width: 100%;
    float: left;
    top: 0px;
    display: grid;
    padding-left: 15px;
}



.textContainer{
    height: auto;
    width: 100%;
    float: left;
    top: 0px;
    display: grid;
}

.textbox:hover .txtButtonContainerClass{
    display:inline-flex ;
}

.textbox .txtButtonContainerClass{
    display: none;
}
.input-text-class{
    border: none;
    height: 28px;
    width: -webkit-fill-available;
    border-radius: 3px;
    top: 3px;
    position: relative;
    box-shadow: 1px 1px 1px 1px rgb(2 2 2 / 43%);
    padding: 4px;
}
.input-text-image-class{
    width: 29px;
    overflow: hidden;
    opacity: 0;
    position: absolute;
}
.input-text-image-button-behind-class{
    width: 29px;
    box-shadow: 1px 1px 1px 1px rgb(2 2 2 / 43%);
    border: navajowhite;
    margin: 3px;
    border-radius: 3px;
}
.input-button-class{
    width: 29px;
    box-shadow: 1px 1px 1px 1px rgb(2 2 2 / 43%);
    border: navajowhite;
    margin: 3px;
    border-radius: 3px;
}
.input-button-class:hover{

    box-shadow: 1px 1px 1px 1px rgba(2, 2, 2, 0.11);

}
.avatarAndMessageContainerClass{
    width: auto;
    position: relative;
    height: auto;
    padding-bottom: 3px;
    padding-top:0px;
}
.testInfoClass{
    position: absolute;
    display: inline-block;
    top: -25px;
    //position: relative;
    display: inline-block;
    background: black;
    padding-left: 3px;
    border-radius: 3px;
    box-shadow: 1px 1px 1px 1px rgba(1, 1, 1, 0.41);
}
.imageReplierContainerClass{
    position: absolute;
    top: -40px;
    left: 0px;
}
.texter-shake{

}
.texter-shake:hover{
    animation-name: reply-avatar-shake;
    animation-timing-function: ease-in-out;
    animation-duration: 0.4s;
    animation-iteration-count: 1;
    transform-origin: center;
}
.imgBackTexterClass{
    width: 37px;
    height: 37px;
    position: relative;
    overflow: hidden;
    border-color: rgb(208, 208, 208);
    border-width: 2px;
    border-radius: 10%;
    margin: 3px;
    margin-left: 0px;
    margin-top: 3px;
    box-shadow: 1px 1px 1px 1px rgba(1, 2, 2, 0.87);
    vertical-align: bottom
}
.texterClass {
    width: 37px;

    height: 37px;
    position: relative;
    overflow: hidden;


    border-color: rgb(208, 208, 208);

    border-width: 2px;
    border-radius: 10%;
    margin: 3px;
    margin-left: 0px;
    margin-top: 3px;
   // top: -5px;

   // float: left;

    box-shadow: 1px 1px 1px 1px rgba(1, 2, 2, 0.87);
    //display: inline;
    //transition: 0.1s;
    vertical-align: bottom
}
.imageTexterClass {
    width: 35px;

    height: 35px;
    position: relative;
    overflow: hidden;


    border-color: rgb(208, 208, 208);
    background: white;
    border-width: 2px;
    border-radius: 50%;
    margin: 3px;
    margin-left: 0px;
    margin-top: 3px;
// top: -5px;

// float: left;

    box-shadow: 1px 1px 1px 1px rgba(1, 2, 2, 0.87);
//display: inline;
//transition: 0.1s;
    vertical-align: bottom
}
.imageReplierNameClass {
    width: 25px;

    height: 25px;
    position: relative;
    overflow: hidden;


    border-color: rgb(208, 208, 208);
    background: white;
    border-radius: 3px;
    border-width: 2px;
    border-radius: 10%;
    margin: 3px;
    margin-left: 0px;
    margin-top: 3px;
    top: -33px;
    left: 38px;
    background: beige;
    width: auto;
    border-radius: 3px;
    vertical-align: bottom;
    padding-left: 3px;
    padding-right: 2px;

}

.texterClass:hover{
/*    width: 40px;
    left: -18px;
    top:-11px;
    height: 40px;*/
}
.texternameNew{
    z-index: 11;
    position: relative;
    height: 25px;
    padding-left: 6px;
    padding-right: 4px;
    top: 0px;
    border-radius:0px 3px 3px 0px;
    background: black;
    left: 41px;

    box-shadow: 1px 1px 1px 1px rgba(1, 1, 1, 0.41);
    word-break: keep-all;
    width: fit-content;
    font-size: medium;
    color: white;
    padding-top: 2px;
}
.imgBackTextername{
    position: relative;
    height: 25px;
    padding-left: 9px;
    padding-right: 4px;
    top: 2px;
    /* background-color: white; */
    left: 40px;
    /* box-shadow: 1px 1px 1px 1px rgba(1, 1, 1, 0.41); */
    word-break: keep-all;
    width: fit-content;
    /* background: black; */
    /* color: white; */
    width: fit-content;
    font-size: medium;
    border-radius: 0px 3px 3px 0px;
    text-align-last: center;
}

.textername{
    position: relative;
    height: 25px;
    padding-left: 9px;
    padding-right: 4px;
    top: 0px;
    background-color: white;
    left: 40px;
    box-shadow: 1px 1px 1px 1px rgba(1, 1, 1, 0.41);
    word-break: keep-all;
    width: fit-content;
    background: black;
    color: white;
    width: fit-content;
    font-size: medium;
    border-radius: 0px 3px 3px 0px;
    text-align-last: center;
    padding-top: 2px;
}
.textername:hover{
    box-shadow:none;
}
.imgBackMessageTipsContainer{
    display: inline-block;
    width: auto;
     background-color: rgb(255, 255, 255);
    position: relative;
    border-radius: 1px 5px 4px 4px;
    text-align: left;
    word-wrap: break-word;
    padding-left: 4px;
    padding-top:2px;
    padding-bottom: 2px;
    padding-right: 8px;
     box-shadow: 1px 1px 1px 1px rgb(2 2 2 / 7%);
    text-align: left;
    font-size: x-large;
}
.messageTipsContainer{

    padding: 2px;
    display: inline-block;
    width: auto;
    max-width: 200px;
    background-color: rgb(255, 255, 255);
    position: relative;
    border-radius: 1px 5px 4px 4px;
    text-align: left;
    word-wrap: break-word;
    padding: 4px;
    padding-right: 8px;
    box-shadow: 1px 1px 1px 1px rgb(2 2 2 / 43%);
    text-align: left;
 }
.messageTipsContainer:hover{
    box-shadow: none;
}
.titleTipsContainer{

     margin: 1px;
    padding: 2px;
    padding-left: 20px;
    padding-right: 11px;
     display: inline-block;

    width: auto;
    max-width: 400px;

    background-color: rgb(255, 255, 255);
    position: relative;

     border-radius: 2px 6px 6px 8px;
    text-align:left;
    word-wrap:break-word;
    box-shadow: rgb(1 1 1 / 48%) 1px 1px 1px 1px;
    min-height: 30px;
 }

.titleTipsContainer .titleTipsShareContainer{

    margin: 1px;
    padding-right: 10px;
    padding-left: 10px;


    background-color: rgba(255, 255, 255, 0);
    position: absolute;
    height: 20px;
    width: 60px;
    opacity: 0;
    text-align: center;
    overflow: hidden;
    border: none;
    border-radius: 3px;
    float: left;
    top: 0px;
    left: 0;
    z-index: -1;
    white-space: nowrap;
    transition: 0.7s;
    cursor: alias;

 }
.titleTipsContainer:hover .titleTipsShareContainer{

    width: 60px;
    left: 0px;
    top: -22px;
    height: 20px;
    opacity: 1;
    background: white;
}

.titleTipsContainer .titleTipsPersonBookContainer{

    margin: 1px;
    padding-right: 10px;
    padding-left: 10px;


    background-color: rgba(255, 255, 255, 0);
    position: absolute;
    height: 20px;
    width: 100px;
    opacity: 0;
    text-align: center;
    overflow: hidden;
    border: none;
    border-radius: 3px;
    float: left;
    top: 0px;
    left: 0px;
    z-index: -1;
    white-space: nowrap;
    transition: 0.7s;
    cursor: pointer;
    border-radius: 4px;

 }
.titleTipsContainer:hover .titleTipsPersonBookContainer{

    width: 100px;
    left: 0px;
    top: 22px;
    height: 20px;
    opacity: 1;
    background: white;
}

.titleTipsPersonBookContainer:hover{

    width: 100px;
    left: 0px;
    top: 22px;
    height: 20px;
    opacity: 1;
    background: white;
}

.titleTipsShareContainer:hover{

    width: 60px;
    left: 0px;
    top: -22px;
    height: 20px;
    opacity: 1;
    background: white;
}



.addPicToGroupButtin{
    width: 80px;
    position: absolute;
    bottom: 0px;
    right: 0px
}
.titleTipsContainer .titleTipsAddPicContainer{

    margin: 1px;


    padding-right: 10px;
    display: inline-block;


    background-color: white;
    position: absolute;
    height: 0px;
    width: 40px;
    opacity: 0;
    text-align: center;
    overflow: hidden;
    transition: 1s;
    border: none;
    border-radius: 3px;
    float: left;
    white-space: nowrap;

}
.titleTipsContainer:hover .titleTipsAddPicContainer{
    width: 40px;
    bottom: -100%;
    height: 100%;
    opacity: 1;
}


.eachGroupContainer{
    display: inline;
    padding: 2px;
    background: beige;
    margin: 3px;
}
.ql-bubble .ql-editor p{

}
/*.ql-snow .ql-editor img{
    width: 20px;
    height: 20px;
    display: inline-block;
}*/
.ql-container .ql-editor img{
    width: 20px;
    height: 20px;
    display: inline-block;
    top: 5px;
    position: relative;
    margin-right: 2px;
    margin-left: 2px;
}
.richTextContainer ql-container{
    background: none;
}
/*.ql-container.ql-snow{
    height: auto;
}
.richTextContainer ql-container ql-snow{

    height: auto !important;
}*/
.richTextContainer .ql-editor img{
    width: 20px;
    height: 20px;
    display: inline-block;
}
.ql-bubble .ql-editor{
    width: 100%;
    height: auto !important;
}
.ql-snow .ql-editor{
    width: 100%;
    max-width: 360px;
    background: white !important;
}
/*
.ql-editor p{
    display: inline-block;
}*/

.richTextContainer{
    width: auto;
    max-width: 360px;
    min-width: 200px;
    background: rgba(255, 255, 255, 0.67);
    border: none;
}
.showTagTitleClass{

    border-radius: 3px;
    position: absolute;
    bottom: -26px;
    width: auto;
    padding: 1px;
    white-space: nowrap;
    right: 0px;
    padding-left: 6px;
    padding-right: 4px;
    background: red;
    color: white;
}
.tagTitleContainer{
    width: auto;
    max-width: 100px;
    min-width: 100px;
    background: white;
    height: 20px;
    border: none;

    position: relative;
}
.richTextShowContainer{
    width: auto;
    max-width: 360px;
    min-width: auto;
    background: #ffffff87;
    border: none;
    box-shadow: none !important;
    backdrop-filter: blur(2px);
}
.richTextShowContainer  .ql-editor{
   height: auto !important;
}
.messageTextContainer .ql-toolbar{
    display: inline-block !important;
    width: 24px !important;;
    border: none;
}
.messageTextContainer .ql-toolbar .ql-indent{

    width: 25px !important;
    height: 25px !important;
    border: 1px solid #e0e0e0;
}
/*.ql-toolbar ql-snow{
    border: none;
}
*/
.tag-ok-button{
    width: 40px;
    height: 20px;
    position: relative;

    border: 1px solid #e0e0e0;
    display: inline-block !important;

}
.ql-other-button{
    width: 40px;
    height: 25px;
    position: relative;

    border: 1px solid #e0e0e0;
    display: inline-block !important;

}
.addEmojiEachClass{
    width: 20px !important;
    display: inline-block !important;
    margin-right: 4px !important;
    cursor: pointer;
}
.addEmojiContainerClass{
    width: 100%;
    height: 100%;
    padding-top: 5px;
    position: relative;
    background: none;
    border: none;
}
.emojiListClass{
    position: absolute;
    bottom: 45px;
    float: left;
    height: auto;
    width: 400px;
    background: white;
    padding: 7px;
    border-radius: 4px;
}