/* Boomlog Corporate Theme - VIRAWARE™ */
/* By Babak Arjomandi - viraw.ir */
/* Updated 2026-10-15 (rev 2) */
/* Ver: 8.1 */

@font-face {
    font-family: 'Vazir'; /* thanks to rastikerdar.github.io/vazir-font */
    src: url('https://themes.viraw.ir/fonts/Vazir/Vazir-Light-FD-WOL.eot');
    src: url('https://themes.viraw.ir/fonts/Vazir/Vazir-Light-FD-WOL.eot?#iefix') format('embedded-opentype'),
         url('https://themes.viraw.ir/fonts/Vazir/Vazir-Light-FD-WOL.woff') format('woff'),
         url('https://themes.viraw.ir/fonts/Vazir/Vazir-Light-FD-WOL.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: 'Vazir';
    src: url('https://themes.viraw.ir/fonts/Vazir/Vazir-Bold-FD-WOL.eot');
    src: url('https://themes.viraw.ir/fonts/Vazir/Vazir-Bold-FD-WOL.eot?#iefix') format('embedded-opentype'),
         url('https://themes.viraw.ir/fonts/Vazir/Vazir-Bold-FD-WOL.woff') format('woff'),
         url('https://themes.viraw.ir/fonts/Vazir/Vazir-Bold-FD-WOL.ttf') format('truetype');
    font-style: normal;
    font-weight: bold;
    font-display: swap;
    text-rendering: optimizeLegibility;
}

/* Doran fonts (FontIran) - proprietary, used under license KM6NL3UI - only for Persian poetry blocks (.ppoem) */
@font-face {
    font-family: 'Doran Classic Dots FaNum';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: url('https://themes.viraw.ir/fonts/Doran3Pro/FaNum/woff/DoranClassicDotsFaNum-Regular.woff') format('woff'),
         url('https://themes.viraw.ir/fonts/Doran3Pro/FaNum/woff2/DoranClassicDotsFaNum-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Doran Classic Dots FaNum';
    font-style: normal;
    font-weight: bold;
    font-display: swap;
    src: url('https://themes.viraw.ir/fonts/Doran3Pro/FaNum/woff/DoranClassicDotsFaNum-Bold.woff') format('woff'),
         url('https://themes.viraw.ir/fonts/Doran3Pro/FaNum/woff2/DoranClassicDotsFaNum-Bold.woff2') format('woff2');
}

/* ---------------------------------------------------------------
   Design tokens
   Brand colours (--boom / --back / --love) are still read from the
   site's inline :root block, so changing them in Boomlog settings
   re-colours the whole theme.
---------------------------------------------------------------- */
:root {
    --boom: #F02D2D;
    --back: #282828;
    --love: #F02D2D;
    --logoSize: auto 60px;
    --cc: 4;
    --ccs: 3;
    --scc: 3;
    --sccs: 2;
    --shopCartBG: url(https://www.viraw.ir/content/uploads/shaparak-picme-payment.png) no-repeat top center;
    --shopCartBgSize: auto 120px;

    --ink: #1c1c1c;
    --ink-2: #404040;
    --muted: #6b6b6b;
    --line: #e5e5e5;
    --line-2: #d2d2d2;
    --soft: #f5f5f4;
    --foot: #1c1c1c;
    --foot-2: #141414;
    --boom-a10: rgba(240, 45, 45, .10);
    --boom-a18: rgba(240, 45, 45, .18);

    --r-s: 6px;
    --r-m: 10px;
    --r-l: 14px;
    --wrap: 1320px;
    --gap: 20px;
    --top-h: 72px;
    --nav-h: 52px;
    --shadow-bar: 0 6px 24px -8px rgba(0, 0, 0, .22);
}

@supports (color: color-mix(in srgb, red, blue)) {
    :root {
        --boom-a10: color-mix(in srgb, var(--boom) 10%, transparent);
        --boom-a18: color-mix(in srgb, var(--boom) 18%, transparent);
    }
}

/* ---------------------------------------------------------------
   Base
---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { font-family: 'Vazir', Tahoma, Arial, Helvetica, sans-serif; }

html {
    margin-top: 56px;
    scroll-padding-top: 72px;
    -webkit-text-size-adjust: 100%;
}

@media screen and (min-width: 1201px) {
    html {
        margin-top: calc(var(--top-h) + var(--nav-h));
        scroll-padding-top: calc(var(--top-h) + var(--nav-h) + 16px);
    }
}

body {
    background: #FFFFFF;
    margin: 0;
    padding: 0;
    text-align: center;
    direction: rtl;
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink-2);
    width: 100%;
}

input, button, select, textarea {
    font: inherit;
    -webkit-appearance: none;
    appearance: none;
}

input[type="submit"] { border-radius: var(--r-s); }

input[type="postalcode"], input[type="email"], input[type="url"], input[type="tel"] {
    text-align: left;
    direction: ltr;
}

img[onclick] { cursor: pointer; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, [onclick]:focus-visible {
    outline: 2px solid var(--boom);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

.firstColor { color: var(--muted); }
.secondColor { color: var(--back); }

#parent {
    display: block;
    position: relative;
    margin: 0 auto;
    padding-top: 0;
}

/* ---------------------------------------------------------------
   Top bar: logo - search - account
---------------------------------------------------------------- */
#loginbarBG {
    position: fixed;
    z-index: 150;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: #FFFFFF;
    border-bottom: 1px solid var(--line);
    transition: box-shadow .3s;
}

#loginbarBG[ontop] { box-shadow: var(--shadow-bar); }

#loginbarContainer {
    position: relative;
    height: 100%;
    margin: 0 auto;
    padding: 0 12px;
}

#loginbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    height: 100%;
    margin: 0;
    font-size: 13px;
    color: var(--muted);
    text-align: left;
}

#loginbar span.mobileMenuKey {
    display: block;
    position: fixed;
    top: 5px;
    right: 8px;
    width: 46px;
    height: 46px;
    overflow: hidden;
    color: transparent;
    background: var(--minilogo) no-repeat center center;
    background-size: 40px auto;
    cursor: pointer;
}

#loginbar a.buttonUser {
    display: inline-flex;
    position: relative;
    align-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    color: transparent;
    font-size: 0;
    text-decoration: none;
}

#loginbar a.buttonUser img {
    display: block;
    position: static;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--line);
}

#loginbar a.buttonUser[data-badge]:after {
    content: attr(data-badge);
    position: absolute;
    z-index: 10;
    top: -6px;
    left: -8px;
    width: 18px;
    height: 18px;
    font-size: 10px;
    line-height: 18px;
    text-align: center;
    color: #FFFFFF;
    background: var(--boom);
    border-radius: 50%;
}

#loginbar a.buttonUser[data-badge="0"]:after { display: none; }

#loginbar a.buttonAdmin, #loginbar a.sendPost, #loginbar a.buttonDashboard, #loginbar a.buttonLogout { display: none; }

#loginbar a.buttonLogin, #loginbar a.buttonCart {
    display: inline-block;
    position: relative;
    width: 34px;
    height: 34px;
    color: transparent;
    font-size: 0;
    text-decoration: none;
    background: url(images/icon/n/user.png) no-repeat center center;
    background-size: 20px auto;
    opacity: .8;
}

#loginbar a.buttonCart {
    background-image: url(icons/cart.png);
    background-size: 22px auto;
}

#loginbar a.buttonLogin:hover, #loginbar a.buttonCart:hover { opacity: 1; }

#loginbar a.buttonCart[data-badge]:after {
    content: attr(data-badge);
    position: absolute;
    z-index: 10;
    top: -6px;
    left: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    color: #FFFFFF;
    background: var(--boom);
    border-radius: 9px;
}

#loginbar a.buttonCart[data-badge="0"]:after { display: none; }

/* search */
#searchbar {
    display: block;
    position: fixed;
    z-index: 1000;
    top: 8px;
    left: 56px;
    right: 60px;
    height: 40px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    letter-spacing: normal;
}

#searchInput {
    display: block;
    width: 100%;
    height: 40px;
    margin: 0;
    padding: 0 16px 0 44px;
    font-size: 14px;
    color: var(--ink);
    text-align: right;
    background: var(--soft);
    border: 1px solid transparent;
    border-radius: 999px;
    outline: 0;
    transition: background .15s, border-color .15s, box-shadow .15s;
}

#searchInput::placeholder { color: var(--muted); opacity: 1; }

#searchInput:focus {
    background: #FFFFFF;
    border-color: var(--boom);
    box-shadow: 0 0 0 4px var(--boom-a10);
}

#searchBtn {
    display: block;
    position: absolute;
    top: 4px;
    left: 4px;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    font-size: 0;
    color: transparent;
    border-radius: 50%;
    background: url(images/icon/n/search.png) no-repeat center center;
    background-size: 18px auto;
    opacity: .6;
    cursor: pointer;
}

#searchBtn:hover { opacity: 1; background-color: var(--soft); }

@media screen and (min-width: 1201px) {
    #loginbarBG { height: var(--top-h); }

    #loginbarContainer {
        max-width: var(--wrap);
        height: var(--top-h);
        padding: 0 24px;
        background: var(--logo) no-repeat right 24px center;
        background-size: auto 46px;
    }

    #loginbar span.mobileMenuKey { display: none; }

    #loginbar a.buttonUser {
        width: auto;
        height: 44px;
        gap: 10px;
        padding: 0 6px 0 16px;
        font-size: 14px;
        font-weight: bold;
        color: var(--ink);
        border: 1px solid var(--line);
        border-radius: 999px;
        transition: border-color .15s, background .15s;
    }

    #loginbar a.buttonUser:hover { border-color: var(--line-2); background: var(--soft); }
    #loginbar a.buttonUser img { width: 32px; height: 32px; border: 0; }

    #loginbar a.buttonAdmin {
        display: inline-block;
        width: 44px;
        height: 44px;
        font-size: 0;
        color: transparent;
        border: 1px solid var(--line);
        border-radius: 50%;
        background: url(images/icon/n/apps.png) no-repeat center center;
        background-size: 20px auto;
        opacity: .75;
        transition: opacity .15s, border-color .15s;
    }

    #loginbar a.buttonAdmin:hover { opacity: 1; border-color: var(--line-2); }

    #searchbar {
        top: 14px;
        left: 50%;
        right: auto;
        width: min(520px, 36vw);
        height: 44px;
        transform: translateX(-50%);
    }

    #searchInput { height: 44px; font-size: 14.5px; }
    #searchBtn { top: 6px; left: 6px; }
}

/* ---------------------------------------------------------------
   Header block (optional hero / slideshow area)
---------------------------------------------------------------- */
#headerBG { display: block; position: relative; padding: 0; }
#header { display: block; position: relative; margin: 0 auto; padding: 0; text-align: center; }

/* ---------------------------------------------------------------
   Main menu - mobile drawer
---------------------------------------------------------------- */
#screenbg {
    display: none;
    position: fixed;
    z-index: 110;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .4);
}

#navbarBG {
    display: none;
    position: fixed;
    z-index: 120;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(86vw, 360px);
    padding: 56px 0 0 0;
    overflow: auto;
    background: #FFFFFF;
    box-shadow: -10px 0 30px rgba(0, 0, 0, .25);
}

#navbar { display: block; position: relative; margin: 0 0 40px 0; padding: 0; text-align: right; }
#navbar div[hide] { display: block; }
#navbar span[close] { display: none; }

#navbar a {
    --ico: none;
    display: flex;
    position: relative;
    align-items: center;
    height: 52px;
    padding: 0 54px 0 16px;
    font-size: 16px;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--line);
    background-image: var(--ico);
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 22px 22px;
}

#navbar a:hover { background-color: var(--soft); }
#navbar a:last-child { border-bottom: 0; }

#navbar a[selected] { color: #FFFFFF; background-color: var(--boom); }
#navbar a[selected]:hover { background-color: var(--back); }

#navbar a[home] { --ico: var(--minilogo); background-size: auto 34px; }
#navbar a[home][selected] { --ico: var(--minilogow); }

#navbar a[sendpost] { --ico: url(images/icon/png40/add_40.png); }
#navbar a[dashboard] { --ico: url(images/icon/n/view.png); }
#navbar a[sharing] { --ico: url(images/icon/n/share.png); }
#navbar a[festivals] { --ico: url(images/icon/n/award.png); }
#navbar a[publications] { --ico: url(images/icon/n/book.png); }
#navbar a[admin] { --ico: url(images/icon/n/apps.png); }
#navbar a[map] { --ico: url(images/icon/n/map.png); }
#navbar a[contact] { --ico: url(images/icon/n/contact.png); }
#navbar a[dashboardmenu="mypost"] { --ico: url(images/icon/n/list.png); border-top: 3px solid var(--line); }
#navbar a[dashboardmenu="myorders"] { --ico: url(images/icon/n/list.png); border-top: 3px solid var(--line); }
#navbar a[dashboardmenu="myfriend"] { --ico: url(images/icon/n/users-alt.png); }
#navbar a[dashboardmenu="myinbox"] { --ico: url(images/icon/n/comment.png); }
#navbar a[dashboardmenu="myprofile"] { border-top: 3px solid var(--line); }
#navbar a[dashboardmenu="myusername"] { --ico: url(images/icon/n/id.png); }
#navbar a[dashboardmenu="mycell"] { --ico: url(images/icon/n/cell.png); }
#navbar a[dashboardmenu="myemail"] { --ico: url(images/icon/n/email.png); }
#navbar a[dashboardmenu="myinvitation"] { --ico: url(images/icon/n/invite.png); }
#navbar a[dashboardmenu="mypassword"] { --ico: url(images/icon/n/passkey.png); }
#navbar a[dashboardmenu="logout"] { --ico: url(images/icon/n/lock.png); }

#navbar a[dashboardmenu="myprofile"] img {
    position: absolute;
    top: 11px;
    right: 14px;
    width: 30px;
    height: 30px;
    object-fit: cover;
    border: 2px solid var(--line);
    border-radius: 50%;
}

#navbar #search_bar_btn { display: none; }

#navbar a[dashboardmenu][data-badge]:after {
    content: attr(data-badge);
    position: absolute;
    top: 14px;
    left: 16px;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    font-size: 11px;
    line-height: 24px;
    text-align: center;
    color: #FFFFFF;
    background: var(--boom);
    border-radius: 12px;
}

#navbar a[dashboardmenu][data-badge="0"]:after { display: none; }

/* ---------------------------------------------------------------
   Main menu - full desktop bar (all sections visible)
---------------------------------------------------------------- */
@media screen and (min-width: 1201px) {
    #screenbg { display: none !important; }

    #navbarBG {
        display: block !important;
        position: fixed;
        z-index: 180;
        top: var(--top-h);
        left: 0;
        right: 0;
        bottom: auto;
        width: auto;
        height: var(--nav-h);
        padding: 0;
        overflow: visible;
        background: var(--back);
        box-shadow: none;
        transition: box-shadow .3s;
    }

    #navbarBG[ontop] { box-shadow: var(--shadow-bar); }

    #navbar {
        display: flex;
        align-items: stretch;
        max-width: var(--wrap);
        height: var(--nav-h);
        margin: 0 auto;
        padding: 0 24px;
        white-space: nowrap;
    }

    #navbar a {
        height: var(--nav-h);
        padding: 0 20px;
        font-size: 15.5px;
        font-weight: bold;
        color: rgba(255, 255, 255, .78);
        border: 0;
        background-image: none;
        transition: color .15s, background-color .15s;
    }

    #navbar a::after {
        content: "";
        position: absolute;
        right: 20px;
        left: 20px;
        bottom: 0;
        height: 3px;
        background: var(--boom);
        transform: scaleX(0);
        transform-origin: right center;
        transition: transform .2s ease-out;
    }

    #navbar a:hover { color: #FFFFFF; background-color: rgba(255, 255, 255, .05); }
    #navbar a:hover::after { transform: scaleX(1); }

    #navbar a[selected] { color: #FFFFFF; background-color: rgba(255, 255, 255, .08); }
    #navbar a[selected]:hover { background-color: rgba(255, 255, 255, .12); }
    #navbar a[selected]::after { transform: scaleX(1); }

    #navbar a[home], #navbar a[home][selected] { background-image: none; }

    #navbar a[contact] {
        align-self: center;
        height: 38px;
        margin-inline-start: auto;
        padding: 0 22px;
        color: #FFFFFF;
        background-color: var(--boom);
        border-radius: var(--r-s);
    }

    #navbar a[contact]::after { display: none; }
    #navbar a[contact]:hover { background-color: #FFFFFF; color: var(--boom); }

    #navbar a[dashboardmenu], #navbar a[admin], #navbar a[search], #navbar a[sendpost],
    #navbar #search_bar_btn, #navbar span[close] { display: none; }
}

/* sub menu (category tabs) */
#submenubarBG { display: block; padding: 0; text-align: center; clear: both; background: #FFFFFF; }
#submenubarBG:has(#submenubar) { border-bottom: 1px solid var(--line); }

#submenubar {
    display: flex;
    gap: 4px;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 12px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
}

#submenubar::-webkit-scrollbar { display: none; }

#submenubar a {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    height: 52px;
    padding: 0 16px;
    font-size: 15px;
    color: var(--muted);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: color .15s, border-color .15s;
}

#submenubar a:hover { color: var(--ink); border-bottom-color: var(--line-2); }
#submenubar a[selected] { color: var(--ink); font-weight: bold; border-bottom-color: var(--boom); }

@media screen and (min-width: 1201px) {
    #submenubar { padding: 0 24px; }
}

#fullWidthView { display: block; text-align: center; clear: both; }

/* ---------------------------------------------------------------
   Page frame
---------------------------------------------------------------- */
#pageBodyBG { display: block; padding: 0; text-align: center; overflow: hidden; clear: both; background: #FFFFFF; }

#pageBody {
    display: flow-root;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 20px 12px 40px 12px;
    text-align: right;
}

@media screen and (min-width: 1201px) {
    #pageBody { padding: 32px 24px 56px 24px; }
}

#BodyContain { display: block; min-height: 40vh; }
#BodyContain, #BodySide { white-space: normal; }
#BodySide { display: block; margin: 0; padding: 0; text-align: center; }
#adsBlock { display: block; padding: 0; }

#BodyContainInner iframe { display: block; width: 100%; height: calc(100vh - 120px); border: 0; overflow: hidden; }
@media only screen and (max-width: 480px) { #BodyContainInner iframe { height: calc(100vh - 56px); } }

iframe.videoFrame { display: block; width: 100%; height: 55vh; border: 0; }
iframe.headerPano { display: block; width: 100%; height: 75vh; border: 0; }
iframe.miniMapFrame { display: block; width: 100%; height: 296px; margin: 0 0 10px 0; padding: 0; border: 0; }

/* ---------------------------------------------------------------
   Footer
---------------------------------------------------------------- */
#quickSitemapBG { display: block; padding: 0; text-align: center; color: #FFFFFF; background: var(--foot); border-top: 4px solid var(--boom); }

#quickSitemap {
    display: block;
    position: relative;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 44px 16px 28px 16px;
    text-align: right;
}

#quickSitemap > div > ul {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#quickSitemap > div > ul > li { display: block; margin: 0; padding: 0; min-width: 0; }

#quickSitemap > div > ul > li > a {
    display: block;
    position: relative;
    margin: 0 0 14px 0;
    padding: 0 0 12px 0;
    font-size: 17px;
    font-weight: bold;
    line-height: 1.6;
    color: #FFFFFF;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}

#quickSitemap > div > ul > li > a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    width: 40px;
    height: 2px;
    background: var(--boom);
}

#quickSitemap > div > ul > li > ul { display: block; margin: 0; padding: 0; list-style: none; }
#quickSitemap > div > ul > li > ul > li { display: block; margin: 0; padding: 0; }

#quickSitemap > div > ul > li > ul > li > a {
    display: inline-block;
    padding: 3px 0;
    font-size: 14.5px;
    line-height: 1.9;
    color: rgba(255, 255, 255, .68);
    text-decoration: none;
    transition: color .15s;
}

#quickSitemap > div > ul > li > ul > li > a:hover { color: #FFFFFF; text-decoration: underline; text-decoration-color: var(--boom); text-underline-offset: 5px; }

@media screen and (max-width: 900px) {
    #quickSitemap > div > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
}

@media screen and (max-width: 480px) {
    #quickSitemap { padding: 32px 16px 12px 16px; }
    #quickSitemap > div > ul { grid-template-columns: 1fr; gap: 24px; }
}

#footerBG { display: block; padding: 0; text-align: center; background: var(--foot-2); }

#footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 32px;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 24px 16px;
    font-size: 13.5px;
    line-height: 2;
    color: rgba(255, 255, 255, .6);
    text-align: right;
}

#footer a { color: rgba(255, 255, 255, .86); text-decoration: none; }
#footer a:hover { color: #FFFFFF; text-decoration: underline; text-decoration-color: var(--boom); text-underline-offset: 4px; }
#footer col1 { display: block; flex: 1 1 360px; min-width: 0; }
#footer col1 a { padding: 0 6px; }
#footer col2 { display: flex; gap: 8px; flex: 0 0 auto; }
#footer span.logo { display: none; }

#footer .social {
    display: inline-block;
    width: 38px;
    height: 38px;
    border-radius: var(--r-m);
    background-color: #FFFFFF;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 22px 22px;
    filter: grayscale(1);
    opacity: .85;
    transition: filter .15s, opacity .15s, transform .15s;
}

#footer .social:hover { filter: none; opacity: 1; transform: translateY(-2px); text-decoration: none; }

a.linkedin { background-image: url(images/social/linkedin.png); }
a.youtube { background-image: url(images/social/youtube.png); }
a.facebook { background-image: url(images/social/facebook.png); }
a.instagram { background-image: url(images/social/instagram.png); }
a.twitter { background-image: url(images/social/twitter.png); }
a.google { background-image: url(images/social/googleplus.png); }
a.rssfeed { background-image: url(images/social/rssfeed.png); }
a.telegram { background-image: url(images/social/telegram.png); }
a.googleStore { background: url(images/icon/en_generic_rgb_wo_45.png) no-repeat center center; }
a.appleStore { background: url(images/icon/en_appstore_45.png) no-repeat center center; }

#orgLogos {
    display: flex;
    flex: 1 0 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    order: 3;
    margin: 0;
    padding: 20px 0 0 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

#enamad {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    background: #FFFFFF;
    border-radius: var(--r-m);
}

#enamad img { display: block; height: 64px; width: auto; }
#shaparak { display: block; height: 76px; width: auto; padding: 6px 10px; background: #FFFFFF; border-radius: var(--r-m); }

/* ---------------------------------------------------------------
   Floating buttons
---------------------------------------------------------------- */
#supportChat {
    direction: ltr;
    display: block;
    position: fixed;
    z-index: 1000;
    left: 16px;
    bottom: 88px;
    width: auto;
    max-width: 48px;
    height: 48px;
    padding: 0 0 0 48px;
    overflow: hidden;
    font-size: 17px;
    font-weight: bold;
    line-height: 48px;
    white-space: nowrap;
    color: transparent;
    cursor: pointer;
    background: var(--boom) url(icons/contact_w.png) no-repeat left 10px center;
    background-size: 28px auto;
    border-radius: 24px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
    transition: max-width .35s ease, color .2s, background-color .2s, padding .35s;
}

#supportChat:hover, #supportChat:focus-visible { max-width: 260px; padding-right: 20px; color: #FFFFFF; background-color: var(--back); }

#sharingUrlButton {
    position: fixed;
    display: block;
    width: 48px;
    height: 48px;
    left: 16px;
    bottom: 24px;
    z-index: 50;
    overflow: hidden;
    cursor: pointer;
    background: #FFFFFF url(images/icon/n/share.png) no-repeat center center;
    background-size: 22px auto;
    border: 1px solid var(--line);
    border-radius: 50%;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}

#sharingUrlButton:hover { background-color: var(--soft); }
/* ---------------------------------------------------------------
   Home sections  (bondWrap > h1 + h2 + bond > div.postItem)
---------------------------------------------------------------- */
#postsList { display: block; }

bondWrap {
    display: block;
    margin: 0 0 28px 0;
    padding: 24px 20px 8px 20px;
    background: var(--soft);
    border-radius: var(--r-l);
}

bondWrap h1 {
    display: block;
    margin: 0;
    font-size: 26px;
    line-height: 1.5;
    font-weight: bold;
    text-align: right;
    color: var(--ink);
}

bondWrap h1 a {
    display: inline-block;
    position: relative;
    padding-inline-start: 18px;
    font-size: inherit;
    color: var(--ink);
    text-decoration: none;
    transition: color .15s;
}

bondWrap h1 a::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: .25em;
    bottom: .25em;
    width: 5px;
    background: var(--boom);
    border-radius: 3px;
}

bondWrap h1 a:hover { color: var(--boom); }

bondWrap h2 {
    display: block;
    margin: 4px 0 18px 0;
    padding-inline-start: 18px;
    font-size: 15px;
    line-height: 1.8;
    font-weight: normal;
    text-align: right;
    color: var(--muted);
}

bondWrap h2 a { color: inherit; text-decoration: none; }
bondWrap h2 a:hover { color: var(--boom); text-decoration: underline; text-underline-offset: 4px; }

bond {
    --n: var(--cc, 4);
    display: flex;
    gap: var(--gap);
    margin: 0;
    padding: 4px 2px 20px 2px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: var(--line-2) transparent;
}

bond[type] { background: transparent !important; animation: none; }

bond::-webkit-scrollbar { height: 6px; background: transparent; }
bond::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }
bond::-webkit-scrollbar-thumb:hover { background: var(--muted); }
bond::-webkit-scrollbar-track { background: transparent; }

bond div.postItem {
    flex: 0 0 calc((100% - (var(--n) - 1) * var(--gap)) / var(--n));
    width: auto;
    min-width: 0;
    margin: 0;
    scroll-snap-align: start;
}

@media screen and (max-width: 1200px) { bond { --n: var(--ccs, 3); } }
@media screen and (max-width: 800px) {
    bond { --n: var(--sccs, 2); }
    bondWrap { padding: 18px 12px 4px 12px; }
    bondWrap h1 { font-size: 21px; }
    bondWrap h2 { font-size: 14px; margin-bottom: 14px; }
}
@media screen and (max-width: 520px) { bond { --n: 1.25; } }

.gradientBG1, .gradientBG2 { background: transparent; animation: none; }

/* ---------------------------------------------------------------
   Cards  (products, services, posts)
---------------------------------------------------------------- */
#postsListColumn {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--gap);
    padding: 4px 0 24px 0;
}

@media screen and (max-width: 520px) { #postsListColumn { grid-template-columns: 1fr; } }

div.postItem {
    display: flex;
    flex-direction: column;
    position: relative;
    width: auto;
    margin: 0;
    padding: 14px 14px 18px 14px;
    color: var(--ink-2);
    text-align: center;
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: var(--r-m);
    transition: border-color .2s, transform .2s, box-shadow .2s;
}

div.postItem:hover {
    border-color: var(--line-2);
    transform: translateY(-3px);
    box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .28);
}

div.postItem[posttype="Post" i] { text-align: right; }

div.postItem[verified] { border: 2px solid #d32942; }
div.postItem[homegroup="2"] { background: var(--boom); border-color: var(--boom); }
div.postItem[homegroup="2"] a[title], div.postItem[homegroup="2"] span[shortdes], div.postItem[homegroup="2"] span[subtitle] { color: #FFFFFF; }

div.postItem span[image] {
    display: block;
    position: relative;
    margin: 0 0 14px 0;
    padding: 0;
    overflow: hidden;
    background: var(--soft);
    border-radius: var(--r-s);
}

div.postItem span[image] img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    margin: 0;
    border: 0;
    object-fit: contain;
    mix-blend-mode: multiply;
    cursor: pointer;
    transition: transform .4s ease;
}

div.postItem:hover > span[image] > img { transform: scale(1.03); }

div.postItem[posttype="Post" i] span[image] img { aspect-ratio: 16 / 10; object-fit: cover; mix-blend-mode: normal; }

div.postItem[posttype="People" i] span[image] { background: none; border-radius: 0; }
div.postItem[posttype="People" i] span[image] img { aspect-ratio: 1 / 1; object-fit: cover; mix-blend-mode: normal; border-radius: 50%; }

div.postItem span[image] discount {
    display: block;
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
    min-width: 50px;
    padding: 0 8px;
    font-size: 22px;
    font-weight: bold;
    line-height: 34px;
    text-align: center;
    color: #FFFFFF;
    background: var(--boom);
}

div.postItem span[image] discount:before { content: '%'; font-size: 16px; }

div.postItem a[title] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: 3em;
    margin: 0 0 4px 0;
    padding: 0;
    font-size: 17px;
    font-weight: bold;
    line-height: 1.5;
    color: var(--ink);
    text-decoration: none;
    transition: color .15s;
}

div.postItem a[title]:hover { color: var(--boom); }
div.postItem[verified] a[title] { color: #d32942; }
div.postItem a[title][noimage] { padding-top: 40px; border-top: 4px solid var(--line); }

div.postItem span[subtitle] {
    display: block;
    margin: 0 0 8px 0;
    font-size: 13.5px;
    font-weight: bold;
    line-height: 1.7;
    color: var(--boom);
}

div.postItem span[shortdes] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    margin: 0 0 16px 0;
    font-size: 14.5px;
    line-height: 1.9;
    color: var(--ink-2);
}

div.postItem span[time] { display: block; padding: 4px 0; font-size: 12px; color: var(--muted); }

div.postItem span[price] {
    display: inline-block;
    position: relative;
    align-self: center;
    margin: auto 0 0 0;
    padding: 6px 16px 6px 16px;
    padding-right: 40px;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.8;
    white-space: nowrap;
    color: var(--ink);
    cursor: pointer;
    background: #FFFFFF url(icons/cart.png) no-repeat right 14px center;
    background-size: 16px auto;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    transition: color .15s, background-color .15s, border-color .15s;
}

div.postItem span[price]:hover { color: #FFFFFF; background-color: var(--boom); background-image: url(icons/cart_w.png); border-color: var(--boom); }

div.postItem span[price][incart]:after {
    content: '\1F6D2';
    position: absolute;
    z-index: 10;
    top: -9px;
    right: -9px;
    width: 22px;
    height: 22px;
    font-size: 13px;
    line-height: 22px;
    text-align: center;
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: 50%;
}

div.postItem span[userIcon] { display: block; position: absolute; z-index: 10; top: 22px; right: 22px; text-align: left; }
div.postItem span[userIcon] a img { display: inline-block; width: 44px; height: 44px; vertical-align: middle; border: 3px solid rgba(255, 255, 255, .6); border-radius: 50%; }
div.postItem span[userIcon] a span { display: inline-block; padding: 0 10px; font-size: 10px; line-height: 24px; color: transparent; vertical-align: middle; }
div.postItem span[userIcon] a:hover > span { color: #FFFFFF; background: rgba(0, 0, 0, .6); }

/* ---------------------------------------------------------------
   Detail page (product / service / post)
---------------------------------------------------------------- */
div.postDetail {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 40px;
    align-items: start;
    position: relative;
    margin: 0 0 36px 0;
    padding: 0;
    color: var(--ink-2);
    text-align: right;
}

div.postDetail > * { grid-column: 1 / -1; }
div.postDetail[posttype="Post" i] { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
div.postDetail > div[mediaview] { grid-column: 1; }
div.postDetail > div[container] { grid-column: 2; }
div.postDetail:not(:has(> div[mediaview])) > div[container] { grid-column: 1 / -1; }

@media screen and (max-width: 1024px) {
    div.postDetail { display: block; }
    div.postDetail > div[mediaview], div.postDetail > div[container] { width: 100%; }
}

div.postDetail[verified] { background: linear-gradient(0deg, #e4eae6 0%, transparent 40px); }
div.postDetail video { display: block; width: 100%; border-radius: var(--r-m); }

div.postDetail span[editpost] {
    display: block;
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    padding: 2px 14px;
    font-size: 12px;
    line-height: 26px;
    color: #FFFFFF;
    cursor: pointer;
    background: var(--ink);
    border-radius: var(--r-s);
    opacity: .55;
    transition: opacity .15s, background .15s;
}

div.postDetail span[editpost]:hover { opacity: 1; background: var(--boom); }

div.postDetail div[navigation] {
    display: block;
    padding: 0;
    margin: 0 0 8px 0;
    font-size: 13px;
    line-height: 2;
    text-align: right;
}

div.postDetail div[navigation] a {
    display: inline-block;
    font-size: 13.5px;
    font-weight: normal;
    color: var(--muted);
    text-decoration: none;
}

div.postDetail div[navigation] a::after { content: "/"; padding: 0 8px; color: var(--line-2); }
div.postDetail div[navigation] a:hover { color: var(--boom); }
div.postDetail div[navigation] a:last-child { color: var(--ink); }
div.postDetail div[navigation] a:last-child::after { content: ""; padding: 0; }

div.postDetail h1 {
    display: block;
    margin: 0;
    padding: 4px 0 4px 0;
    font-size: 34px;
    line-height: 1.5;
    font-weight: bold;
    color: var(--ink);
}

div.postDetail h1 a { font-size: inherit; color: inherit; text-decoration: none; }
div.postDetail h1 a:hover { color: var(--boom); }

div.postDetail h2 {
    display: block;
    margin: 0;
    padding: 0 0 6px 0;
    font-size: 18px;
    line-height: 1.8;
    font-weight: normal;
    white-space: break-spaces;
    color: var(--ink-2);
}

div.postDetail h2[subtitle] { font-size: 16px; font-weight: bold; color: var(--boom); }
div.postDetail h2[description] { margin-bottom: 28px; font-weight: bold; color: var(--ink-2); }

div.postDetail[lang="en"] h2, div.postDetail h1[lang="en"] { font-family: Arial, Helvetica, sans-serif; direction: ltr; text-align: left; }

div.postDetail div[mediaview] { position: relative; display: block; margin: 0; padding: 0; }

@media screen and (min-width: 1025px) {
    div.postDetail div[mediaview] { position: sticky; top: calc(var(--top-h) + var(--nav-h) + 20px); }
}

div.postDetail span[image] {
    display: block;
    padding: 16px;
    overflow: hidden;
    text-align: center;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: var(--r-m);
}

div.postDetail span[image] img { display: block; width: 100%; max-height: 52vh; margin: 0 auto; border: 0; object-fit: contain; mix-blend-mode: multiply; }

div.postDetail[posttype="Post" i] span[image] { padding: 0; background: none; border: 0; }
div.postDetail[posttype="Post" i] span[image] img { mix-blend-mode: normal; border-radius: var(--r-m); }

div.postDetail[posttype="People" i] span[image] { padding: 0; background: none; border: 0; }
div.postDetail[posttype="People" i] span[image] img { width: 70%; aspect-ratio: 1 / 1; border-radius: 24%; object-fit: cover; mix-blend-mode: normal; }

div.postDetail div[moreimages] {
    display: flex;
    gap: 10px;
    margin: 12px 0 0 0;
    padding: 0 0 6px 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--line-2) transparent;
}

div.postDetail div[moreimages] img {
    flex: 0 0 auto;
    height: 72px;
    margin: 0;
    padding: 4px;
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    object-fit: contain;
    transition: border-color .15s;
}

div.postDetail div[moreimages] img:hover { border-color: var(--boom); }

div.postDetail ul[extraimage] { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 12px 0; list-style: none; }
div.postDetail ul[extraimage] li { display: block; margin: 0; border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden; }
div.postDetail ul[extraimage] li img { display: block; width: 90px; border: 0; cursor: pointer; }
div.postDetail ul[extraimage] li:hover { border-color: var(--boom); }

div[mediaview] audio {
    display: block;
    position: fixed;
    z-index: 200;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    border: 10px solid var(--back);
    background: var(--back);
    box-shadow: 0 0 20px rgba(0, 0, 0, .5);
}

div.postDetail div[container] { display: flex; flex-flow: column; min-width: 0; margin: 0; padding: 0; overflow: visible; }

/* purchase options */
#selectPostOptions {
    display: block;
    order: 2;
    margin: 0 0 24px 0;
    padding: 18px;
    text-align: right;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: var(--r-m);
}

#postOptions { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 0 16px 0; }

#postOptions postopt {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    padding: 0 18px;
    font-size: 15px;
    font-weight: bold;
    line-height: 1.5;
    color: var(--ink-2);
    cursor: pointer;
    background: #FFFFFF;
    border: 1.5px solid var(--line-2);
    border-radius: var(--r-m);
    transition: border-color .15s, color .15s, box-shadow .15s;
}

#postOptions postopt:hover { border-color: var(--muted); }
#postOptions postopt[selected] { color: var(--boom); border-color: var(--boom); box-shadow: 0 0 0 3px var(--boom-a10); }
#postOptions postopt[outofstock] { opacity: .5; }

div.postDetail div span[price] {
    display: inline-flex;
    align-items: center;
    min-height: 52px;
    margin: 0;
    padding: 0 26px 0 24px;
    padding-right: 54px;
    font-size: 18px;
    font-weight: bold;
    color: #FFFFFF;
    cursor: pointer;
    background: var(--boom) url(images/icon/n/cart_w.png) no-repeat right 18px center;
    background-size: 22px auto;
    border-radius: var(--r-m);
    box-shadow: 0 8px 18px -8px var(--boom);
    transition: background-color .15s;
}

div.postDetail div span[price]:hover { background-color: var(--back); }
div.postDetail div span[price][outofstock] { opacity: .5; cursor: not-allowed; }
div.postDetail div span[priceHint] { display: inline-block; margin: 0 12px; font-size: 13px; color: var(--boom); }

/* long text */
div.postDetail div span[detail] {
    display: block;
    order: 2;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-size: 17px;
    line-height: 2.1;
    color: var(--ink-2);
    text-align: justify;
    white-space: pre-wrap;
}

div.postDetail div span[detail] strong { font-weight: bold; color: var(--ink); }
div.postDetail div span[detail][lang="en"] { font-family: Arial, Helvetica, sans-serif; direction: ltr; text-align: left; }

div.postDetail div span[detail] pre {
    direction: ltr;
    margin: 12px 0;
    padding: 14px;
    overflow-x: auto;
    font-size: 14px;
    line-height: 1.8;
    background: var(--soft);
    border-top: 3px solid var(--back);
    border-radius: var(--r-s);
}

div.postDetail div a { font-weight: bold; color: var(--boom); text-decoration: none; }
div.postDetail div a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
div.postDetail[lang="en"] div a { font-family: Arial, Helvetica, sans-serif; }

.postFooter {
    display: block;
    clear: both;
    margin: 20px 0 0 0;
    padding: 14px 0 0 0;
    font-size: 15px;
    line-height: 2;
    color: var(--muted);
    border-top: 1px solid var(--line);
}

a.autoLink { color: var(--boom); text-decoration: none; }
a.autoLink:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

img.autoLink, figure.autoLink { display: block; width: 100%; max-width: 560px; margin: 12px auto; border-radius: var(--r-m); }
figure.autoLink { padding: 0; overflow: hidden; background: var(--soft); border: 1px solid var(--line); }
figure img { display: block; width: 100%; }
figcaption { padding: 8px 12px; font-size: 13px; line-height: 1.8; color: var(--muted); }
.lineBreak { display: block; clear: both; height: 10px; }

div.postDetail div a[sourceUrl] {
    display: inline-block;
    order: 2;
    margin: 12px 0;
    padding: 6px 12px 6px 36px;
    font-size: 15px;
    font-weight: bold;
    color: var(--ink);
    background: var(--soft) url(images/icon/n/link.png) no-repeat 12px center;
    background-size: 14px auto;
    border: 1px solid var(--line);
    border-radius: var(--r-s);
}

div.postDetail div a[sourceUrl]:hover { color: var(--boom); text-decoration: none; }

div.postDetail span[map] { display: block; clear: both; padding: 8px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-m); }

/* author */
div.postDetail div span[userinfo] {
    display: flex;
    align-items: center;
    order: 3;
    gap: 10px;
    padding: 14px 0;
    font-size: 16px;
}

div.postDetail div span[userinfo] img { height: 44px; border: 1px solid var(--line); border-radius: 50%; }
div.postDetail div span[userinfo] span[connect] { margin-inline-start: auto; }
div.postDetail div span[userinfo] span[friend] { padding: 4px 10px; font-size: 13px; border-radius: var(--r-s); }
div.postDetail div span[userinfo] span[sendmessage] { padding: 4px 18px; line-height: 26px; color: transparent; background: var(--boom) url(images/icon/n/comment_w.png) no-repeat center center; background-size: 20px auto; border-radius: var(--r-s); }

/* categories & keywords */
div.postDetail div span[keywords], div.postDetail div span[categories] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    order: 5;
    gap: 4px 10px;
    margin: 0 0 6px 0;
    padding: 0;
    font-size: 14px;
    line-height: 2;
    color: var(--muted);
}

div.postDetail div span[keywords] { margin-top: 14px; }
div.postDetail div span[keywords] span[info], div.postDetail div span[categories] span[info] { display: flex; flex-wrap: wrap; gap: 6px; }

div.postDetail div span[keywords] span[info] a, div.postDetail div span[categories] span[info] a {
    display: inline-block;
    padding: 0 12px;
    font-size: 13px;
    font-weight: normal;
    line-height: 28px;
    color: var(--ink-2);
    text-decoration: none;
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: 999px;
    transition: color .15s, border-color .15s, background .15s;
}

div.postDetail div span[keywords] span[info] a:hover, div.postDetail div span[categories] span[info] a:hover { color: #FFFFFF; background: var(--boom); border-color: var(--boom); text-decoration: none; }

div.postDetail div span[more] { display: flex; align-items: center; order: 6; margin: 10px 0 0 0; padding: 14px 0 0 0; font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); }
div.postDetail div span[more] span.viewed { display: inline-block; padding: 0 12px; font-size: 13px; line-height: 28px; color: var(--muted); background: var(--soft); border-radius: 999px; }
div.postDetail div span[time] { display: inline-block; padding: 0; font-size: 13px; color: var(--muted); }
div.postDetail[posttype="People" i] div span[time] { display: none; }
div.postDetail div span[more] span.rating { margin-inline-start: auto; }

/* like / dislike */
span.opinionCtrl { display: flex; overflow: hidden; border-radius: var(--r-s); font-size: 12px; line-height: 28px; }
span.opinionCtrl span[like], span.opinionCtrl span[dislike] { min-width: 32px; padding: 0 8px; text-align: center; color: #FFFFFF; cursor: pointer; }
span.opinionCtrl span[like] { background: var(--boom); }
span.opinionCtrl span[dislike] { background: var(--back); }
span.opinionCtrl span[like]:hover { background: #c01616; }
span.opinionCtrl span[dislike]:hover { background: #000000; }
div.postDetail span.opinionCtrl { position: absolute; z-index: 50; top: 10px; right: 10px; }

/* ---------------------------------------------------------------
   Comments
---------------------------------------------------------------- */
div.newCommentPanel { display: block; clear: both; margin: 24px 0 0 0; padding: 20px 0 0 0; overflow: visible; border-top: 1px solid var(--line); }

div.newComment { margin: 0 0 10px 0; padding: 0; border: 0; }
div.newCommentPanel > div.newCommentForm, div.newCommentPanel > #commentFormControl { margin-top: 18px; }
div.newComment a[commnetUserName] { display: block; margin: 0 0 2px 0; padding: 0; font-size: 14.5px; font-weight: bold; line-height: 1.7; color: var(--ink); text-decoration: none; }
div.newComment a[commnetUserName]:hover { color: var(--boom); }
div.newComment img[commnetUserImg] { display: block; float: right; width: 38px; height: 38px; margin: 0 0 0 12px; object-fit: cover; border-radius: 50%; }

span[parentComment], span[childComment] {
    display: block;
    position: relative;
    padding: 14px 18px 12px 18px;
    overflow: hidden;
    font-size: 14.5px;
    line-height: 2;
    color: var(--ink-2);
    text-align: justify;
    white-space: pre-wrap;
    background: var(--soft);
    border-radius: var(--r-m);
}

span[childComment] { background: #FFFFFF; border: 1px solid var(--line); border-right: 3px solid var(--line-2); }
div.newComment:has(> span[childComment][level="2"]) { margin-right: 24px; }
div.newComment:has(> span[childComment][level="3"]) { margin-right: 48px; }
div.newComment:has(> span[childComment][level="4"]) { margin-right: 72px; }
div.newComment:has(> span[childComment][level="5"]) { margin-right: 96px; }
div.newComment:has(> span[childComment][level="6"]) { margin-right: 120px; }
span[datetime] { display: block; clear: both; margin: 8px 0 0 0; font-size: 11.5px; line-height: 1.6; text-align: left; color: var(--muted); }

span[replyComment] {
    display: block;
    position: absolute;
    bottom: 12px;
    right: 18px;
    width: 22px;
    height: 22px;
    cursor: pointer;
    background: url(images/icon/n/reply.png) no-repeat center center;
    background-size: auto 18px;
    opacity: .6;
}

span[replyComment]:hover { opacity: 1; }

div.newCommentForm { display: block; margin: 0; padding: 0; color: var(--ink); background: #FFFFFF; }

#newCommentFormIn {
    display: block;
    position: relative;
    padding: 12px 56px 52px 14px;
    background: #FFFFFF;
    border: 1px solid var(--line-2);
    border-radius: var(--r-m);
    transition: border-color .15s, box-shadow .15s;
}

#newCommentFormIn:focus-within { border-color: var(--boom); box-shadow: 0 0 0 4px var(--boom-a10); }

#newCommentFormIn textarea {
    display: block;
    width: 100%;
    height: 14vh;
    min-height: 84px;
    margin: 0;
    padding: 0;
    font-size: 15px;
    line-height: 2;
    color: var(--ink);
    resize: vertical;
    background: transparent;
    border: 0;
    outline: 0;
}

div.newCommentPanelHeader { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; }
div.newCommentPanelHeader img { display: block; width: 34px; height: 34px; margin: 0; object-fit: cover; border-radius: 50%; }

div.newCommentForm input[type="submit"] {
    display: block;
    position: absolute;
    bottom: 10px;
    left: 10px;
    height: 34px;
    min-width: 72px;
    padding: 0 18px;
    font-size: 14px;
    font-weight: bold;
    line-height: 34px;
    color: #FFFFFF;
    cursor: pointer;
    background: var(--boom);
    border: 0;
    border-radius: var(--r-s);
    transition: background-color .15s;
}

div.newCommentForm input[type="submit"]:hover { background: var(--back); }
#rateSelCtrl { position: absolute; bottom: 10px; right: 10px; }
#parentCommentID { display: none; }

span.ratingSelector, span.rating { display: inline-block; width: 80px; height: 16px; margin: 9px 5px; padding: 0; background: url(images/rating.png) no-repeat left 0; }
span.rating { width: auto; margin: 0; padding-left: 85px; line-height: 16px; white-space: nowrap; }
span.ratingSelector rate { display: block; float: left; width: 16px; height: 16px; margin: 0; padding: 0; cursor: pointer; }
span.s0 { background-position: left 0; } span.s1 { background-position: left -16px; } span.s2 { background-position: left -32px; }
span.s3 { background-position: left -48px; } span.s4 { background-position: left -64px; } span.s5 { background-position: left -80px; }
span.s6 { background-position: left -96px; } span.s7 { background-position: left -112px; } span.s8 { background-position: left -128px; }
span.s9 { background-position: left -144px; } span.s10 { background-position: left -160px; }

/* ---------------------------------------------------------------
   Image viewer (modal)
---------------------------------------------------------------- */
.modal { display: none; position: fixed; z-index: 2000; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; padding: 0; overflow: hidden; background: rgba(20, 20, 20, .94); }
.modal-content { display: block; width: 100%; height: 100%; margin: auto; padding: 56px 72px; object-fit: contain; }
.modal-content, #modalcaption { animation: modalZoom .3s ease-out; }
@keyframes modalZoom { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }

#modalcaption { display: block; position: fixed; left: 0; right: 0; bottom: 0; padding: 0 20px; font-size: 15px; line-height: 40px; text-align: right; color: #FFFFFF; background: rgba(0, 0, 0, .35); }

.modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 44px;
    height: 44px;
    padding: 0;
    font-size: 0;
    color: transparent;
    cursor: pointer;
    background: #FFFFFF url(icons/close.png) no-repeat center center;
    background-size: 20px auto;
    border: 0;
    border-radius: 50%;
    transition: background-color .15s;
}

.modal-close:hover, .modal-close:focus { background-color: var(--boom); background-image: url(icons/close_w.png); }

.nav-btn {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 48px;
    height: 48px;
    padding: 0 0 4px 0;
    font-size: 32px;
    line-height: 44px;
    color: #FFFFFF;
    cursor: pointer;
    background: rgba(255, 255, 255, .14);
    border: 0;
    border-radius: 50%;
    transform: translateY(-50%);
    transition: background-color .15s;
}

.nav-btn:hover { background: rgba(255, 255, 255, .3); }
#prevBtn { right: 14px; }
#nextBtn { left: 14px; }

@media only screen and (max-width: 700px) { .modal-content { padding: 56px 0; } .nav-btn { width: 40px; height: 40px; font-size: 26px; line-height: 36px; } }

/* ---------------------------------------------------------------
   Paging
---------------------------------------------------------------- */
#pagingCtrl { clear: both; display: block; margin: 0; padding: 12px 0; overflow: hidden; line-height: 40px; text-align: center; color: var(--muted); }
#pagingCtrl a { text-decoration: none; }
#pagingCtrl pagingRowCount { display: none; }

#pagingCtrl pagingFirst, #pagingCtrl a[pagingFirst], #pagingCtrl pagingPrevious, #pagingCtrl a[pagingPrevious],
#pagingCtrl pagingNext, #pagingCtrl a[pagingNext], #pagingCtrl pagingLast, #pagingCtrl a[pagingLast] {
    display: inline-block;
    width: 36px;
    height: 40px;
    margin: 0;
    vertical-align: middle;
    cursor: pointer;
    background: no-repeat center center;
    border: 0;
    border-radius: var(--r-s);
}

#pagingCtrl pagingFirst, #pagingCtrl a[pagingFirst] { background-image: url('images/paging_last.png'); }
#pagingCtrl pagingPrevious, #pagingCtrl a[pagingPrevious] { background-image: url('images/paging_next.png'); }
#pagingCtrl pagingNext, #pagingCtrl a[pagingNext] { background-image: url('images/paging_previous.png'); }
#pagingCtrl pagingLast, #pagingCtrl a[pagingLast] { background-image: url('images/paging_first.png'); }
#pagingCtrl pagingFirst:hover, #pagingCtrl a[pagingFirst]:hover, #pagingCtrl pagingPrevious:hover, #pagingCtrl a[pagingPrevious]:hover,
#pagingCtrl pagingNext:hover, #pagingCtrl a[pagingNext]:hover, #pagingCtrl pagingLast:hover, #pagingCtrl a[pagingLast]:hover { background-color: var(--soft); }

#pagingCtrl pagingState, #pagingCtrl a[pagingState] { display: inline-block; margin: 0 2px; padding: 0 6px; font-size: 15px; line-height: 40px; color: var(--muted); vertical-align: middle; }

#pagingCtrl pagingPage, #pagingCtrl a[pagingPage] {
    display: inline-block;
    min-width: 40px;
    height: 40px;
    margin: 0 3px;
    padding: 0 8px;
    font-size: 15px;
    font-weight: bold;
    line-height: 40px;
    text-align: center;
    color: var(--ink-2);
    cursor: pointer;
    vertical-align: middle;
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    transition: border-color .15s, color .15s;
}

#pagingCtrl pagingPage:hover, #pagingCtrl a[pagingPage]:hover { color: var(--boom); border-color: var(--boom); }

#pagingCtrl pagingActive, #pagingCtrl a[pagingActive] {
    display: inline-block;
    min-width: 40px;
    height: 40px;
    margin: 0 3px;
    padding: 0 8px;
    font-size: 15px;
    font-weight: bold;
    line-height: 40px;
    text-align: center;
    color: #FFFFFF;
    vertical-align: middle;
    background: var(--boom);
    border: 1px solid var(--boom);
    border-radius: var(--r-s);
}

/* ---------------------------------------------------------------
   Icons on media thumbnails
---------------------------------------------------------------- */
span[image] span[videoicon], span[image] span[panoramaicon], span[image] span[liveicon], span[image] span[waveicon] {
    display: block;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
    background: no-repeat center center;
    background-size: 22% auto;
    opacity: .55;
    transition: opacity .3s;
}

span[image] span[videoicon] { background-image: url(images/playw.png); }
span[image] span[panoramaicon] { background-image: url(images/panoramaw.png); }
span[image] span[liveicon] { background-image: url(images/liveicon.png); }
span[image] span[waveicon] { background-image: url(images/wavew.png); }
span[image] span[videoicon]:hover, span[image] span[panoramaicon]:hover, span[image] span[liveicon]:hover, span[image] span[waveicon]:hover { opacity: .85; }
/* ---------------------------------------------------------------
   Forms & panels
---------------------------------------------------------------- */
div.formPanel { display: block; max-width: var(--wrap); margin: 0 auto 16px auto; padding: 0 20px 4px 20px; text-align: right; background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--r-l); }
div.formPanel h1 { display: block; margin: 0 -20px 12px -20px; padding: 16px 20px; font-size: 18px; font-weight: bold; line-height: 40px; color: var(--ink); border-bottom: 1px solid var(--line); }
div.formPanel h1 img { height: 40px; margin: 0 10px; vertical-align: bottom; border-radius: 50%; }
div.formPanel h2 { display: block; padding: 8px 0; font-size: 16px; font-weight: normal; line-height: 30px; color: var(--ink-2); }
div.formPanel div[box] { display: block; padding: 10px 0 0 0; font-size: 13px; line-height: 25px; }
div.formPanel div div { display: block; position: relative; padding: 10px 0; }
div.formPanel div.highlight { margin: 5px 0; padding: 10px; font-weight: bold; background: var(--soft); border-radius: var(--r-s); }
div.formPanel div[actionbar] { display: block; margin: 8px -20px 0 -20px; padding: 16px 20px 22px 20px; line-height: 35px; text-align: center; color: #1b7f4f; }
div.formPanel div[actionbar] input[type="submit"], .defaultButton { display: inline-block; min-width: 90px; height: 46px; margin: 0 0 0 10px; padding: 0 28px; font-size: 15px; font-weight: bold; line-height: 46px; text-align: center; color: #FFFFFF; cursor: pointer; vertical-align: top; background: var(--boom); border: 0; border-radius: var(--r-s); transition: background-color .15s; }
div.formPanel div[actionbar] input[type="submit"]:hover, .defaultButton:hover { background: var(--back); }
div.formPanel div span { display: inline-block; width: 19%; margin-left: 1%; font-size: 14px; color: var(--ink); text-align: left; }

.formcontrols { display: inline-block; width: 80%; min-height: 30px; font-size: 16px; vertical-align: middle; white-space: nowrap; }

.cssControl { display: inline-block; height: 40px; padding: 0 12px; line-height: 40px; vertical-align: middle; color: var(--ink); background-color: #FFFFFF; background-repeat: no-repeat; background-position: left 10px center; background-size: 16px auto; border: 1px solid var(--line-2); border-radius: var(--r-s); transition: border-color .15s, box-shadow .15s; }
.cssControl[type="tel"] { padding-left: 36px; }
select[country], select.cssControl[country] { padding: 0 34px 0 12px; background-position: right 10px center; }
.cssControl:focus { outline: 0; border-color: var(--boom); box-shadow: 0 0 0 3px var(--boom-a10); }
.cssControl[type="file"] { border: 0; }
.cssControl[recheck] { background-color: #fff7d6; border-color: var(--boom); }
.cssControl[disabled] { color: var(--muted); background-color: var(--soft); }

.textboxviewMini { width: calc(80% - 35px); height: 100px; line-height: 1.8; }
.textboxview { width: calc(80% - 35px); height: 250px; line-height: 1.8; }

controlHint { display: inline-block; min-width: 40px; height: 40px; padding: 0 12px; font-size: 14px; line-height: 40px; vertical-align: middle; color: #FFFFFF; cursor: pointer; background: var(--muted); border-radius: var(--r-s); }
controlHint:hover { background: var(--back); }

.w50 { width: calc(10% - 15px); } .w100 { width: calc(15% - 15px); } .w150 { width: calc(20% - 15px); } .w200 { width: calc(25% - 15px); }
.w300 { width: calc(30% - 15px); } .w500 { width: calc(60% - 15px); } .w600 { width: calc(80% - 35px); }

@media screen and (max-width: 640px) {
    div.formPanel { padding: 0 14px 4px 14px; border-radius: var(--r-m); }
    div.formPanel h1 { margin: 0 -14px 10px -14px; padding: 14px; font-size: 16px; }
    div.formPanel div span { display: block; width: 100%; text-align: right; }
    div.formPanel div[actionbar] { margin: 8px -14px 0 -14px; }
    .formcontrols { display: block; width: 100%; }
    .w50, .w100, .w150 { width: calc(25% - 15px); }
    .w200, .w300, .w500, .w600, .textboxview, .textboxviewMini { width: calc(100% - 35px); }
    controlHint { display: block; height: 32px; margin: 8px 0; line-height: 32px; font-size: 12px; text-align: left; color: var(--boom); background: none; }
}

div.contactUsForm input { margin: 0 0 10px 0; border: 1px solid var(--line-2); }
div.contactUsFormHeader { display: block; margin: 0 -20px 15px -20px; padding: 14px 20px; font-size: 14px; color: var(--boom); border-bottom: 3px solid var(--boom); }

input[type="checkbox"] { display: none; }
input[type="checkbox"] + label { display: inline-block; width: 22px; height: 22px; margin: 0 0 0 10px; vertical-align: middle; cursor: pointer; background: #FFFFFF; border: 1.5px solid var(--line-2); border-radius: 5px; }
input[type="checkbox"]:checked + label { background: var(--boom) url('images/icon/n/checked.png') no-repeat center center; background-size: 14px auto; border-color: var(--boom); }
input[type="checkbox"]:disabled { display: inline-block; width: 20px; height: 20px; vertical-align: middle; }

/* login / register panels */
#logingPanels { padding: 20px 10px; text-align: right; }
#logingPanels section { display: block; max-width: 500px; margin: 12px auto; overflow: hidden; background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: 0 12px 32px -16px rgba(0, 0, 0, .25); }
.showHand { cursor: pointer; }
.section-title { display: block; min-height: 30px; padding: 18px 22px; font-size: 21px; font-weight: bold; line-height: 30px; text-align: right; color: var(--ink); background: #FFFFFF; border-bottom: 1px solid var(--line); }
.section-action { display: block; height: auto; padding: 14px 20px 22px 20px; text-align: left; color: var(--ink); background: #FFFFFF; }
.section-action input { margin-right: 10px; }
.input-group { display: flex; align-items: stretch; padding: 12px 18px 12px 20px; background: #FFFFFF; border-right: 4px solid transparent; transition: border-color .3s, background-color .3s; }
.input-group[active] { background: var(--soft); border-right-color: var(--boom); }
.input-group-mini { align-items: center; padding: 6px 20px 0 20px; }
.form-description { display: block; margin: 0; padding: 5px 20px; font-size: 12.5px; line-height: 22px; white-space: normal; color: var(--muted); }
.form-lable { flex: 0 0 42px; width: 42px; height: 42px; margin: 0; padding: 0; background-color: #FFFFFF; background-repeat: no-repeat; background-position: center center; background-size: 20px auto; border: 1px solid var(--line-2); border-left: 0; border-radius: 0 var(--r-s) var(--r-s) 0; opacity: .85; }
.form-lable.icon_id { background-image: url(images/icon/n/id.png); }
.form-lable.icon_user { background-image: url(images/icon/n/user.png); }
.form-lable.icon_lock { background-image: url(images/icon/n/lock.png); }
.form-lable.icon_email { background-image: url(images/icon/n/email.png); }
.form-lable.icon_cell { background-image: url(images/icon/n/cell.png); }
.form-control { flex: 1 1 auto; width: auto; min-width: 0; height: 42px; margin: 0; padding: 6px 12px; font-size: 14px; line-height: 28px; color: var(--ink); background-color: #FFFFFF; border: 1px solid var(--line-2); border-right: 0; border-radius: var(--r-s) 0 0 var(--r-s); transition: border-color .15s; }
.form-control[type="tel"] { width: auto; padding: 6px 12px 6px 36px; background-repeat: no-repeat; background-position: left 10px center; background-size: 16px auto; }
.form-control:focus { outline: 0; border-color: var(--boom); }
.form-control[disabled], .form-control[readonly] { cursor: not-allowed; background-color: var(--soft); }
textarea.form-control { height: auto; }
.form-control[error] { background-image: url(images/error.png); background-repeat: no-repeat; background-position: 2% center; }
.textbox { width: calc(100% - 35px); border-left: 1px solid var(--line-2); }
.form-control-desc { display: inline-block; padding: 0 4px; font-size: 14px; line-height: 22px; vertical-align: middle; color: var(--ink-2); }

/* captcha */
div.Captcha { display: block; width: 250px; height: 50px; margin: 4px 0; white-space: nowrap; }
div.Captcha img { display: block; float: right; width: 200px; height: 50px; border: 0; border-radius: var(--r-s); }
#CaptchaRefresh { display: block; float: right; width: 25px; height: 25px; margin: 12px 4px; cursor: pointer; background: url('images/icon/n/refresh.png') no-repeat center center; background-size: 22px auto; }

/* buttons */
.okKey, .cancelKey { display: inline-block; min-width: 50px; height: 36px; margin: 0 0 0 10px; padding: 0 20px; font-size: 14px; line-height: 36px; text-align: center; cursor: pointer; border-radius: var(--r-s); }
.okKey { color: #FFFFFF; background: var(--boom); }
.okKey:hover { background: var(--ink); }
.cancelKey { color: var(--ink); background: var(--soft); border: 1px solid var(--line-2); }
.cancelKey:hover { color: #FFFFFF; background: var(--muted); }

a.LinkButton, a.ContactButton { display: inline-flex; align-items: center; height: 50px; margin: 5px 0; padding: 0 22px; font-size: 16px; font-weight: bold; color: #FFFFFF !important; text-decoration: none; background: var(--boom); border-radius: var(--r-s); transition: background-color .2s; }
a.ContactButton { padding-right: 52px; background: var(--boom) url(icons/contact_w.png) no-repeat right 14px center; background-size: 26px auto; }
a.LinkButton:hover { background: var(--back); }
a.ContactButton:hover { background-color: var(--back); }

a.button_big { display: inline-block; margin: 5px; padding: 0 16px; font-size: 14px; line-height: 38px; color: var(--ink-2); text-decoration: none; background: #FFFFFF; border: 1px solid var(--line-2); border-radius: var(--r-s); }
a.button_big:hover { border-color: var(--boom); color: var(--boom); }
a.btn_grey { color: #FFFFFF; background: var(--back); border-color: var(--back); }
a.btn_grey:hover { color: #FFFFFF; background: var(--ink); }
.button_small { display: inline-block; margin: 2px 5px 2px 0; padding: 3px 16px; font-size: 12px; font-weight: bold; line-height: 18px; cursor: pointer; color: #FFFFFF; background: var(--muted); border-radius: var(--r-s); }

.button_grid { display: inline-block; width: 40px; height: 100%; margin: 0 0 0 5px; padding: 0; font-size: 0; line-height: 40px; text-align: center; color: transparent; text-decoration: none; background: no-repeat center center; background-size: 20px auto; opacity: .7; }
.button_grid:hover { opacity: 1; }
.grid_delete { background-image: url(images/icon/n/trash.png); }
.grid_edit { background-image: url(images/icon/n/edit.png); }
.grid_info { background-image: url(images/icon/png40/lightbulb_on_40.png); }
.grid_reply { background-image: url(images/icon/n/comment.png); }

/* ---------------------------------------------------------------
   Messages, notices, dialogs
---------------------------------------------------------------- */
div.msgbar { display: block; margin: 0 0 12px 0; padding: 10px 16px; font-size: 15px; line-height: 30px; cursor: pointer; border-radius: var(--r-s); border-right: 5px solid; }
div.msgbar p { display: inline; margin: 0 0 0 10px; line-height: inherit; }
div.msgbar.msg_Info { color: #1d4f66; background: #e3f1f7; border-color: #3f8cae; }
div.msgbar.msg_Success { color: #1f5a2c; background: #e5f4e8; border-color: #3d9a52; }
div.msgbar.msg_Error { color: #8a1212; background: #fde8e8; border-color: #e70000; }
div.msgbar.msg_Alert { color: #7a4a10; background: #fff1de; border-color: #d98a20; }

#PopupWindowBG { position: fixed; z-index: 1000; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: 0; background: rgba(0, 0, 0, .3); backdrop-filter: blur(2px); }
#vBoxMessage { display: block; position: fixed; z-index: 2000; top: 0; right: 0; left: 0; margin: 0; padding: 16px 56px 16px 30px; overflow: hidden; font-size: 16px; line-height: 30px; text-align: right; color: var(--ink); background: #FFFFFF; border-bottom: 3px solid var(--boom); box-shadow: 0 10px 30px rgba(0, 0, 0, .2); }
@media only screen and (max-width: 1200px) { #vBoxMessage { font-size: 13px; } }
#vBoxMessage span[close] { position: absolute; z-index: 2010; top: 20px; left: 20px; width: 20px; height: 20px; cursor: pointer; background: url('images/icon/n/close.png') no-repeat center center; background-size: 16px auto; }
#vBoxMessage span[close]:hover { background-size: 20px auto; }
#vBoxMessage div[container] { display: inline-block; padding: 0 0 0 10px; }
#vBoxMessage div[action] { display: inline-block; }

#vw_NotificationPopup, #vw_ChatPopup { display: block; position: fixed; z-index: 1000; bottom: 12px; right: 12px; width: 270px; padding: 18px 56px 18px 18px; font-size: 14.5px; line-height: 25px; text-align: right; color: var(--ink); background: #FFFFFF; border: 1px solid var(--line-2); border-right: 5px solid var(--boom); border-radius: var(--r-s); box-shadow: 0 12px 30px rgba(0, 0, 0, .2); }
#vw_NotificationPopup img[icon], #vw_ChatPopup img[icon] { display: block; position: absolute; top: 18px; right: 10px; width: 34px; height: 34px; border: 2px solid var(--line-2); border-radius: 50%; }
#vw_NotificationPopup a, #vw_ChatPopup a { color: var(--boom); text-decoration: none; }
#vw_NotificationPopup a:hover, #vw_ChatPopup a:hover { text-decoration: underline; }
#vw_NotificationPopup_close, #vw_ChatPopup_close { display: block; position: absolute; top: 5px; left: 5px; width: 20px; height: 20px; cursor: pointer; background: url(images/closeKey.png) no-repeat center center; }
#vw_NotificationPopup_close:hover, #vw_ChatPopup_close:hover { background-image: url(images/closeKey_over.png); }
#vw_ChatPopup_content { display: block; max-height: 200px; margin: 10px 0; overflow-y: auto; font-size: 12px; line-height: 20px; }
#vw_ChatPopup_content span[Me] { display: block; margin: 0 30px 5px 0; padding: 5px 8px; color: #FFFFFF; background: var(--muted); border-radius: var(--r-s); }
#vw_ChatPopup_content span[Friend] { display: block; margin: 0 0 5px 30px; padding: 5px 8px; font-size: 13px; color: var(--ink); background: var(--soft); border-radius: var(--r-s); }
#vw_ChatPopup input { display: block; width: 100%; }
#vw_ChatPopup_Send { display: inline-block; min-width: 30px; height: 30px; margin-top: 10px; padding: 0 12px; font-size: 13px; line-height: 30px; text-align: center; cursor: pointer; color: #FFFFFF; background: var(--boom); border-radius: var(--r-s); }

#EUCookieLawAsk { display: block; position: fixed; z-index: 500; bottom: 12px; left: 12px; right: 12px; max-width: 760px; margin: 0 auto; padding: 18px 22px; font-size: 15px; line-height: 1.9; text-align: center; background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: 0 16px 40px rgba(0, 0, 0, .28); }
#EUCookieLawAsk a { display: inline-block; font-size: 14px; line-height: 30px; color: var(--ink); }
#EUCookieLawAsk span { display: inline-block; margin: 12px 8px 0 8px; padding: 0 22px; font-size: 15px; line-height: 40px; cursor: pointer; color: #FFFFFF; background: var(--back); border-radius: var(--r-s); }
#EUCookieLawAsk span:hover { background: var(--boom); }

#tokenTimer { font-size: 16px; text-align: center; color: #1f7a33; background: #e5f4e8; }
#countDownKey { display: block; width: 300px; margin: 30px auto 50px auto; font-size: 13px; line-height: 50px; text-align: center; cursor: pointer; color: #FFFFFF; background: var(--back); border-radius: var(--r-s); }
#countDownKey:hover { background: #bd1818; }
@media only screen and (max-width: 480px) { #countDownKey { width: 100%; } }

div[noPost] { display: block; margin: 20px 0; padding: 80px 24px; font-size: 18px; font-weight: bold; text-align: center; color: var(--muted); border: 1px dashed var(--line-2); border-radius: var(--r-m); }

/* ---------------------------------------------------------------
   Shopping cart & payment
---------------------------------------------------------------- */
#myShoppingCart { display: block; max-width: var(--wrap); margin: 0 auto; padding: 8px 20px 12px 20px; overflow: hidden; vertical-align: top; background: var(--soft); border-radius: var(--r-l); }
#myShoppingCart hr { display: none; }
#myShoppingCart span { display: block; margin: 0; padding: 12px 0; font-size: 18px; font-weight: bold; line-height: 30px; text-align: center; color: var(--ink); border-bottom: 2px solid var(--boom); }
#myShoppingCart sum { clear: both; display: block; margin: 10px 0 0 0; padding: 12px 10px; font-size: 14px; line-height: 30px; color: var(--ink-2); border-top: 1px solid var(--line-2); }
#myShoppingCart sum b { clear: both; display: block; padding: 10px 0; font-size: 20px; line-height: 30px; color: var(--boom); }

div.ShoppingCartItem { display: block; position: relative; min-height: 32px; margin: 0; padding: 12px 10px; white-space: pre-wrap; vertical-align: top; color: var(--ink); border-top: 1px dotted var(--line-2); border-radius: var(--r-m); transition: background-color .2s; }
div.ShoppingCartItem:hover { background: rgba(0, 0, 0, .03); }
div.ShoppingCartItem br { display: none; }
div.ShoppingCartItem poption { display: inline-block; margin: 0 10px; padding: 0 8px; font-size: 12px; line-height: 22px; vertical-align: middle; color: #FFFFFF; background: var(--boom); border-radius: 11px; }
div.ShoppingCartItem img { display: inline-block; height: 64px; margin: 0 0 0 10px; vertical-align: middle; border: 0; border-radius: var(--r-s); mix-blend-mode: multiply; }
div.ShoppingCartItem a[title] { display: inline-block; overflow: hidden; font-size: 19px; line-height: 32px; white-space: nowrap; vertical-align: middle; color: var(--ink); text-decoration: none; }
div.ShoppingCartItem a[title]:hover { color: var(--boom); }
div.ShoppingCartItem price { display: inline-block; position: absolute; top: 12px; left: 20px; min-width: 108px; padding: 0 12px; font-size: 16px; font-weight: bold; line-height: 26px; text-align: center; vertical-align: middle; background: #FFFFFF; border: 1px solid var(--line-2); border-radius: 20px; }
div.ShoppingCartItem quantity { display: inline-block; position: absolute; top: 46px; left: 20px; padding: 0; font-size: 16px; font-weight: bold; line-height: 24px; text-align: center; vertical-align: middle; background: #FFFFFF; border: 1px solid var(--line-2); border-radius: 20px; }
div.ShoppingCartItem quantity count { display: inline-block; min-width: 60px; height: 24px; vertical-align: middle; cursor: pointer; }
div.ShoppingCartItem quantity add, div.ShoppingCartItem quantity les { display: inline-block; width: 24px; height: 24px; vertical-align: middle; cursor: pointer; border-radius: 50%; background-repeat: no-repeat; background-position: center center; }
div.ShoppingCartItem quantity add { margin-right: 10px; background-color: var(--boom); background-image: url(icons/add_w.png); background-size: 14px auto; }
div.ShoppingCartItem quantity les { margin-left: 10px; background-color: var(--back); background-image: url(icons/min_w.png); background-size: 12px auto; }

sale { display: block; padding: 0 6px; font-size: 10px; font-weight: normal; line-height: 20px; vertical-align: middle; color: var(--boom); background: #FFFFFF; }
#bankAInfo { display: block; padding: 20px; overflow: hidden; font-size: 18px; line-height: 40px; text-align: center; vertical-align: top; color: var(--boom); }
#bankAInfo a { display: inline-block; padding: 5px 22px; color: #FFFFFF; text-decoration: none; background: #3068e7; border-radius: var(--r-s); }
#confirmInfo { display: block; margin: 0 0 12px 0; padding: 50px 20px; overflow: hidden; font-size: 20px; line-height: 50px; text-align: center; color: #FFFFFF; background: var(--boom); border-radius: var(--r-l); }
#confirmInfo b { display: inline-block; margin-top: 20px; padding: 10px 50px; background: rgba(255, 255, 255, .2); border-radius: var(--r-s); }

#zibalInfo { display: block; max-width: var(--wrap); margin: 0 auto 12px auto; padding: 130px 20px 14px 20px; overflow: hidden; font-size: 18px; line-height: 35px; text-align: center; vertical-align: top; color: #2f8f3a; background: var(--soft) var(--shopCartBG); background-size: var(--shopCartBgSize); border-radius: var(--r-l); }
#zibalInfo a { font-size: 18px; font-weight: bold; color: var(--boom); text-decoration: none; }
#zibalInfo a:hover { color: var(--back); }

@media screen and (max-width: 640px) {
    div.ShoppingCartItem { padding: 14px 0 44px 0; }
    div.ShoppingCartItem a[title] { font-size: 16px; }
    div.ShoppingCartItem img { height: 48px; margin: 0 0 0 5px; }
    div.ShoppingCartItem price { top: auto; bottom: 10px; left: 0; font-size: 14px; }
    div.ShoppingCartItem quantity { top: auto; left: auto; right: 0; bottom: 10px; font-size: 14px; }
    #myShoppingCart sum b { font-size: 16px; line-height: 25px; }
    #bankAInfo { padding: 10px; font-size: 15px; line-height: 25px; }
    #confirmInfo { border-radius: 0; }
    #zibalInfo { padding: 70px 10px 10px 10px; font-size: 14px; line-height: 30px; background-size: auto 60px; }
}

/* ---------------------------------------------------------------
   Account / dashboard (orders, profile, inbox)
---------------------------------------------------------------- */
div.tabBarPanel { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 12px 0; padding: 0; color: var(--ink-2); border-bottom: 1px solid var(--line); }
div.tabBarPanel a { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; font-size: 14.5px; color: var(--muted); text-decoration: none; cursor: pointer; border-bottom: 3px solid transparent; }
div.tabBarPanel a img { width: 24px; margin: 0 0 0 6px; border-radius: 50%; }
div.tabBarPanel a:hover { color: var(--ink); }
div.tabBarPanel a[selected] { font-weight: bold; color: var(--ink); border-bottom-color: var(--boom); }

#customGrid { clear: both; display: block; width: 100%; margin: 0 0 12px 0; background: #FFFFFF; }
#customGrid header { display: block; }
#customGrid header ccol { display: none; }
#customGrid crow { display: block; position: relative; margin: 0; padding: 6px 0; font-size: 16px; line-height: 30px; vertical-align: middle; color: var(--muted); border-bottom: 1px solid var(--line); }
#customGrid crow:hover { color: var(--ink); }
#customGrid crow:hover > ccol { background: var(--soft); }
#customGrid crow:hover > ccol[c2] { visibility: visible; }
#customGrid crow ccol { overflow: hidden; vertical-align: top; empty-cells: show; }
#customGrid crow ccol[c0] { display: block; position: relative; padding: 30px 70px 10px 10px; overflow: hidden; }
#customGrid crow ccol[c0] img { display: block; position: absolute; top: 8px; right: 10px; width: 48px; height: 48px; cursor: pointer; border: 1px solid var(--line); border-radius: var(--r-s); }
#customGrid crow ccol[c0] a { color: var(--ink-2); text-decoration: none; }
#customGrid crow ccol[c0] a:hover { color: var(--boom); text-decoration: underline; }
#customGrid crow ccol[c0] span.message_name { display: inline-block; padding-left: 10px; font-size: 12px; cursor: pointer; }
#customGrid crow ccol[c0] span.postStatus_active { display: block; font-weight: bold; color: var(--ink); cursor: pointer; }
#customGrid crow ccol[c0] span.postStatus_new, #customGrid crow ccol[c0] span.postStatus_updated { display: block; font-weight: bold; color: var(--back); cursor: pointer; }
#customGrid crow ccol[c0] span.postStatus_inactive, #customGrid crow ccol[c0] span.postStatus_hidden { display: block; color: var(--muted); cursor: pointer; }
#customGrid crow ccol[c0] span.postType_event { display: block; position: absolute; top: 14px; right: 19px; width: 32px; height: 32px; background: url(images/clock.png) no-repeat center center; background-size: 32px 32px; }
#customGrid crow ccol[c0] span.messageType_na, #customGrid crow ccol[c0] span.messageType_reply { display: block; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--line-2); }
#customGrid crow ccol[c0] span.messageType_reply { background: #2f9a45; }
#customGrid crow ccol[c0] span.messageStatus_new { display: block; font-weight: bold; color: var(--back); cursor: pointer; }
#customGrid crow ccol[c0] span.messageStatus_read, #customGrid crow ccol[c0] span.messageStatus_sent { display: block; font-size: 16px; font-weight: bold; color: var(--boom); cursor: pointer; }
#customGrid crow ccol[c1] { display: inline-block; position: absolute; top: 10px; right: 70px; font-size: 11px; white-space: nowrap; background: transparent; }
#customGrid crow ccol[c2] { visibility: hidden; display: block; position: absolute; top: 10px; bottom: 10px; left: 0; overflow: hidden; white-space: nowrap; background: transparent; }
#customGrid footer { display: block; min-height: 30px; margin: 3px; padding: 20px; font-size: 16px; line-height: 30px; white-space: nowrap; vertical-align: middle; color: var(--muted); }
#customGrid footer a { text-decoration: none; }
#customGrid footer pagingPage, #customGrid footer a[pagingPage], #customGrid footer pagingActive, #customGrid footer a[pagingActive] { display: block; float: right; min-width: 10px; height: 30px; padding: 0 10px; line-height: 30px; white-space: nowrap; vertical-align: middle; color: var(--ink-2); cursor: pointer; border-radius: var(--r-s); }
#customGrid footer pagingActive, #customGrid footer a[pagingActive] { font-weight: bold; background: var(--soft); }
#customGrid footer pagingRowCount { display: block; float: right; height: 30px; padding: 0 5px; line-height: 30px; white-space: nowrap; color: var(--boom); }
#customGrid sortkey { display: inline-block; width: 9px; height: 11px; margin: 4px 5px -1px 0; padding: 0; }
#customGrid sortkey up, #customGrid sortkey down { display: block; width: 9px; height: 5px; cursor: pointer; opacity: .4; background: no-repeat center center; }
#customGrid sortkey up { margin-bottom: 1px; background-image: url('images/sort_up.png'); }
#customGrid sortkey down { background-image: url('images/sort_down.png'); }
#customGrid sortkey up:hover, #customGrid sortkey down:hover { opacity: 1; }

div.asideInfoBox { display: block; position: relative; float: right; width: calc(50% - 12px); margin: 0 10px 10px 0; padding: 0 0 10px 0; vertical-align: top; white-space: normal; text-align: right; color: var(--ink-2); background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--r-m); }
span.asideInfoBoxHeader { display: block; margin: 0 24px; padding: 14px 0 8px 0; font-size: 15px; font-weight: bold; line-height: 32px; color: var(--ink); border-bottom: 2px solid var(--boom); }
div.asideInfoBox span[info] { display: block; padding: 10px 24px; font-size: 14px; white-space: normal; color: var(--muted); }
div.asideInfoBox a[tag] { display: inline-block; margin: 0 0 5px 5px; padding: 0 12px; font-size: 13.5px; line-height: 30px; color: var(--ink-2); text-decoration: none; background: var(--soft); border-radius: 999px; }
div.asideInfoBox a[tag]:hover { color: var(--boom); }
div.asideInfoBox img[friend] { display: inline-block; width: 32px; height: 32px; margin: 0 0 -3px 2px; border-radius: 50%; filter: grayscale(1); }
div.asideInfoBox img[friend]:hover { filter: none; }
div.asideInfoBox ul[info] { display: block; margin: 0 0 10px 0; padding: 0 24px 10px 24px; overflow: hidden; font-size: 14px; list-style: none; color: var(--muted); }
div.asideInfoBox ul[info] li { display: block; position: relative; min-height: 64px; padding: 10px 74px 10px 0; text-align: justify; word-break: break-word; border-bottom: 1px solid var(--line); }
div.asideInfoBox ul[info] li:first-child { padding-top: 0; }
div.asideInfoBox ul[info] li:last-child { border-bottom: 0; }
div.asideInfoBox ul[info] li img { display: block; position: absolute; top: 10px; right: 0; width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-s); }
div.asideInfoBox ul[info] li:first-child img { top: 0; }
div.asideInfoBox ul[info] li a[title] { display: block; padding: 10px 0 0 0; font-size: 15px; color: var(--ink); text-decoration: none; word-wrap: break-word; }
div.asideInfoBox ul[info] li a[title]:hover { color: var(--boom); }
div.asideInfoBox ul[menu] { display: block; margin: 0; padding: 0 24px; overflow: hidden; font-size: 15px; list-style: none; }
div.asideInfoBox ul[menu] li { display: block; position: relative; line-height: 40px; border-bottom: 1px solid var(--line); }
div.asideInfoBox ul[menu] li:last-child { border-bottom: 0; }
div.asideInfoBox ul[menu] li a { display: block; position: relative; padding: 5px 28px 5px 5px; color: var(--ink-2); text-decoration: none; background-repeat: no-repeat; background-position: right 0 center; background-size: 18px auto; }
div.asideInfoBox ul[menu] li a:hover { color: var(--boom); }
div.asideInfoBox ul[menu] li a[selected] { font-size: 16px; font-weight: bold; color: var(--ink); }
div.asideInfoBox ul[menu] li a[dashboardmenu="mypost"] { background-image: url(images/icon/n/list.png); }
div.asideInfoBox ul[menu] li a[dashboardmenu="myfriend"] { background-image: url(images/icon/n/users-alt.png); }
div.asideInfoBox ul[menu] li a[dashboardmenu="myinbox"] { background-image: url(images/icon/n/comment.png); }
div.asideInfoBox ul[menu] li a[dashboardmenu="myprofile"] { background-image: url(images/icon/n/user.png); }
div.asideInfoBox ul[menu] li a[dashboardmenu="myusername"] { background-image: url(images/icon/n/id.png); }
div.asideInfoBox ul[menu] li a[dashboardmenu="mycell"] { background-image: url(images/icon/n/cell.png); }
div.asideInfoBox ul[menu] li a[dashboardmenu="myemail"] { background-image: url(images/icon/n/email.png); }
div.asideInfoBox ul[menu] li a[dashboardmenu="myinvitation"] { background-image: url(images/icon/n/invite.png); }
div.asideInfoBox ul[menu] li a[dashboardmenu="mypassword"] { background-image: url(images/icon/n/passkey.png); }
div.asideInfoBox ul[menu] li a[dashboardmenu="logout"] { background-image: url(images/icon/n/lock.png); }
div.asideInfoBox ul[menu] li[data-badge]:after { content: attr(data-badge); position: absolute; z-index: 10; top: 10px; left: 2px; min-width: 20px; height: 20px; padding: 0 5px; font-size: 11px; line-height: 20px; text-align: center; color: #FFFFFF; background: var(--boom); border-radius: 10px; }
div.asideInfoBox ul[menu] li[data-badge="0"]:after { display: none; }

@media screen and (max-width: 640px) { div.asideInfoBox { display: block; float: none; width: 100%; margin: 0 0 10px 0; } }

div[nearby] { display: block; position: relative; float: right; width: calc(50% - 1px); height: 50vh; margin: 0; padding: 0; overflow-x: hidden; overflow-y: scroll; line-height: 30px; text-align: right; background: var(--soft); border: 0; border-right: 1px solid var(--line); scrollbar-width: thin; }
div.asideInfoBox[nearby] span[detail] { padding: 0; font-size: 14px; line-height: 20px; }
@media screen and (max-width: 640px) { div[nearby] { width: 100%; height: auto; margin: 0; } }

/* user cards / profile header */
div.userItem { display: inline-block; position: relative; width: calc(20% - 10px); margin: 0 0 10px 10px; padding: 0; vertical-align: top; white-space: normal; text-align: right; cursor: pointer; background: var(--soft); border-radius: var(--r-m); overflow: hidden; }
@media screen and (max-width: 960px) { div.userItem { width: calc(25% - 10px); } }
@media screen and (max-width: 640px) { div.userItem { width: calc(33% - 10px); } }
@media screen and (max-width: 320px) { div.userItem { width: calc(50% - 10px); } }
div.userItem span[image] { display: block; overflow: hidden; }
div.userItem span[image] img { display: block; width: 100%; margin: 0; border: 0; transition: filter .3s; }
div.userItem:hover > span[image] > img { filter: brightness(1.1); }
div.userItem a[title] { display: block; padding: 16px 16px 6px 16px; font-size: 14px; font-weight: bold; line-height: 30px; color: var(--ink); text-decoration: none; }
div.userItem a[title]:hover { color: var(--boom); }
div.userItem span[time] { display: block; padding: 6px 16px; font-size: 12px; line-height: 20px; color: var(--muted); }
div.userItem span[shortdes] { display: block; padding: 6px 16px 16px 16px; font-size: 14px; color: var(--ink-2); }
#usersList { display: block; clear: both; }
#usersListRest { display: block; margin: 0; }
#usersListColumnRest { display: block; clear: both; margin: 20px 0; padding: 20px 0; border-top: 4px solid var(--line); }

div.userInfoBox { display: block; position: relative; margin-bottom: 10px; padding: 0; vertical-align: top; white-space: normal; text-align: right; color: var(--ink-2); background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
div.userInfoBox img { position: absolute; z-index: 10; display: block; top: 20px; right: 20px; height: 72px; margin: 0; border: 4px solid rgba(255, 255, 255, .4); border-radius: 50%; }
div.userInfoBox a[fullname] { display: block; height: 30px; margin-bottom: 20px; padding: 30px 110px 20px 10px; font-size: 15px; line-height: 30px; white-space: normal; color: #FFFFFF; text-decoration: none; background: var(--back); box-sizing: content-box; }
div.userInfoBox span[memberinfo] { display: block; position: absolute; top: 50px; right: 110px; height: 20px; font-size: 10px; line-height: 20px; white-space: normal; color: #FFFFFF; }
div.userInfoBox span[info] { display: block; margin-bottom: 10px; padding: 10px 30px; font-size: 14px; text-align: justify; white-space: pre-wrap; color: var(--ink-2); }
div.userInfoBox span[exlinks], div.userProfileHeaderBox span[exlinks] { display: block; padding: 0 30px 10px 30px; font-size: 11px; text-decoration: none; color: var(--muted); }
div.userInfoBox span[exlinks] a[website], div.userProfileHeaderBox span[exlinks] a[website] { display: inline-block; margin: 0 0 10px 10px; padding: 5px 12px 5px 36px; font-size: 12px; line-height: 22px; color: var(--ink-2); text-decoration: none; background: var(--soft) url(images/icon/n/link.png) no-repeat 10px center; background-size: 14px auto; border-radius: 999px; }
div.userInfoBox span[exlinks] a[website]:hover, div.userProfileHeaderBox span[exlinks] a[website]:hover { color: var(--boom); }
div.userInfoBox span[more], div.userProfileHeaderBox span[more] { display: block; height: 50px; padding: 10px 30px; font-size: 11px; line-height: 50px; text-decoration: none; color: var(--muted); border-top: 1px solid var(--line); }
div.userInfoBox span[friend], div.userProfileHeaderBox span[friend] { height: 26px; margin-left: 10px; padding: 4px 10px; font-size: 12px; line-height: 18px; border-radius: var(--r-s); }
div.userInfoBox span[sendmessage], div.userProfileHeaderBox span[sendmessage] { width: 36px; height: 30px; padding: 0; font-size: 12px; line-height: 30px; white-space: nowrap; color: transparent; background: url(images/icon/n/comment.png) no-repeat center center; background-size: 20px auto; border: 1px solid var(--line-2); border-radius: var(--r-s); }

div.userProfileHeaderBox { display: block; position: relative; margin: 0 0 10px 0; padding: 0; overflow: hidden; vertical-align: top; white-space: normal; text-align: right; color: var(--ink-2); }
div.userProfileHeaderBox span[connect] { display: inline-block; float: left; padding: 40px 20px; }
div.userProfileHeaderBox span[editprofile] { display: block; position: absolute; z-index: 30; top: 0; left: 0; width: 48px; height: 48px; color: transparent; cursor: pointer; background: #FFFFFF url(images/icon/n/setting.png) no-repeat center center; background-size: 22px 22px; border-radius: 0 0 var(--r-s) 0; }
div.userProfileHeaderBox span[editprofile]:hover { background-color: var(--soft); }
div.userProfileHeaderBox span[headerBG] { display: none; }
div.userProfileHeaderBox img[header] { display: block; width: 100%; height: 120px; margin: 0; padding: 0; border: 0; object-fit: cover; }
div.userProfileHeaderBox img[photo] { display: inline-block; height: 64px; margin: 10px; vertical-align: middle; border-radius: 20%; box-shadow: 0 0 6px rgba(0, 0, 0, .25); }
div.userProfileHeaderBox a[fullname] { display: inline-block; position: relative; z-index: 10; height: 50px; margin: 0; padding: 0; font-size: 22px; font-weight: bold; line-height: 50px; white-space: nowrap; color: var(--ink); text-decoration: none; }
div.userProfileHeaderBox span[memberinfo] { display: inline-block; position: relative; z-index: 10; height: 20px; padding: 0 20px; font-size: 11px; line-height: 20px; text-align: left; white-space: nowrap; color: var(--muted); }
div.userProfileHeaderBox span[info] { display: block; clear: both; padding: 0 20px; font-size: 14px; line-height: 24px; text-align: justify; white-space: pre-wrap; color: var(--ink-2); }
@media screen and (max-width: 1200px) { div.userProfileHeaderBox span[connect] { display: block; float: none; padding: 10px 20px; } }
@media screen and (max-width: 640px) { div.userProfileHeaderBox img[photo] { height: 48px; } div.userProfileHeaderBox a[fullname] { height: 30px; font-size: 16px; line-height: 30px; } div.userProfileHeaderBox span[memberinfo] { padding: 0 20px 0 0; margin: 0 0 16px 0; } }

/* messages */
div.messagePanel { display: block; margin: 0 0 10px 0; padding: 0; text-align: right; background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--r-m); }
div.messagePanel h1 { display: block; position: relative; margin: 0; padding: 14px 20px; font-size: 14px; font-weight: normal; line-height: 40px; color: var(--ink); border-bottom: 1px solid var(--line); }
div.messagePanel h1 a { height: 40px; line-height: 40px; color: var(--muted); text-decoration: none; }
div.messagePanel h1 img { height: 40px; margin-left: 10px; vertical-align: bottom; border-radius: var(--r-s); }
div.messagePanel div[box] { display: block; padding: 10px; font-size: 12px; }
div.message_datetime { display: block; padding: 0 15px; line-height: 30px; color: var(--muted); }
div.message_subject { display: block; padding: 10px 0; font-size: 16px; font-weight: bold; line-height: 30px; color: var(--ink); }
div.message_body { display: block; padding: 0 15px; overflow: hidden; font-size: 16px; line-height: 40px; white-space: pre-wrap; border-top: 1px dotted var(--line-2); }
message { display: block; padding: 0; overflow: hidden; font-size: 14px; }
message[sender="other"] { margin: 0 0 20px 20%; }
message[sender="me"] { margin: 0 20% 20px 0; }
message bl-body { display: block; padding: 14px 12px; overflow: hidden; color: var(--ink); white-space: pre-wrap; }
message[sender="me"] bl-body { background: var(--soft); border-radius: 0 0 var(--r-s) 20px; border-left: 3px solid var(--line-2); }
message[sender="other"] bl-body { font-size: 16px; background: #FFFFFF; border: 1px solid var(--line); border-right: 3px solid var(--boom); border-radius: 0 0 14px var(--r-s); }
bl-datetime { display: block; margin: 5px 10px; font-size: 10px; line-height: 20px; }
message[sender="other"] bl-datetime { text-align: left; color: var(--boom); }
message[sender="me"] bl-datetime { color: var(--muted); }

#messageFormControlBG, #commentFormControlBG, #sharingFormControlBG { display: none; position: fixed; z-index: 950; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, .25); }
div.newMessageForm, div.sharingForm { display: none; position: fixed; z-index: 1000; bottom: 0; left: 0; right: 0; margin: 0; padding: 20px 30px; vertical-align: top; white-space: normal; color: var(--ink-2); background: #FFFFFF; backdrop-filter: blur(3px); box-shadow: 0 -10px 30px rgba(0, 0, 0, .2); }
@media only screen and (max-width: 480px) { div.newMessageForm, div.sharingForm { padding: 10px; } }
#newMessageFormIn, #sharingFormIn { display: block; position: relative; border: 1px solid var(--line-2); border-radius: var(--r-m); }
#newMessageFormIn input[type="text"] { display: block; width: calc(100% - 110px); height: 40px; margin: 0 50px 0 0; padding: 0; line-height: 40px; color: var(--ink); background: transparent; border: 0; border-bottom: 1px dotted var(--line-2); outline: 0; }
#newMessageFormIn textarea { display: block; width: calc(100% - 110px); height: calc(50vh - 20px); margin: 0 50px 0 0; padding: 0; line-height: 40px; color: var(--ink); background: transparent; border: 0; outline: 0; }
#sharingFormIn input[type="url"] { display: block; width: calc(100% - 90px); height: 40px; margin: 0 50px 0 40px; padding: 0; line-height: 40px; color: var(--ink); background: transparent; border: 0; outline: 0; }
div.newMessagePanelHeader { display: block; position: absolute; top: 0; right: 0; bottom: 0; width: 40px; height: 100%; }
div.newMessagePanelHeader img, div.sharingPanelHeader img { display: block; width: 28px; margin: 6px; border-radius: 50%; }
div.newMessagePanelHeader span[attachment] { display: block; position: absolute; bottom: 5px; right: 0; width: 40px; height: 40px; cursor: pointer; opacity: .5; background: url(images/icon/png40/clip_40.png) no-repeat center center; background-size: 25px auto; }
div.newMessagePanelHeader span[attachment]:hover { opacity: 1; }
div.sharingPanelHeader { display: block; position: absolute; bottom: 0; left: 0; width: 40px; height: 40px; }
div.newMessageForm input[type="submit"], div.sharingForm input[type="submit"] { display: block; position: absolute; bottom: 5px; width: 56px; height: 32px; padding: 0; font-size: 13px; line-height: 32px; text-align: center; color: #FFFFFF; cursor: pointer; background: var(--boom); border: 0; border-radius: var(--r-s); }
div.newMessageForm input[type="submit"] { left: 5px; }
div.sharingForm input[type="submit"] { right: 5px; }
#parentMessageID { display: none; }

div.sharingReview { display: block; }
div.sharingReviewContainer { display: block; padding: 20px; overflow: hidden; text-align: right; background: var(--soft); }
div.sharingReviewContainer img { display: block; float: right; width: 50%; max-height: 50vh; object-fit: cover; }
div.sharingReviewContainer urltitle, div.sharingReviewContainer urldescription, div.sharingReviewContainer urlkeywords { display: block; float: right; width: calc(50% - 20px); padding: 0 10px; }
div.sharingReviewContainer urltitle { font-size: 18px; font-weight: bold; line-height: 50px; }
div.sharingReviewContainer urldescription { font-size: 14px; line-height: 40px; }
div.sharingReviewContainer urlkeywords { padding: 5px 10px; font-size: 12px; line-height: 30px; }
div.sharingReviewContainer urlkeywords span { display: inline-block; margin: 0 0 5px 5px; padding: 0 12px; line-height: 28px; color: #FFFFFF; background: var(--muted); border-radius: 15px; }
@media only screen and (max-width: 480px) {
    div.sharingReviewContainer { padding: 10px; }
    div.sharingReviewContainer img, div.sharingReviewContainer urltitle, div.sharingReviewContainer urldescription, div.sharingReviewContainer urlkeywords { float: none; width: 100%; }
    div.sharingReviewContainer img { max-height: 25vh; }
}
#referrerID { display: block; }
#referrerID div { display: inline-block; margin: 10px 0 2px 0; padding: 3px 3px 3px 20px; line-height: 32px; vertical-align: middle; color: var(--ink); background: var(--soft); border-radius: 20px; }
#referrerID div img { display: inline-block; width: 32px; height: 32px; margin-left: 10px; overflow: hidden; vertical-align: middle; border-radius: 50%; }

/* ---------------------------------------------------------------
   Misc content blocks
---------------------------------------------------------------- */
div.relatedPostItem { display: block; position: relative; margin: 0 0 10px 0; padding: 24px; vertical-align: top; white-space: normal; color: var(--ink-2); background: var(--soft); border-radius: var(--r-m); }
div.relatedPostItem[lang="en"] { direction: ltr; text-align: left; }
div.relatedPostItem img { display: block; width: 100%; margin-bottom: 16px; border: 0; border-radius: var(--r-s); }
div.relatedPostItem a[title] { display: block; padding-bottom: 8px; font-size: 21px; font-weight: bold; line-height: 40px; color: var(--ink); text-decoration: none; }
div.relatedPostItem a[title]:hover { color: var(--boom); }
div.relatedPostItem span[detail] { display: block; padding-bottom: 8px; font-size: 16px; color: var(--muted); }
div.relatedPostItem span[time], div.relatedPostItem span[rate] { font-size: 13px; color: var(--muted); }
@media screen and (min-width: 641px) {
    div.relatedPostItem img { display: inline-block; width: 20%; margin: 0; vertical-align: top; }
    div.relatedPostItem div { display: inline-block; width: calc(80% - 20px); padding: 0 12px; vertical-align: bottom; }
}

div.commentPanel { display: block; margin: 0 0 10px 0; padding: 20px 24px 36px 24px; vertical-align: top; white-space: normal; color: var(--ink-2); background: var(--soft); border-radius: var(--r-m); }
div.commentPanelHeader { display: block; position: relative; margin: 0 0 10px 0; padding: 0; white-space: nowrap; color: var(--ink-2); }
div.commentPanelHeader img { display: inline-block; height: 40px; margin: 4px 2px 4px 10px; vertical-align: top; border-radius: 50%; }
div.commentPanelHeader span { display: inline-block; margin: 0; line-height: 40px; vertical-align: top; }
div.commentPanelHeader span[comntUsrInfDat] { height: 48px; font-size: 12px; line-height: 48px; color: var(--muted); }
div.commentPanelHeader span[comntUsrInfDat] a { font-weight: bold; color: var(--muted); text-decoration: none; }
div.commentPanelHeader span[comntUsrInfDat] a:hover { color: var(--boom); text-decoration: underline; }
div.commentPanelHeader span.opinionCtrl { position: absolute; top: 28px; left: -20px; }
div.commentPanel textarea { display: block; width: 100%; height: 100px; margin: 0 0 10px 0; padding: 10px; vertical-align: top; color: var(--ink); background: #FFFFFF; border: 1px solid var(--line-2); border-radius: var(--r-s); }
div.commentPanel span.commentDetail { display: block; margin: 0 -24px; padding: 18px 30px 0 50px; font-size: 14px; line-height: 25px; white-space: pre-wrap; color: var(--ink); border-top: 1px dotted var(--line-2); }
div.commentPanel input[type="submit"] { display: inline-block; padding: 5px 24px; font-size: 16px; font-weight: bold; line-height: 40px; color: #FFFFFF; cursor: pointer; background: var(--boom); border: 0; border-radius: var(--r-s); transition: background-color .15s; }
div.commentPanel input[type="submit"]:hover { background: var(--back); }
div.commentPanel select { display: inline-block; height: 36px; margin: 0; padding: 0 10px; font-size: 12px; text-align: center; color: var(--ink); cursor: pointer; background: #FFFFFF; border: 1px solid var(--line-2); border-radius: var(--r-s); }

span[friend] { display: inline-block; white-space: normal; color: var(--boom); cursor: pointer; background: var(--soft); }
span[friend="add"] { color: #1E60D8; } span[friend="approve"] { color: #1D6E14; } span[friend="block"] { color: var(--ink-2); }
span[friend="close"] { color: #8e3db4; } span[friend="pending"] { color: var(--muted); }
span[sendmessage] { display: inline-block; white-space: normal; color: #FFFFFF; cursor: pointer; background: var(--back); }

img.bannerImg, img.homeAds { display: block; width: 100%; border: 0; border-radius: var(--r-m); }
#BodySide img.bannerImg { cursor: pointer; }
#BodySide div.adView { float: right; width: calc(50% - 20px); margin: 0; padding-bottom: 10px; }
.adView { display: block; margin: 0 auto; order: 1; }
@media screen and (max-width: 640px) { #BodySide div.adView, .adView { width: 100%; padding: 0; } }

div.helpTip { color: #396E9E; }
#moreImageList { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 10px; list-style: none; }
#moreImageList li { display: block; position: relative; margin: 0; vertical-align: top; border: 1px dashed var(--boom); border-radius: var(--r-s); }
#moreImageList li img { display: block; width: 128px; padding: 4px; }
#moreImageList li delete { display: block; position: absolute; z-index: 10; top: -7px; left: -7px; width: 24px; height: 24px; cursor: pointer; background: var(--boom) url(images/closeKeyW.png) no-repeat center center; border-radius: 50%; }
#moreImageList li delete:hover { background-color: #000000; }

#PopupMenu { display: none; position: absolute; z-index: 650; top: 0; left: 0; width: 140px; padding: 6px 0; text-align: right; background: #FFFFFF; border: 1px solid var(--line-2); border-radius: var(--r-s); box-shadow: 0 8px 24px rgba(0, 0, 0, .2); }
#PopupMenu span { display: block; width: 100%; padding: 4px 12px; font-size: 13px; line-height: 22px; white-space: nowrap; color: var(--ink-2); cursor: pointer; }
#PopupMenu span:hover { color: #FFFFFF; background: var(--boom); }
#PopupMenu hr { width: 100%; height: 1px; border: 0; background: var(--line); }

/* maps */
#full-map-canvas { display: block; z-index: 0; width: 100%; height: calc(80vh - 140px); margin: 0; padding: 0; border: 0; }
#mini-map-canvas { display: block; float: right; position: relative; z-index: 0; width: 50%; height: 50vh; margin: 0; overflow: hidden; }
#user-map-canvas { display: block; z-index: 0; width: 100%; height: 30vh; margin: 0 0 10px 0; overflow: hidden; border: 0; }
@media only screen and (max-width: 640px) { #mini-map-canvas { width: 100%; height: 30vh; } #user-map-canvas { height: 35vh; } }
#getUsrPosCrtl { display: block; position: absolute; z-index: 10; top: 20px; right: 20px; width: 32px; height: 32px; cursor: pointer; background: #FFFFFF url(images/mylocation.png) no-repeat center center; border-radius: 50%; box-shadow: 0 1px 5px rgba(0, 0, 0, .5); }
#getUsrPosCrtl:hover { filter: contrast(1.5); }
.blMapPopup { display: block; max-width: 250px; padding-top: 10px; }
.blMapPopup img { display: block; float: right; width: 96px; margin: 0 0 10px 10px; }
.blMapPopup div { text-align: right; }
.blMapPopup a, .blMapMiniPopup a { display: block; margin: 10px 0 0 0; padding: 2px 10px; line-height: 25px; text-align: center; color: var(--boom); text-decoration: none; cursor: pointer; border: 0; border-top: 1px solid var(--line); }
.blMapMiniPopup { display: block; max-width: 150px; padding-top: 10px; zoom: .8; }
.blMapMiniPopup img { display: block; width: 100%; }
a.customLocInfo { display: block; margin: 10px 0 0 0; padding: 2px 10px; text-align: center; color: #FFFFFF; text-decoration: none; cursor: pointer; background: var(--boom); border: 0; border-radius: var(--r-s); }
#mapPopup { position: fixed; z-index: 2000; top: 0; right: 50px; bottom: 0; left: 50px; width: 70%; min-width: 150px; height: 70%; margin: auto; padding: 32px 6px 6px 6px; overflow: hidden; font-weight: bold; text-align: left; color: var(--ink); background: #FFFFFF; border: 1px solid var(--line-2); border-radius: var(--r-m); box-shadow: 0 16px 40px rgba(0, 0, 0, .3); }
#mapPopup iframe { display: block; width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; border: 0; }
#mapPopup span[close] { position: absolute; z-index: 2010; top: 8px; left: 10px; width: 20px; height: 20px; cursor: pointer; background: url('images/icon/n/close.png') no-repeat center center; background-size: 18px auto; }
#mapPopup span[close]:hover { background-image: url('images/closeKey_over.png'); }
#latestLocation { display: block; padding: 0; vertical-align: top; text-align: center; white-space: normal; }
#latestLocation a { display: inline-block; width: calc(20% - 15px); margin: 0 0 5px 5px; vertical-align: top; font-size: 14px; line-height: 30px; text-align: right; color: var(--ink); text-decoration: none; }
#latestLocation a img { display: block; width: 100%; max-height: 10vh; margin: 0; border: 0; object-fit: cover; border-radius: var(--r-s); }
@media screen and (max-width: 1200px) { #latestLocation a { width: calc(33% - 15px); } }
@media screen and (max-width: 640px) { #latestLocation a { width: calc(50% - 15px); } }

/* tiles (festivals, publications) */
tileList { display: block; overflow: hidden; padding: 0; }
tileList tileListHeader { display: block; padding: 0 20px; font-size: 20px; font-weight: bold; line-height: 60px; color: var(--ink); }
tile { display: block; position: relative; float: right; width: calc(25% - 10px); margin: 0 0 10px 10px; padding: 0; cursor: pointer; background: var(--soft); border-radius: var(--r-m); overflow: hidden; }
@media screen and (max-width: 640px) { tile { width: 100%; margin: 0 0 10px 0; } tileList tileListHeader { font-size: 18px; line-height: 50px; } }
tile[hasRate="true"] { width: calc(50% - 20px); height: 192px; border: 4px solid var(--ink); }
tile[rank]:after { content: attr(rank); position: absolute; top: 0; left: 0; width: 40px; height: 40px; font-size: 20px; line-height: 40px; text-align: center; color: #FFFFFF; background: var(--boom); }
tile img[postImage], tile img[festivalImage], tile img[sharingImage] { display: block; width: 100%; max-height: 180px; margin: 0; padding: 0; border: 0; object-fit: cover; }
tile img[sharingImage] { cursor: initial; }
tile img[publicationImage] { display: block; width: 100%; height: 40vh; margin: 0; padding: 0; border: 0; object-fit: cover; }
tiletitle { position: absolute; bottom: 64px; left: 0; padding: 10px; overflow: hidden; font-size: 15px; line-height: 15px; color: #FFFFFF; background: rgba(0, 0, 0, .4); }
tile:hover > tiletitle { background: rgba(0, 0, 0, .75); }
tile span { display: block; width: 100%; height: 64px; margin: 0; padding: 0; overflow: hidden; font-size: 12px; line-height: 30px; color: var(--boom); }
tile span img[userImage] { display: inline-block; width: 50px; height: 50px; margin: 7px; vertical-align: middle; border-radius: 50%; object-fit: cover; }
tile span a { display: inline-block; height: 64px; margin-left: 10px; overflow: hidden; font-size: 16px; line-height: 64px; vertical-align: middle; color: var(--ink); text-decoration: none; }
tile span a[noUserImage] { padding-right: 20px; }
tile span a:hover { color: var(--boom); }
.titleHead { display: block; padding: 0 20px; font-size: 20px; font-weight: bold; line-height: 50px; color: var(--boom); border-bottom: 4px dotted var(--line); }
.titleSub { display: block; margin: 0; padding: 0 20px; overflow: hidden; font-size: 14px; line-height: 30px; text-decoration: none; color: var(--ink-2); }
.titleSub a { display: inline-block; font-size: 14px; line-height: 30px; color: var(--boom); text-decoration: none; }
.titleSub a:hover { color: var(--ink); }

/* header slideshow */
slideshow { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 75vh; overflow: hidden; }
slideshow figure { display: none; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 75vh; margin: 0; padding: 0; }
slideshow figure.active { display: flex; animation: slideFade .5s ease-in-out; }
@keyframes slideFade { from { opacity: 0; } to { opacity: 1; } }
slideshow img { width: 100vw; height: 100%; object-fit: cover; }
slideshow figcaption { position: absolute; bottom: 50px; margin: 0 10px; padding: 6px 14px; font-size: 24px; text-align: center; color: #FFFFFF; background: rgba(0, 0, 0, .4); backdrop-filter: blur(3px); border-radius: var(--r-s); }
slideshow figdesc { position: absolute; top: 24px; margin: 0 10px; padding: 6px 14px; font-size: 18px; font-weight: bold; text-align: center; white-space: break-spaces; color: var(--ink); background: rgba(255, 255, 255, .8); border-radius: var(--r-s); }
.arrow { position: absolute; z-index: 50; top: 50%; padding: 10px; font-size: 40px; color: #FFFFFF; cursor: pointer; user-select: none; background: rgba(0, 0, 0, .15); border-radius: var(--r-s); transform: translateY(-50%); }
.arrow.left { right: 20px; } .arrow.right { left: 20px; }
.dots { position: absolute; bottom: 20px; display: flex; justify-content: center; width: 100%; }
.dot { width: 12px; height: 12px; margin: 0 5px; cursor: pointer; background: #bbb; border-radius: 50%; }
.dot.active { background: var(--boom); }
.controls { position: absolute; z-index: 51; top: 20px; left: 20px; display: flex; align-items: center; gap: 8px; }
.btn { padding: 5px 10px; font-size: 11px; color: #FFFFFF; cursor: pointer; background: rgba(0, 0, 0, .25); border: 0; border-radius: var(--r-s); }
.btn:focus { outline: 2px solid var(--boom); }
@media screen and (max-width: 640px) { .arrow.left { right: 10px; } .arrow.right { left: 10px; } .controls { left: 10px; } .btn { font-size: 10px; } }

/* media files list */
#MediaBox { display: block; margin: 10px 0; padding: 10px 0; overflow: hidden; font-size: 14px; text-align: right; vertical-align: top; border-bottom: 1px solid var(--line); }
#MediaBox[preview] { opacity: .3; background: #eaf5ea; }
div.MediaItem { display: block; position: relative; min-height: 32px; padding: 10px 50px 10px 10px; overflow: hidden; font-size: 16px; white-space: pre-wrap; vertical-align: middle; color: var(--ink-2); border-bottom: 1px solid var(--line); border-radius: var(--r-s); }
div.MediaItem:last-child { border: 0; }
div.MediaItem:hover { background: var(--soft); }
div.MediaItem img { position: absolute; right: 10px; width: 32px; height: 32px; margin: 0; border: 0; border-radius: var(--r-s); object-fit: cover; }
div.MediaItem a[title] { display: inline-block; line-height: 32px; vertical-align: middle; color: var(--boom); text-decoration: none; }
div.MediaItem a[title]:hover { color: var(--ink); }
div.postDetail[lang="en"] div.MediaItem a[title], div.postDetail[lang="en"] div.MediaItem fileInfo { font-family: Arial, Helvetica, sans-serif; direction: ltr; }
div.MediaItem fileInfo { display: inline-block; float: left; z-index: 5; min-width: 12px; margin: 5px 0; padding: 0 12px; font-size: 13px; font-weight: bold; text-align: center; color: var(--ink-2); background: var(--soft); border-radius: 15px; }
@media screen and (max-width: 640px) { #MediaBox { margin: 0; padding: 0; border: 0; } div.MediaItem { padding: 5px 50px 5px 5px; font-size: 14px; } }

div[blockInfo] { display: block; margin-bottom: 50px; white-space: initial; }
div[group] { display: flex; flex-flow: column; padding: 10px 0; font-size: 16px; break-inside: avoid; }
@media only screen and (max-width: 640px) { div[group] { font-size: 14px; } }

div.boomlogBodyStyle { display: block; padding: 20px; overflow: hidden; font-size: 16px; line-height: 2; text-align: right; white-space: pre-wrap; color: var(--ink-2); }

/* Persian poetry (.ppoem > .beyt > .mesra x2) */
.ppoem { display: block; margin-top: 10px; line-height: 40px; white-space: nowrap; container-type: inline-size; }
.beyt { --pg: 36px; display: block; white-space: pre-wrap; }
.mesra { display: inline-block; box-sizing: content-box; width: calc(50% - var(--pg)); padding: 0 0 0 var(--pg); font-family: 'Doran Classic Dots FaNum', 'Vazir', serif; font-size: 19px; text-align: justify; text-align-last: justify; -moz-text-align-last: justify; white-space: nowrap; }
.mesra:last-child { padding: 0 var(--pg) 0 0; }
.mesra::after { content: ""; width: 0; height: 0; }
.mesra strong { font-family: 'Doran Classic Dots FaNum', 'Vazir', serif; }
@supports (width: 1cqw) {
    .beyt { --pg: clamp(12px, 4cqw, 50px); }
    .mesra { font-size: clamp(12.5px, calc((50cqw - var(--pg)) / 17), 22px); }
}
@media screen and (max-width: 960px) { .ppoem { line-height: 32px; } }
@media screen and (max-width: 640px) { .beyt { margin-bottom: 18px; } .mesra { width: calc(100% - var(--pg)); padding: 0 0 0 var(--pg); } .mesra:last-child { padding: 0 var(--pg) 0 0; } }
@media screen and (max-width: 640px) { .mesra { font-size: 18px; } }
/* phones: one hemistich per line, so the whole width is available to it */
@supports (width: 1cqw) {
    @media screen and (max-width: 640px) {
        .mesra { font-size: clamp(15px, calc((100cqw - var(--pg)) / 17), 21px); }
    }
}

/* comment form when the visitor is not signed in */
#newCommentFormIn:has(textarea:disabled) { background: var(--soft); }
#newCommentFormIn textarea:disabled { color: var(--muted); cursor: not-allowed; resize: none; -webkit-text-fill-color: var(--muted); opacity: 1; }
div.newCommentForm input[type="submit"]:disabled { opacity: .45; cursor: not-allowed; }
div.newCommentForm input[type="submit"]:disabled:hover { background: var(--boom); }