:root {
    box-sizing: border-box;
    margin: 0;
}

/*
*,
::before,
::after {
    box-sizing: inherit;
    margin: inherit;
}
*/

/*
.container {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    background: rgba(238, 238, 238, 0.15);
    width: 100vw;
    height: 100vh;
}
*/

.card {
    background: transparent;
    border: 3px solid #28d7fe;
    box-shadow: inset 0 0 1vw #1041ff, 0 0 3vw #1041ff, inset 0 0 6vw #1041ff, 0 0 6vw #1041ff, 0 0 .4vw #8bfdfe;
    border-radius: .5625rem;
    padding: 30px;
}
.buttonClass{
    position: absolute;
    top: 7%;
    left: 0px;
    z-index: 100;
}
.buttonClassAddMessage{
    position: absolute;
    top: 9%;
    left: 0px;
    z-index: 100;
}
.asideImageClass{
    position: absolute;
    top: 9%;
    width: 100px;
    height: auto;
    color: #4CD964;
    left: 0px;
    z-index: 100;
}
.buttonClassSaveLocation{
    position: absolute;
    top: 11%;
    left: 0px;
    z-index: 100;
}
/*
.zimuContainer{
    width: 100%;
    position: absolute;
    height: 20px;
   // background-color: blue;
    z-index: 10000000000;
    bottom: 0px;
}
.zimuContainer:hover{
    background-color: #d9b604;
}
.zimuContainer .zimuMoveClass{
    position: absolute;
    width: auto;
    max-height: 20px;
    top:0px;
    background-color: #d9b604;
    left: 100%;
    transition: 1s;
    text-align:center;
    white-space: nowrap;
}
.zimuContainer:hover .zimuMoveClass{
    //top:0px;
    left: -100%;
    transition: 15s;
    transition-timing-function: linear;
}*/

.nihongContainer{
 //   background: #6F6F6F;
    //tabIndex:1111;
    width: 0;
    height:7%;
    position: absolute;
    top: 0;

    left: -10px;
  //  background-color:rgba(0,0,0,0.3);
    /*transition: 1s;*/
    z-index: -1;
}
/*.nihongContainer:hover{
    background-color:rgba(0,0,0,0.3);
    z-index: 10000;
}*/

.nihongContainer .groupName {
    position: absolute;
    left: 25%;
    top: 1px;
    font-size: 18px;
    text-align: left;
    display: block;

    font-weight: 1;

    padding: 0;
    margin: 0;
    line-height: 1;
 //   text-shadow: 0 0 1vw  #fed128, 0 0 1vw #fed128, 0 0 1vw  lightyellow, 0 0 0.4vw lightyellow;
   // text-shadow: 0 0 1vw  #fed128, 0 0 1vw #fed128, 0 0 1vw  lightyellow, 0 0 0.4vw lightyellow;
   // text-shadow: 0 0 10px  #fed128, 0 0 10px #fed128, 0 0 100px  lightyellow, 0 0 100px lightyellow;
    margin-top: 10px;
    margin-left: 10px;
    width: 20%;
   // transition: 1s;
    float: left;
    display: none;

}

.nihongContainer .hoverContainerClass .diner {
    position: relative;
    font-size: 29px;

    display: block;
    color: transparent;

    -webkit-text-stroke-width: 1.1px;
    color: black;



    margin-top: 0px;
    margin-left: 140px;
    width: auto;

    float: left;
    top:0px;
/*paint-order: fill stroke markers;
 -webkit-text-stroke-color: rgb(21, 21, 21);*/
    /* -webkit-text-stroke-color: #fed128;
    text-shadow: 0 0 3vw #fa1c16, 0 0 3vw #fa1c16, 0 0 3vw #fa1c16, 0 0 0.4vw #fed128;*/
    /*text-shadow: 0 0 1vw rgb(255, 255, 255), 0 0 1vw rgba(250, 238, 238, 0.76), 0 0 1vw rgb(21, 21, 21), 0 0 0.4vw rgb(255, 255, 255);*/
/*font-weight: bold;
 letter-spacing: 5px;*/
}

.nihongContainer .hoverContainerClass .diner:hover {

 /*//   font-size: 38px;
   // font-family: 'Fredoka One', serif;
    display: block;
    color: transparent;
    paint-order: fill stroke markers;
    -webkit-text-stroke-width: 1.5px;
    !* -webkit-text-stroke-color: #fed128;
     text-shadow: 0 0 3vw #fa1c16, 0 0 3vw #fa1c16, 0 0 3vw #fa1c16, 0 0 0.4vw #fed128;*!
    -webkit-text-stroke-color: #fdfdf8;
    text-shadow: 0 0 1vw  #fed128, 0 0 1vw #fed128, 0 0 1vw  lightyellow, 0 0 0.4vw lightyellow;
    font-weight: bold;
    letter-spacing: 5px;
    margin-top: 0px;
    margin-left: 15px;
  //  width: 20%;
    transition: 1s;*/
    top:0px;
}
/*
.ownerContainerClass{
    position: fixed;
    right: 0px;
    bottom:0px;
    transition: 1s;
    display: none;
}
*/

.leftSideBarClass{
    width: 48px;
    height:100%;
    left:0px;
    /*background:#fff0db;*/
    position: fixed;
    z-index: 2;
    /*box-shadow: 1px 0px 5px -1px rgba(12, 12, 12, 0.49);*/
    transition:0.2s ;
}
.myContainerClass{
    position: fixed;
    transition: 0.2s;
    left: 0px;
    top: 4px;


    z-index: 3;
    //width: auto;
    min-width: 44px;
    //height: 44px;
    border-width: 1px;
    border-radius: 0px 2px 10px 0px;
    border: none;
    //background-color: rgba(137, 137, 137, 0.37);
    //background-color: black;
    display: flex;
    height: 44px;
    //padding-right: 20px;

    //background: wheat;



}

.locatePicConfirmContainerClass{
    position: fixed;
    justify-content: center;
    width: 25%;
    height:160px;
    min-height: 160px;
    left: 50%;
    bottom: 45%;
    border-radius: 10px;
    z-index: 10000;
    transform: translate(-50%, -50%);
    background-color: white;
    //opacity: 0.5;
    display: none;
    opacity: 0.8;
}
.searchPlaceBarContainerClass{
    position: fixed;
    display: flex;
    left: 50px;
    top: 50px;

    z-index: 1;
    width: 10%;
    min-width: 300px;
    height: 44px;
    border-width: 1px;
    border-radius: 7px 7px 7px 7px;
    border: none;
    background: white;
   // display: none;
    padding-right: 0px;

}
.playLineClass{
    position: fixed;

    bottom: 50px;
    left: 50%;
    z-index: 1;
    width: auto;
    min-width: 300px;
    height: 44px;
    border-width: 1px;
    border-radius: 7px 7px 7px 7px;
    border: none;
    display: none;
    padding-right: 0px;
}
.playLineEditClass{
    position: fixed;

    bottom: 150px;
    left: 50%;
    z-index: 1;
    width: auto;
    min-width: 300px;
    height: 44px;
    border-width: 1px;
    border-radius: 7px 7px 7px 7px;
    border: none;
    padding-right: 0px;
    display: none;
}
.searchPlaceresultContainerClass{
    position: fixed;

    left: 2px;
    top: 100px;

    z-index: 1;

    min-width: 100px;

    border-width: 1px;
    border-radius: 7px 7px 7px 7px;
    border: none;
    background: white;
    display: flex;
    padding-right: 0px;
}
.searPlaceBarClass{
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: white;
    border: none;
    border-radius:  7px 7px 7px 7px;
    font-family: inherit;
    font-size: inherit;
    height: 44px;
    outline: 0;
    padding-inline-start: 12px;
    position: relative;
    width: 300px;
    display: none;

}
.inputPicLocateMessageClass{
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: ghostwhite;
    border: none;
    border-radius:  7px 7px 7px 7px;
    font-family: inherit;
    font-size: inherit;
    height: 44px;
    outline: 0;
    padding-inline-start: 12px;
    position: relative;
    width: 90%;
    //display: none;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}
.locatePicOkButtonClass{
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: rgba(1, 2, 2, 0.32);
    border: none;
    border-radius:  7px 7px 7px 7px;
    font-family: inherit;
    font-size: inherit;
    height: 44px;
    outline: 0;
    padding-inline-start: 12px;
    position: relative;
    width: 90%;
    //display: none;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-top: 20px;
}
.eachPersonLiClass{
    height: 100%;
    display: contents;
    cursor: n-resize;
    list-style-type: none;
}
.personContainerClass{
    position: relative;

    left: 0px;


    z-index: 1;
    width: 170px;
    height: 46px;
    left: 3px;
    border-width: 1px;
    border-radius:4px;
    // border: 0.1px solid #c4c4c4f0;
    //background-color: #c4c4c4f0;
    width: fit-content;
    max-width: 200px;
    display: list-item;
    cursor: pointer;

}
.returnBackToMainClass{
    position: relative;
    left: 7px;
    background: white;
    border-radius: 3px;
    padding-left: 2px;
    padding-right: 2px;
    width: 40px;
    box-shadow: 1px 1px 1px 1px rgba(1, 1, 1, 0.41);
    top: -6px;
}
.returnBackToMainClass:hover{
    box-shadow: 1px 1px 1px 1px rgba(1, 1, 1, 0.12);
}

.personListTitleClass{

}
.listInfoClass{
    display: none;
    font-size: x-small;
    margin-top: 7px;
}
.personListTitleClass:hover .listInfoClass{
    display: flex;
}
.littleBorder{
    display: none;
}
.personContainerClass:hover .littleBorder{
    display:block;

}
.otherPersonAvatarClassContainer:hover .knockerModeClass{
    display: flex;
}
.personInfoContainerClass{
    position: absolute;
    bottom: -0px;
    left: 50%;
    width: 39%;
    height: 70px;
    //width: 50px;
    //transition: 1s;
}
.personInfoContainerClass .flowers {
  //  position: absolute;
    top: 0px;
    right: 10%;
    width: 60%;
    font-size:30px;
    font-family: 'Fredoka One', serif;
    display: block;
    //color: transparent;
    color: #0c0c0c;
    paint-order: fill stroke markers;
 //   -webkit-text-stroke-width: 1.5px;
    /* -webkit-text-stroke-color: #fed128;
     text-shadow: 0 0 3vw #fa1c16, 0 0 3vw #fa1c16, 0 0 3vw #fa1c16, 0 0 0.4vw #fed128;*/
    -webkit-text-stroke-color: #000000;
   // text-shadow: 0 0 1vw  #fed128, 0 0 1vw #fed128, 0 0 1vw  lightyellow, 0 0 0.4vw lightyellow;
  //  text-shadow: 0 0 1vw #f56b6b, 0 0 1vw #d91616, 0 0 1vw  lightyellow, 0 0 0.4vw lightyellow;
   // text-shadow: 0 0 1vw  #fed128, 0 0 1vw #fed128, 0 0 1vw #b1b19b, 0 0 0.4vw #dcdcba;
    font-weight: bold;
    letter-spacing: 5px;
  //  margin-top: 18px;
   // margin-left: 27px;
    //width: 50%;
    //transition: 1s;
    float: left;
    z-index: 1000000;
}
/*.nihongContainer:hover .flowers{
    position: absolute;
    display: block;
}*/
.myFriendsAvatarBroadClass {
    position: absolute;
  //  background-color:rgba(0,0,0,0.3);
    top: 7%;
    right:-5%;
   // margin-top: 18px;
   // margin-left: 27px;
    width: 5%;
    height: 93%;
    font-size:30px;
    display: none;
    font-family: 'Fredoka One', serif;
    display: block;
    color: transparent;
    paint-order: fill stroke markers;
    -webkit-text-stroke-width: 1.5px;
    /* -webkit-text-stroke-color: #fed128;
     text-shadow: 0 0 3vw #fa1c16, 0 0 3vw #fa1c16, 0 0 3vw #fa1c16, 0 0 0.4vw #fed128;*/
    -webkit-text-stroke-color: #fdfdf8;
   // text-shadow: 0 0 1vw  #fed128, 0 0 1vw #fed128, 0 0 1vw  lightyellow, 0 0 0.4vw lightyellow;
    text-shadow: 0 0 1vw #f56b6b, 0 0 1vw #d91616, 0 0 1vw  lightyellow, 0 0 0.4vw lightyellow;
    font-weight: bold;
    letter-spacing: 5px;
border-radius: 5px;
    //transition: 0.6s;
    float: left;
    z-index: 100000;
}
.nihongContainer .nextRecommendContainClass{

    left: 40%;

    position: absolute;
    top: 15px;
    height: 46px;
    width: 46px;


}
.nihongContainer .nextRecommendContainClass .home {
    filter: blur(2px);
//   top: -8px;
    height: 46px;
    width: 46px;
// margin: 10px;
    font-size:30px;
    font-family: 'Fredoka One', serif;
    display: block;
    color: transparent;
    paint-order: fill stroke markers;
    -webkit-text-stroke-width: 1.5px;
    /* -webkit-text-stroke-color: #fed128;
     text-shadow: 0 0 3vw #fa1c16, 0 0 3vw #fa1c16, 0 0 3vw #fa1c16, 0 0 0.4vw #fed128;*/
    -webkit-text-stroke-color: #fdfdf8;
// text-shadow: 0 0 1vw  #fed128, 0 0 1vw #fed128, 0 0 1vw  lightyellow, 0 0 0.4vw lightyellow;
// text-shadow: 0 0 1vw #f56b6b, 0 0 1vw #d91616, 0 0 1vw  lightyellow, 0 0 0.4vw lightyellow;
//text-shadow: 0 0 1vw  #fed128, 0 0 1vw #fed128, 0 0 1vw  lightyellow, 0 0 0.4vw lightyellow;
    font-weight: bold;
// letter-spacing: 5px;
// margin-top: 18px;
// margin-left: 27px;
// width: 50%;
    //transition: 1s;
    border-radius: 50%;
// box-shadow: 0 0 1vw  #fed128, 0 0 1vw #fed128, 0 0 1vw  lightyellow, 0 0 0.4vw lightyellow;
// background: #f8f8bd;
    float: left;


}
.nihongContainer .nextRecommendContainClass .home:hover {

    box-shadow: 0 0 1vw #ffffff, 0 0 1vw #ffffff, 0 0 1vw  lightyellow, 0 0 0.4vw lightyellow;
// background:lightyellow;
//text-shadow: 0 0 1vw  #fed128, 0 0 1vw #fed128, 0 0 1vw  lightyellow, 0 0 0.4vw lightyellow;
    filter: blur(0px);
    transition: 0.3s;
}



.searchPersonAvatarsEachContainerClass{

}
.searchPersonAvatarsEachContainerClass::-webkit-scrollbar{
    width: 0;
    height: 0;
}
.myHomeContainClass{



    position: relative;
    top: 0px;
    height: 36px;
    width: 36px;
transition: 0.6s;

}
.nihongContainer .myHomeContainClass .home {
    filter: blur(2px);
 //   top: -8px;
    height: 36px;
    width: 36px;
   // margin: 10px;
    font-size:30px;
    font-family: 'Fredoka One', serif;
    display: block;
    color: transparent;
    paint-order: fill stroke markers;
    -webkit-text-stroke-width: 1.5px;
    /* -webkit-text-stroke-color: #fed128;
     text-shadow: 0 0 3vw #fa1c16, 0 0 3vw #fa1c16, 0 0 3vw #fa1c16, 0 0 0.4vw #fed128;*/
    -webkit-text-stroke-color: #fdfdf8;
// text-shadow: 0 0 1vw  #fed128, 0 0 1vw #fed128, 0 0 1vw  lightyellow, 0 0 0.4vw lightyellow;
// text-shadow: 0 0 1vw #f56b6b, 0 0 1vw #d91616, 0 0 1vw  lightyellow, 0 0 0.4vw lightyellow;
//text-shadow: 0 0 1vw  #fed128, 0 0 1vw #fed128, 0 0 1vw  lightyellow, 0 0 0.4vw lightyellow;
    font-weight: bold;
   // letter-spacing: 5px;
   // margin-top: 18px;
   // margin-left: 27px;
// width: 50%;
    //transition: 1s;
    border-radius: 50%;
// box-shadow: 0 0 1vw  #fed128, 0 0 1vw #fed128, 0 0 1vw  lightyellow, 0 0 0.4vw lightyellow;
// background: #f8f8bd;
    float: left;


}
.nihongContainer .myHomeContainClass .home:hover {

  //  box-shadow: 0 0 1vw  #fed128, 0 0 1vw #fed128, 0 0 1vw  lightyellow, 0 0 0.4vw lightyellow;
    box-shadow: 0 0 1vw #2b2b2b, 0 0 1vw #575454, 0 0 1vw  lightyellow, 0 0 0.4vw lightyellow;
   // background:lightyellow;
    //text-shadow: 0 0 1vw  #fed128, 0 0 1vw #fed128, 0 0 1vw  lightyellow, 0 0 0.4vw lightyellow;
    filter: blur(0px);
    transition: 0.3s;
}

.nihongContainer .myHomeContainClass .nav-tag {
    // display: inline-block;
        position: relative;
        font-weight: 100;

        /* height: 20px;
         width: 120px;*/
        line-height: 29px;
        text-align: center;

        font-size: 1px;
    color: #fff;
    background-color: #d90404;
        //background-color: #D9D919;
        border-radius: 3px;
        top: -55px;
        left: 30px;
        padding: 1px;
        padding-left: 2px;
    //margin: 0 0 0 4px;
        /* top: 4px;
        right: 10px;*/
}
.nihongContainer .myFocusOnContainerClass{

    left: 15%;
     top: -30px;
    position: absolute;
    height: 36px;
    width: 36px;
    transition: 0.5s;


}

.nihongContainer .myFocusOnContainerClass:hover{

    left: 15%;
    top: 0px;
    position: absolute;
    height: 36px;
    width: 36px;
    transition: 0.5s;


}

.nihongContainer .myFocusOnContainerClass .myFocusOn {
    filter: blur(2px);
    width: 39px;
    height: auto;


    font-size:30px;
    font-family: 'Fredoka One', serif;

    color: transparent;
    paint-order: fill stroke markers;
    -webkit-text-stroke-width: 1.5px;

-webkit-text-stroke-color: #fdfdf8;
    font-weight: bold;
    letter-spacing: 5px;

    border-radius: 50%;
    //transition: 2s;
    float: left;


}
.nihongContainer .myFocusOnContainerClass .myFocusOn:hover {

    box-shadow: 0 0 1vw  #fed128, 0 0 1vw #fed128, 0 0 1vw  lightyellow, 0 0 0.4vw lightyellow;
    background:#fed128;
    //text-shadow: 0 0 1vw  #fed128, 0 0 1vw #fed128, 0 0 1vw  lightyellow, 0 0 0.4vw lightyellow;
    filter: blur(0px);
    transition: 0.3s;
}

.nihongContainer .myFocusOnContainerClass .nav-tag {
    // display: inline-block;
        position: relative;
        font-weight: 700;

        /* height: 20px;
         width: 120px;*/
        line-height: 29px;
        text-align: center;
        color: #0c0c0c;
        font-size: 2px;
        background-color: #fed128;
        border-radius: 3px;
    top: -45px;
    left: 30px;
        padding: 1px;
        padding-left: 2px;

    //margin: 0 0 0 4px;
        /* top: 4px;
        right: 10px;*/
}

.myfriendsContainClass{
    left: 48%;
    top: 0px;
    position: absolute;
    height: 36px;
    width: 36px;
    transition: 0.6s;
    display: none;
}
.nihongContainer .myfriendsContainClass .myfriends {
    filter: blur(2px);
    top: -8px;
    height: 36px;
    width: 36px;

    font-size:30px;
    font-family: 'Fredoka One', serif;
    display: block;
    color: transparent;
    paint-order: fill stroke markers;
    -webkit-text-stroke-width: 1.5px;
    /* -webkit-text-stroke-color: #fed128;
     text-shadow: 0 0 3vw #fa1c16, 0 0 3vw #fa1c16, 0 0 3vw #fa1c16, 0 0 0.4vw #fed128;*/
    -webkit-text-stroke-color: #fdfdf8;
// text-shadow: 0 0 1vw  #fed128, 0 0 1vw #fed128, 0 0 1vw  lightyellow, 0 0 0.4vw lightyellow;
// text-shadow: 0 0 1vw #f56b6b, 0 0 1vw #d91616, 0 0 1vw  lightyellow, 0 0 0.4vw lightyellow;
//text-shadow: 0 0 1vw  #fed128, 0 0 1vw #fed128, 0 0 1vw  lightyellow, 0 0 0.4vw lightyellow;
    font-weight: bold;
    letter-spacing: 5px;
  //  margin-top: 18px;
   // margin-left: 27px;
   // width: 50%;
    //transition: 1s;
    border-radius: 50%;
   // box-shadow: 0 0 1vw  #fed128, 0 0 1vw #fed128, 0 0 1vw  lightyellow, 0 0 0.4vw lightyellow;
   // background: #f8f8bd;
    float: left;

}

.nihongContainer .myfriendsContainClass .myfriends:hover {
    box-shadow: 0 0 1vw #2b2b2b, 0 0 1vw #575454, 0 0 1vw  lightyellow, 0 0 0.4vw lightyellow;
   // text-shadow: 0 0 1vw  #fed128, 0 0 1vw #fed128, 0 0 1vw  lightyellow, 0 0 0.4vw lightyellow;
    filter:blur();
    transition: 0.3s;
}


.nihongContainer .myfriendsContainClass .nav-tag {
// display: inline-block;
    position: relative;
font-weight: 700;

   /* height: 20px;
    width: 120px;*/
line-height: 29px;
 text-align: center;

 font-size: 2px;
    color: #ffffff;
    background-color: #0000ff;
   // background-color: #d91616;
border-radius: 3px;
    top: -55px;
    left: 30px;
    padding: 1px;
    padding-left: 2px;
//margin: 0 0 0 4px;
/* top: 4px;
right: 10px;*/
}

/*
.nihongContainer .myFocusOn {
    filter: blur(2px);
    left: 53%;
    position: absolute;
    width: 59px;
    height: auto;
    top: -17px;

    font-size:30px;
    font-family: 'Fredoka One', serif;
    display: block;
    color: transparent;
    paint-order: fill stroke markers;
    -webkit-text-stroke-width: 1.5px;
    !* -webkit-text-stroke-color: #fed128;
     text-shadow: 0 0 3vw #fa1c16, 0 0 3vw #fa1c16, 0 0 3vw #fa1c16, 0 0 0.4vw #fed128;*!
    -webkit-text-stroke-color: #fdfdf8;
// text-shadow: 0 0 1vw  #fed128, 0 0 1vw #fed128, 0 0 1vw  lightyellow, 0 0 0.4vw lightyellow;
// text-shadow: 0 0 1vw #f56b6b, 0 0 1vw #d91616, 0 0 1vw  lightyellow, 0 0 0.4vw lightyellow;
//text-shadow: 0 0 1vw  #fed128, 0 0 1vw #fed128, 0 0 1vw  lightyellow, 0 0 0.4vw lightyellow;
    font-weight: bold;
    letter-spacing: 5px;
    margin-top: 18px;
    margin-left: 27px;
  //  width: 50%;
    border-radius: 50%;
    transition: 1s;
    float: left;
    //background: #fcdf7d;
    //box-shadow: 0 0 1vw  #fed128, 0 0 1vw #fed128, 0 0 1vw  lightyellow, 0 0 0.4vw lightyellow;
}
.nihongContainer .myFocusOn:hover {
    box-shadow: 0 0 1vw  #fed128, 0 0 1vw #fed128, 0 0 1vw  lightyellow, 0 0 0.4vw lightyellow;
   // text-shadow: 0 0 1vw  #fed128, 0 0 1vw #fed128, 0 0 1vw  lightyellow, 0 0 0.4vw lightyellow;
    background: #fcdf7d;
    transition: 0.3s;
}*/

/*.nihongContainer .myFocusOn:hover{
    filter: blur();
}*/

.zangnumber{
    font-size: 16px;
    text-shadow:0 0 0;
    font-family: none;
    letter-spacing: 1px;
    margin-top: 5px;
    margin-left: 5px;
    margin-right: 10px;

}
/*.nihongContainer .logoContainer{
 //   background: #6F6F6F;
    front-size:0px;
    position: absolute;
 //  background-color:rgba(0,0,0,0.3);
    width: 100%;
    right: 0px;
    top: 0px;
    left: 100%;
    height: 82px;
    transition: 1s;
}*/
/*.nihongContainer:hover .logoContainer{
    //background: #0c0c0c;
    //background: #ffffff;
   // background-color:rgba(0,0,0,0.3);
    -moz-filter:blur(2px);
    -ms-filter:blur(2px);
    -o-filter:blur(2px);
    fiter:blur(3px);
    position: absolute;
    width: 100%;
    right: 0px;
    top: 0px;
    left: 100%;
   // height: 7%;
    transition: 1s;
}*/

/*.nihongContainer .logoContainer:hover{
   // background: #ffffff;
    -moz-filter:blur(2px);
    -ms-filter:blur(2px);
    -o-filter:blur(2px);
    front-size:0px;
    position: absolute;
    width: 90%;
    right: 0px;
    top: 0px;
    left: 100%;
    height: 82px;
    overflow: none;
}*/

.nihongContainer .logoContainer:hover .yummer-name {

 //display: none;
}
.nihongContainer .logoContainer .sidebar{
    position: fixed;
    display: block;
   // top:7%;
    left: -40%;
    width: 40%;
    background-color:rgba(0,0,0,0.3);
    height: 100%;
   // width: 300px;
    z-index: 1000000;
    padding-bottom: 30px;
    overflow: hidden;
    --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),0 2px 4px -1px rgba(0, 0, 0, 0.06);
//    -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
// box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    transition: 0.5s;
}
/*
.nihongContainer .logoContainer:hover .sidebar{
    -webkit-transition: all 300ms 0s ease-in-out;
// transition: all 0.5s 0s ease-in-out;
    background-color:rgba(0,0,0,0.3);

    position: fixed;

    top:67px;
    left: 0px;
   // background-color: #fff;
    height: 100%;
    width: 40%;
    z-index: 1000000;
    padding-bottom: 30px;
    overflow: hidden;
    --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),0 2px 4px -1px rgba(0, 0, 0, 0.06);
    -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

    transition: 0.5s;
}*/
/*.nihongContainer .logoContainer:hover .photopile{

}*/
.nihongContainer .logoContainer .friend{
    position: fixed;
   // top:7%;
    right: -60%;
    height:40%;
    background-color:rgba(0,0,0,0.3);
//display: none;
    width: 60%;
    transition: 0.5s;
    z-index: 10000000;
}

/*
.nihongContainer .logoContainer:hover .friend{
    position: fixed;
    top:67px;
//  display: block;
//right: -50%;
    height:34%;
    right: 0;
    width: 60%;
    background-color: #fff;
    z-index: 100000;
    transition: 0.5s;
}
*/

.nihongContainer .logoContainer .sugession{
    position: fixed;
    bottom:-90%;
    right: -60%;
    height:0px;
    width: 60%;
    height:60%;
    background-color:rgba(0,0,0,0.3);
    transition: 0.5s;
    z-index: 10000000;
}
.homeBroadClass{
    position: fixed;
    top:-100%;
    //right: -60%;
    left: 0px;
    height:100px;
    width: 100%;
    height:100%;
    background-color: #afafaf;
    transition: 0.5s;
    z-index: 10000;
    opacity:0.9;
    //filter: blur(2px);

}
.newspapersClass{
    position: fixed;
    top:-100%;
    //right: -60%;
    left: 0px;
    display: none;
    width: 100%;

    background-color: rgb(255, 255, 255);
    transition: 0.5s;
    opacity:0.7;
    z-index: 10000;
    //filter: blur(2px);

}
.topicNews{
    position: absolute;
    width: 50%;
    top: 60px;
    left: 0px;
    width: 50%;
}
.myTopics{
    position: absolute;
    top: 60px;

    right: 0px;
    width: 50%;
}

.friendRequestDetailClass{
    position: fixed;
    width:100%;
    height:100%;
   /* top: 0px;
    right: -100%;*/
    top: -100%;
    right: 0px;
    background: white;
    transition:0.5s;
    z-index: 10000000;
    overflow: scroll;
}
.imageGroupCommentsClass{
    position: fixed;
    width:50%;
    height:100%;
    top: 0px;
    left: -50%;
    //left: 0px;
    //background: white;
    //background-color: rgba(0,0,0,0.3);
    background-color: rgba(255, 255, 255, 0.67);
    transition:0.5s;
    z-index: 10001;
}
/*.nihongContainer .logoContainer:hover .sugession{
    position: fixed;
    bottom:0;
    right: 0;
    height:60%;
    width: 60%;
    background-color: #fff;
    z-index: 100000;

    transition: 0.5s;
}*/

.sidebar .sidebar_header {
    height: 66px;
    background: #fff;
    padding: 0 15px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.sidebar .sidebar_header img {
    max-width: 110px;
}

.sidebar .sidebar_header img.logo-icon {
    display: none;
}

.sidebar .sidebar_header img.logo_inverse {
    display: none;
}

.sidebar .sidebar_inner {
//height: calc(100vh - 60px);
    height: auto;
    padding: 5px 13px;
}



.sidebar .sidebar_inner ul {
    list-style: none;
    padding: 0;
    margin: 20px  0 0 0;
}

.sidebar .sidebar_inner ul:first-child {
    margin: 0;
}

.sidebar .sidebar_inner ul:before {
    content: attr(data-submenu-title);
    padding: 0 20px;
    margin-bottom: 5px;
    display: block;
    color: #be185d;
    font-weight: 600;
    font-size: 14px;
}

.sidebar .sidebar_inner ul li {
    display: block;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    line-height: 25px;
    font-size: 15px;
    border-radius: 5px;
}

.faulty-letter {
    -webkit-text-stroke-color: #2873fe;
   // text-shadow: 0 0 1vw #0c0c0c, 0 0 1vw rgba(238, 238, 238, 0.15), 0 0 1vw #ffffff, 0 0 0.2vw #ffffff;
   // -webkit-animation-name: blink;
    animation-name: blink-0;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: 9999;
    animation-iteration-count: 9999;
}

.faulty-letter-1 {
    //-webkit-text-stroke-color: #ffffff;
    //-webkit-text-stroke-color: rgba(245, 245, 245, 0.94);
    //-webkit-text-stroke-color: rgb(255, 84, 84);
    -webkit-text-stroke-color: rgb(14, 160, 252);
 //text-shadow: 0 0 1vw #0c0c0c, 0 0 1vw rgba(238, 238, 238, 0.15), 0 0 1vw #ffffff, 0 0 0.2vw #ffffff;
    text-shadow: 0 0 51vw rgb(40, 115, 254), 0 0 11.1px rgb(255, 255, 255), 0 0 111.1vw rgb(255, 255, 255), 0 0 111.1vw rgba(255, 255, 255, 0.55);
    -webkit-animation-name: blink;
    animation-name: blink-1;
    -webkit-animation-duration: 0.1s;
    animation-duration: 4s  ;
    -webkit-animation-iteration-count: 9999;
    animation-iteration-count: 9999;
    transition: 0s;
}

.welcome {
    display: block;
    color: #28d7fe;
    font-size: 40px;
    font-family: Pacifico, Parisienne, serif;
    text-shadow: 0 0 3vw #1041ff, 0 0 3vw #1041ff, 0 0 10vw #1041ff, 0 0 10vw #1041ff, 0 0 0.4vw #8bfdfe;
    font-weight: normal;
}

/*@-webkit-keyframes blink {
    from,
    38%,
    43.25%,
    49.5%,
    51.125%,
    to {
     //   -webkit-text-stroke-color: #444444;
        text-shadow: 0 0 1vw #ffffff, 0 0 1vw rgba(238, 238, 238, 0.15), 0 0 1vw #ffffff, 0 0 0.2vw #ffffff;
    }

    38.5%,
    43%,
    50%,
    51% {
        -webkit-text-stroke-color: #fed128;
        //text-shadow: 0 0 3vw #fa1c16, 0 0 3vw #fa1c16, 0 0 3vw #fa1c16, 0 0 0.4vw #fed128;
        text-shadow: 0 0 1vw rgb(248, 245, 245), 0 0 1vw rgba(238, 238, 238, 0.15), 0 0 1vw #f8f5f5, 0 0 0.2vw rgba(238, 238, 238, 0.15);
    }
}*/

@keyframes blink-0 {

    0%{
        -webkit-text-stroke-color: #28acfe;
        opacity: 1;
        //text-shadow: 0 0 2vw  #fed128, 0 0 1vw #fed128, 0 0 1vw  lightyellow, 0 0 0.4vw lightyellow;
    }
    50%{opacity: 1}
    53%{opacity: 0;}
    54.1%{
        opacity: 1;
    }
    66%{opacity: 1}
    67%{opacity: 0;}
    77.1%{
        opacity: 0;
    }
    78%{opacity: 1}

    100%{opacity: 1}

}

@keyframes blink-1 {

    0%{
        -webkit-text-stroke-color: #f58989;
        opacity: 1;
      //  text-shadow: 0 0 2vw  #fed128, 0 0 1vw #fed128, 0 0 1vw  lightyellow, 0 0 0.4vw lightyellow;
    }
    20%{opacity: 1}
    21%{opacity: 0;}
    21.1%{
        opacity: 1;
    }
    22.1%{
        opacity: 1;
    }
    86%{opacity: 1}
    87%{opacity: 0;}
    87.1%{
        opacity: 0;
    }
    88%{opacity: 1}

    100%{opacity: 1}

}



/* cyrillic-ext */
@font-face {
    font-family: 'Pacifico';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/pacifico/v21/FwZY7-Qmy14u9lezJ-6K6MmBp0u-zK4.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: 'Pacifico';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/pacifico/v21/FwZY7-Qmy14u9lezJ-6D6MmBp0u-zK4.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
    font-family: 'Pacifico';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/pacifico/v21/FwZY7-Qmy14u9lezJ-6I6MmBp0u-zK4.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Pacifico';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/pacifico/v21/FwZY7-Qmy14u9lezJ-6J6MmBp0u-zK4.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Pacifico';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/pacifico/v21/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
    font-family: 'Fredoka One';
    font-style: normal;
    font-weight: 400;
    //src: url(https://fonts.gstatic.com/s/fredokaone/v12/k3kUo8kEI-tA1RRcTZGmTlHGCaen8wf-.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.message-broad{
    display:block;
    backgroundColor:white;
    position:relative;
    paddingBottom:'10px';
}
.message-broad-ul{
    overflow:hidden;

//padding:1em;
}

.message-broad-ul li{
// margin:1em;
 //   margin:10px;

    position: relative;
    top: 15px;
    float:left;
    left: 1px;
    list-style-type: none;
    max-width: 60%;
    min-width: 30%;
    padding-bottom: 15px;

}
.message-broad-ul li a{
    text-decoration:none;
    color:#000;
    background:#ffc;
    display:block;
// height:5em;
    width:100%;
    padding:1em;
    -moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
    -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
    box-shadow: 5px 5px 7px rgba(33,33,33,.7);
    -moz-transition:-moz-transform .15s linear;
    -o-transition:-o-transform .15s linear;
    -webkit-transition:-webkit-transform .15s linear;
}


.message-broad-ul li h2{
// font-size:140%;
    font-size: 50%;
    font-weight:bold;
    padding-bottom:2px;
}
.message-broad-ul li p{
    font-family:"Reenie Beanie",arial,sans-serif;
// font-size:180%;
}
.message-broad-ul li a{
    -webkit-transform: rotate(-1deg);
    -o-transform: rotate(-1deg);
    -moz-transform:rotate(-1deg);
}
.message-broad-ul li:nth-child(even) a{
    -o-transform:rotate(2deg);
    -webkit-transform:rotate(2deg);
    -moz-transform:rotate(2deg);
    position:relative;
    top:5px;
    background:#cfc;
}
.message-broad-ul li:nth-child(3n) a{
    -o-transform:rotate(-1deg);
    -webkit-transform:rotate(-1deg);
    -moz-transform:rotate(-1deg);
    position:relative;
    top:5px;
    background:#ccf;
}
.message-broad-ul li:nth-child(5n) a{
    -o-transform:rotate(5deg);
    -webkit-transform:rotate(5deg);
    -moz-transform:rotate(5deg);
    position:relative;
    top:5px;
}
.message-broad-ul li a:hover,ul li a:focus{
    box-shadow:10px 10px 7px rgba(0,0,0,.7);
    -moz-box-shadow:10px 10px 7px rgba(0,0,0,.7);
    -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);
    -webkit-transform: scale(1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.25);
//  left: 30%;
    position:relative;
    z-index:5;
}

.ly_titleBg {
    width: 60%;
    height: 20px;
    background: #000;
    left: 30px;
    opacity: 0.55;
    filter: alpha(opacity=55);
    position: absolute;
    top: -10px;
}

.ly_titleTxt {
    width: 60%;
    height: 40px;
    cursor: move;
    color: #fff;
    padding: 0 10px;
    line-height: 40px;
    left: 20px;
    position: absolute;
    top: -20px;
}
.myGroupContainer{
    position: relative;
    width: 50%;
    height: auto;
}
.guguTopic{
    padding: 10px;
    font-size: 20px;
}

.replyAllClass{
    width: 100%;
    height: 30px;
    background-color: rgb(255, 255, 255);
    text-align: center;
}
.replyAllClass .nav-tag{
    position: relative;
    font-weight: 700;
    //line-height: 29px;
    width: fit-content;
    text-align: center;
    font-size: 2px;
    color: #ffffff;
    background-color: #0080ff;
// background-color: #d91616;
    border-radius: 3px;
    top: -20px;
    left: 55%;
    padding: 1px;
    padding-left: 2px;

}
.replyAllClass:hover{
   background-color: #aaaaaa;
}
.starTextClass{
    position: relative;
    text-align: center;
    font-size: 0.1em;
}
.starCountClass{
    position: absolute;
    text-align: center;
    font-size: 1rem;
    width: fit-content;
    white-space: nowrap;
    right: 5px;
    top: 34px;
    margin-right: 6px;

}
.societyGroupSideBarClass{
    position: fixed;
    width: 10%;
    height: auto;
    right: -9.8%;
    top:200px;
    z-index: 1000000000;
    transition: 0.3s;



}

.societyGroupSideBarClass:hover{
    right:0%;
}

.friendsSideBarClass{
    position: absolute;
    width: 50%;
    height: 100%;
    left: -50%;
    background-color: white;
    z-index: 1000000;
    transition: 0.3s;
}
.timeLineChangeListClass{
    display: none;
    position: absolute;
    width: 45px;
    height: 24px;
    left: -7px;
    top: 1px;
    float: left;
    border: none;
    border-radius: 3px;

}
.friendsToAddSideBarClass{
    position: absolute;
    width: 50%;
    height: 100%;
    left: -50%;
    background-color: white;
    z-index: 1000000;
    transition: 0.3s;
}
.closeFriendsBarClass{
    position: absolute;

    top: 0px;
    left: 0px;
}
.societyGroupLiClass{
    position: relative;
    width: 100%;
    height: 50px;
   // background-color: rgba(255, 255, 255, 0.81);
    z-index: 1000000;
    background-color: rgba(217, 216, 216, 0);
    line-height: 50px;
    text-align: center;
    transition: 0.3s;
    list-style: none;
}


.societyGroupLiClass:hover{
   // transition: 2s;
   // transition-delay: 1s;


 }
.societyGroupLiClass:hover .societyGroupLiOnClass{
   // transition-delay: 0.7s;
        transition: 0.8s;
   // background-color: #ececec;
    width: 85%;

}
.societyGroupLiClass:hover .societyGroupLiOnHoverClass{
   // transition-delay: 0.7s;
    transition: 0.3s;
    background-color: rgba(43, 43, 43, 0.51);
    display: block;
    text-align: right;
    color: white;


}
.societyGroupLiClass:hover .addReplayClass{
    width: 35px;
    transition:0.8s;
   // display: block;
    left: -35px;
    //border-radius: 3px;

    filter: blur(0px);
}
.societyGroupLiClass:hover .commonButtonClass{
    animation-name: add-comment;
    animation-timing-function: ease-in-out;
    animation-duration: 0.7s;
    animation-iteration-count: 1;
}
.societyGroupLiClass .logoPublicChat{
width: 20%;
    transition:0.8s;
   // display: block;
    left: -20%;


}
.societyGroupLiClass:hover .societyGroupLiOnClass:hover{
    transition-delay: 0.0s;
}

/*.societyGroupLiClass:hover .societyGroupLiOnClass{
    transition: 0.1s;
    background-color: #dedddd;
}*/
.glassBarClass {
    position: absolute;
    height: 100%;
    width: 100%;


    filter: blur(0px); /* 值越大越模糊 */
    z-index: 2; /* 模糊层在最下面 */
}.glassBarClass:before {
     content: "";/* 必须包括 */
     position: absolute;/* 固定模糊层位置 */
     width:300%;
     height:300%;
     left: -100%;/* 回调模糊层位置 */
     top: -100%;/* 回调模糊层位置 */
     background-color: rgba(201, 201, 201, 0.96);

     filter: blur(20px);/* 值越大越模糊 */
 //    background-color: rgba(240, 240, 240, 0.97);
     z-index: -2;/* 模糊层在最下面 */

}
.timeLineSideBarClass{
    position: fixed;
    width: 20px;
    height: 85%;
    top: 100px;
    bottom: 0px;
    left: -20%;
    //background-color: white;
    z-index: 3;
    transition: 0.4s;
    //overflow: hidden;
    //filter: blur(10px);
    border-radius: 0px 10px;
    //overflow-y: scroll;
    z-index: -1;
    opacity: 0.1 ;
    cursor: n-resize;
}
.timeLineSideBarClass:hover{
   // width: 50%;


}
.timeLineSideBarClass::-webkit-scrollbar{
    width: 0px;
    height: 0px;
}
.closeAPersonAvatarButton{
    position: absolute;
    left: -8px;
    width: 13px;
    height: 39px;
    text-align: center;
    font-size: 0.1em;
    background: #c4c4c4f0;
    z-index: 10;
    padding-top: 14px;
    top: 6px;
    border-radius: 1px;
}
.closeAPersonAvatarButton:hover{
    background: white;
}
.otherPersonTimeLineSideBarClass{
    position: fixed;
    width: 0px;
    height: 0%;
    max-height: 700px;
    top: 70px;
    left: 15px;
    transition: 0.4s;
    //overflow: scroll;
    border-radius: 0px 10px;
    z-index: 0;
    direction: rtl;
}
.otherPersonTimeLineSideBarClass::-webkit-scrollbar{
    width: 0px;
    height: 0px;
}
.otherPersonTimeLineSideBarClass .otherPersonTimeLineLiClass .otherPersonTimeLinePointClass{
    position: relative;
    background-color: black;
    border-radius: 50%;
    width: 6px;
    height: 6px;
    left: 8px;

    z-index: 0;
    display: flex;
}
.otherPersonTimeLineSideBarClass .otherPersonTimeLineLiClass .otherPersonTimeLinePointClass .otherPersonTimeLineLiOnGroupNameClass{
    position: relative;
    width: auto;
    text-align: center;
    height: 23px;
    background-color: rgba(255, 255, 255, 0.46);
    left: 9px;
    white-space: nowrap;
    border-radius: 1px 3px 3px 3px;
    padding-left: 3px;
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 2px;

    transition: 0.2s;
    max-width: 280px;
    transform-origin:left top;
    cursor: pointer;
    box-shadow: rgb(1 1 1 / 48%) 1px 1px 1px 1px;
    backdrop-filter: blur(7px);
    display: flex;
}
.groupNameClass{
    width: auto;
    height: 20px;
    white-space: nowrap;
    overflow: scroll;
    scrollbar-width:none;
    overflow-y: hidden;

}
.groupNameClass::-webkit-scrollbar{
    width: 0px;
    height: 0px;
}
.otherPersonTimeLineSideBarClass .otherPersonTimeLineLiClass .otherPersonTimeLinePointClass .otherPersonTimeLineLiOnGroupNameClass:hover{
     padding-left: 14px;
    box-shadow: none;
     opacity: 1;
}

.otherPersonTimeLineSideBarClass .otherPersonTimeLineLiClass .otherPersonTimeLineLiOnHoverClass{
    text-align: right;
    position: absolute;
    width: auto;
    height: 100%;
    display: none;
    top: 0px;
    position: absolute;
    left: 130px;
    white-space: nowrap;
}
.otherPersonTimeLineSideBarClass .otherPersonTimeLineLiClass .otherPersonTimeLineLiOnGroupNameClass .otherPersonTimeLineLiOnHoverClass{
    text-align: right;
    position: absolute;
    width: fit-content;
    height: 100%;
    display: none;
    top: 0px;
    position: absolute;

    white-space: nowrap;
}
.otherPersonTimeLineSideBarClass .otherPersonTimeLineLiClass .otherPersonTimeLineLiOnGroupNameClass:hover .otherPersonTimeLineLiOnHoverClass{

    display: contents;

}
.otherPersonTimeLineSideBarClass .otherPersonTimeLineLiClass{

    position: absolute;
    width: 100%;
    height: 28px;
    right: 0px;
    opacity: 1;
    z-index: 1;


    list-style-type: none;
    transition: 0.2s;
}


.timeLineSideBarHomeClass{
    position: absolute;
    width: 20%;
    height: 88%;

    bottom: 0px;
    left: -50%;
    background-color: white;
    z-index: 1000000000;
    transition: 0.4s;
    overflow: hidden;
    //filter: blur(10px);
    border-radius: 0px 10px;
    z-index: 0;
}

.addAllImagesSideBarClass{
    position: absolute;
    width: 0%;
    height: 100%;
    bottom: 0px;
    right: 0px;
    background-color: white;
    z-index: 1000000000;
    transition: 0.4s;
    overflow: auto;
}
.picSvgClass{
    padding-bottom: 6px;
}
.picSvgLogoClass{
    margin-left: auto;
    margin-right: auto;
    position: relative;
    display: block;
}
.picSvgClass .textTipClass{
    position: absolute;
    right: 40px;
    font-size: 12px;
    display: none;
    white-space:nowrap;
    top: 40px;
    background: white;
    padding: 2px;
    border-radius: 5px 0 0 5px;
}
.picSvgClass:hover .textTipClass{
    display: block;
}

.timeLineSideBarClass .timeLineLiClass:hover{

    //transition: 2s;
}
.timeLineSideBarClass .timeLineLiClass .timeLineClass{
    width: 4%;
    height: 20px;
    position: absolute;
  /*  left: 10px;
    border-left: 2px solid black;*/

}
.timeLineSideBarClass .timeLineLiClass .timeLinePointClass{
    position: absolute;
    border-radius: 50%;
    width: 6px;
    height: 6px;
    left: 14px;
    top: 0%;
    z-index: 100;
    display: flex;
}
.timeLineSideBarClass .timeLineLiClass .timeLinePointClass:hover{

    z-index: 10;
}
.timeLineSideBarClass .timeLineLiClass .timeLineHeadPointClass{
    position: absolute;
/*    background-color: black;
    border-radius: 50%;
    width: 7px;
    height: 7px;*/
    left: 8px;
    top: 10px;
    z-index: 0;
    display: flex;
    cursor:copy;
    box-shadow: rgb(1 1 1 / 24%) 1px 1px 1px 1px;

/*    animation-name: head-point-breath;
    animation-timing-function: ease-in-out;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;*/
}

@keyframes head-point-breath {
    0% {transform: scale(1);opacity: 1;}
    50% {transform: scale(1.2);opacity: 1;}
    100% {transform: scale(1);opacity: 1;}
}
.glowing-circle{
    fill: black;
    stroke: black;
    stroke-width: 2px;
    stroke-dasharray: 89 41;
    filter: url(#glow);
}
.homeButtonAnimation{
    transform-origin: center;
    animation-delay: 0s !important;
    animation-name: home-button-harder;
    animation-timing-function: linear;
    animation-duration: 10s;
    animation-iteration-count: infinite;

}
@keyframes home-button-harder {
    0% {transform: scale(1) rotate(0deg) ;opacity: 1;}
    50% {transform: scale(1) rotate(180deg);opacity: 1;}
    100% {transform: scale(1) rotate(360deg);opacity: 1;}
}

.discoveryButtonBlindingAnimation{
    position: absolute;
    top: 0px;
    left: 13px;
    top: 2px;
    opacity: 0;

    transform-origin: center;
    animation-delay: 0s !important;
    //animation-name: discoveryButton-harder;
    animation-timing-function: ease-out;
    animation-duration: 1s;
    animation-iteration-count: 1;
}

@keyframes discoveryButton-harder {
    0% {transform: scale(1.6) rotate(0deg) ;opacity: 0}

    10% {transform: scale(0.2) rotate(10deg) ;opacity: 0.5}
    90% {transform: scale(5) rotate(50deg) ;opacity: 1}
    /*50% {transform: scale(2) rotate(80deg);opacity: 1;}*/
    100% {transform: scale(5) rotate(60deg);opacity: 0}
}

.timeLineSideBarClass .timeLineLiClass .timeLineHeadPointClass:hover{

 /*   width: 9px;
    height: 9px;
    left: 7px ;
    top: 14px;*/
    z-index: 10;

    animation-delay: 0s !important;
    animation-name: head-point-breath-harder;
    animation-timing-function: ease-in-out;
    animation-duration: 0.4s;
    animation-iteration-count: 1;

}
@keyframes head-point-breath-harder {
    0% {transform: scale(1) rotate(0deg) ;opacity: 1;}
    30% {transform: scale(1.2) rotate(-10deg);opacity: 1;}
    70% {transform: scale(1.2) rotate(10deg);opacity: 1;}
    100% {transform: scale(1) rotate(0deg);opacity: 1;}
}


.timeLineSideBarClass .timeLineLiClass .timeLinePointClass .choosedPointClass{
    position: absolute;
    background-color: rgba(255, 255, 255, 0.46);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    left: -4px;
    top: -4px;
    animation-name: point-breath;
    animation-timing-function: ease-in-out;
    animation-duration: 0.6s;
    animation-iteration-count: 3;
    transform-origin: center;
}
.timeLineSideBarClass .timeLineLiClass .timeLinePointClass .timeLineLiOnGroupNameClass{
    position: relative;


    text-align: center;
    height: 24px;
    background-color: rgba(255, 255, 255, 0.46);
    left: 12px;
    top: 0px;
    white-space: nowrap;
    border-radius: 1px 3px 3px 3px;
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 1px;

    transition: 0.1s;
    transform-origin: left top;
    box-shadow: rgb(1 1 1 / 48%) 1px 1px 1px 1px;
    cursor: pointer;
    backdrop-filter: blur(7px);
}
.timeLineSideBarClass .timeLineLiClass .timeLinePointClass .changeGroupTimeLineClass{
    position: relative;
    //width: 70px;
    //overflow: scroll;
    text-align: center;
    height: 24px;
    background-color: rgba(255, 255, 255, 0.46);
    left: 12px;
    top: 0px;
    white-space: nowrap;
    border-radius: 1px 3px 3px 3px;
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 1px;
    opacity: 0.8;
    transition: 0.5s;

}
.timeLineSideBarClass .timeLineLiClass .timeLinePointClass .timeLineLiOnGroupShowLevelClass{

    text-align: center;
    height: 19px;
    left: 78px;
    top: 0px;
    white-space: nowrap;
    border-radius: 1px 3px 3px 3px;
    padding-top: 4px;
    padding-left: 10px;
    opacity: 1;
    font-size: small;

}
.timeLineSideBarClass .timeLineLiClass .timeLinePointClass:hover .timeLineLiOnGroupNameClass{
    //padding-left: 14px;
    opacity: 1;
    z-index: 100000000000;
    box-shadow: none;
}


.timeLineSideBarClass .timeLineLiClass{
    position: absolute;
    width: 100%;
    height: 30px;
    right: 0px;

    z-index: -1;

    user-select: none;
    list-style-type: none;
    transition: 0.3s;
    cursor: pointer;
}
.timeLineSideBarClass .timeLineLiClass .timeLineLiOnClass{
    width: auto;
    height: 100%;
   // background-color: rgba(255, 255, 255, 0.83);
    position: absolute;
    right: 0px;
    top: 0px;
    text-align: left;
    z-index: 10000000000;
    position: absolute;
    //filter: blur(2px);

}
.timeLineSideBarClass .timeLineLiClass:hover .timeLineLiOnClass{

    background-color: rgba(1, 2, 2, 0.32);
   // width: 85%;

}
.timeLineSideBarClass .timeLineLiClass:hover .timeLineLiOnHoverClass{


   //z-index: 100000000000;
    //background-color: rgba(215, 215, 215, 0.45);
    padding-left:43px;
    top: 5px !important;
    display: block;

}
.timeLineSideBarClass .timeLineLiClass:hover .timeLineImageGroupDeleteButtonClass{


}
.timeLineSideBarClass .timeLineLiClass .timeLineLiOnHoverClass{
    text-align: right;

    width: auto;
    height: 100%;
    display: none;

    padding-left: 30px;
    padding-top: 5px;
    white-space: nowrap;

}

/*.timeLineImageGroupDeleteButtonClass{
    text-align: right;
    width: 80px;
    height: 25px;
    padding-left: 10px;
    white-space: nowrap;
    background-color: red;
    color: white;
    top: -20px;
    display: block;
    position: relative;
    left: 25px;
    padding-right: 10px;
    border-radius: 5px;
    box-shadow: rgb(1 1 1 / 27%) 1px 1px 1px 1px;
    transform: rotate(-5deg);
}*/
.timeLineImageGroupDeleteButtonClass{
    display: block;
    position: relative;
    left: 17px;
    width: 20px;
    height: 20px;
    top: 5px;
    cursor: pointer;

}

/*.timeLineLiClass:hover .timeLineLiOnHoverClass{
// transition-delay: 0.7s;
    //transition: 0.3s;
    background-color: #afafaf;


}*/
.timeLineLiClass:hover .timeLineLiOnClass:hover{
   // transition-delay: 0.8s;
}


.addFriendsButtonClass{
    position: absolute;
    bottom: 20px;
    right: 10px;
   // width: 10%;
    height: 25px;
}
.replyButtonInfoClass{
    font-size: xx-small;
}
.societyGroupLiOnClass{
    width: 100%;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.97);
    position: absolute;
    left: 0px;
    top: 0px;

    z-index: 10000000000;
}
.reply-countClass{
    position: absolute;
    font-weight: 700;
    line-height: 10px;
    width: fit-content;
    text-align: center;
    font-size: 12px;
    color: #ffffff;
    background-color: #0080ff;
    border-radius: 3px;
    padding: 3px;
    top: 32px;
    right: 6px;
    cursor: pointer;
    min-width: 30px;
}
.societyGroupLiOnClass .nav-tag{
    position: relative;
    font-weight: 700;
    line-height: 10px;
    width: fit-content;
    text-align: center;
    font-size: 12px;
    color: #ffffff;
    background-color: #0080ff;
// background-color: #d91616;
    border-radius: 3px;
    top: -15px;
    left: -15px;
    padding: 3px;
    padding-left: 2px;

}


.logoPublicChat{
    position: absolute;
    width: 50px;
    height: 50px;
    text-align: center;
    color: #ffffff;
    background: white;


    width: 20%;
    left: 0%;
    padding: 3px;
    padding-left: 2px;

}
.societyGroupLiOnHoverClass{
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    display: none;
}
.replyContainerClass{
    display: grid;
    position: relative;
    width: 100%;
    height: auto;
}
.addTheReplayClass{
    width: 0%;
    height: 100%;
    background: none;

    position: relative;
    border: none;
    border-radius: 0px;
    width: 100%;

    padding-top: 3px;
}

.addReplayClass{
    width: 0%;
    height: 100%;
    background: none;
    //background-color: #afafaf;
   // display: none;
    position: absolute;
    border: none;
    border-radius: 0px;
    width: 35px;
    transition: 0.4s;
    background: rgb(255 255 255 / 71%);
    left: -35px;
}
.addReplayClass:hover .commonButtonClass{
    animation-name: add-comment;
    animation-timing-function: ease-in-out;
    animation-duration: 0.7s;
    animation-iteration-count: 1;
}
.addTheReplayClass:hover .commonButtonClass{
    animation-name: add-comment;
    animation-timing-function: ease-in-out;
    animation-duration: 0.7s;
    animation-iteration-count: 1;
}
.nextPageClass:hover .commonButtonClass{
    animation-name: add-comment;
    animation-timing-function: ease-in-out;
    animation-duration: 0.7s;
    animation-iteration-count: 1;
}

@keyframes run-right-top {
    0% {
     //   top: -8%;
    }

    100% {
        top: 100%;
    }
}

@keyframes run-right-right {
    0% {
        //left: 15%;
       // transform: scale(0.7);
    }

    100% {
        left:90%;
        //transform: scale(0.45);
    }
}

.messageShowClass{
    position: absolute;
    width: 20%;
    height: 100%;
    background-color: white;
    left: 10%;

}

.changeGroupLevelClass{
    z-index: 100000000;
    position: absolute;
    width: 60px;
    height: 30px;
    background: #b8c7ab;
    border-radius: 0 0 1px 5px;
    border: 1px;
    transition: 0.2s;
    box-shadow: 1px 1px 1px 1px rgba(1, 1, 1, 0.41);
    -webkit-appearance: none; /* for Chrome, Safari */
    -moz-appearance: none;    /* for Firefox */
    -ms-appearance: none;     /* for IE10+ */
    appearance: none;         /* for standard browsers */
}
.changeGroupLevelClass::-internal-arrow {
    display: none;
}
.changeGroupLevelClass:hover{
    transition: 0s;
    box-shadow: none;
}
.buttonAnimationClass{

}
.rightButtonContainerClass{
    position: relative;
    display: grid;
    width: 40px;
    height: auto;
    right: 0px;
    z-index: 20000;
    min-height: 45px;
}
.nextPageClass{
    height: 37px;
    width: 96%;
    z-index: 1000000;
    border: none;
    border-radius:3px ;
    transition: 0.4s;
    border-radius: 4px;
    background: none;
    overflow: hidden;
    display: block;
}
.buttonContainerClass{
    width: 100%;
    height: 40px;
    position: relative;

    z-index: 2;
    transition: 0.5s;
}
.searchBarContainer .mySearchClass{
    position: absolute;
    top: 2px;
    font-size: 12px;
    left: 48px;
    z-index: 1000000;
    display: none;
    white-space:nowrap;
    padding: 3px;
    border-radius: 2px;
}
.searchBarContainer:hover .mySearchClass{
    display: block;
}

.buttonContainerClass .myRecordTextClass{
    position: absolute;
    top: 6px;
    font-size: 12px;
    left: 50px;
    z-index: 1000000;
    display: none;
    white-space:nowrap;
    padding: 3px;
    border-radius: 2px;
}
.buttonContainerClass:hover .myRecordTextClass{
    display: block;
}
.searBarClass{
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: white;
    border: none;
    border-radius: 0px 0px 0px 0px;
    font-family: inherit;
    font-size: inherit;
    height: 30px;
    outline: 0;
    padding-inline-start: 12px;
    position: relative;
    width: 230px;
    display: none;

}
.searchReturnClass{

    background-color: rgba(255, 255, 255, 0.62);
    border: none;
    border-radius: 0px 0 5px 0px;
    font-family: inherit;
    font-size: inherit;
    height: 30px;
    outline: 0;
    padding-inline-start: 12px;
    position: relative;
    width: 40px;
    padding: 3px;
    display: none;


}
.searchBarContainer{
    display: flex;
    position: relative;
    width: 100px;
    left: 3px;
    transition: 0.5s;

    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    border: none;
    border-radius: 0px 0 0px 5px;
    font-family: inherit;
    font-size: inherit;
    padding-left: 5px;
    height: 35px;
    padding-top: 2px;
}
.searchToolContainer{
    display: flex;
    position: relative;
    width: 0px;
    left: 3px;
    transition: 0.5s;

    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    border: none;
    border-radius: 0px 0 0px 5px;
    font-family: inherit;
    font-size: inherit;
    padding-left: 5px;
    height: 35px;
    padding-top: 2px;
}
.searchToolLogoClass{
    width: 40px;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
   // background-color: white;
    border: none;
    border-radius: 0px 0 0px 5px;
    font-family: inherit;
    font-size: inherit;
    padding-left: 4px;
    height: 30px;
    background: white;
    padding-top: 0px;
}

.searchLogoClass{
    width: 40px;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;

    border: none;
    border-radius: 0px 0 0px 5px;
    font-family: inherit;
    font-size: inherit;
    padding-left: 4px;
    height: 30px;

    padding-top: 0px;
}
.topButtonContainerClass{
    position: fixed;
    /* display: flex; */
    width: fit-content;
    height: fit-content;
    right: 70px;
    opacity:1;
    transition: 0.2s;
    z-index: 2;

}
.buttonsTopClass{
    height: fit-content;
    width: fit-content;
    /* left: 70%; */
    padding: 0px;
    position: relative;
    transition: 0.3s;
    /* top: -1px; */
    display: flex;
}

.allButtonClass{
    height: 30px;
    width: 60px;
    float: left;
    margin-right: 10px;
    border-radius: 0 0 2px 10px;
    border: 1px
}
.allButtonClass:hover{
    transition: 0.2s;
    box-shadow: none;
}
.nav-tag-1 {
// display: inline-block;
    position: relative;
    font-weight: 700;

    /* height: 20px;
     width: 120px;*/
    line-height: 29px;
    text-align: center;

    font-size: 12px;
    color: #fff;
    background-color: #d90404;
//background-color: #D9D919;
    border-radius: 3px;
    top: -4px;
    left: 47px;
    z-index: 1000000;
}
.nextPageClass:hover{
    transition: 0.2s;
    box-shadow: none;
}

.saveLocationClass{
    z-index: 100000000;
    position: absolute;
    top: 0px;
    width: 50px;
    height: 30px;
    background: #fce68c;
    border-radius: 0 0 1px 1px;
    margin-right: 2px;
    border: none;
    transition: 0.2s;
    box-shadow: 1px 1px 1px 1px rgba(1, 1, 1, 0.41);
}
.saveLocationClass:hover{
    box-shadow: none;
}
.guideClickClass{
    position: fixed;
    width: fit-content;
    height: fit-content;
    margin: auto;
    left: 45%;
    top: 25%;
    border-radius:5px ;
    /*background: rgba(152, 251, 152, 0.37);*/
    display: none;
}

.guideUploadTextClass{
    margin: auto;
    margin-right: auto;
    position: relative;
    font-size: xx-large;
    width: fit-content;
    height: fit-content;
    background: lightgreen;
    border-radius:5px ;
    padding: 10px;
    box-shadow: 0 0 14px #3D3D3D;
}
.guideTextClass{
    margin: auto;
    margin-right: auto;
    position: relative;
    font-size: xx-large;
    width: fit-content;
    height: fit-content;
    background: #FFC107;
    border-radius:5px ;
    padding: 10px;
    box-shadow: 0 0 14px #3D3D3D;
}
.addMessagePicOptionsClass {
    z-index: 100000000;
    float: left;

    top: 0px;
    width: 70px;
    height: 30px;
    background: rgba(23, 21, 21, 0.32);
    border: none;
    border-radius: 0 0 5px 1px;
    box-shadow: 1px 1px 1px 1px rgba(1, 1, 1, 0.41);
    margin-right: 2px;
    transition: 0.2s
}
.addMessagePicOptionsClass:hover{
    box-shadow: none;
}
.body_total {
/ / border: 1 px solid #666;

    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
// background: rgba(199, 207, 203, 0.58);
    margin-bottom: 0px;
    SCROLL-MARGIN-TOP: 0;
    position: absolute;
    bottom: 0;
    z-index: 10;
}


.body_total::-webkit-scrollbar {
    display: none;
}

.top_info {
    width: 98%;

    height: 20px;
    /*  background: #fff;*/
/ / margin: 2 px auto 0;
    overflow: auto;


}

.top_show {
    width: 98%;
    height: 90%;
    border: 1px solid #666;
/ / border: 1 px solid #666;
    background: #ffffff;
    filter: alpha(Opacity=50);
    opacity: 0.0;
    border-radius: 14px;
    margin: 1% auto 0;
    overflow: auto;
    margin-bottom: 0px;
}

.talk_con {
    width: 100%;
    height: 100%;
    margin: 0px auto 0;
    filter: alpha(Opacity=50);
    opacity: 0.99;
/ / overflow-x: hidden;
/ / border: 1 px solid #666;
/ / background: rgba(199, 207, 203, 0.58);
/ / border-radius: 10 px;
/ / background-image: url(../img/xx.png);
/ / background-image: url(http://o24358939i.qicp.vip:52239/knockknock/c1.jpg);
}

.talk_info {
    width: 98%;
    position: sticky;
    height: 0%;
    /*  background: #fff;*/
/ / margin: 2 px auto 0;
    overflow: auto;
    margin-bottom: 0px;

}

.talk_info span {
    height: 75%;
    text-align: center;
    margin: 0px auto;
    color: #464af5;
}


.empty_show {
    width: 100%;
    height: 2%;
}

.empty_show111 {
    width: 100%;
    height: 10px;
}

.talk_show {
    width: 95%;
    height: 94%;
//   border: 1px solid #666;
/ / border: 1 px solid #666;
//      background: #ffffff;
    filter: alpha(Opacity=50);
    opacity: 0.95;
    border-radius: 12px;
/ / margin-top: 1 %;
    margin-left: 2%;
    margin-right: 2%;
    margin-bottom: 0px;
    overflow: auto;
/ / position: relative;
/ / bottom: 0
    /*   background-image: url(img/xx.png);*/
}

.talk_show::-webkit-scrollbar {
    display: none;
}

.empty_show_input {
    width: 100%;
    height: 1%;
}

.talk_input {
    width: 96%;
    height: 38px;
/ / margin: 1 % auto 0;
    margin-left: 2%;
    margin-right: 2%;
// position: relative;
    position: absolute;
    bottom: 0;
}

.talk_option {
    width: 98%;
    height: 5%;
    margin: 1% auto 0;
}

.form_option {
    width: 98%;
    height: 9%;
    margin: 1% auto 0;
}

.whotalk {
    width: 3%;
    height: 70%;
    float: left;
/ / filter: alpha(Opacity = 50);
    opacity: 50%;
    border-radius: 2px;
    background: #00000000;
    border: none;
    outline: none;
    margin-left: 1%;
}
.backDivClass{
    position: absolute;
    top: 0px;
    left: 0px;
    border-radius: 3px;
    background: #ffffffa6;
    transform: rotateY(180deg);
    backface-visibility: visible;
    display: none;
    padding: 10px;
    box-shadow: rgba(61, 61, 61, 0.66) 0px 0px 14px;
    backdrop-filter: blur(3px);
}
.backReplayContainerClass{
    width: 100%;
    height: calc(100% - 50px);
    overflow: scroll;
}
.backReplayContainerClass::-webkit-scrollbar {
    display: none;
}
.replayTargetClass{
    border: none;
    width: 100%;
    height: 20px;
    padding: 0px;
    /* float: left; */
    /* outline: none; */
    margin-bottom: 0px;
    border-radius: 5px;
    -webkit-appearance: none;
    bottom: 0px;

    left: 0px;
    display: flex;
    width: 100%;
}
.replayTargetCloseClass{
    right: 10px;
    position: absolute;
    width: 17px;
    height: 17px;
    background: #ff00004a;

    border-radius: 36%;
    padding-left: 4px;
    font-size: small;
}
.replayTargetCloseClass:hover{
    background: red;
}
.replayContainerClass{
    border: 1px solid #666;
    width: 100%;
    height: 35px;
    padding: 0px;
    /* float: left; */
    /* outline: none; */
    margin-bottom: 0px;
    border-radius: 5px;
    -webkit-appearance: none;
    bottom: 0px;

    left: 0px;
    display: flex;
}
.replyImageInputClass{

    width: calc(100% - 34px) !important;
    height: fit-content !important;
    margin: 3px !important;
    /* float: left; */
    /* outline: none; */
    margin-bottom: 0px !important;
    -webkit-appearance: none !important;
    /* position: absolute; */
    left: 0px !important;
    border: none !important;
    outline: none !important;
    top: 0px !important;
    background: white !important;
    max-width: calc(100% - 34px) !important;
}
.replayImageButtonContainerClass{
    width: 34px;

}
.replayImageButtonClass{
    width: fit-content;
    padding: 5px;
    cursor: pointer;
}
.imgBackSvgHoverClass{}
.imgBackSvgHoverClass:hover{
    stroke: red;
}
.talk_word {
    border: 1px solid #666;
    width: 60%;
    height: 70%;
    padding: 0px;
    float: left;

    outline: none;

    margin-bottom: 0px;

    border-radius: 5px;

    -webkit-appearance: none;
}

.talk_sub {
    width: 6%;
    height: 65%;
    float: left;
    margin-left: 1%;

    background-color: #60de65;
    border: none;
    border-radius: 4px;
    -webkit-appearance: none;
}

.talk_pic_choose {
    width: 5%;
    height: 67%;
    float: left;
    margin-left: 1%;

    background-color: #60de65;
    border: none;
    border-radius: 5px;
    -webkit-appearance: none;
}

.rename_input {

    width: 30%;
    height: 67%;
    padding: 1px;
    float: left;
// border: black;
    margin-left: 1%;
    outline: none;
    text-indent: 1%;
    margin-bottom: 0px;
}

.wordsdown {
/ / position: absolute;
    width: 98%;
    bottom: 0;
}

.wordsdowntoroll {
/ / position: relative;
/ / position: absolute;
    width: 100%;
}

.wordsempty {
/ / al position: absolute;
    width: 98%;
    height: 20px;
}

.atalk {
    margin: 15px;
    text-align:left;
}

.atalk span {
    display: inline-block;
/ / background: #0181cc;
/ / background: #FFF68F;
    background: #EEEED1;
    border-radius: 10px;
    color: #000000;
    padding: 5px 10px;

/ / position: absolute;
/ / bottom: 0
}

.btalk {
    margin: 10px;
    text-align: right;
}

.btalk span {
    display: inline-block;
    background: #464af599;
    border-radius: 10px;
    color: #ffffff;
    padding: 5px 10px;
/ / position: absolute;
/ / bottom: 0
}

.avatarPreview {
    /*   position: initial;*/
    padding: 5px 10px;
    float: left;
}

.btn {
    width: 6%;
    height: 65%;
    border-radius: 5px;
    float: left;
    margin-left: 1%;
    font-size: 12px;
    background-color: #60de65;
    border: none;
    border-radius: 5px;
    -webkit-appearance: none;

    color: #fff;
    background: #538de3;
    position: relative;
    text-align: center;
    cursor: pointer;
}

.btn input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer;
}

.wgr {
/ / position: relative;
/ / display: inline-block;
/ / overflow: hidden;
    width: 1px;
}

.fileinput-button input {
    position: absolute;
    left: 0px;
    top: 0px;
    opacity: 0;
    -ms-filter: 'alpha(opacity=0)';
}


body, ul, li {
    padding: 0;
    margin: 0;
    border: 0;
    list-style-type: none;
}

.chooseGroupBoxClass{
    position: fixed;
    display: none;
    width: 80%;
    height: 450px;
    left: 50%;
    top: 45%;
    z-index: 10000;
    transform: translate(-50%, -50%);
    background-color: #fff;
}
.loginBoxContainerClass{
    position: absolute;

    width: 100%;
    height: 100%;
    z-index: -100000;
    opacity: 0;
    backdrop-filter: blur(15px);
}
.logoBackClass{
    position: fixed;
    width: 400px;
    height: 400px;
    left: 21%;
    top: 10%;
}
.outboxContainer1{
    left: 21%;
    top: 10%;
    width: 210px;
    height: 200px;
    position: fixed;
}
.outboxContainer2{
     width: 190px;
     height: 180px;
     right: 23%;
     top: 20%;
    position: fixed;
}
.outboxContainer3{
    width: 225px;
    height: 210px;
    left: 32%;
    top: 60%;
    position: fixed;
}
.outer1 {
    position: relative;
    width: 100%;
    height: 100%;
    //background-color: rgba(231, 160, 177, 0.95) !important;
    background-color: rgba(231, 160, 177, 0.95) !important;
}

@keyframes shake-slow-back {
    0% {
        transform: translate(0px, 0px) rotate(0deg);
        scale: 0.9;

    }
    2% {
        transform: translate(-3px, -4px) rotate(2.5deg);
        scale: 0.9;
    }
    4% {
        transform: translate(3px, -4px) rotate(-0.5deg)
    }
    6% {
        transform: translate(2px, -4px) rotate(2.5deg);
        scale: 0.9;
    }
    8% {
        transform: translate(0px, 3px) rotate(0.5deg);
        scale: 0.9;
    }
    10% {
        transform: translate(3px, 1px) rotate(0.5deg);
        scale: 0.9;
    }
    12% {
        transform: translate(4px, 0px) rotate(0.5deg);
        scale: 0.9;
    }
    14% {
        transform: translate(4px, 4px) rotate(-3.5deg);
        scale: 0.9;
    }
    16% {
        transform: translate(-4px, 0px) rotate(-0.5deg);
        scale: 0.9;
    }
    18% {
        transform: translate(1px, 3px) rotate(-1.5deg);
        scale: 0.9;
    }
    20% {
        transform: translate(-4px, -1px) rotate(-3.5deg);
        scale: 0.9;
    }
    22% {
        transform: translate(5px, 4px) rotate(2.5deg);
        scale: 0.9;
    }
    24% {
        transform: translate(-4px, -5px) rotate(-2.5deg);
        scale: 0.9;
    }
    26% {
        transform: translate(0px, 3px) rotate(-1.5deg);
        scale: 0.9;
    }
    28% {
        transform: translate(-5px, 7px) rotate(2.5deg);
        scale: 0.9;
    }
    30% {
        transform: translate(4px, -7px) rotate(-1.5deg);
        scale: 0.9;
    }
    32% {
        transform: translate(0px, -8px) rotate(-0.5deg);
        scale: 0.9;
    }
    34% {
        transform: translate(4px, 7px) rotate(-0.5deg);
        scale: 0.9;
    }
    36% {
        transform: translate(-3px, 6px) rotate(0.5deg);
        scale: 0.9;
    }
    38% {
        transform: translate(4px, -10px) rotate(-0.5deg);
        scale: 0.9;
    }
    40% {
        transform: translate(4px, 0px) rotate(0.5deg);
        scale: 0.9;
    }
    42% {
        transform: translate(0px, -2px) rotate(1.5deg);
        scale: 0.9;
    }
    44% {
        transform: translate(5px, -2px) rotate(-0.5deg);
        scale: 0.9;
    }
    46% {
        transform: translate(1px, -10px) rotate(-2.5deg);
        scale: 0.9;
    }
    48% {
        transform: translate(4px, -1px) rotate(2.5deg);
        scale: 0.9;
    }
    50% {
        transform: translate(-5px, -4px) rotate(2.5deg);
        scale: 0.9;
    }
    52% {
        transform: translate(3px, 2px) rotate(-3.5deg);
        scale: 0.9;
    }
    54% {
        transform: translate(1px, -6px) rotate(-0.5deg);
        scale: 0.9;
    }
    56% {
        transform: translate(-3px, -4px) rotate(-0.5deg);
        scale: 0.9;
    }
    58% {
        transform: translate(-5px, -5px) rotate(2.5deg);
        scale: 0.9;
    }
    60% {
        transform: translate(8px, 7px) rotate(-3.5deg);
        scale: 0.9;
    }
    62% {
        transform: translate(5px, -6px) rotate(-3.5deg)
    }
    64% {
        transform: translate(-5px, 5px) rotate(-0.5deg);
        scale: 0.9;
    }
    66% {
        transform: translate(1px, -3px) rotate(0.5deg);
        scale: 0.9;
    }
    68% {
        transform: translate(-6px, 5px) rotate(1.5deg)
    }
    70% {
        transform: translate(-5px, 4px) rotate(-1.5deg);
        scale: 0.9;
    }
    72% {
        transform: translate(-5px, -2px) rotate(2.5deg);
        scale: 0.9;
    }
    74% {
        transform: translate(0px, -4px) rotate(1.5deg);
        scale: 0.9;
    }
    76% {
        transform: translate(-2px, -5px) rotate(0.5deg);
        scale: 0.9;
    }
    78% {
        transform: translate(-2px, 4px) rotate(-3.5deg);
        scale: 0.9;
    }
    80% {
        transform: translate(7px, 4px) rotate(-3.5deg);
        scale: 0.9;
    }
    82% {
        transform: translate(-1px, -4px) rotate(-1.5deg);
        scale: 0.9;
    }
    84% {
        transform: translate(3px, -6px) rotate(0.5deg);
        scale: 0.9;
    }
    86% {
        transform: translate(7px, -8px) rotate(-1.5deg);
        scale: 0.9;
    }
    88% {
        transform: translate(4px, -9px) rotate(1.5deg);
        scale: 0.9;
    }
    90% {
        transform: translate(1px, -6px) rotate(2.5deg);
        scale: 0.9;
    }
    92% {
        transform: translate(-4px, -1px) rotate(-1.5deg);
        scale: 0.9;
    }
    94% {
        transform: translate(-4px, -1px) rotate(0.5deg);
        scale: 0.9;
    }
    96% {
        transform: translate(-6px, 4px) rotate(1.5deg);
        scale: 0.9;

    }
    98% {
        transform: translate(7px, 4px) rotate(-0.5deg);
        scale: 0.9;
    }
}
@keyframes zhuanquan-back {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
@keyframes bord-slow-back {
    0% {
        transform: translate(0px, 0px) rotate(0deg);
        scale: 1;
        opacity:  0.4;;

    }
    100% {
        transform: translate(0px, 0px) rotate(0deg);
        scale: 1.2;
        opacity: 0;
    }
}
.outboxBackAnimation1{
    background: #e0a800;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    z-index: -1;
    position: absolute;
    top: 0px;
    animation-name:shake-slow-back;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-iteration-count: 9999;
    animation-iteration-count: 9999;
}
.outboxBackAnimation1{
    background: #e0a800;
    width: 110%;
    height: 110%;
    border-radius: 50%;
    z-index: -1;
    position: absolute;
    top: -5px;
    left: -5px;
    scale: 0.9;
    animation-name:shake-slow-back;
    -webkit-animation-duration: 17s;
    animation-duration: 17s;
    -webkit-animation-iteration-count: 9999;
    animation-iteration-count: 9999;
    opacity: 0.4;
}
.outboxBackAnimation2{
    background: red;
    width: 110%;
    height: 110%;
    border-radius: 50%;
    z-index: -1;
    position: absolute;
    top: -5px;
    left: -5px;
    scale: 0.9;
    animation-name:shake-slow-back;
    -webkit-animation-duration: 15s;
    animation-duration: 15s;
    -webkit-animation-iteration-count: 9999;
    animation-iteration-count: 9999;
    opacity: 0.4;
}
.outboxBackAnimation3{
    background: #28acfe;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    z-index: -1;
    position: absolute;
    top: -2px;
    left: -2px;
    scale: 0.9;
    animation-name:shake-slow;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    -webkit-animation-iteration-count: 9999;
    animation-iteration-count: 9999;
    opacity: 0.4;
}
.outboxBackAnimation4{
    background: rgb(231, 160, 177);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    z-index: -1;
    position: absolute;
    top: -2px;
    left: -2px;
    box-shadow: 0 0 14px rgba(61, 61, 61, 0.66);
    animation-name:shake-slow;
    -webkit-animation-duration: 50s;
    animation-duration: 50s;
    -webkit-animation-iteration-count: 9999;
    animation-iteration-count: 9999;
    opacity: 0.4;
}


.outboxBackAnimationtwo2{
    background: red;
    width: 110%;
    height: 110%;
    border-radius: 50%;
    z-index: -1;
    position: absolute;
    top: -5px;
    left: -5px;
    scale: 0.9;
    animation-name:bord-slow-back;
    -webkit-animation-duration:2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: 9999;
    animation-iteration-count: 9999;
}
.outboxBackAnimationtwo1{
    background: #e0a800;
    width: 110%;
    height: 110%;
    border-radius: 50%;
    z-index: -1;
    position: absolute;
    top: -5px;
    left: -5px;
    scale: 0.9;
    animation-name:bord-slow-back;
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-iteration-count: 9999;
    animation-iteration-count: 9999;

}
.outboxBackAnimationtwo3{
    background: #28acfe;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    z-index: -1;
    position: absolute;
    top: -2px;
    left: -2px;
    scale: 0.9;
    animation-name:bord-slow-back;
    -webkit-animation-duration: 8s;
    animation-duration:8s;
    -webkit-animation-iteration-count: 9999;
    animation-iteration-count: 9999;
}
.outboxBackAnimationtwo4{
    background: rgb(231, 160, 177);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    z-index: -1;
    position: absolute;
    top: -2px;
    left: -2px;
    box-shadow: 0 0 14px rgba(61, 61, 61, 0.66);
    animation-name:bord-slow-back;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-iteration-count: 9999;
    animation-iteration-count: 9999;
}
.outer2 {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: rgb(232, 216, 130);
    box-shadow: 0 0 14px rgba(61, 61, 61, 0.66);
}
.outer3 {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: rgba(167, 221, 253, 0.11);

    box-shadow: 0 0 14px rgba(61, 61, 61, 0.66);
}

.outbox{




    padding: 5px;

    border-radius:50%;

   /* box-shadow: 0 0 14px rgba(61, 61, 61, 0.66);*/

}

.outbox::before{

    content:"";

    float:left;

    width:50%;

    height:100%;

    background:none;

    -webkit-clip-path: polygon(99% 0%,92% 0%,86% 0%,80% 0%,73% 1%,67% 2%,60% 3%,54% 4%,48% 6%,44% 8%,38% 10%,32% 12%,28% 14%,23% 17%,19% 20%,16% 23%,11% 26%,8% 29%,5% 33%,2% 39%,0% 46%,0% 55%,3% 61%,7% 68%,12% 73%,18% 78%,24% 82%,30% 85%,39% 88%,46% 91%,52% 93%,59% 94%,68% 96%,75% 97%,81% 98%,87% 99%,94% 99%,99% 99%,0 100%,0 0,100% 0);

    clip-path: polygon(99% 0%,92% 0%,86% 0%,80% 0%,73% 1%,67% 2%,60% 3%,54% 4%,48% 6%,44% 8%,38% 10%,32% 12%,28% 14%,23% 17%,19% 20%,16% 23%,11% 26%,8% 29%,5% 33%,2% 39%,0% 46%,0% 55%,3% 61%,7% 68%,12% 73%,18% 78%,24% 82%,30% 85%,39% 88%,46% 91%,52% 93%,59% 94%,68% 96%,75% 97%,81% 98%,87% 99%,94% 99%,99% 99%,0 100%,0 0,100% 0);

    shape-outside: polygon(99% 0%,92% 0%,86% 0%,80% 0%,73% 1%,67% 2%,60% 3%,54% 4%,48% 6%,44% 8%,38% 10%,32% 12%,28% 14%,23% 17%,19% 20%,16% 23%,11% 26%,8% 29%,5% 33%,2% 39%,0% 46%,0% 55%,3% 61%,7% 68%,12% 73%,18% 78%,24% 82%,30% 85%,39% 88%,46% 91%,52% 93%,59% 94%,68% 96%,75% 97%,81% 98%,87% 99%,94% 99%,99% 99%,0 100%,0 0,100% 0);

}

.FR{

    content:"";

    float:right;

    width:50%;

    height:100%;

    background:none;

    clip-path: polygon(0% 0%,3% 0%,8% 0%,12% 0%,16% 0%,20% 1%,26% 1%,32% 2%,36% 3%,41% 4%,45% 5%,50% 7%,54% 8%,59% 10%,63% 11%,68% 13%,73% 16%,77% 18%,81% 21%,85% 24%,88% 27%,92% 31%,95% 35%,96% 39%,98% 43%,99% 48%,99% 52%,98% 57%,96% 62%,93% 66%,90% 70%,86% 74%,80% 79%,73% 83%,67% 86%,60% 89%,53% 91%,44% 94%,35% 96%,29% 97%,22% 98%,16% 99%,8% 99%,2% 99%,0% 98%,0% 98%,0% 98%,0% 98%,0% 100%,100% 100%,100% 0,0 0);

    -webkit-clip-path: polygon(0% 0%,3% 0%,8% 0%,12% 0%,16% 0%,20% 1%,26% 1%,32% 2%,36% 3%,41% 4%,45% 5%,50% 7%,54% 8%,59% 10%,63% 11%,68% 13%,73% 16%,77% 18%,81% 21%,85% 24%,88% 27%,92% 31%,95% 35%,96% 39%,98% 43%,99% 48%,99% 52%,98% 57%,96% 62%,93% 66%,90% 70%,86% 74%,80% 79%,73% 83%,67% 86%,60% 89%,53% 91%,44% 94%,35% 96%,29% 97%,22% 98%,16% 99%,8% 99%,2% 99%,0% 98%,0% 98%,0% 98%,0% 98%,0% 100%,100% 100%,100% 0,0 0);

    shape-outside:polygon(0% 0%,3% 0%,8% 0%,12% 0%,16% 0%,20% 1%,26% 1%,32% 2%,36% 3%,41% 4%,45% 5%,50% 7%,54% 8%,59% 10%,63% 11%,68% 13%,73% 16%,77% 18%,81% 21%,85% 24%,88% 27%,92% 31%,95% 35%,96% 39%,98% 43%,99% 48%,99% 52%,98% 57%,96% 62%,93% 66%,90% 70%,86% 74%,80% 79%,73% 83%,67% 86%,60% 89%,53% 91%,44% 94%,35% 96%,29% 97%,22% 98%,16% 99%,8% 99%,2% 99%,0% 98%,0% 98%,0% 98%,0% 98%,0% 100%,100% 100%,100% 0,0 0);

}

.FR p{

    text-align:center;

    line-height:1.7em;

}

.webInfoClass{

    position: fixed;
    justify-content: center;
    width: 300px;
    height: 300px;
    min-height: 300px;
    left: 21%;
    top: 30%;
    border-radius: 50%;
    z-index: 10000;
    transform: translate(-50%, -50%);
    background-color: rgb(40, 115, 254);
    overflow: hidden;
    box-shadow: 0 0 14px rgba(61, 61, 61, 0.66);
}
.webContentClass{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
}
.webContentClass p {
    margin: 0;
    padding: 0;
    font-size: 16px;
    display: inline-block;
    shape-outside: circle(50%);
}
.webInfoClass2{

    position: fixed;
    justify-content: center;
    width: 300px;
    height: 300px;
    min-height: 300px;
    right: 9%;
    top: 25%;
    border-radius: 50%;
    z-index: 10000;
    transform: translate(-50%, -50%);
    background-color: rgb(40, 115, 254);
    overflow: hidden;
    box-shadow: 0 0 14px rgba(61, 61, 61, 0.66);
}
.webInfoClass3{

    position: fixed;
    justify-content: center;
    width: 300px;
    height: 300px;
    min-height: 300px;
    left: 32%;
    top: 70%;
    border-radius: 50%;
    z-index: 10000;
    transform: translate(-50%, -50%);
    background-color: rgb(40, 115, 254);
    overflow: hidden;
    box-shadow: 0 0 14px rgba(61, 61, 61, 0.66);
}
.loginBoxClass{
    position: fixed;
    justify-content: center;
    width: 25%;
    height: 30%;
    min-height: 300px;
    left: 50%;
    top: 40%;
    border-radius: 10px;
    z-index: 10000;
    transform: translate(-50%, -50%);
    background-color: #afafaf;
    overflow: hidden;
    box-shadow: 0 0 14px rgba(61, 61, 61, 0.66);
}
.loginBoxClass::before{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.5); /* 这里的颜色决定了透明度 */
    opacity: 0.9; /* 设置透明度为50% */
    background-image:url('https://rainynight100-common.oss-cn-hangzhou.aliyuncs.com/pg.jpeg'); ;
    background-size:cover;
    filter:blur(2.5px);
    box-shadow: 0 0 14px rgba(61, 61, 61, 0.66);

    animation-delay: 0s !important;
    animation-name: backImageAnimation;
    animation-timing-function: ease-in-out;
    animation-duration: 40s;
    animation-iteration-count: infinite;
}
@keyframes backImageAnimation {
    0% {transform: scale(1.1) rotate(0deg) ;opacity: 1;}
    25% {transform: scale(1.2) rotate(6deg);opacity: 1;}
    50% {transform: scale(1.3) rotate(0deg);opacity: 1;}
    75% {transform: scale(1.2) rotate(-6deg);opacity: 1;}
    100% {transform: scale(1.1) rotate(0deg);opacity: 1;}
}
.tipGroupNameClass{
    width: auto;
    position: relative;
    height: 100%;
    left: 0px;
    overflow: scroll;
    white-space: nowrap;
    padding-right: 8px;
    padding-left: 10px;
    top: 7px;
}
.tipGroupNameClass::-webkit-scrollbar{
    width: 0px;
    height: 0px;
}

.ql-text-edit-button{
    width: 100%;
    height: 100%;
}