body{
    --postsListBar-bgcolor: #fff;
    --postsListBar-hover-bgcolor: #eee;
    --postsListBar: #222;
    --content-link: rgb(0, 112, 218);
    --bottomBox-shadow: #1414150f 0rem 8rem 16rem;
    --bottomBox-fakeinput-bgcolor: #fcfcfc;
    --bottomBox-fakeinput: rgb(114, 114, 114);
    --bottomBox-bgcolor: rgb(245 246 249);
    --bottomBox-buttoncolor-hover: #3f3f3f23;
    --textarea-bgcolor: #fff;
    --textarea: #000;
    --inputArea-select: #000;
    --inputArea-select-bgcolor: #fff;
    --usertag: #e3bc0c;
}
body[theme=dark]{
    --postsListBar-bgcolor: #262626;
    --postsListBar-hover-bgcolor: #222;
    --postsListBar: #eee;
    --content-link: rgb(47, 148, 243);
    --bottomBox-shadow: #00000066 0rem 8rem 14rem;
    --bottomBox-fakeinput-bgcolor: #272727;
    --bottomBox-fakeinput: rgb(185, 185, 185);
    --bottomBox-bgcolor: rgb(1, 1, 1);
    --bottomBox-buttoncolor-hover: #a0a0a086;
    --textarea-bgcolor: rgb(27, 27, 27);
    --textarea: #fff;
    --inputArea-select: rgb(230, 230, 230);
    --inputArea-select-bgcolor: #040404;
    --usertag: #c9a400;
}
#indexMainCards .cardBox .card:not(*:hover):not(*:active){
    transition: margin-left 0.4s, margin-right 0.4s, transform 0.2s;
}
.cardsListsContainer .postsList:not(*[data-focus=true]){
    display: none;
}
.postsList [spe]{
    display: none;
}
.postsList[data-status=loading] .loading, .postsList[data-status=undefined] .loading, .postsList[data-status=error] .error, .postsList[data-status=nomore] .nomore, .postsList[data-status=noone] .noone{
    display: block;
} 
.postsListBar{
    position: absolute;
    bottom: 12rem;
    right: 10rem;
    display: flex;
    flex-direction: column;
    justify-content: end;
}
.postsListBar button{
    position: relative;
    width: 35rem;
    height: 0;
    padding-bottom: 35rem;
    margin: 3rem 0rem;
    border-radius: 20rem;
    background-color: var(--postsListBar-bgcolor);
    box-shadow: #00000017 0rem 0rem 3rem;
    transition: all 0.5s;
}
.postsListBar button[data-hidden=true]{
    visibility: hidden;
    width: 0;
    height: 0;
    padding-bottom: 0;
    margin: 0 0 0 17.5rem;
    box-shadow: none;
    overflow: hidden;
}
.postsListBar button:hover, .postsListBar button:focus-visible{
    background-color: var(--postsListBar-hover-bgcolor);
}
.postsListBar button i{
    font-size: 24rem;
    position: absolute;
    left: 5.5rem;
    top: 5.5rem;
    bottom: 79rem;
    color: var(--postsListBar);
    transition: all 0.5s;
}
.postsListBar button[data-hidden=true] i{
    visibility: hidden;
    transform: scale(0) translate(-50%, -50%);
    opacity: 0;
}
.avatarBox .name{
    display: flex;
    flex-direction: row;
    min-height: 40rem;
    cursor: pointer;
    padding-right: 3rem;
    border-radius: 2rem;
}
.avatarBox .name i{
    display: block;
    flex-grow: 0;
    flex-shrink: 0;
    width: 30rem;
    height: 30rem;
    border-radius: 15rem;
    background-color: var(--i-bgcolor);
    background-size: 30rem 30rem;
    margin-right: 6rem;
    margin-top: 5rem;
}
.avatarBox .name div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}
.avatarBox .name div p.unick{
    display: flex;
    align-items: center;
}
.avatarBox .name div span.unick{
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.usertag{
    display: inline-block;
    flex-shrink: 0;
    flex-grow: 0;
    font-size: 12rem;
    font-weight: normal;
    margin: 0rem 0rem 0rem 5rem;
    padding: 1.5rem 2rem .5rem 2rem;
    line-height: 1;
    border-radius: 3rem;
    color: var(--usertag);
    background-position-x: 50%;
    background-position-y: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}
.usertag.border{
    border: 1px solid var(--usertag);
}
.usertag.icon {
    width: 12rem;
    height: 17rem;
    background-size: 17rem 17rem;
    background-position: center;
}
.usertag.nmTeam{
    background-image: url(https://websiteres.nmteam.xyz/producticon/nmTeam/logo@32.png);
}
.avatarBox .name div .time, .uListItem .unick+p:not(:empty){
    height: 19rem;
    font-weight: normal;
    font-size: 12rem;
    opacity: 0.6;   
}
.uListItem div{
    flex-grow: 1;
}
.uListItem .unick+p:not(:empty){
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
    flex-shrink: 1;
}
.uListItem .editBut{
    flex-grow: 0;
    flex-shrink: 0;
}
.cardBox.postCardBox .content .status{
    color: var(--red);
}
.cardBox.postCardBox .content a{
    display: block;
}
.cardBox.postCardBox .content a:focus-visible object{
    outline: var(--outline);
}
.cardBox.postCardBox .content object.slug{
    line-height: 1.6;
}
.cardBox.postCardBox .content object.slug .title{
    font-weight: bold;    
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.cardBox.postCardBox .content object.slug .slugWord{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.cardBox.postCardBox .content .a{
    font-size: 12rem;
    text-decoration: none!important;
}
.cardBox.postCardBox .content .media .medias{
    width: 100%;
    /* border-radius: 6rem; */
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    overflow: hidden;
}
@media (min-width: 650px) {
    .cardBox.postCardBox .content .media .medias:not([type=x3]) {
        max-width: calc(100% / 1.5);
    }    
}
.cardBox.postCardBox .content .media .medias li, .cardBox.postCardBox .content .media .medias:after{
    height: 0;
    color: #00000000;
    overflow: hidden;
    margin-top: 5rem;
    position: relative;
    content: '';
}
.cardBox.postCardBox .content .media .medias:after{
    padding-bottom: 0!important;
}
.cardBox.postCardBox .content .media .medias li{
    background-color: var(--i-bgcolor);
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: zoom-in;
    border-radius: 3rem;
}
.cardBox.postCardBox .content .media .medias li::marker{
    content: '';
    opacity: 0;
    -webkit-box-sizing: initial;
}
.cardBox.postCardBox .content .media .medias li img{
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    opacity: 0;
    outline: none;
}
.cardBox.postCardBox .content .media .medias li video{
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}
.cardBox.postCardBox .content .media .medias li *:focus-visible + outline{
    position: absolute;
    top: 3rem;
    bottom: 3rem;
    left: 3rem;
    right: 3rem;
    outline: var(--outline);
    border-radius: 0rem;
}
.cardBox.postCardBox .content .media .medias[type=x1] li{
    width: 100%;
    padding-bottom: 100%;
    border-radius: 6rem;
}
.cardBox.postCardBox .content .media .medias[type=x1] li outline{
    border-radius: 6rem;
}
.cardBox.postCardBox .content .media .medias[type=x2] li{
    width: calc(50% - 3rem);
    padding-bottom: calc(50% - 3rem);
}
.cardBox.postCardBox .content .media .medias[type=x3] li, .cardBox.postCardBox .content .media .medias[type=x3]:after{
    width: calc(33.3333333% - 3rem);
    padding-bottom: calc(33.3333333% - 3rem);
}
.biliVideoCon{
    position: relative;
    width: 100%;
    height: 30rem;
    padding-top: 56%;
}
.medias:not(:empty)+.biliVideoCon{
    margin-top: 5rem;
}
.biliVideo{
    position: absolute;
    top: 0;
    bottom: 30rem;
    left: 0;
    right: 0;
    width: 100%;
    border-radius: 6rem;
    height: calc(100% - 30rem);
}
.biliVideoNote{
    position: absolute;
    bottom: 0rem;
    left: 0;
    right: 0;
    margin: 0rem;
}
.biliVideoNote span{
    color: var(--card-bottom);
    font-size: 12rem;
    padding: 4rem 0;
}
.biliVideoNote button{
    float: right;
    color: var(--card-bottom);
    font-size: 12rem;
    padding: 4rem;
    border-radius: 4rem;
    background: none;
    border: 1rem solid var(--card-bottom);
}
.cardBox.postCardBox .bottom{
    align-items: center;
}
.card .noteArea:not(:empty){
    padding: 9rem 10rem;
    border-radius: 6rem;
    font-size: 13.5rem;
    color: var(--card);
    background-color: var(--page-bgcolor);
}
.card .noteArea:not(:empty) *:not(.usertag){
    font-size: 13.5rem;
    color: var(--card);
}
.card .noteArea:not(:empty) button{
    display: block;
    width: 100%;
    text-align: left;
    background: none;
}
.card .noteArea:not(:empty) button+button{
    margin-top: 7rem;
}
.card .noteArea.commentReply:not(:empty){
    margin-left: 26rem;
    margin-bottom: 9rem;
}
.card .noteArea:not(:empty) button .postCommentReplySlug{
    line-height: 1.7;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.card .noteArea:not(:empty) button .postCommentReplySlug .icon{
    margin-bottom: -3rem;
}
[data-comment-num-comment-id]{
    display: none;
}
.cardBox.postCardBox .bottom .buttons button{
    display: inline-flex;
    margin: 0 0rem 0rem 4rem;
    padding: 6rem 5rem;
    border-radius: 0rem;
    align-items: center;
}
.cardBox.postCardBox .bottom .buttons .unlikeButton{
    transform: rotate(180deg);
}
.cardBox.postCardBox .bottom .buttons button svg{
    fill: var(--card-bottom);
    width: 19rem;
    height: 19rem;
}
.cardBox.postCardBox .bottom .buttons button:not(*[data-status=yes]) .yes, .cardBox.postCardBox .bottom .buttons button[data-status=yes] .no{
    display: none;
}
.cardBox.postCardBox .bottom .buttons button span{
    position: relative;
    left: 2rem;
}
.card .unavaliable{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    padding: 10vh 0;
}
.card .unavaliable.small{
    padding: 7rem 0;
}
.card .unavaliable i{
    display: block;
    background-image: url(../img/notfound.png);
    background-size: 26vh;
    height: 30vh;
    padding: 0;
    background-position: center center;
    background-repeat: no-repeat;
}
.card .unavaliable p{
    display: block;
    padding: 10rem 0;
    text-align: center;
}
.card .unavaliable button{
    margin-top: 9rem;
    padding: 7rem 20rem;
    background: var(--card-bgcolor);
    color: var(--card);
    font-size: 14rem;
    border-radius: 4rem;
}
.postBox{
    padding-bottom: 100rem!important;
}
.postFrame .postsListBar, .commentDetailFrame .postsListBar{
    bottom: 62rem;
}
.viewer-backdrop{
    background-color: rgba(0,0,0);
}
.viewer-button{
    background-color: rgba(0,0,0,0);
    border-radius: 0;
    cursor: pointer;
    width: 42rem;
    height: 42rem;
    right: 0;
    top: 0;
}
.viewer-button:focus-visible, .viewer-button:hover{
    background-color: rgba(0,0,0,.2);
    border: none;
}
.viewer-button:before{
    bottom: 10rem;
    left: 11rem;
    position: absolute;
}
.viewer-toolbar{
    display: none;
}
.card .content .title{
    font-weight: bold;
}
.postMainReal .content{
    font-size: 14.45rem;
}
.card .content a.linkInPost{
    color: var(--content-link);
    transition: opacity 0.3s;
}
.card .content a.linkInPost:hover{
    border-bottom: 1rem solid var(--content-link);
    opacity: 0.8;
}
.card .content a.linkInPost svg{
    fill: var(--content-link);
    width: 16rem;
    height: 16rem;
    display: inline-block;
    margin: -3rem 0rem;
}
.card.tagCard .content{
    display: flex;
    flex-direction: row;
}
.card.tagCard .content .ca{
    flex-grow: 0;
}
.card.tagCard .content .tags{
    flex-grow: 1;
    font-size: 14rem;
    opacity: 0.67;
    margin-left: 6rem;
}
.card.tagCard .content .tags a{
    padding: 0rem 2rem;
}
.card.interactionBar{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.card.interactionBar button{
    padding: 5rem 10rem;
    margin: -5rem -10rem;
    background: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
    font-size: 14rem;
    color: var(--card);
}
.card.interactionBar button[on]{
    font-size: bold;
}
.comments h2{
    font-size: 18rem;
    margin: 1rem 0 7rem 0;
}
.inCardComments .comment .header{
    margin-bottom: 2rem;
    align-items: center;
}
.inCardComments .comment .bottom{
    margin-top: -3rem;
    margin-bottom: 4rem;
}
.inCardComments .comment .media .medias:not(:empty){
    margin-bottom: 6rem;
}
.card.comments .comment .content{
    padding-left: 36rem;
}
.shareFrame{
    width: 100%;
}
@media (min-width: 700px) {
    .shareFrame.cardBox{
        width: min(100%, 500px);
    }   
}
.shareFrame .card{
    visibility: hidden;
    position: absolute;
    z-index: 2;
    bottom: 50rem;
    right: 0;
    transform: translateY(calc(100% + 20rem));
    max-height: calc(100% - 148rem);
    overflow-y: auto;
    overflow-y: overlay;
    transition: all 0.15s!important;
}
.shareFrame[data-open=true] .card{
    visibility: visible;
    transform: translateY(0);
    box-shadow: var(--bottomBox-shadow);
    transition: all 0.3s!important;
}
.shareFrame .card .sharePreview{
    display: flex;
    flex-direction: row;
    margin: 3rem -3rem 13rem -3rem;
    background: var(--header-bgcolor);
    border-radius: 6rem;
    box-shadow: 0rem 1rem 8rem #00000033;
}
.shareFrame .card .qrcode img{
    width: 80rem;
    margin: 5rem 6rem;
    padding: 5rem;
    border-radius: 6rem;
    background: #fff;
}
.shareFrame .card .sharePreview .detail{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    margin-right: 15rem;
}
.shareFrame .card .sharePreview .detail .name{
    font-size: 17rem;
    font-weight: bold;
    color: var(--card);
    margin-bottom: 5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.shareFrame .card .sharePreview .detail .link{
    display: flex;
    flex-direction: row;
    font-size: 14rem;
    color: var(--card);
    margin-bottom: 2rem;
    user-select: all;
    -webkit-user-select: all;
    -moz-user-select: all;
}
.shareFrame .card .sharePreview .detail .link span{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.shareFrame .card .sharePreview .detail .link button{
    flex-shrink: 0;
    flex-grow: 0;
    cursor: pointer;
    width: 20rem;
    height: 20rem;
    color: var(--card);
    background: none;
    font-size: 14rem;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}
.shareFrame .title{
    font-size: 18rem;
    font-weight: bold;
    margin: 4rem 5rem;
}
.shareFrame .ways button{
    display: inline-flex;
    max-width: 90%;
    margin: 2rem 7rem 3rem 0;
    height: 38rem;
    border-radius: 19rem;
    background: none;
    color: var(--card);
    align-items: center;
    flex-direction: row;
}
.shareFrame .ways button:hover, .shareFrame .ways button:focus-visible{
    background-color: var(--card-button-bgcolor);
}
.shareFrame .ways button i{
    display: block;
    width: 30rem;
    height: 30rem;
    margin-left: 4.2rem;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 50%;
}
.shareFrame .ways button p{
    font-size: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
    margin-left: 4rem;
    margin-right: 10rem;
}
.shareFrame[data-open=true] + .sFrameHover{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
}
.likeAni .f{
    background-image: url(../img/nmFun_like_main.svg);
}
.starAni .f{
    background-image: url(../img/star.svg);
}
[data-mobile=true] .postFrame .bottomBox .bottomSurface{
    padding-bottom: 15rem;
}
.bottomBox{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--bottomBox-bgcolor);
    box-shadow: var(--bottomBox-shadow);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    z-index: 5;
}
.bottomBox .bottomSurface{
    display: flex;
    padding: 4rem 10rem 5rem 10rem;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: flex-end;
    color: var(--input-item);
}
/* .bottomBox .bottomSurface .{
    transition: transform 0.3s;
}
.bottomBox .bottomSurface .more[open]{
    transform: rotate(45deg);
} */
.bottomBox .bottomSurface .fakeInput{
    border: none;
    padding: 8rem 16rem;
    color: var(--bottomBox-fakeinput);
    font-size: 15rem;
    max-height: max(40vh, 8em);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
    background-color: var(--bottomBox-fakeinput-bgcolor);
    flex-grow: 1;
    flex-shrink: 1;
    border-radius: 5rem;
    line-height: 1.3;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
.fakeInput:focus-visible{
    outline: var(--outline);
}
.bottomBox .bottomSurface button{
    width: 35rem;
    height: 35rem;
    padding: 7rem;
    border: none;
    background-color: rgba(0,0,0,0);
    color: var(--header-buttoncolor);
    border-radius: 99rem;
}
.bottomBox .bottomSurface button input{
    visibility: hidden;
    position: absolute;
}
.bottomBox .bottomSurface button:hover, .bottomBox button:focus-visible{
    background-color: var(--bottomBox-buttoncolor-hover);
}
.bottomBox .bottomSurface button i{
    font-size: 21rem;
}
.bottomBox .bottomSurface button.starButton:not(*[starred=true]) i.starred,
.bottomBox .bottomSurface button.starButton[starred=true] i.star{
    display: none;
}
.bottomBox .bottomDrawer .more{
    transition: all 0.4s;
    height: 0;
    visibility: hidden;
}
.bottomBox .bottomDrawer .more[open]{
    height: 200rem;
    visibility: visible;
}
.sendButton[status=false]{
    color: rgba(0,0,0,0);
    background-image: url(../img/loading.gif);
    background-size: 15rem;
    background-position: center center;
    background-repeat: no-repeat;
}
.inputArea{
    display: flex;
    flex-direction: column;
    overflow: hidden!important;
}
.inputArea.comment *[hideincomment], .inputArea.post *[hideinpost]{
    display: none;
}
.inputArea .categoryAndTitle{
    padding: 0;
    margin: 8rem 10rem 0 10rem;
    font-size: 15rem;
    display: flex;
    color: var(--inputArea-select);
    background-color: var(--type-selecter-bgcolor);
    border-radius: 6rem;
}
.inputArea select{
    padding: 8rem 0rem 8rem 15rem;
    margin: 0 4rem 0 0;
    width: 4em;
    font-size: 15rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    color: var(--inputArea-select);
    background-color: var(--type-selecter-bgcolor);
    border: none;
    border-radius: 6rem 0 0 6rem;
    outline: none;
    box-shadow: none;
}
.inputArea select:focus-visible{
    outline: var(--outline);
}
.inputArea select option{
    padding: 11rem 15rem;
    font-size: 15rem;
    appearance: none;
    color: var(--inputArea-select);
    background-color: var(--inputArea-select-bgcolor);
    border: none;
    box-shadow: none;
}
.inputArea .titleInput{
    padding: 9rem 10rem 8rem 5rem;
    font-size: 15rem;
    flex-grow: 1;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    color: var(--inputArea-select);
    background-color: var(--type-selecter-bgcolor);
    border: none;
    border-radius: 0 6rem 6rem 0;
    box-shadow: none;
}
.inputArea .replyTip{
    padding: 9rem 15rem;
    font-size: 15rem;
    flex-grow: 1;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    color: var(--inputArea-select);
    background-color: var(--type-selecter-bgcolor);
    border: none;
    border-radius: 6rem;
    box-shadow: none;
}
.inputArea .textarea{
    width: calc(100% - 50rem);
    font-size: 15rem;
    line-height: 1.5;
    resize: none;
    background: var(--textarea-bgcolor);
    color: var(--textarea);
    flex-grow: 1;
    border: none;
    outline: none;
    margin: 8rem 10rem 0 10rem;
    border-radius: 6rem 6rem 0 0;
    overflow-y: auto;
    padding: 14rem 15rem 0 15rem;
}
.inputArea .textarea img{
    display: none;
}
.inputArea .noticeBox{
    font-size: 14rem;
    line-height: 1.2;
    background: var(--textarea-bgcolor);
    color: var(--textarea);
    flex-grow: 0;
    margin: 0rem 10rem 0 10rem;
    padding: 5px 16px 10px 16px;
    border-radius: 0 0 6rem 6rem;
    transition: all 0.3s;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}
.inputArea .noticeBox button{
    border: none;
    background: none;
    color: var(--textarea);
}
.inputArea .bottomBox{
    position: relative;
    flex-shrink: 0;
}
@media (max-width: 700px) {
    body[data-mobile=true] .inputArea .bottomBox{
        margin-bottom: 15rem;
        overflow: hidden;
        box-shadow: none;
    }
}
.inputArea .mediasBox{
    display: flex;
    flex-shrink: 0;
    flex-direction: row;
    overflow-x: overlay;
    max-height: 150rem;
    margin: 0 10rem;
}
.inputArea .mediasBox div.m{
    position: relative;
    width: 80rem;
    height: 80rem;
    color: var(--textarea);
    font-size: 14rem;
    border-radius: 6rem;
    margin: 6rem 3rem;
    flex-grow: 0;
    flex-shrink: 0;
    text-align: center;
    background-color: var(--i-bgcolor);
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
    justify-content: center;
    align-items: stretch;
}
.inputArea .mediasBox div.m:first-child{
    margin-left: 0;
}
.inputArea .mediasBox div.m .delButton{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 999;
    padding: 11rem;
    border: none;
    width: 13rem;
    height: 13rem;
    border-radius: 6rem;
    background-color: rgba(0, 0, 0, 0.267);
    background-image: url('../img/close.svg');
    background-size: 15rem;
    background-position: center center;
    background-repeat: no-repeat;
}
.inputArea .mediasBox div.m div{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: none;
    width: 80rem;
    height: 80rem;
    border-radius: 6rem;
    background-size: 80rem 80rem;
    font-size: 14rem;
    font-weight: normal;
    color: var(--card);
    background-position: center center;
    background-repeat: no-repeat;
}
.viewerTransition{
    position: fixed;
    z-index: 9999;
    background-size: cover;
    background-position: center;
}
.viewer-in{
    animation: viewerOpen .5s;
}
.viewer-hide{
    animation: viewerClose .5s!important;
}
.viewer-in .viewer-canvas img{
    animation: viewerOpenImg .5s;
}
@keyframes viewerOpen{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@keyframes viewerClose{
    0%{
        display: block!important;
        opacity: 1!important;
    }
    100%{
        display: block!important;
        opacity: 0!important;
    }
}
@keyframes viewerOpenImg {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 0;
    }
}
.sendCover{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99999999999999999999999999999999999999999999999999999999999999999999999999999;
    background-color: #00000066;   
    visibility: hidden; 
}
.sendCover[open=true]{
    visibility: visible;
}
.sendCover .content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14rem;
    background: rgba(0,0,0,0.7);
    color: #fff;
    border-radius: 8rem;
}
.sendCover .content i{
    display: block;
    width: 20rem;
    height: 20rem;
    background-image: url(../img/loading.gif);
    background-size: 20rem;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 0 0 15rem 0;
}
.sendCover .content p{
    text-align: center;
    font-size: 14rem;
    padding-bottom: 4rem;
}
.lightPostsList{
    margin: 0 0;
}
.lightPostsList button{
    background: none;
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0rem 0 5rem 0;
    border-radius: 0;
    text-align: left;
    font-size: 14rem;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    color: var(--card);
}
.lightPostsList button:not(:first-child){
    border-top: 1rem solid var(--page-bgcolor);
    padding-top: 6rem;
}
.lightPostsList button p{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-height: 1.4;
}
.lightPostsList button .t{
    font-weight: bold;
    -webkit-line-clamp: 1;
}
.lightPostsList button .s{
    -webkit-line-clamp: 2;
}
.lightPostsList button i{
    flex-grow: 0;
    flex-shrink: 0;
    width: 4em;
    height: 4em;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-right: 1rem;
    background-color: var(--card-button-bgcolor);
    border-radius: 4rem;
}
.lightPostsList button.skeleton{
    height: 4em;
    margin: -10rem 0 -12rem 0!important;
    border: none;
}