h1, h2, h3, form, html, p, div, span, table, tbody, td, tr, img {
    margin: 0;
    padding: 0;
    outline: none !important;
}

.a {
    text-decoration: underline !important;
    outline: none !important;
}


a{display: inline-block; text-decoration: none;}
a:hover{}
a, span, div, input, button {-webkit-tap-highlight-color: rgba(255,255,255,0);}

img {
    border: 0;
    vertical-align: middle;
}

-webkit-scrollbar {
    display: none;
    width: 0px;
    height: 0px;
}

body {
    display: block;
    margin: 0px;
    min-height: 100%;
    overflow: auto;
    background: linear-gradient(180deg, #453422b0 35%, #211914cf 100%);;
}

body, table, td, th, input, textarea, select {
    font-family: 't3' !important;
}

input[type="checkbox" i] {
    background-color: initial;
    cursor: default;
    appearance: auto;
    box-sizing: border-box;
    margin: 3px 3px 3px 4px;
    padding: initial;
    border: initial;
}

@font-face {
    font-family: 't';
    src: url('/public/font/t.ttf');
}

@font-face {
    font-family: 't1';
    src: url('/public/font/LiberationSans.ttf');
}

@font-face {
    font-family: 't2';
    src: url('/public/font/Morice-Bejarz.ttf');
}

@font-face {
    font-family: 't3';
    src: url('/public/font/NanumSquareEB.ttf');
}

@font-face {
    font-family: 't4';
    src: url('/public/font/PerfectDOSVGA437.ttf');
}

@font-face {
    font-family: 't5';
    src: url('/public/font/Poppins-SemiBold.ttf');
}

label,
textarea {
    font-size: 0.8rem;
    letter-spacing: 1px;
}

textarea {
    background: rgba(143, 105, 61, 0.15);
    padding: 10px;
    max-width: 100%;
    line-height: 1.5;
    color: #d5d5d5;
    border-radius: 5px;
    border: 1px solid rgba(193, 136, 54, 0.38);
    box-shadow: 1px 1px 1px #020202;
}

label {
    display: block;
    margin-bottom: 10px;
}
html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-size: 14px;
    /* color: #ffffff; */
    background-color: #000000;
}
.container {
    position: relative;
    min-width: 240px;
    max-width: 417px;
    margin: 0 auto;
    font-size: 15px;
    color: #aaa991 !important;
    text-shadow: 1px 1px 2px black, 0 0 1em #000;
    height: 100%;
}

.user-element {
    border-radius: 50%;
    height: 14px;
    width: 14px;
    border:1px solid rgb(0, 0, 0);
}

.user-element.fire {
background: #ea6021;
}
.user-element.water {
    background: #2e6d87;
}
.user-element.earth {
    background: #3c6e3b;
}

.profile-other-icon {
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 72px;
}

.profile-other-image {
    filter: drop-shadow(0 0px 6px rgb(193, 143, 21));
    width: 50px !important;
    height: 50px !important;
    background-size: 100% auto;
    background-repeat: no-repeat;
    cursor: pointer;
}
.profile-other-name {
    width: 100%;
    font-size: 14px;
    color: rgba(228, 214, 191, 0.85) !important;
    text-shadow: 1px 1px 2px black, 0 0 1em #000;
}

._gb1, ._gb2, ._gb3, ._gb4,._gb5, ._gb6,._gb7, ._gb8,
._gb9, ._gb10, ._gb11, ._gb12,._gb13, ._gb14,._gb15,
._gb16,._gb17, ._gb18,._gb19, ._gb20,._gb21, ._gb22,
._gb23, ._gb24,._gb25, ._gb26, ._gb27, ._gb28,._gb29,
._gb30, ._gb31, ._gb32, ._gb33, ._gb34, ._gb35, ._gb36,  ._gb37,
._gb_pets, ._gb_coll, ._gbC_1, ._gbC_2, ._gbC_3, ._gbC_4,
._gbC_5, ._gbC_6, ._gbC_7, ._gbC_8, ._gb35
{
    top:0;
    margin-top: -50px;
    height: 100%;
}

._gb_pets {
    background: url(/public/pets/fon.png) 0 0 / 100% no-repeat;
}

._gb_coll {
    background: url(/public/fon_location/new/col.png) 0 0 / 100% no-repeat;
}

._gb1 {
    background: url(/public/fon_location/new/first_fantasy_landscape.png) 0 0 / 100% no-repeat;
}

._gb2 {
    background: url(/public/fon_location/new/shop.png) 0 0 / 100% no-repeat;
}

._gb3 {
    background: url(/public/fon_location/new/n5.png) 0 0 / 100% no-repeat;
}

._gb4 {
    background: url(/public/fon_location/new/n3.png) 0 0 / 100% no-repeat;
}

._gb5 {
    background: url(/public/fon_location/new/shop_cards.png) 0 0 / 100% no-repeat;
}

._gb6 {
    background: url(/public/fon_location/new/n6.png) 0 0 / 100% no-repeat;
}

._gb7 {
    height: 100%;
    background: url(/public/boby/home/home3.png) 0 0 / 100% no-repeat;
}

._gb8 {
    background: url(/public/fon_location/new/n7.png) 0 0 / 100% no-repeat;
}

._gb9 {
    background: url(/public/fon_location/new/n1.png) -50px 0 / 130% no-repeat;
}

._gb10 {
    background: url(/public/fon_location/new/n8.png) 0 0 / 100% no-repeat;
}

._gb11 {
    background: url(/public/fon_location/new/l1.png) 0 0 / 100% no-repeat;
}

._gb12 {
    background: url(/public/fon_location/new/n10.png) 0 0 / 100% no-repeat;
}

._gb13 {
    background: url(/public/fon_location/new/n9.png) 0 0 / 100% no-repeat;
}

._gb15 {
    background: url(/public/fon_location/loc/Ruins.png) 98% 0% / 106% 500px no-repeat;
}

._gb14 {
    background: url(/public/fon_location/new/vict.png) 0 0 / 100% no-repeat;
}

._gb16 {
    background: url(/public/fon_location/new/ml2.png) 0 0 / 100% no-repeat;
}

._gb17 {
    background: url(/public/fon_location/new/lc2.png) 0 0 / 100% no-repeat;
}

._gb18 {
    background: url(/public/fon_location/new/duel.png) 0 0 / 100% no-repeat;
    width: 100%;
    height: 700px;
    position: absolute;
}
._gb19 {
    background: url(/public/fon_location/loc/n2.png) 46% -160px / 151% 793px no-repeat;
}
._gb20 {
    background: url(/public/fon_location/loc/Forest.png) 98% 0% / 106% 500px no-repeat;
}

._gb21 {
    background: url(/public/fon_location/loc/land.png) 98% 0% / 106% 500px no-repeat;
}

._gb22 {
    background: url(/public/fon_location/new/forum.png) 0 0 / 100% no-repeat;
}

._gb23 {
    background: url(/public/fon_location/new/prof.png) 0 0 / 100% no-repeat;
}

._gb24 {
    background: url(/public/boby/event_arena_bg.png) 0 0 / 100% no-repeat;
    height: 100%;
}

._gb25 {
    background: url(/public/fon_location/new/rating.png) 0 0 / 100% no-repeat;
}

._gb26 {
    background: url(/public/fon_location/new/setting.png) 0 0 / 100% no-repeat;
}

._gb27 {
    background: url(/public/fon_location/new/belt.png) 0 0 / 100% no-repeat;
}

._gb28 {
    background: url(/public/fon_location/new/tr.png) 0 0 / 100% no-repeat;
}

._gb29 {
    background: url(/public/fon_location/loc/b-n2.png) 100% 0% / 100% 460px no-repeat;
}

._gb30 {
    background: url(/public/fon_location/loc/b-n1.png) 100% 0% / 100% 540px  no-repeat;
}

._gb31 {
    background: url(/public/fon_location/loc/b-n3.png) 100% 0% / 100% 588px no-repeat;
}

._gb32 {
    background: url(/public/fon_location/loc/b-n4.png) 100% 0% / 100% 588px no-repeat;
}

._gb33 {
    background: url(/public/fon_location/loc/b-n5.png) 47% -187px / 111% 800px no-repeat;
}

._gb34 {
    background: url(/public/fon_location/new/pets_up.png) 23% 2px / 100% 793px no-repeat;
}

._gb35 {
    background: url(/public/fon_location/loc/pvp1.png) 49% -238px / 126% 671px no-repeat;
}

._gb36 {
    background: url(/public/fon_location/new/pvp1-log.png) 0 0 / 100% no-repeat;
}

._gbC_1 {
    background: url(/public/c/battle_fon/1.png) 49% -95px / 494px 656px no-repeat;
}
._gbC_2 {
    background: url(/public/c/battle_fon/2.png) 98% 0% / 106% 500px no-repeat;
}
._gbC_3 {
    background: url(/public/c/battle_fon/3.png) 98% 0% / 106% 500px no-repeat;
}
._gbC_4 {
    background: url(/public/c/battle_fon/4.png) 98% 0% / 106% 500px no-repeat;
}
._gbC_5 {
    background: url(/public/c/battle_fon/5.png) 49% -95px / 494px 656px no-repeat;
}
._gbC_6 {
    background: url(/public/c/battle_fon/6.png) 98% 0% / 106% 500px no-repeat;
}
._gbC_7 {
    background: url(/public/c/battle_fon/7.png) 98% 0% / 106% 500px no-repeat;
}
._gbC_8 {
    background: url(/public/c/battle_fon/8.png) 98% 0% / 106% 500px no-repeat;
}


.footer-c {
    width: 100%;
    z-index: 1001;
    transform: translateY(0);
    padding-top: 5px;
    padding-bottom: 10px;
    background: linear-gradient(0deg, #000000cc 30%, transparent);
    box-sizing: border-box;
    background: url(https://gguild.ru/style/img/background/game_bottom.png) 50% 100% no-repeat;
    background-size: contain;
}

.footer-content {
    margin: 0 auto;
    max-width: 24.5rem;
}

.footer-content > a {
    text-decoration: none !important;
}

.footer-content-text {
    display: block;
    color: #a3813a;
    font-family: 't';
    font-size: 14px;
    margin-top: 3px;
}

.footer-content-img {
    width: 50px;
}

.content {
    height: 100%;
    position: relative;
    margin-bottom: 4px;
    color: #ccc;
}

.content-main-menu {
    height: 100%;
    width: 100%;
    color: #ccc;
}

.content_fon_1 {
    background: url('/public/fon-content/content-fon.jpg') 50% 0px repeat-y;
}

.c-top, .c-bot {
    background: url(https://lowflow.bratki.mobi/images/sep-top.png) repeat-x 0 0 #222;
    height: 2px;
}

.c-hr {
    background: #000000;
    height: 1px;
}

.robbery {
    background: rgba(23, 23, 23, 0.25);
    padding: 0 7px 7px 7px;
}

.combat {
    padding: 5px;
    background: rgba(23, 23, 23, 0.22);
}

.content-inner {
    padding: 6px;
}

.b-gr {
    background: rgba(23, 23, 23, 0.5);
}

.fon_ram_cont {
    margin-right: 2px;
    margin-top: 3px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.fon_ram {
    display: inline-block;
    width: 57px;
    height: 50px;
    background: url("/public/border/fon_ram.png") no-repeat;
    background-size: 100% 100%;
}

.fon_ram_potions {
    display: inline-block;
    width: 55px;
    height: 60px;
    background: url("/public/border/fon_ram_potions.png") no-repeat;
    background-size: 100% 100%;
}

.contitle {
    margin-bottom: 7px;
    font-weight: bold;
    font-size: 14px;
    color: #bd8500;
    background: #1b1b1b;
    border: 1px solid #121110;
    border-color: #121110 #31302e #4e4e4d #31302e;
    border-radius: 5px !important;
    padding: 5px 10px;
}

/*.text, input[type="checkbox"] {*/
/*    display: none;*/
/*}*/

input[type="checkbox"]:checked ~ .text {
    display: block;
}

.pers-icon {
    display: inline-block;
    position: relative;
}

.pers-icon-sex_1, .pers-icon-sex_2 {
    position: absolute;
    width: 10px;
    z-index: 1;
    top: 10px;
    left: 8px;
}

.pers-icon-ava, .pers-icon-ava-off {
    position: relative;
    width: 16px;
    height: 16px;
    box-shadow: 0px 0px 6px -1px black inset;
    border: 1px solid #8b6a22;
    border-radius: 50%;
    padding: 1px;
}

.pers-icon-ava-off {
    border: 1px solid dimGray;
}

.fon_logs_profile {
    height: 300px;
    background: url('/public/fon_location/profile.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-bottom: -3px;
    border-bottom: 1px solid rgb(75, 65, 7);
}

.title_t_1 {
    font-weight: 500;
    margin: 3px auto;
    text-shadow: 1px 1px 0 rgb(0 0 0 / 60%), 1px -1px 0 rgb(0 0 0 / 60%), -1px -1px 0 rgb(0 0 0 / 60%), -1px 1px 0 rgb(0 0 0 / 60%) !important;
    /* color: #bcbcbc !important; */
    text-align: center;
    font-size: 15px;
    background: linear-gradient(to right, #93812200 0%, #453323 50%, #23232300 100%);
    /* border-top: 1px solid #4f4f4fb3; */
    /* border-bottom: 1px solid #4f4f4fb3; */
    padding: 3px;
}

.title_t_1 > span::before {
    background: linear-gradient(267deg, hsl(41deg 38% 31%) 0, rgba(151, 21, 21, 0) 80%) !important;
    margin-right: 10px;
    right: 100%;
}

.title_t_1 > span::after {
    left: 100%;
    margin-left: 10px;
}

.title_t_1 > span::after,
.title_t_1 > span::before {
    content: "";
    background: linear-gradient(90deg, hsl(41deg 38% 31%) 0, rgba(151, 21, 21, 0) 80%);
    background: linear-gradient(90deg, hsl(41deg 38% 31%) 0, rgba(151, 21, 21, 0) 80%);
    background: linear-gradient(90deg, hsl(41deg 38% 31%) 0, rgba(151, 21, 21, 0) 80%);
    position: absolute;
    height: 2px;
    width: 100px;
    top: 50%;
    border-radius: 15%;
}

.title_t_1 > span {
    display: inline-block;
    position: relative;
}

.header_panel_user {
    background: linear-gradient(0deg, rgb(0 0 0 / 3%), rgb(0 0 0 / 16%), rgb(0 0 0 / 75%));
    height: 40px;
    margin-bottom: 1px;
    margin-top: -2px;
    padding-top: 5px;
    position: relative;
    z-index: 111111;
}

.header_panel_user_ava {
    z-index: 1;
    position: absolute;
    border: 1px solid rgb(152, 114, 0);
    border-radius: 6px;
    background: rgba(30, 30, 30, 0.7);
    background-size: 100% 100%;
    width: 35px;
    height: 35px;
    left: 5px;
    top: 7px;
    -webkit-box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.2);
    -moz-box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.2);
    box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.781);
}

.header_panel_user_bar {
    z-index: -3;
    background-color: rgb(0 0 0 / 25%);
    filter: drop-shadow(-1px 0 #000) drop-shadow(0 -1px 0 #000) drop-shadow(0 1px 0 #000) drop-shadow(1px 0 0 #000);
}

.header_panel_user_progress {
    margin: 0 0 0 0;
    height: 2px;
    background: linear-gradient(90deg, rgb(163 121 15), rgb(246 182 54));
}

.bar_progress {
    margin: 0 0 0 0;
    margin-top: 0.03em;
    background-color: rgb(0, 0, 0);
    height: 4px;
    background: linear-gradient(90deg, rgb(163 121 15), rgb(246 182 54));
}

.header_panel_user_lvl {
    text-shadow: 1px 0 1px #000, 0 1px 1px #000, -1px 0 1px #000, 0 -1px 1px #000;
    font-size: 10px;
    padding: 1px;
    color: #e9e9e9;
    width: 10px;
    left: 30px;
    top: 32px;
    z-index: 1;
    font-size: 9px;
    height: 10px;
    text-align: center;
    position: absolute;
    border: 1px solid rgb(152, 114, 0);
    background-color: rgb(38 38 38);
    border-radius: 50%;
}

.header_panel_user_resurs {
    text-shadow: 1px 0 1px #000, 0 1px 1px #000, -1px 0 1px #000, 0 -1px 1px #000;
    font-size: 12px;
    color: #e9e9e9;
    width: 260px;
    left: 45px;
   top: 11px;
    z-index: 1;
    height: 22px;
    text-align: center;
    position: absolute;
}

.header_panel_user_mail {
    position: absolute;
    right: 5px;
    top: 13px;
    height: 20px;
    width: 24px;
}

.header_panel_user_notif {
    position: absolute;
    right: 34px;
    top: 10px;
}

.header_panel_user_slot_param {
    position: relative;
    border: 1px solid #8c6b3697;
    border-radius: 8px;
    border-bottom: 1px rgb(0, 0, 0) solid;
    border-right: 1px rgb(56, 56, 56) solid;
    box-shadow: 0 0 1px 1px rgb(81 125 118 / 48%);
    background: linear-gradient(-49deg, hsl(0deg 0% 9%) 0%, hsl(0deg 0% 10%) 50%, hsl(0deg 0% 7%) 51%, hsl(0deg 0% 9%) 100%);
    padding: 1px 6px;
    min-width: 45px;
    text-align: center;
}

.header_panel_user_slot_param span {
    font-size: 13px;
    text-shadow: 1px 1px 1px rgb(77, 75, 28),
    0 1px 1px rgb(77, 75, 28),
    -1px 0 1px rgb(77, 75, 28),
    0 -1px 1px rgb(77, 75, 28);
    margin-left: 10px;
}

.header_panel_user_param_slot {
    background: linear-gradient(0deg, hsl(57deg 88% 13%) 0%, hsl(50deg 72% 2%) 50%, hsl(34deg 50% 1%) 51%, hsl(0deg 0% 9%) 100%);
    border: 2px groove rgb(56, 88, 94);
    border-radius: 50%;
    position: absolute;
    left: -10px;
    top: -1px;
}


.button_icon {
    background: linear-gradient(290deg, #05101064 0%, #081412 50%, #091f1b 51%, #0d2725 100%);
    border-radius: 50%;
    width: 23px;
    height: 23px;
    border: 1px solid rgba(150, 150, 150, 0.56);
}


/* effects */
.blobs-container {
    display: flex;
}

.blob {
    background: black;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
    position: absolute;
    top: -25px;
    left: 48px;
    height: 5px;
    width: 5px;
    transform: scale(1);
    animation: pulse-black 2s infinite;
}

@keyframes pulse-black {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}

.blob.white {
    background: white;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 1);
    animation: pulse-white 2s infinite;
}

@keyframes pulse-white {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

.blob.red {
    background: rgba(255, 82, 82, 1);
    box-shadow: 0 0 0 0 rgba(255, 82, 82, 1);
    animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(255, 82, 82, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);
    }
}

.blob.orange {
    background: rgba(255, 121, 63, 1);
    box-shadow: 0 0 0 0 rgba(255, 121, 63, 1);
    animation: pulse-orange 2s infinite;
}

@keyframes pulse-orange {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 121, 63, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(255, 121, 63, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 121, 63, 0);
    }
}

.blob.yellow {
    background: rgba(255, 177, 66, 1);
    box-shadow: 0 0 0 0 rgba(255, 177, 66, 1);
    animation: pulse-yellow 2s infinite;
}

@keyframes pulse-yellow {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 177, 66, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(255, 177, 66, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 177, 66, 0);
    }
}

.blob.blue {
    background: rgba(52, 172, 224, 1);
    box-shadow: 0 0 0 0 rgba(52, 172, 224, 1);
    animation: pulse-blue 2s infinite;
}

@keyframes pulse-blue {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(52, 172, 224, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(52, 172, 224, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(52, 172, 224, 0);
    }
}

.blob.green {
    background: rgba(51, 217, 178, 1);
    box-shadow: 0 0 0 0 rgba(51, 217, 178, 1);
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(51, 217, 178, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(51, 217, 178, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(51, 217, 178, 0);
    }
}

.blob.purple {
    background: rgba(142, 68, 173, 1);
    box-shadow: 0 0 0 0 rgba(142, 68, 173, 1);
    animation: pulse-purple 2s infinite;
}

@keyframes pulse-purple {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(142, 68, 173, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(142, 68, 173, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(142, 68, 173, 0);
    }
}

.new-items-block {
    position: relative;
    margin: 5px;
    height: 55px;
    width: 55px;
    background-size: 100% 100%;
}

.new-items-block img {
    vertical-align: middle;
    margin: -2px 0px 0px 0px;
    width: 40px;
    height: 40px;
    filter: drop-shadow(0 0 2px rgb(0, 0, 0));
}

.new-items-block.r1 {
    position: relative;
    /*background-image: url("/public/border/osvet/F.png"), url("/public/border/ramka/F.png");*/
    background-image: url("/public/border/ramka/item_equipment_base_01.png");
}

.new-items-block.r2 {
    position: relative;
    /*background-image: url("/public/border/osvet/2.png"), url("/public/border/ramka/2.png");*/
    background-image: url("/public/border/ramka/item_equipment_base_02_pow.png");
}

.new-items-block.r3 {
    position: relative;
    /*background-image: url("/public/border/osvet/3.png"), url("/public/border/ramka/3.png");*/
    background-image: url("/public/border/ramka/item_equipment_base_03_pow.png");
}

.new-items-block.r4 {
    position: relative;
    /*background-image: url("/public/border/osvet/4.png"), url("/public/border/ramka/4.png");*/
    background-image: url("/public/border/ramka/item_equipment_base_04_pow.png");
}

.new-items-block.r5 {
    position: relative;
    /*background-image: url("/public/border/osvet/5.png"), url("/public/border/ramka/5.png");*/
    background-image: url("/public/border/ramka/item_equipment_base_05_pow.png");
}

.new-items-block.r6 {
    position: relative;
    /*background-image: url("/public/border/osvet/6.png"), url("/public/border/ramka/6.png");*/
    background-image: url("/public/border/ramka/item_equipment_base_05.png");
}


.fon_logs_home {
    height: 220px;
    margin: 0 0 -55px 0;
    background: url('/public/fon_location/home_logs.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.fon_logs_blacksmith {
    background-image: url('/public/fon_location/blacksmith.png');
    background-size: 100% 100%;
}

.fon_logs_tavern {
    height: 175px;
    margin: 0 0 -40px 0;
    background: url('/public/fon_location/taverna_logs.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.fon_logs_shop {
    height: 220px;
    margin: 0 0 -108px 0;
    background: url('/public/fon_location/shop.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.fon_logs_recipes {
    background: url('/public/fon_location/recipes_fon.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.fon_logs_start {
    height: 450px;
		margin: 0 0 -220px 0;
    background: url('/public/logtest.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.fon_logs_turnir {
    height: 300px;
    width: 380px;
    margin: 0 0 -200px 0;
    background: url('/public/fon_location/turnir.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.fon_logs_urfin {
    height: 310px;
    background: url('/public/fon_location/urfin.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-bottom: -3px;
}

.fon_logs_ruines {
    height: 310px;
    background: url('/public/fon_location/ruines.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-bottom: -3px;
}

.fon_logs_pve1 {
    background: url('/public/fon_location/pve1.png');
    background-position: center 0;
    height: 440px;
    background-repeat: no-repeat;
    position: relative;
}

.fon_logs_profile {
    height: 300px;
    background: url('/public/fon_location/profile.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-bottom: 1px solid rgb(75, 65, 7);
}

.text-shadow_000 {
    text-shadow: 1px 0 1px #000,
    0 1px 1px #000,
    -1px 0 1px #000,
    0 -1px 1px #000;
}

.panel_user_bar_b {
    box-shadow: 0px 1px 0px 0px rgb(26 26 26);
    background-color: #1e1e1f;
    height: 4px;
    border-top: 1px solid #3d3d3d;
    border-bottom: 1px solid #3d3d3d;
}

.panel_user_progress_b {
    margin: -1px 0 0 0;
    background-color: #ff0000;
    background: linear-gradient(to right, rgb(255 4 4), rgb(205 59 59));
    height: 4px;
    box-shadow: 0 0 5px rgb(0 0 0 / 48%) inset;
    background: linear-gradient(198deg, hsl(0deg 87% 44%) 0%, hsl(0deg 58% 51%) 50%, hsl(4deg 76% 46%) 51%, hsl(0deg 37% 38%) 100%);
}

.target-image, .user-image {
    width: 35px;
    height: 35px;
    border-radius: 3px;
    border-style: groove;
    border-width: 2px;
    border-color: #9c9079 #5a5042 #5a5042 #5a5042;
}

#movingImage {
    position: relative;
    /* Добавляем анимацию с использованием transition */
}

/* Стили для блока Крита */
.critical-hit-effect {
    position: absolute;
    top: 1px;
    left: 0;
    width: 100%;
    height: 39%;
    display: none;
    justify-content: center;
    align-items: center;
    animation: flashAnimation 1.3s ease-in-out infinite;
}

.critical-hit-effect, .n {
    top: 30px;
    left: 0;
    width: 100% !important;
    height: 300px !important;
}

.critical-hit-effect img {
    max-width: 100%;
    max-height: 100%;
}

/* Анимация мигания */
@keyframes flashAnimation {
    0%, 100% {
        opacity: 0.2;
    }
    50% {
        opacity: 1;
    }
}

/* обвотка */
.filter_gold {
    filter: drop-shadow(0 0 2px gold);
}

.filter_1 {
    filter: drop-shadow(0 0 3px rgb(193, 143, 21));
}

.filter_2 {
    filter: drop-shadow(0 0 3px rgb(161, 32, 32));
}

.filter_3 {
    filter: drop-shadow(0 0 3px rgb(0, 0, 0));
}

.filter_4 {
    filter: drop-shadow(0 0 1px rgb(193, 143, 21));
}

/* skills battle */

.bl {
    border-radius: 4px;
    height: 48px;
    width: 48px;
    position: relative;
    box-shadow: 5px 5px 9px 2px rgba(0, 0, 0, 0.72);
    z-index: 2;
}

.bl.p {
    border-radius: 4px;
    height: 30px;
    width: 80px;
    position: relative;
    z-index: 2;
}

.bl.p.null {
    border: 1px solid rgba(133, 108, 72, 0.89);
}

.bl-img {
    border-radius: 4px;
    padding: 1px;
    z-index: -1;
    transition: filter .25s ease-in;
}

.potions-img {
    position: absolute;
    left: 19px;
    top: -7px;
    width: 50%;
    border-radius: 4px;
    padding: 1px;
    z-index: -1;
    transition: filter .25s ease-in;
}

.bl-img, .buff-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}

.xx {
    width: 48px;
    height: 48px;
    position: relative;
}

.xx.potions {
    height: 80px;
    width: 30px;
    position: relative;
}

.xx.circle, .xx.r, .xx.p {
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
}

.xx.r {
    transform: rotate(90deg);
    transform-origin: 50% 50%;
    stroke-width: 2px;
}

.xx.p {
    transform: rotate(90deg);
    transform-origin: 50% 133%;
    stroke-width: 2px;
}

@keyframes bl_fill {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes buff_end {
    to {
        stroke-dashoffset: 100;
    }
}

.bl-time {
    justify-self: center;
    font-size: 20px;
}

.bl-time, .buff-count, .buff-time {
    text-shadow: 0 2px 1px #000;
    z-index: 4;
    user-select: none;
    position: absolute;
    color: #f1f1f1;
    align-self: center;
}


.progress_ener_fon {
    margin: 5px auto;
    box-shadow: 0px 1px 0px 0px rgb(26 26 26);
    background-color: #222325;
    border-right: 1px solid rgb(151, 146, 7);
    border-left: 1px solid rgb(151, 146, 7);
    border-top: 1px solid rgb(151, 146, 7);
    border-bottom: 1px solid rgb(99 96 21);
}

.progress_ener {
    background-color: rgba(228, 52, 193, 0.617);
    /*  background: linear-gradient(to right, rgb(255 4 4), rgb(205 59 59));*/
    box-shadow: 0 0 5px rgb(117, 28, 136) inset;
    background: linear-gradient(198deg, rgb(108, 30, 87) 0%, rgba(172, 5, 177, 0.654) 50%, rgba(179, 17, 173, 0.76) 51%, rgb(121, 44, 114) 100%);
}

.progress_ener_fon, .progress_ener {
    height: 15px;
    width: 250px;
}

@keyframes hit-animation {
    0%, 100% {
        filter: brightness(100%);
    }
    50% {
        filter: brightness(50%) sepia(100%) hue-rotate(-50deg) saturate(300%);
    }
}

.damage-text {
    font-size: 18px;
    font-weight: bold;
    color: red;
    position: absolute;
    opacity: 0;
    animation: appearAnimation 0.5s forwards, damageAnimation 2s ease-out 0.8s forwards;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

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

@keyframes damageAnimation {
    0% {
        transform: translateY(0) rotate(0);
        opacity: 1;
        color: red;
        font-size: 18px;
        filter: blur(0);
    }
    50% {
        transform: translateY(-88px) rotate(20deg);
        opacity: 1;
        color: darkred;
        font-size: 18px;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
    }
    60% {
        transform: translateY(-88px) rotate(20deg);
        opacity: 1;
    }
    70% {
        transform: translateY(-88px) rotate(20deg);
        opacity: 1;
        font-size: 24px;
    }
    100% {
        transform: translateY(-88px) rotate(20deg);
        opacity: 0;
        font-size: 0px;
    }
}


@keyframes healAnimation {
    0% {
        opacity: 0;
        transform: translateY(-20px) scale(0.8) rotate(0deg);
        text-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
        color: rgba(0, 255, 0, 0.8);
    }
    25% {
        transform: scale(1.1) rotate(20deg);
        text-shadow: 0 0 15px rgba(0, 255, 0, 0.9);
        color: rgba(0, 255, 0, 0.9);
    }
    50% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(-20deg);
        text-shadow: 0 0 20px rgba(0, 255, 0, 1);
        color: rgba(0, 255, 0, 1);
    }
    75% {
        transform: scale(0.9) rotate(10deg);
        text-shadow: 0 0 15px rgba(0, 255, 0, 0.9);
        color: rgba(0, 255, 0, 0.9);
    }
    100% {
        opacity: 0;
        transform: translateY(20px) scale(1.2) rotate(0deg);
        text-shadow: 0 0 30px rgba(0, 255, 0, 0);
        color: rgba(0, 255, 0, 0);
    }
}

@keyframes pulseAnimation {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.heal-text {
    left: 20%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    font-weight: bold;
    opacity: 0;
    animation: healAnimation 4s ease-in-out, pulseAnimation 4s infinite alternate;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}


/* Acordeon styles */
.tab {
    position: relative;
    margin-bottom: 1px;
    width: 100%;
    color: #fff;
    overflow: hidden;
}

.tab input {
    position: absolute;
    opacity: 0;
    z-index: -1;
}

.tab label {
    background: rgba(7, 7, 7, 0.17);
    padding: 5px;
    color: #aaa991;
    position: relative;
    display: block;
}

.tab-content {
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height .35s;
    -o-transition: max-height .35s;
    transition: max-height .35s;
}

/* :checked */
.tab input:checked ~ .tab-content {
    max-height: 100vh;
}

/* Icon */
.tab label::after {
    position: absolute;
    right: 0;
    top: -7px;
    display: block;
    width: 3em;
    height: 3em;
    line-height: 3;
    text-align: center;
    -webkit-transition: all .35s;
    -o-transition: all .35s;
    transition: all .35s;
}

.tab input[type=checkbox] + label::after {
    content: "+";
}

.tab input[type=radio] + label::after {
    content: "\25BC";
}

.tab input[type=checkbox]:checked + label::after {
    transform: rotate(315deg);
}

.tab input[type=radio]:checked + label::after {
    transform: rotateX(180deg);
}

input[type="submit"]:hover {
    cursor: pointer;
}

input[type="text"] {
    background-color: rgb(16, 15, 8);
    border: 2px groove rgba(102, 86, 11, 0.592);
    color: rgb(255, 255, 255);
    padding: 6px;
    border-radius: 5px;
    box-shadow: 0px 0px 8px 0px rgba(100, 85, 14, 0.535) inset;
}

input[type="password"] {
    background-color: rgb(16, 15, 8);
    border: 2px groove rgba(102, 86, 11, 0.592);
    color: rgb(255, 255, 255);
    padding: 6px;
    border-radius: 5px;
    box-shadow: 0px 0px 8px 0px rgba(100, 85, 14, 0.535) inset;
}

input[type="number"] {
    background-color: rgb(16, 15, 8);
    border: 2px groove rgba(102, 86, 11, 0.592);
    color: rgb(255, 255, 255);
    padding: 6px;
    border-radius: 5px;
    box-shadow: 0px 0px 8px 0px rgba(100, 85, 14, 0.535) inset;
}

.shif-in-right {
    animation: shif-in-right 0.5s ease forwards;
    opacity: 1; /* Начальное значение прозрачности */
    transform: scale(0.5); /* Начальный масштаб элемента */
}

@keyframes shif-in-right {
    0% {
        transform: scale(0.3); /* Начальная позиция и масштаб */
        opacity: 0.5; /* Начальное значение прозрачности */
    }

    80% {
        transform: scale(1.1); /* Увеличение масштаба */
        opacity: 0.5; /* Установка прозрачности на полную видимость */
    }

    100% {
        transform: scale(1); /* Возвращение к исходному масштабу */
    }
}

.modal-tab {
    display: none;
    position: fixed;
    z-index: 111111;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.82);
}

.close {
    position: absolute;
    margin-top: 3px;
    color: #9d8454;
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    right: 0;
    top: -3px;
    padding: 3px;
    border-radius: 100%;
    width: 20px;
    height: 20px;
    line-height: 20px;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #866424;
    text-decoration: none;
    cursor: pointer;
}

.modal-trigger {
    cursor: pointer;
}

.modal-tab-content {
    position: relative;
    margin: 30px auto;
    padding: 15px 5px;
    width: 100%;
    max-width: 350px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.457), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -webkit-animation-name: animateModal_2;
    -webkit-animation-duration: 0.5s;
    animation-name: animateModal_2;
    animation-duration: 0.5s;
    overflow: hidden;
    box-sizing: border-box;
    text-align: center;
    border: 2px solid #000000;
    background: #16120a;
    border-radius: 5px;
    background-image: url(/public/test/r-top.png), url(/public/test/common_15_1.png), url(/public/test/r.png);
    background-position: center top, 50% 3px, center bottom;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: auto 13px, 80% 60px, auto 13px;

}


@keyframes animateModal_2 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.battlefield-head {
    position: absolute;
    padding-bottom: 15.585%;
    top: 6px;
    left: 0;
    width: 100%;
    z-index: 200
}

.battlefield-head-left, .battlefield-head-right {
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0
}

.battlefield-head-right {
    right: 0;
}

.battlefield-head-left {
    left: 4px;
}

@keyframes shake {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(3px, 0px);
    }
    50% {
        transform: translate(-3px, 0px);
    }
    75% {
        transform: translate(-3px, 0px);
    }
    100% {
        transform: translate(3px, 0px);
    }
}



@keyframes shake_up {
    0% { transform: translateY(0); }
    25% { transform: translateY(-5px); }
    50% { transform: translateY(5px); }
    75% { transform: translateY(-5px); }
    100% { transform: translateY(0); }
}

.move {
    width: 35px;
    height: 35px;
    background-color: rgba(53, 53, 53, 0.442);
    border-radius: 10px;
    border: 1px groove rgba(197, 175, 14, 0.566);
}

.map_tile {
    margin: 0;
    height: 48px;
    width: 48px;
    max-width: 47px;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

.map_tiles-row {
    width: 100%;
    max-width: 420px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: row nowrap;
}

.loc-map_container {
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.loc-map {
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: none;
    margin: auto;
    align-items: center;
    justify-content: center;
    box-sizing: content-box;
    position: relative;
    z-index: inherit;
}

img.move  {
    cursor: pointer;
    z-index: 9;
    width: 40px;
    height: 40px;
}

.map-actions {
    z-index: 333999;
    position: absolute;
    bottom: 120px;
    left: 0;
    display: flex;
    flex-direction: row;
    max-width: 70%;
    overflow-x: auto;
    overflow-y: hidden;
}

.map-actions > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: url("/public/icons/r.png");
    background-size: 100% 100%;
    height: 40px;
    width: 40px;
    cursor: pointer;
    transition: all .3s;
    z-index: 11;
}

.map-actions > div > a {
    display: block;
    padding: 0.5rem 0;
    text-align: center;
}


.modal.visible {
    opacity: 1;
    pointer-events: all;
    cursor: auto;
}

.potionsModal {
    display: flex;
    align-items: center;
    max-height: calc((3rem * 3) + 1rem);
    overflow-y: auto;
    overflow-x: hidden;
}

.modal_overlay, .modal {
    transition: all .3s;
}

.modal_overlay {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 200;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    background: #151525aa;
}

.modal.potionsModal {
    justify-self: flex-end;
    width: 23rem !important;
    max-width: 23rem !important;
    min-width: auto !important;
    overflow: hidden;
    /*  margin-right: .75rem;*/
}

.modal.potionsModal.visible {
    margin-bottom: 3rem;
}

.modal_overlay.potionsModalOverlay {
    align-items: flex-end;
}

.modal {
    min-width: 300px;
    min-height: 323px;
    max-width: 400px;
    max-height: 70vh;
    background: #00000059;
    border-radius: 4px;
    color: #fff;
    opacity: 0;
    pointer-events: none;
    flex-direction: column;
    padding: .25rem .5rem;
    z-index: 201;
}

.modal_overlay, .modal {
    transition: all .3s;
}

.modal_overlay.visible {
    opacity: 1;
    cursor: pointer;
    pointer-events: all;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.potionsModal {
    display: flex;
    align-items: center;
    max-height: calc((3rem * 3) + 1rem);
    overflow-y: auto;
    overflow-x: hidden;
}


.plus_battle {
    -webkit-animation: noticeBattle 5s linear forwards;
    animation: noticeBattle 5s linear forwards;
}

@-webkit-keyframes noticeBattle {
    from {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }

    10%,
    75% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }

    to {
        opacity: 0;
    }
}

@keyframes noticeBattle {
    from {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }

    10%,
    75% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }

    to {
        opacity: 0;
    }
}

/*Убрать полосу прокрутки для всей страницы*/
::-webkit-scrollbar {
    width: 0;
}


.flag-title {
    position: relative;
    z-index: 30;
    top: -1px;
    height: 36px;
    width: 100%;
    overflow: hidden;
}

.flag-title-text, .siege-title-text {
    height: 36px;
    white-space: nowrap;
    margin-top: 0px;
    background: url(/public/title/3.png);
    background-size: 100% 100%;
    background-repeat: repeat-x;
    line-height: 2.4;
    font-weight: 500;
    text-shadow: 1px 1px 0 rgb(0 0 0 / 60%), 1px -1px 0 rgb(0 0 0 / 60%), -1px -1px 0 rgb(0 0 0 / 60%), -1px 1px 0 rgb(0 0 0 / 60%) !important;
    color: #bcbcbc !important;
    text-align: center;
    font-size: 17px;
    font-family: beermoney;
}

.brd-left, .brd-right {
    position: absolute;
    z-index: 10;
    min-height: 99%;
    height: 99%;
    max-height: 99%;
    width: 2px;
    margin: 0 auto;
}

.brd-left {
    left: 0;
    top: 1px;
    background: #594225fa;
}

.brd-right {
    right: 0;
    top: 1px;
    background: #594225fa;
}

.brd-bot, .brd-top {
    position: absolute;
    z-index: 10;
    bottom: 0;
    left: 0;
    min-width: 99%;
    width: 96%;
    height: 2px;
    margin: 0 auto;
}

.brd-bot {
    background: #594225fa;
}

.brd-top {
    background: #594225fa;
    top: 0 !important;
}

.brd-tl {
    top: 0;
    left: 0;
    background-image: url(/public/title/9.png);
}

.brd-tr {
    top: 0;
    right: 0;
    background-image: url(/public/title/8.png);
}

.brd-bl {
    left: 0;
    background-image: url(/public/title/6.png);
}

.brd-br {
    right: 0;
    background-image: url(/public/title/7.png);
}

.brd-bc {
    bottom: -13px !important;
    left: 44%;
    background-image: url(/public/title/10.png);
    width: 50px !important;
    height: 14px;
}

.brd-bl, .brd-br, .brd-tl, .brd-tr, .brd-bc {
    background-size: 100% 100%;
    position: absolute;
    z-index: 20;
    bottom: 0;
    width: 14px;
    height: 14px;
    background-repeat: no-repeat;
}

.portal-fon {
    position: relative;
    padding: 7px;
    background:  linear-gradient(86deg, rgba(34, 61, 61, 0.11) 35%, rgb(52 109 120 / 0%) 100%);
}

.portal-1 {
    background: url(/public/portal/1.png) no-repeat;
}

.portal-2 {
    background: url(/public/portal/2.png) no-repeat;
}

.portal-3 {
    background: url(/public/portal/3.png) no-repeat;
}

.portal-1, .portal-2, .portal-3 {
    position: relative;
    background-size: cover;
    width: 75px;
    height: 70px;
    top: -5px;
    left: 0px;
}

.portal-num {
    position: absolute;
    color: #5dc4b2;
    right: 10px;
    top: 5px;
    text-shadow: -1px -1px 1px #000, 1px -1px 1px #000, 1px 1px 1px #000, -1px 1px 1px #000;
    font-size: 12px;
}

.b-hr1-r {
    background-image: url(/public/hr/1/3.png);
}

.b-hr1-l {
    background-image: url(/public/hr/1/1.png);
}

.b-hr1-r, .b-hr1-l {
    height: 13px;
    width: 15px;
    background-size: 100% 100%;
}

.b-hr1-c {
    margin-bottom: 2px;
    height: 4px;
    width: 100%;
    background-image: url(/public/hr/1/2.png);
    background-repeat: repeat-x;
    background-size: 100% 100%;
}


/* main-menu-conteiner */
@keyframes rotate1 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes rotate2 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}

@keyframes rotate3 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(180deg);
    }
}

.main-menu-container {
    position: relative;
    width: 250px;
    height: 250px;
    margin: 50px auto;
    filter: drop-shadow(0 0 3px #000000);
}

.main-menu-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.button-main-menu-container {
    position: absolute;
    width: 300px;
    height: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.button-main-menu-container a {
    position: absolute;
    width: 65px;
    height: 65px;
    border: none;
    cursor: pointer;
    text-align: center;
}

.button-main-menu-container a > span {
    color: #d2b77c;
    position: relative;
    top: calc(95%);
    font-family: 't';
    font-size: 15px;
    background: linear-gradient(to right, rgb(0 0 0 / 0%), #00000017 20%, rgb(0 0 0 / 40%) 40%, rgb(0 0 0 / 75%) 50%, rgba(0, 0, 0, 0.4) 60%, #00000017 80%, rgb(0 0 0 / 0%));
}

.main-menu-container-image1 {
    animation: rotate1 30s linear infinite forwards;
}

.main-menu-container-image2 {
    animation: rotate2 20s linear infinite forwards;
    width: 60% !important;
    height: 60% !important;
    top: 20% !important;
    left: 20% !important;
}

.main-menu-container-image3 {
    animation: rotate2 20s linear infinite forwards;
}

.main-menu-container-image4 {
    filter: drop-shadow(0 0 3px rgba(255, 160, 0, 0.56));
    width: 81% !important;
    height: 90% !important;
    top: 5% !important;
    left: 10% !important;
}

.main-menu-button1 {
    top: -13px;
    left: calc(50% - 30px);
    background: url("/public/icons-gold/shop/tranings.png");
    background-size: cover;
}

.main-menu-button2 {
    top: calc(25% - 25px);
    left: 75%;
    background: url("/public/icons-gold/shop/resurs.png");
    background-size: cover;
}

.main-menu-button3 {
    top: calc(25% - 25px);
    left: 11px;
    background: url("/public/icons-gold/shop/premium.png");
    background-size: cover;
}

.main-menu-button4 {
    top: calc(65% - 25px);
    left: 20px;
    background: url("/public/icons-gold/shop/skills.png");
    background-size: cover;
}

.main-menu-button5 {
    top: calc(65% - 25px);
    left: 215px;
    background: url("/public/icons-gold/shop/kuznec.png");
    background-size: cover;
}

.main-menu-button6 {
    top: calc(90% - 35px);
    left: calc(50% - 30px);
    background: url("/public/icons-gold/shop/jeweler.png");
    background-size: cover;
}

.popup-rich3-metal {
    padding: 15px 5px;
    width: 350px !important;
    margin: 330px auto !important;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    border: 2px solid #000000;
    background: #16120a;
    border-radius: 5px;
    background-image: url(/public/test/r-top.png), url(/public/test/common_15_1.png), url(/public/test/r.png);
    background-position: center top, 50% 3px, center bottom;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: auto 9px, 80% 60px, auto 9px;
}

.notice-as-popup .popup-rich3-metal {
    margin-top: 140px !important;
}

.wrap-popup {
    position: fixed;
    z-index: 21000;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .8);
}

.conteiner-text-1 {
    background: #1f1404d1;
    padding: 5px;
    margin: auto 5px;
    border-radius: 5px;
    border: 2px groove #020100c4;
    color: #c7c7c7;
}


@keyframes keyFramesCloudNew {
    0% {
        background-position-x: -500%, 0;
    }
    100% {
        background-position-x: 0%, 0;
    }
}

.side-menu-wr_has-offer {
    top: 45%;
}

.side-menu-wr {
    position: absolute;
    top: 350px;
    transform: translateY(-50%);
    right: .375rem;
    z-index: 1003;
}

.side-menu-wl {
    position: absolute;
    top: 457px;
    transform: translateY(-50%);
    left: .375rem;
    z-index: 1003;
}

.side-menu {
    width: 100%;
    padding-right: .3125rem;
    padding-left: .3125rem;
    box-sizing: border-box;
}

.side-menu__btn {
    margin-bottom: .3125rem;
    z-index: 1000;
    position: relative;
    display: block;
    border-radius: 50%;
    width: 100% !important;
    text-decoration: none !important;
    text-align: center;
    background-size: 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    font-size: 1rem;
}

.side-menu__btn .button-content {
    width: 100%;
}

.side-menu .button-content {
    position: static;
    padding: 0;
}

.side-menu__content {
    position: relative;
    width: 100%;
}

.button-content > img {
    background-size: 100% 100%;
    width: 45px;
    filter: drop-shadow(0 0 3px rgb(0, 0, 0));
}

.side-menu__desc {
    color: #cac0aa;
    filter: drop-shadow(0 0 3px rgb(0, 0, 0));
    font-family: 't3';
    margin-top: 0px;
    font-size: 1.0rem;
    text-shadow: -1px -1px 1px #000, 1px -1px 1px #000, 1px 1px 1px #000, -1px 1px 1px #000;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), #daaf5b, rgba(255, 255, 255, 0)) 50% 0 / 85% 9% no-repeat;
}

.main-menu-top {
    position: relative;
    z-index: 1000;
    margin: 15px auto;
    text-align: center;
}

@keyframes pulse {
    0% {
        transform: scale(0.8);
    }
    100% {
        transform: scale(1);
    }
}

@font-face {
    font-family: beermoney;
    src: url('/public/font/Cosmic.ttf');
}

@font-face {
    font-family: bejar;
    src: url('/public/font/Morice-Bejar.ttf');
}

@font-face {
    font-family: Cosmic;
    src: url('/public/font/Cosmic.ttf');
}

.r {
    text-align: center;
    background-image: url(/public/test/r-top.png), url(/public/test/r.png);
    background-position: center top, center bottom;
    background-repeat: no-repeat, no-repeat;
    padding: 13px 5px;
    background-size: auto 12px, auto 12px;
}


/* Определение контейнера сетки */
.rating-grid-container {
    display: grid; /* Используем сетку для размещения элементов */
    grid-template-columns: repeat(4, 1fr); /* Создаем 4 столбца с равными пропорциями */
    grid-gap: 0px; /* Расстояние между блоками */
    grid-template-columns: 14% 15% 45% 26%;
    justify-content: center;
    align-items: center;
}

/* Стилизация элементов сетки */
.rating-grid-item {

}

.rating-grid-item-positions {
    text-align: center;
    padding-left: 5px;
}

.rating-grid-item-positions > img {
    width: 55px;
}

.rating-grid-item-ava {
    height: 55px;
}

.rating-grid-item-info {
    text-align: left;
    padding-left: 5px;
    border-left: 1px solid rgba(187, 186, 186, 0.27);
}

.rating-grid-item-info > .nik {
    font-size: 15px;
    text-shadow: 1px 0 1px #000, 0 1px 1px #000, -1px 0 1px #000, 0 -1px 1px #000;
    color: #c0a56d;
}

.rating-grid-item-info > .clan-gerb {
    font-size: 14px;
    text-shadow: 1px 0 1px #000, 0 1px 1px #000, -1px 0 1px #000, 0 -1px 1px #000;
    color: #a86c41;
}

.rating-grid-item-info > .clan-gerb > img {
    width: 22px;
}

.rating-grid-item-right-info {
    font-size: 13px;
    text-shadow: 1px 0 1px #000, 0 1px 1px #000, -1px 0 1px #000, 0 -1px 1px #000;
    color: #967d69;
    background: rgba(0, 0, 0, 0.18);
    border-radius: 5px;
    padding: 5px;
    margin-right: 5px;
}

.rating-title {
    position: relative;
    text-align: center;
    margin-bottom: 5px;
    padding: 10px;
    background: linear-gradient(360deg, rgba(0, 0, 0, 0.22) 35%, rgba(0, 0, 0, 0.47) 100%)
}

.rating-title::before {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 5%;
    width: 90%;
    height: 1px;
    z-index: 11;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff, rgba(255, 255, 255, 0)) 50% 99% / 85% 5% no-repeat, linear-gradient(90deg, rgba(214, 168, 75, .01), rgb(214 168 75 / 73%), rgb(255 217 140 / 88%), rgb(214 168 75 / 67%), rgba(214, 168, 75, .01));
}

.rating-title::after {
    content: '';
    position: absolute;
    top: 0px;
    left: 5%;
    width: 90%;
    height: 1px;
    z-index: 11;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff, rgba(255, 255, 255, 0)) 50% 99% / 85% 5% no-repeat, linear-gradient(90deg, rgba(214, 168, 75, .01), rgb(214 168 75 / 73%), rgb(255 217 140 / 88%), rgb(214 168 75 / 67%), rgba(214, 168, 75, .01));
}

.rating-title-user {
    position: relative;
    text-align: center;
    margin-bottom: 5px;
    padding: 5px;
    background: linear-gradient(360deg, rgba(0, 0, 0, 0.22) 35%, rgba(0, 0, 0, 0.47) 100%)
}

.rating-title-user::before {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 5%;
    width: 90%;
    height: 1px;
    z-index: 11;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff, rgba(255, 255, 255, 0)) 50% 99% / 85% 5% no-repeat, linear-gradient(90deg, rgba(214, 168, 75, .01), rgb(214 168 75 / 73%), rgb(255 217 140 / 88%), rgb(214 168 75 / 67%), rgba(214, 168, 75, .01));
}

.rating-title-user::after {
    content: '';
    position: absolute;
    top: 0px;
    left: 5%;
    width: 90%;
    height: 1px;
    z-index: 11;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff, rgba(255, 255, 255, 0)) 50% 99% / 85% 5% no-repeat, linear-gradient(90deg, rgba(214, 168, 75, .01), rgb(214 168 75 / 73%), rgb(255 217 140 / 88%), rgb(214 168 75 / 67%), rgba(214, 168, 75, .01));
}

.hr {
    border-top: 2px dashed rgba(124, 124, 124, 0.32);
    height: 2px;
    margin: 10px auto;
}

.text-snadow-000 {
    text-shadow: -1px -1px 1px #000, 1px -1px 1px #000, 1px 1px 1px #000, -1px 1px 1px #000;
}


@keyframes opacity0to1 {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.border-part-c {
    position: absolute;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0)
}

.border-part-defaultTB {
    overflow: hidden
}

.border-part-defaultTB .border-part-layerOneWrap {
    position: absolute;
    top: 0;
    left: -25%;
    height: 100%;
    width: 150%
}

.border-part-layerOneInner, .border-part-layerOneWrap, .border-part-layerTwoInner, .border-part-layerTwoWrap {
    position: absolute;
    height: 100%;
    overflow: hidden;
    backface-visibility: hidden
}

.border-part-topleftslot .border-part-layerOneWrap, .border-part-topleftslot .border-part-layerTwoWrap, .border-part-toprightslot .border-part-layerOneWrap, .border-part-toprightslot .border-part-layerTwoWrap {
    top: 0
}

.border-part-bottomleftslot .border-part-layerOneWrap, .border-part-bottomleftslot .border-part-layerTwoWrap, .border-part-bottomrightslot .border-part-layerOneWrap, .border-part-bottomrightslot .border-part-layerTwoWrap {
    bottom: 0
}

.border-part-bottomleftcorner, .border-part-bottomleftslot, .border-part-bottomrightcorner, .border-part-bottomrightslot, .border-part-topleftcorner, .border-part-topleftslot, .border-part-toprightcorner, .border-part-toprightslot {
    overflow: hidden
}

.border-part-bottomleftslot .border-part-layerOneWrap, .border-part-bottomleftslot .border-part-layerTwoWrap, .border-part-bottomrightslot .border-part-layerOneWrap, .border-part-bottomrightslot .border-part-layerTwoWrap, .border-part-topleftslot .border-part-layerOneWrap, .border-part-topleftslot .border-part-layerTwoWrap, .border-part-toprightslot .border-part-layerOneWrap, .border-part-toprightslot .border-part-layerTwoWrap {
    width: 80px
}

.border-part-bottomleftslot .border-part-layerOneWrap, .border-part-bottomrightslot .border-part-layerOneWrap, .border-part-topleftslot .border-part-layerOneWrap, .border-part-toprightslot .border-part-layerOneWrap {
    left: calc(50% - 82px)
}

.border-part-bottomleftslot .border-part-layerTwoWrap, .border-part-bottomrightslot .border-part-layerTwoWrap, .border-part-topleftslot .border-part-layerTwoWrap, .border-part-toprightslot .border-part-layerTwoWrap {
    right: calc(50% - 80px)
}

.border-part-topleftslot .border-part-layerOneWrap {
    transform: translate3d(0, 0, 0) skewX(35deg)
}

.border-part-topleftslot .border-part-layerTwoWrap {
    transform: translate3d(0, 0, 0) skewX(5deg)
}

.border-part-toprightslot .border-part-layerOneWrap {
    transform: translate3d(0, 0, 0) skewX(-5deg)
}

.border-part-bottomleftslot .border-part-layerOneWrap, .border-part-toprightslot .border-part-layerTwoWrap {
    transform: translate3d(0, 0, 0) skewX(-35deg)
}

.border-part-bottomleftslot .border-part-layerTwoWrap {
    transform: translate3d(0, 0, 0) skewX(-5deg)
}

.border-part-bottomrightslot .border-part-layerOneWrap {
    transform: translate3d(0, 0, 0) skewX(5deg)
}

.border-part-bottomrightslot .border-part-layerTwoWrap {
    transform: translate3d(0, 0, 0) skewX(35deg)
}

.border-part-bottomleftcorner .border-part-layerOneWrap, .border-part-bottomleftcorner .border-part-layerTwoWrap, .border-part-bottomrightcorner .border-part-layerOneWrap, .border-part-bottomrightcorner .border-part-layerTwoWrap, .border-part-topleftcorner .border-part-layerOneWrap, .border-part-topleftcorner .border-part-layerTwoWrap, .border-part-toprightcorner .border-part-layerOneWrap, .border-part-toprightcorner .border-part-layerTwoWrap {
    width: 70px
}

.border-part-bottomleftcorner .border-part-layerTwoInner, .border-part-bottomrightcorner .border-part-layerTwoInner, .border-part-topleftcorner .border-part-layerTwoInner, .border-part-toprightcorner .border-part-layerTwoInner {
    position: absolute;
    width: 35%;
    height: 140%
}

.border-part-bottomleftcorner .border-part-layerOneWrap, .border-part-topleftcorner .border-part-layerOneWrap {
    right: -15%
}

.border-part-bottomleftcorner .border-part-layerTwoWrap, .border-part-topleftcorner .border-part-layerTwoWrap {
    left: 0;
    margin-left: 5px
}

.border-part-bottomleftcorner .border-part-layerTwoWrap .border-part-layerTwoInner, .border-part-topleftcorner .border-part-layerTwoWrap .border-part-layerTwoInner {
    left: -35%
}

.border-part-bottomrightcorner .border-part-layerOneWrap, .border-part-toprightcorner .border-part-layerOneWrap {
    left: -15%
}

.border-part-bottomrightcorner .border-part-layerTwoWrap, .border-part-toprightcorner .border-part-layerTwoWrap {
    right: 0;
    margin-right: 5px
}

.border-part-bottomrightcorner .border-part-layerTwoWrap .border-part-layerTwoInner, .border-part-toprightcorner .border-part-layerTwoWrap .border-part-layerTwoInner {
    right: -35%
}

.border-part-bottomrightcorner .border-part-layerOneWrap, .border-part-bottomrightcorner .border-part-layerTwoWrap, .border-part-topleftcorner .border-part-layerOneWrap, .border-part-topleftcorner .border-part-layerTwoWrap {
    transform: translate3d(0, 0, 0) skewX(-60deg)
}

.border-part-bottomrightcorner .border-part-layerTwoWrap .border-part-layerTwoInner, .border-part-topleftcorner .border-part-layerTwoWrap .border-part-layerTwoInner {
    transform: translate3d(0, 0, 0) skewX(55deg) rotate(25deg)
}

.border-part-bottomleftcorner .border-part-layerOneWrap, .border-part-bottomleftcorner .border-part-layerTwoWrap, .border-part-toprightcorner .border-part-layerOneWrap, .border-part-toprightcorner .border-part-layerTwoWrap {
    transform: translate3d(0, 0, 0) skewX(60deg)
}

.border-part-bottomleftcorner .border-part-layerTwoWrap .border-part-layerTwoInner, .border-part-toprightcorner .border-part-layerTwoWrap .border-part-layerTwoInner {
    transform: translate3d(0, 0, 0) skewX(-55deg) rotate(-25deg)
}

.border-part-topleftcorner .border-part-layerOneWrap, .border-part-topleftcorner .border-part-layerTwoWrap, .border-part-toprightcorner .border-part-layerOneWrap, .border-part-toprightcorner .border-part-layerTwoWrap {
    top: 0
}

.border-part-topleftcorner .border-part-layerTwoWrap .border-part-layerTwoInner, .border-part-toprightcorner .border-part-layerTwoWrap .border-part-layerTwoInner {
    top: -65%
}

.border-part-bottomleftcorner .border-part-layerOneWrap, .border-part-bottomleftcorner .border-part-layerTwoWrap, .border-part-bottomrightcorner .border-part-layerOneWrap, .border-part-bottomrightcorner .border-part-layerTwoWrap {
    bottom: 0
}

.border-part-bottomleftcorner .border-part-layerTwoWrap .border-part-layerTwoInner, .border-part-bottomrightcorner .border-part-layerTwoWrap .border-part-layerTwoInner {
    bottom: -65%
}

.border-part-defaultLR, .border-part-defaultLR .border-part-layerOneWrap {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.border-part-leftTail .border-part-layerOneWrap, .border-part-rightTail .border-part-layerOneWrap {
    position: absolute;
    top: calc(50% - 15px);
    width: 60px;
    height: 30px
}

.border-part-leftTail .border-part-layerOneWrap {
    left: 0;
    transform: translate3d(0, 0, 0) skewX(-65deg)
}

.border-part-rightTail .border-part-layerOneWrap {
    right: 0;
    transform: translate3d(0, 0, 0) skewX(65deg)
}

.border-c {
    position: relative;
    flex-shrink: 0;
    pointer-events: none
}

.border-c.border-bottom, .border-c.border-top {
    height: 18px
}

.border-c.border-left, .border-c.border-right {
    width: 12px;
    z-index: -1
}

.custom-block-c {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.custom-block-c.custom-block-balloon {
    width: 100%;
    height: auto;
    top: 50%;
    transform: translate(0, -50%);
}

.custom-block-c.custom-block-inputs {
    position: relative
}

.custom-block-c.custom-block-rewards {
    height: 100%
}

.custom-block-c.custom-block-chain {
    height: 92%
}

.custom-block-main {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    margin: -1px 0
}

.custom-block-main.custom-block-balloon {
    width: 100%;
    height: auto
}

.custom-block-main.custom-block-chain, .custom-block-main.custom-block-rewards {
    height: 100%
}

.custom-block-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    flex: 1;
    z-index: 1;
    width: 86%;
    transform: translateZ(100px);
    margin: 0 -1px
}

.custom-block-content.custom-block-balloon {
    align-items: flex-end;
}

.custom-block-content.custom-block-rewards:not(.custom-block-expanded) {
    flex-direction: row
}

.balloon-c {
    position: absolute;
    padding-bottom: 34%;
    z-index: 1;
    fiter: drop-shadow(-1px 0 #000) drop-shadow(0 -1px 0 #000) drop-shadow(0 1px 0 #000) drop-shadow(1px 0 0 #000);
    opacity: 0
}

.balloon-delayed {
    animation: opacity0to1 .2s linear .2s forwards;
}

.balloon-title {
    padding-top: 5px;
    font-family: t3;
    font-size: 13px !important;
    align-self: center;
    overflow: hidden;
}

.balloon-loreMeter {
    position: absolute;
    top: 20%;
    left: 6%;
    opacity: 0;
    pointer-events: none;
    font-family: Arial, Tahoma, Verdana, sans-serif;
    font-size: 14px !important;
    z-index: 0;
}

.balloon-close {
    top: -8px;
    right: -6px;
}

.cross-c {
    position: absolute;
    top: 0;
    cursor: pointer;
    width: 14px;
    height: 14px;
    z-index: 110;
}


.block_info_non {
    display: none;
}

.block_info_active {
    background-color: lightblue;
}

.info .tch, .notify, .notify2 {
    margin-left: auto;
    margin-right: auto
}

.notify {
    left: 0;
    right: 0;
    position: absolute;
    top: 10px;
    background: #333;
    background: radial-gradient(#29201b, #3b2f26);
    border: 1px solid #555;
    border-radius: 6px;
    padding: 6px;
    z-index: 111111111;
    max-width: 320px;
    font-size: 14px;
    box-shadow: rgba(0, 0, 0, .3) 0 1px 2px 0, rgba(0, 0, 0, .15) 0 2px 6px 2px;
   animation: 4s forwards notify;
    text-align: center;
}

.notify2 {
    left: 0;
    right: 0;
    position: absolute;
    top: 65px;
    background: #333;
    background: radial-gradient(#29201b, #3b2f26);
    border: 1px solid #555;
    border-radius: 6px;
    padding: 6px;
    z-index: 1111111;
    max-width: 300px;
    font-size: 14px;
    box-shadow: rgba(0, 0, 0, .3) 0 1px 2px 0, rgba(0, 0, 0, .15) 0 2px 6px 2px;
    animation: 6s forwards notify2;
    text-align: center;
}

.flinks a, .headline, .notify .progress, .notify2 .progress2,  .s {
    position: relative
}

.notify .progress {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, .3);
    top: 7px;
    left: 0;
    border-radius: 6px;
    animation: 2.6s linear forwards notify_progress
}

.notify2 .progress2 {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, .3);
    top: 7px;
    left: 0;
    border-radius: 6px;
    animation: 4.1s linear forwards notify_progress
}

.notify.error {
    border-color: #792e2e;
    box-shadow: rgba(0, 0, 0, .3) 0 1px 2px 0, rgba(0, 0, 0, .15) 0 2px 6px 2px, inset #5b3434 0 0 20px;
}

.hr.solid, hr {
    border-top: 1px solid #555
}

.notify.remove {
    animation: 1s forwards notify_remove
}

.notify2.remove {
    animation: 0.5s forwards notify_remove
}

@keyframes notify {
    0% {
        opacity: 0;
        top: -150px
    }

    5%, 70% {
        opacity: 1;
        top: 10px
    }

    100% {
        opacity: 0;
        top: -200px
    }
}

@keyframes notifyv2 {
    0% {
        opacity: 0;
        top: -150px
    }

    5%, 70% {
        opacity: 1;
        top: 44px
    }

    100% {
        opacity: 0;
        top: -150px
    }
}

@keyframes notify2 {
    0% {
        opacity: 0;
        top: -150px
    }

    5%, 70% {
        opacity: 1;
        top: 45px
    }

    100% {
        opacity: 0;
        top: -200px
    }
}

@keyframes notify_remove {
    to {
        opacity: 0;
        top: -200px
    }
}

@keyframes notify_progress {
    to {
        left: 50%;
        width: 0%
    }
}

.top-gradient::after {
    content: '';
    position: absolute;
    top: 0px;
    left: 5%;
    width: 90%;
    height: 1px;
    z-index: 11;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff, rgba(255, 255, 255, 0)) 50% 99% / 85% 5% no-repeat, linear-gradient(90deg, rgba(214, 168, 75, .01), rgb(214 168 75 / 73%), rgb(255 217 140 / 88%), rgb(214 168 75 / 67%), rgba(214, 168, 75, .01));
}


.ml2_locations {
    box-shadow: inset 0px 2px 10px 0px rgba(0, 0, 0, 0.368);
    border-radius: 5px;
    margin: 4px auto;
    border: 2px solid rgb(65 65 65);
}

.ml2_locations.img1 {
    background: url(/public/ml2/img-locations/1.png);
    background-size: 100% 100%;
}

.ml2_locations.img2 {
    background: url(/public/ml2/img-locations/2.png);
    background-size: 100% 100%;
}

.ml2_locations.img3 {
    background: url(/public/ml2/img-locations/3.png);
    background-size: 100% 100%;
}

.ml2_locations.img4 {
    background: url(/public/ml2/img-locations/4.png);
    background-size: 100% 100%;
}

.ml2_locations.img5 {
    background: url(/public/ml2/img-locations/5.png);
    background-size: 100% 100%;
}

.ml2_locations.img6 {
    background: url(/public/ml2/img-locations/6.png);
    background-size: 100% 100%;
}

.ml2_locations.img7 {
    background: url(/public/ml2/img-locations/7.png);
    background-size: 100% 100%;
}

.ml2_locations.img8 {
    background: url(/public/ml2/img-locations/8.png);
    background-size: 100% 100%;
}

.ml2_locations.img9 {
    background: url(/public/ml2/img-locations/9.png);
    background-size: 100% 100%;
}

.ml2_locations_open {
    height: 220px;
    margin: 0 0 -50px 0;
    background-repeat: no-repeat;
}

.ml2_locations_open.img1 {
    background: url('/public/ml2/img-locations/1.png');
    background-size: 100% 100%;
}

.ml2_locations_open.img5 {
    background: url('/public/ml2/img-locations/5.png');
    background-size: 100% 100%;
}

.ml2_locations_open.img2 {
    background: url('/public/ml2/img-locations/2.png');
    background-size: 100% 100%;
}

.ml2_locations_open.img3 {
    background: url('/public/ml2/img-locations/3.png');
    background-size: 100% 100%;
}

.ml2_locations_open.img4 {
    background: url('/public/ml2/img-locations/5.png');
    background-size: 100% 100%;
}

.ml2_locations_open.img6 {
    background: url('/public/ml2/img-locations/6.png');
    background-size: 100% 100%;
}

.ml2_locations_open.img7 {
    background: url('/public/ml2/img-locations/7.png');
    background-size: 100% 100%;
}

.ml2_locations_open.img8 {
    background: url('/public/ml2/img-locations/8.png');
    background-size: 100% 100%;
}

.ml2_locations_open.img9 {
    background: url('/public/ml2/img-locations/9.png');
    background-size: 100% 100%;
}


/*tutorial*/
.backLearn {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background: rgba(0, 0, 0, 0.93);
    opacity: 0.9;
    z-index: 66666;
}

.Learn {
    position: absolute;
    top: 9px;
    bottom: 59px;
    /*left: 9px;*/
    /*right: 9px;*/
    z-index: 66666;
}

.LearnText {
    position: absolute;
    bottom: 0px;
    height: 150px;
    left: 20px;
    right: 20px;
    padding: 20px 3px;
    text-align: center;
    background: linear-gradient(#31281e, #16120a);
    z-index: 11;
    border: 1px solid #a87d1800;
    border-radius: 5px;
    box-shadow: 0px 6px 11px 0px #7b655738;
    color: #d0c2a6;
}

.LearnText span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    font-size: 16px;
    font-family: t3;
}

.LearnText text {
    position: absolute;
    bottom: 3px;
    right: 3px;
    font-family: t3;
    font-size: 14px;
    color: #ff0;
    z-index: 8;
    animation: flash_text 3s infinite;
}

.Learn img {
    transform: scale(-1, 1);
    width: 150px;
    height: 150px;
    position: absolute;
    bottom: 278px;
    right: 10px;
    z-index: 10;
}


.tutorial_1 {
    padding: 20px 3px;
    display: flex;
    flex-direction: column;
    row-gap: 13px;
    align-items: center;
    text-align: center;
    background: linear-gradient(#31281e, #16120a);
    z-index: 11;
    border: 1px solid #a87d1800;
    border-radius: 5px;
    box-shadow: 0px 6px 11px 0px #7b655738;
    color: #d0c2a6;
   min-height: 60px;
    width: 350px;
    margin: 0 auto;
    text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000, 1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000;
}

.tutorial_1  img {
    transform: scale(-1, 1);
    width: 150px;
    height: 150px;
    position: absolute;
    bottom: 85px;
    right: 10px;
    z-index: -1;
}

.blood-container {
    position: absolute;
    top: 0;
    left: 10%;
    width: 80%;
    height: 100%;
    pointer-events: none;
}

.blood-drop {
    position: absolute;
    background-color: red;
    border-radius: 50%;
    opacity: 0;
    animation: blood-animation 2s forwards;
}

@keyframes blood-animation {
    0% {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translateY(100px) rotate(720deg);
    }
}

.bleeding-time, .poison-time, .freeze-time, .spell-time, .combustion-time {
    position: absolute;
    top: -30px;
    right: 0%;
    transform: translateX(-50%);
    color: white;
    font-size: 0.9rem;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

.bleeding-time.hidden {
    opacity: 0;
}



.poison-time.hidden {
    opacity: 0;
}

.poison-smoke {
    z-index: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(0,255,0,0.6) 0%, rgba(0,255,0,0) 70%);
    opacity: 0.8;
    animation: smoke-animation 2s infinite;
    pointer-events: none;
}

@keyframes smoke-animation {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.4;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }
}

.freeze-time.hidden {
    opacity: 0;
}

.freeze-particles {
    position: absolute;
    top: 0%;
    left: 20%;
    width: 60%;
    height: 100%;
    pointer-events: none;
}

.particle {
    position: absolute;
    background: radial-gradient(circle, rgb(35 139 173) 0%, rgba(173, 216, 230, 0) 80%);
    border-radius: 50%;
    opacity: 0;
    animation: particle-animation 2s infinite;
}

@keyframes particle-animation {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0.8;
    }
    50% {
        transform: translateY(-20px) scale(1.2);
        opacity: 0.4;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 0.8;
    }
}


.spell-time.hidden {
    opacity: 0;
}

.spell-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    overflow: hidden;
    border-radius: 50%;
}

.magic-ball {
    position: absolute;
    border-radius: 50%;
    animation: float-animation 2s forwards;
    opacity: 0.8;
    filter: blur(2px);
}

@keyframes float-animation {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: translateY(-20px) scale(1.5);
        opacity: 0.7;
    }
    100% {
        transform: translateY(-50px) scale(0);
        opacity: 0;
    }
}

@keyframes spin-animation {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}

.magic-circle {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid rgba(0, 255, 255, 0.97);
    animation: spin-animation 3s linear infinite;
    pointer-events: none;
    opacity: 0.5;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.56));
}


.burn-effect {
    position: absolute;
    top: 0;
    left: 10%;
    width: 80%;
    height: 100%;
    pointer-events: none;
}

.flame {
    position: absolute;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, rgba(255, 165, 0, 0.8), rgba(255, 0, 0, 0));
    border-radius: 50%;
    animation: flicker 1s infinite;
}

@keyframes flicker {
    0%, 100% {
        opacity: 1;
        transform: translateY(0);
    }
    50% {
        opacity: 0.5;
        transform: translateY(-10px);
    }
}


.decay-effect {
    position: absolute;
    top: 0;
    left: 10%;
    width: 80%;
    height: 100%;
    pointer-events: none;
}

.decay {
    position: absolute;
    width: 20px;
    height: 20px;
    background: rgba(139, 69, 19, 0.8);
    border-radius: 50%;
    animation: decay-animation 1.5s forwards;
    opacity: 0.8;
}

@keyframes decay-animation {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.5);
    }
    100% {
        opacity: 0;
        transform: scale(2);
    }
}

@keyframes drip-animation {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(30px);
    }
}


.notification-button {
    position: absolute;
    right: 20px;
    bottom: 80px;
    animation: pulsee 2s infinite;
}

@keyframes pulsee {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    50% { transform: rotate(10deg); }
    75% { transform: rotate(-10deg); }
    100% { transform: rotate(0deg); }
}

.line-hr {
    background: rgba(128, 87, 40, 0.3);
    width: 90%;
    height: 1px;
    margin: 3px auto;
}
.cht {
    background: linear-gradient(to top, #271f1b, #3b3028);
    border: 1px solid black;
    padding: 6px;
    text-align: center;
    color: #b6b59b;
    width: 100%;
    margin: 0;
}
.cht-b {
    background: linear-gradient(to top, #271f1b, #3b3028);
    border: 1px solid black;
    color: #b6b59b;
    padding: 6px;
    text-align: center;
}

.dp {
    position: relative;
    text-align: center;
    height: 70px;
    background: linear-gradient(to right, transparent, #2d220ced, transparent);
}

.dp::before {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 5%;
    width: 90%;
    height: 1px;
    z-index: 11;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff, rgba(255, 255, 255, 0)) 50% 99% / 85% 5% no-repeat, linear-gradient(90deg, rgba(214, 168, 75, .01), #d6a84b80, rgb(255 217 140 / 78%), #d6a84b80, rgba(214, 168, 75, .01));
}

.dp::after {
    content: '';
    position: absolute;
    top: 0px;
    left: 5%;
    width: 90%;
    height: 1px;
    z-index: 11;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff, rgba(255, 255, 255, 0)) 50% 99% / 85% 5% no-repeat, linear-gradient(90deg, rgba(214, 168, 75, .01), #d6a84b80, rgb(255 217 140 / 78%), #d6a84b80, rgba(214, 168, 75, .01));
}


/* Modal styles */
.modalr {
    display: none;
    position: fixed;
    z-index: 1111;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.62);
    text-align: center;
}

.modal-contentr {
    z-index: 111;
    position: relative;
    margin: 150px auto;
    padding: 12px;
    border: 2px solid #000000;
    border-radius: 9px;
    background-color: rgba(73, 60, 47, 0.73);
    width: 300px;
    box-sizing: border-box;
}

.closer {
    position: absolute;
    top: -7px;
    right: -7px;
    color: #b04444;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    border: 2px solid #000000;
    background: #5d2c2c;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
}

.closer:hover,
.closer:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

#resource-description {
    margin: 0;
    text-align: left;
    line-height: 1.5;
}

/* .resource-name {
    text-decoration: underline;
    text-underline-offset: 3px;
} */
.resource-name {

}
.text-decoration {
    text-decoration: underline;
    text-underline-offset: 1px;
}

.even-brd-left, .even-brd-right {
    position: absolute;
    z-index: 10;
    max-height: 74%;
    height: 66%;
    width: 5px;
    top: 15px;
}

.even-brd-left {
    background: #81673c;
    background: url("/public/even/left.png");
    background-repeat: repeat-y;
    background-size: contain;
    left: 0 !important;
}

.even-brd-right {
    background: #81673c;
    background: url("/public/even/right.png");
    background-repeat: repeat-y;
    background-size: contain;
    right: 0 !important;
}

.even-brd-bot, .even-brd-top {
    position: absolute;
    z-index: 10;
    bottom: 0;
    left: 13px;
    max-width: 85%;
    width: 100%;
    height: 5px;
    margin: 0 auto;
}

.even-brd-bot {
    background: #81673c;
    background: url("/public/even/bottom.png");
    background-repeat: repeat-x;
    background-size: contain;
    bottom: 0 !important;
}

.even-brd-top {
    background: #81673c;
    background: url("/public/even/top.png");
    background-repeat: repeat-x;
    background-size: contain;
    top: 0 !important;
}

.even_content {
    height: 100%;
    position: relative;
    color: #ccc;
}

.even-content-1 {
    text-align: left;
    height: 85px;
    width: 100%;
    background-position: top left, top right, bottom left, bottom right, center left -5px, top 8px left 8px;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-size: 15px 15px, 15px 15px, 15px 15px, 15px 15px, 100% 93%, 15% 38%;
}

.even-content-1-log {
    background-image: url(/public/even/top-left.png), url(/public/even/top-right.png), url(/public/even/bottom-left.png), url(/public/even/bottom-right.png), url(/public/even/b1.png), url(/public/even/decor-top-left.png);
}

.even-content-2-log {
    background-image: url(/public/even/top-left.png), url(/public/even/top-right.png), url(/public/even/bottom-left.png), url(/public/even/bottom-right.png), url(/public/even/b2.png), url(/public/even/decor-top-left.png);
}

.even-content-3-log {
    background-image: url(/public/even/top-left.png), url(/public/even/top-right.png), url(/public/even/bottom-left.png), url(/public/even/bottom-right.png), url(/public/even/b3.png), url(/public/even/decor-top-left.png);
}

.even-content-4-log {
    background-image: url(/public/even/top-left.png), url(/public/even/top-right.png), url(/public/even/bottom-left.png), url(/public/even/bottom-right.png), url(/public/even/b4.png), url(/public/even/decor-top-left.png);
}

.even-content-5-log {
    background-image: url(/public/even/top-left.png), url(/public/even/top-right.png), url(/public/even/bottom-left.png), url(/public/even/bottom-right.png), url(/public/even/b5.png), url(/public/even/decor-top-left.png);
}

.even-content-6-log {
    background-image: url(/public/even/top-left.png), url(/public/even/top-right.png), url(/public/even/bottom-left.png), url(/public/even/bottom-right.png), url(/public/even/b6.png), url(/public/even/decor-top-left.png);
}

.even-content-7-log {
    background-image: url(/public/even/top-left.png), url(/public/even/top-right.png), url(/public/even/bottom-left.png), url(/public/even/bottom-right.png), url(/public/even/contents_type1_6.png), url(/public/even/decor-top-left.png);
}

.even-content-1::before {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 5%;
    width: 90%;
    height: 1px;
    z-index: 11;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff, rgba(255, 255, 255, 0)) 50% 99% / 85% 5% no-repeat, linear-gradient(90deg, rgba(214, 168, 75, .01), rgb(214 168 75 / 73%), rgb(255 217 140 / 88%), rgb(214 168 75 / 67%), rgba(214, 168, 75, .01));
}

.even-title {
    filter: drop-shadow(0 0 3px rgb(0, 0, 0));
    font-size: 17px;
    color: rgb(223, 198, 135);
    text-shadow: 1px 1px 0 rgb(0 0 0 / 60%), 1px -1px 0 rgb(0 0 0 / 60%), -1px -1px 0 rgb(0 0 0 / 60%), -1px 1px 0 rgb(0 0 0 / 60%) !important;
}

.even-title-dis {
    filter: drop-shadow(0 0 3px rgb(0, 0, 0));
    padding-top: 22px;
    font-size: 14px;
    color: rgba(147, 255, 48, 0.95);
}

.box {
    max-width: 420px;
    z-index: 30000;
    background-image: linear-gradient(to right, #1e1713, #292019, #1e1713);
}

.vkmblock div {
    z-index: 30000;
}

.footer_b {
    width: 100%;
    padding-top: 3px;
    max-width: 420px;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

.footer_button {
    text-align: center;
    text-decoration: none;
}

.footer_button_image {
    position: relative;
    vertical-align: middle;
    text-align: center;
    height: 30px;
}

.footer_button_image > img {
    width: 40px; height: 40px;
}

.footer_button_content {
    position: relative;
    font-size:13px;
    white-space: nowrap;
    overflow: hidden;
    color: #a3813a;
    font-family: 't3';
    margin-top: 6px;
    margin-bottom: 2px;
}

.box-border {
    position: relative;
    z-index: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff, rgba(255, 255, 255, 0)) 50% 99% / 85% 5% no-repeat, linear-gradient(90deg, rgba(214, 168, 75, .01), rgb(214 168 75 / 55%), rgb(255 217 140 / 50%), rgb(214 168 75 / 55%), rgba(214, 168, 75, .01));
}

.even-brd-left, .even-brd-right {
    position: absolute;
    z-index: 10;
    max-height: 74%;
    height: 66%;
    width: 5px;
    top: 15px;
}

.even-brd-left {
    background: #81673c;
    background: url("/public/even/left.png");
    background-repeat: repeat-y;
    background-size: contain;
    left: 0 !important;
}

.even-brd-right {
    background: #81673c;
    background: url("/public/even/right.png");
    background-repeat: repeat-y;
    background-size: contain;
    right: 0 !important;
}

.even-brd-bot, .even-brd-top {
    position: absolute;
    z-index: 10;
    bottom: 0;
    left: 13px;
    max-width: 85%;
    width: 100%;
    height: 5px;
    margin: 0 auto;
}

.even-brd-bot {
    background: #81673c;
    background: url("/public/even/bottom.png");
    background-repeat: repeat-x;
    background-size: contain;
    bottom: 0 !important;
}

.even-brd-top {
    background: #81673c;
    background: url("/public/even/top.png");
    background-repeat: repeat-x;
    background-size: contain;
    top: 0 !important;
}

.even_content {
    height: 100%;
    position: relative;
    color: #ccc;
}

.even-content-1 {
    text-align: left;
    height: 85px;
    width: 100%;
    background-position: top left, top right, bottom left, bottom right, center left -5px, top 8px left 8px;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-size: 15px 15px, 15px 15px, 15px 15px, 15px 15px, 100% 93%, 15% 38%;
}

.even-content-1-log {
    background-image: url(/public/even/top-left.png), url(/public/even/top-right.png), url(/public/even/bottom-left.png), url(/public/even/bottom-right.png), url(/public/even/contents_type1_5.png), url(/public/even/decor-top-left.png);
}

.even-content-2-log {
    background-image: url(/public/even/top-left.png), url(/public/even/top-right.png), url(/public/even/bottom-left.png), url(/public/even/bottom-right.png), url(/public/even/contents_type1_4.png), url(/public/even/decor-top-left.png);
}

.even-content-3-log {
    background-image: url(/public/even/top-left.png), url(/public/even/top-right.png), url(/public/even/bottom-left.png), url(/public/even/bottom-right.png), url(/public/even/contents_type1_2.png), url(/public/even/decor-top-left.png);
}

.even-content-4-log {
    background-image: url(/public/even/top-left.png), url(/public/even/top-right.png), url(/public/even/bottom-left.png), url(/public/even/bottom-right.png), url(/public/even/b1.png), url(/public/even/decor-top-left.png);
}

.even-content-5-log {
    background-image: url(/public/even/top-left.png), url(/public/even/top-right.png), url(/public/even/bottom-left.png), url(/public/even/bottom-right.png), url(/public/even/b2.png), url(/public/even/decor-top-left.png);
}

.even-content-6-log {
    background-image: url(/public/even/top-left.png), url(/public/even/top-right.png), url(/public/even/bottom-left.png), url(/public/even/bottom-right.png), url(/public/even/b4.png), url(/public/even/decor-top-left.png);
}

.even-content-7-log {
    background-image: url(/public/even/top-left.png), url(/public/even/top-right.png), url(/public/even/bottom-left.png), url(/public/even/bottom-right.png), url(/public/even/c.png), url(/public/even/decor-top-left.png);
}

.even-content-8-log {
    background-image: url(/public/even/top-left.png), url(/public/even/top-right.png), url(/public/even/bottom-left.png), url(/public/even/bottom-right.png), url(/public/even/l1.png), url(/public/even/decor-top-left.png);
}

.even-content-9-log {
    background-image: url(/public/even/top-left.png), url(/public/even/top-right.png), url(/public/even/bottom-left.png), url(/public/even/bottom-right.png), url(/public/even/ml1.png), url(/public/even/decor-top-left.png);
}

.even-content-no {
    background-image: url(/public/even/top-left.png), url(/public/even/top-right.png), url(/public/even/bottom-left.png), url(/public/even/bottom-right.png);
}

.even-content-1::before {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 5%;
    width: 90%;
    height: 1px;
    z-index: 11;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff, rgba(255, 255, 255, 0)) 50% 99% / 85% 5% no-repeat, linear-gradient(90deg, rgba(214, 168, 75, .01), rgb(214 168 75 / 73%), rgb(255 217 140 / 88%), rgb(214 168 75 / 67%), rgba(214, 168, 75, .01));
}

.even-title {
    font-family: "beermoney";
    font-size: 17px;
    color: rgb(187, 165, 111);
    text-shadow: 1px 1px 0 rgb(0 0 0 / 60%), 1px -1px 0 rgb(0 0 0 / 60%), -1px -1px 0 rgb(0 0 0 / 60%), -1px 1px 0 rgb(0 0 0 / 60%) !important;
}

.even-title-dis {
    padding-top: 5px;
    font-family: 't3';
    font-size: 14px;
    color: rgb(244, 224, 197);
}


.progress-bar {
    height: 1px;
    position: absolute;
    border-radius: 0px;
    border: none;
    opacity: 0.5;
    top: 27px;
    left: 0;
}

.slide-progress-bar {
    overflow: visible;
    height: 20px;
    margin: 0px -6px;
    width: 379px;
    border-radius: 0px;
    border: 1px solid rgba(103, 103, 103, 0.482);
    border-left: none;
    border-right: none;
    background-color: rgba(36, 36, 36, 0.958);
    position: relative;
    transition: linear;
    opacity: 0.5;
}

.btn-combat.btn-skills, .btn-combat.btn-skills.btn-lock:active {
    position: relative;
    padding: 5px 0;
    text-align: center;
}

.btn-combat.btn-lock, .btn-combat.btn-skills.btn-lock:active {
    border: 2px solid #011618;
    background: url(https://bratki.mobi/images/btn-a-inactive.png) repeat-x 0 0 #2c2c2c;
    border: 0;
    color: #515151;
}

.btn-combat{display:block;position:relative;margin:0 1px;padding:5px 0 1px 4px;min-height:22px;text-decoration:none;font-size:12px;color:#bbb;background:#3d3b2e;border-radius:3px;transition:all 80ms ease-out;}


.disabled {
    pointer-events: none; /* Отключить кликабельность */
    opacity: 0.7; /* Сделать кнопку полупрозрачной */
}

.btl_btn_hdr {
    box-shadow: 0px 0px 3px 3px #00000094;
    background: url('public/btn/btn-top.png') 0 0 repeat-x rgba(0, 0, 0, 0.65);
}

.shine {
    content: '';
    opacity: 0.30;
    filter: alpha(opacity=30);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(180deg, #ff1313 0, #920404 100%);
    transform: translateZ(0);
}

.b_n {
    position: relative;
    padding: 5px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-evenly;
    align-items: center;
}

.b_ns {
    display: grid;
    position: relative;
}

@keyframes skill-pulse {
    0% {
        box-shadow: 0 0 5px rgba(255, 0, 0, 0.5), 0 0 30px rgba(255, 0, 0, 0.3);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 15px rgba(255, 0, 0, 0.8), 0 0 45px rgba(255, 0, 0, 0.6);
        transform: scale(1.1);
    }
    100% {
        box-shadow: 0 0 5px rgba(255, 0, 0, 0.5), 0 0 30px rgba(255, 0, 0, 0.3);
        transform: scale(1);
    }
}

@keyframes pup-bl--health-result {
    100% {opacity: 1;}
}

@keyframes skill-jump {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px); /* Высота прыжка */
    }
}

.skill-ready {
    animation: skill-pulse 1.5s infinite ease-in-out, skill-jump 1s infinite;
    transition: transform 0.3s;
    border-radius: 50%;
}

.pve-area {
    position: relative;
    width: 100%;
    height: 510px;
    margin-top: 50px;
}

.pve-area--link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 55%;
    text-decoration: none;
    user-select: none;
    z-index: 1000;
}

.pve-area--bl-img {
    position: absolute;
    top: 263px;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 250px;
}

@keyframes grow {
    from {
        height: 20px; /* Начальная высота */
    }
    to {
        height: 250px; /* Конечная высота */
    }
}

.pve-area--bl-img div.smallest-pulse {
    animation: pulse 2s linear infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.03);
    }
}

.pve-area--bl-img img.monster-image, .pve-area--bl-img div {
    height: 100%;
}

.battle-health-block {
    box-shadow: 0px 2px 2px 1px #0000009c;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    height: 30px;
    top: 21px;
    width: 95%;
    min-width: 150px;
    overflow: hidden;
    border-radius: 6px;
    border: 2px solid #000000;
    background: #3a3a3aa3;
}

.battle-health-scale {
    position: absolute;
    top: 0;
    height: 100%;
}

.battle-health-scale.scale-red {
    background: #af4761;
    z-index: 5;
    animation: burn-red 1.3s ease forwards;
}

.battle-health-scale.scale-green {
    background: #833131;
    z-index: 10;
    left: 0;
}

@keyframes burn-red {
    100% {
        transform: translateX(-100%);
    }
}

.wrapper-scale-burn-flame {
    position: absolute;
    top: 0;
    right: 1px;
    width: 1%;
    height: 100%;
    box-shadow: 0 0 2px 4px #833131;
}

.scale-burn-flame {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-image: radial-gradient(#833131 20%, rgba(255, 80, 0, 0) 70%);
    opacity: 0;
    animation: burn-flame 1.5s linear infinite;
}

@keyframes burn-flame {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    100% {
        transform: translateX(20px) scale(0);
        opacity: .8;
    }
}

.health-text {
    position: absolute;
    left: 5px;
    font-size: 16px;
    line-height: 29px;
    z-index: 20;
}

.health-text b {
    color: #ffe6ba;
}

.health-text img {
    width: 25px
}

.pup {
    width: 96%;
    margin: auto;
}

.flex-d {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.flex-fd-r {
    -webkit-flex-direction: row;
    flex-direction: row;
}

.flex-jc-sb {
    -ms-flex-pack: space-between;
    justify-content: space-between;
}

.flex-wr-w {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.pup-bl.pup-bl-big {
    width: 100%;
}

.pup-bl {
    width: 49%;
    margin-bottom: 5px;
}

.pup-bl-big .pup-bl--image {
    width: 45px;
    height: 45px;
    position: relative;
}

.pup-bl--image .pup-bl--image-main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-height: 100%;
    z-index: 9;
}

.pup-bl-big .pup-bl--border {
    width: 43px;
    height: 43px;
}

.pup-bl--border {
    position: absolute;
    top: 1px;
    left: -1px;
    border: 1px solid rgba(181, 181, 181, 0.64);
    z-index: 10;
    box-shadow: 1px 2px 2px 1px #ffb00021;
}

.pup-bl-big .pup-bl--desc {
    width: calc(100% - 45px);
    padding-left: 10px;
}

.flex-fd-c {
    -webkit-flex-direction: column;
    flex-direction: column;
}

.pup-bl-big .pup-bl--name {
    font-size: 15px;
    font-weight: bold;
}

.pup-bl--name {
    word-wrap: initial;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.flex-ai-c {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.border-radius3 {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
}

.pup-bl--health {
    position: relative;
    width: 100%;
    height: 16px;
    margin-top: 5px;
    /*padding-left: 4px;*/
     box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.29);
    background: #3a363a8a;
    overflow: hidden;
    border: 1px solid rgba(145, 145, 145, 0.46);
}

.pup-bl-big .pup-bl--health-text {
    font-size: 12px;
}

.pup-bl--health-text {
    position: relative;
    color: #ffe6ba;
    font-size: 10px;
    font-weight: 400;
    z-index: 10;
    padding-top: 1px;
}

.pup-bl--health-text img {
    width: 17px;
}

.pup-bl--health-result {
    animation: pup-bl--health-result .5s linear forwards;
    opacity: .1;
    z-index: 11111111;
    font-weight: 500;
    margin-left: 5px;
}

.pup-bl--health-result-plus {
    position: absolute;
    right: 10px;
    animation: pup-bl--health-result .7s linear forwards;
    opacity: .1;
    z-index: 11111111;
    font-weight: 500;
    margin-left: 5px;
    color: #1aff1e;
}

.pup-bl--mana-result-plus {
    position: absolute;
    right: 10px;
    animation: pup-bl--health-result .7s linear forwards;
    opacity: .1;
    z-index: 11111111;
    font-weight: 500;
    margin-left: 5px;
    color: #bae4df;
}

.darkest-red {
    color: #ffd91a;
}

.pup-bl--health-line {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #833131;
    z-index: 1;
}

.pup-bl--damage-line {
    position: absolute;
    top: 0;
    height: 100%;
    background: rgba(205, 0, 0, 0.74);
    -webkit-animation-name: pup-bl--health-damage;
    -moz-animation-name: pup-bl--health-damage;
    -o-animation-name: pup-bl--health-damage;
    animation-name: pup-bl--health-damage;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    z-index: 2;
}

@keyframes pup-bl--health-damage {
    100% {
        width: 0;
    }
}

.attack-big-scratch {
    position: absolute;
    display: block;
    overflow: hidden;
    z-index: 100;
}

.attack-big-scratch img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    opacity: 0;
}

.attack-big-scratch.attack-big-scratch-1 {
    width: 250px;
    height: 250px;
}

.attack-big-scratch.attack-big-scratch-1 img {
    animation: attack-big-scratch-1 .4s steps(8);
}

@keyframes attack-big-scratch-1 {
    0% {
        opacity: 1;
    }
    100% {
        left: -2000px;
    }
}

.pve-area--result.result-krit {
    font-size: 25px;
    color: #ff0a00;
}

.pve-area--result {
    position: absolute;
    transform: translate(-50%, 0);
    animation: anim-attack-result 1.6s linear;
    opacity: 0;
    padding: 0 17px;
    font-weight: 600;
    font-size: 25px;
    text-shadow: 1px 1px 6px #000;
    z-index: 130;
}

.pve-title-damage {
    font-size: 13px;
    font-family: t4;
    position: absolute;
    background: #522a0bcf;
    top: 64px;
    padding: 4px 10px;
    border: 2px solid #000000;
    border-radius: 16px;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0px 2px 2px 1px #000000bd;
    color: #e7e7e7;
}

.pve-area--result-text {
    position: relative;
    z-index: 2;
}

@-webkit-keyframes anim-attack-result {
    0% {
        opacity: 1;
        transform: translate(-50%, 0);
    }
    59% {
        opacity: 1;
        transform: translate(-50%, -30px);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50px);
    }
}

@keyframes anim-attack-result {
    0% {
        opacity: 1;
        transform: translate(-50%, 0);
    }
    59% {
        opacity: 1;
        transform: translate(-50%, -30px);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50px);
    }
}

.p-user-pan {
    background: rgba(30, 21, 16, 0.22);
    border-top: 1px solid rgba(246, 201, 159, 0.29);
    border-bottom: 1px solid rgba(246, 201, 159, 0.24);
    box-shadow: 0px 3px 5px 1px rgba(0,0,0,0.71);
}

.attack-effect {
    -webkit-animation-name: attack-effect;
    -moz-animation-name: attack-effect;
    -o-animation-name: attack-effect;
    animation-name: attack-effect;
    -webkit-animation-duration: .4s;
    -moz-animation-duration: .4s;
    -o-animation-duration: .4s;
    animation-duration: .4s;
}

@keyframes attack-effect {
    10%{transform: rotate(2deg) scale(0.97);-webkit-transform: rotate(2deg) scale(0.97);}
    28%{transform: rotate(-2deg) scale(0.97);-webkit-transform: rotate(-2deg) scale(0.97);}
    46%{transform: rotate(2deg) scale(0.97);-webkit-transform: rotate(2deg) scale(0.97);}
    64%{transform: rotate(-2deg) scale(0.97);-webkit-transform: rotate(-2deg) scale(0.97);}
    82%{transform: rotate(1deg) scale(0.97);-webkit-transform: rotate(1deg) scale(0.97);}
    100%{transform: rotate(0deg);-webkit-transform: rotate(0deg);}
}

.lake-image {
    background-size: cover;
    width: 100%;
    height: 800px;
}

.instruction {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;
    color: #c8c8c8;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 5px 5px;
    border-radius: 8px;
    width: 80%;
    text-align: center;
}

.float {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 29px;
    height: 46px;
    background-image: url("public/fishing/p.png");
    background-size: 100%;
    border-radius: 50%;
    opacity: 1;
    animation: throwFloat 3s linear infinite;
    transition: opacity 0.2s;
}

.up {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 50px;
    height: 50px;
    background-image: url("public/icons/tutorial_img.png");
    background-size: 100% 100%;
    border-radius: 50%;
    opacity: 1;
    animation: up 0.8s linear infinite;

}

.float.show {
    opacity: 1;
    animation: throwFloat 0.5s ease forwards, floatMovement 2s ease-in-out infinite alternate;
}

@keyframes throwFloat {
    0% {
        transform: translate(-50%, -50%);
    }
    50% {
        transform: translate(-50%, -70%);
    }
    100% {
        transform: translate(-50%, -50%);
    }
}

@keyframes up {
    0% {
        transform: translate(-50%, -50%);
    }
    50% {
        transform: translate(-45%, -65%);
    }
    100% {
        transform: translate(-50%, -50%);
    }
}

.cooldown-bar {
    position: relative;
    width: 86%;
    height: 30px;
    background-color: #56818752;
    border-radius: 5px;
    overflow: hidden;
    margin: -255px auto;
}

@keyframes swim {
    0% {
        left: 100%;
    }
    100% {
        left: 0%;
    }
}

.pets_block {
    margin: 6px;
    width: 61px;
    height: 85px;
    position: relative;
    padding: 0px;
    z-index: 0;
    overflow: hidden;
    border-radius: 5px;
    border: 1px solid #000000;
}

.pets_block_elements {
    position: absolute;
    top: 1px;
    left: 1px;
}

.pets_block_elements > img {
    width:16px;
}

.pets_block_spec {
    position: absolute;
    bottom: 0px;
    right: 2px;
}

.pets_block_spec > img {
    width: 13px;
}

.pets_block_rank {
    position: absolute;
    bottom: 14px;
    left: 1px;
}

.pets_block_rank > img {
    width: 11px;
}

.pets_block_lvl {
    position: absolute;
    bottom: 0px;
    left: 1px;
    font-size: 10px;
    color: #8e8e8e;
}

._pets0 {
    background: url(/public/pets/ramka/1.png) 0 0 / 100% 100% no-repeat;
}

._pets1 {
    background: url(/public/pets/ramka/1.png) 0 0 / 100% 100% no-repeat,
    url(/public/pets/pets/1.png) 40% / cover no-repeat;
}

._pets2 {
    background: url(/public/pets/ramka/1.png) 0 0 / 100% 100% no-repeat,
    url(/public/pets/pets/2.png) 0 0 / 100% no-repeat,
    url(/public/pets/r.png) -3px -3px / 114% no-repeat;
}

._pets3 {
    background: url(/public/pets/ramka/1.png) 0 0 / 100% 100% no-repeat,
    url(/public/pets/pets/3.png) 0 0 / 100% no-repeat,
    url(/public/pets/r.png) -3px -3px / 114% no-repeat;
}

._pets4 {
    background: url(/public/pets/ramka/1.png) 0 0 / 100% 100% no-repeat,
    url(/public/pets/pets/4.png) 0 0 / 100% no-repeat,
    url(/public/pets/r.png) -3px -3px / 114% no-repeat;
}

._pets5 {
    background: url(/public/pets/ramka/1.png) 0 0 / 100% 100% no-repeat,
    url(/public/pets/pets/5.png) 0 0 / 100% no-repeat,
    url(/public/pets/r.png) -3px -3px / 114% no-repeat;
}

._pets6 {
    background: url(/public/pets/ramka/1.png) 0 0 / 100% 100% no-repeat,
    url(/public/pets/pets/6.png) 0 0 / 100% no-repeat,
    url(/public/pets/r.png) -3px -3px / 114% no-repeat;
}

._pets7 {
    background: url(/public/pets/ramka/1.png) 0 0 / 100% 100% no-repeat,
    url(/public/pets/pets/7.png) 0 0 / 100% no-repeat,
    url(/public/pets/r.png) -3px -3px / 114% no-repeat;
}

._pets8 {
    background: url(/public/pets/ramka/1.png) 0 0 / 100% 100% no-repeat,
    url(/public/pets/pets/8.png) 0 0 / 100% no-repeat,
    url(/public/pets/r.png) -3px -3px / 114% no-repeat;
}

._pets9 {
    background: url(/public/pets/ramka/1.png) 0 0 / 100% 100% no-repeat,
    url(/public/pets/pets/9.png) 0 0 / 100% no-repeat,
    url(/public/pets/r.png) -3px -3px / 114% no-repeat;
}

._pets10 {
    background: url(/public/pets/ramka/2.png) 0 0 / 100% 100% no-repeat,
    url(/public/pets/pets/10.png) 0 0 / 100% no-repeat,
    url(/public/pets/r.png) -3px -3px / 114% no-repeat;
}

._pets11 {
    background: url(/public/pets/ramka/2.png) 0 0 / 100% 100% no-repeat,
    url(/public/pets/pets/11.png) 0 0 / 100% no-repeat,
    url(/public/pets/r.png) -3px -3px / 114% no-repeat;
}

._pets12 {
    background: url(/public/pets/ramka/2.png) 0 0 / 100% 100% no-repeat,
    url(/public/pets/pets/12.png) 0 0 / 100% no-repeat,
    url(/public/pets/r.png) -3px -3px / 114% no-repeat;
}

._pets13 {
    background: url(/public/pets/ramka/2.png) 0 0 / 100% 100% no-repeat,
    url(/public/pets/pets/13.png) 0 0 / 100% no-repeat,
    url(/public/pets/r.png) -3px -3px / 114% no-repeat;
}

._pets14 {
    background: url(/public/pets/ramka/2.png) 0 0 / 100% 100% no-repeat,
    url(/public/pets/pets/14.png) 0 0 / 100% no-repeat,
    url(/public/pets/r.png) -3px -3px / 114% no-repeat;
}

._pets15 {
    background: url(/public/pets/ramka/2.png) 0 0 / 100% 100% no-repeat,
    url(/public/pets/pets/15.png) 0 0 / 100% no-repeat,
    url(/public/pets/r.png) -3px -3px / 114% no-repeat;
}

._pets16 {
    background: url(/public/pets/ramka/3.png) 0 0 / 100% 100% no-repeat,
    url(/public/pets/pets/16.png) 0 0 / 100% no-repeat,
    url(/public/pets/r.png) -3px -3px / 114% no-repeat;
}

._pets17 {
    background: url(/public/pets/ramka/3.png) 0 0 / 100% 100% no-repeat,
    url(/public/pets/pets/17.png) 0 0 / 100% no-repeat,
    url(/public/pets/r.png) -3px -3px / 114% no-repeat;
}

._pets18 {
    background: url(/public/pets/ramka/3.png) 0 0 / 100% 100% no-repeat,
    url(/public/pets/pets/18.png) 0 0 / 100% no-repeat,
    url(/public/pets/r.png) -3px -3px / 114% no-repeat;
}



@keyframes complete_lime_a {
    0%, 100% {
        box-shadow: 0 0 2px 0px rgba(72, 255, 0, 0.6);
    }
    50% {
        box-shadow: 0 0 5px 1px rgba(72, 255, 0, 0.6);
    }
}

.complete_lime {
    animation: complete_lime_a 1s infinite, shake_up 1s ease 2s infinite;
    animation-timing-function: ease;
    animation-delay: 2s;
}

@keyframes pulse_rare_1 {
    0%, 100% {
        box-shadow: 0 0 2px 0px rgba(0, 140, 255, 0.6);
    }
    50% {
        box-shadow: 0 0 5px 1px rgba(0, 157, 255, 0.8);
    }
}

@keyframes pulse_rare_2 {
    0%, 100% {
        box-shadow: 0 0 2px 0px rgba(161, 0, 255, 0.6);
    }
    50% {
        box-shadow: 0 0 5px 1px rgba(200, 0, 255, 0.8);
    }
}

@keyframes pulse_rare_3 {
    0%, 100% {
        box-shadow: 0 0 2px 0px rgba(255, 106, 0, 0.6);
    }
    50% {
        box-shadow: 0 0 5px 1px rgba(255, 174, 0, 0.8);
    }
}

.glow-box_1 {
    animation: pulse_rare_1 1.5s infinite;
}

.glow-box_2 {
    animation: pulse_rare_2 1.5s infinite;
}

.glow-box_3 {
    animation: pulse_rare_3 1.5s infinite;
}

.pets-nav {
    border-top: 1px solid rgba(163, 140, 113, 0.83);
    border-bottom: 1px solid rgba(5, 5, 5, 0.76);
    background: rgba(158, 142, 106, 0.15);
    padding: 2px;
    display: flex;
    align-content: center;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

.pets-nav-button_active {
    display: flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    background: url(/public/pets/spec/tap.png) 0 0 / 100% no-repeat;
}

.pets-nav-button_active > img {
    width: 30px;
    height: 30px;
}

.pets-nav-button {
    display: flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
}

.pets-nav-button > img {
    width: 25px;
    height: 25px;
}

.pet-list {
    overflow-y: auto; /* Вертикальная прокрутка */
    overflow-x: hidden; /* Убираем горизонтальную прокрутку */
    height: 400px; /* Ограничиваем высоту */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
    scrollbar-width: thin; /* Для Firefox: тонкая полоса */
    scrollbar-color: #a18549 #916e55; /* Цвет полосы (для Firefox) */
}


.confirmation-popup {
    width: 60%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #352c1e;
    border: 2px solid #000;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 6px 7px 4px 3px rgb(0 0 0 / 78%);
    z-index: 1000;
    display: none; /* Скрыто по умолчанию */
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.confirmation-popup.visible {
    display: flex; /* Показывается при наличии класса visible */
}

.popup-content p {
    font-size: 16px;
    margin-bottom: 15px;
}

.popup-btn {
    width: 70px;
    background-color: #cf633a;
    border: none;
    color: #fff;
    padding: 5px 15px;
    border-radius: 5px;
    cursor: pointer;
    margin: 5px;
    font-size: 14px;
    transition: background-color 0.3s;
}

.popup-btn:hover {
    background-color: #b35430;
}

/* Основной стиль стрелок */
.arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 20px solid #5fc917; /* Цвет стрелки */
    opacity: 0; /* Изначально невидимая */
    filter: drop-shadow(0 0 5px #040404); /* Эффект свечения */
    animation: moveUp 2s ease-out forwards;
}

/* Левая стрелка */
.arrow-left {
    bottom: 66px;
    left: 66px;
    transform: translateY(50px) rotate(-90deg); /* Начальная позиция и поворот */
}

/* Правая стрелка */
.arrow-right {
    bottom: 66px;
    right: 66px;
    transform: translateY(50px) rotate(90deg); /* Начальная позиция и поворот */
}

/* Анимация */
@keyframes moveUp {
    0% {
        opacity: 0; /* Прозрачная в начале */
        transform: translateY(50px); /* Стартовая позиция ниже */
    }
    30% {
        opacity: 1; /* Постепенно становится видимой */
    }
    100% {
        opacity: 0; /* Исчезает в конце */
        transform: translateY(-20px); /* Поднимается вверх */
    }
}

.modal-pa {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1001;
    width: 300px;
    border-radius: 8px;

    border: 2px solid rgba(117, 94, 58, 0.36);
    background: rgba(44, 37, 26, 0.71);
}

.modal-content-pa {
    position: relative;
}

.modal-close-pa {
    position: absolute;
    margin-top: 3px;
    color: #9d8454;
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    right: -15px;
    top: -15px;
    padding: 3px;
    border-radius: 100%;
    width: 20px;
    height: 20px;
    line-height: 20px;
    cursor: pointer;
}

.overlay-pa {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.hidden {
    display: none;
}

.ds:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0);
    width: 240%;
    height: 240%;
    background: url('/public/reward-light.png') center center / 100% no-repeat;
    animation: ff 24s linear infinite;
}

@keyframes ff  {
    0% {
        transform: translate(-50%, -50%) rotate(0);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes fallAndGlow {
    0% {
        transform: translateY(-50px) scale(2);
        opacity: 0;
        filter: blur(8px);
    }
    50% {
        opacity: 1;
        filter: blur(0px);
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
        filter: drop-shadow(0 0 20px rgba(255, 69, 0, 0.7));
    }
}

.battle-result {
    display: inline-block;
    animation: fallAndGlow 0.2s ease-out forwards;
}

.progress-container {
    position: relative;
    margin: 0 auto;
    padding: 5px;
    width: 360px;
}

.progress-bar {
    position: absolute;
    height: 5px;
    width: 73%;
    background-color: #555;
    border-radius: 10px;
    overflow: hidden;
    top: 63px;
    left: 61px;
}

.progress-bar-fill {
    height: 100%;
    background-color: #f39c12;
    z-index: 11;
    transition: width 0.3s ease;
}

.progress-steps {
    display: flex;
    position: absolute;
    top: 23px;
    gap: 11px;
    left: 58px;
    width: 86%;
    justify-content: center;
}

.step {
    position: relative;
    text-align: center;
}

.step span {
    display: block;
    font-size: 13px;
    margin-top: 17px;
}

.step-icon {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border: 2px groove #856c4b;
}

.step-icon img {
    width: 30px;
    height: 30px;
    border-radius: 5px;
}

.step-icon.completed {
    opacity: 0.6;
}

.s_tt {
    position: absolute;
    width: 55px;
    top: 26px;
    left: 4px;
    height: 18px;
    background: rgba(9, 9, 9, 0.4);
    border-radius: 10px;
    display: flex;
    align-items: center;
    font-size: 12px;
    justify-content: center;
    color: #c6a565;
}

.s_t {
    position: absolute;
    width: 55px;
    top: 56px;
    left: 4px;
    height: 18px;
    background: #483729;
    border-radius: 10px;
    border: 1px solid rgba(97, 73, 21, 0.53);
    display: flex;
    align-items: center;
    font-size: 12px;
    justify-content: center;
}

.chapter.c1 {
    background: url(/public/c/fon/1.png) no-repeat center, #050505;
    background-size: cover;
}

.chapter.c2 {
    background: url('/public/c/fon/2.png') no-repeat center, #050505;
    background-size: cover;
}

.chapter.c3 {
    background: url('/public/c/fon/3.png') no-repeat center, #050505;
    background-size: cover;
}

.chapter.c4 {
    background: url('/public/c/fon/4.png') no-repeat center, #050505;
    background-size: cover;
}
.chapter.c5 {
    background: url('/public/c/fon/5.png') no-repeat center, #050505;
    background-size: cover;
}

.chapter.c6 {
    background: url('/public/c/fon/6.png') no-repeat center, #050505;
    background-size: cover;
}

.chapter.c7 {
    background: url('/public/c/fon/7.png') no-repeat center, #050505;
    background-size: cover;
}

.chapter.c8 {
    background: url('/public/c/fon/8.png') no-repeat center, #050505;
    background-size: cover;
}

.chapter_los {
    background: url(/public/c/los_fon.png) no-repeat center, #050505;
    background-size: 100% 100%;
    z-index: 11;
}

.chapter_victory {
    background: url('/public/c/victory_fon.png') no-repeat center, #050505;
    background-size: 100% 100%;
    z-index: 11;
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
}

.chapter_los {
    background: url('/public/c/los_fon.png') no-repeat center, #050505;
    background-size: 100% 100%;
    z-index: 11;
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
}

.chapter_icons_victory {
    background: url(/public/c/victory_fon-icons.png) no-repeat center;
    background-size: 190px;
    width: 100%;
    height: 200px;
}

.chapter_icons_los {
    background: url(/public/c/los_fon-icons.png) no-repeat center;
    background-size: 300px;
    width: 100%;
    height: 200px;
}

.chapter_text_victory {
    background: url('/public/c/victory_text.png') no-repeat center;
    background-size: 200px;
    top: 158px;
    width: 100%;
    height: 52px;
    position: absolute;
}

.chapter_text_los {
    background: url('/public/c/los_text.png') no-repeat center;
    position: absolute;
    background-size: 45%;
    top: 158px;
    width: 100%;
    height: 100px;
}

.chapter {
    height: 100%;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.chapter-main {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    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-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.chapter-main-path.c0 {
    background: url(/public/c/map-line.png) no-repeat center;
    background-size: 100% 100%;
}

.chapter-main-path {
    width: 50%;
    height: 40%;
    position: relative;
}

.chapter-path-pic-wr.c0.p1 {
    bottom: -5dvh;
    right: 5dvh;
}

.chapter-path-pic-wr.c0 {
    width: 50%;
}

.chapter-path-pic-wr.c0.p2 {
    left: -5dvh;
    bottom: 21dvh;
    width: 50%;
}

.chapter-path-pic-wr.boss {
    top: -14dvh;
    left: 95%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    width: 60%;
}

.chapter-path-pic.c0.p2 {
    height: 100%;
    width: 100%;
}

.chapter-path-pic.boss {
    height: 100%;
    width: 100%;
}

.chapter-path-pic-wr {
    position: absolute;
    width: 30%;
    height: auto;
    aspect-ratio: 1 / 1;
    z-index: 5;
    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-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.chapter-path-pic-glow.c0.p1 {
    bottom: 8%;
    right: 9%;
    width: 85%;
    height: 85%;
}

.chapter-path-pic-glow.c0.p2 {
    bottom: 8%;
    right: 9%;
    width: 85%;
    height: 85%;
}

.chapter-path-pic-glow.c0.boss {
    bottom: 8%;
    right: 9%;
    width: 85%;
    height: 85%;
}

.a-flashing-chapter-pic-glow {
    height: 100%;
    width: 100%;
    position: absolute;
    border-radius: 50%;
    -webkit-box-shadow: 1px -1px 20px 0px #ff2f6d;
    box-shadow: 1px -1px 5px 5px #ff2f2f, 1px 1px 5px 5px #ff2f2f, -1px 1px 5px 0 #adff2f;
    -webkit-animation: flashing 1.5s linear infinite;
    animation: flashing 1.5s linear infinite;
}

@keyframes flashing {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 1;
    }
}

.chapter-path-pic {
    position: relative;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    z-index: 5;
}

.icon.checked {
    background: url(/public/icons/common.png) no-repeat center;
    background-size: contain;
}

.chapter-checked {
    height: 6.5dvh;
    width: 6.5dvh;
}

.c_s {
    color: #ccc4b0;
    background: rgba(0, 0, 0, 0.62);
    height: 100%;
    z-index: 11;
    display: flex;
    position: absolute;
    font-size: 20px;
    padding: 0px 40px;
    align-items: center;
    text-align: center;
    background-size: 100% 100%;
    line-height: 1.2;
    flex-direction: column;
    justify-content: center
}

.c_s_log1 {
    background: url(/public/c/comics/start.png) no-repeat center, #050505;
    background-size: cover;
}

.c_s_log2 {
    background: url('/public/c/fon/1.png') no-repeat center, #050505;
    background-size: cover;
}

.c_s_log3 {
    background: url('/public/c/fon/2.png') no-repeat center, #050505;
    background-size: cover;
}

.c_s_log4 {
    background: url('/public/c/fon/3.png') no-repeat center, #050505;
    background-size: cover;
}

.c_s_log5 {
    background: url('/public/c/fon/4.png') no-repeat center, #050505;
    background-size: cover;
}

.c_s_log6 {
    background: url('/public/c/fon/5.png') no-repeat center, #050505;
    background-size: cover;
}

.c_s_log7 {
    background: url('/public/c/fon/6.png') no-repeat center, #050505;
    background-size: cover;
}

.c_s_log8 {
    background: url('/public/c/fon/7.png') no-repeat center, #050505;
    background-size: cover;
}

.c_s_log9 {
    background: url('/public/c/fon/8.png') no-repeat center, #050505;
    background-size: cover;
}

.c_s_log10 {
    background: url('/public/c/fon/9.png') no-repeat center, #050505;
    background-size: cover;
}

.c_s_title {
    font-size: 1.2rem;
    line-height: 1.1;
    max-width: 600px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    top: 30px;
    color: #ffffff;
    position: absolute;
    width: 100%;
}

.c_s_c_s_text-container {
    font-size: 1.1rem;
    line-height: 1.1;
    max-width: 600px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    color: #ffffff;
}


.bp-merchant-wr {
    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: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    top: -15px;
    width: 100%;
}

.bp-merchant {
    position: relative;
    background: url(/public/bp/nps.png) no-repeat center;
    background-size: contain;
    width: 100%;
    height: auto;
    aspect-ratio: 298 / 251;
}

.merchant-container {
    padding: 10px 5px;
    position: relative;
    background: url(/public/bp/t_center.png) no-repeat center;
    background-size: 100% 100%;
    width: 100%;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    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-align: center;
    -ms-flex-align: center;
    align-items: center;
    row-gap: 10px;
}

.merchant-container:before {
    content: "";
    background: url(/public/bp/t_top.png) no-repeat center;
    background-size: 100% 100%;
    width: 100%;
    height: auto;
    aspect-ratio: 129 / 8;
    position: absolute;
    top: -22px;
}

.merchant-container:after {
    content: "";
    background: url(/public/bp/t_bottom.png) no-repeat center;
    background-size: 100% 100%;
    width: 100%;
    height: auto;
    aspect-ratio: 129 / 8;
    position: absolute;
    bottom: -22px;
}

.bp-merchant-buttons {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    z-index: 1;
}

.reward-wrapper {
    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;
    row-gap: .5dvh;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.reward.r-1 {
    background: url(/public/border/ramka/item_equipment_base_01.png) no-repeat center;
    background-size: contain;
}

.reward.r-2 {
    background: url(/public/border/ramka/item_equipment_base_02_pow.png) no-repeat center;
    background-size: contain;
}

.reward.r-3 {
    background: url(/public/border/ramka/item_equipment_base_03_pow.png) no-repeat center;
    background-size: contain;
}

.reward.r-4 {
    background: url(/public/border/ramka/item_equipment_base_04_pow.png) no-repeat center;
    background-size: contain;
}

.reward.r-5 {
    background: url(/public/border/ramka/item_equipment_base_05_pow.png) no-repeat center;
    background-size: contain;
}

.icon.gold-reward {
    background: url('/public/resurs/gold.png') no-repeat center;
    background-size: contain;
    width: 70%;
    height: 70%;
}

.icon.silver-reward {
    background: url('/public/resurs/silver.png') no-repeat center;
    background-size: contain;
    width: 70%;
    height: 70%;
}

.icon.dust-reward {
    background: url('/public/resurs/dust.png') no-repeat center;
    background-size: contain;
    width: 70%;
    height: 70%;
}

.icon.exp-reward {
    background: url('/public/resurs/exp.png') no-repeat center;
    background-size: contain;
    width: 70%;
    height: 70%;
}

.icon.prem-reward {
    background: url('/public/icons-gold/shop/premium.png') no-repeat center;
    background-size: contain;
    width: 70%;
    height: 70%;
}

.icon.p1-battle-reward {
    background: url('/public/icons-gold/hero_tab_23_select.png') no-repeat center;
    background-size: contain;
    width: 70%;
    height: 70%;
}

.icon.boots-4-reward {
    background: url('/public/professions/boots/4.png') no-repeat center;
    background-size: contain;
    width: 70%;
    height: 70%;
}

.icon.boots-5-reward {
    background: url('/public/professions/boots/5.png') no-repeat center;
    background-size: contain;
    width: 70%;
    height: 70%;
}

.icon.rod-3-reward {
    background: url('/public/fishing/rod/3.png') no-repeat center;
    background-size: contain;
    width: 70%;
    height: 70%;
}

.icon.rod-4-reward {
    background: url('/public/fishing/rod/4.png') no-repeat center;
    background-size: contain;
    width: 70%;
    height: 70%;
}

.icon.basket-3-reward {
    background: url('/public/icons/basket/3.png') no-repeat center;
    background-size: contain;
    width: 70%;
    height: 70%;
}

.icon.basket-5-reward {
    background: url('/public/icons/basket/5.png') no-repeat center;
    background-size: contain;
    width: 70%;
    height: 70%;
}

.icon.chest-reward {
    background: url('/public/icons/silver.png') no-repeat center;
    background-size: contain;
    width: 70%;
    height: 70%;
}

.icon.lock {
    background: url('/public/items/items-lock.png') no-repeat center;
    background-size: contain;
}

.reward-qnt-wr {
    height: 30%;
    position: absolute;
    bottom: 3px;
    width: 85%;
    backdrop-filter: brightness(0.7);
    -webkit-backdrop-filter: brightness(0.7);
    z-index: 2;
    border-radius: 0 0 1dvh 1dvh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.reward {
    height: auto;
    width: 70px;
    aspect-ratio: 242 / 242;
    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-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.bp-rewards-wr {
    position: relative;
    height: 70%;
    width: 100%;
}

.bp-reward-row {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -ms-grid;
    display: grid;
    justify-items: center;
    -ms-grid-columns: 1fr 2% 1fr;
    grid-template-columns: 1fr 2% 1fr;
    height: 100%;
    width: 100%;
}

.bp-reward-checked {
    width: 100%;
    height: 100%;
    position: absolute;
    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: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}


.icon.bp-level-progress {
    background: url(/public/bp/icon-bp-level.png?2) no-repeat center;
    background-size: contain;
}

.bp-reward.prem {
    background: linear-gradient(152deg, #00d5ff45 50%, #1f6671c7 50%);
}

.bp-reward {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    -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;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.bp-img.prem {
    background: url('/public/bp/p.png') no-repeat center;
    background-size: 100% 100%;
}

.bp-img {
    width: 70px;
    height: 70px;
}

.bp-reward-progress {
    background: #0b0b0b;
    height: inherit;
    width: 100%;
    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-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    z-index: 1;
}

.bp-reward-progress-fill {
    background: #ffd000;
    border-left: 1px solid #63530f;
    border-right: 1px solid #63530f;
    position: absolute;
    width: inherit;
    top: 0;
}

.bp-reward.free {
    background: linear-gradient(152deg, rgba(36, 43, 74, 0.85) 50%, #202438 50%);
}

.bp-img.free {
    background: url('/public/bp/f.png') no-repeat center;
    background-size: contain;
}

.bp-rewards-delimiter {
    height: 3px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff, rgba(255, 255, 255, 0)) 50% 99% / 85% 5% no-repeat, linear-gradient(90deg, rgba(214, 168, 75, .01), rgb(0 0 0), rgb(0 0 0), rgb(0 0 0), rgba(214, 168, 75, .01));
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: absolute;
    bottom: 0;
}

.icon.bp-level-reward {
    background-size: 100% 100% !important;
    width: 40px;
    height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.icon.check {
    background: url(/public/icons/common.png) no-repeat center;
    background-size: 100% 100%;
    width: 55px;
    height: 55px;
}

.icon {
    height: 35px;
    width: 35px;
    position: relative;
    z-index: 1;
}

.bp-level-plus {
    background: url(/public/bp/world_enemy_gauge_base.png) no-repeat center;
    background-size: 100% 100%;
    position: relative;
    z-index: 2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 53px;
    width: 34%;
    text-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.bp-rewards {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -ms-grid;
    display: grid;
    -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;
    width: 100%;
    height: 100%;
    justify-items: center;
}

.bp-header-delimiter {
    width: 100%;
    height: 55px;
}

.bp-progress-section {
    background: #00000047;
    width: inherit;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.icon.bp-point-1 {
    background: url('/public/bp/icon_a_class.png') no-repeat center;
    background-size: contain;
}

.bp-progress-block {
    background: #000000;
    height: 18px;
    width: 65%;
    position: relative;
    border-top: 1px solid #8e8e8e;
    border-bottom: 1px solid #8e8e8e;
}

.bp-progress-fill {
    background: #e4cc48;
    background-size: 100% 100%;
    height: inherit;
}

.icon.bp-level {
    background: url('/public/bp/l-silver.png') no-repeat center;
    background-size: contain;
}

.bp-rewards-delimiter.gold {
    height: 3px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff, rgba(255, 255, 255, 0)) 50% 99% / 85% 5% no-repeat, linear-gradient(90deg, rgba(214, 168, 75, .01), rgb(214 168 75), rgb(255 217 140), rgb(214 168 75), rgba(214, 168, 75, .01));
}