html {
    background-color: #191919;
}
body {
    margin: 0 auto;
    min-width: 320px;
    max-width: 600px;
    font-size: medium;
    font-family: Arial, sans-serif;
    color: #afb4ba;
    word-wrap: break-word;
}

@media screen and (min-width: 600px) {
    body {
        background: url(/img/fon-voiteli.jpg) no-repeat center top #191919;
        background-attachment: fixed;
    }
    html {
        background-color: unset;
    }
    .item-view {
        height: 76px;
        width: 76px;
    }
}

li,
ul {
    margin: 0;
    list-style: none;
}
a {
    color: #eaa900;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
button,
li,
ul {
    padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #ececec;
    margin: 5px;
    padding: 0;
}
ul.text-list {
    margin: 5px;
}
ul.text-list li {
    margin: 5px 0;
}
.small {
    font-size: small;
}
span.strong {
    color: #ececec;
}
span.ok {
    color: #2efb33;
}
span.error {
    color: #fa2f4d;
}
span.exp {
    color: #e19efb;
}
span.gold {
    color: #f1d600;
}
span.halloween {
    color: #f87721;
}
span.gray {
    color: #6b6666;
}
span.gems,
span.frost_chance,
span.frost_power {
    color: #5bbcff;
}
span.lazurit {
    color: #e19efb;
}
span.power {
    color: #e8445e;
}
span.critical_chance,
span.critical_power,
span.undodge,
span.dmg {
    color: #f48596;
}
span.def,
span.reduce_dmg {
    color: #f6ee71;
}
span.dodge,
span.hp {
    color: #4eec8b;
}
span.sharp {
    color: #e81c00;
}
span.res_chest_key {
    color: #eaa43f;
}
span.gamediz {
    color: #9f8bff;
}
span.win_clantyrnir {
    color: #ff7f50;
}
span.chlen_gi {
    color: #7fffd4;
}
span.chlen_gi2 {
    color: #87cefa;
}
span.chlen_gi3 {
    color: #f0e68c;
}
span.rarity_1,
span.rarity_2,
span.res_chest_key_1,
span.res_item_1 {
    color: #c5c5c5;
}
span.rarity_3,
span.rarity_4,
span.res_chest_key_2,
span.res_item_2 {
    color: #3da85b;
}
span.rarity_5,
span.rarity_6,
span.res_chest_key_3,
span.res_item_3 {
    color: #00aced;
}
span.rarity_7,
span.rarity_8,
span.res_chest_key_4,
span.res_item_4 {
    color: #9b21f8;
}
span.rarity_10,
span.rarity_9,
span.res_chest_key_5,
span.res_item_5 {
    color: #f87721;
}
span.rarity_11,
span.rarity_12,
span.rarity_13
 {
    color: #FF0000;
}
span.res_item_6,
span.res_chest_key_6 {
    color: #FF0000;
}
span.rarity_14,
span.res_item_7 {
    color: #ffecb6;
}
span.res_magic {
    color: #1bf1fc;
}
.icon {
    position: relative;
}
.override-img-top img {
    top: 4px;
}
.icon_size_s {
    top: 3px;
    width: 16px;
    height: 16px;
}
.icon_size_s--top4 {
    top: 4px;
}
.icon_size_m {
    top: 5px;
    width: 24px;
    height: 24px;
}
.icon_size_l {
    top: 7px;
    width: 32px;
    height: 32px;
}
.avatar {
    display: inline-block;
    width: 80px;
    height: 80px;
    background: #131415 center/100% no-repeat;
    border: 2px solid #292931;
    border-radius: 5px;
}

/* Градиентная рамка для уровня Cupper */
.avatar--cupper {
    border-image: linear-gradient(to right, #965700, #f3b929);
    border-image-slice: 1;
}

/* Градиентная рамка для уровня Silver */
.avatar--silver {
    border-image: linear-gradient(to right, #9b9595, #f8f8f8);
    border-image-slice: 1;
}

/* Градиентная рамка для уровня Gold */
.avatar--gold {
    border-image: linear-gradient(to right, #f6e808, #dad293);
    border-image-slice: 1;
}

/* Градиентная рамка для уровня Diamond */
.avatar--diamond {
    border-image: linear-gradient(to right, #0a88a2, #9bd1e0);
    border-image-slice: 1;
}

.avatar_size_s {
    width: 48px;
    height: 48px;
    border-radius: 100%;
}
.avatar_size_m {
    width: 64px;
    height: 64px;
}
.avatar-round {
    border-radius: 100%;
}
.avatar_size_l {
    width: 128px;
    height: 128px;
}
.hide {
    display: none;
}
.form__item label,
.show {
    display: block;
}
.mirror_x {
    -webkit-transform: scale(-1, 1);
    transform: scale(-1, 1);
}
.container {
    background-color: #131415;
    position: relative;
}
.container-100vh {
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: #1b1b1d;
}
.index-page {
    padding-bottom: 16px;
    text-align: center;
    background-color: #1b1b1d;
}
.logo {
    font-size: 0;
    border-bottom: 1px solid #111;
    position: relative;
}
.logo::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 20px; /* Высота тени */
    background: linear-gradient(to bottom, transparent, rgba(27, 27, 29, 1)); /* Градиентная тень от прозрачной к черной */
    z-index: 2; /* Увеличиваем отступ z-index для тени, чтобы она была на переднем плане */
}
.header__title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.user-values {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}
.user-values__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: 30px;
    padding-bottom: 5px;
}
.user-values__item {
    font-size: small;
    text-align: center;
}
.user-align__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 35px;
}
.user-align__item {
    width: 35px;
    height: 35px;
    text-align: center;
}
.progress-bar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    height: 4px;
    background-color: #000;
}
.progress-bar__tall {
    height: 25px;
    background-color: #383636;
    border-radius: 5px;
}
.progress-bar__fill {
    max-width: 100%;
    height: 100%;
    background-color: #f3611b;
}
.progress-bar_style_exp {
    background-color: #e19efb;
}
.progress-bar_style_tall {
    background-color: #378738;
    height: 25px;
    border-radius: 5px;
}
.progress-bar_style_hp {
    background-color: #4eec8b;
}

.progress-bar-invasion {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    height: 17px;
    background-color: #000;
}
.progress-bar-invasion__fill {
    max-width: 100%;
    height: 100%;
    background-color: #f3611b;
}
.progress-bar-invasion_style_exp {
    background-color: #e19efb;
}
.progress-bar-invasion_style_hp {
    background-color: #ff0000;
}
.fight-invasion__bar {
    width: 100%;
    padding: 0 6px 6px;
}
.fight-invasion__bar .progress-bar-invasion {
    height: 8px;
    border: 1px solid #111;
}
.learning {
    padding-bottom: 4px;
    background-color: #1b1b1d;
    border-top: 1px solid #292931;
    border-bottom: 1px solid #111;
}
.learning__body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 4px;
}
.learning__avatar,
.learning__view {
    width: 64px;
    height: 64px;
}
.learning__text {
    margin-top: 2px;
    line-height: 1.3;
    font-size: small;
    padding-left: 8px;
}
.learning__task {
    color: #43a145;
    text-align: center;
}
.title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 44px;
    min-height: 44px;
    font-size: larger;
    color: #ececec;
    background-color: #202022;
    border-top: 1px solid #292931;
    border-bottom: 2px solid #111;
    position: sticky;
    z-index: 100;
    top: 0;
}
.title__back {
    box-sizing: border-box;
}
.title__text {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding-left: 10px;
}
.title__value {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 30px;
    margin-right: 12px;
    padding: 0 6px;
    font-size: medium;
    line-height: 44px;
    background-color: #131415;
    border: 1px solid #111;
    border-radius: 5px;
    text-decoration: none;
    white-space: nowrap;
}
.title__value--event {
    position: absolute;
    background-color: transparent;
    border: none;
    right: 0;
    bottom: 32px;
    margin: 0;
}
.btn img,
.title__value img {
    top: 5px;
    width: 20px;
    height: 20px;
}
.title__info {
    display: flex;
    align-items: baseline;
    color: #ececec;
}
.title__add {
    margin-left: 6px;
    font-size: x-large;
}
.alert {
    padding-top: 8px;
    padding-bottom: 12px;
    text-align: center;
    line-height: 1.7;
    background-color: #232429;
    border-top: 1px solid #111;
    position: relative;
}

.alert__event {
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
    line-height: 1.7;
    background-color: rgba(1, 1, 1, 0.7);
    /*border-top: 1px solid #111;*/
    position: absolute;
    /* top: -100%; !* начальное положение за пределами видимой области *!*/
    width: 100%;
    max-width: 500px;
    z-index: 100;
    /*animation: slideFromTop 0.7s forwards; !* запускаем анимацию при появлении элемента *!
    animation-delay: 150ms; !* задержка перед анимацией *!*/
}

/*@keyframes slideFromTop {
    0% {
        top: 0; !* начальное положение за пределами видимой области *!
    }
    100% {
        top: 23%; !* конечное положение вверху *!
    }
}*/

.alert__title {
    font-size: large;
}
.alert__text {
    padding: 0 5px;
}
.alert--center {
    display: flex;
    justify-content: center;
    gap: 5px;
}
.ad {
    padding: 30px 10px;
    line-height: 2;
    text-align: center;
}
.alert-no-available {
    padding: 2px;
    font-size: small;
    line-height: 1.3;
    text-align: center;
}
.menu {
    padding-bottom: 0
}
.menu__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: #131415;
}
.menu__list-last {
    padding-bottom: 5px;
}
.menu__item_size_l {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
}
.menu__item_size_m {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
}
.menu__item_size_s {
    -ms-flex-preferred-size: 33.33333%;
    flex-basis: 33.33333%;
}
.menu__link {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    min-height: 100px;
    margin: 5px;
    color: #ececec;
    text-align: center;
    background: #202022 center/96px no-repeat;
    border: 1px solid #292931;
    -webkit-box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.7);
    box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.7);
    border-radius: 7px;
    text-decoration: none;
}
.menu__item_size_l .menu__link {
    background-position: left bottom;
}
.menu__item_size_s .menu__link {
    background-position: center 28px;
    background-size: 64px;
}
.menu__item_size_l .menu__img {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 96px;
    height: 96px;
    border-radius: 0 0 0 7px;
}
.menu__title {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 7px 7px 0 0;
    z-index: 100;
}
.menu__item_size_l .menu__title {
    min-height: 28px;
    font-size: large;
    line-height: 28px;
}
.menu__item_size_m .menu__title {
    min-height: 26px;
    line-height: 26px;
}
.menu__item_size_s .menu__title {
    min-height: 24px;
    font-size: small;
    line-height: 24px;
}
.menu__text_donat {
    padding-bottom: 2px;
    font-size: small;
    color: #afb4ba;
    border-radius: 0 0 7px 7px;
}
.menu__item_size_l .menu__text_donat {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-item-align: end;
    align-self: flex-end;
    width: 75%;
    line-height: 1.8;
}
.menu__text {
    padding-bottom: 2px;
    font-size: small;
    color: #afb4ba;
    border-radius: 0 0 7px 7px;
}
.menu__item_size_l .menu__text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-item-align: end;
    align-self: flex-end;
    width: 60%;
    line-height: 1.8;
}
.menu__item_size_m .menu__text,
.menu__item_size_s .menu__text {
    min-height: 22px;
    background-color: rgba(0, 0, 0, 0.2);
}
.menu__item_size_s .menu__text {
    min-height: 18px;
}
.main-nav {
    border-bottom: 2px solid #111;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: end;
}
.main-nav--sticky {
    position: fixed;
    width: 100%;
    max-width: 600px;
    height: 80px;
    bottom: 0;
    z-index: 100;
}
.main-nav__grow {
    height: 78px;
}
.main-nav__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: stretch;
    -ms-flex-pack: stretch;
    justify-content: stretch;
}
.main-nav__item {
    width: 100%;
    position: relative;
}
.main-nav__link {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 70px;
    padding-bottom: 4px;
    font-size: small;
    color: #ececec;
    text-align: center;
    background: #202022 center 4px/48px no-repeat;
    border: 1px solid;
    border-color: #292931 #111 #202022 #292931;
    text-decoration: none;
}

.main-nav__alert {
    position: absolute;
    top: 0;
    right: 7px;
    font-size: x-large;
    color: #2efb33;
}
.footer {
    padding-top: 2px;
    padding-bottom: 6px;
    font-size: small;
    line-height: 1.8;
    text-align: center;
}
.app-map__item {
    display: inline-block;
    margin: 0 8px;
}
.nav__link {
    display: block;
    height: 48px;
    padding-left: 56px;
    line-height: 48px;
    color: #ececec;
    vertical-align: middle;
    background: #202022 4px center/48px no-repeat;
    border: 1px solid;
    border-color: #292931 #111 #111 #292931;
    text-decoration: none;
}
.nav__letter {
    display: flex;
    justify-content: center;
    font-size: 24px;
    color: gold;
    font-weight: 700;
}
.btn,
.btn_chat,
.btn-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    padding: 6px 0;
    border-radius: 7px;
}
.btn {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-width: 130px;
    height: 44px;
    margin: 2px;
    padding: 0 10px;
    font-size: large;
    color: #ececec;
    text-align: center;
    background: #345881 -webkit-gradient(linear, left top, left bottom, color-stop(50%, #345881), color-stop(50%, #224971));
    background: #345881 linear-gradient(#345881 50%, #224971 50%);
    border: 2px solid;
    border-color: #3c6695 #3c6695 #193654 #193654;
    outline: 2px solid #07111a;
    text-decoration: none;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    border-radius: 7px;
}
.btn_small {
    height: 15px;
}
.btn_small-notification {
    height: 35px;
    min-width: 100px;
}
.btn--notification {
    height: 30px;
    width: 40%;
    min-width: unset;
}
.btn--round {
    border-radius: 7px;
}
.btn--square {
    height: 44px;
    width: auto;
    min-width: unset;
}
.btn_chat {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-width: 130px;
    height: 30px;
    margin: 2px;
    padding: 0 10px;
    font-size: large;
    color: #ececec;
    text-align: center;
    background: #345881 -webkit-gradient(linear, left top, left bottom, color-stop(50%, #345881), color-stop(50%, #224971));
    background: #345881 linear-gradient(#345881 50%, #224971 50%);
    border: 2px solid;
    border-color: #3c6695 #3c6695 #193654 #193654;
    outline: 2px solid #07111a;
    text-decoration: none;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}
.btn_disabled {
    background: #5f5f5f -webkit-gradient(linear, left top, left bottom, color-stop(50%, #555), color-stop(50%, #464646));
    background: #5f5f5f linear-gradient(#555 50%, #464646 50%);
    border-color: #606060 #606060 #373737 #373737;
}
.btn_style_ok {
    background: #378738 -webkit-gradient(linear, left top, left bottom, color-stop(50%, #378738), color-stop(50%, #2a692a));
    background: #378738 linear-gradient(#378738 50%, #2a692a 50%);
    border: 2px solid;
    border-color: #3c963d #3c963d #1f4d1f #1f4d1f;
}
.btn_switch {
    background: #956127 -webkit-gradient(linear, left top, left bottom, color-stop(50%, #956127), color-stop(50%, #885117));
    background: #956127 linear-gradient(#956127 50%, #885117 50%);
    border-color: #aa6d2a #aa6d2a #6a4015 #6a4015;
}
.btn-switch .btn_chat {
    min-width: 0;
    width: 100%;
    padding: 0;
    margin: 2px 6px;
}
.btn_type_start {
    width: 220px;
    margin-top: 4px;
}
.btn img {
    top: 0;
}
.btn-switch .btn {
    min-width: 0;
    width: 100%;
    padding: 0;
    margin: 2px 6px;
}
.btn-switch .icon.icon_size_l {
    width: 32px;
    height: 32px;
}
.pagination {
    padding: 4px 0;
}
.pagination__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.pagination__item {
    margin: 4px;
}
.pagination__link {
    display: inline-block;
    min-width: 40px;
    height: 40px;
    font-size: large;
    color: #ececec;
    line-height: 40px;
    text-align: center;
    vertical-align: middle;
    background-color: #345881;
    border: 2px solid;
    border-color: #3c6695 #3c6695 #193654 #193654;
    text-decoration: none;
}
.pagination__link_current {
    background-color: #5f5f5f;
    border-color: #606060 #606060 #373737 #373737;
}
.page-buy__item {
    padding: 6px 0;
    line-height: 1.5;
    text-align: center;
    background-color: #1b1b1d;
}
.achieves__item:nth-child(even),
.artifacts__item:nth-child(even),
.bonus__item:nth-child(even),
.chests__item:nth-child(even),
.items__item:nth-child(even),
.page-buy__item:nth-child(even),
.posts__item:nth-child(even),
.skills__item:nth-child(even),
.tasks__item:nth-child(even),
.top-users__item:nth-child(even) {
    background-color: #232429;
}
.page-buy__daily {
    margin-bottom: -5px;
    font-size: large;
    color: #f87721;
}
.page-buy__title {
    position: relative;
    font-size: large;
    color: #ececec;
}

.page-buy__discount {
    font-size: small;
    color: #2efb33;
}
.page-buy__actions,
.param__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    padding: 6px 0;
}
.param__list {
    padding: 5px 10px;
}
.param__item {
    padding: 6px 10px;
    font-size: medium;
    background-color: #131415;
    border: 1px solid #111;
    border-radius: 5px;
}
.param__item--none {
    background: none;
    border: none;
}
.param__daily {
    padding: 6px 10px;
    font-size: medium;
    background-color: #131415;
    border: 1px solid #dec632;
    border-radius: 5px;
}
.items__item {
    background-color: #1b1b1d;
}
a.item-link,
a.msg__body {
    text-decoration: none;
}
.item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.item__view {
    padding: 8px;
    position: relative;
}
.item-view {
    display: inline-block;
    width: 64px;
    height: 64px;
    background-color: #131415;
    border: 1px solid #c5c5c5;
    border-radius: 5px;
    position: relative;
}
.item-view__img {
    width: 100%;
    height: 100%;
    border-radius: 5px;
}
.item__info {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding-top: 6px;
}
.item__name {
    display: inline-block;
}
.item__forge {
    font-size: small;
    color: #ececec;
}
.item__forge,
.item__sharp {
    display: inline-block;
}
.item__rarity,
.item__sharp {
    font-size: small;
}
.item__param-item,
.item__rune-item {
    display: inline-block;
}
.item__rune-item {
    font-size: small;
}
.hunt-page {
    background-color: #1b1b1d;
}
.hunt-mob {
    padding-top: 8px;
    text-align: center;
}
.hunt-mob__title {
    line-height: 1.5;
}
.hunt-mob__name {
    font-size: large;
    color: #ececec;
}
.hunt-mob__power {
    font-size: small;
}
.hunt-mob__avatar {
    margin-top: 8px;
}
.hunt-mob__param {
    padding: 5px 0;
}
.hunt-page__actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    padding-bottom: 15px;
}
.hunt-loc {
    padding: 8px 0;
    text-align: center;
    line-height: 1.5;
    background-color: #232429;
}
.hunt-loc__name {
    color: #ececec;
}

/* Новый вид охоты с background и полнорост мобов */
.hunt-mob__background {
    position: relative;
    width: 100%;
    padding-bottom: 63%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hunt-mob__background1 {background-image: url(/img/hunt_backgrounds/hunt_fon.jpg);}
.hunt-mob__background2 {background-image: url(/img/hunt_backgrounds/pohod_cave.jpg);}
.hunt-mob__background3 {background-image: url(/img/hunt_backgrounds/pohod_desert.jpg);}
.hunt-mob__background4 {background-image: url(/img/hunt_backgrounds/pohod_forest.jpg);}
.hunt-mob__background5 {background-image: url(/img/hunt_backgrounds/hunt_5.jpg);}
.hunt-mob__background7 {background-image: url(/img/hunt_backgrounds/hunt_7.jpg);}
.hunt-mob__background9 {background-image: url(/img/hunt_backgrounds/hunt_9.jpg);}
.hunt-mob__background6 {background-image: url(/img/hunt_backgrounds/ohota_6.jpg);}
.hunt-mob__background8 {background-image: url(/img/hunt_backgrounds/ohota_8.jpg);}
.hunt-mob__background10 {background-image: url(/img/hunt_backgrounds/ohota_10.jpg);}
.hunt-mob__background11 {background-image: url(/img/hunt_backgrounds/ohota_11.jpg);}
.hunt-mob__background12 {background-image: url(/img/hunt_backgrounds/ohota_12.jpg);}
.hunt-mob__background13 {background-image: url(/img/hunt_backgrounds/ohota_13.jpg);}
.hunt-mob__background14 {background-image: url(/img/hunt_backgrounds/ohota_14.jpg);}
.hunt-mob__background15 {background-image: url(/img/hunt_backgrounds/ohota_15.jpg);}
.hunt-mob__background16 {background-image: url(/img/hunt_backgrounds/ohota_16.jpg);}
.hunt-mob__background17 {background-image: url(/img/hunt_backgrounds/ohota_17.jpg);}
.hunt-mob__background18 {background-image: url(/img/hunt_backgrounds/ohota_18.jpg);}
.hunt-mob__background19 {background-image: url(/img/hunt_backgrounds/ohota_19.jpg);}
.hunt-mob__background20 {background-image: url(/img/hunt_backgrounds/ohota_21.jpg);}
.hunt-mob__background21 {background-image: url(/img/hunt_backgrounds/ohota_22.jpg);}
.hunt-mob__background22 {background-image: url(/img/hunt_backgrounds/ohota_23.jpg);}

.hunt-mob__wrapper {
    display: contents;
}

.hunt-mob__title--new {
    position: relative;
    background-color: rgba(32,32,32,0.85);
}
.hunt-mob__energy {
    position: absolute;
    background-color: transparent;
    border: none;
    right: 5%;
    bottom: 25%;
    z-index: 100;
}

.hunt-mob__mob {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 230px;
}

/* Имя класса - номер моба в таблице мобов для охоты */
.hunt-mob__mob15 {
    background-image: url(/img/hunt_mob/boss1.png);
    background-size: 190px;
}
.hunt-mob__mob16 {
    background-image: url(/img/hunt_mob/boss2.png);
    background-size: 140px;
}
.hunt-mob__mob18 {
    background-image: url(/img/hunt_mob/boss3.png);
    background-size: 120px;
}
.hunt-mob__mob20 {
    background-image: url(/img/hunt_mob/boss4.png);
    background-size: 160px;
}
.hunt-mob__mob19 {
    background-image: url(/img/hunt_mob/boss6.png);
    background-size: 110px;
}
.hunt-mob__mob6 {
    background-image: url(/img/hunt_mob/boss7.png);
    background-size: 120px;
}
.hunt-mob__mob17 {
    background-image: url(/img/hunt_mob/boss8.png);
    background-size: 140px;
}
.hunt-mob__mob150 {
    background-image: url(/img/hunt_mob/boss5.png);
    background-size: 100px;
}

.hunt-mob__mob21 {
    background-image: url(/img/hunt_mob/boss9.png);
    background-size: 160px;
}
.hunt-mob__mob22 {
    background-image: url(/img/hunt_mob/boss10.png);
    background-size: 160px;
}
.hunt-mob__mob23 {
    background-image: url(/img/hunt_mob/boss11.png);
    background-size: 140px;
}
.hunt-mob__mob193 {
    background-image: url(/img/hunt_mob/boss12.png);
    background-size: 150px;
}
.hunt-mob__mob27 {
    background-image: url(/img/hunt_mob/boss13.png);
    background-size: 140px;
}
.hunt-mob__mob26 {
    background-image: url(/img/hunt_mob/boss14.png);
    background-size: 160px;
}
.hunt-mob__mob25 {
    background-image: url(/img/hunt_mob/boss15.png);
    background-size: 180px;
}
.hunt-mob__mob191 {
    background-image: url(/img/hunt_mob/boss16.png);
    background-size: 150px;
}
.hunt-mob__mob192 {
    background-image: url(/img/hunt_mob/boss18.png);
    background-size: 155px;
}
.hunt-mob__mob24 {
    background-image: url(/img/hunt_mob/boss17.png);
    background-size: 140px;
}
.hunt-mob__mob28 {
    background-image: url(/img/hunt_mob/boss19.png);
    background-size: 170px;
}
.hunt-mob__mob29 {
    background-image: url(/img/hunt_mob/boss20.png);
    background-size: 160px;
}
.hunt-mob__mob30 {
    background-image: url(/img/hunt_mob/boss21.png);
    background-size: 190px;
}
.hunt-mob__mob67 {
    background-image: url(/img/hunt_mob/boss22.png);
    background-size: 190px;
}
.hunt-mob__mob3 {
    background-image: url(/img/hunt_mob/boss23.png);
    background-size: 150px;
}
.hunt-mob__mob31 {
    background-image: url(/img/hunt_mob/boss1.png);
    background-size: 190px;
}
.hunt-mob__mob42 {
    background-image: url(/img/hunt_mob/boss24.png);
    background-size: 180px;
}
.hunt-mob__mob61 {
    background-image: url(/img/hunt_mob/boss25.png);
    background-size: 180px;
}
.hunt-mob__mob62 {
    background-image: url(/img/hunt_mob/boss26.png);
    background-size: 170px;
}
.hunt-mob__mob63 {
    background-image: url(/img/hunt_mob/boss27.png);
    background-size: 145px;
}
.hunt-mob__mob12 {
    background-image: url(/img/hunt_mob/boss28.png);
    background-size: 230px;
}
.hunt-mob__mob13 {
    background-image: url(/img/hunt_mob/boss29.png);
    background-size: 195px;
}
.hunt-mob__mob320 {
    background-image: url(/img/hunt_mob/boss30.png);
    background-size: 180px;
}
.hunt-mob__mob64 {
    background-image: url(/img/hunt_mob/boss31.png);
    background-size: 155px;
}
.hunt-mob__mob155 {
    background-image: url(/img/hunt_mob/boss35.png);
    background-size: 180px;
}
.hunt-mob__mob9 {
    background-image: url(/img/hunt_mob/boss32.png);
    background-size: 165px;
}
.hunt-mob__mob10 {
    background-image: url(/img/hunt_mob/boss33.png);
    background-size: 185px;
}
.hunt-mob__mob43 {
    background-image: url(/img/hunt_mob/boss34.png);
    background-size: 175px;
}
.hunt-mob__mob44 {
    background-image: url(/img/hunt_mob/boss38.png);
    background-size: 125px;
}
.hunt-mob__mob65 {
    background-image: url(/img/hunt_mob/boss37.png);
    background-size: 145px;
}
.hunt-mob__mob66 {
    background-image: url(/img/hunt_mob/boss36.png);
    background-size: 155px;
}
.hunt-mob__mob159 {
    background-image: url(/img/hunt_mob/boss39.png);
    background-size: 160px;
}
.hunt-mob__mob87 {
    background-image: url(/img/hunt_mob/boss40.png);
    background-size: 155px;
}
.hunt-mob__mob88 {
    background-image: url(/img/hunt_mob/boss41.png);
    background-size: 185px;
}
.hunt-mob__mob89 {
    background-image: url(/img/hunt_mob/boss42.png);
    background-size: 190px;
}
.hunt-mob__mob90 {
    background-image: url(/img/hunt_mob/boss43.png);
    background-size: 125px;
}
.hunt-mob__mob91 {
    background-image: url(/img/hunt_mob/boss44.png);
    background-size: 110px;
}
.hunt-mob__mob92 {
    background-image: url(/img/hunt_mob/boss45.png);
    background-size: 150px;
}
.hunt-mob__mob93 {
    background-image: url(/img/hunt_mob/boss46.png);
    background-size: 190px;
}
.hunt-mob__mob104 {
    background-image: url(/img/hunt_mob/boss47.png);
    background-size: 200px;
}
.hunt-mob__mob105 {
    background-image: url(/img/hunt_mob/boss48.png);
    background-size: 230px;
}
.hunt-mob__mob160 {
    background-image: url(/img/hunt_mob/boss49.png);
    background-size: 130px;
}
.hunt-mob__mob95 {
    background-image: url(/img/hunt_mob/boss50.png);
    background-size: 170px;
}
.hunt-mob__mob96 {
    background-image: url(/img/hunt_mob/boss51.png);
    background-size: 170px;
}
.hunt-mob__mob97 {
    background-image: url(/img/hunt_mob/boss52.png);
    background-size: 155px;
}
.hunt-mob__mob32 {
    background-image: url(/img/hunt_mob/boss19.png);
    background-size: 155px;
}
.hunt-mob__mob58 {
    background-image: url(/img/hunt_mob/boss53.png);
    background-size: 130px;
}
.hunt-mob__mob59 {
    background-image: url(/img/hunt_mob/boss54.png);
    background-size: 165px;
}
.hunt-mob__mob98 {
    background-image: url(/img/hunt_mob/boss55.png);
    background-size: 155px;
}
.hunt-mob__mob99 {
    background-image: url(/img/hunt_mob/boss56.png);
    background-size: 165px;
}
.hunt-mob__mob256 {
    background-image: url(/img/hunt_mob/boss57.png);
    background-size: 165px;
}
.hunt-mob__mob257 {
    background-image: url(/img/hunt_mob/boss58.png);
    background-size: 175px;
}
.hunt-mob__mob258 {
    background-image: url(/img/hunt_mob/boss59.png);
    background-size: 145px;
}
.hunt-mob__mob259 {
    background-image: url(/img/hunt_mob/boss60.png);
    background-size: 165px;
}
.hunt-mob__mob287 {
    background-image: url(/img/hunt_mob/boss61.png);
    background-size: 205px;
}
.hunt-mob__mob288 {
    background-image: url(/img/hunt_mob/boss62.png);
    background-size: 180px;
}
.hunt-mob__mob289 {
    background-image: url(/img/hunt_mob/boss63.png);
    background-size: 150px;
}
.hunt-mob__mob290 {
    background-image: url(/img/hunt_mob/boss64.png);
    background-size: 200px;
}
.hunt-mob__mob312 {
    background-image: url(/img/hunt_mob/boss65.png);
    background-size: 200px;
}
.hunt-mob__mob313 {
    background-image: url(/img/hunt_mob/boss66.png);
    background-size: 200px;
}
.hunt-mob__mob314 {
    background-image: url(/img/hunt_mob/boss67.png);
    background-size: 200px;
}
.hunt-mob__mob315 {
    background-image: url(/img/hunt_mob/boss68.png);
    background-size: 190px;
}
.hunt-mob__mob316 {
    background-image: url(/img/hunt_mob/boss69.png);
    background-size: 190px;
}
.hunt-mob__mob317 {
    background-image: url(/img/hunt_mob/boss70.png);
    background-size: 170px;
}
.hunt-mob__mob318 {
    background-image: url(/img/hunt_mob/boss71.png);
    background-size: 190px;
}
.hunt-mob__mob319 {
    background-image: url(/img/hunt_mob/boss72.png);
    background-size: 210px;
}
.hunt-mob__mob518 {
    background-image: url(/img/hunt_mob/boss73.png);
    background-size: 200px;
}
.hunt-mob__mob519 {
    background-image: url(/img/hunt_mob/boss74.png);
    background-size: 190px;
}
.hunt-mob__mob508 {
    background-image: url(/img/hunt_mob/boss75.png);
    background-size: 160px;
}
.hunt-mob__mob509 {
    background-image: url(/img/hunt_mob/boss76.png);
    background-size: 180px;
}
.hunt-mob__mob510 {
    background-image: url(/img/hunt_mob/boss77.png);
    background-size: 210px;
}
.hunt-mob__mob511 {
    background-image: url(/img/hunt_mob/boss78.png);
    background-size: 175px;
}
.hunt-mob__mob512 {
    background-image: url(/img/hunt_mob/boss79.png);
    background-size: 140px;
}
.hunt-mob__mob513 {
    background-image: url(/img/hunt_mob/boss80.png);
    background-size: 180px;
}
.hunt-mob__mob514 {
    background-image: url(/img/hunt_mob/boss81.png);
    background-size: 200px;
}
.hunt-mob__mob515 {
    background-image: url(/img/hunt_mob/boss82.png);
    background-size: 210px;
}
.hunt-mob__mob516 {
    background-image: url(/img/hunt_mob/boss83.png);
    background-size: 130px;
}
.hunt-mob__mob517 {
    background-image: url(/img/hunt_mob/boss84.png);
    background-size: 200px;
}

/* Фоны питомцев */
.pets-background {
    height: 220px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
}
.pets-background__mob {
    position: initial;
    height: 150px;
    width: 135px;
    align-self: center;
    display: block;
}
.pets-background__mob--large {
    height: 180px;
    width: 180px;
}
.pets-background__feed-btn {
    z-index: 100;
    position: absolute;
    width: 100%;
    height: 95%;
    background-color: rgba(32, 32, 32, 0.65);
    align-items: center;
}

.pets-background__background1 {background-image: url(/img/pet_backgrounds/fon_pet_1.jpg);}
.pets-background__background2 {background-image: url(/img/pet_backgrounds/fon_pet_2.jpg);}
.pets-background__background3 {background-image: url(/img/pet_backgrounds/fon_pet_3.jpg);}
.pets-background__background4 {background-image: url(/img/pet_backgrounds/fon_pet_4.jpg);}
.pets-background__background5 {background-image: url(/img/pet_backgrounds/fon_pet_5.jpg);}

.menu__title_style_boss_farm {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0 12px;
}
.boss-farm__title,
.boss-series__title {
    padding: 6px 0 4px;
    text-align: center;
    font-size: large;
    color: #3da85b;
}
.boss-farm__title {
    padding: 2px 0 4px;
    color: #00aced;
}
.boss-farm__time_left {
    display: flex;
    align-items: baseline;
    font-size: small;
}
.chests__item {
    background-color: #1b1b1d;
}
.chest {
    padding: 6px 0;
    text-align: center;
    line-height: 1.5;
}
.chest__title {
    font-size: large;
}
.chest__req {
    color: #ececec;
}
.chest__view {
    margin-top: 8px;
}
.chest__img {
    width: 192px;
}

.image-container {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.image-with-shadow {
    width: 100%;
    display: block;
}

.image-container::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px; /* Высота тени */
    background: linear-gradient(to bottom, transparent, rgba(27, 27, 29, 1)); /* Градиентная тень от прозрачной к черной */
    z-index: 2; /* Увеличиваем отступ z-index для тени, чтобы она была на переднем плане */
}

.artifacts__item {
    background-color: #1b1b1d;
}
.artifact {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-bottom: 4px;
}
.artifact__view {
    padding: 8px 12px;
}
.artifact-view {
    display: inline-block;
    width: 64px;
    height: 64px;
    position: relative;
}
.artifact-view__img {
    width: 100%;
    height: 100%;
}
.artifact__info {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding-top: 6px;
    line-height: 1.5;
}
.artifact__lvl {
    color: #ececec;
}
.artifact__bonus-item,
.artifact__bonus-list {
    display: inline-block;
}
.shop__info {
    padding: 10px;
    font-size: small;
    line-height: 1.5;
    background-color: #202022;
}
.shop-artifact-item,
.shop__info {
    text-align: center;
}
.shop__info2 {
    padding: 10px;
    font-size: small;
    line-height: 1.5;
    background-color: #202022;
}
.shop-artifact-item__req {
    color: #ececec;
}
.shop-item-info {
    font-size: small;
    line-height: 1.4;
}
.shop-item-item {
    margin-top: 6px;
    text-align: center;
}
.shop-item-item__req {
    color: #ececec;
}
.shop-forge-item {
    text-align: center;
}
.shop-forge-item__req {
    color: #ececec;
    display: flex;
    justify-content: center;
    align-items: baseline;
}
.shop-sharp {
    padding-top: 12px;
    padding-bottom: 6px;
    line-height: 1.5;
    text-align: center;
    background-color: #232429;
}
.shop-sharp__actions {
    margin-top: 6px;
}
.shop-runes {
    padding: 2px 6px;
    text-align: center;
    background-color: #232429;
}
.shop-runes__item {
    margin: 6px 0;
    line-height: 1.5;
}
.rune-shop__req {
    color: #ececec;
}
.tasks__list {
    display: grid;
}
.tasks__item {
    background-color: #1b1b1d;
    order: 0;
}
.task {
    padding: 6px 0;
    text-align: center;
    line-height: 1.5;
}
.task__title {
    font-size: large;
    color: #ececec;
    text-decoration: none;
}
.task__complete,
.task__progress {
    font-size: small;
}
.achieves__item {
    background-color: #1b1b1d;
}
.achieve {
    padding-bottom: 6px;
    text-align: center;
    line-height: 1.5;
}
.achieve__title {
    font-size: large;
    color: #ececec;
}
.achieve__lvl {
    margin-bottom: -6px;
    font-family: Georgia, serif;
    font-size: x-large;
    color: #f87721;
}
.achieve__complete,
.achieve__progress {
    font-size: small;
}
.bonus__item,
.skills__item {
    background-color: #1b1b1d;
}
.bonus,
.skill {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.bonus__view,
.skill__view {
    padding: 8px;
}
.bonus-view,
.skill-view {
    display: inline-block;
    width: 64px;
    height: 64px;
    background-color: #131415;
    border: 1px solid #5f5f5f;
    border-radius: 5px;
    position: relative;
}
.bonus-view__style_action {
    border-color: #c5c5c5;
}
.bonus-view__img,
.skill-view__img {
    width: 100%;
    height: 100%;
    border-radius: 5px;
}
.bonus__info,
.skill__info {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding-top: 5px;
    line-height: 1.2;
}
.bonus__info {
    padding-top: 8px;
    line-height: 1.4;
}
.bonus_req {
    margin-top: -5px;
    padding-bottom: 5px;
    text-align: center;
}
.skill__lvl {
    color: #ececec;
}
.skills-skill-item {
    text-align: center;
}
.skills-skill-item__req {
    color: #ececec;
}
.top-users__item {
    background-color: #1b1b1d;
}
.top-user {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 4px 0;
    text-decoration: none;
}
.top-user__view {
    width: 52px;
    height: 52px;
    padding: 0 6px;
}
.top-user__info {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    margin-top: 4px;
    line-height: 1.5;
}
.top-user__place {
    font-size: small;
    color: #afb4ba;
}
.top-user__login {
    color: #ececec;
    word-break: break-all;
}
.top-user__values {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    padding-right: 6px;
    text-align: center;
}
.posts__item {
    background-color: #1b1b1d;
}
.msg,
.posts__adm-panel {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.posts__adm-panel {
    -ms-flex-pack: distribute;
    justify-content: space-around;
    padding-top: 2px;
}
.msg {
    position: relative;
}
a.msg__body {
    color: #afb4ba;
}
.msg__body,
.msg__user-avatar {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    padding: 4px;
}
.msg__body {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    min-width: 0;
}
.msg__title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 2px;
}
.msg__user-link {
    position: relative;
    display: inline-block;
    padding-right: 28px;
    text-decoration: none;
}
.msg__user-name,
.msg_btn-reply {
    display: inline-block;
    color: #ececec;
}
.msg_btn-reply {
    position: absolute;
    top: -2px;
    right: 0;
    width: 19px;
    height: 20px;
    padding-left: 1px;
    font-size: large;
    line-height: 18px;
    text-align: center;
    vertical-align: middle;
    background: #224971;
    border: 1px solid #193654;
    border-radius: 20px;
}
.msg__date {
    margin: 2px;
    font-size: small;
}
.msg__text {
    margin-top: 4px;
}
.msg__action {
    float: right;
}
.user-page {
    background-color: #1b1b1d;
}
.user-res {

}
.user-view {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-top: 8px;
}
.user-view,
.user-view__equip,
.user-view__wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.user-view__equip {
    -ms-flex-pack: distribute;
    justify-content: space-around;
    padding: 10px 0;
}
.user-view__info,
.user-view__wrapper .user-view__equip {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.user-view__wrapper .user-view__equip {
    width: 25%;
    padding: 0;
}
.user-view__info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}
.user-view__title {
    text-align: center;
    line-height: 1.5;
}
.user-view__lvl {
    font-size: small;
}
.user-view__avatar {
    margin-top: 8px;
}
.user-artifacts__title {
    margin-top: 4px;
    font-size: large;
    text-align: center;
    color: #ececec;
}
.user-artifact__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    padding-top: 2px;
}
.user-artifact__item {
    text-align: center;
}
.user-artifact__lvl {
    font-size: small;
}
.user-param {
    margin-top: 10px;
    padding-bottom: 5px;
}
.user-param__title {
    margin-bottom: 2px;
    padding-bottom: 5px;
}
.user-res__list-sale {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: 6px;
    padding: 2px 0;
}
.user-res__item-sale {
    padding: 2px 4px;
}
.user-param__title,
.user-res__title {
    text-align: center;
    color: #ececec;
}
.user-res__subtitle {
    display: flex;
    width: 56px;
    justify-content: space-between;
    align-items: baseline;
}
.user-res__list {
    display: -webkit-box;
    display: -ms-flexbox;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 2px 0;
    flex-direction: column;
    display: none;
}
.user-res__arrow {
    font-size: 16px;
}
.user-res__section {
    padding: 3px;
    font-size: 20px;
    background-color: #1b1b1d;
    cursor: pointer;
    color: #dcdcdc;
    align-items: center;
}

.user-res__item {
    display: flex;
    justify-content: space-between;
    padding: 0 15px 0 15px;
}
.user-item-view {
    padding: 0 6px;
    line-height: 1.5;
    background-color: #232429;
}
.user-item-view__param {
    padding: 4px 0;
}
.user-item-view__param:not(:last-child) {
    border-bottom: 1px solid #111;
}
.user-item-view__title {
    font-size: large;
    color: #ececec;
}
.user-setting {
    padding: 12px 6px;
    text-align: center;
    line-height: 1.5;
    background-color: #1b1b1d;
}
.user-setting:nth-child(even) {
    background-color: #232429;
}
.user-setting__title {
    font-size: large;
    color: #ececec;
}
.ref-main,
.user-save-page {
    padding: 12px 0;
    text-align: center;
    background-color: #1b1b1d;
}
.ref-main {
    padding: 2px 10px;
    line-height: 1.4;
}
.ref-main div {
    margin: 10px 0;
}
.news__date {
    margin: 5px;
    font-size: small;
    text-align: right;
}
form {
    line-height: 1.3;
}
input[type="password"],
input[type="text"],
input[type="email"],
textarea {
    width: 200px;
    height: 40px;
    padding: 0 6px;
    color: #afb4ba;
    background-color: #313436;
    border: 1px solid #292931;
	font-size: 16px;
    outline: 0;
    border-radius: 7px;
}

select {
    width: 200px;
    height: 40px;
    padding: 0 6px;
    color: #afb4ba;
    background-color: #313436;
    border: 1px solid #292931;
    font-size: 16px;
    outline: 0;
    border-radius: 0;
}

textarea {
    height: 50px;
    padding: 4px 6px;
}
span.form__error {
    display: block;
    font-size: small;
    color: #fa2f4d;
}
.form__item input {
    margin: 4px 0;
}
.form-chat,
.form-dialog {
    padding: 6px 12px 0;
}
.form-chat input[type="text"] {
    width: 100%;
    margin-bottom: 2px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.form-dialog textarea,
.gifts-form textarea {
    width: 100%;
    height: 80px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.avatar-form__list,
.form-gender {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.form-gender {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding-bottom: 10px;
}
.form-gender label {
    margin: 0 18px;
}
.avatar-form__list {
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.avatar-form__item {
    width: 33.33%;
    margin: 10px 0;
    text-align: center;
}
.learning__focus {
    border-color: #378738;
    outline: 0;
    -webkit-box-shadow: 0 0 3px 1px #378738;
    box-shadow: 0 0 3px 1px #378738;
}
.offer {
    border-color: #efe40e;
    outline: 0;
    -webkit-box-shadow: 0 0 3px 1px #efe40e;
    box-shadow: 0 0 4px 1px #efe40e;
}
.offer-azurit {
    border-color: #b954da;
    outline: 0;
    -webkit-box-shadow: 0 0 3px 1px #b954da;
    box-shadow: 0 0 4px 1px #b954da;
}
.offer-pet {
    border-color: #5bbcff;
    outline: 0;
    -webkit-box-shadow: 0 0 3px 1px #5bbcff;
    box-shadow: 0 0 4px 1px #5bbcff;
    height: 130px;
    background-size: 100px;
}
.main-nav__link.learning__focus {
    z-index: 100;
}
.nav__link.learning__focus {
    margin: 0 2px 2px;
}
.notifications__link {
    display: block;
    padding: 5px 0;
    color: #afb4ba;
    text-align: center;
    background-color: #232429;
    text-decoration: none;
}
.icon_dung {
    background-image: url(/img/icons/dung.jpg);
}
.icon_battlepass {
    background-image: url(/img/icons/battlepass_2.jpg);
}
.icon_battlepass2 {
    background-image: url(/img/icons/battlepass_3.jpg);
}
.icon_battlepass3 {
    background-image: url(/img/icons/battlepass_4.jpg);
}
.icon_invasion {
    background-image: url(/img/icons/invasion.jpg);
}
.icon_hunt {
    background-image: url(/img/icons/hunt.jpg);
}
.icon_arena {
    background-image: url(/img/icons/arena.jpg);
}
.icon_boss {
    background-image: url(/img/icons/boss.jpg);
}
.icon_shop {
    background-image: url(/img/icons/shop.jpg);
}
.icon_chest {
    background-image: url(/img/icons/chest_shop.jpg);
}
.icon_chest_1 {
    background-image: url(/img/chests/chest_1.png);
}
.icon_chest_2 {
    background-image: url(/img/chests/chest_2.png);
}
.icon_chest_3 {
    background-image: url(/img/chests/chest_3.png);
}
.icon_chest_4 {
    background-image: url(/img/chests/chest_4.png);
}
.icon_chest_5 {
    background-image: url(/img/chests/chest_5.png);
}
.icon_chest_6 {
    background-image: url(/img/chests/chest_6.png);
}
.icon_chest_6_1 {
    background-image: url(/img/chests/chest_6_1.png);
}
.icon_korobka_ng {
    background-image: url(/img/icons/korobka.png);
}
.icon_korobka_gift {
    background-image: url(/img/icons/korobka_gift.png);
}
.icon_korobka_present_1 {
    background-image: url(/img/ng_present/ng_present_4.png);
}
.icon_korobka_present_2 {
    background-image: url(/img/ng_present/ng_present_2.png);
}
.icon_korobka_present_3 {
    background-image: url(/img/ng_present/ng_present_3.png);
}
.icon_gift-bag {
    background-image: url(/img/ng_present/gift_bag.png);
}
.icon_elka_settings {
    background-image: url(/img/icons/elka_settings.png);
}
.icon_ding {
    background-image: url(/img/icons/ding.png);
    background-size: 46px !important;
}
.icon_chest_item {
    background-position: center 16px;
    background-size: 128px 72px;
}
.icon_shop_chest {
    background-position: center 4px;
    background-size: 112px 112px;
}
.icon_artifact {
    background-image: url(/img/icons/artifact.jpg);
}
.icon_shop_artifact {
    background-position: center 22px;
    background-size: 80px 80px;
}
.icon_biza {
    background-image: url(/img/icons/biza.jpg);
}
.icon_shop_biza {
    background-position: center 22px;
    background-size: 80px 80px;
}
.icon_items {
    background-image: url(/img/icons/items.jpg);
}
.icon_shop_items {
    background-position: center 24px;
    background-size: 80px 80px;
}
.icon_forge {
    background-image: url(/img/icons/forge.jpg);
}
.icon_shop_forge {
    background-position: center 14px;
}
.icon_sharp {
    background-image: url(/img/icons/res_sharp-big.jpg);
}
.icon_shop_sharp,
.menu__item_size_s .icon_skills {
    background-position: center 22px;
    background-size: 80px 80px;
}
.icon_rune {
    background-image: url(/img/icons/res_rune-big.jpg);
}
.icon_shop_rune {
    background-position: center 14px;
}
.icon_gold {
    background-image: url(/img/icons/res_gold-big.jpg);
}
.icon_pet_cookies {
    background-image: url(/img/icons/pet_cookies.png);
}
.icon_gold_repo {
    background-image: url(/img/icons/gold_repo.png);
}
.icon_shop_gold {
    background-position: center 24px;
    background-size: 80px 80px;
}
.icon_razbor {
    background-image: url(/img/icons/razbor.jpg);
}
.icon_shop_razbor {
    background-position: center 24px;
    background-size: 80px 80px;
}
.icon_gems {
    background-image: url(/img/icons/gems-big.jpg);
}
.icon_lazurit {
    background-image: url(/img/icons/lazurit-big.jpg);
}
.icon_shop_gems {
    background-position: center 18px;
    background-size: 80px 80px;
}
.icon_task {
    background-image: url(/img/icons/task.jpg);
}
.icon_skills {
    background-image: url(/img/icons/skills.jpg);
}
.icon_top {
    background-image: url(/img/icons/top.jpg);
}
.icon_chat {
    background-image: url(/img/icons/chat.jpg);
}
.nav__link.icon_chat {
    background-size: 44px 44px;
    background-position: 7px center;
}
.icon_user {
    background-image: url(/img/icons/user.jpg);
}
.nav__link.icon_user {
    background-size: 32px 32px;
    background-position: 12px center;
}
.icon_home {
    background-image: url(/img/icons/home.jpg);
}
.icon_clan {
    background-image: url(/img/icons/clan.jpg);
}
.main-nav__link.icon_clan {
    background-position: center 0;
    background-size: 58px 58px;
}
.nav__link.icon_clan {
    background-position: 7px center;
    background-size: 42px 42px;
}
.icon_bag {
    background-image: url(/img/icons/bag.jpg);
}
.icon_gear-chest {
    background-image: url(/img/icons/gear_chest.png);
}
.icon_mail {
    background-image: url(/img/icons/mail-big.jpg);
}
.icon_settings {
    background-image: url(/img/icons/settings.jpg);
}
.icon_gazeta {
    background-image: url(/img/icons/gazeta.jpg);
}
.icon_news {
    background-image: url(/img/icons/news.jpg);
}
.icon_news2 {
    background-image: url(/img/icons/news2.jpg);
}
.icon_arena_top {
    background-image: url(/img/icons/arena_top.jpg);
}
.menu__link.icon_arena_shop,
.menu__link.icon_arena_top {
    background-position: center 13px;
}
.icon_arena_shop {
    background-image: url(/img/icons/arena_shop.jpg);
}
.icon_statistic {
    background-image: url(/img/icons/statistic.png);
    background-position: center 13px;
}
.icon_altar {
    background-image: url(/img/icons/altar.jpg);
}
.icon_user_nagrada {
    background-image: url(/img/icons/user_nagrada.jpg);
}
.icon_pett {
    background-image: url(/img/icons/pet.jpg);
}
.icon_res_gold {
    background-image: url(/img/icons/res_gold-big.jpg);
}
.icon_res_sharp {
    background-image: url(/img/icons/res_sharp-big.jpg);
}
.icon_res_rune {
    background-image: url(/img/icons/res_rune-big.jpg);
}
.icon_res_item_1 {
    background-image: url(/img/icons/res_item_1-big.jpg);
}
.icon_res_item_2 {
    background-image: url(/img/icons/res_item_2-big.jpg);
}
.icon_res_item_3 {
    background-image: url(/img/icons/res_item_3-big.jpg);
}
.icon_res_item_4 {
    background-image: url(/img/icons/res_item_4-big.jpg);
}
.icon_res_item_5 {
    background-image: url(/img/icons/res_item_5-big.jpg);
}
.icon_res_item_6 {
    background-image: url(/img/icons/res_item_6-big.jpg);
}
.icon_res_item_7 {
    background-image: url(/img/icons/res_item_7-big.jpg);
}
.icon_korobka2 {
    background-image: url(/img/icons/korobka2.png);
}
.icon_ref {
    background-image: url(/img/icons/ref.jpg);
}
.icon_game_back {
    background-image: url(/img/icons/arrow_game_back.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
}
.icon_storage {
    background-image: url(/img/icons/storage.jpg);
}
.icon_clan_users {
    background-image: url(/img/icons/clan_users.jpg);
}
.icon_bonuses {
    background-image: url(/img/icons/bonuses.jpg);
}
.icon_pets {
    background-image: url(/img/icons/pets.jpg);
}
.icon_clan_log {
    background-image: url(/img/icons/clan_log.jpg);
}
.icon_clan_ivent {
    background-image: url(/img/icons/clan_ivent.png);
}
.icon_clan_ivent_2 {
    background-image: url(/img/icons/clan_ivent_2.png);
}
.icon_siege {
    background-image: url(/img/siege/siege.png);
    background-size: 135px;
    background-position: 50px 5px;
}
.icon_loot {
    background-image: url(/img/icons/loot.png);
}
.icon_friends {
    background-image: url(/img/icons/friends.png);
}
.icon_add-friends {
    background-image: url(/img/icons/friends_add.png);
}
.icon_kick-friends {
    background-image: url(/img/icons/friends_kick.png);
}
.icon_present_send {
    background-image: url(/img/icons/present_send.png);
}
.icon_present_get {
    background-image: url(/img/icons/present_get.png);
}
.icon_friends_list {
    background-image: url(/img/icons/list.png);
}
.icon_arrow_back {
    background-image: url(/img/icons/arrow_back.png);
}
.icon_gear {
    background-image: url(/img/icons/gear_helmet.png);
}
.icon_cookie {
    background-image: url(/img/icons/cookie.png);
}
.icon_clan_battle {
    background-image: url(/img/clan_battle/clan_battle_icon.png);
}

.border-rarity_1 {
    border: 2px solid #c5c5c5;
}
.border-rarity_3 {
    border: 2px solid #3da85b;
}
.border-rarity_5 {
    border: 2px solid #00aced;
}
.border-rarity_7 {
    border: 2px solid #9b21f8;
}
.border-rarity_9 {
    border: 2px solid #f87721;
}
.border-rarity_11 {
    border: 2px solid #FF0000;
}

.item-view_rarity_1,
.item-view_rarity_2,
.league-view_rarity_1,
.league-view_rarity_2,
.skill_view_rarity_1,
.skill_view_rarity_2 {
    border-color: #c5c5c5;
}
.item-view_rarity_3,
.item-view_rarity_4,
.league-view_rarity_3,
.league-view_rarity_4,
.skill_view_rarity_3,
.skill_view_rarity_4 {
    border-color: #3da85b;
}
.item-view_rarity_5,
.item-view_rarity_6,
.league-view_rarity_5,
.league-view_rarity_6,
.skill_view_rarity_5,
.skill_view_rarity_6 {
    border-color: #00aced;
}
.item-view_rarity_7,
.item-view_rarity_8,
.league-view_rarity_7,
.league-view_rarity_8,
.skill_view_rarity_7,
.skill_view_rarity_8 {
    border-color: #9b21f8;
}
.item-view_rarity_10,
.item-view_rarity_9,
.league-view_rarity_10,
.league-view_rarity_9,
.skill_view_rarity_10,
.skill_view_rarity_9 {
    border-color: #f87721;
}
.skill_view_rarity_11,
.item-view_rarity_11,
.item-view_rarity_12,
.item-view_rarity_13
{
    border-color: #FF0000;
}
.item-view_rarity_14
{
    border-color: #ffecb6;
}
.fight {
    background-color: #1b1b1d;
}
.fight-view__titles {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 4px 6px 0;
}
.fight-view__title {
    font-size: large;
    color: #ececec;
}
.fight-view__params {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 2px 6px;
}
.fight-view__attacks,
.fight-view__bars,
.fight-view__params {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.fight-view__attacks {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 20px;
    padding: 0 6px;
}
.fight-view__bars {
    margin-top: 4px;
}
.fight__bar {
    width: 100%;
    padding: 0 6px 6px;
}
.fight__bar .progress-bar {
    height: 8px;
    border: 1px solid #111;
}

.fight-view__avatars {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding-top: 6px;
    background-color: #131415;
    border-top: 1px solid #111;
    height: 128px;
}
.fight-actions {
    padding: 12px 0;
    border-top: 1px solid #111;
}
.fight-log {
    padding: 2px 5px;
    line-height: 1.25;
    background-color: #232429;
}
span.arena_points {
    color: #eb9823;
}
span.arena_rating {
    color: #e19efb;
}
span.league__lvl,
span.roman {
    font-family: Georgia, serif;
}
.arena-loc {
    text-align: center;
    background-color: #1b1b1d;
}
.arena-current-league {
    padding: 8px 0;
    line-height: 1.5;
    background-color: #202022;
}
.arena-current-league__name {
    color: #ececec;
}
.arena-main {
    padding-top: 12px;
    line-height: 1.5;
}
.menu.arena-menu {
    padding-bottom: 8px;
}
.pet_fon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 4px 0 2px;
    background-color: #1b1b1d;
}
.pet_rarity_0 {
    color: #c5c5c5;
}
.pet_rarity_1 {
    color: #3da85b;
}
.pet_rarity_2 {
    color: #00aced;
}
.pet_rarity_3 {
    color: #9b21f8;
}
.pet_rarity_4 {
    color: #f87721;
}
.pet_rarity_5 {
    color: #FF0000;
}
.league {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 4px 0 2px;
    background-color: #232429;
}
.league_style_arena_next {
    margin-top: 6px;
    margin-bottom: 8px;
}
.league__view {
    padding: 4px 12px;
}
.pet-view {
    display: inline-block;
    width: 128px;
    height: 128px;
    border-radius: 10px;
}
.eda-view {
    display: inline-block;
    width: 64px;
    height: 64px;
    text-align: center;
}
.league-view {
    display: inline-block;
    width: 64px;
    height: 64px;
    border: 2px solid #111;
    border-radius: 10px;
}
.league-view.arena-main_league-view {
    width: 128px;
    height: 128px;
    border-radius: 15px;
}
.pet__img {
    width: 100%;
    height: 100%;
}
.pet__text {
    display: flex;
    flex-direction: column;
    width: 65%;
    place-self: end;
    height: 110px;
    justify-content: space-evenly;
}
.league-view__img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}
.arena-main_league-view .league-view__img {
    border-radius: 15px;
}
.league__info {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding-top: 3px;
    line-height: 1.4;
    text-align: left;
}
.pet__info {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding-top: 3px;
    line-height: 1.4;
    text-align: center;
}
.pet__info2 {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding-top: 8px;
    padding-left: 8px;
    line-height: 1.4;
    text-align: left;
}
.league__name,
.user-clan a {
    color: #ececec;
}
.arena-top-league {
    padding: 10px 0;
    text-align: center;
    line-height: 1.5;
    background-color: #202022;
}
.battle-header,
.battle-page {
    text-align: center;
    background-color: #1b1b1d;
}
.battle-header {
    padding: 5px;
    color: #ececec;
    background-color: #232429;
}
.battle-drop {
    padding: 10px;
    line-height: 1.7;
    background-color: #232429;
    border-top: 1px solid #111;
}
.battle-time-left {
    padding: 10px 0;
    line-height: 1.5;
    background-color: #202022;
}
.battle-reg {
    padding: 8px 0;
    line-height: 1.5;
}
.tourney-current-result {
    padding: 10px 0;
    text-align: center;
    line-height: 1.5;
    background-color: #202022;
}
.tourney-next-stage {
    padding-top: 10px;
    text-align: center;
    line-height: 1.5;
}
.tourney-result {
    padding: 5px 8px;
    line-height: 1.4;
    text-align: left;
    background-color: #232429;
}
.tourney-result__title {
    font-size: large;
    color: #ececec;
}
.tourney-top {
    padding-top: 10px;
}
.tourney-top__title {
    font-size: large;
    color: #f87721;
}
.tourney-top__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-evenly;
}
.tourney-top__view {
    text-decoration: none;
}
.tourney-top__place {
    padding-bottom: 5px;
    color: #ececec;
}
.tourney-top__name {
    padding-top: 3px;
    font-size: small;
}
.tourney-prepare {
    padding: 8px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    display: flex;
    justify-content: center;
}
.icon_tourney {
    background-image: url(/img/icons/tourney.jpg);
}
.clan-page {
    background-color: #1b1b1d;
}
.clan-view__info {
    padding-top: 10px;
}
.clan-view__title {
    text-align: center;
    line-height: 1.5;
}
.clan-view__power {
    font-size: small;
}
.clan-info {
    padding: 10px;
    text-align: center;
}
.clan-info__title {
    margin-bottom: 2px;
    font-size: large;
    text-align: center;
    color: #ececec;
}
.clan-info__text {
    margin-top: 5px;
}
.clan-lvl {
    padding: 10px;
    text-align: center;
    line-height: 1.5;
    background-color: #232429;
}
.storage-page {
    background-color: #1b1b1d;
}
.storage-gold {
    padding-top: 3px;
    text-align: center;
    line-height: 1.8;
}
.storage-gold__count {
    font-size: large;
}
.user-clan {
    padding-top: 3px;
    padding-bottom: 5px;
    line-height: 1.5;
    text-align: center;
}
.clan-user__info {
    padding: 0 6px;
    line-height: 1.5;
}
.clan-user__info,
.gifts-page {
    background-color: #1b1b1d;
}
.gifts-form {
    padding-bottom: 10px;
}
.gifts-form__title {
    font-size: large;
    text-align: center;
    color: #ececec;
}
.gifts-form textarea {
    height: 60px;
}
.gifts-form__text {
    padding-bottom: 10px;
    text-align: center;
    color: #ececec;
}
.user-gifts__title {
    margin-top: 4px;
    font-size: large;
    text-align: center;
    color: #ececec;
}
.user-gift__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    padding-top: 5px;
}
.user-gift__item {
    text-align: center;
}
.user-gifts__more a {
    display: block;
    text-align: center;
    padding-top: 2px;
    padding-bottom: 8px;
}
.gifts__item {
    background-color: #1b1b1d;
}
.gifts__item:nth-child(even) {
    background-color: #232429;
}
.gift {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.gift__view {
    padding: 8px;
}
.gift__img {
    width: 64px;
    height: 64px;
}
.gift__info {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding-top: 2px;
    padding-right: 10px;
    line-height: 1.4;
}
.gift__title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.gift__name {
    display: inline-block;
}
.gift__date {
    font-size: small;
}
.gift__text {
    color: #ececec;
}
.gift__panel {
    display: inline-block;
}
.icon_gifts {
    background-image: url(/img/gifts/gift_18.png);
}
.love-page {
    background-color: #1b1b1d;
}
.love__info {
    padding: 10px;
    line-height: 1.4;
    text-align: center;
}
.love-user {
    padding-top: 6px;
    line-height: 1.5;
    text-align: center;
}
.love-user__title {
    color: #ececec;
}
.love-user__avatar {
    margin-top: 8px;
}
.love-form {
    padding-top: 5px;
    padding-bottom: 10px;
}
.love-form__title {
    font-size: large;
    text-align: center;
    color: #ececec;
}
.love-ring {
    width: 64px;
    height: 64px;
}
.form-select__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.form-select__item {
    text-align: center;
}
.form-select__radio {
    margin-top: 5px;
}
.form-select__item_marriage_ring {
    width: 25%;
    margin: 10px 0;
}
.user-love {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 64px;
    background-color: #232429;
    border-top: 1px solid #111;
}
.user-love__view {
    width: 92px;
    height: 64px;
    text-align: center;
}
.user-love__info {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding-top: 7px;
    line-height: 1.4;
}
.user-love__title {
    color: #ececec;
}
.icon_love {
    background-image: url(/img/icons/event-love.png);
}
.events__list {
    font-size: small;
    line-height: 1;
    background-color: #202022;
}
.events__item {
    padding: 4px;
    margin: 5px;
    color: #ececec;
    text-align: center;
    background: #202022 center/96px no-repeat;
    border: 1px solid #292931;
    -webkit-box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.7);
    box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.7);
    border-radius: 7px;
}
.events__item:last-child {
    padding: 4px;
}
span.candy {
    color: #fd51d1;
}
.icon_graveyard {
    background-image: url(/img/icons/graveyard.jpg);
}
.menu__item_size_l .icon_graveyard {
    background-position: 10px 5px;
    background-size: 96px 96px;
}
.event-page {
    padding-bottom: 8px;
    background-color: #1b1b1d;
}
.event-dialog {
    padding-bottom: 6px;
    background-color: #202022;
}
.event-dialog--transparent {
    position: absolute;
    bottom: 0;
    background-color: rgba(32, 32, 34, 0.8);
}
.event-dialog__body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 6px;
}
.event-dialog__avatar,
.event-dialog__view {
    width: 64px;
    height: 64px;
}
.event-dialog__phrase {
    line-height: 1.3;
    font-size: small;
    padding-left: 12px;
}
span.gift-event {
    color: #84b6fc;
}
.event-gifts-user {
    padding-bottom: 5px;
    text-align: center;
    line-height: 1.4;
    background-color: #202022;
}
.icon_chest-frost {
    background-image: url(/img/chests/chest-frozen.png);
}
.menu__item_size_l .icon_chest-frost {
    background-position: 5px 15px;
    background-size: 128px 80px;
}
span.hearts {
    color: #f92747;
}
.icon_event_love {
    background-image: url(/img/icons/event-love.png);
}
.menu__item_size_l .icon_event_love {
    background-position: 15px 50%;
}
.icon_event_start {
    background-image: url(/img/icons/event-start.png);
}
.icon_lvl_up {
    background-image: url(/img/icons/lvl_up.png);
}
.icon_azurit {
    background-image: url(/img/icons/lazurit_1.png);
}
.menu__item_size_l .icon_event_start {
    background-position: 15px 50%;
}
.icon_event_start_donat {
    background-image: url(/img/icons/event-start-donat.png);
}
.icon_event_start_pet {
    background-image: url(/img/avatars/avatar_329.png);
}
.icon_foundation {
    background-image: url(/img/foundation/icon_foundation.png);
}
.menu__item_size_l .icon_event_start_donat {
    background-position: 5px 100%;
}
.icon_event_start_donat2 {
    background-image: url(/img/icons/event-start-donat2.png);
}
.icon_event_start_ng {
    background-image: url(/img/avatars/avatar_310.png);
}
.menu__item_size_l .icon_event_start_donat2 {
    background-position: 5px 100%;
}
.skidka_avatar_1 {
    background-image: url(/img/icons/skidka_avatar_1.png);
}
.menu__item_size_l .skidka_avatar_1 {
    background-position: 5px 100%;
}
.skidka_avatar_2 {
    background-image: url(/img/icons/skidka_avatar_2.png);
}
.menu__item_size_l .skidka_avatar_2 {
    background-position: 5px 100%;
}
.skidka_avatar_3 {
    background-image: url(/img/icons/skidka_avatar_3.png);
}
.menu__item_size_l .skidka_avatar_3 {
    background-position: 5px 100%;
}
.skidka_avatar_4 {
    background-image: url(/img/icons/skidka_avatar_4.png);
}
.menu__item_size_l .skidka_avatar_4 {
    background-position: 5px 100%;
}
.skidka_avatar_5 {
    background-image: url(/img/icons/skidka_avatar_5.png);
}
.menu__item_size_l .skidka_avatar_5 {
    background-position: 5px 100%;
}
.skidka_avatar_6 {
    background-image: url(/img/icons/skidka_avatar_6.png);
}
.menu__item_size_l .skidka_avatar_6 {
    background-position: 5px 100%;
}
.skidka_avatar_7 {
    background-image: url(/img/icons/skidka_avatar_7.png);
}
.menu__item_size_l .skidka_avatar_7 {
    background-position: 5px 100%;
}
.skidka_avatar_8 {
    background-image: url(/img/icons/skidka_avatar_8.png);
}
.menu__item_size_l .skidka_avatar_8 {
    background-position: 5px 100%;
}
.skidka_avatar_9 {
    background-image: url(/img/icons/skidka_avatar_9.png);
}
.menu__item_size_l .skidka_avatar_9 {
    background-position: 5px 100%;
}
.skidka_avatar_10 {
    background-image: url(/img/icons/skidka_avatar_10.png);
}
.menu__item_size_l .skidka_avatar_10 {
    background-position: 5px 100%;
}
.skidka_avatar_11 {
    background-image: url(/img/icons/skidka_avatar_11.png);
}
.menu__item_size_l .skidka_avatar_11 {
    background-position: 5px 100%;
}
.skidka_avatar_12 {
    background-image: url(/img/icons/skidka_avatar_12.png);
}
.menu__item_size_l .skidka_avatar_12 {
    background-position: 5px 100%;
}
.skidka_avatar_13 {
    background-image: url(/img/icons/skidka_avatar_13.png);
}
.menu__item_size_l .skidka_avatar_13 {
    background-position: 5px 100%;
}
.skidka_avatar_14 {
    background-image: url(/img/icons/skidka_avatar_14.png);
}
.menu__item_size_l .skidka_avatar_14 {
    background-position: 5px 100%;
}
.skidka_avatar_15 {
    background-image: url(/img/icons/skidka_avatar_15.png);
}
.menu__item_size_l .skidka_avatar_15 {
    background-position: 5px 100%;
}
.skidka {
    background-position: 5px 100%;
    background-repeat: no-repeat;
}
.skidka_gold {
    background-image: url(/img/icons/res_gold-big.jpg);
}
.skidka_gems {
    background-image: url(/img/icons/gems-big.jpg);
}
.skidka_task {
    background-image: url(/img/icons/task.jpg);
}
.skidka_exp {
    background-image: url(/img/icons/exp.png);
}
.event_mag {
    background-image: url(/img/icons/event-mag.png);
}
.event_goblin {
    background-image: url(/img/icons/event-goblin.png);
}
.event_ng {
    background-image: url(/img/icons/event-ng.png);
}
.event_orcs {
    background-image: url(/img/icons/orcs_trophy.png);
}
.event_orcs-shop {
    background-image: url(/img/icons/trophys_shop.png);
}
.event_ng_present {
    background-image: url(/img/ng_present/ng_present_5.png);
}
.menu__item_size_l .event_mag {
    background-position: 1px 100%;
}
.event_clantyrnir {
    background-image: url(/img/icons/event_clantyrnir.png);
}
.menu__item_size_l .event_clantyrnir {
    background-position: 1px 100%;
}
.event_pet {
    background-image: url(/img/icons/event-pet.png);
}
.event_pet-eda {
    background-image: url(/img/icons/eda.png);
    background-position: 20px 70% !important;
    background-size: 70px;
}
.event_pegas {
    background-image: url(/img/icons/event-pegas.png);
}
.event_halloween {
    background-image: url(/img/icons/pumpkin.png);
}
.event_mage-card {
    background-image: url(/img/icons/card_5.png);
}
.menu__item_size_l .event_pet {
    background-position: 1px 100%;
}
.event__info {
    padding: 5px 20px;
    line-height: 1.5;
    text-align: center;
    color: #ececec;
}
.old_coins {
    color: #b76f7b;
}

.ng_gift_absolute {
    position: absolute;
    top: 19%;
    z-index: 500;
    left: 25%;
    background-color: rgba(107, 125, 138, 0.5);
    border-radius: 15px;
}

.ng_rod {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    overflow: hidden;
    position: relative;
}
.ng_rod img {
    width: 100%;
    height: auto;
}

.ng_toy1 {
    position: absolute;
    z-index: 1;
}
.ng_toy2 {
    position: absolute;
    z-index: 2;
}
.ng_toy3 {
    position: absolute;
    z-index: 3;
}
.ng_toy4 {
    position: absolute;
    z-index: 4;
}
.ng_toy5 {
    position: absolute;
    z-index: 5;
}
.ng_toy6 {
    position: absolute;
    z-index: 6;
}
.ng_toy7 {
    position: absolute;
    z-index: 7;
}
.ng_toy8 {
    position: absolute;
    z-index: 8;
}
.ng_toy9 {
    position: absolute;
    z-index: 9;
}
.ng_toy10 {
    position: absolute;
    z-index: 10;
}
.ng_toy11 {
    position: absolute;
    z-index: 11;
}
.ng_toy12 {
    position: absolute;
    z-index: 12;
}
.ng_toy13 {
    position: absolute;
    z-index: 13;
}
.ng_toy14 {
    position: absolute;
    z-index: 14;
}
.ng_toy15 {
    position: absolute;
    z-index: 15;
}
.ng_toy16 {
    position: absolute;
    z-index: 16;
}
.ng_toy17 {
    position: absolute;
    z-index: 17;
}
.ng_toy18 {
    position: absolute;
    z-index: 18;
}
.ng_toy19 {
    position: absolute;
    z-index: 19;
}
.ng_toy20 {
    position: absolute;
    z-index: 20;
}
.ng_toy21 {
    position: absolute;
    z-index: 21;
}
.ng_toy22 {
    position: absolute;
    z-index: 22;
}
.ng_toy23 {
    position: absolute;
    z-index: 23;
}
.ng_toy24 {
    position: absolute;
    z-index: 24;
}
.ng_toy25 {
    position: absolute;
    z-index: 25;
}
.ng_gift_1 {
    position: absolute;
    z-index: 26;
}
.ng_gift_2 {
    position: absolute;
    z-index: 27;
}
.ng_gift_3 {
    position: absolute;
    z-index: 28;
}
.ng_gift_4 {
    position: absolute;
    z-index: 29;
}
.ng_gift_5 {
    position: absolute;
    z-index: 28;
}
.ng_pet {
    position: absolute;
    z-index: 25;
}

.flex_center {
    display: flex;
    justify-content: center;
    align-items: baseline;
}

.dungeon-background {
    background-repeat: no-repeat;
    height: 210px;
    background-size: cover;
    border: 1px solid #292931;
    -webkit-box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.7);
    box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.7);
    border-radius: 7px;
    margin: 5px;
}

.dungeon-background_1 {
    background-image: url(/img/dung/1.jpg);
}

.dungeon-background_2 {
    background-image: url(/img/dung/2.jpg);
}

.dungeon-background_3 {
    background-image: url(/img/dung/3.jpg);
}

.dungeon-background_4 {
    background-image: url(/img/dung/4.jpg);
}

.dungeon-background_5 {
    background-image: url(/img/dung/5.jpg);
}

.dungeon-background_6 {
    background-image: url(/img/dung/6.jpg);
}

.dungeon-background_7 {
    background-image: url(/img/dung/7.jpg);
}

.dungeon-background_8 {
    background-image: url(/img/dung/8.jpg);
}

.sale {
    text-decoration: line-through;
    text-decoration-color: red;
    text-decoration-thickness: 2px;
}

.received {
    background-color: rgba(255, 0, 0, 0.48);
    color: #173054;
}

.shop-sale {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    right: 5px;
    line-height: 1;
}

.shop-sale__title {
    font-size: 30px;
    width: 27%;
    height: 35px;
}

.shop-sale__subtitle {
    font-size: 14px;
}

.slider-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.slider-range {
    -webkit-appearance: none;
    appearance: none;
    width: 65%;
    height: 8px;
    background-color: #345881;
    outline: none;
    opacity: 0.8;
    transition: opacity 0.2s;
    margin-bottom: 0;
}

.slider-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 22px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 2px;
    cursor: pointer;
}

.slider-range::-moz-range-thumb {
    width: 12px;
    height: 20px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 2px;
    cursor: pointer;
}

@keyframes fade-out {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-120%); }
}

.siege__hit {
    height: 110px;
    width: 100px;
    opacity: 0;
    position: absolute;
    z-index: 9999;
    left: 30%;
    top: 60%;
    transition: transform 0.2s ease-in-out;
    transform: rotate(0deg);
}

.siege__hit.visible {
    opacity: 1;
    animation: rotate-animation 0.2s linear forwards;
}

@keyframes rotate-animation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(110deg);
    }
}

.siege__hit.visible {
    opacity: 1;
}

.siege__hit-text {
    animation: fade-out 1.5s ease-in-out;
    z-index: 9999;
    position: absolute;
    color: red;
    left: 47%;
    top: 50%;
    font-size: 30px;
    text-shadow: 1px 0 1px #000, 0 1px 1px #000, -1px 0 1px #000, 0 -1px 1px #000;
}

.siege__hit-text.visible {
    opacity: 1;
    transform: translateY(-120%);
}

@keyframes shake {
    0% {
        transform: translate(0, 0);
    }
    20% {
        transform: translate(-2px, 2px);
    }
    40% {
        transform: translate(2px, -2px);
    }
    60% {
        transform: translate(-2px, -2px);
    }
    80% {
        transform: translate(2px, 2px);
    }
    100% {
        transform: translate(0, 0);
    }
}

.shaking {
    animation: shake 0.4s linear;
}

.siege {
    text-align: center;
    position: relative;
}
.siege__container {
    position: relative;
}
.siege__btns {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.siege__btn {
    margin: 10px;
    width: 52%;
}
.siege__name {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    color: #ffffff;
    font-size: 26px;
    text-align: center;
    z-index: 100;
    width: 100%;
    text-shadow: 1px 0 1px #000, 0 1px 1px #000, -1px 0 1px #000, 0 -1px 1px #000;
    font-weight: bold;
}
.siege__name-victory {
    top: unset;
    bottom: 25px;
    font-size: 35px;
}
.siege__cloud {
    position: absolute;
    top: 18%;
    left: 55%;
    transform: translate(-25%, -55%);
    background-color: rgba(255, 255, 255, 0.8);
    padding: 6px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    z-index: 100;
    font-size: 14px;
    font-weight: bold;
    color: #1f1010;
}
.siege__cloud::before {
    content: "";
    position: absolute;
    bottom: -9px;
    left: 15%;
    transform: translateX(-50%);
    border-top: 10px solid rgba(255, 255, 255, 0.8);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}
.siege__boss-wrapper {
    display: contents;
}
.siege__boss-overlay {
    position: relative;
    width: 100%;
    height: 100%;
    font-size: 24px;
    color: white;
}
.siege__hit {
    position: absolute;
}
.siege__percent {
    position: absolute;
    left: 43%;
    bottom: -2px;
    font-size: 16px;
}
.siege__boss.attacking .siege__boss-overlay {
    background-color: rgba(255, 0, 0, 0.4);
}
.siege__boss {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: bottom;
}
.siege__boss1 {
    background-image: url(/img/siege/boss1.png);
    background-size: auto 200px;
}
.siege__boss2 {
    background-image: url(/img/siege/boss2.png);
    background-size: auto 160px;
}
.siege__boss3 {
    background-image: url(/img/siege/boss3.png);
    background-size: auto 218px;
    top: -10px;
}
.siege__boss4 {
    background-image: url(/img/siege/boss4.png);
    background-size: auto 210px;
    top: -10px;
}
.siege__boss5 {
    background-image: url(/img/siege/boss5.png);
    background-size: auto 186px;
}
.siege__boss6 {
    background-image: url(/img/siege/boss6.png);
    background-size: auto 220px;
    left: 25px;
}
.siege__background {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 99;
}
.siege__background1 {background-image: url(/img/siege/background1.jpg);}
.siege__background2 {background-image: url(/img/siege/background1.jpg);}
.siege__background3 {background-image: url(/img/siege/background2.jpg);}
.siege__background4 {background-image: url(/img/siege/background3.jpg);}
.siege__background5 {background-image: url(/img/siege/background3.jpg);}
.siege__background6 {background-image: url(/img/siege/background4.jpg);}
.siege__background7 {background-image: url(/img/siege/background_victory.jpg);}

.link-inactive {
    pointer-events: none;
}

.damage-indicator {
    position: absolute;
    font-size: 24px;
    font-weight: bold;
    animation-duration: 0s;
    animation-fill-mode: forwards;
    color: red;
    z-index: 110;
}

.tyrnir-table {
    display: flex;
    justify-content: space-around;
    background-color: #202022;
    padding-top: 10px;
}

.tyrnir-table__col {
    text-align: center;
    gap: 10px;
    display: flex;
    flex-direction: column;
}

.avatar-container {
    position: relative;
}

.arrow-next {
    position: absolute;
    font-size: 48px;
    text-decoration: none;
    color: #ffffff;
    margin: 0 10px;
    top: 40px;
    right: 40px;
}

.arrow-prev {
    position: absolute;
    font-size: 48px;
    text-decoration: none;
    color: #ffffff;
    margin: 0 10px;
    top: 40px;
    left: 40px;
}

.learning-new {
    text-align: center;
}

.learning-new__arrow {
    margin-left: 50%;
}

.learning-new__arrow-dung {
    margin: 0;
}


.learning-new__background {
    position: relative;
    background-size: contain !important;
    height: 54%;
    width: 60%;
    background: url(/img/learning/learning_1.png) no-repeat bottom;
    margin-top: 25px;
}

.learning-new__cloud {
    position: absolute;
    display: inline-block;
    padding: 20px;
    background-color: #3f3f42;
    border-radius: 5px;
    top: 12%;
    left: 75%;
    width: 105px;
    text-align: center;
}

.learning-new__cloud::after {
    content: "";
    position: absolute;
    bottom: 8px;
    left: -13%;
    border: 10px solid transparent;
    border-top-color: #3f3f42;
    transform: rotateZ(90deg);
}

/* Стили для блока с прокруткой */
.battlepass__list {
    display: block;
    max-height: 285px;
    overflow-y: auto;
    scroll-behavior: smooth;
}

/* Стили для блока с прокруткой для яндекс*/
.battlepass__list-ya {
    flex-grow: 1;
    min-height: 285px;
}

/* Изменяем цвет полосы прокрутки для WebKit (Chrome, Safari) */
.battlepass__list::-webkit-scrollbar {
    width: 15px;
    background-color: #F5F5F5;
    border-radius: 2px;
}

/* Цвет фона полосы для WebKit (Chrome, Safari) */
.battlepass__list::-webkit-scrollbar-track {
    background-color: #2d2d2f;
}

.battlepass__list::-webkit-scrollbar-thumb {
    background-color: #696060;
    background-image: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 25%, transparent 100%, rgba(0, 0, 0, 1) 75%, transparent);
    border-radius: 2px;
}

/* слайдер в магазине азуритов */

.slider-wrapper {
    position: relative;
    overflow: hidden;
}
.slides-container {
    height: fit-content;
    width: 100%;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: scroll;
    scroll-behavior: unset;
}
.slide {
    width: 100%;
    flex: 1 0 100%;
}

.slides-container {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}
/* WebKit */
.slides-container::-webkit-scrollbar {
    width: 0;
    height: 0;
}
.slide-arrow {
    position: absolute;
    display: flex;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 4rem;
    background-color: white;
    border: none;
    width: 3rem;
    font-size: 3rem;
    padding: 0;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 100ms;
    z-index: 100;
}
.slide-arrow:hover,
.slide-arrow:focus {
    opacity: 1;
}
#slide-arrow-prev {
    left: 0;
    padding-left: 0.75rem;
    border-radius: 0 2rem 2rem 0;
}
#slide-arrow-next {
    right: 0;
    padding-left: 1.25rem;
    border-radius: 2rem 0 0 2rem;
}
.page-buy__item-azurit {
    padding: 6px 0;
    line-height: 1.5;
    text-align: center;
    background-color: #1b1b1d;
}

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

.banks__text {
    font-size: 22px;
}

.banks__logo {
    padding: 5px;
    width: 230px;
    height: 26px
}

/* выбор стартового питомца и аватара */
.start-pet__list {
    display: flex;
    justify-content: center;
    padding-top: 3px; !important;
    gap: 15px
}

.start-pet__selected {
    border-color: gold;
}

.start-avatar__selected {
    border-color: gold;
}

.start-pet__desc {
    line-height: 18px;
    text-align: left;
    display: block;
}

.start-pet__info {
    gap: 15px;
    display: grid
}

.start-pet__text {
    display: grid;
    padding: 0 10px 5px 10px;
}

.start-pet__name {
    font-size: 24px;
    font-weight: bold;
}

.start-pet__image {
    display: inline-block;
    height: 195px;
    width: 195px;
    background: #131415 center / 100% no-repeat;
    border: 2px solid #292931;
    border-radius: 5px;
}

.character-selection {
    text-align: center;
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.arrow-button {
    font-size: 24px;
    background-color: #f0f0f0;
    border: none;
    cursor: pointer;
    margin: 10px 0;
}

.left {
    order: -1;
}

.character-image img {
    max-width: 100%;
    height: auto;
}

.character-description {
    margin: 10px 0;
}

.confirm-button {
    margin-top: auto;
}

.confirm-button button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

.arrow-prev__start-pet {
    top: 90px;
    left: 15px;
    background-color: transparent;
    border: none; outline: none;
}

.arrow-prev__start-avatar {
    top: 90px;
    left: -50px;
    background-color: transparent;
    border: none; outline: none;
}

.arrow-next__start-pet {
    top: 90px;
    right: 15px;
    background-color: transparent;
    border: none; outline: none;
}

.arrow-next__start-avatar {
    top: 90px;
    background-color: transparent;
    border: none; outline: none;
    right: unset;
}

.start-avatar__title {
    font-weight: bold;
    display: block;
    text-align: center;
    font-size: 20px;
    margin: 10px;
}

.start-avatar__preview {
    height: 64px;
    width: 64px;
}

/* Фейерверк */
#fireworkCanvas {
    position: absolute;
    min-width: 320px;
    max-width: 600px;
    z-index: 200;
    pointer-events: none;
}

/* Всплывающее окно характеристик в выборе питомца */
.popup-content-pet {
    display: none;
    background: #131415;
    padding: 4px;
    border: 2px solid #292931;
    border-radius: 5px;
    animation: poppupPet 0.85s ease;
    z-index: 1;
}

/* Всплывающее окно характеристик в характеристиках */
.popup-content-param {
    display: none;
    background: #131415;
    border: 2px solid #292931;
    border-radius: 5px;
    animation: poppupPet 0.85s ease;
    z-index: 1;
    position: absolute;
    left: 50%;
    bottom: 42px;
    padding: 10px;
    transform: translate(-50%);
    min-width: 240px;
    text-align: center;
    max-width: 80vw;
    overflow: auto;
}

@keyframes poppupPet {
    0% { opacity: 0; }
    100% { opacity: 1; }
}


/* Затемнение для иксолла */
.xsolla__overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Затемнение */
    justify-content: center;
    align-items: center;
    z-index: 9999;
    animation: xsolla__loading 0.5s ease;
}

.xsolla__loading-message {
    background: #fff;
    padding: 20px;
    border-radius: 5px;
}

@keyframes xsolla__loading {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Покачивание */
@keyframes shake2 {
    0% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
    100% { transform: rotate(-3deg); }
}

.shake2 {
    animation: shake2 0.5s infinite;
}

/* Свечение иконок */

.glowing {
    animation: glow 1.2s infinite;
}

.glowing-red {
    animation: glow_red 1.2s infinite;
}

@keyframes glow {
    0% {
        box-shadow: 0 0 10px 0 rgba(255, 223, 0, 0.8); /* Начальный эффект свечения (цвет и размытие) */
    }
    100% {
        box-shadow: 0 0 20px 10px rgba(255, 223, 0, 0); /* Конечный эффект свечения (больше размытия и прозрачность) */
    }
}

@keyframes glow_red {
    0% {
        box-shadow: 0 0 10px 0 rgba(229, 16, 16, 0.8); /* Начальный эффект свечения (цвет и размытие) */
    }
    100% {
        box-shadow: 0 0 20px 10px rgba(255, 223, 0, 0); /* Конечный эффект свечения (больше размытия и прозрачность) */
    }
}

/* Выделение иконок (петы) */
.icon-select {
    border: 2px solid;
    transform: scale(1.1);
    transition: transform 0.5s ease;
}

/* Выделение иконок (аватары L) */
.icon-select__large {
    border: 2px solid;
    transform: scale(1.2);
    transition: transform 0.5s ease;
}

/* Выделение иконок (аватары XL) */
.icon-select__xlarge {
    transform: scale(1.7);
    transition: transform 0.5s ease;
    position: relative;
    z-index: 1;
}

.icon-select__xxlarge {
    transform: scale(2.5);
    transition: transform 0.5s ease;
    position: relative;
    z-index: 101;
}

.icon-select__prize {
    border: 2px solid #f87721;
    transform: scale(1.3);
    transition: transform 2.0s ease;
}

/* Карусель */
.carousel__chest {
    position: relative;
}

.carousel {
    background: #191919;
    padding: 0;
    opacity: 0;
    transition: opacity 0.7s ease;
    height: 0;
}

.carousel.show {
    opacity: 1;
    padding: 10px;
    height: auto;
}

.carousel__container {
    overflow: hidden;
    width: 100%;
    background: #2f2f2f;
    border-radius: 10px;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
}

.carousel__container > ul {
    position: relative;
    left: 0;
    display: inline-flex;
    transition: 5s ease;
}

.carousel__container > ul > li {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    border-left: 1px solid #2efb33;
}

.carousel__win {
    background-color: rgba(105, 126, 231, 0.35);
    animation: shake2 1.0s infinite;
}

.carousel__arrow {
    transform: translate(15%, 5px);
}

/* Покупка-прокачка питомцев */
.pet__container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.pet__item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 45%;
}

.pet__btn-action {
    flex-grow: 1;
    align-items: self-end;
}

/* Новый год */

.snowflake {
    position: absolute;
    color: #fff;
    opacity: 0.8;
    top: -8%;
    z-index: 100;
}

@keyframes snowfall {
    0% {
        transform: translateY(-10vh) rotate(0deg) scale(0.5);
    }
    100% {
        transform: translateY(110vh) rotate(360deg) scale(0.5);
    }
}

/* VIP */
.icon__vip-1 {
    background-image: url(/img/dost/dost1.png);
}
.icon__vip-2 {
    background-image: url(/img/dost/dost2.png);
}
.icon__vip-3 {
    background-image: url(/img/dost/dost3.png);
}
.icon__vip-4 {
    background-image: url(/img/dost/dost4.png);
}
.icon__vip-5 {
    background-image: url(/img/dost/dost5.png);
}
.icon__vip-6 {
    background-image: url(/img/dost/dost6.png);
}
.icon__vip-7 {
    background-image: url(/img/dost/dost7.png);
}
.icon__vip-8 {
    background-image: url(/img/dost/dost8.png);
}
.icon__vip-9 {
    background-image: url(/img/dost/dost9.png);
}
.icon__vip-10 {
    background-image: url(/img/dost/dost10.png);
}


/* Разное */
.up-text {
    font-size: 18px;
    font-weight: bold;
    white-space: nowrap;
    position: absolute;
    color: #2efb33;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: transform 0.1s ease-in-out, opacity 0.100s ease-in-out;
}

.up-text--fail {
    color: #e81c00;
}

.friends-notification {
    position: absolute;
    background-color: #202022;
    width: 70%;
    top: 33%;
    left: 11%;
    padding: 20px;
    z-index: 1;
    border-radius: 10px;
    border: 1px solid;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.birthday-form {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.btn-birthday {
    display: grid;
    gap: 15px;
}

.birthday-note {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.popup {
    opacity: 1;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: rgba(25, 25, 25, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
}

.popup-content {
    display: flex;
    align-items: center;
    background-color: rgba(80, 77, 77, 0.7);
    width: 90%;
    max-width: 360px;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    text-align: center;
    position: fixed;
    bottom: 1500px; /* Начальное положение за пределами экрана */
    left: 50%;
    transform: translateX(-50%);
    transition: bottom 0.3s ease; /* Анимация выезжания и уезжания */
    flex-direction: column;
    gap: 5px;
}

.popup-content--with-flag {
    display: flex;
    align-items: center;
    width: 90%;
    max-width: 360px;
    border-radius: 10px;
    text-align: center;
    position: fixed; /* Оставляем только один position */
    bottom: 1500px;
    left: 50%;
    transform: translateX(-50%);
    transition: bottom 0.3s ease;
    flex-direction: column;
    gap: 5px;
    box-shadow: none;
}

/* Фон на переднем плане */
.popup-content--with-flag::before {
    content: "";
    position: absolute; /* Относительно .popup-content--with-flag */
    top: 10px;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(/img/icons/alert_flag.png) no-repeat top center;
    background-size: contain;
    z-index: 1000; /* Поднимаем над контентом */
    pointer-events: none; /* Не мешает кликам */
}

.popup-opened {
    overflow: hidden; /* Блокировка прокрутки */
}

.decoration-none {
    text-decoration: none;
}

/* Обновить логин */

.input-wrapper-reload {
    position: relative;
}

.input-wrapper-reload .change-icon {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
}

/* Клановая битва */
.clan-battle {
    position: relative;
}

.clan-battle-locations {
    display: flex;
    font-size: 14px;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    width: 100%;
}

.clan-battle-form {
    margin: 0;
    flex-wrap: wrap;
    gap: 5px;
    padding-left: 14px;
    padding-right: 14px;
}

.clan-battle-location__column {
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.clan-battle-location__holder {
    padding: 5px;
    display: flex;
    align-items: center;
    font-size: 14px
}

.clan-battle-location__column--alt {
    flex-direction: column;
}

.clan-battle__btn {
    text-decoration: none;
    border: none;
    background: none;
    cursor: pointer;
}

.clan-battle__location-image {
    width: 64px;
    height: 64px;
    border-radius: 7px;
    overflow: hidden
}

.clan-battle__fight-view {
    height: 206px;
}

.clan-battle__fight-image {
    width: 100%;
    height: 100%;
    object-position: bottom;
    object-fit: cover;
}

.clan-battle__avatar-wrapper {
    position: absolute;
    bottom: 0;
    background-color: transparent;
    border: none;
    width: 100%;
    display: flex;
    justify-content: space-between
}

.clan-battle__avatar {
    height: 100px;
    width: 100px;
}

.border-red {
    border: 2px solid #e8445e;
}
.border-blue {
    border: 2px solid #5bbcff;
}
.border-yellow {
    border: 2px solid #FFFF00FF;
}
.border-green {
    border: 2px solid #008000FF;
}
.border-gray {
    border: 2px solid #808080FF;
}
.red {
    color: #e8445e;
}
.blue {
    color: #5bbcff;
}
.yellow {
    color: #FFFF00FF;
}
.green {
    color: #008000FF;
}

.image-container--doubleshadow::after,
.image-container--doubleshadow::before{
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 21px;
    background: linear-gradient(to bottom, transparent, rgba(27, 27, 29, 1));
    z-index: 2;
}

.image-container--doubleshadow::before {
    top: 0;
    background: linear-gradient(to top, transparent, rgba(27, 27, 29, 1));
}

.fight-view__wrapper {
    padding: 5px;
    gap: 2px;
    display: flex;
    flex-direction: column;
}

.fight-view__header--abs {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 10px;
    border-radius: 7px;
    background-color: rgba(1, 1, 1, 0.7);
    width: 44%;
    font-size: 13px;
}

.fight-view__attack {
    gap: 2px;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
}

.fight-view__header--abs-left {
    left: 10px;
}

.fight-view__header--abs-right {
    right: 10px;
}

.clan-battle__opacity-low {
    opacity: 0.30;
}

/* Дополнения для нового вида боев */
.fight-view__dmg-element {
    position: absolute;
    left: 30px;
    -webkit-transform: translateX(-60%);
    -moz-transform: translateX(-60%);
    -ms-transform: translateX(-60%);
    -o-transform: translateX(-60%);
    transform: translateX(-60%);
    top: 0;
    opacity: 1;
    -webkit-transition: top 1.5s ease, opacity 1s ease 0.1s;
    -moz-transition: top 1.5s ease, opacity 1s ease 0.1s;
    -ms-transition: top 1.5s ease, opacity 1s ease 0.1s;
    -o-transition: top 1.5s ease, opacity 1s ease 0.1s;
    transition: top 1.5s ease, opacity 1s ease 0.1s;
}

.fight-view__heal-element {
    position: absolute;
    top: 0;
    opacity: 1;
    -webkit-transform: translateX(-120%);
    -moz-transform: translateX(-120%);
    -ms-transform: translateX(-120%);
    -o-transform: translateX(-120%);
    transform: translateX(-120%);
    -webkit-transition: top 1.5s ease, opacity 1s ease 0.1s;
    -moz-transition: top 1.5s ease, opacity 1s ease 0.1s;
    -ms-transition: top 1.5s ease, opacity 1s ease 0.1s;
    -o-transition: top 1.5s ease, opacity 1s ease 0.1s;
    transition: top 1.5s ease, opacity 1s ease 0.1s;
}

.fight-view__player-container,
.fight-view__opponent-container {
    display: flex;
    align-items: end;
    opacity: 1;
    -webkit-transition: opacity 1.5s ease 0.25s;
    -moz-transition: opacity 1.5s ease 0.25s;
    -ms-transition: opacity 1.5s ease 0.25s;
    -o-transition: opacity 1.5s ease 0.25s;
    transition: opacity 1.5s ease 0.25s;
}

.fight-view__hide {
    opacity: 0;
}

#ya-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.disable-select {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

/* Новый бар опыта */
.bar {
    display: flex;
    align-items: center;
    height: 5px;
    position:relative;
    z-index: 1000
}
.bar__lvl {
    border: 2px solid;
    border-radius: 30px;
    font-size: 12px;
    padding: 1px;
    min-width: 13px;
    text-align: center;
}
.bar__progress {
    position: relative;
    z-index: 100;
    height: 4px;
    flex: 1;
}
.applicationBackground-desktopBorder-ingame-left {
    width: 24px;
    position: absolute;
    left: -23px;
    top: 0;
    bottom: 0;
    -webkit-background-size: contain;
    background-size: contain;
    background-image: url(/img/borderLeft.png);
    background-position: 100% 0;
    background-repeat: repeat-y;
    z-index: 1001;
}
.applicationBackground-desktopBorder-ingame-bottom {
    width: 20px;
    position: absolute;
    right: -23px;
    top: auto;
    bottom: 0;
    -webkit-background-size: contain;
    background-size: contain;
    background-image: url(/img/borderLeft.png);
    background-position: 100% 100%;
    background-repeat: repeat-x;
    z-index: 10001;
    transform: rotate(90deg);
}
.applicationBackground-desktopBorder-ingame-right {
    width: 24px;
    position: absolute;
    right: -23px;
    top: 0;
    bottom: 0;
    -webkit-background-size: contain;
    background-size: contain;
    background-image: url(/img/borderLeft.png);
    background-position: 100% 0;
    background-repeat: repeat-y;
    z-index: 10001;
    transform: scaleX(-1);
}
.applicationBackground-desktopBorder-left {
    width: 38px;
    position: absolute;
    left: -2px;
    top: 0;
    bottom: 0;
    -webkit-background-size: contain;
    background-size: contain;
    background-image: url(/img/borderLeft.png);
    background-position: 100% 0;
    background-repeat: repeat-y;
    transform: scaleX(-1);
}

.applicationBackground-desktopBorder-right {
    width: 38px;
    position: absolute;
    right: -2px;
    top: 0;
    bottom: 0;
    -webkit-background-size: contain;
    background-size: contain;
    background-image: url(/img/borderLeft.png);
    background-position: 100% 0;
    background-repeat: repeat-y;
}

.hunt-loc__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #232429;
    border-radius: 7px;
    padding-top: 5px;
    padding-bottom: 5px;
}
.nav-button {
    text-decoration: none;
    font-size: 30px;
    color: black;
    border-radius: 2rem 0 0 2rem;
    background-color: #5b5b5b;
    transition: background-color 0.3s, transform 0.3s;
    width: 40px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}
.nav-button--left {
    border-radius: 0 2rem 2rem 0;
}

.nav-button:hover {
    background-color: #ffffff;
}
.hunt-loc__info {
    text-align: center;
    flex-grow: 1;
}

.fullscreen-toggle {
    position: fixed;
    top: 10px;
    right: 10px;
    color: white;
    cursor: pointer;
    z-index: 1000;
}

.fullscreen-icon {
    height: 40px;
    width: 40px;
}

/* PVE логи */

.log-fight {
    display: flex;
}

.log-fight__log {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    text-align: center;
    justify-content: center;
    min-height: 72px;
    height: 100%;
    padding-right: 13%;
}

.log-fight__exit {
    width: 72px;
    flex-shrink: 0;
}

.log-fight__exit-icon {
    height: 72px;
}

/* Для осады */
@media (min-width: 450px) {
    .siege__cloud {
        top: 30%;
    }
    .siege__hit-text {
        top: 50%;
    }
}
@media (min-width: 550px) {
    .siege__cloud {
        top: 35%;
    }
    .siege__hit-text {
        top: 60%;
    }

    .image-with-shadow--short {
        height: 246px;
    }
}
@media (min-width: 600px) {
    .siege__cloud {
        top: 40%;
    }
    .siege__hit-text {
        top: 65%;
    }
    .pets-background--large {
        height: 280px;
    }
}

/* Для экранов с шириной 350px и более */
@media (min-width: 350px) {
    .fight-view__background {
        height: 320px;
    }
}

@media (max-width: 380px) {
    .clan-battle__location-image {
        width: 52px;
        height: 52px;
    }
}

@media (max-width: 375px) {
    .main-nav__link {
        height: 55px;
    }
    .main-nav__link {
        background-size: 40px 40px;
    }
    .icon_clan {
        background-size: 44px 44px !important;
    }
    .btn {
        height: 37px;
    }
    .main-nav__grow {
        height: 58px;
    }
    .main-nav--sticky {
        height: 66px;
    }
}

/* Для экранов с шириной менее 350px */
@media (max-width: 349px) {
    .fight-view__background {
        height: 270px;
    }
}

@media (min-width: 500px) {
    .fight__avatar--new {
        height: 130px !important;
        width: 130px !important;
    }
}
@media (min-width: 800px) {
    .fight__avatar--new {
        height: 140px !important;
        width: 140px !important;
    }
}

@media (max-width: 349px) {
    .fight-view__background {
        height: 320px;
    }

    .fight__avatar--tall {
        height: 160px !important;
        width: 140px !important;
    }
}
@media (min-width: 350px) and (max-width: 369px) {
    .fight-view__background {
        height: 340px;
    }

    .fight__avatar--tall {
        height: 170px !important;
        width: 150px !important;
    }
}
@media (min-width: 370px) and (max-width: 379px) {
    .fight-view__background {
        height: 350px;
    }

    .fight__avatar--tall {
        height: 180px !important;
        width: 160px !important;
    }
}
@media (min-width: 380px) and (max-width: 399px) {
    .fight-view__background {
        height: 360px;
    }

    .fight__avatar--tall {
        height: 190px !important;
        width: 170px !important;
    }
}
@media (min-width: 400px) and (max-width: 499px) {
    .fight-view__background {
        height: 400px;
    }

    .fight__avatar--tall {
        height: 220px !important;
        width: 200px !important;
    }
}
@media (min-width: 500px) and (max-width: 599px) {
    .fight-view__background {
        height: 450px;
    }
    .fight__avatar--tall {
        height: 240px !important;
        width: 220px !important;
    }
}
@media (min-width: 600px) {
    .fight-view__background {
        height: 500px;
    }

    .fight__avatar--tall {
        height: 256px !important;
        width: 230px !important;
    }
}