:root{
    --vf-header-height:30px;
    --vf-footer-height:50px;
    --vf-footer-height-post:100px;
    --vf-full-height:calc(100dvh - 30px - 50px);
    --vf-full-height-global:calc(100dvh - 50px);
    --vf-full-height-post:calc(100dvh/* - 30px*/ - 100px);
    --vf-half-height:calc((100dvh - 30px - 50px) / 2);
    --vf-half-height-post:calc((100dvh - 30px - 100px) / 2);
}
body{direction:rtl; font:normal 14px/22px 'IRANSansX',tehoma; background:#f4f4f4}
body *{box-sizing:border-box}
ul,ol{list-style:none; margin:0; padding:0}
h1,h2,h3,h4,h5,h6{margin:0; padding:0; font-weight:normal; font-family:'IRANSansX-Bold',arial; line-height:normal}
p{margin:0; padding:0}
a{text-decoration:none}
figure{margin:0; padding:0; position:relative; overflow:hidden; line-height:0}
figure a{line-height:0}
img{border:none;}
blockquote{margin:0; padding:0;}
input, textarea, button, select, a{outline: none !important}
input, textarea, button, select{font:normal 12px/18px 'IRANSansX',tehoma; color:#333;}
figure{margin:0; padding:0; position:relative;}


#aspect-adapter{position:absolute; top:0; left:50%; transform: translateX(-50%); z-index:0; height:100dvh; aspect-ratio:10/16;}


#header{position:relative; width:100%; height:var(--vf-header-height); z-index:9999}
#header>.container{height:calc(var(--vf-header-height) - 2px); position:relative; margin:2px auto 0; border-top:1px solid #4b484a; background:#ffffff; border-bottom:1px solid #4b484a}
#header #header-menu{padding:0; position: relative}
#header #header-menu .header-menu:before{content:""; position:absolute; top:0; right:0; bottom:2px; background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); width:16px; z-index:99}
#header #header-menu .header-menu:after{content:""; position:absolute; top:0; left:0; bottom:2px; background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); width:16px; z-index:99;}
#header #header-menu .swiper-slide{width:fit-content}
#header #header-menu ul{display:flex; width:fit-content; padding:0 16px; margin:0}
#header #header-menu ul li{margin-left:24px; font:normal 15px/calc(var(--vf-header-height) - 2px) 'IRANSansX-Bold',arial; white-space: nowrap; position:relative}
#header #header-menu ul li:last-child{padding-left:48px;}
#header #header-menu ul li.active:after{content:""; display:block; width:100%; height:4px; background:#ed1d24; top:calc(100% - 2px); position:absolute;}
#header #header-menu ul li:last-child.active:after{width:calc(100% - 48px)}
#header #header-menu ul li a{color:#999999}
#header #header-menu ul li a:hover{color:#d92329}
#header #header-menu ul li.active a{color:#0f111e !important}
#header #header-menu ul li.add-view a{color:#cfd2d4}
#header #header-menu ul li:last-child{margin-left:16px}
#header #header-menu .thread-details{display: flex; padding:0 16px;}
#header #header-menu .thread-details .thread-name{margin-left:auto; line-height:28px}
#header #header-menu .thread-details .follow-thread{margin-right:auto}
#header #header-menu .thread-details .follow-thread button{width:fit-content; height:22px; display:flex; justify-content: center; align-items: center; padding:0 2px; margin-top:2px; cursor:pointer; background:#fff; border:1px solid #d92329; border-radius:4px; color:#d92329; font:normal 12px/calc(var(--vf-header-height) - 2px) 'IRANSansX',arial;}
#header #header-menu .thread-details .follow-thread button:hover{background:#f4f4f4}
#header #header-menu .thread-details .follow-thread button span{margin-left:4px; }
#header #header-menu .thread-details .follow-thread button img{opacity:0.5}
#header #header-menu .thread-details .follow-thread button img.add{}
#header #header-menu .thread-details .follow-thread button img.remove{display:none}
#header #header-menu .thread-details .follow-thread.selected button img.add{display:none}
#header #header-menu .thread-details .follow-thread.selected button img.remove{display:block}
#header #header-menu .thread-details .follow-thread button:hover img{opacity:1}



#pages-wrapper{position: relative; margin-top:-2px; z-index:999}
#pages-wrapper .overlay-right{position:absolute; top:0; bottom:0; right:0; background:#f4f4f4; z-index:999}
#pages-wrapper .overlay-left{position:absolute; top:0; bottom:0; left:0; background:#f4f4f4; z-index:999}



/*#vertical-folding00,
#vertical-folding00-1{position:relative; height:var(--vf-full-height);}*/
.vertical-folding{}
.vertical-folding .vertical-folding-wrapper{height:var(--vf-full-height);}
.vertical-folding .first-page,
.vertical-folding .pages{height:var(--vf-half-height);}
.vertical-folding .pages{z-index: 999}
.vertical-folding .page-container{height:var(--vf-full-height);}
.vertical-folding .first-page .page .page-content,
.vertical-folding .pages .page .page-content,
.vertical-folding .pages .page .page-content-alt,
.vertical-folding .pages .page .page-content-alt .page-content-js-alt{height:var(--vf-full-height);background:#f4f4f4;}
.vertical-folding .pages .page .page-content img,
.vertical-folding .pages .page .page-content-alt .page-content-js-alt img{object-fit: cover; width:100%; height:100%}
.vertical-folding .first-page .page .page-content:not(.ads):before,
.vertical-folding .pages .page .page-content-alt:not(.ads):before,
.vertical-scrolling .page .page-content:before{content:""; width:calc(40% - 16px); aspect-ratio:17/5.5; background-image: url("../images/iran-online-new.svg"); position:absolute; top:8px; right:8px; background-size: contain; background-repeat:no-repeat; z-index:999;}
body.scroll-mode.global .vertical-scrolling .page .page-content:before{display:none}

body.scroll-mode .vertical-scrolling .page .box .box-stage .item-content .thumbnail{position: sticky; top:0; z-index:99; height:40dvh; transition:height ease-out 0.1s; background:#000}
body.scroll-mode .vertical-scrolling .page .box .box-stage .item-content .thumbnail img{object-position:top; min-width:100%;}

/*body.post-mode .vertical-folding{height:var(--vf-full-height-post)}
body.post-mode .vertical-folding .first-page,
body.post-mode .vertical-folding .pages{height:var(--vf-half-height-post);}*/

.vertical-scrolling{position:relative; height:var(--vf-full-height); overflow:hidden;}
.vertical-scrolling .vertical-scrolling-wrapper{height:var(--vf-full-height); position:relative;}
body.scroll-mode .vertical-scrolling .vertical-scrolling-wrapper{aspect-ratio:11.1/16; max-width:100%;  height:var(--vf-full-height); width:auto; margin:0 auto;}
body.scroll-mode.global .vertical-scrolling .vertical-scrolling-wrapper{position:relative; margin:0 auto;}
.vertical-scrolling .page{height:var(--vf-full-height); padding:16px; background:#fff; overflow-y:auto}
.vertical-scrolling .page-container{width:100%; display:flex; flex-direction: column}

body.scroll-mode .vertical-scrolling,
body.scroll-mode .vertical-scrolling .vertical-scrolling-wrapper,
body.scroll-mode .vertical-scrolling .page{height:var(--vf-full-height-post);}

body.scroll-mode.global .vertical-scrolling,
body.scroll-mode.global .vertical-scrolling .vertical-scrolling-wrapper,
body.scroll-mode.global .vertical-scrolling .page{height:var(--vf-full-height-global);}

.box{}
.box .box-header{}
.box .box-header .title{}
.box .box-stage{}
.box .box-stage .item-content{}
.box .box-stage .item-content.news-mode{}
.box .box-stage .item-content .thumbnail{}
.box .box-stage .item-content .thumbnail a{}
.box .box-stage .item-content .thumbnail a:after{content:""; position: absolute; top:0; right:0; bottom:0; left:0; z-index:9999}
.box .box-stage .item-content .thumbnail img{}
.box .box-stage .item-content .details{}
.box .box-stage .item-content .details .suptitle{}
.box .box-stage .item-content .details .title{}
.box .box-stage .item-content .details .title a{}
.box .box-stage .item-content .details .title a:after{content:""; position:absolute; top:0; left:0; right:0; bottom:0; z-index:9999}
.box .box-stage .item-content .details .subtitle{}
.box .box-stage .item-content .details .lead{}
.box .box-stage .item-content .details .attachments{}
.box .box-stage .item-content .details .attachments .service{}
.box .box-stage .item-content .details .attachments .service a{}
.box .box-stage .item-content .details .attachments .date{}
.box .box-stage .item-content .details .attachments .date i{margin-left:4px;}
.box .box-stage .item-content .details .attachments .comments{}
.box .box-stage .item-content .details .attachments .comments i{margin-left:4px;}


.box[data-theme="one-full"]{position:absolute; top:0; right:0; bottom:0; left:0}
.box[data-theme="one-full"] .box-header{display:none}
.box[data-theme="one-full"] .box-stage{position:absolute; top:0; right:0; bottom:0; left:0}
.box[data-theme="one-full"] .box-stage .item-content{position:absolute; top:0; right:0; bottom:0; left:0}
.box[data-theme="one-full"] .box-stage .item-content .thumbnail{position:absolute; top:0; right:0; bottom:0; left:0}
.box[data-theme="one-full"] .box-stage .item-content .thumbnail img{width:100%; height:100%; object-fit: cover}
.box[data-theme="one-full"] .box-stage .item-content .details{position:absolute; bottom:0; left:0; right:0;}
.box[data-theme="one-full"] .box-stage .item-content .details .title{font-size:34px; line-height:44px; padding:0 16px;}
.box[data-theme="one-full"] .box-stage .item-content .details .title a{color:#fff;}
.box[data-theme="one-full"] .box-stage .item-content .details .subtitle{color:#fff; padding:8px 16px; font:normal 20px/30px 'IRANSansX',tehoma;}
.box[data-theme="one-full"] .box-stage .item-content .details .attachments{padding:8px 16px 16px; display:flex}
.box[data-theme="one-full"] .box-stage .item-content .details .attachments .service{position:absolute; top:-30px;}
.box[data-theme="one-full"] .box-stage .item-content .details .attachments .service a{color:#fff; padding:0 4px; background:#d92329; line-height:18px; border-radius:2px;}
.box[data-theme="one-full"] .box-stage .item-content .details .attachments .date{color:#fff; margin-left:8px; padding-left:8px; position:relative; font-size:13px;}
.box[data-theme="one-full"] .box-stage .item-content .details .attachments .date:after{content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:10px; background:rgba(255,255,255,0.5); display:block}
.box[data-theme="one-full"] .box-stage .item-content .details .attachments .date i{margin-left:4px;}
.box[data-theme="one-full"] .box-stage .item-content .details .attachments .comments{color:#fff; font-size:13px;}
.box[data-theme="one-full"] .box-stage .item-content .details .attachments .comments i{margin-left:4px;}

.box[data-theme="ads-full"]{position:absolute; top:0; right:0; bottom:0; left:0}
.box[data-theme="ads-full"] .box-header{display:none}
.box[data-theme="ads-full"] .box-stage{position:absolute; top:0; right:0; bottom:0; left:0}
.box[data-theme="ads-full"] .box-stage .item-content{position:absolute; top:0; right:0; bottom:0; left:0}
.box[data-theme="ads-full"] .box-stage .item-content .thumbnail{position:absolute; top:0; right:0; bottom:0; left:0}
.box[data-theme="ads-full"] .box-stage .item-content .thumbnail img{width:100%; height:100%; object-fit: cover}


.box[data-theme="one-large-tow-small"]{position:absolute; top:0; right:0; bottom:0; left:0;}
.box[data-theme="one-large-tow-small"] .box-header{display:none}
.box[data-theme="one-large-tow-small"] .box-stage{position:absolute; top:0; right:0; bottom:0; left:0; display:flex; flex-wrap: wrap}
.box[data-theme="one-large-tow-small"] .box-stage .item-content:first-child{position:relative; width:100%; height:65%}
.box[data-theme="one-large-tow-small"] .box-stage .item-content:first-child .thumbnail{position:absolute; top:0; right:0; bottom:0; left:0}
.box[data-theme="one-large-tow-small"] .box-stage .item-content:first-child .thumbnail img{width:100%; height:100%; object-fit: cover}
.box[data-theme="one-large-tow-small"] .box-stage .item-content:first-child .details{position:absolute; bottom:0; left:0; right:0;}
.box[data-theme="one-large-tow-small"] .box-stage .item-content:first-child .details .title{font-size:30px; line-height:40px; padding:0 16px;}
.box[data-theme="one-large-tow-small"] .box-stage .item-content:first-child .details .title a{color:#fff;}
.box[data-theme="one-large-tow-small"] .box-stage .item-content:first-child .details .subtitle{color:#fff; padding:8px 16px; font:normal 16px/26px 'IRANSansX',tehoma;}
.box[data-theme="one-large-tow-small"] .box-stage .item-content:first-child .details .attachments{padding:8px 16px 16px; display:flex}
.box[data-theme="one-large-tow-small"] .box-stage .item-content:first-child .details .attachments .service{position:absolute; top:-30px;}
.box[data-theme="one-large-tow-small"] .box-stage .item-content:first-child .details .attachments .service a{color:#fff; padding:0 4px; background:#d92329; line-height:18px; border-radius:2px;}
.box[data-theme="one-large-tow-small"] .box-stage .item-content:first-child .details .attachments .date{color:#fff; margin-left:8px; padding-left:8px; position:relative; font-size:13px;}
.box[data-theme="one-large-tow-small"] .box-stage .item-content:first-child .details .attachments .date:after{content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:10px; background:rgba(255,255,255,0.5); display:block}
.box[data-theme="one-large-tow-small"] .box-stage .item-content:first-child .details .attachments .date i{margin-left:4px;}
.box[data-theme="one-large-tow-small"] .box-stage .item-content:first-child .details .attachments .comments{color:#fff; font-size:13px;}
.box[data-theme="one-large-tow-small"] .box-stage .item-content:first-child .details .attachments .comments i{margin-left:4px;}

.box[data-theme="one-large-tow-small"] .box-stage .item-content:nth-child(n+2){position:relative; width:50%; height:35%; background:#ffffff; display:flex; flex-direction: column}
.box[data-theme="one-large-tow-small"] .box-stage .item-content:nth-child(2){padding:16px 16px 16px 8px}
.box[data-theme="one-large-tow-small"] .box-stage .item-content:nth-child(3){padding:16px 8px 16px 16px}
.box[data-theme="one-large-tow-small"] .box-stage .item-content:nth-child(n+2) .thumbnail{position:relative; aspect-ratio:16/9}
.box[data-theme="one-large-tow-small"] .box-stage .item-content:nth-child(n+2) .thumbnail img{width:100%; height:100%; object-fit: cover}
.box[data-theme="one-large-tow-small"] .box-stage .item-content:nth-child(n+2) .details{position:relative; padding-top:4px; flex-grow: 1; display:flex; flex-direction:column}
.box[data-theme="one-large-tow-small"] .box-stage .item-content:nth-child(n+2) .details .title{height:100%; position:relative; font-size:13px; line-heigh:23px;}
.box[data-theme="one-large-tow-small"] .box-stage .item-content:nth-child(n+2) .details .title a{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    color:#000;
}
.box[data-theme="one-large-tow-small"] .box-stage .item-content:nth-child(n+2) .details .suptitle,
.box[data-theme="one-large-tow-small"] .box-stage .item-content:nth-child(n+2) .details .subtitle,
.box[data-theme="one-large-tow-small"] .box-stage .item-content:nth-child(n+2) .details .lead{display:none}
.box[data-theme="one-large-tow-small"] .box-stage .item-content:nth-child(n+2) .details .attachments{padding:4px 0 0; display:flex; margin-top:auto}
.box[data-theme="one-large-tow-small"] .box-stage .item-content:nth-child(n+2) .details .attachments .service{position:absolute; top:-28px; right:6px}
.box[data-theme="one-large-tow-small"] .box-stage .item-content:nth-child(n+2) .details .attachments .service a{color:#fff; padding:0 4px; background:#d92329; font-size:12px; line-height:12px; border-radius:2px;}
.box[data-theme="one-large-tow-small"] .box-stage .item-content:nth-child(n+2) .details .attachments .date{color:#969696; margin-left:8px; padding-left:8px; position:relative; font-size:13px;}
.box[data-theme="one-large-tow-small"] .box-stage .item-content:nth-child(n+2) .details .attachments .date:after{content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:10px; background:rgba(255,255,255,0.5); display:block}
.box[data-theme="one-large-tow-small"] .box-stage .item-content:nth-child(n+2) .details .attachments .date i{margin-left:4px;}
.box[data-theme="one-large-tow-small"] .box-stage .item-content:nth-child(n+2) .details .attachments .comments{color:#969696; font-size:13px;}
.box[data-theme="one-large-tow-small"] .box-stage .item-content:nth-child(n+2) .details .attachments .comments i{margin-left:4px;}


.box[data-theme="one-content"]{position:absolute; top:0; right:0; bottom:0; left:0;}
.box[data-theme="one-content"] .box-header{display:none}
.box[data-theme="one-content"] .box-stage{position:absolute; top:0; right:0; bottom:0; left:0; display:flex; flex-wrap: wrap}
.box[data-theme="one-content"] .box-stage .item-content{position:absolute; top:0; right:0; bottom:0; left:0; display: flex; flex-direction: column}
.box[data-theme="one-content"] .box-stage .item-content .thumbnail{position:relative; width:100%; height:65%}
.box[data-theme="one-content"] .box-stage .item-content .thumbnail img{width:100%; height:100%; object-fit: cover}
.box[data-theme="one-content"] .box-stage .item-content .details{position:relative; width:100%; height:35%; padding-top:8px; background:#fff}
.box[data-theme="one-content"] .box-stage .item-content .details .title{font-size:30px; line-height:40px; padding:0 16px;}
.box[data-theme="one-content"] .box-stage .item-content .details .title a{color:#223a72;}
.box[data-theme="one-content"] .box-stage .item-content .details .subtitle{color:#d92329; padding:8px 16px; font:normal 16px/26px 'IRANSansX',tehoma;}
.box[data-theme="one-content"] .box-stage .item-content .details .attachments{padding:8px 16px 16px; display:flex}
.box[data-theme="one-content"] .box-stage .item-content .details .attachments .service{position:absolute; top:-38px;}
.box[data-theme="one-content"] .box-stage .item-content .details .attachments .service a{color:#fff; padding:0 4px; background:#d92329; line-height:18px; border-radius:2px;}
.box[data-theme="one-content"] .box-stage .item-content .details .attachments .date{color:#969696; margin-left:8px; padding-left:8px; position:relative; font-size:13px;}
.box[data-theme="one-content"] .box-stage .item-content .details .attachments .date:after{content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:10px; background:rgba(255,255,255,0.5); display:block}
.box[data-theme="one-content"] .box-stage .item-content .details .attachments .date i{margin-left:4px;}
.box[data-theme="one-content"] .box-stage .item-content .details .attachments .comments{color:#969696; font-size:13px;}
.box[data-theme="one-content"] .box-stage .item-content .details .attachments .comments i{margin-left:4px;}

.box[data-theme="one-content"] .box-stage .item-content .details .lead{
    font-size:18px; line-height:28px; padding:0 16px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    color:#969696;

}


.box[data-theme="content"]{position:absolute; top:0; right:0; bottom:0; left:0; overflow: auto; background:#fff}
.box[data-theme="content"] .box-header{display:none}
.box[data-theme="content"] .box-stage{position:absolute; top:0; right:0; bottom:0; left:0;}
.box[data-theme="content"] .box-stage .item-content{position:relative; display: flex; flex-direction: column;}
.box[data-theme="content"] .box-stage .item-content .thumbnail{position:relative; width:100%; height:65%}
.box[data-theme="content"] .box-stage .item-content .thumbnail img{width:100%; height:100%; object-fit: cover}
.box[data-theme="content"] .box-stage .item-content .details{position:relative; width:100%; padding-top:8px}
.box[data-theme="content"] .box-stage .item-content .details .title{font-size:30px; line-height:40px; padding:0 16px;color:#223a72;}
/*.box[data-theme="content"] .box-stage .item-content .details .title a{color:#223a72;}*/
.box[data-theme="content"] .box-stage .item-content .details .subtitle{color:#d92329; padding:8px 16px; font:normal 16px/26px 'IRANSansX',tehoma;}
.box[data-theme="content"] .box-stage .item-content .details .attachments{padding:8px 16px 16px; display:flex}
.box[data-theme="content"] .box-stage .item-content .details .attachments .service{position:absolute; top:-38px;}
.box[data-theme="content"] .box-stage .item-content .details .attachments .service a{color:#fff; padding:0 4px; background:#d92329; line-height:18px; border-radius:2px;}
.box[data-theme="content"] .box-stage .item-content .details .attachments .date{color:#969696; margin-left:8px; padding-left:8px; position:relative; font-size:13px;}
.box[data-theme="content"] .box-stage .item-content .details .attachments .date:after{content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:10px; background:rgba(255,255,255,0.5); display:block}
.box[data-theme="content"] .box-stage .item-content .details .attachments .date i{margin-left:4px;}
.box[data-theme="content"] .box-stage .item-content .details .attachments .comments{color:#969696; font-size:13px;}
.box[data-theme="content"] .box-stage .item-content .details .attachments .comments i{margin-left:4px;}

.box[data-theme="content"] .box-stage .item-content .details .lead{font-size:18px; line-height:28px; padding:0 16px; color:#969696;}
.box[data-theme="content"] .box-stage .item-content .details .content{font-size:18px; line-height:28px; padding:16px 16px 32px; text-align: justify}



.threads-walls .search-in-page{position:absolute; top:0; left:0; right:0; z-index:9; background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 90%,rgba(255,255,255,0) 100%); display:flex; align-items: center;}
.threads-walls .search-in-page:before{content:""; width:calc(40% - 16px); aspect-ratio:17/5.5; background-image: url("../images/iran-online-new-color.svg"); background-size: contain; background-repeat:no-repeat; z-index:999; margin-right:16px}
.threads-walls .search-in-page input{width:calc(100% - 32px); height:40px; padding:0 8px 0 40px; border-radius:4px; position:relative; z-index:1; background:transparent; border:1px solid #ccc; margin:16px;}
.threads-walls .search-in-page button{position:absolute; left:16px; top:16px; width:40px; height:40px; background:transparent; border:none; display:flex; align-items: center; justify-content:center}
.threads-walls .search-in-page button img{opacity:0.5}

.threads-walls .page-container{margin-top:50px}
.threads-walls .box[data-theme="selection-page"] .box-header{}
.threads-walls .box[data-theme="selection-page"] .box-stage{}
.threads-walls .box[data-theme="selection-page"] .box-stage .categories-tiles{display:flex; flex-wrap:wrap; margin: 0 -8px}
.threads-walls .box[data-theme="selection-page"] .box-stage .categories-tiles .category-tile{width:calc(50% - 16px); margin:8px; position:relative; overflow:hidden; border-radius:4px;}
.threads-walls .box[data-theme="selection-page"] .box-stage .categories-tiles .category-tile.hide-item{display:none}
.threads-walls .box[data-theme="selection-page"] .box-stage .categories-tiles .category-tile .thumbnail{width:100%; height:auto; aspect-ratio:1/1; position:relative;}
.threads-walls .box[data-theme="selection-page"] .box-stage .categories-tiles .category-tile .thumbnail:before{content:""; position:absolute; bottom:0; left:0; right:0; top:50%; transition:top ease-out 0.3s; background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);}
.threads-walls .box[data-theme="selection-page"] .box-stage .categories-tiles .category-tile:hover .thumbnail:before{top:40%}
.threads-walls .box[data-theme="selection-page"] .box-stage .categories-tiles .category-tile .thumbnail img{width:100%; height:100%; object-fit:cover;}
.threads-walls .box[data-theme="selection-page"] .box-stage .categories-tiles .category-tile .category-name{position:absolute; width:100%; aspect-ratio:1/1; padding:8px; display:flex; top:0; justify-content: center; align-items: end;}
.threads-walls .box[data-theme="selection-page"] .box-stage .categories-tiles .category-tile .category-name a{color:#fff;}
.threads-walls .box[data-theme="selection-page"] .box-stage .categories-tiles .category-tile .category-name a:after{content:""; position:absolute; top:0; right:0; bottom:0; left:0}
.threads-walls .box[data-theme="selection-page"] .box-stage .keywords-items{margin-top:8px}
.threads-walls .box[data-theme="selection-page"] .box-stage .keywords-items .keywords-list{display:flex; flex-wrap: wrap; margin: 0 -4px}
.threads-walls .box[data-theme="selection-page"] .box-stage .keywords-items .keywords-list li{margin:0 4px 8px;}
.threads-walls .box[data-theme="selection-page"] .box-stage .keywords-items .keywords-list li.hide-item{display:none}
.threads-walls .box[data-theme="selection-page"] .box-stage .keywords-items .keywords-list .keyword{flex-grow:1; width:fit-content;}
.threads-walls .box[data-theme="selection-page"] .box-stage .keywords-items .keywords-list .keyword a{display:block; padding:2px 8px; background:#f0f0f0; border-radius:4px; color:#d92329; transition:color ease-out 0.3s, background-color ease-out 0.3s}
.threads-walls .box[data-theme="selection-page"] .box-stage .keywords-items .keywords-list .keyword a:hover{background:#d92329; color:#f4f4f4}

#add-thread-button{width:fit-content; height:25px; display:flex; justify-content: center; align-items: center; margin:0; padding:0; cursor:pointer; background:transparent; border:none; color:#999; font:normal 15px/calc(var(--vf-header-height) - 2px) 'IRANSansX-Bold',arial; }
#add-thread-button:hover{color:#d92329}
#add-thread-button span{margin-left:4px; padding-top:4px;}
#add-thread-button img{opacity:0.5}
#add-thread-button:hover img{opacity:1}

#pages-wrapper,#vertical-scrolling{position:relative; z-index:998}


#footer{position:relative; width:100%; height:var(--vf-footer-height); z-index: 999}
body.scroll-mode #footer{height:auto}
#footer>.container{height:inherit; margin:0 auto; background:#fff; position:relative}
body.scroll-mode #footer>.container:before{content:""; position:absolute; top:-16px; left:0; right:0; height:16px; background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.01) 1%,rgba(255,255,255,1) 100%);}
#footer #post-menu{display:none; border-top:1px solid #868586}
body.scroll-mode #footer #post-menu{display:block}
#footer #footer-menu{border-top:1px solid #868586}
#footer #post-menu ul,
#footer #footer-menu ul{display:flex; white-space: nowrap}
#footer #post-menu ul li,
#footer #footer-menu ul li{width:100%;}
#footer #post-menu ul li a,
#footer #footer-menu ul li a{position: relative ;display:flex; width:100%; height:50px; flex-direction: column; justify-content: center; align-items: center; color:#000}
#footer #post-menu ul li:not(.active) a:after,
#footer #footer-menu ul li:not(.active) a:after{content:""; position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(255,255,255,0.6); transition:background-color ease-out 0.2s}
#footer #post-menu ul li:not(.active) a:hover:after,
#footer #footer-menu ul li:not(.active) a:hover:after{background:rgba(255,255,255,0.3)}

/*#footer #post-menu ul li:first-child,
#footer #post-menu ul li:last-child{width:calc(100% / 5); min-width:calc(100% / 5); max-width:calc(100% / 5)}*/
#footer #post-menu ul li a{display:flex; flex-direction:row; position:relative}
#footer #post-menu ul li a .counter{position:absolute; top:0; left:calc(50% + 10px + 8px); height:50px; line-height:54px; }

#share-menu{position:absolute; bottom:100%; width:100%; height:0; overflow:hidden; background:rgba(255,255,255,0.5); backdrop-filter: blur(5px); transition:height ease-out 0.2s}
#footer.active-share-menu #share-menu{height:66px}
#share-menu ul{display:flex}
#share-menu ul li{width:100%; height:66px; display:flex; justify-content:center; align-items: center}
#share-menu ul li a{line-height:0}
#share-menu ul li a img{width:50px; height:50px;}


#comment-form{position:absolute; bottom:100%; width:100%; height:0; overflow:hidden; background:rgba(255,255,255,0.5); backdrop-filter: blur(5px); transition:height ease-out 0.2s;}
#footer.active-comment-form #comment-form{height:190px}
#comment-form .comment-form-row{position:relative; width:calc(100% - 16px); margin:4px 8px;}
#comment-form .comment-form-row input,
#comment-form .comment-form-row select{width:100%; height:35px;}
#comment-form .comment-form-row textarea{width:100%; height:100px; resize: none;}
#comment-form .comment-form-row button{width:100%; height:35px; color:#fff; background:#222;}


/*body.post-mode #footer #post-menu{display:block}
body.post-mode #footer{height:var(--vf-footer-height-post);}*/
/*
@media screen and (orientation: portrait) {
    body {
        transform: rotate(90deg);
        transform-origin: left top;
        width: 100vh;
        height: 100vw;
        overflow-x: hidden;
        position: absolute;
        top: 100%;
        left: 0;
    }
}*/