:root {
    --foreground-rgb: #fff;
    --up-bg: #fff;
    --down-bg: #f3f3f3;
    --background-start-rgb: #d8d8d8;
    --background-end-rgb: #f1f1f1;
    --text-rbg: #000;
    --text-start-rgb: #212529;
    --text-end-rgb: #717171;
    --text-link-rgb: #2d7f8e;
    --main-rgb: #bf38b1;
    --main-lighter: #d95bcc;
    --main-primary: #0f7bd3;
    --main-rgb-shadow: #bfbdbd4f;
    --main-primary-shadow: #bfbdbd4f
}

[data-theme=dark] {
    --foreground-rgb: #212121;
    --up-bg: #000;
    --down-bg: #212121;
    --background-start-rgb: #161616;
    --background-end-rgb: #454545;
    --text-rbg: #fff;
    --text-start-rgb: #ecebff;
    --text-end-rgb: #bfccde;
    --text-link-rgb: #008297;
    --main-rgb-shadow: #0000001f;
    --main-primary-shadow: #3482ee33
}

html {
    color: var(--text-rgb);
    font-size: 1em;
    line-height: 1.4
}

.rtl {
    direction: rtl!important;
    text-align: right!important
}

body {
    font-family: iranyekan,Tahoma,sans-serif;
    font-weight: 400;
    position: relative;
    font-size: 13px;
    background: var(--background-start-rgb);
    color: var(--text-start-rgb);
    overflow-x: hidden
}

body * {
    transition: .3s;
    transition-property: all;
    transition-duration: .3s;
    transition-timing-function: ease;
    transition-delay: 0s
}

body a {
    text-decoration: none!important
}

body a:hover {
    color: var(--main-rgb)!important
}

img {
    max-width: 100%
}

.box {
    background: var(--foreground-rgb);
    margin-bottom: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 4px var(--main-rgb-shadow);
    padding: 10px;
    text-align: right
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none
}

::selection {
    background: #b3d4fc;
    text-shadow: none
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid var(--main-rgb-shadow);
    margin: 1em 0;
    padding: 0
}

audio,canvas,iframe,img,svg,video {
    vertical-align: middle
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0
}

textarea {
    resize: vertical
}

*,:after,:before {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility
}

.hidden,[hidden] {
    display: none!important
}

.sr-only {
    border: 0;
    clip: rect(0,0,0,0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px
}

.sr-only.focusable:active,.sr-only.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    white-space: inherit;
    width: auto
}

.invisible {
    visibility: hidden
}

.clearfix::after,.clearfix::before {
    content: " ";
    display: table
}

.clearfix::after {
    clear: both
}

.container {
    width: 1140px;
    margin: 0 auto;
    max-width: 98%
}

@media print {
    *,::after,::before {
        background: #fff!important;
        color: #000!important;
        box-shadow: none!important;
        text-shadow: none!important
    }

    a,a:visited {
        text-decoration: underline
    }

    a[href]::after {
        content: " (" attr(href) ")"
    }

    abbr[title]::after {
        content: " (" attr(title) ")"
    }

    a[href^="#"]::after,a[href^="javascript:"]::after {
        content: ""
    }

    pre {
        white-space: pre-wrap!important
    }

    blockquote,pre {
        border: 1px solid #999;
        page-break-inside: avoid
    }

    thead {
        display: table-header-group
    }

    img,tr {
        page-break-inside: avoid
    }

    h2,h3,p {
        orphans: 3;
        widows: 3
    }

    h2,h3 {
        page-break-after: avoid
    }
}

@font-face {
    font-family: iranyekan;
    font-style: normal;
    font-weight: 700;
    src: url(../fonts/iranyekanwebbold.ttf) format("truetype");
    font-display: swap
}

@font-face {
    font-family: iranyekanlight;
    font-style: normal;
    font-weight: inherit;
    src: url(../fonts/iranyekanweblight.ttf) format("truetype");
    font-display: swap
}

@font-face {
    font-family: iranyekanregular;
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/iranyekanwebregular.ttf);
    font-display: swap
}

header.mainHeaderWrapper {
    box-shadow: #0000008f 0 0 10px;
    min-height: 63px;
    background: var(--up-bg);
    display: flex;
    flex-wrap: wrap
}

header.mainHeaderWrapper .subHeaderWrapper {
    width: 100%;
    background: var(--down-bg);
    padding: 16px 0
}

header.mainHeaderWrapper .container {
    display: flex;
    align-items: center
}

.mainHeaderWrapper .siteInfo {
    display: flex;
    align-items: center
}

.mainHeaderWrapper .siteInfo figure {
    margin: 0
}

.siteInfo .infoWrapper {
    padding-right: 20px;
    font-family: tahoma ,'iranyekanlight'
}

.siteInfo .infoWrapper h1,.siteInfo .infoWrapper h2 {
    font-size: 14px;
    color: var(--text-rgb);
    font-weight: 700
}

.userWrapper {
    margin-right: auto
}

.userWrapper a.notLogin {
    background: var(--main-primary);
    color: #fff;
    padding: 8px 10px;
    border-radius: 4px
}

.userWrapper a.notLogin:hover {
    color: #fff!important;
    filter: brightness(0.8)
}

.userWrapper .userMenu {
    position: absolute;
    left: 0;
    top: 100%;
    background: var(--foreground-rgb);
    z-index: 999;
    border-radius: 10px;
    width: 240px;
    overflow: hidden;
    display: none;
    box-shadow: 0 0 2px 1px var(--background-start-rgb)
}

.userWrapper .profile {
    position: relative
}

.userWrapper .profile button.profileButton {
    background: var(--foreground-rgb);
    border: 1px solid var(--main-rgb);
    width: 50px;
    height: 50px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 0 3px 0 #ff9800a1 inset;
    cursor: pointer
}

.userWrapper .profile button.profileButton .icon {
    width: 50px;
    height: 50px;
    fill: var(--main-rgb)
}

.userWrapper .userMenu nav ul {
    margin: 0;
    padding: 0
}

.userWrapper .userMenu nav ul li {
    list-style: none
}

.userWrapper .userMenu nav ul li a {
    display: flex;
    padding: 9px 10px;
    align-items: center;
    border-bottom: 1px solid var(--background-end-rgb);
    font-size: 12px;
    font-family: 'iranyekanlight';
    color: var(--text-rbg)
}

.userWrapper .userMenu nav ul li a .icon {
    width: 14px;
    height: 14px;
    margin-left: 6px;
    fill: var(--text-rbg)
}

.userWrapper .userMenu .head {
    padding: 18px 10px;
    background: var(--main-primary)
}

.userWrapper .userMenu .head p {
    margin: 0;
    font-family: 'iranyekanlight';
    color: #fff
}

.userWrapper .userMenu .head p a {
    color: var(--text-link-rgb)
}

.userWrapper .userMenu nav ul li a:hover {
    background: var(--main-rgb);
    color: #fff!important
}

.userWrapper .userMenu nav ul li a:hover .icon {
    fill: #fff!important
}

.userWrapper .userMenu .head .access span {
    margin-right: 13px;
    background: var(--down-bg);
    border-radius: 10px;
    padding: 4px 8px;
    color: var(--text-rbg)
}

.userWrapper:hover .userMenu {
    display: block
}

.siteInfo .infoWrapper p {
    color: var(--text-start-rgb);
    font-size: 11px;
    font-weight: 300;
    margin-top: 4px;
    height: 14px;
    width: 170px;
    white-space: nowrap;
    overflow: hidden
}

.headerMenu {
    display: flex;
    height: 100%;
    align-items: center;
    z-index: 9999
}

.headerMenu > ul {
    margin: 0;
    display: flex;
    padding: 0;
    height: 100%;
    align-items: center
}

.headerMenu ul li {
    list-style: none
}

.headerMenu > ul > li ul {
    display: none
}

.headerMenu > ul > li a {
    color: var(--text-start-rgb);
    border-radius: 6px
}

.headerMenu > ul > li >a {
    padding: 10px 15px;
    background: var(--down-bg)
}

.headerMenu > ul > li {
    margin-left: 14px;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center
}

.popularPosts {
    margin-top: 40px
}

.popularPosts .container .box .head {
    width: 100%
}

.popularPosts .container .box .head p {
    border: 2px solid var(--main-rgb);
    display: inline-block;
    padding: 7px 10px;
    border-radius: 8px;
    color: var(--main-rgb)
}

.popularPosts .container .box {
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap
}

.postSlide {
    width: calc((100% / 6) - 1%);
    border-radius: 16px;
    overflow: hidden
}

.postSlide a {
    position: relative;
    color: #fff
}

.postSlide a .infos {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: flex;
    background: #25252594;
    flex-wrap: nowrap;
    flex-direction: column;
    padding: 16px;
    text-align: center;
    justify-content: space-between;
    opacity: 0
}

.postSlide a:hover {
    color: #fff!important
}

.postSlide a:hover .infos {
    opacity: 1
}

.postSlide a .infos h2 {
    font-size: 10px;
    line-height: 16px;
    font-weight: 700;
    border-bottom: 1px solid;
    padding-bottom: 5px
}

.postSlide a .infos .genres {
    display: flex;
    padding: 0;
    align-items: center;
    align-content: center;
    width: 100%;
    justify-content: center
}

.postSlide a .infos .genres li {
    list-style: none;
    font-size: 12px;
    padding: 4px 8px;
    background: #0a0a0a75;
    border-radius: 8px;
    margin: 0 2px
}

.postSlide a .infos p {
    font-size: 12px;
    text-align: center;
    line-height: 17px
}

.postSlide figure,.postSlide figure img {
    width: 100%;
    height: 100%
}

.postSlide a .holder {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.postSlide a .holder .icon {
    width: 50px;
    opacity: .3;
    border: 1px solid;
    height: 50px;
    border-radius: 50px;
    padding: 8px
}

.postSlide a:hover .holder > * {
    transform: scale(0)
}

.postSlide a .infos > * {
    transform: scale(.3)
}

.postSlide a:hover .infos > * {
    transform: scale(1)
}

.mainWrapper .container {
    display: flex
}

.mainWrapper {
    margin-top: 40px;
    margin-bottom: 60px
}

.mainWrapper .container .contentWrapper {
    width: 65%;
    order: 1
}

.mainWrapper .container .sidebarWrapper {
    width: 33%;
    order: 0;
    margin-left: 2%
}

.postItem .infos {
    display: flex;
    justify-content: space-between;
    position: relative;
    flex-wrap: wrap
}

.postItem .infos .info {
    width: calc(100% - 225px);
    padding-left: 75px
}

.postItem .infos .sideInfo> a {
    position: relative;
    margin-bottom: 14px;
    display: inline-block
}

.postItem .infos .sideInfo a .watchlist-slid {
    position: absolute;
    bottom: -5px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%
}

.postItem .infos .sideInfo a .watchlist-slid .watchlist-btn {
    width: 38px;
    height: 38px;
    background: var(--main-rgb);
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    outline: none
}

.postItem .infos .sideInfo a .watchlist-slid .watchlist-btn:hover {
    background: var(--main-lighter)
}

.postItem .infos .sideInfo a .watchlist-slid .watchlist-btn .icon {
    width: 20px;
    height: 20px;
    fill: #fff
}

.postItem .infos .info .rowInfo p {
    color: var(--text-end-rgb);
    font-size: 12px
}

.postItem .infos .info .rowInfo p a {
    color: #02b1cd
}

.postItem .infos .info .rowInfo p .icon {
    width: 22px;
    aspect-ratio: 1;
    fill: var(--text-rbg);
    color: var(--text-rbg);
    stroke: var(--text-rbg)
}

.postItem .infos .info .rowInfo p .title {
    color: var(--text-rbg);
    display: inline-block;
    margin-left: 5px
}

.postItem .infos .info h2,.postItem .infos .info h1 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 20px
}

.postItem .infos .info h2 a,.postItem .infos .info h1 a {
    color: var(--text-rbg)
}

.postItem .infos .info .text {
    margin: 20px 0;
    font-size: 11px
}

.postItem .infos .info .text .section {
    background: #174c81
}

.postItem .infos .info .text span {
    padding: 8px 10px;
    border-radius: 31px;
    color: #fff;
    display: inline-block;
    margin-bottom: 5px
}

.postItem .infos .info .text .subb {
    background: #398117
}

.postItem .infos .info .text .oskar {
    background: #986D0B
}

.postItem .infos .info .text .faa {
    background: #0D826D
}

.postItem .infos .thumbnailWrapper {
    width: 206px;
    max-height: 310px;
    overflow: hidden;
    border-radius: 10px
}

.postItem .infos .thumbnailWrapper img {
    width: 100%;
    height: 100%
}

.postItem .infos .thumbnailWrapper:hover img {
    transform: scale(1.1)
}

.postItem .infos .floatInfo {
    width: 70px;
    position: absolute;
    left: 0;
    top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}

article .usersRate {
    box-sizing: border-box;
    padding: 0 10px 10px;
    border-bottom: 3px dashed #ffd505;
    width: 100%;
    margin: 0 auto
}

article .usersRate span.text {
    font-size: 12px;
    margin-bottom: 9px;
    display: inline-block
}

article .usersRate p.infoRate {
    margin: 0;
    text-align: center;
    direction: rtl
}

article .usersRate .rates ul {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    margin-bottom: 4px
}

article .usersRate .rates ul li {
    list-style: none;
    margin-bottom: 4px
}

article .usersRate .rates ul li a.active svg {
    fill: #ffd505!important
}

article .usersRate .rates ul li a.hover svg {
    fill: #ffd505!important
}

article .usersRate .rates ul li a.preHover svg {
    fill: var(--text-rbg)!important
}

article .usersRate .rates ul li svg {
    margin: 0 2px;
    width: 20px;
    height: 20px;
    fill: var(--text-rbg)
}

.postItem .infos .floatInfo .imdb {
    text-align: center
}

article .usersRate .rates ul li a.active svg .fill {
    display: block
}

article .usersRate .rates ul li a svg .fill {
    display: none
}

article .usersRate .rates ul li .hover svg .fill {
    display: block
}

article .usersRate .rates ul li a.preHover svg .fill {
    display: none
}

@keyframes blink {
    from {
        opacity: 1
    }

    to {
        opacity: .3
    }
}

article .usersRate.hold ul li a .icon {
    animation: blink 1s infinite
}

.postItem .infos .floatInfo .imdb p.score {
    border: 0;
    border-bottom: 1px solid var(--text-end-rgb);
    text-align: center;
    padding-bottom: 1px;
    width: 63px;
    margin: 0 auto 6px;
    direction: ltr;
    font-family: 'iranyekanlight';
    font-size: 15px
}

.postItem .infos .floatInfo .imdb p.score .rate {
    color: #ff9800;
    margin: 2px;
    font-weight: 700
}

.postItem .infos .floatInfo .imdb p.score .of {
    color: var(--text-end-rgb);
    font-size: 12px
}

.postItem .infos .floatInfo .imdb a.imdbLink .icon {
    width: 42px;
    height: 20px
}

.postItem .infos .floatInfo .ed {
    position: absolute;
    top: 110px;
    left: -35px;
    width: 50px;
    height: 50px;
    border-radius: 13px;
    transform: rotate(45deg);
    display: flex;
    justify-content: center;
    align-items: center
}

.postItem .infos .floatInfo .ed .icon {
    width: 30px;
    height: 30px;
    transform: rotate(-45deg);
    fill: #fff;
    color: #fff
}

.postItem .infos .floatInfo .ed .label {
    position: absolute;
    top: -40px;
    left: 40px;
    transform: rotate(-45deg);
    font-size: 9px;
    text-wrap-mode: nowrap;
    background: var(--background-start-rgb);
    padding: 6px 10px;
    border-radius: 4px;
    display: none
}

.postItem .infos .floatInfo .ed:hover .label {
    display: block
}

.postItem .infos .floatInfo .ed {
    background: #398117
}

.postItem .infos .floatInfo .dub {
    background: #178156;
    top: 180px
}

.postItem .plot {
    line-height: 25px;
    text-align: justify;
    padding: 14px;
    font-size: 12px
}

.postItem .plot .icon {
    width: 22px;
    height: 22px;
    fill: var(--text-start-rgb)
}

.postItem .foot {
    display: flex;
    align-items: center
}

.postItem .foot .info {
    font-size: 10px;
    flex: 1;
    color: var(--text-start-rgb)
}

.postItem .foot .info .icon {
    width: 17px;
    height: 17px;
    fill: #717171
}

.postItem .foot .info span {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: flex-end
}

.postItem .foot .info span .icon {
    margin-left: 2px
}

.postItem .foot .more {
    margin-right: auto
}

.postItem .foot .more a {
    background: var(--main-rgb);
    color: #1F1F1F;
    box-shadow: 0 0 14px #ff980147;
    padding: 9px 20px;
    font-size: 13px;
    border-radius: 11px;
    text-align: center;
    white-space: nowrap;
    background-size: 200% auto
}

.postItem .foot .info a {
    color: var(--text-start-rgb)
}

.postItem .foot .more a .icon {
    fill: #1F1F1F;
    width: 22px;
    height: 22px;
    margin-top: -4px
}

.postItem .foot .more a:hover {
    background: var(--main-lighter);
    color: #1F1F1F!important
}

.postItem .infos .info .text span .icon {
    width: 22px;
    height: 21px;
    fill: #fff
}

.sidebarWrapper > * {
    margin-bottom: 24px
}

.sidebarWrapper .socials {
    display: flex;
    flex-direction: column
}

.sidebarWrapper .socials a {
    width: 100%;
    padding: 16px;
    color: #fff!important;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    border-radius: 8px
}

.sidebarWrapper .socials .TelegramBanner {
    background: linear-gradient(54deg,#006fff,#00b5ff);
    box-shadow: -1px 2px 6px 1px #006fff85;
    margin-bottom: 10px
}

.sidebarWrapper .socials .instagramBanner {
    background: linear-gradient(to right,#fcb045,#fd1d1d,#833ab4);
    box-shadow: -1px 2px 6px 1px #fd6e339e;
    margin-bottom: 10px
}

.sidebarWrapper .socials .androidBanner {
    background: linear-gradient(54deg,#46ab1b,#06d720);
    box-shadow: -1px 2px 6px 1px #46ab1b85
}

.sidebarWrapper .socials a .icon {
    width: 50px;
    height: 50px;
    fill: #fff;
    margin-right: auto
}

.sidebarWrapper .socials a .title {
    position: absolute;
    bottom: 16px;
    right: 16px
}

.sidebarWrapper .socials a:hover {
    filter: hue-rotate(30deg)
}

.widget .head {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #31313114;
    margin-bottom: 20px
}

.widget .content {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap
}

.widget .head .iconWrapper {
    width: 45px;
    height: 45px;
    background: var(--main-rgb);
    border-radius: 100%;
    padding: 8px;
    margin-left: 11px
}

.widget .head .iconWrapper .icon {
    width: 100%;
    height: 100%;
    fill: #fff
}

.catsList .content li {
    list-style: none;
    width: 50%;
    margin-bottom: 10px
}

.catsList .content li a {
    font-size: 11px;
    display: flex;
    color: var(--text-start-rgb)
}

.catsList .content li a span {
    margin-right: auto;
    margin-left: 20px;
    font-size: 9px;
    color: #fff;
    background: var(--main-primary);
    padding: 5px 5px 3px;
    border-radius: 10px
}

.catsList .content li a:hover span {
    background: #4d80ff
}

.updatedPosts .content {
    justify-content: space-between
}

.updatedPosts .content article {
    width: calc(50% - 5px);
    margin-bottom: 11px
}

.widget .head .archive {
    margin-right: auto;
    margin-left: 10px;
    color: var(--main-rgb)
}

header.mainHeaderWrapper .container .themeToggleWrapper {
    width: 60px;
    height: 30px;
    position: relative;
    cursor: pointer;
    border: none;
    background: var(--background-end-rgb);
    border-radius: 19px;
    margin-right: 20px
}

header.mainHeaderWrapper .container .themeToggleWrapper svg {
    width: 25px;
    height: 25px;
    position: absolute;
    left: 3px;
    top: 50%;
    transform: translateY(-50%)
}

header.mainHeaderWrapper .container .themeToggleWrapper .icon {
    fill: var(--text-rbg)
}

[data-theme=light] header.mainHeaderWrapper .container .themeToggleWrapper .icon .dark {
    opacity: 0
}

[data-theme=dark] header.mainHeaderWrapper .container .themeToggleWrapper .icon .light {
    opacity: 0
}

[data-theme=dark] header.mainHeaderWrapper .container .themeToggleWrapper .icon {
    left: calc(100% - 28px)
}

header.mainHeaderWrapper .container.main {
    padding: 15px 0
}

.PaginationWrapper {
    display: flex;
    justify-content: center;
    align-items: center
}

.PaginationWrapper a,.PaginationWrapper span {
    height: 30px;
    min-width: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--main-rgb);
    margin: 0 2px;
    border-radius: 4px;
    color: #fff!important;
    padding: 6px
}

.PaginationWrapper span {
    background: var(--main-primary)
}

.PaginationWrapper .dots {
    background: unset;
    color: var(--text-rgb)!important
}

.PaginationWrapper a:hover {
    background: var(--main-primary);
    color: #fff!important
}

.topFoot {
    background: var(--down-bg);
    padding: 20px
}

.topFoot .container {
    display: flex
}

.topFoot .container .countPosts {
    display: flex;
    margin-left: 28px
}

.topFoot .container .countPosts > div .icon {
    width: 40px;
    height: 40px;
    margin-left: 10px;
    color: var(--text-end-rgb);
    fill: var(--text-end-rgb)
}

.topFoot .container nav ul {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    height: 100%
}

.topFoot .container nav ul li {
    list-style: none;
    margin-left: 26px;
    font-size: 12px
}

.topFoot .container .countPosts > div {
    display: flex;
    margin-left: 13px
}

.topFoot .container .countPosts > div p {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: center;
    color: var(--text-end-rgb)
}

.topFoot .container nav ul li a {
    color: var(--text-rgb)
}

.mainFooterWrapper {
    margin-top: 30px
}

.mainFooterWrapper .more {
    background: #151515
}

.mainFooterWrapper .more .container {
    display: flex;
    justify-content: space-between
}

.mainFooterWrapper .more .item {
    width: calc(96% / 3);
    padding: 25px 0;
    color: #fff
}

.mainFooterWrapper .more .item .headItem {
    display: flex;
    align-items: center;
    margin-bottom: 30px
}

.mainFooterWrapper .more .item .headItem .icon {
    width: 25px;
    height: 25px;
    background: #92929270;
    border-radius: 100%;
    padding: 5px;
    fill: #fff;
    color: #fff
}

.mainFooterWrapper .more .item .headItem > h4,footer .more .item .headItem > p {
    margin: 0;
    padding: 0;
    text-align: center;
    width: 100%;
    color: #fff
}

.mainFooterWrapper .more .item .contentItem p {
    font-size: 11px;
    margin: 0;
    line-height: 23px;
    font-family: 'iranyekanlight';
    color: #fff
}

.mainFooterWrapper .more .item .contentItem ul {
    display: flex;
    align-items: center;
    align-content: space-around;
    flex-wrap: wrap;
    padding: 0;
    margin: 0
}

.mainFooterWrapper .more .item .contentItem ul li {
    list-style: none;
    text-align: center;
    width: 100%;
    height: fit-content;
    font-size: 11px;
    border-bottom: 1px solid #8080804f
}

.mainFooterWrapper .more .item .contentItem ul li a {
    color: #fff;
    font-family: 'iranyekanlight'
}

.mainFooterWrapper .more .item .contentItem ul li a h3 {
    font-weight: 300;
    color: #fff
}

.mainFooterWrapper .copyright {
    background: #090909;
    color: #8f8b99;
    line-height: 24px;
    padding: 10px
}

.downloadBox {
    margin-bottom: 10px
}

.downloadBox .boxHead {
    display: flex;
    background: var(--main-primary);
    border-radius: 8px 8px 0 0;
    align-items: center;
    padding: 4px 10px;
    cursor: pointer;
    color: #fff
}

.downloadBox .boxHead .icon {
    width: 25px;
    height: 25px;
    margin-right: auto;
    margin-left: 13px;
    background: var(--main-primary);
    border-radius: 25px;
    padding: 5px;
    fill: #fff;
    color: #fff
}

.downloadBox .boxRows {
    background: var(--down-bg);
    border-radius: 0 0 10px 10px;
    border: 1px solid var(--main-primary-shadow)
}

.downloadBox .boxRows .row {
    padding: 14px 10px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--main-primary-shadow);
    position: relative;
}

.downloadBox .boxRows .row .links a .icon {
    width: 12px;
    height: 12px;
    fill: var(--main-rgb)
}

.downloadBox .boxRows .row .infos {
    margin-right: auto;
    font-size: 11px;
    font-family: sans-serif,'iranyekanlight';
    flex-direction: column;
    align-items: flex-end
}

.downloadBox .boxRows .row .infos .name {
    font-size: 13px;
    font-weight: 700;
    color: var(--main-rgb);
    font-family: 'iranyekan'
}

.downloadBox .boxRows .row .infos span {
    text-align: left;
    margin-bottom: 2px;
    width: fit-content
}

.downloadBox .boxRows .row .links a {
    background: var(--foreground-rgb);
    color: var(--text-rbg);
    padding: 10px 15px;
    border-radius: 30px;
    white-space: nowrap;
    display: inline-block;
    margin-bottom: 5px;
    border: 1px solid var(--main-primary-shadow);
    font-family: 'iranyekanlight'
}

.downloadBox .boxRows .row .infos .encoder,.downloadBox .boxRows .row .infos .size {
    font-size: 11px;
    font-family: 'iranyekanlight';
    background: var(--main-primary-shadow);
    margin-right: 7px;
    padding: 2px 4px;
    border-radius: 4px;
    text-wrap-mode: nowrap;
    margin-top: 2px
}

.downloadBox .boxRows .row .links a:hover {
    background: var(--main-primary);
    color: #fff!important
}

.downloadBox.hide .boxHead {
    border-radius: 8px
}

.downloadBox.hide .boxRows {
    display: none
}

.downloadBox.hide .boxHead .icon {
    transform: rotate(180deg)
}

.downloadBox .boxHead p span {
    font-size: 11px;
    font-family: 'iranyekanlight';
    background: var(--main-rgb-shadow);
    margin-right: 7px;
    padding: 2px 4px;
    border-radius: 4px;
    text-wrap-mode: nowrap;
    margin-top: 4px;
    display: inline-block
}

.trailerBox .header {
    display: flex;
    align-items: center;
    background: var(--main-rgb);
    border-radius: 8px 8px 0 0;
    padding: 10px;
    border-bottom: 1px solid var(--foreground-rgb)
}

.trailerBox .header .icon {
    width: 25px;
    height: 25px;
    fill: #fff
}

.trailerBox .header span {
    text-align: center;
    width: 100%;
    color: #fff
}

.trailerBox video {
    width: 100%
}

a.relatedO {
    background: #B36200;
    display: flex;
    align-items: center;
    color: #fff!important;
    cursor: pointer
}

.relatedO .icon {
    padding: 10px;
    width: 75px;
    height: 68px;
    background: #986D0B;
    fill: #fff;
    color: #fff
}

.relatedO h2 {
    margin-right: auto;
    padding: 0 14px
}

.relatedO:hover {
    filter: brightness(0.9);
    color: #fff!important
}

.p_content {
    text-align: center
}

.box.tags a {
    padding: 6px 10px;
    background: var(--main-primary-shadow);
    display: inline-block;
    color: var(--text-rbg);
    border-radius: 4px;
    font-size: 11px;
    font-family: 'iranyekanlight'
}

.relatedPosts .head {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px
}

.relatedPosts .head .icon {
    width: 28px;
    fill: var(--main-rgb);
    height: 28px
}

.relatedPosts .head .title {
    text-align: center;
    width: 100%
}

.relatedPosts .posts {
    display: flex;
    justify-content: space-between
}

.relatedPosts .posts a {
    width: calc(100% / 4 - 8px)
}

.relatedPosts .posts a h2 {
    text-wrap-mode: nowrap;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    font-family: 'iranyekanlight';
    font-size: 10px;
    font-weight: 300;
    color: var(--text-rbg)
}

.relatedPosts .posts a figure {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 4px
}

.relatedPosts .posts a figure img {
    width: 100%;
    height: auto
}

.relatedPosts .posts a:hover figure img {
    transform: scale(1.2)
}

.commentsWrapper .head {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--text-end-rgb);
    margin-bottom: 8px;
    padding: 10px
}

.commentsWrapper .head .icon {
    width: 28px;
    height: 28px;
    fill: var(--text-rbg)
}

.commentsWrapper .head .titleHead {
    margin: 0;
    width: 100%;
    text-align: center
}

.commentsWrapper #commentform {
    display: flex;
    flex-wrap: wrap
}

.commentsWrapper #commentform .spoilLabel {
    display: flex;
    align-items: center;
    margin-top: 5px;
    cursor: pointer
}

.commentsWrapper #commentform .spoilLabel span {
    margin-left: 8px;
    font-family: 'iranyekanlight'
}

.commentsWrapper #commentform .spoilLabel input {
    width: 17px;
    height: 17px
}

.commentsWrapper #commentform > div > div {
    width: 48%;
    position: relative
}

.commentsWrapper #commentform .input_holder {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px
}

.commentsWrapper #commentform .input_holder .icon {
    width: 24px;
    height: 24px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 5px;
    fill: var(--text-rbg)
}

.commentsWrapper #commentform .input_holder input {
    width: 100%;
    height: 40px;
    padding-right: 39px;
    border: none;
    outline: none;
    background: var(--background-start-rgb);
    border-radius: 4px;
    color: var(--text-rbg)
}

.commentsWrapper #commentform .txt {
    width: 100%;
    position: relative
}

.commentsWrapper #commentform .txt textarea {
    width: 100%;
    height: 120px;
    padding: 10px 40px 10px 10px;
    border: none;
    outline: none;
    background: var(--background-start-rgb);
    border-radius: 4px;
    color: var(--text-rbg)
}

.commentsWrapper #commentform .txt .icon {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 4px;
    right: 4px;
    fill: var(--text-rbg)
}

.commentsWrapper #commentform .btn {
    display: flex;
    margin-top: 10px;
    align-items: center;
    width: 100%
}

.commentsWrapper #commentform .btn button {
    background: var(--main-rgb);
    color: #fff;
    margin-right: auto;
    width: 77px;
    padding: 7px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer
}

.commentsWrapper #commentform .btn button:hover {
    background: var(--main-primary)
}

.answer p.nocomments {
    text-align: center
}

.answer {
    background: var(--main-rgb-shadow);
    margin-top: -15px;
    position: relative;
    max-height: 370px;
    overflow: hidden;
    padding-bottom: 35px;
    border-top: 2px solid var(--background-start-rgb)
}

.answer .top_answer {
    display: flex;
    align-items: center
}

.answer .top_answer .pic_name {
    display: flex;
    align-items: center
}

.answer .top_answer .like_unlike {
    display: flex;
    align-items: center;
    margin-right: auto
}

.answer .top_answer .like_unlike > button {
    display: flex;
    align-items: center;
    background: none;
    outline: none;
    border: none;
    cursor: pointer;
    color: var(--text-rbg)
}

.answer .top_answer .like_unlike > button .icon {
    width: 20px;
    height: 20px;
    margin-top: -5px;
    margin-left: 3px
}

.answer > div,.answer > ul {
    margin: 0;
    padding: 10px;
    background: var(--foreground-rgb)
}

.answer > ul {
    background: unset;
    padding-right: 30px
}

.answer .top_answer .pic_name figure {
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 5px;
    margin-left: 7px
}

.answer .top_answer .pic_name figure img {
    width: 100%;
    height: 100%
}

.answer .top_answer .pic_name .text {
    font-family: 'iranyekanlight';
    font-size: 12px;
    display: flex;
    align-items: center
}

.answer .top_answer .pic_name .text a {
    width: 79px;
    background: var(--main-rgb-shadow);
    display: inline-block;
    text-align: center;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    margin-right: 6px;
    color: var(--text-rbg)
}

.answer .top_answer .like_unlike > button.like {
    border-left: 3px solid #dddddd70
}

.answer .all_cmm {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center
}

.answer .top_answer .like_unlike > .like .icon {
    fill: #0dad0d
}

.answer .top_answer .like_unlike > .unlike .icon {
    fill: #bc1315
}

.answer .all_cmm button {
    background: none;
    border: none;
    outline: none;
    color: var(--text-rbg);
    cursor: pointer
}

.answer .text p.spoilHolder {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #474747f7;
    border-radius: 16px
}

.answer .text p.spoilHolder span {
    padding: 7px 13px;
    background: #585858;
    border-radius: 20px;
    cursor: pointer;
    color: #fff
}

.commentsWrapper a#cancel_replay {
    width: 100%;
    text-align: center;
    display: inline-block;
    margin-bottom: 8px
}

.mainWrapper .container .contentWrapper .headContent {
    text-align: center
}

.mainWrapper .container .contentWrapper .headContent h1,.mainWrapper .container .contentWrapper .headContent h2 {
    font-size: 15px
}

.searchWrapper {
    display: flex;
    margin-right: auto;
    align-items: center
}

.searchWrapper .notif {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

.searchWrapper .notif .icon {
    height: 28px;
    width: 28px;
    28px:48px;fill: var(--text-rbg);
    color: var(--text-rbg)
}

.searchWrapper span.badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--main-rgb);
    width: 17px;
    height: 17px;
    font-family: tahoma,'iranyekanlight';
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    font-size: 11px;
    color: #fff
}

.searchWrapper .searchButtonHandler {
    width: 48px;
    height: 40px;
    background: none;
    border: none;
    outline: none;
    cursor: pointer
}

.searchWrapper .searchButtonHandler .icon {
    width: 28px;
    height: 28px;
    fill: var(--text-rbg);
    color: var(--text-rbg)
}

.searchModal {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    background: #090909ed;
    z-index: 9999;
    display: none
}

.searchModal .content {
    width: clamp(200px,700px,98%);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: var(--foreground-rgb);
    padding: 10px;
    border-radius: 4px;
    min-height: 341px;
    padding-bottom: 10px
}

.searchModal .content .head {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--text-rbg)
}

.searchModal .content .head p {
    font-size: 18px;
    font-weight: 700
}

.searchModal .content .head button {
    width: 48px;
    height: 48px;
    margin-right: auto;
    border: none;
    outline: none;
    background: none;
    cursor: pointer
}

.searchModal .content .head button .icon {
    width: 20px;
    height: 20px;
    fill: var(--text-rbg);
    color: var(--text-rbg)
}

.searchModal .content form {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    position: relative
}

.searchModal .content form .cSearch {
    width: calc(100% - 43px);
    background: var(--background-start-rgb);
    border: none;
    outline: none;
    border-radius: 6px;
    margin-bottom: 10px;
    padding: 15px;
    color: var(--text-rbg);
    margin-left: 43px
}

.searchModal .content form button[type=submit] {
    width: 200px;
    background: var(--main-rgb);
    color: #fff;
    border-radius: 6px;
    border: none;
    outline: none;
    padding: 10px;
    cursor: pointer;
    display: none
}

.searchModal .content .postsWrapper {
    width: 100%;
    overflow-x: auto;
    margin-top: 14px
}

.searchModal .content .postsWrapper .posts {
    width: fit-content;
    display: flex
}

.searchModal .content .postsWrapper .posts .postSlide {
    width: 158px;
    margin-right: 6px
}

.searchModal .content form .toggleAvs {
    position: absolute;
    left: 0;
    top: 0;
    height: 45px;
    width: 45px;
    border: none;
    outline: none;
    background: none;
    cursor: pointer
}

.searchModal .content form .toggleAvs .icon {
    width: 28px;
    height: 28px;
    fill: var(--main-rgb)
}

.searchModal .content form .avsInputs {
    display: flex;
    flex-wrap: wrap;
    padding-left: 43px
}

.searchModal .content form .hide {
    display: none
}

.searchModal .content form .avsInputs label {
    width: calc((100% - 20px) / 4);
    margin: 0 0 5px 5px;
    display: flex;
    align-items: center
}

.searchModal .content form .avsInputs label input[type=text],.searchModal .content form .avsInputs label select {
    width: 100%;
    background: var(--background-end-rgb);
    border: none;
    outline: none;
    border-radius: 4px;
    padding: 10px;
    color: var(--text-end-rgb)
}

.searchModal .content form .avsInputs button {
    display: block
}

.searchModal .content form .avsInputs label span {
    margin-left: 5px
}

.searchModal .content form .avsInputs label input[type=checkbox] {
    width: 20px;
    height: 20px
}

.mobileMenuWrapper {
    position: fixed;
    top: 0;
    z-index: 999999;
    height: 100%;
    width: 100%;
    display: flex;
    overflow: hidden;
    left: 0
}

.mobileMenuWrapper .modal {
    background: var(--foreground-rgb);
    width: 400px;
    max-width: 70%;
    display: flex;
    flex-direction: column;
    position: absolute;
    height: 100%;
    right: 0;
    z-index: 999
}

.mobileMenuWrapper .modalOverView {
    background: #000000d9;
    flex: 1;
    opacity: 1
}

.mobileMenuWrapper .modal .head {
    text-align: center
}

.mobileMenuWrapper .modal figure {
    width: 100%
}

.mobileMenuWrapper .modal nav.mobileNav {
    background: var(--background-start-rgb);
    height: 100%;
    overflow: auto
}

.mobileMenuWrapper .modal nav.mobileNav ul {
    display: flex;
    flex-direction: column;
    padding: 0;
    border-bottom: 1px solid var(--main-primary-shadow)
}

.mobileMenuWrapper .modal nav.mobileNav li {
    list-style: none
}

.mobileMenuWrapper .modal nav.mobileNav li a {
    color: var(--text-rgb);
    height: auto;
    display: inline-block;
    padding: 13px 25px;
    width: 100%
}

.mobileMenuWrapper.hide .modal {
    position: absolute;
    right: -70%
}

.mobileMenuWrapper.hide .modalOverView {
    opacity: 0
}

.hide.mobileMenuWrapper {
    left: 100%
}

header.mainHeaderWrapper .container .toggleMobileMenu {
    width: 48px;
    height: 48px;
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    display: none
}

header.mainHeaderWrapper .container .toggleMobileMenu .icon {
    width: 30px;
    height: 30px;
    fill: var(--text-rbg);
    color: var(--text-rbg)
}

.mobileMenuWrapper .modalOverView.hide {
    opacity: 0;
    transition-duration: 0s
}

.mobileMenuWrapper .modal button.toggleMobileMenu {
    position: absolute;
    left: 10px;
    top: 10px
}

.mobileMenuWrapper .modal button.toggleMobileMenu .icon {
    fill: var(--text-rbg);
    opacity: .4
}

section.avsFormWrapper form {
    display: flex;
    margin-top: 30px;
    background: var(--foreground-rgb);
    border-radius: 10px;
    padding: 20px;
    color: var(--text-rbg);
    justify-content: space-between
}

section.avsFormWrapper form > * .itemsWrapper {
    width: calc(100% - 137px)
}

section.avsFormWrapper form .buttonWrapper {
    width: 137px;
    display: flex;
    padding-bottom: 6px
}

section.avsFormWrapper form .itemsWrapper {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% - 137px)
}

section.avsFormWrapper form .itemsWrapper>* {
    margin: 0 0 6px 6px;
    flex: 1;
    min-width: 155px
}

section.avsFormWrapper form .typeMovie {
    outline: none;
    border: none;
    background: var(--background-end-rgb);
    border-radius: 4px;
    color: #fff;
    height: 46px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}

section.avsFormWrapper form label {
    cursor: pointer
}

section.avsFormWrapper form label select,section.avsFormWrapper form label input {
    outline: none;
    border: none;
    background: var(--background-end-rgb);
    border-radius: 4px;
    padding: 7px;
    width: 100%;
    color: #fff;
    height: 46px;
    cursor: pointer;
    color: var(--text-rbg)
}

section.avsFormWrapper form label input::placeholder {
    color: var(--text-rgb)
}

section.avsFormWrapper form label input {
    cursor: auto
}

section.avsFormWrapper form button {
    outline: none;
    border: none;
    background: var(--main-rgb);
    color: #1F1F1F;
    border-radius: 4px;
    height: 46px;
    width: 100%;
    text-shadow: 0 0 2px #00000080
}

section.avsFormWrapper form button .icon {
    width: 20px;
    height: 20px
}

section.avsFormWrapper form .typeMovie label {
    flex: 1;
    margin: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px;
    color: var(--text-rbg)
}

section.avsFormWrapper form .typeMovie label input {
    display: none
}

section.avsFormWrapper form button .icon {
    color: #1F1F1F;
    fill: #1F1F1F
}

section.avsFormWrapper form .typeMovie label.active {
    background: var(--main-rgb);
    color: #1F1F1F
}

.postSlide a .holder p.desc {
    position: absolute;
    bottom: 0;
    width: 100%;
    margin: 0;
    padding: 10px 5px;
    font-size: 10px;
    background: #000000d4;
    text-align: center;
    line-height: 14px
}

.pageSingle h1 {
    border-bottom: 1px solid var(--main-primary-shadow);
    padding: 10px 0;
    margin: 0 0 25px
}

.pageSingle h1 a {
    color: var(--text-rgb)
}

p.title404 {
    text-align: center
}

p.i404 {
    text-align: center;
    font-size: 50px
}

.mainFooterWrapper .copyright .container {
    display: flex;
    align-items: center;
    flex-wrap: wrap
}

.mainFooterWrapper .copyright .container .developer {
    margin-right: auto
}

.mainFooterWrapper .copyright .container .developer a {
    color: #0046ff
}

.mainFooterWrapper .copyright .container .developer p {
    margin: 0;
    color: #fff
}

.headerMenu > ul > li ul {
    position: absolute;
    width: 245px;
    background: var(--foreground-rgb);
    top: 80%;
    right: 20%;
    padding: 0 11px;
    flex-direction: column;
    border-radius: 5px;
    box-shadow: 0 0 0 1px #0000000f
}

.headerMenu > ul > li:hover ul {
    display: block
}

.headerMenu > ul > li ul li {
    margin: 20px 0;
    border-radius: 10px;
    z-index: 999;
    display: flex;
    align-items: center
}

.headerMenu > ul > li ul li:before {
    content: "»";
    margin-left: 7px
}

.headerMenu > ul > li ul li:hover {
    margin-right: 2px
}

[data-theme=dark] .headerMenu > ul > li ul {
    box-shadow: 0 0 1px 0 #ffffff85
}

.TrailerModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background: #060606f0;
    align-items: center;
    justify-content: center;
    display: none
}

.TrailerModal video {
    width: clamp(200px,560px,98%);
    height: auto;
    scale: 0;
    border: 10px solid #000;
    border-radius: 10px
}

.TrailerModal.show {
    display: flex
}

.TrailerModal.show video {
    scale: 1
}

.sideInfo .trailerWrapper {
    width: 206px
}

.sideInfo .trailerWrapper a {
    display: flex;
    width: 100%;
    height: 45px;
    justify-content: center;
    align-items: center;
    background: var(--background-end-rgb);
    margin: 0 auto;
    border-radius: 6px
}

.sideInfo .trailerWrapper a .icon {
    width: 26px;
    height: 25px;
    fill: var(--text-rbg);
    margin-left: 4px
}

.sideInfo .trailerWrapper a .text {
    color: var(--text-rbg)
}

button.backToTop {
    position: fixed;
    bottom: 40px;
    right: -40px;
    background: var(--main-rgb);
    border: none;
    outline: none;
    cursor: pointer;
    border-radius: 6px;
    padding: 10px;
    z-index: 9999
}

button.backToTop .icon {
    width: 20px;
    height: 20px;
    transform: rotate(180deg);
    fill: #fff
}

button.backToTop.show {
    right: 30px
}

.ads a {
    width: 100%;
    text-align: center;
    display: inline-block
}

.ads.adsTop a {
    width: 100%;
    display: inline-block;
    margin-bottom: 10px;
    text-align: center
}

.appLandingContainer {
    padding: 30px;
    display: flex;
    background: var(--foreground-rgb);
    margin: 35PX auto;
    border-radius: 16px;
    flex-wrap: wrap;
    justify-content: space-around;
    color: var(--text-rbg)
}

.appLandingContainer .imgWrapper img {
    max-width: 290px;
    height: auto
}

.appLandingContainer .info {
    margin-top: 30px;
    width: 375px
}

.appLandingContainer>div {
    display: flex;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding-right: 30px;
    justify-content: center
}

.appLandingContainer .info h1,.appLandingContainer .info p {
    width: 100%;
    margin-bottom: 13px;
    font-weight: 700
}

.appLandingContainer .download {
    margin-top: 30px
}

.appLandingContainer .download a {
    background: #00f469;
    text-align: center;
    border-radius: 4px;
    padding: 12px 20px;
    color: #fff
}

.appLandingContainer .download span {
    width: 100%;
    margin-top: 10px;
    text-align: center;
    direction: ltr
}

.appLandingContainer .download p.downloadCountWrapper {
    background: #ff8d00;
    color: #fff;
    margin-top: 10px;
    padding: 5px 10px;
    border-radius: 4px
}

.appLandingContainer .download a img {
    width: 117px;
    height: 90%
}

.notifications-page {
    overflow: hidden;
    margin-top: 20px;
    border-radius: 10px
}

.notifications-page .headline {
    background: var(--main-primary-shadow);
    padding: 10px;
    display: flex;
    align-items: center;
    border-radius: 10px
}

.notifications-page .headline .title {
    margin: 0;
    display: flex;
    align-items: center
}

.notifications-page .headline .title .icon {
    width: 23px;
    height: 23px;
    fill: var(--text-rbg);
    margin-left: 10px
}

.notifications-page .headline span.read-all-notifications {
    margin-right: auto;
    background: var(--main-primary);
    padding: 10px;
    border-radius: 10px;
    color: #fff;
    cursor: pointer
}

.notifications-page ul.list {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 21px 0 0
}

.notifications-page ul.list li.item {
    width: calc(33% - 20px);
    margin: 10px 10px 25px;
    background-color: var(--foreground-rgb);
    backdrop-filter: blur(5px);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 4px #0000001a;
    position: relative;
    display: inline-flex;
    flex-wrap: wrap;
    align-content: flex-end
}

.notifications-page ul.list li.item .content {
    width: 100%;
    display: flex;
    height: 100%;
    flex-wrap: wrap;
    align-content: space-between
}

.notifications-page ul.list li.item .content .title {
    font-size: 14px;
    font-weight: 900;
    color: var(--text-rbg);
    width: 100%;
    display: block
}

.notifications-page ul.list li.item .content p.desc {
    width: 100%;
    display: block;
    margin-top: 6px;
    font-weight: 300;
    line-height: 26px;
    color: var(--text-rgb);
    font-size: 12px;
    color: var(--text-end-rgb)
}

.notifications-page ul.list li.item .content .info {
    margin-top: 10px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--background-end-rgb);
    padding-top: 10px;
    align-items: center
}

.notifications-page ul.list li.item .content .info .time {
    color: #ff9800;
    font-weight: 600;
    font-size: 11px
}

.notifications-page ul.list li.item .content .info .read-btn.read-notification {
    cursor: pointer;
    outline: 0;
    border: 0;
    color: #fff;
    background-color: var(--main-primary);
    padding: 5px 12px;
    border-radius: 30px;
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    box-shadow: 0 0 0 3px var(--main-primary-shadow);
    transition: box-shadow .3s;
    -webkit-transition: box-shadow .3s
}

.notifications-page>.list .item .status {
    position: absolute;
    top: -9px;
    z-index: 1;
    right: 11px;
    color: var(--text-rbg);
    font-size: 9px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 30px
}

.notifications-page>.list .item .status.unread {
    background-color: #ef5350
}

.notifications-page ul.list li.item .content .info .read-btn.read-notification .icon {
    width: 10px;
    height: 10px;
    margin-left: 4px;
    fill: #fff
}

.downloadBox .boxRows.dlAll {
    border: none;
    justify-content: center;
    text-align: center
}

.downloadBox .boxRows.dlAll .dlAllBtn {
    padding: 6px 30px;
    margin-top: 10px;
    background: var(--main-rgb);
    color: #333;
    border: none;
    outline: none;
    border-radius: 4px;
    cursor: pointer
}

#vpndownload {
    background: #2ca5e0;
    color: #fff;
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 8px;
    text-align: center;
    z-index: 9999
}

section.vpndownload {
    margin: 0 0 10px
}

.MST {
    box-shadow: 0 10px 20px 0 #0000000d
}

.vpndownload .teler {
    position: relative;
    background: linear-gradient(54deg,#ca8102,#fa6400);
    color: #fff;
    padding: 25px 10px;
    border-radius: 5px;
    font-size: medium;
    text-align: center
}

section.vpndownload p span {
    border-bottom: 2px solid #fff
}

section.vpndownload a {
    color: #fff
}

section.DownloadDetails {
    margin: 0 0 10px
}

.MSH {
    box-shadow: 0 10px 20px 0 #0000000d
}

.DownloadDetails .holder {
    position: relative;
    background: linear-gradient(54deg,#46ab1b,#023e09);
    color: #fff;
    padding: 25px 10px;
    border-radius: 5px;
    font-size: medium;
    text-align: center
}

section.DownloadDetails p span {
    border-bottom: 2px solid #fff
}

section.telechannel {
    margin: 0 0 10px
}

.MST {
    box-shadow: 0 10px 20px 0 #0000000d
}

.ads img {
    width: 100%;
    height: auto;
    margin-top: 30px
}

.answer .text p {
    margin: 0
}

.answer .text {
    padding: 12px 0;
    position: relative
}

.answer .user {
    border-right: 4px solid var(--main-primary-shadow);
    padding: 10px 11px 10px 0
}

.blogArchive {
    padding-bottom: 30px
}

.blogArchive .foot {
    margin-top: 40px
}

.downloadBox .boxRows .row .chosePlayModal {
    width: 100%;
    height: 100%;
    position: absolute;
    background: var(--down-bg);
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 0;
    top: 0;
    animation: fadeIn .3s;
    flex-wrap: wrap;
}

.downloadBox .boxRows .row .chosePlayModal a {
    margin: 0 5px;
    padding: 10px;
    background: #dddd;
    border-radius: 8px;
    color: #ffff;
    animation: scaleUp .3s;

}

.downloadBox .boxRows .row .chosePlayModal .vlc {
    background: var(--main-rgb);
}

.downloadBox .boxRows .row .chosePlayModal .direct {
    background: var(--main-primary);
}

.downloadBox .boxRows .row .chosePlayModal a:hover {
    color: #fff !important;
    filter: brightness(0.8);
}

@keyframes fadeIn{
    from{
        opacity:0
    }
    to{
        opacity:1
    }
}
@keyframes scaleUp{
    from{
        transform:scale(0)
    }
    to{
        transform:scale(1)
    }
}
.downloadBox .boxRows .row .chosePlayModal p {
    margin: 0;
    font-size: 10px;
    width: 100%;
    text-align: center;
}
.pwa_alert{
    background: var(--background-start-rgb);
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 9999999999999999999;
    display: flex;
    text-align: center;
    color: var(--text-end-rgb);
}

.pwa_alert .inner{
    margin: auto;
    padding: 15px;
}
.pwa_alert .app_icon{
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 10px;
}

.pwa_alert p{
    font-size: 15px;
    font-weight: 500;
    padding-bottom: 20px;
    border-bottom: solid 2px var(--primaryColor);
}

.pwa_alert .intall_guide{
    margin-top: 20px;
    list-style: none;
    flex-direction: column;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    gap:20px;
    padding: 0;
}

.pwa_alert .close_pwa{
    position: fixed;
    bottom: 10px;
    width: calc(100% - 20px);
    right: 10px;
    background-color: var(--main-lighter);
    color: #fff;
    text-align: center;
    padding: 10px;
    border-radius: 15px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    outline: none;
    border: none;
}

@media only screen and (max-width: 1000px) {
    .pwa_alert {
        display: flex;
    }
}
.pwa_alert .intall_guide .icon {
    width: 30px;
    height: 30px;
    stroke: var(--text-rbg);
}
.pwa_alert.d-none {
    display: none;
}