@font-face{font-family:'Friz-Quadrata-TT-Regular';src:url('../font/Friz Quadrata TT Regular/Friz Quadrata TT Regular.ttf') format('truetype')}
@font-face{font-family:'OpenSans-Regular';src:url('../font/Open_Sans/OpenSans-Regular.ttf') format('truetype')}
@font-face{font-family:'OpenSans-Bold';src:url('../font/Open_Sans/OpenSans-Bold.ttf') format('truetype')}
@font-face{font-family:'OpenSans-ExtraBold';src:url('../font/Open_Sans/OpenSans-ExtraBold.ttf') format('truetype')}

:root{
--nav-height:60px;
--slide-gap:100px;
--slide-offset:calc(var(--nav-height) + var(--slide-gap));
--hero-slide-height:850px;
--nav-offset:calc(var(--nav-height) + var(--slide-gap));
--text-main:#e1f5fe;
--text-soft:#b3e5fc;
--text-muted:#90caf9;
--accent:#4fc3f7;
--accent-2:#40c4ff;
--accent-3:#2979ff;
--panel-bg:rgba(13,17,33,.85);
--panel-border:rgba(79,195,247,.3);
--panel-border-soft:rgba(79,195,247,.18);
--panel-bg-soft:rgba(10,14,26,.55);
--input-bg:rgba(10,20,40,.5);
--input-bg-focus:rgba(10,20,40,.7);
--input-border:#1e3a5f;
--shadow:0 10px 30px rgba(0,0,0,.35);
--radius:14px
}

html,body{height:100%}
*{margin:0;padding:0;box-sizing:border-box}
body{
font-family:'Friz-Quadrata-TT-Regular',serif;
background:linear-gradient(to bottom,rgba(40,20,50,.6) 0%,rgba(15,5,20,.98) 100%),url('../img/yj_bg.jpg') no-repeat center center fixed;
background-size:cover;
background-attachment:fixed;
margin:0;
padding:0
}

a{color:var(--text-soft);text-decoration:none;transition:all .3s ease}
a:hover{color:#81d4fa;text-decoration:none}
a:focus,a:hover,a:active{outline:0;box-shadow:none}
a.active,a:focus,button:focus,button.active{outline:none}
.btn:focus{box-shadow:none}

h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6{margin-bottom:0}
h1{font-size:24px;color:var(--text-main)}
h2{font-size:18px;color:var(--text-main)}
h4{font-size:16px;color:var(--text-main)}
td{color:var(--text-soft)}

.navbar-expand-lg .navbar-nav .nav-link{color:var(--text-soft);font-size:14px;padding:40px}
.navbar-expand-lg .navbar-nav .nav-link:hover{color:var(--text-main)}

#mainNav{
width:100%;
position:fixed;
top:0;
left:0;
right:0;
margin-top:0;
z-index:9999;
background:transparent!important;
background-image:none!important;
box-shadow:none!important;
padding-top:20px
}
#mainNav.navbar-shrink{background:transparent!important;background-image:none!important;box-shadow:none!important}
#mainNav .navbar-toggler{border-color:rgba(255,255,255,.35)!important}
#mainNav .navbar-collapse{border-radius:12px;padding:10px 12px;margin-top:10px}
#mainNav .container{
background-color:rgba(0,0,0,.2)!important;
border-radius:21px;
padding:5px 30px;
border:1px solid rgba(255,255,255,.1);
backdrop-filter:blur(5px);
box-shadow:0 5px 15px rgba(0,0,0,.2);
display:flex;
align-items:center;
justify-content:space-between
}
#mainNav .nav-link{
color:#b1e2f9!important;
font-weight:600;
font-size:13px;
text-transform:uppercase;
padding:10px 15px!important
}
#mainNav .nav-link:hover{color:#fff!important;text-shadow:0 0 8px rgba(255,255,255,.6)}
.navbar-nav .dropdown-menu{
background-color:rgba(20,10,30,.95)!important;
border:1px solid rgba(173,223,243,.39);
border-radius:10px;
margin-top:15px;
min-width:60px;
text-align:center
}
.navbar-nav .dropdown-item:hover{background-color:rgba(255,255,255,.1)!important;border-radius:5px}

.left-hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    z-index: 100 !important;
    margin-top: -50px;
    pointer-events: auto;
}

.btn-main-download {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 65px;
    text-decoration: none;
    z-index: 101 !important;
    cursor: pointer;
    background: linear-gradient(180deg, #3e2b26 0%, #1a0f0f 100%);
    border: 1px solid #7c5e53;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    font-family: 'OpenSans-ExtraBold', serif;
    font-size: 18px;
    color: #e6cc8d;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.hero-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    padding-left: 50px;
    position: relative;
    width: 1200px;
    margin: 0 auto;
    transform: scale(0.9);
    transform-origin: center top;
    z-index: 50;
}

.bg_img6, .peo_img6 {
    z-index: 1 !important;
    pointer-events: none;
}

header.hero-header{
position:relative;
overflow:visible;
min-height:calc(var(--hero-slide-height) + var(--slide-offset))
}
header.hero-header #animated-bg{
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
height:calc(100% - var(--nav-offset));
z-index:0;
pointer-events:none;
overflow:hidden
}
header.hero-header #animated-bg .swiper-container,
header.hero-header #animated-bg .swiper-wrapper,
header.hero-header #animated-bg .swiper-slide{width:100%;height:100%}
header.hero-header .header-content{display:none!important}
header.hero-header #animated-bg .swiper-pagination{display:none!important}
header{height:660px}

.hero-container{
display:flex;
align-items:center;
justify-content:flex-start;
height:100%;
padding-left:50px;
position:relative;
width:1200px;
margin:0 auto;
transform:scale(.9);
transform-origin:center top
}
.left-hero-content{
display:flex;
flex-direction:column;
align-items:center;
z-index:15;
margin-top:-50px
}
.name_yj{
position:relative!important;
left:auto!important;
top:auto!important;
transform:none!important;
margin-bottom:30px!important
}
.peo_img6{top:20px!important;right:-50px!important;z-index:5;position:absolute}
.bg_img6{top:80px!important;right:170px!important;position:absolute}

.download-area{
display:flex;
flex-direction:column;
align-items:center;
width:100%;
margin-top:20px
}
.btn-main-download{
position:relative;
display:flex;
align-items:center;
justify-content:center;
width:220px;
height:65px;
text-decoration:none;
background:linear-gradient(180deg,#3e2b26 0%,#1a0f0f 100%);
border:1px solid #7c5e53;
box-shadow:0 0 15px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.1);
font-family:'OpenSans-ExtraBold',serif;
font-size:18px;
color:#e6cc8d;
text-transform:uppercase;
letter-spacing:1px;
transition:all .3s ease
}
.btn-main-download:hover{
color:#fff;
border-color:#00c6ff;
box-shadow:0 0 25px rgba(0,198,255,.7),0 0 10px rgba(0,198,255,.4);
text-decoration:none;
transform:translateY(-2px)
}
.btn-main-download::after{
content:'';
position:absolute;
bottom:12px;
width:40px;
height:2px;
background-color:#0072ff;
transition:width .3s,background-color .3s
}
.btn-main-download:hover::after{width:100px;background-color:#00c6ff}

.title-desc{
margin-top:15px;
font-family:'OpenSans-Regular',serif;
font-size:14px;
color:#ccc;
text-shadow:0 2px 4px #000;
letter-spacing:1px;
text-transform:uppercase;
opacity:.8;
text-align:center
}

.detailed-section{
background-color:transparent;
margin-top:-250px;
position:relative;
z-index:20;
padding-bottom:50px
}

input[type='text'],input[type='email'],input[type='password']{
font-family:'OpenSans-Regular',serif;
font-size:12px;
color:var(--text-main);
background-color:var(--input-bg);
border:unset;
border-bottom:1px solid var(--input-border)!important;
margin-top:14px;
padding:20px
}
input[type='text']:focus,input[type='email']:focus,input[type='password']:focus{
background-color:var(--input-bg-focus);
color:#fff
}
input[type='text']::placeholder,input[type='email']::placeholder,input[type='password']::placeholder{color:var(--text-muted)}

.login-header{
display:flex;
justify-content:space-between;
padding:21px 15px;
background-image:none!important;
background-color:var(--panel-bg);
border:1px solid var(--panel-border);
position:relative
}
.login-header .name h3{
font-size:13px;
text-transform:uppercase;
color:var(--text-main);
position:relative;
font-family:'Friz-Quadrata-TT-Regular',serif;
padding-left:15px
}
.login-header .type{margin-right:15px}
.login-header .type h4{
font-size:12px;
color:var(--accent);
font-family:'OpenSans-Regular',serif;
position:relative
}
.login-body{padding:15px 15px 0 15px}
.login-body-bg{
background-color:var(--panel-bg);
border:1px solid var(--panel-border);
border-top:none;
display:flow-root
}
.login-body-submit{display:flex;justify-content:space-between;padding:30px 0}
.login-footer{border:3px solid #0f1c30;position:relative}
.login-footer .forget-pass{background-color:#0b1526;padding:15px 0}
.login-footer h4{
font-size:14px;
color:var(--text-muted);
font-weight:400;
font-family:'OpenSans-Regular',serif;
text-align:center
}
.login-footer h5{
color:var(--text-soft);
font-size:14px;
font-weight:400;
font-family:'OpenSans-Regular',serif;
text-align:center
}
.login-footer h4 a{color:var(--text-main)}

.btn-custom{position:relative;text-align:center}
.btn-text-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%}

.btn-login{
background-image:url('../img/btn_nav_sign_in.png');
background-position:center;
background-repeat:no-repeat;
background-size:cover;
width:102px;
height:33px;
margin:35px;
font-family:'OpenSans-ExtraBold',serif;
font-size:12px;
text-transform:uppercase;
color:#1c0e0e
}
.btn-login:hover{filter:brightness(120%)}

.btn-header-download{
background-image:url('../img/btn_main_download.png');
background-position:center;
background-repeat:no-repeat;
background-size:cover;
width:174px;
height:51px;
font-family:'OpenSans-Bold',serif;
font-size:13px;
text-transform:uppercase;
color:#fff
}
.btn-header-download:hover{filter:brightness(120%)}

.btn-login-box{
background-image:url('../img/btn_left_sidebar.png');
background-position:center;
background-repeat:no-repeat;
background-size:cover;
width:106px;
height:34px;
font-family:'OpenSans-ExtraBold',serif;
font-size:12px;
text-transform:uppercase;
color:#1c0e0e
}
.btn-login-box:hover{filter:brightness(120%)}

.btn-custom-pin{
background-image:url('../img/btn_left_sidebar.png');
background-position:center;
background-repeat:no-repeat;
background-size:cover;
width:106px;
height:34px;
font-family:'OpenSans-ExtraBold',serif;
font-size:12px;
text-transform:uppercase;
color:#1c0e0e;
align-items:center;
text-align:center;
position:relative;
display:flex;
margin:0 auto;
justify-content:center
}
.btn-custom-pin:hover{filter:brightness(120%)}

.btn-content{
background-image:url('../img/btn_left_sidebar.png');
background-position:center;
background-repeat:no-repeat;
background-size:cover;
width:140px;
height:34px;
font-family:'OpenSans-Bold',serif;
font-size:12px;
color:#1c0e0e
}
.btn-content:hover{filter:brightness(120%)}

.btn-banner-register{
background-image:url('../img/left_sidebar_banner_register.png');
background-position:center;
background-repeat:no-repeat;
background-size:cover;
width:100%;
height:131px;
margin:10px 0 20px
}
.btn-banner-register:hover{filter:brightness(110%)}
.btn-banner-register:active{filter:brightness(90%)}
.btn-text-banner-register-main{
position:absolute;
left:30px;
top:50px;
font-family:'OpenSans-ExtraBold',serif;
font-size:16px;
text-transform:uppercase;
text-shadow:1px 1px 1px rgba(0,176,255,.75);
color:#0d47a1
}
.btn-text-banner-register-second{
position:absolute;
left:30px;
top:75px;
font-family:'OpenSans-Regular',serif;
font-size:11px;
color:#40c4ff
}

.btn-banner-discord{
background-image:url('../img/right_sidebar_banner_discord.png');
background-position:center;
background-repeat:no-repeat;
background-size:cover;
width:100%;
height:127px;
margin:10px 0 20px
}
.btn-banner-discord:hover{filter:brightness(110%)}
.btn-banner-discord:active{filter:brightness(90%)}
.btn-text-banner-discord-main{
position:absolute;
left:30px;
top:50px;
font-family:'OpenSans-ExtraBold',serif;
font-size:16px;
text-transform:uppercase;
text-shadow:1px 1px 1px rgba(128,216,255,.75);
color:#01579b
}
.btn-text-banner-discord-second{
position:absolute;
left:30px;
top:75px;
font-family:'OpenSans-Regular',serif;
font-size:11px;
color:#81d4fa
}

.btn-download{
background-image:url('../img/btn_download.png');
background-position:center;
background-repeat:no-repeat;
background-size:cover;
width:265px;
height:79px
}
.btn-download:hover{filter:brightness(120%)}
.btn-download:active{filter:brightness(80%)}
.btn-text-download-main{
position:absolute;
top:40%;
left:60%;
transform:translate(-50%,-50%);
width:100%;
font-size:20px;
text-transform:uppercase;
color:#81d4fa;
background:#e3f2fd;
background:-webkit-radial-gradient(ellipse farthest-corner at center center,#e3f2fd 0%,#29b6f6 77%);
background:-moz-radial-gradient(ellipse farthest-corner at center center,#e3f2fd 0%,#29b6f6 77%);
background:radial-gradient(ellipse farthest-corner at center center,#e3f2fd 0%,#29b6f6 77%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent
}
.btn-text-download-second{
position:absolute;
top:57%;
left:60%;
transform:translate(-50%,-50%);
width:100%;
font-size:13px;
color:#fff
}

.btn-donate{
background-image:url('../img/btn_donate.png');
background-position:center;
background-repeat:no-repeat;
background-size:cover;
width:265px;
height:79px
}
.btn-donate:hover{filter:brightness(120%)}
.btn-donate:active{filter:brightness(80%)}
.btn-text-donate-main{
position:absolute;
top:40%;
left:60%;
transform:translate(-50%,-50%);
width:100%;
font-size:20px;
text-transform:uppercase;
color:#81d4fa;
background:#e3f2fd;
background:-webkit-radial-gradient(ellipse farthest-corner at center center,#e3f2fd 0%,#29b6f6 77%);
background:-moz-radial-gradient(ellipse farthest-corner at center center,#e3f2fd 0%,#29b6f6 77%);
background:radial-gradient(ellipse farthest-corner at center center,#e3f2fd 0%,#29b6f6 77%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent
}
.btn-text-donate-second{
position:absolute;
top:57%;
left:60%;
transform:translate(-50%,-50%);
width:100%;
font-size:13px;
color:#fff
}

.btn-search{position:absolute;color:var(--text-muted);padding-top:7px;right:10px}
.btn-search:hover{color:#bbdefb;filter:brightness(120%)}

.color-empire-1{color:#00e5ff}
.color-empire-2{color:var(--accent-2)}
.color-empire-3{color:var(--accent-3)}

.ranking-table td,.table th{
border:0;
font-family:'OpenSans-Regular',serif;
font-size:14px;
font-weight:400;
text-align:left;
color:var(--text-muted);
padding:10px 15px
}
.ranking-table .player{color:var(--text-main)}
.ranking-table tr:nth-child(even),.ranking-table tr:nth-child(odd){background-color:transparent!important}

.ranking-body{
background:var(--panel-bg-soft);
border:1px solid rgba(79,195,247,.18);
border-top:0;
border-radius:0 0 var(--radius) var(--radius);
box-shadow:var(--shadow);
overflow:hidden
}
.ranking-body .overflow-auto{padding:10px 10px 12px}
.table.ranking-table{margin-bottom:0!important}
.ranking-table{
width:100%;
margin:0;
border-collapse:separate;
border-spacing:0;
background:rgba(5,8,16,.35);
border:1px solid rgba(79,195,247,.14);
border-radius:12px;
overflow:hidden
}
.ranking-table td,.ranking-table th{
padding:10px 12px;
color:rgba(220,240,255,.92);
font-size:13px;
border:0;
vertical-align:middle;
white-space:nowrap
}
.ranking-table tbody tr + tr td{border-top:1px solid rgba(255,255,255,.06)}
.ranking-table tbody tr td:first-child{
width:42px;
color:rgba(177,226,249,.9);
font-weight:700
}
.ranking-table .player{font-weight:700;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.55)}
.ranking-table tbody tr:hover{background:rgba(79,195,247,.08)}
.ranking-body .overflow-auto::-webkit-scrollbar{width:8px}
.ranking-body .overflow-auto::-webkit-scrollbar-track{background:rgba(0,0,0,.25);border-radius:10px}
.ranking-body .overflow-auto::-webkit-scrollbar-thumb{background:rgba(79,195,247,.25);border-radius:10px}
.ranking-body .overflow-auto::-webkit-scrollbar-thumb:hover{background:rgba(79,195,247,.4)}

.ranking tr.marked{-webkit-animation:flash 2s infinite;animation:flash 2s infinite}

.faq-body-bg{
background-image:url(../img/left_sidebar_faq_bg.png);
background-repeat:no-repeat;
background-size:cover;
background-position:center
}
.faq-box ul{padding:25px}
.faq-box ul li{margin-right:5px;position:relative}
.faq-box ul li::before{
content:"";
background-image:url(../img/left_content_faq_arrow.png);
background-repeat:no-repeat;
width:6px;
height:9px;
display:block;
position:absolute;
right:50px;
margin-top:9px
}
.faq-box ul a{
margin-top:5px;
color:var(--text-main);
font-family:'OpenSans-Regular',serif;
font-size:12px
}
.faq-box ul a:hover{color:var(--text-soft)}
.faq-box ul li::marker{font-size:10px;color:var(--text-muted)}

#faq-accordion .card-header{background:unset;border:unset;padding:unset}
#faq-accordion .card{background:unset;border:unset;padding:unset;position:relative}
#faq-accordion .btn.btn-link{
margin-top:5px;
color:var(--text-main);
font-family:'OpenSans-Regular',serif;
font-size:12px
}
#faq-accordion .card-body{
color:var(--text-main);
font-family:'OpenSans-Regular',serif;
font-size:12px
}
#faq-accordion .card:before{
content:"";
background-image:url(../img/left_content_faq_arrow.png);
background-repeat:no-repeat;
width:6px;
height:9px;
transition:all .5s;
overflow:hidden;
position:absolute;
right:35px;
top:16px
}

#custom-content-center{padding:0 20px}

.news-sub-box p{color:var(--text-main)}
.news-header .name,.bd-c{padding-top:12px}
.news-header .name h3{
font-size:13px;
text-transform:uppercase;
color:var(--text-main);
position:relative;
font-family:'Friz-Quadrata-TT-Regular',serif;
padding-left:15px
}
.news-header .type{margin-right:15px}
.news-header .type h4{
font-size:12px;
color:var(--accent);
font-family:'OpenSans-Regular',serif;
position:relative
}
.news-header{
display:flex;
justify-content:space-between;
padding:20px 15px 0;
background-image:none!important;
background-color:var(--panel-bg);
position:relative;
border:1px solid var(--panel-border);
margin-top:20px
}
.news-header .nav-tabs{border-bottom:unset;font-family:'OpenSans-Regular',serif;font-size:12px}
.news-header .nav-tabs .nav-item.show .nav-link,.nav-tabs .nav-link.active{
background:unset;
color:var(--text-main);
border-bottom:1px solid #0072ff;
padding-bottom:30px
}
.news-header .nav-tabs .nav-item.show .nav-link,.nav-tabs .nav-link{
border:unset;
border-bottom:1px solid var(--text-soft);
color:var(--text-muted);
padding-bottom:30px
}
.news-body{
padding:15px 15px 0 15px;
background-color:var(--panel-bg);
border:1px solid var(--panel-border);
border-top:none
}
.news-body-bg{background-color:var(--panel-bg);display:flow-root}

.news-sub-header .name h3{
font-size:13px;
text-transform:uppercase;
color:var(--text-main);
position:relative;
font-family:'Friz-Quadrata-TT-Regular',serif;
padding-left:15px
}
.news-sub-header .type{margin-right:15px}
.news-sub-header .type h4{
font-size:12px;
color:var(--text-soft);
font-family:'OpenSans-Regular',serif;
position:relative
}
.news-sub-header .type h4 .link{color:#00b0ff}
.news-sub-header{
display:flex;
justify-content:space-between;
padding:21px 15px;
background-image:url(../img/news_section_header_bg.png);
background-repeat:no-repeat;
background-size:cover;
position:relative
}
.news-sub-body{padding:15px 15px 0 15px;margin-bottom:15px}
.news-sub-body-bg{background-color:#0f1c30;display:flow-root}
.news-sub-body p{color:#bbdefb;font-family:'OpenSans-Regular',serif;font-size:12px}

.content-header .name h3,.pre-social{
font-size:20px;
text-transform:uppercase;
text-align:center;
color:var(--text-main);
position:relative;
font-family:'Friz-Quadrata-TT-Regular',serif
}
.content-header .type{margin-right:15px}
.content-header .type h4{
font-size:12px;
color:var(--accent);
font-family:'OpenSans-Regular',serif;
position:relative
}
.content-header,.page-hd{
padding:26px 15px;
background-image:none!important;
background-color:var(--panel-bg);
position:relative;
border:1px solid var(--panel-border)
}
.content-header .nav-tabs{border-bottom:unset;font-family:'OpenSans-Regular',serif;font-size:12px}
.content-header .nav-tabs .nav-item.show .nav-link,.nav-tabs .nav-link.active{
background:unset;
color:var(--text-main);
border-bottom:1px solid #0072ff;
padding-bottom:30px
}
.content-header .nav-tabs .nav-item.show .nav-link,.nav-tabs .nav-link{
border:unset;
border-bottom:1px solid var(--text-soft);
color:var(--text-muted);
padding-bottom:30px
}
.content-body{
padding:15px 15px 15px 15px;
background-color:var(--panel-bg);
border:1px solid var(--panel-border);
border-top:none
}
.content-body-bg{background-color:var(--panel-bg);display:flow-root}
.content-body p{color:#bbdefb}

.stats-body-bg{
background-image:none!important;
background-color:var(--panel-bg);
border:1px solid var(--panel-border);
border-top:none
}
.server-stats ul{padding:25px}
.server-stats ul li{
margin-right:5px;
margin-top:20px;
color:var(--text-main);
font-family:'OpenSans-Regular',serif;
font-size:12px
}
.server-stats ul li:hover{color:var(--text-soft)}
.server-stats ul li::marker{font-size:10px;color:var(--text-muted)}
.server-stats .value{
width:90px;
background-color:rgba(10,20,40,.5);
border-bottom:1px solid var(--input-border)!important;
margin-top:-6px;
padding:5px 20px;
float:right;
text-align:center
}

.players-online-bg{
background-image:url(../img/right_sidebar_player_online_bg.png);
background-repeat:no-repeat;
background-size:cover;
background-position:center
}
.players-online-body{padding:35px}
.players-online{text-align:center}
.players-online .amount{display:block;font-size:26px;color:var(--text-main)}
.players-online .main-text{
font-family:'OpenSans-Regular',serif;
font-size:13px;
color:var(--text-muted)
}
.players-online .main-text .twenty-four{color:var(--accent)}

.discord-banner{
background-image:url(../img/right_sidebar_banner_discord.png);
background-repeat:no-repeat;
width:100%;
height:127px;
position:relative;
margin:10px 0 20px
}
.discord-banner:hover{filter:brightness(110%)}
.discord-banner:active{filter:brightness(90%)}
/* =========================================
   ? ????? ????? ???? ???????? (User Panel Menu)
   ========================================= */

/* ????? ????? ???? (?????) */
#account_block a.btn-account-menu {
    display: block;
    width: 100%;
    padding: 12px 15px; /* ????? ?????? ????? */
    margin-bottom: 8px; /* ????? ??? ?? ?? */
    
    /* ????? ????? ????? ?????? */
    background: linear-gradient(90deg, rgba(13, 71, 161, 0.4) 0%, rgba(25, 118, 210, 0.2) 100%);
    border: 1px solid rgba(66, 165, 245, 0.3); /* ???? ????? ????? */
    border-left: 3px solid #0288d1; /* ?? ????? ???? */
    border-radius: 4px;
    
    /* ????? ???? */
    color: #e1f5fe;
    text-decoration: none;
    font-family: 'OpenSans-Bold', sans-serif;
    font-size: 13px;
    text-align: left;
    transition: all 0.3s ease; /* ????? ?????? */
    position: relative;
}

/* ????? ???????? ???? ???? */
#account_block a.btn-account-menu i {
    margin-right: 12px;
    width: 20px;
    text-align: center;
    color: #4fc3f7; /* ??? ???????? ????? */
    font-size: 14px;
}

/* ? ????? ??? ???? ?????? (Hover) */
#account_block a.btn-account-menu:hover {
    background: linear-gradient(90deg, rgba(13, 71, 161, 0.7) 0%, rgba(33, 150, 243, 0.5) 100%);
    border-color: #4fc3f7;
    border-left-color: #fff; /* ???? ??????? ???? */
    padding-left: 20px; /* ???? ?????? */
    color: #ffffff;
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.3); /* ???? */
}

#account_block a.btn-account-menu:hover i {
    color: #ffffff;
}

/* ?? ????? ?? ?????? (Shop) - ??? ???? ???? */
#account_block a.btn-account-menu.shop {
    background: linear-gradient(90deg, rgba(255, 143, 0, 0.2) 0%, rgba(255, 111, 0, 0.1) 100%);
    border-color: rgba(255, 215, 0, 0.4);
    border-left-color: #ffca28;
    color: #fff8e1;
}
#account_block a.btn-account-menu.shop i { color: #ffca28; }

#account_block a.btn-account-menu.shop:hover {
    background: linear-gradient(90deg, rgba(255, 143, 0, 0.5) 0%, rgba(255, 111, 0, 0.3) 100%);
    box-shadow: 0 0 15px rgba(255, 193, 7, 0.4);
}

/* ?? ????? ?? ????? ?????? (Logout) - ??? ???? ???? */
#account_block a.btn-account-menu.logout {
    margin-top: 15px; /* ???? ?? ?????? ?? ?????? */
    background: linear-gradient(90deg, rgba(198, 40, 40, 0.2) 0%, rgba(183, 28, 28, 0.1) 100%);
    border-color: rgba(239, 83, 80, 0.4);
    border-left-color: #ef5350;
    color: #ffcdd2;
}
#account_block a.btn-account-menu.logout i { color: #ef5350; }

#account_block a.btn-account-menu.logout:hover {
    background: linear-gradient(90deg, rgba(198, 40, 40, 0.5) 0%, rgba(183, 28, 28, 0.3) 100%);
    border-color: #ff5252;
    color: #fff;
    box-shadow: 0 0 15px rgba(244, 67, 54, 0.4);
}

/* ????? ?????? (Badge) ??????? */
#account_block .badge {
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.9);
    color: #333;
}
footer{
background-image:none!important;
background-color:rgba(0,0,0,.3)!important;
backdrop-filter:blur(5px);
width:100%;
margin-top:0!important;
position:relative;
z-index:30;
border-top:1px solid rgba(255,255,255,.1)
}
.first-footer{padding-top:40px!important;padding-bottom:40px!important}
.second-footer{
height:auto;
padding:15px 0;
background-color:rgba(0,0,0,.2)!important;
border-top:1px solid rgba(255,255,255,.05);
font-size:12px
}
.second-footer p{color:var(--text-soft);margin-bottom:0}
.second-footer a{color:var(--accent-2);text-decoration:none;transition:all .3s ease}
.second-footer a:hover{color:#fff}
.top-footer ul{
display:flex;
width:75%;
margin:0 auto;
justify-content:center;
list-style:none
}
.top-footer ul li{padding-right:80px}
.top-footer ul li a{
font-size:14px;
color:var(--text-soft);
text-align:center;
text-transform:uppercase;
font-weight:600;
transition:all .3s ease
}
.top-footer ul li a:hover{color:#fff;text-shadow:0 0 8px rgba(79,195,247,.5)}
.bottom-content{display:flex;justify-content:space-between;padding-top:16px}
.bottom-content .backlink a{color:var(--accent)}

.ranking{
font-family:'OpenSans-Regular',serif;
font-size:13px;
color:#bbdefb;
border:1px solid #0d1b2a;
width:100%
}
.ranking .ranking-header,.thead-inverse tr{
background:rgb(13,17,33);
background:radial-gradient(circle,rgba(13,17,33,1) 0%,rgba(20,30,50,1) 0%,rgba(13,17,33,1) 100%)
}
.ranking th{color:#fff}
.ranking td,.ranking th{
padding:10px;
border-top:1px solid var(--input-border);
border-bottom:1px solid var(--input-border);
color:var(--text-main)
}
.ranking tr:nth-child(odd){
background:rgb(16,25,41);
background:radial-gradient(circle,rgba(16,25,41,1) 0%,rgba(30,45,70,1) 0%,rgba(16,25,41,1) 100%)
}
.ranking tr:nth-child(even){
background:rgb(13,20,32);
background:radial-gradient(circle,rgba(13,20,32,1) 0%,rgba(25,35,55,1) 0%,rgba(13,20,32,1) 100%)
}
.ranking a{color:var(--text-main);text-decoration:none}
.ranking a:hover{color:#fff}

.ranking-paginator{display:inline-block}
.ranking-paginator a{
font-family:'OpenSans-Regular',serif;
font-size:14px;
color:var(--text-soft);
padding:8px;
text-decoration:none
}
.ranking-paginator a:hover{color:var(--text-main)}
.ranking-paginator a.active{color:var(--text-main);background-color:#0f1c30;border-radius:50px}

.form-check-label{font-family:'OpenSans-Regular',serif;font-size:12px;color:var(--text-muted)}
.form-group label{color:var(--text-soft)}

.swal2-modal{background-color:#0d1b2a!important;border:2px solid #0d1b2a!important}
#swal2-title{color:var(--text-main)!important}
#swal2-content{color:var(--text-muted)!important}
.swal2-footer{border-top:1px solid #0f1c30!important}
.swal2-footer a{color:#bbdefb!important}
.swal2-footer a:hover{color:#e3f2fd!important}
.swal2-styled.swal2-confirm{
background-color:var(--accent)!important;
font-family:'OpenSans-ExtraBold',serif;
font-size:12px;
text-transform:uppercase;
color:#1c0e0e!important
}
.swal2-styled.swal2-cancel{
background-color:#1565c0!important;
font-family:'OpenSans-ExtraBold',serif;
font-size:12px;
text-transform:uppercase;
color:#fff!important
}
.swal2-loader{border-color:#0288d1 transparent #0288d1 transparent!important}

#account_block{text-align:center}
#account_block a{
display:block;
padding:5px 0;
text-decoration:none;
color:#bbdefb;
font-family:'OpenSans-Regular',serif;
font-size:12px
}
#account_block a:hover{color:#fff}

#loginCaptcha{transform:scale(.9);transform-origin:0 0;margin-top:15px}
#registerCaptcha{transform:scale(.94);transform-origin:0 0;margin-top:15px}

.table>tbody>tr>td{vertical-align:middle}
.fade:not(.show){opacity:1!important}
.card{padding:15px;border-radius:0;background-color:#0d1b2a}
.table thead th{border-bottom:unset}
.modal-content{background-color:#0b1526;color:#fff}
.jumbotron{background-color:transparent}
.pagination{justify-content:center}
.page-link{
color:var(--text-main);
background-color:#0d1b2a;
border:1px solid var(--input-border)
}
.page-link:hover,.page-link:focus,.page-link:active{
color:#fff;
background-color:#1565c0;
border:1px solid #0d47a1
}

@-webkit-keyframes flash{
0%{background:rgb(13,27,42)}
50%{background:rgba(0,176,255,0)}
100%{background:rgba(0,229,255,.5)}
}
@keyframes flash{
0%{background:rgba(0,229,255,.5)}
50%{background:rgba(0,176,255,0)}
100%{background:rgba(0,229,255,.5)}
}