/** Main **/
img{max-width:100%;height:auto;width:auto}
#app{min-height:100vh}
header#main-header{background:#000032;color:#FFF;padding:10px 0px;-webkit-box-shadow: 0 2px 2px 0 rgb(0 0 50 / 4%);box-shadow: 0 2px 2px 0 rgb(0 0 50 / 4%);    position: sticky;top: 0px;left: 0px;z-index: 21;}
.header-logo{width:65px;float:left}
.header-search{width:calc(100% - 120px);float:left;margin-left:40px;margin-top:5px;position:relative}
.header-search .search-result-modal{position: absolute;top: 40px;left: 0px;width: 100%;padding: 10px;background: #FFF;border: 1px solid #000032;border-radius: 3px;display:none;color:#000}
.header-search .search-result-modal a{text-decoration:underline}
.header-search .form-control{color:#FFF;background:#000032;border-color:#FFF;border-width:2px;padding:13px 15px}
.header-search .form-control:active, .header-search .form-control:focus{background:#FFF;color:#000}
.header-menu ul{padding:0;margin:0;display:block;text-align:right}
.header-menu li{list-style:none;display:inline-block}
.header-menu li a{color:#FFF;display:block;padding:10px 10px}
.button{background:#000032;color:#FFF}
.button:hover{color:#FFF;opacity:0.7}
.text-selecter{padding-bottom:10px;}
.text-selecter span{font-weight:bold;cursor:pointer;text-decoration:underline}
.auth-form h4{margin-bottom:15px}
.register-info{padding-top:15px}
a{color:#000}
.inner-activate{padding:15px;border:1px solid #000;margin-bottom:30px;background: #FFF;}
.code-resend{margin-bottom:15px}
.full-button{display:block;margin-bottom:5px}
.error{border-color:red}
.remember-link{padding-bottom:10px}
.remember-link a{font-weight:bold;text-decoration:underline}
.ruROS {color: rgb(225, 229, 234);font-size: 12px;min-height: 48px;position: fixed;left: 0px;right: 0px;bottom: 0px;z-index: 1030;background: rgba(23, 24, 27, 0.85);padding: 18px 40px 18px 18px;}
.ruROS .cmc-link, .ruROS .cmc-link:hover {color: rgb(255, 255, 255);font-weight: bold;}
.ruROS .cmc-cookie-policy-banner__close {font-size: 25px;font-weight: 100;position: absolute;right: 0px;top: 0px;cursor: pointer;display: inline-flex;width: 40px;height: 40px;-webkit-box-pack: center;justify-content: center;-webkit-box-align: center;align-items: center;}
.sidebar-content ol{margin:0;padding:0;padding-left:15px}

/** Home **/
#app .flexslider{margin:0px;padding:0px;border:0px}
#home-slider{border:1px solid #DDD;margin-bottom:30px;background:#FFF;text-align:center;padding:10px;background:#FF\F}
#app .flex-control-nav{bottom:0px}
#app .flex-direction-nav .flex-prev, #app .flex-direction-nav .flex-next{height:55px}
.home-why{background:#FFF;padding:10px;border-radius:5px;margin-bottom:15px}
.home-why-title{padding:7px 0px;font-weight:bold;text-align:center;margin-top:5px}
#home-review .review-title > *{display:inline-block;vertical-align:middle;padding-right:5px}
#home-review .review-loop{border:none}
#home-review .review-title{padding-bottom:10px;border-bottom:1px solid #DDD}
#home-review .review-content{max-height:200px}

/** Content **/
#main-container{background: #f2f2f5;min-height:calc(100vh - 426px)}
#inner-content{margin-top:30px;padding: 0;padding-left: 30px;margin-bottom:30px;min-height:calc(100vh - 486px)}
.title{font-size:22px;font-weight:bold;margin-bottom:20px}
.inner-cnt{text-align:justify;margin-bottom:20px}
.article_item h4{font-size:18px}
.page_header{padding-bottom:20px}
span.del{display:inline-block;padding:0px 5px}
.err{border-color:red}
.hidden{display:none}
.main-notify div, .reg-notify div, .login-notify div{font-size: 16px;font-weight: bold;color: red;border: 1px solid red;padding: 10px;margin-bottom: 15px;border-radius: 5px;}
.button{cursor:pointer}
.main-row-container{margin-left:0;margin-right:0}

/** Sidebar **/
#main-sidebar{margin-top:30px;padding-bottom:0px;background:#FFF;padding-left:0px;padding-right:0px;padding-top:0px;margin-bottom:30px}
.sidebar-section{padding:15px 30px;border-bottom:1px solid #DDD}
.sidebar-section:last-child{border-bottom:0px}
.sidebar-title{font-size: 18px;line-height: 20px;font-weight:bold}
.sidebar-content{padding:10px 0px}
.sidebar-category-links a{display:block;color:#000;margin-bottom:3px}

/** Category **/
.category-inner-link, .category-loop{display:inline-block;width:30%;max-width:300px;vertical-align:top;padding:10px;margin-right:10px;margin-bottom:10px;background:#FFF;border:1px solid #DDD;text-align:center}
.category-desc{padding-top:30px}
.item-loop{display:block;padding:10px;margin-bottom:10px;background:#FFF;overflow:hidden}
.item-loop img{float:left;width:100px;}
.item-loop-right-info{float:right;width:calc(100% - 115px)}
.item-loop-title{padding-top:5px;font-weight:bold}

/** Footer **/
footer#main-footer{background:#000032;padding:30px 15px;color:#FFF}
footer#main-footer a{color:#FFF}
.footer-logo{padding:0px;max-width:120px;margin: 0 auto}
.footer-title{font-size:18px;font-weight:bold}
.footer-copyright{color:#9a9a9a;font-size:14px;text-align:left;padding:0}

/** Login **/
#login-form, #register-form, #remember-form{max-width:460px;border:1px solid #DDD;border-radius:5px;padding:15px;background:#FFF}
#register-form{display:none}

/** Item **/
.item-thumb{max-width: 250px;margin-right:15px;margin-bottom:15px}
.item-view-sidebar{position:sticky;padding:10px;top:0px}
.item-sidebar{position:relative}
.item-more-title{font-size:16px;font-weight:bold;margin-bottom:10px}
.item-title{font-size:24px;font-weight:bold;margin-bottom:10px}
.review-link{font-weight:bold;text-decoration:underline}
.review-loop{border:1px solid #DDD;padding:10px;background:#FFF;margin-bottom:10px;position:relative}
.review-title{font-size:15px;margin-bottom:5px}
.review-title-name{font-weight:bold}
.review-title-date{font-style:italic}
#item-review-form{padding:15px;border:1px solid #DDD;margin-top:10px;background:#FFF}
#item-review-form h4{margin-bottom:15px;font-size:20px}
.review-item-link{font-size:13px}
.review-item-link a{font-style:italic}
.main-navi *{transition:all 300ms linear;display:inline-block;padding:3px 7px;margin-right:3px;margin-bottom:3px;border:1px solid #000032;border-radius:3px}
.main-navi strong{background:#000032;color:#FFF}
.main-navi a:hover{color:#FFF;background:#000032;text-decoration:none}
.review-stars i{color:orange}
.review-title-inner{font-weight:bold}
.review-avatar{display:inline-block;max-width:50px}
.like-action{cursor:pointer}
.review-like-main{position:absolute;top:5px;right:5px;font-size:20px}
.review-like{display:inline-block;font-size:18px}
.rating-selecter i{cursor:pointer;color:orange}
.review-img{max-width:150px;margin-top:5px}
.review-answer-form{background:#FFF;margin-top:-10px;margin-bottom:10px;padding:10px}
.review-author-answer{background: #FFF;margin-top: -10px;margin-bottom: 10px;padding: 10px;}
.sub-item-action{cursor:pointer;font-weight:bold;text-decoration: underline;}
.table{background: #FFF;}
.history-table a{font-weight:bold;text-decoration:underline}
.new-event-tr{background:#dbdbef}
.page_header .col-md-12{position:relative}
.page_header .inline-button{position:absolute;top:15px;right:15px}

/** Profile **/
.profile-avatar{max-width:150px;margin:15px 0px;display:block;width:100%}
.user-pay-logs table{background:#FFF;margin-top:15px}
.user-pay-logs strong{display:block;font-size:20px;margin-top:15px}
.navi strong, .navi a{display:inline-block;border:1px solid;padding:0px 7px;margin-right:3px}
.navi strong{font-weight:bold}
#email-changer{padding-bottom:15px}

/**Additional **/
#modal, #notiblock, #loader{display:none}

@media(max-width:991px){
    header#main-header{position:static}
    #app{padding-top:0px}
    .header-menu ul{text-align:center}
}

@media(max-width:767px){
    #inner-content, #main-container{min-height:auto}
    #inner-content{padding-left:0}
    .page_header .inline-button{position:static}
}

.social-icons {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.social-icons img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    transition: opacity 0.2s;
}

.social-icons a:hover img {
    opacity: 0.7;
}

.footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 40px;
    row-gap: 0;
}

.footer-row > .col-md {
    padding: 0 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
}

@media (max-width: 768px) {
    .footer-row {
        flex-direction: column;
        column-gap: 0;
        row-gap: 15px;
    }

    .footer-row > .col-md {
        width: 100% !important;
        flex: 0 0 auto !important;
    }
}

#app {
    position: relative;
}

#app {
    position: relative;
}

.top-banner-wrapper {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
    z-index: 10;
}

.top-banner-wrapper a {
    display: block;
    width: 100%;
    max-width: 798px;
    height: 90px;
}

.top-banner {
    width: 100%;
    max-width: 798px;
    height: 90px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.background-ad {
    position: absolute;
    top: 100px;
    left: 0;
    width: 100%;
    height: calc(1080px - 100px);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

.background-ad-pos {
    top: -200px;
    height: calc(1080px - 200px);
}

#app > *:not(.background-ad):not(.top-banner-wrapper) {
    position: relative;
    z-index: 2;
}

.has-background {
    margin-top: 200px;
}

.item-media-cell {
    width:150px;
    height:150px;
    position:relative;
    overflow:hidden;
    border-radius:8px;
    display:block;
    cursor:pointer;
}

.item-media-cell img {
    width:100%;
    height:100%;
    object-fit:cover;
    filter:brightness(0.6);
    transition:0.3s ease;
}

.item-media-cell:hover img {
    filter:brightness(1);
}

.item-media-video::after {
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:48px;
    height:48px;
    transform:translate(-50%, -50%);
    background:rgba(255, 0, 0, 0.85);
    border-radius:50%;
    z-index:2;
}

.item-media-video::before {
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-35%, -50%);
    width:0;
    height:0;
    border-top:10px solid transparent;
    border-bottom:10px solid transparent;
    border-left:16px solid white;
    z-index:3;
}

.popular-game-cell {
    width:250px;
    height:250px;
    position:relative;
    overflow:hidden;
    border-radius:10px;
    display:block;
    cursor:pointer;
}

.popular-game-cell img {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
    transition:0.3s ease;
}

@media (max-width: 576px) {
    .popular-game-cell {
        width:100%;
        height:200px;
    }
}

.game-grid,
.news-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 25px;
}

.game-item,
.news-item {
    width: calc(20% - 13px);
    display: block;
    text-decoration: none;
    color: inherit;
}

.game-item:hover,
.news-item:hover {
    text-decoration: none;
}

.game-cell,
.news-cell {
    width: 100%;
    height: 150px;
    overflow: hidden;
    border-radius: 8px;
}

.game-cell img,
.news-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.game-title,
.news-title {
    margin-top: 6px;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
}

@media (max-width: 1200px) {
    .game-item,
    .news-item { width: calc(25% - 13px); }
}

@media (max-width: 992px) {
    .game-item,
    .news-item { width: calc(33.333% - 13px); }
}

@media (max-width: 768px) {
    .game-item,
    .news-item { width: calc(50% - 13px); }
}

@media (max-width: 320px) {
    .game-item,
    .news-item { width: 100%; }
}

.og-filter-bar {
    background: #fff;
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    margin-bottom: 20px;
}

.og-filter-row {
    display: flex;
    gap: 20px;
    flex-wrap: nowrap;
    align-items: flex-start;
}

.og-dropdown {
    position: relative;
    user-select: none;
}

.og-dropdown-toggle {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    white-space: nowrap;
}

.og-dropdown-arrow {
    font-size: 12px;
    transition: transform .2s ease;
}

.og-dropdown.open .og-dropdown-arrow {
    transform: rotate(180deg);
}

.og-dropdown-menu {
    position: absolute;
    top: 110%;
    left: 0;
    background: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    padding: 6px 0;
    display: none;
    max-height: 260px;
    overflow-y: auto;
    min-width: 180px;
    width: max-content;
    white-space: normal;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    z-index: 20;
}

.og-dropdown.open .og-dropdown-menu {
    display: block;
}

.og-dropdown-item {
    display: block;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
}

.og-dropdown-item:hover {
    background: #f5f5f5;
}

.og-dropdown-item input {
    display: none;
}

.og-dropdown-item.og-selected {
    color: #007bff;
}

.og-right {
    display: flex;
    gap: 10px;
    margin-left: auto;
}

.og-reset-all,
.og-reset-all:focus,
.og-reset-all:active {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    outline: none;
}

.og-reset-all:hover {
    text-decoration: none;
}

.og-reset-all,
.og-all-games  {
    font-size: 15px;
    color: #ff3b3b;
    text-decoration: none;
    cursor: pointer;
    display: none;
}

.og-all-games {
    color: #007bff;
    display: block;
}

.og-dropdown:has(input:checked) .og-dropdown-toggle {
    color: #007bff;
}

@media (max-width: 768px) {
    .og-filter-bar {
        padding: 0;
    }

    .og-filter-row {
        flex-direction: column;
        gap: 12px;
    }

    .og-dropdown {
        width: 100%;
    }

    .og-dropdown-toggle {
        width: 100%;
        justify-content: space-between;
        font-size: 16px;
        color: #333;
        padding: 14px 16px;
        border-radius: 10px;
        background: #fff;
        border: none;
    }

    .og-dropdown-arrow {
        margin-left: auto;
    }

    .og-dropdown-menu {
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + 4px);
        width: 100%;
        min-width: 0;
        border-radius: 10px;
        border: none;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        background: #fff;
        padding: 8px 0;
    }

    .og-dropdown-item {
        padding: 12px 16px;
        width: 100%;
        border: none;
    }

    .og-dropdown-item:last-child {
        border: none;
    }

    .og-right {
        flex-direction: column;
        width: 100%;
    }

    .og-filter-bar .og-reset-all,
    .og-filter-bar .og-all-games {
        display: block;
        width: 100%;
        text-align: left;
        padding: 14px 16px;
        border-radius: 0 0 10px 10px;
        background: #ffe6e6;
        border: none;
    }

    .og-filter-bar .og-all-games {
        background: #fff;
    }
}

@media (max-width: 768px) {
    .sidebar-h {
        display: none;
    }
}