@font-face {
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRxC7mw9c.woff2) format('woff2');
    unicode-range: U +0460 -052F, U +1C80 -1C8A, U +20B4, U +2DE0 -2DFF, U + A640-A69F, U + FE2E-FE2F;
}

p {
    font-size: 1em;
    line-height: 1.2em;
    margin: 0;
    padding: 5px 0
}

.payments-refillblock {
    color: #000;
    font-size: 1.2em;
    justify-content: space-between;
    line-height: 1.2em;
    margin: 30px auto 0;
    max-width: 600px
}

.payments-block,
.payments-refillblock {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-align: center
}

.payments-block {
    background-color: #fff;
    border-radius: 3px;
    margin-bottom: 30px;
    padding: 10px 25px 15px
}

.pb-header {
    color: #222;
    font-size: 1.8em;
    font-weight: 700;
    line-height: 1.2em;
    margin: 25px 0 10px;
    text-align: center
}

.pb-input {
    left: 0;
    position: absolute;
    text-align: center;
    top: -23px;
    width: 100%
}

.pb-input input,
.pb-input input[type=number],
.pb-input input[type=phone],
.pb-input input[type=text] {
    border: 0;
    box-shadow: 0 0 0 #fff;
    color: #333;
    display: block;
    font-size: 1.6em;
    font-weight: 700;
    line-height: 1em;
    margin: 0 auto;
    outline: none;
    padding: 8px 0 2px;
    text-align: center;
    width: 100%
}

.pb-inputdescr {
    color: #aaa;
    display: block;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px
}

.payments-link {
    color: #098de4;
    cursor: pointer;
    text-decoration: none
}

.payments-link:hover {
    color: #29a5f7;
    text-decoration: none
}

.payments-link-dashed {
    border-bottom: 1px dashed #098de4;
    color: #098de4;
    cursor: pointer;
    text-decoration: none
}

.payments-link-dashed:hover {
    border-color: #29a5f7;
    color: #29a5f7;
    text-decoration: none
}

.payments-footer {
    color: #666;
    display: none;
    font-size: 14px;
    padding: 10px 20px
}

@media (min-width:550px) {
    .payments-footer {
        display: block
    }
}

.payments-button {
    -webkit-appearance: none;
    background-color: #109cf6;
    border: 0;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    font-size: 1.3em;
    line-height: 1em;
    outline: 0 none;
    padding: 14px 60px;
    position: relative;
    transition: all .2s ease-in-out
}

.payments-button:after,
.payments-button:before {
    background: -moz-linear-gradient(left, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, .65) 50%, hsla(0, 0%, 100%, 0) 100%);
    background: -webkit-linear-gradient(left, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, .65) 50%, hsla(0, 0%, 100%, 0));
    background: linear-gradient(90deg, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, .65) 50%, hsla(0, 0%, 100%, 0));
    content: "";
    display: inline-block;
    height: 1px;
    position: absolute;
    transition: width .4s ease-in-out;
    width: 0
}

.payments-button:before {
    left: 0;
    top: 3px
}

.payments-button:after {
    bottom: 3px;
    right: 0
}

.payments-button:hover {
    background-color: #2da8f7
}

.payments-button:hover:after,
.payments-button:hover:before {
    width: 100%
}

.payments-button:active {
    background-color: #5abbf9;
    transition: none
}

.payments-button:disabled {
    background-color: #999;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5)
}

.payments-button:disabled:after,
.payments-button:disabled:before {
    display: none
}

.irs {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.irs,
.irs-line {
    display: block;
    position: relative
}

.irs-line {
    outline: none !important;
    overflow: hidden
}

.irs-line-left,
.irs-line-mid,
.irs-line-right {
    display: block;
    position: absolute;
    top: 0
}

.irs-line-left {
    left: 0;
    width: 11%
}

.irs-line-mid {
    left: 9%;
    width: 82%
}

.irs-line-right {
    right: 0;
    width: 11%
}

.irs-bar {
    width: 0
}

.irs-bar,
.irs-bar-edge {
    display: block;
    left: 0;
    position: absolute
}

.irs-bar-edge {
    top: 0
}

.irs-shadow {
    display: none;
    left: 0;
    position: absolute;
    width: 0
}

.irs-slider {
    cursor: default;
    display: block;
    position: absolute;
    z-index: 1
}

.irs-slider.from:after {
    content: "min"
}

.irs-slider.to:after {
    content: "max"
}

.irs-slider.type_last {
    z-index: 2
}

.irs-min {
    left: 0
}

.irs-max,
.irs-min {
    cursor: default;
    display: block;
    position: absolute
}

.irs-max {
    right: 0
}

.irs-from,
.irs-single,
.irs-to {
    cursor: default;
    display: block;
    left: 0;
    position: absolute;
    top: 0;
    white-space: nowrap
}

.irs-grid {
    bottom: 0;
    display: none;
    height: 20px;
    left: 0;
    position: absolute;
    width: 100%
}

.irs-with-grid .irs-grid {
    display: block
}

.irs-grid-pol {
    background: #000;
    height: 8px;
    left: 0;
    position: absolute;
    top: 0;
    width: 1px
}

.irs-grid-pol.small {
    height: 4px
}

.irs-grid-text {
    bottom: 0;
    color: #000;
    font-size: 9px;
    left: 0;
    line-height: 9px;
    padding: 0 3px;
    position: absolute;
    text-align: center;
    white-space: nowrap
}

.irs-disable-mask {
    background: transparent;
    cursor: default;
    display: block;
    height: 100%;
    left: -1%;
    position: absolute;
    top: 0;
    width: 102%;
    z-index: 2
}

.irs-disabled {
    opacity: .4
}

.lt-ie9 .irs-disabled {
    filter: alpha(opacity=40)
}

.irs-hidden-input {
    background: none !important;
    border-color: transparent !important;
    border-style: solid !important;
    display: block !important;
    font-size: 0 !important;
    height: 0 !important;
    left: 0 !important;
    line-height: 0 !important;
    margin: 0 !important;
    outline: none !important;
    padding: 0 !important;
    position: absolute !important;
    top: 0 !important;
    width: 0 !important;
    z-index: -9999 !important
}

.irs {
    height: 55px
}

.irs-with-grid {
    height: 75px
}

.irs-line {
    background: #35d4ec;
    background: -moz-linear-gradient(left, #35d4ec 0, #f6c100 100%);
    background: -webkit-linear-gradient(left, #35d4ec, #f6c100);
    background: linear-gradient(90deg, #35d4ec 0, #f6c100);
    border-radius: 16px;
    -moz-border-radius: 16px;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#35d4ec", endColorstr="#f6c100", GradientType=1);
    height: 10px;
    top: 33px
}

.irs-line-left,
.irs-line-mid,
.irs-line-right {
    height: 8px
}

.irs-bar,
.irs-bar-edge {
    background: transparent;
    height: 10px;
    top: 33px
}

.irs-bar-edge {
    border-radius: 16px 0 0 16px;
    -moz-border-radius: 16px 0 0 16px;
    border-right: 0;
    width: 14px
}

.irs-shadow {
    background: #000;
    border-radius: 5px;
    -moz-border-radius: 5px;
    height: 2px;
    opacity: .3;
    top: 38px
}

.lt-ie9 .irs-shadow {
    filter: alpha(opacity=30)
}

.irs-slider {
    background: #fff;
    background: -moz-radial-gradient(center, ellipse cover, #fff 0, #e0e0e0 100%);
    background: -webkit-radial-gradient(center, ellipse cover, #fff 0, #e0e0e0 100%);
    background: radial-gradient(ellipse at center, #fff 0, #e0e0e0 100%);
    border-radius: 14px;
    -moz-border-radius: 14px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .8);
    color: #000;
    cursor: pointer;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#e0e0e0", GradientType=1);
    height: 27px;
    padding: 5px 0 0;
    text-align: center;
    top: 25px;
    width: 27px
}

.irs-slider.state_hover,
.irs-slider:hover {
    background: #fff
}

.irs-max,
.irs-min {
    background: rgba(0, 0, 0, .1);
    border-radius: 3px;
    -moz-border-radius: 3px;
    color: #333;
    font-size: 12px;
    line-height: 1.333;
    padding: 1px 5px;
    text-shadow: none;
    top: 0
}

.lt-ie9 .irs-max,
.lt-ie9 .irs-min {
    background: #ccc
}

.irs-from,
.irs-single,
.irs-to {
    background: rgba(0, 0, 0, .5);
    border-radius: 3px;
    -moz-border-radius: 3px;
    color: gold;
    font-size: 14px;
    line-height: 1.333;
    padding: 1px 5px;
    text-shadow: none
}

.irs-from:after,
.irs-single:after,
.irs-to:after {
    content: "o";
    font-family: Rouble, Play, Tahoma, sans-serif;
    font-size: .9em;
    font-weight: 400;
    margin-left: 1px
}

.lt-ie9 .irs-from,
.lt-ie9 .irs-single,
.lt-ie9 .irs-to {
    background: #999
}

.irs-grid {
    height: 27px
}

.irs-grid-pol {
    background: #428bca;
    opacity: .5
}

.irs-grid-pol.small {
    background: #999
}

.irs-grid-text {
    bottom: 5px;
    color: #99a4ac
}

.upgrade-chance {
    align-items: center;
    display: flex;
    flex-direction: column;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 3
}

.upgrade-chance__chance {
    margin-top: 10px
}

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

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

body {
    line-height: 1
}

ol,
ul {
    list-style: none
}

blockquote,
q {
    quotes: none
}

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

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

.uncommon {
    --rarity-color: #1d434c;
    --rarity-color-lighten: #9faec5;
    --rarity-color-0: rgba(29, 67, 76, 0);
    --rarity-color-10: rgba(29, 67, 76, .1);
    --rarity-color-35: rgba(29, 67, 76, .35);
    --rarity-color-70: rgba(29, 67, 76, .7);
    --rarity-color-90: rgba(29, 67, 76, .9)
}

.common {
    --rarity-color: #3b2f3c;
    --rarity-color-lighten: #9faec5;
    --rarity-color-0: rgba(59, 47, 60, 0);
    --rarity-color-10: rgba(59, 47, 60, .1);
    --rarity-color-35: rgba(59, 47, 60, .35);
    --rarity-color-70: rgba(59, 47, 60, .7);
    --rarity-color-90: rgba(59, 47, 60, .9)
}

.milspec {
    --rarity-color: #1d2f4c;
    --rarity-color-lighten: #9faec5;
    --rarity-color-0: rgba(29, 47, 76, 0);
    --rarity-color-10: rgba(29, 47, 76, .1);
    --rarity-color-35: rgba(29, 47, 76, .35);
    --rarity-color-70: rgba(29, 47, 76, .7);
    --rarity-color-90: rgba(29, 47, 76, .9)
}

.restricted {
    --rarity-color: #342150;
    --rarity-color-lighten: #b59bcd;
    --rarity-color-0: rgba(52, 33, 80, 0);
    --rarity-color-10: rgba(52, 33, 80, .1);
    --rarity-color-35: rgba(52, 33, 80, .35);
    --rarity-color-70: rgba(52, 33, 80, .7);
    --rarity-color-90: rgba(52, 33, 80, .9)
}

.classified {
    --rarity-color: #47194e;
    --rarity-color-lighten: #bd9fb7;
    --rarity-color-0: rgba(71, 25, 78, 0);
    --rarity-color-10: rgba(71, 25, 78, .1);
    --rarity-color-35: rgba(71, 25, 78, .35);
    --rarity-color-70: rgba(71, 25, 78, .7);
    --rarity-color-90: rgba(71, 25, 78, .9)
}

.covert {
    --rarity-color: #640c0c;
    --rarity-color-lighten: #bf9ea2;
    --rarity-color-0: rgba(100, 12, 12, 0);
    --rarity-color-10: rgba(100, 12, 12, .1);
    --rarity-color-35: rgba(100, 12, 12, .35);
    --rarity-color-70: rgba(100, 12, 12, .7);
    --rarity-color-90: rgba(100, 12, 12, .9)
}

.rare {
    --rarity-color: #534213;
    --rarity-color-lighten: #bfb8a0;
    --rarity-color-0: rgba(83, 66, 19, 0);
    --rarity-color-10: rgba(83, 66, 19, .1);
    --rarity-color-35: rgba(83, 66, 19, .35);
    --rarity-color-70: rgba(83, 66, 19, .7);
    --rarity-color-90: rgba(83, 66, 19, .9)
}

@font-face {
    font-family: Ecoin;
    font-style: normal;
    font-weight: 400;
    src: url(/assets/ecoin.ttf)
}

@font-face {
    font-family: rouble;
    font-style: normal;
    font-weight: 400;
    src: url(/assets/rouble.otf?v=3)
}

* {
    -webkit-text-size-adjust: 100%;
    box-sizing: border-box
}

article,
aside,
footer,
header,
nav,
section {
    display: block
}

body,
html {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    scrollbar-gutter: stable;
    width: 100%
}

body {
    -webkit-font-smoothing: antialiased;
    background-color: #080c12;
    color: #fff;
    font-family: 'Montserrat', 'Ecoin', sans-serif;
    font-size: 14px
}

body.js-hide-scroll,
body.noscroll {
    overflow-y: hidden
}

body::-webkit-scrollbar-track {
    background-color: transparent
}

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

body::-webkit-scrollbar-thumb {
    background-color: rgba(115, 140, 178, .2)
}

ol,
ul {
    list-style-type: none
}

button,
input,
textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    font-family: inherit;
    margin: 0;
    outline: none;
    padding: 0
}

a,
h1,
h2,
h3,
h4,
h5,
h6,
p {
    word-wrap: break-word
}

a {
    color: #fff;
    display: inline-block;
    text-decoration: none
}

button {
    background-color: inherit;
    cursor: pointer
}

img {
    background-color: transparent;
    display: block;
    height: auto;
    max-width: 100%
}

i {
    font-style: normal
}

.grecaptcha-badge {
    bottom: 50px !important;
    box-shadow: none !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    right: 100% !important;
    top: 100% !important;
    width: 0 !important;
    z-index: -99 !important
}

.gradient-text {
    background-clip: text;
    background-image: linear-gradient(#fff, #0c121b 150%);
    background-position: 50%;
    color: transparent
}

.layout {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    position: relative;
    width: 100%
}

@media not screen and (min-width:1024px) {
    .layout {
        overflow: hidden
    }
}

.layout__header {
    position: relative;
    z-index: 5
}

.layout__footer {
    position: relative;
    z-index: 1
}

.layout__content {
    margin-bottom: auto;
    padding: 20px 0;
    position: relative
}

@media (min-width:900px) {
    .layout {
        width: 100%
    }
}

@media (min-width:1024px) {

    .layout_smoke:after,
    .layout_smoke:before {
        background-image: url(/assets/smoke.png);
        background-size: 100%;
        content: "";
        display: block;
        height: 100%;
        position: absolute;
        top: 0;
        width: 360px;
        z-index: -1
    }
}

.layout_smoke:before {
    left: 0
}

.layout_smoke:after {
    right: 0;
    transform: scaleX(-1)
}

.wrapper {
    margin: 0 auto;
    max-width: 1700px;
    padding: 0 10px;
    width: 100%
}

@media (min-width:768px) {
    .wrapper {
        padding: 0 30px
    }
}

.wrapper_home {
    position: static
}

@media (min-width:1250px) and (max-width:1800px) {
    .wrapper_home {
        padding: 0 120px
    }
}

.price {
    color: inherit;
    display: inline-block;
    font-weight: inherit;
    text-transform: none
}

.price:after,
.price:before {
    font-style: inherit;
    font-weight: inherit !important;
    line-height: 1em;
    vertical-align: baseline
}

.price:after {
    margin-left: 2px
}

.price:before {
    margin-right: 2px
}

.price.price-RUB:after {
    content: "₽"
}

.price.price-USD:before {
    content: "$"
}

.price.price-EUR:before {
    content: "€"
}

.price.price-COIN {
    display: inline-flex;
    flex-direction: row-reverse
}

.price.price-COIN:after {
    color: inherit;
    content: "\E800";
    font-size: 1em;
    font-weight: 400 !important;
    line-height: 1.5em;
    margin-right: 4px;
    text-transform: none
}

.price.price-percent:after {
    content: "%";
    font-family: inherit;
    font-weight: inherit !important
}

.price.price-bonus {
    align-items: center;
    display: flex
}

.price.price-bonus:after {
    display: none
}

.price.price-bonus:before {
    content: "";
    margin-right: 10px;
    margin-top: 6px
}

input[type=text] {
    height: 56px
}

.input>input {
    background: #080c12;
    border: 1px solid #121a25;
    border-radius: 8px;
    color: rgba(174, 191, 217, .8);
    font-size: 13px;
    height: 46px;
    padding: 13px 16px;
    width: 100%
}

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

.input>input[type=number] {
    -moz-appearance: textfield
}

.input>input::placeholder {
    color: rgba(115, 140, 178, .6)
}

.input>input:focus,
.input>input:hover {
    background-color: #0c121b
}

.icon:before {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    display: inline-block;
    flex: none;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: relative;
    transition: .2s ease
}

.icon_search:before {
    height: 18px;
    -webkit-mask-image: url(/assets/search.svg?v=2);
    mask-image: url(/assets/search.svg?v=2);
    width: 18px
}

.icon_open-default:before {
    -webkit-mask-image: url(/assets/open-default.svg);
    mask-image: url(/assets/open-default.svg)
}

.icon_open-fast:before {
    -webkit-mask-image: url(/assets/open-fast.svg);
    mask-image: url(/assets/open-fast.svg)
}

.icon_open-card:before {
    -webkit-mask-image: url(/assets/open-card.svg);
    mask-image: url(/assets/open-card.svg)
}

.icon_RECEIVED_TRADE_PROTECTED:before,
.icon_WITHDRAWING:before,
.icon_cart:before {
    height: 12px;
    -webkit-mask-image: url(/assets/cart.svg);
    mask-image: url(/assets/cart.svg);
    width: 12px
}

.icon_get:before {
    height: 12px;
    -webkit-mask-image: url(/assets/get.svg);
    mask-image: url(/assets/get.svg);
    width: 12px
}

.icon_add-circle:before,
.icon_refill:before {
    height: 18px;
    -webkit-mask-image: url(/assets/add-circle.svg);
    mask-image: url(/assets/add-circle.svg);
    width: 18px
}

.icon_loadmore:before {
    -webkit-mask-image: url(/assets/loadmore.svg);
    mask-image: url(/assets/loadmore.svg)
}

.icon_vk:before {
    -webkit-mask-image: url(/assets/vk.svg);
    mask-image: url(/assets/vk.svg)
}

.icon_tg:before {
    -webkit-mask-image: url(/assets/telegram.svg?v=1);
    mask-image: url(/assets/telegram.svg?v=1)
}

.icon_info:before {
    height: 20px;
    width: 20px
}

.icon_retry:before {
    -webkit-mask-image: url(/assets/retry.svg);
    mask-image: url(/assets/retry.svg)
}

.icon_drops:before {
    -webkit-mask-image: url(/assets/items-icon.svg?v=2);
    mask-image: url(/assets/items-icon.svg?v=2)
}

.icon_contract:before,
.icon_contracts:before {
    -webkit-mask-image: url(/assets/contracts-icon.svg);
    mask-image: url(/assets/contracts-icon.svg)
}

.icon_battles:before {
    -webkit-mask-image: url(/assets/battles-icon.svg);
    mask-image: url(/assets/battles-icon.svg)
}

.icon_upgrade:before,
.icon_upgrades:before {
    -webkit-mask-image: url(/public/redesign/img/tabs/upgrades-icon.svg);
    mask-image: url(/assets/upgrades-icon.svg)
}

.icon_wheeldrops:before {
    -webkit-mask-image: url(/assets/wheeldrops-icon.svg);
    mask-image: url(/assets/wheeldrops-icon.svg)
}

.icon_events:before {
    height: 16px;
    -webkit-mask-image: url(/assets/events-icon.svg?v=3);
    mask-image: url(/assets/events-icon.svg?v=3);
    width: 16px
}

.icon_cases:before {
    -webkit-mask-image: url(/assets/cases.svg);
    mask-image: url(/assets/cases.svg)
}

.icon_sort:before {
    -webkit-mask-image: url(/assets/sort.svg);
    mask-image: url(/assets/sort.svg)
}

.icon_trash:before {
    -webkit-mask-image: url(/assets/trash.svg);
    mask-image: url(/assets/trash.svg)
}

.icon_check-circle:before,
.icon_withdrawn:before {
    -webkit-mask-image: url(/assets/check-circle.svg);
    mask-image: url(/assets/check-circle.svg)
}

.icon_close:before {
    -webkit-mask-image: url(/assets/close.svg);
    mask-image: url(/assets/close.svg)
}

.icon_wins:before {
    -webkit-mask-image: url(/assets/wins.svg);
    mask-image: url(/assets/wins.svg)
}

.icon_loses:before {
    -webkit-mask-image: url(/assets/loses.svg);
    mask-image: url(/assets/loses.svg)
}

.icon_rules:before {
    -webkit-mask-image: url(/assets/rules.svg);
    mask-image: url(/assets/rules.svg)
}

.icon_multibattles:before {
    -webkit-mask-image: url(/assets/multibattles.svg);
    mask-image: url(/assets/multibattles.svg)
}

.icon_failed:before {
    -webkit-mask-image: url(/assets/failed.svg);
    mask-image: url(/assets/failed.svg)
}

.icon_success:before {
    -webkit-mask-image: url(/assets/success.svg);
    mask-image: url(/assets/success.svg)
}

.icon_arrow:before {
    -webkit-mask-image: url(/assets/arrow.svg);
    mask-image: url(/assets/arrow.svg)
}

.icon_wallet:before {
    -webkit-mask-image: url(/assets/wallet.svg);
    mask-image: url(/assets/wallet.svg)
}

.icon_lock:before {
    -webkit-mask-image: url(/assets/lock.svg);
    mask-image: url(/assets/lock.svg)
}

.icon_completed:before,
.icon_steam:before {
    -webkit-mask-image: url(/assets/steam.svg);
    mask-image: url(/assets/steam.svg)
}

.icon_leave:before {
    -webkit-mask-image: url(/assets/leave.svg);
    mask-image: url(/assets/leave.svg)
}

.icon_link:before {
    -webkit-mask-image: url(/assets/link.svg);
    mask-image: url(/assets/link.svg)
}

.icon_prize:before {
    -webkit-mask-image: url(/assets/prize.svg);
    mask-image: url(/assets/prize.svg)
}

.icon_progress:before,
.icon_time:before {
    -webkit-mask-image: url(/assets/time.svg);
    mask-image: url(/assets/time.svg)
}

.icon_check-list:before {
    -webkit-mask-image: url(/assets/check-list.svg);
    mask-image: url(/assets/check-list.svg)
}

.icon_wallet-coin:before {
    -webkit-mask-image: url(/assets/wallet-coin.svg);
    mask-image: url(/assets/wallet-coin.svg)
}

.icon_logout:before {
    -webkit-mask-image: url(/assets/logout.svg);
    mask-image: url(/assets/logout.svg)
}

.icon_info:before {
    -webkit-mask-image: url(/assets/info.svg);
    mask-image: url(/assets/info.svg)
}

.icon_crown:before {
    -webkit-mask-image: url(/assets/crown.svg);
    mask-image: url(/assets/crown.svg)
}

.icon_promo:before {
    -webkit-mask-image: url(/assets/promo.svg);
    mask-image: url(/assets/promo.svg)
}

.icon_money:before {
    -webkit-mask-image: url(/assets/money.svg);
    mask-image: url(/assets/money.svg)
}

.icon_support:before {
    -webkit-mask-image: url(/assets/support.svg);
    mask-image: url(/assets/support.svg)
}

.icon_pause:before {
    -webkit-mask-image: url(/assets/pause.svg);
    mask-image: url(/assets/pause.svg)
}

.icon_fav:before {
    -webkit-mask-image: url(/assets/fav.svg);
    mask-image: url(/assets/fav.svg)
}

.icon_fav-full:before {
    -webkit-mask-image: url(/assets/fav-full.svg);
    mask-image: url(/assets/fav-full.svg)
}

.icon_bell:before {
    -webkit-mask-image: url(/assets/bell.svg);
    mask-image: url(/assets/bell.svg)
}

.icon_selled:before {
    -webkit-mask-image: url(/assets/selled.svg);
    mask-image: url(/assets/selled.svg)
}

.icon_steam-warning:before {
    height: 20px;
    -webkit-mask-image: url(/assets/steam-warning.svg);
    mask-image: url(/assets/steam-warning.svg);
    width: 20px
}

.icon_fire:before {
    height: 20px;
    -webkit-mask-image: url(/assets/fire.svg);
    mask-image: url(/assets/fire.svg);
    width: 20px
}

.icon_copy:before {
    height: 20px;
    -webkit-mask-image: url(/assets/copy.svg);
    mask-image: url(/assets/copy.svg);
    width: 20px
}

.btn {
    align-items: center;
    background: #f3b705;
    background-position: 50%;
    background-repeat: no-repeat;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #000;
    cursor: pointer;
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    height: 46px;
    justify-content: center;
    line-height: 130%;
    padding: 0 16px;
    position: relative;
    transition: all .3s ease;
    transition-property: box-shadow, background, border-color, color;
    user-select: none;
    white-space: nowrap
}

.btn:hover {
    background-color: #fac117
}

.btn__content {
    gap: 4px;
    height: 100%;
    justify-content: center;
    pointer-events: none
}

.btn__content,
.btn__icon {
    align-items: center;
    display: flex
}

.btn__icon:before {
    height: 18px;
    transition: background-color .3s ease;
    width: 18px
}

.btn__label {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center
}

.btn__label--status {
    font-size: 10px
}

.btn__label-line {
    align-items: center;
    display: flex
}

.btn__label-line+.btn__label-line {
    font-weight: 400;
    text-transform: none
}

.btn__counter {
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%)
}

.btn__label-new {
    align-items: center;
    background-color: #f3b705;
    border-radius: 20px;
    color: #0c121b;
    display: flex;
    font-size: 11px;
    font-weight: 600;
    gap: 2px;
    height: 23px;
    line-height: 13px;
    padding: 0 7px;
    position: absolute;
    right: 10px;
    text-transform: uppercase;
    top: -13px
}

@media not screen and (min-width:768px) {
    .btn__label-new {
        flex: none;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: fit-content
    }
}

.btn__label-new .icon:before {
    background-color: #0c121b;
    width: 10px
}

.btn_color-primary {
    background-color: #f3b705;
    color: #000
}

.btn_color-primary:hover {
    background-color: #ff7300
}

.btn_color-primary:focus {
    box-shadow: 0 0 15px 0 #f3b705
}

.btn_color-primary .btn__icon:before {
    background: #000
}

.btn_color-primary.btn.active,
.btn_color-primary.btn_active {
    background-color: #ff7300
}

.btn_color-primary.btn_shade-darken {
    background-color: #daa404
}

.btn_color-primary.btn_shade-darken:hover {
    background-color: #a87f03
}

.btn_color-primary.btn_shade-fade {
    background-color: rgba(243, 183, 5, .07)
}

.btn_color-primary.btn_shade-fade:hover {
    background-color: rgba(243, 183, 5, .14)
}

.btn_color-primary.btn_style-outline {
    backdrop-filter: blur(20px);
    background-color: rgba(243, 183, 5, .2);
    border: 1px solid rgba(255, 115, 0, .5)
}

.btn_color-primary.btn_style-outline:hover {
    background-color: rgba(243, 183, 5, .4);
    border-color: rgba(255, 115, 0, .6)
}

.btn_color-primary.btn_style-outline:focus {
    box-shadow: 0 0 15px 0 rgba(255, 115, 0, .3)
}

.btn_color-primary.btn_shade-fade.btn_style-outline {
    border: 1px solid rgba(243, 183, 5, .1)
}

.btn_color-primary.btn_shade-fade.btn_style-outline:hover {
    border: 1px solid rgba(243, 183, 5, .3)
}

.btn_color-primary.btn_transparent {
    background: rgba(1, 8, 18, .7);
    color: #f3b705
}

.btn_color-primary.btn_transparent:hover {
    color: #ff7300
}

.btn_color-primary.btn_transparent .btn__icon:before {
    background: #f3b705
}

.btn_color-primary.btn_transparent:hover .btn__icon:before {
    background: #ff7300
}

.btn_color-secondary {
    background-color: #738cb21a;
    color: hsla(0, 0%, 100%, .4)
}

.btn_color-secondary:hover {
    background-color: rgba(115, 140, 178, .2)
}

.btn_color-secondary:focus {
    box-shadow: 0 0 15px 0 #738cb21a
}

.btn_color-secondary .btn__icon:before {
    background: hsla(0, 0%, 100%, .4)
}

.btn_color-secondary.btn.active,
.btn_color-secondary.btn_active {
    background-color: rgba(115, 140, 178, .2)
}

.btn_color-secondary.btn_shade-darken {
    background-color: rgba(99, 126, 169, .102)
}

.btn_color-secondary.btn_shade-darken:hover {
    background-color: rgba(77, 102, 140, .102)
}

.btn_color-secondary.btn_shade-fade {
    background-color: rgba(115, 140, 178, .07)
}

.btn_color-secondary.btn_shade-fade:hover {
    background-color: rgba(115, 140, 178, .14)
}

.btn_color-secondary.btn_style-outline {
    backdrop-filter: blur(20px);
    background-color: rgba(115, 140, 178, .2);
    border: 1px solid rgba(115, 140, 178, .5)
}

.btn_color-secondary.btn_style-outline:hover {
    background-color: rgba(115, 140, 178, .4);
    border-color: rgba(115, 140, 178, .6)
}

.btn_color-secondary.btn_style-outline:focus {
    box-shadow: 0 0 15px 0 rgba(115, 140, 178, .3)
}

.btn_color-secondary.btn_shade-fade.btn_style-outline {
    border: 1px solid rgba(115, 140, 178, .1)
}

.btn_color-secondary.btn_shade-fade.btn_style-outline:hover {
    border: 1px solid rgba(115, 140, 178, .3)
}

.btn_color-secondary.btn_transparent {
    background: rgba(1, 8, 18, .7);
    color: #738cb21a
}

.btn_color-secondary.btn_transparent:hover {
    color: rgba(115, 140, 178, .2)
}

.btn_color-secondary.btn_transparent .btn__icon:before {
    background: #738cb21a
}

.btn_color-secondary.btn_transparent:hover .btn__icon:before {
    background: rgba(115, 140, 178, .2)
}

.btn_color-info {
    background-color: #0d506b;
    color: #fff
}

.btn_color-info:hover {
    background-color: #06a4bc
}

.btn_color-info:focus {
    box-shadow: 0 0 15px 0 #0d506b
}

.btn_color-info .btn__icon:before {
    background: #fff
}

.btn_color-info.btn.active,
.btn_color-info.btn_active {
    background-color: #06a4bc
}

.btn_color-info.btn_shade-darken {
    background-color: #0a3f54
}

.btn_color-info.btn_shade-darken:hover {
    background-color: #051d27
}

.btn_color-info.btn_shade-fade {
    background-color: rgba(13, 80, 107, .07)
}

.btn_color-info.btn_shade-fade:hover {
    background-color: rgba(13, 80, 107, .14)
}

.btn_color-info.btn_style-outline {
    backdrop-filter: blur(20px);
    background-color: rgba(13, 80, 107, .2);
    border: 1px solid rgba(6, 164, 188, .5)
}

.btn_color-info.btn_style-outline:hover {
    background-color: rgba(13, 80, 107, .4);
    border-color: rgba(6, 164, 188, .6)
}

.btn_color-info.btn_style-outline:focus {
    box-shadow: 0 0 15px 0 rgba(6, 164, 188, .3)
}

.btn_color-info.btn_shade-fade.btn_style-outline {
    border: 1px solid rgba(13, 80, 107, .1)
}

.btn_color-info.btn_shade-fade.btn_style-outline:hover {
    border: 1px solid rgba(13, 80, 107, .3)
}

.btn_color-info.btn_transparent {
    background: rgba(1, 8, 18, .7);
    color: #0d506b
}

.btn_color-info.btn_transparent:hover {
    color: #06a4bc
}

.btn_color-info.btn_transparent .btn__icon:before {
    background: #0d506b
}

.btn_color-info.btn_transparent:hover .btn__icon:before {
    background: #06a4bc
}

.btn_color-danger {
    background-color: #ff4e18;
    color: #fff
}

.btn_color-danger:hover {
    background-color: #d70000
}

.btn_color-danger:focus {
    box-shadow: 0 0 15px 0 #ff4e18
}

.btn_color-danger .btn__icon:before {
    background: #fff
}

.btn_color-danger.btn.active,
.btn_color-danger.btn_active {
    background-color: #d70000
}

.btn_color-danger.btn_shade-darken {
    background-color: #fe3b00
}

.btn_color-danger.btn_shade-darken:hover {
    background-color: #cb2f00
}

.btn_color-danger.btn_shade-fade {
    background-color: rgba(255, 78, 24, .07)
}

.btn_color-danger.btn_shade-fade:hover {
    background-color: rgba(255, 78, 24, .14)
}

.btn_color-danger.btn_style-outline {
    backdrop-filter: blur(20px);
    background-color: rgba(255, 78, 24, .2);
    border: 1px solid rgba(215, 0, 0, .5)
}

.btn_color-danger.btn_style-outline:hover {
    background-color: rgba(255, 78, 24, .4);
    border-color: rgba(215, 0, 0, .6)
}

.btn_color-danger.btn_style-outline:focus {
    box-shadow: 0 0 15px 0 rgba(215, 0, 0, .3)
}

.btn_color-danger.btn_shade-fade.btn_style-outline {
    border: 1px solid rgba(255, 78, 24, .1)
}

.btn_color-danger.btn_shade-fade.btn_style-outline:hover {
    border: 1px solid rgba(255, 78, 24, .3)
}

.btn_color-danger.btn_transparent {
    background: rgba(1, 8, 18, .7);
    color: #ff4e18
}

.btn_color-danger.btn_transparent:hover {
    color: #d70000
}

.btn_color-danger.btn_transparent .btn__icon:before {
    background: #ff4e18
}

.btn_color-danger.btn_transparent:hover .btn__icon:before {
    background: #d70000
}

.btn_color-success {
    background-color: #6dae01;
    color: #fff
}

.btn_color-success:hover {
    background-color: hsla(0, 0%, 100%, .6)
}

.btn_color-success:focus {
    box-shadow: 0 0 15px 0 #6dae01
}

.btn_color-success .btn__icon:before {
    background: #fff
}

.btn_color-success.btn.active,
.btn_color-success.btn_active {
    background-color: hsla(0, 0%, 100%, .6)
}

.btn_color-success.btn_shade-darken {
    background-color: #5d9501
}

.btn_color-success.btn_shade-darken:hover {
    background-color: #3d6201
}

.btn_color-success.btn_shade-fade {
    background-color: rgba(109, 174, 1, .07)
}

.btn_color-success.btn_shade-fade:hover {
    background-color: rgba(109, 174, 1, .14)
}

.btn_color-success.btn_style-outline {
    backdrop-filter: blur(20px);
    background-color: rgba(109, 174, 1, .2);
    border: 1px solid hsla(0, 0%, 100%, .5)
}

.btn_color-success.btn_style-outline:hover {
    background-color: rgba(109, 174, 1, .4);
    border-color: hsla(0, 0%, 100%, .6)
}

.btn_color-success.btn_style-outline:focus {
    box-shadow: 0 0 15px 0 hsla(0, 0%, 100%, .3)
}

.btn_color-success.btn_shade-fade.btn_style-outline {
    border: 1px solid rgba(109, 174, 1, .1)
}

.btn_color-success.btn_shade-fade.btn_style-outline:hover {
    border: 1px solid rgba(109, 174, 1, .3)
}

.btn_color-success.btn_transparent {
    background: rgba(1, 8, 18, .7);
    color: #6dae01
}

.btn_color-success.btn_transparent:hover {
    color: hsla(0, 0%, 100%, .6)
}

.btn_color-success.btn_transparent .btn__icon:before {
    background: #6dae01
}

.btn_color-success.btn_transparent:hover .btn__icon:before {
    background: hsla(0, 0%, 100%, .6)
}

.btn_color-light {
    background-color: #fff;
    color: #1c1743
}

.btn_color-light:hover {
    background-color: transparent
}

.btn_color-light:focus {
    box-shadow: 0 0 15px 0 #fff
}

.btn_color-light .btn__icon:before {
    background: #1c1743
}

.btn_color-light.btn.active,
.btn_color-light.btn_active {
    background-color: transparent
}

.btn_color-light.btn_shade-darken {
    background-color: #f2f2f2
}

.btn_color-light.btn_shade-darken:hover {
    background-color: #d9d9d9
}

.btn_color-light.btn_shade-fade {
    background-color: hsla(0, 0%, 100%, .07)
}

.btn_color-light.btn_shade-fade:hover {
    background-color: hsla(0, 0%, 100%, .14)
}

.btn_color-light.btn_style-outline {
    backdrop-filter: blur(20px);
    background-color: hsla(0, 0%, 100%, .2);
    border: 1px solid rgba(0, 0, 0, .5)
}

.btn_color-light.btn_style-outline:hover {
    background-color: hsla(0, 0%, 100%, .4);
    border-color: rgba(0, 0, 0, .6)
}

.btn_color-light.btn_style-outline:focus {
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, .3)
}

.btn_color-light.btn_shade-fade.btn_style-outline {
    border: 1px solid hsla(0, 0%, 100%, .1)
}

.btn_color-light.btn_shade-fade.btn_style-outline:hover {
    border: 1px solid hsla(0, 0%, 100%, .3)
}

.btn_color-light.btn_transparent {
    background: rgba(1, 8, 18, .7);
    color: #fff
}

.btn_color-light.btn_transparent:hover {
    color: transparent
}

.btn_color-light.btn_transparent .btn__icon:before {
    background: #fff
}

.btn_color-light.btn_transparent:hover .btn__icon:before {
    background: transparent
}

.btn_color-dark {
    background-color: rgba(0, 0, 0, .46);
    color: #fff
}

.btn_color-dark:hover {
    background-color: hsla(0, 0%, 100%, .06)
}

.btn_color-dark:focus {
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, .46)
}

.btn_color-dark .btn__icon:before {
    background: #fff
}

.btn_color-dark.btn.active,
.btn_color-dark.btn_active {
    background-color: hsla(0, 0%, 100%, .06)
}

.btn_color-dark.btn_shade-darken,
.btn_color-dark.btn_shade-darken:hover {
    background-color: rgba(0, 0, 0, .46)
}

.btn_color-dark.btn_shade-fade {
    background-color: rgba(0, 0, 0, .07)
}

.btn_color-dark.btn_shade-fade:hover {
    background-color: rgba(0, 0, 0, .14)
}

.btn_color-dark.btn_style-outline {
    backdrop-filter: blur(20px);
    background-color: rgba(0, 0, 0, .2);
    border: 1px solid hsla(0, 0%, 100%, .5)
}

.btn_color-dark.btn_style-outline:hover {
    background-color: rgba(0, 0, 0, .4);
    border-color: hsla(0, 0%, 100%, .6)
}

.btn_color-dark.btn_style-outline:focus {
    box-shadow: 0 0 15px 0 hsla(0, 0%, 100%, .3)
}

.btn_color-dark.btn_shade-fade.btn_style-outline {
    border: 1px solid rgba(0, 0, 0, .1)
}

.btn_color-dark.btn_shade-fade.btn_style-outline:hover {
    border: 1px solid rgba(0, 0, 0, .3)
}

.btn_color-dark.btn_transparent {
    background: rgba(1, 8, 18, .7);
    color: rgba(0, 0, 0, .46)
}

.btn_color-dark.btn_transparent:hover {
    color: hsla(0, 0%, 100%, .06)
}

.btn_color-dark.btn_transparent .btn__icon:before {
    background: rgba(0, 0, 0, .46)
}

.btn_color-dark.btn_transparent:hover .btn__icon:before {
    background: hsla(0, 0%, 100%, .06)
}

.btn_size-small {
    font-size: 12px;
    height: 24px;
    padding: 0 8px
}

.btn_size-small.btn_type-square {
    padding: 0;
    width: 24px
}

.btn_size-mid {
    font-size: 13px;
    height: 36px;
    padding: 0 12px
}

.btn_size-mid.btn_type-square {
    padding: 0;
    width: 36px
}

.btn_size-big {
    font-size: 16px;
    height: 56px;
    padding: 0 25px
}

.btn_size-big.btn_type-square {
    padding: 0;
    width: 56px
}

.btn_size-content {
    font-size: 13px;
    height: auto;
    padding: 0 16px
}

.btn_size-content.btn_type-square {
    padding: 0;
    width: auto
}

.btn_size-fill {
    font-size: 13px;
    height: 100%;
    padding: 0 16px
}

.btn_size-fill.btn_type-square {
    padding: 0;
    width: 100%
}

.btn_size-extract(small mid big content fill, 6) {
    font-size: extract(12px 13px 16px 13px 13px, 6);
    height: extract(24px 36px 56px auto 100%, 6);
    padding: 0 extract(8px 12px 25px 16px 16px, 6)
}

.btn_size-extract(small mid big content fill, 6).btn_type-square {
    padding: 0;
    width: extract(24px 36px 56px auto 100%, 6)
}

.btn_size-extract(small mid big content fill, 7) {
    font-size: extract(12px 13px 16px 13px 13px, 7);
    height: extract(24px 36px 56px auto 100%, 7);
    padding: 0 extract(8px 12px 25px 16px 16px, 7)
}

.btn_size-extract(small mid big content fill, 7).btn_type-square {
    padding: 0;
    width: extract(24px 36px 56px auto 100%, 7)
}

.btn_color-dark:hover {
    background-color: hsla(0, 0%, 100%, .15)
}

.btn_color-dark.btn_style-outline {
    color: #fff
}

.btn_type-square {
    overflow: hidden;
    width: 46px
}

.btn_type-square .btn__icon:before {
    margin: 0
}

.btn_type-fullwidth {
    padding: 0 15px;
    width: 100%
}

.btn_loading,
.btn_loading.btn_style-outline,
.btn_loading.btn_transparent {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMCIgd2lkdGg9IjI1NiIgaGVpZ2h0PSI2NCIgdmlld0JveD0iMCAwIDEyOCAzMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGNpcmNsZSByPSIxMSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTYgMTYpIj48YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InNjYWxlIiBhZGRpdGl2ZT0ic3VtIiB2YWx1ZXM9IjE7MS40MjsxOzE7MTsxOzE7MTsxOzEiIGR1cj0iNzUwbXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+PC9jaXJjbGU+PGNpcmNsZSByPSIxMSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjQgMTYpIj48YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InNjYWxlIiBhZGRpdGl2ZT0ic3VtIiB2YWx1ZXM9IjE7MTsxOzE7MS40MjsxOzE7MTsxOzEiIGR1cj0iNzUwbXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+PC9jaXJjbGU+PGNpcmNsZSByPSIxMSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTEyIDE2KSI+PGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJzY2FsZSIgYWRkaXRpdmU9InN1bSIgdmFsdWVzPSIxOzE7MTsxOzE7MTsxOzEuNDI7MTsxIiBkdXI9Ijc1MG1zIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPjwvY2lyY2xlPjwvc3ZnPg==);
    background-repeat: no-repeat;
    background-size: 35px 9px;
    border-color: transparent;
    pointer-events: none
}

.btn_loading .btn__content {
    opacity: 0
}

.btn_loading.btn_type-square {
    background-size: 60%
}

.btn[disabled],
.btn_disabled {
    pointer-events: none
}

.btn_transparent {
    background-color: transparent
}

.btn_transparent:hover {
    background-color: hsla(0, 0%, 100%, .1)
}

.btn_transparent .btn__icon:before {
    background: #fff
}

.btn_with-icon .btn__label-part:first-child {
    margin-left: 6px
}

.btn_with-counter {
    padding: 0 50px
}

.btn_will-change,
.btn_will-change .btn__icon:before {
    will-change: contents
}

.btn_rotate-icon .btn__icon:before {
    transform: rotate(180deg)
}

.btn_no-padding {
    padding: 0
}

.btn_in-group {
    border-radius: 0
}

.btn_hover-icon-rotate:hover .btn__icon:before {
    transform: rotateY(1turn)
}

.btn_hover-icon-rotate-180:hover .btn__icon:before {
    transform: rotateY(180deg)
}

.btn_size-small .btn__icon:before {
    height: 12px;
    width: 12px
}

.btn_size-mid:not(.btn_type-square) .btn__content,
.btn_size-small:not(.btn_type-square) .btn__content {
    gap: 4px
}

.btn_size-big {
    border-radius: 12px
}

.btn_size-big .btn__icon:before {
    height: 18px;
    width: 18px
}

.btn_uppercase {
    text-transform: uppercase
}

.btn_word-wrap {
    white-space: break-spaces
}

.btn_fill {
    font-size: inherit;
    height: 100%
}

.btn_color-primary.btn[disabled],
.btn_color-primary.btn_disabled {
    background-color: #483f0c
}

.btn_color-primary.btn[disabled].btn_transparent,
.btn_color-primary.btn_disabled.btn_transparent {
    background: rgba(1, 8, 18, .7)
}

.btn_color-primary.btn_transparent:hover {
    background: rgba(1, 8, 18, .9)
}

.btn_color-success.btn[disabled],
.btn_color-success.btn_disabled {
    background-color: rgba(109, 174, 1, .5)
}

.btn_color-primary.btn_timer {
    color: #fff;
    margin-top: 31px
}

.btn_color-primary.btn_timer .btn__icon:before {
    background-color: #fff
}

.btn_color-secondary {
    backdrop-filter: blur(20px)
}

.btn_color-secondary.active {
    color: #fff
}

.btn_color-secondary.active .btn__icon:before {
    background-color: #fff
}

.btn_one-line .btn__label {
    display: block
}

@media (min-width:768px) {
    .btn_open-case {
        height: 56px;
        padding: 0 15px
    }
}

.btn_open-case .btn__content {
    gap: 10px
}

@media not screen and (min-width:768px) {
    .btn_open-case .btn__icon {
        display: none
    }
}

@media (min-width:768px) {
    .btn_open-case .btn__icon {
        align-items: center;
        background: rgba(1, 8, 18, .1);
        border-radius: 6px;
        display: flex;
        height: 26px;
        justify-content: center;
        width: 26px
    }
}

.btn_open-case .btn__icon:before {
    -webkit-mask-size: auto;
    mask-size: auto
}

@media not screen and (min-width:768px) {
    .btn_open-case .btn__label {
        display: block
    }
}

@media (min-width:768px) {
    .btn_open-case .btn__label {
        align-items: flex-start
    }

    .btn_open-case .btn__line {
        font-size: 11px;
        font-weight: 400;
        line-height: 17px
    }

    .btn_open-case .btn__line:nth-child(2) {
        font-size: 16px;
        font-weight: 700;
        line-height: 21px
    }
}

@media (min-width:1024px) {
    .btn_drop-preview {
        font-size: 16px;
        height: 56px;
        line-height: 24px;
        padding: 0 25px
    }

    .btn_drop-preview .btn__icon:before {
        height: 24px;
        width: 24px
    }
}

.btn_drop-preview-mini {
    padding: 0 30px
}

@media (min-width:1024px) {
    .btn_drop-preview-mini {
        height: 46px;
        padding: 0 30px
    }

    .btn_drop-preview-mini.btn_type-square {
        padding: 0;
        width: 46px
    }

    .btn_drop-preview-mini .btn__icon:before {
        height: 18px;
        width: 18px
    }
}

.btn.asc .btn__icon {
    transform: scaleY(-1)
}

.btn-group {
    background-color: #0c121b;
    display: flex
}

.btn-group_tabs {
    border-radius: 10px;
    gap: 1px;
    position: relative
}

.btn-group_tabs .btn-group__btn {
    border-radius: 0;
    flex: 1 1 0
}

.btn-group_tabs .btn-group__btn:first-child {
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px
}

.btn-group_tabs .btn-group__btn:last-child {
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px
}

@media not screen and (min-width:768px) {
    .btn-group_refill .btn__content {
        gap: 0
    }

    .btn-group_refill .btn__label {
        font-size: 0
    }
}

.tooltip {
    background-color: #192435;
    border-radius: 5px;
    bottom: 100%;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 10px;
    max-width: 300px;
    min-width: 296px;
    opacity: 0;
    padding: 12px 16px 20px;
    position: absolute;
    transition: .1s ease-in-out;
    visibility: hidden
}

.tooltip:after,
.tooltip:before {
    content: "";
    position: absolute
}

.tooltip:after {
    border-color: #192435 transparent transparent;
    border-style: solid;
    border-width: 8px 5px 0;
    top: 100%
}

.tooltip:before {
    height: 15px;
    left: 0;
    top: 100%;
    width: 100%
}

.tooltip_mini {
    min-width: 220px
}

.tooltip_extramin {
    min-width: unset;
    padding: 2px 8px 7px;
    white-space: nowrap
}

.tooltip_fluid {
    min-width: auto;
    padding: 10px;
    white-space: nowrap
}

.tooltip_center,
.tooltip_center:after {
    left: 50%;
    transform: translateX(-50%)
}

.tooltip_left {
    left: -5px
}

.tooltip_left:after {
    left: 8px
}

.tooltip_right {
    right: -5px
}

.tooltip_right:after {
    right: 8px
}

.tooltip_overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.tooltip-hook:hover .tooltip {
    opacity: 1;
    visibility: visible
}

.new-popup {
    align-items: center;
    background: rgba(0, 0, 0, .3);
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    padding: 10px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999
}

.new-popup.new-popup_prizes {
    visibility: hidden
}

.new-popup.active {
    opacity: 1;
    pointer-events: auto;
    visibility: visible
}

@media (min-width:768px) {
    .new-popup {
        padding: 30px
    }
}

.new-popup__box {
    background: #0c121b;
    border-radius: 6px;
    margin: auto;
    max-height: 100%;
    max-width: 660px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 30px 25px;
    position: relative;
    width: 100%
}

@media (min-width:768px) {
    .new-popup__box {
        border-radius: 20px;
        padding: 50px
    }

    .new-popup__box::-webkit-scrollbar-track {
        background-color: transparent
    }

    .new-popup__box::-webkit-scrollbar {
        height: 3px;
        width: 3px
    }

    .new-popup__box::-webkit-scrollbar-thumb {
        background-color: rgba(115, 140, 178, .2)
    }
}

@media (min-width:1024px) {
    .new-popup__box {
        padding: 60px 80px
    }
}

.new-popup__close {
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 2
}

@media (min-width:1024px) {
    .new-popup__close {
        right: 28px;
        top: 28px
    }
}

.new-popup_default .new-popup__box {
    max-width: 545px
}

.new-popup_no-padding .new-popup__box {
    padding: 0
}

.new-popup_replacement .new-popup__box {
    max-width: 780px
}

.new-popup_feedback .new-popup__box {
    max-width: 800px
}

.new-popup_notify .new-popup__box {
    background: #161534;
    border-radius: 20px;
    box-shadow: 0 17px 33px -8px #110d31b0;
    color: #ac9dbc;
    font-size: 14px;
    line-height: 21px;
    max-width: 330px;
    padding: 30px
}

@media (min-width:768px) and (min-height:768px) {
    .new-popup_with-select .new-popup__box {
        overflow: visible
    }
}

.new-popup_lng .new-popup__box {
    max-width: 410px
}

@media (min-width:1024px) {
    .new-popup_lng .new-popup__box {
        padding: 60px 70px
    }
}

.new-popup_lng .new-popup__close {
    transform: translate(10px, -10px)
}

@media (min-width:1024px) {
    .new-popup_prizes .new-popup__box {
        padding: 58px 50px 40px
    }
}

.new-popup_prizes .new-popup__close {
    right: 0;
    top: 0
}

@media (min-width:768px) {
    .new-popup_prizes .new-popup__close {
        right: 20px;
        top: 20px
    }
}

.new-popup_global .new-popup__box {
    max-width: 600px;
    padding: 20px 10px 10px
}

@media (min-width:768px) {
    .new-popup_global .new-popup__box {
        padding: 35px 30px 55px
    }
}

.new-popup_global .new-popup__close {
    right: 10px;
    top: 10px
}

@media (min-width:768px) {
    .new-popup_global .new-popup__close {
        right: 30px;
        top: 25px
    }
}

.new-popup_multibattles {
    animation: popupOverlayShow .2s ease-in-out 1ms forwards;
    opacity: 0
}

.new-popup_multibattles .new-popup__box {
    animation: popupShow .2s ease-in-out 1ms forwards;
    height: 100%;
    max-width: 990px;
    opacity: 0;
    padding: 0;
    transform: scale(.7)
}

@media (min-width:1800px) {
    .new-popup_multibattles .new-popup__box {
        overflow: hidden
    }
}

.new-popup_multibattles .new-popup__content {
    height: 100%
}

@media not screen and (min-width:768px) {
    .new-popup_multibattles .new-popup__close {
        top: 8px
    }
}

@media (min-width:1024px) {
    .new-popup_tradelink .new-popup__box {
        padding: 50px
    }
}

@keyframes popupShow {
    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes popupOverlayShow {
    to {
        opacity: 1
    }
}

.default-popup {
    align-items: center;
    display: flex;
    flex-direction: column;
    text-align: center
}

.default-popup__title {
    font-size: 22px;
    font-weight: 700;
    line-height: 26px;
    margin-bottom: 5px;
    text-transform: uppercase
}

.default-popup__text {
    font-size: 14px;
    line-height: 20px
}

.default-popup__timer {
    font-size: 18px;
    line-height: 20px
}

.default-popup__btns {
    align-items: center;
    display: flex;
    gap: 10px;
    margin: 28px 0 0
}

.default-popup__btn_equal {
    flex: 1 1 0
}

.default-popup__radio {
    margin: 21px 0
}

.default-popup__checkboxes {
    margin: 21px 0 0
}

.default-popup__content {
    margin-top: 38px
}

.default-popup__alert {
    margin-top: 34px
}

.default-popup__messages-title {
    font-weight: 700;
    margin-top: 15px
}

.default-popup__messages {
    margin-top: 15px
}

.default-popup__message {
    margin-bottom: 5px
}

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

.default-popup__skin-img {
    width: 120px
}

.default-popup__checkbox {
    margin: 0 0 17px
}

.default-popup__input {
    margin-top: 20px;
    width: 100%
}

.default-popup__input+.default-popup__input {
    margin-top: 20px
}

.default-popup__badge {
    background: #8984bb21;
    border-radius: 7px;
    color: #fca723;
    font-size: 14px;
    line-height: 20px;
    padding: 11px 35px 14px
}

.default-popup_fit-content .default-popup__btns,
.default-popup_fit-content .default-popup__content {
    width: 100%
}

@media (min-width:768px) {
    .default-popup_fit-content .default-popup__btn {
        flex: 1 1 0
    }
}

.default-popup_sweetalert {
    background: #1c1743;
    border-radius: 20px;
    box-shadow: 0 17px 33px rgba(17, 13, 49, .69);
    padding: 80px
}

.default-popup_without-icon:before {
    display: none
}

.default-popup_lng .default-popup__text {
    color: #ac9dbc;
    font-size: 14px
}

.default-popup_feedback:before {
    background-image: url(/assets/feedback-popup-icon.svg);
    height: 27px;
    width: 29px
}

@media (min-width:768px) {
    .default-popup_feedback .default-popup__btns {
        align-self: flex-start
    }
}

.default-popup_bonus:before {
    background: url(/assets/welcome-bonus.png) 50% no-repeat;
    background-size: contain;
    content: "";
    display: block;
    flex: none;
    height: 132px;
    position: relative;
    width: 170px
}

.default-popup_bonus .default-popup__title {
    margin-bottom: 10px
}

.default-popup_bonus .default-popup__btn {
    height: 53px
}

.default-popup_bonus .default-popup__btns {
    margin-top: 20px
}

.default-popup_bonus .default-popup__text {
    margin-bottom: 12px;
    max-width: 346px
}

.default-popup_global {
    align-items: flex-start;
    text-align: left
}

.rules-list {
    counter-reset: rules
}

@media (min-width:768px) {
    .rules-list {
        display: flex;
        gap: 30px;
        position: relative
    }

    .rules-list:before {
        border-top: 1px dashed #192435;
        content: "";
        display: block;
        height: 1px;
        left: 50%;
        position: absolute;
        top: 25px;
        transform: translate(-50%);
        width: 75%
    }
}

.rules-list__item {
    align-items: center;
    counter-increment: rules;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px
}

@media not screen and (min-width:768px) {
    .rules-list__item {
        margin-bottom: 30px;
        max-width: 260px
    }
}

@media (min-width:768px) {
    .rules-list__item {
        flex: 1 1 0
    }
}

.rules-list__item:before {
    align-items: center;
    background: rgba(115, 140, 178, .1);
    background: #192435;
    border: 1px solid #192435;
    border-radius: 50%;
    color: #ffba1f;
    content: "";
    content: counter(rules);
    display: flex;
    font-size: 22px;
    font-weight: 700;
    height: 50px;
    justify-content: center;
    line-height: 26px;
    margin: 0 0 14px;
    position: relative;
    width: 50px
}

@media (min-width:768px) {
    .rules-list__item:before {
        box-shadow: 0 0 0 18px #0c121b
    }
}

.roulette {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
    max-width: 100%;
    padding: 30px 15px;
    position: relative;
    transition: .7s ease-in-out;
    transition-delay: .3s;
    width: 100%;
    will-change: width;
    z-index: 1
}

.roulette:after,
.roulette:before {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    display: none;
    height: 320px;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: 1s ease-in-out;
    width: 320px;
    z-index: -1
}

@media (min-width:768px) {

    .roulette:after,
    .roulette:before {
        display: block
    }
}

.roulette:before {
    background-image: url(/assets/roulette/pre-frame-first-min.png);
    background-position: 0;
    left: -10px
}

.roulette:after {
    background-image: url(/assets/roulette/pre-frame-second-min.png);
    background-position: 100%;
    right: -10px
}

.roulette__pre-pre-frame {
    align-items: center;
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%
}

.roulette__pre-pre-frame:after,
.roulette__pre-pre-frame:before {
    background-image: url(/assets/roulette.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    display: block;
    height: 212px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 92px;
    z-index: 2
}

@media (min-width:768px) {

    .roulette__pre-pre-frame:after,
    .roulette__pre-pre-frame:before {
        background-image: url(/assets/roulette-tab.svg);
        height: 308px;
        width: 140px
    }
}

@media (min-width:1250px) {

    .roulette__pre-pre-frame:after,
    .roulette__pre-pre-frame:before {
        background-image: url(/assets/roulette-desktop.svg);
        height: 358px;
        width: 140px
    }
}

.roulette__pre-pre-frame:before {
    left: -19px
}

@media (min-width:768px) {
    .roulette__pre-pre-frame:before {
        left: -33px
    }
}

.roulette__pre-pre-frame:after {
    right: -19px;
    transform: translateY(-50%) rotateY(180deg)
}

@media (min-width:768px) {
    .roulette__pre-pre-frame:after {
        right: -33px
    }
}

.roulette__button {
    bottom: 10px;
    position: absolute;
    z-index: 3
}

.roulette__pre-frame {
    align-items: center;
    display: flex;
    justify-content: center;
    width: 100%
}

.roulette__pre-frame:after,
.roulette__pre-frame:before {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-style: solid;
    content: "";
    height: 0;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 0;
    z-index: 3
}

.roulette__pre-frame:before {
    border-color: #ff9101 transparent transparent;
    border-width: 20px 15px 0;
    top: -12px
}

.roulette__pre-frame:after {
    border-color: transparent transparent #ff9101;
    border-width: 0 15px 20px;
    bottom: -12px
}

.roulette__frame {
    align-items: center;
    background: #080c12;
    border: 7px solid #252b36;
    border-radius: 15px;
    display: flex;
    height: 164px;
    overflow: hidden;
    padding: 7px 2px;
    position: relative;
    width: 100%
}

@media (min-width:768px) {
    .roulette__frame {
        border-radius: 30px;
        height: 228px
    }
}

@media (min-width:1250px) {
    .roulette__frame {
        height: 280px
    }
}

.roulette__frame:after,
.roulette__frame:before {
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    width: 50px;
    z-index: 1
}

@media (min-width:768px) {

    .roulette__frame:after,
    .roulette__frame:before {
        width: 100px
    }
}

@media (min-width:1024px) {

    .roulette__frame:after,
    .roulette__frame:before {
        width: 150px
    }
}

.roulette__frame:before {
    background: linear-gradient(90deg, #080c12, rgba(8, 12, 18, 0));
    left: 0
}

.roulette__frame:after {
    background: linear-gradient(-90deg, #080c12, rgba(8, 12, 18, 0));
    right: 0
}

.roulette__items {
    align-items: center;
    animation: fadeIn 1s ease-out 0s 1;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    height: 100%;
    margin-left: 50%;
    will-change: transform
}

.roulette__skin {
    height: 100%;
    padding: 0 4px;
    transition: 1s ease-in-out;
    width: 120px
}

@media (min-width:768px) {
    .roulette__skin {
        width: 160px
    }
}

@media (min-width:1250px) {
    .roulette__skin {
        width: 200px
    }
}

.roulette__case {
    align-items: center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    height: 100%;
    justify-content: center;
    left: 50%;
    opacity: 0;
    padding: 23px 2px;
    position: absolute;
    top: 0;
    transform: translate(-50%);
    transition: .3s ease-in-out;
    will-change: transform
}

.roulette__case img {
    height: 80%;
    max-width: none
}

@media (min-width:768px) {
    .roulette__case img {
        height: 100%
    }
}

.roulette__awaiting:before {
    animation: spin 2s linear infinite;
    background-image: url(/assets/battles/waiting-user.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.roulette_awaiting {
    max-width: 300px
}

.roulette_awaiting:after,
.roulette_awaiting:before {
    opacity: 1
}

@media (min-width:768px) {
    .roulette_awaiting {
        max-width: 650px;
        padding: 30px 140px
    }
}

@media (min-width:1250px) {
    .roulette_awaiting {
        max-width: 750px;
        padding: 30px 140px
    }
}

.roulette_awaiting .roulette__items {
    opacity: 0;
    position: absolute;
    visibility: hidden
}

.roulette_awaiting .roulette__case {
    opacity: 1
}

.roulette_awaiting .roulette__frame {
    display: flex;
    justify-content: center
}

.roulette_awaiting .roulette__pre-frame:after,
.roulette_awaiting .roulette__pre-frame:before {
    display: none
}

.roulette_result .roulette__skin:not(.roulette_result .roulette__skin_highlight) {
    opacity: .3
}

.roulette_result .roulette__skin_highlight {
    height: 110%
}

.roulette_mini {
    padding: 10px 0;
    transition-delay: unset;
    transition: unset
}

.roulette_mini:after,
.roulette_mini:before {
    height: 130px
}

.roulette_mini-farmmode {
    margin-bottom: 30px;
    padding: 10px
}

.roulette_mini .roulette__frame {
    border-radius: 15px;
    height: 164px;
    padding: 7px 2px
}

.roulette_mini .roulette__pre-frame:before {
    border-width: 10px 6px 0;
    top: -4px
}

.roulette_mini .roulette__pre-frame:after {
    border-width: 0 6px 10px;
    bottom: -4px
}

.roulette_mini .roulette__pre-pre-frame:after,
.roulette_mini .roulette__pre-pre-frame:before {
    height: 212px;
    width: 92px
}

@media (min-width:768px) {

    .roulette_mini .roulette__pre-pre-frame:after,
    .roulette_mini .roulette__pre-pre-frame:before {
        background-image: url(/assets/roulette-tab.svg)
    }
}

@media (min-width:1250px) {

    .roulette_mini .roulette__pre-pre-frame:after,
    .roulette_mini .roulette__pre-pre-frame:before {
        background-image: url(/assets/roulette-tab.svg)
    }
}

.roulette_mini .roulette__pre-pre-frame:before {
    left: -19px
}

.roulette_mini .roulette__pre-pre-frame:after {
    right: -19px
}

.roulette_mini .roulette__skin {
    padding: 0 1px;
    width: 133px
}

.roulette_mini .roulette__button {
    bottom: -20px
}

@media (min-width:768px) {
    .roulette_mini .roulette__button {
        bottom: -12px
    }
}

.roulette_awaiting.roulette_mini {
    max-width: none
}

.roulette_awaiting.roulette_mini:after,
.roulette_awaiting.roulette_mini:before {
    display: none
}

.roulette_user-case .roulette__case img {
    height: auto
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.skin {
    border-radius: 12px;
    height: 100%;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 100%;
    z-index: 1
}

.skin:after,
.skin:before {
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 8px;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: .2s ease;
    width: 100%;
    z-index: -1
}

.skin__content {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    padding: 10px 10px 15px;
    width: 100%
}

@media (min-width:1250px) {
    .skin__content {
        padding: 30px 10px 23px
    }
}

.skin__img {
    transition: .2s ease-in-out;
    width: 90%
}

.skin__type {
    color: hsla(0, 0%, 85%, .4);
    max-width: 90%
}

.skin__name,
.skin__type {
    font-size: 11px;
    line-height: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.skin__name {
    font-weight: 600;
    max-width: 80%;
    padding-bottom: 5px
}

.skin_in-case .skin__content,
.skin_prize .skin__content {
    padding: 0 10px 7px
}

.skin_in-case .skin__content:after,
.skin_prize .skin__content:after {
    display: none
}

.skin_in-case .skin__content:before,
.skin_prize .skin__content:before {
    background-image: url(/assets/roulette/skin-bg-in-case.svg);
    height: 60%;
    width: 60%
}

.skin_in-case .skin__info,
.skin_prize .skin__info {
    align-self: flex-start;
    bottom: 7px;
    position: absolute;
    text-align: left;
    width: 100%
}

.skin_in-case .skin__img,
.skin_prize .skin__img {
    width: 85%
}

@media (min-width:768px) {
    .skin_in-case {
        height: 140px
    }
}

.skin_in-roulette .skin__content {
    justify-content: flex-end
}

.skin_in-roulette .skin__img {
    left: 50%;
    position: absolute;
    top: 45%
}

.skin_in-roulette .skin__img,
.skin_in-roulette:hover .skin__img {
    transform: translate(-50%, -50%)
}

.skin_prize {
    overflow: visible
}

.skin_prize .skin__content:after {
    display: block
}

.skin_prize .skin__info {
    align-items: center;
    bottom: -50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    left: 0
}

.skin_mini .skin__content {
    padding: 10px
}

@media (min-width:768px) {
    .skin_mini .skin__content {
        padding-bottom: 15px
    }
}

.skin_animated:after {
    animation: skinRotate 4s ease infinite;
    aspect-ratio: 1/1;
    background: url(/assets/case-event/test.svg) no-repeat 50%;
    background-size: cover;
    content: "";
    display: block;
    left: 50%;
    position: absolute;
    top: 40%;
    transform: translate(-50%, -50%);
    width: 70%
}

@media (min-width:768px) {
    .skin_animated:after {
        width: 80%
    }
}

@keyframes skinRotate {
    0% {
        transform: translate(-50%, -50%) rotate(0deg)
    }

    50% {
        transform: translate(-50%, -50%) rotate(180deg)
    }

    to {
        transform: translate(-50%, -50%) rotate(0deg)
    }
}

.skin.common {
    background: linear-gradient(180deg, rgba(53, 51, 69, .5), hsla(0, 0%, 66%, .5))
}

.skin.common:after {
    background-image: url(/assets/rarity/common.png)
}

.skin.common:before {
    background-image: url(/assets/rarity/roulette/common.svg)
}

.skin.common .skin__content:after {
    background-color: #353345;
    box-shadow: 1px 5px 30px 4px #353345
}

.skin_animated.common:after {
    background-image: url(/assets/case-event/common.svg)
}

.skin.uncommon {
    background: linear-gradient(180deg, rgba(0, 31, 73, .5), rgba(27, 206, 255, .5))
}

.skin.uncommon:after {
    background-image: url(/assets/rarity/uncommon.png)
}

.skin.uncommon:before {
    background-image: url(/assets/rarity/roulette/uncommon.svg)
}

.skin.uncommon .skin__content:after {
    background-color: #001f49;
    box-shadow: 1px 5px 30px 4px #001f49
}

.skin_animated.uncommon:after {
    background-image: url(/assets/case-event/uncommon.svg)
}

.skin.milspec {
    background: linear-gradient(180deg, rgba(0, 43, 106, .5), rgba(16, 104, 255, .5))
}

.skin.milspec:after {
    background-image: url(/assets/rarity/milspec.png)
}

.skin.milspec:before {
    background-image: url(/assets/rarity/roulette/milspec.svg)
}

.skin.milspec .skin__content:after {
    background-color: #002b6a;
    box-shadow: 1px 5px 30px 4px #002b6a
}

.skin_animated.milspec:after {
    background-image: url(/assets/case-event/milspec.svg)
}

.skin.restricted {
    background: linear-gradient(180deg, rgba(50, 35, 90, .5), rgba(140, 83, 255, .5))
}

.skin.restricted:after {
    background-image: url(/assets/rarity/restricted.png)
}

.skin.restricted:before {
    background-image: url(/assets/rarity/roulette/restricted.svg)
}

.skin.restricted .skin__content:after {
    background-color: #32235a;
    box-shadow: 1px 5px 30px 4px #32235a
}

.skin_animated.restricted:after {
    background-image: url(/assets/case-event/restricted.svg)
}

.skin.classified {
    background: linear-gradient(180deg, rgba(74, 30, 90, .5), rgba(247, 57, 255, .5))
}

.skin.classified:after {
    background-image: url(/assets/rarity/classified.png)
}

.skin.classified:before {
    background-image: url(/assets/rarity/roulette/classified.svg)
}

.skin.classified .skin__content:after {
    background-color: #4a1e5a;
    box-shadow: 1px 5px 30px 4px #4a1e5a
}

.skin_animated.classified:after {
    background-image: url(/assets/case-event/classified.svg)
}

.skin.covert {
    background: linear-gradient(180deg, rgba(119, 1, 41, .5), rgba(255, 61, 0, .5))
}

.skin.covert:after {
    background-image: url(/assets/rarity/covert.png)
}

.skin.covert:before {
    background-image: url(/assets/rarity/roulette/covert.svg)
}

.skin.covert .skin__content:after {
    background-color: #770129;
    box-shadow: 1px 5px 30px 4px #770129
}

.skin_animated.covert:after {
    background-image: url(/assets/case-event/covert.svg)
}

.skin.rare {
    background: linear-gradient(180deg, rgba(90, 74, 31, .5), rgba(255, 212, 26, .5))
}

.skin.rare:after {
    background-image: url(/assets/rarity/rare.png)
}

.skin.rare:before {
    background-image: url(/assets/rarity/roulette/rare.svg)
}

.skin.rare .skin__content:after {
    background-color: #5a4a1f;
    box-shadow: 1px 5px 30px 4px #5a4a1f
}

.skin_animated.rare:after {
    background-image: url(/assets/case-event/rare.svg)
}

.title {
    font-size: 16px;
    font-weight: 700;
    line-height: 20px
}

@media (min-width:768px) {
    .title {
        font-size: 20px;
        font-weight: 700;
        line-height: 140%;
        line-height: 28px
    }
}

@media (min-width:768px) and (min-width:768px) {
    .title {
        font-size: 24px;
        line-height: 31px
    }
}

.timer {
    display: flex;
    gap: 5px
}

@media (min-width:768px) {
    .timer {
        gap: 18px
    }
}

.timer__nums {
    align-items: center;
    backdrop-filter: blur(4px);
    background: #1e7f8780;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    font-size: 16px;
    font-weight: 600;
    height: 44px;
    justify-content: center;
    line-height: 24px;
    position: relative;
    text-align: center;
    width: 50px
}

.timer__nums:after {
    color: rgba(174, 191, 217, .8);
    content: ":";
    position: absolute;
    right: -11px;
    top: 50%;
    transform: translateY(-50%)
}

.timer__column:last-child .timer__nums:after {
    display: none
}

.timer__label {
    color: #fff;
    font-size: 11px;
    line-height: 16px;
    opacity: .4
}

@media (min-width:768px) {
    .timer_event {
        gap: 7px
    }
}

.timer_event .timer__nums {
    backdrop-filter: blur(11px)
}

.timer_event .timer__nums:after {
    display: none
}

@media (min-width:768px) {
    .timer_event .timer__nums {
        height: 47px;
        width: 56px
    }
}

@media (min-width:1024px) {
    .timer_event .timer__nums {
        height: 62px
    }
}

.timer_event .timer__num {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px
}

@media (min-width:768px) {
    .timer_event .timer__num {
        font-size: 16px;
        font-weight: 700;
        line-height: 20px
    }
}

@media (min-width:768px) and (min-width:768px) {
    .timer_event .timer__num {
        font-size: 20px;
        line-height: 140%
    }
}

@media (min-width:1024px) {
    .timer_event .timer__num {
        font-size: 28px;
        line-height: 40px
    }
}

.timer_raffle .timer__nums {
    backdrop-filter: none;
    background: transparent;
    height: 16px;
    width: 24px
}

.timer_raffle .timer__label {
    font-size: 0
}

.preloader {
    display: none;
    grid-column: -1/1;
    height: 150px;
    margin: 50px auto 30px;
    position: relative;
    width: 150px
}

@media (min-width:768px) {
    .preloader {
        height: 200px;
        width: 200px
    }
}

.preloader img {
    height: 70px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 70px
}

@media (min-width:768px) {
    .preloader img {
        height: 100px;
        width: 100px
    }
}

.preloader-whirlpool,
.preloader-whirlpool:after {
    border: 3px solid #7f8e94;
    border-left-color: #ffd000;
    border-radius: 2747px;
    -o-border-radius: 2747px;
    -ms-border-radius: 2747px;
    -webkit-border-radius: 2747px;
    -moz-border-radius: 2747px;
    left: 50%;
    position: absolute;
    top: 50%
}

.preloader-whirlpool {
    animation: preloader-rotate 1s linear infinite;
    -o-animation: preloader-rotate 1s linear infinite;
    -ms-animation: preloader-rotate 1s linear infinite;
    -webkit-animation: preloader-rotate 1s linear infinite;
    -moz-animation: preloader-rotate 1s linear infinite;
    height: 138px;
    margin: -69px 0 0 -69px;
    width: 138px
}

.preloader-whirlpool:after {
    animation: preloader-rotate 2s linear infinite;
    -o-animation: preloader-rotate 2s linear infinite;
    -ms-animation: preloader-rotate 2s linear infinite;
    -webkit-animation: preloader-rotate 2s linear infinite;
    -moz-animation: preloader-rotate 2s linear infinite;
    content: "";
    height: 154px;
    margin: -80px 0 0 -80px;
    width: 154px
}

@keyframes preloader-rotate {
    to {
        transform: rotate(1turn)
    }
}

@-o-keyframes preloader-rotate {
    to {
        -o-transform: rotate(1turn)
    }
}

@-ms-keyframes preloader-rotate {
    to {
        -ms-transform: rotate(1turn)
    }
}

@-webkit-keyframes preloader-rotate {
    to {
        -webkit-transform: rotate(1turn)
    }
}

@-moz-keyframes preloader-rotate {
    to {
        -moz-transform: rotate(1turn)
    }
}

.radio-item {
    display: block
}

.radio-item input {
    display: none
}

.radio-item input+span:hover:before {
    border: 4px solid rgba(177, 187, 202, .6)
}

.radio-item input:checked+span {
    color: #fff;
    cursor: default
}

.radio-item input:checked+span:before {
    background: #173950;
    border: 4px solid #efbd12
}

.radio-item input:disabled+span {
    color: #888384;
    cursor: default
}

.radio-item input:disabled+span:before {
    border: 1px solid rgba(177, 187, 202, .4)
}

.radio-item span {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 5px;
    justify-content: flex-start;
    position: relative;
    transition: .2s ease;
    white-space: normal
}

.radio-item span:before {
    border: 1px solid rgba(177, 187, 202, .4);
    border-radius: 100%;
    box-sizing: border-box;
    content: "";
    display: inline-block;
    height: 20px;
    margin-right: 5px;
    transition: .12s ease;
    width: 20px
}

.radio-group {
    align-items: center;
    display: flex;
    gap: 15px;
    justify-content: center
}

.header__bottom {
    min-height: 55px
}

@media (min-width:768px) {
    .header__bottom {
        min-height: 72px
    }
}

.header__lvl {
    display: flex;
    display: none;
    justify-content: center;
    margin: 30px 0 20px;
    pointer-events: none;
    width: 100%
}

@media (min-width:768px) {
    .header__lvl {
        margin: 0 0 30px
    }
}

@media (min-width:1024px) {
    .header__lvl {
        margin: 0 0 20px
    }
}

@media (min-width:1800px) {
    .header__lvl {
        margin: -10px 0 30px
    }
}

@media (min-width:1650px) {
    .header__lvl {
        position: absolute;
        right: 300px;
        top: 200px;
        width: unset
    }
}

.header-top {
    padding: 8px 10px;
    position: relative;
    z-index: 60
}

@media not screen and (min-width:1250px) {
    .header-top {
        background: #0c121b;
        border-radius: 20px;
        margin-top: 10px;
        max-width: 300px;
        opacity: 0;
        padding: 5px 15px 15px;
        position: absolute;
        right: 10px;
        top: 100%;
        visibility: hidden;
        width: 100%
    }
}

@media (min-width:1250px) {
    .header-top {
        align-items: center;
        border-bottom: 1px solid #6b698333;
        display: flex;
        gap: 4px;
        padding: 8px 20px
    }
}

@media not screen and (min-width:1250px) {
    .header-top__socials {
        margin: 0 4px
    }
}

@media (min-width:1250px) {
    .header-top__socials {
        margin-left: auto;
        order: 2
    }
}

@media not screen and (min-width:1250px) {
    .header-top__site-settings {
        margin: 10px 0
    }
}

@media (min-width:1250px) {
    .header-top__site-settings {
        order: 3
    }
}

@media not screen and (min-width:1250px) {
    .header-top.fixed {
        position: fixed;
        top: 56px
    }

    .header-top.active {
        opacity: 1;
        visibility: visible
    }
}

.header-bottom {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 15px 10px 0;
    position: relative
}

@media (min-width:768px) {
    .header-bottom {
        padding: 15px 25px 0
    }
}

@media not screen and (min-width:768px) {
    .header-bottom__userbar {
        max-width: calc(100% - 80px)
    }
}

.header-bottom__nav {
    align-items: center;
    display: flex
}

@media not screen and (min-width:1024px) {
    .header-bottom__nav {
        background-color: #0c121b;
        bottom: 0;
        height: 56px;
        left: 0;
        padding: 0 10px;
        position: fixed;
        width: 100%
    }
}

@media (min-width:768px) {
    .header-bottom__nav {
        height: 63px
    }
}

@media (min-width:1024px) {
    .header-bottom__nav {
        flex-basis: 100%;
        height: unset;
        padding: 0 20px
    }
}

@media (min-width:1250px) {
    .header-bottom__nav {
        padding: 0 30px
    }
}

@media not screen and (min-width:768px) {
    .header-bottom__refill {
        left: 0
    }
}

@media not screen and (min-width:1024px) {
    .header-bottom__nav-inner {
        height: 100%;
        width: 100%
    }
}

.header-bottom__logo {
    flex: none;
    height: 36px;
    width: 61px
}

@media (min-width:768px) {
    .header-bottom__logo {
        height: 60px;
        width: 102px
    }
}

.header-bottom_fixed {
    padding: 11px 15px
}

.header-bottom_fixed .header-bottom__logo {
    height: 45px;
    width: 71px
}

.header-logo {
    display: block;
    height: 100%;
    position: relative;
    transition: .2s ease;
    width: 100%
}

.header-logo:hover {
    opacity: .7
}

.header-logo:after,
.header-logo:before {
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: .4s ease-in-out;
    width: 100%
}

.header-logo:before {
    background-image: url(/assets/logo.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 1
}

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

.nav-site__link {
    color: rgba(174, 191, 217, .8);
    transition: .2s ease
}

@media not screen and (min-width:1250px) {
    .nav-site_top {
        display: flex;
        flex-direction: column
    }
}

@media (min-width:1250px) {
    .nav-site_top {
        gap: 20px
    }
}

@media not screen and (min-width:1250px) {
    .nav-site_top .nav-site__link {
        border-bottom: 1px solid rgba(115, 140, 178, .1)
    }
}

.nav-site_top .nav-site__link-inner {
    align-items: center;
    display: flex;
    font-size: 13px;
    gap: 5px;
    line-height: 20px;
    position: relative;
    transition: .2s ease-in-out;
    white-space: nowrap
}

@media not screen and (min-width:1250px) {
    .nav-site_top .nav-site__link-inner {
        padding: 10px 0
    }
}

.nav-site_top .nav-site__link-inner.active,
.nav-site_top .nav-site__link-inner:hover,
.nav-site_top .nav-site__link-inner_new {
    color: #f3b705
}

.nav-site_top .nav-site__link-inner_new:before {
    align-items: center;
    background-color: #f3b705;
    background-image: url(/assets/fire.svg);
    background-position: 7px 5px;
    background-repeat: no-repeat;
    border-radius: 100px;
    box-sizing: border-box;
    color: #0c121b;
    content: "NEW";
    display: flex;
    font-size: 11px;
    font-weight: 600;
    height: 23px;
    justify-content: flex-start;
    line-height: 13px;
    padding-left: 21px;
    position: relative;
    text-align: left;
    width: 57px
}

.nav-site_top .nav-site__link-inner_new:hover {
    filter: brightness(1.2)
}

.nav-site_bottom {
    align-items: center;
    flex-wrap: nowrap;
    height: 100%;
    justify-content: space-between;
    width: 100%
}

@media (min-width:375px) {
    .nav-site_bottom {
        justify-content: space-around
    }
}

@media (min-width:1024px) {
    .nav-site_bottom {
        grid-row-gap: 10px;
        grid-column-gap: 20px;
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: repeat(auto-fit, minmax(100px, auto));
        grid-template-rows: repeat(2, auto)
    }
}

@media (min-width:1250px) {
    .nav-site_bottom {
        display: flex;
        gap: 28px
    }
}

.nav-site_bottom .nav-site__link {
    align-items: center;
    display: flex;
    position: relative
}

@media not screen and (min-width:1024px) {
    .nav-site_bottom .nav-site__link {
        flex: 1 1 0;
        height: 100%;
        overflow: hidden
    }

    .nav-site_bottom .nav-site__link-text {
        max-width: 85%;
        overflow: hidden;
        text-overflow: ellipsis
    }
}

.nav-site_bottom .nav-site__link-text span {
    display: inline-block;
    flex: none;
    min-width: 15px
}

@media not screen and (min-width:1024px) {
    .nav-site_bottom .nav-site__link-text span {
        display: none
    }
}

.nav-site_bottom .nav-site__link-inner {
    align-items: center;
    display: flex;
    flex-direction: column;
    font-size: 6px;
    font-weight: 700;
    justify-content: center;
    line-height: 12px;
    text-transform: uppercase;
    transition: .2s ease-in-out;
    white-space: nowrap
}

@media not screen and (min-width:1024px) {
    .nav-site_bottom .nav-site__link-inner {
        height: 100%;
        width: 100%
    }
}

@media (min-width:768px) {
    .nav-site_bottom .nav-site__link-inner {
        font-size: 11px
    }
}

@media (min-width:1024px) {
    .nav-site_bottom .nav-site__link-inner {
        flex-direction: row;
        font-size: 13px;
        line-height: 12px
    }
}

@media (min-width:1250px) {
    .nav-site_bottom .nav-site__link-inner {
        border-radius: 8px;
        padding: 0
    }
}

.nav-site_bottom .nav-site__link-inner:before {
    background-color: #aebfd9cc;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    flex: none;
    height: 20px;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: .2s ease-in-out;
    width: 20px
}

@media (min-width:768px) {
    .nav-site_bottom .nav-site__link-inner:before {
        margin: 0 0 5px
    }
}

@media (min-width:1024px) {
    .nav-site_bottom .nav-site__link-inner:before {
        margin: 0 7px 0 0
    }
}

.nav-site_bottom .nav-site__link-inner:hover {
    color: #f3b705
}

.nav-site_bottom .nav-site__link-inner:hover:before {
    background-color: #f3b705
}

.nav-site_bottom .nav-site__link-inner.highlight {
    color: #feb91f
}

.nav-site_bottom .nav-site__link-inner.highlight:before {
    background-color: #f3b705
}

.nav-site_bottom .nav-site__link-inner.active {
    color: #f3b705
}

.nav-site_bottom .nav-site__link-inner.active:before {
    background-color: #f3b705
}

.nav-site_bottom .nav-site__link-inner span+span {
    margin-left: 5px
}

@keyframes opacityPulseFull {

    0%,
    to {
        opacity: 0
    }

    50% {
        opacity: 1
    }
}

.login-block,
.userbar-block {
    align-items: center;
    display: flex;
    gap: 6px;
    justify-content: flex-end
}

@media (min-width:768px) {

    .login-block,
    .userbar-block {
        gap: 11px
    }
}

.login-block__bars,
.userbar-block__bars {
    align-items: center;
    background: rgba(115, 140, 178, .1);
    border-radius: 8px;
    display: flex;
    flex: none;
    height: 36px;
    justify-content: center;
    width: 36px
}

@media (min-width:768px) {

    .login-block__bars,
    .userbar-block__bars {
        height: 46px;
        width: 46px
    }
}

@media (min-width:1250px) {

    .login-block__bars,
    .userbar-block__bars {
        display: none
    }
}

.login-block__btn,
.userbar-block__btn {
    height: 42px
}

.login-block_sticky .login-block__bars,
.login-block_sticky .userbar-block__bars,
.userbar-block_sticky .login-block__bars,
.userbar-block_sticky .userbar-block__bars {
    display: none
}

.user-stat {
    gap: 8px
}

.user-stat,
.user-stat__name-and-signout {
    align-items: center;
    display: flex
}

.user-stat__nums {
    align-items: baseline;
    display: flex;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px
}

@media (min-width:375px) {
    .user-stat__nums {
        font-size: 14px
    }
}

.user-stat__name {
    display: none
}

.user-stat__balance,
.user-stat__bonuses {
    align-items: center;
    display: flex;
    font-size: 12px;
    height: 36px;
    line-height: 16px;
    padding: 0 10px;
    white-space: nowrap
}

@media (min-width:375px) {

    .user-stat__balance,
    .user-stat__bonuses {
        font-size: 13px;
        line-height: 20px
    }
}

@media (min-width:768px) {

    .user-stat__balance,
    .user-stat__bonuses {
        height: 46px
    }
}

@media (min-width:1024px) {

    .user-stat__balance,
    .user-stat__bonuses {
        height: 42px
    }
}

.user-stat__balance {
    background-color: #f3b705;
    border-radius: 10px;
    color: #000;
    cursor: pointer;
    max-width: 145px;
    position: relative
}

.user-stat__balance:before {
    background: url(/assets/add-circle.svg) no-repeat 50%;
    content: "";
    display: block;
    flex: none;
    height: 18px;
    margin-right: 5px;
    position: relative;
    width: 18px
}

.user-stat__balance:hover {
    border-color: #f3b705;
    box-shadow: 0 0 15px 0 rgba(243, 183, 5, .5)
}

.user-stat__bonuses {
    background: hsla(0, 0%, 100%, .07);
    border-radius: 8px;
    transition: .12s ease-in-out
}

.user-stat__signout {
    border-radius: 100%;
    display: none;
    height: 36px;
    position: relative;
    transition: .1s ease-in-out;
    width: 24px;
    will-change: box-shadow;
    z-index: 2
}

.user-stat__signout:before {
    backface-visibility: hidden;
    background-image: url(/assets/icon_signout.svg?v=2);
    background-size: 100%;
    content: "";
    height: 10px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: transform .2s ease-in-out;
    width: 10px
}

@media (min-width:768px) {
    .user-stat__signout:before {
        height: 7px;
        width: 7px
    }
}

.user-stat__signout:hover:before {
    transform: translate(-50%, -50%) rotate(180deg) scale(1.2)
}

.user-picture {
    height: 36px;
    position: relative;
    transition: .2s ease-in-out;
    width: 36px
}

@media (min-width:768px) {
    .user-picture {
        height: 46px;
        width: 46px
    }
}

.user-picture__img {
    border: 1px solid transparent;
    border-radius: 10px;
    box-shadow: 0 0 10px 0 rgba(243, 183, 5, 0);
    height: 100%;
    overflow: hidden;
    transition: .2s ease;
    width: 100%;
    z-index: 2
}

.user-picture__img:hover {
    border-color: #ffd600;
    box-shadow: 0 0 10px 0 rgba(243, 183, 5, .5)
}

.user-picture__img img {
    backface-visibility: hidden;
    height: 100%;
    transition: .2s ease-in-out;
    width: 100%
}

.bars {
    position: relative;
    width: 18px
}

.bars,
.bars:after,
.bars:before {
    background: rgba(174, 191, 217, .8);
    border-radius: 2px;
    height: 2px
}

.bars:after,
.bars:before {
    content: "";
    display: block;
    position: absolute;
    transition: .2s ease
}

.bars:before {
    top: -5px;
    width: 18px
}

.bars:after {
    bottom: -5px;
    width: 12px
}

.bars.active {
    background: transparent
}

.bars.active:before {
    transform: translateY(5px) rotate(45deg)
}

.bars.active:after {
    transform: translateY(-5px) rotate(-45deg);
    width: 18px
}

.site-settings {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    justify-content: flex-start
}

@media (min-width:1250px) {
    .site-settings {
        flex-direction: row;
        gap: 4px
    }
}

.site-settings__item {
    align-items: center;
    background-color: rgba(115, 140, 178, .1);
    border-radius: 8px;
    color: #ac9dbc;
    cursor: pointer;
    display: flex;
    font-size: 14px;
    height: 36px;
    min-width: 36px;
    padding: 0 10px;
    position: relative;
    transition: .12s ease-in-out
}

@media (min-width:768px) {
    .site-settings__item:hover {
        background-color: rgba(115, 140, 178, .2)
    }
}

@media not screen and (min-width:1250px) {
    .site-settings__item {
        justify-content: center;
        width: 100%
    }
}

@media (min-width:1250px) {
    .site-settings__item_notifications.active {
        background-color: #222039;
        cursor: default
    }

    .site-settings__item_notifications.active .notifications {
        opacity: 1;
        transform: translateY(0);
        visibility: visible
    }
}

.site-settings__item:before {
    background-color: hsla(0, 0%, 85%, .8);
    height: 16px;
    width: 16px
}

.site-settings__item_fluid {
    padding: 0 8px;
    width: auto
}

@media not screen and (min-width:1250px) {
    .site-settings__item_fluid {
        width: 100%
    }
}

@media (min-width:1250px) {
    .site-settings__item_sound {
        order: 1
    }

    .site-settings__item_support {
        order: 2;
        padding: 0 12px
    }

    .site-settings__item_lng {
        order: 3
    }

    .site-settings__item_logout {
        order: 4
    }
}

.site-settings__item_lng {
    padding: 0
}

@media not screen and (min-width:1250px) {
    .site-settings__item-text {
        display: block;
        margin-left: 5px
    }
}

@media (min-width:1250px) {
    .site-settings__item-text {
        display: none
    }
}

.site-settings__notifications-count {
    background-color: #fd3f37;
    border-radius: 50%;
    height: 14px;
    left: 20px;
    padding-bottom: 1px;
    position: absolute;
    top: 4px;
    width: 14px
}

@media not screen and (min-width:1250px) {
    .site-settings__all-notifications-shadow {
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 1
    }
}

@media (min-width:1250px) {
    .site-settings__all-notifications-shadow {
        display: none
    }
}

.sound-btn {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 16px;
    height: 100%;
    position: relative;
    transition: .15s ease-in-out;
    width: 16px
}

.sound-btn__click-area {
    background-color: transparent;
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 1
}

.sound-btn__control {
    background-color: #0c121b;
    border: 1px solid hsla(0, 0%, 85%, .2);
    border-radius: 8px;
    margin-left: 7px;
    opacity: 0;
    padding: 5px 15px;
    position: absolute;
    right: -68px;
    top: 100%;
    transform: translateX(-50%);
    transition: .12s ease;
    visibility: hidden;
    width: 120px;
    z-index: 2
}

.sound-btn__control:after,
.sound-btn__control:before {
    content: "";
    position: absolute
}

.sound-btn__control:after {
    height: 100%;
    right: 100%;
    top: 0;
    width: 10px
}

.sound-btn__control:before {
    border-color: transparent transparent transparent #1a162b;
    border-style: solid;
    border-width: 0 5px 5px;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%)
}

.sound-btn__control .irs-line {
    background: #f3b705;
    height: 6px
}

.sound-btn__control .irs-slider {
    height: 14px;
    top: 29px;
    width: 14px
}

.sound-btn__control .irs {
    height: 55px;
    margin-top: -18px
}

.sound-btn:hover .sound-btn__control {
    opacity: 1;
    visibility: visible
}

.sound-btn_off {
    background-image: url(/assets/sound-off.svg?v=5)
}

.sound-btn_normal {
    background-image: url(/assets/sound-normal.svg?v=5)
}

.sound-btn_max {
    background-image: url(/assets/sound-max.svg?v=5)
}

.lng-switcher {
    line-height: 14px;
    width: 100%
}

.lng-switcher .icon-lng {
    margin-right: 7px;
    opacity: .9
}

.lng-switcher__current-lng {
    align-items: center;
    border-radius: 3px;
    color: #d9d9d9cc;
    cursor: pointer;
    display: flex;
    justify-content: center;
    position: relative;
    transition: .2s ease;
    width: 100%
}

@media (min-width:768px) {
    .lng-switcher__current-lng {
        padding: 7px 6px 6px
    }
}

@media (min-width:1250px) {
    .lng-switcher__current-lng {
        padding: 7px 15px
    }

    .lng-switcher__current-lng:after {
        border-color: rgba(244, 185, 3, .7) transparent transparent;
        border-style: solid;
        border-width: 3px 3px 0;
        content: "";
        margin-top: 2px;
        transition: .2s ease
    }
}

@media not screen and (min-width:1250px) {
    .lng-switcher__current-lng>.lng-switcher__lng-text {
        display: none
    }
}

@media (min-width:1250px) {
    .lng-switcher__current-lng>.lng-switcher__lng-text {
        font-size: 14px
    }
}

.lng-switcher__current-lng>.icon-lng {
    height: 13px;
    margin-right: 0;
    width: 20px
}

@media (min-width:1250px) {
    .lng-switcher__current-lng>.icon-lng {
        height: 13px;
        margin-right: 7px;
        width: 18px
    }
}

.lng-switcher__current-lng.active .lng-switcher__lng-text {
    color: #fbca02
}

.lng-switcher__current-lng.active>.icon-lng {
    opacity: 1
}

.lng-switcher__current-lng.active .lng-switcher__dropdown {
    opacity: 1;
    visibility: visible
}

@media (min-width:1250px) {
    .lng-switcher__current-lng.active:after {
        border-color: #f4b903 transparent transparent;
        transform: rotate(180deg)
    }
}

.lng-switcher__lng-text {
    font-size: 14px;
    padding-right: 8px;
    transition: .1s ease-in-out
}

.lng-switcher__dropdown {
    background: #0c121b;
    border-radius: 10px;
    box-shadow: 0 0 15px 0 hsla(0, 0%, 7%, .3);
    left: 50%;
    margin: -12px 0;
    opacity: 0;
    padding: 10px 15px;
    position: absolute;
    top: 50px;
    transform: translateX(-50%);
    visibility: hidden;
    width: 135px;
    z-index: 30
}

.lng-switcher__dropdown:after {
    backface-visibility: hidden;
    background-color: transparent;
    content: "";
    height: 20px;
    left: 0;
    position: absolute;
    top: -20px;
    width: 100%;
    z-index: 1
}

@media (min-width:1250px) {
    .lng-switcher__dropdown {
        left: 0;
        transform: none
    }
}

.lng-switcher__lng-item {
    align-items: center;
    color: hsla(0, 0%, 100%, .8);
    display: flex;
    padding: 8px 0;
    transition: .1s ease-in-out
}

.lng-switcher__lng-item:last-child {
    margin-bottom: 0
}

.lng-switcher__lng-item:hover {
    color: #fbca02
}

.lng-switcher__lng-item:hover .icon-lng {
    opacity: 1
}

.lng-switcher__lng-item.active {
    color: #fff
}

.lng-switcher__lng-item.active .icon-lng {
    opacity: 1
}

.socials-links {
    align-items: center;
    display: flex;
    gap: 4px
}

.socials-links__link {
    background-color: rgba(115, 140, 178, .1);
    border-radius: 10px;
    display: block;
    flex: none;
    height: 36px;
    position: relative;
    width: 36px
}

.socials-links__link:after {
    background-color: hsla(0, 0%, 85%, .8);
    content: "";
    height: 20px;
    left: 50%;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    mask-size: 100%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: .2s ease-in-out;
    width: 20px
}

.socials-links__link:hover:after {
    background-color: #fff
}

.socials-links__link_vk:after {
    -webkit-mask-image: url(/public/redesign/img/header/socials/vk.svg);
    mask-image: url(/assets/vk.svg)
}

.socials-links__link_twitter:after {
    -webkit-mask-image: url(/assets/x.svg);
    mask-image: url(/assets/x.svg)
}

.socials-links__link_facebook:after {
    -webkit-mask-image: url(/assets/facebook.svg);
    mask-image: url(/assets/facebook.svg)
}

.socials-links__link_steam:after {
    -webkit-mask-image: url(/assets/steam.svg);
    mask-image: url(/assets/steam.svg)
}

.socials-links__link_youtube:after {
    -webkit-mask-image: url(/assets/youtube.svg);
    mask-image: url(/assets/youtube.svg)
}

.socials-links__link_instagram:after {
    -webkit-mask-image: url(/assets/instagram.svg);
    mask-image: url(/assets/instagram.svg)
}

.socials-links__link_telegram:after {
    -webkit-mask-image: url(/assets/telegram.svg?v=1);
    mask-image: url(/assets/telegram.svg?v=1)
}

.socials-links__link_tiktok:after {
    -webkit-mask-image: url(/assets/tiktok.svg);
    mask-image: url(/assets/tiktok.svg)
}

.notifications {
    background: #0c121b;
    border-radius: 8px;
    box-shadow: 0 17px 61px -8px rgba(0, 0, 0, .4);
    margin-top: 5px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 100%;
    transition: .2s ease;
    visibility: hidden;
    width: 260px
}

@media not screen and (min-width:768px) {
    .notifications {
        display: none
    }
}

.notifications.active {
    opacity: 1;
    visibility: visible
}

.notifications__notification {
    border-bottom: 1px solid rgba(115, 140, 178, .1);
    display: block;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    padding: 12px 15px
}

.notifications__notification:hover {
    background: hsla(0, 0%, 100%, .01)
}

.notifications__notification_main .notifications__notification-date {
    align-items: center;
    color: #fbae21;
    display: flex
}

.notifications__notification_main .notifications__notification-date:before {
    background: url(/assets/important-yellow.svg?v=2) 50% no-repeat;
    content: "";
    display: block;
    height: 13px;
    margin-right: 5px;
    position: relative;
    width: 13px
}

.notifications__notification-date {
    color: hsla(0, 0%, 100%, .4);
    display: block;
    font-size: 12px;
    font-weight: 400;
    line-height: 14px
}

.notifications__scrollable-area {
    max-height: 300px;
    min-height: 250px;
    overflow-y: auto
}

.notifications__scrollable-area::-webkit-scrollbar-track {
    background-color: transparent
}

.notifications__scrollable-area::-webkit-scrollbar {
    height: 3px;
    width: 3px
}

.notifications__all-notifications {
    border-top: 1px solid rgba(115, 140, 178, .1);
    color: #f3b705;
    display: flex;
    font-size: 12px;
    font-weight: 700;
    justify-content: center;
    line-height: 14px;
    padding: 18px 0;
    text-align: center;
    text-transform: uppercase
}

.notifications__all-notifications:hover {
    background: hsla(0, 0%, 100%, .02)
}

.icon-lng {
    backface-visibility: hidden;
    background-repeat: no-repeat;
    background-size: 100%;
    display: flex;
    flex: none;
    height: 13px;
    transition: .1s ease-in-out;
    width: 18px
}

.icon-lng_ru {
    background-image: url(/assets/ru.svg?v=4)
}

.icon-lng_en {
    background-image: url(/assets/en.svg?v=4)
}

.icon-lng_de {
    background-image: url(/assets/de.svg?v=4)
}

.icon-lng_fr {
    background-image: url(/assets/fr.svg?v=4)
}

.icon-lng_es {
    background-image: url(/assets/es.svg?v=4)
}

.icon-lng_pt {
    background-image: url(/assets/pt.svg?v=4)
}

.icon-lng_pl {
    background-image: url(/assets/pl.svg?v=4)
}

.icon-lng_it {
    background-image: url(/assets/it.svg?v=4)
}

.support-link {
    align-items: center;
    color: #5ab19a;
    display: flex;
    font-size: 13px;
    font-weight: 600;
    gap: 5px;
    line-height: 20px;
    text-transform: lowercase
}

.support-link:before {
    background-color: #5ab19a;
    height: 16px;
    width: 16px
}

.support-link__text:first-letter {
    text-transform: capitalize
}

.fixed-header {
    background: #080c12;
    border-bottom: 1px solid rgba(115, 140, 178, .1);
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    transition: .2s ease;
    width: 100%;
    z-index: 1000
}

@media not screen and (min-width:1024px) {
    .fixed-header__main {
        display: none
    }
}

.fixed-header__secondary {
    border-top: 1px solid rgba(115, 140, 178, .1)
}

.fixed-header.active {
    opacity: 1;
    pointer-events: all
}

.quick-links {
    background: #080c12;
    border-bottom: 1px solid rgba(115, 140, 178, .1);
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    transition: .2s ease;
    width: 100%;
    z-index: 1000
}

@media not screen and (min-width:1024px) {
    .quick-links__main {
        display: none
    }
}

.quick-links__secondary {
    border-top: 1px solid rgba(115, 140, 178, .1)
}

.quick-links__links:after,
.quick-links__links:before {
    background: linear-gradient(270deg, #080c12 -2.11%, #080c12 14.08%, rgba(28, 23, 67, 0));
    bottom: 0;
    content: "";
    display: block;
    height: 47px;
    pointer-events: none;
    position: absolute;
    transition: opacity .2s ease;
    width: 72px
}

.quick-links__links:after {
    opacity: 1;
    right: 0
}

.quick-links__links:before {
    left: 0;
    opacity: 0;
    transform: scaleX(-1);
    z-index: 1
}

.quick-links__links-scrolled {
    max-width: 100%;
    overflow: auto;
    scroll-behavior: smooth
}

.quick-links__links-scrolled::-webkit-scrollbar {
    display: none
}

.quick-links__links-items {
    align-items: flex-end;
    display: flex;
    float: left;
    gap: 20px;
    min-width: 100%;
    padding: 0 15px;
    white-space: nowrap
}

.quick-links__link {
    color: rgba(174, 191, 217, .8);
    cursor: pointer;
    display: block;
    font-size: 13px;
    padding: 16px 0 18px;
    transition: color .2s ease, border-color .2s ease
}

.quick-links__link.active,
.quick-links__link:hover {
    color: #f3b705
}

.quick-links.active {
    opacity: 1;
    pointer-events: auto
}

.quick-links.started .quick-links__links:before {
    opacity: 1
}

.quick-links.finished .quick-links__links:after {
    opacity: 0
}

.drophistory {
    overflow: hidden;
    width: 100%
}

.drophistory__wrapper {
    display: flex;
    position: relative;
    width: 100%
}

.drophistory__inner {
    display: flex;
    left: -7px;
    position: relative
}

.drophistory__item {
    flex: none;
    height: 55px;
    margin-right: -5px;
    position: relative;
    width: 66px
}

@media (min-width:768px) {
    .drophistory__item {
        height: 92px;
        margin-right: -8px;
        width: 110px
    }
}

.drophistory__item img {
    transition: .2s ease
}

@media (min-width:768px) {
    .drophistory__item:hover .item-history img {
        transform: scale(.8)
    }

    .drophistory__item:hover .drophistory-tooltip {
        opacity: 1;
        top: 50%;
        transform: translate(-50%, -50%) scale(1);
        visibility: visible
    }
}

@media not screen and (min-width:768px) {
    .drophistory__farm {
        display: none
    }
}

@media (min-width:768px) {
    .drophistory__farm {
        height: 100%
    }
}

.drophistory__is-stopped {
    align-items: center;
    backdrop-filter: blur(5px);
    background: linear-gradient(90deg, rgba(13, 80, 107, .7), rgba(13, 80, 107, .7) 103.92%);
    border-radius: 10px;
    color: hsla(0, 0%, 85%, .8);
    display: flex;
    flex-direction: column;
    font-size: 9px;
    font-weight: 700;
    height: 100%;
    justify-content: center;
    left: 0;
    line-height: 16px;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 51px;
    z-index: 1
}

.drophistory__is-stopped:before {
    background-color: hsla(0, 0%, 85%, .8);
    height: 20px;
    width: 20px
}

.item-history {
    align-items: center;
    background: #0c121b;
    display: flex;
    height: 100%;
    justify-content: center;
    -webkit-mask-image: url(/assets/item-history.svg?v=2);
    mask-image: url(/assets/item-history.svg?v=2);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: relative;
    width: 100%
}

.item-history img {
    position: relative;
    width: 56px;
    z-index: 3
}

@media (min-width:768px) {
    .item-history img {
        width: 84px
    }
}

.item-history:after,
.item-history:before {
    content: "";
    position: absolute
}

.item-history:before {
    border-radius: 50%;
    filter: blur(14px);
    height: 25px;
    isolation: isolate;
    left: 50%;
    mix-blend-mode: hard-light;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 25px;
    z-index: 1
}

@media (min-width:768px) {
    .item-history:before {
        filter: blur(21px);
        height: 45px;
        width: 45px
    }
}

.item-history:after {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100%;
    height: 18px;
    right: 15px;
    top: 10%;
    width: 18px;
    z-index: 5
}

@media (min-width:768px) {
    .item-history:after {
        height: 20px;
        right: 20px;
        width: 20px
    }
}

.item-history_contract:after {
    background-image: url(/assets/icon_contracts.svg?v=3)
}

.item-history_upgrade:after {
    background-image: url(/assets/icon_upgrade.svg?v=3)
}

.item-history_wheel:after {
    background-image: url(/assets/icon_wheel.svg?v=3)
}

.item-history_common {
    background: linear-gradient(0deg, rgba(59, 47, 60, .4), #3b2f3c)
}

.item-history_common:before {
    background-color: #feffc9
}

.item-history_uncommon {
    background: linear-gradient(0deg, rgba(29, 67, 76, .4), #1d434c)
}

.item-history_uncommon:before {
    background-color: #00f0ff
}

.item-history_milspec {
    background: linear-gradient(0deg, rgba(29, 47, 76, .4), #1d2f4c)
}

.item-history_milspec:before {
    background-color: #009dff
}

.item-history_restricted {
    background: linear-gradient(0deg, rgba(52, 33, 80, .4), #342150)
}

.item-history_restricted:before {
    background-color: #db00ff
}

.item-history_classified {
    background: linear-gradient(0deg, rgba(71, 25, 78, .4), #47194e)
}

.item-history_classified:before {
    background-color: #ff21b3
}

.item-history_covert {
    background: linear-gradient(0deg, rgba(100, 12, 12, .4), #640c0c)
}

.item-history_covert:before {
    background-color: #f90
}

.item-history_rare {
    background: linear-gradient(0deg, rgba(83, 66, 19, .4), #534213)
}

.item-history_rare:before {
    background-color: #fbff00
}

.farm {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100%;
    background: #0c121b;
    display: flex;
    font-size: 11px;
    height: 92px;
    line-height: 13px;
    -webkit-mask-image: url(/assets/item-history-top.svg);
    mask-image: url(/assets/item-history-top.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    padding-left: 12px;
    position: relative;
    width: 211px
}

.farm:before {
    border-radius: 50%;
    content: "";
    filter: blur(21px);
    height: 45px;
    isolation: isolate;
    mix-blend-mode: hard-light;
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    width: 45px
}

.farm__info,
.farm__user-img,
.farm__won-item {
    pointer-events: none
}

.farm__info {
    position: relative;
    z-index: 5
}

.farm__title {
    align-items: center;
    display: flex;
    font-weight: 600;
    margin: 10px 0;
    min-height: 26px;
    width: 125px
}

.farm__names {
    width: 130px
}

.farm__first-name,
.farm__second-name {
    margin-bottom: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.farm__first-name {
    color: hsla(0, 0%, 85%, .4)
}

.farm__second-name {
    font-weight: 600
}

.farm__user-img {
    border-radius: 50%;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, .4);
    height: 32px;
    left: -42px;
    overflow: hidden;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px
}

.farm__user-img img {
    backface-visibility: hidden;
    transition: .3s ease-in-out;
    width: 100%
}

.farm__won-item {
    align-items: center;
    display: flex;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%)
}

.farm__won-item:before {
    animation: wonFarm 2s ease-in-out 1s infinite;
    background-repeat: no-repeat;
    background-size: 100%;
    content: "";
    height: 70px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 82px;
    will-change: transform;
    z-index: 1
}

.farm__won-item img {
    backface-visibility: hidden;
    position: relative;
    transition: .2s ease-in-out;
    width: 95px;
    z-index: 2
}

.farm .drophistory-tooltip {
    width: 211px
}

.farm .drophistory-tooltip__user {
    padding-left: 90px
}

.farm .drophistory-tooltip__case-img {
    justify-content: flex-start;
    padding-left: 95px
}

.farm_common {
    background: linear-gradient(0deg, rgba(59, 47, 60, .4), #3b2f3c)
}

.farm_common:before {
    background-color: #feffc9
}

.farm_uncommon {
    background: linear-gradient(0deg, rgba(29, 67, 76, .4), #1d434c)
}

.farm_uncommon:before {
    background-color: #00f0ff
}

.farm_milspec {
    background: linear-gradient(0deg, rgba(29, 47, 76, .4), #1d2f4c)
}

.farm_milspec:before {
    background-color: #009dff
}

.farm_restricted {
    background: linear-gradient(0deg, rgba(52, 33, 80, .4), #342150)
}

.farm_restricted:before {
    background-color: #db00ff
}

.farm_classified {
    background: linear-gradient(0deg, rgba(71, 25, 78, .4), #47194e)
}

.farm_classified:before {
    background-color: #ff21b3
}

.farm_covert {
    background: linear-gradient(0deg, rgba(100, 12, 12, .4), #640c0c)
}

.farm_covert:before {
    background-color: #f90
}

.farm_rare {
    background: linear-gradient(0deg, rgba(83, 66, 19, .4), #534213)
}

.farm:hover .farm__info {
    display: none
}

.farm:hover .farm__user-img img {
    transform: rotate(1turn)
}

.farm:hover .farm__won-item {
    display: none
}

.farm:hover .farm__won-item img {
    transform: translateY(-6px)
}

.farm:hover .farm__names {
    width: 200px
}

.farm:hover .drophistory-tooltip {
    opacity: 1;
    top: 50%;
    visibility: visible
}

@keyframes wonFarm {
    0% {
        opacity: .5;
        transform: translate(-50%, -50%) scale(1)
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.15)
    }

    to {
        opacity: .5;
        transform: translate(-50%, -50%) scale(1)
    }
}

.drophistory-tooltip {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    height: 80px;
    left: 50%;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transform-origin: top;
    transition: .3s ease;
    visibility: hidden;
    width: 100%;
    z-index: 15
}

@media not screen and (min-width:768px) {
    .drophistory-tooltip {
        display: none
    }
}

@media (min-width:768px) {
    .drophistory-tooltip {
        height: 92px
    }
}

.drophistory-tooltip:after {
    border-bottom: 10px solid rgba(0, 0, 0, .8);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    content: "";
    display: none;
    font-size: 0;
    height: 0;
    left: 50%;
    line-height: 0px;
    margin-left: -10px;
    position: absolute;
    top: -10px;
    width: 0
}

.drophistory-tooltip__bottom:after,
.drophistory-tooltip__bottom:before,
.drophistory-tooltip__top:after,
.drophistory-tooltip__top:before {
    bottom: 0;
    content: "";
    height: 100%;
    position: absolute;
    width: 1px
}

.drophistory-tooltip__bottom:before,
.drophistory-tooltip__top:before {
    left: 0
}

.drophistory-tooltip__bottom:after,
.drophistory-tooltip__top:after {
    right: 0
}

.drophistory-tooltip__bottom {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-end;
    padding: 0 0 9px;
    position: relative;
    width: 100%
}

.drophistory-tooltip__case-img {
    display: flex;
    height: 100%;
    justify-content: center;
    position: absolute;
    top: 10px;
    width: 100%;
    z-index: 1
}

.drophistory-tooltip__case-img img {
    height: 50px;
    width: auto
}

@media (min-width:768px) {
    .drophistory-tooltip__case-img img {
        height: 60px
    }
}

.drophistory-tooltip__user-name {
    color: #fff;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    margin-top: 3px;
    max-width: 75px;
    opacity: .4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.drophistory-tooltip__user {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: auto;
    padding: 0 10px 5px 15px;
    position: relative;
    z-index: 2
}

.drophistory-tooltip__user-img {
    border: 1px solid #06a4bc;
    border-radius: 100%;
    height: 40px;
    width: 40px
}

.drophistory-tooltip__drop-name {
    display: none
}

.footer {
    background: #000;
    margin-top: 80px;
    padding: 0 0 40px
}

@media (min-width:768px) {
    .footer {
        margin-top: 120px
    }
}

.footer__counters {
    margin-bottom: -40px;
    position: relative;
    top: -40px
}

@media (min-width:768px) {
    .footer__counters {
        margin-bottom: -45px;
        top: -45px
    }
}

.footer__payments {
    border-bottom: 1px solid #131b28;
    margin: 33px 0 40px;
    padding: 0 0 40px
}

@media (min-width:768px) {
    .footer__bottom {
        column-gap: 50px;
        display: grid;
        gap: 40px;
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (min-width:1250px) {
    .footer__bottom {
        display: flex;
        justify-content: space-between
    }
}

.footer__title {
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    margin-bottom: 21px;
    text-transform: uppercase
}

.footer__link,
.footer__text {
    color: rgba(174, 191, 217, .8);
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 10px
}

@media not screen and (min-width:768px) {

    .footer__info,
    .footer__links {
        margin-bottom: 30px
    }
}

@media (min-width:1250px) {
    .footer__info {
        max-width: 250px
    }
}

.footer__link {
    display: block;
    transition: .2s ease
}

.footer__link:hover {
    color: #f3b705
}

.footer__contacts {
    margin-bottom: 40px
}

.pay-systems {
    align-items: center;
    display: flex;
    justify-content: center;
    width: 100%
}

@media not screen and (min-width:768px) {
    .pay-systems {
        flex-wrap: wrap;
        gap: 40px;
        padding: 0 15px
    }
}

@media (min-width:768px) {
    .pay-systems {
        justify-content: space-between
    }
}

.pay-systems__system {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100%
}

.pay-systems__system_visa {
    background-image: url(/assets/visa.svg?v=8);
    height: 22px;
    width: 67px
}

.pay-systems__system_mastercard {
    background-image: url(/assets/mastercard.svg?v=8);
    height: 26px;
    width: 142px
}

.pay-systems__system_webmoney {
    background-image: url(/assets/webmoney.svg?v=8);
    height: 30px;
    width: 125px
}

.pay-systems__system_qiwi {
    background-image: url(/assets/qiwi.svg?v=8);
    height: 30px;
    width: 83px
}

.pay-systems__system_skinpay {
    background-image: url(/assets/skinpay.svg?v=8);
    height: 24px;
    width: 136px
}

.pay-systems__system_mir {
    background-image: url(/assets/mir.svg?v=9);
    height: 28px;
    width: 103px
}

.pay-systems__system_crypto {
    background-image: url(/assets/crypto.svg?v=8);
    height: 28px;
    width: 72px
}

.site-counters {
    background: #000;
    border-radius: 15px;
    column-gap: 5px;
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    padding: 5px
}

@media (min-width:768px) {
    .site-counters {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr)
    }
}

@media (min-width:1250px) {
    .site-counters {
        gap: 5px;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        grid-template-rows: 1fr
    }
}

.site-counters_in-user {
    background: transparent;
    gap: 22px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr)
}

.site-counter {
    align-items: center;
    background: #0c121b;
    border-radius: 10px;
    display: flex;
    font-size: 13px;
    height: 51px;
    line-height: 20px;
    padding: 0 10px;
    position: relative;
    width: 100%
}

@media (min-width:768px) {
    .site-counter {
        height: 78px;
        line-height: 20px;
        padding: 0 23px
    }
}

.site-counter:after {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    display: block;
    height: 36px;
    position: absolute;
    right: 8px;
    top: 8px;
    width: 36px
}

@media (min-width:768px) {
    .site-counter:after {
        height: 62px;
        width: 62px
    }
}

.site-counter__head {
    color: rgba(174, 191, 217, .8)
}

.site-counter__count {
    align-items: center;
    display: flex;
    font-weight: 700;
    gap: 4px
}

.site-counter__count span {
    color: #5ab19a
}

.site-counter__count span+span {
    color: #ff4e18
}

.site-counter__icon {
    height: 16px;
    width: 16px
}

.site-counter__icon:before {
    background-color: rgba(174, 191, 217, .8);
    height: 16px;
    width: 16px
}

.site-counter_cases:after {
    background-image: url(/assets/cases.png)
}

.site-counter_contracts:after {
    background-image: url(/assets/contracts.png)
}

.site-counter_cards:after {
    background-image: url(/assets/cards.png)
}

.site-counter_upgrade:after {
    background-image: url(/assets/upgrade.png)
}

.site-counter_battles:after {
    background-image: url(/assets/battles.png)
}

.site-counter_multibattles:after {
    background-image: url(/assets/multibattles.png)
}

.site-counter_users:after {
    background-image: url(/assets/users.png)
}

.site-counter_online:after {
    background-image: url(/assets/online.png)
}

.site-counter_in-user {
    height: 40px;
    padding: 0 0 0 50px
}

.site-counter_in-user:after {
    height: 40px;
    left: 0;
    top: 0;
    width: 40px
}

.site-counter_in-battles {
    background: rgba(18, 26, 37, .5);
    padding-right: 80px
}

.site-counter_in-battles .site-counter__head {
    white-space: nowrap
}

.site-counter_in-tops {
    background: rgba(18, 26, 37, .5);
    padding-right: 10px
}

@media (min-width:768px) {
    .site-counter_in-tops {
        height: 51px;
        line-height: 20px;
        padding: 0 10px
    }

    .site-counter_in-tops:after {
        height: 36px;
        width: 36px
    }
}

.layout-home__counters {
    margin-bottom: 30px
}

@media not screen and (min-width:1250px) {
    .layout-home__counters {
        display: none
    }
}

.main-title {
    font-size: 20px;
    font-weight: 800;
    line-height: 28px;
    margin: 30px 0 10px;
    text-align: center;
    text-transform: uppercase
}

@media (min-width:768px) {
    .main-title {
        font-size: 32px;
        line-height: 40px;
        margin: 50px 0 30px
    }
}

@media (min-width:1250px) {
    .main-title {
        margin: 50px 0 20px
    }
}

.main-title__inner {
    background-clip: text;
    background-image: linear-gradient(#fff, #0c121b 150%);
    background-position: 50%;
    color: transparent
}

.main-title_no-top-margin {
    margin: 10px 0
}

@media (min-width:768px) {
    .main-title_no-top-margin {
        margin: 10px 0 30px
    }
}

@media (min-width:1250px) {
    .main-title_no-top-margin {
        margin: 10px 0 20px
    }
}

@media (min-width:768px) {
    .main-title_min {
        font-size: 24px
    }
}

.cases {
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}

.cases__case {
    flex: none;
    padding: 15px 5px;
    width: 50%
}

@media (min-width:768px) {
    .cases__case {
        padding: 10px;
        width: 25%
    }
}

@media (min-width:1250px) {
    .cases__case {
        padding: 15px;
        width: 20%
    }
}

.case {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    text-align: center
}

.case__name {
    color: rgba(174, 191, 217, .8);
    font-size: 13px;
    line-height: 20px;
    margin: 7px 0;
    transition: .2s ease
}

@media (min-width:1024px) {
    .case__name {
        font-size: 16px;
        line-height: 24px;
        margin: 13px 0
    }
}

.case__price {
    align-items: center;
    background-color: #18212e;
    border: 3px solid #000;
    border-radius: 10px;
    color: #ffd600;
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    gap: 5px;
    height: 39px;
    justify-content: center;
    line-height: 24px;
    margin-top: auto;
    padding: 0 12px;
    text-transform: uppercase;
    transition: .2s ease
}

@media (min-width:1024px) {
    .case__price {
        border-radius: 15px;
        border-width: 5px;
        font-size: 16px;
        height: 60px;
        padding: 0 20px
    }
}

.case__old-price {
    color: #6a696b;
    font-size: 12px;
    font-weight: 400;
    text-decoration: line-through
}

@media (min-width:1024px) {
    .case__old-price {
        font-size: 16px
    }
}

.case__img {
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
    transition: .2s ease
}

.case__img img {
    flex: none
}

.case__info {
    position: relative
}

.case__limit {
    backdrop-filter: blur(15px);
    background: rgba(1, 8, 18, .5);
    border: 2px solid rgba(124, 135, 154, .26);
    border-radius: 30px;
    bottom: 100%;
    color: rgba(174, 191, 217, .9);
    display: flex;
    font-size: 13px;
    gap: 5px;
    left: 50%;
    line-height: 20px;
    padding: 10px 16px;
    position: absolute;
    transform: translate(-50%)
}

.case_caseoff {
    filter: grayscale(1);
    opacity: .3;
    pointer-events: none
}

.case:hover .case__img {
    transform: scale(1.1)
}

.case:hover .case__name {
    color: #fff
}

.case:hover .case__price {
    background-color: #1e2a3b
}

.topbar {
    position: relative
}

@media (min-width:768px) {
    .topbar {
        margin: 0 auto 30px
    }
}

.topbar__nav {
    display: none;
    margin-right: 23px
}

@media (min-width:1024px) {
    .topbar__nav {
        display: block
    }
}

.topbar__filters {
    background: #0c121b;
    border-radius: 8px;
    height: 66px;
    margin-top: 20px;
    position: relative;
    z-index: 2
}

@media not screen and (min-width:1024px) {
    .topbar__filters {
        overflow: hidden
    }
}

@media (min-width:1024px) {
    .topbar__filters {
        padding: 0 10px
    }
}

.topbar__filters-inner {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: space-between;
    transition: transform .3s ease-in-out
}

@media not screen and (min-width:1024px) {
    .topbar__filters-inner {
        transform: translate(-100%)
    }

    .topbar__filters-inner.active {
        transform: translate(0)
    }
}

.topbar__complex {
    align-items: center;
    display: flex;
    gap: 5px
}

@media not screen and (min-width:1024px) {
    .topbar__complex {
        flex: none;
        padding: 0 10px;
        width: 100%
    }
}

@media (min-width:1024px) {
    .topbar__complex {
        flex-grow: 1;
        justify-content: space-between;
        margin-left: auto
    }
}

.topbar__search {
    display: flex;
    gap: 10px;
    width: 100%
}

@media not screen and (min-width:1024px) {
    .topbar__search {
        flex: none;
        padding: 0 10px
    }
}

@media (min-width:1024px) {
    .topbar__search {
        padding: 0;
        width: auto
    }

    .topbar__search-close,
    .topbar__search-control {
        display: none
    }
}

.topbar__search-close-icon:before {
    height: 11px;
    width: 11px
}

.topbar__price {
    flex-grow: 1;
    margin: 0 10px
}

@media not screen and (min-width:768px) {
    .topbar__price {
        display: none
    }
}

.topbar__btns {
    display: flex;
    gap: 10px
}

@media not screen and (min-width:1024px) {
    .topbar__btns {
        display: none
    }
}

@media not screen and (min-width:1250px) {
    .topbar__btn-fav {
        padding: 0;
        width: 46px
    }
}

.topbar__btn-fav.active .topbar__btn-fav-icon:before {
    background-color: #fc4743;
    -webkit-mask-image: url(/assets/icon_fav-fill.svg);
    mask-image: url(/assets/icon_fav-fill.svg)
}

@media not screen and (min-width:1250px) {
    .topbar__btn-fav-label {
        display: none
    }
}

.topbar__btn-clear-icon:before {
    background-color: #fd3f37 !important
}

.topbar__welcome {
    margin: 30px 0
}

.cases-search {
    background: #080c12;
    border: 1px solid #121a25;
    border-radius: 8px;
    display: flex;
    height: 46px;
    position: relative;
    width: 100%
}

.cases-search:after {
    background-color: rgba(115, 140, 178, .6);
    content: "";
    display: block;
    height: 18px;
    left: 14px;
    -webkit-mask-image: url(/assets/search.svg?v=2);
    mask-image: url(/assets/search.svg?v=2);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    opacity: .6;
    position: absolute;
    top: 14px;
    width: 18px
}

.cases-search__selector {
    display: flex
}

.cases-search__selector-item-radio {
    display: none
}

.cases-search__selector-item-label {
    align-items: center;
    border-right: 1px solid #28215a;
    cursor: pointer;
    display: flex;
    height: 100%;
    justify-content: center;
    position: relative;
    user-select: none;
    width: 36px
}

.cases-search__selector-item-label:before {
    background: #ac9dbc
}

.cases-search__selector-item-label:hover:before {
    background: #fff
}

.cases-search__selector-item-radio:checked+.cases-search__selector-item-label {
    background: #28215a
}

.cases-search__selector-item-radio:checked+.cases-search__selector-item-label:before {
    background: #fff
}

.cases-search__field {
    width: 100%
}

.cases-search__field input {
    background: transparent;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    height: 100%;
    line-height: 21px;
    overflow: hidden;
    padding: 0 40px;
    width: 100%
}

.cases-search__field input::placeholder {
    color: rgba(115, 140, 178, .6)
}

.cases-search__field input:focus,
.cases-search__field input:hover {
    background-color: #0c121b
}

.filters,
.price-filters {
    border-radius: 10px;
    display: inline-flex;
    overflow: hidden
}

.filters__filter,
.price-filters__filter {
    align-items: center;
    background: rgba(115, 140, 178, .1);
    cursor: pointer;
    display: flex;
    flex: 1 1 0;
    font-size: 13px;
    font-weight: 600;
    height: 46px;
    justify-content: center;
    line-height: 20px;
    margin-left: 1px;
    min-width: 88px;
    position: relative;
    transition: .2s ease;
    white-space: nowrap;
    z-index: 1
}

.filters__filter span,
.price-filters__filter span {
    color: hsla(0, 0%, 100%, .4);
    transition: .2s ease
}

.filters__filter:before,
.price-filters__filter:before {
    background: rgba(115, 140, 178, .1);
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: .2s ease;
    visibility: hidden;
    width: 100%;
    z-index: -1
}

.filters__filter:first-child,
.price-filters__filter:first-child {
    border-radius: 3px 0 0 3px;
    margin-left: 0
}

.filters__filter:last-child,
.price-filters__filter:last-child {
    border-radius: 0 3px 3px 0
}

.filters__filter:not(.active):hover:before,
.price-filters__filter:not(.active):hover:before {
    opacity: .5;
    visibility: visible
}

.filters__filter.active span,
.price-filters__filter.active span {
    color: #fff
}

.filters__filter.active:before,
.price-filters__filter.active:before {
    opacity: 1;
    visibility: visible
}

.filters_in-topbar,
.price-filters_in-topbar {
    display: flex;
    gap: 5px
}

.filters_in-topbar .filters__filter,
.filters_in-topbar .price-filters__filter,
.price-filters_in-topbar .filters__filter,
.price-filters_in-topbar .price-filters__filter {
    background-color: transparent;
    height: 46px;
    padding: 7px 10px
}

.filters_in-topbar .filters__filter span,
.filters_in-topbar .price-filters__filter span,
.price-filters_in-topbar .filters__filter span,
.price-filters_in-topbar .price-filters__filter span {
    color: #ac9dbc
}

.filters_in-topbar .filters__filter:before,
.filters_in-topbar .price-filters__filter:before,
.price-filters_in-topbar .filters__filter:before,
.price-filters_in-topbar .price-filters__filter:before {
    background: hsla(0, 0%, 100%, .07);
    border-radius: 6px
}

.filters_in-topbar .filters__filter:hover span,
.filters_in-topbar .price-filters__filter:hover span,
.price-filters_in-topbar .filters__filter:hover span,
.price-filters_in-topbar .price-filters__filter:hover span {
    color: #fff
}

.filters_in-topbar .filters__filter:hover:before,
.filters_in-topbar .price-filters__filter:hover:before,
.price-filters_in-topbar .filters__filter:hover:before,
.price-filters_in-topbar .price-filters__filter:hover:before {
    opacity: .5
}

.filters_in-topbar .filters__filter.active:before,
.filters_in-topbar .price-filters__filter.active:before,
.price-filters_in-topbar .filters__filter.active:before,
.price-filters_in-topbar .price-filters__filter.active:before {
    opacity: 1
}

.filters_in-topbar .filters__filter.active span,
.filters_in-topbar .price-filters__filter.active span,
.price-filters_in-topbar .filters__filter.active span,
.price-filters_in-topbar .price-filters__filter.active span {
    color: #fff
}

.filters_in-topbar .filters__filter_available,
.filters_in-topbar .filters__filter_fav,
.filters_in-topbar .price-filters__filter_available,
.filters_in-topbar .price-filters__filter_fav,
.price-filters_in-topbar .filters__filter_available,
.price-filters_in-topbar .filters__filter_fav,
.price-filters_in-topbar .price-filters__filter_available,
.price-filters_in-topbar .price-filters__filter_fav {
    background: rgba(115, 140, 178, .1);
    border-radius: 6px;
    gap: 5px;
    justify-content: flex-start;
    margin-left: auto;
    width: auto
}

.filters_in-topbar .filters__filter_available:before,
.filters_in-topbar .filters__filter_fav:before,
.filters_in-topbar .price-filters__filter_available:before,
.filters_in-topbar .price-filters__filter_fav:before,
.price-filters_in-topbar .filters__filter_available:before,
.price-filters_in-topbar .filters__filter_fav:before,
.price-filters_in-topbar .price-filters__filter_available:before,
.price-filters_in-topbar .price-filters__filter_fav:before {
    background: #080c12;
    border: 1px solid #121a25;
    border-radius: 22px;
    display: block;
    height: 24px;
    opacity: 1;
    position: relative;
    visibility: visible;
    width: 38px;
    z-index: 1
}

.filters_in-topbar .filters__filter_available:after,
.filters_in-topbar .filters__filter_fav:after,
.filters_in-topbar .price-filters__filter_available:after,
.filters_in-topbar .price-filters__filter_fav:after,
.price-filters_in-topbar .filters__filter_available:after,
.price-filters_in-topbar .filters__filter_fav:after,
.price-filters_in-topbar .price-filters__filter_available:after,
.price-filters_in-topbar .price-filters__filter_fav:after {
    background-color: rgba(115, 140, 178, .6);
    border-radius: 50%;
    content: "";
    display: block;
    height: 16px;
    position: absolute;
    top: 50%;
    transform: translate(4px, -50%);
    transition: transform .2s ease;
    width: 16px;
    z-index: 2
}

.filters_in-topbar .filters__filter_available:hover,
.filters_in-topbar .filters__filter_fav:hover,
.filters_in-topbar .price-filters__filter_available:hover,
.filters_in-topbar .price-filters__filter_fav:hover,
.price-filters_in-topbar .filters__filter_available:hover,
.price-filters_in-topbar .filters__filter_fav:hover,
.price-filters_in-topbar .price-filters__filter_available:hover,
.price-filters_in-topbar .price-filters__filter_fav:hover {
    background: rgba(115, 140, 178, .2)
}

.filters_in-topbar .filters__filter_available:hover:before,
.filters_in-topbar .filters__filter_fav:hover:before,
.filters_in-topbar .price-filters__filter_available:hover:before,
.filters_in-topbar .price-filters__filter_fav:hover:before,
.price-filters_in-topbar .filters__filter_available:hover:before,
.price-filters_in-topbar .filters__filter_fav:hover:before,
.price-filters_in-topbar .price-filters__filter_available:hover:before,
.price-filters_in-topbar .price-filters__filter_fav:hover:before {
    opacity: 1
}

.filters_in-topbar .filters__filter_available.active:after,
.filters_in-topbar .filters__filter_fav.active:after,
.filters_in-topbar .price-filters__filter_available.active:after,
.filters_in-topbar .price-filters__filter_fav.active:after,
.price-filters_in-topbar .filters__filter_available.active:after,
.price-filters_in-topbar .filters__filter_fav.active:after,
.price-filters_in-topbar .price-filters__filter_available.active:after,
.price-filters_in-topbar .price-filters__filter_fav.active:after {
    background-color: #f3b705;
    transform: translate(17px, -50%)
}

.filters_in-topbar .filters__filter_available span,
.filters_in-topbar .filters__filter_fav span,
.filters_in-topbar .price-filters__filter_available span,
.filters_in-topbar .price-filters__filter_fav span,
.price-filters_in-topbar .filters__filter_available span,
.price-filters_in-topbar .filters__filter_fav span,
.price-filters_in-topbar .price-filters__filter_available span,
.price-filters_in-topbar .price-filters__filter_fav span {
    color: hsla(0, 0%, 100%, .8)
}

.filters_fullwidth,
.price-filters_fullwidth {
    width: 100%
}

.filters_fluid .filters__filter,
.filters_fluid .price-filters__filter,
.price-filters_fluid .filters__filter,
.price-filters_fluid .price-filters__filter {
    padding: 20px
}

@media (min-width:1024px) {

    .filters_fluid .filters__filter,
    .filters_fluid .price-filters__filter,
    .price-filters_fluid .filters__filter,
    .price-filters_fluid .price-filters__filter {
        flex: none
    }
}

.global-intro {
    background-color: #000;
    border-radius: 10px;
    padding: 5px
}

.global-intro__grid {
    display: flex;
    flex-direction: column;
    gap: 5px
}

@media (min-width:1250px) {
    .global-intro__grid {
        flex-direction: row
    }
}

.global-intro__main {
    aspect-ratio: 345/152
}

@media (min-width:768px) {
    .global-intro__main {
        aspect-ratio: 698/300
    }
}

@media (min-width:1250px) {
    .global-intro__main {
        aspect-ratio: 1117/453;
        flex-grow: 1;
        min-width: 0
    }
}

.global-intro__secondary {
    display: flex;
    flex-direction: column;
    gap: 5px
}

@media (min-width:768px) {
    .global-intro__secondary {
        flex-direction: row;
        flex-wrap: wrap
    }
}

@media (min-width:1250px) {
    .global-intro__secondary {
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        width: 420px
    }
}

.global-intro__secondary-item {
    height: 62px;
    min-width: 0
}

@media (min-width:768px) {
    .global-intro__secondary-item {
        flex: 1 1 0;
        height: 150px;
        min-width: 49%
    }
}

@media (min-width:1250px) {
    .global-intro__secondary-item {
        min-width: 0
    }
}

.global-intro_only-secondary .global-intro__main {
    display: none
}

@media (min-width:1250px) {
    .global-intro_only-secondary .global-intro__secondary {
        flex-direction: row;
        width: 100%
    }

    .global-intro_only-secondary .global-intro__secondary-item {
        min-width: 0
    }
}

.global-carousel {
    height: 100%;
    position: relative;
    width: 100%
}

.global-carousel__wrapper {
    border-radius: 10px;
    height: 100%;
    overflow: hidden;
    width: 100%
}

.global-carousel__items {
    backface-visibility: hidden;
    display: flex;
    height: 100%;
    transform: translateZ(0);
    width: 100%;
    will-change: transform
}

.global-carousel__item {
    flex: none;
    height: 100%;
    width: 100%
}

.global-carousel__controls {
    bottom: 40px;
    display: flex;
    gap: 10px;
    position: absolute;
    right: 40px;
    will-change: transform
}

@media not screen and (min-width:768px) {
    .global-carousel__controls {
        display: none
    }
}

.global-carousel__control {
    align-items: center;
    backdrop-filter: blur(30px);
    background: hsla(0, 0%, 100%, .07);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    height: 42px;
    justify-content: center;
    overflow: hidden;
    transition: transform .3s ease;
    width: 42px
}

.global-carousel__control:hover {
    transform: scale(1.2)
}

.global-carousel__control_prev:before {
    transform: scaleX(-1)
}

.global-carousel__dots {
    display: flex;
    gap: 30px;
    position: absolute;
    right: 40px;
    top: 40px
}

@media not screen and (min-width:768px) {
    .global-carousel__dots {
        display: none
    }
}

.global-carousel__dot {
    background-color: hsla(0, 0%, 100%, .6);
    border-radius: 50%;
    height: 10px;
    width: 10px
}

.global-carousel__dot.active {
    background-color: #fff
}

.carousel-item {
    background-color: #1c1743;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
    z-index: 1
}

.carousel-item,
.carousel-item:after {
    background-position: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%
}

.carousel-item:after {
    content: "";
    display: block;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    z-index: -1
}

.carousel-item>div:last-child {
    margin-top: auto
}

.carousel-item__title {
    font-weight: 700;
    text-transform: uppercase
}

.carousel-item__text,
.carousel-item__timer-label {
    color: hsla(0, 0%, 100%, .8);
    flex: none;
    font-size: 14px;
    line-height: 16px
}

.carousel-item__timer-label {
    margin-bottom: 10px
}

@media (min-width:768px) {
    .carousel-item__btn-and-timer {
        align-items: center;
        display: flex;
        gap: 10px
    }
}

@media (min-width:1024px) {
    .carousel-item__btn-and-timer {
        gap: 20px
    }
}

.carousel-item__img {
    width: 30%
}

.carousel-item_event .carousel-item__btn {
    height: 100%
}

.carousel-item_big {
    gap: 13px;
    padding: 12px 15px 15px
}

.carousel-item_big .carousel-item__title {
    font-size: 18px;
    line-height: 26px;
    width: 60%
}

.carousel-item_big .carousel-item__text,
.carousel-item_big .carousel-item__timer-label {
    max-width: 330px;
    width: 50%
}

.carousel-item_big .carousel-item__btn,
.carousel-item_big .carousel-item__text {
    display: none
}

@media (min-width:768px) {
    .carousel-item_big.carousel-item_responsive {
        padding: 20px
    }
}

@media (min-width:1024px) {
    .carousel-item_big.carousel-item_responsive {
        padding: 35px 50px 45px
    }
}

@media (min-width:768px) {
    .carousel-item_big.carousel-item_responsive .carousel-item__title {
        font-size: 32px;
        line-height: 42px;
        max-width: 458px
    }

    .carousel-item_big.carousel-item_responsive .carousel-item__text,
    .carousel-item_big.carousel-item_responsive .carousel-item__timer-label {
        display: block;
        font-size: 16px;
        line-height: 19px
    }

    .carousel-item_big.carousel-item_responsive .carousel-item__btn {
        display: block
    }
}

.carousel-item_mini {
    background-size: auto 100%;
    justify-content: center;
    padding: 12px 15px
}

@media (min-width:768px) {
    .carousel-item_mini {
        gap: 7px;
        padding: 16px 20px 20px
    }
}

.carousel-item_mini:after {
    background-size: auto 100%
}

.carousel-item_mini .carousel-item__text,
.carousel-item_mini .carousel-item__timer-label,
.carousel-item_mini .carousel-item__title {
    flex: none;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.carousel-item_mini .carousel-item__title {
    color: hsla(0, 0%, 85%, .8);
    font-size: 11px;
    font-weight: 400;
    line-height: 16px;
    text-transform: none
}

@media (min-width:768px) {
    .carousel-item_mini .carousel-item__title {
        font-size: 13px;
        line-height: 20px
    }
}

.carousel-item_mini .carousel-item__text {
    color: #ffd600;
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    text-transform: uppercase
}

@media (min-width:768px) {
    .carousel-item_mini .carousel-item__text {
        font-size: 16px;
        font-weight: 600;
        line-height: 24px
    }
}

@media not screen and (min-width:768px) {
    .carousel-item_mini .carousel-item__btn {
        display: none
    }
}

.carousel-item_code {
    background-color: #000
}

.carousel-item_code:after {
    background-image: url(/assets/code.png)
}

@media not screen and (min-width:768px) {
    .carousel-item_code .carousel-item__btn {
        position: absolute;
        right: 15px
    }

    .carousel-item_code .carousel-item__btn-mix {
        font-size: 0;
        padding: 0 5px 0 12px
    }
}

@media (min-width:768px) {
    .carousel-item_code .carousel-item__btn-icon-mix:before {
        display: none
    }
}

.carousel-item_dailybonus {
    background-color: #0e1621
}

.carousel-item_dailybonus:after {
    background-image: url(/assets/dailybonus.png);
    background-size: auto 100%
}

.carousel-item_dailybonus .carousel-item__timer {
    position: absolute;
    right: 15px
}

@media (min-width:768px) {
    .carousel-item_dailybonus .carousel-item__timer {
        bottom: 22px;
        right: 46px
    }

    .carousel-item_dailybonus .carousel-item__text span {
        display: none
    }
}

.carousel-item_dailybonus.carousel-item_available .carousel-item__timer {
    display: none
}

.carousel-item_dailybonus.carousel-item_available .carousel-item__btn {
    pointer-events: auto
}

.carousel-item_dailydraw {
    background: linear-gradient(180deg, #0e1621 -73.49%, #b72606 179.22%)
}

.carousel-item_dailydraw:after {
    background-image: url(/assets/dailydraw.png)
}

.carousel-item_tg {
    background: #0e1621 linear-gradient(180deg, #0e1621, #055252)
}

.carousel-item_tg:after {
    background-image: url(/assets/tg.png);
    background-size: auto 100%
}

@media (min-width:768px) {
    .carousel-item_event-page {
        border-radius: 20px
    }
}

.carousel-item_event-winter .carousel-item__img {
    margin-left: -4%;
    margin-top: -6%;
    width: 46%
}

.user-page__user {
    display: flex;
    flex-direction: column;
    gap: 30px
}

@media (min-width:1024px) {
    .user-page__user {
        flex-direction: row;
        gap: 10px
    }

    .user-page__card,
    .user-page__stats {
        flex: 1 1 0
    }
}

@media not screen and (min-width:768px) {
    .user-page__stats {
        display: none
    }
}

.user-page__warning {
    margin-top: 30px
}

.user-card {
    background: #0c121b;
    border-radius: 20px;
    padding: 10px;
    position: relative
}

@media (min-width:768px) {
    .user-card {
        display: flex;
        gap: 20px;
        padding: 25px 20px
    }
}

.user-card__content {
    display: flex;
    flex-direction: column;
    gap: 10px
}

@media (min-width:768px) {
    .user-card__content {
        flex-grow: 1;
        gap: 6px
    }
}

.user-card__img {
    border-radius: 15px;
    overflow: hidden
}

@media not screen and (min-width:768px) {
    .user-card__img {
        height: 49px;
        position: absolute;
        width: 49px
    }
}

@media (min-width:768px) {
    .user-card__img {
        height: 140px;
        width: 140px
    }
}

.user-card__info-btns {
    display: flex;
    flex-direction: column;
    gap: 10px
}

@media (min-width:768px) {
    .user-card__info-btns {
        flex-direction: row;
        justify-content: space-between
    }
}

@media not screen and (min-width:768px) {
    .user-card__info {
        display: flex;
        flex-direction: column;
        height: 49px;
        justify-content: center;
        padding-left: 60px
    }
}

.user-card__btns {
    display: flex;
    gap: 8px
}

.user-card__balance {
    font-size: 24px;
    font-weight: 800;
    line-height: 28px
}

.user-card__name {
    color: rgba(174, 191, 217, .8);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    text-transform: uppercase
}

.user-card__id {
    color: rgba(115, 140, 178, .6);
    font-size: 11px;
    line-height: 16px
}

.tradelink-plugin {
    align-items: center;
    background: rgba(115, 140, 178, .1);
    border-radius: 10px;
    color: #fc4743;
    cursor: pointer;
    display: flex;
    font-size: 14px;
    line-height: 20px;
    padding: 8px 14px;
    transition: .2s ease
}

.tradelink-plugin:hover {
    background: rgba(115, 140, 178, .2)
}

.tradelink-plugin:after {
    background: url(/assets/tradelink-plugin/state-bad.svg) no-repeat 50%;
    content: "";
    display: block;
    flex: none;
    height: 22px;
    position: relative;
    width: 22px
}

.tradelink-plugin__content {
    flex-grow: 1
}

.tradelink-plugin__label {
    color: #fff;
    font-weight: 700
}

.tradelink-plugin__value {
    font-size: 12px
}

.tradelink-plugin_set {
    color: #6dae01
}

.tradelink-plugin_set:after {
    background-image: url(/assets/tradelink-plugin/state-good.svg)
}

.user-stats {
    background: #0c121b;
    border-radius: 20px;
    display: flex;
    gap: 20px;
    padding: 17px 20px
}

@media (min-width:1024px) {
    .user-stats {
        height: 100%;
        padding: 25px 20px
    }

    .user-stats__col {
        display: none
    }
}

.user-stats__col_counters {
    flex-grow: 1
}

@media (min-width:1024px) {
    .user-stats__col_counters {
        display: block
    }
}

@media (min-width:1250px) {
    .user-stats__col_drop {
        display: block
    }
}

@media (min-width:1800px) {
    .user-stats__col_case {
        display: block
    }
}

.user-stats__col-label {
    color: rgba(174, 191, 217, .8);
    font-size: 11px;
    line-height: 16px;
    margin-bottom: 7px
}

.user-stats__col-content {
    height: 119px;
    min-width: 144px
}

@media (min-width:1024px) {
    .user-stats__col-content {
        min-width: 160px
    }
}

.user-stats__case-link {
    display: block;
    height: 100%;
    width: 100%
}

.user-stats__case-link img {
    height: 100%
}

.items-topbar {
    background: #0c121b;
    border-radius: 14px;
    padding: 10px
}

.items-topbar__content {
    display: flex;
    flex-direction: column;
    gap: 10px
}

@media (min-width:1024px) {
    .items-topbar__content {
        flex-direction: row;
        justify-content: space-between
    }
}

.items-topbar__sections {
    display: flex;
    gap: 10px
}

@media not screen and (min-width:1024px) {
    .items-topbar__sections {
        justify-content: space-between
    }

    .items-topbar__sections_price,
    .items-topbar__sections_switch-btn {
        flex-direction: column
    }
}

.items-topbar__section {
    align-items: center;
    display: flex
}

@media not screen and (min-width:1024px) {
    .items-topbar__section_price {
        width: 100%
    }
}

.items-topbar__section_search {
    flex-grow: 1
}

@media not screen and (min-width:1024px) {

    .items-topbar__section_btn,
    .items-topbar__section_switch {
        flex: none
    }
}

.items-topbar__section_switch {
    min-width: 150px
}

.items-topbar__btn {
    background: #6dae01;
    border-radius: 6px;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    height: 42px;
    line-height: 14px;
    padding: 14px 20px 13px;
    text-align: center;
    text-transform: uppercase
}

.items-block__topbar {
    margin-bottom: 10px
}

@media (min-width:768px) {
    .items-block__topbar {
        margin-bottom: 30px
    }
}

.items-block__loadmore {
    display: flex;
    justify-content: center;
    margin: 30px 0 0
}

.new-tabs {
    align-items: center;
    display: flex;
    gap: 0;
    justify-content: space-around
}

@media (min-width:1250px) {
    .new-tabs {
        gap: 6px;
        justify-content: center
    }
}

.new-tabs__tab {
    align-items: center;
    border-radius: 10px;
    color: hsla(0, 0%, 85%, .8);
    cursor: pointer;
    display: flex;
    font-size: 0;
    font-weight: 600;
    height: 46px;
    line-height: 0;
    line-height: 20px;
    padding: 0 15px;
    position: relative;
    text-transform: capitalize;
    white-space: nowrap
}

@media not screen and (min-width:375px) {
    .new-tabs__tab {
        height: 37px;
        padding: 0 10px
    }
}

@media (min-width:1250px) {
    .new-tabs__tab {
        font-size: 13px;
        gap: 5px;
        transition: .2s ease
    }
}

.new-tabs__tab:before {
    background-color: hsla(0, 0%, 85%, .8);
    height: 18px;
    transition: .2s ease;
    width: 18px
}

@media (min-width:1250px) {
    .new-tabs__tab:before {
        margin-right: 5px
    }
}

.new-tabs__tab.active,
.new-tabs__tab:hover {
    background: rgba(115, 140, 178, .1);
    color: #fff
}

.new-tabs__tab.active:before,
.new-tabs__tab:hover:before {
    background-color: #fff
}

.new-tabs__tab:hover:not(.active) {
    background: rgba(115, 140, 178, .05)
}

.new-tabs__tab span {
    color: #5ab19a;
    pointer-events: none
}

@media (min-width:768px) {
    .new-tabs__tab_new:after {
        leading-trim: both;
        text-edge: cap;
        font-feature-settings: "clig" off, "liga" off;
        align-items: center;
        background: #fc4743;
        border-radius: 3px 3px 3px 0;
        color: #fff;
        content: "New";
        display: inline-flex;
        font-size: 12px;
        font-weight: 400;
        height: 16px;
        margin-left: 12px;
        padding: 0 4px;
        position: relative
    }
}

.user-page-items__content {
    margin-top: 25px
}

.user-page-items__tabs {
    margin-top: 30px
}

@media not screen and (min-width:768px) {
    .user-page-items__tabs {
        overflow-x: auto
    }
}

.item-from-upgrade {
    background: #0c121b;
    border-radius: 20px;
    padding: 10px
}

.item-from-upgrade__skins {
    display: flex;
    margin: 0 -2.5px;
    position: relative
}

.item-from-upgrade__skins:after {
    background: #0c121b url(/assets/upgrade.svg) 50% no-repeat;
    border-radius: 50%;
    content: "";
    display: block;
    height: 32px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    z-index: 1
}

.item-from-upgrade__skin {
    flex: none;
    height: 128px;
    padding: 0 2.5px;
    width: 50%
}

.item-from-upgrade__info {
    display: flex;
    font-size: 16px;
    justify-content: space-between;
    line-height: 19px;
    padding: 12px 0 0
}

.item-from-upgrade__chance {
    align-items: center;
    display: flex
}

.item-from-upgrade__chance-value {
    color: #7ed321;
    font-weight: 700;
    margin-left: 5px
}

.item-from-upgrade__result {
    align-items: center;
    display: flex
}

.item-from-upgrade__result:after {
    background-position: 50%;
    background-repeat: no-repeat;
    content: "";
    display: block;
    height: 15px;
    margin-left: 6px;
    margin-top: 2px;
    position: relative;
    width: 15px
}

.item-from-upgrade__result_good {
    color: #7ed321
}

.item-from-upgrade__result_good:after {
    background-image: url(/assets/item-from-upgrade-good.svg)
}

.item-from-upgrade__result_bad {
    color: #fc4743
}

.item-from-upgrade__result_bad:after {
    background-image: url(/assets/item-from-upgrade-bad.svg)
}

.item-from-contract {
    background: #0c121b;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px
}

.item-from-contract__drop {
    height: 140px
}

.item-from-contract__slots {
    margin: 15px 0
}

.item-from-contract__slot {
    background: linear-gradient(180deg, hsla(0, 0%, 66%, .2), rgba(53, 51, 69, .2));
    border-radius: 4px;
    height: 40px;
    position: relative
}

.item-from-contract__slot:before {
    background: url(/assets/skin-bg.svg) 50% no-repeat;
    background-size: contain;
    content: "";
    display: block;
    height: 23px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 29px
}

.item-from-contract__slot-tooltip {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%);
    z-index: 2
}

.item-from-contract__slot-item {
    position: relative
}

.item-from-contract__info {
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    margin-top: auto
}

.item-from-contract__info-label {
    color: hsla(0, 0%, 85%, .8);
    flex: 1 1 0;
    font-size: 11px;
    line-height: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.item-from-contract__info-value {
    flex: none;
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    margin-top: 5px
}

.item {
    border-radius: 12px;
    padding: 10px;
    position: relative;
    z-index: 1
}

.item,
.item:before {
    display: block;
    height: 100%
}

.item:before {
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100%;
    content: "";
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.item__content {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between
}

.item__icons,
.item__img {
    position: absolute
}

.item__img {
    height: 100%;
    left: 0;
    pointer-events: none;
    top: 0;
    width: 100%
}

.item__img img {
    display: block;
    height: 75%;
    margin: 5% auto 0
}

.item__icons {
    display: flex;
    right: 10px;
    top: 10px
}

.item__icon {
    margin-left: 5px;
    position: relative
}

.item__icon:hover {
    opacity: 1
}

.item__icon:hover .tooltip {
    opacity: 1;
    visibility: visible
}

.item__price {
    align-items: center;
    background: rgba(1, 8, 18, .4);
    border-radius: 6px;
    border-radius: 100px;
    color: #fff;
    display: flex;
    font-size: 11px;
    font-weight: 600;
    gap: 5px;
    height: 23px;
    line-height: 13px;
    padding: 3px 8px;
    position: relative;
    z-index: 1
}

.item__price:before {
    background-color: #fff;
    height: 12px;
    width: 12px
}

.item__price:hover .tooltip {
    opacity: 1;
    visibility: visible
}

.item__price_hide {
    opacity: 0;
    visibility: hidden
}

.item__price.icon_contract:before,
.item__price.icon_upgrade:before {
    margin-top: -1px
}

.item__price.icon_withdrawn:before {
    background-color: #6dae01
}

.item__price.icon_completed:before {
    background-color: #fff
}

.item__type-and-name {
    font-size: 11px;
    line-height: 13px;
    max-width: 100%;
    position: relative;
    z-index: 1
}

.item__name,
.item__type {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.item__type {
    color: hsla(0, 0%, 85%, .4);
    line-height: 16px;
    margin-bottom: 3px
}

.item__name {
    color: #fff;
    font-weight: 600
}

.item__btns {
    left: 10px;
    position: absolute;
    top: 10px;
    z-index: 1
}

.item__btn {
    margin: 0 0 7px
}

.item__btn--status {
    margin-top: 31px
}

.item__btn-label {
    display: block;
    max-width: 100px;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis
}

.item__source {
    bottom: 4px;
    height: 70px;
    opacity: 0;
    position: absolute;
    right: 4px;
    transform: translateY(10px);
    transition: .2s ease;
    visibility: hidden;
    width: 70px;
    z-index: 2
}

.item__source img {
    height: 100%;
    object-fit: contain;
    width: 100%
}

.item:hover .item__source {
    opacity: 1;
    transform: translate(0);
    visibility: visible
}

.item_mini {
    height: 100px
}

.item_mini:before {
    background-size: contain;
    height: 58px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 73px
}

.item_no-price .item__price {
    visibility: hidden
}

.item_extra-small {
    border-radius: 4px;
    height: 40px
}

.item_extra-small:before {
    content: unset
}

.item_in-casecreate {
    height: 120px
}

.item.item-in-inventory {
    filter: grayscale(1);
    opacity: .6
}

.item_replace {
    height: 108px
}

.item_replace:before {
    transform: translateY(-10px) scale(.8)
}

.item_height {
    height: 108px
}

@media (min-width:1800px) {
    .item_in-prizes {
        height: 180px
    }
}

.item_notop .item__content {
    justify-content: flex-end
}

.item.common {
    background: linear-gradient(180deg, rgba(53, 51, 69, .5), hsla(0, 0%, 66%, .5))
}

.item.common:before {
    background-image: url(/assets/rarity/common.png)
}

.item.uncommon {
    background: linear-gradient(180deg, rgba(0, 31, 73, .5), rgba(27, 206, 255, .5))
}

.item.uncommon:before {
    background-image: url(/assets/rarity/uncommon.png)
}

.item.milspec {
    background: linear-gradient(180deg, rgba(0, 43, 106, .5), rgba(16, 104, 255, .5))
}

.item.milspec:before {
    background-image: url(/assets/rarity/milspec.png)
}

.item.restricted {
    background: linear-gradient(180deg, rgba(50, 35, 90, .5), rgba(140, 83, 255, .5))
}

.item.restricted:before {
    background-image: url(/assets/rarity/restricted.png)
}

.item.classified {
    background: linear-gradient(180deg, rgba(74, 30, 90, .5), rgba(247, 57, 255, .5))
}

.item.classified:before {
    background-image: url(/assets/rarity/classified.png)
}

.item.covert {
    background: linear-gradient(180deg, rgba(119, 1, 41, .5), rgba(255, 61, 0, .5))
}

.item.covert:before {
    background-image: url(/assets/rarity/covert.png)
}

.item.rare {
    background: linear-gradient(180deg, rgba(90, 74, 31, .5), rgba(255, 212, 26, .5))
}

.item.rare:before {
    background-image: url(/assets/rarity/rare.png)
}

.item_in-profile .item__type-and-name {
    transition: .2s ease
}

.item_in-profile:hover .item__type-and-name {
    opacity: .5
}

.item_in-case {
    height: 140px;
    transition: .2s ease
}

@media (min-width:375px) {
    .item_in-case {
        height: 140px
    }
}

.item_in-case:hover {
    filter: brightness(1.2)
}

.item_in-case .item__content:before {
    content: "";
    display: block;
    position: relative
}

.item_in-case .item__img {
    transition: .2s ease
}

.item_in-case:hover .item__img {
    transform: scale(1.05)
}

.item_upgrade-good .item__price {
    background-color: #84a900
}

.item_upgrade-bad .item__price {
    background-color: #ff4e18
}

.grid__items {
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(137px, 1fr))
}

@media (min-width:375px) {
    .grid__items {
        grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
        grid-template-columns: repeat(auto-fill, minmax(156px, 1fr))
    }
}

.grid__item.disabled {
    opacity: .5;
    pointer-events: none
}

.grid_upgrade .grid__item {
    cursor: pointer
}

.grid_upgrade .grid__item.disabled {
    cursor: auto
}

.grid_drops .grid__items {
    grid-auto-rows: 140px
}

.grid_contracts .grid__items {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(225px, 1fr))
}

.grid_contract-item-slots .grid__items {
    grid-column-gap: 3px;
    grid-row-gap: 3px;
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr))
}

.grid_battles .grid__items {
    grid-column-gap: 15px;
    grid-row-gap: 15px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))
}

.grid_upgrades .grid__items {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr))
}

.grid_wheeldrops .grid__items {
    grid-column-gap: 15px;
    grid-row-gap: 15px;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr))
}

@media (min-width:768px) {
    .grid_wheeldrops .grid__items {
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr))
    }
}

.grid_wheeldrops .grid__item {
    aspect-ratio: 240/265
}

.no-items {
    border-radius: 8px;
    font-size: 14px;
    padding: 40px 40px 50px;
    text-align: center
}

.no-items:before {
    background-color: rgba(174, 191, 217, .8);
    height: 24px;
    margin-bottom: 15px;
    width: 24px
}

.no-items__title {
    font-size: 13px;
    line-height: 20px
}

.no-items__text {
    color: #ac9dbc;
    font-weight: 400;
    line-height: 20px;
    margin-top: 3px
}

.no-items__btn {
    margin-top: 20px
}

.no-items_home {
    border: 0
}

.no-items_home .no-items__title {
    font-size: 22px
}

.tradelink-popup {
    color: rgba(174, 191, 217, .8);
    font-size: 14px;
    line-height: 20px
}

.tradelink-popup__title {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px
}

@media (min-width:768px) {
    .tradelink-popup__title {
        font-size: 20px;
        line-height: 140%
    }
}

.tradelink-popup__title:before {
    background-color: #f3b705;
    display: block;
    height: 40px;
    margin-bottom: 20px;
    width: 40px
}

.tradelink-popup__text {
    font-size: 13px;
    line-height: 20px
}

.tradelink-popup__section {
    margin: 20px 0 0
}

.tradelink-popup__section-title {
    color: #ff4e18;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px
}

@media (min-width:768px) {
    .tradelink-popup__section-title {
        font-size: 20px;
        line-height: 140%
    }
}

.tradelink-popup__section-text {
    font-size: 16px;
    line-height: 24px;
    margin-top: 10px
}

@media (min-width:768px) {
    .tradelink-popup__info-blocks {
        display: flex;
        margin: 0 -20px
    }
}

.tradelink-popup__info-block {
    padding: 0 0 20px
}

@media not screen and (min-width:768px) {
    .tradelink-popup__info-block {
        display: flex
    }
}

@media (min-width:768px) {
    .tradelink-popup__info-block {
        flex: 1 1 0;
        padding: 0 20px
    }
}

.tradelink-popup__info-block:before {
    background-position: 50%;
    background-repeat: no-repeat;
    content: "";
    display: block;
    flex: none;
    height: 78px;
    position: relative;
    width: 78px
}

@media not screen and (min-width:768px) {
    .tradelink-popup__info-block:before {
        align-items: center;
        display: flex;
        margin-right: 15px
    }
}

@media (min-width:768px) {
    .tradelink-popup__info-block:before {
        margin-bottom: 15px
    }
}

.tradelink-popup__form {
    display: flex;
    flex-direction: column;
    margin-top: 10px
}

@media (min-width:768px) {
    .tradelink-popup__form {
        flex-direction: row
    }
}

.tradelink-popup__input {
    flex-grow: 1
}

.tradelink-popup__btn {
    flex: none
}

@media not screen and (min-width:768px) {
    .tradelink-popup__btn {
        padding-top: 5px
    }
}

@media (min-width:768px) {
    .tradelink-popup__btn {
        padding-left: 10px
    }
}

.tradelink-popup a {
    color: #f3b705
}

.tradelink-popup a:hover {
    text-decoration: underline
}

.item-from-battle {
    background-color: #0c121b;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 15px
}

.item-from-battle__info {
    align-items: center;
    display: flex;
    justify-content: space-between
}

.item-from-battle__money {
    background-color: rgba(1, 8, 18, .3);
    border-radius: 100px;
    color: #ff4e18;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    padding: 8px 12px
}

.item-from-battle__type {
    background-color: rgba(1, 8, 18, .3);
    border: 1px solid #7c879a42;
    border-radius: 30px;
    color: rgba(174, 191, 217, .8);
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    padding: 10px 13px
}

.item-from-battle__users {
    display: flex;
    gap: 10px
}

.item-from-battle__user {
    background: rgba(115, 140, 178, .05) url(/assets/item-from-battle.svg) 50% no-repeat;
    border-radius: 50%;
    flex: none;
    height: 50px;
    opacity: .3;
    overflow: hidden;
    width: 50px
}

.item-from-battle__user img {
    width: 100%
}

.item-from-battle__user_win {
    opacity: 1
}

.item-from-battle__cases {
    display: grid;
    gap: 5px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr
}

.item-from-battle__case {
    align-items: center;
    aspect-ratio: 65/60;
    background: rgba(115, 140, 178, .05) url(/assets/item-from-battle.svg) 50% no-repeat;
    border-radius: 9px;
    display: flex;
    justify-content: center
}

.item-from-battle__case img {
    width: 80%
}

.item-from-battle_winner .item-from-battle__money {
    color: #84a900
}

.status {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    height: 20px;
    margin: 0 1px;
    opacity: .3;
    width: 20px
}

.status.linkcase {
    background-image: url(/assets/status/icon_item_case.svg);
    transition: .2s ease-in-out
}

.status.linkcase:hover {
    opacity: 1
}

.status.progress {
    background-image: url(/assets/status/icon_item_progress.svg)
}

.status.notcompleted {
    background-image: url(/assets/status/icon_item_alert.svg)
}

.status.completed {
    background-image: url(/assets/status/icon_item_completed.svg);
    opacity: 1
}

.status.selled {
    background-image: url(/assets/status/icon_item_sold.svg)
}

.status.type-contract {
    background-image: url(/assets/status/icon_item_contract.svg)
}

.status.type-upgrade {
    background-image: url(/assets/status/icon_item_upgrade.svg)
}

.status.type-battle {
    background-image: url(/assets/status/icon_item_battle.svg)
}

.new-replacement__head {
    padding: 30px
}

@media (min-width:768px) {
    .new-replacement__head {
        display: flex
    }

    .new-replacement__skin {
        flex: none;
        width: 140px
    }
}

.new-replacement__title-and-info {
    padding: 22px 0 0
}

@media (min-width:768px) {
    .new-replacement__title-and-info {
        padding: 0 0 0 22px
    }
}

.new-replacement__title {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px
}

@media (min-width:768px) {
    .new-replacement__title {
        font-size: 20px;
        line-height: 140%
    }
}

.new-replacement__info {
    color: rgba(174, 191, 217, .8);
    font-size: 16px;
    line-height: 24px;
    margin-top: 10px
}

.new-replacement__scrolling {
    max-height: 265px;
    overflow-x: hidden;
    overflow-y: auto
}

.new-replacement__scrolling::-webkit-scrollbar-track {
    background-color: transparent
}

.new-replacement__scrolling::-webkit-scrollbar {
    height: 3px;
    width: 6px
}

.new-replacement__scrolling::-webkit-scrollbar-thumb {
    background-color: rgba(115, 140, 178, .2)
}

.new-replacement__items {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -2.5px;
    padding: 20px 30px
}

.new-replacement__item {
    border: 1px solid transparent;
    border-radius: 11px;
    cursor: pointer;
    padding: 2.5px;
    width: 50%
}

@media (min-width:768px) {
    .new-replacement__item {
        width: 20%
    }
}

.new-replacement__item.active {
    border-color: #6aad28
}

.new-replacement__btns {
    padding: 20px 30px 30px
}

@media (min-width:768px) {
    .new-replacement__btns {
        display: flex;
        gap: 15px
    }
}

.new-replacement__btn {
    flex: 1 1 0
}

@media not screen and (min-width:768px) {
    .new-replacement__btn {
        margin-top: 5px
    }
}

.item-from-single {
    align-items: center;
    background: #0c121b;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    padding: 12px 16px 16px
}

.item-from-single__users {
    align-items: center;
    background: url(/assets/battles.svg) 50% no-repeat;
    display: flex;
    justify-content: space-between;
    width: 100%
}

.item-from-single__user {
    border: 2px solid transparent;
    border-radius: 50%;
    height: 30px;
    overflow: hidden;
    width: 30px
}

@media (min-width:768px) {
    .item-from-single__user {
        height: 50px;
        width: 50px
    }
}

.item-from-single__user_won {
    border-color: #84a900
}

.item-from-single__user img {
    display: block
}

.item-from-single__items-and-case {
    align-items: center;
    align-self: stretch;
    display: flex;
    gap: 5px;
    justify-content: space-between;
    margin-top: 9px
}

.item-from-single__case {
    max-width: 150px;
    padding: 0 16px;
    width: 100%
}

.item-from-single__item {
    aspect-ratio: 166/128;
    position: relative;
    width: 50%
}

.item-from-single__win {
    align-items: center;
    color: #7ed321;
    display: flex;
    font-size: 16px;
    font-weight: 400;
    left: 50%;
    line-height: 19px;
    position: absolute;
    top: -14px;
    transform: translate(-50%, -100%)
}

.item-from-single__win:after {
    background: url(/assets/battle-item-win.svg) 50% no-repeat;
    content: "";
    display: block;
    height: 14px;
    margin-left: 7px;
    margin-top: 3px;
    position: relative;
    width: 14px
}

.stat-tooltip {
    display: flex;
    flex-direction: column;
    font-size: 13px;
    gap: 10px;
    line-height: 20px;
    padding: 0 5px
}

.stat-tooltip__line {
    display: flex;
    gap: 15px;
    justify-content: space-between
}

.stat-tooltip__label {
    align-items: center;
    color: rgba(174, 191, 217, .8);
    display: flex;
    font-weight: 400;
    gap: 5px
}

.stat-tooltip__label:before {
    background-color: rgba(174, 191, 217, .8);
    height: 20px;
    width: 20px
}

@media not screen and (min-width:768px) {
    .userbar-block__notify {
        display: none
    }
}

.promocodes-items {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr))
}

@media not screen and (min-width:768px) {
    .promocodes-items {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr))
    }
}

.promocodes-items__item {
    background-color: #0c121b;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px
}

@media not screen and (min-width:768px) {
    .promocodes-items__item {
        padding: 10px
    }
}

.promocodes-items__btn {
    background-color: rgba(115, 140, 178, .1);
    border-radius: 10px;
    color: hsla(0, 0%, 85%, .8);
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    overflow: hidden;
    padding: 13px 8px;
    text-overflow: ellipsis;
    text-transform: capitalize;
    transition: .12s ease;
    white-space: nowrap;
    width: 100%
}

.promocodes-items__btn:hover {
    background-color: rgba(115, 140, 178, .15)
}

.promocodes-items__btn.disabled,
.promocodes-items__btn:disabled {
    cursor: default;
    opacity: .3
}

.promocodes-popup {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%
}

.promocodes-popup__promo-preview {
    height: 144px;
    width: 211px
}

.promocodes-popup__title {
    font-size: 20px;
    font-weight: 700;
    line-height: 26px;
    text-align: center
}

@media not screen and (min-width:768px) {
    .promocodes-popup__title {
        font-size: 16px
    }
}

.promocodes-popup__promocode {
    align-items: center;
    background-color: rgba(115, 140, 178, .1);
    border-radius: 10px;
    color: hsla(0, 0%, 85%, .8);
    cursor: pointer;
    display: flex;
    font-size: 16px;
    font-weight: 600;
    gap: 6px;
    justify-content: center;
    padding: 16px 0;
    transition: .12s ease;
    width: 100%
}

.promocodes-popup__promocode:hover {
    background-color: rgba(115, 140, 178, .15)
}

.promocodes-popup__promocode .icon:before {
    background-color: hsla(0, 0%, 85%, .8);
    height: 20px;
    width: 20px
}

.promocodes-popup__info {
    color: rgba(174, 191, 217, .8);
    font-size: 16px;
    line-height: 24px;
    text-align: center
}

@media not screen and (min-width:768px) {
    .promocodes-popup__info {
        font-size: 14px
    }
}

.layout-case {
    align-items: center;
    contain: layout;
    display: flex;
    flex-direction: column
}

@media (min-width:768px) {

    .layout-case:after,
    .layout-case:before {
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: contain;
        content: "";
        display: block;
        opacity: .5;
        pointer-events: none;
        position: absolute;
        top: -100px;
        z-index: -1
    }
}

.layout-case:before {
    background-image: url(/assets/case/bg-left.webp);
    height: 844px;
    width: 917px
}

@media not screen and (min-width:1800px) {
    .layout-case:before {
        margin-right: 50px;
        right: 50%
    }
}

@media (min-width:1800px) {
    .layout-case:before {
        left: 0
    }
}

.layout-case:after {
    background-image: url(/assets/case/bg-right.webp);
    height: 884px;
    top: -140px;
    width: 928px
}

@media not screen and (min-width:1800px) {
    .layout-case:after {
        left: 50%;
        margin-left: 50px
    }
}

@media (min-width:1800px) {
    .layout-case:after {
        right: 0
    }
}

.layout-case__items-incase {
    width: 100%
}

.layout-case__case-img {
    background: #0c1017;
    border-radius: 25px;
    max-width: 330px;
    padding: 20px;
    position: relative;
    width: 100%
}

.layout-case__actions-container,
.layout-case__case {
    align-items: center;
    display: flex;
    flex-direction: column
}

.layout-case__actions-container,
.layout-case__case-actions {
    width: 100%
}

.layout-case__case-attention {
    margin-top: 30px;
    max-width: 700px;
    width: 100%
}

@media (min-width:768px) {
    .layout-case__case-attention {
        margin-top: 50px
    }

    .layout-case__actions-container {
        justify-content: center;
        min-height: 560px
    }
}

@media (min-width:1250px) {
    .layout-case__actions-container {
        min-height: 580px
    }
}

.layout-case__roulettes {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    width: 100%
}

.layout-case__roulettes .roulette {
    flex: 1 1 0;
    min-width: 40%
}

.layout-case__roulettes_farm {
    gap: 15px
}

@media (min-width:1250px) {
    .layout-case__roulettes_farm {
        gap: 15px
    }
}

.layout-case__roulettes_farm .roulette {
    min-width: 48%
}

@media (min-width:1250px) {
    .layout-case__roulettes_farm .roulette {
        min-width: 30%
    }
}

.layout-case__cards {
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
    width: 100%
}

.layout-case__fav {
    position: absolute;
    right: 10px;
    top: 10px
}

.layout-case__gifts {
    margin-top: 15px
}

.case-actions {
    align-items: center;
    display: flex;
    flex-direction: column
}

.case-actions__price {
    background: #0c1017;
    border-radius: 35px;
    color: #ffd600;
    font-size: 32px;
    font-weight: 800;
    line-height: 40px;
    margin-top: -26px;
    padding: 10px 20px;
    z-index: 1
}

.case-actions__title-farm {
    color: rgba(174, 191, 217, .8);
    font-size: 13px;
    line-height: 20px;
    margin-top: 30px
}

.case-actions__selectors {
    margin-top: 20px
}

.case-actions__btns {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 40px
}

@media not screen and (min-width:768px) {
    .case-actions__btns {
        width: 100%
    }
}

@media (min-width:768px) {
    .case-actions__btns {
        flex-direction: row
    }
}

.case-actions__error {
    margin-top: 30px
}

.farmcase-picker {
    display: flex;
    gap: 1px
}

.farmcase-picker__btn {
    align-items: center;
    backface-visibility: hidden;
    background: rgba(115, 140, 178, .1);
    color: hsla(0, 0%, 85%, .8);
    cursor: pointer;
    display: flex;
    font-size: 13px;
    font-weight: 600;
    height: 46px;
    justify-content: center;
    line-height: 20px;
    position: relative;
    transition: .2s ease-in-out;
    width: 46px
}

.farmcase-picker__btn span {
    margin-bottom: 3px;
    pointer-events: none;
    user-select: none
}

.farmcase-picker__btn:hover {
    background: rgba(115, 140, 178, .15)
}

.farmcase-picker__btn.active {
    background: rgba(115, 140, 178, .2);
    color: #fff
}

.farmcase-picker__btn:disabled {
    color: hsla(0, 0%, 85%, .2);
    pointer-events: none
}

.farmcase-picker__btn:not(.active):disabled {
    color: hsla(0, 0%, 100%, .2)
}

.farmcase-picker__btn:first-child {
    border-radius: 4px 0 0 4px
}

.farmcase-picker__btn:last-child {
    border-radius: 0 4px 4px 0
}

.farmcase-picker__tooltip {
    align-items: center;
    background: #192435;
    border-radius: 15px;
    bottom: 100%;
    color: rgba(174, 191, 217, .8);
    display: flex;
    font-size: 11px;
    left: 50%;
    line-height: 16px;
    opacity: 0;
    padding: 5px 10px;
    pointer-events: none;
    position: absolute;
    transform: translate(-50%, -6px);
    white-space: nowrap
}

.farmcase-picker__tooltip:after {
    border-color: transparent transparent #192435;
    border-style: solid;
    border-width: 0 4px 4px;
    content: "";
    display: block;
    height: 0;
    left: 50%;
    position: absolute;
    top: 100%;
    transform: rotate(180deg) translate(50%);
    width: 0
}

.farmcase-picker__tooltip>.price.price-bonus:before {
    height: 14px;
    margin: 0 3px -1px;
    width: 14px
}

.farmcase-picker__btn:hover .farmcase-picker__tooltip {
    opacity: 1
}

.just-attention {
    backdrop-filter: blur(10px);
    background: rgba(243, 183, 5, .1);
    border-radius: 30px;
    font-size: 16px;
    line-height: 24px;
    padding: 30px
}

.just-attention__title {
    align-items: center;
    color: #ffd600;
    display: flex;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    text-transform: uppercase
}

.just-attention__title:before {
    background-color: #ffd600;
    height: 20px;
    margin-right: 10px;
    width: 20px
}

.just-attention__text {
    margin: 10px 0
}

.just-attention__items {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px
}

.just-attention_centered {
    text-align: center
}

.just-attention_centered .just-attention__title {
    justify-content: center
}

.just-attention_steam-warning {
    padding: 15px
}

@media (min-width:768px) {
    .just-attention_steam-warning {
        padding-left: 70px
    }
}

@media not screen and (min-width:768px) {
    .just-attention_steam-warning:before {
        display: none
    }
}

@media (min-width:768px) {
    .just-attention_steam-warning:before {
        background-color: #ffd600;
        height: 40px;
        left: 15px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 40px
    }
}

.just-attention_steam-warning .just-attention__title {
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    text-transform: none
}

.just-attention_steam-warning .just-attention__text {
    color: hsla(0, 0%, 85%, .8);
    font-size: 13px;
    line-height: 20px
}

.case-attention {
    background: #0c121b;
    border-radius: 20px;
    color: rgba(174, 191, 217, .8);
    font-size: 13px;
    line-height: 20px;
    padding: 20px;
    text-align: center
}

@media (min-width:768px) {
    .case-attention {
        font-size: 16px;
        line-height: 24px;
        padding: 50px
    }
}

.case-attention__title {
    align-items: center;
    color: #ffd600;
    display: flex;
    flex-direction: column;
    font-weight: 600;
    gap: 10px;
    margin-bottom: 10px
}

@media (min-width:768px) {
    .case-attention__title {
        flex-direction: row;
        justify-content: center;
        margin-bottom: 20px
    }
}

.case-attention__title:before {
    background-color: #ffd600
}

.case-attention_transparent {
    background: transparent;
    padding: 0
}

.drop-preview {
    text-align: center
}

.drop-preview,
.drop-preview__skin {
    align-items: center;
    display: flex;
    flex-direction: column
}

.drop-preview__skin {
    background-image: url(/assets/rarity/drop-preview/common.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100%;
    height: 350px;
    margin-top: 50px;
    padding: 45px 17px 0;
    position: relative;
    width: 270px;
    z-index: 1
}

.drop-preview__skin:after {
    background: rgba(173, 183, 197, .8);
    border-radius: 50%;
    content: "";
    display: block;
    filter: blur(50px);
    height: 190px;
    left: 50%;
    position: absolute;
    top: 20px;
    transform: translate(-50%);
    width: 190px;
    z-index: -1
}

.drop-preview__img {
    min-height: 177px
}

.drop-preview__item-type {
    color: hsla(0, 0%, 85%, .4);
    font-size: 13px;
    line-height: 20px;
    margin-top: 10px
}

.drop-preview__item-name {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px
}

.drop-preview__item-withdraw {
    color: rgba(174, 191, 217, .8);
    font-size: 16px;
    line-height: 24px;
    margin-top: 60px;
    text-align: center
}

@media (min-width:768px) {
    .drop-preview__item-withdraw {
        margin-top: 70px
    }
}

.drop-preview__item-withdraw a {
    color: #ffd600
}

.drop-preview__item-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px
}

@media (min-width:768px) {
    .drop-preview__item-actions {
        flex-wrap: wrap
    }
}

@media (min-width:1024px) {
    .drop-preview__item-actions {
        margin-top: 30px
    }
}

@media not screen and (min-width:768px) {
    .drop-preview__item-actions_big {
        flex-direction: column;
        width: 100%
    }
}

.drop-preview.common .drop-preview__skin {
    background-image: url(/assets/rarity/drop-preview/common.svg)
}

.drop-preview.common .drop-preview__skin:after {
    background-color: hsla(0, 0%, 66%, .8)
}

.drop-preview.uncommon .drop-preview__skin {
    background-image: url(/assets/rarity/drop-preview/uncommon.svg)
}

.drop-preview.uncommon .drop-preview__skin:after {
    background-color: rgba(27, 206, 255, .8)
}

.drop-preview.milspec .drop-preview__skin {
    background-image: url(/assets/rarity/drop-preview/milspec.svg)
}

.drop-preview.milspec .drop-preview__skin:after {
    background-color: rgba(16, 104, 255, .8)
}

.drop-preview.restricted .drop-preview__skin {
    background-image: url(/assets/rarity/drop-preview/restricted.svg)
}

.drop-preview.restricted .drop-preview__skin:after {
    background-color: rgba(140, 83, 255, .8)
}

.drop-preview.classified .drop-preview__skin {
    background-image: url(/assets/rarity/drop-preview/classified.svg)
}

.drop-preview.classified .drop-preview__skin:after {
    background-color: rgba(247, 57, 255, .8)
}

.drop-preview.covert .drop-preview__skin {
    background-image: url(/assets/rarity/drop-preview/covert.svg)
}

.drop-preview.covert .drop-preview__skin:after {
    background-color: rgba(255, 61, 0, .8)
}

.drop-preview.rare .drop-preview__skin {
    background-image: url(/assets/rarity/drop-preview/rare.svg)
}

.drop-preview.rare .drop-preview__skin:after {
    background-color: rgba(255, 212, 26, .8)
}

.drop-preview_mini .drop-preview__skin {
    height: 195px;
    margin-top: 20px;
    padding: 25px 10px 0;
    width: 150px
}

@media (min-width:768px) {
    .drop-preview_mini .drop-preview__skin {
        height: 260px;
        padding: 33px 12px 0;
        width: 200px
    }
}

@media (min-width:1024px) {
    .drop-preview_mini .drop-preview__skin {
        height: 350px;
        padding: 45px 17px 0;
        width: 270px
    }
}

.drop-preview_mini .drop-preview__skin:after {
    height: 106px;
    width: 106px
}

@media (min-width:1024px) {
    .drop-preview_mini .drop-preview__skin:after {
        height: 190px;
        width: 190px
    }
}

.drop-preview_mini .drop-preview__img {
    min-height: 97px
}

@media (min-width:768px) {
    .drop-preview_mini .drop-preview__img {
        min-height: 132px
    }
}

@media (min-width:1024px) {
    .drop-preview_mini .drop-preview__img {
        min-height: 177px
    }
}

.drop-preview_mini .drop-preview__item-type {
    font-size: 10px;
    line-height: 15px;
    margin-top: 0
}

@media (min-width:768px) {
    .drop-preview_mini .drop-preview__item-type {
        font-size: 13px;
        line-height: 20px
    }
}

@media (min-width:1024px) {
    .drop-preview_mini .drop-preview__item-type {
        margin-top: 10px
    }
}

.drop-preview_mini .drop-preview__item-name {
    font-size: 12px;
    line-height: 18px
}

@media (min-width:768px) {
    .drop-preview_mini .drop-preview__item-name {
        font-size: 16px;
        line-height: 24px
    }
}

.farm-drop-items__items {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center
}

@media (min-width:768px) {
    .farm-drop-items__items {
        gap: 38px
    }
}

@media (min-width:1024px) {
    .farm-drop-items__items {
        gap: 62px
    }
}

.farm-drop-items__item {
    flex: none
}

.farm-drop-items__withdraw {
    color: rgba(174, 191, 217, .8);
    font-size: 16px;
    line-height: 24px;
    margin-top: 30px;
    text-align: center
}

@media (min-width:768px) {
    .farm-drop-items__withdraw {
        margin-top: 50px
    }
}

.farm-drop-items__withdraw a {
    color: #ffd600
}

.farm-drop-items__actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 30px auto 0;
    max-width: 330px
}

@media not screen and (min-width:768px) {
    .farm-drop-items__actions {
        flex-direction: column
    }
}

.case-page-fav.active .case-page-fav__icon:before {
    background-color: #ff4e18
}

.farmcase-section {
    width: 100%
}

@media (min-width:1024px) {
    .farmcase-section__stat {
        position: sticky;
        top: 0;
        z-index: 2
    }
}

.farmcase-section__drop-cards {
    padding: 30px 15px;
    position: relative;
    width: 100%;
    z-index: 1
}

@media (min-width:375px) {
    .farmcase-section__drop-cards {
        padding: 50px 25px
    }
}

.farm-stat {
    background-color: #0c121b;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 0 auto;
    max-width: 1053px;
    overflow: hidden;
    padding: 0 15px 18px;
    position: relative
}

@media (min-width:768px) {
    .farm-stat {
        align-items: center;
        border-radius: 30px;
        flex-direction: row;
        justify-content: space-between;
        padding: 95px 60px 42px
    }

    .farm-stat:before {
        background: url(/assets/refill-prizes-after.svg) top no-repeat;
        content: "";
        height: 98px;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 2
    }
}

.farm-stat__item {
    align-items: center;
    display: flex;
    position: relative;
    text-align: center;
    z-index: 2
}

@media not screen and (min-width:768px) {
    .farm-stat__item {
        justify-content: space-between
    }
}

@media (min-width:768px) {
    .farm-stat__item {
        flex-direction: column;
        width: 180px
    }
}

.farm-stat__title {
    color: rgba(174, 191, 217, .8);
    font-size: 16px;
    line-height: 24px
}

.farm-stat__value {
    white-space: nowrap
}

@media (min-width:768px) {
    .farm-stat__value {
        font-size: 24px;
        font-weight: 700;
        line-height: 180%
    }
}

.farm-stat__value_large {
    color: #f3b705;
    font-size: 16px
}

@media (min-width:768px) {
    .farm-stat__value_large {
        font-size: 32px;
        line-height: 125%
    }
}

.farm-stat__info {
    color: #f3b705;
    text-align: center
}

@media not screen and (min-width:768px) {
    .farm-stat__info {
        background: rgba(243, 183, 5, .1);
        font-size: 13px;
        font-weight: 600;
        line-height: 20px;
        margin: 0 -15px;
        padding: 10px 15px
    }
}

@media (min-width:768px) {
    .farm-stat__info {
        align-items: center;
        background: url(/assets/case/farm.svg) top no-repeat;
        display: flex;
        font-size: 16px;
        font-weight: 600;
        gap: 11px;
        height: 71px;
        justify-content: center;
        left: 50%;
        line-height: 24px;
        position: absolute;
        top: 0;
        transform: translateX(-50%);
        width: 561px
    }

    .farm-stat__info:before {
        background-color: #f3b705;
        height: 20px;
        width: 20px
    }
}

.card-game-slot {
    animation: none;
    aspect-ratio: 200/250;
    background-image: url(/assets/cards/default.svg);
    background-size: contain;
    border-radius: 12px;
    min-width: calc(33.3% - 7px);
    order: 1;
    overflow: hidden;
    position: relative;
    transform-origin: center;
    transform-style: preserve-3d
}

@media (min-width:768px) {
    .card-game-slot {
        border-radius: 12px;
        min-width: calc(25% - 10px)
    }
}

@media (min-width:1250px) {
    .card-game-slot {
        flex: 1 1 0;
        min-width: 0
    }
}

.card-game-slot:before {
    color: #286979;
    content: counter(card);
    counter-increment: card;
    font-size: 15px;
    font-weight: 900;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%)
}

@media (min-width:768px) {
    .card-game-slot:before {
        font-size: 25px
    }
}

.card-game-slot__item {
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    visibility: hidden;
    width: 100%
}

.card-game-slot_viewed {
    animation: rotateOut .25s ease-in forwards, rotateIn .25s ease-out .3s forwards
}

.card-game-slot_viewed .card-game-slot__item {
    animation: showItem 0s .25s forwards
}

.card-game-slot_common .card-game-slot__item {
    background-color: #3b2f3c
}

.card-game-slot_uncommon .card-game-slot__item {
    background-color: #1d434c
}

.card-game-slot_milspec .card-game-slot__item {
    background-color: #1d2f4c
}

.card-game-slot_restricted .card-game-slot__item {
    background-color: #342150
}

.card-game-slot_classified .card-game-slot__item {
    background-color: #47194e
}

.card-game-slot_covert .card-game-slot__item {
    background-color: #640c0c
}

.card-game-slot_rare .card-game-slot__item {
    background-color: #534213
}

@keyframes rotateOut {
    0% {
        transform: rotateY(0deg)
    }

    to {
        transform: rotateY(90deg)
    }
}

@keyframes rotateIn {
    0% {
        transform: rotateY(-90deg)
    }

    to {
        transform: rotateY(0deg)
    }
}

@keyframes showItem {
    to {
        opacity: 1;
        visibility: visible
    }
}

.farmcase-drops {
    counter-reset: card;
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr 1fr;
    margin: 0 auto;
    max-width: 1053px;
    width: 100%
}

@media (min-width:768px) {
    .farmcase-drops {
        grid-template-columns: 1fr 1fr 1fr 1fr
    }
}

@media (min-width:1024px) {
    .farmcase-drops {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr))
    }
}

.farmcase-won__try-more {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 30px
}

.canvas-wrapper {
    border: 3px solid #08756b;
    border-radius: 11px;
    margin-bottom: 75px;
    position: relative;
    width: 100%
}

.canvas-wrapper:after,
.canvas-wrapper:before {
    backface-visibility: hidden;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100%;
    content: "";
    height: 250px;
    pointer-events: none;
    position: absolute;
    top: 49%;
    transform: translateY(-50%);
    width: 380px;
    z-index: 2
}

.canvas-wrapper:before {
    background-image: url(/assets/canvas/canvas-left.png?v=2);
    left: -65px
}

.canvas-wrapper:after {
    background-image: url(/assets/canvas/canvas-right.png?v=2);
    right: -65px
}

.canvas-wrapper:last-child {
    margin-bottom: 0
}

.canvas-wrapper__canvas {
    background-color: #081517;
    border-radius: 11px;
    overflow: hidden
}

.canvas-wrapper__inner:after,
.canvas-wrapper__inner:before {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100%;
    content: "";
    height: 80px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 800px;
    z-index: 2
}

.canvas-wrapper__inner:before {
    background-image: url(/assets/canvas/canvas-top.png?v=2);
    top: -54px
}

.canvas-wrapper__inner:after {
    background-image: url(/assets/canvas/canvas-bottom.png?v=2);
    bottom: -29px
}

.card-game {
    background-color: #080c12;
    border: 7px solid #252b36;
    border-radius: 20px;
    counter-reset: card;
    margin: 20px 0;
    padding: 10px;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    width: 100%
}

@media not screen and (min-width:1250px) {
    .card-game {
        max-width: 868px
    }
}

.card-game__cards {
    display: flex;
    gap: 10px;
    justify-content: center
}

@media not screen and (min-width:1250px) {
    .card-game__cards {
        flex-wrap: wrap
    }
}

.card-game__card {
    aspect-ratio: 200/250;
    border-radius: 12px;
    cursor: pointer;
    min-width: calc(33.3% - 7px);
    order: 1;
    overflow: hidden
}

@media (min-width:768px) {
    .card-game__card {
        border-radius: 12px;
        min-width: calc(25% - 10px)
    }
}

@media (min-width:1250px) {
    .card-game__card {
        flex: 1 1 0;
        min-width: 0
    }
}

.card-game__card_10 {
    order: 0
}

.card-game__card_10 .card-game__front-side {
    background-image: url(/assets/cards/guarant.svg)
}

.card-game__card_10 .card-game__front-side:before {
    display: none
}

.card-game__card_10.active .card-game__front-side {
    background-image: url(/assets/cards/guarant-gold.svg?v=2)
}

.card-game__card.active .card-game__sides {
    animation: preOpen 1.5s ease 0s infinite;
    opacity: .9
}

.card-game__card.viewed .card-game__sides {
    animation: cardOpenRotate .7s ease 0s forwards
}

.card-game__card_common .card-game__back-side {
    background-color: #3b2f3c
}

.card-game__card_uncommon .card-game__back-side {
    background-color: #1d434c
}

.card-game__card_milspec .card-game__back-side {
    background-color: #1d2f4c
}

.card-game__card_restricted .card-game__back-side {
    background-color: #342150
}

.card-game__card_classified .card-game__back-side {
    background-color: #47194e
}

.card-game__card_covert .card-game__back-side {
    background-color: #640c0c
}

.card-game__card_rare .card-game__back-side {
    background-color: #534213
}

.card-game__back-side,
.card-game__front-side,
.card-game__sides {
    height: 100%;
    width: 100%
}

.card-game__sides {
    position: relative;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    will-change: transform
}

.card-game__sides:hover {
    transform: rotateY(10deg)
}

.card-game__sides:hover .card-game__front-side {
    filter: brightness(1.12)
}

.card-game__back-side,
.card-game__front-side {
    left: 0;
    position: absolute;
    top: 0
}

.card-game__front-side {
    background-image: url(/assets/cards/default.svg);
    background-size: contain;
    transition: .2s ease-in-out
}

.card-game__front-side:before {
    color: #286979;
    content: counter(card);
    counter-increment: card;
    font-size: 15px;
    font-weight: 900;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%)
}

@media (min-width:768px) {
    .card-game__front-side:before {
        font-size: 25px
    }
}

.card-game__back-side {
    transform: rotateY(180deg)
}

.card-game__guarant {
    bottom: 9%;
    color: #b5bfce;
    font-size: 6px;
    font-weight: 600;
    left: 50%;
    position: absolute;
    text-align: center;
    transform: translate(-50%)
}

@media (min-width:768px) {
    .card-game__guarant {
        font-size: 9px
    }
}

@media (min-width:1024px) {
    .card-game__guarant {
        font-size: 11px;
        font-weight: 600;
        line-height: 16px;
        line-height: 13px
    }
}

.card-game__name {
    animation: visibleName .8s ease .5s forwards
}

@keyframes preOpen {
    0% {
        filter: brightness(1);
        transform: rotateY(0deg)
    }

    40% {
        filter: brightness(1.12);
        transform: rotateY(13deg)
    }

    to {
        filter: brightness(1);
        transform: rotateY(0deg)
    }
}

@keyframes cardOpenRotate {
    0% {
        transform: rotateY(0deg)
    }

    33% {
        transform: rotateY(180deg)
    }

    66% {
        transform: rotateY(1turn)
    }

    to {
        transform: rotateY(540deg)
    }
}

@keyframes visibleName {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.contract {
    contain: layout;
    position: relative
}

@media (min-width:768px) {
    .contract:before {
        background-image: url(/assets/contract-decoration.png);
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: contain;
        content: "";
        height: 708px;
        left: 50%;
        pointer-events: none;
        position: absolute;
        top: -70px;
        transform: translate(-50%);
        width: 2084px
    }
}

.contract__info-items {
    position: relative
}

.contract__info {
    z-index: 2
}

@media not screen and (min-width:768px) {
    .contract__info {
        display: flex;
        justify-content: center;
        margin: 20px 0 17px;
        position: relative
    }
}

@media (min-width:768px) {
    .contract__info {
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%)
    }
}

@media not screen and (min-width:768px) {
    .contract__info:before {
        background-position: 50%;
        background-repeat: no-repeat;
        background: url(/assets/contract-bg-mobile.svg) 50% no-repeat;
        content: "";
        height: 408px;
        left: 50%;
        pointer-events: none;
        position: absolute;
        transform: translate(-50%, -100px);
        width: 600px;
        z-index: -1
    }
}

.contract__items {
    height: 523px;
    position: relative;
    z-index: 1
}

@media (min-width:768px) {
    .contract__items:before {
        background-image: url(/assets/contract-bg.svg);
        background-position: 50%;
        background-repeat: no-repeat;
        content: "";
        height: 817px;
        left: 50%;
        pointer-events: none;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 1201px
    }
}

@media (min-width:1024px) {
    .contract__items:before {
        background-image: url(/assets/contract-bg-laptop.svg);
        height: 817px;
        width: 1332px
    }
}

.contract__drop {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2
}

.contract__item {
    position: absolute;
    z-index: 1
}

@media not screen and (min-width:768px) {
    .contract__item {
        left: 50%
    }
}

.contract__item:hover {
    z-index: 2
}

.contract__item:first-child {
    top: 0;
    transform: translate(-50%)
}

@media (min-width:768px) {
    .contract__item:first-child {
        top: 58px;
        transform: translate(-236px)
    }
}

.contract__item:nth-child(2) {
    top: 64.76190476px;
    transform: translate(-179px)
}

@media (min-width:768px) {
    .contract__item:nth-child(2) {
        top: 125px;
        transform: translate(-354px)
    }
}

.contract__item:nth-child(3) {
    top: 128px;
    transform: translate(-50%)
}

@media (min-width:768px) {
    .contract__item:nth-child(3) {
        top: 194px;
        transform: translate(-236px)
    }
}

.contract__item:nth-child(4) {
    top: 64.76190476px;
    transform: translate(42px)
}

@media (min-width:768px) {
    .contract__item:nth-child(4) {
        top: 261px;
        transform: translate(-354px)
    }
}

.contract__item:nth-child(5) {
    top: 191.76px;
    transform: translate(-179px)
}

@media (min-width:768px) {
    .contract__item:nth-child(5) {
        top: 329px;
        transform: translate(-236px)
    }
}

.contract__item:nth-child(6) {
    top: 256px;
    transform: translate(-50%)
}

@media (min-width:768px) {
    .contract__item:nth-child(6) {
        top: 58px;
        transform: translate(236px)
    }
}

.contract__item:nth-child(7) {
    top: 191.76px;
    transform: translate(42px)
}

@media (min-width:768px) {
    .contract__item:nth-child(7) {
        top: 125px;
        transform: translate(354px)
    }
}

.contract__item:nth-child(8) {
    top: 319.6px;
    transform: translate(-179px)
}

@media (min-width:768px) {
    .contract__item:nth-child(8) {
        top: 194px;
        transform: translate(236px)
    }
}

.contract__item:nth-child(9) {
    top: 384px;
    transform: translate(-50%)
}

@media (min-width:768px) {
    .contract__item:nth-child(9) {
        top: 261px;
        transform: translate(354px)
    }
}

.contract__item:nth-child(10) {
    top: 319.6px;
    transform: translate(42px)
}

@media (min-width:768px) {
    .contract__item:nth-child(10) {
        top: 329px;
        transform: translate(236px)
    }

    .contract__item:first-child,
    .contract__item:nth-child(2),
    .contract__item:nth-child(3),
    .contract__item:nth-child(4),
    .contract__item:nth-child(5) {
        left: 50%
    }
}

@media (min-width:1024px) {

    .contract__item:first-child,
    .contract__item:nth-child(2),
    .contract__item:nth-child(3),
    .contract__item:nth-child(4),
    .contract__item:nth-child(5) {
        margin-left: -65px
    }
}

@media (min-width:768px) {

    .contract__item:nth-child(10),
    .contract__item:nth-child(6),
    .contract__item:nth-child(7),
    .contract__item:nth-child(8),
    .contract__item:nth-child(9) {
        right: 50%
    }
}

@media (min-width:1024px) {

    .contract__item:nth-child(10),
    .contract__item:nth-child(6),
    .contract__item:nth-child(7),
    .contract__item:nth-child(8),
    .contract__item:nth-child(9) {
        margin-right: -66px
    }
}

@media (min-width:768px) {
    .contract__counter {
        margin-bottom: -80px
    }
}

.contract__btns {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 17px;
    margin-top: 14px;
    position: relative;
    z-index: 3
}

@media (min-width:768px) {
    .contract__btns {
        margin-top: -30px
    }
}

@media (min-width:1024px) {
    .contract__btns {
        margin-top: -55px
    }
}

.contract__btns-label {
    color: hsla(0, 0%, 85%, .8);
    font-size: 13px;
    line-height: 20px;
    max-width: 281px;
    min-height: 40px;
    text-align: center
}

.contract__btns-label a {
    color: #ffd600
}

.contract__btns-items {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center
}

.contract_won-drop .contract__item {
    opacity: 0
}

@media not screen and (min-width:768px) {
    .contract_won-drop .contract__items {
        display: none
    }
}

@media not screen and (min-width:1024px) {
    .contract_won-drop .contract__info>div {
        opacity: 0
    }
}

@media (min-width:768px) {
    .contract_creating .contract-item_1 {
        opacity: 0;
        transform: translate(170%, 100%);
        transition: .8s ease
    }

    .contract_creating .contract-item_2 {
        opacity: 0;
        transform: translate(170%, 50%);
        transition: .8s ease
    }

    .contract_creating .contract-item_3 {
        opacity: 0;
        transform: translate(170%);
        transition: .8s ease
    }

    .contract_creating .contract-item_4 {
        opacity: 0;
        transform: translate(170%, -50%);
        transition: .8s ease
    }

    .contract_creating .contract-item_5 {
        opacity: 0;
        transform: translate(170%, -100%);
        transition: .8s ease
    }

    .contract_creating .contract-item_6 {
        opacity: 0;
        transform: translate(-170%, 100%);
        transition: .8s ease
    }

    .contract_creating .contract-item_7 {
        opacity: 0;
        transform: translate(-170%, 50%);
        transition: .8s ease
    }

    .contract_creating .contract-item_8 {
        opacity: 0;
        transform: translate(-170%);
        transition: .8s ease
    }

    .contract_creating .contract-item_9 {
        opacity: 0;
        transform: translate(-170%, -50%);
        transition: .8s ease
    }

    .contract_creating .contract-item_10 {
        opacity: 0;
        transform: translate(-170%, -100%);
        transition: .8s ease
    }
}

.btn-gotocontract {
    cursor: pointer
}

.contract-item {
    background-image: url(/assets/rarity/contract/empty.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    cursor: pointer;
    height: 136px;
    position: relative;
    width: 136px
}

.contract-item:hover .contract-item__remove {
    opacity: 1
}

.contract-item__remove {
    backdrop-filter: blur(6px);
    background: rgba(1, 8, 18, .3);
    border-radius: 50%;
    height: 40px;
    opacity: 0;
    width: 40px;
    z-index: 1
}

.contract-item__remove,
.contract-item__remove:before {
    content: "";
    display: block;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%)
}

.contract-item__remove:before {
    background-color: #ff4e18;
    height: 16px;
    width: 16px
}

.contract-item__img {
    left: 50%;
    min-height: 81px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 108px
}

.contract-item__img img {
    width: 100%
}

.contract-item__number,
.contract-item__price {
    backdrop-filter: blur(15px);
    background: rgba(0, 0, 0, .3);
    border-radius: 100px;
    bottom: 20px;
    font-size: 9px;
    font-weight: 600;
    line-height: 13px;
    padding: 3px 7px;
    position: absolute;
    right: 35px;
    z-index: 1
}

.contract-item__number {
    bottom: 50%;
    color: hsla(0, 0%, 85%, .6);
    display: none;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    right: 50%;
    transform: translate(50%, 50%)
}

.contract-item__tooltip {
    color: hsla(0, 0%, 85%, .8);
    position: relative
}

.contract-item__tooltip .tooltip {
    bottom: 80%
}

.contract-item_empty .contract-item__price,
.contract-item_empty .contract-item__remove {
    display: none
}

.contract-item_empty .contract-item__number {
    display: block
}

.contract-item.common {
    background-image: url(/assets/rarity/contract/common.svg)
}

.contract-item.uncommon {
    background-image: url(/assets/rarity/contract/uncommon.svg)
}

.contract-item.milspec {
    background-image: url(/assets/rarity/contract/milspec.svg)
}

.contract-item.restricted {
    background-image: url(/assets/rarity/contract/restricted.svg)
}

.contract-item.classified {
    background-image: url(/assets/rarity/contract/classified.svg)
}

.contract-item.covert {
    background-image: url(/assets/rarity/contract/covert.svg)
}

.contract-item.rare {
    background-image: url(/assets/rarity/contract/rare.svg)
}

.contract-card {
    align-items: center;
    background-image: url(/assets/contract-card.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    height: 210px;
    padding: 30px 25px 24px;
    text-align: center;
    width: 170px
}

@media (min-width:1024px) {
    .contract-card {
        background-image: url(/assets/contract-card-laptop.svg);
        height: 320px;
        padding: 45px 40px 35px;
        width: 270px
    }

    .contract-card:before {
        background: url(/assets/contract-logo.svg) 50% no-repeat;
        content: "";
        display: block;
        flex: none;
        height: 64px;
        margin-bottom: 8px;
        position: relative;
        width: 64px
    }
}

.contract-card__line {
    margin-bottom: 10px
}

@media (min-width:1024px) {
    .contract-card__line {
        margin-bottom: 18px
    }
}

.contract-card__line-label {
    color: rgba(174, 191, 217, .8);
    font-size: 11px;
    line-height: 16px
}

.contract-card__line-value {
    font-size: 11px;
    font-weight: 600;
    line-height: 16px
}

@media (min-width:1024px) {
    .contract-card__line-value {
        font-size: 16px;
        font-weight: 600;
        line-height: 24px;
        white-space: nowrap
    }
}

.contract-card__line-value span {
    color: #ffd600
}

.contract-card__btn {
    margin-top: auto;
    width: 100%
}

.contract-card_won-drop {
    background: #0c121b;
    border: 5px solid #0d323f80;
    border-radius: 32px
}

.contract-card_won-drop:before,
.contract-card_won-drop>* {
    opacity: 0
}

.layout-contract__items {
    margin-top: 30px
}

@media (min-width:768px) {
    .layout-contract__items {
        margin-top: 42px
    }
}

.contract-counter {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 7px
}

.contract-counter__value {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px
}

.contract-counter__items {
    display: flex;
    gap: 10px
}

.contract-counter__item {
    background: hsla(0, 0%, 85%, .4);
    height: 8px;
    -webkit-mask-image: url(/assets/search.svg?v=2);
    mask-image: url(/assets/contract-bullet.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    width: 4px
}

.contract-counter__item_active {
    background: #f3b705
}

.contract-drop-preview,
.contract-drop-preview__skin {
    align-items: center;
    display: flex;
    flex-direction: column
}

.contract-drop-preview__skin {
    background-image: url(/assets/rarity/drop-preview/common.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100%;
    height: 210px;
    padding: 45px 17px 0;
    position: relative;
    text-align: center;
    width: 170px;
    z-index: 1
}

@media (min-width:1024px) {
    .contract-drop-preview__skin {
        height: 320px;
        width: 270px
    }
}

.contract-drop-preview__skin:after {
    background: rgba(173, 183, 197, .8);
    border-radius: 50%;
    content: "";
    display: block;
    filter: blur(50px);
    height: 190px;
    left: 50%;
    position: absolute;
    top: 20px;
    transform: translate(-50%);
    width: 190px;
    z-index: -1
}

.contract-drop-preview__img {
    min-height: 102px
}

@media (min-width:1024px) {
    .contract-drop-preview__img {
        min-height: 177px
    }
}

.contract-drop-preview__item-type {
    color: hsla(0, 0%, 85%, .4);
    font-size: 11px;
    line-height: 13px;
    margin-top: 10px
}

@media (min-width:1024px) {
    .contract-drop-preview__item-type {
        font-size: 13px;
        line-height: 20px
    }
}

.contract-drop-preview__item-name {
    font-size: 11px;
    font-weight: 600;
    line-height: 13px
}

@media (min-width:1024px) {
    .contract-drop-preview__item-name {
        font-size: 16px;
        line-height: 24px
    }
}

.contract-drop-preview__item-withdraw {
    color: rgba(174, 191, 217, .8);
    font-size: 16px;
    line-height: 24px;
    margin-top: 60px;
    text-align: center
}

@media (min-width:768px) {
    .contract-drop-preview__item-withdraw {
        margin-top: 70px
    }
}

.contract-drop-preview__item-withdraw a {
    color: #ffd600
}

.contract-drop-preview__item-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 20px
}

@media (min-width:1024px) {
    .contract-drop-preview__item-actions {
        margin-top: 30px
    }
}

.contract-drop-preview.common .contract-drop-preview__skin {
    background-image: url(/assets/rarity/contract/drop-preview/common.svg)
}

.contract-drop-preview.common .contract-drop-preview__skin:after {
    background-color: hsla(0, 0%, 66%, .8)
}

.contract-drop-preview.uncommon .contract-drop-preview__skin {
    background-image: url(/assets/rarity/contract/drop-preview/uncommon.svg)
}

.contract-drop-preview.uncommon .contract-drop-preview__skin:after {
    background-color: rgba(27, 206, 255, .8)
}

.contract-drop-preview.milspec .contract-drop-preview__skin {
    background-image: url(/assets/rarity/contract/drop-preview/milspec.svg)
}

.contract-drop-preview.milspec .contract-drop-preview__skin:after {
    background-color: rgba(16, 104, 255, .8)
}

.contract-drop-preview.restricted .contract-drop-preview__skin {
    background-image: url(/assets/rarity/contract/drop-preview/restricted.svg)
}

.contract-drop-preview.restricted .contract-drop-preview__skin:after {
    background-color: rgba(140, 83, 255, .8)
}

.contract-drop-preview.classified .contract-drop-preview__skin {
    background-image: url(/assets/rarity/contract/drop-preview/classified.svg)
}

.contract-drop-preview.classified .contract-drop-preview__skin:after {
    background-color: rgba(247, 57, 255, .8)
}

.contract-drop-preview.covert .contract-drop-preview__skin {
    background-image: url(/assets/rarity/contract/drop-preview/covert.svg)
}

.contract-drop-preview.covert .contract-drop-preview__skin:after {
    background-color: rgba(255, 61, 0, .8)
}

.contract-drop-preview.rare .contract-drop-preview__skin {
    background-image: url(/assets/rarity/contract/drop-preview/rare.svg)
}

.contract-drop-preview.rare .contract-drop-preview__skin:after {
    background-color: rgba(255, 212, 26, .8)
}

.contract-drop-preview_mini .contract-drop-preview__skin {
    height: 195px;
    margin-top: 20px;
    padding: 25px 10px 0;
    width: 150px
}

@media (min-width:768px) {
    .contract-drop-preview_mini .contract-drop-preview__skin {
        height: 260px;
        padding: 33px 12px 0;
        width: 200px
    }
}

@media (min-width:1024px) {
    .contract-drop-preview_mini .contract-drop-preview__skin {
        height: 350px;
        padding: 45px 17px 0;
        width: 270px
    }
}

.contract-drop-preview_mini .contract-drop-preview__skin:after {
    height: 106px;
    width: 106px
}

@media (min-width:1024px) {
    .contract-drop-preview_mini .contract-drop-preview__skin:after {
        height: 190px;
        width: 190px
    }
}

.contract-drop-preview_mini .contract-drop-preview__img {
    min-height: 97px
}

@media (min-width:768px) {
    .contract-drop-preview_mini .contract-drop-preview__img {
        min-height: 132px
    }
}

@media (min-width:1024px) {
    .contract-drop-preview_mini .contract-drop-preview__img {
        min-height: 177px
    }
}

.contract-drop-preview_mini .contract-drop-preview__item-type {
    font-size: 10px;
    line-height: 15px;
    margin-top: 0
}

@media (min-width:768px) {
    .contract-drop-preview_mini .contract-drop-preview__item-type {
        font-size: 13px;
        line-height: 20px
    }
}

@media (min-width:1024px) {
    .contract-drop-preview_mini .contract-drop-preview__item-type {
        margin-top: 10px
    }
}

.contract-drop-preview_mini .contract-drop-preview__item-name {
    font-size: 12px;
    line-height: 18px
}

@media (min-width:768px) {
    .contract-drop-preview_mini .contract-drop-preview__item-name {
        font-size: 16px;
        line-height: 24px
    }
}

.panel {
    background: rgba(18, 26, 37, .5);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding: 10px
}

@media (min-width:768px) {
    .panel {
        border-radius: 30px;
        padding: 20px
    }
}

.panel__title {
    flex: none;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    margin-bottom: 10px
}

.panel__filters {
    flex: none;
    margin-bottom: 20px
}

.panel__content {
    flex-grow: 1;
    overflow-y: auto;
    padding-right: 3px
}

.panel__content::-webkit-scrollbar-track {
    background-color: transparent
}

.panel__content::-webkit-scrollbar {
    height: 3px;
    width: 3px
}

.panel__content::-webkit-scrollbar-thumb {
    background-color: rgba(115, 140, 178, .2)
}

.panel__loadmore {
    display: flex;
    justify-content: center;
    margin: 10px 0 0
}

.panel-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

@media (min-width:768px) {
    .panel-filters {
        flex-wrap: nowrap
    }
}

@media not screen and (min-width:768px) {
    .panel-filters__search {
        flex: 1 1 0
    }
}

@media (min-width:768px) {
    .panel-filters__search {
        order: 1
    }
}

.panel-filters__price {
    display: flex;
    gap: 10px
}

@media not screen and (min-width:768px) {
    .panel-filters__price {
        width: 100%
    }
}

@media (min-width:768px) {
    .panel-filters__price {
        order: 2
    }
}

@media not screen and (min-width:768px) {

    .panel-filters__price-from,
    .panel-filters__price-to {
        flex: 1 1 0
    }
}

.panel-filters__sort {
    flex: 0 0 auto;
    flex-shrink: 0;
    margin-left: auto
}

@media (min-width:768px) {
    .panel-filters__sort {
        order: 3
    }
}

@media not screen and (min-width:1250px) {
    .panel-filters_upgrade {
        flex-wrap: wrap
    }

    .panel-filters_upgrade .panel-filters__sort {
        order: 2
    }

    .panel-filters_upgrade .panel-filters__price {
        width: 100%
    }

    .panel-filters__price-from,
    .panel-filters__price-to {
        flex: 1 1 0
    }
}

@media (min-width:1250px) {

    .panel-filters__price-from,
    .panel-filters__price-to {
        min-width: 100px
    }
}

.item-wrapper {
    position: relative
}

.item-wrapper:after,
.item-wrapper:before,
.item-wrapper__added {
    backdrop-filter: blur(6px);
    background: rgba(1, 8, 18, .3);
    border-radius: 50%;
    height: 60px;
    width: 60px;
    z-index: 1
}

.item-wrapper:after,
.item-wrapper:before,
.item-wrapper__added,
.item-wrapper__added:before {
    content: "";
    display: block;
    left: 50%;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: .2s ease
}

.item-wrapper__added:before {
    background-color: #84a900;
    height: 24px;
    width: 24px
}

.item-wrapper:after,
.item-wrapper:before {
    backdrop-filter: none;
    background-color: transparent;
    background-position: 50%;
    background-repeat: no-repeat;
    transition: .2s ease;
    z-index: 2
}

.item-wrapper:before {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTExIDBhMTEgMTEgMCAxIDAgMTEgMTFBMTEuMDEzIDExLjAxMyAwIDAgMCAxMSAwWm0wIDIwYTkgOSAwIDEgMSA5LTkgOS4wMSA5LjAxIDAgMCAxLTkgOVptNS05YTEgMSAwIDAgMS0xIDFoLTN2M2ExIDEgMCAwIDEtMiAwdi0zSDdhMSAxIDAgMCAxIDAtMmgzVjdhMSAxIDAgMCAxIDIgMHYzaDNhMSAxIDAgMCAxIDEgMVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=")
}

.item-wrapper:after {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTIxIDRoLTVWMWExIDEgMCAwIDAtMS0xSDdhMSAxIDAgMCAwLTEgMXYzSDFhMSAxIDAgMCAwIDAgMmgxLjA2MUwzIDIxLjA2M0ExIDEgMCAwIDAgNCAyMmgxNGExIDEgMCAwIDAgMS0uOTM3TDE5LjkzOSA2SDIxYTEgMSAwIDEgMCAwLTJaTTggMmg2djJIOFYyWm05LjA2MSAxOEg0LjkzOUw0LjA2NCA2aDEzLjg3MmwtLjg3NSAxNFpNOCAxMHY2YTEgMSAwIDEgMS0yIDB2LTZhMSAxIDAgMCAxIDIgMFptNCAwdjZhMSAxIDAgMCAxLTIgMHYtNmExIDEgMCAwIDEgMiAwWm0zLTFhMSAxIDAgMCAxIDEgMXY2YTEgMSAwIDAgMS0yIDB2LTZhMSAxIDAgMCAxIDEtMVoiIGZpbGw9IiNGRjRFMTgiLz48L3N2Zz4=")
}

.item-wrapper_added .item-wrapper__added,
.item-wrapper_added .item-wrapper__added:before {
    opacity: 1
}

.item-wrapper_added .item-wrapper__item {
    opacity: .5
}

.item-wrapper:hover .item-wrapper__added,
.item-wrapper:hover:not(.item-wrapper_added):before,
.item-wrapper_added.item-wrapper:hover:after {
    opacity: 1
}

.item-wrapper_added.item-wrapper:hover .item-wrapper__added:before {
    opacity: 0
}

.upgrade-layout__upgrade {
    position: relative
}

.upgrade-layout__upgrade:before {
    background: url(/assets/upgrade/upgrade-bg.svg) 50% no-repeat;
    background-size: contain;
    content: "";
    height: 552px;
    left: 50%;
    margin-top: -155px;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: 595px;
    z-index: -1
}

@media (min-width:768px) {
    .upgrade-layout__upgrade:before {
        height: 736px;
        margin-top: -200px;
        width: 794px
    }

    .upgrade-layout__tabs {
        margin: 30px 0
    }
}

@media (min-width:1024px) {
    .upgrade-layout__tabs {
        display: none
    }
}

.upgrade-layout__panels {
    margin-top: 10px
}

@media (min-width:1024px) {
    .upgrade-layout__panels {
        display: flex;
        gap: 20px;
        margin-top: 70px
    }
}

@media not screen and (min-width:1024px) {
    .upgrade-layout__panel {
        display: none
    }
}

@media (min-width:1024px) {
    .upgrade-layout__panel {
        flex: 1 1 0;
        max-height: 500px;
        min-width: 0
    }
}

@media not screen and (min-width:1024px) {
    .upgrade-layout__panel.active {
        display: block
    }
}

.upgrade-input {
    -moz-appearance: textfield;
    background-color: #080c12;
    font-size: 24px;
    font-weight: 700;
    height: 30px
}

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

.upgrade__slider {
    min-width: -webkit-fill-available;
    pointer-events: none
}

.upgrade__slider .irs-line {
    background: #0d1822;
    height: 4px
}

.upgrade__slider .irs-line .irs-line-left,
.upgrade__slider .irs-line .irs-line-mid,
.upgrade__slider .irs-line .irs-line-right {
    height: 4px
}

.upgrade__slider .irs-bar-edge {
    background: #a1058f;
    height: 4px
}

.upgrade__slider .irs-bar {
    background: linear-gradient(90deg, #a1058f, #058398);
    height: 4px;
    pointer-events: auto
}

.upgrade__slider .irs-slider {
    pointer-events: auto;
    top: 21px
}

@media (min-width:768px) {
    .upgrade__slider_item {
        margin: -36px auto 0;
        padding: 0 15px
    }
}

.upgrade__slider_hidden {
    opacity: 0;
    visibility: hidden
}

@media (min-width:1024px) {
    .upgrade {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 0 auto;
        max-width: 320px
    }
}

@media (min-width:1250px) {
    .upgrade {
        max-width: 350px
    }
}

.upgrade__items {
    display: flex;
    gap: 10px;
    margin-bottom: 15px
}

@media (min-width:768px) {
    .upgrade__items {
        gap: 27px;
        margin-bottom: 30px
    }
}

@media (min-width:1024px) {
    .upgrade__items {
        gap: 402px;
        left: 50%;
        max-width: 1260px;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%
    }
}

@media (min-width:1250px) {
    .upgrade__items {
        gap: 480px
    }
}

.upgrade__item {
    flex: 1 1 0;
    min-width: 0
}

@media (min-width:1024px) {
    .upgrade__item {
        align-items: center;
        display: flex;
        flex-direction: column
    }
}

.upgrade__x-text {
    color: rgba(174, 191, 217, .8);
    display: flex;
    font-size: 13px;
    justify-content: space-between;
    line-height: 20px;
    margin: 15px 0
}

.upgrade__x {
    margin-top: 10px
}

.upgrade__btn {
    margin: 30px 0
}

@media (min-width:1024px) {
    .upgrade__tabs {
        display: none
    }
}

.upgrade__tabs-desktop {
    margin-top: 20px
}

@media not screen and (min-width:1024px) {
    .upgrade__tabs-desktop {
        display: none
    }
}

.upgrade-drop-preview {
    display: flex;
    flex-direction: column;
    gap: 10px;
    user-select: none;
    width: 100%
}

.upgrade-drop-preview__skin {
    align-items: center;
    aspect-ratio: 17/15;
    background-color: #0d131c;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 100%;
    display: flex;
    flex: none;
    flex-direction: column;
    justify-content: center;
    -webkit-mask-image: url(/assets/rarity/upgrade/mask.svg);
    mask-image: url(/assets/rarity/upgrade/mask.svg);
    -webkit-mask-position: center bottom;
    mask-position: center bottom;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    overflow: hidden;
    position: relative;
    text-align: center;
    z-index: 1
}

.upgrade-drop-preview__skin:after,
.upgrade-drop-preview__skin:before {
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.upgrade-drop-preview__skin:before {
    z-index: -1
}

.upgrade-drop-preview__img {
    animation: levitation 8s linear infinite;
    backface-visibility: hidden;
    margin-top: 10%;
    transform-origin: center;
    user-select: none;
    width: 90%;
    will-change: transform;
    z-index: 2
}

@media not screen and (min-width:768px) {
    .upgrade-drop-preview__img {
        animation-name: levitation_mob
    }
}

.upgrade-drop-preview__img img {
    user-select: none
}

.upgrade-drop-preview__info {
    align-items: center;
    border: 1px solid #151d2a;
    border-radius: 17px;
    display: flex;
    gap: 10px;
    height: 56px;
    justify-content: space-between;
    padding: 0 10px;
    text-align: left
}

@media (min-width:768px) {
    .upgrade-drop-preview__info {
        height: 85px;
        padding: 0 20px
    }
}

.upgrade-drop-preview__info_warning {
    justify-content: center
}

.upgrade-drop-preview__name-price {
    min-width: 0
}

.upgrade-drop-preview__item-name,
.upgrade-drop-preview__warning {
    color: rgba(174, 191, 217, .8);
    font-size: 11px;
    line-height: 16px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

@media (min-width:768px) {

    .upgrade-drop-preview__item-name,
    .upgrade-drop-preview__warning {
        font-size: 13px;
        line-height: 20px
    }
}

.upgrade-drop-preview__item-price {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px
}

@media (min-width:768px) {
    .upgrade-drop-preview__item-price {
        font-size: 20px;
        font-weight: 700;
        line-height: 28px
    }
}

@media (min-width:768px) and (min-width:768px) {
    .upgrade-drop-preview__item-price {
        font-size: 24px;
        line-height: 31px
    }
}

.upgrade-drop-preview__warning {
    color: #ffd600;
    text-align: center
}

@media (min-width:768px) {

    .upgrade-drop-preview__btn,
    .upgrade-drop-preview__next,
    .upgrade-drop-preview__prev {
        height: 46px;
        width: 46px !important
    }
}

.upgrade-drop-preview__btn {
    flex: none
}

.upgrade-drop-preview__next,
.upgrade-drop-preview__prev {
    backdrop-filter: blur(5px);
    bottom: 10px;
    position: absolute;
    z-index: 3
}

@media (min-width:768px) {

    .upgrade-drop-preview__next,
    .upgrade-drop-preview__prev {
        bottom: 20px
    }
}

.upgrade-drop-preview__prev {
    left: 10px;
    transform: scaleX(-1)
}

@media (min-width:768px) {
    .upgrade-drop-preview__prev {
        left: 20px
    }
}

.upgrade-drop-preview__next {
    right: 10px
}

@media (min-width:768px) {
    .upgrade-drop-preview__next {
        right: 20px
    }
}

.upgrade-drop-preview.common .upgrade-drop-preview__skin:before {
    background-image: url(/assets/rarity/upgrade/common.svg?v=2)
}

.upgrade-drop-preview.common .upgrade-drop-preview__skin:after {
    background-image: url(/assets/rarity/upgrade/common.png)
}

.upgrade-drop-preview.uncommon .upgrade-drop-preview__skin:before {
    background-image: url(/assets/rarity/upgrade/uncommon.svg?v=2)
}

.upgrade-drop-preview.uncommon .upgrade-drop-preview__skin:after {
    background-image: url(/assets/rarity/upgrade/uncommon.png)
}

.upgrade-drop-preview.milspec .upgrade-drop-preview__skin:before {
    background-image: url(/assets/rarity/upgrade/milspec.svg?v=2)
}

.upgrade-drop-preview.milspec .upgrade-drop-preview__skin:after {
    background-image: url(/assets/rarity/upgrade/milspec.png)
}

.upgrade-drop-preview.restricted .upgrade-drop-preview__skin:before {
    background-image: url(/assets/rarity/upgrade/restricted.svg?v=2)
}

.upgrade-drop-preview.restricted .upgrade-drop-preview__skin:after {
    background-image: url(/assets/rarity/upgrade/restricted.png)
}

.upgrade-drop-preview.classified .upgrade-drop-preview__skin:before {
    background-image: url(/assets/rarity/upgrade/classified.svg?v=2)
}

.upgrade-drop-preview.classified .upgrade-drop-preview__skin:after {
    background-image: url(/assets/rarity/upgrade/classified.png)
}

.upgrade-drop-preview.covert .upgrade-drop-preview__skin:before {
    background-image: url(/assets/rarity/upgrade/covert.svg?v=2)
}

.upgrade-drop-preview.covert .upgrade-drop-preview__skin:after {
    background-image: url(/assets/rarity/upgrade/covert.png)
}

.upgrade-drop-preview.rare .upgrade-drop-preview__skin:before {
    background-image: url(/assets/rarity/upgrade/rare.svg?v=2)
}

.upgrade-drop-preview.rare .upgrade-drop-preview__skin:after {
    background-image: url(/assets/rarity/upgrade/rare.png)
}

@keyframes levitation {
    0% {
        transform: translateY(0) rotate(0deg) scale(1)
    }

    25% {
        transform: translateY(-6px) rotate(.4deg) scale(1.012)
    }

    50% {
        transform: translateY(-12px) rotate(-.4deg) scale(1.02)
    }

    75% {
        transform: translateY(-6px) rotate(.4deg) scale(1.012)
    }

    to {
        transform: translateY(0) rotate(0deg) scale(1)
    }
}

@keyframes levitation_mob {
    0% {
        transform: translate(0)
    }

    25% {
        transform: translateY(7px) rotate(2deg)
    }

    75% {
        transform: translateY(-7px) rotate(-2deg)
    }

    to {
        transform: translate(0)
    }
}

.upgrade-status,
.upgrade-status__wheel-wrapper {
    align-items: center;
    display: flex;
    flex-direction: column
}

.upgrade-status__wheel-wrapper {
    height: 125px;
    justify-content: flex-end;
    margin-top: -28px;
    overflow: hidden;
    position: relative;
    width: 231px;
    z-index: -1
}

@media (min-width:768px) {
    .upgrade-status__wheel-wrapper {
        height: 165px;
        margin-top: -36px;
        width: 308px
    }
}

.upgrade-status__wheel-wrapper:before {
    background: url(/assets/upgrade/upgrade-wheel.svg) 50% no-repeat;
    background-size: 100%;
    bottom: 0;
    content: "";
    display: block;
    height: 232px;
    left: 50%;
    position: absolute;
    transform: translate(-50%);
    width: 232px;
    z-index: -1
}

@media (min-width:768px) {
    .upgrade-status__wheel-wrapper:before {
        height: 308px;
        width: 308px
    }
}

.upgrade-status__wheel-wrapper:after {
    background: url(/assets/upgrade/upgrade-line.svg) 50% no-repeat;
    bottom: 0;
    content: "";
    display: none;
    height: 88px;
    left: 50%;
    position: absolute;
    transform: translate(-50%);
    width: 22px
}

@media (min-width:768px) {
    .upgrade-status__wheel-wrapper:after {
        height: 88px;
        width: 22px
    }
}

.upgrade-status__wheel {
    bottom: 10px;
    height: 214px;
    position: relative;
    transform: scaleX(-1);
    width: 214px
}

@media (min-width:768px) {
    .upgrade-status__wheel {
        bottom: 12px;
        height: 285px;
        width: 285px
    }
}

.upgrade-status_progress .upgrade-status__wheel-wrapper:after {
    display: block
}

.upgrade-status-badge {
    align-items: center;
    background: url(/assets/upgrade/upgrade-state.svg) 50% no-repeat;
    background-size: 100%;
    display: flex;
    flex-direction: column;
    height: 100px;
    padding: 26px 0 0;
    text-align: center;
    width: 306px
}

@media (min-width:768px) {
    .upgrade-status-badge {
        height: 133px;
        padding: 38px 0 0;
        width: 408px
    }
}

.upgrade-status-badge__label {
    align-items: center;
    color: rgba(174, 191, 217, .8);
    display: flex;
    flex-direction: column;
    font-size: 11px;
    line-height: 16px;
    max-width: 40%
}

.upgrade-status-badge__label:before {
    background-color: rgba(174, 191, 217, .8);
    height: 24px;
    width: 24px
}

.upgrade-status-badge__value {
    color: #a1bcc4;
    font-size: 34px;
    font-weight: 800
}

@media (min-width:768px) {
    .upgrade-status-badge__value {
        font-size: 44px
    }
}

.upgrade-status-badge_chance .upgrade-status-badge__label {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.upgrade-status-badge_failed .upgrade-status-badge__label,
.upgrade-status-badge_success .upgrade-status-badge__label {
    font-size: 10px;
    font-weight: 600;
    line-height: 14px
}

@media (min-width:768px) {

    .upgrade-status-badge_failed .upgrade-status-badge__label,
    .upgrade-status-badge_success .upgrade-status-badge__label {
        font-size: 13px;
        font-weight: 600;
        line-height: 20px
    }
}

.upgrade-status-badge_failed {
    background-image: url(/assets/upgrade/upgrade-state-failed.svg)
}

.upgrade-status-badge_failed .upgrade-status-badge__label {
    color: #ff4e18
}

.upgrade-status-badge_failed .upgrade-status-badge__label:before {
    background-color: #ff4e18
}

.upgrade-status-badge_success {
    background-image: url(/assets/upgrade/upgrade-state-success.svg)
}

.upgrade-status-badge_success .upgrade-status-badge__label {
    color: #84a900
}

.upgrade-status-badge_success .upgrade-status-badge__label:before {
    background-color: #84a900
}

.battle-page {
    padding: 0 0 40px
}

.battle-page__game {
    margin-top: 20px
}

.battles-page__title {
    margin-bottom: 30px
}

.battles-page__section {
    margin-top: 20px
}

.battles-page__section-title {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 26px;
    text-transform: uppercase
}

.battles-page__section-item,
.battles-page__section-items {
    margin-top: 10px
}

.battles-page__tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 25px
}

.battles-topbar {
    background: #0c121b;
    border-radius: 8px;
    padding: 10px
}

@media (min-width:768px) {
    .battles-topbar {
        border-radius: 30px;
        padding: 20px
    }
}

@media (min-width:1250px) {
    .battles-topbar__content {
        display: flex;
        gap: 5px;
        justify-content: space-between
    }
}

.battles-topbar__sections {
    display: flex;
    min-width: 0
}

.battles-topbar__sections_controls {
    gap: 10px;
    justify-content: space-between
}

@media (min-width:768px) {
    .battles-topbar__sections_controls {
        justify-content: flex-start
    }
}

@media not screen and (min-width:1250px) {
    .battles-topbar__sections_controls {
        margin-top: 10px
    }
}

.battles-topbar__section {
    align-items: center;
    display: flex
}

.battles-topbar__section_switch {
    min-width: 150px
}

.battles-topbar__stat-groups,
.battles-topbar__stats {
    display: flex;
    min-width: 0
}

.battles-topbar__stats {
    gap: 10px;
    justify-content: space-between;
    width: 100%
}

.battles-topbar_multi .battles-topbar__sections_controls {
    flex-direction: column;
    gap: 12px
}

@media (min-width:768px) {
    .battles-topbar_multi .battles-topbar__sections_controls {
        flex-direction: row;
        gap: 8px
    }
}

.battles-topbar__stats-item {
    display: none;
    flex: 1 1 0
}

.battles-topbar__stats-item_active,
.battles-topbar__stats-item_loses,
.battles-topbar__stats-item_wins {
    display: block
}

@media (min-width:768px) {
    .battles-topbar__stats-item_all {
        display: block
    }
}

.battles-topbar__stats-item_active {
    min-width: 0
}

.stats-item {
    align-items: center;
    background: rgba(18, 26, 37, .5);
    border-radius: 10px;
    display: flex;
    height: 68px;
    justify-content: center;
    padding: 10px;
    text-align: center
}

@media (min-width:768px) {
    .stats-item {
        height: 78px;
        padding: 0 20px
    }
}

.stats-item_content {
    min-width: 0
}

.stats-item__value {
    align-items: center;
    display: flex;
    font-size: 22px;
    font-weight: 700;
    gap: 5px;
    justify-content: center;
    line-height: 26px;
    text-transform: uppercase;
    white-space: nowrap
}

.stats-item__value:before {
    background-color: #fff;
    height: 18px;
    width: 18px
}

.stats-item__label {
    color: rgba(174, 191, 217, .8);
    font-size: 11px;
    line-height: 16px;
    margin-top: 2px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.stats-item_battles .stats-item__value {
    color: #f3b705
}

.stats-item_battles .stats-item__value:before {
    background-color: #f3b705
}

.stats-item_wins .stats-item__value {
    color: #84a900
}

.stats-item_wins .stats-item__value:before {
    background-color: #84a900
}

.stats-item_loses .stats-item__value {
    color: #ff4e18
}

.stats-item_loses .stats-item__value:before {
    background-color: #ff4e18
}

.battles-page-grid {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(144px, 1fr))
}

@media (min-width:768px) {
    .battles-page-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
    }
}

.battles-page-grid_in-popup {
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
    padding: 18px 0
}

@media (min-width:768px) {
    .battles-page-grid_in-popup {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
    }
}

.battles-page-grid_multibattles {
    min-height: 278px
}

.battle-item {
    background-color: #0c121b;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    overflow: hidden;
    padding: 10px;
    position: relative;
    text-align: center
}

@media (min-width:768px) {
    .battle-item {
        border-radius: 30px;
        padding: 20px
    }
}

.battle-item:after {
    border-radius: 20px;
    content: "";
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%
}

@media (min-width:768px) {
    .battle-item:after {
        border-radius: 30px
    }
}

.battle-item__btn {
    margin-top: 10px;
    width: 100%
}

.battle-item__enter {
    align-items: center;
    background-color: #6dae01;
    clip-path: polygon(0 0, 100% 0, 92% 100%, 8% 100%);
    display: none;
    font-size: 13px;
    font-weight: 600;
    left: 50%;
    line-height: 16px;
    padding: 4px 17px 5px;
    position: absolute;
    top: 0;
    transform: translate(-50%)
}

.battle-item__enter:before {
    margin-right: 2px
}

.battle-item__img {
    align-items: center;
    display: flex;
    flex-grow: 1
}

.battle-item__title {
    color: rgba(174, 191, 217, .8);
    font-size: 11px;
    line-height: 16px;
    margin-top: 5px
}

.battle-item__price {
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    text-align: center
}

.battle-item__create,
.battle-item__user {
    align-items: center;
    background: #1f1843;
    bottom: 0;
    color: #fff;
    cursor: var(--cursor-pointer);
    display: flex;
    font-size: 13px;
    font-weight: 600;
    justify-content: center;
    left: 0;
    line-height: 16px;
    padding: 8px 0 10px;
    position: absolute;
    transition: .3s ease;
    width: 100%
}

.battle-item__create:before,
.battle-item__user:before {
    height: 14px;
    margin-right: 5px;
    width: 14px
}

.battle-item__create:hover,
.battle-item__user:hover {
    background: #302569
}

.battle-item__user {
    background: rgba(109, 174, 1, .2)
}

.battle-item__user-img {
    border-radius: 50%;
    flex: none;
    height: 16px;
    margin-right: 5px;
    overflow: hidden;
    width: 16px
}

.battle-item__user-img img {
    width: 100%
}

.battle-item__user-name {
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.battle-item_waiting:after {
    background: linear-gradient(180deg, rgba(243, 183, 5, 0), rgba(243, 183, 5, .08))
}

.battle-item_waiting .battle-item__create:hover,
.battle-item_waiting .battle-item__user:hover {
    background: rgba(109, 174, 1, .6)
}

.battle-game {
    position: relative
}

@media (min-width:1250px) {
    .battle-game:before {
        background: url(/assets/battles/battle-bg.svg) 50% no-repeat;
        background-size: contain;
        content: "";
        display: block;
        height: 736px;
        left: 50%;
        position: absolute;
        top: -153px;
        transform: translate(-50%);
        width: 794px
    }
}

.battle-game__case-and-players {
    position: relative
}

@media (min-width:768px) {
    .battle-game__case-and-players {
        align-items: flex-end;
        display: flex;
        justify-content: center;
        min-height: 329px
    }
}

.battle-game__case {
    align-items: center;
    display: flex
}

@media not screen and (min-width:768px) {
    .battle-game__case {
        background-color: #0c121b;
        border-radius: 10px;
        gap: 10px;
        padding: 10px
    }
}

@media (min-width:768px) {
    .battle-game__case {
        background: url(/assets/battles/battle-case-bg.svg) 50% no-repeat;
        background-size: contain;
        bottom: 0;
        flex-direction: column;
        height: 329px;
        justify-content: center;
        left: 50%;
        padding-bottom: 80px;
        padding-top: 17px;
        position: absolute;
        transform: translate(-50%);
        width: 282px
    }
}

.battle-game__case-img {
    flex: none
}

@media not screen and (min-width:768px) {
    .battle-game__case-img {
        width: 50px
    }
}

@media (min-width:768px) {
    .battle-game__case-img {
        order: 1;
        width: 216px
    }
}

.battle-game__case-img img {
    width: 100%
}

@media not screen and (min-width:768px) {
    .battle-game__case-name {
        color: rgba(174, 191, 217, .8);
        font-size: 13px;
        font-weight: 600;
        line-height: 20px
    }
}

@media (min-width:768px) {
    .battle-game__case-name {
        background-clip: text;
        background-image: linear-gradient(#fff, #0c121b 150%);
        background-position: 50%;
        color: transparent;
        font-size: 16px;
        font-weight: 600;
        line-height: 24px;
        order: 0;
        text-transform: uppercase
    }
}

.battle-game__case-price {
    color: #ffd600;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px
}

@media (min-width:768px) {
    .battle-game__case-price {
        bottom: 43px;
        font-size: 20px;
        left: 50%;
        line-height: 140%;
        position: absolute;
        transform: translate(-50%)
    }
}

.battle-game__players {
    margin-top: 10px
}

@media (min-width:768px) {
    .battle-game__players {
        display: flex;
        gap: 292px;
        justify-content: center
    }
}

@media (min-width:1024px) {
    .battle-game__players {
        gap: 40px;
        justify-content: space-around;
        width: 100%
    }
}

@media not screen and (min-width:768px) {
    .battle-game__player {
        height: 320px
    }
}

.battle-game__btns {
    display: flex;
    flex-direction: column;
    gap: 10px
}

@media not screen and (min-width:768px) {
    .battle-game__btns {
        width: 100%
    }
}

@media (min-width:768px) {
    .battle-game__btns {
        align-items: center;
        flex-direction: row;
        justify-content: center;
        margin-top: 50px
    }
}

@media not screen and (min-width:768px) {
    .battle-game__btn {
        width: 100%
    }
}

.battle-game__roulettes {
    left: 0;
    padding-top: 70px;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%
}

@media (min-width:768px) {
    .battle-game__roulettes {
        display: flex;
        gap: 30px;
        padding-top: 30px;
        position: relative
    }
}

@media (min-width:1024px) {
    .battle-game__roulettes {
        gap: 40px
    }
}

.battle-game__roulettes .roulette {
    min-width: 0
}

@media not screen and (min-width:768px) {
    .battle-game__roulettes .roulette {
        height: 320px;
        padding-top: 40px
    }
}

.battle-player__info {
    align-items: center;
    background: #0c121b;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    padding: 10px
}

@media (min-width:768px) {
    .battle-player__info {
        background: url(/assets/battles/multibattle-user-bg.svg) 50% no-repeat;
        flex: none;
        flex-direction: column;
        height: 280px;
        justify-content: flex-start;
        margin: 0 auto;
        padding: 68px 0 0;
        position: relative;
        text-align: center;
        width: 210px
    }
}

.battle-player__user {
    align-items: center;
    display: flex;
    gap: 8px
}

@media (min-width:768px) {
    .battle-player__user {
        flex-direction: column;
        font-size: 14px
    }
}

.battle-player__user-img {
    background: #172438;
    border-radius: 50%;
    flex: none;
    height: 50px;
    overflow: hidden;
    padding: 2px;
    position: relative;
    width: 50px
}

@media (min-width:768px) {
    .battle-player__user-img {
        border: 0;
        height: 76px;
        padding: 6px;
        width: 76px
    }
}

.battle-player__user-img_waiting {
    background: #0c121b;
    border: 3px solid #172438
}

.battle-player__user-img_waiting:before {
    animation: spin 2s linear infinite;
    background-image: url(/assets/battles/waiting-user.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.battle-player__user-img img {
    border-radius: 50%;
    display: block;
    overflow: hidden
}

.battle-player__user-name {
    color: rgba(174, 191, 217, .8);
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    max-width: 150px;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap
}

@media (min-width:768px) {
    .battle-player__user-name {
        margin-top: 3px;
        max-width: 110px
    }
}

.battle-player__user-role {
    color: #f3b705;
    font-size: 11px;
    line-height: 16px
}

.battle-player__status {
    align-items: center;
    display: flex;
    font-size: 18px;
    font-weight: 700;
    height: 32px;
    max-width: 100%;
    position: relative
}

@media (min-width:768px) {
    .battle-player__status {
        height: 28px;
        position: absolute;
        top: 32px
    }

    .battle-player__status_btn {
        height: 42px;
        padding: 0 12px;
        top: 20px
    }
}

.battle-player__status-text {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis
}

@media (min-width:768px) {
    .battle-player__status-text {
        font-size: 16px;
        font-weight: 700;
        line-height: 20px
    }
}

@media (min-width:768px) and (min-width:768px) {
    .battle-player__status-text {
        font-size: 20px;
        line-height: 140%
    }
}

.battle-player.win .battle-player__status {
    color: #84a900
}

.battle-player.win .battle-player__info {
    background: #84a9000d
}

@media (min-width:768px) {
    .battle-player.win .battle-player__info {
        background: url(/assets/battles/multibattle-user-bg-winner.svg)
    }
}

.battle-player.lose .battle-player__status {
    color: #ff4e18
}

@media (min-width:768px) {
    .battle-player.lose .battle-player__info {
        background-image: url(/assets/battles/multibattle-user-bg-looser.svg)
    }

    .battle-layout {
        padding-top: 40px
    }

    .battle-layout__title {
        display: none
    }
}

.multibattle {
    background: #0c121b;
    border-radius: 20px;
    padding: 10px;
    position: relative;
    width: 100%
}

@media (min-width:768px) {
    .multibattle {
        border-radius: 30px;
        padding: 20px
    }
}

@media (min-width:1250px) {
    .multibattle {
        padding: 15px
    }
}

.multibattle__playing:before {
    background-color: #6dae01;
    border-radius: 10px;
    content: "";
    height: 10px;
    position: absolute;
    right: 10px;
    top: 10px;
    width: 10px
}

@media (min-width:1250px) {
    .multibattle {
        align-items: center;
        display: flex;
        gap: 55px
    }
}

.multibattle__cases {
    display: flex;
    gap: 9px
}

@media (min-width:768px) {
    .multibattle__cases {
        gap: 30px
    }
}

.multibattle__cases-list {
    align-items: center;
    display: flex;
    gap: 6px
}

@media (min-width:768px) {
    .multibattle__cases-list {
        gap: 10px
    }
}

@media (min-width:1250px) {
    .multibattle__cases-list {
        flex: none;
        width: 330px
    }
}

.multibattle__cases-count,
.multibattle__cases-plus {
    align-items: center;
    background: rgba(115, 140, 178, .05);
    border-radius: 18px;
    display: flex;
    font-size: 20px;
    font-weight: 700;
    height: 60px;
    justify-content: center;
    width: 57px
}

@media (min-width:1250px) {

    .multibattle__cases-count,
    .multibattle__cases-plus {
        height: 82px;
        width: 82px
    }
}

.multibattle__cases-plus {
    --new-number: calc(var(--number) - 3);
    color: rgba(174, 191, 217, .8);
    counter-reset: number var(--new-number)
}

@media (min-width:768px) {
    .multibattle__cases-plus {
        --new-number: calc(var(--number) - 5)
    }
}

@media (min-width:1250px) {
    .multibattle__cases-plus {
        --new-number: calc(var(--number) - 4)
    }
}

.multibattle__cases-plus:first-child,
.multibattle__cases-plus:nth-child(2),
.multibattle__cases-plus:nth-child(3),
.multibattle__cases-plus:nth-child(4) {
    display: none
}

@media (min-width:768px) {

    .multibattle__cases-plus:nth-child(5),
    .multibattle__cases-plus:nth-child(6) {
        display: none
    }
}

.multibattle__cases-plus:after {
    content: "+" counter(number)
}

.multibattle__case {
    align-items: center;
    display: flex;
    flex-direction: column;
    opacity: 0;
    position: absolute
}

.multibattle__case:first-child,
.multibattle__case:nth-child(2),
.multibattle__case:nth-child(3) {
    opacity: 1;
    position: relative
}

@media (min-width:768px) {

    .multibattle__case:nth-child(4),
    .multibattle__case:nth-child(5) {
        opacity: 1;
        position: relative
    }
}

@media (min-width:1250px) {
    .multibattle__case:nth-child(5) {
        opacity: 0;
        position: absolute
    }
}

.multibattle__case-img {
    height: 45px
}

.multibattle__case-img img {
    display: block;
    height: 100%
}

.multibattle__case-price {
    color: rgba(174, 191, 217, .8);
    font-size: 11px;
    line-height: 20px;
    margin-top: -2px;
    text-align: center
}

@media (min-width:768px) {
    .multibattle__users-controls {
        align-items: center;
        display: flex;
        justify-content: space-between;
        margin: 18px 0 0
    }
}

@media (min-width:1250px) {
    .multibattle__users-controls {
        flex-grow: 1;
        margin: 0
    }
}

.multibattle__users-price {
    align-items: center;
    display: flex;
    justify-content: space-between
}

@media not screen and (min-width:768px) {
    .multibattle__users-price {
        margin: 20px 0
    }
}

@media (min-width:1250px) {
    .multibattle__users-price {
        flex-direction: row-reverse;
        gap: 42px
    }
}

.multibattle__users {
    display: flex;
    gap: 8px
}

.multibattle__user {
    height: 42px;
    position: relative;
    width: 42px;
    z-index: 1
}

.multibattle__user,
.multibattle__user:before {
    align-items: center;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    overflow: hidden
}

.multibattle__user:before {
    background: rgba(115, 140, 178, .1);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1
}

.multibattle__user:after {
    color: hsla(0, 0%, 85%, .8);
    content: "+";
    display: block;
    font-size: 26px;
    font-weight: 700;
    left: 50%;
    line-height: 20px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%)
}

.multibattle__user img {
    display: block;
    position: relative;
    width: 100%;
    z-index: 2
}

.multibattle__price {
    text-align: right
}

@media (min-width:768px) {
    .multibattle__price {
        position: absolute;
        right: 15px;
        top: 23px
    }
}

@media (min-width:1250px) {
    .multibattle__price {
        position: relative;
        right: unset;
        text-align: left;
        top: unset;
        width: 120px
    }
}

.multibattle__price-label {
    color: rgba(174, 191, 217, .8);
    font-size: 13px;
    line-height: 20px;
    white-space: nowrap
}

@media (min-width:768px) {
    .multibattle__price-label {
        font-size: 14px
    }
}

.multibattle__price-value {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px
}

@media (min-width:768px) {
    .multibattle__price-value {
        font-size: 22px;
        line-height: 26px
    }
}

.multibattle__controls {
    display: flex;
    gap: 15px
}

.multibattle__btn {
    flex: 1 1 0
}

.multibattle-create-topbar {
    background: #0c121b;
    border-radius: 8px;
    padding: 16px
}

@media (min-width:768px) {
    .multibattle-create-topbar {
        border-radius: 30px
    }
}

.multibattle-create-topbar__content {
    display: flex;
    flex-direction: column;
    gap: 10px
}

@media (min-width:768px) {
    .multibattle-create-topbar__content {
        align-items: center;
        flex-direction: row;
        gap: 5px;
        justify-content: space-between
    }
}

.multibattle-create-topbar__section-label {
    color: rgba(174, 191, 217, .8);
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 9px
}

.multibattle-create-topbar__section-btns {
    display: flex;
    gap: 4px
}

.multibattle-create-topbar__section-btn {
    background: rgba(115, 140, 178, .1);
    border-radius: 6px;
    color: hsla(0, 0%, 100%, .5);
    font-size: 14px;
    height: 42px;
    transition: .2s ease;
    width: 42px
}

.multibattle-create-topbar__section-btn:hover {
    background: rgba(115, 140, 178, .2)
}

.multibattle-create-topbar__section-btn.active {
    background: #0d506b;
    color: #fff
}

.multibattle-create-topbar__section-btn.disabled {
    opacity: .5;
    pointer-events: none
}

.multibattle-create-topbar__section-btn_non-square {
    padding: 0 16px;
    width: auto
}

@media not screen and (min-width:1024px) {
    .multibattle-create-topbar__submit {
        margin-top: 5px
    }
}

.multibattle-popup {
    display: flex;
    flex-direction: column;
    height: 100%
}

.multibattle-popup__header {
    align-items: center;
    border-bottom: 1px solid rgba(107, 105, 131, .2);
    display: flex;
    gap: 20px;
    padding: 30px 15px 26px
}

@media (min-width:768px) {
    .multibattle-popup__header {
        padding: 30px 30px 26px
    }
}

.multibattle-popup__footer {
    border-top: 1px solid rgba(107, 105, 131, .2);
    padding: 15px
}

@media (min-width:768px) {
    .multibattle-popup__footer {
        align-items: center;
        display: flex;
        justify-content: space-between;
        padding: 20px 30px 30px
    }
}

.multibattle-popup__footer-info {
    display: flex;
    gap: 20px
}

@media not screen and (min-width:768px) {
    .multibattle-popup__footer-info {
        margin-bottom: 20px
    }
}

.multibattle-popup__footer-btns {
    align-items: center;
    display: flex;
    gap: 8px
}

@media not screen and (min-width:768px) {
    .multibattle-popup__btn {
        flex: 1 1 0
    }
}

.multibattle-popup__info-label {
    color: #aebfd9;
    font-size: 11px;
    line-height: 16px
}

.multibattle-popup__info-value {
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    margin-top: 4px
}

@media (min-width:768px) {
    .multibattle-popup__info-value {
        font-size: 20px;
        line-height: 140%
    }
}

.multibattle-popup__content {
    height: 100%;
    overflow: auto;
    padding: 0 15px
}

@media (min-width:768px) {
    .multibattle-popup__content {
        padding: 0 30px
    }
}

.multibattle-popup__content::-webkit-scrollbar-track {
    background-color: transparent
}

.multibattle-popup__content::-webkit-scrollbar {
    height: 3px;
    width: 3px
}

.multibattle-popup__content::-webkit-scrollbar-thumb {
    background-color: rgba(115, 140, 178, .2)
}

.multibattle-popup__filters {
    display: none
}

@media (min-width:1024px) {
    .multibattle-popup__filters {
        background: #01081266;
        display: block
    }
}

.multibattle-case {
    align-items: center;
    background: #0c121b;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    min-height: 226px;
    padding: 20px 15px 30px;
    position: relative;
    width: 100%
}

@media (min-width:768px) {
    .multibattle-case {
        border-radius: 30px
    }
}

.multibattle-case:after {
    background: #63adf2;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNiAzMmExNiAxNiAwIDEgMCAwLTMyIDE2IDE2IDAgMCAwIDAgMzJaIiBmaWxsPSIjNjNBREYyIi8+PHBhdGggZD0ibTEwLjEzNCAxNi42MyAzLjgzMyAzLjYzNyA4LjQzNC04IiBzdHJva2U9IiMyQTIwNTQiIHN0cm9rZS13aWR0aD0iMi4xMzMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvc3ZnPg==);
    content: "";
    height: 32px;
    left: 50%;
    pointer-events: none;
    position: absolute;
    transform: translate(-50%);
    width: 32px
}

.multibattle-case:after,
.multibattle-case__remove {
    border-radius: 50%;
    display: block;
    opacity: 0;
    top: 0;
    transition: .2s ease
}

.multibattle-case__remove {
    background: #fe6b01;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMyAyNmExMyAxMyAwIDEgMCAwLTI2IDEzIDEzIDAgMCAwIDAgMjZaIiBmaWxsPSIjRkU2QjAxIi8+PHBhdGggZD0ibTkuNzUgMTYuNDY3IDYuODUyLTYuNU0xNi42MDIgMTYuNDY3bC02Ljg1My02LjUiIHN0cm9rZT0iIzEyMEUyRSIgc3Ryb2tlLXdpZHRoPSIyLjEzMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+);
    height: 26px;
    right: 0;
    width: 26px
}

.multibattle-case__remove:hover {
    transform: scale(1.2)
}

.multibattle-case__add {
    align-items: center;
    color: hsla(0, 0%, 85%, .8);
    display: flex;
    flex-direction: column;
    font-size: 14px;
    line-height: 20px
}

.multibattle-case__add:before {
    background: rgba(115, 140, 178, .1);
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMTkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMC4xNjcgMS4xMjNhMSAxIDAgMSAwLTIgMHY3LjA0M0gxLjEyM2ExIDEgMCAxIDAgMCAyaDcuMDQ0djcuMDQ0YTEgMSAwIDAgMCAyIDB2LTcuMDQ0aDcuMDQzYTEgMSAwIDEgMCAwLTJoLTcuMDQzVjEuMTIzWiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==);
    background-position: 50%;
    background-repeat: no-repeat;
    border-radius: 50%;
    content: "";
    display: block;
    height: 70px;
    margin-bottom: 10px;
    position: relative;
    transition: transform .2s ease;
    width: 70px
}

.multibattle-case__name {
    color: rgba(174, 191, 217, .8);
    font-size: 11px;
    line-height: 16px;
    margin-top: 14px
}

.multibattle-case__price {
    font-size: 20px;
    font-weight: 600;
    line-height: 28px
}

.multibattle-case__amount {
    align-items: center;
    background: #080c12;
    border-radius: 9px;
    display: flex;
    height: 38px;
    justify-content: space-between;
    margin: 8px 0 5px;
    padding: 3px;
    width: 134px
}

.multibattle-case__amount-control {
    background: rgba(115, 140, 178, .1);
    border-radius: 6px;
    color: hsla(0, 0%, 85%, .8);
    cursor: pointer;
    flex: none;
    height: 32px;
    position: relative;
    transition: background .2s ease;
    width: 32px
}

.multibattle-case__amount-control:after {
    color: #ac9dbc;
    font-size: 20px;
    font-weight: 700;
    left: 50%;
    line-height: 0;
    margin-top: -1px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: .2s ease
}

.multibattle-case__amount-control_minus:after {
    content: "-";
    margin-top: -2px
}

.multibattle-case__amount-control_plus:after {
    content: "+";
    margin-left: 1px
}

.multibattle-case__amount-control:hover {
    background: #0d506b
}

.multibattle-case__amount-control:hover:after {
    color: #fff
}

.multibattle-case__remove {
    cursor: pointer;
    position: absolute
}

.multibattle-case__img {
    position: relative
}

.multibattle-case__preview {
    background: #080c12;
    border-radius: 6px;
    color: rgba(174, 191, 217, .8);
    cursor: pointer;
    font-size: 12px;
    left: 50%;
    opacity: 0;
    padding: 12px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: .2s ease;
    visibility: hidden;
    white-space: nowrap
}

.multibattle-case__preview:hover {
    transform: translate(-50%, -50%) scale(1.1)
}

.multibattle-case:hover .multibattle-case__preview {
    opacity: 1;
    visibility: visible
}

.multibattle-case.active .multibattle-case__remove,
.multibattle-case.active:after {
    opacity: 1
}

.multibattle-case_in-popup {
    background: #121a25
}

.multibattle-case_add-case:hover .multibattle-case__add:before {
    transform: scale(1.1)
}

.multibattle-case_draggable {
    cursor: grab
}

.multibattle-case_draggable:before {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzQiIGhlaWdodD0iMzQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMTQiIGN5PSI5IiByPSIyIiBmaWxsPSIjNkE1OUE2Ii8+PGNpcmNsZSBjeD0iMjEiIGN5PSI5IiByPSIyIiBmaWxsPSIjNkE1OUE2Ii8+PGNpcmNsZSBjeD0iMTQiIGN5PSIxNyIgcj0iMiIgZmlsbD0iIzZBNTlBNiIvPjxjaXJjbGUgY3g9IjIxIiBjeT0iMTciIHI9IjIiIGZpbGw9IiM2QTU5QTYiLz48Y2lyY2xlIGN4PSIxNCIgY3k9IjI1IiByPSIyIiBmaWxsPSIjNkE1OUE2Ii8+PGNpcmNsZSBjeD0iMjEiIGN5PSIyNSIgcj0iMiIgZmlsbD0iIzZBNTlBNiIvPjwvc3ZnPg==);
    background-position: 50%;
    background-size: contain;
    content: "";
    display: block;
    height: 32px;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 6px;
    transition: .2s ease;
    width: 32px;
    z-index: 1
}

.multibattle-case_draggable:hover:before {
    opacity: 1
}

.multibattle-case_draggable .multibattle-case__img img {
    cursor: grab
}

.multibattle-case_draggable .multibattle-case__remove {
    right: 12px;
    top: 12px
}

@media not screen and (min-width:1024px) {
    .multibattle-case_draggable .multibattle-case__remove {
        opacity: 1
    }
}

.multibattle-case_draggable:hover .multibattle-case__remove {
    opacity: 1
}

.case-preview-popup {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px 0
}

.case-preview-popup__head {
    align-items: center;
    display: flex;
    flex-direction: column
}

.case-preview-popup__img {
    max-width: 160px;
    width: 100%
}

.case-preview-popup__title {
    font-size: 12px;
    line-height: 14px
}

.case-preview-popup__price {
    color: #7ed321;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px
}

.case-preview-popup__content {
    flex-grow: 1;
    margin-top: 30px;
    overflow: auto;
    padding: 0 40px
}

.case-preview-popup__content::-webkit-scrollbar-track {
    background-color: transparent
}

.case-preview-popup__content::-webkit-scrollbar {
    height: 3px;
    width: 3px
}

.case-preview-popup__content::-webkit-scrollbar-thumb {
    background-color: rgba(115, 140, 178, .2)
}

@media (min-width:768px) {
    .multibattle-topbar {
        align-items: center;
        display: flex;
        gap: 10px;
        justify-content: center
    }
}

.multibattle-topbar__above {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.multibattle-topbar__copy-link {
    align-items: center;
    color: #ac9dbc;
    font-size: 14px;
    gap: 6px;
    line-height: 20px
}

@media not screen and (min-width:768px) {
    .multibattle-topbar__copy-link {
        overflow: hidden;
        text-align: right;
        text-overflow: ellipsis;
        white-space: nowrap
    }
}

.multibattle-topbar__copy-link:before {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTcuMzI0IDExLjc5NmEuNzUuNzUgMCAwIDEgMCAxLjA2M2wtLjMyLjMyYTMuNjQxIDMuNjQxIDAgMCAxLTIuNTkyIDEuMDcxIDMuNjY0IDMuNjY0IDAgMCAxLTIuNTktNi4yNTVsMi4xNzEtMi4xNzJhMy42NjUgMy42NjUgMCAwIDEgNi4xNiAxLjc1Ny43NDguNzQ4IDAgMCAxLS44NTMuOTI1Ljc1Ljc1IDAgMCAxLS42MDgtLjU4NSAyLjE2NiAyLjE2NiAwIDAgMC0zLjYzOC0xLjAzNkwyLjg4MiA5LjA1NmEyLjE2NCAyLjE2NCAwIDEgMCAzLjA2IDMuMDZsLjMxOS0uMzJhLjc1Ljc1IDAgMCAxIDEuMDYzIDBabTYuODUzLTguOTczYTMuNjY2IDMuNjY2IDAgMCAwLTUuMTgzIDBsLS4zMi4zMmEuNzUxLjc1MSAwIDEgMCAxLjA2MyAxLjA2MmwuMzItLjMyYTIuMTY1IDIuMTY1IDAgMSAxIDMuMDYyIDMuMDYzbC0yLjE3NSAyLjE2OGEyLjE0OSAyLjE0OSAwIDAgMS0xLjUzLjYzNCAyLjE2NCAyLjE2NCAwIDAgMS0yLjEwNy0xLjY3Ljc1Ljc1IDAgMCAwLTEuNDYuMzQgMy42NjUgMy42NjUgMCAwIDAgMy41NjMgMi44M2guMDAzYTMuNjQzIDMuNjQzIDAgMCAwIDIuNTkyLTEuMDczbDIuMTcyLTIuMTcyYTMuNjY0IDMuNjY0IDAgMCAwIDAtNS4xODJaIiBmaWxsPSIjQUM5REJDIi8+PC9zdmc+);
    content: "";
    display: inline-block;
    flex: none;
    height: 16px;
    margin-bottom: -2px;
    margin-right: 6px;
    position: relative;
    width: 16px
}

.multibattle-topbar__content {
    position: relative
}

@media not screen and (min-width:768px) {
    .multibattle-topbar__content {
        margin-top: 6px
    }
}

@media (min-width:768px) {
    .multibattle-topbar__content {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        justify-content: space-between;
        min-width: 0
    }
}

@media (min-width:1024px) {
    .multibattle-topbar__content {
        flex-wrap: nowrap;
        gap: 30px
    }
}

.multibattle-topbar__section_info {
    display: flex
}

@media not screen and (min-width:768px) {
    .multibattle-topbar__section_info {
        justify-content: space-around
    }
}

@media (min-width:768px) {
    .multibattle-topbar__section_info {
        gap: 30px
    }
}

.multibattle-topbar__section_cases {
    flex-grow: 1;
    width: 100%
}

@media not screen and (min-width:768px) {
    .multibattle-topbar__section_btn {
        margin-top: 13px
    }
}

.multibattle-topbar__info-label {
    color: #ac9dbc;
    font-size: 12px;
    line-height: 20px
}

.multibattle-topbar__info-value {
    font-size: 20px;
    font-weight: 700;
    line-height: 25px
}

.multibattle-topbar__cases {
    align-items: center;
    border-radius: 10px;
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    overflow: auto
}

@media not screen and (min-width:1024px) {
    .multibattle-topbar__cases {
        width: 100%
    }
}

.multibattle-topbar__cases::-webkit-scrollbar-track {
    background-color: transparent
}

.multibattle-topbar__cases::-webkit-scrollbar {
    height: 1px;
    width: 1px
}

.multibattle-topbar__cases::-webkit-scrollbar-thumb {
    background-color: transparent
}

.multibattle-topbar__price {
    color: #ac9dbc;
    font-size: 11px
}

.multibattle-topbar__case {
    align-items: center;
    background-color: #0c121b;
    border-radius: 15px;
    display: flex;
    flex: none;
    flex-direction: column;
    height: 100px;
    justify-content: center;
    padding: 10px;
    transition: .2s ease;
    width: 100px
}

.multibattle-topbar__case.active {
    background: #1c1743
}

.multibattle-game {
    position: relative
}

.multibattle-game__roulettes,
.multibattle-game__vs-grid {
    bottom: 0;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0
}

@media (min-width:768px) {

    .multibattle-game__roulettes,
    .multibattle-game__vs-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 0 -15px;
        min-width: 0
    }
}

@media (min-width:1250px) {

    .multibattle-game__roulettes,
    .multibattle-game__vs-grid {
        flex-wrap: nowrap
    }
}

.multibattle-game__roulettes .roulette,
.multibattle-game__vs-col {
    height: 320px;
    min-width: 0;
    padding: 100px 15px 0;
    pointer-events: none
}

@media (min-width:768px) {

    .multibattle-game__roulettes .roulette,
    .multibattle-game__vs-col {
        height: 725px;
        margin: 0 11px;
        padding: 103px 15px 0;
        width: calc(50% - 30px)
    }
}

@media (min-width:1250px) {

    .multibattle-game__roulettes .roulette,
    .multibattle-game__vs-col {
        height: 762px;
        justify-content: flex-start;
        margin-top: 245px;
        padding: 75px 20px 0
    }
}

.multibattle-game__roulettes .roulette {
    justify-content: flex-start
}

.multibattle-game__vs-col {
    pointer-events: none;
    position: relative
}

.multibattle-game__vs-col:first-child {
    visibility: hidden
}

.multibattle-game__vs {
    height: 294px;
    left: -19px;
    margin-top: 20px;
    opacity: 0;
    position: absolute;
    top: 140px;
    transform: translate(-50%, -50%);
    transition: .4s ease;
    width: 281px;
    z-index: 2
}

.multibattle-game__vs:after,
.multibattle-game__vs:before {
    background-size: contain;
    content: "";
    display: block;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%)
}

.multibattle-game__vs:before {
    background: url(/assets/battle-vs-fx.png) 50% no-repeat;
    background-size: contain;
    height: 294px;
    width: 281px
}

.multibattle-game__vs:after {
    background: url(/assets/battle-vs.png) 50% no-repeat;
    background-size: contain;
    height: 245px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 245px
}

.multibattle-game__vs {
    animation-delay: 1s;
    animation-duration: .6s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
    opacity: 1
}

@media not screen and (min-width:1800px) {
    .multibattle-game__vs {
        display: none
    }
}

@media (min-width:768px) {
    .multibattle-game__vs {
        animation-name: bounceOutVs
    }
}

.multibattle-game__vs:before {
    animation: battleVs .3s ease-in-out
}

.multibattle-game__vs:after {
    animation: rubberBand .6s ease-in-out
}

.multibattle-players {
    display: flex;
    margin: -7.5px
}

@media not screen and (min-width:768px) {
    .multibattle-players {
        flex-direction: column
    }
}

@media (min-width:768px) {
    .multibattle-players {
        flex-wrap: wrap;
        justify-content: center;
        margin: -7.5px
    }
}

@media (min-width:1250px) {
    .multibattle-players {
        flex-wrap: nowrap;
        margin: 15px -15px
    }
}

.multibattle-players__item {
    margin: 7.5px
}

@media (min-width:768px) {
    .multibattle-players__item {
        width: calc(50% - 15px)
    }
}

@media (min-width:1250px) {
    .multibattle-players__item {
        min-width: 0;
        width: calc(50% - 15px)
    }
}

.multibattle-player {
    height: 305px;
    position: relative;
    width: 100%
}

@media (min-width:768px) {
    .multibattle-player {
        display: flex;
        flex-direction: column;
        height: 725px
    }
}

@media (min-width:1250px) {
    .multibattle-player {
        display: flex;
        flex-direction: column;
        height: 762px
    }
}

.multibattle-player:before {
    background: radial-gradient(circle, rgba(255, 105, 71, .4) 0, rgba(255, 105, 71, .3) 15%, rgba(255, 105, 71, .2) 30%, rgba(255, 105, 71, .1) 45%, rgba(255, 105, 71, .03) 60%, rgba(255, 105, 71, 0) 70%);
    background-position: 0 -250px;
    background-repeat: no-repeat;
    content: "";
    display: none;
    height: 500px;
    left: 50%;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    transform: translate(-50%);
    width: 500px
}

.multibattle-player__info {
    align-items: center;
    background: #0c121b;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    padding: 10px
}

@media (min-width:1250px) {
    .multibattle-player__info {
        background: url(/assets/battles/multibattle-user-bg.svg) 50% no-repeat;
        flex: none;
        flex-direction: column;
        height: 280px;
        justify-content: flex-start;
        margin: 0 auto;
        padding: 68px 0 0;
        position: relative;
        width: 210px
    }
}

.multibattle-player__user {
    align-items: center;
    display: flex;
    gap: 8px
}

@media (min-width:1250px) {
    .multibattle-player__user {
        flex-direction: column;
        font-size: 14px
    }
}

.multibattle-player__user-img {
    background: #172438;
    border-radius: 50%;
    flex: none;
    height: 50px;
    overflow: hidden;
    padding: 2px;
    position: relative;
    width: 50px
}

@media (min-width:1250px) {
    .multibattle-player__user-img {
        border: 0;
        height: 76px;
        padding: 6px;
        width: 76px
    }
}

.multibattle-player__user-img_waiting {
    background: #0c121b;
    border: 3px solid #172438
}

.multibattle-player__user-img_waiting:before {
    animation: spin 2s linear infinite;
    background-image: url(/assets/battles/waiting-user.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.multibattle-player__user-img img {
    border-radius: 50%;
    display: block;
    overflow: hidden
}

.multibattle-player__user-name {
    color: rgba(174, 191, 217, .8);
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    max-width: 150px;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap
}

@media (min-width:1250px) {
    .multibattle-player__user-name {
        margin-top: 3px;
        max-width: 110px
    }

    .multibattle-player__user-name_waiting {
        margin-top: -8px
    }
}

.multibattle-player__status {
    align-items: center;
    display: flex;
    font-size: 18px;
    font-weight: 700;
    height: 32px;
    max-width: 100%;
    position: relative
}

@media (min-width:1250px) {
    .multibattle-player__status {
        height: 28px;
        position: absolute;
        top: 32px
    }

    .multibattle-player__status_btn {
        height: 42px;
        padding: 0 12px;
        top: 20px
    }
}

.multibattle-player__status-text {
    font-size: 14px;
    margin-right: 10px;
    overflow: hidden;
    text-overflow: ellipsis
}

@media (min-width:1250px) {
    .multibattle-player__status-text {
        font-size: 16px;
        font-weight: 700;
        line-height: 20px
    }
}

@media (min-width:1250px) and (min-width:768px) {
    .multibattle-player__status-text {
        font-size: 20px;
        line-height: 140%
    }
}

@media not screen and (min-width:768px) {
    .multibattle-player__drops {
        display: none
    }
}

@media (min-width:768px) {
    .multibattle-player__drops {
        background: #0c121b;
        border-radius: 40px;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        margin-top: 10px;
        overflow: hidden;
        padding: 210px 15px 15px;
        width: 100%
    }

    .multibattle-player__drops-items {
        grid-gap: 4px;
        align-content: start;
        display: grid;
        flex-grow: 1;
        grid-template-columns: repeat(auto-fill, minmax(123px, 1fr));
        overflow: auto
    }
}

.multibattle-player__drops-items::-webkit-scrollbar-track {
    background-color: transparent
}

.multibattle-player__drops-items::-webkit-scrollbar {
    height: 6px;
    width: 6px
}

.multibattle-player__drops-items::-webkit-scrollbar-thumb {
    background-clip: content-box;
    background-color: rgba(115, 140, 178, .2);
    border-left: 3px solid transparent
}

.multibattle-player__drop {
    height: 100px
}

.multibattle-player__result {
    align-items: center;
    display: flex;
    flex-direction: column;
    left: 50%;
    position: absolute;
    top: 100px;
    transform: translate(-50%)
}

@media not screen and (min-width:768px) {
    .multibattle-player__result {
        top: 50%;
        transform: translate(-50%, -50%)
    }
}

@media (min-width:1250px) {
    .multibattle-player__result {
        top: 310px
    }
}

.multibattle-player__result-text {
    background: #080c12;
    border-radius: 10px;
    color: rgba(174, 191, 217, .8);
    font-size: 12px;
    height: 100px;
    margin: 15px 0 10px;
    padding-top: 65px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    width: 150px
}

.multibattle-player__result-text:before {
    background-color: rgba(174, 191, 217, .8);
    height: 32px;
    left: 50%;
    margin-top: -10px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 29px
}

.multibattle-player__round-price {
    display: none;
    font-size: 12px;
    opacity: 0;
    white-space: nowrap
}

@media (min-width:768px) {
    .multibattle-player__round-price {
        display: block;
        margin: 0 5px
    }
}

@media (min-width:1250px) {
    .multibattle-player__round-price {
        bottom: 100%;
        left: 100%;
        margin: 0 5px -12px;
        position: absolute
    }
}

.multibattle-player__roulette-price-wrapper {
    left: 50%;
    position: absolute;
    top: 230px;
    transform: translate(-50%);
    z-index: 2
}

@media (min-width:768px) {
    .multibattle-player__roulette-price-wrapper {
        top: 224px
    }
}

@media (min-width:1250px) {
    .multibattle-player__roulette-price-wrapper {
        top: 293px
    }
}

.multibattle-player__roulette-price {
    border-radius: 5px;
    font-size: 12px;
    font-weight: 700;
    opacity: 0;
    padding: 3px 5px
}

.multibattle-player__roulette-price_winner {
    background: #27411d;
    color: #7ed321
}

.multibattle-player__roulette-price_looser {
    background: #41221d;
    color: #fe5d56
}

.multibattle-player_looser:before,
.multibattle-player_winner:before {
    opacity: .9
}

.multibattle-player_winner:before {
    background-image: radial-gradient(circle, rgba(71, 255, 157, .4) 0, rgba(71, 255, 157, .3) 15%, rgba(71, 255, 157, .2) 30%, rgba(71, 255, 157, .1) 45%, rgba(71, 255, 157, .03) 60%, rgba(71, 255, 157, 0) 70%)
}

.multibattle-player_winner .multibattle-player__user-img {
    background: linear-gradient(0deg, #21d39b, #11456d)
}

.multibattle-player_winner .multibattle-player__result-text {
    color: #7ed321
}

.multibattle-player_winner .multibattle-player__result-text:before {
    background-color: #7ed321
}

@media (min-width:1250px) {
    .multibattle-player_winner .multibattle-player__info {
        background-image: url(/assets/battles/multibattle-user-bg-winner.svg)
    }
}

.multibattle-player_winner .multibattle-player__status {
    color: #84a900
}

.multibattle-player_looser .multibattle-player__result-text:before {
    background-color: rgba(174, 191, 217, .8)
}

@media (min-width:1250px) {
    .multibattle-player_looser .multibattle-player__info {
        background-image: url(/assets/battles/multibattle-user-bg-looser.svg)
    }
}

.multibattle-player_looser .multibattle-player__status {
    color: #ff4e18
}

.multibattle-player_in-popup {
    background: transparent;
    border-radius: 0;
    height: auto;
    margin: 0;
    padding: 40px 0 33px
}

@media not screen and (min-width:768px) {
    .multibattle-player_in-popup {
        align-items: center;
        border-radius: 10px;
        display: flex;
        gap: 10px;
        justify-content: space-between;
        overflow: hidden;
        padding: 13px 10px
    }

    .multibattle-player_in-popup:before {
        width: 200%
    }
}

.multibattle-player_in-popup .multibattle-player__info {
    flex-direction: column
}

@media not screen and (min-width:768px) {
    .multibattle-player_in-popup .multibattle-player__info {
        align-items: flex-start;
        gap: 2px;
        padding-left: 48px
    }
}

@media (min-width:768px) {
    .multibattle-player_in-popup .multibattle-player__info {
        justify-content: center;
        margin-top: 0
    }

    .multibattle-player_in-popup .multibattle-player__user {
        flex-direction: column;
        font-size: 14px
    }
}

@media not screen and (min-width:374px) {
    .multibattle-player_in-popup .multibattle-player__user-name {
        max-width: 130px
    }
}

@media not screen and (min-width:768px) {
    .multibattle-player_in-popup .multibattle-player__user-img {
        height: 38px;
        left: 10px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 38px
    }
}

@media (min-width:768px) {
    .multibattle-player_in-popup .multibattle-player__user-img {
        height: 102px;
        padding: 6px;
        width: 102px
    }
}

@media not screen and (min-width:768px) {
    .multibattle-player_in-popup .multibattle-player__status {
        height: auto;
        line-height: 14px
    }
}

@media (min-width:768px) {
    .multibattle-player_in-popup .multibattle-player__status {
        font-size: 22px
    }
}

.multibattle-player_in-popup .multibattle-player__result {
    left: unset;
    position: relative;
    top: unset;
    transform: none
}

.multibattle-player_in-popup .multibattle-player__result-text {
    align-items: center;
    border-radius: 10px;
    display: flex;
    gap: 10px;
    height: 38px;
    margin: 13px 0 0;
    padding: 0 17px;
    width: auto
}

@media not screen and (min-width:768px) {
    .multibattle-player_in-popup .multibattle-player__result-text {
        font-size: 0;
        gap: 0;
        margin: 0
    }
}

.multibattle-player_in-popup .multibattle-player__result-text:before {
    height: 22px;
    left: unset;
    margin-top: -1px;
    position: relative;
    top: unset;
    transform: none;
    width: 22px
}

.multibattle-player_round1:before,
.multibattle-player_round3:before,
.multibattle-player_round5:before,
.multibattle-player_round7:before,
.multibattle-player_round9:before {
    animation: roundAnimation1 6s cubic-bezier(.38, .97, .56, .76) .1s forwards
}

.multibattle-player_round10:before,
.multibattle-player_round2:before,
.multibattle-player_round4:before,
.multibattle-player_round6:before,
.multibattle-player_round8:before {
    animation: roundAnimation2 6s cubic-bezier(.38, .97, .56, .76) .1s forwards
}

.multibattle-player_round1 .multibattle-player__roulette-price,
.multibattle-player_round1 .multibattle-player__round-price,
.multibattle-player_round3 .multibattle-player__roulette-price,
.multibattle-player_round3 .multibattle-player__round-price,
.multibattle-player_round5 .multibattle-player__roulette-price,
.multibattle-player_round5 .multibattle-player__round-price,
.multibattle-player_round7 .multibattle-player__roulette-price,
.multibattle-player_round7 .multibattle-player__round-price,
.multibattle-player_round9 .multibattle-player__roulette-price,
.multibattle-player_round9 .multibattle-player__round-price {
    animation: roundPriceAnimation1 3s cubic-bezier(.38, .97, .56, .76) .1s forwards
}

.multibattle-player_round10 .multibattle-player__roulette-price,
.multibattle-player_round10 .multibattle-player__round-price,
.multibattle-player_round2 .multibattle-player__roulette-price,
.multibattle-player_round2 .multibattle-player__round-price,
.multibattle-player_round4 .multibattle-player__roulette-price,
.multibattle-player_round4 .multibattle-player__round-price,
.multibattle-player_round6 .multibattle-player__roulette-price,
.multibattle-player_round6 .multibattle-player__round-price,
.multibattle-player_round8 .multibattle-player__roulette-price,
.multibattle-player_round8 .multibattle-player__round-price {
    animation: roundPriceAnimation2 3s cubic-bezier(.38, .97, .56, .76) .1s forwards
}

@keyframes roundAnimation1 {
    to {
        opacity: 0
    }
}

@keyframes roundAnimation2 {
    to {
        opacity: 0
    }
}

@keyframes roundPriceAnimation1 {
    0% {
        opacity: 0;
        transform: translateY(-50%)
    }

    10% {
        opacity: 1;
        transform: translate(0)
    }

    50% {
        opacity: 1;
        transform: translate(0)
    }

    90% {
        opacity: 0;
        transform: translateY(50%)
    }

    to {
        opacity: 0
    }
}

@keyframes roundPriceAnimation2 {
    0% {
        opacity: 0;
        transform: translateY(-50%)
    }

    10% {
        opacity: 1;
        transform: translate(0)
    }

    50% {
        opacity: 1;
        transform: translate(0)
    }

    90% {
        opacity: 1;
        transform: translate(0)
    }

    to {
        opacity: 0;
        transform: translateY(50%)
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

.layout-faq__faq {
    margin-bottom: 30px
}

.how-it-work-items {
    display: flex;
    flex-direction: column;
    gap: 10px
}

@media (min-width:1024px) {
    .how-it-work-items {
        flex-direction: row
    }

    .how-it-work-items__item {
        flex: 1 1 0
    }
}

.how-it-work {
    background: #0c121b;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    height: 100%;
    line-height: 20px;
    padding: 25px 30px 30px
}

@media not screen and (min-width:1024px) {
    .how-it-work {
        align-items: center;
        display: flex;
        gap: 15px
    }
}

.how-it-work__step {
    align-items: center;
    background: rgba(115, 140, 178, .1);
    border-radius: 10px;
    color: hsla(0, 0%, 85%, .8);
    display: flex;
    flex: none;
    height: 45px;
    justify-content: center;
    width: 45px
}

@media (min-width:1024px) {
    .how-it-work__text {
        margin-top: 8px
    }
}

.faq-items {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.faq-items__qa {
    background: #0c121b;
    border-radius: 20px;
    cursor: pointer;
    overflow: hidden;
    padding: 15px 30px
}

.faq-items__a,
.faq-items__q {
    padding: 15px 0
}

.faq-items__q {
    align-items: flex-start;
    color: hsla(0, 0%, 85%, .8);
    display: flex;
    font-size: 13px;
    font-weight: 600;
    gap: 8px;
    line-height: 20px
}

.faq-items__q:before {
    background-color: hsla(0, 0%, 85%, .8);
    height: 16px;
    margin-top: 2px;
    -webkit-mask-image: url(/assets/faq-plus.svg?v=2);
    mask-image: url(/assets/faq-plus.svg?v=2);
    width: 16px
}

.faq-items__q.active {
    color: #fff
}

.faq-items__q.active:before {
    background-color: #fff;
    -webkit-mask-image: url(/assets/faq-minus.svg?v=2);
    mask-image: url(/assets/faq-minus.svg?v=2)
}

.faq-items__a {
    border-top: 1px solid rgba(115, 140, 178, .1);
    color: rgba(174, 191, 217, .8);
    display: none;
    font-size: 13px;
    line-height: 20px
}

.faq-items__a a {
    color: #ffd600;
    text-decoration: underline
}

.faq-items__a a:hover {
    text-decoration: none
}

@media (min-width:768px) {
    .layout-top__selectors {
        display: flex;
        justify-content: center
    }
}

.layout-top__top-drops {
    margin-top: 20px
}

@media (min-width:768px) {
    .layout-top__top-drops {
        margin-top: 30px
    }
}

@media (min-width:1024px) {
    .layout-top__top-drops {
        margin-top: 50px
    }
}

@media (min-width:768px) {
    .layout-top__table-users {
        margin-top: 40px
    }
}

@media (min-width:1024px) {
    .layout-top__table-users {
        margin-top: 50px
    }
}

@media not screen and (min-width:768px) {
    .top-page-tabs__tab {
        display: none
    }
}

.top-page-tabs__tab_alltime,
.top-page-tabs__tab_day,
.top-page-tabs__tab_month {
    display: flex
}

@media (min-width:768px) {
    .top-page-tabs__tab_hour {
        border-bottom-left-radius: 10px !important;
        border-top-left-radius: 10px !important;
        order: -1
    }

    .top-page-tabs__tab_day {
        border-radius: 0 !important
    }
}

.top-users {
    margin: 0 auto
}

@media (min-width:768px) {
    .top-users {
        display: flex;
        flex-wrap: wrap;
        justify-content: center
    }
}

@media (min-width:1024px) {
    .top-users {
        justify-content: space-around
    }
}

@media not screen and (min-width:768px) {
    .top-users__item {
        margin-bottom: 20px
    }
}

@media (min-width:768px) {
    .top-users__item {
        padding: 15px 7px;
        width: 50%
    }
}

@media (min-width:1024px) {
    .top-users__item {
        flex: 1 1 0;
        max-width: 390px;
        min-width: 0
    }
}

.top-user {
    background: #0c121b;
    border-radius: 20px;
    padding: 10px;
    position: relative
}

@media (min-width:768px) {
    .top-user {
        border-radius: 30px;
        padding: 20px
    }
}

.top-user__user {
    align-items: center;
    display: flex;
    gap: 15px
}

.top-user__user-img {
    border-radius: 10px;
    height: 60px;
    overflow: hidden;
    width: 60px
}

.top-user__user-name {
    color: rgba(174, 191, 217, .8);
    font-size: 11px;
    font-weight: 600;
    line-height: 16px
}

@media (min-width:768px) {
    .top-user__user-name {
        font-size: 13px;
        font-weight: 600;
        line-height: 20px
    }
}

.top-user__user-profit {
    font-size: 13px;
    font-weight: 600;
    line-height: 20px
}

@media (min-width:768px) {
    .top-user__user-profit {
        font-size: 20px;
        font-weight: 600;
        line-height: 28px
    }
}

.top-user__counters {
    display: grid;
    gap: 4px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    margin-top: 10px
}

.top-user__place {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    height: 70px;
    position: absolute;
    right: 5px;
    top: 5px;
    width: 70px
}

@media (min-width:768px) {
    .top-user__place {
        height: 140px;
        right: -40px;
        top: -50px;
        width: 140px
    }
}

.top-user__place_1 {
    background-image: url(/assets/top/gold.png)
}

.top-user__place_2 {
    background-image: url(/assets/top/silver.png)
}

.top-user__place_3 {
    background-image: url(/assets/top/bronze.png)
}

.top-drop__place {
    display: none
}

.top-drop__item {
    aspect-ratio: 270/216;
    border-radius: 20px;
    padding: 16px;
    position: relative
}

.top-drop__item:after,
.top-drop__item:before {
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100%;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.top-drop__item:after {
    background-size: contain
}

.top-drop__item-img {
    position: relative;
    z-index: 2
}

.top-drop__names {
    bottom: 10px;
    left: 13px;
    position: absolute
}

.top-drop__first-name {
    color: hsla(0, 0%, 85%, .4);
    font-size: 13px;
    line-height: 20px
}

.top-drop__second-name {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px
}

.top-drop__bottom {
    align-items: center;
    display: flex;
    gap: 14px;
    margin-top: 10px
}

.top-drop__user-name {
    color: rgba(174, 191, 217, .8);
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.top-drop__user-img {
    border-radius: 10px;
    height: 60px;
    overflow: hidden;
    width: 60px
}

.top-drop__item-price {
    color: #f3b705;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px
}

@media (min-width:768px) {
    .top-drop__item-price {
        font-size: 20px;
        font-weight: 600;
        line-height: 28px
    }
}

.top-drop.common .top-drop__item {
    background: linear-gradient(180deg, rgba(53, 51, 69, .5), hsla(0, 0%, 66%, .5))
}

.top-drop.common .top-drop__item:before {
    background-image: url(/assets/rarity/common.png)
}

.top-drop.common .top-drop__item:after {
    background-image: url(/assets/rarity/livetrade/common.svg)
}

.top-drop.uncommon .top-drop__item {
    background: linear-gradient(180deg, rgba(0, 31, 73, .5), rgba(27, 206, 255, .5))
}

.top-drop.uncommon .top-drop__item:before {
    background-image: url(/assets/rarity/uncommon.png)
}

.top-drop.uncommon .top-drop__item:after {
    background-image: url(/assets/rarity/livetrade/uncommon.svg)
}

.top-drop.milspec .top-drop__item {
    background: linear-gradient(180deg, rgba(0, 43, 106, .5), rgba(16, 104, 255, .5))
}

.top-drop.milspec .top-drop__item:before {
    background-image: url(/assets/rarity/milspec.png)
}

.top-drop.milspec .top-drop__item:after {
    background-image: url(/assets/rarity/livetrade/milspec.svg)
}

.top-drop.restricted .top-drop__item {
    background: linear-gradient(180deg, rgba(50, 35, 90, .5), rgba(140, 83, 255, .5))
}

.top-drop.restricted .top-drop__item:before {
    background-image: url(/assets/rarity/restricted.png)
}

.top-drop.restricted .top-drop__item:after {
    background-image: url(/assets/rarity/livetrade/restricted.svg)
}

.top-drop.classified .top-drop__item {
    background: linear-gradient(180deg, rgba(74, 30, 90, .5), rgba(247, 57, 255, .5))
}

.top-drop.classified .top-drop__item:before {
    background-image: url(/assets/rarity/classified.png)
}

.top-drop.classified .top-drop__item:after {
    background-image: url(/assets/rarity/livetrade/classified.svg)
}

.top-drop.covert .top-drop__item {
    background: linear-gradient(180deg, rgba(119, 1, 41, .5), rgba(255, 61, 0, .5))
}

.top-drop.covert .top-drop__item:before {
    background-image: url(/assets/rarity/covert.png)
}

.top-drop.covert .top-drop__item:after {
    background-image: url(/assets/rarity/livetrade/covert.svg)
}

.top-drop.rare .top-drop__item {
    background: linear-gradient(180deg, rgba(90, 74, 31, .5), rgba(255, 212, 26, .5))
}

.top-drop.rare .top-drop__item:before {
    background-image: url(/assets/rarity/rare.png)
}

.top-drop.rare .top-drop__item:after {
    background-image: url(/assets/rarity/livetrade/rare.svg)
}

.table-users {
    width: 100%
}

.table-users__head {
    color: rgba(174, 191, 217, .8);
    font-size: 13px;
    line-height: 20px;
    text-align: left
}

@media (min-width:768px) {
    .table-users__head {
        font-size: 16px;
        line-height: 24px
    }
}

.table-users__user-content {
    align-items: center;
    color: rgba(174, 191, 217, .8);
    display: flex;
    gap: 7px
}

.table-users__user-img {
    border-radius: 30px;
    flex: none;
    height: 30px;
    overflow: hidden;
    width: 30px
}

.table-users__user-name {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.table-users th {
    padding: 18px 5px
}

@media (min-width:768px) {
    .table-users th {
        padding: 25px 5px
    }
}

.table-users tbody {
    font-size: 13px;
    font-weight: 600;
    line-height: 20px
}

@media (min-width:768px) {
    .table-users tbody {
        font-size: 16px;
        font-weight: 600;
        line-height: 24px
    }
}

.table-users tbody td {
    background: #0c121b;
    padding: 15px 5px;
    vertical-align: middle
}

@media (min-width:768px) {
    .table-users tbody td {
        padding: 30px 5px
    }
}

.table-users tbody td:first-child {
    border-radius: 10px 0 0 10px
}

.table-users tbody td:last-child {
    border-radius: 0 10px 10px 0
}

.table-users tbody tr:nth-child(2n) td {
    background: transparent
}

tbody td.table-users__profit {
    color: #f3b705;
    padding-right: 20px
}

@media (min-width:768px) {
    tbody td.table-users__profit {
        padding-right: 50px
    }
}

tbody td.table-users__place,
thead th.table-users__place {
    padding: 0 20px
}

@media (min-width:768px) {

    tbody td.table-users__place,
    thead th.table-users__place {
        padding-left: 50px
    }
}

@media not screen and (min-width:768px) {
    thead th.table-users__place {
        font-size: 0
    }
}

@media not screen and (min-width:1024px) {

    .table-users .table-users__battles,
    .table-users .table-users__contracts,
    .table-users .table-users__upgrades {
        display: none
    }
}

@media not screen and (min-width:768px) {
    .table-users .table-users__cases {
        display: none
    }
}

.table-users_raffle .table-users__user {
    padding-left: 25px
}

.trades {
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr))
}

@media (min-width:375px) {
    .trades {
        grid-column-gap: 10px;
        grid-row-gap: 10px;
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr))
    }
}

@media (min-width:768px) {
    .trades {
        grid-template-columns: repeat(auto-fill, minmax(277px, 1fr))
    }
}

@media (min-width:1024px) {
    .trades {
        grid-template-columns: repeat(auto-fill, minmax(290px, 1fr))
    }
}

.trade {
    background-color: #0c121b;
    border-radius: 17px;
    height: 100%;
    padding: 5px 5px 10px
}

@media (min-width:768px) {
    .trade {
        border-radius: 30px;
        padding: 10px 10px 20px
    }
}

.trade__item {
    height: 120px
}

@media (min-width:768px) {
    .trade__item {
        height: 216px
    }
}

.trade__info {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-top: 13px;
    padding: 0 7px
}

@media (min-width:768px) {
    .trade__info {
        margin-top: 20px;
        padding: 0 10px
    }
}

.trade__user {
    align-items: center;
    display: flex;
    gap: 7px
}

.trade__user,
.trade__user-info {
    flex-grow: 1;
    min-width: 0
}

.trade__user-img {
    border-radius: 50%;
    flex: none;
    height: 30px;
    width: 30px
}

@media (min-width:768px) {
    .trade__user-img {
        height: 40px;
        width: 40px
    }
}

.trade__user-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 20px
}

.trade__user-name,
.trade__user-time {
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.trade__user-time {
    color: hsla(0, 0%, 85%, .6);
    font-size: 11px;
    line-height: 16px
}

.trade__case {
    align-items: center;
    display: flex;
    justify-content: center;
    width: 40px
}

@media not screen and (min-width:768px) {
    .trade__case {
        display: none
    }
}

.trade__case img {
    width: 100%
}

.trade__type {
    background: rgba(1, 8, 18, .3);
    color: #f3b705;
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    margin: 10px -5px -10px;
    padding: 12px 5px 10px;
    text-align: center
}

@media (min-width:768px) {
    .trade__type {
        margin: 20px -10px -20px;
        padding: 12px 10px 20px
    }
}

.trade-item {
    border-radius: 12px;
    display: block;
    height: 100%;
    padding: 10px;
    position: relative;
    z-index: 1
}

@media (min-width:768px) {
    .trade-item {
        border-radius: 20px
    }
}

.trade-item:after,
.trade-item:before {
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100%;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    max-height: 208px;
    position: absolute;
    top: 0;
    width: 100%
}

.trade-item:after {
    background-size: contain;
    z-index: -1
}

@media not screen and (min-width:768px) {
    .trade-item:after {
        display: none
    }
}

.trade-item__content {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between
}

.trade-item__icons,
.trade-item__img {
    position: absolute
}

.trade-item__img {
    height: 100%;
    left: 0;
    pointer-events: none;
    top: 0;
    transition: .2s ease;
    width: 100%
}

.trade-item__img img {
    display: block;
    height: 75%;
    margin: 5% auto 0
}

.trade-item__icons {
    display: flex;
    right: 10px;
    top: 10px
}

.trade-item__icon {
    margin-left: 5px;
    position: relative
}

.trade-item__icon:hover {
    opacity: 1
}

.trade-item__icon:hover .tooltip {
    opacity: 1;
    visibility: visible
}

.trade-item__price {
    align-items: center;
    background: rgba(1, 8, 18, .4);
    border-radius: 6px;
    border-radius: 100px;
    color: #fff;
    display: flex;
    font-size: 11px;
    font-weight: 600;
    height: 23px;
    line-height: 13px;
    padding: 3px 8px;
    position: relative;
    z-index: 1
}

@media (min-width:768px) {
    .trade-item__price {
        font-size: 13px;
        font-weight: 600;
        line-height: 20px;
        padding: 15px 10px
    }
}

.trade-item__type-and-name {
    font-size: 11px;
    line-height: 13px;
    max-width: 100%;
    position: relative;
    z-index: 1
}

.trade-item__name,
.trade-item__type {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.trade-item__type {
    color: hsla(0, 0%, 85%, .4);
    line-height: 16px;
    margin-bottom: 3px
}

@media (min-width:768px) {
    .trade-item__type {
        font-size: 13px;
        line-height: 20px;
        margin-bottom: 0
    }
}

.trade-item__name {
    color: #fff;
    font-weight: 600
}

@media (min-width:768px) {
    .trade-item__name {
        font-size: 16px;
        font-weight: 600;
        line-height: 24px
    }
}

.trade-item__btns {
    left: 10px;
    position: absolute;
    top: 10px;
    z-index: 1
}

.trade-item__btn {
    margin: 0 0 7px
}

.trade-item__btn--status {
    margin-top: 23px
}

.trade-item.common {
    background: linear-gradient(180deg, rgba(53, 51, 69, .5), hsla(0, 0%, 66%, .5))
}

.trade-item.common:before {
    background-image: url(/assets/rarity/common.png)
}

.trade-item.common:after {
    background-image: url(/assets/rarity/livetrade/common.svg)
}

.trade-item.uncommon {
    background: linear-gradient(180deg, rgba(0, 31, 73, .5), rgba(27, 206, 255, .5))
}

.trade-item.uncommon:before {
    background-image: url(/assets/rarity/uncommon.png)
}

.trade-item.uncommon:after {
    background-image: url(/assets/rarity/livetrade/uncommon.svg)
}

.trade-item.milspec {
    background: linear-gradient(180deg, rgba(0, 43, 106, .5), rgba(16, 104, 255, .5))
}

.trade-item.milspec:before {
    background-image: url(/assets/rarity/milspec.png)
}

.trade-item.milspec:after {
    background-image: url(/assets/rarity/livetrade/milspec.svg)
}

.trade-item.restricted {
    background: linear-gradient(180deg, rgba(50, 35, 90, .5), rgba(140, 83, 255, .5))
}

.trade-item.restricted:before {
    background-image: url(/assets/rarity/restricted.png)
}

.trade-item.restricted:after {
    background-image: url(/assets/rarity/livetrade/restricted.svg)
}

.trade-item.classified {
    background: linear-gradient(180deg, rgba(74, 30, 90, .5), rgba(247, 57, 255, .5))
}

.trade-item.classified:before {
    background-image: url(/assets/rarity/classified.png)
}

.trade-item.classified:after {
    background-image: url(/assets/rarity/livetrade/classified.svg)
}

.trade-item.covert {
    background: linear-gradient(180deg, rgba(119, 1, 41, .5), rgba(255, 61, 0, .5))
}

.trade-item.covert:before {
    background-image: url(/assets/rarity/covert.png)
}

.trade-item.covert:after {
    background-image: url(/assets/rarity/livetrade/covert.svg)
}

.trade-item.rare {
    background: linear-gradient(180deg, rgba(90, 74, 31, .5), rgba(255, 212, 26, .5))
}

.trade-item.rare:before {
    background-image: url(/assets/rarity/rare.png)
}

.trade-item.rare:after {
    background-image: url(/assets/rarity/livetrade/rare.svg)
}

.trade-item_with-hover:hover .trade-item__img {
    transform: scale(1.1)
}

.daily,
.daily__content {
    position: relative
}

.daily__content {
    background: url(/assets/daily/content-bg.svg) top no-repeat;
    background-color: #0c121b;
    border-radius: 40px;
    margin-top: 230px;
    padding: 245px 25px 25px
}

@media (min-width:768px) {
    .daily__content {
        margin-top: 380px;
        padding: 245px 30px 45px
    }
}

@media (min-width:1250px) {
    .daily__content {
        margin-top: 420px;
        padding: 185px 70px 92px
    }
}

.daily__content:before {
    background: url(/assets/daily/bg.svg) no-repeat 50%;
    background-size: contain;
    bottom: 100%;
    content: "";
    display: block;
    height: 578px;
    left: 50%;
    margin-bottom: -260px;
    position: absolute;
    transform: translateX(-50%);
    width: 578px;
    z-index: -1
}

@media (min-width:768px) {
    .daily__content:before {
        height: 964px;
        margin-bottom: -440px;
        width: 964px
    }
}

@media (min-width:1250px) {
    .daily__content:before {
        bottom: 0;
        margin-bottom: 0
    }

    .daily__main {
        bottom: 100%;
        max-width: 350px;
        padding-bottom: 50px;
        position: absolute
    }
}

@media not screen and (min-width:1250px) {
    .daily__info {
        margin-top: 42px
    }
}

.daily__btn {
    bottom: 100%;
    left: 50%;
    margin-bottom: -200px;
    position: absolute;
    transform: translateX(-50%);
    z-index: 1
}

@media (min-width:768px) {
    .daily__btn {
        margin-bottom: -180px
    }
}

@media (min-width:1250px) {
    .daily__btn {
        margin-bottom: -140px
    }
}

.daily__warning {
    padding-bottom: 25px;
    position: relative;
    z-index: 2
}

@media (min-width:1250px) {
    .daily__warning {
        bottom: 100%;
        max-width: 385px;
        padding-bottom: 50px;
        position: absolute;
        right: 0
    }
}

.daily__items {
    margin-top: 20px
}

.daily__drop {
    bottom: 100%;
    left: 50%;
    padding-bottom: 30px;
    position: absolute;
    transform: translateX(-50%);
    width: 100%;
    z-index: 2
}

@media not screen and (min-width:768px) {
    .daily__drop {
        margin-bottom: -248px
    }
}

.daily-main__title {
    background-clip: text;
    background-image: linear-gradient(#fff, #0c121b 150%);
    background-position: 50%;
    color: transparent;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    text-transform: uppercase
}

@media (min-width:768px) {
    .daily-main__title {
        font-size: 24px;
        line-height: 31px
    }
}

@media (min-width:1250px) {
    .daily-main__title {
        font-size: 32px;
        font-weight: 700;
        line-height: 40px
    }
}

.daily-main__form,
.daily-main__text {
    color: rgba(174, 191, 217, .8);
    font-size: 13px;
    line-height: 20px
}

.daily-main__text {
    margin-top: 3px
}

@media (min-width:768px) {
    .daily-main__text {
        font-size: 16px;
        font-weight: 600;
        line-height: 24px;
        margin-top: 18px
    }
}

@media (min-width:1250px) {
    .daily-main__text {
        font-size: 20px;
        font-weight: 400;
        line-height: 28px
    }
}

.daily-main__form {
    margin-top: 30px
}

.daily-main__input-group {
    margin-top: 14px
}

@media (min-width:768px) {
    .daily-main__input-group {
        align-items: center;
        display: flex;
        gap: 10px
    }
}

@media not screen and (min-width:768px) {
    .daily-main__input-btn {
        margin-top: 10px
    }

    .daily-info {
        display: flex;
        flex-direction: column;
        gap: 42px
    }
}

@media (min-width:768px) {
    .daily-info {
        column-gap: 50px;
        display: grid;
        gap: 42px;
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (min-width:1024px) {
    .daily-info {
        grid-template-columns: repeat(4, 1fr)
    }
}

.daily-info-item:before {
    background-color: #aebfd9;
    content: "";
    display: block;
    height: 24px;
    margin-bottom: 11px;
    position: relative;
    width: 24px
}

@media (min-width:768px) {
    .daily-info-item:before {
        height: 40px;
        width: 40px
    }
}

.daily-info-item__title {
    font-size: 16px;
    font-weight: 700;
    line-height: 20px
}

@media (min-width:768px) {
    .daily-info-item__title {
        font-size: 20px;
        line-height: 140%
    }
}

.daily-info-item__text {
    color: rgba(174, 191, 217, .8);
    font-size: 13px;
    line-height: 20px;
    margin-top: 11px
}

@media (min-width:768px) {
    .daily-info-item__text {
        font-size: 16px;
        line-height: 24px
    }
}

.daily-btn {
    align-items: center;
    display: flex;
    flex-direction: column;
    position: relative
}

.daily-btn__text {
    background: #ff4e18;
    border-radius: 10px;
    font-family: Inter;
    font-size: 18px;
    font-style: Italic;
    font-weight: 800;
    left: 110px;
    letter-spacing: 0;
    line-height: 25.76px;
    padding: 10px;
    position: absolute;
    text-transform: uppercase;
    top: 80px;
    width: 195px
}

@media (min-width:768px) {
    .daily-btn__text {
        left: 160px;
        top: 140px
    }
}

.daily-btn__triangle {
    border-right: 20px solid transparent;
    border-top: 20px solid #ff4e18;
    height: 0;
    left: 140px;
    position: absolute;
    top: 150px;
    width: 0
}

@media (min-width:768px) {
    .daily-btn__triangle {
        left: 190px;
        top: 210px
    }
}

.daily-btn__content {
    background: url(/assets/daily/btn-bg-open.png) no-repeat 50%;
    background-size: contain;
    height: 345px;
    width: 203px
}

@media (min-width:768px) {
    .daily-btn__content {
        height: 462px;
        width: 272px
    }
}

.daily-btn__content:after {
    background-color: #0ff;
    border-radius: 50%;
    bottom: 50%;
    content: "";
    display: block;
    filter: blur(100px);
    height: 132px;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    width: 233px;
    z-index: -1
}

@media (min-width:768px) {
    .daily-btn__content:after {
        filter: blur(100px);
        height: 131px;
        width: 312px
    }
}

.daily-btn__btn {
    border-radius: 50%;
    bottom: 86px;
    cursor: pointer;
    height: 95px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    transition: .2s ease;
    width: 97px
}

.daily-btn__btn:after {
    animation: tilt-shaking .25s linear infinite;
    background: url(/assets/daily/btn.png) no-repeat 50%;
    background-size: contain;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

@media (min-width:768px) {
    .daily-btn__btn {
        bottom: 115px;
        height: 127px;
        width: 130px
    }
}

.daily-btn__btn:hover {
    transform: translateX(-50%) scale(1.05)
}

.daily-btn__signin,
.daily-btn__timer {
    display: none;
    margin-bottom: 35px
}

.daily-btn__signin-label,
.daily-btn__timer-label {
    color: rgba(174, 191, 217, .8);
    font-size: 16px;
    line-height: 24px;
    text-align: center
}

.daily-btn__signin-label strong,
.daily-btn__timer-label strong {
    color: #fff;
    font-weight: 700
}

.daily-btn_closed .daily-btn__content {
    background-image: url(/assets/daily/btn-bg-closed.png?2);
    height: 282px
}

@media (min-width:768px) {
    .daily-btn_closed .daily-btn__content {
        height: 353px
    }
}

.daily-btn_closed .daily-btn__btn {
    display: none
}

.daily-btn_closed .daily-btn__signin,
.daily-btn_closed .daily-btn__timer {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 16px
}

@keyframes tilt-shaking {
    0% {
        transform: rotate(0deg)
    }

    25% {
        transform: rotate(5deg)
    }

    50% {
        transform: rotate(0deg)
    }

    75% {
        transform: rotate(-5deg)
    }

    to {
        transform: rotate(0deg)
    }
}

.daily-warning {
    background-color: #0c121b;
    border-radius: 40px;
    padding: 30px 25px
}

@media (min-width:768px) {
    .daily-warning {
        padding: 40px
    }
}

.daily-warning__title {
    color: #ff4e18;
    font-size: 16px;
    font-weight: 700;
    line-height: 140%
}

.daily-warning__text {
    color: rgba(174, 191, 217, .8);
    font-size: 16px;
    line-height: 24px;
    margin-top: 7px
}

.daily-warning__btn {
    margin-top: 15px
}

.icon-tooltip {
    align-items: center;
    backdrop-filter: blur(4px);
    background: rgba(115, 140, 178, .1);
    border-radius: 10px;
    display: flex;
    height: 36px;
    justify-content: center;
    position: relative;
    width: 36px
}

.icon-tooltip:before {
    background-color: rgba(174, 191, 217, .8);
    height: 16px;
    width: 16px
}

.icon-tooltip:hover .tooltip {
    opacity: 1;
    visibility: visible
}

.icon-tooltip_white:before {
    background-color: #fff
}

.wheeldrop {
    background: #0c121b;
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    padding: 16px;
    position: relative
}

.wheeldrop__text {
    color: rgba(174, 191, 217, .8);
    font-size: 14px;
    line-height: 20px;
    text-align: center
}

.wheeldrop__btn {
    left: 16px;
    position: absolute;
    top: 57px;
    z-index: 97
}

.wheeldrop__render {
    height: 150px;
    pointer-events: none;
    width: 100%
}

.wheeldrop__rules {
    left: 16px;
    position: absolute;
    top: 16px;
    z-index: 5
}

.wheeldrop__promo {
    margin: 5px auto 0
}

.wheeldrop_won {
    justify-content: center
}

.wheeldrop_won .wheeldrop__text {
    margin: 11px 0 0
}

.bonus-item {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    position: relative;
    width: 100%
}

.bonus-item__img {
    height: 80%;
    max-width: 80%;
    object-fit: contain;
    object-position: center;
    position: absolute;
    z-index: 1
}

.bonus-item__label,
.bonus-item__value {
    position: relative;
    z-index: 2
}

.bonus-item__value {
    color: #130e14;
    color: #e3fbff;
    font-size: 12px;
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .24px;
    line-height: 120%;
    line-height: 67px;
    pointer-events: none;
    text-shadow: 0 3px 1px rgba(10, 34, 43, .6), 0 0 10px hsla(0, 0%, 7%, .7);
    z-index: 4
}

.bonus-item__value_margin-b5 {
    margin-bottom: 5px
}

.bonus-item__value_margin-b10 {
    margin-bottom: 10px
}

.bonus-item__value_margin-b15 {
    margin-bottom: 15px
}

.bonus-item__value_margin-b20 {
    margin-bottom: 20px
}

.bonus-item__value_margin-b40 {
    margin-bottom: 40px
}

.bonus-item__value_margin-t5 {
    margin-top: 5px
}

.bonus-item__value_margin-t10 {
    margin-top: 10px
}

.bonus-item__value_margin-t15 {
    margin-top: 15px
}

.bonus-item__value_margin-t40 {
    margin-top: 40px
}

.bonus-item__value_rotate-left-10 {
    transform: rotate(-10deg)
}

.bonus-item__value_rotate-right-10 {
    transform: rotate(10deg)
}

.bonus-item__value_font-small {
    font-size: 50px;
    line-height: 60px
}

.bonus-item__value_font-large {
    font-size: 75px;
    line-height: 60px
}

.bonus-item__value_yellow {
    color: #ffff6b;
    text-shadow: 0 3px 1px rgba(80, 17, 149, .6), 0 0 10px #111
}

.bonus-item__value_red {
    color: #fb642a;
    text-shadow: 0 3px 1px #bb3704, 0 0 10px #111
}

.bonus-item__value_orange {
    color: #ff8609;
    text-shadow: 0 3px 1px #a25200, 0 0 10px #111
}

.bonus-item__value_pink {
    color: #ff89f3;
    text-shadow: 0 3px 1px #b912a8, 0 0 10px #111
}

.bonus-item__value_blue {
    color: #a0dfe2;
    text-shadow: 0 3px 1px #36adb3, 0 0 10px #111
}

.bonus-item__value_gray {
    color: #e0c5b3;
    text-shadow: 0 3px 1px #b27248, 0 0 10px #111
}

.bonus-item__label {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100%;
    color: #fff;
    display: none;
    font-family: PT Sans Narrow, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 16px;
    margin-bottom: 5px;
    padding: 9px 14px;
    text-shadow: 0 1px 0 hsla(0, 0%, 7%, .6);
    text-transform: uppercase
}

.bonus-item__label_green {
    background-image: url(/assets/bonus-wheel/items/label_green.svg)
}

.bonus-item__label_orange {
    background-image: url(/assets/bonus-wheel/items/label_orange.svg);
    color: #111;
    text-shadow: 0 1px 0 hsla(0, 0%, 7%, .25)
}

.bonus-item__label_pink {
    background-image: url(/assets/bonus-wheel/items/label_pink.svg)
}

.bonus-item__label_blue {
    background-image: url(/assets/bonus-wheel/items/label_blue.svg)
}

.daily-drop {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.daily-drop__preview {
    height: 275px;
    width: 258px
}

.daily-drop__btns {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 30px;
    width: 100%
}

@media not screen and (min-width:768px) {
    .daily-drop__btns {
        flex-direction: column;
        padding: 0 25px
    }
}

.layout-prizes__prizes,
.layout-prizes__winners {
    background-color: #0c121b;
    border-radius: 20px;
    margin-top: 30px;
    padding: 20px 10px;
    position: relative;
    z-index: 1
}

@media (min-width:768px) {

    .layout-prizes__prizes,
    .layout-prizes__winners {
        border-radius: 30px;
        padding: 60px 30px 30px
    }

    .layout-prizes__prizes:after,
    .layout-prizes__prizes:before {
        background: url(/assets/prizes/decoration.png) no-repeat 50%;
        background-size: contain;
        content: "";
        display: block;
        height: 100%;
        height: 600px;
        position: absolute;
        top: 0;
        width: 100%;
        width: 624px;
        z-index: -1
    }
}

.layout-prizes__prizes:before {
    left: 0
}

.layout-prizes__prizes:after {
    right: 0;
    transform: scaleX(-1)
}

.layout-prizes__winners {
    margin-top: 30px
}

@media (min-width:768px) {
    .layout-prizes__winners {
        margin-top: 50px
    }
}

@media (min-width:1024px) {
    .layout-prizes__winners {
        margin-top: 80px
    }
}

.layout-prizes__prizes-title {
    background-clip: text;
    background-image: linear-gradient(#fff, #0c121b 150%);
    background-position: 50%;
    color: transparent;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    text-transform: uppercase
}

@media (min-width:768px) {
    .layout-prizes__prizes-title {
        font-size: 20px;
        font-weight: 700;
        line-height: 140%;
        line-height: 28px
    }
}

@media (min-width:768px) and (min-width:768px) {
    .layout-prizes__prizes-title {
        font-size: 24px;
        line-height: 31px
    }
}

.layout-prizes__prizes-sub-title {
    color: rgba(174, 191, 217, .8);
    font-size: 16px;
    line-height: 24px;
    margin-top: 5px;
    text-align: center
}

.layout-prizes__prizes-items {
    margin-top: 35px
}

@media (min-width:768px) {
    .layout-prizes__prizes-items {
        display: grid;
        gap: 20px;
        grid-template-columns: 1fr 1fr;
        margin-top: 40px
    }
}

@media (min-width:1024px) {
    .layout-prizes__prizes-items {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        margin-top: 55px
    }
}

.layout-prizes__prize-wrapper {
    background: #0c121b;
    border: 1px solid rgba(115, 140, 178, .1);
    border-radius: 35px;
    counter-reset: winner;
    min-width: 0;
    padding: 15px
}

@media not screen and (min-width:768px) {
    .layout-prizes__prize-wrapper {
        margin-top: 10px
    }
}

.layout-prizes__prize-item {
    height: 216px
}

@media (min-width:1024px) {
    .layout-prizes__prize-item {
        height: 166px
    }
}

.layout-prizes__prize-leaders {
    margin-top: 10px
}

.layout-prizes__prizes-tabs {
    display: flex;
    justify-content: center;
    margin-top: 20px
}

.layout-prizes__info {
    margin-top: 50px
}

@media (min-width:1024px) {
    .layout-prizes__info {
        margin-top: 80px
    }
}

.prize-leader {
    align-items: center;
    border-radius: 10px;
    color: rgba(174, 191, 217, .8);
    display: flex;
    font-size: 13px;
    gap: 10px;
    line-height: 20px;
    padding: 10px 15px;
    width: 100%
}

.prize-leader:before {
    content: counter(winner);
    counter-increment: winner;
    flex: none;
    width: 16px
}

.prize-leader__img {
    border-radius: 50%;
    flex: none;
    height: 30px;
    overflow: hidden;
    width: 30px
}

.prize-leader__img img {
    width: 100%
}

.prize-leader__name {
    flex-grow: 1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.prize-leader__cases {
    margin-left: auto
}

.prize-leader:nth-child(2n) {
    background-color: rgba(18, 26, 37, .5)
}

.prize-leader_winner:before {
    display: none
}

@media (min-width:1024px) {
    .info-section {
        display: flex;
        gap: 30px;
        justify-content: space-between
    }
}

.info-section__item {
    align-items: center;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    text-align: center
}

@media not screen and (min-width:1024px) {
    .info-section__item {
        margin-top: 30px
    }
}

.info-section__item:before {
    background-color: rgba(174, 191, 217, .8);
    content: "";
    display: block;
    height: 40px;
    margin-bottom: 10px;
    width: 40px
}

.info-section__title {
    font-size: 16px;
    font-weight: 700;
    line-height: 20px
}

@media (min-width:768px) {
    .info-section__title {
        font-size: 20px;
        font-weight: 700;
        line-height: 140%;
        line-height: 28px
    }
}

@media (min-width:768px) and (min-width:768px) {
    .info-section__title {
        font-size: 24px;
        line-height: 31px
    }
}

.info-section__text {
    color: rgba(174, 191, 217, .8);
    font-size: 16px;
    line-height: 24px;
    margin-top: 10px
}

.raffles__title-mix {
    margin-bottom: 7px
}

.raffles__winners {
    display: flex;
    justify-content: center
}

.raffles__winners-link {
    align-items: center;
    color: #ffd600;
    display: flex;
    font-size: 16px;
    gap: 6px;
    line-height: 24px;
    transition: .2s ease
}

.raffles__winners-link:before {
    background-color: #ffd600;
    height: 16px;
    transition: .2s ease;
    width: 16px
}

.raffles__winners-link:hover {
    color: #fff
}

.raffles__winners-link:hover:before {
    background-color: #fff
}

@media not screen and (min-width:1510px) {
    .refill-prize-widget {
        position: relative
    }
}

@media (min-width:1510px) {
    .refill-prize-widget {
        display: flex;
        gap: 10px
    }
}

.refill-prize-widget__title-winners {
    transition: color .2s ease
}

@media not screen and (min-width:1510px) {
    .refill-prize-widget__title-winners {
        display: flex;
        justify-content: space-between
    }
}

@media (min-width:1510px) {
    .refill-prize-widget__title-winners {
        backdrop-filter: blur(15px);
        background: url(/assets/refill-widget.svg?v=2) 50% no-repeat;
        flex: none;
        height: 118px;
        margin-top: 1px;
        padding: 30px 12px 30px 18px;
        width: 150px
    }

    .refill-prize-widget__title-winners:hover {
        color: #63adf2
    }
}

.refill-prize-widget__title {
    align-items: center;
    display: flex;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase
}

@media not screen and (min-width:1510px) {
    .refill-prize-widget__title:before {
        background: url(/assets/wallet.svg?v=2) 50% no-repeat;
        content: "";
        display: block;
        height: 18px;
        margin-right: 10px;
        position: relative;
        width: 20px
    }
}

.refill-prize-widget__winners {
    align-items: center;
    color: #63adf2;
    display: flex;
    font-size: 12px
}

@media (min-width:1510px) {
    .refill-prize-widget__winners {
        margin-top: 7px
    }
}

.refill-prize-widget__winners:after {
    background: url(/assets/refill-winners.svg?v=2) 50% no-repeat;
    content: "";
    display: block;
    height: 12px;
    margin-left: 5px;
    position: relative;
    transition: .2s ease;
    width: 12px
}

.refill-prize-widget__items {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    max-width: 100%;
    padding: 0 0 10px
}

@media (min-width:768px) {
    .refill-prize-widget__items {
        margin-top: 30px;
        padding: 0
    }
}

@media not screen and (min-width:1510px) {
    .refill-prize-widget__items {
        overflow-x: visible;
        overflow-y: auto
    }
}

@media (min-width:1510px) {
    .refill-prize-widget__items {
        flex-grow: 1;
        padding: 0
    }
}

.refill-prize-widget__items::-webkit-scrollbar-track {
    background-color: transparent
}

.refill-prize-widget__items::-webkit-scrollbar {
    height: 3px;
    width: 3px
}

.refill-prize-widget__items::-webkit-scrollbar-thumb {
    background-color: rgba(174, 191, 217, .8)
}

.refill-prize-widget__item {
    height: 108px
}

@media not screen and (min-width:1510px) {
    .refill-prize-widget__item {
        flex: none;
        width: 302px
    }
}

@media (min-width:1510px) {
    .refill-prize-widget__item {
        flex: 1 1 0;
        max-width: 355px;
        width: 0
    }
}

.refill-prize-widget__item:first-child {
    margin-left: auto
}

.refill-prize-widget__item:last-child {
    margin-right: auto
}

@media (min-width:768px) {
    .refill-prize-widget__control {
        backdrop-filter: blur(6.5px);
        background: rgba(88, 119, 174, .5) url(/assets/widget-arrow.svg?v=2) 50% no-repeat;
        border-radius: 0;
        bottom: 13px;
        cursor: var(--cursor-pointer);
        height: 118px;
        position: absolute;
        right: 0;
        transition: .2s ease;
        width: 40px;
        z-index: 2
    }
}

@media (min-width:1250px) {
    .refill-prize-widget__control {
        border-radius: 0
    }
}

@media (min-width:1510px) {
    .refill-prize-widget__control {
        display: none
    }
}

@media not screen and (min-width:1510px) {
    .refill-prize-widget__control:hover {
        background-color: rgba(88, 119, 174, .7)
    }
}

.refill-prize-item {
    backdrop-filter: blur(20px);
    border-radius: 8px;
    height: 100%;
    overflow: hidden;
    position: relative;
    text-align: left;
    width: 100%;
    z-index: 1
}

.refill-prize-item:before {
    background-size: contain;
    border-radius: 8px;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    opacity: .5;
    position: absolute;
    top: 0;
    transition: opacity .2s ease;
    width: 100%;
    z-index: -1
}

.refill-prize-item__content {
    align-items: stretch;
    display: flex;
    height: 100%;
    padding: 13px 10px
}

.refill-prize-item__content:after {
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 101px
}

.refill-prize-item__img {
    align-items: center;
    display: flex;
    flex: none;
    justify-content: center;
    position: relative;
    width: 36%;
    z-index: 2
}

.refill-prize-item__img:before {
    background: url(/assets/raffle-item.svg) 50% no-repeat;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1
}

.refill-prize-item__img img {
    transition: transform .2s ease
}

.refill-prize-item__info {
    flex-grow: 1;
    max-width: 100%;
    min-width: 0;
    padding-left: 14px
}

.refill-prize-item__title {
    color: hsla(0, 0%, 85%, .6);
    font-size: 13px;
    line-height: 20px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.refill-prize-item__price {
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    margin-top: 2px;
    width: 100%
}

.refill-prize-item__timer {
    display: inline-flex;
    margin-top: 9px
}

.refill-prize-item__users {
    align-items: center;
    background: hsla(0, 0%, 100%, .2);
    border-radius: 6px;
    display: flex;
    font-size: 12px;
    font-weight: 700;
    gap: 5px;
    left: 5px;
    line-height: 15px;
    padding: 4px 7px;
    position: absolute;
    top: 5px;
    z-index: 2
}

.refill-prize-item__users:before {
    background: url(/assets/user.svg?v=2) 50% no-repeat;
    content: "";
    display: block;
    height: 12px;
    position: relative;
    width: 12px
}

.refill-prize-item__status {
    display: none;
    font-size: 0;
    left: 8px;
    position: absolute;
    top: 8px;
    z-index: 1
}

.refill-prize-item__status:after,
.refill-prize-item__status:before {
    content: "";
    display: block;
    position: relative
}

.refill-prize-item_available .refill-prize-item__status {
    display: block
}

.refill-prize-item_available .refill-prize-item__status:after,
.refill-prize-item_available .refill-prize-item__status:before {
    height: 18px;
    left: 0;
    position: absolute;
    top: 0;
    width: 18px
}

.refill-prize-item_available .refill-prize-item__status:before {
    animation: opacityPulse100 2s ease-in-out infinite;
    background: #f8e700;
    border-radius: 50%;
    filter: blur(5px);
    transform: scale(1.1)
}

.refill-prize-item_available .refill-prize-item__status:after {
    background: url(/assets/refill-prize-available.svg) 50% no-repeat
}

.refill-prize-item_done .refill-prize-item__status {
    align-items: center;
    backdrop-filter: blur(5px);
    background: rgba(0, 0, 0, .2);
    border-radius: 6px;
    color: #7ed321;
    display: flex;
    font-size: 12px;
    line-height: 15px;
    padding: 4px 6px
}

.refill-prize-item_done .refill-prize-item__status:before {
    background: url(/assets/tradelink-plugin/state-good.svg) 50% no-repeat;
    background-size: 100%;
    height: 12px;
    margin-right: 3px;
    width: 12px
}

.refill-prize-item_clickable {
    cursor: pointer;
    transition: .2s ease
}

.refill-prize-item_clickable:after {
    background: url(/assets/refill-item-link.svg) 50% no-repeat;
    content: "";
    display: block;
    height: 9px;
    opacity: 0;
    position: absolute;
    right: 6px;
    top: 6px;
    transition: .2s ease;
    width: 9px
}

.refill-prize-item_clickable:hover:before {
    opacity: .6
}

.refill-prize-item_clickable:hover:after {
    opacity: 1
}

.refill-prize-item_clickable:hover img {
    transform: scale(1.1)
}

.refill-prize-item.common:before {
    background: linear-gradient(180deg, #a9a9a9, #353345 175.36%)
}

.refill-prize-item.common .refill-prize-item__content:after {
    background-image: url(/assets/common.png);
    z-index: 1
}

.refill-prize-item.common .refill-prize-item__price {
    color: #cfcfcf
}

.refill-prize-item.uncommon:before {
    background: linear-gradient(180deg, #1bceff, #001f49 175.36%)
}

.refill-prize-item.uncommon .refill-prize-item__content:after {
    background-image: url(/assets/uncommon.png);
    z-index: 1
}

.refill-prize-item.uncommon .refill-prize-item__price {
    color: #68deff
}

.refill-prize-item.milspec:before {
    background: linear-gradient(180deg, #1068ff, #002b6a 175.36%)
}

.refill-prize-item.milspec .refill-prize-item__content:after {
    background-image: url(/assets/milspec.png);
    z-index: 1
}

.refill-prize-item.milspec .refill-prize-item__price {
    color: #5d98ff
}

.refill-prize-item.restricted:before {
    background: linear-gradient(180deg, #8c53ff, #32235a 175.36%)
}

.refill-prize-item.restricted .refill-prize-item__content:after {
    background-image: url(/assets/restricted.png);
    z-index: 1
}

.refill-prize-item.restricted .refill-prize-item__price {
    color: #bfa0ff
}

.refill-prize-item.classified:before {
    background: linear-gradient(180deg, #f739ff, #4a1e5a 175.36%)
}

.refill-prize-item.classified .refill-prize-item__content:after {
    background-image: url(/assets/classified.png);
    z-index: 1
}

.refill-prize-item.classified .refill-prize-item__price {
    color: #fa86ff
}

.refill-prize-item.covert:before {
    background: linear-gradient(180deg, #ff3d00, #770129 175.36%)
}

.refill-prize-item.covert .refill-prize-item__content:after {
    background-image: url(/assets/covert.png);
    z-index: 1
}

.refill-prize-item.covert .refill-prize-item__price {
    color: #ff774d
}

.refill-prize-item.rare:before {
    background: linear-gradient(180deg, #ffd41a, #5a4a1f 175.36%)
}

.refill-prize-item.rare .refill-prize-item__content:after {
    background-image: url(/assets/rare.png);
    z-index: 1
}

.refill-prize-item.rare .refill-prize-item__price {
    color: #ffe267
}

@keyframes opacityPulse100 {
    0% {
        opacity: 0
    }

    50% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

.prizes-popup {
    align-items: center;
    display: flex;
    flex-direction: column;
    text-align: center
}

.prizes-popup__title {
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    margin-bottom: 5px;
    text-transform: uppercase
}

@media (min-width:768px) {
    .prizes-popup__title {
        font-size: 20px;
        line-height: 140%
    }
}

.prizes-popup__sub-title {
    color: rgba(174, 191, 217, .8);
    font-size: 16px;
    line-height: 24px
}

.prizes-popup__skin {
    height: 101px;
    margin-top: 20px;
    width: 310px
}

@media not screen and (min-width:375px) {
    .prizes-popup__skin {
        transform: scale(.8)
    }
}

@media (min-width:768px) {
    .prizes-popup__skin {
        width: 360px
    }
}

.prizes-popup__progress {
    margin-top: 30px;
    padding: 0 22px;
    width: 100%
}

@media (min-width:768px) {
    .prizes-popup__progress {
        padding: 0 28px
    }
}

.prizes-popup__progress,
.prizes-popup__submit {
    color: rgba(174, 191, 217, .8);
    font-size: 14px;
    line-height: 20px
}

.prizes-popup__progress-bar {
    margin-top: 18px
}

.prizes-popup__progress-values {
    align-items: center;
    color: rgba(174, 191, 217, .8);
    display: flex;
    width: 100%
}

.prizes-popup__progress-value {
    flex: 1 1 0;
    padding-top: 8px;
    position: relative
}

.prizes-popup__progress-value:first-child {
    text-align: left
}

.prizes-popup__progress-value:nth-child(2):before {
    background: #28215a;
    content: "";
    display: block;
    height: 9px;
    left: 50%;
    position: absolute;
    top: 0;
    transform: translate(-50%);
    width: 1px
}

.prizes-popup__progress-value:last-child {
    text-align: right
}

.prizes-popup__progress-text-section_goal {
    color: #fff
}

.prizes-popup__progress-text-section_good {
    color: #7ed321
}

.prizes-popup__submit {
    align-items: center;
    background: rgba(18, 26, 37, .5);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    font-size: 16px;
    line-height: 24px;
    margin-top: 30px;
    padding: 20px 20px 30px;
    width: 100%
}

.prizes-popup__submit_available {
    background: #ffba1f1a;
    color: #fbae21
}

.prizes-popup__submit_done {
    background: #7ed3211a;
    color: #7ed321
}

.prizes-popup__login,
.prizes-popup__progress-btn,
.prizes-popup__submit-btn {
    margin-top: 20px
}

.progress-bar {
    background: #030709;
    border: 1px solid #192435;
    border-radius: 33px;
    height: 26px;
    padding: 1px;
    width: 100%
}

.progress-bar__progress {
    background: #d8a70a;
    border-radius: 35px;
    height: 100%;
    position: relative
}

.progress-bar__value {
    background: #7ed321;
    border-radius: 4px;
    bottom: 50%;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    left: 100%;
    line-height: 18px;
    padding: 5px 6px;
    position: absolute;
    transform: translate(-50%);
    white-space: nowrap
}

.progress-bar__value:after {
    border-color: #7ed321 transparent transparent;
    border-style: solid;
    border-width: 5px 4.5px 0;
    content: "";
    display: block;
    height: 0;
    left: 50%;
    position: absolute;
    top: 100%;
    transform: translate(-50%);
    width: 0
}

.how-it-steps {
    margin-top: 20px
}

.how-it-steps__step {
    flex: none;
    height: 20px;
    width: 20px
}

.how-it-steps__step:before {
    background: rgba(174, 191, 217, .8);
    content: "";
    display: block;
    height: 20px;
    margin-top: 1px;
    width: 20px
}

@media (min-width:768px) {
    .how-it-steps__step:before {
        margin-top: 2px
    }
}

.how-it-steps__title {
    color: #ffd600;
    font-weight: 700
}

.how-it-steps__column {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    text-align: left
}

.how-it-steps__column.done {
    color: #7ed321
}

.how-it-steps__column.done>:before {
    background-color: #7ed321
}

.how-it-steps__text {
    display: inline;
    font-size: 13px;
    line-height: 20px
}

@media (min-width:768px) {
    .how-it-steps__text {
        font-size: 16px;
        line-height: 24px
    }
}

.how-it-steps__btn {
    display: inline
}

.layout-raffles__load-more {
    display: flex;
    justify-content: center;
    margin: 30px 0 0
}

.checkbox {
    user-select: none
}

.checkbox__square {
    backface-visibility: hidden;
    background-color: rgba(0, 0, 0, .2);
    border: 1px solid #454f5b;
    border-radius: 2px;
    flex: none;
    height: 16px;
    margin-right: 8px;
    opacity: 1;
    position: relative;
    transform: translateZ(0);
    transition: .2s ease;
    width: 16px
}

.checkbox__square:before {
    background-image: url(/assets/icon_check_available.svg);
    background-size: contain;
    content: "";
    filter: brightness(2.2);
    height: 7px;
    left: 50%;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: .2s ease;
    visibility: hidden;
    width: 9px
}

.checkbox__text {
    font-size: 15px;
    line-height: 18px
}

.checkbox label {
    align-items: center;
    color: rgba(174, 191, 217, .8);
    cursor: pointer;
    display: flex;
    font-size: 16px;
    line-height: 24px
}

.checkbox label a {
    color: #f3b705
}

.checkbox label a:hover {
    text-decoration: underline
}

.checkbox label:hover .checkbox__square {
    background-color: rgba(0, 0, 0, .3);
    border-color: #505c6a
}

.checkbox label:hover .checkbox__square:before {
    opacity: .3;
    visibility: visible
}

.checkbox input:checked+label .checkbox__square {
    background-color: #f3b705;
    border-color: #f3b705
}

.checkbox input:checked+label .checkbox__square:before {
    opacity: 1;
    visibility: visible
}

.checkbox input:checked:hover+label .checkbox__square {
    background-color: #f3b705
}

@media (max-width:1200px) {
    .checkbox_terms .checkbox__square {
        height: 25px;
        margin-right: 12px;
        width: 25px
    }

    .checkbox_terms .checkbox__square:before {
        height: 12px;
        width: 15px
    }
}

.layout-refill__head {
    align-items: center;
    display: flex
}

.layout-refill__head .button {
    padding: 6px 18px;
    width: auto
}

@media not screen and (min-width:768px) {
    .layout-refill__head {
        grid-gap: 12px 0
    }
}

@media only screen and (min-width:630px) and (max-width:1099px) {
    .layout-refill__head {
        grid-gap: 12px 15px
    }
}

@media not screen and (min-width:1024px) {
    .layout-refill__head {
        height: 36px;
        justify-content: space-between;
        margin-bottom: 22px
    }
}

@media (min-width:1024px) {
    .layout-refill__head {
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
        justify-content: space-between;
        margin-bottom: 22px;
        width: 100%
    }
}

.layout-refill__section {
    display: flex;
    gap: 30px
}

@media not screen and (min-width:1024px) {
    .layout-refill__section {
        flex-direction: column
    }
}

@media (min-width:1024px) {
    .layout-refill__section {
        align-items: flex-start;
        justify-content: center
    }
}

.layout-refill__return {
    display: none
}

@media not screen and (min-width:1024px) {
    .layout-refill__return {
        align-items: center;
        white-space: nowrap;
        width: fit-content
    }

    .layout-refill__return .svg {
        transform: rotate(90deg)
    }

    .layout-refill__refill-step {
        color: #fff;
        font-weight: 600;
        margin-bottom: 12px
    }
}

@media (min-width:1024px) {
    .layout-refill__refill-step {
        display: none
    }
}

@media not screen and (min-width:1024px) {

    .layout-refill__payments,
    .layout-refill__refill-data {
        flex: none;
        transition: .12s ease;
        will-change: transform
    }
}

.layout-refill__payments {
    background-color: #0c121b;
    border-radius: 20px;
    padding: 10px;
    width: 100%
}

@media (min-width:768px) {
    .layout-refill__payments {
        border-radius: 40px;
        padding: 30px
    }
}

@media not screen and (min-width:1024px) {
    .layout-refill__form {
        margin-bottom: 32px
    }
}

.layout-refill__info {
    color: rgba(174, 191, 217, .8);
    font-size: 13px;
    line-height: 20px;
    margin-top: 32px
}

@media (min-width:1024px) {
    .layout-refill__info {
        max-width: 700px
    }
}

.layout-refill__info a {
    color: #f3b705
}

.layout-refill__info a:hover {
    text-decoration: underline
}

.layout-refill__country-label {
    color: rgba(174, 191, 217, .8);
    font-size: 13px;
    line-height: 20px
}

.layout-refill__country-switcher {
    align-items: center;
    display: flex;
    margin: 10px 0
}

@media (min-width:768px) {
    .layout-refill__country-switcher {
        margin: 16px 0 20px
    }
}

.layout-refill__refill-data {
    display: flex;
    flex-direction: column;
    width: 100%
}

@media (min-width:1024px) {
    .layout-refill__refill-data {
        grid-gap: 22px 0
    }
}

.layout-refill__g2a-title {
    color: #fff;
    font-size: 18px;
    font-weight: 600
}

@media not screen and (min-width:1024px) {
    .layout-refill__g2a-title {
        margin: 22px 0
    }
}

@media (min-width:1024px) {
    .layout-refill__g2a-title {
        margin: 52px 0 32px
    }
}

.layout-refill__steps {
    margin: 130px 0 52px
}

.layout-refill__table {
    overflow-x: auto
}

.layout-refill__table::-webkit-scrollbar-track {
    background-color: #fff
}

.layout-refill__table::-webkit-scrollbar {
    height: 1.5px;
    width: 1.5px
}

.layout-refill__table::-webkit-scrollbar-thumb {
    background: #fff
}

.layout-refill__infos-section {
    display: flex;
    flex-direction: column;
    gap: 32px
}

.layout-refill__history {
    color: #fff;
    text-decoration: underline;
    transition: .1s ease
}

.layout-refill__info-text {
    border-radius: 6px;
    padding: 20px;
    text-align: center
}

.country-switcher {
    background-color: rgba(115, 140, 178, .1);
    border-radius: 10px;
    height: 46px;
    position: relative;
    width: 100%;
    z-index: 2
}

.country-switcher__current {
    align-items: center;
    color: hsla(0, 0%, 85%, .8);
    cursor: pointer;
    display: flex;
    font-size: 13px;
    font-weight: 500;
    font-weight: 600;
    line-height: 20px;
    padding: 13px 20px;
    transition: .08s ease-in-out
}

@media not screen and (min-width:768px) {
    .country-switcher__current {
        font-size: 11px;
        max-width: 220px
    }
}

.country-switcher__current:after {
    background: url(/assets/chevron-down.svg);
    content: "";
    display: block;
    height: 18px;
    margin-left: 5px;
    position: relative;
    width: 18px
}

.country-switcher__current img {
    height: 20px;
    margin-right: 5px;
    width: 20px
}

.country-switcher__all-countries {
    backdrop-filter: blur(30px);
    background-color: rgba(115, 140, 178, .1);
    border-radius: 8px;
    box-shadow: 0 0 30px 10px hsla(0, 0%, 7%, .6);
    height: 300px;
    min-width: 230px;
    opacity: 0;
    overflow-y: auto;
    padding: 6px 14px;
    position: absolute;
    right: 0;
    top: 100%;
    transition: .08s ease-in-out;
    visibility: hidden;
    width: 100%;
    z-index: 2
}

.country-switcher__all-countries::-webkit-scrollbar-track {
    background-color: transparent;
    margin: 10px 0
}

.country-switcher__all-countries::-webkit-scrollbar {
    height: 1.5px;
    width: 1.5px
}

.country-switcher__all-countries::-webkit-scrollbar-thumb {
    border-radius: 3px
}

.country-switcher__all-countries.active {
    opacity: 1;
    visibility: visible
}

.country-switcher__country {
    align-items: center;
    color: hsla(0, 0%, 85%, .8);
    cursor: pointer;
    display: flex;
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    padding: 10px 0;
    transition: .08s ease-in-out
}

.country-switcher__country:hover {
    color: #fff
}

.country-switcher__country:not(.country-switcher__country:last-child) {
    border-bottom: 1px solid hsla(0, 0%, 85%, .2)
}

.country-switcher__country img {
    margin-right: 10px;
    width: 20px
}

.refill-data {
    background-color: #0c121b;
    border-radius: 20px;
    padding: 10px;
    position: relative
}

@media (min-width:768px) {
    .refill-data {
        border-radius: 40px;
        padding: 30px
    }
}

.refill-data__head {
    align-items: center;
    background-color: rgba(115, 140, 178, .05);
    border-radius: 17px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 22px;
    padding: 18px 20px;
    width: 100%
}

.refill-data__title {
    color: rgba(174, 191, 217, .8);
    font-size: 11px;
    line-height: 16px
}

@media (min-width:768px) {
    .refill-data__title {
        font-size: 16px;
        line-height: 24px
    }
}

.refill-data__method-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 20px
}

@media (min-width:768px) {
    .refill-data__method-name {
        font-size: 20px;
        font-weight: 700;
        line-height: 28px
    }
}

@media (min-width:768px) and (min-width:768px) {
    .refill-data__method-name {
        font-size: 24px;
        line-height: 31px
    }
}

.refill-data__method-img {
    max-height: 50px;
    max-width: 80px;
    width: 100%
}

.refill-data__inputs {
    grid-gap: 20px 0;
    display: flex;
    flex-direction: column;
    margin-top: 24px;
    width: 100%
}

@media (min-width:768px) {
    .refill-data__inputs {
        grid-gap: 27px 0
    }
}

.refill-data__action {
    display: flex;
    justify-content: center
}

.refill-data__action .action {
    margin: 0;
    width: 92%
}

.refill-data__bonus {
    font-weight: 500;
    margin-bottom: 12px
}

.refill-data__bonus .action {
    margin-bottom: 12px;
    margin-left: 6px
}

.refill-data__bonus b {
    color: red;
    font-weight: 600
}

.refill-data__info {
    align-items: center;
    color: rgba(174, 191, 217, .8);
    display: flex;
    font-size: 13px;
    line-height: 20px;
    margin-bottom: 12px;
    padding-bottom: 12px
}

.refill-data__info:before {
    background-color: rgba(174, 191, 217, .8);
    margin-right: 10px
}

.refill-data__info_comission {
    color: #f3b705
}

.refill-data__info_comission:before {
    background-color: #f3b705
}

.refill-data__info .price {
    color: #f3b705;
    font-weight: 700
}

.refill-data__refill-presets {
    grid-gap: 12px;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 15px
}

.refill-data__preset {
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    padding: 5px 10px;
    transition: .08s ease-in-out
}

.refill-data__promocode-info {
    align-items: center;
    border-radius: 12px;
    display: flex;
    font-size: 16px;
    font-weight: 600;
    gap: 6px;
    justify-content: center;
    line-height: 24px;
    padding: 21px 10px;
    position: relative
}

@media not screen and (min-width:1024px) {
    .refill-data__promocode-info {
        font-size: 14px
    }
}

@media (min-width:1024px) {
    .refill-data__promocode-info {
        font-size: 15px
    }
}

.refill-data__promocode-info span {
    display: flex
}

.refill-data__promocode-info:after,
.refill-data__promocode-info:before {
    background-image: linear-gradient(270deg, var(--refill-info-gd-1) 0, var(--refill-info-gd-3) 50%, var(--refill-info-gd-1) 100%);
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    width: 100%
}

.refill-data__promocode-info:before {
    top: 0
}

.refill-data__promocode-info:after {
    bottom: 0
}

.refill-data__promocode-info_success {
    background-color: rgba(132, 169, 0, .1);
    color: #84a900
}

.refill-data__promocode-info_error {
    background-color: rgba(255, 78, 24, .1);
    color: #ff4e18
}

.refill-data__promocode-info_bonus {
    background-color: rgba(243, 183, 5, .1);
    color: #f3b705
}

.refill-data__promocode-info_medium {
    font-size: 13px;
    padding-left: 0;
    padding-right: 0
}

.refill-data__amount-title {
    font-size: 16px;
    font-weight: 400
}

.refill-data__amount-get {
    align-items: center;
    display: flex;
    justify-content: space-between;
    width: 100%
}

.refill-data__you-get {
    grid-gap: 20px 0;
    display: flex;
    flex-direction: column;
    width: 100%
}

@media (min-width:768px) {
    .refill-data__you-get {
        grid-gap: 27px 0
    }
}

.refill-data__price {
    color: #f3b705;
    font-size: 32px;
    font-weight: 700
}

@media not screen and (min-width:768px) {
    .refill-data__price {
        font-size: 24px;
        font-weight: 700
    }
}

.refill-data__price--limit {
    margin-bottom: 4px
}

.refill-data__rate {
    color: #fff;
    font-size: 22px;
    font-weight: 600
}

.refill-data__verification {
    margin-top: 16px
}

.refill-data__promocode-message {
    align-items: center;
    background-color: rgba(243, 183, 5, .1);
    border-radius: 12px;
    color: #f3b705;
    display: flex;
    font-size: 16px;
    font-weight: 600;
    gap: 13px;
    line-height: 24px;
    margin-bottom: 27px;
    padding: 13px 17px
}

@media not screen and (min-width:768px) {
    .refill-data__promocode-message {
        font-size: 12px;
        line-height: 16px;
        margin-bottom: 20px
    }
}

.refill-data__promocode-message a {
    color: #f3b705;
    text-decoration: underline
}

.refill-data__promocode-message a:hover {
    text-decoration: none
}

.refill-data__promocode-message .icon {
    flex: none
}

.refill-data__promocode-message .icon:before {
    background-color: #ffd600;
    height: 28px;
    width: 26px
}

.refill-data__promocodes-title {
    color: rgba(174, 191, 217, .8);
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 20px
}

.refill-data__promocodes {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(161px, 1fr));
    margin-bottom: 27px
}

@media not screen and (min-width:768px) {
    .refill-data__promocodes {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        margin-bottom: 20px
    }
}

.refill-data__actions {
    display: flex;
    flex-direction: column;
    gap: 27px;
    margin-top: 27px
}

@media not screen and (min-width:768px) {
    .refill-data__actions {
        font-size: 12px;
        gap: 20px;
        line-height: 16px;
        margin-top: 20px
    }
}

.refill-payments {
    grid-gap: 10px;
    display: grid;
    width: 100%
}

@media not screen and (min-width:1024px) {
    .refill-payments {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr))
    }
}

@media (min-width:1024px) {
    .refill-payments {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr))
    }
}

.refill-payments__item {
    align-items: center;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-color: rgba(115, 140, 178, .05);
    border: 1px solid transparent;
    border-radius: 14px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    position: relative;
    transition: .08s ease-in-out
}

.refill-payments__item img {
    width: 100%
}

@media not screen and (min-width:1024px) {
    .refill-payments__item {
        height: 72px;
        padding: 10px
    }

    .refill-payments__item img {
        max-height: 40px;
        max-width: 90px
    }
}

@media (min-width:1024px) {
    .refill-payments__item {
        height: 107px;
        padding: 20px
    }

    .refill-payments__item img {
        max-height: 80px;
        max-width: 107px
    }
}

@media not all and (hover:none) and (pointer:coarse) {
    .refill-payments__item:hover {
        background-color: rgba(115, 140, 178, .1)
    }
}

@media (hover:none) and (pointer:coarse) {
    .refill-payments__item:active {
        -webkit-tap-highlight-color: transparent
    }
}

.refill-payments__item.active {
    background-color: rgba(115, 140, 178, .1);
    border-color: #f3b705
}

@media (hover:none) and (pointer:coarse) {
    .refill-payments__item_hot:active {
        -webkit-tap-highlight-color: transparent
    }
}

.refill-payments__min {
    background: rgba(13, 44, 51, .9);
    border-radius: 7px;
    color: #fbca02;
    font-size: 15px;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    padding: 2px 10px;
    position: absolute;
    right: 0;
    text-align: center;
    top: -10px;
    width: max-content
}

@media not screen and (min-width:1100px) {
    .refill-payments__min {
        font-size: 11px;
        padding: 2px 4px
    }
}

.refill-payments__hot {
    align-items: center;
    background-color: #f3b705;
    border-radius: 100px;
    color: #0c121b;
    display: flex;
    font-family: PT Sans Narrow, sans-serif;
    font-weight: 600;
    gap: 4px;
    justify-content: center;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1
}

.refill-payments__hot:before {
    background-image: url(/assets/fire_dark.svg?v=3);
    content: "";
    height: 15px;
    width: 12px
}

@media not screen and (min-width:1100px) {
    .refill-payments__hot {
        font-size: 12px;
        padding: 1px 4px
    }

    .refill-payments__hot .svg {
        height: 12px;
        width: 8px
    }
}

@media only screen and (min-width:1100px) {
    .refill-payments__hot {
        font-size: 16px;
        padding: 4px 8px
    }

    .refill-payments__hot .svg {
        height: 16px;
        width: 12px
    }
}

.refill-input {
    align-items: center;
    display: flex;
    height: 62px;
    position: relative;
    width: 100%
}

.refill-input:before {
    background-color: rgba(115, 140, 178, .6);
    content: "";
    display: block;
    height: 24px;
    left: 20px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    z-index: 1
}

.refill-input .tooltip {
    margin-bottom: 0
}

input.refill-input__field {
    backface-visibility: hidden;
    border-radius: 12px;
    box-shadow: none;
    color: #fff;
    font-size: 16px;
    height: 66px;
    line-height: 24px;
    padding: 21px 20px 21px 52px;
    position: relative;
    transition: .08s ease;
    width: 100%
}

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

input.refill-input__field[type=number] {
    -moz-appearance: textfield
}

input.refill-input__field:before {
    content: "";
    position: absolute
}

@media (hover:none) and (pointer:coarse) {
    input.refill-input__field:active {
        -webkit-tap-highlight-color: transparent
    }
}

input.refill-input__field:focus~.tooltip {
    opacity: 1;
    visibility: visible
}

input.refill-input__field:focus~.refill-input__placeholder,
input.refill-input__field:not(:placeholder-shown)~.refill-input__placeholder {
    font-size: 10px;
    opacity: .8;
    top: 22px
}

@media only screen and (min-width:630px) {

    input.refill-input__field:focus~.refill-input__placeholder,
    input.refill-input__field:not(:placeholder-shown)~.refill-input__placeholder {
        font-size: 12px;
        top: 12px
    }
}

input.refill-input__field.input-error {
    border-color: red
}

.refill-input__placeholder {
    font-size: 14px;
    font-weight: 600;
    left: 24px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: .12s ease;
    z-index: 1
}

.refill-input__promo-info {
    background-repeat: no-repeat;
    background-size: 100%;
    height: 20px;
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px
}

.refill-input__promo-info .tooltip {
    min-width: 200px;
    padding: 8px
}

.refill-input__promo-info_success {
    background-image: url(/assets/icon_accept.svg?v=2)
}

.refill-input__promo-info_error {
    background-image: url(/assets/icon_error.svg?v=2)
}

.refill-input_active .refill-input__field::placeholder {
    color: #fff
}

.refill-input_active .refill-input__field~.input__placeholder {
    font-size: 10px;
    opacity: .8;
    top: 22px
}

@media only screen and (min-width:630px) {
    .refill-input_active .refill-input__field~.input__placeholder {
        font-size: 12px;
        top: 7px
    }
}

.refill-history {
    width: 100%
}

@media not screen and (min-width:1024px) {
    .refill-history {
        display: block
    }
}

@media (min-width:1024px) {
    .refill-history {
        border-collapse: separate;
        border-spacing: 0 5px
    }
}

@media not screen and (min-width:1024px) {
    .refill-history thead {
        display: none
    }

    .refill-history tbody {
        display: grid;
        gap: 20px;
        grid-template-columns: 1fr 1fr
    }
}

@media not screen and (min-width:768px) {
    .refill-history tbody {
        grid-template-columns: 1fr
    }
}

@media not screen and (min-width:1024px) {
    .refill-history tr {
        background-color: #0c121b;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        overflow: hidden;
        padding: 20px
    }
}

.refill-history td,
.refill-history th {
    font-size: 13px;
    line-height: 20px
}

@media (min-width:1024px) {

    .refill-history td,
    .refill-history th {
        padding: 17px 20px;
        text-align: left
    }

    .refill-history th {
        color: hsla(0, 0%, 85%, .8)
    }
}

@media not screen and (min-width:1024px) {
    .refill-history td {
        display: flex;
        justify-content: space-between
    }
}

@media (min-width:1024px) {
    .refill-history td {
        background-color: #0c121b
    }
}

.refill-history td:first-child {
    border-radius: 10px 0 0 10px
}

.refill-history td:last-child {
    border-radius: 0 10px 10px 0
}

.refill-history td.success {
    color: #84a900
}

.refill-history td.error {
    color: #ff4e18
}

@media (min-width:1024px) {
    .refill-history__td-label {
        display: none
    }
}

@media not screen and (min-width:1024px) {
    .refill-history__td-label {
        color: hsla(0, 0%, 85%, .8)
    }
}

.promocode-item {
    align-items: center;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    border: 1px solid #0c121b;
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    font-size: 24px;
    font-weight: 700;
    height: 110px;
    justify-content: center;
    overflow: hidden;
    padding-top: 8px;
    position: relative;
    text-shadow: 0 0 5px hsla(0, 0%, 7%, .2);
    transition: .12s ease
}

.promocode-item__status {
    align-items: center;
    background-color: #ff4e18;
    border-radius: 10px;
    color: #fff;
    display: flex;
    font-size: 11px;
    font-weight: 600;
    gap: 5px;
    line-height: 13px;
    padding: 5px 7px;
    position: absolute;
    right: 10px;
    top: 10px
}

@media not screen and (min-width:768px) {
    .promocode-item__status {
        right: 5px;
        top: 5px
    }
}

.promocode-item__status .icon {
    display: flex
}

.promocode-item__status .icon:before {
    background-color: #fff;
    height: 12px;
    width: 12px
}

.promocode-item__promocode-label {
    bottom: 16px;
    color: hsla(0, 0%, 85%, .6);
    font-size: 10px;
    font-weight: 700;
    left: 50%;
    position: absolute;
    text-transform: uppercase;
    transform: translateX(-50%);
    white-space: nowrap;
    width: fit-content
}

.promocode-item__promocode-label:after,
.promocode-item__promocode-label:before {
    border-bottom: 1px dashed hsla(0, 0%, 85%, .6);
    content: "";
    margin: 0 2px;
    overflow: hidden;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 22.5px
}

.promocode-item__promocode-label:before {
    right: 100%
}

.promocode-item__promocode-label:after {
    left: 100%
}

.promocode-item_common {
    background-image: url(/assets/promocodes/promocode_common.png?v=3)
}

.promocode-item_uncommon {
    background-image: url(/assets/promocodes/promocode_uncommon.png?v=3)
}

.promocode-item_milspec {
    background-image: url(/assets/promocodes/promocode_milspec.png?v=3)
}

.promocode-item_restricted {
    background-image: url(/assets/promocodes/promocode_restricted.png?v=3)
}

.promocode-item_classified {
    background-image: url(/assets/promocodes/promocode_classified.png?v=3)
}

.promocode-item_covert {
    background-image: url(/assets/promocodes/promocode_covert.png?v=3)
}

.promocode-item_rare {
    background-image: url(/assets/promocodes/promocode_rare.png?v=3)
}

.promocode-item:not(.promocode-item_no-hover):hover {
    border-color: rgba(255, 214, 0, .7)
}

.promocode-item_no-hover {
    cursor: default
}

.promocode-item.active {
    border-color: #ffd600;
    box-shadow: inset 0 0 8px #ffd600
}

.promocode-item_big {
    font-size: 30px;
    height: 144px;
    padding-top: 14px
}

@media not screen and (min-width:768px) {
    .promocode-item_big {
        font-size: 24px;
        height: 100px;
        padding-top: 10px
    }
}

.promocode-item_big .promocode-item__promocode-label {
    font-size: 14px
}

@media not screen and (min-width:768px) {
    .promocode-item_big .promocode-item__promocode-label {
        font-size: 10px
    }
}

.layout-battlepass__intro {
    aspect-ratio: 335/249;
    background: #000;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px
}

@media (min-width:768px) {
    .layout-battlepass__intro {
        aspect-ratio: 714/438;
        border-radius: 30px
    }
}

@media (min-width:1024px) {
    .layout-battlepass__intro {
        aspect-ratio: 1140/635
    }
}

@media (min-width:1250px) {
    .layout-battlepass__intro {
        aspect-ratio: 1500/510;
        flex-direction: row
    }
}

@media (min-width:1650px) {
    .layout-battlepass__intro {
        aspect-ratio: auto;
        height: 510px
    }
}

.layout-battlepass__intro-main {
    flex-grow: 1
}

@media (min-width:1250px) {
    .layout-battlepass__intro-easycoin {
        flex: none;
        width: 360px
    }
}

.layout-battlepass__refill-title,
.layout-battlepass__title {
    background-clip: text;
    background-image: linear-gradient(#fff, #0c121b 150%);
    background-position: 50%;
    color: transparent;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    margin-top: 60px;
    text-align: center;
    text-transform: uppercase;
    width: 100%
}

@media (min-width:768px) {

    .layout-battlepass__refill-title,
    .layout-battlepass__title {
        font-size: 24px;
        font-size: 32px;
        font-weight: 700;
        line-height: 31px;
        line-height: 40px
    }
}

.layout-battlepass__refill-subtitle,
.layout-battlepass__subtitle {
    color: rgba(174, 191, 217, .8);
    font-size: 16px;
    line-height: 24px;
    margin-top: 10px;
    text-align: center;
    width: 100%
}

.layout-battlepass__progress {
    margin-top: 13px
}

@media (min-width:768px) {
    .layout-battlepass__progress {
        margin-top: 28px
    }
}

.layout-battlepass__refill {
    margin-top: 30px
}

.layout-battlepass__grid-cases {
    margin-top: 20px
}

.how-to-easycoin {
    align-items: center;
    background-color: #0c121b;
    border-radius: 10px;
    display: flex;
    gap: 10px;
    padding: 10px
}

@media (min-width:768px) {
    .how-to-easycoin {
        gap: 20px;
        padding: 24px 20px
    }
}

@media (min-width:1250px) {
    .how-to-easycoin {
        border-radius: 20px;
        flex-direction: column;
        height: 100%;
        justify-content: center;
        text-align: center
    }
}

.how-to-easycoin:before {
    background: url(/assets/event/how-to-easycoin.png?v=2) 50% no-repeat;
    background-size: contain;
    content: "";
    display: block;
    flex: none;
    height: 52px;
    position: relative;
    width: 50px
}

@media (min-width:768px) {
    .how-to-easycoin:before {
        height: 67px;
        width: 64px
    }
}

@media (min-width:1250px) {
    .how-to-easycoin:before {
        height: 190px;
        width: 185px
    }
}

@media (min-width:1650px) {
    .how-to-easycoin:before {
        height: 228px;
        width: 223px
    }
}

.how-to-easycoin__title {
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    text-transform: uppercase
}

@media (min-width:768px) {
    .how-to-easycoin__title {
        font-size: 16px;
        font-weight: 700;
        line-height: 20px
    }
}

@media (min-width:768px) and (min-width:768px) {
    .how-to-easycoin__title {
        font-size: 20px;
        line-height: 140%
    }
}

@media (min-width:1250px) {
    .how-to-easycoin__title {
        font-size: 24px;
        line-height: 135%
    }
}

.how-to-easycoin__title strong {
    color: #f3b705
}

.how-to-easycoin__text {
    color: rgba(174, 191, 217, .8);
    font-size: 11px;
    line-height: 16px
}

@media (min-width:768px) {
    .how-to-easycoin__text {
        font-size: 13px;
        line-height: 20px
    }
}

@media (min-width:1250px) {
    .how-to-easycoin__text {
        font-size: 16px;
        line-height: 24px
    }
}

.battlepass-progress {
    width: 100%
}

.battlepass-progress__section {
    height: 342px;
    position: relative;
    width: 100%;
    z-index: 1
}

.battlepass-progress__lvls-wrapper {
    background: #000;
    bottom: 0;
    cursor: grab;
    height: 100%;
    left: 50%;
    overflow-x: auto;
    padding: 20px;
    position: absolute;
    scrollbar-width: none;
    transform: translateX(-50%);
    user-select: none;
    width: 100vw
}

.battlepass-progress__lvls-wrapper::-webkit-scrollbar {
    display: none
}

.battlepass-progress__lvls-wrapper.draggable {
    cursor: grabbing;
    cursor: -webkit-grabbing
}

.battlepass-progress__lvls {
    grid-gap: 0 20px;
    align-items: center;
    background-color: #030709;
    border: 1px solid #192435;
    border-radius: 100px;
    display: flex;
    height: 19px;
    position: absolute;
    width: fit-content
}

.battlepass-progress__lvl-section {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    position: relative;
    width: 170px;
    z-index: 2
}

.battlepass-progress__lvl-section.available .battlepass-progress__action {
    color: blue;
    cursor: pointer;
    transition: .08s ease
}

@media not all and (hover:none) {
    .battlepass-progress__lvl-section.available .battlepass-progress__action:hover:before {
        border-color: #66f;
        box-shadow: 0 0 15px 2px rgba(0, 0, 255, .35)
    }
}

@media (hover:none) {
    .battlepass-progress__lvl-section.available .battlepass-progress__action:active:before {
        border-color: #66f;
        box-shadow: 0 0 15px 2px rgba(0, 0, 255, .35)
    }
}

.battlepass-progress__lvl-section.available .battlepass-progress__action:before {
    background: linear-gradient(180deg, rgba(19, 205, 255, 0), rgba(19, 205, 255, .1));
    border-color: blue
}

.battlepass-progress__lvl-section.available .event-award {
    border-color: blue
}

.battlepass-progress__lvl-section.available .event-award:after,
.battlepass-progress__lvl-section.available .event-award:before {
    background-color: blue
}

.battlepass-progress__award {
    position: absolute;
    top: 40px;
    width: 170px;
    z-index: 2
}

.battlepass-progress__award:before {
    background-color: #192435;
    content: "";
    height: 12px;
    left: 50%;
    position: absolute;
    top: -22px;
    transform: translateX(-50%);
    width: 2px
}

.battlepass-progress__award_top {
    bottom: calc(100% + 22px)
}

.battlepass-progress__award_top:before {
    top: 100%
}

.battlepass-progress__award_top:after {
    bottom: -22px
}

.battlepass-progress__award_bottom {
    top: calc(100% + 22px)
}

.battlepass-progress__award_bottom:before {
    bottom: 100%
}

.battlepass-progress__award_bottom:after {
    top: -22px
}

.battlepass-progress__progress-wrapper {
    align-items: center;
    display: flex;
    height: 100%;
    left: 0;
    padding: 2px;
    position: absolute;
    top: 0;
    width: calc(100% + 200px);
    z-index: 1
}

.battlepass-progress__progress-line {
    --calculated-seconds: calc(var(--BP-current-level)*0.5);
    background-color: #d8a70a;
    background-image: url(/assets/battlepass/fx-progress.png?v=3);
    background-position: 50%;
    background-repeat: repeat-x;
    border-radius: 100px;
    display: flex;
    height: 100%;
    overflow: hidden;
    position: relative;
    width: fit-content
}

.battlepass-progress__progress-line:before {
    animation: flashBattlePassProgress var(--calculated-seconds) 3s linear infinite forwards;
    background: linear-gradient(90deg, rgba(251, 202, 2, 0), rgba(251, 202, 2, .6) 50.06%, rgba(251, 202, 2, 0));
    content: "";
    height: 100%;
    opacity: 0;
    position: absolute;
    right: 100%;
    transform: skewX(-14deg);
    width: 510px
}

.battlepass-progress__progress-marker {
    align-items: center;
    background-color: #f5bc03;
    border-radius: 10px;
    box-shadow: 0 0 14px 0 rgba(245, 188, 3, .4);
    color: #4b2102;
    display: flex;
    font-size: 15px;
    font-weight: 700;
    height: 19px;
    justify-content: center;
    line-height: 16px;
    margin-left: -8px;
    padding: 0 6px 1px;
    pointer-events: none;
    z-index: 2
}

.battlepass-progress__progress-part {
    flex: none
}

.battlepass-progress__progress-filler {
    transition: 1s ease .12s
}

.battlepass-progress__exp {
    bottom: -30px;
    color: #ccc;
    font-size: 14px;
    font-weight: 700;
    position: absolute
}

.battlepass-progress__exp_bottom {
    bottom: 38px
}

@keyframes flashBattlePassProgress {
    0% {
        opacity: 1;
        right: 100%
    }

    20% {
        opacity: 1
    }

    40% {
        opacity: 1;
        right: -510px
    }

    to {
        opacity: 0;
        right: -510px
    }
}

.battlepass-award {
    align-items: center;
    background-image: url(/assets/event/award.svg?v=1);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    height: 262px;
    padding: 15px;
    width: 100%
}

.battlepass-award__img {
    margin: 10px 0;
    pointer-events: none;
    width: 118px
}

.battlepass-award__lvl {
    color: hsla(0, 0%, 85%, .8);
    font-size: 13px;
    left: 0;
    line-height: 20px;
    position: absolute;
    top: -10px
}

.battlepass-award__name {
    color: hsla(0, 0%, 85%, .8);
    font-size: 11px;
    font-size: 10px;
    line-height: 16px;
    margin-bottom: 10px;
    text-align: center
}

.battlepass-award__btn {
    align-items: center;
    background-color: rgba(115, 140, 178, .1);
    border-radius: 5px;
    color: hsla(0, 0%, 85%, .8);
    display: flex;
    flex: none;
    font-size: 13px;
    font-weight: 600;
    height: 45px;
    justify-content: center;
    line-height: 20px;
    margin-top: auto;
    text-transform: uppercase;
    transition: .12s ease-in-out;
    width: 100%
}

.battlepass-award__btn_active {
    background-color: #ffd201;
    color: #111;
    cursor: pointer;
    font-size: 14px
}

.battlepass-award__btn_active:hover {
    background-color: #ffdb34;
    width: 105%
}

.battlepass-award__btn_taken {
    background-color: #0b4d4d;
    color: #fff;
    font-size: 14px
}

@media (min-width:768px) {
    .battlepass-refill {
        column-count: 2;
        column-gap: 20px
    }
}

@media (min-width:1024px) {
    .battlepass-refill {
        column-count: 3
    }
}

.battlepass-refill__row {
    align-items: center;
    background-color: #0c121b;
    border-radius: 20px;
    break-inside: avoid;
    display: flex;
    font-size: 13px;
    font-weight: 600;
    height: 70px;
    justify-content: space-between;
    line-height: 20px;
    padding: 0 12px 0 20px
}

.battlepass-refill__row+.battlepass-refill__row {
    margin-top: 10px
}

.battlepass-refill__points {
    color: hsla(0, 0%, 85%, .8);
    font-size: 20px;
    font-weight: 700;
    line-height: 28px
}

@media (min-width:768px) {
    .battlepass-refill__points {
        font-size: 24px;
        line-height: 31px
    }
}

.battlepass-refill__points.price:after {
    line-height: 1.3em
}

.battlepass-refill__btn-and-price {
    align-items: center;
    display: flex;
    gap: 14px
}

.battlepass-refill__btn {
    width: 143px
}

.layout-event-error {
    align-items: center;
    display: flex;
    flex-direction: column;
    text-align: center
}

.layout-event-error__info {
    color: rgba(174, 191, 217, .8);
    font-size: 16px;
    line-height: 24px
}

.layout-event-error__subtitle {
    align-items: center;
    color: #f3b705;
    display: flex;
    font-size: 16px;
    gap: 6px;
    line-height: 24px;
    margin-top: 30px
}

.layout-event-error__subtitle:before {
    background-color: #ffd600;
    height: 16px;
    width: 16px
}

.battlepass-lvl {
    display: none
}

@media (min-width:768px) {
    .battlepass-lvl {
        align-items: center;
        background-color: rgba(115, 140, 178, .1);
        border-radius: 10px;
        color: #f3b705;
        display: flex;
        font-size: 13px;
        font-weight: 600;
        gap: 10px;
        height: 46px;
        padding: 0 20px;
        transition: .2s ease
    }

    .battlepass-lvl:hover {
        filter: brightness(1.2)
    }

    .battlepass-lvl__lvl,
    .battlepass-lvl__points {
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        white-space: nowrap
    }

    .battlepass-lvl__lvl.price:after,
    .battlepass-lvl__points.price:after {
        line-height: 1em
    }

    .battlepass-lvl__progress {
        background-color: #080c12;
        border-radius: 15px;
        height: 8px;
        overflow: hidden;
        position: relative;
        width: 76px
    }

    .battlepass-lvl__progress:before {
        background-color: #f3b705;
        border-radius: 15px;
        content: "";
        height: 100%;
        left: 0;
        line-height: 16px;
        position: absolute;
        top: 0;
        width: var(--battlepass-progress);
        z-index: 1
    }
}

.toast-battlepass {
    align-items: center;
    border: none;
    border-radius: 12px;
    display: flex;
    font-size: 12px;
    gap: 14px;
    line-height: 17px
}

.toast-battlepass__award {
    flex: none;
    width: 54px
}

.toast-battlepass__text {
    max-width: 70%
}

.toast-battlepass__column {
    display: flex;
    gap: 3px
}

.toast-battlepass__btn .button {
    background-color: hsla(0, 0%, 100%, .7);
    color: #010203
}

.toast-battlepass__btn .button:hover {
    background-color: #fff;
    color: #010203
}

.layout-notifications__tabs {
    display: flex;
    justify-content: center
}

.notifications-list {
    display: flex;
    flex-direction: column;
    font-size: 13px;
    gap: 10px;
    line-height: 20px;
    margin: 30px auto 0;
    max-width: 700px
}

.notifications-list__notification {
    background: #0c121b;
    border-radius: 20px;
    display: block;
    padding: 25px 30px 30px
}

.notifications-list__notification_main {
    background: #f3b7051a
}

.notifications-list__notification_main .notifications-list__notification-title {
    color: #f3b705
}

.notifications-list__notification-date {
    color: rgba(174, 191, 217, .8);
    font-size: 11px;
    line-height: 16px
}

.notifications-list__notification-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    margin: 8px 0
}

.notifications-widget {
    align-items: center;
    background: rgba(115, 140, 178, .1);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    height: 46px;
    justify-content: center;
    position: relative;
    transition: .2s ease;
    width: 46px
}

.notifications-widget:hover {
    background-color: rgba(115, 140, 178, .2)
}

.notifications-widget__icon:before {
    background: hsla(0, 0%, 85%, .8);
    height: 16px;
    width: 16px
}

.notifications-widget__count {
    align-items: center;
    background-color: #ff4e18;
    border-radius: 4px;
    display: flex;
    font-size: 9px;
    font-weight: 600;
    height: 15px;
    justify-content: center;
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(30%, -30%);
    width: 15px
}

body .sweet-alert {
    background-color: #0c121b;
    border-radius: 30px;
    font-family: 'Montserrat', 'Ecoin', sans-serif;
    padding: 50px
}

body .sweet-alert:before {
    background: url(/assets/sweet-alert.svg?2) no-repeat 50%;
    background-size: cover;
    content: "";
    display: block;
    height: 40px;
    margin: 0 auto;
    position: relative;
    width: 40px
}

body .sweet-alert p {
    color: rgba(174, 191, 217, .8);
    font-size: 16px;
    line-height: 24px
}

body .sweet-alert .sa-icon {
    display: none !important
}

body .sweet-alert button {
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    height: 46px;
    line-height: 130%;
    text-transform: uppercase
}

body .sweet-alert button.confirm {
    background-color: #f3b705 !important;
    color: #000
}

body .sweet-alert button.cancel {
    background-color: rgba(115, 140, 178, .1);
    color: hsla(0, 0%, 85%, .8)
}

body .sweet-alert button.cancel:hover {
    background-color: rgba(115, 140, 178, .2)
}

.toast-title {
    font-weight: 700
}

.toast-message a,
.toast-message label {
    color: #fff
}

.toast-message {
    display: flex
}

.toast-message a:hover {
    color: #ccc;
    text-decoration: none
}

.toast-top-center {
    right: 0;
    top: 0;
    width: 100%
}

.toast-bottom-center {
    bottom: 0;
    right: 0;
    width: 100%
}

.toast-top-full-width {
    right: 0;
    top: 0;
    width: 100%
}

.toast-bottom-full-width {
    bottom: 0;
    right: 0;
    width: 100%
}

.toast-top-left {
    left: 32px;
    top: 32px
}

.toast-top-right {
    right: 32px;
    top: 32px
}

.toast-bottom-right {
    bottom: 32px;
    right: 32px
}

.toast-bottom-left {
    bottom: 32px;
    left: 32px
}

#toast-container {
    position: fixed;
    z-index: 999999
}

#toast-container.toast-bottom-center>div,
#toast-container.toast-top-center>div {
    margin-left: auto;
    margin-right: auto;
    width: 300px
}

#toast-container.toast-bottom-full-width>div,
#toast-container.toast-top-full-width>div {
    margin-left: auto;
    margin-right: auto;
    width: 96%
}

#toast-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
    pointer-events: none
}

#toast-container>div {
    overflow: initial !important
}

@media (max-width:768px) {
    #toast-container.toast-top-center {
        left: 12px;
        right: auto;
        top: 120px
    }
}

@media (min-width:768px) {
    #toast-container.toast-top-center {
        top: 130px
    }
}

#toast-container.toast-top-left {
    left: 15px;
    top: 130px
}

@media (min-width:768px) {
    #toast-container.toast-top-left {
        top: 180px
    }
}

@media (min-width:1250px) {
    #toast-container.toast-top-left {
        top: 250px
    }
}

#toast-container.toast-bottom-right {
    bottom: 60px
}

#toast-container.toast-large .toast-default:hover {
    opacity: 1 !important
}

@media (max-width:768px) {
    #toast-container.toast-large .toast-default {
        width: 290px
    }
}

@media (min-width:768px) {
    #toast-container.toast-large .toast-default {
        width: 420px
    }
}

.toast-error {
    box-shadow: 0 0 64px 5px rgba(56, 1, 7, .1)
}

.toast-error .toast-progress {
    background-color: #d0021b
}

.toast-warning {
    box-shadow: 0 0 64px 5px rgba(92, 87, 1, .1)
}

.toast-warning .toast-progress {
    background-color: #f3e603
}

.toast-success {
    box-shadow: 0 0 64px 5px rgba(58, 129, 0, .1)
}

.toast-success .toast-progress {
    background-color: #82ff1b
}

.toast-info {
    box-shadow: 0 0 64px 5px rgba(4, 65, 105, .1)
}

.toast-info .toast-progress {
    background-color: #109cf6
}

.toast-default {
    animation: toastGlide 2s ease forwards;
    background-color: #0c121b;
    border: 1px solid rgba(115, 140, 178, .1);
    border-radius: 10px;
    box-shadow: 0 0 64px 5px rgba(76, 110, 162, .1);
    color: rgba(174, 191, 217, .8);
    cursor: pointer;
    font-size: 16px;
    line-height: 24px;
    min-width: 256px;
    opacity: 1;
    padding: 9.5px 15px;
    pointer-events: auto;
    position: relative;
    transform: translateY(10px);
    transition: .2s ease;
    will-change: transform
}

.toast-default .toast-progress {
    border-radius: 5px;
    bottom: -1px;
    height: 3px;
    left: 0;
    opacity: .8;
    position: absolute
}

.toast-default .toast-close-button {
    color: rgba(174, 191, 217, .8);
    font-size: 30px;
    font-weight: 500;
    line-height: 16px;
    position: absolute;
    right: 10px !important;
    top: 10px !important
}

@keyframes toastGlide {
    0% {
        transform: translateY(10px)
    }

    to {
        transform: translateY(0)
    }
}

.agreement {
    font-size: 16px;
    line-height: 24px
}

.agreement__heading {
    margin-top: 22px
}

@media (min-width:768px) {
    .agreement__heading {
        align-items: center;
        border-bottom: 1px solid rgba(115, 140, 178, .1);
        display: flex;
        justify-content: space-between;
        margin-bottom: 25px;
        padding-bottom: 17px
    }
}

.agreement__heading-version {
    color: rgba(174, 191, 217, .8);
    font-size: 16px;
    line-height: 24px
}

@media not screen and (min-width:768px) {
    .agreement__heading-version {
        border-top: 1px solid rgba(115, 140, 178, .1);
        margin-top: 9px;
        padding-top: 7px
    }
}

.agreement__info {
    margin: 0 auto;
    max-width: 1100px
}

.agreement__info p {
    margin: 20px 0
}

.agreement__info strong {
    display: block;
    font-weight: 700;
    margin-bottom: 10px
}

.agreement__info ol>li {
    font-weight: 700;
    margin-bottom: 20px
}

.agreement__info ol li ol>li {
    font-weight: 400;
    padding-left: 20px
}

.agreement__info ol>li {
    display: block;
    margin-top: 8px
}

.agreement__info ol>li:before {
    content: counters(item, ".") ". ";
    counter-increment: item
}

.agreement__info ol {
    counter-reset: item
}

.layout-contacts__links {
    align-items: center;
    background: #0c121b;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 30px auto 0;
    max-width: 700px;
    padding: 25px 25px 30px
}

@media (min-width:768px) {
    .layout-contacts__links {
        margin: 52px auto 0
    }
}

.layout-contacts__links a {
    color: #f3b705;
    font-size: 16px;
    line-height: 24px;
    text-decoration: underline
}

.layout-contacts__links a:hover {
    text-decoration: none
}

.layout-error {
    align-items: center;
    display: flex;
    flex-direction: column
}

.layout-error:before {
    background: url(/assets/404.webp);
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
    height: 471px;
    width: 271px
}

.layout-error:after,
.layout-error:before {
    content: "";
    display: block;
    position: absolute
}

.layout-error:after {
    background-color: #2f425e;
    filter: blur(75px);
    height: 113px;
    margin-top: 277px;
    width: 113px
}

.layout-error__logo {
    background: url(/assets/logo.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    height: 90px;
    margin-bottom: 20px;
    margin-top: 55px;
    width: 143px
}

.layout-error__text {
    font-size: 24px;
    font-weight: 700;
    line-height: 43.2px
}

.layout-error__error {
    display: none
}

.layout-error__tohome {
    display: flex;
    justify-content: center;
    margin-top: 12px
}

.layout-error__section {
    margin-top: 250px;
    text-align: center
}

.userbar-block__user-picture {
    position: relative
}

.userbar-block__user-picture:after {
    background: url(/assets/hat.png) no-repeat 50%;
    background-size: contain;
    content: "";
    display: block;
    height: 42px;
    pointer-events: none;
    position: absolute;
    right: -16px;
    top: -13px;
    width: 52px
}

.header-logo:before {
    background-image: url(/assets/logo.png)
}

@media (min-width:1250px) {

    .layout-home:after,
    .layout-home:before {
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: contain;
        content: "";
        display: block;
        height: 883px;
        position: absolute;
        top: -125px;
        width: 617px;
        z-index: -1
    }
}

.layout-home:before {
    background-image: url(/assets/left-decoration.webp);
    left: 0
}

.layout-home:after {
    background-image: url(/assets/right-decoration.webp);
    right: 0
}