/* =====================================================================
   PICME  |  پیکمی — نمایشگاه مجازی عکس و هنر دیجیتال
   Stylesheet by Babak Arjomandi — refined 2026-10-15

   Structure of this file
   ----------------------
   1. Design tokens (:root)                    ← colours, radius, shadows
   2. Original component rules (kept, tidied)  ← every selector/class/attribute
                                                 used by the site is preserved
   3. Price / download pill (grid cards)       ← NEW: price shows on hover / touch
   4. Refinement layer (end of file)           ← modern look, desktop + mobile

   Quick tweaks (all live in :root):
     --boom           brand red
     --card-min       minimum card width in grids
     --card-ratio     thumbnail ratio of cards (4/3, 1/1, 3/4 ...)
   ===================================================================== */


@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;
    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;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: 'NotoSans';
    src: url('https://themes.viraw.ir/fonts/NotoSans/NotoSans-Regular.woff') format('woff');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: 'NotoSans';
    src: url('https://themes.viraw.ir/fonts/NotoSans/NotoSans-Bold.woff') format('woff');
    font-style: normal;
    font-weight: bold;
    text-rendering: optimizeLegibility;
}

/**
*	Name:			farhang2 Fonts
*	Version:			2.1
*	Author:			Moslem Ebrahimi (moslemebrahimi.com)
*	Created on:		May 11, 2022
*	Updated on:		May 22, 2022
*	Website:			http://fontiran.com
*	Copyright:		Commercial/Proprietary Software
--------------------------------------------------------------------------------------
فونت فرهنگ یک نرم افزار مالکیتی محسوب می شود. جهت آگاهی از قوانین استفاده از این فونت ها لطفا به وب سایت (فونت ایران دات کام) مراجعه نمایید
--------------------------------------------------------------------------------------
farhang2 fonts are considered a proprietary software. To gain information about the laws regarding the use of these fonts, please visit www.fontiran.com 
--------------------------------------------------------------------------------------
This set of fonts are used in this project under the license: (7L81X0RP)
-------------------------------------------------------------------------------------- 	
**/

@font-face {
	font-family: 'Farhang2FaNum';
	font-style: normal;
	font-weight: 100;
	src: url('https://www.picme.ir/skin/picme/fonts/Farhang2semi/woff2/Farhang2FaNum-thin.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
		 url('https://www.picme.ir/skin/picme/fonts/Farhang2semi/woff/Farhang2FaNum-thin.woff') format('woff');  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}
@font-face {
	font-family: 'Farhang2FaNum';
	font-style: normal;
	font-weight: 200;
	src: url('https://www.picme.ir/skin/picme/fonts/Farhang2semi/woff2/Farhang2FaNum-extralight.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
		 url('https://www.picme.ir/skin/picme/fonts/Farhang2semi/woff/Farhang2FaNum-extralight.woff') format('woff');  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}
@font-face {
	font-family: 'Farhang2FaNum';
	font-style: normal;
	font-weight: 300;
	src: url('https://www.picme.ir/skin/picme/fonts/Farhang2semi/woff2/Farhang2FaNum-light.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
		 url('https://www.picme.ir/skin/picme/fonts/Farhang2semi/woff/Farhang2FaNum-light.woff') format('woff');  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}
@font-face {
	font-family: 'Farhang2FaNum';
	font-style: normal;
	font-weight: 500;
	src: url('https://www.picme.ir/skin/picme/fonts/Farhang2semi/woff2/Farhang2FaNum-medium.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
		 url('https://www.picme.ir/skin/picme/fonts/Farhang2semi/woff/Farhang2FaNum-medium.woff') format('woff');  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}
@font-face {
	font-family: 'Farhang2FaNum';
	font-style: normal;
	font-weight: 600;
	src: url('https://www.picme.ir/skin/picme/fonts/Farhang2semi/woff2/Farhang2FaNum-demibold.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
		 url('https://www.picme.ir/skin/picme/fonts/Farhang2semi/woff/Farhang2FaNum-demibold.woff') format('woff');  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}

@font-face {
	font-family: 'Farhang2FaNum';
	font-style: normal;
	font-weight: 800;
	src: url('https://www.picme.ir/skin/picme/fonts/Farhang2semi/woff2/Farhang2FaNum-extrabold.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
		 url('https://www.picme.ir/skin/picme/fonts/Farhang2semi/woff/Farhang2FaNum-extrabold.woff') format('woff');  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}
@font-face {
	font-family: 'Farhang2FaNum';
	font-style: normal;
	font-weight: 900;
	src: url('https://www.picme.ir/skin/picme/fonts/Farhang2semi/woff2/Farhang2FaNum-black.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
		 url('https://www.picme.ir/skin/picme/fonts/Farhang2semi/woff/Farhang2FaNum-black.woff') format('woff');  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}
@font-face {
	font-family: 'Farhang2FaNum';
	font-style: normal;
	font-weight: bold;
	src: url('https://www.picme.ir/skin/picme/fonts/Farhang2semi/woff2/Farhang2FaNum-bold.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
		 url('https://www.picme.ir/skin/picme/fonts/Farhang2semi/woff/Farhang2FaNum-bold.woff') format('woff');  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}
@font-face {
	font-family: 'Farhang2FaNum';
	font-style: normal;
	font-weight: normal;
	src: url('https://www.picme.ir/skin/picme/fonts/Farhang2semi/woff2/Farhang2FaNum-regular.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
		 url('https://www.picme.ir/skin/picme/fonts/Farhang2semi/woff/Farhang2FaNum-regular.woff') format('woff');  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}

:root {
    /* brand (original) */
    --boom: #d52d25;
    --back: #282828;
    --cc: 4;
    --ccs: 3;
    --scc: 3;
    --sccs: 2;

    /* brand — extended */
    --boom-dark: #b3221b;
    --boom-light: #ff7a72;
    --boom-soft: rgba(213, 45, 37, 0.08);

    /* neutrals */
    --ink: #1d1d1f;
    --ink-2: #55555a;
    --ink-3: #8c8c91;
    --paper: #ffffff;
    --canvas: #f3efe8;
    --mat: #ece7de;
    --line: rgba(0, 0, 0, 0.08);
    --line-strong: rgba(0, 0, 0, 0.18);

    /* shape & depth */
    --radius-sm: 8px;
    --radius: 16px;
    --radius-lg: 24px;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.05), 0 3px 10px rgba(0, 0, 0, 0.06);
    --shadow-2: 0 10px 30px rgba(0, 0, 0, 0.12);
    --shadow-3: 0 18px 50px rgba(0, 0, 0, 0.2);
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

    /* cards */
    --card-min: 220px;
    --card-gap: 20px;
    --card-ratio: 4 / 3;

    /* subtle paper grain for gallery walls */
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

    /* inline icons (no external files needed) */
    --ico-dl-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0l-5-5m5 5l5-5M4 20h16'/%3E%3C/svg%3E");
    --ico-dl-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d52d25' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0l-5-5m5 5l5-5M4 20h16'/%3E%3C/svg%3E");
    --ico-tag-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4l-7.2 7.2a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.3' fill='%23fff'/%3E%3C/svg%3E");

    --ico-tag-g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c8c91' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4l-7.2 7.2a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.3' fill='%238c8c91'/%3E%3C/svg%3E");
    --ico-tag-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d52d25' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4l-7.2 7.2a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.3' fill='%23d52d25'/%3E%3C/svg%3E");
    --ico-dl-g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c8c91' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0l-5-5m5 5l5-5M4 20h16'/%3E%3C/svg%3E");
}

* {
    font-family: 'Vazir',Arial,Helvetica,sans-serif;
    -webkit-appearance: none;
}

img[onclick] {
    cursor: pointer;
}

input[type="submit"] {
    -webkit-appearance: none;
    border-radius: 0;
}

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

@media screen and (min-width: 1201px) {
    html {
        margin-top: 60px;
    }
}

@media screen and (max-width: 1200px) {
    html {
        margin-top: 50px;
    }
}

body {
    background: #FFFFFF;
    margin: 0;
    padding: 0;
    text-align: center;
    direction: rtl;
    font-size: 9pt;
    width: 100%;
}

.firstColor {
    color: #747474;
}

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

#parent {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    overflow:hidden;
}

#loginbarBG {
    display: block;
    position: fixed;
    z-index: 150;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: 0;
    background: #FFFFFF;
    transition: all 0.5s;
}

#loginbarBG[ontop] {
    /* filter:grayscale(1); */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);    
}

@media screen and (max-width: 1200px) {
    #loginbarBG {
        /* box-shadow: 0 0 50px rgba(0,0,0,0.25); */
    }
}

#loginbarContainer {
    display: block;
    /* max-width: 1200px; */
    margin: 0 auto;
    padding: 0 10px;
    transition: all .1s ease-in-out;
    -webkit-transition: all .1s ease-in-out;
    overflow: hidden;
    position: relative;
}

#loginbarContainer[ontop] {
}

@media screen and (max-width: 1200px) {
    #loginbarContainer {
        background: url(../../content/app/minilogo.png) no-repeat center center;
        background-size: auto 50px;
    }
}

#loginbar {
    display: block;
    margin: 0;
    text-align: left;
    color: #c8c8c8;
    font-size: 12px;
    height: 30px;
    padding: 15px 0;
    line-height: 30px;
    letter-spacing: normal;
}

#loginbar[ontop] {
}

#loginbar[ontop] a.sendPost {
}

#loginbar[ontop] a.sendPost:hover {
}

@media screen and (max-width: 1200px) {
    #loginbar {
        display: block;
        margin: 10px 0;
        text-align: left;
        color: #c8c8c8;
        font-size: 12px;
        height: 30px;
        padding: 0;
        line-height: 30px;
        letter-spacing: normal;
    }

    #loginbar span.mobileMenuKey {
        display: inline-block;
        width: 30px;
        color: transparent;
        height: 30px;
        padding: 0;
        margin-left: 10px;
        line-height: 30px;
        text-align: center;
        text-transform: uppercase;
        text-decoration: none;
        background: url(images/list_dark.png) no-repeat center center;
        background-size: 48px auto;
        font-weight: bold;
        vertical-align: top;
        overflow: hidden;
        float: right;
    }

    #loginbar span.mobileMenuKey:hover {
        background: url(images/list_darkR.png) no-repeat center center;
        background-size: 48px auto;
    }

    #loginbar a.sendPost {
        display: none;
    }
}

@media screen and (min-width: 1201px) {
    #loginbar span.mobileMenuKey {
        display: none;
    }

    #loginbar a.sendPost {
        display: inline-block;
        width: 30px;
        color: transparent;
        height: 30px;
        padding: 0;
        margin-left: 10px;
        float: right;
        line-height: 30px;
        text-align: center;
        text-transform: uppercase;
        text-decoration: none;
        background: url(images/icon/n/add.png) no-repeat center center;
        background-size: 20px auto;
        vertical-align: top;
        opacity: .5;
    }

    #loginbar a.sendPost:hover {
        opacity: 1;
    }
}

@media screen and (min-width: 1201px) {
    #loginbar a.buttonLogin {
        display: inline-block;
        width: 30px;
        color: transparent;
        height: 30px;
        padding: 0;
        line-height: 30px;
        text-align: center;
        text-transform: uppercase;
        text-decoration: none;
        background: url(images/icon/n/user.png) no-repeat center center;
        background-size: 20px auto;
    }

    #loginbar a.buttonLogin:hover {
        background-size: 22px auto;
    }
}

@media screen and (max-width: 1200px) {
    #loginbar a.buttonLogin {
        display: inline-block;
        width: 30px;
        color: transparent;
        height: 30px;
        padding: 0;
        /* margin-right: 10px; */
        line-height: 30px;
        text-align: center;
        text-transform: uppercase;
        text-decoration: none;
        background: url(images/icon/n/user.png) no-repeat center center;
        background-size: 20px auto;
    }

    #loginbar a.buttonLogin:hover {
        background-size: 22px auto;
    }
}

#loginbar a.buttonAdmin {
    display: inline-block;
    width: 30px;
    float: right;
    height: 30px;
    margin-left: 10px;
    line-height: 30px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0;
    color: transparent;
    border-left: 0;
    font-weight: bold;
    vertical-align: top;
    background: url(images/icon/n/apps.png) no-repeat center center;
    background-size: 22px auto;
    opacity: .5;
}

#loginbar a.buttonAdmin:hover {
    opacity: 1;
}

@media screen and (max-width: 1200px) {
    #loginbar a.buttonAdmin {
        display: none;
    }
}

#loginbar a.buttonDashboard {
    display: inline-block;
    position: relative;
    min-width: 50px;
    color: #FFFFFF;
    height: 30px;
    padding: 0 10px;
    margin-right: 10px;
    line-height: 30px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    background: var(--back);
    font-weight: bold;
}

#loginbar a.buttonDashboard:hover {
    color: var(--back);
    background: var(--boom);
}

@media screen and (max-width: 1200px) {
    #loginbar a.buttonDashboard {
        display: none;
    }
}

#loginbar a.buttonDashboard[data-badge]:after {
    content: attr(data-badge);
    position: absolute;
    top: -8px;
    left: -8px;
    font-size: .9em;
    background: var(--boom);
    color: white;
    width: 18px;
    height: 18px;
    text-align: center;
    line-height: 18px;
    border-radius: 50%;
    box-shadow: 0 0 1px #939393;
}

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

#loginbar a.buttonLogout {
    display: inline-block;
    width: 20px;
    color: transparent;
    height: 20px;
    padding: 0;
    line-height: 20px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    vertical-align: top;
    background: url(images/icon/lock-16.png) no-repeat center center;
    background-size: 12px auto;
    border: 1px solid #C2C2C2;
    margin: 4px 0;
}

#loginbar a.buttonLogout:hover {
    background-color: var(--back);
    border: 1px solid var(--back);
}

@media screen and (min-width: 640px) {
    #loginbar a.buttonUser {
        display: inline-block;
        float: left;
        position: relative;
        font-size: 14px;
        color: rgba(0,0,0,0.5);
        height: 30px;
        padding: 0 0 0 40px;
        margin: 0;
        line-height: 30px;
        text-align: center;
        text-decoration: none;
        vertical-align: top;
    }

    #loginbar a.buttonUser:hover {
        color: var(--boom);
    }
}

@media screen and (max-width: 640px) {
    #loginbar a.buttonUser {
        display: inline-block;
        position: relative;
        width: 30px;
        font-size: 14px;
        color: transparent;
        height: 30px;
        padding: 0;
        margin: 0;
        line-height: 30px;
        text-align: center;
        text-decoration: none;
        vertical-align: top;
        float: left;
    }

    #loginbar a.buttonUser:hover {
    }
}

#loginbar a.buttonUser img {
    display: block;
    position: absolute;
    top: -1px;
    left: 0;
    margin: 0;
    border: 3px solid #efefef;
    width: 26px;
    height: 26px;
    border-radius: 50%;
}

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

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

#searchbar {
    display: block;
    text-align: right;
    color: var(--boom);
    font-size: 16px;
    padding: 10px 50px;
    letter-spacing: normal;
    white-space: nowrap;
    background: #f5f5f5;
}

#searchbar[ontop] {
}

#searchbar:hover, #searchbar:focus {
}


#searchInput {
    display: inline-block;
    width: calc(100% - 102px);
    color: var(--boom);
    height: 40px;
    line-height: 40px;
    margin: 0;
    font-size: 14px;
    padding: 0 50px;
    text-align: right;
    text-decoration: none;
    background: #FFFFFF url(../../content/app/favicon.png) no-repeat right 10px top 5px;
    border: 1px dotted rgba(0,0,0,0.2);
    outline: 0;
    border-radius: 25px;
}

#searchInput:focus {
    color: #000000;
    display: inline-block;
}

#searchbar:focus > #searchInput, #searchbar:hover > #searchInput {
}

#searchBtn {
    display: block;
    position: absolute;
    top: 6px;
    left: 50px;
    width: 50px;
    border: 0;
    color: transparent;
    background: url(images/icon/n/search.png) no-repeat center center;
    background-size: 22px auto;
    font-weight: bold;
    height: 50px;
    padding: 0;
    margin: 0;
    line-height: 50px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}

#searchBtn:hover {
}

@media screen and (max-width: 1200px) {
    #searchbar {
        padding: 10px;
    }

#searchBtn {
    left: 10px;
}
}

#headerBG {
    display: block;
    position: relative;
    padding: 0;
    text-align: center;
    background: #e1e1e1;
}

@media screen and (min-width: 1201px) {
    #header {
        display: block;
        margin: 0 auto;
        text-align: center;
        padding: 0;
        position: relative;
    }
}

@media screen and (max-width: 1200px) {
    #header {
        display: block;
        margin: 0 auto;
        text-align: center;
        padding: 0;
    }
}

@media screen and (max-width: 1200px) {
    #navbarBG {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 120;
        padding: 50px 0 0 0;
        width: 30%;
        min-width: 300px;
        background: #ffffff;
        overflow: auto;
        -webkit-transition: all .5s ease-in-out;
        box-shadow: 0 0 25px rgba(0,0,0,0.50);
    }

    #navbar {
        display: block;
        position: relative;
        max-width: 1200px;
        margin: 0 auto 50px auto;
        padding: 0;
        white-space: nowrap;
        text-align: right;
        border-top: 1px solid rgba(0,0,0,0.05);
    }

    #navbar a {
        display: block;
        position: relative;
        height: 40px;
        line-height: 40px;
        margin: 0;
        text-align: right;
        padding: 0 50px 0 10px;
        margin: 0;
        font-size: 18px;
        text-decoration: none;
        color: #000000;
        vertical-align: top;
        border-bottom: 1px dotted rgba(0,0,0,0.15);
    }

    #navbar a:hover {
        background-color: rgba(0,0,0,0.05);
    }

    #navbar a[selected] {
        display: block;
        height: 40px;
        line-height: 40px;
        margin: 0;
        text-align: right;
        padding: 0 50px 0 10px;
        margin: 0;
        font-size: 18px;
        text-decoration: none;
        color: #FFFFFF;
        background-color: rgba(0,0,0,0.25);
    }

    #navbar a[selected]:hover {
        background-color: rgba(0,0,0,0.35);
    }

    #navbar a[home] {
        display: block;
        height: 40px;
        padding: 0 50px 0 10px;
        margin: 0;
        background-image: url(../../content/app/favicon.png);
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: auto 28px;
    }

    #navbar a[home][selected] {
        display: block;
        height: 40px;
        padding: 0 50px 0 10px;
        margin: 0;
        background: var(--back) url(../../content/app/minilogow.png) no-repeat right 10px center;
        background-size: auto 28px;
    }

    #navbar div[hide] {
        display: block;
    }

    #navbar span[close] {
        position: fixed;
        z-index: 250;
        display: block;
        width: 90px;
        height: 90px;
        top: -20px;
        right: -20px;
        background: url(images/list_darkR.png) no-repeat center center;
        background-size: 48px auto;
        cursor: pointer;
        border-radius: 50%;
    }

    #navbar span[close]:hover {
        background: rgba(0,0,0,0.05) url( 'images/list_dark.png' ) no-repeat center center;
        background-size: 48px auto;
    }

    #navbar a[sendpost] {
        background-image: url(images/icon/png40/add_40.png);
        background-repeat: no-repeat;
        background-position: right 11px center;
        background-size: 22px 22px;
    }

    #navbar a[dashboardMenu] {
    }

    #navbar a[dashboardMenu="mypost"] {
        border-top: 3px solid rgba(0,0,0,0.1);
        background-image: url(images/icon/n/list.png);
        background-repeat: no-repeat;
        background-position: right 11px center;
        background-size: 22px 22px;
    }

    #navbar a[dashboardMenu="mypost"] span[addoption] {
        display: block;
        position: absolute;
        width: 30px;
        height: 30px;
        top: 5px;
        left: 12px;
        background: url(images/icon/n/add.png) no-repeat center center;
        background-size: 22px 22px;
        padding: 0;
        margin: 0;
        cursor: pointer;
    }

    #navbar #search_bar_btn {
        background-image: url(images/icon/n/search.png);
        background-repeat: no-repeat;
        background-position: right 11px center;
        background-size: 22px 22px;
        display: none;
    }

    #navbar a[dashboard] {
        background-image: url(images/icon/n/view.png);
        background-repeat: no-repeat;
        background-position: right 11px center;
        background-size: 22px 22px;
    }


    #navbar a[sharing] {
        background-image: url(images/icon/n/share.png);
        background-repeat: no-repeat;
        background-position: right 11px center;
        background-size: 22px 22px;
    }

    #navbar a[festivals] {
        background-image: url(images/icon/n/award.png);
        background-repeat: no-repeat;
        background-position: right 11px center;
        background-size: 22px 22px;
    }

    #navbar a[publications] {
        background-image: url(images/icon/n/book.png);
        background-repeat: no-repeat;
        background-position: right 11px center;
        background-size: 22px 22px;
    }

    #navbar a[dashboardMenu="myfriend"] {
        background-image: url(images/icon/n/users-alt.png);
        background-repeat: no-repeat;
        background-position: right 11px center;
        background-size: 22px 22px;
    }

    #navbar a[dashboardMenu="myinbox"] {
        background-image: url(images/icon/n/comment.png);
        background-repeat: no-repeat;
        background-position: right 11px center;
        background-size: 22px 22px;
    }

    #navbar a[dashboardMenu="myprofile"] {
        border-top: 3px solid rgba(0,0,0,0.1);
        /*background-image: url(images/icon/png40/man_slim_40.png);*/
        background-repeat: no-repeat;
        background-position: right 11px center;
        background-size: 22px 22px;
    }

    #navbar a[dashboardMenu="myprofile"] img {
        display: block;
        position: absolute;
        width: 28px;
        right: 6px;
        top: 4px;
        border: 2px solid var(--back);
        border-radius: 50%;
        filter: brightness(1.5) grayscale(1);
    }

    #navbar a[dashboardMenu="myusername"] {
        background-image: url(images/icon/n/id.png);
        background-repeat: no-repeat;
        background-position: right 11px center;
        background-size: 22px 22px;
    }

    #navbar a[dashboardMenu="mycell"] {
        background-image: url(images/icon/n/cell.png);
        background-repeat: no-repeat;
        background-position: right 11px center;
        background-size: 22px 22px;
    }

    #navbar a[dashboardMenu="myemail"] {
        background-image: url(images/icon/n/email.png);
        background-repeat: no-repeat;
        background-position: right 11px center;
        background-size: 22px 22px;
    }

    #navbar a[dashboardMenu="myinvitation"] {
        background-image: url(images/icon/n/invite.png);
        background-repeat: no-repeat;
        background-position: right 11px center;
        background-size: 22px 22px;
    }

    #navbar a[dashboardMenu="mypassword"] {
        background-image: url(images/icon/n/passkey.png);
        background-repeat: no-repeat;
        background-position: right 11px center;
        background-size: 22px 22px;
    }

    #navbar a[dashboardMenu="logout"] {
        background-image: url(images/icon/n/lock.png);
        background-repeat: no-repeat;
        background-position: right 11px center;
        background-size: 22px 22px;
    }

    #navbar a[dashboardMenu][data-badge]:after {
        content: attr(data-badge);
        position: absolute;
        top: 9px;
        left: 15px;
        font-size: 11px;
        background: var(--boom);
        color: white;
        width: 25px;
        height: 24px;
        text-align: center;
        line-height: 24px;
        border-radius: 50%;
        box-shadow: 0 0 1px #939393;
    }

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

    #navbar a[admin] {
        background-image: url(images/icon/n/apps.png);
        background-repeat: no-repeat;
        background-position: right 11px center;
        background-size: 22px 22px;
    }

    #navbar a[map] {
        background-image: url(images/icon/n/map.png);
        background-repeat: no-repeat;
        background-position: right 9px center;
        background-size: auto 24px;
    }

    #navbar a[contact] {
        background-image: url(images/icon/n/contact.png);
        background-repeat: no-repeat;
        background-position: right 9px center;
        background-size: auto 26px;
    }

    #navbar a:last-child {
        border-bottom: 0;
    }
}

@media screen and (min-width: 1201px) {
    #navbarBG {
        display: block;
        position: fixed;
        z-index: 180;
        top: 0;
        left: 0;
        right: 0;
        padding: 0;
        text-align: center;
        -webkit-transition: all .1s ease-in-out;
        pointer-events: none;
    }

    #navbarBG span[close] {
        display: none;
    }

    #navbar div[hide] {
        display: none;
    }

    #navbarBG[noheader] {
    }

    #navbarBG[ontop] {
    }

    #navbar {
        display: block;
        position: relative;
        /* max-width: 1200px; */
        height: 50px;
        line-height: 50px;
        margin: 0 auto;
        padding: 5px 0;
        white-space: nowrap;
        text-align: center;
        font-weight: bold;
    }

    #navbar a[home] {
        display: inline-block;
        width: 55px;
        height: 50px;
        padding: 0;
        margin: 0;
        color: transparent;
        background: url(../../content/app/minilogo.png) no-repeat center center;
        background-size: 36px auto;
        transition: all 0.2s;
    }

    #navbar a[home]:hover {
        display: inline-block;
        width: 55px;
        height: 50px;
        padding: 0;
        margin: 0;
        color: transparent;
        background: url(../../content/app/minilogo.png) no-repeat center center;
        background-size: 48px auto;
    }

    #navbar a[home][selected] {
        display: inline-block;
        width: 55px;
        height: 50px;
        padding: 0;
        margin: 0;
        color: transparent;
        background: url(../../content/app/minilogo.png) no-repeat center center;
        background-size: 42px auto;
    }

    #navbar a[home][selected]:hover {
        display: inline-block;
        width: 55px;
        height: 50px;
        padding: 0;
        margin: 0;
        color: transparent;
        background: url(../../content/app/minilogo.png) no-repeat center center;
        background-size: 48px auto;
    }

    #navbar a {
        display: inline-block;
        min-width: 55px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        padding: 0 15px;
        margin: 0;
        font-size: 18px;
        font-weight: 300;
        text-decoration: none;
        color: rgba(0,0,0,0.8);
        vertical-align: top;
        pointer-events: auto;
    }
    #navbar a[contact]
    {
        display:none;
    }

    #navbar a:hover {
        color: var(--boom);
    }

    #navbar a[selected] {
        display: inline-block;
        min-width: 55px;
        height: 50px;
        line-height: 50px;
        margin: 0;
        text-align: center;
        padding: 0 15px;
        margin: 0;
        font-size: 18px;
        text-decoration: none;
        color: var(--boom);
    }

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

    #navbar a[sendpost] {
        display: none;
    }

    #navbar a[dashboardMenu] {
        display: none;
    }

    #navbar a[admin] {
        display: none;
    }

    #navbar a[search] {
        width: 55px;
        padding: 0;
        margin: 0;
        color: transparent;
        background: url(images/icon/n/search.png) no-repeat center center;
        background-size: 18px auto;
        display: none;
    }

    #navbar a[search]:hover {
        color: transparent;
        background-size: 20px auto;
    }
}

#submenubarBG {
    display: block;
    padding: 0;
    text-align: center;
    background: var(--boom);
    clear: both;
}

#submenubar {
    display: block;
    max-width: 1200px;
    padding: 0;
    margin: 0 auto;
    text-align: center;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}



#submenubar::-webkit-scrollbar {
    height: 5px;
    background:#fd6861;
}

#submenubar::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 0px rgba(0, 0, 0, 0);
}

#submenubar::-webkit-scrollbar-thumb {
  width: 5px;
  background-color: #96211b;
}

#submenubar::-webkit-scrollbar-thumb:hover {
  background-color: var(--back);
}

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








#submenubar a {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    text-align: center;
    padding: 0 15px;
    margin: 5px 0;
    font-size: 16px;
    text-decoration: none;
    color: #FFFFFF;
    border-right: 1px dotted rgba(255,255,255,0.2);
}

#submenubar a:first-of-type {
    border-right: 0;
}

#submenubar a:hover {
    color: var(--back);
}

#submenubar a[selected] {
    background: #FFFFFF;
    color: var(--boom);
    border-radius: 3px;
}

#submenubar a[selected]:hover {
    text-decoration: underline;
}

#fullWidthView {
    display: block;
    text-align: center;
    background: var(--back);
    clear: both;
}

#fullCategoryView {
    display: block;
    width: 1400px;
    padding: 10px 0 0 0;
    margin: 0 auto;
    overflow: hidden;
}

#fullCategoryView div.categoryBox {
    display: block;
    width: 230px;
    height: 200px;
    overflow: hidden;
    float: right;
    background: #FFFFFF;
    text-align: right;
    margin: 0 0 8px 8px;
    border: 1px solid #EEEEEE;
}

#fullCategoryView div:last-child {
    display: none;
}

#fullCategoryView a[title] {
    display: inline-block;
    background: var(--back);
    min-width: 55px;
    height: 40px;
    line-height: 40px;
    margin: 0;
    text-align: center;
    padding: 0 20px;
    margin: 15px 0 0 0;
    font-size: 16px;
    text-decoration: none;
    color: #FFFFFF;
}

#fullCategoryView a[title]:hover {
    background: var(--back);
}

#fullCategoryView ul {
    padding: 0 20px;
    overflow-y: auto;
    height: 120px;
    margin: 10px 5px;
}

#fullCategoryView ul li a {
    padding: 5px;
    font-size: 14px;
    line-height: 22px;
    text-decoration: none;
    color: #5E5E5E;
}

#fullCategoryView a img {
    height: 22px;
    vertical-align: middle;
    padding-left: 5px;
}

#fullCategoryView ul li a:hover {
    color: #000000;
    text-decoration: underline;
    text-decoration-color: #999999;
}

#pageBodyBG {
    display: block;
    padding: 0;
    text-align: center;
    overflow: hidden;
    clear: both;
}

@media screen and (min-width: 1201px) {
    #pageBody {
        display: block;
        /* width: calc(100% - 20px); */
        /* max-width: 1400px; */
        margin: 0 auto;
        padding: 0;
        text-align: right;
        vertical-align: top;
        overflow: hidden;
        min-height: 100%;
        white-space: nowrap;
    }

    #BodyContain {
        display: block;
        white-space: normal;
        padding: 0;
        vertical-align: top;
        min-height: 100%;
    }

    #BodySide {
        display: block;
        padding: 0;
        margin: 0;
        text-align: center;
        white-space: normal;
        overflow: hidden;
    }
}

@media screen and (max-width: 1200px) {
    #pageBody {
        display: block;
        margin: 0 auto;
        padding: 0;
        text-align: right;
        vertical-align: top;
        overflow: hidden;
        white-space: nowrap;
    }

    #BodyContain {
        display: block;
        white-space: normal;
        padding: 10px 0 0 0;
        vertical-align: top;
        min-height: 100%;
    }

    #BodySide {
        display: block;
        padding: 0;
        margin: 0;
        text-align: center;
        white-space: normal;
        vertical-align: top;
    }
}

@media screen and (max-width: 640px) {
    #pageBody {
        display: block;
        margin: 0 auto;
        padding: 0;
        text-align: right;
        vertical-align: top;
        overflow: hidden;
        white-space: nowrap;
        /* backdrop-filter: blur(2px); */
    }

    #BodyContain {
        display: block;
        white-space: normal;
        padding: 0;
        vertical-align: top;
        min-height: 100%;
    }
}

@media screen and (max-width: 480px) {
    #BodyContain {
        /*zoom: 75%;*/
    }
}

@media screen and (max-width: 320px) {
    #BodyContain {
        /*zoom: 50%;*/
    }
}

#adsBlock {
    display: block;
    padding: 0;
}

@media screen and (max-width: 1200px) {
    #adsBlock {
    }
}

#BodySide div.adView {
    padding-bottom: 10px;
    width: calc(50% - 20px);
    margin: 0;
    float: right;
}

@media screen and (max-width: 640px) {
    #BodySide div.adView {
        width: 100%;
        padding: 0;
    }
}

#BodySide img.bannerImg {
    display: block;
    border: 0;
    cursor: pointer;
    width: 100%;
}

#BodySide img.postImg {
    display: block;
    width: 290px;
    border: 0;
    cursor: pointer;
    border: 5px solid #DDDDDD;
    margin-bottom: 5px;
}

.border-gradient {
    border: 5px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(to left, #743ad5, #d53a9d);
}

@keyframes rotate {
    to {
        --angle: 360deg;
    }
}

@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

#quickSitemapBG {
    display: block;
    padding: 0;
    text-align: center;
    background: #333333;
}

#quickSitemap {
    display: block;
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    clear: left;
    padding: 20px 0;
    font-size: 18px;
    line-height: 35px;
}

@media screen and (min-width: 1201px) {
    #quickSitemap div {
        display: block;
        margin: 0px auto;
        padding: 10px 0px;
        vertical-align: top;
    }
}


#quickSitemap div ul {
    list-style-type: none;
    vertical-align: top;
    padding: 0 10px 0 0;
    margin: 0px;
}

#quickSitemap div ul li {
    display: inline-block;
    font-weight: bold;
    /* letter-spacing: 1px; */
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 20%;
    vertical-align: top;
}

@media screen and (max-width: 1200px) {
    #quickSitemap div ul li {
        display: inline-block;
        width: 25%;
    }
}

@media screen and (max-width: 900px) {
    #quickSitemap div ul li {
        display: inline-block;
        width: 50%;
    }
}

@media screen and (max-width: 640px) {
    #quickSitemap div ul li {
        display: inline-block;
        width: 50%;
    }
}

@media screen and (max-width: 320px) {
    #quickSitemap div ul li {
        display: block;
        width: 100%;
    }
}

#quickSitemap div ul li:first-child {
}

#quickSitemap div ul a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-weight: 500;
}

#quickSitemap div ul li ul {
    clear: both;
    display: block;
    list-style-type: none;
    font-weight: normal;
    padding: 0 0 10px 0;
    margin: 0px;
    padding-left: 1px;
    font-size: 14px;
    line-height: 25px;
    color: var(--back);
    vertical-align: top;
}

#quickSitemap div ul li ul li {
    clear: both;
    display: block;
    list-style-type: none;
    font-weight: normal;
    width: 100%;
}

#quickSitemap div ul li ul li a {
    color: rgba(255,255,255,0.6);
    font-size: 16px;
    font-weight: 100;
}

#quickSitemap div ul li ul li a:hover {
    color: var(--boom);
    text-decoration: none;
}

#footerBG {
    display: block;
    padding: 0;
    text-align: center;
    background: #333333;
}

@media screen and (min-width: 1201px) {
    #footer {
        display: block;
        position: relative;
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
        font-size: 16px;
        line-height: 20px;
        color: rgba(255,255,255,0.6);
        text-align: center;
        overflow: hidden;
        border-top: 1px dotted rgba(255,255,255,0.1);
        min-height: calc(100vh - 90px);
    }

    #footer a {
        text-decoration: none;
        color: var(--boom);
    }

    #footer a:hover {
        color: #FFFFFF;
    }

    #footer col1 {
        display: block;
        overflow: hidden;
    }

    #footer span.logo {
        display: inline-block;
        width: 64px;
        min-height: 64px;
        background: url(../../content/app/minilogow.png) no-repeat top -20px center;
        background-size: 72px auto;
        margin-left: 10px;
        float: right;
        opacity: 50%;
    }

    #footer col2 {
        display: block;
        overflow: hidden;
        padding: 0;
    }

    #footer col2 .social {
        display: inline-block;
        width: 32px;
        height: 32px;
        margin: 0 5px 0 0;
        filter: grayscale(100%);
    }

    #footer col2 .social:hover {
        filter: brightness(120%);
    }

    #footer col2 .appstore {
        display: inline-block;
        width: 92px;
        height: 32px;
        background-size: 92px 32px;
        margin: 0 5px 0 0;
        float: left;
    }
}

@media screen and (max-width: 1200px) {
    #footer {
        display: block;
        position: relative;
        margin: 0 auto;
        padding: 20px;
        font-size: 13px;
        line-height: 20px;
        color: rgba(255,255,255,0.6);
        border-top: 1px dotted rgba(255,255,255,0.1);
        min-height: calc(100vh - 90px);
    }

    #footer a {
        text-decoration: none;
        color: var(--boom);
    }

    #footer a:hover {
        color: #FFFFFF;
    }

    #footer col1 {
        display: block;
        padding-bottom: 10px;
        background-size: 60px auto;
        text-align: center;
    }

    #footer span.logo {
        display: inline-block;
        width: 64px;
        min-height: 64px;
        background: url(../../content/app/minilogow.png) no-repeat top -20px center;
        background-size: 72px auto;
        margin-left: 10px;
        float: right;
        opacity: 50%;
    }

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

    #footer col2 .social {
        display: inline-block;
        width: 32px;
        height: 32px;
        margin: 0 5px 0 0;
        border: 0;
        filter: grayscale(100%);
    }

    #footer col2 .social:hover {
        filter: brightness(120%);
    }

    #footer col2 .appstore {
        display: inline-block;
        width: 92px;
        height: 32px;
        background-size: 92px 32px;
        margin: 0 5px 0 0;
    }
}

a.linkedin {
    background: url(images/social/linkedin.png) no-repeat center center;
    background-size: 32px 32px;
}

a.youtube {
    background: url(images/social/youtube.png) no-repeat center center;
    background-size: 32px 32px;
}

a.facebook {
    background: url(images/social/facebook.png) no-repeat center center;
    background-size: 32px 32px;
}

a.instagram {
    background: url(images/social/instagram.png) no-repeat center center;
    background-size: 32px 32px;
}

a.twitter {
    background: url(images/social/twitter.png) no-repeat center center;
    background-size: 32px 32px;
}

a.google {
    background: url(images/social/googleplus.png) no-repeat center center;
    background-size: 32px 32px;
}

a.rssfeed {
    background: url(images/social/rssfeed.png) no-repeat center center;
    background-size: 32px 32px;
}

a.telegram {
    background: url(images/social/telegram.png) no-repeat center center;
    background-size: 32px 32px;
}

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;
}

/*////////////////////////////////////////////////////////////////*/
.vslides {
    padding: 0;
    width: 100%;
    height: 50vh;
    display: block;
    margin: 0 auto;
    position: relative;
    direction: ltr;
    text-align: center;
    /*z-index:-1;*/
}

@media screen and (max-width: 640px) {
    .vslides {
        height: 40vh;
    }
}

.vslides * {
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.vslides input {
    display: none;
}

.vslide-container {
    display: block;
}

.vslide {
    top: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    transform: scale(0);
    transition: all .7s ease-in-out;
}

.vslide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    overflow: hidden;
}

.nav label {
    width: 25%;
    height: 100%;
    display: none;
    position: absolute;
    opacity: 0.2;
    z-index: 9;
    cursor: pointer;
    transition: opacity .2s;
    color: transparent;
    text-align: center;
}

.vslide:hover + .nav label {
    opacity: 0.5;
}

.nav label:hover {
    opacity: 1;
}

.nav .next {
    right: 0;
    background-image: url(images/go-r.png);
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 15% auto;
}

.nav .prev {
    left: 0;
    background-image: url(images/go-l.png);
    background-repeat: no-repeat;
    background-position: left 20px center;
    background-size: 15% auto;
}

@media screen and (max-width: 640px) {
    .nav .next {
        background-position: right 10px center;
        background-size: 30% auto;
    }

    .nav .prev {
        background-position: left 10px center;
        background-size: 30% auto;
    }
}

input:checked + .vslide-container .vslide {
    opacity: 1;
    transform: scale(1);
    transition: opacity 1s ease-in-out;
}

input:checked + .vslide-container .nav label {
    display: block;
}

.nav-dots {
    width: 100%;
    bottom: 9px;
    height: 11px;
    display: block;
    position: absolute;
    text-align: center;
}

.nav-dots .nav-dot {
    top: -5px;
    width: 11px;
    height: 11px;
    margin: 0 4px;
    position: relative;
    border-radius: 100%;
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.6);
}

.nav-dots .nav-dot:hover {
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.8);
}

input#vs-img-1:checked ~ .nav-dots label#img-dot-1, input#vs-img-2:checked ~ .nav-dots label#img-dot-2, input#vs-img-3:checked ~ .nav-dots label#img-dot-3, input#vs-img-4:checked ~ .nav-dots label#img-dot-4, input#vs-img-5:checked ~ .nav-dots label#img-dot-5, input#vs-img-6:checked ~ .nav-dots label#img-dot-6 {
    background: rgba(0, 0, 0, 0.8);
}

/*////////////////////////////////////////////////////////////////*/
iframe.miniMapFrame {
    display: block;
    width: 100%;
    height: 296px;
    /* border: 1px solid var(--back); */
    margin: 0 0 10px 0;
    padding: 0;
}

#full-map-canvas {
    display: block;
    z-index: 0;
    width: 100%;
    height: calc(90vh - 140px);
    border: 0;
    margin: 0;
    padding: 0;
}

#mini-map-canvas {
    display: block;
    float: right;
    position: relative;
    z-index: 0;
    width: 50%;
    overflow: hidden;
    height: 50vh;
    margin: 0;
}

#user-map-canvas {
    display: block;
    z-index: 0;
    width: 100%;
    height: 30vh;
    overflow: hidden;
    border: 0;
    margin: 0 0 10px 0;
}

@media only screen and (max-width: 640px) {
    #mini-map-canvas {
        display: block;
        float: right;
        position: relative;
        z-index: 0;
        width: 100%;
        overflow: hidden;
        display: block;
        height: 30vh;
        margin: 0;
    }

    #user-map-canvas {
        display: block;
        z-index: 0;
        width: 100%;
        height: 35vh;
        overflow: hidden;
        border: 0;
        margin: 0 0 10px 0;
    }
}

#latestLocation {
    display: block;
    white-space: normal;
    vertical-align: top;
    padding: 0;
    text-align: center;
}

#latestLocation a {
    display: inline-block;
    width: calc(20% - 20px);
    border: 10px solid transparent;
    /* margin: 0 0 5px 5px; */
    color: #000000;
    text-align: right;
    vertical-align: top;
    font-size: 16px;
    background: #FFFFFF;
    text-decoration: none;
    line-height: 30px;
    vertical-align: text-top;
    transition: all 0.5s;
}

#latestLocation a:hover {
    scale:1.2;
    z-index:1000;
}


@media screen and (max-width: 1200px) {
    #latestLocation a {
        width: calc(25% - 20px);
    }
}

@media screen and (max-width: 640px) {
    #latestLocation a {
        width: calc(50% - 20px);
        font-size:14px;
    }
}

#latestLocation a:hover {
    color: #000000;
}

#latestLocation a img {
    display: block;
    margin: 0;
    border: 0;
    width: 100%;
    /* max-height: 10vh; */
    object-fit: cover;
    vertical-align: bottom;
}

/*////////////////////////////////////////////////////////////////*/
div.Captcha {
    display: block;
    width: 250px;
    height: 50px;
    white-space: nowrap;
    margin: 4px 0;
}

div.Captcha img {
    display: block;
    width: 200px;
    height: 50px;
    border: 0;
    float: right;
}

#CaptchaRefresh {
    display: block;
    width: 25px;
    height: 25px;
    margin: 12px 2px;
    background: url( 'images/icon/n/refresh.png' ) no-repeat center center;
    cursor: pointer;
    background-size: 22px auto;
    float: right;
}

#CaptchaRefresh:hover {
}

/*////////////////////////////////////////////////////////////////*/
#PopupWindowBG {
    position: fixed;
    display: block;
    z-index: 1000;
    background: rgba(0,0,0,0.2);
    backdrop-filter: blur(2px);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
}

#vBoxMessage {
    display: block;
    position: fixed;
    z-index: 2000;
    line-height: 40px;
    background: #FFFFFF;
    top: 0;
    right: 0;
    left: 0;
    margin: 0;
    padding: 15px 30px;
    text-align: right;
    font-size: 16px;
    color: var(--boom);
    box-shadow: 0 0 15px #888;
    overflow: hidden;
}

@media only screen and (max-width: 1200px) {
    #vBoxMessage {
        font-size: 12px;
    }
}

#vBoxMessage span[close] {
    position: absolute;
    z-index: 2010;
    display: block;
    width: 40px;
    height: 40px;
    top: 15px;
    left: 15px;
    background: url( 'images/icon/n/close.png' ) no-repeat center center;
    background-size: 22px auto;
    cursor: pointer;
}

#vBoxMessage span[close]:hover {
    background-size: 20px auto;
}

#vBoxMessage div[container] {
    display: inline-block;
    padding: 0 0 0 10px;
    font-size: 14px;
    color: var(--back);
}

#vBoxMessage div[action] {
    display: inline-block;
}

.okKey {
    display: inline-block;
    height: 30px;
    min-width: 50px;
    text-align: center;
    padding: 0 20px;
    margin: 0 0 0 10px;
    font-size: 14px;
    line-height: 30px;
    cursor: pointer;
    color: #ffffff;
    background: var(--boom);
}

.okKey:hover {
    background: #000000;
}

.cancelKey {
    display: inline-block;
    height: 30px;
    min-width: 50px;
    text-align: center;
    padding: 0 20px;
    margin: 0 0 0 10px;
    font-size: 14px;
    line-height: 30px;
    cursor: pointer;
    color: #000000;
    background: rgba(0,0,0,0.25);
}

.cancelKey:hover {
    color: #FFFFFF;
    background: rgba(0,0,0,0.5);
}

/*////////////////////////////////////////////////////////////////*/
#vw_NotificationPopup {
    display: block;
    width: 250px;
    position: fixed;
    bottom: 10px;
    right: 10px;
    padding: 20px 55px 20px 20px;
    background: #D3D3D3;
    color: #FFFFFF;
    font-size: 15px;
    line-height: 25px;
    text-align: right;
    color: #000000;
    border: 1px solid #696969;
    border-right: 5px solid #696969;
    z-index: 1000;
}

#vw_NotificationPopup img[icon] {
    display: block;
    position: absolute;
    width: 32px;
    height: 32px;
    top: 20px;
    right: 10px;
    border: 2px solid #696969;
    border-radius: 50%;
}

#vw_NotificationPopup a {
    color: var(--back);
    text-decoration: none;
}

#vw_NotificationPopup a:hover {
    color: #000000;
    text-decoration: underline;
}

#vw_NotificationPopup_close {
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    top: 5px;
    left: 5px;
    cursor: pointer;
    background: url(images/closeKey.png) no-repeat center center;
}

#vw_NotificationPopup_close:hover {
    background: url(images/closeKey_over.png) no-repeat center center;
}

/*////////////////////////////////////////////////////////////////*/
#vw_ChatPopup {
    display: block;
    width: 250px;
    position: fixed;
    bottom: 10px;
    right: 10px;
    padding: 20px 55px 20px 20px;
    background: #D3D3D3;
    color: #FFFFFF;
    font-size: 15px;
    line-height: 25px;
    text-align: right;
    color: var(--back);
    border: 1px solid #000000;
    border-top: 5px solid #000000;
    z-index: 1000;
}

#vw_ChatPopup_container {
}

#vw_ChatPopup_content {
    display: block;
    max-height: 200px;
    overflow-y: auto;
    margin: 10px 0;
    font-size: 12px;
    line-height: 20px;
}

#vw_ChatPopup_content span[Me] {
    display: block;
    padding: 5px;
    margin: 0 30px 5px 0;
    color: #FFFFFF;
    border: 1px solid #949494;
    background: #949494;
    border-radius: 3px;
}

#vw_ChatPopup_content span[Friend] {
    display: block;
    padding: 5px;
    margin: 0 0 5px 30px;
    color: #000000;
    font-size: 13px;
    border: 1px solid #e7e7e7;
    background: #e7e7e7;
    border-radius: 3px;
}

#vw_ChatPopup img[icon] {
    display: block;
    position: absolute;
    width: 32px;
    height: 32px;
    top: 20px;
    right: 10px;
    border: 2px solid #696969;
    border-radius: 50%;
}

#vw_ChatPopup input {
    display: block;
    width: 100%;
}

#vw_ChatPopup_Send {
    display: inline-block;
    min-width: 30px;
    height: 30px;
    padding: 0 10px;
    margin-top: 10px;
    line-height: 30px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    background: #396E9E;
    color: #DADADA;
    font-size: 13px;
    cursor: pointer;
}

vw_ChatPopup_Send:hover {
    color: #FFFFFF;
    background: var(--back);
}

#vw_ChatPopup a {
    color: var(--back);
    text-decoration: none;
}

#vw_ChatPopup a:hover {
    color: #000000;
    text-decoration: underline;
}

#vw_ChatPopup_close {
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    top: 5px;
    left: 5px;
    cursor: pointer;
    background: url(images/closeKey.png) no-repeat center center;
}

#vw_ChatPopup_close:hover {
    background: url(images/closeKey_over.png) no-repeat center center;
}

/*////////////////////////////////////////////////////////////////*/
@media screen and (min-width: 1201px) {
    div.formPanel {
        display: block;
        padding: 0;
        text-align: right;
        margin: 0 0 10px 0;
        background: #FFFFFF;
        border: 2px solid #ececec;
        border-radius: 10px;
    }
}

@media screen and (max-width: 1200px) {
    div.formPanel {
        display: block;
        padding: 0;
        text-align: right;
        margin: 0 0 10px 0;
        background: #FFFFFF;
        border: 1px solid #ececec;
    }
}

div.formPanel h1 {
    display: block;
    font-weight: bold;
    font-size: 18px;
    line-height: 40px;
    color: var(--boom);
    padding: 10px 20px 10px 20px;
    margin: 10px -10px 10px -10px;
    border-bottom: 1px solid var(--boom);
}

div.formPanel h1 img {
    height: 40px;
    vertical-align: bottom;
    margin: 0px 10px;
    border-radius: 50%;
}

div.formPanel h2 {
    display: block;
    font-weight: normal;
    font-size: 16px;
    line-height: 30px;
    color: #3b3b3b;
    padding: 10px 15px;
}

div.formPanel div[box] {
    display: block;
    padding: 10px 10px 0px 10px;
    margin-bottom: -10px;
    font-size: 12px;
    line-height: 25px;
}

div.formPanel div div {
    display: block;
    position: relative;
    padding: 10px 0;
}

div.formPanel div.highlight {
    border: 1px dotted rgba(0,0,0,0.3);
    padding: 10px 10px;
    margin: 5px 0;
    font-weight: bold;
}

div.formPanel div[actionbar] {
    display: block;
    padding: 15px 20px 25px 20px;
    margin: 10px -10px;
    /* border-top: 1px dotted rgba(0,0,0,0.2); */
    color: #009169;
    line-height: 35px;
    text-align: center;
}

div.formPanel div[actionbar] input[type="submit"] {
    display: inline-block;
    vertical-align: top;
    min-width: 50px;
    text-align: center;
    padding: 0 30px;
    margin: 0 0 0 10px;
    font-size: 16px;
    line-height: 50px;
    cursor: pointer;
    color: #FFFFFF;
    border: 0;
    background: var(--boom);
    font-weight: bold;
    border-radius: 5px;
}

div.formPanel div span {
    display: inline-block;
    width: 19%;
    margin-left: 1%;
    font-size: 14px;
    color: var(--boom);
    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;
    border: 0;
    height: 35px;
    line-height: 35px;
    vertical-align: middle;
    background: rgba(0,0,0,0.03);
    color: var(--back);
    /* border-right: 5px solid rgba(0,0,0,0.20); */
    background-repeat: no-repeat;
    background-position: left 5px center;
    padding: 0 5px 0 25px;
}

.cssControl[type="file"] {
    border: 0;
}

.cssControl:focus {
    outline: 0;
    box-shadow: 0 0 3px var(--boom);
}

.cssControl[recheck] {
    outline: 0;
    background: yellow;
    border-right: 5px solid red;
}

.cssControl[disabled] {
    outline: 0;
    background: #cdcccc;
    color: #6f6c6c;
    color: var(--back);
    background-repeat: no-repeat;
    background-position: left 5px center;
    padding: 0 5px 0 25px;    
}

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

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

controlHint {
    display: inline-block;
    vertical-align: middle;
    border-bottom: 1px dotted rgba(0,0,0,0.2);
    height: 25px;
    color: #FFFFFF;
    min-width: 40px;
    line-height: 25px;
    padding: 5px 10px;
    font-size: 14px;
    background: rgba(0,0,0,0.25);
    cursor: pointer;
}

controlHint:hover {
    color: #ffffff;
    background: #006bb7;
}

.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 div span {
        display: block;
        width: 100%;
        color: var(--boom);
        text-align: right;
    }

    .formcontrols {
        display: block;
        width: 100%;
        min-height: 30px;
        vertical-align: middle;
        white-space: nowrap;
    }

    .w50, .w100, .w150 {
        width: calc(25% - 15px);
    }

    .w200, .w300, .w500, .w600, .textboxview, .textboxviewMini {
        width: calc(100% - 35px);
    }

    controlHint {
        display: block;
        vertical-align: middle;
        height: 23px;
        color: var(--boom);
        background: #FFFFFF;
        margin: 10px 0;
        line-height: 22px;
        padding: 10px 5px;
        font-size: 12px;
        cursor: pointer;
        text-align: left;
        border: 0;
    }
}

/*////////////////////////////////////////////////////////////////*/
.defaultButton {
    display: inline-block;
    height: 50px;
    min-width: 50px;
    text-align: center;
    padding: 0 25px;
    margin: 0;
    font-size: 12px;
    line-height: 35px;
    letter-spacing: normal;
    cursor: pointer;
    color: #ffffff;
    border: 1px solid #767676;
    background: #767676;
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}

.defaultButton:hover {
    border: 1px solid var(--back);
    background: var(--back);
}

/*////////////////////////////////////////////////////////////////*/
@media screen and (min-width: 1201px) {
    div.tabBarPanel {
        display: block;
        vertical-align: top;
        white-space: normal;
        color: #666666;
        padding: 5px 0;
        margin: 0;
    }
}

@media screen and (max-width: 1200px) {
    div.tabBarPanel {
        display: block;
        vertical-align: top;
        white-space: normal;
        color: #666666;
        padding: 5px;
        margin: 0;
    }
}

div.tabBarPanel a {
    display: inline-block;
    height: 35px;
    line-height: 35px;
    text-decoration: none;
    font-size: 14px;
    padding: 0 10px;
    color: var(--boom);
    cursor: pointer;
    border-left: 1px solid rgba(0,0,0,0.2);
}

div.tabBarPanel a:last-child
{
    border:0;
}

div.tabBarPanel a img {
    display: inline-block;
    vertical-align: middle;
    padding: 0;
    margin: 0 0 0 5px;
    border-radius: 50%;
    width: 24px;
}

div.tabBarPanel a[selected] {
    background: #FFFFFF;
    color: var(--back);
}

div.tabBarPanel a:hover {
    text-decoration: underline;
}

/*////////////////////////////////////////////////////////////////*/
@media screen and (min-width: 1201px) {
    div.messagePanel {
        display: block;
        padding: 0;
        text-align: right;
        margin: 0;
        background: #FFFFFF;
        border: 1px solid #ececec;
        margin-bottom: 10px;
    }
}

@media screen and (max-width: 1200px) {
    div.messagePanel {
        display: block;
        padding: 0;
        text-align: right;
        margin: 0;
        background: #FFFFFF;
        margin-bottom: 0px;
    }
}

div.messagePanel h1 {
    display: block;
    position: relative;
    font-weight: normal;
    font-size: 14px;
    line-height: 40px;
    color: var(--boom);
    padding: 10px 20px 10px 20px;
    margin: 10px -10px 10px -10px;
    border-bottom: 1px dotted rgba(0,0,0,0.2);
}

div.messagePanel h1 a {
    height: 40px;
    line-height: 40px;
    color: rgba(0,0,0,0.5);
    padding: 0;
    margin: 0;
    border: 0;
    text-decoration: none;
}

div.messagePanel h1 img {
    height: 40px;
    vertical-align: bottom;
    margin-left: 10px;
    border-radius: 3px;
}

div.messagePanel h1 span.messageAction {
    display: inline-block;
    position: absolute;
    height: 40px;
    left: 20px;
    top: 10px;
    background: rgba(255,255,255,0.75);
    border: 1px dotted rgba(0,0,0,0.2);
    border-radius: 3px;
}

div.messagePanel h1 span.messageAction a {
    color: transparent;
}

div.messagePanel div[box] {
    display: block;
    padding: 10px;
    font-size: 12px;
}

div.message_datetime {
    display: block;
    line-height: 30px;
    padding: 0 15px;
    color: var(--back);
}

div.message_subject {
    display: block;
    line-height: 30px;
    padding: 10px 0;
    font-size: 16px;
    font-weight: bold;
    color: var(--back);
}

div.message_body {
    display: block;
    line-height: 40px;
    border-top: 1px dotted #e7e7e7;
    padding: 0 15px;
    font-size: 16px;
    white-space: pre-wrap;
    overflow: hidden;
    /*word-wrap:break-word;
    word-break:break-all;*/
}

message {
    display: block;
    padding: 0;
    font-size: 14px;
    overflow: hidden;
}

message[sender="other"] {
    margin: 0 0 20px 20%;
}

message[sender="me"] {
    margin: 0 20% 20px 0;
}

bl-user {
}

message[sender="me"] bl-body {
    display: block;
    white-space: pre-wrap;
    background: rgba(0,0,0,0.05);
    overflow: hidden;
    padding: 15px 10px;
    color: var(--back);
    border-radius: 0 0 3px 25px;
    border-left: 3px solid rgba(0,0,0,0.25);
}

message[sender="other"] bl-body {
    display: block;
    white-space: pre-wrap;
    overflow: hidden;
    background: #FFFFFF;
    padding: 15px 10px;
    color: var(--back);
    border: 1px solid rgba(0,0,0,0.10);
    font-size: 16px;
    border-radius: 0 0 15px 3px;
    border-right: 3px solid rgba(0,0,0,0.25);
}

bl-datetime {
    display: block;
    font-size: 9px;
    line-height: 20px;
    margin: 5px 10px;
}

message[sender="other"] bl-datetime {
    color: var(--boom);
    text-align: left;
}

message[sender="me"] bl-datetime {
    color: #8a8a8a;
}

/*////////////////////////////////////////////////////////////////*/
#LastVieweds {
    display: block;
    vertical-align: top;
    overflow: hidden;
    background: rgba(0,0,0,0.30);
    padding-bottom: 20px;
    margin-bottom: 10px;
}

#LastVieweds span {
    display: block;
    font-size: 15px;
    line-height: 30px;
    color: #FFFFFF;
    margin: 0;
    padding: 10px 20px;
    font-weight: bold;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    border-radius: 2px;
}

div.LastViewedItem {
    display: block;
    min-height: 32px;
    border: 0;
    vertical-align: top;
    white-space: pre-wrap;
    float: right;
    color: #FFFFFF;
    padding: 10px;
    background: rgba(255,255,255,0.20);
    margin: 10px 20px 0 0;
}

div.LastViewedItem:hover {
    background: rgba(255,255,255,0.50);
}

div.LastViewedItem img {
    height: 32px;
    margin: 0 0 0 10px;
    border: 0;
    float: right;
    border-radius: 2px;
}

div.LastViewedItem a[title] {
    display: block;
    font-size: 14px;
    line-height: 32px;
    color: #FFFFFF;
    text-decoration: none;
    vertical-align: top;
}

div.LastViewedItem a[title]:hover {
    color: #000000;
}

/*////////////////////////////////////////////////////////////////*/
#usersList {
    display: block;
    clear: both;
}

#usersListRest {
    display: block;
    margin: 0;
}

#usersListColumnRest {
    display: block;
    clear: both;
    margin: 20px 0;
    padding: 20px 0;
    border-top: 5px solid rgba(0,0,0,0.10);
}

/*////////////////////////////////////////////////////////////////*/
div.userItem {
    display: inline-block;
    position: relative;
    vertical-align: top;
    white-space: normal;
    color: #666666;
    width: calc(20% - 10px);
    padding: 0;
    background: rgba(235,235,235,0.5);
    margin: 0 0 10px 10px;
    text-align: right;
    cursor: pointer;
    /*filter:grayscale();*/
    backdrop-filter: blur(2px);
}

@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:hover > span[image] > img {
    /*-moz-transform: scale(1.3);
        -webkit-transform: scale(1.3);
        -o-transform: scale(1.3);
        -ms-transform: scale(1.3);
        transform: scale(1.3);
        transform: scale(1.5) rotate(5deg);*/
    filter: brightness(120%);
}

div.userItem span[image] {
    display: block;
    overflow: hidden;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
}

div.userItem span[image] img {
    display: block;
    margin: 0;
    border: 0;
    width: calc(100% - 0px);
    border: 0px solid #FFFFFF;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

div.userItem a[title] {
    display: block;
    font-size: 14px;
    line-height: 30px;
    padding: 20px 20px 10px 20px;
    font-weight: bold;
    color: var(--boom);
    text-decoration: none;
}

div.userItem a[title]:hover {
    color: var(--back);
}

div.userItem span[time] {
    display: block;
    line-height: 20px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    color: #999999;
    padding: 10px 20px;
}

div.userItem span[shortdes] {
    display: block;
    font-size: 15px;
    color: #464646;
    padding: 10px 20px 20px 20px;
}

/*////////////////////////////////////////////////////////////////*/

#postsList {
    display: block;
    background: #dddddd;
}

#postsListColumn {
    display: flex;
    flex-flow: wrap;
    padding: 10px;
}


bondWrap {
    display:block;
    overflow: hidden;
    padding: 10px 0;
    background: linear-gradient(180deg, #FFFFFF 50%, rgba(0,0,0,0.1) 100%);
}

bondWrap h1 {
    display:block;
    text-align:center;
    color:var(--back);    
}

bondWrap h1 a{
    color:var(--boom);
    text-decoration:none;
}
bondWrap h1 a:hover{
    color:var(--back);
}

bondWrap h2 {
    display:block;
    text-align:center;
    color:var(--back);
}




bond {
    display: block;
    margin: 0;
    vertical-align: top;
    white-space: nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    padding: 0 10px 20px 10px;
}


bond[type="Typical"]
{
    /* background:rgba(0,0,0,0.2); */
    padding:5px;
}

bond[type="Product"]
{
    background: rgba(255,255,255,0);
    padding-bottom: 5px;
}


bond::-webkit-scrollbar {
    height: 7px;
    background:#a1a1a1;
}

bond::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 0px rgba(0, 0, 0, 0);    
}

bond::-webkit-scrollbar-thumb {
  background-color: #e3983c;
    cursor:pointer;
}

bond::-webkit-scrollbar-thumb:hover {
  background-color: var(--boom);
}

bond::-webkit-scrollbar:vertical {
  display: none;
}


bond div.postItem
{
    display:inline-block;
    width: 18%;
}
bond div.postItem[posttype="Product"]
{
    display:inline-block;
    vertical-align: bottom;
}

@media screen and (max-width: 800px) {
bondWrap h1 {
    font-size:20px;
    line-height: 30px;
}
bondWrap h2 {
        font-size:14px;
        line-height: 25px;
}
    
bond {
}
    bond div.postItem
{
    display:inline-block;
    width: 40%;
    padding-bottom: 10px;
    border-bottom: 0;
}
}

/*////////////////////////////////////////////////////////////////*/
div.postItem {
    display: block;
    width: 20%;
    position: relative;
    vertical-align: top;
    white-space: normal;
    color: #666666;
    padding: 10px 0 0 0;
    margin: auto 0 0 0;
    text-align: center;
}

div.postItem[posttype="Post"]
{
    margin: 0 0 auto 0;
}

div.postItem[verified] {
    border: 5px solid #d32942;
    width: calc(20% - 10px);
    padding: 10px 0;
    box-shadow: inset 0 0 10px rgb(0 0 0 / 20%);
    background: #ffffff;
    border-image: linear-gradient(var(--angle), var(--boom), #d32942) 1;
    animation: 10s rotate linear infinite;
}

@media screen and (max-width: 1280px) {
    div.postItem {
    width: calc(25% - 2px);
    }

    div.postItem[verified] {
    width: calc(25% - 10px);
    }
}

@media screen and (max-width: 800px) {
    div.postItem {
    width: calc(33% - 2px);
    }

    div.postItem[verified] {
    width: calc(33% - 10px);
    }    
}

@media screen and (max-width: 480px) {
    div.postItem {
    width: calc(50% - 2px);
    }

    div.postItem[verified] {
    width: calc(50% - 10px);
    }    
}

div.postItem[homegroup="2"] {
    background: var(--boom);
    padding: 5px;
}

div.postItem:hover > span[image] > img {
    /*transform: scale(1.5) rotate(5deg);*/
    transform: scale(1.02);
    filter: brightness(1.1) contrast(1.1);
}

div.postItem span[image] {
    display: block;
    position: relative;
    /*overflow: hidden;*/
    padding: 0 10px;
    cursor: pointer;
}

div.postItem span[image] discount {
    display: block;
    position: absolute;
    bottom:0;
    left: calc(50% - 25px);
    width:50px;
    text-align:center;
    line-height:35px;
    height:34px;
    color:#FFFFFF;
    font-weight:bold;
    font-size:26px;
    box-shadow:2px 2px 5px rgba(0,0,0,0.25);
    background: var(--boom);
}

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


div.postItem span[image] img {
    display: block;
    margin: 0;
    border: 0;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    width: 100%;
}

@media screen and (max-width: 800px) {
    div.postItem span[image] img {
        width:100%;
        max-height: 50vh;
        object-fit: cover;
    }
}




div.postItem a[title] {
    display: block;
    font-size: 18px;
    line-height: 40px;
    height: 40px;
    overflow: hidden;
    padding: 0 10px;
    font-weight: 500;
    color: var(--boom);
    text-decoration: none;
}

div.postItem[verified] a[title] {
    color: #d32942;
}

div.postItem[homegroup="2"] a[title] {
    color: #FFFFFF;
}

div.postItem a[title][noimage] {
    border-top: 5px solid rgba(0,0,0,0.10);
    padding-top: 80px;
}

div.postItem a[title]:hover {
    color: var(--back);
}

div.postItem span[time] {
    display: block;
    line-height: 20px;
    font-size: 12px;
    text-transform: uppercase;
    color: #666666;
    padding: 10px 20px;
}

div.postItem span[shortdes] {
    display: block;
    font-size: 16px;
    /* font-weight: 100; */
    color: #000000;
    padding: 0 10px;
    text-align: center;
    line-height: 30px;
    font-weight: 300;
    height: 60px;
    overflow: hidden;
    white-space: break-spaces;
}

div.postItem[homegroup="2"] span[shortdes] {
    color: #FFFFFF;
}

/* ===================================================================
   دکمهٔ قیمت / دانلود در کارت‌ها — کوچک و کم‌توجه (مینیمال)
   -------------------------------------------------------------------
   • رایگان   (span[price][free]) → «دانلود رایگان» با نوشتهٔ ریز و خاکستری.
   • غیر رایگان                  → فقط یک آیکون برچسب کوچک (بدون نوشته).
        - دسکتاپ: با رفتن موس روی آن، مبلغ نمایش داده می‌شود.
        - موبایل: با لمس (تا وقتی انگشت روی آن است) مبلغ نمایش داده می‌شود.
   مبلغ همان متن داخل span است؛ با font-size:0 پنهان و با hover/active
   نمایان می‌شود؛ نیازی به تغییر HTML یا JS نیست.
   =================================================================== */
div.postItem span[price] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    position: relative;
    box-sizing: border-box;
    min-width: 34px;
    height: 26px;
    margin: auto auto 0 auto;
    padding: 0 11px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: transparent;
    color: var(--ink-3);
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
}

/* ---- رایگان ---- */
div.postItem span[price][free]::before {
    content: "";
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    margin-left: 6px;
    background: var(--ico-dl-g) center / contain no-repeat;
}

div.postItem span[price][free]:hover,
div.postItem span[price][free]:active {
    color: var(--boom);
    border-color: var(--boom);
    background: var(--boom-soft);
}

div.postItem span[price][free]:hover::before,
div.postItem span[price][free]:active::before {
    background-image: var(--ico-dl-r);
}

/* ---- غیر رایگان: فقط آیکون، مبلغ پنهان ---- */
div.postItem span[price]:not([free]) {
    font-size: 0;
}

div.postItem span[price]:not([free])::before {
    content: "";
    width: 13px;
    height: 13px;
    background: var(--ico-tag-g) center / contain no-repeat;
}

/* ---- هاور (دسکتاپ) / لمس (موبایل) / فوکوس → نمایش مبلغ ---- */
div.postItem span[price]:not([free]):hover,
div.postItem span[price]:not([free]):active,
div.postItem span[price]:not([free]):focus-visible {
    font-size: 12px;
    color: var(--boom);
    border-color: var(--boom);
    background: var(--boom-soft);
    animation: pricePop .2s var(--ease);
}

div.postItem span[price]:not([free]):hover::before,
div.postItem span[price]:not([free]):active::before,
div.postItem span[price]:not([free]):focus-visible::before {
    display: none;
}

@keyframes pricePop {
    from { opacity: .4; transform: translateY(2px); }
    to   { opacity: 1;  transform: none; }
}

/* ---- در سبد خرید ---- */
div.postItem span[price][incart]::after {
    content: "\2713";
    position: absolute;
    z-index: 10;
    top: -6px;
    right: -4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #1f9d55;
    box-shadow: 0 0 0 2px #fff;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    div.postItem span[price]:not([free]):hover,
    div.postItem span[price]:not([free]):active { animation: none; }
}


div.postItem span[userIcon] {
    display: block;
    position: absolute;
    right: 15px;
    top: 15px;
    text-align: left;
    z-index: 10;
    /*opacity: 0;*/
}

div.postItem span[userIcon] a:hover > span {
    background: rgba(0,0,0,.6);
    color: #FFFFFF;
}

div.postItem span[userIcon] a img {
    display: inline-block;
    width: 48px;
    height: 48px;
    min-height: 48px;
    border-radius: 1px;
    border: 5px solid rgba(255,255,255,0.25);
    vertical-align: middle;
}

div.postItem span[userIcon] a span {
    display: inline-block;
    color: transparent;
    font-size: 10px;
    line-height: 24px;
    vertical-align: middle;
    padding: 0 10px;
}

div.postItem:hover {
    /*filter:initial;*/
}

div.postItem:hover > span[userIcon] {
    display: block;
    position: absolute;
    right: 15px;
    top: 15px;
    text-align: left;
    opacity: 1;
}

/*////////////////////////////////////////////////////////////////*/
div.postDetail {
    display: flex;
    flex-flow: column;
    position: relative;
    border: 0;
    vertical-align: top;
    white-space: normal;
    color: #666666;
    padding: 0;
    margin: 0 0 10px 0;
    text-align: center;
}

div.postDetail[verified] {
    background: linear-gradient(0deg, rgb(145 158 145) 0%, rgb(228 234 230) 30px);
}

div.postDetail video {
    display: block;
    width: 100%;
    height: 55vh;
    background: var(--back);
}

@media screen and (max-width: 1200px) {
    div.postDetail {
        margin: 0 0 10px 0;
    }

    div.postDetail video {
    display: block;
    width: 100%;
    height: initial;
    background: #000000;
}
    
}

div.postDetail h1 {
    display: block;
    font-size: 28px;
    line-height: 50px;
    padding: 30px 30px 10px 30px;
    color: #FFFFFF;
    margin: 0;
    order: 0;
    background: var(--back);
}

div.postDetail h1 a{
    color: #FFFFFF;
    text-decoration:none;
}

div.postDetail h2 {
    display: block;
    font-family: 'Farhang2FaNum';
    font-size: 26px;
    font-weight: lighter;
    line-height: 45px;
    padding: 0 30px 15px 30px;
    color: rgba(255,255,255,0.8);
    margin: 0;
    white-space: break-spaces;
    order: 2;
    background: var(--back);
}

@media only screen and (max-width: 480px) {
    div.postDetail h1 {
        padding: 10px;
        font-size: 22px;
        line-height: 50px;
    }

    div.postDetail h2 {
        padding: 20px 10px;
        font-size: 20px;
        line-height: 30px;
    }
}

div.postDetail span[editpost] {
    display: block;
    position: absolute;
    color: transparent;
    width: 50px;
    height: 50px;
    line-height: 20px;
    text-align: center;
    top: 0px;
    right: 0;
    cursor: pointer;
    z-index: 100;
    background: url('icons/edit_w.png') no-repeat center center;
    background-size: 20px;
}
div.postDetail span[editpost]:hover {
    background: url('icons/edit_w.png') no-repeat center center;
    background-size: 22px;
}

@media only screen and (max-width: 480px) {
    div.postDetail span[editpost] {
        width: 50px;
        height: 50px;
    }
}

div.postDetail span[editpost]:hover {
    border-color: var(--back);
}

div.postDetail span[image] {
    display: block;
    overflow: hidden;
    text-align: center;
    height: calc(75vh - 120px);
}

div.postDetail span[image] img {
    display: block;
    margin: 0 auto;
    border: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    object-fit: contain;
}


div.postDetail[posttype="People"] span[image] {
}

div.postDetail[posttype="People"] span[image] img {
}


div.postDetail ul[extraimage] {
    display: block;
    overflow: hidden;
    list-style: none;
    list-style-type: none;
    margin: 0;
    padding: 10px 20px 0 20px;
    background: #a1a1a1;
    background: -moz-linear-gradient(top, #eeeeee 0%, #ffffff 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #ffffff));
    background: -webkit-linear-gradient(top, #eeeeee 0%, #ffffff 100%);
    background: -o-linear-gradient(top, #eeeeee 0%, #ffffff 100%);
    background: -ms-linear-gradient(top, #eeeeee 0%, #ffffff 100%);
    background: linear-gradient(to bottom, #eeeeee 0%, #ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0 );
}

div.postDetail ul[extraimage] li {
    display: inline-block;
    position: relative;
    margin: 0 0 10px 10px;
    border: 1px solid #CDCDCD;
    vertical-align: top;
}

div.postDetail ul[extraimage] li img {
    display: block;
    width: 90px;
    border: 5px solid #FFFFFF;
    cursor: pointer;
}

div.postDetail ul[extraimage] li img:hover {
    border: 5px solid #396E9E;
}

div.postDetail div[mediaview] {
    position: relative;
    min-height: 30px;
    padding: 10px 0;
    order: 1;
    background: var(--back);
}

@media only screen and (max-width: 480px) {
    div.postDetail div[mediaview] {
    padding: 0;
}
}


div.postDetail div[moreImages] {
    display: block;
    margin: 0 0 5px 0;
    vertical-align: top;
    white-space: nowrap;
    overflow-x:auto;
    overflow-y:hidden;
}

div.postDetail div[moreImages] img
{
    height: 10vh;
    margin:5px;
    border: 1px solid rgba(0,0,0,0.1);
}



div.postDetail div[moreImages]::-webkit-scrollbar {
    height: 5px;
    background:rgba(0,0,0,0.1);
}

div.postDetail div[moreImages]::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 0px rgba(0, 0, 0, 0);
}

div.postDetail div[moreImages]::-webkit-scrollbar-thumb {
  width: 5px;
  background-color: var(--boom);
    cursor:pointer;
}

div.postDetail div[moreImages]::-webkit-scrollbar-thumb:hover {
  background-color: var(--back);
}

div.postDetail div[moreImages]::-webkit-scrollbar:vertical {
  display: none;
}


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

div.postDetail div[container] {
    display: flex;
    flex-flow: column;
    border: 0;
    padding: 0;
    overflow: visible;
    order: 3;
    background: linear-gradient(0deg, #FFFFFF 50%, rgba(0, 0, 0, 0.1) 100%);
}

div.postDetail div span[detail] {
    display: block;
    font-size: 24px;
    line-height: 35px;
    color: #000000;
    padding: 20px 30px;
    text-align: justify;
    overflow: hidden;
    white-space: pre-wrap;
    order: 1;
    width: calc(100% - 60px);
    max-width: 1200px;
    margin: 0 auto;
}

div.postDetail span[map] {
    display: block;
    overflow: hidden;
    padding: 10px;
    margin: 0 10px;
    border-radius: 15px;
    border: 5px solid var(--boom);
    order: 5;
}

div.postDetail div span[price]
{
    display: inline-block;
    /* display: none; */
    background: var(--boom) url(images/icon/n/download_w.png) no-repeat right 10px center;
    background-size: 24px auto;
    color: #ffffff;
    padding: 10px 50px 10px 20px;
    line-height: 35px;
    text-decoration: none;
    font-size: 18px;
    text-align: left;
    text-shadow: 1px 1px rgba(0,0,0,0.25);
    margin: 20px auto;
    cursor: pointer;
    border-radius: 3px;
    order: 2;
    position:relative;
}

div.postDetail div span[price][incart]:after {
    content: '\2714';
    position: absolute;
    z-index: 10;
    top: -9px;
    left: -9px;
    font-size: 20px;
    background: #FFFFFF;
    color: var(--boom);
    padding: 1px;
    width: 20px;
    height: 20px;
    text-align: center;
    border-radius: 50%;
    display: block;
    line-height: 25px;
    border:2px solid var(--boom);
}

div.postDetail div span[price][outofstock]
{
    opacity:.25;
}

div.postDetail div span[price]:hover
{
    background-color:var(--back);
}

div.postDetail div span[priceHint]
{
    display: inline-block;
    padding: 5px 0;
    line-height: 50px;
    text-decoration: none;
    font-size: 18px;
    margin: 20px 10px;
    color:var(--boom);
}


@media only screen and (max-width: 480px) {
div.postDetail span[image] {

    height: auto;
}
    
    div.postDetail div span[detail] {
        display: block;
        font-size: 18px;
        line-height: 30px;
        color: #000000;
        padding: 15px;
        width: calc(100% - 30px);
    }

    div.postDetail div span[price] {
        background-size: 20px auto;
        font-size: 16px;
    }
}

div.postDetail div span[userinfo] {
    display: block;
    position: relative;
    font-size: 18px;
    text-decoration: none;
    padding: 10px 20px;
    vertical-align: top;
    white-space: nowrap;
    overflow: hidden;
    order: 4;
    text-align: center;
    border-top: 1px solid rgba(0,0,0,0.05);
    width: calc(100% - 40px);
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 10px;
}

div.postDetail div span[userinfo] img {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    margin-left: 10px;
    border-radius: 7px;
    height: 48px;
    border: 2px solid var(--boom);
}

div.postDetail div span[userinfo] span[connect] {
    display: inline-block;
    padding: 14px 10px;
    position: absolute;
    top: 0;
    left: 0;
}

div.postDetail div span[userinfo] span[friend] {
    margin: 0 10px;
    line-height: 30px;
    padding: 5px;
}

div.postDetail div span[userinfo] span[sendmessage] {
    line-height: 30px;
    padding: 5px;
    color: transparent;
    background: url(images/icon/n/comment.png) no-repeat center center;
    background-size: 26px auto;
}


div.postDetail div[navigation] {
    display: block;
    position: relative;
    font-size: 14px;
    text-decoration: none;
    padding: 0 30px;
    line-height: 40px;
    vertical-align: top;
    text-align: center;
    background: var(--back);
}
div.postDetail div[navigation] a {
    color: rgba(255,255,255,0.5);
    display: inline-block;
    font-weight: normal;
    padding-left: 5px;
    line-height: 40px;
}
div.postDetail div[navigation] a::after {
  content: ">";
    padding-right:5px
}
div.postDetail div[navigation] a:hover {
    color: var(--boom);
}
div.postDetail div[navigation] a:last-child
{
    color: #FFFFFF;
}
div.postDetail div[navigation] a:last-child::after
{
    content:"";
}

@media only screen and (max-width: 1024px) {
    div.postDetail div[navigation]
    {
        padding:0 10px;
        font-size: 12px;
    }
}

div.postDetail div span[keywords],
div.postDetail div span[categories] {
    display: block;
    position: relative;
    font-size: 14px;
    text-decoration: none;
    padding: 5px 20px;
    line-height: 30px;
    vertical-align: top;
    text-align: center;
    order: 3;
    width: calc(100% - 40px);
    max-width: 1200px;
    margin: 0 auto;
    border-top: 1px solid rgba(0,0,0,0.05);
    margin-top: 10px;
}

div.postDetail div span[keywords] span[title],
div.postDetail div span[categories] span[title] {
    padding-left: 10px;
    display: inline-block;
}

div.postDetail div span[keywords] span[info] a, 
div.postDetail div span[categories] span[info] a {
    background: rgba(0,0,0,0.05);
    padding: 0 10px;
    margin: 5px;
    margin-right: 0;
    border-radius: 5px;
    display: inline-block;
    font-weight: normal;
}

div.postDetail div span[keywords] span[info] a:hover,
div.postDetail div span[categories] span[info] a:hover {
    color: var(--back);
    background: rgba(0,0,0,0.05);
}

@media only screen and (max-width: 640px) {
    div.postDetail div span[userinfo] {
        font-size: 14px;
    }

    div.postDetail div span[userinfo] img {
        display: inline-block;
        vertical-align: middle;
        margin: 0;
        margin-left: 10px;
        height: 32px;
    }

    div.postDetail div span[category] {
        font-size: 14px;
        padding: 5px 10px;
    }
}

div.postDetail div a[sourceUrl] {
    display: inline-block;
    font-size: 14px;
    font-weight: normal;
    line-height: 25px;
    color: #FFFFFF;
    background: #13a89e url(images/icon/n/link_w.png) no-repeat 10px center;
    background-size: 14px auto;
    border-radius: 3px;
    padding: 5px 10px 5px 35px;
    margin: 0 30px 10px 0;
    text-decoration: none;
}

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

@media only screen and (max-width: 640px) {
    div.postDetail div a[sourceUrl] {
        margin: 0 10px 10px 0;
    }
}

div.postDetail div span[share] {
    display: block;
    overflow: hidden;
    position: relative;
    margin: 0;
    padding: 10px 0;
    vertical-align: top;
    white-space: nowrap;
    text-align: center;
}

div.postDetail div span[more] {
    display: block;
    position: relative;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    color: #999999;
    text-decoration: none;
    margin: 0;
    vertical-align: top;
    white-space: nowrap;
    text-align: center;
    border-top: 2px dotted #FFFFFF;
    order: 4;
}

div.postDetail div span[more] img {
    display: inline-block;
    vertical-align: top;
    margin: 5px 30px 5px 10px;
    height: 58px;
    border-radius: 10px 0 10px 10px;
}

@media only screen and (max-width: 480px) {
    div.postDetail div span[more] img {
        margin: 5px 10px 5px 10px;
    }
}

div.postDetail div span[time] {
    display: block;
    line-height: 30px;
    font-size: 11px;
    color: rgba(0,0,0,0.75);
    padding: 5px 0;
}

div.postDetail[posttype="People"] div span[time] {
    display: none;
}


div.postDetail div a {
    font-weight: bold;
    color: var(--boom);
    text-decoration: none;
}

div.postDetail div span[time] a:hover {
    text-decoration: underline;
    color: #000000;
}

div.postDetail div span[more] span.rating {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    vertical-align: top;
    line-height: 16px;
    height: 16px;
    font-size: 11px;
    margin: 27px 10px 27px 30px;
}

div.postDetail div span[more] span.viewed {
    display: inline-block;
    line-height: 30px;
    font-size: 14px;
    color: rgba(0,0,0,0.5);
    padding: 0 10px;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.1);
    margin: 10px 30px;
    border-radius: 15px;
}

@media only screen and (max-width: 640px) {
    div.postDetail div span[more] span.viewed {
        margin: 10px ;
    }
}

div.postDetail span.opinionCtrl {
    position: absolute;
    top: 10px;
    right: 10px;
    zoom: 1.5; z-index: 50;
    border-radius: 2px;
    overflow: hidden;
}

div.postDetail .newComment span.opinionCtrl {
    top: 12px;
    right: 0;
    zoom: 1; border-radius: 0;
}

/*////////////////////////////////////////////////////////////////*/
span.opinionCtrl {
    display: block;
    width: 20px;
    height: 60px;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 12px;
    line-height: 30px;
    vertical-align: middle;
}

span.opinionCtrl span[like] {
    display: block;
    width: 20px;
    height: 30px;
    line-height: 30px;
    background: var(--boom);
    text-align: center;
    padding: 0;
    cursor: pointer;
    color: #FFFFFF;
}

span.opinionCtrl span[dislike] {
    display: block;
    width: 20px;
    height: 30px;
    line-height: 30px;
    background: var(--back);
    text-align: center;
    padding: 0;
    cursor: pointer;
    color: #FFFFFF;
}

span.opinionCtrl span[like]:hover {
    background: red;
}

span.opinionCtrl span[dislike]:hover {
    background: #000000;
}

/*////////////////////////////////////////////////////////////////*/
#homepageMiddleColumn {
    display: block;
    width: 300px;
    vertical-align: top;
    float: right;
    padding: 0;
}

/*////////////////////////////////////////////////////////////////*/
#eventsList {
    display: block;
    vertical-align: top;
    padding: 10px;
}

#eventsList h1 {
    font-size: 17px;
    font-weight: bold;
    line-height: 20px;
    color: #396E9E;
}

div.eventItem {
    display: block;
    min-height: 50px;
    position: relative;
    border-bottom: 1px dotted rgba(0,0,0,0.1);
    white-space: normal;
    color: var(--back);
    padding: 15px 0;
}

div.eventItem:first-child {
    padding-top: 0;
}

div.eventItem:last-child {
    border-bottom: 0;
}

div.eventItem div[date] {
    display: block;
    position: absolute;
    top: 15px;
    right: 0;
    padding: 0;
    border: 0;
    width: 46px;
    height: 46px;
    border: 1px solid #4e4e4e;
    text-align: center;
    vertical-align: top;
    letter-spacing: -0.5px;
}

div.eventItem div[date] span.day {
    display: block;
    width: 46px;
    line-height: 22px;
    font-size: 22px;
    padding-top: 5px;
    font-weight: bold;
    color: #396E9E;
}

div.eventItem div[date] span.month {
    display: block;
    width: 46px;
    line-height: 15px;
    font-size: 11px;
    font-weight: normal;
    color: #a5a5a5;
}

div.eventItem div[detail] {
    display: block;
    border: 0;
    padding: 0 58px 0 10px;
    margin: 0;
    vertical-align: top;
    text-align: right;
}

div.eventItem div span[title] {
    display: block;
    font-size: 16px;
    line-height: 30px;
    font-weight: bold;
    color: var(--boom);
}

div.eventItem div a[title] {
    display: block;
    font-size: 14px;
    line-height: 14px;
    padding-bottom: 8px;
    font-weight: bold;
    color: #fbfbfb;
    text-decoration: none;
}

div.eventItem div a[title]:hover {
    text-decoration: underline;
}

div.eventItem div span[detail] {
    font-size: 14px;
    color: rgba(0,0,0,0.5);
    line-height: 25px;
}

/*////////////////////////////////////////////////////////////////*/
div.jscalendar {
    display: block;
    position: relative;
    border: 1px solid #373636;
    color: var(--back);
    width: calc(100% - 2px);
}

div.jscalendar span[calendartitle] {
    display: block;
    font-size: 28px;
    line-height: 50px;
    height: 50px;
    margin: 10px 10px 0 10px;
}

    div.jscalendar span[calendarsubtitle] {
        display: block;
        font-size: 14px;
        font-weight: bold;
        line-height: 25px;
        padding: 10px;
        border-bottom: 3px solid rgba(0,0,0,0.25);
    }

div.jscalendar span[calendarCtrl] {
    display: block;
    width: 54px;
    position: absolute;
    top: 15px;
    left: 10px;
}

div.jscalendar span[previousCtrl] {
    display: inline-block;
    font-size: 14px;
    line-height: 35px;
    height: 35px;
    width: 25px;
    border: 1px solid #373636;
    text-align: center;
    border-radius: 0 15px 15px 0;
}

div.jscalendar span[previousCtrl]:hover {
    color: #FFFFFF;
    background: #000000;
    cursor: pointer;
}

div.jscalendar span[nextCtrl] {
    display: inline-block;
    font-size: 14px;
    line-height: 35px;
    height: 35px;
    width: 25px;
    border: 1px solid #373636;
    text-align: center;
    margin-right: -1px;
    border-radius: 15px 0 0 15px;
}

div.jscalendar span[nextCtrl]:hover {
    color: #FFFFFF;
    background: #000000;
    cursor: pointer;
}

div.jscalendar div[body] {
    display: block;
    width: calc(100% - 20px);
    margin: 10px;
    text-align: right;
}

div.jscalendar span[today] {
    display: inline-block;
    font-size: 24px;
    width: calc(14% - 1px);
    height: 64px;
    line-height: 64px;
    text-align: center;
    border: 1px dotted rgba(0,0,0,0.2);
    margin: 0 0 -1px -1px;
    background: #000000;
    color: #FFFFFF;
}

div.jscalendar span[today]:hover {    
    color: #f7ed78;
}

    div.jscalendar span[dayName] {
        display: inline-block;
        font-size: 14px;
        width: calc(14% - 1px);
        height: 36px;
        line-height: 36px;
        text-align: center;
        border: 1px solid transparent;
        margin: 0 0 -1px -1px;
        color: rgba(0,0,0,0.4);
    }


div.jscalendar span[day] {
    display: inline-block;
    font-size: 24px;
    width: calc(14% - 1px);
    height: 64px;
    line-height: 64px;
    text-align: center;
    border: 1px dotted rgba(0,0,0,0.2);
    margin: 0 0 -1px -1px;
}

div.jscalendar span[day]:hover {
    color: #FFFFFF;
    background: #000000;
    cursor: pointer;
}

div.jscalendar span[appointed] {
    background: #f7ed78;
    color: var(--boom);
}

div.jscalendar span[dayPrevious] {
    display: inline-block;
    font-size: 24px;
    width: calc(14% - 1px);
    height: 64px;
    line-height: 64px;
    text-align: center;
    border: 1px dotted rgba(0,0,0,0.2);
    margin: 0 0 -1px -1px;
    background:rgba(0,0,0,0.05);
    color: #FFFFFF;
}

div.jscalendar span[dayNext] {
    display: inline-block;
    background: rgba(0,0,0,0.05);
    font-size: 24px;
    width: calc(14% - 1px);
    height: 64px;
    line-height: 64px;
    text-align: center;
    border: 1px dotted rgba(0,0,0,0.2);
    margin: 0 0 -1px -1px;
    color: #585858;
}

/*////////////////////////////////////////////////////////////////*/
#relatedPostList {
    display: block;
    vertical-align: top;
    white-space: normal;
}

@media screen and (max-width: 640px) {
    #relatedPostList {
        zoom: 90%;
    }
}

div.relatedPostItem {
    display: block;
    position: relative;
    border: 0;
    vertical-align: top;
    white-space: normal;
    color: #666666;
    padding: 30px;
    margin: 0 0 10px 0;
    background: rgba(235,235,235,0.5);
}

div.relatedPostItem[lang="en"] {
    direction: ltr;
    text-align: left;
}

@media screen and (max-width: 1200px) {
    div.relatedPostItem {
        margin: 0 0 10px 0;
    }
}

div.relatedPostItem:last-child {
    border-bottom: 0;
}

div.relatedPostItem span[editpost] {
    display: block;
    position: absolute;
    background: #999999 url(images/edit.png) no-repeat center center;
    background-size: 24px 24px;
    color: transparent;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    top: 0px;
    left: 0px;
    cursor: pointer;
}

div.relatedPostItem span[editpost]:hover {
    background-color: #4678f7;
}

@media screen and (min-width: 641px) {
    div.relatedPostItem img {
        display: inline-block;
        border: 0;
        width: 20%;
        vertical-align: top;
    }

    div.relatedPostItem div {
        display: inline-block;
        border: 0;
        width: calc(80% - 20px);
        padding: 0 10px;
        vertical-align: bottom;
    }
}

@media screen and (max-width: 640px) {
    div.relatedPostItem img {
        display: block;
        border: 0;
        width: 100%;
        margin-bottom: 20px;
    }

    div.relatedPostItem div {
        display: block;
        border: 0;
        width: 100%;
        padding: 0;
        vertical-align: top;
    }
}

div.relatedPostItem div a[title] {
    display: block;
    font-size: 22px;
    font-weight: bold;
    line-height: 40px;
    padding-bottom: 10px;
    color: var(--back);
    text-decoration: none;
}

div.relatedPostItem div a[title]:hover {
    text-decoration: underline;
}

div.relatedPostItem div span[detail] {
    display: block;
    font-size: 16px;
    color: #66727e;
    padding-bottom: 8px;
}

div.relatedPostItem div span[time] {
    line-height: 20px;
    font-size: 13px;
    color: #999999;
    padding: 0 0 0 20px;
}

div.relatedPostItem div span[rate] {
    display: block;
    line-height: 20px;
    font-size: 12px;
    color: #999999;
    padding: 10px 0;
}

/*////////////////////////////////////////////////////////////////*/
div.commentPanel {
    display: block;
    border: 0;
    vertical-align: top;
    white-space: normal;
    color: #666666;
    padding: 20px 30px 40px 30px;
    margin: 0 0 10px 0;
	width: calc(100% - 40px);
    max-width: 1200px;
    margin: 0 auto;	
}


@media screen and (max-width: 1200px) {
    div.commentPanel {
        margin: 0;
        background: none;
        padding: 20px;
    }
}

div.commentPanelHeader {
    display: block;
    position: relative;
    vertical-align: top;
    white-space: nowrap;
    color: #666666;
    padding: 0;
    margin: 0 0 10px 0;
}

div.commentPanelHeader img {
    display: inline-block;
    vertical-align: top;
    margin: 4px 2px 4px 10px;
    height: 40px;
    border-radius: 40px;
}

div.commentPanelHeader span {
    display: inline-block;
    vertical-align: top;
    line-height: 40px;
    margin: 0;
}

div.commentPanelHeader span[comntUsrInfDat] {
    display: inline-block;
    white-space: normal;
    vertical-align: top;
    line-height: 48px;
    height: 48px;
    color: #999999;
    font-size: 12px;
    white-space: nowrap;
    margin: 0;
}

div.commentPanelHeader span[comntUsrInfDat] a {
    font-weight: bold;
    color: #999999;
    text-decoration: none;
}

div.commentPanelHeader span[comntUsrInfDat] a:hover {
    text-decoration: underline;
    color: #000000;
}

div.commentPanelHeader span.opinionCtrl {
    position: absolute;
    top: 28px;
    left: -30px;
}

div.commentPanel textarea {
    display: block;
    width: calc(100% - 22px);
    height: 100px;
    border: 1px solid #666666;
    vertical-align: top;
    white-space: normal;
    color: #666666;
    margin: 0 0 10px 0;
    padding: 10px;
    background: #FFFFFF;
}

div.commentPanel span.commentDetail {
    display: block;
    white-space: pre-wrap;
    font-size: 14px;
    color: #000000;
    padding: 20px 30px 0 50px;
    margin: 0 -30px;
    line-height: 25px;
    border-top: 1px dotted #dcdcdc;
}

div.commentPanel input[type="submit"] {
    display: inline-block;
    vertical-align: top;
    min-width: 40px;
    text-align: center;
    padding: 0 30px;
    margin: 0;
    font-size: 18px;
    line-height: 45px;
    cursor: pointer;
    color: #FFFFFF;
    border: 0;
    background: var(--boom);
    /* border-right: 5px solid var(--back); */
    font-weight: bold;
}

div.commentPanel input[type="submit"]:hover {
    background: var(--back);
    color: #FFFFFF;
}

div.commentPanel select {
    display: inline-block;
    vertical-align: top;
    height: 35px;
    text-align: center;
    margin: 0;
    font-size: 12px;
    line-height: 35px;
    cursor: pointer;
    color: var(--back);
    border: 1px solid #666666;
    background: #FFFFFF;
}

/*////////////////////////////////////////////////////////////////*/
div.contactUsForm input {
    margin: 0 0 10px 0;
    border: 1px solid var(--back);
}

div.contactUsFormHeader {
    display: block;
    vertical-align: top;
    color: var(--boom);
    padding: 0;
    margin: 0 -30px 15px -30px;
    padding: 15px 30px;
    font-size: 14px;
    border-bottom: 5px solid var(--boom);
}

/*////////////////////////////////////////////////////////////////*/
span[friend] {
    display: inline-block;
    white-space: normal;
    color: var(--boom);
    cursor: pointer;
    border: 1px dotted rgba(0,0,0,0.2);
}

span[friend]:hover {
    opacity: 1.0;
}

span[friend="add"] {
    color: #1E60D8;
}

span[friend="approve"] {
    color: #1D6E14;
}

span[friend="block"] {
    color: #373636;
}

span[friend="close"] {
    color: #8e3db4;
}

span[friend="pending"] {
    color: #999999;
}

span[sendmessage] {
    display: inline-block;
    white-space: normal;
    color: #FFFFFF;
    background-color: var(--back);
    cursor: pointer;
}

span[sendmessage]:hover {
    background-color: #575757;
}

/*////////////////////////////////////////////////////////////////*/
div.userInfoBox {
    display: block;
    position: relative;
    border: 1px solid rgba(0,0,0,0.07);
    vertical-align: top;
    white-space: normal;
    text-align: right;
    color: #666666;
    padding: 0;
    margin-bottom: 10px;
    background: #FFFFFF;
}

div.userInfoBox img {
    position: absolute;
    z-index: 10;
    display: block;
    margin: 0;
    height: 72px;
    top: 20px;
    right: 20px;
    border: 5px solid rgba(255,255,255,0.25);
    border-radius: 72px;
}

div.userInfoBox a[fullname] {
    display: block;
    white-space: normal;
    line-height: 30px;
    height: 30px;
    color: #FFFFFF;
    background: var(--back);
    font-size: 15px;
    padding: 30px 110px 20px 10px;
    border-bottom: 5px solid rgba(255,255,255,0.5);
    margin-bottom: 20px;
    text-transform: uppercase;
    text-decoration: none;
}

div.userInfoBox a[fullname]:hover {
    text-decoration: underline;
}

div.userInfoBox span[memberinfo] {
    display: block;
    position: absolute;
    top: 50px;
    right: 110px;
    white-space: normal;
    color: #FFFFFF;
    font-size: 10px;
    line-height: 20px;
    height: 20px;
}

div.userInfoBox a[fullname][data-badge="superuser"]:after {
    content: '';
    position: absolute;
    top: 20px;
    right: 75px;
    font-size: .9em;
    background: #FFFFFF url(images/superuser_tag.png) no-repeat center center;
    background-size: 16px auto;
    border: 1px solid #FFFFFF;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    z-index: 10;
}

div.userInfoBox span[info] {
    display: block;
    color: var(--back);
    font-size: 14px;
    margin-bottom: 10px;
    padding: 10px 30px;
    white-space: pre-wrap;
    text-align: justify;
}

div.userInfoBox span[exlinks] {
    display: block;
    font-size: 11px;
    color: #999999;
    text-decoration: none;
    padding: 0 30px 10px 30px;
}

div.userInfoBox span[exlinks] a[website] {
    display: inline-block;
    font-size: 12px;
    line-height: 20px;
    color: var(--back);
    background: rgba(0,0,0,0.05) url(images/icon/n/link.png) no-repeat 8px center;
    background-size: 14px auto;
    padding: 5px 10px 5px 35px;
    margin: 0 0 10px 10px;
    text-decoration: none;
}

div.userInfoBox span[exlinks] a[website]:hover {
    color: #FFFFFF;
    background: var(--back) url(images/icon/n/link_w.png) no-repeat 8px center;
    background-size: 14px auto;
}

div.userInfoBox span[more] {
    display: block;
    height: 50px;
    line-height: 50px;
    font-size: 11px;
    color: #999999;
    text-decoration: none;
    padding: 10px 30px;
    border-top: 1px solid rgba(0,0,0,0.05);
}

div.userInfoBox span[friend] {
    height: 25px;
    line-height: 25px;
    padding: 5px 5px;
    font-size: 11px;
    margin-left: 10px;
}

div.userInfoBox span[sendmessage] {
    color: transparent;
    background: url(images/icon/n/comment.png) no-repeat center center;
    background-size: 22px auto;
    width: 35px;
    height: 25px;
    line-height: 25px;
    padding: 5px 0;
    font-size: 12px;
    white-space: nowrap;
    border: 1px dotted rgba(0,0,0,0.2);
}

div.userInfoBox span[sendmessage]:hover {
    background-color: #ffffff;
    filter: invert(1);
}

/*////////////////////////////////////////////////////////////////*/
div.userProfileHeaderBox {
    display: block;
    position: relative;
    border: 0;
    vertical-align: top;
    white-space: normal;
    text-align: right;
    color: #666666;
    padding: 0;
    margin: 0 0 10px 0;
    overflow: hidden;
}

div.userProfileHeaderBox span[connect] {
    display: inline-block;
    float: left;
    padding: 40px 20px;
}

@media screen and (max-width: 1200px) {
    div.userProfileHeaderBox {
        margin: 0;
    }

    div.userProfileHeaderBox span[connect] {
        display: block;
        float: initial;
        padding: 10px 20px;
    }
}

div.userProfileHeaderBox span[editprofile] {
    display: block;
    position: absolute;
    z-index: 30;
    background: rgba(255,255,255,0.75) url(images/icon/n/setting.png) no-repeat center center;
    background-size: 24px 24px;
    color: transparent;
    width: 50px;
    height: 50px;
    line-height: 40px;
    text-align: center;
    top: 0;
    left: 0;
    cursor: pointer;
}

div.userProfileHeaderBox span[editprofile]:hover {
    background-color: var(--boom);
}

div.userProfileHeaderBox span[headerBG] {
    display: none;
    overflow: hidden;
    background: rgba(0,0,0,0.25);
}

div.userProfileHeaderBox span[headerBG]:hover {
    filter: grayscale(1);
}

div.userProfileHeaderBox img[header] {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
    height: 120px;
    object-fit: cover;
}

div.userProfileHeaderBox img[photo] {
    display: inline-block;
    vertical-align: middle;
    margin: 10px;
    height: 64px;
    border-radius: 20%;
    border: 2px solid var(--back);
    box-shadow: 0 0 5px rgb(0 0 0 / 25%);
}

div.userProfileHeaderBox a[fullname] {
    display: inline-block;
    position: relative;
    z-index: 10;
    white-space: nowrap;
    line-height: 50px;
    height: 50px;
    color: var(--back);
    font-size: 22px;
    padding: 0;
    margin: 0;
    text-transform: uppercase;
    text-decoration: none;
}

div.userProfileHeaderBox a[fullname]:hover {
    text-decoration: underline;
}

div.userProfileHeaderBox span[memberinfo] {
    display: inline-block;
    position: relative;
    z-index: 10;
    padding: 0 20px 0 250px;
    text-align: left;
    white-space: nowrap;
    color: rgba(0,0,0,0.5);
    font-size: 11px;
    line-height: 20px;
    height: 20px;
}

@media screen and (max-width: 640px) {
    div.userProfileHeaderBox img[photo] {
        display: inline-block;
        vertical-align: middle;
        margin: 10px;
        height: 48px;
        box-shadow: 0 0 5px rgb(0 0 0 / 25%);
    }

    div.userProfileHeaderBox a[fullname] {
        display: inline-block;
        position: relative;
        z-index: 10;
        white-space: nowrap;
        line-height: 30px;
        height: 30px;
        color: var(--back);
        font-size: 16px;
        font-weight: bold;
        padding: 0;
        margin: 0;
        text-transform: uppercase;
        text-decoration: none;
    }

    div.userProfileHeaderBox a[fullname]:hover {
        text-decoration: underline;
    }

    div.userProfileHeaderBox span[memberinfo] {
        display: inline-block;
        position: relative;
        padding: 0 20px 0 0;
        margin: 0 0 20px 0;
        white-space: nowrap;
        color: rgba(0,0,0,0.5);
        font-size: 11px;
        line-height: 20px;
        height: 20px;
    }

    div.userProfileHeaderBox a[fullname][data-badge="superuser"]:after {
        content: '';
        position: absolute;
        top: 0;
        left: -16px;
        font-size: .9em;
        width: 16px;
        height: 16px;
        z-index: 20;
        background: #FFFFFF url(images/superuser_tag.png) no-repeat center center;
        background-size: 16px auto;
        border: 1px solid #FFFFFF;
        border-radius: 50%;
    }
}

@media screen and (min-width: 641px) {
    div.userProfileHeaderBox a[fullname][data-badge="superuser"]:after {
        content: '';
        position: absolute;
        top: 10px;
        font-size: .9em;
        width: 16px;
        height: 16px;
        z-index: 20;
        background: #FFFFFF url(images/superuser_tag.png) no-repeat center center;
        background-size: 16px auto;
        border: 1px solid #FFFFFF;
        border-radius: 50%;
    }
}

div.userProfileHeaderBox span[info] {
    display: block;
    color: var(--back);
    font-size: 14px;
    line-height: 22px;
    padding: 0 20px;
    white-space: pre-wrap;
    text-align: justify;
    clear: both;
}

div.userProfileHeaderBox span[exlinks] {
    display: inline-block;
    font-size: 11px;
    color: #999999;
    text-decoration: none;
    padding: 10px;
}

div.userProfileHeaderBox span[exlinks] a[website] {
    display: inline-block;
    font-size: 12px;
    line-height: 22px;
    color: var(--back);
    background: rgba(0,0,0,0.1) url(images/icon/n/link.png) no-repeat 8px center;
    background-size: 16px auto;
    border-radius: 15px;
    padding: 5px 10px 5px 35px;
    margin: 0 0 10px 10px;
    text-decoration: none;
}

div.userProfileHeaderBox span[exlinks] a[website]:hover {
    color: var(--boom);
}

div.userProfileHeaderBox span[more] {
    display: block;
    height: 50px;
    line-height: 50px;
    font-size: 11px;
    color: #999999;
    text-decoration: none;
    padding: 10px 20px;
    border-top: 1px solid rgba(0,0,0,0.10);
}

div.userProfileHeaderBox span[friend] {
    height: 25px;
    line-height: 25px;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 10px;
    margin-left: 10px;
}

div.userProfileHeaderBox span[sendmessage] {
    background: url(images/icon/n/comment.png) no-repeat center center;
    background-size: 22px auto;
    width: 35px;
    height: 35px;
    line-height: 35px;
    padding: 0;
    font-size: 12px;
    color: transparent;
    white-space: nowrap;
    border: 1px dotted rgba(0,0,0,0.2);
    border-radius: 10px;
}

div.userProfileHeaderBox span[sendmessage]:hover {
    border: 1px dotted rgba(0,0,0,0.25);
}

/*////////////////////////////////////////////////////////////////*/
div.asideInfoBox {
    display: block;
    position: relative;
    float: right;
    width: calc(50% - 12px);
    vertical-align: top;
    white-space: normal;
    text-align: right;
    color: #666666;
    padding: 0 0 10px 0;
    margin: 0 10px 10px 0;
    border: 1px dotted rgba(0,0,0,0.2);
    background: #FFFFFF;
}

div[nearby] {
    display: block;
    position: relative;
    float: right;
    width: calc(50% - 1px);
    height: 50vh;
    border: 0;
    border-right: 1px dotted rgba(0,0,0,0.2);
    vertical-align: top;
    white-space: normal;
    text-align: right;
    color: #666666;
    padding: 0;
    margin: 0;
    background: #f2efe9;
    line-height: 30px;
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-color: #d5ac68 #f1db9d;
    scrollbar-width: thin;
    -ms-overflow-style: none;
}

div[nearby]::-webkit-scrollbar {
    width: 10px;
}

div[nearby]::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 0px rgba(0, 0, 0, 0);
}

div[nearby]::-webkit-scrollbar-thumb {
    width: 5px;
    background-color: #d5ac68;
}

div[nearby]::-webkit-scrollbar-thumb:hover {
    background-color: #f1db9d;
}

div[nearby]::-webkit-scrollbar:horizontal {
    display: none;
}

div.asideInfoBox[nearby] span[detail] {
    line-height: 25px;
    font-size: 16px;
    padding: 0;
    margin: 0;
    background: none;
}

@media screen and (max-width: 640px) {
    div.asideInfoBox {
        display: block;
        position: relative;
        width: calc(100% - 22px);
        border: 1px solid rgba(0,0,0,0.07);
        vertical-align: top;
        white-space: normal;
        text-align: right;
        color: #666666;
        padding: 0 0 10px 0;
        margin: 0 10px 10px 10px;
        background: #f2efe9;
    }

    div[nearby] {
        width: 100%;
        height: unset;
        border: 0;
        margin: 0;
    }
}

span.asideInfoBoxHeader {
    display: block;
    white-space: normal;
    line-height: 40px;
    height: 40px;
    color: var(--boom);
    border-bottom: 1px dotted var(--boom);
    font-size: 15px;
    padding: 10px 0 5px 0;
    margin: 0 30px;
    text-transform: uppercase;
    font-weight: bold;
}

div.asideInfoBox span[info] {
    display: block;
    white-space: normal;
    color: #999999;
    font-size: 14px;
    padding: 10px 30px;
}

div.asideInfoBox a[tag] {
    display: inline-block;
    white-space: normal;
    line-height: 25px;
    color: var(--back);
    background: rgba(0,0,0,0.05);
    padding: 5px 10px;
    font-size: 14px;
    margin: 0 0 5px 5px;
    text-decoration: none;
    border-radius: 3px;
}

div.asideInfoBox a[tag]:hover {
    color: var(--boom);
}

div.asideInfoBox img[friend] {
    display: inline-block;
    position: relative;
    width: 32px;
    height: 32px;
    margin: 0 0 -3px 2px;
    border-radius: 5%;
    filter: grayscale(1);
}

div.asideInfoBox img[friend]:hover {
    filter: grayscale(0);
}

div.asideInfoBox ul[info] {
    display: block;
    white-space: normal;
    color: #999999;
    font-size: 14px;
    margin-bottom: 10px;
    padding: 0 30px 10px 30px;
    list-style: none;
    overflow: hidden;
}

div.asideInfoBox ul[info] li {
    display: block;
    position: relative;
    min-height: 64px;
    padding: 10px 74px 10px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    word-break: break-word;
    text-align: justify;
}

div.asideInfoBox ul[info] li:first-child {
    padding-top: 0;
}

div.asideInfoBox ul[info] li:first-child img {
    top: 0;
}

div.asideInfoBox ul[info] li:last-child {
    border-bottom: 0;
}

div.asideInfoBox ul[info] li img {
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    border-radius: 2px;
    right: 0;
    top: 10px;
}

div.asideInfoBox ul[info] li a[title] {
    display: block;
    color: var(--back);
    text-decoration: none;
    word-wrap: break-word;
    padding: 10px 0 0 0;
    font-size: 16px;
}

div.asideInfoBox ul[info] li a[title]:hover {
    color: var(--boom);
}

div.asideInfoBox ul[menu] {
    display: block;
    white-space: normal;
    color: #999999;
    font-size: 15px;
    margin: 0;
    padding: 0 30px;
    list-style: none;
    overflow: hidden;
}

div.asideInfoBox ul[menu] li {
    display: block;
    position: relative;
    line-height: 40px;
    padding: 0;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

div.asideInfoBox ul[menu] li:last-child {
    border-bottom: 0;
    /*margin-bottom:10px;*/
}

div.asideInfoBox ul[menu] li span[addoption] {
    display: block;
    position: absolute;
    width: 25px;
    height: 25px;
    top: 12px;
    left: 0px;
    line-height: 25px;
    text-align: center;
    color: #FFFFFF;
    background: url(images/icon/n/add.png) no-repeat center center;
    background-size: 22px auto;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

div.asideInfoBox ul[menu] li span[addoption]:hover {
    background-size: 24px auto;
}

div.asideInfoBox ul[menu] li a {
    display: block;
    position: relative;
    color: rgba(100,100,100);
    padding: 5px 25px 5px 5px;
    margin: 0 0;
    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] {
    color: var(--back);
    font-weight: bold;
    font-size: 16px;
}

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 a i {
    display: inline-block;
    width: 30px;
    color: var(--back);
    font-size: 16px;
    vertical-align: middle;
}

div.asideInfoBox ul[menu] li[data-badge]:after {
    content: attr(data-badge);
    position: absolute;
    z-index: 10;
    top: 15px;
    left: 2px;
    font-size: .9em;
    background: var(--boom);
    color: #FFFFFF;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    border-radius: 50%;
}

div.asideInfoBox ul[menu] li[data-badge="0"]:after {
    display: none;
}

/*////////////////////////////////////////////////////////////////*/
img.bannerImg {
    display: block;
    border: 0;
    cursor: pointer;
    width: 100%;
    max-height: 320px;
    margin: 10px auto;
}

/*////////////////////////////////////////////////////////////////*/
span.icon_id {
    display: inline-block;
    width: 34px;
    height: 22px;
    background: url(images/icon/n/id.png) no-repeat center center;
    background-size: 20px auto;
}

span.icon_user {
    display: inline-block;
    width: 34px;
    height: 22px;
    background: url(images/icon/n/user.png) no-repeat center center;
    background-size: 20px auto;
}

span.icon_lock {
    display: inline-block;
    width: 34px;
    height: 22px;
    background: url(images/icon/n/lock.png) no-repeat center center;
    background-size: 20px auto;
}

span.icon_email {
    display: inline-block;
    width: 34px;
    height: 22px;
    background: url(images/icon/n/email.png) no-repeat center center;
    background-size: 20px auto;
}

span.icon_cell {
    display: inline-block;
    width: 34px;
    height: 22px;
    background: url(images/icon/n/cell.png) no-repeat center center;
    background-size: 20px auto;
}

/*////////////////////////////////////////////////////////////////*/
#logingPanels {
    padding: 20px 10px;
    text-align: right;
}

#logingPanels section {
    display: block;
    max-width: 500px;
    margin: 10px auto;
    background-color: white;
    -o-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    -ms-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

.showHand {
    cursor: pointer;
}

.section-title {
    display: block;
    min-height: 30px;
    padding: 15px 20px;
    background-color: white;
    font-weight: normal;
    font-size: 21px;
    line-height: 30px;
    text-align: right;
    color: var(--back);
}

.section-action {
    display: block;
    height: 30px;
    padding: 15px 20px 30px 20px;
    background-color: white;
    text-align: left;
    color: var(--back);
}

.section-action input {
    margin-right: 10px;
}

.input-group {
    display: block;
    padding: 20px 15px 20px 20px;
    -moz-transition: border-left-color 0.5s, box-shadow 0.5s, background-color 0.5s;
    -o-transition: border-left-color 0.5s, box-shadow 0.5s, background-color 0.5s;
    -webkit-transition: border-left-color 0.5s, box-shadow 0.5s, background-color 0.5s;
    transition: border-left-color 0.5s, box-shadow 0.5s, background-color 0.5s;
    border: 1px solid transparent,0px;
    border-right: 5px solid transparent;
    background-color: #ffffff;
}

.input-group[active] {
    display: block;
    padding: 20px 15px 20px 20px;
    -moz-transition: border-left-color 0.5s, box-shadow 0.5s, background-color 0.5s;
    -o-transition: border-left-color 0.5s, box-shadow 0.5s, background-color 0.5s;
    -webkit-transition: border-left-color 0.5s, box-shadow 0.5s, background-color 0.5s;
    transition: border-left-color 0.5s, box-shadow 0.5s, background-color 0.5s;
    border: 1px solid #e0e0e0,0px;
    border-right: 5px solid transparent;
    border-right-color: var(--back);
    background-color: #f0f0f0;
    white-space: nowrap;
}

.input-group-mini {
    padding: 5px 15px 0 15px;
}

.form-description {
    display: block;
    padding: 5px 20px;
    font-size: 12px;
    line-height: 20px;
    color: var(--boom);
    margin: 0;
    white-space: normal;
}

.form-lable {
    display: inline-block;
    width: 34px;
    height: 22px;
    vertical-align: central;
    padding: 6px 0;
    font-size: 20px;
    line-height: 22px;
    color: #cccccc;
    vertical-align: middle;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-left: 0;
    border-radius: 0;
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    margin: 0;
}

.form-control {
    display: inline-block;
    width: calc(100% - 60px);
    height: 22px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 22px;
    color: #555555;
    vertical-align: middle;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-right: 0;
    border-radius: 0;
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    margin: 0 0 0 0;
    -webkit-appearance: none;
}

.form-control[type="tel"] {
    background-repeat: no-repeat;
    background-position: left 10px center;
    width: calc(100% - 80px);
    height: 22px;
    padding: 6px 12px 6px 32px;
}

.form-control:focus {
    outline: 0;
}

.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
    cursor: not-allowed;
    background-color: #eeeeee;
}

textarea.form-control {
    height: auto;
}

.form-control[error] {
    background: #FFFFFF url(images/error.png) no-repeat 2% center;
}

.textbox {
    width: calc(100% - 35px);
    border-left: 1px solid #cccccc;
}

.form-control-desc {
    display: inline-block;
    height: 22px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 22px;
    color: #555555;
    vertical-align: middle;
}

/*////////////////////////////////////////////////////////////////*/
span.rating {
    display: inline-block;
    empty-cells: show;
    padding: 0;
    margin: 0;
    border: 0;
    line-height: 16px;
    padding-left: 85px;
    height: 16px;
    white-space: nowrap;
    background: url(images/rating.png) no-repeat left 0;
}

span.ratingSelector {
    display: inline-block;
    width: 80px;
    height: 16px;
    empty-cells: show;
    padding: 0;
    margin: 9px 5px;
    border: 0;
    background: url(images/rating.png) no-repeat left 0;
}

span.s0 {
    background: url(images/rating.png) no-repeat left 0;
}

span.s1 {
    background: url(images/rating.png) no-repeat left -16px;
}

span.s2 {
    background: url(images/rating.png) no-repeat left -32px;
}

span.s3 {
    background: url(images/rating.png) no-repeat left -48px;
}

span.s4 {
    background: url(images/rating.png) no-repeat left -64px;
}

span.s5 {
    background: url(images/rating.png) no-repeat left -80px;
}

span.s6 {
    background: url(images/rating.png) no-repeat left -96px;
}

span.s7 {
    background: url(images/rating.png) no-repeat left -112px;
}

span.s8 {
    background: url(images/rating.png) no-repeat left -128px;
}

span.s9 {
    background: url(images/rating.png) no-repeat left -144px;
}

span.s10 {
    background: url(images/rating.png) no-repeat left -160px;
}

span.ratingSelector rate {
    display: block;
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    border: 0;
    float: left;
    cursor: pointer;
    empty-cells: show;
}

/*////////////////////////////////////////////////////////////////*/
#customGrid sortkey {
    display: inline-block;
    width: 9px;
    height: 11px;
    padding: 0;
    margin: 4px 5px -1px 0;
}

#customGrid sortkey up {
    display: block;
    width: 9px;
    height: 5px;
    background: url( 'images/sort_up.png' ) no-repeat center center;
    cursor: pointer;
    margin-bottom: 1px;
    opacity: .4;
    filter: alpha(opacity=50);
}

#customGrid sortkey up:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}

#customGrid sortkey down {
    display: block;
    width: 9px;
    height: 5px;
    background: url( 'images/sort_down.png' ) no-repeat center center;
    cursor: pointer;
    opacity: .4;
    filter: alpha(opacity=50);
}

#customGrid sortkey down:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}

@media screen and (min-width: 1201px) {
    #customGrid {
        clear: both;
        display: block;
        width: 100%;
        margin: 0 0 10px 0;
        background: #FFFFFF;
    }
}

@media screen and (max-width: 1200px) {
    #customGrid {
        clear: both;
        display: block;
        width: 100%;
        margin: 0 0 10px 0;
        background: #FFFFFF;
    }
}

#customGrid header {
    display: block;
}

#customGrid header ccol {
    display: none;
}

#customGrid crow {
    display: block;
    position: relative;
    padding: 5px 0;
    margin: 0;
    color: rgba(0,0,0,0.5);
    font-size: 16px;
    vertical-align: middle;
    line-height: 30px;
    border-bottom: 1px dotted rgba(0,0,0,0.2);
}

#customGrid crow:hover {
    color: #000000;
}

#customGrid crow:hover > ccol {
    background: rgba(0,0,0,0.05);
}

#customGrid crow:hover > ccol[c0] {
}

#customGrid crow:hover > ccol[c0] a {
    color: #000000;
}

#customGrid crow:hover > ccol[c1] {
}

#customGrid crow:hover > ccol[c2] {
    visibility: visible;
}

#customGrid crow ccol {
    vertical-align: top;
    overflow: hidden;
    empty-cells: show;
}

#customGrid crow ccol[c0] {
    display: block;
    position: relative;
    overflow: hidden;
    padding: 30px 70px 10px 10px;
}

#customGrid crow ccol[c0] img {
    display: block;
    position: absolute;
    border: 1px dotted rgba(0,0,0,0.2);
    border-radius: 5px;
    width: 48px;
    height: 48px;
    right: 10px;
    top: 5px;
    cursor: pointer;
}

#customGrid crow ccol[c0] span.postType_event {
    display: block;
    position: absolute;
    background: url(images/clock.png) no-repeat center center;
    background-size: 32px 32px;
    width: 32px;
    height: 32px;
    padding: 0;
    right: 19px;
    top: 14px;
}

#customGrid crow ccol[c0] span.postStatus_active {
    display: block;
    cursor: pointer;
    color: #000000;
    font-weight: bold;
}

#customGrid crow ccol[c0] span.postStatus_new, #customGrid crow ccol[c0] span.postStatus_updated {
    display: block;
    cursor: pointer;
    color: var(--back);
    font-weight: bold;
}

#customGrid crow ccol[c0] span.postStatus_inactive, #customGrid crow ccol[c0] span.postStatus_hidden {
    display: block;
    cursor: pointer;
    color: #999999;
}

#customGrid crow ccol[c0]:hover > span.message_name {
}

#customGrid crow ccol[c0] span.message_name {
    display: inline-block;
    font-size: 12px;
    cursor: pointer;
    padding-left: 10px;
}

@media screen and (max-width: 480px) {
    #customGrid crow ccol[c0] {
        font-size: 14px;
    }

    #customGrid crow ccol[c0] span.message_name {
        font-size: 12px;
    }
}

#customGrid crow ccol[c0] span.message_name:hover {
    text-decoration: underline;
}

#customGrid crow ccol[c0] span.messageType_na {
    display: block;
    position: absolute;
    background: #D3D3D3;
    width: 5px;
    height: 100%;
    left: 0px;
    top: 0px;
}

#customGrid crow ccol[c0] span.messageType_reply {
    display: block;
    position: absolute;
    background: #15B100;
    width: 5px;
    height: 100%;
    left: 0px;
    top: 0px;
}

#customGrid crow ccol[c0] span.messageStatus_new {
    display: block;
    cursor: pointer;
    color: var(--back);
    font-weight: bold;
}

#customGrid crow ccol[c0] span.messageStatus_read, #customGrid crow ccol[c0] span.messageStatus_sent {
    display: block;
    cursor: pointer;
    color: var(--boom);
    font-weight: bold;
    font-size: 16px;
}

#customGrid crow ccol[c0] a {
    text-decoration: none;
    color: #3d4752;
}

#customGrid crow ccol[c0] a:hover {
    color: #1579cd;
    text-decoration: underline;
}

#customGrid crow ccol[c1] {
    display: inline-block;
    position: absolute;
    white-space: nowrap;
    font-size: 11px;
    top: 10px;
    right: 70px;
    background: transparent;
}

#customGrid crow ccol[c2] {
    visibility: hidden;
    display: block;
    position: absolute;
    overflow: hidden;
    white-space: nowrap;
    top: 10px;
    bottom: 10px;
    left: 0px;
    background: transparent;
}

#customGrid footer {
    display: block;
    height: 30px;
    white-space: nowrap;
    margin: 3px;
    color: #878585;
    font-size: 16px;
    vertical-align: middle;
    padding: 20px;
    line-height: 30px;
}

#customGrid footer a {
    text-decoration: none;
}

#customGrid footer pagingFirst, #customGrid footer a[pagingFirst] {
    display: block;
    width: 30px;
    height: 30px;
    background: url('images/paging_first.png') no-repeat center center;
    vertical-align: middle;
    cursor: pointer;
    float: right;
}

#customGrid footer pagingFirst:hover, #customGrid footer a[pagingFirst]:hover {
    background-color: #ffffff;
    filter: invert(1);
}

#customGrid footer pagingPrevious, #customGrid footer a[pagingPrevious] {
    display: block;
    width: 30px;
    height: 30px;
    background: url('images/paging_next.png') no-repeat center center;
    vertical-align: middle;
    cursor: pointer;
    float: right;
}

#customGrid footer pagingPrevious:hover, #customGrid footer a[pagingPrevious]:hover {
    background-color: #ffffff;
    filter: invert(1);
}

#customGrid footer pagingNext, #customGrid footer a[pagingNext] {
    display: block;
    width: 30px;
    height: 30px;
    background: url('images/paging_previous.png') no-repeat center center;
    vertical-align: middle;
    cursor: pointer;
    float: right;
}

#customGrid footer pagingNext:hover, #customGrid footer a[pagingNext]:hover {
    background-color: #ffffff;
    filter: invert(1);
}

#customGrid footer pagingLast, #customGrid footer a[pagingLast] {
    display: block;
    width: 30px;
    height: 30px;
    background: url('images/paging_first.png') no-repeat center center;
    vertical-align: middle;
    cursor: pointer;
    float: right;
}

#customGrid footer pagingLast:hover, #customGrid footer a[pagingLast]:hover {
    background-color: #ffffff;
    filter: invert(1);
}

#customGrid footer pagingState {
    display: block;
    min-width: 20px;
    height: 20px;
    border: 1px solid transparent;
    white-space: nowrap;
    margin: 1px;
    color: #474747;
    font-size: 8pt;
    vertical-align: middle;
    padding: 0 5px;
    line-height: 20px;
    cursor: pointer;
    float: right;
}

#customGrid footer pagingState:hover {
    background: Gray;
    color: #ffffff;
}

#customGrid footer pagingRowCount {
    display: block;
    min-width: 20px;
    height: 30px;
    white-space: nowrap;
    color: #474747;
    vertical-align: middle;
    padding: 0 5px;
    line-height: 30px;
    float: right;
    color: var(--boom);
}

#customGrid footer pagingPage, #customGrid footer a[pagingPage] {
    display: block;
    min-width: 10px;
    height: 30px;
    white-space: nowrap;
    color: #474747;
    vertical-align: middle;
    padding: 0 10px;
    line-height: 30px;
    cursor: pointer;
    float: right;
}

#customGrid footer pagingPage:hover, #customGrid footer a[pagingPage]:hover {
    background-color: #FFFFFF;
    filter: invert(1);
}

#customGrid footer pagingActive, #customGrid footer a[pagingActive] {
    display: block;
    background: rgba(0,0,0,0.1);
    min-width: 10px;
    font-weight: bold;
    height: 30px;
    white-space: nowrap;
    color: var(--back);
    vertical-align: middle;
    padding: 0 10px;
    line-height: 30px;
    cursor: pointer;
    float: right;
    border-radius: 3px;
}

/*////////////////////////////////////////////////////////////////*/
.button_grid {
    display: inline-block;
    cursor: pointer;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    width: 40px;
    height: 100%;
    line-height: 40px;
    border: 0;
    padding: 0;
    text-transform: uppercase;
    margin: 0 0 0 5px;
    text-decoration: none;
    color: #FFFFFF;
}

.grid_delete {
    background-image: url(images/icon/n/trash.png);
    background-size: 20px auto;
    background-repeat: no-repeat;
    background-position: center center;
    color: transparent;
    opacity: 0.75;
}

.grid_delete:hover {
    opacity: 1;
}

.grid_edit {
    background-image: url(images/icon/n/edit.png);
    background-size: 20px auto;
    background-repeat: no-repeat;
    background-position: center center;
    color: transparent;
    opacity: 0.75;
}

.grid_edit:hover {
    opacity: 1;
}

.grid_info {
    background-image: url(images/icon/png40/lightbulb_on_40.png);
    background-size: 20px auto;
    background-repeat: no-repeat;
    background-position: center center;
    color: transparent;
    opacity: 0.5;
}

.grid_info:hover {
    opacity: 1;
}

.grid_reply {
    background-image: url(images/icon/n/comment.png);
    background-size: 20px auto;
    background-repeat: no-repeat;
    background-position: center center;
    color: transparent;
    opacity: 0.75;
}

.grid_reply:hover {
    opacity: 1;
}

/*////////////////////////////////////////////////////////////////*/
a.button_big {
    display: inline-block;
    position: relative;
    color: #6c6c6c;
    border: solid 1px #cfcfcf;
    font-size: 14px;
    line-height: 35px;
    background-color: #F0F0F0;
    background-image: -moz-linear-gradient(center top, #FFFFFF 0pt, #E0E0E0 100%);
    background-image: -webkit-linear-gradient(top,white 0,#E0E0E0 100%);
    background-image: linear-gradient(to bottom,white 0,#E0E0E0 100%);
    border-color: #CCCCCC #CCCCCC #AAAAAA;
    box-shadow: 0 0 1px #FFFFFF inset;
    text-shadow: 0 1px 0 #FFFFFF;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    padding: 0 10px 0 30px;
    text-decoration: none;
    margin: 5px 5px 5px 5px;
}

a.button_big:hover {
    box-shadow: 0 1px 0 #FFFFFF inset, 0 1px 3px rgba(0, 0, 0, 0.08);
}

a.button_big:active {
    background-image: -moz-linear-gradient(center bottom, #FFFFFF 0pt, #E0E0E0 100%);
    background-image: -webkit-linear-gradient(bottom,white 0,#E0E0E0 100%);
    background-image: linear-gradient(to bottom,white 0,#E0E0E0 100%);
}

a.button_big iconsweet {
    position: absolute;
    padding: 0 10px 0 0;
    font-size: 18px;
    left: 10px;
    top: -3px;
}

a.button_big:hover iconsweet {
    color: #478CFE;
}

a.btn_grey {
    background-color: #787b83;
    background-image: -moz-linear-gradient(center top, #787b83 0pt, #44474e 100%);
    background-image: -webkit-linear-gradient(top,#787b83 0,#44474e 100%);
    background-image: linear-gradient(to bottom,#787b83 0,#44474e 100%);
    border-color: #7a828d #7a828d #3d4046;
    box-shadow: 0 1px 0 rgba(152, 155, 160, 0.45) inset;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
    color: #f0f0f0;
}

a.btn_grey:hover {
    box-shadow: 0 1px 0 #a1a5af inset, 0 1px 3px rgba(0, 0, 0, 0.08);
}

a.btn_grey:hover iconsweet {
    color: #000;
}

a.btn_grey:active {
    background-image: -moz-linear-gradient(center bottom, #787b83 0pt, #44474e 100%);
    background-image: -webkit-linear-gradient(bottom,#787b83 0,#44474e 100%);
    background-image: linear-gradient(to bottom,#787b83 0,#44474e 100%);
}

a.btn_grey iconsweet {
    color: #f0f0f0;
}

a.button_big1 span {
    font-size: 18px;
    color: #606060;
    float: left;
    margin-top: -3px;
    padding-right: 10px;
}

.greyishBtn {
    background: url(images/button/greishBtn.png) repeat-x scroll 0 0 transparent;
    border: 1px solid #4F5A68;
    color: #FFFFFF;
}

.whitishBtn {
    background: url(images/button/whiteBtn.png) repeat-x scroll 0 0 transparent;
    border: 1px solid #cccccc;
    color: #555555;
    text-shadow: 0 1px 0 #FFFFFF;
    box-shadow: 0 1px 0 0 #FFFFFF;
    -webkit-box-shadow: 0 1px 0 0 #FFFFFF;
}

.bluishBtn {
    background: url(images/button/bluishBtn.png) repeat-x scroll 0 0 transparent;
    border: 1px solid #3079ed;
    color: #FFFFFF;
}

.redishBtn {
    background: url(images/button/redishBtn.png) repeat-x scroll 0 0 transparent;
    border: 1px solid #d22a15;
    color: #FFFFFF;
}

.greenishBtn {
    background: url(images/button/greenishBtn.png) repeat-x scroll 0 0 transparent;
    border: 1px solid #4ba301;
    color: #FFFFFF;
}

.magentaBtn {
    background: url(images/button/magentaBtn.png) repeat-x scroll 0 0 transparent;
    border: 1px solid #ba4c6f;
    color: #FFFFFF;
}

.yellowBtn {
    background: url(images/button/yellow_btn.png) repeat-x scroll 0 0 transparent;
    border: 1px solid #d5ad23;
    color: #FFFFFF;
}

.dblueBtn {
    background: url(images/button/dark_blue_btn.png) repeat-x scroll 0 0 transparent;
    border: 1px solid #41597c;
    color: #FFFFFF;
}

.button_small {
    display: inline-block;
    cursor: pointer;
    font-size: 11px;
    font-weight: bold;
    line-height: 16px;
    padding: 3px 16px 3px;
    text-transform: uppercase;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    margin: 2px 5px 2px 0;
    text-decoration: none;
}

.button_small:hover {
    background-position: bottom;
}

.button_small:active {
    background-position: center;
}

/*=Message Bar=*/
div.msgbar {
    display: block;
    padding: 10px 8px;
    cursor: pointer;
    line-height: 30px;
    font-size: 15px;
    margin: 0px 0 10px 10px;
}

div.msgbar p {
    display: inline;
    margin: 0 0 0 10px;
    line-height: inherit;
}

.content_pad .msgbar:first-child {
    margin-top: 0;
}

/*Info*/
div.msgbar.msg_Info {
    background: #96bcca;
    border-right: 5px solid #4e646c;
    color: #4e646c;
}

/*Success*/
div.msgbar.msg_Success {
    background: #adca96;
    border-right: 5px solid #647458;
    color: #647458;
}

/*Error*/
div.msgbar.msg_Error {
    background: #FCB4B4;
    border-right: 5px solid #E70000;
    color: #FFFFFF;
}

/*Alert*/
div.msgbar.msg_Alert {
    background: #FCB4B4;
    border-right: 5px solid #ad7373;
    color: #785151;
}

/*////////////////////////////////////////////////////////////////*/
#pagingCtrl {
    clear: both;
    display: block;
    vertical-align: middle;
    white-space: normal;
    line-height: 36px;
    text-align: center;
    color: #666666;
    padding: 10px;
    overflow: hidden;
    margin: 0;
    background: #ebebeb;
}

#pagingCtrl a {
    text-decoration: none;
}

#pagingCtrl pagingFirst, #pagingCtrl a[pagingFirst] {
    display: inline-block;
    width: 32px;
    height: 36px;
    line-height: 36px;
    background: url('images/paging_last.png') no-repeat center center;
    border: 0;
    margin: 0;
    vertical-align: middle;
    cursor: pointer;
}

#pagingCtrl pagingFirst:hover, #pagingCtrl a[pagingFirst]:hover {
    background-color: #FFFFFF;
    border-radius: 20px;
}

#pagingCtrl pagingPrevious, #pagingCtrl a[pagingPrevious] {
    display: inline-block;
    width: 32px;
    height: 36px;
    line-height: 36px;
    background: url('images/paging_next.png') no-repeat center center;
    border: 0;
    margin: 0;
    vertical-align: middle;
    cursor: pointer;
}

#pagingCtrl pagingPrevious:hover, #pagingCtrl a[pagingPrevious]:hover {
    background-color: #FFFFFF;
    border-radius: 20px;
}

#pagingCtrl pagingNext, #pagingCtrl a[pagingNext] {
    display: inline-block;
    width: 32px;
    height: 36px;
    line-height: 36px;
    background: url('images/paging_previous.png') no-repeat center center;
    border: 0;
    margin: 0;
    vertical-align: middle;
    cursor: pointer;
}

#pagingCtrl pagingNext:hover, #pagingCtrl a[pagingNext]:hover {
    background-color: #FFFFFF;
    border-radius: 20px;
}

#pagingCtrl pagingLast, #pagingCtrl a[pagingLast] {
    display: inline-block;
    width: 32px;
    height: 36px;
    line-height: 36px;
    background: url('images/paging_first.png') no-repeat center center;
    border: 0;
    margin: 0;
    vertical-align: middle;
    cursor: pointer;
}

#pagingCtrl pagingLast:hover, #pagingCtrl a[pagingLast]:hover {
    background-color: #FFFFFF;
    border-radius: 20px;
}

#pagingCtrl pagingState, #pagingCtrl a[pagingState] {
    display: inline-block;
    height: 36px;
    white-space: nowrap;
    margin: 1px;
    color: #474747;
    font-size: 12pt;
    text-align: center;
    vertical-align: middle;
    padding: 0 5px;
    line-height: 36px;
    cursor: pointer;
}

#pagingCtrl pagingState:hover, #pagingCtrl a[pagingState]:hover {
    background: #FFFFFF;
    color: var(--back);
}

#pagingCtrl pagingRowCount {
    display: none;
    height: 36px;
    white-space: nowrap;
    border: 0;
    margin: 0;
    color: #474747;
    font-size: 12pt;
    text-align: center;
    vertical-align: middle;
    padding: 0 5px;
    line-height: 36px;
}

#pagingCtrl pagingPage, #pagingCtrl a[pagingPage] {
    display: inline-block;
    height: 36px;
    white-space: nowrap;
    border: 0;
    color: var(--back);
    font-size: 12pt;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    padding: 0;
    margin: 0 5px 0 0;
    line-height: 36px;
    cursor: pointer;
    min-width: 36px;
    background: #FFFFFF;
    border-radius: 3px;
}

#pagingCtrl pagingPage:hover, #pagingCtrl a[pagingPage]:hover {
    background: var(--back);
    color:#FFFFFF;
}

#pagingCtrl pagingActive, #pagingCtrl a[pagingActive] {
    display: inline-block;
    height: 36px;
    white-space: nowrap;
    border: 0;
    margin: 0 5px 0 0;
    color: #FFFFFF;
    background: var(--boom);
    font-size: 12pt;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    padding: 0 10px;
    line-height: 36px;
    cursor: pointer;
    border-radius: 3px;
}

/*////////////////////////////////////////////////////////////////*/
select[country] {
    background-repeat: no-repeat;
    background-position: right 5px center;
    padding-right: 30px;
}

select[country]:focus {
    background-repeat: no-repeat;
    background-position: right 5px center;
    padding-right: 30px;
}

/*////////////////////////////////////////////////////////////////*/
input[type="checkbox"] {
    display: none;
}

input[type="checkbox"] + label {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 10px 0 0;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid #cccccc;
}

input[type="checkbox"]:checked + label {
    background: url('images/icon/n/checked.png') no-repeat center center;
    background-size: 16px auto;
}

input[type="checkbox"]:disabled {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

/*////////////////////////////////////////////////////////////////*/
a.autoLink {
    text-decoration: none;
    color: var(--boom);
}

a.autoLink:hover {
    color: var(--back);
    text-decoration: underline;
}

@media screen and (min-width: 641px) {
    img.autoLink {
        display: block;
        width: calc(50% - 30px);
        border: solid 10px #ffffff;
        float: right;
        margin: 10px 0 10px 10px;
        box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
        transition: box-shadow 0.2s ease-in-out;
        transition: transform .5s ease;
        filter: grayscale(100%);
    }

    img.autoLink:hover {
        z-index: 100;
        filter: grayscale(0%);
    }

    .lineBreak {
        display: block;
        clear: both;
        empty-cells: show;
        height: 10px;
    }

    .postFooter {
        display: block;
        clear: both;
        color: #636363;
        font-size: 18px;
        padding: 0 30px;
        border-top: 1px dotted rgba(0,0,0,0.15);
        margin: 30px -30px;
    }

    figure.autoLink {
        display: block;
        width: calc(50% - 30px);
        border: solid 10px #ffffff;
        float: right;
        margin: 10px 0 10px 10px;
        box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
        transition: box-shadow 0.2s ease-in-out;
        transition: transform .5s ease;
        filter: grayscale(0);
        background: #FFFFFF;
    }

    figure.autoLink:hover {
        z-index: 100;
        filter: grayscale(1);
    }

    figure img {
        display: block;
        width: 100%;
    }

    figcaption {
        line-height: 30px;
        font-size: 13px;
        color: #636363;
    }
}

@media screen and (max-width: 640px) {
    img.autoLink {
        display: block;
        width: calc(100% - 20px);
        float: right;
        border: solid 10px #ffffff;
        margin: 10px 0 10px 0px;
        -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
        -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
        box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
    }

    .lineBreak {
        display: block;
        clear: both;
        empty-cells: show;
        height: 10px;
    }

    .postFooter {
        display: block;
        clear: both;
        color: #636363;
        font-size: 16px;
        padding: 0 30px;
        border-top: 2px dotted rgba(0,0,0,0.1);
        margin: 10px -30px;
    }

    figure.autoLink {
        display: block;
        width: calc(100% - 20px);
        border: solid 10px #ffffff;
        float: right;
        margin: 10px 0 10px 0;
        box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
        background: #FFFFFF;
    }

    figure img {
        display: block;
        width: 100%;
    }

    figcaption {
        line-height: 30px;
        font-size: 13px;
        color: #636363;
    }
}

/*////////////////////////////////////////////////////////////////*/
@media screen and (min-width: 1201px) {
    #dashboardA {
        display: block;
        width: 50%;
        vertical-align: top;
        float: right;
    }

    #dashboardA h1 {
        display: block;
        font-size: 18px;
        line-height: 30px;
        padding: 10px 30px;
        color: var(--back);
        border: 0;
        margin: 0;
        background: rgba(0,0,0,0.1);
    }

    div.PostItemA {
        display: block;
        position: relative;
        border: 0;
        padding: 0 0 10px 0;
        margin: 0 0 10px 0;
        background: rgba(235,235,235,0.5);
    }
}

@media screen and (max-width: 1200px) {
    #dashboardA {
        display: block;
    }

    #dashboardA h1 {
        display: block;
        font-size: 16px;
        line-height: 30px;
        padding: 10px 30px;
        color: var(--boom);
        border: 0;
        margin: 0;
        background: #ffffff;
    }

    div.PostItemA {
        display: block;
        position: relative;
        border: 0;
        padding: 0 0 10px 0;
        margin: 0 0 10px 0;
        background: rgba(235,235,235,0.5);
    }
}

div.PostItemA span[image] {
    display: block;
    position: relative;
    /* overflow: hidden; */
    box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 25%);
}

div.PostItemA:hover > span.opinionCtrl[id*="opinionCtrl_1_"] {
    display: block;
}

div.PostItemA span.opinionCtrl[id*="opinionCtrl_1_"] {
    display: block;
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    border-radius: 0 0 0 10px;
    overflow: hidden;
    zoom: 1.25; }

div.PostItemA h3:hover > span.opinionCtrl[id*="opinionCtrl_2_"] {
    display: block;
}

div.PostItemA span.opinionCtrl[id*="opinionCtrl_2_"] {
    display: block;
    position: absolute;
    top: 10px;
    left: 0px;
}

div.PostItemA:last-child {
    border-bottom: 0;
}

div.PostItemA h2 {
    display: inline-block;
    font-size: 14px;
    height: 32px;
    line-height: 32px;
    vertical-align: middle;
    padding: 0 20px 0 10px;
    font-weight: normal;
    color: rgba(0,0,0,0.75);
    cursor: pointer;
    margin: 0;
}

div.PostItemA h2:hover {
    color: var(--boom);
}

div.PostItemA h3 {
    display: block;
    position: relative;
    font-size: 12px;
    font-weight: normal;
    line-height: 20px;
    margin: 10px 20px 0 20px;
    padding: 10px 40px 10px 10px;
    color: #999999;
    border-top: 1px dotted rgba(0,0,0,0.25);
    vertical-align: middle;
}

div.PostItemA h3 a {
    font-weight: bold;
    color: #999999;
    text-decoration: none;
}

div.PostItemA h3 a:hover {
    color: #000000;
    text-decoration: underline;
}

div.PostItemA img[user] {
    display: inline-block;
    vertical-align: middle;
    width: 32px;
    border-radius: 5%;
    margin-left: 10px;
}

div.PostItemA img[post] {
    display: block;
    border: 0;
    width: 100%;
    max-height: 50vh;
    object-fit: cover;
    margin: 0;
    padding: 0;
    vertical-align: top;
    /* filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");*/
    /* filter: gray;  */
    /* -webkit-filter: grayscale(100%);*/
}

div.PostItemA img[user-comment] {
    display: inline-block;
    width: 16px;
    /*position:absolute;
        top:8px;
        right:5px;*/
    border: 1px solid #FFFFFF;
    border-radius: 3px;
    margin-left: 10px;
    vertical-align: middle;
    filter: grayscale(1);
    position: absolute;
    top: 15px;
    right: 10px;
}

div.PostItemA div {
    display: block;
    border: 0;
    padding: 0 10px;
    vertical-align: top;
}

div.PostItemA div a[title] {
    display: block;
    font-size: 20px;
    font-weight: bold;
    line-height: 30px;
    padding: 15px 20px 10px 10px;
    color: var(--back);
    text-decoration: none;
}

div.PostItemA div a[title]:hover {
    color: var(--boom);
}

div.PostItemA div span[detail] {
    display: block;
    font-size: 18px;
    color: rgba(0,0,0,0.75);
    padding: 20px;
    text-align: justify;
}

@media screen and (max-width: 480px) {
    div.PostItemA div span[detail] {
        font-size: 14px;
        text-align: justify;
        padding: 10px 20px;
    }
}

div.PostItemA div span[time] {
    line-height: 20px;
    font-size: 13px;
    color: rgba(0,0,0,0.4);
    text-decoration: none;
    padding: 0 10px 0 0;
    border-right: 1px dotted rgba(0,0,0,0.2);
}

div.PostItemA span[comment] {
    display: block;
    line-height: 25px;
    font-size: 15px;
    color: var(--back);
    text-decoration: none;
    margin: 0 0 0 20px;
    padding: 0 0 10px 0;
}

@media screen and (max-width: 480px) {
    div.PostItemA span[comment] {
        font-size: 13px;
        margin: 0 0 0 10px;
        padding: 5px 0 5px 10px;
        text-align: justify;
    }
}

@media screen and (min-width: 1201px) {
    #dashboardB {
        display: block;
        width: 50%;
        vertical-align: top;
        padding: 10px 0;
        margin-bottom: 10px;
        background: rgba(0,0,0,0.1);
        text-align: right;
        float: right;
    }

    #dashboardB h1 {
        display: block;
        font-size: 15px;
        line-height: 30px;
        padding: 0 20px;
        color: var(--back);
    }
}

@media screen and (max-width: 1200px) {
    #dashboardB {
        display: block;
        padding: 10px 0;
        margin: 0;
        background: rgba(0,0,0,0.1);
        text-align: right;
    }

    #dashboardB h1 {
        display: block;
        font-size: 15px;
        line-height: 30px;
        padding: 0 20px;
        color: var(--back);
        margin: 0;
    }
}

#dashboardB ul[info] {
    display: block;
    white-space: normal;
    line-height: 25px;
    color: rgba(0,0,0,0.5);
    font-size: 11px;
    margin-bottom: 10px;
    padding: 0 0 10px 0;
    list-style: none;
    overflow: hidden;
}

#dashboardB ul[info] li {
    display: block;
    position: relative;
    min-height: 45px;
    padding: 10px 65px 10px 10px;
    border-right: 5px solid transparent;
    border-bottom: 1px dotted rgba(0,0,0,0.25);
    cursor: pointer;
}

#dashboardB ul[info] li:hover {
    background: rgba(0,0,0,0.1);
    border-right: 5px solid rgba(0,0,0,0.75);
    border-bottom: 1px dashed transparent;
    filter: initial;
    color: #ffffff;
}

#dashboardB ul[info] li:last-child {
    border-bottom: 0;
}

#dashboardB ul[info] li img {
    display: block;
    position: absolute;
    width: 45px;
    height: 45px;
    border-radius: 3px;
    right: 10px;
    top: 10px;
}

#dashboardB ul[info] li a[title] {
    display: block;
    color: var(--back);
    font-size: 14px;
    line-height: 26px;
    text-decoration: none;
    word-wrap: break-word;
}

#dashboardB ul[info] li a[title]:hover {
}

@media screen and (min-width: 1201px) {
    #dashboardC {
        display: block;
        width: 288px;
        vertical-align: top;
        border: 0;
        float: left;
        padding: 0;
        margin: 0 0 10px 0;
        background: #FFFFFF;
    }
}

@media screen and (max-width: 1200px) {
    #dashboardC {
        display: block;
        padding: 0;
        margin: 0 0 10px 0;
        background: #FFFFFF;
    }
}

#dashboardC h1 {
    display: block;
    font-size: 14px;
    font-weight: normal;
    line-height: 30px;
    padding: 0 20px;
    color: var(--back);
}

#dashboardC span[graphcover] {
    display: block;
    max-height: 250px;
}

#dashboardC span[visitcount] {
    display: inline-block;
    line-height: 25px;
    font-size: 12px;
    color: #396E9E;
    padding: 5px 10px;
    background: #EEEEEE;
    margin: 0 30px;
    border-radius: 15px;
}

#dashboardC span[keywordcloud] {
    display: block;
    white-space: normal;
    color: #999999;
    font-size: 14px;
    margin: 10px 0;
    border-top: 2px solid #eeeeee;
    padding: 10px 30px;
}

#dashboardC a[tag] {
    display: inline-block;
    position: relative;
    white-space: normal;
    line-height: 25px;
    color: #FFFFFF;
    background: var(--back);
    padding: 5px;
    font-size: 14px;
    margin: 0 0 5px 5px;
    text-decoration: none;
    border-radius: 15px;
}

#dashboardC a[tag]:hover {
    text-decoration: underline;
}

/*////////////////////////////////////////////////////////////////*/
    slideshow {
      position: relative;
      width: 100%;
      height: 75vh;
      /* z-index: 9999; */
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      overflow: hidden;
    }

    slideshow figure {
      display: none;
      margin: 0;
      padding: 0;
      width: 100%;
      height: 75vh;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }

    slideshow figure.active {
      display: flex;
      animation: fadeIn 0.5s ease-in-out;
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    slideshow img {
      width: 100vw;
      height: calc(100% - 50px);
      object-fit: contain;
      padding: 10px 0 40px 0;
    }

    slideshow figcaption {
      color: #fff;
      font-size: 24px;
      text-align: center;
      position: absolute;
      padding: 0 10px;
      bottom: 60px;
      text-shadow: 2px 2px 3px black;
      font-weight: 100;
    }

    slideshow figdesc {
      color: #ccc;
      font-size: 26px;
      text-align: center;
      padding: 0 20px;
      position: absolute;
      bottom: 120px;
      text-shadow: 2px 2px 3px black;
      white-space: break-spaces;
    }

    .arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 40px;
      color: #fff;
      mix-blend-mode: overlay;
      cursor: pointer;
      user-select: none;
      padding: 10px;
      z-index: 50;
      /* background: rgba(0,0,0,0.05); */
      border-radius: 6px;
    }

    .arrow.left { right: 20px; }
    .arrow.right {left: 20px;}

    .dots {
      position: absolute;
      bottom: 20px;
      display: flex;
      justify-content: center;
      width: 100%;
    }

    .dot {
      height: 12px;
      width: 12px;
      margin: 0 5px;
      background-color: #bbb;
      border-radius: 50%;
      cursor: pointer;
    }

    .dot.active {
      background-color: #f1db9d;
    }

    .controls {
      position: absolute;
      top: 20px;
      left: 20px;
      z-index: 51;
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .btn {
      background: rgba(0,0,0,0.1);
      color: #fff;
      border: 0;
      padding: 8px 12px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 12px;
    }

    .btn:focus { outline: 2px solid #f1db9d; }

@media screen and (max-width: 640px) {
    .arrow.left { right: 10px; }
    .arrow.right {left: 10px;}
    .controls {left: 10px;}
    .btn { font-size: 10px; }

    slideshow img {
      height: 75vh;
      object-fit: cover;
      height: 100%;
      padding: 0;
    }    
    
}

/*////////////////////////////////////////////////////////////////*/
#mapPopup {
    position: fixed;
    display: block;
    z-index: 2000;
    background: #FFFFFF;
    background: linear-gradient(top, #dbdada 10%, #FFFFFF 90%);
    background: -webkit-linear-gradient(top, #dbdada 10%, #FFFFFF 90%);
    background: -moz-linear-gradient(top, #dbdada 10%, #FFFFFF 90%);
    background: -ms-linear-gradient(top, #dbdada 10%, #FFFFFF 90%);
    background: -o-linear-gradient(top, #dbdada 10%, #FFFFFF 90%);
    top: 0;
    right: 50px;
    bottom: 0;
    left: 50px;
    margin: auto;
    height: 70%;
    padding: 30px 5px 5px 5px;
    text-align: left;
    border: 1px solid #d7d7d7;
    font-size: 10pt;
    font-weight: bold;
    min-width: 150px;
    width: 70%;
    color: #112406;
    -moz-box-shadow: 0 0 15px #888;
    -webkit-box-shadow: 0 0 15px #888;
    box-shadow: 0 0 15px #888;
    overflow: hidden;
}

#mapPopup iframe {
    display: block;
    border: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#mapPopup span[close] {
    position: absolute;
    z-index: 2010;
    display: block;
    width: 12px;
    height: 12px;
    top: 10px;
    left: 10px;
    background: url( 'images/icon/n/close.png' ) no-repeat center center;
    background-size: 20px auto;
    cursor: pointer;
}

#mapPopup span[close]:hover {
    background: url( 'images/closeKey_over.png' ) no-repeat center center;
}

/*////////////////////////////////////////////////////////////////*/
div.helpTip {
    color: #396E9E;
}

#moreImageList {
    display: block;
    overflow: hidden;
    list-style: none;
    list-style-type: none;
    margin: -5px 0 0 0;
    padding: 10px;
}

#moreImageList li {
    display: inline-block;
    position: relative;
    margin: 0 15px 15px 0;
    border: 1px dotted var(--boom);
    vertical-align: top;
}

#moreImageList li img {
    display: block;
    width: 128px;
    border: 5px solid #FFFFFF;
}

#moreImageList li delete {
    display: block;
    position: absolute;
    top: -5px;
    left: -5px;
    cursor: pointer;
    z-index: 10;
    width: 24px;
    height: 24px;
    background: #FF2D2D url(images/closeKeyW.png) no-repeat center center;
    border-radius: 50%;
}

#moreImageList li delete:hover {
    top: -8px;
    left: -8px;
    width: 30px;
    height: 30px;
    background: #000000 url(images/closeKeyW.png) no-repeat center center;
}

/*////////////////////////////////////////////////////////////////*/
#PopupMenu {
    display: none;
    position: absolute;
    width: 120px;
    text-align: right;
    left: 0px;
    top: 0px;
    z-index: 650;
    padding: 5px 1px 10px 1px;
    background: #F2F2F2;
    border: 1px solid #666666;
    -moz-box-shadow: 3px 3px 3px #333;
    -webkit-box-shadow: 3px 3px 3px #333;
}

#PopupMenu span {
    display: block;
    font-size: 9pt;
    line-height: 20px;
    color: #666666;
    text-decoration: none;
    vertical-align: middle;
    width: 110px;
    height: 20px;
    white-space: nowrap;
    padding: 0px 5px;
    cursor: pointer;
}

#PopupMenu span:hover {
    color: #FFFFFF;
    background: #666666;
}

#PopupMenu hr {
    border: 0;
    background: #515c71;
    height: 1px;
    width: 100%;
}

/*////////////////////////////////////////////////////////////////*/
@media screen and (min-width: 1201px) {
    div[usersView] {
        display: block;
        margin: 0 0 10px 0;
        padding: 10px 10px 0 0;
        background: #FFFFFF;
        text-align: center;
    }
}

@media screen and (max-width: 1200px) {
    div[usersView] {
        display: block;
        margin: 0;
        padding: 10px 10px 0 0;
        background: #FFFFFF;
        text-align: center;
    }
}

div[userView] {
    display: inline-block;
    position: relative;
    width: calc(25% - 0px);
    margin: 0;
    vertical-align: top;
    white-space: normal;
    color: #666666;
    padding: 0;
}

@media screen and (max-width: 640px) {
    div[userView] {
        width: calc(50% - 0px);
    }
}

div[userView] span[userImage] {
    display: block;
}

div[userView] span[userImage] img {
    display: block;
    width: calc(100% - 2px);
    margin: 1px;
}

div[userView] a[userFullName] {
    display: block;
    position: absolute;
    bottom: 40px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 14px;
    height: 25px;
    line-height: 25px;
    padding: 5px;
    font-weight: bold;
    color: var(--back);
    text-decoration: none;
    background: rgba(255,255,255,0.75);
    backdrop-filter: grayscale(1);
}

div[userView] a[userFullName]:hover {
    color: var(--boom);
}

div[userView] span[userAction] {
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    text-align: center;
    overflow: hidden;
    background: rgba(255,255,255,0.75);
}

div[userView] span[userAction] span[friend] {
    height: 40px;
    line-height: 40px;
    padding: 0 5px;
    font-size: 11px;
    border: 0;
    margin: 0;
    vertical-align: middle;
}

div[userView] span[userAction] span[sendmessage] {
    color: transparent;
    background: url(images/icon/n/comment.png) no-repeat center center;
    background-size: 22px auto;
    border: 0;
    width: 42px;
    height: 40px;
    line-height: 40px;
    padding: 0;
    font-size: 12px;
    margin: 0;
    white-space: nowrap;
    vertical-align: middle;
}

div[userView] span[userAction] span[sendmessage]:hover {
    background-color: #575757;
}

/*////////////////////////////////////////////////////////////////*/
span.shareKey {
    display: block;
    background: #FFFFFF;
    float: left;
    width: 50px;
    height: 22px;
    line-height: 24px;
    border-radius: 2px;
    padding: 0 7px;
    margin-right: 5px;
    color: #396E9E;
    font-size: 9px;
    border: 1px solid #D3D3D3;
    cursor: pointer;
}

span.shareKey:hover {
    border: 1px solid #c3c3c3;
    color: #2d5a82;
}

span.shareKey i {
    font-size: 16px;
    padding-right: 5px;
    vertical-align: middle;
}

#EUCookieLawAsk {
    display: block;
    position: fixed;
    text-align: center;
    z-index: 500;
    bottom: 0;
    left: 30px;
    right: 30px;
    padding: 20px;
    background: rgba(255,255,255,0.95);
    border: 1px solid #FFFFFF;
    font-size: 16px;
    -webkit-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 10px 5px rgb(0 0 0 / 25%);
    backdrop-filter: blur(2px);
}

#EUCookieLawAsk a {
    display: inline-block;
    color: #000000;
    font-size: 14px;
    text-decoration: none;
    line-height: 30px;
}

#EUCookieLawAsk span {
    display: inline-block;
    text-decoration: none;
    line-height: 40px;
    font-size: 16px;
    padding: 0 20px;
    margin: 20px;
    background: var(--back);
    color: #FFFFFF;
    cursor: pointer;
    border-radius: 3px;
    box-shadow: 3px 3px 3px 0px rgb(0 0 0 / 20%);
}

#EUCookieLawAsk span:hover {
    background: var(--boom);
}

@media screen and (min-width: 1201px) {
    #getUsrPosCrtl {
        display: block;
        width: 30px;
        height: 30px;
        position: absolute;
        z-index: 10;
        top: 80px;
        right: 20px;
        background: #FFFFFF url(images/mylocation.png) no-repeat center center;
        box-shadow: 0 1px 5px rgba(0,0,0,0.65);
        border-radius: 50%;
        cursor: pointer;
    }

    #getUsrPosCrtl:hover {
        filter: contrast(1.5);
    }
}

@media screen and (max-width: 1200px) {
    #getUsrPosCrtl {
        display: block;
        width: 30px;
        height: 30px;
        position: absolute;
        z-index: 10;
        top: 80px;
        right: 20px;
        background: #FFFFFF url(images/mylocation.png) no-repeat center center;
        box-shadow: 0 1px 5px rgba(0,0,0,0.65);
        border-radius: 50%;
        cursor: pointer;
    }

    #getUsrPosCrtl:hover {
        filter: contrast(1.5);
    }
}

.blMapPopup {
    display: block;
    max-width: 250px;
    padding-top: 10px;
}

.blMapPopup img {
    display: block;
    width: 96px;
    float: right;
    margin: 0 0 10px 10px;
}

.blMapPopup div {
    text-align: right;
}

.blMapPopup a {
    display: block;
    border: none;
    padding: 2px 10px;
    margin: 10px 0 0 0;
    text-decoration: none;
    color: var(--boom);
    border-top: 1px solid rgba(0,0,0,0.2);
    cursor: pointer;
    text-align: center;
    line-height: 25px;
}

.blMapMiniPopup {
    display: block;
    max-width: 150px;
    padding-top: 10px;
    zoom:0.8; }

.blMapMiniPopup img {
    display: block;
    width: 100%;
}

.blMapMiniPopup a {
    display: block;
    border: none;
    padding: 2px 10px;
    margin: 10px 0 0 0;
    text-decoration: none;
    color: var(--boom);
    cursor: pointer;
    text-align: center;
    line-height: 25px;
}

a.customLocInfo {
    display: block;
    border: none;
    padding: 2px 10px;
    margin: 10px 0 0 0;
    text-decoration: none;
    background: var(--boom);
    border-radius: 15px;
    color: #ffffff;
    cursor: pointer;
    text-align: center;
    -webkit-appearance: none;
    border-radius: 2px;
}

/* Festivals */
tileList {
    display: block;
    overflow: hidden;
    padding: 0px;
}

tile {
    display: block;
    position: relative;
    width: calc(25% - 10px);
    padding: 0;
    margin: 0 0 10px 10px;
    float: right;
    cursor: pointer;
    background: rgba(125,125,125,0.10);
    backdrop-filter: blur(2px);
}

@media screen and (max-width: 640px) {
    tile {
        display: block;
        position: relative;
        width: 100%;
        padding: 0;
        margin: 0 0 10px 0;
        float: right;
        cursor: pointer;
        background: rgba(125,125,125,0.10);
        backdrop-filter: blur(2px);
    }
}

tile[hasRate="true"] {
    height: 192px;
    width: calc(50% - 20px);
    border: 5px solid #000000;
}

tile[rank]:after {
    content: attr(rank);
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 20px;
    background: var(--boom);
    color: white;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
}

tile img[postImage] {
    display: block;
    width: 100%;
    max-height: 160px;
    padding: 0;
    margin: 0;
    border: 0;
    object-fit: cover;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
}

tile img[festivalImage] {
    display: block;
    width: 100%;
    max-height: 200px;
    padding: 0;
    margin: 0;
    border: 0;
    object-fit: cover;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
}

tile img[publicationImage] {
    display: block;
    width: 100%;
    height: 40vh;
    padding: 0;
    margin: 0;
    border: 0;
    object-fit: cover;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
}

tiletitle {
    position: absolute;
    padding: 0;
    margin: 0;
    border: 0;
    bottom: 64px;
    left: 0px;
    background-color: rgba(0,0,0,.3);
    color: #FFFFFF;
    font-size: 15px;
    padding: 10px;
    line-height: 15px;
    overflow: hidden;
}

tile:hover > tiletitle {
    background-color: rgba(0,0,0,.7);
}

tile span {
    display: block;
    width: 100%;
    height: 64px;
    padding: 0;
    margin: 0;
    border: 0;
    font-size: 12px;
    line-height: 30px;
    color: var(--boom);
    overflow: hidden;
}

tile span img[userImage] {
    display: inline-block;
    width: 50px;
    height: 50px;
    padding: 0;
    margin: 7px;
    border: 0;
    vertical-align: middle;
}

tile span a {
    display: inline-block;
    height: 64px;
    padding: 0;
    margin-left: 10px;
    border: 0;
    color: var(--back);
    font-size: 16px;
    line-height: 64px;
    overflow: hidden;
    vertical-align: middle;
    text-decoration: none;
}

@media screen and (max-width: 640px) {
    tile span a {
        font-size: 14px;
    }
}

tile span a[noUserImage] {
    padding-right: 20px;
}

tile span a:hover {
    font-weight: bold;
}

.titleHead {
    display: block;
    font-size: 20px;
    font-weight: bold;
    color: var(--boom);
    line-height: 50px;
    padding: 0 20px;
    border-bottom: 10px dotted rgba(0,0,0,0.1);
}

.titleSub {
    display: block;
    padding: 0 20px;
    margin: 0;
    color: var(--back);
    font-size: 14px;
    line-height: 30px;
    overflow: hidden;
    vertical-align: central;
    text-decoration: none;
    backdrop-filter: blur(3px);
}

.titleSub a {
    display: inline-block;
    padding: 0;
    margin: 0;
    color: var(--boom);
    font-size: 14px;
    line-height: 30px;
    overflow: hidden;
    vertical-align: central;
    text-decoration: none;
}

.titleSub a:hover {
    color: var(--back);
}

.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    padding: 0;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.9);
}

.modal-content {
    margin: auto;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#modalcaption {
    display: block;
    position: fixed;
    line-height: 40px;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 18px;
    text-align: right;
    color: #FFFFFF;
    padding: 0 20px;
    text-shadow: 1px 1px #000000;
}

.modal-content, #modalcaption {
    animation-name: zoom;
    animation-duration: 0.6s;
}

@keyframes zoom {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 50px;
    line-height: 50px;
    height: 50px;
    color: transparent;
    background: #000000 url(icons/close_w.png) no-repeat center center;
    background-size: 22px auto;
    font-size: 40px;
    border:1px solid #838383;
    border-radius: 5px;
    padding: 0;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.modal-close:hover, .modal-close:focus {
    background: var(--boom) url(icons/close_w.png) no-repeat center center;
    border:1px solid var(--boom);
    background-size: 22px auto;
    text-decoration: none;
    cursor: pointer;
}

#modalImgDLKey
{
    position: absolute;
    top: 15px;
    left: 15px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    background: #000000 url(icons/download_w.png) no-repeat center;
    background-size: 24px;
    border-radius: 5px;
    border: 1px solid #838383;
    transition: 0.3s;
}
#modalImgDLKey:hover
{
    background: var(--boom) url(icons/download_w.png) no-repeat center;
    background-size: 24px;
    border: 1px solid var(--boom);
}

@media only screen and (max-width: 700px) {
    .modal-content {
        width: 100%;
    }
}

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

/*
    span[image] {
        display: block;
        position: relative;
        overflow: hidden;
    }
    
    */
span[image] span[videoicon] {
    display: block;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(images/playw.png) no-repeat center center;
    background-size: 25% auto;
    opacity: 75%;
    cursor: pointer;
    transition: all 0.5s;
}

span[image] span[videoicon]:hover {
    background-size: 25% auto;
    opacity: 75%;
    filter: invert(1);
}

span[image] span[panoramaicon] {
    display: block;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(images/panoramaw.png) no-repeat center center;
    background-size: 25% auto;
    opacity: 75%;
    cursor: pointer;
    transition: all 0.5s;
}

span[image] span[panoramaicon]:hover {
    background-size: 25% auto;
    opacity: 95%;
    filter: invert(1);
}

span[image] span[liveicon] {
    display: block;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(images/liveicon.png) no-repeat center center;
    background-size: 25% auto;
    opacity: 75%;
    cursor: pointer;
    transition: all 0.5s;
}

span[image] span[liveicon]:hover {
    background-size: 25% auto;
    opacity: 95%;
    filter: invert(1);
}

span[image] span[waveicon] {
    display: block;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(images/wavew.png) no-repeat center center;
    background-size: 25% auto;
    opacity: 75%;
    cursor: pointer;
    transition: all 0.5s;
}

span[image] span[waveicon]:hover {
    background-size: 25% auto;
    opacity: 95%;
    filter: invert(1);
}

#countDownKey {
    display: block;
    width: 300px;
    line-height: 50px;
    padding: 0;
    margin: 30px auto 50px auto;
    background: var(--back);
    color: #FFFFFF;
    border-radius: 3px;
    font-size: 12px;
    text-align: center;
    cursor: pointer;
}

#countDownKey:hover {
    background: #bd1818;
}

@media only screen and (max-width: 480px) {
    #countDownKey {
        width:100%;
    }
}

@media (prefers-color-scheme: Ddark) {
    #navbarBG, #loginbarBG {
        background: var(--back);
    }

    #pageBodyBG {
        background: rgba(255,255,255,0.05) url(images/bg/catBG-dark.jpg) no-repeat bottom center;
        background-size: 100% auto;
    }

    #submenubarBG {
        background: var(--boom);
    }

    #loginbar a.buttonUser {
        color: var(--boom);
    }

    #navbar a, div.PostItemA div a[title], div.asideInfoBox ul[menu] li a, div.asideInfoBox ul[info] li a[title], div.relatedPostItem div span[detail], div.postDetail div span[detail], div.postItem span[shortdes], div.commentPanel span.commentDetail, div.commentPanelHeader span[comntUsrInfDat], div.commentPanelHeader span[comntUsrInfDat] a, div.commentPanelHeader span, div.commentPanel textarea, .firstColor, div.postDetail div span[time] a, a.autoLink, div.PostItemA div span[time], div.PostItemA h3, div.PostItemA h3 a, #searchInput:focus {
        color: #FFFFFF;
    }

    #loginbar a.buttonDashboard, #loginbar a.buttonAdmin, #loginbar a.sendPost, div.asideInfoBox, div.commentPanel textarea, div.userInfoBox {
        background: rgba(255,255,255,0.1);
    }

    div.formPanel, #customGrid, div[userView], div.messagePanel {
        background: rgba(255,255,255,0.9);
    }

    #searchbar {
        border-right: 1px solid rgba(255,255,255,0.1);
    }

    #searchbar:hover, #searchbar:focus {
        background: var(--back) url(../../content/app/favicon.png) no-repeat right 10px center;
        background-size: 16px 16px;
        color: #FFFFFF;
    }

    #loginbar span.mobileMenuKey, #navbar span[close] {
        filter: invert(1);
    }

    #navbar a[dashboardMenu="mypost"], #navbar a[dashboardMenu="myprofile"] {
        border-top: 10px solid rgba(255,255,255,0.15);
    }

    div.userInfoBox a[fullname] {
        border-bottom: 5px solid rgba(255,255,255,0.25);
    }

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

/* Addedd after July 1,2021 */
div.newCommentPanel {
    padding: 10px;
    display: block;
    overflow: hidden;
    text-align: right;
    order: 4;
    width: calc(100% - 40px);
    max-width: 1200px;
    margin: 0 auto;
}

@media only screen and (max-width: 480px) {
    div.newCommentPanel {
        padding: 0;
    }
}

div.newComment {
    padding: 10px 0 0 0;
    border-top: 1px dotted rgba(0,0,0,0.10);
}

div.newComment[reply] {
    border: 2px solid var(--boom);
    border-radius: 25px 25px 0 25px;
    background: rgba(0,0,0,0.02);
}

div.newComment:first-child {
    padding: 0;
}

@media only screen and (max-width: 480px) {
    div.newComment {
        padding: 5px 0 0 0;
        border-top: 0;
    }

    div.newComment:first-child {
        padding: 0;
    }
}

div.newComment a[commnetUserName] {
    text-decoration: none;
    font-weight: bold;
    color: var(--boom);
    padding-left: 10px;
}

div.newComment img[commnetUserImg] {
    display: inline-block;
    height: 28px;
    margin-left: 10px;
    vertical-align: middle;
    border-radius: 3px;
}

span[parentComment] {
    display: block;
    position: relative;
    white-space: pre-wrap;
    overflow: hidden;
    /* background: #FFFFFF; */
    font-size: 14px;
    padding: 15px 20px 15px 20px;
    color: var(--back);
    line-height: 28px;
    text-align: justify;
}

span[childComment] {
    display: block;
    position: relative;
    white-space: pre-wrap;
    overflow: hidden;
    /* background: #FFFFFF; */
    padding: 15px 30px 15px 30px;
    color: var(--back);
    line-height: 28px;
    margin-top: -10px;
    border-radius: 0 0 0 25px;
    box-shadow: 0 5px 5px rgb(0 0 0 / 10%);
}


@media only screen and (max-width: 480px) {
    span[parentComment] {
    font-size: 13px;
    padding: 0;
}

span[childComment] {
    font-size: 12px;
    padding: 10px 30px 10px 10px;
}
}

span[childComment][level="2"] {
    margin-right: 10px;
}

span[childComment][level="3"] {
    margin-right: 20px;
}

span[childComment][level="4"] {
    margin-right: 30px;
}

span[childComment][level="5"] {
    margin-right: 40px;
}

span[childComment][level="6"] {
    margin-right: 50px;
}

span[datetime] {
    display: block;
    font-size: 9px;
    text-align: left;
    color: rgba(0,0,0,0.5);
}

span[replyComment] {
    display: block;
    position: absolute;
    background: url(images/icon/n/reply.png) no-repeat center center;
    background-size: auto 20px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    filter: grayscale(1);
    bottom: 20px;
    right: 33px;
}

span[replyComment]:hover {
    background-color: #FFFFFF;
    filter: invert(1);
    border-radius: 50%;
}

span[sendcomment] {
    display: block;
    position: absolute;
    background: url(images/icon/n/comment.png) no-repeat center center;
    background-size: 30px auto;
    width: 80px;
    height: 40px;
    cursor: pointer;
    filter: grayscale(1);
    top: 5px;
    left: 10px;
}

span[sendcomment]:hover {
    background-size: auto 32px;
}

@media only screen and (max-width: 480px) {
    span[sendcomment] {
        display: block;
        position: absolute;
        background: url(images/icon/n/reply.png) no-repeat center center;
        background-size: 24px;
        width: 70px;
        height: 30px;
        cursor: pointer;
        filter: grayscale(1);
        top: 10px;
        left: 0;
    }

    span[sendcomment]:hover {
        background-size: auto 40px;
        filter: grayscale(0);
    }
}

#commentFormControlBG {
    display: none;
    position: fixed;
    z-index: 950;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.1);
}

div.newCommentForm {
    display: block;
    border: 0;
    vertical-align: top;
    white-space: normal;
    color: #000000;
    padding: 20px;
    margin: 0;
    margin-top: 10px;
    background: #FFFFFF;
}

@media only screen and (max-width: 480px) {
    div.newCommentForm {
        padding: 0;
        margin: 0;
        width: calc(100% - 0px);
    }
}

#newCommentFormIn {
    display: block;
    border-top: 2px solid var(--boom);
    position: relative;
}

#newCommentFormIn textarea {
    display: block;
    width: calc(100% - 110px);
    height: 15vh;
    line-height: 40px;
    border: 0;
    vertical-align: top;
    white-space: normal;
    color: var(--back);
    margin: 0 50px 0 0;
    padding: 0;
    background: transparent;
    outline: 0;
}

@media only screen and (max-width: 480px) {
    #newCommentFormIn textarea {
        height: 80px;
    }
}

div.newCommentPanelHeader {
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    top: 0;
    right: 0;
}

div.newCommentPanelHeader img {
    display: block;
    width: 28px;
    border-radius: 50%;
    margin: 6px;
}

div.newCommentForm input[type="submit"] {
    display: block;
    position: absolute;
    vertical-align: top;
    width: 40px;
    text-align: center;
    padding: 0;
    margin: 0;
    font-size: 12px;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
    color: var(--back);
    border: 0;
    background: rgba(0,0,0,0.05);
    border-radius: 10px;
    bottom: 5px;
    left: 5px;
}

#parentCommentID {
    display: none;
}

/* common */
.ribbon {
    display: block;
    position: absolute;
    z-index:100;
    top: 10px;
    left:20px;
}

.ribbon span {
    display: block;
    line-height: 22px;
    padding: 0 5px;
    background-color: rgba(255,0,0,0.75);
    box-shadow: 0 5px 10px rgba(0,0,0,.1);
    color: #fff;
    font-size: 12px;
    text-shadow: 0 1px 1px rgba(0,0,0,.2);
    text-transform: uppercase;
    text-align: center;
}


.ribbon span {
}

/* New Message */
#messageFormControlBG {
    display: none;
    position: fixed;
    z-index: 950;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.1);
}

div.newMessageForm {
    display: none;
    position: fixed;
    z-index: 1000;
    bottom: 0;
    left: 0;
    right: 0;
    border: 0;
    vertical-align: top;
    white-space: normal;
    color: #666666;
    padding: 20px 30px;
    margin: 0;
    background: rgba(255,255,255,0.99);
    backdrop-filter: blur(3px);
    box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 50%);
}

@media only screen and (max-width: 480px) {
    div.newMessageForm {
        display: none;
        position: fixed;
        z-index: 1000;
        bottom: 0;
        left: 0;
        right: 0;
        border: 0;
        vertical-align: top;
        white-space: normal;
        color: #666666;
        padding: 10px;
        margin: 0;
        background: rgba(255,255,255,0.95);
        backdrop-filter: blur(3px);
        box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 50%);
    }
}

#newMessageFormIn {
    display: block;
    border: 1px dotted rgba(0,0,0,0.1);
    position: relative;
}

#newMessageFormIn input[type="text"] {
    display: block;
    width: calc(100% - 110px);
    height: 40;
    line-height: 40px;
    border: 0;
    border-bottom: 1px dotted rgba(0,0,0,0.1);
    vertical-align: top;
    white-space: normal;
    color: var(--back);
    margin: 0 50px 0 0;
    padding: 0;
    background: transparent;
    outline: 0;
}

#newMessageFormIn textarea {
    display: block;
    width: calc(100% - 110px);
    height: calc(50vh - 20px);
    line-height: 40px;
    border: 0;
    vertical-align: top;
    white-space: normal;
    color: var(--back);
    margin: 0 50px 0 0;
    padding: 0;
    background: transparent;
    outline: 0;
}

@media only screen and (max-width: 480px) {
    #newMessageFormIn textarea {
        height: calc(50vh - 20px);
    }
}

div.newMessagePanelHeader {
    display: block;
    position: absolute;
    width: 40px;
    height: 100%;
    top: 0;
    bottom: 0;
    right: 0;
}

div.newMessagePanelHeader img {
    display: block;
    width: 28px;
    border-radius: 50%;
    margin: 6px;
}

div.newMessagePanelHeader span[attachment] {
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    bottom: 5px;
    right: 0;
    background: url(images/icon/png40/clip_40.png) no-repeat center center;
    background-size: 25px auto;
    opacity: 0.5;
    cursor: pointer;
}

div.newMessagePanelHeader span[attachment]:hover {
    opacity: 1;
}

div.newMessageForm input[type="submit"] {
    display: block;
    position: absolute;
    vertical-align: top;
    width: 40px;
    text-align: center;
    padding: 0;
    margin: 0;
    font-size: 12px;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
    color: var(--back);
    border: 0;
    background: rgba(0,0,0,0.05);
    border-radius: 10px;
    bottom: 5px;
    left: 5px;
}

#parentMessageID {
    display: none;
}

#screenbg {
    display: none;
    position: fixed;
    z-index: 110;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.1);
    backdrop-filter: blur(1px);
}

/* Link Sharing */
#sharingFormControlBG {
    display: none;
    position: fixed;
    z-index: 950;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255,255,255,0.5);
}

div.sharingForm {
    display: none;
    position: fixed;
    z-index: 1000;
    bottom: 0;
    left: 0;
    right: 0;
    border: 0;
    vertical-align: top;
    white-space: normal;
    color: #666666;
    padding: 20px 30px;
    margin: 0;
    background: rgba(255,255,255,0.99);
    backdrop-filter: blur(3px);
    box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 50%);
}

@media only screen and (max-width: 480px) {
    div.sharingForm {
        display: none;
        position: fixed;
        z-index: 1000;
        bottom: 0;
        left: 0;
        right: 0;
        border: 0;
        vertical-align: top;
        white-space: normal;
        color: #666666;
        padding: 10px;
        margin: 0;
        background: rgba(255,255,255,0.95);
        backdrop-filter: blur(3px);
        box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 50%);
    }
}

#sharingFormIn {
    display: block;
    border: 1px dotted rgba(0,0,0,0.1);
    position: relative;
}

#sharingFormIn input[type="url"] {
    display: block;
    width: calc(100% - 90px);
    height: 40px;
    line-height: 40px;
    border: 0;
    vertical-align: top;
    white-space: normal;
    color: var(--back);
    margin: 0 50px 0 40px;
    padding: 0;
    background: transparent;
    outline: 0;
}

@media only screen and (max-width: 480px) {
    #sharingFormIn input[type="url"] {
        height: 40px;
    }
}

div.sharingReview {
    display: block;
}

div.sharingReviewContainer {
    display: block;
    padding: 20px;
    text-align: right;
    overflow: hidden;
    background: rgba(0,0,0,0.02);
}

@media only screen and (max-width: 480px) {
    div.sharingReviewContainer {
        padding: 10px;
    }
}

div.sharingReviewContainer img {
    display: block;
    width: 50%;
    float: right;
    max-height: 50vh;
    object-fit: cover;
}

div.sharingReviewContainer urltitle {
    display: block;
    width: calc(50% - 20px);
    padding: 0 10px;
    line-height: 50px;
    float: right;
    font-size: 18px;
    font-weight: bold;
}

div.sharingReviewContainer urldescription {
    display: block;
    width: calc(50% - 20px);
    padding: 0 10px;
    line-height: 40px;
    float: right;
    font-size: 14px;
}

div.sharingReviewContainer urlkeywords {
    display: block;
    width: calc(50% - 20px);
    padding: 5px 10px;
    line-height: 30px;
    float: right;
    font-size: 12px;
}

@media only screen and (max-width: 480px) {
    div.sharingReviewContainer img {
        width: 100%;
        float: none;
        max-height: 25vh;
        object-fit: cover;
    }

    div.sharingReviewContainer urltitle {
        width: calc(100% - 20px);
        line-height: 35px;
        float: none;
        font-size: 16px;
    }

    div.sharingReviewContainer urldescription {
        width: calc(100% - 20px);
        line-height: 25px;
        float: none;
        font-size: 12px;
    }

    div.sharingReviewContainer urlkeywords {
        width: calc(100% - 20px);
        float: none;
        font-size: 10px;
    }
}

div.sharingReviewContainer urlkeywords span {
    display: inline-block;
    line-height: 30px;
    background: rgba(0,0,0,0.25);
    color: #FFFFFF;
    padding: 0 10px;
    margin: 0 0 5px 5px;
    border-radius: 15px;
}

div.sharingPanelHeader {
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    bottom: 0;
    left: 0;
}

div.sharingPanelHeader img {
    display: block;
    width: 28px;
    border-radius: 50%;
    margin: 6px;
}

div.sharingForm input[type="submit"] {
    display: block;
    position: absolute;
    vertical-align: top;
    width: 40px;
    text-align: center;
    padding: 0;
    margin: 0;
    font-size: 12px;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
    color: var(--back);
    border: 0;
    background: rgba(0,0,0,0.05);
    border-radius: 10px;
    bottom: 5px;
    right: 5px;
}

#sharingUrlButton {
    position: fixed;
    display: block;
    width: 50px;
    height: 50px;
    bottom: 10px;
    left: 10px;
    z-index: 50;
    background: rgba(255,255,255,0.90) url(images/icon/n/share.png) no-repeat center center;
    background-size: 22px auto;
    box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.5);
    overflow: hidden;
    border-radius: 50%;
    cursor: pointer;
}

#sharingUrlButton:hover {
    filter: invert(1);
}

#referrerID {
    display: block;
}

#referrerID div {
    display: inline-block;
    line-height: 32px;
    vertical-align: middle;
    background: rgba(0,0,0,0.1);
    color: var(--back);
    margin: 10px 0 2px 0;
    border-radius: 20px;
    padding: 3px 3px 3px 20px;
}

#referrerID div:hover {
    zoom:1.1; }

#referrerID div img {
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    vertical-align: middle;
    margin-left: 10px;
}

tile img[sharingImage] {
    display: block;
    width: 100%;
    max-height: 160px;
    padding: 0;
    margin: 0;
    border: 0;
    object-fit: cover;
    box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 25%);
    cursor: initial;
}

div.postDetail[share] div a[sourceUrl] {
    display: inline-block;
    font-size: 16px;
    font-weight: normal;
    line-height: 35px;
    text-align: center;
    color: #13a89e;
    background: rgba(0,0,0,0.05) url(images/icon/n/link.png) no-repeat 8px center;
    background-size: 14px auto;
    padding: 0 10px 0 30px;
    text-decoration: none;
    border-radius: initial;
    border-top: 1px dotted #13a89e;
}

div.postDetail h1[lang="en"] {
    font-family: Arial,Helvetica,sans-serif;
    text-align: left;
    padding: 15px 65px 15px 30px;
}

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

tileList tileListHeader {
    display: block;
    font-size: 20px;
    font-weight: bold;
    line-height: 60px;
    color: var(--boom);
    padding: 0 20px;
}

@media only screen and (max-width: 480px) {
    tileList tileListHeader {
        display: block;
        font-size: 18px;
        font-weight: bold;
        line-height: 50px;
    }
}

iframe.videoFrame {
    display: block;
    width: 100%;
    height: 55vh;
}

#tokenTimer {
    background: #e0ffcb;
    text-align: center;
    color: #28A80D;
    font-size: 16px;
}

.adView {
    display: block;
    margin: 0 auto;
    order: 10;
}

@media only screen and (max-width: 480px) {
    .adView {
        width: calc(100% - 0px);
        padding: 0;
    }
}

#supportChat {
    display: block;
    position: fixed;
    z-index: 1000;
    width: 36px;
    height: 36px;
    bottom: 90px;
    left: 10px;
    cursor: pointer;
    background: var(--boom) url(https://www.picme.ir/content/app/minilogow.png) no-repeat center center;
    background-size: 32px;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0,0,0,0.25);
    animation: animSpin 5s ease-in-out forwards infinite, animFade 1.8s ease forwards infinite;
    outline-width: 1px;
    outline-offset: 0;
    outline-color: rgba(213,45,37,0.75);
    outline-style: solid;
}

#supportChat svg {
    display: block;
    width: 36px;
    margin: 5px 7px;
    height: 36px;
    filter: invert(1);
}

#supportChat:hover {
    filter: grayscale(0);
}

@keyframes animSpin {
    0% {
        -webkit-transform: perspective(120px) rotateY(180deg) rotateX(0deg);
        transform: perspective(120px) rotateY(181deg) rotateX(0deg);
        outline-width: 1px;
        outline-offset: 0;
        outline-color: rgba(213,45,37, 0);        
    }


    75% {
        -webkit-transform: perspective(120px) rotateY(0deg) rotateX(0deg);
        transform: perspective(120px) rotateY(0deg) rotateX(0deg);
        outline-width: 7px;
        outline-offset: 4px;
        outline-color: rgb(255 224 0 / 90%);        
    }

    100% {
        -webkit-transform: perspective(120px) rotateY(180deg);
        transform: perspective(120px) rotateY(181deg);
        outline-width: 1px;
        outline-offset: 0;
        outline-color: rgba(213,45,37, 0);        
    }
}





iframe.headerPano {
    display: block;
    width: 100%;
    height: 75vh;
}



#loginbar a.buttonCart {
    display: inline-block;
    position: relative;
    width: 30px;
    height: 30px;
    margin: 0 10px;
    line-height: 30px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0;
    color: transparent;
    border-left: 0;
    font-weight: bold;
    vertical-align: top;
    background: url(icons/cart.png) no-repeat center center;
    background-size: 22px auto;
    opacity: .9;
}

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

#loginbar a.buttonCart[data-badge]:after {
    content: attr(data-badge);
    position:  absolute;
    z-index: 10;
    top: -8px;
    left: 5px;
    font-size: 16px;
    color: #000000;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
}

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

@media screen and (max-width: 1280px) {
#loginbar a.buttonCart[data-badge]:after {
    font-size: 14px;
}
}




#myShoppingCart{
    display: block;
    /* max-width: 1360px; */
    vertical-align: top;
    overflow: hidden;
    padding: 10px 20px;
    margin: 0 auto;
    background: rgba(0, 0, 0, 0.08);
    border-top: 5px solid rgba(0, 0, 0, 0.1);
0 0 10px rgba(0,0,0,
    CONTAIN-INTRINSIC-BLOCK-SIZE: AUTO 100PX);
}

#myShoppingCart hr{
    display:none;
}

#myShoppingCart span{
        display: block;
        font-size: 20px;
        line-height: 30px;
        color: var(--boom);
        margin: 0;
        text-align: center;
        padding: 10px 0;
        font-weight: bold;
        border-bottom: 3px solid var(--boom);
    }

#myShoppingCart sum{
    clear:both;
    display: block;
    font-size: 14px;
    line-height: 30px;
    color: var(--back);
    margin: 10px 0 0 0;
    padding: 0 10px;
    border-top: 2px solid rgba(0,0,0,0.25);
    }

#myShoppingCart sum b{
    clear:both;
    display: block;
    font-size: 20px;
    line-height: 30px;
    color: var(--back);
    margin: 10px 0 0 0;
    padding: 10px 0;
    }


div.ShoppingCartItem {
    display: block;
    position:relative;
    min-height: 32px;
    border: 0;
    vertical-align: top;
    white-space: pre-wrap;
    color: #000000;
    padding: 10px;
    margin: 0;
    border-top: 1px dotted rgba(0,0,0,0.1);
    border-radius:15px;    
    transition: all 0.5s;
}

div.ShoppingCartItem poption {
    display:inline-block;
    background: var(--boom);
    color:#FFFFFF;
    line-height: 22px;
    padding: 0 5px;
    vertical-align: middle;
    margin: 0 10px;
    font-size: 12px;
    border-radius: 11px;
}

div.ShoppingCartItem br {
    display:none;
}

    div.ShoppingCartItem:hover {
        background: rgba(50,50,0,0.1);
    }

    div.ShoppingCartItem img {
        height: 64px;
        margin: 0 0 0 10px;
        border: 0;
        border-radius:2px;
        display: inline-block;
        vertical-align: middle;
        mix-blend-mode: multiply;
    }

    div.ShoppingCartItem a[title] {
        display: inline-block;
        font-size: 18px;
        line-height: 32px;
        color: var(--back);
        text-decoration: none;
        vertical-align: middle;
        white-space: nowrap;
        overflow: hidden;
    }
    div.ShoppingCartItem a[title]:hover{
        color: #000000;
    }

div.ShoppingCartItem price
{
    display:inline-block;
    position: absolute;
    min-width: 108px;
    top: 10px;
    left: 20px;
    padding:0 10px;
    border: 1px solid rgba(0,0,0,0.25);
    text-align:center;
    font-weight: bold;
    font-size: 16px;
    line-height:24px;
    vertical-align: middle;
    background: rgba(250,250,250);
    border-radius: 20px;
}

div.ShoppingCartItem quantity
{
    display:inline-block;
    position: absolute;
    top: 45px;
    left: 20px;
    padding:0;
    text-align:center;
    font-weight: bold;
    font-size: 16px;
    vertical-align: middle;
    background: rgba(250,250,250);
    border:1px solid rgba(0,0,0,0.25);
    border-radius: 20px;
    line-height:24px;
}

div.ShoppingCartItem quantity count
{
    display: inline-block;
    cursor: pointer;
    min-width: 60px;
    height: 24px;
    vertical-align:middle;
}

div.ShoppingCartItem quantity add
{
    display: inline-block;
    cursor: pointer;
    width: 24px;
    height: 24px;
    margin-right:10px;
    background: var(--boom) url(icons/add_w.png) no-repeat center center;
    background-size: 14px auto;
    border-radius: 50%;
    vertical-align:middle;
}

div.ShoppingCartItem quantity les
{
    display: inline-block;
    cursor: pointer;
    width: 24px;
    height: 24px;
    margin-left:10px;
    background: var(--back) url(icons/min_w.png) no-repeat center center;
    background-size: 12px auto;
    border-radius: 50%;
    vertical-align:middle;
}
        div.ShoppingCartItem delete {
            display: block;
            position: absolute;
            bottom: 0;
            right: 0;
            cursor: pointer;
            z-index: 10;
            width: 32px;
            height: 32px;
            background: var(--back) url(icons/close_w.png) no-repeat center center;
            background-size: 14px auto;
            border-radius: 3px;
        }

            div.ShoppingCartItem delete:hover {
                background: var(--boom) url(icons/close_w.png) no-repeat center center;
                background-size: 14px auto;
            }



#bankAInfo{
    display: block;
    vertical-align: top;
    overflow: hidden;
    color: var(--love);
    font-size: 18px;
    line-height: 40px;
    padding: 20px;
    text-align: center;
}
#bankAInfo a
{
    display:inline-block;
    background: #3068e7;
    color:#FFFFFF;
    text-decoration: none;
    padding: 5px 20px;
    border-radius: 3px;
}


@media screen and (max-width: 640px) {

div.ShoppingCartItem
    {
        padding: 15px 0 40px 0;
    }

    div.ShoppingCartItem a[title] {
        font-size: 14px;
    }
    
div.ShoppingCartItem price
{
    bottom: 10px;
    top: initial;
    left: 0;
    font-size: 14px;
}

div.ShoppingCartItem quantity
{
    top: initial;
    left: initial;
    right: 0;
    font-size: 14px;
    bottom: 10px;
}


    

#myShoppingCart sum b{
    font-size: 16px;
    line-height: 25px;
    }

    
#bankAInfo
{
    font-size:15px;
    line-height: 25px;
    padding:10px
}
}

#zibalInfo{
    display: block;
    vertical-align: top;
    overflow: hidden;
    color: rgba(0,0,0,0.9);
    font-size: 17px;
    line-height:35px;
    padding: 130px 10px 10px 10px;
    margin: 0;
    text-align: center;
    background: rgba(0,0,0,0.05) url(/content/uploads/shaparak-picme-payment.png) no-repeat top center;
    background-size: auto 120px;
    margin-bottom: 10px;
    border-radius: 0 0 15px 15px;
}

#zibalInfo a{
    text-decoration:none;
    font-size:18px;
    font-weight:bold;
    color:var(--boom);
}
#zibalInfo a:hover{
    color:var(--back);
}

@media screen and (max-width: 640px) {

    #zibalInfo{
    font-size: 16px;
    line-height:30px;
    padding: 70px 10px 10px 10px;
    background: rgba(0,0,0,0.05) url(/content/uploads/shaparak-picme-payment.png) no-repeat top center;
    background-size: auto 60px;
}

    
#myShoppingCart{
    margin: 0;
    border-radius: 0;
    padding: 10px;
}

div.ShoppingCartItem[mediatype="Video"],
    div.ShoppingCartItem[mediatype="Image"] {
    width: calc(100% - 22px);
    padding:5px;
    margin:5px;
}    
    
#bankAInfo
{
    font-size:16px;
    line-height: 30px;    
}

#zibalInfo{
    font-size: 16px;
    line-height:30px;
}
    
}


#confirmInfo{    
    display: block;
    vertical-align: top;
    overflow: hidden;
    background: var(--boom);
    color: #FFFFFF;
    font-size:20px;
    line-height:50px;
    padding: 50px 20px;
    margin: 0 0 10px 0;
    text-align: center;
}
#confirmInfo b{
    display:inline-block;
    background:rgba(255,255,255,0.2);
    padding:10px 50px;
    margin-top:20px;
    border-radius:5px;
}

    
@media screen and (max-width: 640px) {
    bankAInfo{
        margin: 0;
    }
    #confirmInfo{
    margin: 0;
}
}


sale
{
    display: block;
    font-size: 12px;
    padding: 0 5px;
    margin: 5px;
    border-radius: 15px;
    background: rgb(240,240,240);
    color: red;
    font-weight: bold;
    vertical-align: middle;
}
@media screen and (max-width: 480px) {
sale
{
    font-size:11px;
}
}



div[blockInfo] {
    display: block;
    margin: 0;
    vertical-align: top;
    white-space: normal;
    -webkit-column-count: 2;
    -webkit-column-gap: 5px;
    -webkit-column-fill: balance;
    -moz-column-count: 2;
    -moz-column-gap: 5px;
    -moz-column-fill: balance;
    column-count: 2;
    column-gap: 5px;
    column-fill: balance;
    border-top:3px solid var(--boom);
    border-bottom:3px solid var(--boom);
}

@media screen and (max-width: 600px) {
    div[blockInfo] {
    -webkit-column-count: 1;
    -webkit-column-gap: 5px;
    -webkit-column-fill: balance;
    -moz-column-count: 1;
    -moz-column-gap: 5px;
    -moz-column-fill: balance;
    column-count: 1;
    column-gap: 5px;
    column-fill: balance;
}
}



div[group]
{
    padding:10px 0;
    font-size:16px;
    display: flex;
    flex-flow: column;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;   
}

@media only screen and (max-width: 640px) {
    div[group]
    {
        font-size:14px;
    }
}


#enamad
{
    display:inline-block;
    vertical-align: middle;    
}

#enamad img
{
    height:54px;
}


#shaparak
{
    display:inline-block;
    height:36px;
    vertical-align: middle;
}

#viraware
{
    display:inline-block;
    height:76px;
    vertical-align: middle;
}

#iranview
{
    display:inline-block;
    height:40px;
    vertical-align: middle;
}

MP
{
  display:inline-block;
  font-family: 'NotoSans',Arial,Helvetica,sans-serif;
  position: absolute;
  z-index: 10;
  right: 0;
  top: 0;
  line-height: 30px;
  background: var(--boom);
  color: #FFFFFF;
  padding: 0 7px;
  border-radius: 3px;
}

english
{
    display:block;
    direction:ltr;
    text-align:left;
    font-family:  'NotoSans',Arial,Helvetica,sans-serif;    
}


.luckKey
{
  display: inline-block;
  font-weight: bold;
  line-height: 60px;
  font-size: 18px;
  color: var(--boom);
  padding: 0 15px;
  outline-width: 1px;
  outline-offset: 0;
  background: #ffeac9;
  outline-color: rgba(213,45,37,0.75);
  outline-style: solid;
  animation: animateOutline 3s ease infinite;
  cursor: pointer;
  border-radius: 5px;
}

.luckKey:hover
{
  color: #FFFFFF;
  background: var(--boom);
}


@keyframes animateOutline {
  0% {
    outline-width: 1px;
    outline-offset: 0;
    outline-color: rgba(213,45,37, 0);
  }

  25% {
    outline-color: rgba(213,45,37, 0.75);
  }

  /* The animation finishes at 50% */
  50% {
    outline-width: 7px;
    outline-offset: 4px;
    outline-color: rgba(213,45,37, 0);
  }

  100% {
    outline-width: 7px;
    outline-offset: 4px;
    outline-color: rgba(213,45,37, 0);
  }
}


div[noPost]
{
    display:block;
    padding: 50px 30px;
    text-align: center;
    margin: 10px;
    font-size: 18px;
    color: var(--boom);
    font-weight: bold;
    border-radius: 3px;
}


/* Media Box Show */


#MediaBox{
    display: block;
    vertical-align: top;
    overflow: visible;
    padding: 60px 20px 20px 20px;
    margin: 0;
    order: 0;
    background: var(--back);
    border-top: 1px solid rgba(255,255,255,0.1);
}

#MediaBox[preview]{
}


div.MediaItem {
    display: block;
    position:relative;
    min-height: 64px;
    overflow: hidden;
    border: 0;
    vertical-align: middle;
    white-space: pre-wrap;
    color: var(--back);
    padding: 10px 80px 10px 10px;
    margin: 0;
    cursor:pointer;
}


div.MediaItem[mediatype="Video"],
div.MediaItem[mediatype="Document"],
div.MediaItem[mediatype="Image"] {
    display: inline-block;
    width: calc(25% - 42px);
    position:relative;
    min-height: 32px;
    vertical-align: text-top;
    white-space: pre-wrap;
    color: var(--back);
    padding: 10px;
    border: 1px solid rgba(0,0,0,0.25);
    margin: 10px;
    margin-bottom: auto;
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(0,0,0,0.25);
    transition: all 0.5s;
    background: #FFFFFF;
}

div.MediaItem[mediatype="Image"][free]:after {
    content: 'Free';
    position: absolute;
    z-index: 10;
    bottom: 0;
    right: 0;
    font-size: 26px;
    padding:0 5px;
    font-weight:bold;
    background: #FFFFFF;
    /* color: #FFFFFF; */
    text-align: center;
    line-height: 30px;
    border-radius: 2px;
}


div.MediaItem[mediatype="Video"]:hover,
div.MediaItem[mediatype="Document"]:hover,
div.MediaItem[mediatype="Image"]:hover {
    z-index:1000;
    scale: 105%;
}

    div.MediaItem img {
        position: absolute;
        height: 64px;
        margin: 0;
        border: 0;
        right: 10px;
        border-radius:2px;
    }

div.MediaItem[mediatype="Video"] img,
div.MediaItem[mediatype="Document"] img,
div.MediaItem[mediatype="Image"] img {
        position: initial;
        display: block;
        width: 100%;
        height:auto;
        margin: 0;
        border: 0;
        right: 10px;
        border-radius:2px;
    transition: all 0.5s;
    }

div.MediaItem[mediatype="Video"] img:hover,
div.MediaItem[mediatype="Document"] img:hover,
div.MediaItem[mediatype="Image"] img:hover{
    filter:saturate(1.25) brightness(1.25);
}



    div.MediaItem a[title] {
        display: inline-block;
        font-size: 16px;
        line-height: 64px;
        color: #000000;
        text-decoration: none;
        vertical-align: middle;
    }
    div.MediaItem a[title]:hover{
        color: #000000;
    }

div.MediaItem[mediatype="Video"] a[title],
div.MediaItem[mediatype="Document"] a[title],
div.MediaItem[mediatype="Image"] a[title] {
        display: block;
        padding: 0;
        text-align: center;
    }


div.MediaItem[mediatype="Video"] imglable,
div.MediaItem[mediatype="Document"] imglable,
div.MediaItem[mediatype="Image"] imglable {
    display: block;
    line-height: 30px;
    font-weight: initial;
    font-size: 15px;
}



div.MediaItem fileInfo
{
    display:inline-block;
    padding:0 10px;
    min-width: 12px;
    text-align:center;
    margin: 0;
    float: left;
    color: var(--boom);
    font-size: 16px;
    line-height: 64px;
    direction: ltr;
}


div.MediaItem[mediatype="Video"] fileInfo,
div.MediaItem[mediatype="Document"] fileInfo,
div.MediaItem[mediatype="Image"] fileInfo
{
    direction:ltr;
    float: none;
    line-height: 25px;
    font-size: 12px;
    color: rgba(0,0,0,0.75);
}


@media screen and (max-width: 1024px) {
div.MediaItem[mediatype="Video"],
div.MediaItem[mediatype="Document"],
div.MediaItem[mediatype="Image"] {
    width: calc(50% - 22px);
    padding:5px;
    margin:5px;
}    
}


@media screen and (max-width: 640px) {

#MediaBox{
    margin: 0;
    border-radius: 0;
    /* padding: 30px 15px 10px 15px; */
}

div.MediaItem[mediatype="Video"],
div.MediaItem[mediatype="Document"],
div.MediaItem[mediatype="Image"] {
    width: calc(100% - 2px);
    padding: 0;
    margin: 5px 0 0 0;
}    
}

a.LinkButton
{
    display: inline-block;
    background: var(--boom);
    color: white !important;
    padding: 5px 20px;
    margin: 5px 0;
    border-radius: 5px;
    height: 50px;
    line-height: 50px;
    text-decoration: none;
    transition: all 0.5s;
    font-size: 16px;
}

a.LinkButton:hover
{
	background: var(--back);
}


a.ContactButton
{
    display: inline-block;
    background: var(--boom) url(icons/contact_w.png) no-repeat right 10px center;
    background-size: 28px auto;
    color: white !important;
    padding: 5px 50px 5px 10px;
    border-radius: 5px;
    line-height: 50px;
    text-decoration: none;
    transition: all 0.5s;
    font-size: 16px;
    margin: 5px 0;
}

a.ContactButton:hover
{
    background: var(--back) url(icons/contact_w.png) no-repeat right 10px center;
    background-size: 28px auto;
}


.nav-btn { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,0.4); color:#fff; border:0; font-size:36px; padding:8px 12px; cursor:pointer; }
#prevBtn { right:12px; }
#nextBtn { left:12px; }


.ppoem
{
    display:block;
    white-space: nowrap;
    line-height: 45px;
}

.beyt
{
    display:block;
    white-space: pre-wrap;
}

.mesra
{
    display: inline-block;
    width: calc(50% - 70px);
    padding: 0 10px 0 60px;
    text-align: justify;
    text-align-last: justify;
    font-family: 'Farhang2FaNum';
    font-size: 30px;
    -moz-text-align-last: justify;
    white-space: nowrap;
}
.mesra:last-child
{
    padding: 0 60px 0 10px;
}
.mesra::after {
  content: "";
  width: 0;
  height: 0;
}

.mesra strong
{
	font-family: 'Farhang2FaNum';
}

@media screen and (max-width: 960px) {

.ppoem
{
    line-height: 30px;
}
        
.mesra
{
    font-size:18px;
}
}

@media screen and (max-width: 640px) {
   
.beyt
{
    margin-bottom:20px;
}
    
.mesra
{
    width: calc(100% - 50px);
    padding: 0 0 0 50px;
    font-size: 22px;
}
.mesra:last-child
{
    padding: 0 50px 0 0;
}
}
    

#selectPostOptions
{
    display:block;
    order:2;
    width: calc(100% - 20px);
    max-width:1200px;
    margin: 0 auto;
    padding: 10px;
    text-align: center;
}


@media screen and (max-width: 640px) {
#selectPostOptions
{
}
}


#postOptions
{
    display:block;
    padding: 10px;
}

#postOptions postopt
{
    display:inline-block;
    padding:0 10px;
    background: #FFFFFF;
    margin: 0 0 7px 7px;
    line-height:40px;
    color: var(--back);
    border: 1px solid rgba(0,0,0,0.5);
    cursor:pointer;
    border-radius: 3px;
    font-weight:bold;
    font-size:16px
}
#postOptions postopt[selected]
{
    outline: 3px solid var(--boom);
    border: 1px solid #000000;
    color: var(--boom);
}

#postOptions postopt[OutOfStock]
{
    opacity:0.5;
}

@media screen and (max-width: 640px) {
    #postOptions postopt
{
    padding:0 10px;
    line-height:40px;
    font-size:12px
}
}



/* =====================================================================
   4. REFINEMENT LAYER — modern look for desktop & mobile
   (loaded last on purpose: it refines the components above without
    removing any selector the HTML relies on)
   ===================================================================== */

/* ---------- 4.0 Base ---------- */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 72px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    background: var(--paper);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
}

::selection {
    background: var(--boom);
    color: #ffffff;
}

a {
    transition: color .2s var(--ease), background-color .2s var(--ease);
}

:focus-visible {
    outline: 2px solid var(--boom);
    outline-offset: 2px;
}

img {
    -webkit-user-drag: none;
}

/* sticky footer: pages shorter than the screen no longer need the 100vh hack */
#parent {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 60px);
    min-height: calc(100dvh - 60px);
}

#parent > * {
    flex-shrink: 0;
}

#pageBodyBG {
    flex: 1 0 auto;
}

@media screen and (max-width: 1200px) {
    #parent {
        min-height: calc(100vh - 50px);
        min-height: calc(100dvh - 50px);
    }
}

/* ---------- 4.1 Header ---------- */
#loginbarBG {
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: saturate(170%) blur(16px);
    backdrop-filter: saturate(170%) blur(16px);
    border-bottom: 1px solid var(--line);
}

#loginbarBG[ontop] {
    box-shadow: 0 8px 30px rgba(0, 0, 0, .07);
}

#loginbar a.buttonUser {
    font-weight: 500;
}

#loginbar a.buttonUser img {
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px var(--line-strong);
    transition: box-shadow .2s var(--ease);
}

#loginbar a.buttonUser:hover img {
    box-shadow: 0 0 0 2px var(--boom);
}

#loginbar a.buttonDashboard {
    border-radius: 999px;
}

#loginbar a.sendPost,
#loginbar a.buttonLogin,
#loginbar a.buttonAdmin {
    transition: opacity .2s, background-size .2s;
}

/* desktop navigation */
@media screen and (min-width: 1201px) {
    #navbar a {
        font-size: 15.5px;
        font-weight: 500;
        color: var(--ink-2);
        position: relative;
        transition: color .2s var(--ease);
    }

    #navbar a:not([home])::after {
        content: "";
        position: absolute;
        left: 15px;
        right: 15px;
        bottom: 8px;
        height: 2px;
        border-radius: 2px;
        background: var(--boom);
        transform: scaleX(0);
        transition: transform .3s var(--ease);
    }

    #navbar a:not([home]):hover::after,
    #navbar a[selected]:not([home])::after {
        transform: scaleX(1);
    }

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

    #navbar a[selected] {
        font-weight: 700;
        font-size: 15.5px;
    }
}

/* mobile drawer */
@media screen and (max-width: 1200px) {
    #navbarBG {
        width: min(86vw, 340px);
        min-width: 0;
        border-radius: 22px 0 0 22px;
        box-shadow: -10px 0 40px rgba(0, 0, 0, .28);
    }

    #navbar a {
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        font-weight: 500;
        padding-right: 54px;
        border-bottom: 1px solid var(--line);
        transition: background-color .2s, color .2s;
    }

    #navbar a:hover {
        background-color: var(--boom-soft);
    }

    #navbar a[selected] {
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        color: var(--boom);
        font-weight: 700;
        background-color: var(--boom-soft);
    }

    #navbar a[home][selected] {
        color: #ffffff;
    }

    #screenbg {
        background: rgba(0, 0, 0, .35);
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
    }
}

/* search */
#searchbar {
    background: var(--canvas);
    border-bottom: 1px solid var(--line);
}

#searchInput {
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    box-shadow: var(--shadow-1);
    transition: border-color .2s, box-shadow .2s;
}

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

/* red category strip */
#submenubarBG {
    background: linear-gradient(180deg, var(--boom) 0%, var(--boom-dark) 100%);
}

#submenubar {
    scrollbar-width: none;
    padding: 0 8px;
    box-sizing: border-box;
}

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

#submenubar a {
    margin: 6px 3px;
    height: 38px;
    line-height: 38px;
    font-size: 15px;
    font-weight: 500;
    border-right: 0;
    border-radius: 999px;
    transition: background-color .2s, color .2s;
}

#submenubar a:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, .16);
}

#submenubar a[selected] {
    background: #ffffff;
    color: var(--boom);
    border-radius: 999px;
    font-weight: 700;
}

#submenubar a[selected]:hover {
    text-decoration: none;
}

/* ---------- 4.2 Hero slideshow ---------- */
#headerBG {
    background: #141416;
}

slideshow figure::after {
    content: "";
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0;
    height: 55%;
    background: linear-gradient(to top, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0));
    pointer-events: none;
}

slideshow figcaption,
slideshow figdesc {
    z-index: 3;
    left: 0;
    right: 0;
    margin: 0 auto;
    max-width: 1100px;
    box-sizing: border-box;
}

slideshow figcaption {
    font-size: clamp(18px, 2.4vw, 30px);
    font-weight: 700;
    bottom: 56px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
}

slideshow figdesc {
    font-size: clamp(14px, 1.9vw, 23px);
    line-height: 1.8;
    color: rgba(255, 255, 255, .88);
    bottom: 100px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
}

.arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    font-size: 26px;
    line-height: 1;
    border-radius: 50%;
    mix-blend-mode: normal;
    background: rgba(0, 0, 0, .28);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background-color .2s, transform .2s var(--ease);
}

.arrow:hover {
    background: rgba(213, 45, 37, .85);
}

.dots {
    z-index: 6;
}

.dot {
    width: 9px;
    height: 9px;
    background-color: rgba(255, 255, 255, .55);
    transition: width .3s var(--ease), background-color .3s;
}

.dot.active {
    width: 26px;
    border-radius: 999px;
    background-color: #ffffff;
}

.btn {
    border-radius: 999px;
    background: rgba(0, 0, 0, .3);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

@media screen and (max-width: 640px) {
    slideshow,
    slideshow figure {
        height: 62vh;
    }

    slideshow figcaption {
        bottom: 46px;
    }

    slideshow figdesc {
        bottom: 84px;
    }

    .arrow {
        width: 40px;
        height: 40px;
        font-size: 22px;
    }

    slideshow img {
        object-fit: contain;
        height: calc(100% - 50px);
        padding: 10px 0 40px;
    }
}

/* ---------- 4.3 Home sections (horizontal rails) ---------- */
#postsList {
    background: var(--canvas) var(--grain);
}

bondWrap {
    padding: 44px 0 18px;
    background: var(--paper);
}

bondWrap:nth-of-type(even) {
    background: var(--canvas) var(--grain);
}

bondWrap h1 {
    margin: 0 auto;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 800;
    line-height: 1.5;
}

/* small ornament under section titles: line — diamond — line */
bondWrap h1::after {
    content: "";
    display: block;
    width: 120px;
    height: 9px;
    margin: 10px auto 0;
    background:
        linear-gradient(var(--boom), var(--boom)) left center / 46px 1px no-repeat,
        linear-gradient(var(--boom), var(--boom)) right center / 46px 1px no-repeat,
        linear-gradient(45deg, transparent 38%, var(--boom) 38% 62%, transparent 62%) center / 9px 9px no-repeat;
}

bondWrap h1 a {
    transition: color .2s;
}

bondWrap h2 {
    margin: 8px 16px 20px;
    font-size: clamp(14px, 1.6vw, 17px);
    font-weight: 400;
    color: var(--ink-3);
}

/* rail: flex row, equal-height cards, scroll-snap, never touching each other */
bond {
    display: flex;
    align-items: stretch;
    gap: 16px;
    padding: 12px 20px 30px;
    white-space: normal;
    scrollbar-width: thin;
    scrollbar-color: rgba(213, 45, 37, .6) transparent;
    scroll-snap-type: x proximity;
    scroll-padding: 0 20px;
    -webkit-overflow-scrolling: touch;
}

/* keeps the side padding visible at the end of the scroll area */
bond::after {
    content: "";
    flex: 0 0 4px;
}

bond::-webkit-scrollbar {
    height: 6px;
    background: transparent;
}

bond::-webkit-scrollbar-thumb {
    background-color: rgba(213, 45, 37, .55);
    border-radius: 6px;
}

bond::-webkit-scrollbar-thumb:hover {
    background-color: var(--boom);
}

/* all post types (Product / Post / News …) get the same spacing */
bond div.postItem,
bond div.postItem[posttype],
bond div.postItem[posttype="Product"],
bond div.postItem[posttype="Post"] {
    display: flex;
    flex: 0 0 clamp(210px, 18%, 290px);
    width: auto;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding-bottom: 14px;
    vertical-align: top;
    scroll-snap-align: start;
}

@media screen and (max-width: 800px) {
    bond {
        gap: 12px;
        padding: 10px 14px 26px;
        scroll-padding: 0 14px;
    }

    bond div.postItem,
    bond div.postItem[posttype],
    bond div.postItem[posttype="Product"],
    bond div.postItem[posttype="Post"] {
        flex-basis: min(60vw, 240px);
    }
}

/* ---------- 4.4 Cards: artwork sits on a surface, never cropped ---------- */
#postsListColumn {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr));
    gap: var(--card-gap);
    align-items: stretch;
    box-sizing: border-box;
    max-width: 1760px;
    margin: 0 auto;
    padding: var(--card-gap);
}

#postsListColumn > div.postItem,
#postsListColumn > div.postItem[verified] {
    width: auto;
}

div.postItem {
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0 0 14px 0;
    overflow: hidden;
    background: var(--paper);
    border-radius: var(--radius);
    box-shadow: 0 0 0 1px var(--line), var(--shadow-1);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

div.postItem:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 0 1px var(--line), var(--shadow-2);
}

div.postItem[posttype="Post"] {
    margin: 0;
}

div.postItem[verified] {
    border: 0;
    border-image: none;
    animation: none;
    padding: 0 0 14px 0;
    box-shadow: 0 0 0 2px var(--boom), var(--shadow-1);
}

div.postItem[homegroup="2"] {
    padding: 5px 5px 14px 5px;
}

/* the image block is exactly as big as the image (full card width, true
   ratio), so media badges centre on the picture. The block is pushed to the
   bottom of the free space above the text; a "wall" fills the space above it
   and a ledge shadow sits under it — works like a shelf for every ratio. */
div.postItem span[image] {
    position: relative;
    display: block;
    flex: 0 0 auto;
    margin: auto 0 12px;
    padding: 0;
    overflow: visible;
    background: none;
    border: 0;
    line-height: 0;
}

div.postItem span[image]::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 700px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .0), rgba(255, 255, 255, .0)), var(--mat);
}

div.postItem span[image]::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: 100%;
    height: 14px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .12), rgba(0, 0, 0, 0));
    pointer-events: none;
}

div.postItem span[image] img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: none;
    object-fit: contain;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transition: transform .7s var(--ease), filter .4s;
}

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

div.postItem span[image] discount {
    left: 10px;
    bottom: 10px;
    width: auto;
    height: 28px;
    padding: 0 10px;
    line-height: 28px;
    font-size: 16px;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
}

div.postItem span[image] discount::after {
    font-size: 13px;
}

div.postItem a[title] {
    display: block;
    height: auto;
    padding: 2px 16px 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.7;
    color: var(--ink);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

div.postItem a[title]:hover {
    color: var(--boom);
}

div.postItem[verified] a[title] {
    color: var(--ink);
}

div.postItem span[shortdes] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    height: 48px;
    margin: 0 0 10px;
    padding: 2px 16px 0;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 24px;
    color: var(--ink-2);
    overflow: hidden;
}

div.postItem[lang="en"] a[title],
div.postItem[lang="en"] span[shortdes] {
    direction: ltr;
    font-family: 'NotoSans', 'Vazir', Arial, sans-serif;
}

div.postItem span[userIcon] {
    right: 10px;
    top: 10px;
}

div.postItem span[userIcon] a img {
    width: 36px;
    height: 36px;
    min-height: 36px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .85);
    box-shadow: none;
}

/* media badges (video / audio / panorama / live) — centred on the image */
span[image] span[videoicon],
span[image] span[waveicon],
span[image] span[panoramaicon],
span[image] span[liveicon] {
    z-index: 3;
    background-position: center center;
    background-size: clamp(34px, 20%, 64px) auto;
    opacity: .9;
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .55));
    transition: opacity .3s, transform .35s var(--ease);
}

div.postItem:hover span[image] span[videoicon],
div.postItem:hover span[image] span[waveicon],
div.postItem:hover span[image] span[panoramaicon],
div.postItem:hover span[image] span[liveicon],
span[image] span[videoicon]:hover,
span[image] span[waveicon]:hover,
span[image] span[panoramaicon]:hover,
span[image] span[liveicon]:hover {
    opacity: 1;
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .55));
    background-size: clamp(34px, 20%, 64px) auto;
    transform: scale(1.08);
}

@media screen and (max-width: 640px) {
    :root {
        --card-min: 150px;
        --card-gap: 12px;
    }

    div.postItem {
        border-radius: 12px;
        padding-bottom: 12px;
    }

    div.postItem:hover {
        transform: none;
    }

    div.postItem span[image] {
        margin-bottom: 10px;
    }

    div.postItem a[title] {
        padding: 0 10px;
        font-size: 14.5px;
    }

    div.postItem span[shortdes] {
        height: 44px;
        padding: 2px 10px 0;
        font-size: 12.5px;
        line-height: 22px;
    }
}

@media screen and (max-width: 359px) {
    :root {
        --card-min: 125px;
    }
}

/* images are never cropped anywhere else either */
slideshow img,
#latestLocation a img,
div.relatedPostItem img,
div.postDetail span[image] img {
    object-fit: contain;
}

/* ---------- 4.5 Pagination ---------- */
#pagingCtrl {
    padding: 26px 10px 34px;
    line-height: 40px;
    background: var(--canvas);
}

#pagingCtrl a[pagingPage],
#pagingCtrl a[pagingActive] {
    min-width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    border-radius: 12px;
    box-shadow: var(--shadow-1);
    transition: background-color .2s, color .2s, transform .2s var(--ease);
}

#pagingCtrl a[pagingPage] {
    color: var(--ink);
    background: #ffffff;
}

#pagingCtrl a[pagingPage]:hover {
    background: var(--boom);
    color: #ffffff;
    transform: translateY(-2px);
}

#pagingCtrl a[pagingActive] {
    padding: 0 16px;
    background: var(--boom);
}

#pagingCtrl a[pagingFirst],
#pagingCtrl a[pagingPrevious],
#pagingCtrl a[pagingNext],
#pagingCtrl a[pagingLast] {
    width: 40px;
    height: 40px;
    margin: 0 4px;
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: var(--shadow-1);
    transition: background-color .2s, transform .2s var(--ease);
}

#pagingCtrl a[pagingFirst]:hover,
#pagingCtrl a[pagingPrevious]:hover,
#pagingCtrl a[pagingNext]:hover,
#pagingCtrl a[pagingLast]:hover {
    background-color: var(--boom-soft);
    transform: translateY(-2px);
}

/* ---------- 4.6 Post detail page ---------- */
div.postDetail {
    margin: 0 0 28px;
}

div.postDetail h1 {
    padding: 28px 30px 8px;
    font-size: clamp(22px, 3.2vw, 34px);
    font-weight: 700;
    line-height: 1.6;
}

div.postDetail h2 {
    padding: 0 30px 22px;
    font-size: clamp(17px, 2.2vw, 24px);
    line-height: 1.9;
    color: rgba(255, 255, 255, .78);
}

div.postDetail div[navigation] {
    font-size: 13px;
    background: #1d1d1f;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

div.postDetail div[navigation] a:hover {
    color: var(--boom-light);
}

div.postDetail span[image] img {
    transition: transform .6s var(--ease);
}

div.postDetail div span[detail] {
    font-size: clamp(17px, 1.7vw, 21px);
    line-height: 2;
    color: var(--ink);
}

div.postDetail div[container] {
    background: linear-gradient(0deg, #ffffff 55%, rgba(0, 0, 0, .06) 100%);
}

/* purchase / download button on the detail page stays fully visible */
div.postDetail div span[price] {
    border-radius: 999px;
    font-weight: 700;
    box-shadow: 0 10px 26px rgba(213, 45, 37, .35);
    transition: background-color .25s, transform .2s var(--ease), box-shadow .25s;
}

div.postDetail div span[price]:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .3);
}

div.postDetail div span[price]:active {
    transform: translateY(0);
}

div.postDetail div span[price][incart]::after {
    content: "\2713";
}

/* category / keyword chips */
div.postDetail div span[keywords] span[info] a,
div.postDetail div span[categories] span[info] a {
    padding: 2px 14px;
    margin: 4px;
    color: var(--ink-2);
    background: var(--canvas);
    border: 1px solid var(--line);
    border-radius: 999px;
    transition: background-color .2s, color .2s, border-color .2s;
}

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);
}

div.postDetail div a[sourceUrl] {
    border-radius: 999px;
}

div.postDetail div span[more] span.viewed {
    border-radius: 999px;
    background: var(--canvas);
}

div.postDetail div span[userinfo] img {
    border-radius: 50%;
}

/* map + nearby */
div.postDetail span[map] {
    padding: 0;
    margin: 16px 14px 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
}

div[nearby] {
    background: var(--canvas);
    scrollbar-color: rgba(213, 45, 37, .6) transparent;
}

div[nearby]::-webkit-scrollbar-thumb {
    background-color: rgba(213, 45, 37, .55);
    border-radius: 6px;
}

div[nearby]::-webkit-scrollbar-thumb:hover {
    background-color: var(--boom);
}

/* gallery stage: spot-lit dark wall, artwork floats above it */
div.postDetail div[mediaview],
div.postDetail h1,
div.postDetail h2 {
    background-color: #1d1d1f;
}

div.postDetail div[mediaview] {
    background-image: radial-gradient(ellipse 70% 80% at 50% 35%, #46464b 0%, #1d1d1f 75%);
}

div.postDetail span[image] img {
    filter: drop-shadow(0 22px 36px rgba(0, 0, 0, .6));
}

/* media gallery inside a product */
#MediaBox {
    background: #1d1d1f;
    padding-top: 56px;
}

div.MediaItem[mediatype="Video"],
div.MediaItem[mediatype="Document"],
div.MediaItem[mediatype="Image"] {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

div.MediaItem[mediatype="Video"]:hover,
div.MediaItem[mediatype="Document"]:hover,
div.MediaItem[mediatype="Image"]:hover {
    scale: 1;
    transform: translateY(-5px);
    box-shadow: var(--shadow-2);
}

div.MediaItem[mediatype="Video"] img,
div.MediaItem[mediatype="Document"] img,
div.MediaItem[mediatype="Image"] img {
    border-radius: 10px;
}

/* poem lines */
.ppoem {
    color: var(--ink);
}

/* "فال و تماشا" call-to-action */
.luckKey {
    border-radius: 999px;
    line-height: 56px;
    padding: 0 26px;
    transition: background-color .25s, color .25s, transform .2s var(--ease);
}

.luckKey:hover {
    transform: translateY(-2px);
}

/* ---------- 4.7 Buttons ---------- */
.defaultButton {
    height: 48px;
    line-height: 46px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 12px;
    border-color: var(--boom);
    background: var(--boom);
    transition: background-color .2s, border-color .2s, transform .2s var(--ease), box-shadow .2s;
}

.defaultButton:hover {
    border-color: var(--back);
    background: var(--back);
    transform: translateY(-1px);
}

.okKey,
.cancelKey {
    height: 38px;
    line-height: 38px;
    border-radius: 10px;
    font-weight: 700;
    transition: background-color .2s, color .2s;
}

a.LinkButton,
a.ContactButton {
    height: 48px;
    line-height: 48px;
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 12px;
    font-weight: 600;
    box-shadow: 0 6px 16px rgba(213, 45, 37, .25);
}

a.ContactButton {
    padding-right: 50px;
}

a.LinkButton:hover,
a.ContactButton:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
}

input[type="submit"] {
    border-radius: 12px;
    font-family: inherit;
}

/* ---------- 4.8 Forms (contact, login, comments) ---------- */
.cssControl {
    height: 44px;
    line-height: 44px;
    font-size: 15px;
    background-color: #faf9f7;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
}

.cssControl:focus {
    border-color: var(--boom);
    background-color: #ffffff;
    box-shadow: 0 0 0 4px var(--boom-soft);
}

.cssControl[disabled] {
    background-color: #efeeec;
    color: var(--ink-3);
}

.cssControl[recheck] {
    background-color: #fff4f3;
    border: 1px solid var(--boom);
}

div.commentPanel textarea,
div.commentPanel select {
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    font-size: 15px;
    line-height: 1.9;
    color: var(--ink);
    background: #faf9f7;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
}

div.commentPanel textarea {
    min-height: 130px;
    padding: 12px 14px;
    resize: vertical;
}

div.commentPanel textarea:focus,
div.commentPanel select:focus {
    outline: 0;
    border-color: var(--boom);
    background: #ffffff;
    box-shadow: 0 0 0 4px var(--boom-soft);
}

div.contactUsForm input {
    border: 1px solid var(--line-strong);
}

div.commentPanel input[type="submit"] {
    height: 48px;
    line-height: 48px;
    padding: 0 38px;
    font-size: 16px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(213, 45, 37, .3);
    transition: background-color .2s, transform .2s var(--ease), box-shadow .2s;
}

div.commentPanel input[type="submit"]:hover {
    transform: translateY(-2px);
}

div.commentPanel hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 18px 0;
}

div.formPanel {
    border-radius: var(--radius);
    border-color: var(--line);
    box-shadow: var(--shadow-1);
}

div.formPanel div[actionbar] input[type="submit"] {
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(213, 45, 37, .3);
}

/* login / account */
#logingPanels section {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shadow-2);
}

.section-title {
    font-size: 20px;
    font-weight: 700;
}

.input-group[active] {
    background-color: var(--canvas);
    border-right-color: var(--boom);
}

.form-lable {
    height: 26px;
    padding: 8px 0;
    border-radius: 0 12px 12px 0;
    background-color: #faf9f7;
}

.form-control {
    height: 26px;
    padding: 8px 12px;
    font-size: 15px;
    border-radius: 12px 0 0 12px;
    background-color: #faf9f7;
}

.form-control[type="tel"] {
    height: 26px;
    padding: 8px 12px 8px 32px;
}

.input-group:focus-within .form-lable,
.input-group:focus-within .form-control {
    border-color: var(--boom);
    background-color: #ffffff;
}

.form-control:focus {
    box-shadow: none;
}

.form-description {
    color: var(--ink-3);
}

/* ---------- 4.9 Popups & modal ---------- */
#vBoxMessage {
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow-3);
}

#PopupWindowBG {
    background: rgba(0, 0, 0, .35);
}

.modal {
    background-color: rgba(10, 10, 12, .94);
}

.modal-close,
#modalImgDLKey {
    border-radius: 12px;
    background-color: rgba(0, 0, 0, .55);
    border-color: rgba(255, 255, 255, .22);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

#modalcaption {
    padding: 28px 20px 12px;
    background: linear-gradient(to top, rgba(0, 0, 0, .65), rgba(0, 0, 0, 0));
}

@keyframes zoom {
    from { transform: scale(.94); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

/* ---------- 4.10 User profile ---------- */
div.userProfileHeaderBox img[photo] {
    border-radius: 50%;
    border: 3px solid #ffffff;
    box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-1);
}

div.userProfileHeaderBox a[fullname] {
    font-size: 24px;
    font-weight: 700;
}

div.userProfileHeaderBox span[info] {
    font-size: 15px;
    line-height: 2;
    color: var(--ink-2);
}

div.userProfileHeaderBox span[exlinks] a[website] {
    border-radius: 999px;
    transition: background-color .2s, color .2s;
}

div.userProfileHeaderBox span[editprofile] {
    border-radius: 0 0 14px 0;
}

div.userProfileHeaderBox a.autoLink,
a.autoLink {
    font-weight: 600;
}

/* ---------- 4.11 Footer ---------- */
#quickSitemapBG {
    background: linear-gradient(180deg, #232326 0%, #1a1a1c 100%);
}

#quickSitemap {
    max-width: 1200px;
    box-sizing: border-box;
    padding: 52px 24px 26px;
    font-size: 16px;
    line-height: 1.9;
    text-align: right;
}

#quickSitemap > div {
    padding: 0;
    margin: 0;
}

#quickSitemap > div > ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 30px 36px;
    padding: 0;
    margin: 0;
}

#quickSitemap div ul li {
    display: block;
    width: auto;
}

#quickSitemap div ul a {
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
}

#quickSitemap div ul li ul {
    padding: 8px 0 0;
}

#quickSitemap div ul li ul li {
    width: 100%;
}

#quickSitemap div ul li ul li a {
    display: inline-block;
    font-size: 14.5px;
    font-weight: 400;
    color: rgba(255, 255, 255, .62);
    transition: color .2s, transform .2s var(--ease);
}

#quickSitemap div ul li ul li a:hover {
    color: #ffffff;
    transform: translateX(-4px);
}

#footerBG {
    background: #141416;
}

#footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 28px;
    max-width: 1200px;
    min-height: 0;
    box-sizing: border-box;
    padding: 22px 24px calc(22px + env(safe-area-inset-bottom, 0px));
    font-size: 13.5px;
    line-height: 2;
    text-align: right;
    color: rgba(255, 255, 255, .6);
    border-top: 1px solid rgba(255, 255, 255, .08);
}

#footer a {
    color: var(--boom-light);
    transition: color .2s;
}

#footer a:hover {
    color: #ffffff;
}

#footer col1,
#footer col2 {
    display: block;
    overflow: visible;
    padding: 0;
}

#footer col2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

#footer col2 img {
    display: block;
    max-height: 60px;
    width: auto;
    border-radius: 10px;
}

@media screen and (max-width: 640px) {
    #quickSitemap {
        padding: 38px 20px 18px;
    }

    #quickSitemap > div > ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 26px 20px;
    }

    #footer {
        justify-content: center;
        text-align: center;
    }

    #footer col2 {
        justify-content: center;
    }
}

@media screen and (max-width: 360px) {
    #quickSitemap > div > ul {
        grid-template-columns: 1fr;
    }
}

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