@font-face {
    src: url(../Fonts/OpenSans_semibold.ttf);
    font-family: opensans_semibold
}

@font-face {
    src: url(../Fonts/OpenSans_light.ttf);
    font-family: opensans_light
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02) !important;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 210, 255, 0.25) !important;
    border-radius: 3px !important;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 210, 255, 0.4) !important;
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 210, 255, 0.25) transparent;
}

#wrapper {
    overflow: hidden
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block
}

body {
    line-height: 1;
    overflow-x: hidden;
    width: 100%;
    font-family: "Candara", sans-serif;
}

ol,
ul {
    list-style: none
}

blockquote,
q {
    quotes: none
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

html,
body {
    position: relative
}

a {
    display: block;
    transition: all .3s ease;
    color: #fff;
    text-decoration: none
}

a:hover {
    text-decoration: none
}

h1,
h2,
h3,
h4 {
    color: #fff
}

h1 {
    font-size: 50px
}

h2 {
    font-size: 28px
}

h3 {
    font-size: 18px
}

h4 {
    font-size: 16px
}

span {
    display: block;
    font-size: 14px
}

p {
    font-size: 18px
}

img {
    max-width: 100%
}

button,
.button {
    white-space: nowrap;
    font-family: candara, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(../images/button.webp) center no-repeat;
    background-size: cover;
    color: #2d1100;
    text-transform: uppercase;
    font-weight: 700;
    cursor: pointer;
    transition: .3s;
    text-shadow: 0 1px 3px #fff;
    min-width: 178px;
    height: 52px;
    box-shadow: 0 10px 30px 2px rgba(198, 130, 0, .6);
    font-size: 18px;
    border: none;
    border-radius: 5px;
    padding: 0 20px;
    width: fit-content
}

button:hover,
.button:hover {
    filter: brightness(120%)
}

.button-small {
    min-width: 110px;
    height: 33px;
    font-size: 14px;
    background-size: contain !important
}

.button-large {
    min-width: 240px;
    height: 70px;
    font-size: 24px;
    background-size: contain !important
}

.blue-button {
    box-shadow: 0 10px 20px 0 rgba(98, 223, 234, .4);
    background: url(../images/left-blue-button.webp) left no-repeat, url(../images/right-blue-button.webp) right no-repeat, url(../images/center-blue-button.webp) 113px repeat-x;
    text-shadow: 0 1px 3px #fff;
    color: #0e161d
}

.blue-button:hover {
    filter: brightness(1.1)
}

.white-button {
    background: #fff !important;
    color: #2d1100 !important;
    box-shadow: 0 10px 30px 2px rgba(255, 255, 255, 0.4) !important;
    text-shadow: none !important;
    border: 1px solid #ccc !important;
}

.white-button:hover {
    background: #f0f0f0 !important;
    filter: brightness(105%) !important;
}

input[type=text],
input[type=email],
input[type=number],
input[type=password],
input[type=search] {
    height: 60px;
    border: none;
    outline: none;
    color: #fff;
    background: #1e303a;
    font-size: 16px;
    padding: 0 32px
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

textarea {
    font-size: 16px;
    background: #0e161d;
    color: #fff;
    padding: 30px;
    border: none;
    resize: none
}

textarea::placeholder {
    color: #fff
}

.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px
}

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

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000;
    -webkit-transition: .4s;
    transition: .4s
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    top: 2px;
    background-color: #172934;
    -webkit-transition: .4s;
    transition: .4s
}

input:checked+.slider {
    background-color: #5097a9
}

input:focus+.slider {
    box-shadow: 0 0 1px #5097a9
}

input:checked+.slider:before {
    -webkit-transform: translateX(19px);
    -ms-transform: translateX(19px);
    transform: translateX(19px)
}

.slider.round {
    border-radius: 10px
}

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

.search-input {
    position: relative
}

.search-input:after {
    cursor: pointer;
    content: '';
    position: absolute;
    right: 22px;
    top: calc(50% - 9.5px);
    width: 17px;
    height: 19px;
    background: url(../images/search-icon.webp) center no-repeat
}

.search-input input {
    width: 100%;
    background: #111c24;
    color: #889cad
}

.search-input input::placeholder {
    color: #889cad
}

.has-tooltip,
.has-text-tooltip {
    cursor: pointer
}

.tippy-box[data-theme~=none] {
    padding: 0;
    background-color: transparent
}

.tippy-box[data-theme~=default] {
    font-size: 14px;
    padding: 0 10px;
    color: #fff;
    background-color: #0e1720
}

.custom-select {
    width: 300px;
    position: relative
}

.custom-select select {
    display: none
}

.select-selected {
    display: flex;
    position: relative;
    align-items: center;
    height: 60px;
    padding: 0 30px;
    background: #0e161d;
    color: #fbc430 !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 15px
}

.select-selected:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 58px;
    height: 58px;
    background: #0c1216 url(../images/right-arrow.webp) center no-repeat;
    transform: rotate(90deg);
    transition: .3s
}

.select-items div,
.select-selected {
    cursor: pointer;
    transition: .3s;
    font-size: 15px;
    display: flex;
    align-items: center;
    height: 60px;
    padding: 0 30px;
    border-top: 1px solid #172934;
    color: #889cad;
    letter-spacing: 1.5px
}

.select-items {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
    background: #0e161d;
    max-height: 500px;
    overflow-y: auto
}

.select-hide {
    display: none
}

.select-items div:hover,
.same-as-selected {
    background: #0c1216;
    color: #02eae7 !important
}

.checkbox-wrap {
    display: inline-block;
    position: relative;
    width: 15px;
    height: 15px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 2px solid #666569
}

.checkbox-wrap input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0 !important;
    width: 0 !important;
    min-width: 0 !important
}

.checkmark {
    display: none !important;
    position: absolute;
    top: -4px;
    right: -3px;
    height: 16px;
    width: 16px;
    background: url(../images/checkmark.webp)
}

.checkbox-wrap input:checked~.checkmark {
    display: block !important
}

.pagination {
    position: relative;
    justify-content: center
}

.pagination li {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    background: #0e161d;
    color: #ffb830;
    font-size: 14px;
    font-family: open sans, sans-serif;
    border-radius: 5px;
    margin: 0 7.5px;
    opacity: .5;
    transition: opacity .3s
}

.pagination li.active,
.pagination li:hover {
    opacity: 1
}

.pagination .prev-button,
.pagination .next-button {
    background: #0e161d url(../images/slider-arrow.webp) center no-repeat
}

.pagination .prev-button {
    margin-right: 130px;
    transform: rotate(-180deg)
}

.pagination .next-button {
    margin-left: 130px
}

.mx-auto {
    margin-left: auto;
    margin-right: auto
}

.mt-35 {
    margin-top: 35px
}

.mt-50 {
    margin-top: 50px
}

.pt-50 {
    padding-top: 50px
}

.yellow-title {
    color: #fbc430;
    text-transform: uppercase;
    text-align: center
}

:focus {
    outline: none
}

::-webkit-input-placeholder {
    color: #696868
}

::-moz-placeholder {
    color: #696868
}

:-moz-placeholder {
    color: #696868
}

:-ms-input-placeholder {
    color: #696868
}

.container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding-right: 0px;
    padding-left: 0px;
}

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

.flex-c {
    display: flex;
    align-items: center;
    flex-wrap: wrap
}

.flex-s {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
}

.flex-s-c {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap
}

.flex-c-c {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap
}

.bright:hover {
    filter: brightness(120%)
}

.main-home .title {
    display: flex;
    justify-content: center;
    text-transform: uppercase
}

.main-home .title:after,
.title:before {
    content: "";
    width: 165px;
    height: 29px;
    background: url(../images/title-part.webp) center no-repeat;
    margin-top: 10px
}

.main-home .title:before {
    margin-right: 18px
}

.main-home .title:after {
    margin-left: 18px;
    transform: rotateY(180deg)
}

.block-title {
    position: relative;
    font-weight: 400;
    color: #fbc430;
    padding-left: 35px;
    text-shadow: 0 0 10px rgba(240, 141, 47, .5);
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 24px
}

.block-title:before {
    content: '';
    position: absolute;
    left: -54px;
    top: 50%;
    margin-top: -40px;
    width: 128px;
    height: 86px;
    background: url(../images/download-page/download-title-element.webp) center no-repeat
}

.block-title span {
    font-size: 24px;
    display: inline;
    color: #fff;
    margin-left: 10px
}

.top-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2
}

.top-border:before,
.top-border:after {
    content: "";
    position: absolute;
    background: url(../images/top-border.webp) center no-repeat;
    width: 51px;
    height: 51px;
    top: -12px
}

.top-border:before {
    left: -19px
}

.top-border:after {
    right: -19px;
    transform: rotateY(180deg)
}

.bottom-border {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 2
}

.bottom-border:before,
.bottom-border:after {
    content: "";
    position: absolute;
    background: url(../images/bottom-border.webp) center no-repeat;
    width: 34px;
    height: 41px;
    bottom: -2px
}

.bottom-border:before {
    left: -2px
}

.bottom-border:after {
    right: -2px;
    transform: rotateY(180deg)
}

.silver-border .top-border:before,
.silver-border .top-border:after {
    background-image: url(../images/top-frame-market.webp);
    width: 46px
}

.silver-border .top-border:before {
    left: -14px
}

.silver-border .top-border:after {
    right: -14px
}

.silver-border .bottom-border:before,
.silver-border .bottom-border:after {
    background-image: url(../images/bottom-frame-market.webp)
}

.blue-silver-border .top-border:before,
.blue-silver-border .top-border:after {
    background-image: url(../images/top-blue-frame.webp)
}

.blue-silver-border .top-border:before {
    left: -18px
}

.blue-silver-border .top-border:after {
    right: -18px
}

.blue-silver-border .bottom-border:before,
.blue-silver-border .bottom-border:after {
    background-image: url(../images/bottom-blue-frame.webp)
}

.blue-border .top-border:after,
.blue-border .top-border:before,
.blue-border .bottom-border:after,
.blue-border .bottom-border:before {
    top: 0;
    width: 20px;
    height: 23px;
    background: url(../images/market-page/deposit-top-elem.webp) center no-repeat
}

.blue-border .bottom-border:after,
.blue-border .bottom-border:before {
    top: auto;
    bottom: 0
}

.blue-border .top-border:before,
.blue-border .bottom-border:before {
    left: -2px
}

.blue-border .top-border:after,
.blue-border .bottom-border:after {
    right: -2px
}

.blue-border .bottom-border:before {
    transform: rotateX(180deg)
}

.blue-border .bottom-border:after {
    transform: rotateZ(180deg)
}

.abil {
    display: flex;
    align-items: center;
    padding: 3px 2px;
    background: #111920
}

.abil span {
    display: block
}

.abil .bar {
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, #e4ff00, #0bffe5)
}

.need-to-activate .bar {
    animation: 3s barWidth
}

@keyframes barWidth {
    0% {
        width: 0
    }

    100% {
        width: 100%
    }
}

.info-abil {
    width: 450px;
    position: relative;
    margin-bottom: 10px
}

.info-abil img {
    margin-right: 8px
}

.info-abil .title-abil {
    color: #00fffc;
    font-size: 18px
}

.abil-stat {
    position: absolute;
    font-family: open sans, sans-serif;
    font-size: 16px;
    color: #00fffc;
    right: 0
}

.info-abil .abil {
    width: 180px;
    position: absolute;
    right: 40px
}

body {
    width: 100%;
    background-color: #0e161d;
    font-family: candara, sans-serif;
    font-size: 14px;
    color: #506a84
}

.top-panel {
    background: rgba(4, 15, 23, .85)
}

.top-panel .container {
    height: 100px;
    max-width: 1900px
}

.top-panel-left {
    height: 100%
}

.menu {
    display: flex;
    height: 100%;
    margin-left: 30px
}

.menu>li {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%
}

.menu .menu-item {
    display: block;
    position: relative;
    padding-right: 20px;
    padding-left: 80px
}

.menu .menu-item:before {
    position: absolute;
    content: "";
    background: url(../images/icon-menu.webp) center no-repeat;
    width: 58px;
    height: 38px;
    left: 18px;
    top: calc(50% - 15px)
}

.menu li:nth-child(1) .menu-item::before {
    position: absolute;
    content: "";
    background: url(../images/icon-home.png) center no-repeat;
    width: 58px;
    height: 38px;
    left: 18px;
    top: calc(50% - 15px)
}

.menu li:nth-child(2) .menu-item::before {
    position: absolute;
    content: "";
    background: url(../images/icon-reg.png) center no-repeat;
    width: 58px;
    height: 38px;
    left: 18px;
    top: calc(50% - 15px)
}

.menu li:nth-child(3) .menu-item::before {
    position: absolute;
    content: "";
    background: url(../images/icon-down.png) center no-repeat;
    width: 58px;
    height: 38px;
    left: 18px;
    top: calc(50% - 15px)
}

.menu li:nth-child(4) .menu-item::before {
    position: absolute;
    content: "";
    background: url(../images/icon-quick.png) center no-repeat;
    width: 58px;
    height: 38px;
    left: 18px;
    top: calc(50% - 15px)
}

.menu li:nth-child(4) .dropDown-menu .menu-item::before {
    position: absolute;
    content: "";
    background: url(../images/icon-quick.png) center no-repeat;
    width: 58px;
    height: 38px;
    left: 18px;
    top: calc(50% - 15px)
}

.menu li:nth-child(5) .menu-item::before {
    position: absolute;
    content: "";
    background: url(../images/icon-com.png) center no-repeat;
    width: 58px;
    height: 38px;
    left: 18px;
    top: calc(50% - 15px)
}

.menu .menu-item-title {
    line-height: 1.6;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 18px;
}

.menu .menu-item-info {
    color: #506a84;
    font-size: 14px;
}

.menu li>.menu-item {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    cursor: pointer
}

.menu .menu-a {
    padding-right: 40px
}

.menu .menu-a:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: 50%;
    right: 18px;
    border: 7px solid #506a84;
    border-bottom-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    transition: .3s
}

.menu .menu-a.show:after {
    transform: rotate(180deg);
    margin-top: -8px
}

.menu .dropDown-menu {
    display: none;
    position: absolute;
    left: 0;
    width: 100%;
    top: 100%;
    background: rgba(14, 22, 29, .8);
    z-index: 10
}

.menu .dropDown-menu .menu-item {
    height: 75px;
    position: relative;
    /*padding-left:80px;*/
    text-align: left;
    background: rgba(4, 15, 23, .6);
    transition: .3s
}

.menu .menu-item:hover {
    background: rgba(4, 15, 23, .8)
}

.menu .menu-item.first-depth:hover {
    background: rgba(4, 15, 23, .6)
}

.menu .menu-a.show {
    background: rgba(4, 15, 23, .8)
}

.registered .sign-block {
    display: none
}

.top-panel-right .separator {
    margin: 0 15px
}

.lang-block {
    margin-left: auto;
    margin-right: 20px;
    position: relative;
    height: 26px;
    padding-top: 3px;
    font-size: 16px
}

.lang-block a:hover {
    color: #fbc430
}

.lang-block img {
    position: relative;
    left: -15px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-bottom: -14px;
    transition: all .3s ease;
    background-size: 36px
}

.login-button {
    box-shadow: none
}

.main-item {
    position: relative;
    color: #fff;
    z-index: 9
}

.hidden-block {
    position: absolute;
    background: #061019;
    min-width: 180px;
    z-index: 2;
    left: -10px;
    top: 73px;
    transition: all .5s ease;
    visibility: hidden;
    opacity: 0;
    padding: 10px 0
}

.hidden-block li {
    width: 100%
}

.hidden-block a {
    display: flex;
    align-items: center;
    padding: 8px 40px;
    color: #fff
}

.hidden-block a:hover {
    background: #131c25
}

.hidden-block:after {
    border: 10px solid transparent;
    border-bottom-color: #061019;
    position: absolute;
    left: 34px;
    top: -20px;
    content: ''
}

.main-item:focus~.hidden-block,
.main-item:active~.hidden-block {
    visibility: visible;
    opacity: 1
}

.sign-up a {
    font-size: 18px;
    text-transform: uppercase;
    line-height: 2
}

.registered .profile {
    display: flex
}

.profile {
    height: 100px;
    display: none;
    align-items: center;
    position: relative;
    cursor: pointer
}

.profile img {
    margin-left: 20px;
    border-radius: 50%;
    height: 65px;
    width: 65px;
    transition: .3s
}

.profile .nickname {
    position: relative;
    display: block;
    padding-right: 27px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 180px;
    font-size: 16px;
    font-weight: 700;
    color: #fbc430
}

.profile .nickname:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: calc(50% - 4px);
    right: 0;
    border: 7px solid #506a84;
    border-bottom-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    transition: .3s
}

.sign-up.show .nickname:after {
    margin-top: -7px;
    transform: rotate(180deg)
}

.cpMenu {
    position: absolute;
    background: #061019;
    width: 350px;
    top: calc(100% + 10px);
    right: 0;
    display: none;
    z-index: 5
}

.cpMenu:after {
    content: '';
    position: absolute;
    right: 82px;
    bottom: 100%;
    border: 10px solid transparent;
    border-bottom: 10px solid #061019
}

.cpMenu-bottom {
    max-height: 400px;
    overflow-y: auto
}

.icon-login-big {
    position: relative;
    padding: 25px 29px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    transition: .3s
}

.icon-login-big:hover {
    background: #131c25
}

.icon-login-big img {
    margin-left: 0;
    width: 43px;
    height: 43px
}

.icon-login-big p {
    font-family: open sans, sans-serif;
    font-size: 16px;
    color: #fff;
    margin-left: 20px
}

.icon-login-big span {
    color: #889cad;
    margin-top: 8px
}

.cpMenu ul li a {
    display: flex;
    align-items: center;
    padding: 0 32px;
    position: relative;
    height: 60px;
    font-size: 16px;
    color: #fff;
    transition: .3s
}

.cpMenu ul li a .value {
    position: absolute;
    right: 30px;
    font-size: 20px;
    color: #bffb30
}

.cpMenu .messages-counter {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: #fbc430;
    box-shadow: 0 0 10px 0 #fbc430;
    color: #000;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top: -5px;
    left: 5px
}

.cpMenu .messages-value {
    margin-left: auto;
    position: relative;
    font-size: 16px;
    padding-right: 27px
}

.cpMenu .messages-value:after {
    content: '';
    position: absolute;
    right: 0;
    top: calc(50% - 5px);
    width: 21px;
    height: 16px;
    background: url(../images/messager-icon.webp) center no-repeat
}

.cpMenu ul li a .cash {
    position: absolute;
    right: 30px;
    font-size: 20px;
    color: #bffb30;
    padding-right: 30px
}

.cpMenu ul li a .cash:after {
    content: '';
    width: 24px;
    height: 21px;
    right: 0;
    top: calc(50% - 10.5px);
    position: absolute;
    background: url(../images/coin-icon.webp) center no-repeat
}

.cpMenu ul li:hover a {
    position: relative;
    color: #fbc430;
    background: #131c25
}

.cpMenu .settings a:before,
.cpMenu .logout a:before {
    content: '';
    width: 17px;
    height: 17px;
    background: url(../images/profile-icons.webp) center top no-repeat;
    position: absolute;
    right: 30px;
    top: 50%;
    margin-top: -8px
}

.cpMenu .logout a:before {
    background-position: center bottom
}

/* .cpMenu .links{
    margin-top:30px
} */
.cpMenu .links li a {
    color: #bad0e7 !important
}

header>.container {
    height: 744px;
    position: relative
}

.logo {
    width: fit-content;
    padding-top: 45px;
    /* margin-left:32px*/
}

.bottom-header {
    width: 100%;
    position: absolute;
    bottom: 48px
}

.bottom-header .container {
    max-width: 1180px
}

.server-info,
.download-btn {
    width: 420px;
    height: 130px;
    padding: 30px 25px;
    background: url(../images/download-bg.webp) center no-repeat
}

.server-info {
    color: #fff;
    background-image: url(../images/server-bg.webp)
}

.server-info .server-name {
    text-transform: uppercase
}

.server-info .server-status,
.server-info .server-online-members {
    color: #e4ff00
}

.server-info .abil {
    width: 100%;
    margin: 15px 0
}

.download-btn {
    padding-left: 165px;
    flex-direction: column;
    justify-content: center
}

.download-btn h2 {
    font-size: 30px;
    text-transform: uppercase
}

.download-btn span {
    color: #abd687
}

.toTop {
    min-width: auto;
    width: 45px;
    height: 45px;
    background: #0e161d url(../images/slider-arrow.webp) center no-repeat;
    transform: rotate(-90deg);
    box-shadow: 0 0 40px 5px rgba(109, 251, 195, .15);
    border-radius: 5px;
    margin: 85px auto 45px
}

footer {
    background: #0d2228 url(../images/footer-bg.webp) center bottom no-repeat;
    padding-top: 70px;
    padding-bottom: 30px
}

.footer-menu li {
    margin: 0 30px
}

.footer-menu a {
    font-size: 18px;
    color: #4b646b;
    text-transform: uppercase
}

.footer-menu a:hover {
    color: #86cee2
}

.footer-logo {
    width: fit-content;
    margin: 40px auto 35px
}

.footer-logo img {
    width: 335px
}

.copyright {
    text-align: center;
    font-family: open sans, sans-serif;
    color: #88bfab
}

.modalx {
    max-width: 680px;
    width: 100%;
    background: url('../images/bg-card.webp') center / cover no-repeat !important;
    position: fixed;
    top: 0;
    left: calc(50% - 340px);
    display: none;
    opacity: 0;
    z-index: 999;
    box-shadow: none !important;
    pointer-events: none;
}

.modalx.modal-open {
    pointer-events: auto;
}

#overlay {
    z-index: 998;
    position: fixed;
    background-color: rgba(14, 22, 29, .95);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#overlay.overlay-active {
    opacity: 1;
    pointer-events: auto;
}

#swiper-modal {
    background: 0 0;
    max-width: 1000px;
    left: calc(50% - 500px);
    box-shadow: none
}

#swiper-modal .title {
    margin-bottom: 20px
}

#swiper-modal .modal_close.cross {
    top: 0;
    right: 20px
}

.main-swiper-block {
    position: relative;
    width: 100%;
    height: 600px
}

.main-swiper-block .swiper-container {
    height: 100%
}

.main-swiper-block .swiper-slide {
    background-size: cover;
    background-repeat: no-repeat
}

.main-swiper-navigation {
    width: 100%;
    height: 110px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(14, 22, 29, 0.7) linear-gradient(to right, rgba(57, 178, 204, 0.2), transparent);
    z-index: 1;
    padding: 0 40px
}

.main-swiper-pagination {
    display: flex
}

.main-swiper-navigation .swiper-pagination-bullet {
    font-family: open sans, sans-serif;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffb830;
    background: #0e161d;
    opacity: .5;
    margin: 0 5px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700
}

.main-swiper-navigation .swiper-pagination-bullet-active {
    color: #ffb830;
    opacity: 1
}

.main-swiper-buttons {
    gap: 15px
}

#error-modal .error-content {
    position: relative;
    background: #1e303a;
    padding: 40px;
    margin-top: 60px;
    margin-bottom: 35px
}

#error-modal .error-content .icon {
    position: absolute;
    width: 55px;
    height: 60px;
    top: -30px;
    left: calc(50% - 27.5px);
    background: url(../images/input-elem-bg.webp) center no-repeat
}

#error-modal .error-content span {
    width: 100%;
    height: 100%;
    background: radial-gradient(rgba(245, 6, 6, 0.4), transparent, transparent)
}

#error-modal .error-content span:after,
#error-modal .error-content span:before {
    content: '';
    position: absolute;
    width: 14px;
    height: 2px;
    transform: rotate(-45deg);
    background: #f50606;
    left: calc(50% - 7px);
    top: calc(50% - 1px)
}

#error-modal .error-content span:after {
    transform: rotate(45deg)
}

#error-modal .error-text {
    text-align: center;
    font-size: 16px;
    color: #fff
}

#error-modal button {
    margin: 0 auto
}

.modal_close.cross {
    cursor: pointer;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 30px;
    right: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20
}

.modal-contentx {
    max-height: 80vh;
    padding: 50px;
    overflow-y: auto;
    overflow-x: hidden
}

.modal_close.cross:before,
.modal_close.cross:after {
    content: '';
    position: absolute;
    width: 15px;
    height: 2px;
    transform: rotate(45deg);
    background: #fff
}

.modal_close.cross:after {
    transform: rotate(-45deg)
}

.modalx form {
    width: 500px;
    text-align: center;
    margin: 0 auto
}

.modalx input {
    width: 100%;
    text-align: center
}

.modalx .input-label {
    display: block;
    font-size: 18px;
    text-transform: uppercase;
    color: #fbc430;
    margin-top: 30px;
    margin-bottom: 15px
}

.modalx .submit-btn {
    margin: 65px auto 50px
}

.auth-links a {
    display: inline-block;
    margin: 0 5px
}

.registration-link {
    color: #fbc430;
    text-decoration: underline
}

.input-wrap {
    position: relative
}

.input-wrap:before {
    content: "";
    position: absolute;
    top: calc(50% - 30px);
    left: -27.5px;
    width: 55px;
    height: 60px
}

.input-wrap.name:before {
    background: url(../images/input-elems.webp) center 10px no-repeat, url(../images/input-elem-bg.webp) center no-repeat
}

.input-wrap.password:before {
    background: url(../images/input-elems.webp) center -99px no-repeat, url(../images/input-elem-bg.webp) center no-repeat
}

.input-wrap.email:before {
    background: url(../images/input-elems.webp) center -45px no-repeat, url(../images/input-elem-bg.webp) center no-repeat
}

.input-wrap.country:before {
    background: url(../images/input-elems.webp) center -150px no-repeat, url(../images/input-elem-bg.webp) center no-repeat
}

.input-wrap.personal:before {
    background: url(../images/input-elems.webp) center -200px no-repeat, url(../images/input-elem-bg.webp) center no-repeat
}

.confirm-rules {
    font-size: 16px
}

.confirm-rules a {
    display: inline-block;
    color: #fbc430;
    text-decoration: underline;
    margin-left: 5px
}

.confirm-rules .checkbox-wrap {
    margin-right: 10px
}

.tab {
    display: none
}

.tab.active {
    display: block;
    animation: tab .6s linear
}

@keyframes tab {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.page>.container {
    color: #fff;
    position: relative;
    padding: 50px;
    background: #172934
}

/*
.page>.title{
    margin-top:40px;
    margin-bottom:50px
}*/
.history-block {
    padding: 0 50px;
    height: 100px;
    border-bottom: 1px solid #2e404c
}

.history-block a {
    color: #00fffc;
    text-transform: uppercase;
    font-size: 16px
}

.history li {
    position: relative;
    margin-right: 40px
}

.history li:after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 2px solid #889cad;
    border-right: 2px solid #889cad;
    transform: rotate(45deg);
    position: absolute;
    right: -22px;
    top: calc(50% - 3px)
}

.history li:last-child:after {
    display: none
}

.back-btn {
    position: relative;
    padding-left: 28px
}

.back-btn:before {
    content: '';
    position: absolute;
    width: 15px;
    height: 13px;
    background: url(../images/market-page/back-icon.webp) center no-repeat;
    top: calc(50% - 7px);
    left: 0
}

.icon-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 55px;
    height: 60px;
    background: url(../images/input-elem-bg.webp) center no-repeat
}

.online-status {
    font-size: 16px;
    color: #cbff3f;
    text-shadow: 0 0 10px #cbff3f
}

.offline-status {
    font-size: 16px;
    color: #e61414d8;
    text-shadow: 0 0 10px #8b120ac4
}

/* Tabelas unificadas no fim do arquivo */
.local-title {
    display: flex;
    align-items: center;
    height: 65px;
    background: #0e161d;
    border: 1px solid #223642;
    padding-left: 40px;
    font-size: 15px;
    font-family: open sans, sans-serif;
    text-transform: uppercase;
    font-weight: 400;
    color: #00fffc !important
}

.sidebar-navigation {
    min-width: 330px;
    margin-right: 25px;
    margin-top: 2px
}

.sidebar-navigation li {
    cursor: pointer;
    display: flex;
    align-items: center;
    height: 60px;
    background: #13232f;
    font-size: 16px;
    text-transform: uppercase;
    padding-left: 40px;
    margin-bottom: 4px;
    transition: .3s
}

.sidebar-navigation li.active,
.sidebar-navigation li:hover {
    box-shadow: 0 0 15px 0 rgba(95, 223, 255, .23), inset 0 0 7px 0 rgba(106, 191, 255, .6);
    filter: brightness(1.2)
}

.photo-upload {
    cursor: pointer;
    width: 140px;
    height: 190px;
    background: #13232f url(../images/guilds-page/photo-icon.webp) center no-repeat;
    transition: .3s
}

.photo-upload.empty {
    box-shadow: inset 0 0 7px 0 rgba(106, 191, 255, .4)
}

.photo-upload:hover {
    box-shadow: inset 0 0 7px 0 rgba(106, 191, 255, .4), 0 0 30px 5px #316b7d
}

.styled-tabs {
    border-bottom: 1px solid #2e404c;
    gap: 80px
}

.styled-tabs .tab-button {
    position: relative;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 16px;
    color: #889cad;
    padding-top: 10px;
    padding-bottom: 18px;
    transition: .3s
}

.styled-tabs .tab-button:before {
    content: '';
    width: 126px;
    height: 80px;
    background: url(../images/guilds-page/table-tab-hover-bg.webp) center no-repeat;
    position: absolute;
    left: calc(50% - 63px);
    bottom: -1px;
    opacity: 0;
    transition: .3s
}

.styled-tabs .tab-button.active,
.styled-tabs .tab-button:hover {
    color: #00fffc
}

.styled-tabs .tab-button.active:before,
.styled-tabs .tab-button:hover:before {
    opacity: 1
}

.amount-with-border {
    cursor: pointer;
    transition: .3s;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26px;
    color: #bffb30;
    width: 164px;
    height: 73px;
    background: url(../images/raffle-amount-bg.webp) center no-repeat
}

.amount-with-border .top-border:after,
.amount-with-border .top-border:before {
    top: -7px;
    width: 27px;
    height: 30px;
    background: url(../images/donation-page/donation-option-elem.webp) center no-repeat
}

.amount-with-border .top-border:before {
    left: -6px
}

.amount-with-border .top-border:after {
    right: -6px
}

.amount-with-border .bottom-border:after,
.amount-with-border .bottom-border:before {
    bottom: -7px;
    width: 27px;
    height: 30px;
    background: url(../images/donation-page/donation-option-elem.webp) center no-repeat
}

.amount-with-border .bottom-border:before {
    left: -6px;
    transform: rotateX(180deg)
}

.amount-with-border .bottom-border:after {
    right: -6px;
    transform: rotateZ(180deg)
}

.deposit-top {
    padding: 50px;
    border-bottom: 1px solid #2e404c
}

.deposit-top .content {
    width: 100%;
    position: relative;
    background: #111c24
}

.deposit-top .profile-deposit,
.deposit-top .deposit-amount,
.deposit-top .cart {
    padding: 30px
}

.deposit-top .deposit-profile-image {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    margin-right: 35px
}

.deposit-top .deposit-profile-info h2 {
    color: #f7c130;
    margin-bottom: 20px
}

.deposit-top .deposit-profile-info {
    font-size: 16px;
    line-height: 24px
}

.deposit-top .deposit-profile-info a {
    color: #00fffc;
    text-decoration: underline
}

.deposit-top .deposit-amount {
    width: 460px;
    height: 190px;
    background: #18232b;
    margin-left: auto;
    margin-right: 20px
}

.deposit-top .deposit-amount .amount {
    color: #f7c130
}

.deposit-top .cart {
    position: relative;
    margin-right: 50px
}

.deposit-top .cart .icon-wrap {
    margin-right: 15px
}

.deposit-top .cart p {
    font-size: 16px;
    color: #fbc430;
    margin-bottom: 8px
}

.deposit-top .cart span {
    font-family: open sans, sans-serif
}

.like {
    color: #cbff3f
}

.dislike {
    color: #fe1515
}

.like,
.dislike {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px
}

.like:before,
.dislike:before {
    content: '';
    display: block;
    width: 55px;
    height: 56px;
    background: url(../images/like-dislike-icons.webp) left no-repeat;
    margin-right: -10px
}

.like:before {
    margin-right: -14px
}

.dislike:before {
    content: '';
    width: 55px;
    height: 56px;
    background-position: right
}

.page .container.with-no-padding {
    padding: 0
}

.page .page-content {
    padding: 50px
}

.file-chosen {
    margin-left: 25px
}

.styled-form h3 {
    margin-bottom: 15px
}

.styled-form-block {
    padding: 10px;
    background: #15252e;
    border: 1px solid #223642;
    margin-top: -1px;
    display: flex;
    justify-content: space-between
}

.styled-form-block input,
.styled-form-block textarea,
.styled-form-block .custom-select,
.styled-form-block .upload-block {
    min-width: 50%;
    width: 50%
}

.styled-form-block input {
    background: #0e161d;
    color: #fff
}

.styled-form-block input::placeholder {
    color: #2f3a41
}

.styled-form .custom-select .select-selected {
    color: #fff !important
}

.styled-form .upload-block {
    height: 80px
}

.styled-form .label {
    font-size: 16px;
    padding-top: 20px;
    padding-left: 25px
}

.styled-form label span {
    display: inline;
    color: red
}

.styled-form input[type=submit] {
    margin: 25px auto 0
}

.add-message-form h3 {
    margin-bottom: 20px
}

.add-message-form .styled-form-block {
    padding: 13px;
    background: #15252e;
    border: 1px solid #223642;
    margin-top: -1px
}

.styled-form-block>label,
.add-message-form textarea {
    width: 100%
}

.add-message-form .upload-block {
    padding: 10px 0
}

.comments-table tbody td {
    padding: 30px
}

.comments-table .first-cell {
    width: 40%
}

.comments-table .third-cell {
    width: 25%
}

.comments-table tbody .first-cell img {
    width: 130px;
    height: 130 pFx;
    border-radius: 50%;
    margin-right: 30px
}

.comments-table .nickname {
    font-size: 28px;
    color: #fbc430;
    text-transform: uppercase;
    margin-bottom: 20px
}

.comments-table .role {
    color: #00fffc;
    text-decoration: underline
}

.comments-table .sent-ago {
    max-width: 50%;
    color: #fbc430;
    margin-left: 20px;
    font-size: 16px;
    font-weight: 700
}

.comments-table .sent-ago span {
    font-size: 16px
}

.comments-table tbody .first-cell,
.comments-table tbody .third-cell {
    background: #15252e
}

.comments-table tbody .second-cell {
    background: #1c2c35;
    font-size: 16px;
    line-height: 30px
}

.comments-table third-cell>div {
    max-width: 170px;
    margin: 0 auto
}

.comments-block {
    padding-bottom: 15px;
    padding-top: 50px
}

.comments-block>h3 {
    margin-bottom: 40px
}

.payment-methods {
    margin-top: 45px
}

.payment-method {
    transition: .3s;
    cursor: pointer;
    position: relative;
    width: calc(25% - 15px);
    height: 135px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #111c24
}

.payment-method.selected,
.payment-method:hover {
    background: #060c12
}

.payment-method.selected .selected-elem {
    top: -30px;
    left: -30px;
    display: block
}

.selected-elem {
    display: none;
    top: -22px;
    left: -22px;
    position: absolute;
    border: 30px solid #36d1b4;
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    transform: rotate(-45deg);
    z-index: 10
}

.selected-elem:after {
    content: "";
    top: 16px;
    left: -3px;
    position: absolute;
    width: 10px;
    height: 4px;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
    z-index: 10
}

.bordered-item {
    cursor: pointer;
    width: 270px;
    height: 460px;
    position: relative;
    padding: 8px;
    background: #16262f;
    transition: .3s
}

.bordered-item .item-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    border: 1px solid rgba(109, 251, 195, .15)
}

.bordered-item .overflow-hidden {
    text-align: center;
    width: 100%
}

.bordered-item .overflow-hidden * {
    overflow: hidden;
    max-width: 90%;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0 auto
}

.bordered-item .title-item {
    font-size: 16px
}

.bordered-item .price-item {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: open sans, sans-serif;
    color: #fbc430
}

.bordered-item .price-item:before {
    content: '';
    width: 24px;
    height: 21px;
    background: url(../images/coin-icon.webp) center no-repeat;
    margin-right: 10px
}

.photos-slider .slick-list {
    padding: 25px 0 50px
}

.photos-slider .slick-track {
    margin-left: 0
}

.photos-slider .photo {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: 0 25px
}

.photos-slider .photo p {
    text-align: center;
    margin-bottom: 20px
}

.items-grid {
    position: relative;
    background: url(../images/cell_1.webp) repeat
}

.items-grid .item {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(../images/cell_2.webp) repeat
}

.item-feature-name.exellent {
    color: #c2ff31
}

.item-feature-name.level {
    color: #00fffc
}

.item-feature-name.jol {
    color: #ff1200
}

.item-feature-name.luck {
    color: #42ff00
}

.item-feature-name.skill {
    color: #ff9000
}

.item-feature-name.harmony {
    color: #ffde00
}

.item-feature-name.socket {
    color: #ff00e4
}

.item-feature-name.refine {
    color: #3854ff
}

.item-feature-name.element {
    color: #fe0060
}

.item-feature-name.mastery {
    color: #ffcd92
}

.item-feature-name.custom {
    color: #03d87b
}

.item-feature-name.ruud {
    color: #4b97c5
}

.sparks {
    position: absolute;
    width: 1200px;
    left: 50%;
    margin-left: -600px;
    bottom: -110px
}

.sparks>div {
    position: absolute
}

.sparks .spark_1 {
    background: url(../images/animation/spark_1.webp) no-repeat;
    width: 764px;
    height: 313px;
    right: 0;
    bottom: -320px;
    transform: scale(.6);
    animation: spark-1 4s linear infinite;
    animation-delay: 1s
}

@keyframes spark-1 {
    0% {
        bottom: -320px;
        transform: scale(.6);
        opacity: 1
    }

    25% {
        bottom: -240px;
        transform: scale(.7);
        opacity: 1
    }

    50% {
        bottom: -160px;
        transform: scale(.8);
        opacity: 1
    }

    75% {
        bottom: -80px;
        transform: scale(.9);
        opacity: .5
    }

    100% {
        bottom: 0;
        transform: scale(1);
        opacity: 0
    }
}

.sparks .spark_2 {
    background: url(../images/animation/spark_2.webp) no-repeat;
    width: 179px;
    height: 335px;
    right: 230px;
    bottom: -320px;
    transform: scale(.6);
    animation: spark-1 4s linear infinite;
    animation-delay: 2s
}

.sparks .spark_3 {
    background: url(../images/animation/spark_3.webp) no-repeat;
    width: 128px;
    height: 165px;
    right: 280px;
    bottom: -140px;
    transform: scale(.6);
    animation: spark-3 4s linear infinite;
    animation-delay: 2s
}

@keyframes spark-3 {
    0% {
        bottom: -140px;
        transform: scale(.6);
        opacity: 1
    }

    25% {
        bottom: -80px;
        transform: scale(.7);
        opacity: 1
    }

    50% {
        bottom: -20px;
        transform: scale(.8);
        opacity: 1
    }

    75% {
        bottom: 40px;
        transform: scale(.9);
        opacity: .5
    }

    100% {
        bottom: 100px;
        transform: scale(1);
        opacity: 0
    }
}

.sparks .spark-big {
    background: url(../images/animation/spark_4.webp) no-repeat;
    width: 794px;
    height: 176px;
    right: 0;
    bottom: -180px;
    transform: scale(.6);
    animation: spark-5 4s linear infinite
}

.sparks .spark_5 {
    animation-delay: 2s;
    right: 40px
}

@keyframes spark-5 {
    0% {
        bottom: -180px;
        transform: scale(.6);
        opacity: 1
    }

    25% {
        bottom: -120px;
        transform: scale(.7);
        opacity: 1
    }

    50% {
        bottom: -60px;
        transform: scale(.8);
        opacity: 1
    }

    75% {
        bottom: 0;
        transform: scale(.9);
        opacity: .5
    }

    100% {
        bottom: 60px;
        transform: scale(1);
        opacity: 0
    }
}

.fire {
    width: 178px;
    height: 237px;
    position: absolute;
    top: 240px;
    left: calc(50% - 260px)
}

.fire img {
    position: absolute;
    transform: scale(.6);
    animation: fire 4s linear infinite
}

.fire .fire-2 {
    animation-delay: 1s
}

.fire .fire-3 {
    animation-delay: 2s
}

.fire .fire-4 {
    animation-delay: 3s
}

@keyframes fire {
    0% {
        bottom: 0;
        left: 0;
        opacity: 0;
        transform: scale(1);
        filter: brightness(1)
    }

    50% {
        bottom: 60px;
        left: 30px;
        opacity: 1;
        transform: scale(.8);
        filter: brightness(1.2)
    }

    100% {
        bottom: 120px;
        left: 60px;
        opacity: 0;
        transform: scale(.6);
        filter: brightness(1)
    }
}

.before-character-bg {
    background: url(../images/before-character-bg.webp) center bottom no-repeat
}

.rating-swiper {
    margin-top: 100px;
    position: relative;
    align-items: flex-end
}

.top-block-item {
    width: calc(50% - 40px)
}

.swiper {
    position: relative;
    height: 550px;
    padding: 70px 50px 0;
    background: url(../images/top-guilds-bg.webp) center no-repeat
}

.swiper-news {
    height: 350px
}

.swiper-news .swiper-slide {
    height: 350px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}

.swiperNews-nav {
    position: relative;
    width: 130px;
    height: 45px;
    margin: 0 auto;
    margin-top: 20px;
    background: #0e161d;
    border-radius: 5px
}

.swiperNews-nav .swiper-buttons {
    background: url(../images/right-arrow.webp) center no-repeat;
    top: 32px;
    width: 19px;
    height: 26px;
    font-size: 0
}

.swiperNews-nav .swiper-buttons:after {
    font-size: 0
}

.swiperNews-nav .swiper-button-next {
    right: 8px
}

.swiperNews-nav .swiper-button-prev {
    transform: rotateY(180deg);
    left: 8px
}

.swiperNews-nav .swiper-pagination {
    font-family: open sans, sans-serif;
    bottom: 15px;
    font-size: 14px;
    font-weight: 700;
    color: #fff
}

.swiperNews-nav .swiper-pagination span {
    display: inline
}

.swiperNews-nav .swiper-pagination .swiper-pagination-current {
    color: #fbc430
}

.ratingTabs {
    position: relative;
    z-index: 10;
    margin-bottom: 20px
}

.ratingTab-button {
    cursor: pointer;
    text-transform: uppercase;
    font-size: 24px;
    color: #889cad;
    font-weight: 700;
    transition: .3s
}

.ratingTab-button:hover {
    color: #bfced3
}

.ratingTab-button.active {
    color: #fff
}

.rating .content {
    background: url(../images/top-players-bg.webp) center no-repeat
}

.rating-tab {
    padding: 50px;
    padding-top: 73px;
    position: relative;
    height: 550px
}

.rating-tab:before,
.swiper:before {
    content: "";
    position: absolute;
    width: 554px;
    height: 210px;
    top: -86px;
    left: calc(50% - 277px)
}

#top-players:before {
    background: url(../images/icon-top-players.webp) center no-repeat
}

#top-guilds:before {
    background: url(../images/icon-top-guilds.webp) center no-repeat
}

.swiper:before {
    background: url(../images/icon-top-slider.webp) center no-repeat
}

.rating-title {
    text-align: center;
    text-transform: uppercase
}

.rating table {
    color: #fff;
    font-family: open sans, sans-serif;
    font-size: 16px;
    font-weight: 700;
    table-layout: auto;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 5px;
    border: none
}

.rating tr {
    height: 70px
}

.rating thead tr {
    position: relative;
    background: rgba(14, 22, 29, .35) !important
}

.rating thead tr:after {
    content: "";
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: -1px;
    left: 0;
    background: rgba(14, 22, 29, .6)
}

.rating tbody tr {
    cursor: pointer;
    background: rgba(14, 22, 29, .2);
    transition: .3s;
    margin-bottom: 1px
}

.rating tbody tr:hover {
    background: rgba(14, 22, 29, .6);
    color: #8addfb
}

.rating th:first-child,
.rating td:first-child {
    padding-left: 20px
}

.rating th:last-child,
.rating td:last-child {
    padding-right: 20px
}

.rating th,
.rating td {
    text-align: center;
    padding: 0 15px;
    vertical-align: middle;
    border: none
}

.rating th {
    text-align: center;
    color: #fac430;
    font-size: 18px
}

.rating sup {
    color: #fac430
}

.top-players .first-cell {
    text-align: center;
    padding-right: 10%;
    width: 20%
}

.top-players .forth-cell {
    width: 80px
}

.rating-more-btn {
    margin: 0 auto;
    margin-top: 23px
}

.top-guilds .first-cell {
    width: 20%;
    padding-right: 5%;
    text-align: center
}

.top-guilds .second-cell {
    width: 20%
}

.top-guilds .forth-cell {
    width: 80px
}

.events-block {
    margin-top: 120px;
    align-items: flex-end
}

.events-block>div {
    width: calc(50% - 40px)
}

.events .content {
    position: relative;
    padding: 50px;
    background: rgba(98, 209, 255, .1);
    height: 550px;
    margin-top: 30px;
    font-weight: 700;
    color: #8daab6
}

.eventsTabs {
    margin-bottom: 30px
}

.events .eventsTab-button {
    cursor: pointer;
    text-transform: uppercase;
    font-size: 24px;
    color: #889cad;
    font-weight: 700;
    transition: .3s
}

.events .eventsTab-button:hover,
.events .eventsTab-button.active {
    color: #fff
}

.events .event-name {
    color: #fbc430;
    line-height: 1.6
}

.events .starts-in {
    color: #fff
}

.events .event {
    margin-bottom: 14px
}

.events .button {
    margin: 20px auto 0
}

.links .link {
    height: 170px;
    margin-bottom: 20px;
    padding-top: 40px;
    padding-left: 40px;
    cursor: pointer
}

.links .item {
    transition: .3s;
    padding-right: 20px
}

.links .link:hover .item {
    padding-right: 0
}

.link-info {
    text-transform: uppercase;
    align-items: flex-end;
    margin-bottom: 15px
}

.link-info span {
    font-weight: 700;
    margin-left: 10px;
    line-height: 1.3
}

.forum .link-info span {
    color: #b5bec7
}

.donation .link-info span {
    color: #ffeb61
}

.forum {
    position: relative;
    background: url(../images/forum-bg.webp) center no-repeat
}

.forum-item {
    position: absolute;
    top: -23px;
    right: -45px
}

.donation {
    position: relative;
    background: url(../images/donation-block-bg.webp) center no-repeat
}

.donation-item {
    position: absolute;
    top: -17px;
    right: 3px
}

.social-link {
    padding: 0 40px;
    width: calc(50% - 10px);
    height: 170px;
    transition: .3s
}

.social-link:hover {
    padding: 0 30px
}

.social-link.facebook {
    background: linear-gradient(45deg, rgba(98, 209, 255, 0.3), rgba(98, 209, 255, 0.1))
}

.social-link.discord {
    background: linear-gradient(45deg, rgba(81, 159, 63, 0.5), rgba(98, 209, 255, 0.1))
}

.social-link-info {
    text-transform: uppercase
}

.social-link-info span {
    margin-top: 10px
}

.news-block .more-btn,
.featured-items .more-btn {
    margin: 80px auto 0
}

.news-block {
    margin-top: 120px
}

.news-block .content {
    margin-top: 30px
}

.news-block .news-item {
    position: relative;
    width: calc(33.3% - 36px);
    height: 550px;
    background: #172934;
    padding: 40px
}

.news-item .img-wrap {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1
}

.news-item .img-wrap:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, #172934, transparent)
}

.news-content {
    position: relative;
    top: 50%;
    z-index: 2
}

.news-content h3 {
    text-transform: uppercase;
    margin-bottom: 30px;
    color: #fbc430
}

.news-content p {
    color: #fff;
    font-size: 16px;
    line-height: 24px;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.bottom-news-item {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 40px;
    z-index: 5
}

.bottom-news-item p {
    font-family: open sans, sans-serif;
    font-weight: 700;
    color: #fbc430;
    font-size: 14px
}

.bottom-news-item p span {
    display: inline-block;
    font-size: 18px
}

.character-title {
    margin-top: 130px;
    padding-bottom: 50px
}

.sliderHero {
    background: url(../images/charecter-bg.webp) center no-repeat;
    background-color: #01212c;
    position: relative;
    height: 730px
}

.sliderHero:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background: linear-gradient(to bottom, rgba(15, 24, 29, 0.5), transparent, rgba(15, 24, 29, 0.5)), url('../images/slider-nav-top-bg.webp') center top no-repeat, url('../images/slider-nav-bottom-bg.webp') center bottom no-repeat
}

.hero-slider-for .slick-list {
    overflow: visible
}

.hero-slider-nav {
    position: relative;
    width: 100%
}

.hero-slider-nav .slick-slide {
    position: relative;
    opacity: .8;
    transition: .5s;
    background-image: url(../images/slider-nav-border.webp);
    background-position: center;
    background-repeat: no-repeat;
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.hero-slider-nav .slick-slide:after {
    content: "";
    position: absolute;
    width: 67px;
    height: 67px;
    border-radius: 50%;
    background: linear-gradient(to bottom, rgba(9, 16, 20, 0.5), transparent);
    transition: .3s
}

.hero-slider-nav .slick-slide.slick-center:after {
    opacity: 0
}

.hero-slider-nav .slick-slide img {
    width: 67px;
    height: 67px;
    border-radius: 50%;
    transition: .5s
}

.hero-slider-nav .slick-slide.slick-center {
    background-image: url(../images/slider-nav-active-border.webp);
    background-position: center;
    opacity: 1
}

.hero-slider-nav .slick-slide.slick-center img {
    width: 80px;
    height: 80px
}

.sl-slide {
    min-height: 580px
}

.sl-slide .sl-hero {
    position: absolute;
    right: -400px;
    top: -100px;
    z-index: 10;
    opacity: 0;
    transition: 1s;
    transform: scale(.5)
}

.sl-slide.slick-active .sl-hero {
    opacity: 1;
    transform: scale(1)
}

.sl-slide .classInfo {
    width: 50%;
    position: relative;
    z-index: 13;
    padding-top: 10px
}

.sl-hero-name {
    text-transform: uppercase;
    font-weight: 700;
    color: #00fffc
}

.sl-hero-name span {
    font-size: 50px;
    display: inline-block;
    margin-right: 10px
}

.sl-hero-name span:first-letter {
    font-size: 60px
}

.sl-hero-title {
    color: #889cad;
    text-transform: uppercase;
    font-weight: 400;
    margin-top: 10px;
    margin-bottom: 20px;
    margin-left: 5px
}

.sl-hero-description {
    color: #758491;
    line-height: 28px;
    padding-left: 64px;
    margin-top: -10px
}

.sl-stats h3 {
    text-transform: uppercase;
    padding-left: 64px;
    margin: 25px 0
}

.sl-slide.slick-active .classInfo .info-abil .abil .bar {
    animation: 3s barWidth
}

.castle-wanted-block {
    padding-top: 150px;
    background: url(../images/character-bottom-effect.webp) center top no-repeat
}

.castle-wanted-block .title {
    margin-bottom: 60px
}

.castle-wanted-block .content>div {
    position: relative;
    width: calc(50% - 40px);
    height: 380px
}

.castle-wanted-main {
    background: #172934;
    padding: 52px 0 48px 52px;
    text-align: center
}

.castle-wanted-main h2 {
    font-weight: 400
}

.castle-wanted-block .image-wrap {
    width: 280px;
    height: 280px;
    background: rgba(113, 186, 255, .1)
}

.castle-wanted-info {
    flex-direction: column;
    width: calc(100% - 280px);
    padding: 50px 0
}

.castle-wanted-title {
    color: #00fffc;
    text-transform: uppercase
}

.castle-wanted-top-label {
    text-transform: uppercase
}

.castle-wanted-side {
    flex-direction: column
}

.castle-wanted-side .arka {
    width: 100%;
    height: calc(50% - 20px);
    background: #172934;
    padding: 40px
}

.castle-wanted-block .arka h2 {
    color: #889cad
}

.featured-items .container {
    max-width: 1280px
}

.featured-items .title {
    margin-top: 120px;
    margin-bottom: 40px
}

.featured-items .slick-list {
    padding-top: 15px
}

.featured-items .slide-item {
    margin: 0 25px;
    width: 270px;
    height: 460px;
    position: relative;
    padding: 8px;
    background: #16262f
}

.featured-items .slide-item-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    border: 1px solid rgba(109, 251, 195, .15);
    padding: 0 35px 30px
}

.slide-item .overflow-hidden {
    text-align: center;
    width: 100%
}

.slide-item .title-item {
    font-size: 16px;
    overflow: hidden;
    max-width: 90%;
    padding-bottom: 35px;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0 auto;
    color: #fff
}

.slide-item .price-item {
    font-family: open sans, sans-serif;
    color: #fbc430
}

.slide-item button {
    margin-top: 22px
}

.featured-items .slick-arrow.slick-prev {
    left: -50px
}

.featured-items .slick-arrow.slick-next {
    right: -50px
}

.media-block {
    margin-top: 120px;
    padding-top: 120px;
    height: 870px;
    background: url(../images/media-bg.webp) center no-repeat
}

.media-block .title {
    margin-bottom: 30px
}

.media-block .slick-list {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 110px !important;
    padding-bottom: 155px !important;
    overflow-y: visible
}

.media-slide {
    position: relative;
    transition: .5s;
    height: 270px !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center
}

.media-slide:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0e161d;
    transition: .5s;
    opacity: .7
}

.media-slide.slick-center {
    transform: scale(1.5);
    z-index: 10;
    box-shadow: 0 20px 50px 0 #060a0d
}

.media-slide img {
    width: 100%;
    height: 270px !important
}

.media-slide.slick-center img {
    box-shadow: 0 20px 50px 0 #060a0d
}

.media-slide.slick-center:after {
    opacity: 0
}

#media-dots {
    position: relative;
    top: -45px;
    z-index: 11;
    width: 660px;
    margin: 0 auto
}

.about-block {
    margin-top: 140px
}

.about-block .title {
    margin-bottom: 50px
}

.about-block .content>div {
    position: relative;
    height: 392px
}

.about-block .image-wrap {
    width: 700px
}

.about-info {
    width: calc(100% - 740px);
    background: #172934;
    padding: 50px
}

.about-info p {
    font-size: 16px;
    color: #fff;
    line-height: 30px;
    margin-bottom: 30px
}

.about-block button {
    margin: 0 auto;
    margin-top: 85px
}

svg {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    border: none
}

svg rect {
    width: 40px;
    height: 40px
}

.wbadge {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background-color: #777;
    border-radius: 10px;
}

.wbadge:empty {
    display: none;
}

.badge-slide-desc {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 250px;
    font-size: 16px;
    font-family: 'Candara', sans-serif;
    background-color: rgba(98, 209, 255, 0.1);
}

.download-page .container {
    padding: 60px 50px 120px
}

.download-page .block-title {
    margin-top: 35px;
    margin-bottom: 30px
}

.download-page .download-options-block .block-title {
    text-align: center;
    text-transform: none;
    margin-top: 0
}

.download-page .download-options-block .block-title:before {
    display: none
}

.download-page .list-options a {
    height: 160px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 119, 255, 0.05));
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: calc(25% - 16px)
}

.download-page .list-options a:after {
    position: absolute;
    content: "";
    left: 0;
    bottom: -75%;
    width: 100%;
    height: 100%;
    background: radial-gradient(rgba(0, 119, 255, 0.4), rgba(0, 119, 255, 0.2), transparent, transparent)
}

.download-page .list-options a:nth-of-type(2) {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(52, 181, 115, 0.05))
}

.download-page .list-options a:nth-of-type(2):after {
    background: radial-gradient(rgba(52, 181, 115, 0.4), rgba(52, 181, 115, 0.2), transparent, transparent)
}

.download-page .list-options a:nth-of-type(3) {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(205, 120, 44, 0.05))
}

.download-page .list-options a:nth-of-type(3):after {
    background: radial-gradient(rgba(205, 120, 44, 0.4), rgba(205, 120, 44, 0.2), transparent, transparent)
}

.download-page .list-options a:nth-of-type(4) {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(9, 91, 154, 0.05))
}

.download-page .list-options a:nth-of-type(4):after {
    background: radial-gradient(rgba(9, 91, 154, 0.4), rgba(9, 91, 154, 0.2), transparent, transparent)
}

.download-page .list-options a:hover {
    cursor: pointer;
    filter: brightness(1.3)
}

.download-page .list-options a h3 {
    font-size: 18px;
    font-weight: 400;
    white-space: nowrap;
    margin-top: -20px
}

.download-page .list-requirements li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 60px;
    background: #13212a;
    padding: 0 30px
}

.download-page .list-requirements li:first-of-type {
    background: #11181d;
    height: 62px
}

.download-page .list-requirements li:nth-of-type(2n) {
    background: #15252f
}

.download-page .list-requirements span {
    width: 45%;
    white-space: nowrap;
    color: #fff;
    font-family: opensans_semibold, sans-serif;
    font-size: 16px
}

.download-page .list-requirements li:first-of-type span {
    text-transform: uppercase;
    color: #00fffc
}

.download-page .list-requirements span:first-of-type {
    color: #889cad
}

.download-page .list-requirements span:nth-of-type(2) {
    width: 10%
}

.download-page .list-requirements span:last-of-type {
    text-align: end
}

.download-page .list-drivers li {
    max-width: calc(33.3% - 17px)
}

.download-page .list-drivers a:hover {
    filter: brightness(1.3)
}

.download-page .list-questions {
    padding-top: 10px
}

.download-page .list-questions li {
    position: relative;
    padding-left: 60px
}

.download-page .list-questions li:before {
    content: '?';
    position: absolute;
    top: -10px;
    left: 0;
    width: 40px;
    height: 40px;
    border: 2px solid #fff;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 18px;
    font-weight: 700;
    font-family: open sans, sans-serif;
    box-shadow: 0 0 20px 5px rgba(255, 255, 255, .08)
}

.download-page .list-questions li h4 {
    position: relative;
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 20px
}

.download-page .list-questions li p {
    font-family: open sans, sans-serif;
    font-size: 14px;
    color: #889cad;
    margin-bottom: 40px;
    line-height: 1.5
}

.download-page .list-questions li a {
    display: inline;
    text-decoration: underline;
    color: #00fffc
}

.download-page .list-questions li a:hover {
    text-decoration: none
}

.rankings-page .border-bottom {
    border-bottom: 1px solid #2e404c
}

.rankings-page .buttons {
    gap: 25px 30px
}

.rankings-page .date-filter {
    margin-top: 90px
}

.rankings-page .date-tab {
    padding: 50px 50px 0;
    justify-content: center
}

.rankings-page .date-tab.active {
    display: flex
}

.rankings-page .rankings-player {
    width: 400px;
    height: 190px;
    position: relative;
    background: #121c25;
    padding: 40px 35px 0 25px
}

.rankings-page .ava {
    width: 84px;
    height: 88px;
    background: url(../images/guilds-page/ava-border.webp) center no-repeat;
    padding-left: 18px;
    padding-top: 12px
}

.rankings-page .ava img {
    width: 50px;
    height: 50px;
    border-radius: 20px
}

.rankings-page .profile-name {
    font-size: 20px
}

.rankings-page .resell {
    font-size: 16px;
    color: #02eae7;
    margin-top: 8px
}

.rankings-page .bottom-profile-info {
    margin-top: 20px;
    align-items: flex-end
}

.rankings-page .bottom-profile-info p {
    font-size: 16px;
    font-weight: 700
}

.rankings-page .bottom-profile-info sup {
    color: red
}

.rankings-page .guild {
    margin-left: 15px
}

.rankings-page .rankings-player .center {
    padding-top: 10px;
    margin-right: auto;
    margin-left: 30px
}

.rankings-page .rankings-player .right-rakings {
    padding-top: 12px;
    flex-direction: column
}

.rankings-page .ranking-icon {
    position: absolute;
    margin-top: 5px
}

.rankings-page .flag {
    display: block;
    margin: auto;
    margin-top: -5px;
    width: 15px;
    height: 10px
}

.ml-5 {
    margin-left: 5px
}

.ml-14 {
    margin-left: 14px
}

.st-rules {
    color: #889cad;
    line-height: 28px;
    padding-left: 64px;
    margin-top: -10px
}

/* GLOBAL CRY WOLF BUTTON GLOW (Applied across all markets) */
.cry-btn-glow {
    background: linear-gradient(90deg, rgba(0, 210, 255, 0.1) 0%, rgba(0, 210, 255, 0.2) 100%) !important;
    border: 1px solid rgba(0, 210, 255, 0.4) !important;
    color: #fff !important;
    padding: 12px 35px;
    border-radius: 8px;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 2px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: inline-block;
    text-align: center;
    text-decoration: none !important;
}

.cry-btn-glow::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: 0.5s;
}

.cry-btn-glow:hover::before {
    left: 100%;
}

.cry-btn-glow:hover {
    background: linear-gradient(90deg, rgba(0, 210, 255, 0.2) 0%, rgba(0, 210, 255, 0.4) 100%) !important;
    border-color: #00d2ff !important;
    color: #fff !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6) !important;
    transform: translateY(-3px) scale(1.02);
}

/* ==========================================
   DESIGN SYSTEM UNIFICADO - GLOBAL OVERRIDES
   ========================================== */

/* 1. UNIFICAÇÃO GLOBAL DE TABELAS */
table,
.dmn-account-table,
.dmn-rankings-table,
.players-table,
.requirements-card-ds {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: rgba(10, 15, 30, 0.6) !important;
    backdrop-filter: blur(12px) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(0, 210, 255, 0.1) !important;
    overflow: hidden !important;
    margin: 0 0 25px 0 !important;
    color: #fff !important;
}

table thead th,
.dmn-account-table thead th,
.dmn-rankings-table thead th,
.players-table th,
.rank-table-tournament th {
    background: rgba(0, 210, 255, 0.05) !important;
    color: #00d2ff !important;
    font-family: 'Cinzel', serif !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    padding: 15px 20px !important;
    text-transform: uppercase !important;
    text-align: left !important;
    border-bottom: 1px solid rgba(0, 210, 255, 0.1) !important;
    border-top: none !important;
    letter-spacing: 1.5px !important;
}

table tbody tr,
.dmn-account-table tbody tr,
.dmn-rankings-table tbody tr,
.players-table tbody tr,
.rank-table-tournament tbody tr {
    transition: background 0.3s ease !important;
    background: transparent !important;
}

table tbody tr:hover,
.dmn-account-table tbody tr:hover,
.dmn-rankings-table tbody tr:hover,
.players-table tbody tr:hover,
.rank-table-tournament tbody tr:not(.rank-row-empty):hover {
    background: rgba(0, 210, 255, 0.03) !important;
}

table tbody tr.rank-row-empty:hover,
.rank-table-tournament tbody tr.rank-row-empty:hover {
    background: transparent !important;
}

table tbody td,
.dmn-account-table tbody td,
.dmn-rankings-table tbody td,
.players-table tbody td,
.rank-table-tournament tbody td {
    padding: 15px 20px !important;
    vertical-align: middle !important;
    border-top: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    color: #fff !important;
    background: none !important;
    text-align: left;
}

/* 2. UNIFICAÇÃO GLOBAL DE BOTÕES */
button,
.button,
.blue-button,
.white-button,
.buy_button,
.btn-toshiro,
.btn-buy-gold,
.btn-toshiro-ds,
.btn-buy-gold-ds {
    background: rgba(0, 210, 255, 0.03) !important;
    border: 1px solid #00d2ff !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-family: 'Cinzel', serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 10px 20px !important;
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.4) !important;
    text-shadow: none !important;
    min-width: 150px !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: 0.3s !important;
    text-decoration: none !important;
}

button:hover,
.button:hover,
.blue-button:hover,
.white-button:hover,
.buy_button:hover,
.btn-toshiro:hover,
.btn-buy-gold:hover,
.btn-toshiro-ds:hover,
.btn-buy-gold-ds:hover {
    box-shadow: 0 0 25px rgba(0, 210, 255, 0.7) !important;
    background: rgba(0, 210, 255, 0.1) !important;
    filter: none !important;
    color: #fff !important;
    text-decoration: none !important;
}

button:disabled,
.button:disabled,
.disabled,
[disabled] {
    opacity: 0.45 !important;
    filter: grayscale(80%) brightness(60%) !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    box-shadow: none !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* 3. UNIFICAÇÃO GLOBAL DE INPUTS E TEXTAREAS */
input[type=text],
input[type=email],
input[type=number],
input[type=password],
input[type=search],
.form-control,
textarea {
    height: 52px !important;
    background: #050810 !important;
    border: 1px solid #111a2e !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    padding: 0 20px !important;
    box-shadow: none !important;
    outline: none !important;
    transition: 0.3s !important;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=search]:focus,
.form-control:focus,
textarea:focus {
    border-color: #00d2ff !important;
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.3) !important;
}

textarea {
    height: auto !important;
    padding: 15px 20px !important;
}

/* 4. UNIFICAÇÃO GLOBAL DE DROPDOWNS E SELECTS */
select,
select.cry-input,
select.ice-input-unified,
.custom-select select,
.select-selected,
.cry-dropdown-select {
    background: #020612 !important;
    border: none !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    font-family: 'Cinzel', serif !important;
    font-size: 14px !important;
    padding: 10px 20px !important;
    cursor: pointer !important;
    outline: none !important;
    height: auto !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

select:focus,
select.cry-input:focus,
select.ice-input-unified:focus,
.cry-dropdown-select:focus {
    border-bottom-color: #00d2ff !important;
    background: #020612 !important;
}

/* 5. UNIFICAÇÃO GLOBAL DE CARDS E BADGES */
.side-char-card,
.hero-select-item,
.cry-character-card-ds {
    background: #040914 !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 8px !important;
    padding: 15px 20px !important;
    transition: 0.3s !important;
}

.side-char-card:hover,
.side-char-card.active,
.side-char-card.active-card,
.hero-select-item:hover,
.hero-select-item.active,
.cry-character-card-ds:hover,
.cry-character-card-ds.active {
    border-color: #00d2ff !important;
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.4) !important;
}

.spec-badge,
.cry-badge-ds,
.badge-opt {
    display: inline-block !important;
    padding: 4px 10px !important;
    font-size: 10px !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.spec-badge.badge-green,
.cry-badge-green {
    background: rgba(0, 176, 116, 0.15) !important;
    color: #00ff88 !important;
    border: 1px solid rgba(0, 176, 116, 0.3) !important;
}

.spec-badge.badge-cyan,
.cry-badge-cyan {
    background: rgba(0, 210, 255, 0.15) !important;
    color: #00d2ff !important;
    border: 1px solid rgba(0, 210, 255, 0.3) !important;
}

.spec-badge.badge-gold,
.cry-badge-gold {
    background: rgba(255, 204, 0, 0.15) !important;
    color: #ffcc00 !important;
    border: 1px solid rgba(255, 204, 0, 0.3) !important;
}

/* DESIGN SYSTEM - COMPONENTES UNIFICADOS (ABOUT, DOWNLOAD, RANKING) */
.cry-section-title {
    font-family: 'Cinzel', serif !important;
    color: #fbc430 !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    margin-bottom: 25px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    border-bottom: 1px solid rgba(251, 196, 48, 0.2) !important;
    padding-bottom: 12px !important;
}

.cry-standard-table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: rgba(10, 15, 30, 0.6) !important;
    backdrop-filter: blur(12px) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(0, 210, 255, 0.1) !important;
    overflow: hidden !important;
    margin-bottom: 30px !important;
}

.cry-standard-table th {
    background: rgba(0, 210, 255, 0.05) !important;
    color: #00d2ff !important;
    font-family: 'Cinzel', serif !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    padding: 15px 20px !important;
    text-transform: uppercase !important;
    text-align: center !important;
    border-bottom: 1px solid rgba(0, 210, 255, 0.1) !important;
}

.cry-standard-table td {
    padding: 15px 20px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    color: #fff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02) !important;
    background: none !important;
}

.cry-standard-table tr:hover td {
    background: rgba(0, 210, 255, 0.03) !important;
}

/* Premium Search Form Styles */
.premium-search-wrapper {
    width: 620px;
    max-width: 100%;
}

.premium-search-form {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    padding: 6px 6px 6px 20px;
    transition: border-color 0.3s ease;
    gap: 12px;
}

.premium-search-form:hover,
.premium-search-form:focus-within {
    border-color: rgba(255, 255, 255, 0.25) !important;
    box-shadow: none !important;
}

.premium-search-icon {
    color: rgba(255, 255, 255, 0.35);
    font-size: 16px;
    flex-shrink: 0;
}

form.premium-search-form input.premium-search-input[type="text"],
.premium-search-input {
    width: 100% !important;
    height: 42px !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: none !important;
    color: #fff !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

form.premium-search-form input.premium-search-input[type="text"]:-webkit-autofill,
.premium-search-input:-webkit-autofill,
.premium-search-input:-webkit-autofill:hover, 
.premium-search-input:-webkit-autofill:focus, 
.premium-search-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px transparent inset !important;
    -webkit-text-fill-color: #fff !important;
    transition: background-color 5000s ease-in-out 0s;
    background-color: transparent !important;
}

.premium-search-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
    font-weight: 400;
}

.premium-search-btn {
    flex-shrink: 0 !important;
    height: 44px !important;
    padding: 0 28px !important;
    border-radius: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 150, 255, 0.15) !important;
    border: 1px solid rgba(0, 150, 255, 0.3) !important;
    color: #fff !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
    white-space: nowrap !important;
}

.premium-search-btn:hover {
    background: rgba(0, 150, 255, 0.25) !important;
    border-color: rgba(0, 150, 255, 0.5) !important;
    box-shadow: 0 4px 15px rgba(0, 150, 255, 0.15) !important;
    transform: translateY(-1px) !important;
}

/* ==========================================
   GLOBAL CUSTOM CHARACTER DROPDOWN STYLING
   ========================================== */
.cry-custom-dropdown-btn {
    background: rgba(0, 210, 255, 0.05) !important;
    border: 1.5px solid rgba(0, 210, 255, 0.45) !important;
    color: #00d2ff !important;
    font-family: 'Cinzel', serif !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    border-radius: 30px !important;
    padding: 10px 25px !important;
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    outline: none !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    text-transform: uppercase !important;
}

.cry-custom-dropdown-btn:hover {
    background: rgba(0, 210, 255, 0.15) !important;
    box-shadow: 0 0 20px rgba(0, 210, 255, 0.3) !important;
    color: #00d2ff !important;
}

.cry-class-dropdown-menu {
    background: rgba(10, 15, 30, 0.98) !important;
    border: 1px solid rgba(0, 210, 255, 0.2) !important;
    border-radius: 12px !important;
    padding: 10px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(10px) !important;
    max-height: 250px !important;
    overflow-y: auto !important;
    margin-top: 5px !important;
}

.cry-class-dropdown-menu li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.cry-class-dropdown-menu li a,
.cry-class-dropdown-menu li a span {
    color: #ffffff !important;
    padding: 10px 15px !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    text-decoration: none !important;
}

.cry-class-dropdown-menu li a:hover,
.cry-class-dropdown-menu li a:hover span {
    background: rgba(0, 210, 255, 0.1) !important;
    color: #ffffff !important;
    padding-left: 20px !important;
}

.cry-dropdown-avatar {
    width: 24px !important;
    height: 24px !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    border: 1px solid #00d2ff !important;
    margin-right: 12px !important;
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.3) !important;
    vertical-align: middle !important;
}

.cry-dropdown-item {
    color: rgba(255, 255, 255, 0.7) !important;
    padding: 10px 15px !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    text-decoration: none !important;
}

.cry-dropdown-item:hover {
    background: rgba(0, 210, 255, 0.1) !important;
    color: #fff !important;
    padding-left: 20px !important;
}