:root {
    --max-width: 1700px;
    --letter-spacing: 1.2px;
    --bg-main: #141212 !important;
    --bg-article: #201e1e !important;
    --bg-darker: #0d0c0c !important;
}

html {
    overflow-x: hidden;
}

body {
    background-color: #020000;
    color: white;
    min-height: 100vh;
}

.bg-main {
    background-color: var(--bg-main);
}

.bg-article {
    background-color: var(--bg-article);
}

.bg-darker {
    background-color: var(--bg-darker);
}

a.bg-darker:hover {
    background-color: #110f0f;
}

.fs-7 {
    font-size: 14px;
}

.fs-8 {
    font-size: 12px;
}

.fs-9 {
    font-size: 11px;
}

.text-golden {
    color: #d6a319;
}

.text-golden-darker {
    color: #9d7933;
}

.article-content {
    color: #b1a080;
    font-size: 12px;
    font-family: Arial;
    letter-spacing: 0.4px;
    line-height: 1.7;
}

.container {
    max-width: 1166px;
}

.server-select {
    max-width: var(--max-width);
	height: 33px;
	background-image: url("/img/server_select_bar.webp");
    background-repeat: no-repeat;
}

.fade_pan_left {
	width: 100px;
	height: 100%;
	background-image: linear-gradient(to left, rgba(2,0,0,0), rgba(2,0,0, 1) 90px);
}

.fade_pan_right {
	width: 100px;
	height: 100%;
	background-image: linear-gradient(to right, rgba(2,0,0,0), rgba(2,0,0, 1) 90%);
}

.header-img {
    max-width: var(--max-width);
    height: 326px;
    background-image: url("/img/header_v2.webp");   
    background-position: center;
}

.header-navigation {
    max-width: var(--max-width);
    height: 114px;
    background-image: url('/img/main_register_mall_bar.webp');
    background-position: center top;
    background-repeat: no-repeat;
    background-color: #0e0c0c;
    border-bottom: 1px solid #d09422;
}

.btn-play-now {
    max-width: 406px;
	height: 93px;
	background-image: url("/img/play_now_button.webp");
	background-position: 0px -67px;
	background-repeat: no-repeat;
	position: relative;
	top: -33px;
    text-decoration: none;
}

.btn-play-now:hover {
    height: 93px;
    background-image: url("/img/play_now_button.webp");
    background-position: -406px -67px;
    background-repeat: no-repeat;
    position: relative;
    top: -33px;
}

.btn-play-now:active {
    height: 93px;
    background-image: url("/img/play_now_button.webp");
    background-position: -812px -67px;
    background-repeat: no-repeat;
    position: relative;
    top: -33px;
}

.btn-play-now > span {
	font-family: 'Merriweather', serif;
	color: #fefffe;
	text-shadow: 0px 1px #26c29b;
	font-weight: 600;
	font-size: 25px;
	background-color: transparent;
	cursor: pointer !important;
    user-select: none;
    letter-spacing: var(--letter-spacing);
}
/*  */

.btn-shop {
    max-width: 406px;
	height: 93px;
	background-image: url("/img/item_mall_button.webp");
	background-position: 0px -67px;
	background-repeat: no-repeat;
	position: relative;
	top: -33px;
    text-decoration: none;
}

.btn-shop:hover {
    height: 93px;
    background-image: url("/img/item_mall_button.webp");
    background-position: -406px -67px;
    background-repeat: no-repeat;
    position: relative;
    top: -33px;
}

.btn-shop:active {
    height: 93px;
    background-image: url("/img/item_mall_button.webp");
    background-position: -812px -67px;
    background-repeat: no-repeat;
    position: relative;
    top: -33px;
}

.btn-shop > span:first-child {
	font-family: 'Merriweather', serif;
	color: #fefffe;
	text-shadow: 0px 1px #26c29b;
	font-weight: 600;
	font-size: 25px;
	background-color: transparent;
	cursor: pointer !important;
    user-select: none;
    letter-spacing: var(--letter-spacing);
}

.btn-download {
    width: 298px;
    height: 116px;
    background-image: url("/img/download_button.webp");
    font-family: 'Merriweather', serif;
    letter-spacing: 1.5;
    color: #fffbf6;
    text-shadow: 0px 1px #4e3615;
    text-align: center;
    user-select: none;
}

.btn-download:hover {
    background-position: -298px 0px;
}

.btn-download:active {
    background-position: -596px 0px;
}

.navigation {
    max-width: var(--max-width);
}

.item-list {
    max-width: 1100px;
    position: relative;
    top: -12px;
	font-family: 'Merriweather', serif;
    font-size: 14px;
	letter-spacing: var(--letter-spacing);
}

.item-list > ul > li > a {
    color: #9d7933;
}

.item-list > ul > li > a:hover {
    color: #e2cca3 !important;
}

.nav-link:focus {
    color: #e2cca3 !important;
}

.active-main-menu {
    color: #d09422 !important;
    font-weight: bold;
    position: relative;
}

.active-main-menu::after {
    content: '';
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-bottom: 6px solid #d09422;
    position: absolute;
    left: 50%; 
    transform: translateX(-50%); 
    bottom: -7px;
}

.widget-border-top {
    border-top: 3px solid #49350b;
}

aside {
    width: 100% ;
    max-width: 298px;
}

.article-title,
.widget-border-top > h1 {
    font-family: 'Merriweather', serif;
    color: #ca9020;
    font-size: 21px;
    letter-spacing: var(--letter-spacing);
    font-weight: 600;
    margin-top: 25px;
}

.btn-before {
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-right: 7px solid #9d7933;
    border-bottom: 4px solid transparent;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
}

.btn-after {
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-left: 7px solid #9d7933;
    border-bottom: 4px solid transparent;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
}

.btn-before:hover {
    border-top: 4px solid transparent;
    border-right: 7px solid #9d7933;
    border-bottom: 4px solid transparent;
}

.btn-after:hover {
    border-top: 4px solid transparent;
    border-left: 7px solid #9d7933;
    border-bottom: 4px solid transparent;
}

.btn-after:active:focus, .btn-before:active:focus {
    border-color: #ffffff00;
}

.ranking-category {
    color: #9d7933;
    font-family: 'Merriweather', serif;
    font-size: 14px;
    letter-spacing: 0.4px;
    text-align: center;
}

.ranking-table tr {
    width: 100%;
    background-color: #0d0c0c;
    border-bottom: 1px solid #141212;
}

.ranking-table tr:hover {
    background-color: #0f0e0e;
}

.ranking-icon {
    background-position: center;
    background-repeat: no-repeat;
    width: 38px;
    height: 38px;
    padding-left: 16px;
    padding-right: 16px;
    font-size: 16px !important;
}

.ranking-table tr:nth-child(1) .ranking-icon {
    background-image: url("/img/icons/ranking_first_place.png");
}

.ranking-table tr:nth-child(2) .ranking-icon {
    background-image: url("/img/icons/ranking_second_place.png");
}

.ranking-table tr:nth-child(3) .ranking-icon {
    background-image: url("/img/icons/ranking_third_place.png");
}

.ranking-table tr:nth-child(4) .ranking-icon {
    background-image: url("/img/icons/ranking_forth_place.png");
}

.ranking-table tr:nth-child(5) .ranking-icon {
    background-image: url("/img/icons/ranking_fifth_place.png");
}

.ranking-name {
    font-family: Arial;
    color: #feebc2;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ranking-table td span:first-child {
    color: rgba(134, 117, 85, 0.4);
    font-family: 'Merriweather', serif;
    font-size: 11px;
    letter-spacing: 0.4px;
}

.ranking-table td span:last-child {
    color: #867555;
    font-family: Arial;
    font-size: 15px;
    letter-spacing: 0.4px;
}

.featured-video {
    color: #ca9020;
    font-family: 'Merriweather', serif;
    font-size: 12px;
    letter-spacing: 0.4;
}

.btn-read-more {
    width: 26px;
    height: 25px;
    background-image: url("../img/read_more_button.webp");
    background-position: 0px center;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
}

.form-input {
    border: 1px solid #ae7b17;
    background-color: #393434 !important;
    font-family: Arial;
    font-size: 12px;
    color: #FFF !important;
}

.form-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(255, 208, 0, 0.15);
    border: 1px solid #d89d26;
    background-color: #3d3838 !important;
}

.form-label-new {
    font-family: 'Merriweather', serif;
    letter-spacing: 0.6px
}

.btn-submit {
    width: 190px;
    height: 47px;
    background-image: url("/img/signin_button.webp");
    background-color: unset;
    background-position: 0px center;
    font-family: 'Merriweather', serif;
    letter-spacing: 0.6px;
    color: #342200;
    font-size: 18px;
}

.btn-submit:hover {
    background-position: -190px center;
}

.btn-submit:active {
    background-position: -380px center;
}

.btn-register {
    width: 190px;
    height: 47px;
    background-image: url("/img/register_button.webp");
    background-color: unset;
    background-position: 0px center;
    font-family: 'Merriweather', serif;
    letter-spacing: 0.6px;
    color: #fff;
    font-size: 18px;
}

.btn-register:hover {
    background-position: -190px center;
}

.btn-register:active {
    background-position: -380px center;
}

.btn-logout {
    width: 190px;
    height: 47px;
    background-image: url("/img/logout_button.webp");
    background-color: unset;
    background-position: 0px center;
    font-family: 'Merriweather', serif;
    letter-spacing: 0.6px;
    color: #fff;
    font-size: 18px;
}

.btn-logout:hover {
    background-position: -190px center;
}

.btn-logout:active {
    background-position: -380px center;
}

.btn-save {
    width: 190px;
    height: 47px;
    background-image: url("/img/save_button.webp");
    background-color: unset;
    background-position: 0px center;
    font-family: 'Merriweather', serif;
    letter-spacing: 0.6px;
    color: #fff;
    font-size: 18px;
}

.btn-save:hover {
    background-position: -190px center;
}

.btn-save:active {
    background-position: -380px center;
}

.font-merri,
.game-statistics {
    font-family: 'Merriweather', serif;
}

.game-statistics > div > span {
    font-family: Arial;
}

.online-players {
    width: 172px;
    height: 69px;
    background-image: url("/img/player_count.webp");
    background-position: 0px center;
    background-repeat: no-repeat;
    color: #ffecc7;
    font-weight: 500;
    font-family: Arial;
    font-size: 32px;
    letter-spacing: 1.6px;
}

.navbar-toggler:focus {
	box-shadow: unset;
}

.alert {
    border-radius: unset;
}

.alert-danger {
    background-color: #191010;
    border: 1px solid #db1c1c;
    color: #eed5d5;
}

.alert-success {
    background-color: #1b2618;
    border: 1px solid #0bc72a;
    color: #d6eed5;
}

.page-item.active .page-link {
    color: unset !important;
    background: #c88c15 !important;
    border-color: #867555;
}

.page-item.disabled .page-link {
    color: #867555 !important;
    background: var(--bg-darker) !important;
    border-color: #867555;
    /* border-radius: unset; */
}

.page-item .page-link {
    color: #867555 !important;
    background: var(--bg-darker) !important;
    border-color: #867555;
    /* border-radius: unset; */
}

.shop-deco {
    background-image: url('/img/is.jpg');
    background-position: 50% 10%;
    width: 100%;
    height: 70px;
    border-radius: 20px;
}

.shop-coins{
    transition: all 0.3s;
}

.shop-coins:hover {
    background-color: #181818 !important;
}

@media (max-width: 375px) {
    .btn-play-now {
        background-position: -15px -67px;
    }
    
    .btn-play-now:hover {
        background-position: -421px -67px;
    }

    .btn-play-now:active {
        background-position: -827px -67px;
    }

    .header-navigation {
        height: unset;
    }
    
}   

@media (max-width: 992px) {
    .header-navigation {
        height: unset;
    }
}

@media (max-width: 986px) {
    .active::after {
        display: none;
    }
}