:root {
    --color-primary: #e20a3e;
    --color-primary2: #9b0d2e;
    --plyr-color-main: #e20a3e;
    --color-dark: #8f96af;
    --color-dark2: #343744;
    --color-dark3: #2c2f3a;
    --color-light: #eff1f5;
    --color-light2: #e4e7ec;
    --color-light3: #F2F5FC;
    --color-bg: #1a1c24;
    --color-white: #ffffff;
    --color-black: #1a1c24;
    --color-whites: #ffffff;
    --color-yellow: #eab308;
}

.container {
    width: 1370px;
    max-width: 1370px;
}

body,
html {
    transition: opacity .3s;
    font-size: 16px;
    margin: 0 auto;
    line-height: 1.8em;
    padding: 0;
    background: var(--color-black);
    color: var(--color-white);
    color-scheme: dark;
}

html,
body {
    overscroll-behavior: none;
}

body > *{
    transition: opacity .3s;
}
body.notloaded > *{
    opacity: 0;
}
.navbar-toggler.collapsed {
    display: none;
}

header {
    padding: 0;
    z-index: 999;
    position: relative;
}

header .container {
    display: flex;
    flex-wrap: nowrap;
    padding: 0;
    margin: 0 auto;
}

.navbar-nav.headermenu {
    display: block;
    width: 100%;
}

.navbar-nav.headermenu .left-nav {
    float: left;
    margin-top: -3px;
}

.navbar-nav.headermenu .nav-item {
    float: right;
}

.nav-item.nav-icon {
    position: relative;
}

.nav-item.nav-icon .dropdown-toggle::after {
    display: none;
}

.nav-icon .badge {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    background: var(--color-primary);
    border: 0;
    border-radius: 15px;
    font-size: 14px;
    line-height: 18px;
    height: 24px;
    min-width: 24px;
    text-align: center;
    color: var(--color-white);
}

.btn-gcoin label {
    cursor: pointer;
    margin: 0;
    color: var(--color-whites);
    text-align: center;
    font-size: 15px;
    line-height: 20px;
    font-family: "Open Sans", "Yek";
    font-weight: bold;
    border-left: 1px solid var(--color-dark2);
    padding: 3px 5px 5px 10px;
}

.btn-gcoin label small {
    display: block;
    height: 18px;
    line-height: 17px;
    font-size: 12px;
    text-align: center;
    background: var(--color-primary);
    color: var(--color-whites);
    border-radius: 5px;
    font-weight: bold;
    margin-top: 3px;
    padding: 0 6px;
}

.dropdown-item.dropdown-profile {
    padding: 10px 15px 5px !important;
}

.btn-user .dropdown-menu {
    min-width: 300px;
}

.dropdown-menu a.dropdown-item .alert,
.dropdown-menu button.dropdown-item .alert {
    padding: 5px;
    margin: 0;
    font-size: 13px;
    background: transparent;
    color: var(--color-dark);
}

.dropdown-menu a.dropdown-item .alert img,
.dropdown-menu button.dropdown-item .alert img {
    float: right;
    width: 20px;
    height: 20px;
    margin: 3px;
}

.dropdown-menu a.dropdown-item label,
.dropdown-menu button.dropdown-item label {
    float: left;
    font-size: 14px;
    margin: 0;
}

.navbar-nav {
    float: none;
}

.navbar-nav.headermenu .nav-item>a {
    color: var(--color-light2) !important;
    padding: 10px;
    margin-left: 5px;
    display: block;
    line-height: 27px;
    margin-top: 0;
    margin-bottom: 0;
}

.navbar-nav.headermenu .nav-item>a svg {
    width: 24px;
    height: 24px;
}

.dropdown-toggle.gameup svg {
    width: 150px !important;
    height: 20px !important;
}

.gameup::before {
    content: "";
    background-color: var(--color-dark2);
    position: absolute;
    left: 14px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    top: 15px;
}

.navbar-nav.headermenu .nav-item>a::after {
    margin: 0;
    top: 4px;
    position: relative;
    margin: 0 5px;
}

.navbar-nav.headermenu .nav-item>a:hover,
.navbar-nav.headermenu .nav-item>a:focus {
    color: var(--color-primary);
}

.navbar-nav.headermenu .nav-item>a.btn.btn-effect.button {
    padding: 0;
}

.newbg {
    margin: 0;
    background: var(--color-yellow);
    color: var(--color-black);
    border-radius: 10px;
    font-size: 12px;
    padding: 0 7px;
    margin: 0 10px;
}

.dropdown-menu {
    text-align: right;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 10px 20px;
    border-radius: 10px;
    min-width: 200px;
    border: 0;
    padding: 15px;
    background: var(--color-dark3);
    border-bottom: 4px solid var(--color-primary);
}

.dropdown-menu.big-menu.show {
    min-width: 700px;
    display: flex;
    flex-wrap: nowrap;
    max-width: 700px;
}

.menutitle {
    position: relative;
    min-width: 100%;
    padding: 5px;
    color: var(--color-primary) !important;
    font-weight: bold;
    font-size: 20px;
    margin: 0 !important;
    overflow: hidden;
    display: block;
}

.big-menu-list {
    min-width: 300px;
}

.navbar-nav.headermenu .nav-item .dropdown-menu {
    top: 0 !important;
}

.dropdown-menu a.dropdown-item,
.dropdown-menu button.dropdown-item {
    color: var(--color-light);
    position: relative;
    display: block;
    padding: 10px 15px;
    border-radius: 10px;
    min-width: 150px;
    font-size: 17px;
}

.dropdown-menu a.dropdown-item.more-item,
.dropdown-menu button.dropdown-item.more-item {
    margin-top: 5px;
    text-align: left;
    font-size: 12px;
    padding: 7px 15px 7px 30px;
}

.dropdown-menu a.dropdown-item.more-item::after,
.dropdown-menu button.dropdown-item.more-item::after {
    content: "";
    border: 0;
    background-color: transparent;
    background-image: url('../svg/more.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 18px;
    height: 18px;
    position: absolute;
    top: 13px;
    left: 10px;
    right: auto;
}

.dropdown-menu a.dropdown-item:hover,
.dropdown-menu button.dropdown-item:hover,
.dropdown-menu a.dropdown-item:focus {
    background: var(--color-dark2);
    color: var(--color-light);
}

.big-menu-scr {
    padding: 20px;
    color: var(--color-light);
}

.big-menu-scr a>img {
    border-radius: 15px;
    margin-bottom: 10px;
}

.big-menu-scr a>b {
    font-size: 20px;
    font-weight: normal;
    margin-bottom: 10px;
    display: block;
    color: var(--color-whites);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    line-height: 1.5em;
    -webkit-box-orient: vertical;
    white-space: normal;
    min-height: 60px;
}

.big-menu-scr a>span {
    font-size: 13px;
    font-weight: normal;
    margin-bottom: 10px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    line-height: 1.8em;
    -webkit-box-orient: vertical;
    white-space: normal;
    min-height: 70px;
    text-align: justify;
    color: var(--color-dark);
}

.socials {
    display: flex;
    flex-wrap: wrap;
}

.socials a {
    display: block;
    margin-left: 10px;
}

.socials a b {
    display: inline-block;
    text-transform: capitalize;
    font-weight: normal;
}

.socials a.slowlink {
    background: var(--color-primary);
    border-radius: 50px;
    padding: 0 10px;
    color: var(--color-whites);
    font-size: 13px;
    margin: 2px 0 2px 10px;
}

.socials a.slowlink:hover {
    background: var(--color-primary2);
}

.socials a svg {
    width: 25px;
    height: 25px;
}

.socials a.slowlink svg {
    margin-right: -7px;
    position: relative;
    width: 23px;
    height: 23px;
    position: relative;
    top: -1px;
}

.socials a svg path {
    fill: var(--color-dark);
}

.socials a:hover svg path {
    fill: var(--color-primary);
}

.socials a.slowlink svg path,
.socials a.slowlink:hover svg path {
    fill: var(--color-whites);
}

.socials a.slowlink {
    background: var(--color-primary);
    border-radius: 50px;
    padding: 0 10px;
    color: var(--color-whites);
    font-size: 13px;
}

.gamedet_inner .socials a {
    padding: 5px;
    border-radius: 10px;
    direction: ltr;
    margin: 6px;
    min-width: calc(25% - 20px);
    text-align: left;
    line-height: 33px;
    color: var(--color-dark);
}

.gamedet_inner .socials a:hover {
    color: var(--color-whites);
}

.gamedet_inner .socials a svg {
    width: 33px;
    height: 33px;
    float: left;
    margin: 0 10px 0 0;
}


/*title*/

.title {
    padding: 15px 15px 10px;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.backt {
    float: right;
    padding: 0;
    width: 30px;
    height: 30px;
    margin: -2px 0 0 5px;
}

.moret {
    float: left;
    padding: 0;
    width: 30px;
    height: 30px;
    margin: -2px 5px 0 5px;
}

.bordner .title {
    padding: 0;
}

.title h3,
.title h2,
.title h1 {
    float: right;
    font-size: 24px;
    font-weight: normal;
    line-height: 38px;
}

.title small,
.title small,
.title small {
    display: block;
    width: 100%;
    overflow: hidden;
    color: var(--color-dark);
    font-size: 15px;
}

.title h3 svg,
.title h2 svg,
.title h1 svg {
    width: 32px;
    height: 32px;
    float: right;
    margin-left: 15px;
    margin-top: 5px; /*e*/
}

.title h3 svg path,
.title h2 svg path,
.title h1 svg path,
.title h3 svg rect,
.title h2 svg rect,
.title h1 svg rect {
    fill: var(--color-white);
}

a.more,button.more {
    position: relative;
    color: var(--color-dark) !important;
    float: left;
    display: block;
    margin-right: 10px;
    padding: 1px 10px;
    background: var(--color-dark2);
    border-radius: 10px;
    font-size: 14px;
    line-height: inherit !important;
}

a.more:hover,
a.more:focus,
button.more:hover,
button.more:hover {
    color: var(--color-whites) !important;;
    background: var(--color-primary);
}

.section {
    padding: 15px;
    margin: 0 auto;
    overflow: hidden;
    width: 100%;
    border-radius: 0;
}


/*form*/

form {
    width: 100%;
}

.loginbox {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    padding: 25px;
    min-height: 100vh;
}

.loginbox h3 {
    text-align: center;
    font-weight: normal;
    margin: 15px auto;
    font-size: 16px;
    color: var(--color-dark);
}

.form-group.icon-gp {
    position: relative;
}


/*header*/

.topmenu {
    border-radius: 0;
    padding: 20px;
}

header .logo {
    float: right;
    width: 255px;
    flex-shrink: 0;
    min-height: 48px;
    margin: 0 0 0 15px;
    padding: 0;
    height: 44px;
    position: relative;
    overflow: hidden;
    top: 4px;
}


/*search*/

.topsearch {
    position: relative;
    padding: 0;
    margin: 0 10px;
    float: right;
    width: auto;
    width: 100%;
    max-width: 18vw;
}

.topsearch input.sput {
    background: var(--color-dark2);
    margin: 0 !important;
    padding: 0 15px 0 30px;
    color: var(--color-white) !important;
    height: 49px;
    border: 0;
    text-align: right;
}

.topsearch input.sput:focus {
    box-shadow: none;
}

.topsearch button.sbtn , .topsearch button.bbtn {
    border: 0;
    position: absolute;
    left: 0;
    top: 0;
    background: transparent;
    margin: 0;
    padding: 0;
    height: 48px;
    width: 48px;
    line-height: 23px;
}

.topsearch button.sbtn svg , .topsearch button.bbtn svg {
    position: relative;
    width: 22px;
    height: 22px;
}


/*footer*/

.topmenu {
    border-bottom: 1px solid var(--color-dark2);
    margin-bottom: 25px;
}

footer {
    padding: 35px 0;
    margin-top: 50px;
    border-top: 1px solid var(--color-dark2);
}

.copyright {
    position: relative;
    padding-right: 70px;
}

.copyright .sfool {
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    margin: 10px;
}

.copyright .sfool>svg path {
    fill: var(--color-dark);
}

.copyright .sfool:hover>svg path {
    fill: var(--color-primary);
}

.footlogo {
    max-width: 60px;
    margin: 0 0 15px 15px;
}

footer .frow {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    padding: 0;
}

footer .frow aside {
    width: 100%;
}

.footerlinks ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footerlinks ul li {
    display: inline-block;
    margin-left: 5px;
    margin-bottom: 5px;
}

.footerlinks ul li a {
    display: block;
    padding: 2px 10px 5px;
    border-radius: 10px;
}

.footerlinks ul li a:hover,
.footerlinks ul li a:focus {
    background: var(--color-dark2);
    color: var(--color-white);
}

footer .frow aside.namads ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: end;
}

footer .frow aside.namads ul li {
    max-width: 80px;
    padding: 5px;
    margin-right: 10px;
    background: var(--color-light2);
    border-radius: 10px;
}

footer .frow aside>span {
    display: block;
    color: var(--color-dark);
    font-size: 13px;
}


/*slideshow*/

.swp,
.slideshow {
    position: relative;
}

.slideshow .swiper-slide-next,
.slideshow .swiper-slide-prev {
    opacity: 0.2;
}

.slideshow .swp-nav.swiper-button-prev {
    right: 0;
}

.slideshow .swp-nav.swiper-button-next {
    left: auto;
    right: calc(70% - 15px);
}

.swiper-button-next,
.swiper-button-prev {
    background-image: none !important;
    background-color: var(--color-primary);
    width: 40px !important;
    height: 50px !important;
    padding: 7px;
}

.swiper-button-next svg {
    width: 25px;
    height: 25px;
    position: absolute;
    left: 0;
    bottom: 0;
    margin: 5px;
}

.swiper-button-prev svg {
    width: 25px;
    height: 25px;
    position: absolute;
    right: 0;
    top: 0;
    margin: 5px;
}

.overflow {
    border-radius: 15px;
    overflow: hidden;
    margin: 15px;
    position: relative;
    background: var(--color-dark2);
}

.swiper-pagination {
    bottom: 0 !important;
    position: relative !important;
}

.slideshow .swiper-pagination {
    position: absolute !important;
    width: auto !important;
    left: 0 !important;
    bottom: 0 !important;
}

.swiper-pagination-bullet {
    opacity: 1;
    background: var(--color-dark) !important;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--color-primary) !important;
}

.slideshow .swiper-slide>a {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

.slideshow .swiper-slide .overflow {
    min-width: 70%;
}

.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
    opacity: 0 !important;
}

.sgallery {
    display: flex;
    margin: 15px 0;
    flex-wrap: wrap;
}

.sgallery>img {
    width: calc(50% - 10px);
    border-radius: 10px;
    margin: 5px;
    height: 100px;
    background: var(--color-dark3);
    object-fit: cover;
    aspect-ratio: 1.77777/1;
}

.sgallery>img:hover {
    transform: scale(1.05);
    z-index: 9;
}

.gslide_side>h2 {
    font-size: 25px;
    font-weight: normal;
    margin-bottom: 10px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    line-height: 1.5em;
    padding: 0 5px;
    -webkit-box-orient: vertical;
    white-space: normal;
    min-height: 70px;
    color: var(--color-white);
}

.gslide_side>span {
    font-size: 13px;
    font-weight: normal;
    margin-bottom: 10px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    line-height: 1.8em;
    -webkit-box-orient: vertical;
    white-space: normal;
    min-height: 70px;
    text-align: justify;
    color: var(--color-dark);
}

:root {
    --sh-c: #1e293b;
}

.genre:hover,
.gamecover:hover {
    box-shadow: 0 0 0 0 var(--sh-c);
    animation: logol1 200ms ease-in-out 1 forwards;
    animation-duration: 1600ms;
}

@keyframes logol1 {
    0% {
        box-shadow: 0 0 0 5px var(--sh-c);
    }
    25% {
        box-shadow: 0 0 0 0 var(--sh-c);
    }
    100% {
        box-shadow: 0 0 0 0 var(--sh-c);
    }
}

.swp .swiper-slide {
    opacity: 0.3;
}

.sw_2t .swiper-slide,
.sw_2-5t .swiper-slide,
.sw_4t .swiper-slide,
.swiper-slide.swiper-slide-active,
.big_games .swiper-slide,
.swp .swiper-slide.swiper-slide-visible {
    opacity: 1;
}


/*genre*/

.overflow.genre {
    margin: 5px;
    position: relative;
}

.overflow.genre h2 {
    position: absolute;
    color: var(--color-whites);
    top: 0;
    padding: 25px 100px 25px 25px;
    font-size: 20px;
    background-image: linear-gradient(90deg, rgba(26, 28, 36, .8) 30%, rgba(26, 28, 36, 0) 120%);
    text-align: left;
    right: 0;
    left: 0;
    bottom: 0;
    top: 0;
    height: 100%;
    width: 100%;
    transform: scale(1);
    transition: all 200ms ease-in-out;
}

.overflow.genre:hover h2 {
    transform: scale(1.1);
    transition: all 200ms ease-in-out;
}


/*download*/

.downloadbox {
    background: var(--color-dark3);
    padding: 50px;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
}

.downloadbox .background {
    position: absolute;
    height: 100%;
    max-width: 1000000px;
    width: auto;
    z-index: 0;
    right: 0;
    top: 0;
    bottom: 0;
    animation: rotate-line 40s linear infinite;
}

@keyframes rotate-line {
    0% {
        transform: translate(0%);
    }
    100% {
        transform: translate(50%);
    }
}

.downloadbox::after {
    content: "";
    background-image: linear-gradient(90deg, rgba(26, 28, 36, 1) 20%, rgba(26, 28, 36, .8) 60%, rgba(26, 28, 36, 0) 120%);
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
}

.dlinner {
    position: relative;
    z-index: 2;
    padding: 25px 0;
    float: left;
}

.dlinner>svg {
    width: 250px;
    margin: 0 0 25px;
    display: block;
}

.dlinner>svg path {
    fill: var(--color-dark);
}

.dlinner>h2 {
    margin: 15px auto;
}

.dlinner>p {
    font-size: 14px;
    display: block;
    max-width: 350px;
    text-align: justify;
}

.dlinner>ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dlinner>ul li {
    float: right;
    margin: 5px;
    font-size: 12px;
    background: var(--color-dark2);
    padding: 5px 10px;
    border-radius: 10px;
}

.dlinner>ul li label {
    margin: 0;
}

.dlinner .btn {
    margin: 15px 0;
}

.dlinner .btn span {
    padding: 15px 30px;
    display: block;
    text-align: center;
    font-size: 18px;
}


/*post*/

.posthumb>a {
    display: block;
    color: var(--color-whites);
    padding: 5px;
    position: relative;
}

.postimg {
    display: block;
    margin-bottom: 15px;
    width: 100%;
    overflow: hidden;
    border-radius: 20px;
    position: relative;
}

.posthumb>a h2 {
    font-size: 21px;
    font-weight: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    min-height: 67px;
    line-height: 1.6em;
    -webkit-box-orient: vertical;
    padding: 0 15px;
}

.posthumb>a span {
    font-size: 16px;
    font-weight: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    min-height: 52px;
    line-height: 1.6em;
    -webkit-box-orient: vertical;
    padding: 0 15px;
    color: var(--color-dark);
    margin-bottom: 15px;
}

.detpost {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    padding: 0 15px 10px;
}

.detpost li,
.detpost li a,
.detpost li a:hover {
    width: auto;
    margin: 4px 0 0 25px;
    font-size: 14px;
    color: var(--color-dark);
    float: right;
    display: block;
}

.detpost li svg {
    width: 18px;
    height: 18px;
    margin: 0 0 0 2px;
    position: relative;
    top: -1px;
    margin: 0 0 4px;
}

.detpost li svg path {
    fill: var(--color-dark);
}


/*breadcrumb*/

.breadcrumb {
    background: transparent;

    padding: 10px;
}

.breadcrumb a {
    color: var(--color-white);
}

.breadcrumb a:hover {
    color: var(--color-white);
}

.breadcrumb-item+.breadcrumb-item::before {
    float: right;
    padding-left: .5rem;
    color: var(--color-dark);
}


/*products*/

#catcontent {
    display: flex;
    flex-wrap: nowrap;
    margin: 0 auto;
}

#appbar {
    width: 300px;
    min-width: 300px;
}

.sidebar__inner {
    width: 100%;
    padding-bottom: 40px;
}

.sidebar .accordion-item {
    border: 0;
    border-bottom: 1px solid var(--color-dark3);
    background: transparent;
    padding: 10px;
    margin: 0;
    border-radius: 0;
}

.sidebar .accordion-item>h2 button {
    margin: 0;
    padding: 0;
    font-size: 18px;
}

.accordion-button::before {
    display: none !important;
}

.sidebar .accordion-button,
.sidebar .accordion-button:hover,
.sidebar .accordion-button:focus {
    color: var(--color-white);
}

.sidebar .accordion-item .accordion-button::after {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    display: block;
    float: right;
    margin: 11px 5px 11px 11px;
    border-radius: 0;
}

.sidebar .accordion-item .accordion-button.collapsed::after {
    background: var(--color-dark2);
}

.sidebar .accordion-body {
    padding: 15px 0 0;
}


/*categories*/

.dropcat,
.dropcat li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dropcat li a {
    color: var(--color-dark);
}

.dropcat li a:hover,
.dropcat li.current a {
    color: var(--color-white);
}

.dropcat li.current a {
    font-weight: bold;
}

.dropcat>li::before {
    content: "";
    border: 0;
    background-color: transparent;
    background-image: url('../svg/left.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 18px;
    height: 18px;
    display: block;
    float: right;
    margin: 5px;
}

li.havsub::before {
    background-image: url('../svg/left.svg') !important;
}

.dropcat>li>ul>li::before {
    content: "";
    border: 0;
    background-color: transparent;
    background-image: url('../svg/left.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 18px;
    height: 18px;
    display: block;
    float: right;
    margin: 5px;
}

.dropcat>li>ul>li>ul,
.dropcat>li>ul {
    margin: 0;
    padding: 0 35px 0 0;
}

.dropcat li a {
    display: block;
    padding: 3px;
}

.accordion-body input {
    padding: 10px 15px;
    text-align: right;
}

.fitheight {
    max-height: 200px;
    overflow-y: auto;
}


/*checkbox*/

.cktype {
    cursor: pointer;
    margin: 0;
    padding: 8px 30px 8px 8px;
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    font-size: 16px;
    position: relative;
}

.cktype>b {
    font-weight: normal;
    color: var(--color-dark);
}

.cktype>input {
    visibility: hidden;
    position: absolute;
}

.cktype>i {
    border: 2px solid var(--color-dark);
    border-radius: 7px;
    position: absolute;
    right: 0;
    top: 0;
    width: 18px;
    height: 18px;
    margin: 11px 4px;
}

.cktype>input:checked+i {
    border: 2px solid var(--color-primary);
    background-color: var(--color-primary);
    background-image: url('../svg/check.svg');
    background-position: 0;
    background-repeat: no-repeat;
    background-size: 15px;
}

.cktype>input:checked+b {
    color: var(--color-white) !important;
}


/*switch*/

.form-group.swbox {
    margin: 0;
    padding: 10px;
    display: flex;
    cursor: pointer;
}

.form-group.swbox>b {
    font-weight: normal;
    display: inline-block;
    padding: 0;
    margin: 0;
    height: 24px;
    line-height: 24px;
    position: relative;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    top: 2px;
}

.form-group.swbox>b>small {
    float: left;
    font-size: 13px;
}

.switch {
    position: relative;
    width: 40px;
    min-width: 40px;
    height: 24px;
    display: inline-block;
    margin: 0 0 0 10px;
}

.minisw.switch {
    width: 26px;
    height: 17px;
    padding: 0;
    margin: 4px;
}

.switch input {
    opacity: 0;
    width: 1px;
    height: 1px;
}

.switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-dark2);
    transition: .4s;
}

.switch .slider::before {
    position: absolute;
    content: '';
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background-color: #fff;
    transition: .4s;
}

.minisw.switch .slider::before {
    height: 11px;
    width: 11px;
}

.minisw.switch .slider::before {
    left: 3px;
    bottom: 3px;
}

input:checked+.slider {
    background-color: var(--color-primary);
}

input:checked+.slider:before {
    transform: translateX(16px);
    background-color: #fff;
}

.minisw input:checked+.slider:before {
    transform: translateX(9px);
}

.round {
    border-radius: 34px;
}

.round:before {
    border-radius: 50%
}


/*game page*/

.gamecontent {
    padding: 20px;
    margin: 20px auto;
    font-size: 15px;
    color: var(--color-dark);
    line-height: 1.8em;
}

.gamecontent * {
    text-align: justify;
}

.gamecontent h2 {
    font-size: 20px;
}

.gamecontent a, .gamecontent a:visited {
    color: #CFD2DA;
    border-bottom: 2px solid;
}

.gamecontent a:hover, .gamecontent a:focus {
    color: var(--color-primary);
}

.gallery-top {
    margin: 20px auto 0;
}

.gallery-top .swiper-slide {
    max-height: 556px !important;
}

.gallery-top .swiper-slide video,
.gallery-top .swiper-slide img {
    height: 100%;
    object-position: center;
    object-fit: contain;
    display: block;
    min-height: 556px;
}


.gallery-top .swiper-slide {
    max-height: 556px !important;
    background: #000 !important;
}

.gallery-top .swiper-slide video,
.gallery-top .swiper-slide img {
    max-width: 100%;
    max-height: 556px;
    object-position: center;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.gallery-thumbs {
    box-sizing: border-box;
    padding: 10px 0;
    margin-bottom: 20px;
}

.gallery-thumbs .swiper-slide {
    width: 20%;
    aspect-ratio: 16 / 9;
    opacity: 0.4;
    cursor: pointer;
    display: flex;
    position: relative;
    overflow: hidden;
    background: #000;
}
.gallery-thumbs .swiper-slide img,
.gallery-thumbs .swiper-slide video{
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
    min-width: 100%;
    min-height: 100%;
    flex-grow: 0;
}

.gallery-thumbs .swiper-slide-active {
    opacity: 1;
}

.gallery-thumbs .swiper-slide svg {
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.3);
    padding: 5px;
    width: 30px;
    height: 30px;
    margin: 6px;
    border-radius: 50%;
}

.gamedetbox {
    margin: 15px;
}

.gamedet_inner {
    background: var(--color-dark3);
    padding: 30px;
    margin: 0;
    border-radius: 15px;
}

.gamedet_inner .socials {
    justify-content: left;
}

.minimal-tabs {
    display: flex;
    justify-content: start;
    direction: rtl;
    border-bottom: 1px solid var(--color-dark2);
    margin-bottom: 20px;
}

.minimal-tabs button {
    margin: 0;
    margin-bottom: 0px;
    margin-left: 0px;
    background: transparent;
    margin-left: 25px;
    border-radius: 0;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    color: var(--color-dark) !important;
}

.minimal-tabs button.active {
    color: var(--color-white) !important;
    border-bottom: 3px solid var(--color-primary);
}

.systemli {
    display: flex;
    padding: 0;
    direction: ltr;
    margin-top: 0;
}

.systemli>ul {
    width: 100%;
    text-align: left;
    padding: 5px;
    list-style: none;
    margin: 0;
    padding: 25px;
}

.systemli>ul>li {
    font-size: 14px;
    color: var(--color-white);
    text-transform: capitalize;
    font-family: "Open Sans", "Yek";
    direction: ltr;
    text-align: left;
    margin-bottom: 15px;
    line-height: 20px;
}

.systemli>ul>li:first-child {
    font-weight: bold;
    color: var(--color-white);
    font-size: 14px;
    text-align: left;
}

.systemli>ul>li::before {
    content: attr(data-attr);
    float: none;
    color: var(--color-dark);
    display: block;
    margin: 0 0 2px 0;
}


/*game bar*/

.sidebar__game>img,.sidebar__game>*>img {
    max-width: 200px;
    max-height: 200px;
    display: block;
    margin: 50px auto;
}

.sidebar__game.sidebar__card>img,.sidebar__game.sidebar__card>*>img {
    max-width: 100%;
    max-height: 100%;
    margin: 20px auto;
    border-radius: 20px;
}

.sidebar__card .title {
    padding: 15px 0 0;
}

.sidebar__card .title h2 {
    font-size: 18px;
}

.sidebar__game.sidebar__card .gamethumb h2 {
    font-size: 25px;
}

.sidebar__game .pricebox {
    height: auto;
    padding: 15px;
}

.sidebar__game .pricebox>.price {
    font-size: 23px;
    line-height: 30px;
    max-height: 30px;
}

.sidebar__game .pricebox>.price.price_line {
    font-size: 18px;
    max-height: 20px;
    line-height: 20px;
}

.sidebar__game .pricebox>label.badge_off {
    font-size: 20px;
    padding: 10px 10px 10px 30px;
    height: 37px;
    font-weight: bold;
    margin: 15px 6px;
    border-radius: 25px;
    z-index: 9;
    line-height: 19px;
}

.sidebar__game .pricebox>label.badge_off::after {
    width: 20px;
    height: 20px;
    top: 8px;
    left: 8px;
}

.badge_off .signal {
    z-index: -1;
    margin: -6px auto;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
}

.badge_off.off_cover .signal {
    right: -5px;
}

.btn-lx {
    padding: 15px;
    font-size: 18px;
}

.gametag {
    display: flex;
    padding: 0;
    direction: ltr;
    margin-top: 0;
}

.gametag>ul {
    width: 100%;
    text-align: right;
    padding: 10px 5px;
    list-style: none;
    margin: 0;
}

.gametag>ul>li {
    font-size: 14px;
    color: var(--color-white);
    text-align: left;
    margin: 0;
    line-height: 20px;
    height: auto;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-dark2);
    overflow: hidden;
}

.gametag>ul>li:last-child {
    border-bottom: 0;
}

.gametag>ul>li>a {
    display: inline-block;
    margin: 0 1px;
    padding: 0 1px;
}

.gametag>ul>li>a:last-child {
    margin-left: 0;
    padding-left: 0;
}

.gametag>ul>li>a:after,
.gametag>ul>li>a:hover:after {
    content: " , ";
    color: var(--color-white);
}

.gametag>ul>li>a:last-child:after {
    display: none;
}

.gametag>ul>li::before {
    content: attr(data-attr);
    float: right;
    color: var(--color-dark);
    margin: 0 0 0 10px;
}

.gametag>ul>li.bigli {
    font-size: 18px;
    overflow: hidden;
    padding: 10px 0;
    height: 44px;
}

.gametag>ul>li.bigli::before {
    color: var(--color-white);
}

.gametag>ul>li.redli::before,
.gametag>ul>li.redli {
    color: var(--color-primary);
}

.plat .game_badges,
.plat .devices {
    position: relative;
    top: auto;
    margin: 0;
    background: transparent;
    padding: 0;
    border-radius: 0;
}

.plat .game_badges img,
.plat .game_badges svg,
.plat .devices svg {
    width: 20px;
    height: 20px;
}

.plat .devices svg path {
    fill: var(--color-white);
}


/*games */

.devices {
    position: absolute;
    left: 0;
    bottom: 0;
    margin: 5px;
    background: var(--color-bg);
    border-radius: 15px;
    padding: 6px;
}

.devices svg {
    width: 16px;
    height: 16px;
    float: left;
    margin: 0 2px;
}

.devices svg path {
    fill: var(--color-whites);
}

.gamecover {
    margin: 0;
    position: relative;
    overflow: hidden;
    border-radius: 15px;
}

.gamecover *:hover {
    cursor: pointer;
}

.gamecover img {
    width: 100%;
}

.bigame a>h2 {
    font-size: 25px;
    font-weight: normal;
    margin-bottom: 10px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    line-height: 1.5em;
    padding: 0 5px;
    -webkit-box-orient: vertical;
    white-space: normal;
    min-height: 70px;
    color: var(--color-white);
}


/*game type1*/

.gamethumb {
    padding-top: 15px;
    position: relative;
}

.gamethumb:hover {
    z-index: 9;
    position: relative;
}

.gamethumb h2 {
    font-size: 20px;
    font-weight: bold;
    margin: 0 10px 10px;
    display: block;
    overflow: hidden;
    line-height: 1.5em;
    padding: 10px 5px;
    color: var(--color-white);
    text-align: right;
    direction: revert;
    font-family: "Open Sans", "Yek";
    position: relative;
}

.gamethumb h2>small {
    font-size: 13px;
    font-weight: normal;
    margin: 0;
    display: block;
    line-height: 1.5em;
    padding: 10px 0;
    color: var(--color-dark);
}

.posthumb:hover>a h2,
.gamethumb:hover h2 {
    color: var(--color-white);
}

.pricebox {
    width: 100%;
    margin: 0;
    padding: 0 10px;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    height: 50px;
    align-content: baseline;
    color: var(--color-white);
}

.pricebox>.price {
    font-size: 18px;
    max-height: 19px;
    letter-spacing: -1px;
    display: block;
    width: 100%;
    text-align: left;
    line-height: 19px;
    margin: 0;
}

.pricebox>.price>small {
    font-size: 11px;
    margin-right: 3px;
    letter-spacing: 0;
}

.pricebox>label.badge_off {
    position: absolute;
    right: 10px;
    top: -4px;
    background-color: var(--color-primary);
    width: auto !important;
    color: var(--color-white);
    min-width: 27px;
    height: 26px;
    line-height: 22px;
    text-align: center !important;
    border-radius: 25px;
    padding: 3px 7px 3px 20px;
    letter-spacing: -1px;
    font-weight: bold;
    min-height: 26px;
}

.pricebox>label.badge_off::after {
    content: "";
    border: 0;
    background-color: transparent;
    background-image: url('../svg/offer.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 5px;
    left: 4px;
    right: auto;
}

.pricebox>.price.price_line {
    color: var(--color-dark);
    text-decoration: line-through;
    font-weight: normal;
    font-size: 16px;
    margin-top: 6px;
}


/*type3*/

.bigame {
    margin: 10px;
}

.big_games.flexmode .swiper-wrapper {
    display: flex;
    flex-wrap: wrap;
}

.big_games.flexmode .swiper-wrapper .swiper-slide {
    float: right;
    width: 50%;
}

.big_games.flexmode .swiper-wrapper .swiper-slide:nth-child(n+3) {
    float: right;
    width: 33%;
}


/*fix game*/

.overflow.moreslide {
    margin: 10px;
    height: 100%;
}

.moreslide>a {
    display: flex;
    text-align: center;
    color: var(--color-dark);
    align-items: center;
    height: calc(100% - 20px);
    border-radius: 15px;
}

.sw_fix .swiper-slide.noeffect:hover .moreslide>a,
.sw_fix .swiper-slide.swiper-slide-active.noeffect .moreslide>a {
    color: var(--color-whites);
}

.moreslide>a>b {
    display: block;
    text-align: center;
    font-size: 14px;
    margin: 0 auto;
    font-weight: normal;
}

.moreslide>a>b svg {
    display: block;
    float: none;
    margin: 0 auto;
    width: 25px;
    height: 25px;
}

.moreslide>a>b svg path {
    fill: var(--color-dark);
}

.sw_fix .swiper-slide.noeffect:hover .moreslide>a>b svg path,
.sw_fix .swiper-slide.swiper-slide-active.noeffect .moreslide>a>b svg path {
    fill: var(--color-whites);
}

.section.fixgames {
    position: fixed;
    padding: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 99;
    overflow: visible;
    background: var(--color-dark3);
    border-top: 1px solid var(--color-dark);
}

.section.fixgames.down {
    bottom: -90px;
    transition: all 500ms ease-in-out;
}

.section.fixgames.down:hover,
.section.fixgames.up {
    bottom: 0;
    transition: all 500ms ease-in-out;
}

.sw_fix .swiper-wrapper {
    display: flex;
    align-items: stretch;
}

.sw_fix .swiper-slide {
    height: auto;
}

.sw_fix {
    width: 100%;
}

.title.bigtitle {
    padding: 0;
    padding: 15px;
}

.title.bigtitle h2 {
    float: none;
}

.title.bigtitle small {
    color: var(--color-dark);
    font-size: 12px;
    line-height: 20px !important;
    display: block;
}

.overflow.fixgame {
    margin: 10px;
}

.overflow.fixgame>a>div {
    position: absolute;
    transform: translateY(500px);
    bottom: 0;
}

.overflow.fixgame>a>div b {
    color: var(--color-whites);
}

.sw_fix .swiper-slide:hover,
.sw_fix .swiper-slide.swiper-slide-active,
.slidetitle {
    min-width: 130px;
}

.swiper-slide.noeffect:hover,
.swiper-slide.swiper-slide-active.noeffect,
.noeffect {
    min-width: 10px !important;
}

.sw_fix .swiper-slide:hover .overflow.fixgame,
.sw_fix .swiper-slide.swiper-slide-active .overflow.fixgame {
    margin-top: -17px;
}

.sw_fix .swiper-slide:hover .overflow.fixgame>a>div,
.sw_fix .swiper-slide-active .overflow.fixgame>a>div {
    border-radius: 15px;
    transform: translateY(0);
    text-align: center;
    background-image: linear-gradient(0deg, rgba(26, 28, 36, .95) 30%, rgba(26, 28, 36, 0) 100%);
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    top: auto;
    padding: 15px;
}

.swiper-fix-next,
.swiper-fix-prev {
    bottom: 0 !important;
    top: auto !important;
}

.swiper-fix-next {
    left: 0 !important;
}

.swiper-fix-prev {
    right: 0 !important;
}


/*support*/

.support.btn {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    left: -130px;
    border-radius: 0 50px 50px 0;
    padding: 15px;
    z-index: 99;
    transition: all 300ms ease-in-out;
    display: flex;
}

.support.btn:hover,
.support.btn.hover {
    left: 0;
    transition: all 300ms ease-in-out;
}

.support.btn img {
    width: 30px;
    height: 30px;
    display: block;
    float: right;
    margin-left: 15px;
}

@keyframes pulse-2-5 {
    0% {
        opacity: 0.75;
        transform: scale(1);
    }
    25% {
        opacity: 0.75;
        transform: scale(1.2);
    }
    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}

.signal {
    border-radius: 50%;
    height: 50px;
    width: 50px;
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: -1;
}

/* .signal>span {
    animation: pulse-2-5 1500ms linear infinite;
    border-radius: 50%;
    display: block;
    height: 100%;
    width: 100%;
}

.signal>span>span {
    animation: pulse-2-5 1500ms linear infinite;
    border-radius: 50%;
    display: block;
    height: 100%;
    width: 100%;
}

.signal>span>span:after {
    animation: pulse-2-5 1500ms linear infinite;
    border-radius: 50%;
    content: "";
    display: block;
    height: 100%;
    width: 100%;
} */

.signal span {
    background-color: rgba(226, 10, 62, .4);
}

.signal span:after {
    background-color: rgba(226, 10, 62, .2);
}


/*archive*/

.pd15 {
    padding: 15px;
}

.title.heavy h3,
.title.heavy h2,
.title.heavy h1 {
    font-size: 35px;
}

.sw_grid .swiper-wrapper {
    display: flex;
    flex-wrap: wrap;
}

.sw_grid .swiper-wrapper .swiper-slide {
    width: calc(33% - 20px);
    margin: 10px;
}

.sw1in1 .swiper-wrapper .swiper-slide {
    width: calc(100% - 20px);
}

.sw2in1 .swiper-wrapper .swiper-slide {
    width: calc(50% - 20px);
}

.sw4in1 .swiper-wrapper .swiper-slide {
    width: calc(25% - 20px);
}

.sw5in1 .swiper-wrapper .swiper-slide {
    width: calc(20% - 20px);
}

.sw6in1 .swiper-wrapper .swiper-slide {
    width: calc(16% - 14px);
}

.sw_grid .gamethumb {
    padding-bottom: 20px;
}


/*page*/

.postpage .title {
    padding: 15px;
}

.postpage .title>h1,
.postpage .title>h2,
.postpage .title>h3 {
    text-align: center;
    float: none;
    display: block;
    width: 100%;
    font-weight: bold;
    font-size: 35px;
    margin: 0 auto;
    padding: 0;
}

.postpage .title::before {
    display: none;
}

.postpage .innercontent {
    max-width: 70%;
    margin: 20px auto;
    line-height: 2em;
    color: #b5b8bf;
}

.postpage .innercontent span {
    display: block;
}

.postpage .innercontent * {
    text-align: justify;
}

.postpage .innercontent>.imgpost {
    width: 100%;
    max-width: 100%;
    margin: 20px auto;
}

.postpage .innercontent>blockquote {
    border-right: 7px solid var(--color-primary);
    font-size: 20px;
    padding: 20px;
    color: var(--color-light2);
    margin: 20px auto;
    max-width: 70%;
}

.innercontent a {
    border-bottom: 2px solid var(--color-primary);
    color: var(--color-white);
    display: inline-block;
    margin: 0 2px;
}

.innercontent a:hover {
    border-bottom: 2px solid var(--color-primary);
    color: var(--color-primary);
}


/*faq*/

.accordion-button,
.accordion-button:hover,
.accordion-button:focus {
    background: transparent;
    border: 0;
    color: var(--color-white);
    text-align: right !important;
    width: 100%;
    margin: 0;
    padding: 15px 30px;
    font-weight: bold;
    border-radius: 0;
    font-size: 20px;
}

.accordion-item>h2 {
    margin: 0;
}

.accordion-body>p {
    display: block;
    text-align: justify;
    padding: 15px;
    line-height: 1.8em;
    color: var(--color-dark);
    font-size: 17px;
}

.accordion-button::before {
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    right: 0;
    top: 20px;
    margin: 5px 8px;
    border-radius: 10px;
    background: var(--color-primary);
}

.accordion-button.collapsed,
.accordion-button.collapsed:hover,
.accordion-button.collapsed:focus {
    color: var(--color-white);
}

.accordion-item {
    border-bottom: none;
    border-radius: 31px;
    border: 1px solid var(--color-dark2);
    margin-bottom: 20px;
}

.accordion-button.collapsed:hover::before {
    background: var(--color-primary);
}

.accordion-button.collapsed::before {
    background: var(--color-dark);
}


/*contact*/

.contactlist {
    list-style: none;
    margin: 0;
    padding: 10px;
    color: var(--color-dark);
}

.contactlist li {
    width: 100%;
    padding: 5px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

.contactlist li p {
    font-size: 16px;
    color: var(--color-dark);
    text-align: justify;
}

.contactlist li b {
    float: right;
    font-weight: normal;
}

.contactlist li svg {
    width: 30px;
    min-width: 30px;
    height: 30px;
    margin: 15px 0 15px 15px;
    padding: 0;
}

.contactlist li svg path {
    fill: var(--color-light);
}

.contactlist li label {
    display: block;
    margin: 7px 0;
    width: 100%;
    overflow: hidden;
    color: var(--color-white);
}

.downloading>small {
    display: none !important;
}


/*loading*/

#ctis-loading {
    width: 100%;
    overflow: hidden;
    text-align: center;
    margin: 0 auto;
}

#ctis-loading img {
    display: block;
    margin: 0 auto;
    max-width: 50px;
    animation: loading 400ms ease-in-out infinite;
}

@keyframes loading {
    100% {
        transform: rotate(360deg);
    }
}


/*pages*/

.pages {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 45px auto 15px;
    padding: 0 15px;
}

.pages>span,
.pages>a {
    margin: 3px;
    color: var(--color-white);
    font-size: 15px;
    display: inline-block;
    padding: 8px;
    border-radius: 10px;
    border: 1px solid var(--color-dark);
    min-width: 40px;
    text-align: center;
}

.pages>a:hover {
    border: 1px solid var(--color-white);
}

.pages>a.current:hover,
.pages>a.current {
    border-color: var(--color-primary);
    color: var(--color-white);
    background: var(--color-primary);
}

.pages>span {
    border: 0;
}


/*odo*/

.odometer-inside {
    direction: ltr;
}

.odometer.odometer-auto-theme,
.odometer.odometer-theme-minimal {
    display: inline-block;
    vertical-align: middle;
    *vertical-align: auto;
    *zoom: 1;
    *display: inline;
    position: relative;
}

.odometer.odometer-auto-theme .odometer-digit,
.odometer.odometer-theme-minimal .odometer-digit {
    display: inline-block;
    vertical-align: middle;
    *vertical-align: auto;
    *zoom: 1;
    *display: inline;
    position: relative;
}

.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer,
.odometer.odometer-theme-minimal .odometer-digit .odometer-digit-spacer {
    display: inline-block;
    vertical-align: middle;
    *vertical-align: auto;
    *zoom: 1;
    *display: inline;
    visibility: hidden;
}

.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner,
.odometer.odometer-theme-minimal .odometer-digit .odometer-digit-inner {
    text-align: left;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon,
.odometer.odometer-theme-minimal .odometer-digit .odometer-ribbon {
    display: block;
}

.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner,
.odometer.odometer-theme-minimal .odometer-digit .odometer-ribbon-inner {
    display: block;
    -webkit-backface-visibility: hidden;
}

.odometer.odometer-auto-theme .odometer-digit .odometer-value,
.odometer.odometer-theme-minimal .odometer-digit .odometer-value {
    display: block;
    -webkit-transform: translateZ(0);
}

.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value,
.odometer.odometer-theme-minimal .odometer-digit .odometer-value.odometer-last-value {
    position: absolute;
}

.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner,
.odometer.odometer-theme-minimal.odometer-animating-up .odometer-ribbon-inner {
    -webkit-transition: -webkit-transform 2s;
    -moz-transition: -moz-transform 2s;
    -ms-transition: -ms-transform 2s;
    -o-transition: -o-transform 2s;
    transition: transform 2s;
}

.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner,
.odometer.odometer-theme-minimal.odometer-animating-up.odometer-animating .odometer-ribbon-inner {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
}

.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner,
.odometer.odometer-theme-minimal.odometer-animating-down .odometer-ribbon-inner {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
}

.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner,
.odometer.odometer-theme-minimal.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
    -webkit-transition: -webkit-transform 2s;
    -moz-transition: -moz-transform 2s;
    -ms-transition: -ms-transform 2s;
    -o-transition: -o-transform 2s;
    transition: transform 2s;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}

.listdeti {
    margin: 10px 0;
    padding: 0;
    list-style: none;
    width: 100%;
}

.listdeti li {
    list-style: none;
    color: var(--color-dark);
    font-size: 15px;
    width: 100%;
    text-transform: capitalize;
    padding: 5px 0;
    position: relative;
}

.listdeti li b {
    display: inline-block;
    margin: 0 1px;
}

.listdeti li a {
    font-weight: normal;
    color: var(--color-dark);
    padding: 0 6px;
}

.listdeti li a.float-left {
    float: left;
}

.listdeti li a:hover {
    color: var(--color-white);
}

/*minipage*/

.minipage {
    max-width: 500px !important;
    margin: 30px auto;
}

.walletrow {
    background: var(--color-dark3);
    padding: 30px;
    border-radius: 15px;
    margin-bottom: 15px;
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    justify-content: space-between;
    color: var(--color-white);
}

.walletrow>h3 {
    font-size: 16px;
    color: var(--color-dark);
    font-weight: normal;
}

.walletrow .asset {
    font-size: 28px;
    text-align: left;
}

.walletrow .asset b {
    margin-left: 10px;
}

.gcoint.entxt {
    background: var(--color-primary);
    font-weight: bold;
    padding: 8px 12px;
    margin: 2px;
    border-radius: 10px;
    font-size: 15px;
    position: relative;
    top: 3px;
}

.gcoint.smallg,
.dropdown-menu a.dropdown-item .gcoint.entxt {
    font-size: 13px;
    font-weight: normal;
    padding: 5px;
    float: left;
    margin: 0;
    margin-right: 0px;
    display: block;
    height: 24px;
    line-height: 14px;
    border-radius: 6px;
    margin-right: 7px;
    background: var(--color-black);
}

.gcoint.smallg {
    background: var(--color-dark2);
}

.echoprice .gcoint.smallg {
    float: none;
    display: inline-block;
    position: relative;
    top: 0;
}

.smallodo {
    font-size: 15px;
    margin-top: 6px;
    color: var(--color-dark);
}

.smallodo small {
    font-size: 13px !important;
    color: var(--color-dark) !important;
}

.entxt {
    font-family: "Open Sans", "Yek";
}

.friends {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
}

.friends>label {
    width: calc(50% - 10px);
    border: 1px solid var(--color-dark2);
    padding: 15px;
    margin: 5px;
    border-radius: 15px;
}

.friends>label .alert {
    margin: 0;
    padding: 0;
    font-size: 12px;
    color: var(--color-dark);
}

.friends>label .alert img {
    width: 18px;
    height: 18px;
    float: right;
    margin: 4px 0 0 5px;
}

.pt15 {
    padding-top: 15px;
}

.btn-mark,
.btn-mark:hover,
.btn-mark:focus {
    display: flex;
    justify-content: center;
    width: 100%;
    background: transparent !important;
    border: 1px solid var(--color-white) !important;
}

.btn-marked,
.btn-marked:hover,
.btn-marked:focus {
    background: var(--color-primary) !important;
    border: 1px solid var(--color-primary) !important;
}


.btn-mark .bookmark-marked {
    display: none;
}
.btn-mark .bookmark-umarked {
    display: flex;
}

.btn-marked .bookmark-marked {
    display: flex;
}
.btn-marked .bookmark-umarked {
    display: none;
}

.btn-mark img,
.btn-mark svg {
    height: 24px;
    width: 24px;
    margin: auto 0 auto 5px;
}


/*basket*/

.orderbox.checkoutbox .form-group.swbox {
    padding: 15px 0;
}

.orderbox.checkoutbox .form-group.swbox>b {
    overflow: visible;
}

.form-group.swbox small.gcoint {
    margin: -4px 0;
}

.addtocard .btn {
    margin: 0;
}

.gamethumb:hover .addtocard .btn {
    opacity: 1;
}

.gamethumb .addtocard .btn {
    position: absolute;
    width: 42px;
    height: 42px;
    padding: 8px;
    border-radius: 22px;
    left: 0;
    top: 0;
    margin: 0;
    opacity: 0;
}

.addtocard .trash-btn {
    background: var(--color-dark3);
    color: var(--color-primary) !important;
    box-shadow: none !important;
}

.gamethumb .addtocard .btn svg {
    width: 22px;
    height: 22px;
    display: block;
    margin: 0 auto;
    float: none;
}

.addtocard .btn svg path {
    fill: var(--color-white);
}

.addtocard .trash-btn svg path {
    fill: var(--color-white);
}

.addtocard .plus-btn {
    display: block;
}

.addtocard .complete-btn,
.addtocard .trash-btn {
    display: none;
}

.addtocard.added .plus-btn {
    display: none;
}

.addtocard.added .complete-btn,
.addtocard.added .trash-btn {
    display: block;
}


/*payment*/

.modaler {
    max-width: 100%;
    margin: 25px auto;
    padding: 10px;
    position: relative;
    color: var(--color-dark);
    width: 500px;
}

.itemrow {
    padding: 10px;
    border-bottom: 1px solid var(--color-silverlight);
    margin-bottom: 10px;
}

.widget {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--color-dark2);
}

.sidebar__inner .widget:first-child {
    margin-top: 0;
    border: 0 !important;
}

.widget .title {
    padding: 3px;
}

.widget .title h2 {
    font-size: 16px;
}

.widget.itemrow {
    padding: 15px 0;
}

.itemrow>b {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 10px;
    display: block;
}

.itemrow>ul {
    list-style: none;
    margin: 0 15px;
    padding: 0;
}

.itemrow>ul li>label {
    float: left;
    color: var(--color-black);
}

.itemrow>ul li {
    padding: 0;
    list-style: none;
    margin: 10px 0;
    font-size: 15px;
    width: 100%;
    float: none;
    overflow: hidden;
    color: var(--color-dark);
    position: relative;
}

.titlerow,
.titlerow * {
    text-align: center;
    position: relative;
}

.titlerow>h1>small {
    font-size: 12px;
    margin: 0 5px;
}

.titlerow>img {
    width: 120px;
    margin: 0 auto;
}

.walletside {
    padding: 5px;
}

.walletside .asset {
    padding: 20px;
    border-radius: 15px;
    background: var(--color-dark2);
    display: flex;
    position: relative;
    align-items: center;
    flex-direction: row-reverse;
}

.walletside .asset b {
    margin: 0;
    display: block;
    font-size: 40px;
    font-weight: bold;
    text-align: left;
    display: flex;
    width: 100%;
    position: relative;
    direction: ltr;
    color: var(--color-white);
    line-height: 80px !important;
}

.walletside .asset small {
    font-weight: normal;
    font-size: 14px;
    position: absolute;
    bottom: 15px;
    left: 20px;
}

.walletside .asset p {
    text-align: right;
    color: var(--color-white);
    margin: 0;
    font-weight: bold;
    max-width: 70px;
}

.modaler span#timers>b {
    color: var(--color-white);
    display: inline-block;
    position: relative;
    margin: 0 5px;
    font-size: 35px;
    letter-spacing: -2px;
    background: var(--color-dark2);
    transform: rotate(20deg);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    text-align: center;
    line-height: 58px;
}

.modaler span#timers {
    text-align: center;
    width: 100%;
    display: block;
}


/*tiny*/

.order_det {
    width: 100%;
}

.order_det .btn {
    padding: 8px 20px;
    margin: 10px 0 0;
    border-radius: 10px;
    font-size: 12px;
    width: auto;
    margin: 0 5px 0 0;
    float: left;
}

.order_det .btn svg {
    width: 21px;
    height: 21px;
    margin: 0 -7px 0 4px;
    position: relative;
    top: 2px;
}

.tinyitems .gamethumb {
    padding: 15px;
}

.tinyitems .swiper-slide .gamethumb>a,
.tinyitems .swiper-slide .gamethumb>.hyper {
    display: flex;
    flex-wrap: nowrap;
}

.tinyitems .swiper-slide .gamethumb h2 {
    width: 100%;
    margin: 0 0 10px;
    height: auto;
    padding: 0 22px 0 50%;
    font-size: 20px;
    position: relative;
    overflow: hidden;
}

.tinyitems .swiper-slide .gamethumb h2:before {
    display: none;
}

.tinyitems .swiper-slide .gamethumb>a .gamecover,
.tinyitems .swiper-slide .gamethumb>.hyper .gamecover {
    width: 130px;
    height: 130px;
    border-radius: 10px;
    min-width: 130px;
}

.tinyitems .swiper-slide .gamethumb .pricebox {
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    padding: 10px 20px 10px 0;
    display: block;
    text-align: right;
}

.tinyitems .pricebox>label.badge_off {
    margin: 8px;
}

.tinyitems .swiper-slide {
    margin: 0;
    border-bottom: 1px solid var(--color-dark2);
    padding: 6px 0;
    position: relative;
}

.tinyitems .swiper-slide:last-child {
    border: 0;
}

.tinyitems .swiper-slide:last-child {
    margin-bottom: 40px;
}

.borderbox .tinyitems .swiper-slide:last-child {
    margin-bottom: 0;
}


/*deleting*/

.delanime,
.order_det.deleting>* {
    opacity: 0;
    z-index: -4;
    position: absolute !important;
}

.deleting .delanime {
    opacity: 1;
    z-index: 1;
    padding: 0;
    right: 200px;
    left: 0;
    width: auto;
}

.deleting .delanime b {
    width: 100%;
    text-align: center;
    display: block;
}

.deleting .delanime .btn {
    margin: 0 auto;
    border: 0 !important;
    font-size: 15px;
    float: none;
}

.delress {
    height: 10px;
    max-width: 100px;
    border-radius: 10px;
    margin: 15px auto;
    background-color: var(--color-dark2);
    min-width: 100px;
    overflow: hidden;
}

.delbar {
    width: 1%;
    height: 10px;
    background-color: var(--color-primary);
}


/*toast*/


.nice-toast-error {
    background: var(--color-primary) !important;
}


.nice-toast-info {
    background: #1d4ed8 !important;
}

.nice-toast-success {
    background: #059669 !important;
    color: #fff;
}

.nice-toast-warning {
    background: #fed7aa !important;
    color: #000;
}

.nice-toast-warning .nice-toast-close {
    color: #000 !important;
}

.nice-toast-warning .nice-toast-progress {
    background-color: rgba(0, 0, 0, .7);
}

.nice-toast {
    padding: 15px 10px;
    border-radius: 10px;
    min-height: 50px;
}

.nice-toast-progress {
    bottom: 5px;
    left: 7px;
    border-radius: 10px;
    right: 7px;
    width: auto;
}

.nice-toast-icon {
    width: 20px;
    height: 20px;
    margin: 6px;
}

.nice-toast-close {
    height: 20px;
    top: 2px;
}

.nice-toast-close {
    font-weight: normal;
}

.nice-toast-close:hover {
    background: transparent !important;
}

.nice-toast-content {
    padding: 6px;
}

.swal2-popup p,
.swal2-popup h2 {
    font-family: "Yek", "Open Sans" !important;
    font-weight: normal;
    color: var(--color-white);
}

.swal2-popup {
    background: var(--color-bg);
    border-radius: 20px;
    padding: 20px;
    border: 1px solid var(--color-dark3);
    box-shadow: 0 20px 40px var(--color-bg);
}

.swal2-popup .btn {
    display: inline-block;
    width: auto;
    min-width: 200px;
    margin: 0 15px;
}

.swal2-actions {
    display: flex;
    flex-wrap: nowrap;
}

.swal2-actions .btn {
    width: 100%;
}

.errorfull {
    height: 100vh;
    width: 100%;
    overflow: hidden;
    position: relative;
    background: var(--color-bg);
    display: block;
}

.errorpage {
    position: absolute;
    right: 0;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    max-width: 600px;
    text-align: center;
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
}

.erroricon {
    width: 250px;
    max-width: 250px;
    max-height: 250px;
    margin-left: 30px;
}

.errorpage>div {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

.errorpage h1 {
    width: 100%;
    display: block;
    float: none;
    font-size: 55px;
    color: var(--color-dark2);
}

.errorpage h2 {
    width: 100%;
    display: block;
    float: none;
    font-size: 30px;
    color: var(--color-white);
}

.errorpage p {
    width: 100%;
    display: block;
    float: none;
    color: var(--color-dark);
    margin-top: 15px;
}

.giftfor {
    border-radius: 10px;
    padding: 10px 35px 10px 10px;
    margin: 5px;
    background: var(--color-dark2);
    position: absolute;
    width: auto;
    left: 10px;
    top: 10px;
}

.giftfor svg {
    width: 20px;
    height: 20px;
    margin: 7px;
    position: absolute;
    right: 3px;
    top: 0;
}

.giftfor b {
    font-size: 14px;
    line-height: 15px;
    display: block;
    color: var(--color-dark);
}

.giftfor b small {
    display: block;
    float: left;
    font-size: 16px;
    margin-right: 10px;
    color: var(--color-white);
}

.gamethumb .btn-mark,
.gamethumb .btn-mark:hover,
.gamethumb .btn-mark:focus {
    position: absolute;
    left: 0;
    top: 15px;
    margin: 12px;
    padding: 2px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: var(--color-black) !important;
    border: 0 !important;
    opacity: 0;
    transition: opacity 100ms ease-in-out;
    z-index: 9;
}

.gamethumb .btn-marked,
.gamethumb .btn-marked:hover,
.gamethumb .btn-marked:focus {
    background: var(--color-primary) !important;
    border: 0 !important;
}

.gamethumb .btn-marked::after,
.gamethumb .btn-mark::after {
    width: 22px;
    height: 22px;
    float: none;
    margin: 7px auto;
}

.gamethumb:hover .btn-mark {
    opacity: 1;
    transition: opacity 200ms ease-in-out;
}


/*badges*/

.badge_off.off_cover {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 91;
    background: var(--color-primary);
    color: var(--color-whites);
    width: 40px;
    height: 40px;
    border-radius: 50px;
    padding: 4px;
    margin: 7px;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    font-family: "Open Sans", "Yek";
}

.gamethumb .badge_off.off_cover {
    transform: scale(1);
    transition: all 200ms ease-in-out;
}

.gamethumb:hover .badge_off.off_cover {
    transform: scale(1.3);
    margin: 10px;
    transition: all 200ms ease-in-out;
}

.owned {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 91;
    background: var(--color-light);
    color: var(--color-bg);
    height: 25px;
    border-radius: 19px;
    padding: 6px 8px;
    margin: 6px;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    font-family: "Open Sans", "Yek";
    line-height: 12px;
    font-size: 14px;
    text-transform: uppercase;
}

.version-type {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 91;
    background: #10b981;
    color: var(--color-whites);
    height: 25px;
    border-radius: 19px;
    padding: 6px 8px;
    margin: 6px;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    font-family: "Open Sans", "Yek";
    line-height: 12px;
    font-size: 14px;
    text-transform: uppercase;
}

.game_badges {
    position: relative;
    margin: 0;
    padding: 0;
}

.game_badges img ,
.game_badges svg {
    width: 18px;
    height: 18px;
    float: left;
    margin: 0 3px;
}

.gamethumb .game_badges {
    position: absolute;
    top: 35px;
    opacity: 0;
    right: 10px;
    left: 0;
    text-align: center;
    transition: top 200ms ease-in-out , opacity 200ms ease-in-out;
    z-index: -2;
    color: var(--color-white);
}

.gamethumb .game_badges img,
.gamethumb .game_badges svg {
    float: right;
}

.gamethumb:hover .game_badges {
    top: -10px;
    color: var(--color-white);
    opacity: 1;
    transition: top 200ms ease-in-out , opacity 200ms ease-in-out;
}

.game-item {
    position: absolute;
    left: 0;
    margin: 0;
    opacity: 0;
    top: -15px;
    z-index: 99;
    transition: top 200ms ease-in-out;
}

.game-item:hover .dropdown-menu {
    display: block;
}

.game-item .dropdown-menu {
    padding: 10px;
    left: 5px;
    right: auto;
    top: 33px;
    min-width: 140px;
}

.game-item .dropdown-menu a.dropdown-item,
.game-item .dropdown-menu button.dropdown-item {
    min-width: 80px;
    font-size: 13px;
    padding: 5px 10px;
}

.gamethumb:hover .game-item {
    opacity: 1;
    transition: top 200ms ease-in-out;
}

.game-item button {
    background: transparent;
    padding: 2px 10px 10px;
    margin: 0;
    cursor: pointer;
}

.game-item.dropdown button:after {
    display: none;
}


/*review*/

.reviewcount>b {
    display: block;
    text-align: left;
    width: 100%;
}

.reviewcount>i {
    display: block;
    text-align: center;
    font-size: 14px;
    margin: 0;
    position: relative;
    color: var(--color-white);
    font-style: normal;
    float: right;
    padding: 0;
    height: 20px;
    margin: -1px 0;
    line-height: 20px;
}

.reviewcount>i::after {
    content: "/5";
    font-size: 11px;
    margin-left: 2px;
    color: var(--color-dark);
}

.productpage .title.heavy {
    position: relative;
    padding: 10px;
}

.form-sort {
    position: absolute;
    left: 0;
    top: 0;
    min-width: 190px;
    margin: 10px;
    width: auto;
}

.title .reviewcount {
    padding: 0;
    margin: 11px 0 0 10px;
}

.title .reviewcount>i {
    float: right;
    margin: 0 5px;
}

.title .reviewstars {
    float: right;
    margin-left: 5px;
}

.reviewcount {
    margin: 0;
    width: 100%;
    overflow: hidden;
    padding: 10px 10px 0;
    position: relative;
}

.gamethumb .reviewcount {
    margin: 5px 15px;
    width: auto;
    overflow: hidden;
    padding: 0;
    z-index: -2;
}

.gamethumb .pricebox,
.gamethumb h2,
.gamethumb .reviewcount {
    transition: all 200ms ease-in-out;
    transform: translateY(-25px);
}

.gamethumb.notrans .pricebox,
.gamethumb.notrans h2,
.gamethumb.notrans .reviewcount,
.tinyitems .gamethumb .pricebox,
.tinyitems .gamethumb h2,
.tinyitems .gamethumb .reviewcount,
.gamethumb:hover .pricebox,
.gamethumb:hover h2,
.gamethumb:hover .reviewcount {
    transform: translateY(0);
    z-index: 0;
    transition: all 200ms ease-in-out;
}

.reviewstars {
    margin: 0 auto;
    direction: ltr;
    float: left;
    width: auto;
}

.reviewstars>div {
    width: 100px;
    margin: 0;
    background: url('../svg/starsbg.svg');
    background-repeat: repeat;
    background-size: auto;
    background-repeat: repeat;
    background-size: auto;
    background-repeat: repeat-x;
    background-size: 100px;
    display: block;
    height: 20px;
    position: relative;
    overflow: hidden;
}

.reviewstars>div>b {
    content: "";
    background: url('../svg/stars.svg');
    background-repeat: repeat;
    background-size: auto;
    background-repeat: repeat;
    background-size: auto;
    background-repeat: repeat-x;
    background-size: 100px;
    display: block;
    height: 20px;
    position: absolute;
    left: 0;
}

.swiper-pagination.swiper-pagination-comments {
    float: right;
    margin: 10px;
    position: relative;
    top: 6px;
}

.swiper-pagination-comments .swiper-pagination-bullet {
    margin: 0 2px;
}

.btn-comment {
    float: left;
    margin: 10px 0;
}

.sw_comments {
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 5px;
}

.comment .reviewstars {
    position: relative;
    margin: 5px 0;
    width: 100%;
}

.comment .reviewstars>div {
    width: 88px;
    background-size: 88px;
    height: 15px;
    float: right;
}

.comment .reviewstars>div>b {
    background-size: 88px;
    height: 15px;
    margin: 0;
}

.cmface {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    max-width: 100%;
    padding-left: 150px;
}

.cmface>div {
    align-content: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: right;
    max-width: 90px;
}

.cmface>img {
    width: 51px;
    height: 51px;
    border-radius: 50%;
    margin: 0 0 0 15px;
}

.cmface b {
    display: block;
    margin: 0;
    font-size: 16px;
    line-height: 21px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cmdet {
    width: 100%;
    overflow: hidden;
    margin: 0;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 10px 15px;
}

.cmdet>small {
    color: var(--color-dark);
    font-size: 11px;
    padding: 5px;
    display: flex;
    float: right;
    align-items: center;
}

.cme {
    color: var(--color-light) !important;
    font-weight: bold;
}

.cmdetbtn.cmbtntxt:before,
.cmdet>small::before {
    content: "";
    width: 2px;
    height: 18px;
    border-radius: 10px;
    background: #4c505f;
    margin: 0 0 0 10px;
    float: right;
}

.cmdetbtn.cmbtntxt::before {
    top: 5px;
    position: relative;
}

.cmdet>small:first-child:before {
    display: none;
}

.cmdetbtn {
    background: transparent;
    border: 0;
    padding: 0;
    float: left;
    padding: 5px;
    margin: 0 2px;
    height: 38px;
    width: 38px;
}

.cmdetbtn,
.cmdetbtn:hover,
.cmdetbtn:focus {
    background: transparent;
    border: 0;
    padding: 0;
    float: left;
    padding: 5px;
    margin: 0 2px;
    height: 38px;
    width: 38px;
}


.cmdetbtn.cmbtntxt {
    width: auto;
    font-size: 11px;
    padding: 5px;
    color: var(--color-dark) !important;
    height: 38px;
    position: relative;
}

.cmdetbtn svg {
    width: 20px;
    height: 20px;
}

.cmdetbtn svg path {
    fill: #4c505f;
}

.cmdetbtn:hover svg path {
    fill: var(--color-dark);
}

.cmstatu {
    display: inline-block;
    height: 18px;
    line-height: 19px;
    font-size: 14px;
    padding: 0 6px;
}

.cmyellow {
    color: var(--color-yellow);
}

.cmred {
    color: var(--color-primary);
}

span.cmreject {
    margin: 10px 0 0 0;
    color: var(--color-primary) !important;
    padding: 10px !important;
    font-size: 12px !important;
    background: var(--color-dark2);
    border-radius: 10px;
}

.comment {
    background-color: var(--color-dark3);
    display: block;
    padding: 20px 20px 70px 20px;
    position: relative;
    border-radius: 15px;
    width: 100%;
}

.comment span {
    font-size: 14px;
    color: var(--color-dark);
    display: block;
    width: 100%;
    padding: 15px 0 0;
    overflow: hidden;
    line-height: 28px;
}



.sw_comments .swiper-slide {
    min-height: 100% !important;
    display: flex !important;
}

.replybox {
    color: var(--color-white) !important;
    background: var(--color-dark2) !important;
    margin-top: 15px;
    padding: 15px 15px 65px 15px !important;
}

.cmface small {
    color: var(--color-dark);
    display: block;
    line-height: 21px;
}



/*add comment*/

.cmform {
    max-width: 300px;
    margin: 0 auto;
}

.rate {
    position: relative;
    height: 40px;
    text-align: center;
    width: 100%;
    margin: 0 auto;
}

.rate:not(:checked)>input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    margin: 10px;
}

.rate:not(:checked)>label {
    float: none;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    font-size: 0;
    background-image: url('../svg/rate0.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 28px;
    width: 30px;
    height: 30px;
}

.rate>input:checked~label {
    background-image: url('../svg/rate1.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 28px;
    width: 30px;
    height: 30px;
    display: inline-block;
}

.rate:not(:checked)>label:hover,
.rate:not(:checked)>label:hover~label {
    background-image: url('../svg/rate1.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 28px;
}

.rate>input:checked+label:hover,
.rate>input:checked+label:hover~label,
.rate>input:checked~label:hover,
.rate>input:checked~label:hover~label,
.rate>label:hover~input:checked~label {
    background-image: url('../svg/rate1.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 28px;
}

.bigback {
    float: right;
    background: transparent;
    border-radius: 10px;
    width: 42px;
    height: 42px;
    margin: -3px 0 0 5px;
    padding: 9px;
}

.bigback svg path {
    fill: var(--color-dark);
}

.bigback:hover svg path {
    fill: var(--color-whites);
}


/*single*/

.flexbox {
    display: flex;
    flex-wrap: nowrap;
}

.tagbox {
    width: 100%;
    margin: 15px 0;
    padding: 10px;
    border-left: 1px solid var(--color-dark2);
}

.tagbox:last-child {
    border: 0;
}

.tagbox>b {
    display: block;
    color: var(--color-dark);
    font-weight: normal;
    margin-bottom: 15px;
}

.tagbox a {
    display: inline-block;
    margin: 3px;
    padding: 2px 10px 5px;
    border-radius: 10px;
    background: var(--color-dark3);
}

.tagbox a:hover,
.tagbox a:focus {
    background: var(--color-primary);
    color: var(--color-white);
}

.reviewcount.bigreview {
    padding: 0 25px 15px;
    margin: 0;
}

.reviewcount.bigreview .reviewstars>div {
    width: 200px;
    height: 40px;
    background-size: 200px;
}

.reviewcount.bigreview .reviewstars>div>b {
    background-size: 200px;
    height: 40px;
}

.reviewcount.bigreview>i {
    height: 40px;
    font-size: 24px;
    line-height: 40px;
}

.reviewcount.bigreview>i::after {
    font-size: 14px;
}


/*modal*/

.game_modal {
    padding: 20px 10px 15px;
    text-align: center;
    border-radius: 15px;
    border: 1px solid var(--color-dark2);
}

.game_modal img {
    display: block;
    margin: 0 auto 15px;
    max-width: 30px;
    max-height: 30px;
}

.game_modal small {
    display: block;
    text-align: center;
    color: var(--color-dark);
    font-weight: normal;
}

.game_modal b {
    display: block;
    text-align: center;
    color: var(--color-white);
}

.pd25 {
    padding: 0 25px;
}


/*inv2*/

.havbtn .form-control {
    padding-right: 70px;
}

.btn-input,
.btn-input:active,
.btn-input:focus,
.btn-input:hover {
    background: transparent;
    border: 0;
    position: absolute;
    right: 0;
    top: 0;
    opacity: 0.7;
}

.btn-input:hover {
    opacity: 1;
}

.btn-input.form-big {
    width: 60px;
    height: 42px;
    padding: 7px;
}

.swal2-popup.swal2-toast {
    background: var(--color-whites);
    box-shadow: none !important;
    border: 0;
}

.swal2-popup.swal2-toast .swal2-title {
    color: var(--color-black) !important;
}


/*trans*/

.transcard {
    padding: 5px;
    border: 1px solid var(--color-dark2);
    margin: 10px 0;
    border-radius: 10px;
    display: block;
    cursor: pointer;
    color: var(--color-whites) !important;
    position: relative;
}

.transcard.canclemode::before,
.transcard.donemode::before,
.transcard.deposit::before,
.transcard.promode::before,
.transcard.withdraw::before {
    content: "";
    background-image: url('../svg/withdraw.svg');
    width: 30px;
    height: 30px;
    position: absolute;
    left: 15px;
    top: 15px;
    background-size: 100%;
    background-repeat: no-repeat;
}

.transcard.deposit::before {
    content: "";
    background-image: url('../svg/deposit.svg');
}

.transcard.promode::before {
    content: "";
    background-image: url('../svg/progress.svg');
}

.transcard.donemode::before {
    content: "";
    background-image: url('../svg/copied.svg');
}

.transcard.canclemode::before {
    content: "";
    background-image: url('../svg/cancle.svg');
}

.transcard>b {
    display: block;
    padding: 10px 10px 0;
    font-size: 18px;
}

.transcard.canclemode>b,
.transcard.withdraw>b {
    color: var(--color-primary);
}

.transcard.donemode>b,
.transcard.deposit>b {
    color: #10b981;
}

.transcard.promode>b {
    color: var(--color-whites);
}

.transcard>p {
    display: block;
    padding: 0 10px;
    font-size: 13px;
}

.transcard>p>img {
    width: 20px;
    height: 20px;
    float: right;
    margin: 3px 5px;
}

.transcard>b>small {
    display: block;
    padding: 0;
    color: var(--color-dark);
}

.transcard ul {
    list-style: none;
    margin: 0;
    padding: 0 10px;
    position: relative;
    color: var(--color-dark);
}

.transcard ul li {
    width: 100%;
    margin: 0;
    display: block;
    font-weight: bold;
    font-size: 13px;
    position: relative;
    text-align: left;
    border-top: 1px solid var(--color-dark2);
    padding: 5px;
    color: var(--color-dark);
}

.transcard ul li>label {
    float: right;
    margin: 0;
    font-weight: normal;
    padding: 0;
}


/*update*/

.hasup {
    height: 20px;
    background: var(--color-yellow);
    border-radius: 10px;
    font-size: 11px;
    position: absolute;
    bottom: 39px;
    right: 6px;
    left: auto;
    margin: 0 auto;
    width: auto;
    text-align: center;
    padding: 1px 10px;
    line-height: 16px;
    color: var(--color-black);
    z-index: 9;
}


/*search filter*/

.visible {
    overflow: visible;
}

.topsearch.bigsearch {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.topsearch.bigsearch input.sput {
    height: 70px;
    font-size: 21px;
    min-width: 85%;
    margin-left: 0 !important;
    border-radius: 0 10px 10px 0 !important;
}

.topsearch.bigsearch .btn.btn-primary {
    font-size: 20px;
    border-radius: 10px 0 0 10px;
}

.topsearch.bigsearch .flex-group {
    display: flex;
    flex-wrap: nowrap;
    margin-bottom: 10px;
}


/*range*/

.rangeslider,
.rangeslider * {
    direction: ltr;
}

.rangeslider .price-input {
    direction: rtl;
}

.rangeslider .price-rg {
    position: relative;
    width: 100%;
    margin: 10px 0;
    padding: 0;
    height: 30px;
}

.rangeslider .price-input .field {
    display: flex;
    width: 100%;
    height: 45px;
    align-items: center;
    flex-direction: row-reverse;
    margin-bottom: 10px;
}

.rangeslider .field input {
    width: 100%;
    height: 100%;
    outline: none;
    font-size: 16px;
    margin: 0 12px !important;
    text-align: center;
    min-width: 100px;
    padding: 0 !important;
    -moz-appearance: textfield;
}

.rangeslider input[type="number"]::-webkit-outer-spin-button,
.rangeslider input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.rangeslider .slider {
    height: 5px;
    position: relative;
    background: var(--color-dark2);
    border-radius: 5px;
    width: 100%;
    top: 15px;
}

.rangeslider .slider .progress {
    height: 100%;
    left: 25%;
    right: 25%;
    position: absolute;
    border-radius: 5px;
    background: var(--color-primary);
}

.rangeslider .range-input {
    position: absolute;
    width: 100%;
    right: 0;
    left: 0;
    top: 20px;
}

.rangeslider .range-input input {
    position: absolute;
    width: 100%;
    height: 5px;
    top: -5px;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    right: 0;
    padding: 0;
}

.rangeslider input[type="range"]::-webkit-slider-thumb {
    height: 17px;
    width: 17px;
    border-radius: 50%;
    background: var(--color-primary);
    pointer-events: auto;
    -webkit-appearance: none;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
}

.rangeslider input[type="range"]::-moz-range-thumb {
    height: 17px;
    width: 17px;
    border: none;
    border-radius: 50%;
    background: var(--color-primary);
    pointer-events: auto;
    -moz-appearance: none;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
}


/*meta*/

.rate-group {
    overflow: hidden;
    margin: 10px 0 -5px;
}

.rate-group>* {
    float: right;
    width: auto;
}

.metacritic {
    background: var(--color-dark2);
    margin: 0 5px;
    padding: 0 10px;
    border-radius: 10px;
    color: var(--color-whites);
    font-family: "Open Sans";
    line-height: 37px;
    float: right;
    height: 37px;
    font-size: 13px;
}

.metacritic i {
    font-style: normal;
    float: left;
    background: rgba(0, 0, 0, 0.1);
    min-width: 30px;
    text-align: center;
    border-radius: 10px;
    margin: 4px 9px 4px -5px;
    line-height: 29px;
    font-size: 17px;
    font-weight: bold;
}

.metacritic.meta-yellow {
    background: var(--color-yellow);
    color: var(--color-black);
}

.metacritic.meta-green {
    background: #10b981;
    color: var(--color-whites);
}

.metacritic.meta-red {
    background: var(--color-primary);
    color: var(--color-whites);
}

.metacritic.meta-blue {
    background: #3b82f6;
    color: var(--color-whites);
}


/*up3*/

.artist {
    display: flex;
    border-radius: 10px;
    width: 100%;
}

.artist_cover {
    width: 100%;
    max-width: 160px;
    border-radius: 10px;
    overflow: hidden;
    margin-left: 25px;
    position: relative;
}

.artist_cover img {
    max-width: 160px;
    max-height: 160px;
    border-radius: 10px;
    min-height: 160px;
    min-width: 160px;
    object-fit: cover;
}

.artist_details {
    width: 100%;
}

.artist_details>h2 {
    font-size: 25px;
    font-weight: normal;
    margin-bottom: 10px;
    display: block;
    line-height: 1.5em;
    padding: 0 5px;
    color: var(--color-white);
}

.artist_details>span {
    font-size: 13px;
    font-weight: normal;
    margin-bottom: 10px;
    display: block;
    line-height: 1.8em;
    text-align: justify;
    color: var(--color-dark);
}

.game_counters {
    background: var(--color-dark2);
    margin: 0 5px;
    padding: 0 10px;
    border-radius: 10px;
    color: var(--color-white);
    line-height: 37px;
    float: right;
    /* height: 37px; */
    font-size: 13px;
}

.game_counters i {
    font-style: normal;
    float: right;
    background: rgba(0, 0, 0, 0.1);
    min-width: 30px;
    text-align: center;
    border-radius: 10px;
    margin: 4px -5px 4px 9px;
    line-height: 29px;
    font-size: 16px;
    padding: 0 6px;
    direction: ltr;
}



/*CODEBOX*/

.codebox {
    background: var(--color-white);
    margin: 10px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    padding: 15px 15px 20px;
    color: var(--color-black);
    border-radius: 10px 10px 0 0;
}

.codebox::after {
    background-repeat: repeat-x;
    content: " ";
    display: block;
    height: 20px;
    bottom: -10px;
    width: 100%;
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 0;
}

.codebox::after {
    background: linear-gradient(-135deg, #fff 16px, transparent 16px, transparent 16px, transparent 0), linear-gradient(135deg, #fff 16px, var(--color-bg) 0);
    background-position-x: 0%, 0%;
    background-position-y: 0%, 0%;
    background-size: auto, auto;
    background-position: left bottom;
    background-size: 16px 30px;
}

.codebox .form-control,
.codebox .form-control:focus {
    border-color: transparent;
}

.fullgamebox {
    padding: 10px;
}

.fullgamebox>nav .minimal-tabs button {
    padding: 15px;
    font-size: 17px;
}

.fullgamebox>nav .minimal-tabs button img {
    width: 21px;
    height: 21px;
    float: right;
    margin: 2px 0 2px 7px;
}

.fullgamebox>nav .minimal-tabs button label {
    background: var(--color-light2);
    color: var(--color-dark2);
    font-size: 13px;
    height: 20px;
    margin: 3px 10px 3px 3px;
    float: left;
    padding: 0 5px;
    border-radius: 10px;
    line-height: 21px;
}

.gamethumb.tokenthumb {
    background: var(--color-dark2);
    border-radius: 10px;
    padding: 15px;
    margin: 0;
    position: relative;
}

.gamethumb.tokenthumb>a {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
}

.tokendet {
    width: 100%;
}

.tokencount {
    font-family: "Open Sans", "Yek";
    font-weight: bold;
    background: var(--color-dark3);
    border-radius: 12px;
    color: var(--color-white) !important;
    line-height: 28px;
}

.getoken .flex-group {
    justify-content: end;
    margin-bottom: 15px;
}

.getoken .flex-group>* {
    white-space: nowrap;
    overflow: hidden;
    padding: 7px 15px !important;
    font-size: 15px;
    height: 42px;
}

.tokencount>img,.tokencount>svg {
    width: 21px;
    height: 21px;
    float: left;
    margin: 4px 0;
}

.tokenthumb .gamecover {
    max-width: 175px;
    max-height: 175px;
    min-width: 175px;
    margin-left: 20px;
}

.progress-bar {
    background: var(--color-dark);
}

.progress-bar.complete {
    background: var(--color-primary);
}

.progress {
    direction: ltr;
}

.progress.tokenress {
    background: var(--color-dark3);
    border-radius: 10px;
    height: 10px;
}

.title .progress.tokenress {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100px;
    margin: 5px 12px;
}


.btn.disabled, .btn:disabled, .btn.disabled:hover, .btn:disabled:hover{
    background: var(--color-dark2)!important;
    cursor: default;
}

.btn.btn-primary.disabled {
    background: var(--color-dark3) !important;
    color: var(--color-dark) !important;
    cursor: default;
}

.cotitle {
    float: left;
    font-size: 30px;
}

.cotitle small {
    display: inline;
    margin-right: 5px;
}

.tokenthumb.disabled .gamecover {
    filter: grayscale(1);
    opacity: 0.5;
}

.section.borderbox {
    border: 1px solid var(--color-dark2);
    border-radius: 15px;
    margin: 10px 25px 10px 0;
}

.paydet {
    width: 100%;
}

.paydet>b {
    display: block;
    font-size: 16px;
    color: var(--color-light3);
}

.paydet small {
    display: block;
}

.paydet small span {
    color: var(--color-light);
    margin: 0 7px;
}

.paydet small span.ltr {
    direction: ltr;
    text-align: left;
    font-family: "Open Sans";
    font-weight: bold;
}

.paymeth .form-group.swbox {
    align-content: center;
    align-items: center;
}

.paydet b>svg {
    width: 36px;
    height: 36px;
    margin: 2px;
}

.paydet b>svg path {
    fill: var(--color-light3);
}


/*timer*/

.timebox {
    padding: 2px;
    font-weight: normal;
    overflow: hidden;
    margin: 5px auto 15px;
    position: relative;
    z-index: 9;
    overflow: hidden;
    border-radius: 10px;
}

.timebox.const {
    max-width: 300px;
    margin: 15px auto;
}

.timebox::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background: linear-gradient(115deg, var(--color-primary), transparent, transparent, var(--color-primary));
    background-size: auto;
    background-size: auto;
    background-size: 50% 100%;
    z-index: -1;
    animation: timebox-gra .75s linear infinite;
}

@keyframes timebox-gra {
    to {
        transform: translateX(-50%)
    }
}

.timebox>div>b {
    display: block;
    float: right;
    font-weight: normal;
    margin: 11px;
}

.timebox>div {
    background: var(--color-dark2);
    margin: 0;
    border-radius: 9px;
    padding: 15px 10px;
    direction: ltr;
    display: flex;
    border: 3px solid var(--color-bg);
}

.timebox>div>label {
    color: var(--color-dark);
    font-size: 14px;
    margin: 0;
    text-align: center;
    line-height: 14px;
    width: 100%;
}

.timebox>div>label>span {
    color: var(--color-whites);
    font-size: 21px !important;
    font-weight: bold;
    display: block;
    margin: 0;
    text-align: center;
    line-height: 40px;
    min-height: 40px;
}

.timebox>b {
    position: absolute;
    bottom: 10px;
    right: 0;
    left: 0;
    text-align: center;
    font-size: 13px;
}

.comingsoon .gamecover svg {
    position: absolute;
    top: 50%;
    z-index: 9;
    right: 0;
    left: 0;
    transform: translateY(-50%);
    margin: 0 auto;
    width: 70px;
    height: 70px;
}

.comingsoon .gamecover svg path {
    fill: var(--color-whites);
}

.comingsoon .gamecover img {
    opacity: 0.4;
}


/*cm rate*/

.tooltip {
    font-family: "Yek";
    font-size: 13px;
}

.tooltip-inner {
    border-radius: 10px;
}

.cmrate {
    position: absolute;
    left: 15px;
    top: 15px;
    display: flex;
    margin: 0;
}

.cmbtn,
.cmbtn:hover,
.cmbtn:focus {
    padding: 7px;
    background: transparent;
    font-size: 12px;
    height: 42px;
    line-height: 27px;
    margin: 0;
    width: 42px;
}

.cmbtn svg {
    width: 21px;
    height: 21px;
    margin: 3px;
}

.cmbtn:hover,
.cmbtn:focus {
    background: var(--color-dark2);
}

.cmbtn.thumbup svg path {
    fill: var(--color-white);
}

.cmbtn.thumbdown {
    /* color: var(--color-primary) !important; */
}

.cmbtn.thumbdown svg path {
    /* fill: var(--color-primary); */
}

.cmrate label {
    padding: 9px;
    margin: 0 5px;
    border-radius: 8px;
    min-width: 42px;
    height: 42px;
    text-align: center;
    font-size: 20px;
    line-height: 26px;
    direction: ltr;
}

.cmdown label {
    color: var(--color-primary);
}

.cmzero label {
    color: var(--color-dark);
}


/*luncher*/


/*my games*/

.btn_lists {
    margin: 15px 0;
    padding: 10px;
    list-style: none;
}

.btn-iconic {
    text-align: right;
    padding: 12px 18px;
    background: var(--color-dark3);
    color: var(--color-dark) !important;
}

.btn-iconic:hover,
.btn-iconic:focus {
    background: var(--color-dark2);
    color: var(--color-dark) !important;
}

.btn-iconic.btn-active {
    background: var(--color-dark);
    color: var(--color-dark3) !important;
}

.btn-iconic svg {
    width: 20px;
    height: 20px;
    margin: 3px 0 3px 10px;
}

.btn-iconic svg path {
    fill: var(--color-dark);
}

.btn-iconic.btn-active svg path {
    fill: var(--color-dark3) !important;
}

.game_btns {
    margin: 10px 0 0;
}

.mycont {
    padding: 15px;
    width: 100%;
}

.mycont .title {
    padding-bottom: 0;
}

.gamelist {
    padding: 0;
    margin: 0;
    background: transparent;
    position: relative;
    overflow: visible;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
}

.game-card {
    border: 1px solid var(--color-dark2);
    padding: 15px;
    border-radius: 15px;
    margin: 15px 0;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.gamelist .game_primary {
    max-width: 200px;
    margin: 10px;
    min-width: 200px;
}

.gamelist .game_primary.game_installed {
    max-width: 100%;
    margin: 0;
    min-width: 100%;
    display: flex;
    flex-direction: inherit;
}

.game_primary h2 {
    font-size: 30px;
    font-weight: bold;
    margin: 0;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    line-height: 1.3em;
    padding: 7px 0;
    -webkit-box-orient: vertical;
    white-space: normal;
    color: var(--color-white);
    text-align: right;
    direction: ltr;
    font-family: "Open Sans", "Yek";
    position: relative;
}

.gamelist .game_primary.game_installed .gamecover {
    max-width: 200px;
    max-height: 200px;
    margin-left: 20px;
}

.gamelist .game_primary.game_installed h2 {
    font-size: 50px;
    width: 100%;
}

.game_actions {
    padding: 0 10px;
    width: 100%;
}

.game_actions>b {
    margin: 10px;
    font: 14px;
    color: var(--color-dark);
}

.game_actions .title {
    overflow: hidden;
    display: block;
    text-align: left;
    float: none;
    padding: 10px;
}

.game_actions .title h1 {
    overflow: hidden;
    text-align: left;
    float: none;
}

.game_actions .rate-group {
    margin: 5px 0;
}

.downloader {
    /* padding: 10px;
    margin-top: 10px; */
    /* -top: 1px solid var(--color-dark2); */
    position: relative;
}

.tinyitem,
.dlitems {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: start;
    align-self: start;
}

.dlitems .tinyitem {
    flex-wrap: wrap;
}

.tinyitem li,
.dlitems li {
    color: var(--color-white);
    text-align: right;
    padding: 5px;
    width: 100%;
    margin: 5px;
    border-radius: 15px;
}

.tinyitem li {
    width: auto !important;
    font-size: 14px;
    font-weight: normal;
}

.dlitems li:last-child {
    min-width: 50%;
}

.dlitems .tinyitem li {
    overflow: hidden;
    margin: 1px;
    min-width: 100%;
}

.dlitems li b {
    text-align: right;
    display: block;
    width: 100%;
    font-size: 14px;
}

.circh svg {
    display: block;
    margin: 24px auto;
}

.tinyitem li label,
.dlitems li label {
    display: block;
    background: var(--color-dark3);
    padding: 0 10px;
    font-weight: bold;
    border-radius: 10px;
    color: var(--color-light);
    margin: 10px auto;
    position: relative;
    top: 1px;
    max-width: 100px;
    text-align: right;
}

.tinyitem li label {
    display: inline-block;
    margin: 0 5px;
}

.dlitems .tinyitem li label {
    float: left;
}

.downloader .prolunchbar {
    position: relative;
    top: 0;
    bottom: 0;
    padding-top: 60px;
}

.downloader .prolunch {
    border-radius: 5px;
}

.downloader .bartime,
.downloader .bardet {
    position: absolute;
}


/*charts*/

.dlitems .form-group.swbox {
    max-width: 100%;
    background: transparent;
    padding: 10px 2px;
}

.dlitems .form-group.swbox>b {
    height: 20px;
    padding: 0;
    text-transform: capitalize;
    font-family: "Yek", "Open Sans";
    line-height: 20px;
}

.btn-keys {
    max-width: 57px;
    padding: 15px;
}

.btn-yellow {
    background: var(--color-yellow);
    color: var(--color-black) !important;
}

.btn-yellow:hover,
.btn-yellow:focus,
.btn-yellow:active {
    background: var(--color-yellow);
    color: var(--color-black) !important;
}

.btn-green {
    background: #02b763;
}

.btn-green:hover,
.btn-green:focus,
.btn-green:active {
    background: #02b763;
}

.tinyitem li.yellow>label {
    background: var(--color-yellow);
    color: var(--color-black);
}

.game_btns .dropdown-toggle::after {
    display: none;
}

.game_btns .btn-keys>b.dropdown-toggle {
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    padding: 15px;
}

.bgame_install {
    position: absolute;
    left: -10%;
    top: 0;
    max-width: 90%;
    z-index: 0;
    margin: 0;
    opacity: 0.2;
}

.bgame_install::after {
    position: absolute;
    content: "";
    background-image: linear-gradient(90deg, rgba(26, 28, 36, 0) 30%, var(--color-bg) 100%);
    right: 0;
    top: 0;
    bottom: 0;
    width: 50%;
}

.bgame_install::before {
    position: absolute;
    content: "";
    background-image: linear-gradient(0deg, var(--color-bg) 40%, rgba(26, 28, 36, 0) 100%);
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
}

.modal-body .dlitems {
    flex-wrap: wrap;
}

.modal-body .dlitems>li>b {
    text-align: right;
    color: var(--color-light);
    padding: 4px;
    font-size: 17px;
}


/*modaler*/

.modaler {
    max-width: 500px;
    margin: 10px auto;
    padding: 15px;
    position: relative;
    border: 1px solid var(--color-dark3);
    color: var(--color-dark);
    border-radius: 15px;
}

.modalhrow {
    padding: 10px;
    text-align: center;
    color: var(--color-whites);
}

.modalhrow .logo {
    max-width: 220px;
    display: block;
    margin: 0 auto 15px;
}

.modalhrow p {
    text-align: center;
    margin: 0;
}

.modalhrow p>b {
    font-weight: bold;
}

.accessrow {
    padding: 20px 10px;
}

.accessrow li {
    text-align: center;
}

.accesslogo {
    text-align: center;
    padding: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9;
    position: relative;
}

.accesslogo li {
    position: relative;
    display: inline-block;
}

.accesslogo li svg {
    width: 100px;
    z-index: -2;
    position: relative;
}

.accesslogo li img {
    width: 90px;
    border-radius: 50%;
    height: 90px;
    overflow: hidden;
    border: 1px solid var(--color-dark2);
    padding: 0;
    margin: 0 15px;
}

.itemrow {
    padding: 10px;
    border-bottom: 1px solid var(--color-dark2);
    margin-bottom: 10px;
}

.itemrow>b {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 10px;
    display: block;
}

.itemrow>ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.itemrow>ul li::before {
    content: "";
    width: 14px;
    height: 5px;
    background: var(--color-dark2);
    position: absolute;
    right: 0;
    top: 10px;
    border-radius: 10px;
}

.itemrow>ul li.itemiconic::before {
    content: "";
    border-radius: 0;
    background-color: transparent;
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    top: 2px;
    width: 18px;
    height: 18px;
    right: -1px;
}

.itemrow>ul li.itemiconic.warningico::before {
    background-image: url('../svg/warning.svg');
}

.itemrow>ul li.itemiconic.linkico::before {
    background-image: url('../svg/link.svg');
}

.itemrow>ul li.itemiconic.errorico::before {
    background-image: url('../svg/error.svg');
}

.itemrow>ul li.itemiconic.chargeico::before {
    background-image: url('../svg/chargeico.svg');
}

.itemrow>ul li.itemiconic.tickico::before {
    background-image: url('../svg/tickico.svg');
}

.itemrow>ul li>label {
    float: left;
    color: var(--color-whites);
}

.itemrow>ul li {
    padding: 0 25px 0 0;
    list-style: none;
    margin: 10px 0;
    font-size: 15px;
    width: 100%;
    float: none;
    overflow: hidden;
    color: var(--color-light);
    position: relative;
}

ul li>i {
    font-style: normal;
    background: var(--color-dark2);
    color: var(--color-light);
    direction: ltr;
    padding: 3px 6px 1px;
    height: 27px;
    line-height: 20px;
    display: inline-block;
    font-family: "Open Sans", "Yek";
    margin: 0 0px;
    border-radius: 8px;
    font-size: 14px;
}

.titlerow,
.titlerow * {
    text-align: center;
    position: relative;
}

.titlerow>img {
    width: 120px;
    margin: 0 auto -15px;
}

.detrow {
    padding: 10px;
    font-size: 14px;
}

.detrow>p {
    display: block;
    text-align: justify;
    color: var(--color-dark);
}

.detrow>p>a {
    color: var(--color-white);
    display: inline-block;
}

.detrow>p>a:hover {
    color: var(--color-primary);
    display: inline-block;
}

.transfer {
    position: absolute;
    right: -75px;
    left: -75px;
    top: -15px;
    bottom: -15px;
    z-index: -1;
}

.transfer div {
    width: 50px;
    height: 50px;
    position: absolute;
}

.transfer div::before {
    content: "";
    border-radius: 0;
    background-color: transparent;
    background-size: 100%;
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
    display: block;
}

.moneyt div:nth-child(1):before,
.moneyt div:nth-child(3):before,
.moneyt div:nth-child(5):before {
    background-image: url('../img/gcoin1.png');
}

.moneyt div:nth-child(2):before,
.moneyt div:nth-child(4):before,
.moneyt div:nth-child(6):before {
    background-image: url('../img/gcoin1.png');
}

.transfer div:nth-child(1) {
    top: -10px;
    right: 0;
    -webkit-animation: move-money 1900ms 0s infinite linear;
    animation: move-money 1900ms 0s infinite linear;
}

.transfer div:nth-child(2) {
    top: 20px;
    right: 0;
    -webkit-animation: move-money 1500ms 1000ms infinite linear;
    animation: move-money 1500ms 1000ms infinite linear;
}

.transfer div:nth-child(3) {
    top: 40px;
    right: 0;
    -webkit-animation: move-money 1700ms 500ms infinite linear;
    animation: move-money 1700ms 500ms infinite linear;
}

@-webkit-keyframes move-money {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-210px);
    }
}

@keyframes move-money {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-210px);
    }
}

.btn-primary>b {
    text-align: right;
    display: block;
}

.btn-primary>b>small {
    float: left;
}

.bignum {
    color: var(--color-white);
    display: inline-block;
    position: relative;
    margin: 0;
    font-size: 30px;
    letter-spacing: -2px;
    /* background: var(--color-dark2);
    transform: rotate(20deg); */
    min-width: 45px;
    height: 45px;
    border-radius: 25px;
    text-align: center;
    line-height: 45px;
    top: 5px;
    padding: 0 5px;
}


/*search*/

.atsearch .section {
    /* filter: blur(4px); */
}

.searchopen {
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 99;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    backdrop-filter: blur(4px);
}

body.atsearch .searchopen {
    display: block;
}

.topsearch>form {
    z-index: 99;
    position: relative;
}

.searchresult {
    position: absolute;
    right: -5px;
    left: -5px;
    background: var(--color-white);
    z-index: 9;
    border-radius: 10px;
    margin: 0;
    padding: 55px 0 0 0;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 10px 20px;
    top: -5px;
    display: none;
}

body.atsearch .searchresult {
    display: block;
}

.result_inner {
    max-height: 500px;
    overflow: auto;
    margin: 5px;
    padding: 5px;
}

.livelist {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.livelist>li {
    width: 100%;
    padding: 0;
}

.livelist>li>a {
    display: block;
    color: var(--color-dark);
    padding: 7px;
    font-size: 14px;
    border-bottom: 1px solid var(--color-light);
}

.livelist>li:last-child>a {
    border-bottom: 0;
}

.livelist>li>a>b {
    display: inline;
    color: var(--color-dark3);
}

.livelist>li>a:hover,
.livelist>li>a:focus {
    color: var(--color-dark3);
}

.livelist>li>a>svg {
    margin: 3px 0 3px 10px;
    width: 20px;
    height: 20px;
    float: right;
    display: block;
}

.livelist>li>a>svg path {
    fill: var(--color-dark);
}

.livelist>li>a:hover>svg path {
    fill: var(--color-dark3);
}

.sw_modal {
    margin: 10px -4px;
    padding: 0;
    overflow: hidden;
    border-radius: 10px;
}

.sw_modal .swiper-slide {
    opacity: 1;
}

.result_inner .swiper-button-prev,
.result_inner .swiper-button-next {
    background-size: 10px !important;
    width: 30px !important;
    height: 31px !important;
    margin: -17px 0;
}

.overflow.sgame {
    margin: 0 5px;
    position: relative;
}

.overflow.sgame h2 {
    position: absolute;
    color: var(--color-whites);
    top: 0;
    padding: 18px;
    font-size: 15px;
    background-image: linear-gradient(90deg, rgba(26, 28, 36, .8) 30%, rgba(26, 28, 36, 0) 120%);
    text-align: left;
    right: 0;
    left: 0;
    bottom: 0;
    top: 0;
    height: 100%;
    width: 100%;
}

.stags {
    display: flex;
    flex-wrap: wrap;
    margin: 15px 0;
    border-top: 1px solid var(--color-light);
    padding: 10px 0 0;
}

.stags .swiper-slide {
    width: auto;
    margin: 0;
}

.stag>a {
    border: 1px solid var(--color-light2);
    margin: 3px;
    padding: 3px 10px;
    overflow: hidden;
    border-radius: 25px;
    display: block;
    width: auto;
    color: var(--color-dark);
    font-size: 13px;
}

.stag>a:hover {
    border: 1px solid var(--color-dark);
    color: var(--color-black);
}



/*placeholder*/

.game_primary img,
.artist_cover img,
.swiper-slide .overflow img,
.postimg img,
.gamecover img {
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    text-indent: -9999px;
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: cover;
}

.placeholder {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-dark2) !important;
}

.artist_cover .placeholder {
    max-width: 160px;
    max-height: 160px;
    border-radius: 15px;
    overflow: hidden;
}

.placeholder>img {
    position: relative !important;
}

.placeholder:before {
    /* content: "";
    position: absolute;
    left: -45%;
    height: 100%;
    width: 55%;
    background-image: linear-gradient(0, var(--color-dark2) 10%, #46495a 50%, var(--color-dark2) 100%);
    background-image: -moz-linear-gradient(0, var(--color-dark2) 10%, #46495a 50%, var(--color-dark2) 100%);
    background-image: -webkit-linear-gradient(0, var(--color-dark2) 10%, #46495a 50%, var(--color-dark2) 100%);
    animation: loading 1s infinite;
    z-index: 45;
    opacity: .8; */
}

@keyframes loading {
    0% {
        left: -45%;
    }
    100% {
        left: 175%;
    }
}

.gametag li>span {
    position: relative;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    float: right;
    padding: 6px 10px !important;
    border-radius: 20px;
    margin: 4px;
    font-weight: normal;
    font-size: 13px;
    line-height: 17px !important;
    height: 29px !important;
}

.sw_2t,
.sw_4t {
    overflow: hidden;
}


.cmbtn svg path {
    fill: transparent !important;
    /* stroke: var(--color-primary); */
    stroke: var(--color-white);
    
    stroke-width: 2px;
}

.cmbtn.thumbup svg path {
    stroke: var(--color-white);
}

.cmrate.upvote .cmbtn.thumbup svg {
    transform: scale(1.3) rotate(25deg);
}

.cmrate.upvote .cmbtn.thumbup svg path {
    fill: var(--color-primary) !important;
    stroke-width: 0 !important;
}

.cmrate.downvote .cmbtn.thumbdown svg {
    transform: scale(1.3) rotate(-25deg);
}

.cmrate.downvote .cmbtn.thumbdown svg path {
    fill: var(--color-primary) !important;
    stroke-width: 0 !important;
}


.emtpybox {
    padding: 40px;
}

.emtpybox b {
    color: var(--color-dark);
    font-size: 20px;
    display: block;
    text-align: center;
    margin: 10px auto;
}

.emtpybox span {
    color: var(--color-dark2);
    font-size: 16px;
    display: block;
    margin: 10px auto;
    text-align: center;
}

.emtpybox svg {
    width: 60px;
    height: 60px;
    display: block;
    margin: 0 auto 20px;
}

.emtpybox svg path {
    fill: var(--color-dark2);
}

.emtpybox button {
    margin: 10px auto;
}

.voucherbox {
    padding: 15px;
    border: 1px solid var(--color-dark2);
    border-radius: 15px;
}

.tinyitems .gamethumb .addtocard .btn {
    opacity: 1;
    margin: 8px;
}

.closebar,
.sidebarbtn {
    display: none;
}

.iconline {
    display: none;
}

.cm_old {
    padding: 3px 7px;
    background: var(--color-dark2);
    border-radius: 9px;
}



/*game social*/

.game_socials {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
}

.social_btn {
    padding: 10px;
    display: block;
    min-width: calc(20% - 12px);
    background: var(--color-dark2);
    margin: 6px;
    border-radius: 10px;
    color: #fff;
}

.social_btn svg path {
    fill: #fff;
}

.social_btn.instagram {
    background: -webkit-radial-gradient(32% 106%, circle cover, rgb(255, 225, 125) 0%, rgb(255, 205, 105) 10%, rgb(250, 145, 55) 28%, rgb(235, 65, 65) 42%, transparent 82%), -webkit-linear-gradient(-45deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
    background: -moz-radial-gradient(32% 106%, circle cover, rgb(255, 225, 125) 0%, rgb(255, 205, 105) 10%, rgb(250, 145, 55) 28%, rgb(235, 65, 65) 42%, transparent 82%), -moz-linear-gradient(-45deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
    background: -ms-radial-gradient(32% 106%, circle cover, rgb(255, 225, 125) 0%, rgb(255, 205, 105) 10%, rgb(250, 145, 55) 28%, rgb(235, 65, 65) 42%, transparent 82%), -ms-linear-gradient(-45deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
    background: -o-radial-gradient(32% 106%, circle cover, rgb(255, 225, 125) 0%, rgb(255, 205, 105) 10%, rgb(250, 145, 55) 28%, rgb(235, 65, 65) 42%, transparent 82%), -o-linear-gradient(-45deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
    background: radial-gradient(circle farthest-corner at 32% 106%, rgb(255, 225, 125) 0%, rgb(255, 205, 105) 10%, rgb(250, 145, 55) 28%, rgb(235, 65, 65) 42%, transparent 82%), linear-gradient(135deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
    color: #fff;
}

.social_btn.facebook {
    background-color: #1877F2;
    color: #fff;
}

.social_btn.twitter {
    background-color: #1DA1F2;
    color: #fff;
}

.social_btn.youtube {
    background-color: #CD201F;
    color: #fff;
}

.social_btn.aparat {
    background-color: #ED145B;
    color: #fff;
}

.social_btn.linkedin {
    background-color: #0A66C2;
    color: #fff;
}

.social_btn.telegram {
    background-color: #0088cc;
    color: #fff;
}

.social_btn.whatsapp {
    background-color: #25D366;
    color: #fff;
}

.social_btn.discord {
    background-color: #7289da;
    color: #fff;
}

.alert {
    border-radius: 8px;
    padding: 8px 15px;
    font-size: 14px;
}

.alert.alert-gameup {
    background: var(--color-dark2);
    margin: 15px;
    padding: 25px 160px 25px 25px;
    overflow: hidden;
    display: flex;
    flex-wrap: nowrap;
}

.alert.alert-gameup>svg {
    min-width: 200px;
    position: absolute;
    transform: rotate(-25deg);
    bottom: -62px;
    right: -30px;
}

.alert.alert-gameup>svg path {
    fill: var(--color-primary);
}

.cm_reply {
    display: inline-block;
    font-size: 12px;
    padding: 0 10px;
    height: 21px;
    line-height: 21px;
    margin: 0 6px;
    border-radius: 10px;
}


/*intro*/

.section.intro_page {
    padding: 0;
    max-height: 100vh;
    max-width: 100vw;
    margin: 0;
    position: relative;
    z-index: 9;
    height: 100vh;
}

.intro_background {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.intro_background>img,
.intro_background>video {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    object-position: center;
    opacity: 1;
}

.intro_custom,
.intro_game {
    position: absolute;
    right: 0;
    bottom: 0;
    max-width: 40%;
    margin: 50px;
    width: 500px;
}

.intro_custom {
    left: 0;
    right: auto;
    min-height: 100px;
}

.intro_game .title {
    padding: 0;
    margin: 15px 0;
}

.intro_game>span {
    display: block;
    text-align: justify;
    margin: 0 0 15px 0;
}

.intro_game .title h1,
.intro_game .title a:hover h1 {
    font-weight: bold;
    font-size: 40px;
    line-height: 1.3em;
    text-transform: capitalize;
    padding: 0;
    color: var(--color-whites);
    font-family: "Open Sans", "Yek";
    margin: 0;
}

.intro_img_game img {
    max-height: 160px;
    margin-bottom: 20px;
}


/*blog*/

.container .errorfull {
    height: auto;
}

.container .errorfull .errorpage {
    position: relative;
    top: 0;
    transform: none;
    margin: 50px 20px;
    max-width: 300px;
}

#ctis-loading {
    width: 100%;
    overflow: hidden;
    text-align: center;
    margin: 0 auto;
}

#ctis-loading img {
    display: block;
    margin: 0 auto;
    animation: loadingpage 400ms ease-in-out infinite;
}

@keyframes loadingpage {
    100% {
        transform: rotate(360deg);
    }
}

.dropdown-item.active {
    background: transparent;
}



/*landing 2 */

.intro_page_new2 {
    min-height: calc(100vh - 125px);
    margin: 0;
    padding: 0 20px;
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
}

.intro_col {
    width: 50%;
    padding: 15px;
}


.intro_custom_new2, .intro_game_new2 {
    position: relative;
    margin: 20px 0;
    width: 100%;
    max-width: 100%;
}

.intro_col .gallery-top {
    margin: 0;
}

.intro_col .gallery-top .swiper-slide video, .intro_col .gallery-top .swiper-slide img {
    max-height: 420px;
    min-height: 420px;
}



/*OS Grid*/
.grid_os_items {
    list-style: none;
    margin: 0 auto;
    padding: 10px;
    width: 100%;
    display: flex;
}

.grid_os_items .title.bigtitle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.grid_os_items li {
    padding: 15px;
    width: 100%;
}

.grid_os_items li a {
    background: var(--color-dark3);
    display: block;
    border-radius: 15px;
    color: var(--color-white);
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    align-items: center;
    padding: 20px;
}


.grid_os_items li a.os_android:hover {
    background: #23C84D;
    color: var(--color-white);
}

.grid_os_items li a.os_windows:hover {
    background: #1373DA;
    color: var(--color-white);
}
.grid_os_items li a.os_arcade:hover {
    background: #EF3217;
    color: var(--color-white);
}


.grid_os_items li a.os_browser:hover {
    background: #EF3217;
    color: var(--color-white);
}

.grid_os_items li a img, .grid_os_items li a svg {
    width: 55px;
    height: 55px;
    margin-left: 15px;
}

.grid_os_items li a b, .grid_os_items li a strong {
    display: block;
    margin: 0;
    padding: 0;
    font-size: 20px;
}

.grid_os_items li a strong {
    font-weight: normal;
    text-transform: capitalize;
    font-size: 15px;
    font-family: "Open Sans";
}



/*blink alert*/
.product_alert {
    display: block;
    font-size: 14px;
    font-weight: bold;
    padding: 10px;
}

.animation_alert {
    animation: blinkanime 2s ease-in-out infinite;
}

@keyframes blinkanime {
    0% {
        opacity: 1;
    }

    15% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


.red_alert {
    color: var(--color-primary);
}



/*quantity-button*/

.upgrade-lvl {
    display: none;
    margin: 0;
    background: var(--color-whites);
    border-radius: 10px;
    padding: 13px;
    border: 1px solid var(--color-light2);
    background: var(--color-light);
    max-height: 57px;
    justify-content: center;
}

.added .upgrade-lvl {
    display: flex;
}

.upgrade-lvl.upginbasket {
    display: flex;
}


.quantity-button {
    width: 33px;
    background: transparent;
    text-align: center;
    padding: 5px;
    border-radius: 0;
    cursor: pointer;
    height: 30px;
    margin: 0;
    line-height: 19px;
    min-width: 33px;
}

.quantity-button svg path {
    fill: var(--color-black);
}

.upgrade-text {
    text-align: center;
}

.upgrade-text input {
    background: transparent;
    border: 0;
    cursor: default;
    width: auto;
    text-align: center;
    font-size: 19px;
    font-weight: bold;
    min-height: 1px;
    margin: 0 !important;
    height: 30px;
    padding: 0;
    width: 100px;
    position: relative;
    color: var(--color-black) !important;
}

.notrash .quantity-trash {
    display: none;
}

.notrash .quantity-remove {
    display: block !important;
}

.upgrade-lvl.upginbasket {
    display: flex;
    float: left;
    padding: 7px;
}

.upgrade-lvl.upginbasket .upgrade-text input {
    width: 30px;
}


.upgrade-lvl.upginbasket .quantity-button {
    width: 25px;
    padding: 4px;
    height: 25px;
    min-width: 25px;
}



/*discord button*/

.navbar-nav.headermenu .nav-item>a.gu_discord {
    background-color: #7289da;
    border-radius: 10px;
    padding: 7px 9px 9px;
    margin: 2px 0 2px 10px;
}

.nav-icon .gu_discord .badge {
    position: relative;
    float: right;
    margin: 3px 0 3px 5px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.2);
    font-size: 11px;
    direction: ltr;
    font-family: "Open Sans";
}

.nav-icon .gu_discord .badge:after {
    content: " Members";
}


/*embed game*/
.embed_game {
    padding: 30px 10px;
}

.embed_game iframe {
    width: 100%;
    height: auto;
    /* min-height: 400px; */
    background: var(--color-dark3);
    border: 0;
    margin: 0 auto 15px;
}

.embed_game.embed_fullscreen iframe {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 99999;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.embed_game.embed_fullscreen .flex-group {
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99999;
    padding: 0;
    display: block;
    left: auto;
}

.embed_game.embed_fullscreen .flex-group button, .embed_game.embed_fullscreen .flex-group a {
    float: right;
    width: auto;
    padding: 5px 10px;
    display: none;
    border-radius: 0;
    margin: 0 !important;
}

.embed_game.embed_fullscreen .flex-group button.btn-fullscreen {
    font-size: 0;
    display: block;
}

.embed_game.embed_fullscreen .flex-group button.btn-fullscreen:after {
    font-size: 16px;
    content: " بازگشت ";
}


/*leaderboard*/
.leaderboard_section .title h2 {
    margin: 0;
}

.leaderboard_section {
    background: var(--color-dark2);
    border-radius: 25px;
    padding: 5px;
}

.leaderboard {
    background: var(--color-dark3);
    padding: 25px;
    border-radius: 25px;
    margin: 10px 0 0;
}

.leaderboard>h2 {
    text-align: center;
    padding: 15px 0 0;
    margin: 0;
}

.leaderboard>small {
    text-align: center;
    padding: 0;
    display: block;
    font-family: "Open Sans", "Yek";
    font-size: 15px;
    opacity: 0.5;
}

.topplayers {
    list-style: none;
    margin: 0 0 25px;
    padding: 50px 0 0;
    display: flex;
    flex-wrap: nowrap;
}

.topplayers li .playeravatar {
    border-radius: 50%;
    border: 2px solid var(--color-dark2);
    position: relative;
}

.topplayers li .playeravatar img {
    object-fit: cover;
    border-radius: 50%;
    position: relative;
    z-index: 99;
}

.topplayers li {
    padding: 15px;
}

.topplayers li b {
    text-align: center;
    font-weight: normal;
    display: block;
    font-size: 15px;
    padding: 20px 0 0;
    overflow: hidden;
    white-space: nowrap;
    direction: ltr;
    text-overflow: ellipsis;
    font-family: "Open Sans", "Yek";
}

.topplayers li small {
    text-align: center;
    font-weight: normal;
    display: block;
    font-size: 12px;
    padding: 0 0 5px;
    opacity: 0.4;
    overflow: hidden;
    white-space: nowrap;
    direction: ltr;
    text-overflow: ellipsis;
    font-family: "Open Sans", "Yek";
}

.topplayers li:nth-child(2) {
    min-width: 40%;
}

.topplayers li:nth-child(2) .playeravatar {
    margin-top: -28px;
}

.topplayers li .playeravatar::after {
    content: " ";
    background-size: 100%;
    position: absolute;
    width: 20px;
    height: 20px;
    right: 0;
    left: 0;
    bottom: -11px;
    z-index: 99;
    margin: 0 auto;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.topplayers li:nth-child(2) .playeravatar::before {
    content: " ";
    background-size: 100%;
    background-image: url("../img/king.png");
    position: absolute;
    width: 26px;
    height: 26px;
    right: 0;
    left: 0;
    top: -17px;
    z-index: 999;
    margin: 0 auto;
}

.topplayers li:nth-child(3) .playeravatar::after {
    background-image: url("../img/second.png");
}

.topplayers li:nth-child(2) .playeravatar::after {
    background-image: url("../img/first.png");
    width: 25px;
    height: 25px;
}

.topplayers li:nth-child(1) .playeravatar::after {
    background-image: url("../img/third.png");
}

.otherranks {
    list-style: none;
    margin: 0;
    padding: 0;
}

.otherranks.scroller {
    max-height: 210px;
    overflow: auto;
}

.otherranks li {
    overflow: hidden;
    border: 2px solid var(--color-dark2);
    margin: 0 0 8px;
    padding: 4px;
    border-radius: 25px;
}

.otherranks li.yourank {
    background: var(--color-dark3);
    border-color: var(--color-dark3);
    transform: scale(1.05);
    margin: 0 0 14px;
    box-shadow: 0 0 0 4px rgba(136, 138, 167, 0.3);
}

.otherranks li.yourank::before {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    background: linear-gradient(to right, #3a5756, #fff, #3a5756);
    background-size: auto;
    background-size: 1000%;
    -webkit-animation: gradient-animate 8s linear infinite;
    animation: gradient-animate 8s linear infinite;
}

.otherranks li .playeravatar {
    float: left;
    width: 43px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 10px;
}

.otherranks li b {
    float: left;
    line-height: 18px;
    font-weight: normal;
    margin: 4px 0 -2px;
    overflow: hidden;
    white-space: nowrap;
    direction: ltr;
    text-overflow: ellipsis;
    font-family: "Open Sans", "Yek";
    max-width: 200px;
    text-align: left;
    font-size: 14px;
}

.otherranks li b small {
    text-align: left;
    font-weight: normal;
    display: block;
    font-size: 12px;
    padding: 0 0 5px;
    opacity: 0.4;
    overflow: hidden;
    white-space: nowrap;
    direction: ltr;
    text-overflow: ellipsis;
    font-family: "Open Sans", "Yek";
}

.otherranks li>small {
    float: right;
    background: var(--color-dark2);
    padding: 5px;
    min-width: 30px;
    height: 30px;
    margin: 6px;
    line-height: 24px;
    border-radius: 12px;
    text-align: center;
    font-size: 15px;
}

.arrow {
    float: right;
}

.arrow::before {
    content: " ";
    background-size: 9px;
    width: 13px;
    height: 10px;
    margin: 15px 10px 0 0;
    display: block;
    background-position: center center;
    background-repeat: no-repeat;
}

.arrow.arrow-top::before {
    background-image: url("../svg/top.svg");
}

.arrow.arrow-down::before {
    background-image: url("../svg/down.svg");
}


.fullwidth_leaderboard .ldflex {
    display: flex;
    flex-wrap: nowrap;
}

.fullwidth_leaderboard .leaderboard>h2, .fullwidth_leaderboard .leaderboard>small {
    text-align: right;
    margin: 0;
    padding: 3px;
}

.fullwidth_leaderboard .ldlist {
    width: 100%;
    padding: 0 31px;
}

.fullwidth_leaderboard .topplayers {
    min-width: 400px;
    width: 400px;
    margin-left: 15px;
}


/*notifications*/
.dropdown-menu .title {
    padding: 0;
    color: var(--color-white);
    margin: 0 0 15px;
}

.dropdown-menu .title b {
    margin: 0;
    padding: 0;
    line-height: 33px;
}

.dropdown-menu.dropdown-bigmenu {
    min-width: 400px;
    right: auto !important;
    left: 0 !important;
}

.notif_list:not(.notif_full) {
    max-height: 300px;
    overflow: auto;
}


.notif_list ul li, .notif_list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.notif_list ul li a, .notif_list ul li>div {
    display: block;
    padding: 15px;
    margin-bottom: 5px;
    overflow: hidden;
    border-radius: 10px;
}


.notif_list ul li a:hover {
    background: var(--color-dark2);
}

.notif_list ul li h4 {
    font-size: 16px;
    line-height: 25px;
    position: relative;
    padding-right: 20px;
    color: var(--color-dark);
}

.notif_list ul li.unread h4 {
    color: var(--color-white);
}

.notif_list ul li h4::before {
    content: "";
    width: 7px;
    height: 7px;
    position: absolute;
    right: 0;
    top: 0;
    background: var(--color-dark);
    border-radius: 10px;
    margin: 8px 0;
}

.notif_list ul li.unread h4::before {
    background: var(--color-primary);
}

.notif_list ul li span {
    display: block;
    font-size: 12px;
    line-height: 20px;
    color: var(--color-dark);
    max-height: 42px;
}

.notif_list:not(.notif_full) ul li span {
    max-height: 42px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}



.notif_list ul li small {
    display: block;
    float: left;
    font-size: 10px;
    color: var(--color-dark);
    margin-right: 10px;
}

.notif_list span {
    text-overflow: unset;
    max-height: 100000px;
}



/*reg/login*/

.login_background {
    position: absolute;
    right: 0;
    left: 0;
    z-index: 0;
    text-align: center;
    bottom: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
}

.login_background svg {
    width: 80%;
    margin: 0 auto;
    max-height: unset;
}

.login_background svg path {
    stroke-width: 0.2px;
    fill: transparent;
}

.fullpage {
    margin: 0 auto;
    display: flex;
    overflow: auto;
    z-index: 9;
    position: relative;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
}


.login-pages {
    margin: 0 0 0 0 !important;
    width: 450px;
    background: var(--color-dark3);
    padding: 25px 45px;
    border-radius: 15px;
    z-index: 9;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    align-content: space-between;
}

@media screen and (max-width: 768px) {
    .fullpage.login-pages {
        margin-top: -80px;
    }

    .login_background svg {
        width: auto;
        margin: 0 auto;
        max-width: 100000000px;
        right: -50%;
        left: -50%;
        position: absolute;
        top: 0;
        bottom: 0;
        height: 100vh;
    }

    .login-pages {
        min-height: 250px;
        padding:25px 25px;
    }

}


.login_logo {
    display: block;
    margin: 20px auto;
}

.login_logo img {
    width: auto;
    height: 45px;
    margin: 0 auto;
    display: block;
}

.stepwizard {
    display: none;
}


.step-error .form_title>h4>label {
    color: var(--color-primary);
}

.form_title>span {
    display: block;
    text-align: right;
    color: var(--color-dark);
    font-size: 13px;
    margin: 0;
    padding: 0;
    line-height: 28px;
}


.wizard-form .form-group {
    margin: 20px auto;
}


.group-flex>h3 {
    font-size: 20px;
    margin: 15px 0;
    padding: 0;
}

.form-group.form-iconic>img {
    position: absolute;
    right: 0;
    top: 0;
    margin: 13px;
    width: 21px;
    height: 21px;
}

.form-group.form-iconic input {
    padding-right: 50px;
}


.form-group>label {
    font-size: 14px;
    font-weight: bold;
    color: var(--color-dark);
    margin: 0;
    padding: 0 15px;
}



.form-group.form-tel input,
.form-group.digits input {
    font-size: 20px;
    text-align: center;
    letter-spacing: 8px;
    padding: 10px;
    direction: ltr;
}

.form-group.flex-group {
    flex-wrap: nowrap;
    display: flex;
}

.btn-socialogin img {
    width: 20px;
    height: 20px;
    margin: 2px 0 0 7px;
}

.btn-socialogin {
    background: var(--color-dark2) !important;
    border-color: var(--color-dark) !important;
    margin: 0 10px;
    text-align: center;
    display: flex;
    justify-content: center;
}

.btn-socialogin:hover, .btn-socialogin:focus {
    background: var(--color-dark2) !important;
    border-color: var(--color-white) !important;
}


.listdeti {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    text-align: center;
    color: var(--color-white);
    width: 100%;
}


.listdeti li {
    text-align: center;
    font-size: 14px;
}

.listdeti.listtiny li {
    font-size: 14px;
}

.listdeti.listtiny li svg {
    display: inline-block;
    position: relative;
    top: -1px;
    margin-left: 3px;
    width: 18px;
    height: 18px;
}

.listdeti li a {
    display: inline-block;
    color: var(--color-primary);
    margin: 0 15px;
    font-weight: bold;
}


.listdeti.listdeti li a {
    color: var(--color-primary);
}

.timerbox {
    color: var(--color-primary);
    margin: 0 4px;
}

.timerbox b {
    margin: 0 0 0 6px;
    font-weight: normal;
}

.sendag {
    display: none !important;
}

.timerbox.hide {
    display: none !important;
}

.sendag.show {
    display: inline-block !important;
}

.btn-tiny {
    margin-right: 5px;
    border: 0;
    font-size: 12px !important;
    padding: 0 7px;
    height: auto;
    line-height: 26px;
    width: auto;
    min-height: 28px;
}

.btn-tiny:hover {
    border: 0;
}

.donesend {
    display: none;
}

.donesend.show {
    display: block !important;
}

.step-error input {
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}

.error {
    color: var(--color-primary);
}

.backbtn {
    display: block;
    width: 100%;
    overflow: hidden;
    padding: 6px 0;
}

.wizard-form {
    width: 100%;
    margin: 25px auto;
    padding-bottom: 15px;
}

.prevBtn {
    color: var(--color-primary);
    cursor: pointer;
    display: block;
    float: right;
    padding: 0;
    font-size: 14px;
}

.prevBtn img {
    width: 16px;
    height: 16px;
    display: block;
    float: right;
    margin: 7px 0 0 7px;
}


.btn-loader svg {
    -webkit-animation: rotate 2s linear infinite;
    animation: rotate 2s linear infinite;
    z-index: 2;
    position: absolute;
    width: 25px;
    height: 25px;
    display: none;
    left: 0;
    margin: 0 auto;
    right: 0;
    top: 8px;
}

.btn-loader.loading svg {
    display: block;
}

.btn-loader.loading {
    font-size: 0 !important;
}

.btn-loader svg .path {
    stroke: var(--color-white);
    stroke-linecap: round;
    -webkit-animation: dash 1.5s ease-in-out infinite;
    animation: dash 1.5s ease-in-out infinite;
}

@-webkit-keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }

    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }

    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}




.showpass {
    position: absolute;
    cursor: pointer;
    width: 50px;
    height: 45px;
    background: url("../svg/sleep.svg") no-repeat center;
    left: 0;
    top: 0;
    margin: 11px;
    border-radius: 0;
    background-size: 18px;
    background-position: center center;
}

.showpass.show {
    background: url("../svg/eye.svg") no-repeat center;
    background-size: 18px;
    background-position: center center;
}

.form_title>h4>label {
    display: block;
    font-size: 14px;
    margin: 15px auto;
    font-weight: normal;
}


.form-inner-link {
    font-size: 11px;
    color: var(--color-dark);
    margin: 0;
    padding: 0 20px;
    display: block;
    width: 100%;
}


.form-inner-link a {
    font-size: 11px;
    color: var(--color-white);
    margin: 0 4px;
    padding: 0;
    display: inline-block;
}

.form-inner-link a:hover, .form-inner-link a:focus {
    color: var(--color-primary);
}


/*avatar*/

.avatar-upload {
    position: relative;
    max-width: 120px;
    margin: 25px auto;
}

.avatar-upload.icon-upload {
    margin: 15px;
}



.avatar-preview>div {
    background-color: var(--color-dark2);
}

.avatar-upload .avatar-edit {
    position: absolute;
    right: -6px;
    left: -6px;
    z-index: 1;
    bottom: -6px;
    display: flex; 
    justify-content: space-between;
}

.avatar-upload .avatar-edit input {
    display: none;
}

.avatar-upload .avatar-edit input+label {
    display: inline-block;
    width: 44px;
    height: 44px;
    margin-bottom: 0;
    border-radius: 100%;
    background: var(--color-primary);
    border: 4px solid var(--color-dark2);
    cursor: pointer;
    font-weight: normal;
    text-align: center;
    padding: 8px;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.avatar-upload .avatar-edit input+label img {
    display: block;
}

.avatar-upload .avatar-edit input+label:hover {
    background: var(--color-primary);
}

.avatar-upload .avatar-edit .remove-avatar {
    display: inline-block;
    width: 44px;
    height: 44px;
    margin-bottom: 0;
    border-radius: 100%;
    background: var(--color-dark2);
    border: 4px solid var(--color-dark2);
    cursor: pointer;
    font-weight: normal;
    text-align: center;
    padding: 8px;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.avatar-upload .avatar-edit .remove-avatar svg {
    display: block;
}

.avatar-upload .avatar-edit .remove-avatar:hover {
    background: var(--color-primary);
}

.avatar-upload .avatar-preview {
    width: 120px;
    height: 120px;
    position: relative;
    border-radius: 100%;
}

.avatar-upload .avatar-preview>div {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.avatar-upload.icon-upload .avatar-preview, .avatar-upload.icon-upload .avatar-preview>div {
    border-radius: 25px !important;
}

/*form setting*/

.spacer {
    height: 30px;
}

.minititle {
    position: relative;
    overflow: hidden;
    text-align: center;
    color: var(--color-light);
    font-size: 17px;
    padding: 10px;
    margin: 50px auto 15px;
}

.minititle>span {
    background: var(--color-black);
    padding: 0 15px;
    position: relative;
    z-index: 9;
}

.minititle::before {
    content: "";
    height: 2px;
    width: 100%;
    background: var(--color-dark2);
    position: absolute;
    right: 0;
    left: 0;
    top: 20px;
}


.form-group.tiny-label>label {
    position: absolute;
    top: 0;
    margin: 0;
    padding: 0;
    font-size: 12px;
    background: var(--color-black);
    padding: 0 10px 0 15px;
    top: -3px;
    right: 7px;
    color: #606579;
    line-height: 10px;
}


.alert.form-alert>img {
    width: 19px;
    height: 19px;
    display: block;
    float: right;
    margin: 4px 0 4px 11px;
}

.alert.form-alert {
    color: var(--color-dark);
    margin: 0;
    padding: 0;
}

.form_title.mobile_title>svg {
    display: block;
    width: 50px;
    margin: 0 auto 10px;
}

.form_title.mobile_title>* {
    text-align: center;
    display: block;
}

.form_title.mobile_title > b {
    font-size: 30px;
    color: var(--color-dark);
    margin: 10px auto;
  }