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

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


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


:root {
    --boom: #009739;
    --back: #3e5251;
}

* {
    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="url"],
input[type="tel"] {
    text-align: left;
    direction: ltr;
}


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

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

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

.firstColor {
    color: #747474;
}

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

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


#loginbarBG {
    display: block;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: 0;
    background: #FFFFFF;
    backdrop-filter: blur(2px);
}

    #loginbarBG[ontop] {
        filter:grayscale(1);
        box-shadow: 0px 5px 10px rgba(0,0,0,0.25);
    }

@media screen and (max-width: 1280px) {
    #loginbarBG {
        -webkit-transition: all .1s ease-in-out;
        box-shadow: 0 0 50px rgba(0,0,0,0.25);
    }
}


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

    #loginbarContainer[ontop] {
    }

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

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

    #loginbar[ontop] {
    }


        #loginbar[ontop] a.sendPost {
        }

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


@media screen and (max-width: 1280px) {

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


    #loginbar span.mobileMenuKey {
        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/menu.png) no-repeat center center;
        background-size: 18px auto;
        font-weight: bold;
        vertical-align: top;
        overflow: hidden;
        float: right;
    }

        #loginbar span.mobileMenuKey:hover {
            background-size: 20px auto;
        }

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


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

    #loginbar a.sendPost {
        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/add_w.png) no-repeat center center;
        background-size: 20px auto;
        vertical-align: top;
        opacity: .75;
    }

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


@media screen and (min-width: 1281px) {
    #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: 18px auto;
    }

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


@media screen and (max-width: 1280px) {
    #loginbar a.buttonLogin {
        display: inline-block;
        float: left;
        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: 18px auto;
    }

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



#loginbar a.buttonAdmin {
    display: inline-block;
    width: 30px;
    height: 30px;
    float: right;
    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: .75;
}

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

@media screen and (max-width: 1280px) {
    #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: 1280px) {
    #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: 1281px) {
    #loginbar a.buttonUser {
        display: inline-block;
        float: left;
        position: relative;
        font-size: 14px;
        color: rgba(171,171,171);
        height: 30px;
        padding: 0 0 0 40px;
        margin: 0;
        line-height: 30px;
        text-align: left;
        text-decoration: none;
        vertical-align: top;
    }

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

        #loginbar a.buttonUser:hover {
        }
}


@media screen and (max-width: 640px) {
    #loginbar a.buttonUser {
        display: inline-block;
        float: left;
        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;
    }

        #loginbar a.buttonUser:hover {
        }
}



#loginbar a.buttonUser img {
    display: block;
    position: absolute;
    top: -3px;
    left: 0;
    margin: 0;
    border: 3px solid rgba(0,0,0,0.1);
    width: 30px;
    height: 30px;
    border-radius: 50%;
}


#loginbar a.buttonUser[data-badge]:after {
    content: attr(data-badge);
    position: absolute;
    z-index: 10;
    top: -3px;
    right: 0;
    font-size: 10px;
    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: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    right: 0;
    top: 0;
    text-align: right;
    background: rgba(0,0,0,0.75);
    backdrop-filter: grayscale(1) blur(1px);
    color: var(--boom);
    font-size: 16px;
    height: 100vh;
    line-height: 50px;
    padding: 10px 10px;
    border-top: 5px solid rgba(255,255,255,0.3);
    letter-spacing: normal;
    white-space: nowrap;
}

    #searchbar[ontop] {
    }

    #searchbar:hover,
    #searchbar:focus {
    }


@media screen and (max-width: 1280px) {
    #searchbar {
    }

        #searchbar[ontop] {
        }

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


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

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

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

#searchBtn {
    display: block;
    position:fixed;
    top:10px;
    right: 10px;
    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: 330px) {
    #searchbar {
        /*display: none;*/
    }
}


#headerBG {
    display: none;
    padding: 0;
    text-align: center;
    background: var(--back);
}


@media screen and (min-width: 1281px) {
    #header {
        display: block;
        height: calc(75vh - 140px);
        margin: 0 auto;
        text-align: center;
        padding: 0;
    }
}

@media screen and (max-width: 1280px) {
    #header {
        display: block;
        height: calc(100vh - 60px);
        margin: 0 auto;
        text-align: center;
        padding: 0;
    }
}


@media screen and (max-width: 1280px) {
    #navbarBG {
        display: block;
        position: fixed;
        top: 0;
        left: 100vw;
        right: 0;
        bottom: 0;
        z-index: 120;
        padding: 50px 0 0 0;
        background: rgba(255,255,255,0.97);
        backdrop-filter: blur(1px);
        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;
        margin: 0;
        padding: 0 30px;
        white-space: nowrap;
        border-top: 1px solid rgba(0,0,0,0.3);
    }

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

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

            #navbar a[selected] {
                display: block;
                height: 50px;
                line-height: 50px;
                padding: 0 10px 0 50px;
                font-size: 18px;
                text-decoration: none;
                color: var(--boom);
                background-color: rgba(0,0,0,0.03);
                border-radius: 10px;
                margin: 5px 20px;
                font-weight: bold;
            }

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

            #navbar a[home] {
                background-image: url(../../content/app/favicon.png);
                background-repeat: no-repeat;
                background-position: left 10px center;
                background-size: auto 28px;
            }

                #navbar a[home][selected] {
                    background-image: url(../../content/app/minilogob.png);
                    background-size: auto 28px;
                }

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


        #navbar span[close] {
            position: fixed;
            z-index: 250;
            display: block;
            width: 50px;
            height: 50px;
            top: 0;
            left: 0;
            background: url(images/icon/n/close.png) no-repeat center center;
            background-size: 16px auto;
            cursor: pointer;
            /* border-radius: 50%; */
        }

            #navbar span[close]:hover {
                background-size: 20px 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: 2px solid rgba(0,0,0,0.3);
            background-image: url(images/icon/n/list.png);
            background-repeat: no-repeat;
            background-position: left 11px center;
            background-size: 22px 22px;
        }

            #navbar a[dashboardMenu="mypost"] span[addoption] {
                display: block;
                position: absolute;
                width: 30px;
                height: 30px;
                top: 10px;
                left: 15px;
                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: left 11px center;
            background-size: 22px 22px;
        }  

        #navbar a[dashboard] {
            background-image: url(images/icon/n/view.png);
            background-repeat: no-repeat;
            background-position: left 11px center;
            background-size: 22px 22px;
        }
    
        #navbar a[href="/cat/2"] {
            background-image: url(images/icon/n/pin.png);
            background-repeat: no-repeat;
            background-position: left 11px center;
            background-size: 22px 22px;
        }

        #navbar a[href="/cat/92"] {
            background-image: url(images/icon/n/mic.png);
            background-repeat: no-repeat;
            background-position: left 11px center;
            background-size: 22px 22px;
        }

        #navbar a[sharing] {
            background-image: url(images/icon/n/share.png);
            background-repeat: no-repeat;
            background-position: left 11px center;
            background-size: 22px 22px;
        }  
    
        #navbar a[festivals] {
            background-image: url(images/icon/n/award.png);
            background-repeat: no-repeat;
            background-position: left 11px center;
            background-size: 22px 22px;
        }  
    
        #navbar a[publications] {
            background-image: url(images/icon/n/book.png);
            background-repeat: no-repeat;
            background-position: left 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: left 11px center;
            background-size: 22px 22px;
        }

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

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

            #navbar a[dashboardMenu="myprofile"] img {
                display: block;
                position: absolute;
                width: 30px;
                left: 6px;
                top: 8px;
                border: 1px solid rgba(0,0,0,0.2);
                border-radius: 3px;
                filter: brightness(1.25) grayscale(1);
            }

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

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

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

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

        #navbar a[dashboardMenu][data-badge]:after {
            content: attr(data-badge);
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 14px;
            background: var(--boom);
            color: white;
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            border-radius: 3px;
            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: left 11px center;
            background-size: 22px 22px;
        }


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


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


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


@media screen and (min-width: 1281px) {
    #navbarBG {
        display: inline-block;
        /* max-width: 1220px; */
        position: fixed;
        z-index: 120;
        top: 0;
        left: 25%;
        right: 25%;
        padding: 0;
        margin: 0 auto;
        text-align: center;
        -webkit-transition: all .1s ease-in-out;
    }

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

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

    #navbarBG[noheader] {
    }

    #navbarBG[ontop] {
    }

    #navbar {
        display: inline-block;
        position: relative;
        height: 90px;
        line-height: 90px;
        margin: 0 auto;
        padding: 0;
        white-space: nowrap;
        text-align: center;
        border: 0 10px solid transparent;
    }


        #navbar a {
            display: inline-block;
            min-width: 55px;
            height: 90px;
            line-height: 90px;
            margin: 0;
            text-align: center;
            padding: 0 15px;
            margin: 0;
            font-size: 16px;
            text-decoration: none;
            color: var(--back);
            vertical-align: top;
        }

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

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

                #navbar a[selected]:hover {
                    color: #000000;
                }


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

            #navbar a[_home]:hover {
                background: url(images/c-box.png) no-repeat center center;
                background-size: 10px 10px;
            }

            #navbar a[home][selected] {
                background: url(images/icon/n/home.png) no-repeat center center;
                background-size: 24px auto;
            }

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

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

            #navbar a[home][selected] {
                background: url(../../content/app/minilogo.png) no-repeat center center;
                background-size: 48px auto;
            }    


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

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

    

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

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

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


#submenubarBG {
    display: block;
    padding: 0;
    text-align: center;
    background: rgba(0,0,0,0.1);
    clear: both;
}

#submenubar {
    display: block;
    max-width: 1220px;
    padding: 5px 10px;
    margin: 0 auto;
    white-space: normal;
    text-align: center;
}

    #submenubar a {
        display: inline-block;
        height: 35px;
        line-height: 35px;
        text-align: center;
        padding: 0 15px 0 5px;
        margin: 5px;
        font-size: 14px;
        text-decoration: none;
        color: var(--boom);
        border-right: 1px dotted rgba(0,0,0,0.25);
    }
    
    #submenubar a:first-of-type {
        border-right: 0;
    }

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

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

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


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

#fullCategoryView {
    display: block;
    width: 1220px;
    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;
    overflow: hidden;
    clear: both;
    background: rgba(0,0,0,0.01);
}

@media screen and (min-width: 1281px) {
    #pageBody {
        display: table;
        width: 1220px;
        margin: 0 auto;
        padding: 0 10px;
        vertical-align: top;
        overflow: hidden;
        min-height: 100%;
        white-space: nowrap;
        /* backdrop-filter: blur(2px); */
    }

    #BodyContain {
        display: table-cell;
        width: calc(100% - 320px);
        white-space: normal;
        padding: 10px 0 0 0;
        vertical-align: top;
        min-height: 100%;
    }

    #BodySide {
        display: table-cell;
        width: 300px;
        padding: 10px 10px 0 10px;
        margin: 0;
        white-space: normal;
        /*background: rgba(0,0,0,.25);*/
        vertical-align: top;
        min-height: calc(100% + 10px);
    }
}


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

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

    #BodySide {
        display: block;
        padding: 0;
        margin: 0 auto;
        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: table-caption;
}

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

#BodySide img.bannerImg {
    display: block;
    border: 0;
    cursor: pointer;
    margin: 10px auto;
    max-width: 300px;
}

#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;
    background: #FFFFFF;
    border-bottom: 1px solid rgba(255,255,255,0.75);


    --angle: 0deg;
  /* � */
    border-image: linear-gradient(var(--angle), rgba(0,0,0,0.5), rgba(255,255,255,0.5)) 1;
    animation: 10s rotate linear infinite;
}

#quickSitemap {
    display: block;
    position: relative;
    max-width: 1220px;
    margin: 0 auto;
    clear: left;
    padding: 20px 0;
    font-size: 16px;
    line-height: 30px;
}



@media screen and (min-width: 1281px) {
    #quickSitemap div {
        display: block;
        width: 1220px;
        background: url(/content/app/minilogob.png) no-repeat left top;
        background-size: 60px auto;
        margin: 0px auto;
        padding: 10px 0px;
        vertical-align: top;
    }
}

@media screen and (max-width: 1280px) {
    #quickSitemap div {
        display: block;
        background: url(/content/app/minilogob.png) no-repeat left top;
        background-size: 60px auto;
        margin: 0px auto;
        padding: 10px;
        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: 0px;
        margin: 0px;
        width: 20%;
        vertical-align: top;
    }

@media screen and (max-width: 1280px) {
    #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: var(--back);
    text-decoration: none;
}

#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: 12px;
    line-height: 20px;
    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: var(--back);
        }

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


#footerBG {
    display: block;
    padding: 0;
    text-align: center;
    background: rgba(0,0,0,0.02);
}

@media screen and (min-width: 1281px) {

    #footer {
        display: block;
        position: relative;
        max-width: 1220px;
        margin: 0 auto;
        padding: 20px;
        min-height: calc(100vh - 120px);
        font-size: 14px;
        line-height: 20px;
        color: rgba(0,0,0,0.6);
        text-align: left;
    }

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

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


        #footer col1 {
            display: inline-block;
            background-size: 60px auto;
            min-height: 80px;
            float: left;
            font-size: 15px;
        }

        #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: inline-block;
            text-align: left;
            min-height: 80px;
            float: right;
        }

            #footer col2 .social {
                display: inline-block;
                width: 32px;
                height: 32px;
                margin: 0 5px 0 0;
                float: left;
                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: 1280px) {

    #footer {
        display: block;
        position: relative;
        margin: 0 auto;
        padding: 20px;
        min-height: calc(100vh - 90px);
        font-size: 14px;
        line-height: 20px;
        color: rgba(0,0,0,0.6);
        text-align: right;
    }

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

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


        #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;
            padding: 5px 0 0 0;
            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(80vh - 140px);
    border: 0;
    margin: 0;
    padding: 0;
}

#mini-map-canvas {
    display: block;
    position: relative;
    z-index: 0;
    width: 100%;
    overflow: hidden;
    display: block;
    height: 250px;
    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% - 15px);
        border: 5px solid transparent;
        margin: 0 0 5px 5px;
        color: #000000;
        text-align: right;
        vertical-align: top;
        font-size: 14px;
        background: #FFFFFF;
        text-decoration: none;
        line-height: 30px;
    }

@media screen and (max-width: 1280px) {
    #latestLocation a {
        width: calc(33% - 15px);
    }
}

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


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

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

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

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: 30px;
    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: 1280px) {
    #vBoxMessage {
        font-size: 12px;
    }
}

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

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

#vBoxMessage div[container] {
    display: inline-block;
    padding:0 0 0 10px;
}

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

.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: 1281px) {
    div.formPanel {
        display: block;
        padding: 0;
        text-align: right;
        margin: 0 0 10px 0;
        background: #FFFFFF;
        border: 1px solid #ececec;
    }
}

@media screen and (max-width: 1280px) {
    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;
}

    div.formPanel div[actionbar] input[type="submit"] {
        display: inline-block;
        vertical-align: top;
        min-width: 40px;
        text-align: center;
        padding: 0 20px;
        margin: 0 0 0 10px;
        font-size: 16px;
        line-height: 40px;
        cursor: pointer;
        color: var(--back);
        border: 0;
        background: rgba(0,0,0,0.1);
        border-top: 2px solid var(--back);
        font-weight: bold;
    }

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:1px solid var(--boom);
    border-radius:15px;
    background:#FFFFFF;
    height:35px;
    line-height:35px;
    padding:0 5px;
    vertical-align:middle;
    box-sizing : border-box;
    */
    display: inline-block;
    font-size: 16px;
    border: 0;
    height: 35px;
    line-height: 35px;
    padding: 0 5px;
    vertical-align: middle;
    background: #FFFFFF;
    color: var(--back);
    border-bottom: 1px dotted rgba(0,0,0,0.20);
}

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

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

.textboxview {
    width: calc(80% - 15px);
    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% - 15px);
}


@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% - 10px);
    }

    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: 40px;
    min-width: 40px;
    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: 1281px) {
    div.tabBarPanel {
        display: block;
        vertical-align: top;
        white-space: normal;
        color: #666666;
        padding: 0;
        margin: 0;
    }
}

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


div.tabBarPanel a {
    display: inline-block;
    height: 35px;
    line-height: 35px;
    text-decoration: none;
    font-size: 14px;
    padding: 5px 20px;
    color: var(--boom);
    cursor:pointer;
}

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: 1281px) {
    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: 1280px) {
    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;
}

#postsListColumn, #postsListColumnRest {
    display: block;
    margin: 0;
}


@media screen and (min-width: 1281px) {
    #postsListColumn column1,
    #postsListColumnRest column1 {
        display: inline-block;
        width: calc(34% - 10px);
        margin: 0 0 0 10px;
        vertical-align: top;
    }

    #postsListColumn column2,
    #postsListColumnRest column2 {
        display: inline-block;
        width: calc(33% - 10px);
        margin: 0 0 0 10px;
        vertical-align: top;
    }

    #postsListColumn column3,
    #postsListColumnRest column3 {
        display: inline-block;
        width: calc(33% - 0px);
        margin: 0;
        vertical-align: top;
    }
}

@media screen and (max-width: 1280px) {
    #postsListColumn column1,
    #postsListColumnRest column1 {
        display: inline-block;
        width: 33%;
        margin: 0;
        vertical-align: top;
    }

    #postsListColumn column2,
    #postsListColumnRest column2 {
        display: inline-block;
        width: calc(34% - 20px);
        margin: 0 10px;
        vertical-align: top;
    }

    #postsListColumn column3,
    #postsListColumnRest column3 {
        display: inline-block;
        width: 33%;
        margin: 0;
        vertical-align: top;
    }
}


@media screen and (max-width: 640px) {
    #postsListColumn column1,
    #postsListColumnRest column1 {
        display: block;
        width: 100%;
        margin: 0;
        vertical-align: top;
        zoom: 90%;
    }

    #postsListColumn column2,
    #postsListColumnRest column2 {
        display: block;
        width: 100%;
        margin: 0;
        vertical-align: top;
        zoom: 90%;
    }

    #postsListColumn column3,
    #postsListColumnRest column3 {
        display: block;
        width: 100%;
        margin: 0;
        vertical-align: top;
        zoom: 90%;
    }
}


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

@media screen and (min-width: 1281px) {
    #postsListRest {
        display: block;
        vertical-align: top;
        float: right;
    }
}

@media screen and (max-width: 1280px) {
    #postsListRest {
        display: block;
        vertical-align: top;
    }
}


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


div.postItem {
    display: block;
    position: relative;
    vertical-align: top;
    white-space: normal;
    color: #666666;
    padding: 0;
    background: rgba(235,235,235,0.5);
    margin: 0 0 10px 0;
    cursor: pointer;
    backdrop-filter: blur(2px);
    overflow: hidden;
    text-align: left;
}




div.postItem[verified]
{
    border-top: 10px solid #d32942;
    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;
    
}

    div.postItem[homegroup="2"] {
        background: var(--boom);
        border-top: 10px solid var(--boom);
    }

    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;
        width: calc(50% - 0px);
        float: left;
        position: relative;
        /*overflow: hidden;*/
        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
    }

        div.postItem span[image] img {
            display: block;
            margin: 0;
            width: calc(100% - 0px);
            height: 25vh;
            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;
            object-fit: cover;
        }

    div.postItem a[title] {
        display: block;
        width: calc(50% - 40px);
        float: left;
        font-size: 20px;
        line-height: 30px;
        padding: 20px;
        font-weight: bold;
        color: var(--boom);
        text-decoration: none;
        vertical-align: top;
    }


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

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

    div.postItem a[title][noimage] {
        width:calc(50% - 70px);
        border-top: 5px solid rgba(0,0,0,0.10);
        padding:70px 50px 20px 20px;
    }

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

    div.postItem span[time] {
        display: block;
        width: calc(50% - 40px);
        line-height: 20px;
        font-size: 12px;
        text-transform: uppercase;
        color: #666666;
        padding: 10px 20px;
        float: right;
    }

    div.postItem span[shortdes] {
        display: block;
        width: calc(50% - 40px);
        font-size: 15px;
        color: #464646;
        padding: 10px 20px 20px 20px;
        text-align: justify;
        float: right;
    }

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

    div.postItem span[userIcon] {
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        text-align: left;
        box-shadow: 1px 1px 10px rgb(0 0 0 / 50%);
        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: 50px;
            height: 50px;
            vertical-align: middle;
        }

        div.postItem span[userIcon] a span {
            display: inline-block;
            color: #FFFFFF;
            background: rgba(0,0,0,0.5);
            font-size: 10px;
            line-height: 50px;
            vertical-align: middle;
            padding: 0 10px;
        }

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

        div.postItem:hover > span[userIcon] {
        }


@media screen and (max-width: 800px) {

    div.postItem {
        padding-bottom: 10px;
    }    
            
    div.postItem span[image] {
        display: block;
        width: 100%;
        position: relative;
        /*overflow: hidden;*/
        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
    }

        div.postItem span[image] img {
            width: calc(100% - 0px);
            height: 25vh;
        }

    div.postItem a[title] {
        width: calc(100% - 40px);
        font-size: 18px;
        padding: 20px;
    }

        div.postItem a[title][noimage] {
        width:calc(100% - 70px);
        border-top: 5px solid rgba(0,0,0,0.10);
        padding:70px 50px 20px 20px;
    }

        div.postItem span[time] {
        width: calc(100% - 70px);
        padding: 0 50px 10px 20px;
    }

    div.postItem span[shortdes] {
        width: calc(100% - 70px);
        padding: 0 50px 10px 20px;
    }
    
}



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


div.postDetail {
    display: block;
    position: relative;
    border: 0;
    vertical-align: top;
    white-space: normal;
    color: #666666;
    padding: 0 0 10px 0;
    margin: 0 0 10px 0;
    background: linear-gradient(0deg, rgb(216 216 216 / 75%) 0%, rgb(245 245 245) 30px);
    backdrop-filter: blur(2px);
}

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

    div.postDetail video {
        display: block;
        width: 100%;
    }

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

div.postDetail h1 {
    display: block;
    font-size: 24px;
    line-height: 40px;
    padding: 10px 30px;
    color: #000000;
    margin: 0;
}

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

div.postDetail span[editpost] {
    display: block;
    position: absolute;
    color: transparent;
    width: 30px;
    height: 30px;
    line-height: 20px;
    text-align: center;
    top: 0px;
    right: 0px;
    cursor: pointer;
    border: 2px solid var(--boom);
    border-left:0;
    border-bottom:0;
}

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

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



div.postDetail span[image] {
    display: block;
    overflow: hidden;
    text-align: center;
}

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

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: 120px;
    background: rgba(0,0,0,0.1);
}

div.postDetail div[container] {
    display: block;
    border: 0;
    padding: 0;
    
    overflow:
    hidden;
}

div.postDetail div span[detail] {
    display: block;
    font-size: 20px;
    line-height: 30px;
    color: #000000;
    padding: 20px 30px;
    text-align: justify;
    overflow: hidden;
    white-space: pre-wrap;
}

div.postDetail div span[price]
{
    display: block;
    background: rgb(19 168 158) url(images/icon/n/cart.png) no-repeat right 20px center;
    background-size: 26px auto;
    color: #ffffff;
    padding: 5px 60px 5px 20px;
    border-left: 8px dotted #ffffff;
    border-right: 8px dotted #ffffff;
    line-height: 50px;
    text-decoration: none;
    width: 25%;
    font-size: 32px;
    font-weight: bold;
    text-align: left;
    text-shadow: 1px 1px rgba(0,0,0,0.25);
    margin: 0 auto;
    cursor: pointer;
}


div.postDetail div span[userinfo] {
    display: block;
    position: relative;
    font-size: 18px;
    text-decoration: none;
    padding: 10px 0;
    vertical-align: top;
    white-space: nowrap;
    overflow: hidden;
}

    div.postDetail div span[userinfo] img {
        display: inline-block;
        vertical-align: middle;
        margin: 0;
        margin-left: 10px;
        height: 64px;
        border: 1px solid rgba(0,0,0,0.25);
        border-right: 30px solid rgba(0,0,0,0.1);
        box-shadow: 0 0 5px rgba(0,0,0,0.25);
    }

div.postDetail div span[userinfo] span[connect]{
    display:
    inline-block;
    float:
    left;
    padding: 14px 30px;
}

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: var(--boom) url(images/icon/n/comment_w.png) no-repeat center center;
    background-size: 22px auto;
}

div.postDetail div span[category] {
    display: block;
    position: relative;
    font-size: 16px;
    text-decoration: none;
    padding: 10px 30px;
    line-height: 30px;
    margin: 0;
    vertical-align: top;
    border-top: 2px dotted #FFFFFF;
    text-align: left;
}

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

div.postDetail div span[category] span[info] a
{
    background:#FFFFFF;
    color: var(--boom);
    padding: 0 10px;
    margin: 5px;
    margin-right: 0;
    border-radius: 5px;
    display: inline-block;
    font-weight: normal;
}
div.postDetail div span[category] 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: 10px 0 10px 10px;
        height: 48px;
        border-right: 10px solid rgba(0,0,0,0.1);
    }

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




@media only screen and (max-width: 480px) {
    div.postDetail div span[detail] {
        display: block;
        font-size: 16px;
        line-height: 30px;
        color: #000000;
        padding: 10px 10px;
    }


div.postDetail div span[price]
{
    background-size: 22px auto;
    line-height: 40px;
    width: 50%;
    font-size: 18px;
}    
}

div.postDetail div a[sourceUrl] {
    display: block;
    font-size: 16px;
    font-weight: normal;
    line-height: 35px;
    color: var(--boom);
    background: url(images/icon/n/link.png) no-repeat 20px center;
    background-size: 16px auto;
    padding: 0 10px 0 50px;
    margin: 0;
    text-decoration: none;
    text-align: left;
    border-top: 1px dotted;
}

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

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: left;
    border-top: 2px dotted #FFFFFF;
}


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

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

div.postDetail div span[time] {
    display: inline-block;
    line-height: 48px;
    font-size: 12px;
    color: var(--back);
    vertical-align: middle;
}

    div.postDetail div  a {
        font-weight: bold;
        color: var(--back);
        text-decoration: none;
        padding-left:10px;
        line-height: 48px;
        vertical-align: middle;
    }

        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 dotted rgba(0,0,0,0.1);
    margin: 10px 30px;
}


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

div.postDetail span.opinionCtrl {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 50;
    zoom: 1.25;
}

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

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;
    float: right;
    padding: 10px;
    margin:10px 0;
    background: var(--back);
}

    #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 dashed #373636;
    white-space: normal;
    color: #fbfbfb;
    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;
    }

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

    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: 11px;
        color: #a5a5a5;
    }



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


div.jscalendar {
    display: block;
    position: relative;
    border: 1px solid #373636;
    color: #e7e7e7;
}

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

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

    div.jscalendar span[previousCtrl] {
        display: inline-block;
        font-size: 14px;
        line-height: 25px;
        height: 25px;
        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: 25px;
        height: 25px;
        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;
        margin: 10px 0;
        text-align: center;
    }

    div.jscalendar span[today] {
        display: inline-block;
        font-size: 15px;
        width: 36px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        border: 1px dotted #373636;
        margin: 0 0 -1px -1px;
        color: #f7ed78;
    }

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


    div.jscalendar span[day] {
        display: inline-block;
        font-size: 15px;
        width: 36px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        border: 1px dotted #373636;
        margin: 0 0 -1px -1px;
    }

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

    div.jscalendar span[appointed] {
        color: #396E9E;
    }

    div.jscalendar span[dayPrevious] {
        display: inline-block;
        font-size: 15px;
        width: 36px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        border: 1px dotted #373636;
        margin: 0 0 -1px -1px;
        color: #585858;
    }

    div.jscalendar span[dayNext] {
        display: inline-block;
        font-size: 15px;
        width: 36px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        border: 1px dotted #373636;
        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: 1280px) {
    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;
    background: rgba(235,235,235,0.5);
    backdrop-filter: blur(3px);
}

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


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 20px;
    margin: 0;
    font-size: 14px;
    line-height: 35px;
    cursor: pointer;
    color: var(--back);
    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: 5px;
    }

    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;
        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;
    background: rgba(0,0,0,0.1);
    overflow: hidden;
}

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

@media screen and (max-width: 1280px) {
    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: 0px;
    left: 0px;
    cursor: pointer;
}

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

div.userProfileHeaderBox span[headerBG] {
    display: block;
    overflow: hidden;
    height: 30vh;
    background: rgba(0,0,0,0.25);
    backdrop-filter: blur(2px);
}

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



div.userProfileHeaderBox img[photo] {
    position: absolute;
    z-index: 10;
    display: block;
    margin: 0;
    height: 15vh;
    top: 20vh;
    right: 0;
    border-right: 20px solid rgba(0,0,0,0.5);
    border-top: 20px solid rgba(0,0,0,0.5);
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

div.userProfileHeaderBox a[fullname] {
    display: block;
    position: relative;
    z-index: 10;
    white-space: nowrap;
    line-height: 40px;
    height: 40px;
    color: #000000;
    font-size: 26px;
    padding: 10px calc(15vh + 30px) 0 20px;
    text-transform: uppercase;
    text-decoration: none;
}

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

div.userProfileHeaderBox span[memberinfo] {
    display: block;
    padding: 0 calc(15vh + 30px) 10px 20px;
    white-space: nowrap;
    color: rgba(0,0,0,0.5);
    font-size: 10px;
    line-height: 20px;
    height: 20px;
}

@media screen and (max-width: 640px) {
    div.userProfileHeaderBox img[photo] {
        position: absolute;
        z-index: 10;
        display: block;
        margin: 0;
        height: 15vh;
        top: calc(15vh - 20px);
        right: 0;
    }

    div.userProfileHeaderBox a[fullname] {
        display: block;
        position: initial;
        z-index: unset;
        white-space: nowrap;
        line-height: 30px;
        height: 30px;
        color: #000000;
        font-size: 22px;
        padding: 10px 20px 0 20px;
        text-transform: uppercase;
        text-decoration: none;
    }

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

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

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

div.userProfileHeaderBox span[info] {
    display: block;
    white-space: normal;
    color: var(--back);
    font-size: 14px;
    margin-bottom: 10px;
    padding: 10px 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: 0 20px 20px 20px;
}

    div.userProfileHeaderBox span[exlinks] a[website] {
        display: inline-block;
        font-size: 12px;
        line-height: 22px;
        color: var(--back);
        background: rgba(255,255,255,0.75) url(images/icon/n/link.png) no-repeat 8px center;
        background-size:16px auto;
        border-radius: 2px;
        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;
    border: 1px solid rgba(0,0,0,0.07);
    vertical-align: top;
    white-space: normal;
    color: #666666;
    padding: 0 0 10px 0;
    margin-bottom: 10px;
    background: #FFFFFF;
}

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

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

            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: 30px;
            height: 30px;
            top: 10px;
            left: 0;
            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 5px 5px 25px;
            margin: 0 0;
            text-decoration: none;
            background-repeat: no-repeat;
            background-position: left 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="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: 10px;
            left: 0;
            font-size: 14px;
            background: var(--boom);
            color: #FFFFFF;
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            border-radius: 3px;
        }

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


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

img.bannerImg {
    border: 0;
    cursor: pointer;
    width: 100%;
}

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


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/id.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: left;
    color: var(--back);
}

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

    .section-action input {
        margin-left: 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;
    text-align: left;
}

    .input-group[active] {
        display: block;
        padding: 20px 20px 20px 15px;
        -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-left: 5px solid transparent;
        border-left-color: var(--back);
        background-color: #f0f0f0;
        white-space: nowrap;
    }

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

.form-description {
    display: block;
    text-align: left;
    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-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;
}

.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-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 0 0 0;
    -webkit-appearance: none;
}

    .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: 1281px) {
    #customGrid {
        clear: both;
        display: block;
        width: 100%;
        margin: 0 0 10px 0;
        background: #FFFFFF;
    }
}

@media screen and (max-width: 1280px) {
    #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 solid rgba(0,0,0,0.05);
                border-radius: 3px;
                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(--boom);
                font-weight: bold;
            }

            #customGrid crow ccol[c0] span.messageStatus_read,
            #customGrid crow ccol[c0] span.messageStatus_sent {
                display: block;
                cursor: pointer;
                color: rgba(0,0,0,0.5);
                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;
}

    #pagingCtrl a {
        text-decoration: none;
    }

        #pagingCtrl pagingFirst,
        #pagingCtrl a[pagingFirst] {
            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 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_previous.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_next.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_last.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: #ffffff;
        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: var(--boom);
        border-radius: 3px;
    }

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

    #pagingCtrl pagingActive,
    #pagingCtrl a[pagingActive] {
        display: inline-block;
        height: 36px;
        white-space: nowrap;
        border: 0;
        margin: 0 5px 0 0;
        color: var(--boom);
        background: #FFFFFF;
        font-size: 12pt;
        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 0 0 10px;
        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: 13px;
        padding: 0 30px;
        border-top: 5px solid rgba(0,0,0,0.25);
        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: 13px;
        padding: 0 30px;
        border-top: 5px solid rgba(0,0,0,0.25);
        margin: 30px -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: 1281px) {
    #dashboardA {
        display: block;
    }

        #dashboardA h1 {
            display: block;
            font-size: 18px;
            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);
    }
}

@media screen and (max-width: 1280px) {
    #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;
        text-align: left;
        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 20px;
        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: 1281px) {
    #dashboardB {
        display: block;
        width: 100%;
        vertical-align: top;
        padding: 10px 0;
        margin-bottom: 10px;
        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);
        }
}

@media screen and (max-width: 1280px) {
    #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: 1281px) {
    #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: 1280px) {
    #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 {
    display: block;
    position: relative;
    max-width: 100vw;
    margin: 0;
    overflow-y: hidden;
    overflow-x: scroll;
    white-space: nowrap;
    height: 100%;
    scrollbar-color: #d5ac68 #f1db9d;
    scrollbar-width: thin;
    -ms-overflow-style: none;
}

slideshow::-webkit-scrollbar {
  height: 5px;
}

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

slideshow::-webkit-scrollbar-thumb {
  height: 5px;
  background-color: #d5ac68;
}

slideshow::-webkit-scrollbar-thumb:hover {
  background-color: #f1db9d;
}

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





@media screen and (min-width: 1281px) {
    slideshow figure {
        display: inline-block;
        width: 50%;
        position: relative;
        margin: 0;
        height: 100%;
        overflow: hidden;
        cursor: pointer;
        box-shadow: 0 0 20px rgb(0 0 0 / 90%);
    }
    slideshow figure:hover {
        filter:contrast(1.25);
    }
}

@media screen and (max-width: 1280px) {
    slideshow figure {
        display: inline-block;
        width:100%;
        position: relative;        
        margin: 0;
        height: 100%;
        overflow: hidden;
        cursor: pointer;
        box-shadow: 0 0 20px rgb(0 0 0 / 90%);
    }
    slideshow figure:hover {
        filter:contrast(1.25);
    }    
}


slideshow figure[show="show"] {
    display: block;
}

slideshow img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
    filter: contrast(110%);
    z-index: 0;
}

slideshow figcaption {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    left:0;
    text-shadow: 1px 1px 1px #000000, 3px 3px 5px #000000;
    color: #fff;
    font-size: 28px;
    font-weight: bold;
    padding: 5% 30px;
    text-align: right;
    line-height:50px;
    transition: opacity .5s;
    white-space: pre-line;
}

slidehow:hover figure figcaption {
    transition: opacity .5s;
    opacity: 1;
    filter: initial;
}


@media screen and (min-width: 1281px) {
    slideshow figdesc {
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
        color: #FFFFFF;
        background: rgba(0,0,0,0.5);
        backdrop-filter: blur(1px);
        font-size: 18px;
        padding: 30px;
        line-height: 35px;
        min-height: 70px;
        margin: 0;
        text-align: right;
        white-space: pre-line;
    }
}

@media screen and (max-width: 1280px) {
    slideshow figdesc {
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
        text-align:
        right;
        color: #FFFFFF;
        background: rgba(0,0,0,0.5);
        backdrop-filter: blur(1px);
        font-size: 16px;
        padding: 20px;
        line-height: 25px;
        min-height: 100px;
        margin: 0;
        white-space: pre-line;
    }
}



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


#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: 1281px) {
    div[usersView] {
        display: block;
        margin: 0 0 10px 0;
        padding: 10px 10px 0 0;
        background: #FFFFFF;
        text-align: center;
    }
}

@media screen and (max-width: 1280px) {
    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;
    z-index: 500;
    bottom: 0;
    left: 30px;
    right: 30px;
    text-align: center;
    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: 1281px) {
    #getUsrPosCrtl {
        display: block;
        width: 30px;
        height: 30px;
        position: absolute;
        z-index: 10;
        top: 20px;
        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: 1280px) {
    #getUsrPosCrtl {
        display: block;
        width: 30px;
        height: 30px;
        position: absolute;
        z-index: 10;
        top: 20px;
        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(33% - 10px);
    padding: 0;
    margin: 0 0 10px 10px;
    float: right;
    cursor: pointer;
    backdrop-filter: brightness(1.5);
}


@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: 60px;
    padding: 0;
    margin: 0;
    border: 0;
    font-size: 12px;
    line-height: 30px;
    color: rgba(0,0,0,0.3);
    overflow: hidden;
    vertical-align: middle;
}

    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;
        padding: 0;
        border: 0;
        font-size: 14px;
        font-weight: bold;
        color: var(--back);
        line-height: 30px;
        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: 0 10px;
        }

        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: 16px;
    text-align: right;
    color: #FFFFFF;
    background: rgba(0,0,0,0.25);
    padding: 0 20px;
}

.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: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

    .modal-close:hover,
    .modal-close:focus {
        color: #bbb;
        text-decoration: none;
        cursor: pointer;
    }

@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: 50%;
            cursor:pointer;
            transition: all 0.5s;
        }

            span[image] span[videoicon]:hover {
                background-size: 25% auto;
                opacity: 75%;
                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: 50%;
            cursor:pointer;
            transition: all 0.5s;
        }

            span[image] span[liveicon]:hover {
                background-size: 25% auto;
                opacity: 75%;
                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: 50%;
            cursor:pointer;
            transition: all 0.5s;
        }

            span[image] span[waveicon]:hover {
                background-size: 25% auto;
                opacity: 75%;
                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 30px;
}

@media only screen and (max-width: 480px) {
    div.newCommentPanel {
        padding: 10px 0;
    }
}


div.newComment{
    padding: 10px 0 0 0;
    border-top: 1px dotted rgba(0,0,0,0.10);
}
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: block;
    height: 28px;
    position:absolute;
    top:15px;
    right:10px;
    border-radius: 10px 0 10px 10px;
}

span[parentComment]{
    display: block;
    position:
    relative;
    white-space: pre-wrap;
    overflow: hidden;
    background: #FFFFFF;
    font-size: 14px;
    padding: 15px 50px 15px 30px;
    color: var(back);
    border-right: 1px solid rgba(0,0,0,0.50);
    line-height:28px;
}

span[childComment]{
    display: block;
    position:
    relative;
    white-space: pre-wrap;
    overflow: hidden;
    background: #FFFFFF;
    padding: 15px 50px 15px 30px;
    color: var(back);
    border-right: 1px solid rgba(0,0,0,0.5);
    line-height:28px;
    margin-top:-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:40px;
height:20px;
cursor:pointer;
filter:grayscale(1);
bottom:10px;
right:0;
}

span[replyComment]:hover
{
background-size: auto 24px;
filter:grayscale(0);
}


span[sendcomment] {
    display: block;
    position: absolute;
    background: url(images/icon/n/reply.png) no-repeat center center;
    background-size: 30px auto;
    width: 80px;
    height: 40px;
    cursor: pointer;
    filter: grayscale(1);
    top: 10px;
    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: 20px;
        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: 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.newCommentForm {
        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%);
    }
}



#newCommentFormIn
{
    display: block;
    border: 1px dotted rgba(0,0,0,0.1);
    position:relative;    
}

#newCommentFormIn textarea{
    display: block;
    width: calc(100% - 110px);
    height: 80px;
    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: 40px;
    }
}


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 {
  width: 150px;
  height: 150px;
  overflow: hidden;
  position: absolute;
  top: -5px;
  left: -5px;
}
.ribbon::before,
.ribbon::after {
  position: absolute;
  z-index: -1;
  content: '';
  display: block;
  border: 5px solid var(--back);
  border-top-color: transparent;
  border-left-color: transparent;
}
.ribbon span {
  position: absolute;
  display: block;
  width: 225px;
  padding: 15px 0;
  background-color: rgba(255,0,0,0.75);
  box-shadow: 0 5px 10px rgba(0,0,0,.1);
  color: #fff;
  font: 700 18px/1;
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
  text-transform: uppercase;
  text-align: center;
}


.ribbon::before {
  top: 0;
  right: 0;
}
.ribbon::after {
  bottom: 0;
  left: 0;
}
.ribbon span {
  right: -25px;
  top: 30px;
  transform: rotate(-45deg);
}





/* 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: block;
    font-size: 20px;
    line-height: 50px;
    color: var(--boom);
    background: url(images/icon/n/link.png) no-repeat 20px center;
    background-size: 16px auto;
    padding: 0 10px 0 45px;
    margin: 0;
    text-decoration: none;
    text-align: left;
    border-top: 2px dotted rgba(0,0,0,0.1);
}
div.postDetail[share] div a[sourceUrl]:hover
{
    color: var(--back);
}


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:50vh;
}


#tokenTimer {
    background: #e0ffcb;
    text-align: center;
    color: #28A80D;
    font-size: 16px;
}

#whatsappChat {
    display: block;
    position: fixed;
    z-index: 1000;
    width: 64px;
    height: 64px;
    bottom: 40%;
    left: 20px;
    cursor: pointer;
    background: rgba(255,255,255,0.9) url(https://www.boomlog.com/content/uploads/whatsappR.png) no-repeat center center;
    background-size: 48px;
    border: 1px dotted #2ed56c;
    border-radius: 25% 25% 0 25%;
    filter: grayscale(1);
    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;
}

    #whatsappChat:hover {
        filter: grayscale(0);
    }

@keyframes animSpin {
    0% {
        -webkit-transform: perspective(120px) rotateY(180deg) rotateX(0deg);
        transform: perspective(120px) rotateY(181deg) rotateX(0deg);
    }

    50% {
        -webkit-transform: perspective(120px) rotateY(0deg) rotateX(0deg);
        transform: perspective(120px) rotateY(0deg) rotateX(0deg);
    }

    100% {
        -webkit-transform: perspective(120px) rotateY(180deg);
        transform: perspective(120px) rotateY(181deg);
    }
}