@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap');

html {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, #338385 0%, #00081e 90%);
}

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: rgb(0,8,30);
    background: radial-gradient(circle, #338385 0%, #00081e 90%);
    /*background: radial-gradient(circle, rgba(55,203,173,1) 0%, rgba(0,8,30,1) 100%);*/
    font-family: "Exo 2", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: #d3fdff;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

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


::-webkit-scrollbar {
    width: 8px; 
    height: 8px;
  }
  
  ::-webkit-scrollbar-thumb {
    background: rgb(0 0 0 / 40%);
    border-radius: 10px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 100, 100, 0.7);
  }
  
  ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05); 
    border-radius: 10px;
  }


.body_wrap {
    height: 100%;
    width: 100%;
    position: relative;
    max-width: 500px;
    max-height: 900px;
    overflow: hidden;
    border-radius: 40px;
    background: radial-gradient(circle, #338385 0%, #00081e 90%);
}

.ban_wrap {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1100;
    justify-content: center;
    align-items: center;
}

.all_dead_wrap {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 800;
    justify-content: center;
    align-items: center;
}


.news_wrap {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1101;
    justify-content: center;
    align-items: center;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.news_cont {
    position: relative;
    background: hsl(181deg 26.22% 9.23% / 50%);
    padding: 15px 15px 25px 15px;
    width: 280px;
    border-radius: 30px;
    font-size: 12pt;
    text-align: center;
    overflow: hidden;
}

.news_close {
    position: absolute;
    cursor: pointer;
    bottom: 0;
    right: 0;
    background: #ffa700;
    color: #000;
    padding: 5px 25px;
    border-radius: 30px 0px 0px 0px;
}

.ban_cont {
    background: hsl(181deg 26.22% 9.23% / 70%);
    padding: 15px;
    width: 250px;
    border-radius: 30px;
    font-size: 12pt;
    text-align: center;
}

.all_dead_cont {
    background: hsl(181deg 26.22% 9.23% / 70%);
    padding: 15px;
    width: 250px;
    border-radius: 30px;
    font-size: 12pt;
    text-align: center;
}

.all_dead_close {
    width: 130px;
    display: inline-block;
    background: #ffa700;
    color: #00081e;
    padding: 10px 15px;
    border-radius: 15px;
    cursor: pointer;
}

.loader_screen {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    background: radial-gradient(circle, #338385 0%, #00081e 100%);
    background-position: center center;
    background-size: contain;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 1000;
}

.loader_ani {
    animation: loader 2s ease 0s infinite normal none;
}

@keyframes loader {
    0% {
      opacity: 0.8;
      transform: scale(0.2);
    }
  
    80% {
      opacity: 0;
      transform: scale(1.2);
    }
  
    100% {
      opacity: 0;
      transform: scale(2.2);
    }
  }

.nft_c_link {
    color: #1fcfc3;
    text-decoration: underline;
}


.version {
    position: absolute;
    bottom: 9px;
    right: 26px;
    color: #338385;
    font-size: 8pt;
    text-transform: uppercase;
}

.notify_wrap {
    position: absolute;
    left: 0;
    z-index: 200;
    width: 100%;
    text-align: center;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.notify {
    margin: 10px;
    padding: 10px;
    background: rgb(214 235 237 / 20%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


.top_indicators {
    position: absolute;
    top: 20px;
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    z-index: 11
}

.indicator_item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 60px;
    border-radius: 15px;
    background: rgb(166 237 228 / 10%);
}

.indicator_icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    vertical-align: middle;
}

.indicator_text {
    font-size: 12pt;
    display: inline-block;
    vertical-align: middle;
}

.indicator_footer {
    position: absolute;
    bottom: -20px;
    font-size: 12pt;
    color: #67a1ab;
}

.icon_human {
    background: url(assets/icon_human.png) no-repeat;
    background-position: center center;
    background-size: contain;
}

.icon_food {
    background: url(assets/icon_food.png) no-repeat;
    background-position: center center;
    background-size: contain;
}

.icon_energy {
    background: url(assets/icon_energy.png) no-repeat;
    background-position: center center;
    background-size: contain;
}

.icon_achieve {
    display: inline-block;
    width: 150px;
    height: 150px;
    background: url(assets/achieve/logo_achieve.png) no-repeat;
    background-position: center center;
    background-size: contain;
}

.icon_inventory {
    display: inline-block;
    width: 150px;
    height: 150px;
    background: url(assets/inventory.png) no-repeat;
    background-position: center center;
    background-size: contain;
}

.top_btn_wrap {
    box-sizing: border-box;
    position: absolute;
    top: 100px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    z-index: 11;
    padding: 0 15px;
}

.top_btn {
    position: relative;
    font-size: 14pt;
    text-align: center;
}

.top_extreme {
    margin-top: 10px;
    font-size: 12pt;
    width: 70px;
    border-radius: 20px;
    padding: 5px;
    background: linear-gradient(0deg, rgba(0, 8, 30, 0) 50%, rgb(55 220 221 / 5%) 100%);
    cursor: pointer;
}


.oxy_wrap{
    min-width: 120px;
    background: linear-gradient(180deg, rgba(0, 8, 30, 0) 50%, rgb(55 220 221 / 5%) 100%);
    padding: 5px 18px;
    border-radius: 20px;
}

.oxy_icon {
    display: inline-block;
    width: 30px;
    height: 30px;
    vertical-align: middle;
    background: url(assets/oxy_logo.png) no-repeat;
    background-position: center center;
    background-size: contain;
}

.guids_c_oxy_icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    background: url(assets/oxy_logo.png) no-repeat;
    background-position: center center;
    background-size: contain;
    margin: 1px;
}

.verif_g_icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    background: url(assets/verif_icon.png) no-repeat;
    background-position: center center;
    background-size: contain;
    margin-left: 3px;
}




.inv_items_wrap {
    display: inline-block;
    position: relative;
    background: rgb(0 0 0 / 10%);
    border-radius: 25px;
    width: 300px;
    padding: 10px;
    text-align: left;
    margin-top: 20px;
}

.inv_item {
    position: relative;
    display: inline-block;
    word-spacing: normal;
    width: 52px;
    height: 52px;
    border-radius: 10px;
    border: 2px solid rgb(255 255 255 / 30%);
    -webkit-box-shadow: 0px 0px 2px 0px rgb(0 0 0 / 75%);
    -moz-box-shadow: 0px 0px 2px 0px rgb(0 0 0 / 75%);
    box-shadow: 0px 0px 2px 0px rgb(0 0 0 / 75%);
    margin: 2px;
}

.inv_item_selected {
    border: 2px solid #ffa700;
    transform: scale(1.1);
    z-index: 2;
}


.inv_item_cntr {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #ffa700;
    color: #00081e;
    font-size: 8pt;
    border-radius: 0px 10px 0px 10px;
    padding: 5px 5px;
}


.inv_item_empty {
    display: inline-block;
    word-spacing: normal;
    width: 52px;
    height: 52px;
    background: rgb(0 0 0 / 30%);
    border-radius: 10px;
    border: 2px solid rgb(255 255 255 / 0%);
    -webkit-box-shadow: 0px 0px 2px 0px rgb(0 0 0 / 75%);
    -moz-box-shadow: 0px 0px 2px 0px rgb(0 0 0 / 75%);
    box-shadow: 0px 0px 2px 0px rgb(0 0 0 / 75%);
    margin: 2px;
}


.inv_control_wrap {
    display: inline-block;
    position: relative;
    background: rgb(0 0 0 / 10%);
    border-radius: 15px;
    width: 264px;
    padding: 10px;
    text-align: left;
    margin-top: 20px;
}

.inv_contol_btn_wrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.inv_control_use {
    width: 75px;
    font-size: 12pt;
    text-align: center;
    border-radius: 10px;
    border: 1px solid rgb(255 190 0);
    padding: 10px;
    background: #ffa700;
    color: #00081e;
    cursor: pointer;
}

.inv_control_send {
    width: 141px;
    font-size: 12pt;
    text-align: center;
    border-radius: 10px;
    border: 1px solid rgb(255 255 255 / 10%);
    padding: 10px;
    background: rgba(28, 153, 134, 0.05);
    cursor: pointer;
}

.inv_control_address {
    color: #b7ede8;
    font-size: 12pt;
    border-radius: 10px;
    border: 1px solid rgb(255 255 255 / 10%);
    width: 239px;
    padding: 12px;
    background: rgb(7 29 26 / 20%);
    margin-top: 5px;
}

.inv_btn_disabled {
    opacity: 0.2;
    cursor: default;
}


.inv_send_log_wrap {
    display: inline-block;
    position: relative;
    background: rgb(0 0 0 / 10%);
    border-radius: 15px;
    width: 264px;
    padding: 10px;
    text-align: left;
    margin-top: 20px;
    text-align: center;
}

.inv_send_log_item {
    display: flex;
    position: relative;
    background: rgb(0 0 0 / 30%);
    border-radius: 10px;
    padding: 10px;
    text-align: left;
    margin: 5px;
    font-size: 10pt;
    align-items: center;
    justify-content: flex-start;
}

.inv_send_log_item_address {
    margin-left: auto;
    color: #4c9696;
}

.inv_send_log_item_status {
    margin-right: 5px;
    color: #53c0ba;
}

.oxy_counter {
    display: inline-block;
    vertical-align: middle;
    margin: 5px;
}

#oxy_coef {
    color: #fff;
}

.link_line {
    width: 67px;
    height: 67px;
    position: absolute;
    top: 240px;
    left: 244px;
    background: url(assets/link.png) no-repeat;
    background-position: center center;
    background-size: contain;
    z-index: 9;
    animation: stones_shake 60s ease 0s infinite normal forwards;
}


.icon_score {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(assets/icon_score.png) no-repeat;
    background-position: center center;
    background-size: contain;
    margin: -1px;
    margin-left: 2px;
}

.top_icon_score {
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url(assets/icon_score.png) no-repeat;
    background-position: center center;
    background-size: contain;
    margin: -2px;
    margin-left: 2px;
}


.tier_human_icon {
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url(assets/icon_human.png) no-repeat;
    background-position: center center;
    background-size: contain;
    margin: -2px;
}

.tier_next {
    color: #d3fdff;
    width: 110px;
    position: absolute;
    bottom: -17px;
    left: 4px;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 8pt;
}


.new {
    position: absolute;
    top: -8px;
    left: -9px;
    background: #ffa700;
    color: #00081e;
    padding: 4px 8px;
    font-size: 8pt;
    border-radius: 10px;
    font-weight: bold;
}



.rush_timer {
    width: 60px;
    position: absolute;
    top: -8px;
    left: -9px;
    background: #15c5b7;
    color: #00081e;
    padding: 3px 1px;
    font-size: 7pt;
    border-radius: 10px;
    font-weight: bold;
    text-align: center;
}

.bh_timer_main {
    display: none;
    width: 60px;
    position: absolute;
    top: -8px;
    left: -9px;
    background: #15c5b7;
    color: #00081e;
    padding: 3px 1px;
    font-size: 7pt;
    border-radius: 10px;
    font-weight: bold;
    text-align: center;
}

.arena_timer {
    width: 60px;
    position: absolute;
    top: -8px;
    left: -9px;
    background: #15c5b7;
    color: #00081e;
    padding: 3px 1px;
    font-size: 7pt;
    border-radius: 10px;
    font-weight: bold;
    text-align: center;
}


.tier_wrap {
    position: absolute;
    top: 287px;
    left: 24px;
    z-index: 9;
    font-size: 10pt;
    background: rgb(0 0 0 / 5%);
    border: 1px solid rgb(255 255 255 / 10%);
    color: #ffa700;
    font-weight: bold;
    padding: 5px 26px;
    border-radius: 5px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    animation: stones_shake 60s ease 0s infinite normal forwards;
}


.farm_btn_wrap {
    position: absolute;
    text-align: center;
    border-radius: 10px;
    top: 281px;
    left: 250px;
    border: 1px solid rgb(255 255 255 / 10%);
    /* overflow: hidden; */
    animation: stones_shake 60s ease 0s infinite normal forwards;
    z-index: 9;
}

.farm_btn {
    width: 110px;
    padding: 12px;
    background: rgb(30 233 113 / 5%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    cursor: pointer;
    border-radius: 10px;
}

.farm_wait {
    width: 110px;
    padding: 12px;
    background: rgb(59 59 59 / 30%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #a5a5a5;
    border-radius: 10px;
}

.food_cntr {
    width: 110px;
    display: flex;
    position: absolute;
    top: 44px;
    left: 21px;
    font-size: 10pt;
    color: #ffa700;
    font-weight: bold;
    border-radius: 5px;
    align-items: center;
    justify-content: flex-end;
}

.food_cntr_icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    background: url(assets/icon_food.png) no-repeat;
    background-position: center center;
    background-size: contain;
    margin-bottom: 1px;
    margin-left: 0px;
}



.base_wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pvp_arena_wrap {
    transform: scale(1.2);
}

@media only screen and (max-width: 389px) {
    .base_wrap {
      transform: scale(0.8);
    }

    .pvp_arena_wrap {
        transform: scale(1);
    }
  }

.base_img {
    position: relative;
    width: 400px;
    height: 500px;
    margin-top: 100px;
    background: url(assets/base.png) no-repeat;
    background-position: center center;
    background-size: contain;
    animation: base_shake 30s ease 0s infinite normal forwards;
}

.base_img_100 {
    background: url(assets/base_100.png) no-repeat;
    background-position: center center;
    background-size: contain;
    animation: base_shake 30s ease 0s infinite normal forwards;
}

.base_img_250 {
    background: url(assets/base_250.png) no-repeat;
    background-position: center center;
    background-size: contain;
    animation: base_shake 30s ease 0s infinite normal forwards;
}

.base_img_500 {
    background: url(assets/base_500.png) no-repeat;
    background-position: center center;
    background-size: contain;
    animation: base_shake 30s ease 0s infinite normal forwards;
}

.base_img_1000 {
    background: url(assets/base_1000.png) no-repeat;
    background-position: center center;
    background-size: contain;
    animation: base_shake 30s ease 0s infinite normal forwards;
}

.base_img_2500 {
    background: url(assets/base_2500.png) no-repeat;
    background-position: center center;
    background-size: contain;
    animation: base_shake 30s ease 0s infinite normal forwards;
}

.base_stones {
    position: absolute;
    width: 400px;
    height: 500px;
    background: url(assets/base_stones.png) no-repeat;
    background-position: center center;
    background-size: contain;
    animation: stones_shake 60s ease 0s infinite normal forwards;
}

.base_flicker_dome {
    position: relative;
    width: 400px;
    height: 500px;
    background: url(assets/base_flicker_dome.png) no-repeat;
    background-position: center center;
    background-size: contain;
    animation: flicker_dome 10s infinite;
}

.base_flicker_bottom {
    position: absolute;
    width: 190px;
    height: 160px;
    top: 293px;
    left: 93px;
    background: url(assets/base_flicker_main.png) no-repeat;
    background-position: center center;
    background-size: contain;
    animation: flicker_bottom 0.2s infinite;
}

.base_flicker_main {
    position: absolute;
    width: 400px;
    height: 200px;
    top: 25px;
    background: url(assets/base_flicker_main.png) no-repeat;
    background-position: center center;
    background-size: contain;
    animation: flicker_main 1s infinite;
}

.bottom_menu {
    position: absolute;
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    bottom: 30px;
}

.bottom_menu_second {
    position: absolute;
    display: flex;
    justify-content: center;
    width: 100%;
    bottom: 101px;
    gap: 5px;
}

.menu_item {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 70px;
    height: 62px;
    border-radius: 15px;
    background: rgb(166 237 228 / 10%);
    cursor: pointer;
}

.new_tasks_cntr {
    position: absolute;
    top: -8px;
    right: -32px;
    background: #ffa700;
    color: #00081e;
    padding: 4px 8px;
    font-size: 8pt;
    border-radius: 10px;
    font-weight: bold;
}

.menu_icon {
    display: inline-block;
    width: 30px;
    height: 30px;
    vertical-align: middle;
}

.icon_boosts {
    background: url(assets/icon_boosts.png) no-repeat;
    background-position: center center;
    background-size: contain;
}

.icon_tasks {
    background: url(assets/icon_tasks.png) no-repeat;
    background-position: center center;
    background-size: contain;
}

.icon_refs {
    background: url(assets/icon_refs.png) no-repeat;
    background-position: center center;
    background-size: contain;
}

.icon_guilds {
    background: url(assets/icon_guilds.png) no-repeat;
    background-position: center center;
    background-size: contain;
}

.icon_capsule {
    background: url(assets/capsule.png) no-repeat;
    background-position: center center;
    background-size: contain;
}

.copy_ref {
    text-align: center;
    font-size: 9pt;
    background: rgb(166 237 228 / 10%);
    padding: 15px;
    border-radius: 10px;
    cursor: pointer;
}

.icon_wallet {
    display: inline-block;
    background: url(assets/icon_wallet.png) no-repeat;
    background-position: center center;
    background-size: contain;
}

.task_icon {
    border: 1px solid #bae6e7;
    border-radius: 15px;
    display: inline-block;
    width: 50px;
    height: 50px;
    vertical-align: middle;
}



.task_icon_partner {
    display: inline-block;
    width: 50px;
    height: 114px;
    vertical-align: middle;
}

.task_partner_btns {
    display: flex;
    height: 114px;
    flex-direction: column;
    justify-content: space-between;
}


.task_wrap_partner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin-bottom: 10px;
    background: #000;
    padding-top: 10px;
    padding-bottom: 10px;
    box-sizing: border-box;
    color: #fff;
}


.vp_task_check {
    display: flex;
    height: 50px;
    width: 70px;
    border-radius: 15px;
    background: rgb(115 221 207 / 30%);
    cursor: pointer;
    justify-content: center;
    align-items: center;
    font-size: 12pt;
}


.task_partner_bnt {
    display: flex;
    height: 50px;
    width: 70px;
    border-radius: 15px;
    background: rgb(255 255 255 / 10%);
    cursor: pointer;
    justify-content: center;
    align-items: center;
    font-size: 12pt;
}

.vp_task_loader {
    display: flex;
    height: 50px;
    width: 70px;
    border-radius: 15px;
    background: rgb(115 221 207 / 30%);
    justify-content: center;
    align-items: center;
    font-size: 12pt;
}



.vp_icon_church {
    background: url(assets/vp/church.jpg) no-repeat;
    background-position: center center;
    background-size: contain;
}

.vp_icon_puppies {
    background: url(assets/vp/puppies.jpg) no-repeat;
    background-position: center center;
    background-size: contain;
}

.vp_icon_dragon {
    background: url(assets/vp/dragon.jpg) no-repeat;
    background-position: center center;
    background-size: contain;
}

.vp_icon_racing {
    background: url(assets/vp/racing.jpg) no-repeat;
    background-position: center center;
    background-size: contain;
}

.vp_icon_wolf {
    background: url(assets/vp/wolf.jpg) no-repeat;
    background-position: center center;
    background-size: contain;
}

.vp_icon_combo {
    background: url(assets/vp/combo.jpg) no-repeat;
    background-position: center center;
    background-size: contain;
}

.vp_icon_combo2 {
    background: url(assets/vp/combo2.jpg) no-repeat;
    background-position: center center;
    background-size: contain;
}

.vp_icon_hamster {
    background: url(assets/vp/hamster.jpg) no-repeat;
    background-position: center center;
    background-size: contain;
}

.vp_icon_bunny {
    background: url(assets/vp/bunny.jpg) no-repeat;
    background-position: center center;
    background-size: contain;
}

.vp_icon_gold {
    background: url(assets/vp/gold.jpg) no-repeat;
    background-position: center center;
    background-size: contain;
}

.vp_icon_okx {
    background: url(assets/vp/okx.jpg) no-repeat;
    background-position: center center;
    background-size: contain;
}

.vp_icon_qqq {
    background: url(assets/vp/qqq.jpg) no-repeat;
    background-position: center center;
    background-size: contain;
}

.vp_icon_pig {
    background: url(assets/vp/pig.jpg) no-repeat;
    background-position: center center;
    background-size: contain;
}

.vp_icon_diamore {
    background: url(assets/vp/diamore.jpg) no-repeat;
    background-position: center center;
    background-size: contain;
}


.vp_icon_acki {
    background: url(assets/vp/acki.jpg) no-repeat;
    background-position: center center;
    background-size: contain;
}


.vp_icon_tappc {
    background: url(assets/vp/tappc.jpg) no-repeat;
    background-position: center center;
    background-size: contain;
}


.task_wrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin-bottom: 10px;
}

.task_text {
    height: 52px;
    font-size: 11pt;
    width: 180px;
    border-radius: 15px;
    background: rgb(166 237 228 / 10%);
    cursor: pointer;
    display: flex;
    align-items: center;
    align-content: center;
    flex-direction: column;
    line-height: 0px;
    justify-content: space-evenly;
}

.task_text_partner {
    height: 114px;
    font-size: 11pt;
    width: 180px;
    border-radius: 15px;
    background: rgb(255 255 255 / 10%);
    cursor: pointer;
    display: flex;
    align-items: center;
    align-content: center;
    flex-direction: column;
    line-height: 0px;
    justify-content: space-evenly;
}

.task_check {
    display: flex;
    height: 50px;
    width: 70px;
    border-radius: 15px;
    background: rgb(115 221 207 / 30%);
    cursor: pointer;
    justify-content: center;
    align-items: center;
    font-size: 12pt;
}

.task_check_disabled {
    opacity: 0.3;
}

.task_check_done {
    display: flex;
    height: 50px;
    width: 70px;
    border-radius: 15px;
    background: rgb(58 231 17 / 30%);
    justify-content: center;
    align-items: center;
    font-size: 12pt;
}

.icon_telegram {
    background: url(assets/icon_telegram.png) no-repeat;
    background-position: center center;
    background-size: contain;
}

.icon_discord {
    background: url(assets/icon_discord.png) no-repeat;
    background-position: center center;
    background-size: contain;
}

.icon_tw {
    background: url(assets/icon_tw.png) no-repeat;
    background-position: center center;
    background-size: contain;
}

.icon_yt {
    background: url(assets/icon_yt.png) no-repeat;
    background-position: center center;
    background-size: contain;
}

.pages {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}


.guilds_page {
    position: relative;
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    align-items: center;
    overflow: scroll;
}

.guilds_jc_wrap {
    width: 100%;
    display: flex;
    gap: 15px;
    justify-content: center;
}




.guilds_btn {
    text-align: center;
    border-radius: 10px;
    border: 1px solid rgb(255 255 255 / 10%);
    width: 110px;
    padding: 12px;
    background: rgba(28, 153, 134, 0.05);
    cursor: pointer;
}




.guild_l_wrap {
    display: flex;
    width: 300px;
    justify-content: space-between;
    margin-top: 5px;
}

.guild_u_wrap {
    display: flex;
    width: 300px;
    justify-content: space-between;
    margin-top: 5px;
}


.guild_invite_code {
    width: 280px;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid rgb(255 255 255 / 10%);
    background: rgb(0 0 0 / 20%);
    text-align: center;
    font-size: 10pt;
    margin-top: 5px;
}



.guild_l_btn {
    font-size: 10pt;
    text-align: center;
    border-radius: 10px;
    border: 1px solid rgb(255 255 255 / 10%);
    padding: 12px;
    background: rgba(28, 153, 134, 0.05);
}

.guild_l_withdraw {
    background: rgb(0 252 221 / 10%);
    width: 80px;
}


.guild_l_change_code {
    width: 62px;
    cursor: pointer;
}

.guild_invite_code_text {
    width: 180px;
    cursor: pointer;
    font-size: 9pt;
}

.guild_u_btn {
    font-size: 10pt;
    text-align: center;
    border-radius: 10px;
    border: 1px solid rgb(255 255 255 / 10%);
    padding: 12px;
    background: rgba(28, 153, 134, 0.05);
}

.guild_u_humans_wrap {
    width: 185px;
}

.guild_u_humans_get {
    background: rgb(0 252 221 / 10%);
    cursor: pointer;
}

.guild_join_code {
    color: #b7ede8;
    font-size: 12pt;
    border-radius: 10px;
    border: 1px solid rgb(255 255 255 / 10%);
    width: 170px;
    padding: 12px;
    background: rgb(7 29 26 / 20%);
    margin-bottom: 15px;
}


.guild_leave {
    display: inline-block;
    padding: 5px;
    border: 1px solid rgb(255 255 255 / 10%);
    background: rgb(124 42 42 / 20%);
    cursor: pointer;
    font-size: 10pt;
    border-radius: 10px;
    margin: 10px;
}

.create_guild {
    background: rgb(30 233 113 / 5%);
}


.guild_creator {
    color: #ffa700;
}

.guild_members_cnt {
    color: #60b9b8;
}

.guilds_oxy_pool_wrap {
    position: relative;
    width: 280px;
    height: 20px;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid rgb(255 255 255 / 10%);
    background: rgb(0 0 0 / 20%);
    margin-top: 20px;
    overflow: hidden;
    font-size: 12pt;
}

.guilds_c_name {
    width: 100px;
    text-align: left;
    overflow: hidden;
}

.guilds_oxy_pool_bar_wrap{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    z-index: 1;
}

.guilds_oxy_pool_bar{
    position: absolute;
    background: url(assets/oxy_pool_bg.jpg);
    animation: bg-animation 18s ease infinite;
    float: left;
    width: 0%;
    height: 100%;
}

.guilds_oxy_pool_deposited {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.guilds_oxy_send_wrap {
    box-sizing: border-box;
    width: 300px;
    display: flex;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid rgb(255 255 255 / 10%);
    background: rgb(0 0 0 / 20%);
    align-items: center;
    margin-top: 5px;
    justify-content: flex-start;
    font-size: 12pt;
}


.guilds_oxy_icon {
    display: inline-block;
    width: 25px;
    height: 25px;
    vertical-align: middle;
    background: url(assets/oxy_logo.png) no-repeat;
    background-position: center center;
    background-size: contain;
    margin-top: 2px;
}

.guilds_oxy_pool {
    margin-left: 5px;
    color: #fff;
}

.guilds_oxy_send {
    margin-left: 5px;
    color: #fff;
}


.guilds_send_oxy {
    text-align: center;
    border-radius: 10px;
    border: 1px solid rgb(255 255 255 / 10%);
    width: 60px;
    padding: 10px;
    background: rgba(28, 153, 134, 0.05);
    cursor: pointer;
    margin-left:auto;
}

.guild_invite_code_text {
    color: #1fcfc3;
}

.guilds_f_info {
    font-size: 10pt;
    width: 280px;
    border-radius: 10px;
    border: 1px solid rgb(255 182 0 / 10%);
    padding: 10px;
    background: rgb(221 135 16 / 10%);
    margin-top: 10px;
    text-align: justify;
}




.guilds_page_inside {
    text-align: center;
}



.guilds_contr_wrap {
    width: 300px;
    display: flex;
    flex-direction: column;
}

.guilds_c_wrap {
    box-sizing: border-box;
    width: 300px;
    display: flex;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid rgb(255 255 255 / 10%);
    background: rgb(0 0 0 / 20%);
    align-items: center;
    margin-top: 5px;
    justify-content: flex-start;
    font-size: 12pt;
}

.g_btn_inactive {
    background: rgb(115 115 115 / 20%);
    border: 1px solid rgb(0 0 0 / 10%);
    cursor: default;
    color: #999;
}

.top100_wrap {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 0 15px;
    overflow: scroll;
    text-align: center;
    padding-bottom: 10px;
}


.top100_item {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    padding: 7px 5px 10px 5px;
    border-radius: 10px;
    background: rgb(0 41 37 / 30%);
    margin-top: 10px;
    z-index: 1;
}

.top100_score {
    font-size: 10pt;
    margin-left: auto;
}

.top100_name {
    display: inline-block;
    width: 150px;
    overflow: hidden;
    vertical-align: bottom;
    margin-bottom: 5px;
    white-space: nowrap;
}

.top100_item:nth-of-type(1) {
    background: rgb(3 252 1 / 10%);
}

.top100_item:nth-of-type(2) {
    background: rgb(241 2 221 / 10%);
}

.top100_item:nth-of-type(3) {
    background: rgb(0 159 255 / 10%);
}


.total_score {
    font-size: 24pt;
    font-weight: bold;
    color: #ffa700;
}

.my_score_text {
    font-size: 14pt;
    font-weight: bold;
}

.top_onchain_score {
    color: #4bd2bc;
}

.top100_score_ingame {
    font-weight: bold;
}

.top100_score_onchain {
    font-weight: bold;
    color: #4bd2bc;
}

.top100_score_all {
    font-weight: bold;
    color: #ffa700;
    font-size: 12pt;
}


.top100_rank_text {
    position: absolute;
    top: -2px;
    left: -2px;
    padding: 5px 5px;
    border-radius: 10px 0px 10px 0px;
    font-size: 12pt;
    display: inline-block;
    font-weight: bold;
    color: #124c4d;
    margin-right: 2px;
    vertical-align: bottom;
    background: orange;
}

.top100_my_pos_wrap {
    width: 100%;
    background: rgb(0 0 0 / 10%);
    text-align: center;
    padding: 10px 0px;
    box-sizing: border-box;
}
    
.top100_my_pos {
    font-weight: bold;
    color: #ffa700;
}




.top100_icon_humans {
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: middle;
    background: url(assets/top100_human.png) no-repeat;
    background-position: center center;
    background-size: contain;
    margin-bottom: 4px;
    margin-right: -6px;
}

.top100_icon_boost {
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: middle;
    background: url(assets/top100_boost.png) no-repeat;
    background-position: center center;
    background-size: contain;
    margin-bottom: 4px;
    margin-right: -2px;
}

.top100_icon_achieve {
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: middle;
    background: url(assets/top100_achieve.png) no-repeat;
    background-position: center center;
    background-size: contain;
    margin-bottom: 4px;
    margin-right: -3px;
}

.top100_icon_lvls {
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: middle;
    background: url(assets/top100_lvls.png) no-repeat;
    background-position: center center;
    background-size: contain;
    margin-bottom: 4px;
    margin-right: -1px;
}

.guild_link_c {
    display: none;
    color: #ffa700;
    text-decoration: underline;
}

.guilds_top_verif {
    display: inline-block;
    color: #ffa700;
    text-decoration: underline;
}

.guilds_page_back{
    z-index: 3;
    position: fixed;
    top:20px;
    right: 20px;
    padding: 10px;
    border: 1px solid rgb(255 255 255 / 10%);
    background: rgb(93 150 153 / 20%);
    cursor: pointer;
    font-size: 12pt;
    border-radius: 10px;
}

.guilds_c_oxy {
    display: flex;
    margin-left: auto;
}




.page_wrap {
    position: absolute;
    width: 90%;
    height: 85%;
    border: 1px solid rgb(56 87 90);
    display: none;
    justify-content: center;
    align-items: center;
    background: rgb(4 26 25 / 30%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 40px;
    z-index: 100;
    font-size: 14pt;
    overflow: hidden;
}

.page_content {
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.p_block {
    display: inline-block;
    padding: 20px;
    background: rgb(0 0 0 / 10%);
    border: 1px solid rgb(0 0 0 / 10%);
    text-align: left;
    max-width: 70%;
    overflow: scroll;
    cursor: pointer;
    border-radius: 10px;
}

.page_close {
    position: absolute;
    width: 40px;
    height: 40px;
    top:20px;
    left: 20px;
    background: url(assets/page_close.png) no-repeat;
    background-position: center center;
    background-size: contain;
    cursor: pointer;
    z-index: 20;
}

.blured_text {
    filter: blur(5px);
}


.upgrade_btn {
    min-width: 140px;
    display: block;
    padding: 10px 15px;
    background: rgb(0 0 0 / 20%);
    border: 1px solid rgb(0 0 0 / 10%);
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
    font-size: 12pt;
}

.upgrade_btn_p {
    width: 140px;
    display: none;
    padding: 10px 15px;
    background: rgb(111 111 111 / 20%);
    border: 1px solid rgb(0 0 0 / 10%);
    color: #8b8b8b;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14pt;
}

.price_oxy_icon {
    display: inline-block;
    width: 23px;
    height: 23px;
    vertical-align: middle;
    background: url(assets/oxy_logo.png) no-repeat;
    background-position: center center;
    background-size: contain;
    margin-bottom: 4px;
    margin-left: -3px;
}

.price_food_icon {
    display: inline-block;
    width: 30px;
    height: 30px;
    vertical-align: middle;
    background: url(assets/icon_food.png) no-repeat;
    background-position: center center;
    background-size: contain;
    margin-bottom: 5px;
    margin-left: -8px;
}

.food_ph_after {
    color: #ffa700;
    font-size: 14pt;
}

.oxy_ph_after {
    color: #ffa700;
    font-size: 14pt;
}

.upgrade_price {
    color: #fff;
}

.scale {
    animation: scale 0.1s ease 0s 1 normal none;
}

.btn_down {
    animation: btn_down 0.1s ease 0s 2 alternate none;
}

.wallet_balance {
    color: #ffa700;
    font-size: 16pt;
}

.wallet_balance_sol {
    color: #ffa700;
    font-size: 16pt;
}

.wallet_balance_wrap {
    display: inline-block;
    padding: 12px 15px;
    background: rgb(0 0 0 / 20%);
    border-radius: 15px;
}

.wallet_balance_wrap_sol {
    display: inline-block;
    padding: 12px 15px;
    background: rgb(0 0 0 / 20%);
    border-radius: 15px;
}

.wallet_wrap {
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    overflow: scroll;
}

.tasks_wrap {
    display: block;
    width: 100%;
    text-align: center;
    overflow: scroll;
}

.creed_wrap {
    position: absolute;
    display: none;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    /* border: 1px solid rgb(78 175 170 / 50%); */
    z-index: 9;
    left: 322px;
    bottom: 355px;
    align-items: center;
    justify-content: center;
    -webkit-box-shadow: 0px 11px 28px 1px rgba(5, 183, 176, 0.44);
    -moz-box-shadow: 0px 11px 28px 1px rgba(5, 183, 176, 0.44);
    box-shadow: 0px 11px 28px 1px rgb(25 114 129);
    animation: stones_shake 60s ease 0s infinite normal forwards;
}

.no_creed {
    background: url(assets/no_creed.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.fox_creed {
    background: url(assets/nft_fox.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.wolf_creed {
    background: url(assets/nft_wolf.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.mynfts_wrap {
    box-sizing: border-box;
    display: inline-block;
    width: 330px;
    text-align: left;
    background: rgb(0 0 0 / 20%);
    border-radius: 10px;
    padding: 10px;
}

.my_nft {
    position: relative;
    display: inline-block;
    width: 93px;
    height: 93px;
    border-radius: 10px;
    margin: 5px;
    overflow: hidden;
}

.nft_count {
    display: inline-block;
    background: rgb(0 0 0 / 40%);
    padding: 2px 5px;
    border-radius: 0px 0px 10px 0px;
    font-size: 12pt;
}

.set_nft_wrap {
    position: absolute;
    width: 100%;
    bottom: 0;
    text-align: center;
}

.set_nft {
    display: inline-block;
    background: #b960b2;
    padding: 3px 15px;
    font-size: 12pt;
    border-radius: 5px;
    margin-bottom: 5px;
    cursor: pointer;
}
.set_nft_disabled {
    display: inline-block;
    background: rgb(77 79 79 / 20%);
    color: #fff;
    padding: 3px 15px;
    font-size: 12pt;
    border-radius: 5px;
    margin-bottom: 5px;
    cursor: pointer;
}

.nfts_wrap {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    overflow-x: scroll;
}

.buy_nft_wrap {
    display: inline-block;
    width: 180px;
    padding: 15px;
    border-radius: 15px;
    background: rgb(0 0 0 / 20%);
    font-size: 10pt;
    margin: 5px;
}

.nft_attr {
    color: #ffa700;
}

.nft_img {
    width: 180px;
    height: 180px;
    border-radius: 15px;
    margin-bottom: 12px;
}

.capsule_nft {
    background: url(assets/nft_capsule.jpg) no-repeat;
    background-position: center center;
    background-size: contain;
}

.capsule_nft10 {
    background: url(assets/nft_capsule10.jpg) no-repeat;
    background-position: center center;
    background-size: contain;
}

.cp1_nft {
    background: url(assets/nft_cp1.jpg) no-repeat;
    background-position: center center;
    background-size: contain;
}

.cp2_nft {
    background: url(assets/nft_cp2.jpg) no-repeat;
    background-position: center center;
    background-size: contain;
}

.cp4_nft {
    background: url(assets/nft_cp4.jpg) no-repeat;
    background-position: center center;
    background-size: contain;
}

.cp5_nft {
    background: url(assets/nft_cp5.jpg) no-repeat;
    background-position: center center;
    background-size: contain;
}

.cp6_nft {
    background: url(assets/nft_cp6.jpg) no-repeat;
    background-position: center center;
    background-size: contain;
}

.cp7_nft {
    background: url(assets/nft_cp7.jpg) no-repeat;
    background-position: center center;
    background-size: contain;
}

.cp8_nft {
    background: url(assets/nft_cp8.jpg) no-repeat;
    background-position: center center;
    background-size: contain;
}

.ex_pack_ox {
    background: url(assets/reel_items/reel_ex_oxygen.png) no-repeat;
    background-position: center center;
    background-size: contain;
}

.human_nft {
    background: url(assets/nft_human.jpg) no-repeat;
    background-position: center center;
    background-size: contain;
}

.human10_nft {
    background: url(assets/nft_human10.jpg) no-repeat;
    background-position: center center;
    background-size: contain;
}

.fox_nft {
    background: url(assets/nft_fox.jpg) no-repeat;
    background-position: center center;
    background-size: contain;
}

.wolf_nft {
    background: url(assets/nft_wolf.jpg) no-repeat;
    background-position: center center;
    background-size: contain;
}

.beta_nft {
    background: url(assets/nft_beta.jpg) no-repeat;
    background-position: center center;
    background-size: contain;
}

.nft_buy_btn {
    display: inline-block;
    padding: 10px;
    width: 120px;
    background: rgb(110 240 255 / 20%);
    border: 1px solid rgb(0 0 0 / 10%);
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
    font-size: 12pt;
}

.nft_buy_btn_disabled {
    display: none;
    padding: 10px;
    width: 120px;
    background: rgb(77 79 79 / 20%);
    border: 1px solid rgb(0 0 0 / 10%);
    color: #fff;
    border-radius: 10px;
    font-size: 12pt;
}

.my_nfts_btn {
    display: inline-block;
    padding: 10px;
    width: 120px;
    background: rgb(201 63 164 / 70%);
    border: 1px solid rgb(0 0 0 / 10%);
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
    font-size: 12pt;
}

.my_nfts_link {
    text-decoration: none;
    color: #fff;
}

.tx_wrap {
    display: flex;
    width: 100%;
    align-content: center;
    flex-direction: column;
    align-items: center;
    padding-bottom: 50px;
}

.tx_wrap_sol {
    display: flex;
    width: 100%;
    align-content: center;
    flex-direction: column;
    align-items: center;
    padding-bottom: 50px;
}


.tx_item_sol {
    display: flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-evenly;
    background: rgb(0 0 0 / 20%);
    width: 90%;
    border-radius: 15px;
    padding: 10px;
    font-size: 10pt;
    margin-bottom: 5px;
}

.tx_item_sol a {
    text-decoration: none;
}

.tx_network_sol {
    padding: 5px 10px;
    background: #0ba76b;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
}

.tx_name_sol {
    width: 80px;
    margin-right: 5px;
    padding: 5px 10px;
    background: rgb(62 171 167 / 10%);
    border-radius: 10px;
    color: #fff;
}

.tx_status_sol {
    width: 90px;
    padding: 5px 10px;
}


.human_crafter {
    display: inline-block;
    background: rgb(0 0 0 / 20%);
    padding: 1px 20px 20px 20px;
    margin: 12px;
    border-radius: 15px;
    width: 70%;
}


.human_crafter_info {
    font-size: 10pt;
    background: rgb(0 0 0 / 20%);
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 0;
}

.sol_tx_convert {
    display: inline-block;
    background: #ffa700;
    border-radius: 10px;
    padding: 7px 25px;
    cursor: pointer;
    color: #182c45;
}

.sol_tx_convert_disabled {
    opacity: 0.3;
}


.sol_tx_compose {
    display: inline-block;
    background: #ffa700;
    border-radius: 10px;
    padding: 7px 25px;
    cursor: pointer;
    color: #182c45;
    margin: 2px;
}

.sol_tx_compose_disabled {
    opacity: 0.3;
}


.sol_tx_decompose {
    display: inline-block;
    background: #ffa700;
    border-radius: 10px;
    padding: 7px 25px;
    cursor: pointer;
    color: #182c45;
}

.sol_tx_decompose_disabled {
    opacity: 0.3;
}


.sol_tx_convert_d {
    display: inline-block;
    background: #ffa700;
    border-radius: 10px;
    padding: 7px 25px;
    cursor: pointer;
    color: #182c45;
}

.sol_tx_convert_disabled_d {
    opacity: 0.3;
}


.convert_p_wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    padding: 7px;
}

.convert_p_wrap_btn {
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    z-index: 100;
    cursor: pointer;
}

.convert_p_wrap_selected {
    background: rgb(0 255 123 / 30%);
    border-radius: 15px;
    padding: 5px;
    border: 2px solid #00ff80;
}


.convert_p_wrap_d {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    padding: 7px;
}

.compose_p_wrap_d {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    padding: 7px;
}

.convert_p_wrap_btn_d {
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    z-index: 100;
    cursor: pointer;
}

.compose_p_wrap_btn_d {
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    z-index: 100;
    cursor: pointer;
}

.convert_p_wrap_selected_d {
    background: rgb(0 255 123 / 30%);
    border-radius: 15px;
    padding: 5px;
    border: 2px solid #00ff80;
}

.compose_p_wrap_selected_d {
    background: rgb(0 255 123 / 30%);
    border-radius: 15px;
    padding: 5px;
    border: 2px solid #00ff80;
}


.tx_item {
    display: flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-evenly;
    background: rgb(0 0 0 / 20%);
    width: 90%;
    border-radius: 15px;
    padding: 10px;
    font-size: 10pt;
    margin-bottom: 5px;
}

.tx_item a {
    text-decoration: none;
}

.tx_network {
    padding: 5px 10px;
    background: #b960b2;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
}

.tx_name {
    width: 80px;
    margin-right: 5px;
    padding: 5px 10px;
    background: rgb(62 171 167 / 10%);
    border-radius: 10px;
    color: #fff;
}

.tx_status {
    width: 90px;
    padding: 5px 10px;
}

.boxes_d_wrap {
    width: 60px;
    height: 60px;
    background: rgb(62 171 167 / 10%);
    border-radius: 20px;
    border: 1px solid rgb(80 146 157 / 20%);
    background: url(assets/boxes_d.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    animation: box_shake 20s ease 0s infinite normal none;
    cursor: pointer;
}

.achieve_btn_wrap {
    width: 60px;
    height: 60px;
    background: rgb(62 171 167 / 10%);
    border-radius: 20px;
    border: 1px solid rgb(80 146 157 / 20%);
    background: url(assets/achieve/logo_achieve.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
}


.combo_btn_wrap {
    width: 60px;
    height: 60px;
    background: rgb(62 171 167 / 10%);
    border-radius: 20px;
    border: 1px solid rgb(80 146 157 / 20%);
    background: url(assets/combo_icon.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
}


.daily_btn_wrap {
    width: 60px;
    height: 60px;
    background: rgb(62 171 167 / 10%);
    border-radius: 20px;
    border: 1px solid rgb(80 146 157 / 20%);
    background: url(assets/daily_icon.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
}


.incubator_btn {
    width: 60px;
    height: 60px;
    background: rgb(62 171 167 / 10%);
    border-radius: 20px;
    border: 1px solid rgb(80 146 157 / 20%);
    background: url(assets/incubator.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
}


.ufo_btn_wrap {
    width: 60px;
    height: 60px;
    background: rgb(62 171 167 / 10%);
    border-radius: 20px;
    border: 1px solid rgb(80 146 157 / 20%);
    background: url(assets/ufo_game.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
}


.inventory_btn_wrap {
    width: 60px;
    height: 60px;
    background: rgb(62 171 167 / 10%);
    border-radius: 20px;
    border: 1px solid rgb(80 146 157 / 20%);
    background: url(assets/inventory.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
}


.start_game {
    position: absolute;
    display: flex;
    width: 61px;
    height: 51px;
    z-index: 9;
    left: 23px;
    top: 53px;
    align-items: center;
    justify-content: center;
    animation: stones_shake 60s ease 0s infinite normal forwards;
    cursor: pointer;
}


.pvp_btn {
    position: absolute;
    display: flex;
    width: 75px;
    height: 75px;
    z-index: 9;
    background: url(assets/pvp_logov2.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    left: 329px;
    top: 185px;
    align-items: center;
    justify-content: center;
    animation: stones_shake 60s ease 0s infinite normal forwards;
    cursor: pointer;
}

.multi_btn {
    position: absolute;
    display: flex;
    width: 75px;
    height: 75px;
    z-index: 9;
    background: url(assets/arena_logo.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    left: 75px;
    top: 21px;
    align-items: center;
    justify-content: center;
    animation: stones_shake 60s ease 0s infinite normal forwards;
    cursor: pointer;
}

.mr_btn {
    position: absolute;
    display: flex;
    width: 72px;
    height: 72px;
    z-index: 9;
    background: url(assets/rush_logo.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    left: 11px;
    top: 104px;
    align-items: center;
    justify-content: center;
    animation: stones_shake 60s ease 0s infinite normal forwards;
    cursor: pointer;
}


.bh_btn {
    position: absolute;
    display: flex;
    width: 75px;
    height: 75px;
    z-index: 9;
    background: url(assets/bh_logo.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    left: -5px;
    top: 190px;
    align-items: center;
    justify-content: center;
    animation: stones_shake 60s ease 0s infinite normal forwards;
    cursor: pointer;
}


.bhe_btn {
    position: absolute;
    display: flex;
    width: 75px;
    height: 75px;
    z-index: 9;
    background: url(assets/bh_logo.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    left: -5px;
    top: 120px;
    align-items: center;
    justify-content: center;
    animation: stones_shake 60s ease 0s infinite normal forwards;
    cursor: pointer;
}


.spin_btn {
    position: absolute;
    display: flex;
    width: 75px;
    height: 75px;
    z-index: 9;
    background: url(assets/spin_logo.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    left: 250px;
    top: 23px;
    align-items: center;
    justify-content: center;
    animation: stones_shake 60s ease 0s infinite normal forwards;
    cursor: pointer;
}



.music_off {
    background: url(assets/music_off.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.music_on {
    background: url(assets/music_on.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}


.achieve_new {
    opacity: 0.25;
    cursor: pointer;
}

.achieve_inactive {
    opacity: 0.25;
}

.boxes_cntr {
    display: inline-block;
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ffa700;
    color: #00081e;
    padding: 4px 8px;
    font-size: 8pt;
    border-radius: 10px;
    font-weight: 700;
}

.boxes_page_wrap {
    width: 100%;
    height: 100%;
    text-align: center;
    overflow: scroll;
}

.achieve_page_wrap {
    width: 100%;
    height: 100%;
    text-align: center;
    overflow: scroll;
}

.inventory_page_wrap {
    width: 100%;
    height: 100%;
    text-align: center;
    overflow: scroll;
    padding-bottom: 300px;
}


.lottery_page_wrap {
    width: 100%;
    height: 100%;
    text-align: center;
    overflow: scroll;
    padding-bottom: 30px;
}


.achieve_default_wrap {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-evenly;
    margin-bottom: 10px;
}

.default_achieve {
    position: relative;
    width: 55px;
    height: 55px;
    border-radius: 15px;
    background: #00081e;
    border: 2px solid rgb(255 255 255 / 20%);
}

.achieve_archived {
    width: 100%;
    padding: 2px;
    font-size: 8pt;
    background: rgb(0 0 0 / 50%);
    box-sizing: border-box;
    text-align: center;
    position: absolute;
    top: 20px;
    color: #ffffff;
}

.boxes_d_img {
    display: inline-block;
    width: 190px;
    height: 190px;
    background: url(assets/boxes_d.png) no-repeat;
    background-position: center center;
    background-size: contain;
}

.boxes_d_cntr {
    display: inline-block;
    color: #ffa700;
    font-size: 14pt;
}

.boxes_open_cntr {
    display: inline-block;
    color: #ffa700;
    font-size: 14pt;
}

.boxes_d_reel {
    display: inline-block;
    position: relative;
    overflow: hidden;
    width: 300px;
    border-radius: 15px;
    background: rgb(62 171 167 / 10%);
    border: 1px solid rgb(80 146 157 / 20%);
    margin-bottom: 15px;
}

.boxes_d_reel_start {
    animation: reel 7s ease 0s 1 normal forwards;
}

.boxes_d_reel_start2 {
    animation: reel2 7s ease 0s 1 normal forwards;
}

.boxes_d_reel_start3 {
    animation: reel3 7s ease 0s 1 normal forwards;
}

.boxes_d_reel_start4 {
    animation: reel4 7s ease 0s 1 normal forwards;
}

.boxes_d_reel_start5 {
    animation: reel5 7s ease 0s 1 normal forwards;
}



.box_code_wrap {
    display: flex;
    margin: 10px;
    justify-content: center;
    flex-direction: row;
}

.task_partner_check_disabled {
    opacity: 0.3;
}

.box_code_input {
    color: #b7ede8;
    font-size: 12pt;
    border-radius: 10px;
    border: 1px solid rgb(255 255 255 / 10%);
    width: 116px;
    padding: 12px;
    background: rgb(7 29 26 / 20%);
}

.okx_verify {
    color: #fff;
    font-size: 12pt;
    border-radius: 10px;
    border: 1px solid rgb(255 255 255 / 10%);
    width: 116px;
    padding: 6px 10px;
    background: rgb(255 255 255 / 5%);
}

.box_code_get {
    width: 32px;
    display: inline-block;
    background: #ffa700;
    color: #00081e;
    padding: 10px 15px;
    border-radius: 10px;
    cursor: pointer;
    margin-left: 5px;
}

.box_code_get_disabled {
    opacity: 0.3;
}

@keyframes reel {
    0% {
        transform: translateX(0);
        }
    90% {
    transform: translateX(-2360px);
    }
    100% {
        transform: translateX(-2360px);
        }
}

@keyframes reel2 {
    0% {
        transform: translateX(0);
        }
    90% {
    transform: translateX(-2420px);
    }
    100% {
        transform: translateX(-2420px);
        }
}


@keyframes reel3 {
    0% {
        transform: translateX(0);
        }
    90% {
    transform: translateX(-2410px);
    }
    100% {
        transform: translateX(-2410px);
        }
}

@keyframes reel4 {
    0% {
        transform: translateX(0);
        }
    90% {
    transform: translateX(-2440px);
    }
    100% {
        transform: translateX(-2440px);
        }
}    

@keyframes reel5 {
    0% {
        transform: translateX(0);
        }
    90% {
    transform: translateX(-2390px);
    }
    100% {
        transform: translateX(-2390px);
        }
}   


.boxes_d_reel_item_wrap {
    width: 4800px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.boxes_d_reel_item {
    width: 99px;
    height: 99px;
    border-radius: 10px;
    border: 1px solid rgb(255 255 255 / 10%);
    -webkit-box-shadow: inset 0px 0px 29px -8px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 0px 0px 29px -8px rgba(0,0,0,0.75);
    box-shadow: inset 0px 0px 29px -8px rgba(0,0,0,0.75);
}

.prize_arrow {
    position: absolute;
    top: -15px;
    left: 94px;
    width: 113px;
    height: 158px;
    background: url(assets/box_arrow.png) no-repeat;
    background-position: center center;
    background-size: contain;
    z-index: 9;
}

.boxes_d_open {
    width: 130px;
    display: inline-block;
    background: #ffa700;
    color: #00081e;
    padding: 10px 15px;
    border-radius: 10px;
    cursor: pointer;
}

.boxes_d_open_disabled {
    width: 130px;
    display: none;
    background: rgb(77 79 79 / 20%);
    color: #fff;
    padding: 10px 15px;
    border-radius: 15px;
}

.boxes_d_open_fast {
    width: 43px;
    height: 43px;
    display: inline-block;
    background: url(assets/fast_open.png) no-repeat;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    border-radius: 10px;
    cursor: pointer;
}

.boxes_d_open_fast_disabled {
    width: 43px;
    height: 43px;
    display: none;
    background: url(assets/fast_open.png) no-repeat;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    border-radius: 10px;
    opacity: 0.5;
}

.open_box_btns_wrap {
    display: flex;
    width: 100%;
    align-items: center;
    flex-direction: row;
    justify-content: center;
    gap: 5px;
}

.boxes_d_openings_wrap {
    display: inline-block;
    background: rgb(62 171 167 / 10%);
    width: 300px;
    border-radius: 15px;
    padding: 10px;
}

.boxes_d_openings_item {
    border-radius: 10px;
    background: rgb(62 171 167 / 10%);
    border: 1px solid rgb(80 146 157 / 20%);
    margin: 5px;
    text-align: center;
    font-size: 10pt;
}

.boxes_d_openings_item_prize {
    font-size: 14pt;
    color: #ffa700;
}




.ex_show_wrap {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 10;
}

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

.ex_show_panel {
    display: flex;
    box-sizing: border-box;
    width: 300px;
    padding: 30px;
    background: rgb(18 41 49 / 90%);
    border: 1px solid rgb(80 146 157 / 20%);
    border-radius: 25px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.ex_show_close {
    width: 130px;
    display: inline-block;
    background: #ffa700;
    color: #00081e;
    padding: 10px 15px;
    border-radius: 15px;
    margin-top: 15px;
    cursor: pointer;
}




.card_show_wrap {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 10;
}

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

.card_show_panel {
    display: flex;
    box-sizing: border-box;
    width: 300px;
    padding: 30px;
    background: rgb(18 41 49 / 90%);
    border: 1px solid rgb(80 146 157 / 20%);
    border-radius: 25px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.card_show_close {
    width: 130px;
    display: inline-block;
    background: #ffa700;
    color: #00081e;
    padding: 10px 15px;
    border-radius: 15px;
    margin-top: 15px;
    cursor: pointer;
}


.pcard_wrap {
    width: 220px;
    height: 300px;
    background: #fff;
    border-radius: 15px;
}

.pcard_pack {
    width: 220px;
    height: 300px;
    background: url(assets/card_pack_open.png);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    animation: card_pack_shake 1.5s linear 0s 1 normal forwards;
}


.pcard_pack2 {
    width: 220px;
    height: 300px;
    background: url(assets/card_pack_open2.png);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    animation: card_pack_shake 1.5s linear 0s 1 normal forwards;
}

.pcard_pack3 {
    width: 220px;
    height: 300px;
    background: url(assets/card_pack_open3.png);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    animation: card_pack_shake 1.5s linear 0s 1 normal forwards;
}

.pcard_pack4 {
    width: 220px;
    height: 300px;
    background: url(assets/card_pack_open4.png);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    animation: card_pack_shake 1.5s linear 0s 1 normal forwards;
}

.pcard_pack5 {
    width: 220px;
    height: 300px;
    background: url(assets/card_pack_open5.png);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    animation: card_pack_shake 1.5s linear 0s 1 normal forwards;
}

.pcard_pack6 {
    width: 220px;
    height: 300px;
    background: url(assets/card_pack_open6.png);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    animation: card_pack_shake 1.5s linear 0s 1 normal forwards;
}

.pcard_pack7 {
    width: 220px;
    height: 300px;
    background: url(assets/card_pack_open7.png);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    animation: card_pack_shake 1.5s linear 0s 1 normal forwards;
}

.pcard_pack8 {
    width: 220px;
    height: 300px;
    background: url(assets/card_pack_open8.png);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    animation: card_pack_shake 1.5s linear 0s 1 normal forwards;
}

.pcard_pack9 {
    width: 220px;
    height: 300px;
    background: url(assets/card_pack_open9.png);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    animation: card_pack_shake 1.5s linear 0s 1 normal forwards;
}

.pcard_rare_common {
    background: linear-gradient(45deg, rgb(218 218 218) 0%, rgb(43 69 70) 100%);
    -webkit-box-shadow: 1px 0px 90px 1px rgb(255 255 255 / 50%);
    -moz-box-shadow: 1px 0px 90px 1px rgb(255 255 255 / 50%);
    box-shadow: 1px 0px 90px 1px rgb(255 255 255 / 50%);
}

.pcard_rare_epic {
    background: linear-gradient(45deg, rgb(0 255 141) 0%, rgb(200 22 255) 100%);
    -webkit-box-shadow: 1px 0px 90px 1px rgb(0 236 255 / 50%);
    -moz-box-shadow: 1px 0px 90px 1px rgb(0 236 255 / 50%);
    box-shadow: 1px 0px 90px 1px rgb(0 236 255 / 50%);
}

.pcard_rare_legend {
    background: linear-gradient(45deg, rgb(255 78 0) 0%, rgb(255 176 31) 100%);
    -webkit-box-shadow: 1px 0px 90px 1px rgb(255 153 0 / 50%);
    -moz-box-shadow: 1px 0px 90px 1px rgb(255 153 0 / 50%);
    box-shadow: 1px 0px 90px 1px rgb(255 153 0 / 50%);
}

.pcard_rare_uncommon {
    background: linear-gradient(45deg, rgb(0 67 255) 0%, rgb(115 31 255) 100%);
    -webkit-box-shadow: 1px 0px 90px 1px rgb(0 67 255 / 50%);
    -moz-box-shadow: 1px 0px 90px 1px rgb(0 67 255 / 50%);
    box-shadow: 1px 0px 90px 1px rgb(0 67 255 / 50%);
    
}

.burned_cards {
    color: #ffa700;
}

.pcard_rare_s_n {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.pcard_wrap {
    position: relative;
    display: flex;
    width: 220px;
    height: 300px;
    border-radius: 26px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px solid hsl(0deg 0% 100% / 30%);
    background-repeat: no-repeat;
}



.pcard_flicker {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(assets/cards/card_flicker.png);
    background-position: center center;
    background-size: contain;
    z-index: 101;
}


.pcard_sector_grid {
    display: flex;
    position: absolute;
    top: 4px;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 102;
    box-sizing: border-box;
    border-radius: 25px;
    cursor: pointer;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: flex-start;
    gap: 3px;
}


.pcard_selector_sector {
    position: absolute;
    display: none;
    top: 4px;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 102;
    box-sizing: border-box;
    border-radius: 25px;
    cursor: pointer;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: flex-start;
    gap: 3px;
}

.opponent_card {
    z-index: 101;
}


.pcard_sector_attacked {
    background: red;
    width: 48%;
    height: 21%;
    border-radius: 5px;
    cursor: pointer;
    border: 1px solid red;
    opacity: 0;
}

.pcard_sector_attacked_show {
    animation: pvp_attacked_sector 0.5s ease 0s 1 normal forwards;
}


.pcard_sector {
    background: rgb(255 255 255 / 10%);
    width: 48%;
    height: 21%;
    border-radius: 5px;
    cursor: pointer;
    border: 1px solid #fff;
}

.pvp_sector_selected {
    border: 1px solid #ffa700;
    background: url(assets/cards/attack_sector.png);
    background-position: center;
    background-size: contain;
}

.pcard_selector{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 102;
    box-sizing: border-box;
    border-radius: 25px;
    cursor: pointer;
}


.pcard_rare {
    text-transform: uppercase;
    font-size: 8pt;
    position: absolute;
    bottom: 0px;
    right: 3px;
    padding: 2px 15px;
    border-radius: 18px 0px 18px 0px;
    background: #181818;
    color: #fff;
}

.pcard_inner_wrap {
    position: relative;
    width: 220px;
    height: 280px;
    border-radius: 26px;
    overflow: hidden;
}


.pcard_atack {
    display: flex;
    position: absolute;
    bottom: 60px;
    left: 25px;
    color: #e2e2e2;
    font-size: 10pt;
    gap: 5px;
    align-items: center;
}

.pcard_atack_icon {
    width: 20px;
    height: 20px;
    background: url(assets/cards/atack.png);
    background-position: center center;
    background-size: cover;
}

.pcard_def {
    display: flex;
    position: absolute;
    bottom: 30px;
    left: 25px;
    color: #e2e2e2;
    font-size: 10pt;
    gap: 5px;
    align-items: center;
}

.pcard_def_icon {
    width: 20px;
    height: 20px;
    background: url(assets/cards/def.png);
    background-position: center center;
    background-size: cover;
}

.pcard_reaction {
    display: flex;
    position: absolute;
    bottom: 60px;
    right: 25px;
    color: #e2e2e2;
    font-size: 10pt;
    gap: 5px;
    align-items: center;
}

.pcard_reaction_icon {
    width: 20px;
    height: 20px;
    background: url(assets/cards/reaction.png);
    background-position: center center;
    background-size: cover;
}

.pcard_luck {
    display: flex;
    position: absolute;
    bottom: 30px;
    right: 25px;
    color: #e2e2e2;
    font-size: 10pt;
    gap: 5px;
    align-items: center;
}

.pcard_luck_icon {
    width: 20px;
    height: 20px;
    background: url(assets/cards/luck.png);
    background-position: center center;
    background-size: cover;
}


.pcard_reaction_text {
    text-shadow: 0px 1px 1px rgb(0 0 0 / 50%);
}

.pcard_luck_text {
    text-shadow: 0px 1px 1px rgb(0 0 0 / 50%);
}

.pcard_def_text {
    text-shadow: 0px 1px 1px rgb(0 0 0 / 50%);
}

.pcard_atack_text {
    text-shadow: 0px 1px 1px rgb(0 0 0 / 50%);
}


.pcard_open_wobble {
    animation: card_open_wobble 1s ease 0s 1 normal forwards;
}

.my_cards_wrap {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    overflow-x: scroll;
    box-sizing: border-box;
    padding: 5px;
    border-top: 5px solid rgb(0 0 0 / 10%);
    border-bottom: 5px solid rgb(0 0 0 / 10%);
    gap: 4px;
}

.my_cards_item{
    display:inline-block;
}

/* .pcard_my {
    transform: scale(0.98);
} */

.card_selected {
    border: 2px solid #ffa700;
    transform: scale(1.03);
}

@keyframes card_open_wobble {
	0%,
	100% {
		transform: translateX(0%);
		transform-origin: 50% 50%;
	}

	15% {
		transform: translateX(-30px) rotate(-3deg);
	}

	30% {
		transform: translateX(15px) rotate(3deg);
	}

	45% {
		transform: translateX(-15px) rotate(-1.5deg);
	}

	60% {
		transform: translateX(9px) rotate(1deg);
	}

	75% {
		transform: translateX(-6px) rotate(-0.5deg);
	}
}



@keyframes card_pack_shake {
	0%,
	100% {
		transform: rotate(0deg);
		transform-origin: 50% 50%;
	}

	10% {
		transform: rotate(1deg);
	}

	20%,
	40%,
	60% {
		transform: rotate(-1deg);
	}

	30%,
	50%,
	70% {
		transform: rotate(1deg);
	}

	80% {
		transform: rotate(-1deg);
	}

	90% {
		transform: rotate(1deg);
	}
}



.bh_prize_item {
    width: 45px;
    height: 45px;
    margin: 2px;
    border-radius: 10px;
    border: 1px solid rgb(255 255 255 / 20%);
}

.bhe_modal_wrap {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 10;
}

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

.bhe_click {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    cursor: pointer;
    z-index: 5;
}

.bhe_click_select {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    cursor: pointer;
    z-index: 5;
}

.bhe_id_copy {
    position: absolute;
    width: 25px;
    height: 25px;
    top: 0;
    left: 0;
    background: url(assets/icon_copy.png);
    background-position: center center;
    background-size: contain;
    cursor: pointer;
    z-index: 6;
}

.bhe_modal_panel {
    display: flex;
    box-sizing: border-box;
    width: 330px;
    padding: 30px;
    background: rgb(18 41 49 / 90%);
    border: 1px solid rgb(80 146 157 / 20%);
    border-radius: 25px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.bhe_modal_main {
    display: flex;
    width: 100%;
    height: 320px;
    overflow-x: scroll;
    flex-direction: column;
    flex-wrap: wrap;
    background: rgb(0 0 0 / 20%);
    border-radius: 15px;
    padding: 10px;
    border: 1px solid rgb(255 255 255 / 10%);
    text-align: center;
}

.bh_prize_wrap {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 10;
}

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

.bh_prize_panel {
    display: flex;
    box-sizing: border-box;
    width: 300px;
    padding: 30px;
    background: rgb(18 41 49 / 90%);
    border: 1px solid rgb(80 146 157 / 20%);
    border-radius: 25px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.bh_prize_close {
    width: 130px;
    display: inline-block;
    background: #ffa700;
    color: #00081e;
    padding: 10px 15px;
    border-radius: 15px;
    cursor: pointer;
    margin-top: 15px;
    text-align: center;
}

.boxes_prize_wrap {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.boxes_inv_text {
    font-size: 10pt;
    margin-bottom: 15px;
    background: hsl(0deg 0% 100% / 10%);
    padding: 10px;
    border-radius: 10px;
}

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

.boxes_prize_panel {
    display: flex;
    box-sizing: border-box;
    width: 300px;
    padding: 30px;
    background: rgb(18 41 49 / 90%);
    border: 1px solid rgb(80 146 157 / 20%);
    border-radius: 25px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.achieve_info_wrap {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 10;
}

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

.achieve_info_panel {
    display: flex;
    box-sizing: border-box;
    width: 300px;
    padding: 30px;
    background: rgb(18 41 49 / 90%);
    border: 1px solid rgb(80 146 157 / 20%);
    border-radius: 25px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.boxes_prize {
    width: 160px;
    height: 160px;
    border-radius: 15px;
    margin-bottom: 20px;
}

.my_cards_burn_wrap {
    display: none;
}

.my_cards_caution {
    display: inline-block;
    font-size: 10pt;
    background: rgb(0 0 0 / 30%);
    border-radius: 15px;
    box-sizing: border-box;
    padding: 15px;
    margin-top: 10px;
    width: 280px;
    text-align: justify;
}

.my_cards_burn {
    width: 95px;
    display: inline-block;
    background: #ffa700;
    color: #00081e;
    padding: 10px 15px;
    border-radius: 15px;
    cursor: pointer;
    margin-top: 10px;
}


.my_cards_set {
    width: 95px;
    display: inline-block;
    background: #ffa700;
    color: #00081e;
    padding: 10px 15px;
    border-radius: 15px;
    cursor: pointer;
    margin-top: 10px;
}

.my_cards_burn_disabled {
    opacity: 0.3;
}

.my_cards_set_disabled {
    opacity: 0.3;
}

.boxes_prize_close {
    width: 130px;
    display: inline-block;
    background: #ffa700;
    color: #00081e;
    padding: 10px 15px;
    border-radius: 15px;
    cursor: pointer;
}

.achieve_info_close {
    width: 130px;
    display: inline-block;
    background: #ffa700;
    color: #00081e;
    padding: 10px 15px;
    border-radius: 15px;
    cursor: pointer;
    margin: 5px;
}

.achieve_get_prize {
    width: 130px;
    display: inline-block;
    background: url(assets/achieve/btn_bg.jpg);
    color: #fff;
    padding: 10px 15px;
    border-radius: 15px;
    cursor: pointer;
    animation: bg-animation 18s ease infinite;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

@keyframes bg-animation {
    0% {
      background-position: 0% 50% 0 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50% 0 50%;
    }
  }

.achieve_get_prize_disabled {
    display: none;
    width: 130px;
    background: rgb(77 79 79 / 20%);
    border: 1px solid rgb(0 0 0 / 10%);
    color: #fff;
    padding: 10px 15px;
    border-radius: 15px;
    cursor: pointer;
}

.achieve_info_text {
    padding: 15px;
    background: rgb(0 0 0 / 20%);
    margin-bottom: 15px;
    border-radius: 15px;
}

.achieve_info_img {
    width: 60px;
    height: 60px;
    border-radius: 15px;
    margin-bottom: 15px;
    border: 2px solid rgb(255 255 255 / 10%);
}

.boost_perc {
    color: #ffa700;
}


.daily_items_wrap {
    display: flex;
    width: 300px;
}

.daily_item_cont {
    width: 70px;
    height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #000;
    margin: 5px;
    border-radius: 10px;
    padding: 2px;
    background: rgb(4 26 25 / 30%);
    border: 2px solid #10ffb1;
}

.daily_item_inactive {
    opacity: 0.3;
    border: 2px solid rgb(28 39 37 / 20%);
}

.daily_item_header {
    background: rgb(3 3 3 / 20%);
    font-size: 9pt;
    margin-bottom: 4px;
    padding: 2px 10px;
    border-radius: 5px;
}

.daily_item_img {
    width: 50px;
    height: 50px;
    border-radius: 10px;
}

.daily_get {
    text-align: center;
    width: 130px;
    display: inline-block;
    background: #ffa700;
    color: #00081e;
    padding: 10px 15px;
    border-radius: 15px;
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 50px;
}

.daily_get_inactive {
    opacity: 0.3;
}

.daily_get_true {
    background: rgb(16 255 130 / 50%);
}

@keyframes box_shake {
    0%,
    100% {
      transform: translateY(0);
    }
  
    10%,
    30%,
    50%,
    70% {
      transform: translateY(-5px);
    }
  
    20%,
    40%,
    60% {
      transform: translateY(5px);
    }
  
    80% {
      transform: translateY(3.4px);
    }
  
    90% {
      transform: translateY(-3.4px);
    }
  }


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


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

@keyframes flicker_main {
    0% {
      opacity: 0.6;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 0.6;
    }
  }

@keyframes flicker_bottom {
    0% {
      opacity: 0.8;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 0.8;
    }
  }

 @keyframes flicker_dome {
    0% {
      opacity: 0.5;
    }
    50% {
        opacity: 0.1;
    }
    100% {
        opacity: 0.5;
    }
  }

@keyframes base_shake {
	0% {
		transform: translate(0);
	}
	10% {
		transform: translate(-2px, -2px);
	}
	20% {
		transform: translate(2px, -2px);
	}
	30% {
		transform: translate(-2px, 2px);
	}
	40% {
		transform: translate(2px, 2px);
	}
	50% {
		transform: translate(-2px, -2px);
	}
	60% {
		transform: translate(2px, -2px);
	}
	70% {
		transform: translate(-2px, 2px);
	}
	80% {
		transform: translate(-2px, -2px);
	}
	90% {
		transform: translate(2px, -2px);
	}
	100% {
		transform: translate(0);
	}
}

@keyframes stones_shake {
	0% {
		transform: translate(0);
	}
	10% {
		transform: translate(-5px, -3px);
	}
	20% {
		transform: translate(1px, -3px);
	}
	30% {
		transform: translate(-5px, 3px);
	}
	40% {
		transform: translate(2px, 4px);
	}
	50% {
		transform: translate(-2px, -1px);
	}
	60% {
		transform: translate(4px, -3px);
	}
	70% {
		transform: translate(-2px, 4px);
	}
	80% {
		transform: translate(-1px, -2px);
	}
	90% {
		transform: translate(-3px, -1px);
	}
	100% {
		transform: translate(0);
	}
}




.combo_container {
    display: flex;
    flex-wrap: wrap;
    width: 275px;
    justify-content: center;
    background: rgb(21 70 79 / 30%);
    border-radius: 25px;
    box-sizing: border-box;
    padding: 15px;
    border: 1px solid rgb(47 47 47 / 40%);
}

.combo_item {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    cursor: pointer;
}

.sortable-drag { opacity: 0; }

.combo_1 {
    background: url(assets/combo/1.png);
    background-size: contain;
    background-position: center center;
}

.combo_2 {
    background: url(assets/combo/2.png);
    background-size: contain;
    background-position: center center;
}

.combo_3 {
    background: url(assets/combo/3.png);
    background-size: contain;
    background-position: center center;
}

.combo_4 {
    background: url(assets/combo/4.png);
    background-size: contain;
    background-position: center center;
}

.combo_5 {
    background: url(assets/combo/5.png);
    background-size: contain;
    background-position: center center;
}

.combo_6 {
    background: url(assets/combo/6.png);
    background-size: contain;
    background-position: center center;
}

.combo_7 {
    background: url(assets/combo/7.png);
    background-size: contain;
    background-position: center center;
}

.combo_8 {
    background: url(assets/combo/8.png);
    background-size: contain;
    background-position: center center;
}

.combo_check {
    width: 180px;
    font-size: 12pt;
    text-align: center;
    border-radius: 15px;
    border: 1px solid rgb(255 255 255 / 10%);
    padding: 10px;
    background: rgb(28 153 134 / 20%);
    cursor: pointer;
    box-sizing: border-box;
    margin-top: 10px;
}

.combo_check_disabled {
    opacity: 0.3;
}

.combo_prize_wrap {
    width: 250px;
    display: flex;
    background: rgb(12 12 12 / 30%);
    border-radius: 25px;
    box-sizing: border-box;
    padding: 15px;
    border: 1px solid rgb(47 47 47 / 40%);
    flex-direction: row;
    align-items: center;
    margin-top: 25px;
    justify-content: space-around;
}

.combo_timer {
    font-size: 10pt;
    background: rgb(12 12 12 / 30%);
    border-radius: 15px;
    box-sizing: border-box;
    padding: 15px;
    margin-bottom: 10px;
}


#ton-connect {
    display: inline-block;
    margin-left: auto;
}

.wallet_ton_connect {
    display: inline-block;
}

.ton_connect_wrap {
    display: flex;
    width: 330px;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 15px;
    background: rgb(0 0 0 / 30%);
    align-items: center;
}

.ton_bundle_wrap {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgb(114 203 255 / 20%);
    padding: 10px;
    border-radius: 15px;
    margin-top: 10px;
}


.ton_tx_wrap {
    width: 330px;
    box-sizing: border-box;
    padding: 5px;
    background: rgb(12 12 12 / 30%);
    border-radius: 15px;
    max-height: 350px;
    flex-direction: column;
    gap: 5px;
    overflow: scroll;
}

.ton_tx_item {
    font-size: 12pt;
    display: flex;
    width: 310px;
    box-sizing: border-box;
    padding: 10px;
    background: rgb(12 12 12 / 30%);
    border-radius: 15px;
    align-items: center;
    gap: 10px;
    margin: 5px;
}

.ton_tx_status {
    margin-left: auto;
    padding: 10px;
    border-radius: 10px;
}

.ton_tx_type {
    padding: 10px;
    border-radius: 10px;
    background: rgb(55 83 80 / 30%);
}

.ton_tx_amount {
    padding: 10px;
    border-radius: 10px;
    background: rgb(55 83 80 / 30%);
}

.ton_tx_check {
    background: rgb(56 220 204 / 30%);
    cursor: pointer;
}

.ton_tx_check_disabled {
    opacity: 0.3;
}

.ton_tx_success {
    background: rgba(56, 220, 78, 0.3);
}

.ton_bundle_star_wrap {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgb(255 142 0 / 20%);
    padding: 10px;
    border-radius: 15px;
    margin-top: 10px;
}

.ton_bundle_item {
    position: relative;
    width: 45px;
    height: 45px;
    border-radius: 15px;
    border: 2px solid rgb(255 255 255 / 30%);
}

.ton_bundle_cnt {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #ffa700;
    color: #00081e;
    font-size: 8pt;
    border-radius: 0px 10px 0px 10px;
    padding: 5px 5px; 
}

.ton_bundle_price_wrap {
    display: flex;
    background: rgb(0 152 234);
    width: 70px;
    height: 49px;
    border-radius: 15px;
    margin-left: auto;
    align-items: center;
    justify-content: center;
    gap: 2px;
    cursor: pointer;
}

.ton_bundle_price_wrap_disabled {
    opacity: 0.3;
}

.ton_bundle_price_star_wrap_disabled {
    opacity: 0.3;
}

.ton_bundle_price_star_wrap {
    display: flex;
    background: rgb(255 167 0);
    width: 70px;
    height: 49px;
    border-radius: 15px;
    margin-left: auto;
    align-items: center;
    justify-content: center;
    gap: 2px;
    cursor: pointer;
    color: #fff;
}

.ton_bundle_price_icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: middle;
    background: url(assets/ton_icon.png) no-repeat;
    background-position: center center;
    background-size: contain;
    margin-top: 4px;
}

.ton_bundle_price_icon_star {
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: middle;
    background: url(assets/ton_icon_star.png) no-repeat;
    background-position: center center;
    background-size: contain;
    margin-top: 2px;
}

.bundle_human {
    background: url(assets/reel_items/reel_human.jpg);
    background-size: contain;
    background-position: center center;
}

.bundle_cap {
    background: url(assets/nft_capsule.jpg);
    background-size: contain;
    background-position: center center;
}

.bundle_card_emerald {
    background: url(assets/reel_items/reel_card4.png);
    background-size: contain;
    background-position: center center;
}


.bundle_card_glow {
    background: url(assets/reel_items/reel_card3.png);
    background-size: contain;
    background-position: center center;
}

.bundle_card_def {
    background: url(assets/reel_items/reel_card.png);
    background-size: contain;
    background-position: center center;
}

.bundle_ex_eskzone {
    background: url(assets/reel_items/reel_ex_eskzone.png);
    background-size: contain;
    background-position: center center;
}

.bundle_ex_oxygen {
    background: url(assets/reel_items/reel_ex_oxygen.png);
    background-size: contain;
    background-position: center center;
}

.bundle_card_fire {
    background: url(assets/reel_items/reel_card2.png);
    background-size: contain;
    background-position: center center;
}

.bundle_boost_5 {
    background: url(assets/reel_items/reel_boost5.jpg);
    background-size: contain;
    background-position: center center;
}

.bundle_boost_10 {
    background: url(assets/reel_items/reel_boost10.jpg);
    background-size: contain;
    background-position: center center;
}

.bundle_boost_25 {
    background: url(assets/reel_items/reel_boost25.jpg);
    background-size: contain;
    background-position: center center;
}

.bundle_boost_100 {
    background: url(assets/reel_items/reel_boost100.jpg);
    background-size: contain;
    background-position: center center;
}

.bundle_boost_1000 {
    background: url(assets/reel_items/reel_boost1000.jpg);
    background-size: contain;
    background-position: center center;
}

.bundle_res {
    background: url(assets/reel_items/reel_resurrector.jpg);
    background-size: contain;
    background-position: center center;
}

.bundle_timer {
    background: url(assets/reel_items/reel_timerh1.jpg);
    background-size: contain;
    background-position: center center;
}

.bundle_box {
    background: url(assets/reel_items/reel_box.jpg);
    background-size: contain;
    background-position: center center;
}


.ton_bundles_wrap {
    width: 330px;
    box-sizing: border-box;
    text-align: center;
    padding: 10px;
    border-radius: 15px;
    background: rgb(0 0 0 / 20%);
    margin-top: 10px;
}


.socket_reel_wrap {
    display: flex;
    width: 100%;
    height: 72px;
    gap: 1px;
    margin-top: -8px;
    margin-bottom: 10px;
    background: rgb(0 0 0 / 30%);
    align-items: center;
    padding: 4px;
    overflow: hidden;
    box-sizing: border-box;
    justify-content: flex-start;
    opacity: 0.7;
}

.reel_blur {
    filter: blur(16px) grayscale(100%);
}

.socket_reel_item_wrap {
    display: flex;
    flex-direction: column;
    width: 55px;
    align-items: center;
    gap: 2px;
}

.socket_reel_item_img{
    width: 50px;
    height: 50px;
    border-radius: 10px;
}

.socket_reel_item_username{
    width: 50px;
    height: 15px;
    background: rgb(0 0 0 / 30%);
    overflow: hidden;
    font-size: 8pt;
    text-align: left;
    padding-left: 3px;
    box-sizing: border-box;
    color: #5da99f;
    border-radius: 5px;
}


.bet_cont {
    display: inline-block;
    width: 300px;
    background: rgb(0 0 0 / 30%);
    border-radius: 20px;
    padding: 10px;
    box-sizing: border-box;
}


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


.lottery_prize_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}


.bet_icon {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 15px;
    border: 2px solid rgb(255 255 255 / 30%);
    margin: 5px;
}



.lottery_btn {
    position: absolute;
    width: 75px;
    height: 75px;
    z-index: 9;
    left: 315px;
    bottom: 322px;
    background: url(assets/lottery_logo.png);
    background-position: center center;
    background-size: contain;
    animation: stones_shake 60s ease 0s infinite normal forwards;
}

.lottery_page_logo {
    display: inline-block;
    width: 140px;
    height: 140px;
    background: url(assets/lottery_logo.png);
    background-position: center center;
    background-size: contain;
    margin-top: 20px;
}



.pvp_page_logo {
    width: 160px;
    height: 160px;
    background: url(assets/pvp_logov2.png);
    background-position: center center;
    background-size: contain;
    margin-bottom: 5px;
}


.lottety_flicker{
    width: 100%;
    height: 100%;
    cursor: pointer;
    background: url(assets/lottery_flicker.png);
    background-position: center center;
    background-size: contain;
    animation: flicker_bottom 0.6s infinite;
}

.lottery_next {
    color: #ffa700;
    font-size: 14pt;
}

.lottery_next_wrap {
    font-size: 12pt;
    background: rgb(0 0 0 / 30%);
    padding: 10px;
    margin-top: 0px;
}


.lottery_users_wrap {
    display: inline-block;
    background: rgb(62 171 167 / 10%);
    width: 300px;
    border-radius: 15px;
    padding: 10px;
    max-height: 230px;
    overflow-y: scroll;
}


.lottery_winners_wrap {
    display: inline-block;
    background: rgb(62 171 167 / 10%);
    width: 300px;
    border-radius: 15px;
    padding: 10px;
}


.ticket_icon {
    display: inline-block;
    background: url(assets/ticket_icon.png);
    background-position: center center;
    background-size: contain;
    width: 23px;
    height: 23px;
    margin-top: 4px;
}

.lottery_user {
    display: flex;
    margin: 5px;
    background: rgb(0 0 0 / 10%);
    padding: 10px;
    border-radius: 10px;
    align-items: center;
    gap: 10px;
    font-size: 12pt;
}

.lottery_user_chance {
    margin-left: auto;
}

.lottery_user_chance_text {
    color: #ffa700;
}

.lottery_user_tickets_cntr{
    color: #ffa700;
}

.lottery_user_tickets {
    display: flex;
    align-items: center;
}

.lottery_bet_btn {
    width: 130px;
    display: inline-block;
    background: #ffa700;
    color: #00081e;
    padding: 10px 15px;
    border-radius: 10px;
    cursor: pointer;
    margin-top: 10px;
}


.lottery_ad_btn {
    width: 130px;
    display: inline-block;
    background: rgb(0 0 0 / 30%);
    padding: 10px 15px;
    border-radius: 10px;
    cursor: pointer;
    margin-top: 7px;
}

.bts {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgb(0 159 255);
    padding: 10px;
    border-radius: 15px;
    margin-top: 10px;
    justify-content: center;
}

.lottery_bet_btn_disabled {
    opacity: 0.3;
}

.lottery_ad_btn_disabled {
    opacity: 0.3;
}

.lottery_your_tickets {
    color: #ffa700;
    font-size: 14pt;
}

.lottery_your_chance {
    color: #ffa700;
    font-size: 14pt;
}

.bet_icon_cntr {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #ffa700;
    color: #00081e;
    font-size: 8pt;
    border-radius: 0px 10px 0px 10px;
    padding: 5px 5px; 
}
.lottery_user_name{
    width: 75px;
    overflow: hidden;
    white-space: nowrap;
}

.lottery_winner_wrap {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 10;
}

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

.lottery_winner_text{
    color: #ffa700;
    font-size: 16pt;
}


.capsule_desc {
    font-size: 10pt;
    background: rgb(0 0 0 / 30%);
    border-radius: 15px;
    box-sizing: border-box;
    padding: 15px;
    margin-top: 10px;
    width: 280px;
    text-align: justify;
}

.capsule_item_wrap {
    width: 260px;
    display: flex;
    align-items: center;
    padding: 10px;
    background: rgb(0 0 0 / 10%);
    border-radius: 15px;
    justify-content: space-between;
}

.capsule_item {
    position: relative;
    width: 55px;
    height: 55px;
    background: #000;
    border-radius: 15px;
    border: 2px solid rgb(255 255 255 / 20%);
}

.capsule_create {
    display: inline-block;
    background: #ffa700;
    color: #00081e;
    padding: 10px 15px;
    border-radius: 10px;
    cursor: pointer;
    margin-top: 15px;
}

.capsule_create_disabled {
    opacity: 0.3;
}

.created_humans {
    font-size: 10pt;
    margin-top: 5px;
}

.capsule_humans_cnt {
    color: #ffa700;
}

.icon_neuint {
    background: url(assets/reel_items/reel_neuint.jpg) no-repeat;
    background-position: center center;
    background-size: contain;
}

.icon_ethmat {
    background: url(assets/reel_items/reel_ethmat.jpg) no-repeat;
    background-position: center center;
    background-size: contain;
}

.icon_dna {
    background: url(assets/reel_items/reel_dna.jpg) no-repeat;
    background-position: center center;
    background-size: contain;
}

.icon_protein {
    background: url(assets/reel_items/reel_protein.jpg) no-repeat;
    background-position: center center;
    background-size: contain;
}

.capsule_cntr_wrap {
    font-size: 12pt;
    padding: 10px;
    background: rgb(255 182 0 / 10%);
    border-radius: 10pt;
    margin-bottom: 10px;
    border: 1px solid rgb(255 188 0 / 20%);
    color: #fff;
}

.pvp_inv_item_empty {
    width: 220px;
    height: 300px;
    background:#000;
    border-radius: 25px;
    border: 2px solid rgb(255 255 255 / 20%);
}

.pvp_inv_item {
    transform: scale(0.4);
    margin: -100px;
    margin-top: -80px;
    margin-bottom: -80px;
}

.pvp_inv_set {
    display: flex;
    justify-content: space-evenly;
    flex-direction: row;
    align-items: center;
}

.pvp_set_remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 50px;
    height: 50px;
    background: url(assets/cards/remove.png);
    background-size: contain;
    background-position: center;
    cursor: pointer;
    z-index: 102;
}

.pvp_set_remove_disabled {
    opacity: 0.3;
}

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

.pvp_main_jc_wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pvp_main_jc_input {
    color: #b7ede8;
    font-size: 12pt;
    border-radius: 10px;
    border: 1px solid rgb(255 255 255 / 10%);
    width: 116px;
    padding: 13px;
    background: rgb(7 29 26 / 20%);
}

.pvp_main_jc_play {
    font-size: 12pt;
    border-radius: 10px;
    border: 1px solid rgb(255 255 255 / 10%);
    width: 60px;
    padding: 12px;
    margin-left: 5px;
    text-align: center;
    background: rgb(7 29 26 / 20%);
    cursor: pointer;
}

.pvp_main_create {
    font-size: 12pt;
    border-radius: 10px;
    border: 1px solid rgb(255 255 255 / 10%);
    width: 208px;
    padding: 12px;
    margin-top: 5px;
    text-align: center;
    background: rgb(7 29 26 / 20%);
    cursor: pointer;
}

.pvp_main_rooms_wrap {
    display: inline-block;
    font-size: 10pt;
    background: rgb(0 0 0 / 30%);
    border-radius: 10px;
    box-sizing: border-box;
    padding: 15px;
    width: 230px;
}

.pvp_page_back {
    z-index: 3;
    position: fixed;
    top:20px;
    right: 20px;
    padding: 10px;
    border: 1px solid rgb(255 255 255 / 10%);
    background: rgb(93 150 153 / 20%);
    cursor: pointer;
    font-size: 12pt;
    border-radius: 10px;
}

.pvp_create {
    width: 95px;
    background: #ffa700;
    color: #00081e;
    padding: 10px 15px;
    border-radius: 15px;
    cursor: pointer;
    margin-top: 20px;
    text-align: center;
}

.pvp_create_disabled {
    opacity: 0.3;
}

.pvp_page_select_set_wrap {
    display: flex;
    width: 280px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    font-size: 12pt;
    cursor: pointer;
}

.pvp_page_select_set {
    position: relative;
    text-align: center;
    width: 120px;
    height: 160px;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 15px;
    background: rgb(0 0 0 / 15%);
}

.pvp_page_select_set_selected {
    border:2px solid #ffa700;
    transform: scale(1.05);
}

.pvp_psc {
    font-size: 12pt;
    background: #ffa700;
    color: #000;
    padding: 1px 10px;
    border-radius: 5px;
}

.pvp_ingame_cards_wrap {
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    gap: 1px;
}

.pvp_arena_item_empty {
    width: 220px;
    height: 300px;
    background:#000;
    border-radius: 25px;
    border: 2px solid rgb(255 255 255 / 20%);
}

.pvp_ingame_arena {
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    /* background: rgb(0 0 0 / 10%); */
    background: url('assets/cards/arena.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    padding: 2px 10px;
    border-radius: 22px;
    gap: 30px;
}

.pvp_arena_item {
    transform: scale(0.4);
    margin: -64px;
    margin-top: -80px;
    margin-bottom: -80px;
}

.pvp_arena_code {
    background: rgb(0 0 0 / 10%);
    padding: 20px 15px;
    border-radius: 22px;
    margin-bottom: 10px;
    font-size: 12pt;
}

.pvp_arena_code_text {
    color: #ffa700;
    cursor: pointer;
}

.pcard_hp_wrap {
    position: absolute;
    width: 100%;
    bottom: 0;
    box-sizing: border-box;
    text-align: center;
    background: #252525;
}

.pcard_hp_text {
    position: relative;
    z-index: 15;
}

.pcard_hp_line {
    position: absolute;
    height: 100%;
    bottom: 0;
    left: 0;
}

.pvp_main_jc_play_disabled {
    opacity: 0.3;
}

.pcard_pvp_can_select_start {
    border: 5px solid #ffa700;
}

.pcard_pvp_can_select {
    border: 5px solid #ffa700;
}

.pvp_arena_small_cards {
    transform: scale(0.9);
    margin: -5px;
    transition: transform 0.3s ease, margin 0.3s ease; /* Плавный переход */
}

.pvp_p_controls {
    width: 100%;
    position: absolute;
    justify-content: center;
    display: none;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    bottom:-28px;
}

.pvp_attack_btn {
    font-size: 12pt;
    width: 65px;
    display: inline-block;
    background: #ffa700;
    color: #00081e;
    padding: 6px 10px;
    border-radius: 10px;
    cursor: pointer;
    margin-top: 10px;
    text-align: center;
}

.pvp_replace_card_btn {
    font-size: 12pt;
    width: 115px;
    display: inline-block;
    background: rgb(9 30 35);
    padding: 6px 10px;
    border-radius: 10px;
    cursor: pointer;
    margin-top: 10px;
    text-align: center;
}

.pvp_timer {
    position: absolute;
    top: 43px;
    font-size: 18pt;
    font-weight: bold;
    width: 100%;
    display: inline-block;
    padding: 6px 10px;
    border-radius: 10px;
    box-sizing: border-box;
    cursor: pointer;
    margin-top: 10px;
    text-align: center;
    color: #ffa700;
}

.pvp_damage_ani {
    animation: pvp_damage 0.5s ease 0s 1 normal forwards;
}

.pvp_attack_ani {
    animation: pvp_attack 0.5s ease 0s 1 normal forwards;
}

@keyframes pvp_attack {
	0%,
	100% {
		transform: translateY(0) rotate(0);
		transform-origin: 50% 50%;
	}

	15% {
		transform: translateY(-10px) rotate(-6deg);
	}

	30% {
		transform: translateY(5px) rotate(6deg);
	}

	45% {
		transform: translateY(-5px) rotate(-3.6deg);
	}

	60% {
		transform: translateY(3px) rotate(2.4deg);
	}

	75% {
		transform: translateY(-2px) rotate(-1.2deg);
	}
}


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

	100% {
		opacity: 0;
	}
}


@keyframes pvp_damage {
	0%,
	100% {
		transform: rotate(0deg);
		transform-origin: 50% 50%;
	}

	10% {
		transform: rotate(2deg);
	}

	20%,
	40%,
	60% {
		transform: rotate(-3deg);
	}

	30%,
	50%,
	70% {
		transform: rotate(2deg);
	}

	80% {
		transform: rotate(-3deg);
	}

	90% {
		transform: rotate(2deg);
	}
}

.pvp_attack_cdamage {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url(assets/cards/cdamage.png);
    z-index: 105;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    animation: attack_effect_vib 0.7s ease 0s 1 normal forwards;
}

.pvp_attack_dodge {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url(assets/cards/dodge.png);
    z-index: 105;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    animation: attack_effect_vib 0.7s ease 0s 1 normal forwards;
}

.pvp_defeat {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url(assets/cards/defeat.png);
    z-index: 105;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    animation: pvp_end 0.7s ease 0s 1 normal forwards;
}

.pvp_victory {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url(assets/cards/victory.png);
    z-index: 105;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    animation: pvp_end 0.7s ease 0s 1 normal forwards;
}


.pvp_end {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url(assets/cards/disconnect.png);
    z-index: 105;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    animation: pvp_end 0.7s ease 0s 1 normal forwards;
}


@keyframes attack_effect_vib {
	0% {
        opacity: 0;
        transform: scale(0.1);
		transform: translate(0);
	}

	20% {
        opacity: 1;
		transform: translate(-2px, 2px);
	}

    30% {
        opacity: 1;
		transform: translate(2px, 2px);
	}

	40% {
		transform: translate(-2px, -2px);
	}

    50% {
		transform: translate(2px, -2px);
	}

	60% {
		transform: translate(2px, 2px);
	}

    70% {
		transform: translate(-2px, -2px);
	}

	80% {
		transform: translate(2px, -2px);
	}

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

@keyframes pvp_end {
	0% {
        opacity: 0;
        transform: scale(0.1);
		transform: translate(0);
	}

	20% {
        opacity: 1;
		transform: translate(-2px, 2px);
	}

    30% {
        opacity: 1;
		transform: translate(2px, 2px);
	}

	40% {
		transform: translate(-2px, -2px);
	}

    50% {
		transform: translate(2px, -2px);
	}

	60% {
		transform: translate(2px, 2px);
	}

    70% {
		transform: translate(-2px, -2px);
	}

	80% {
		transform: translate(2px, -2px);
	}

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

.pvp_main_stat_wrap {
    background: rgb(0 0 0 / 20%);
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 12pt;
    margin-bottom: 10px;
}

.pvp_main_v {
    color: #ffa700;
    font-size: 14pt;
}

.pvp_main_d {
    color: #ffa700;
    font-size: 14pt;
}

.pvp_win_rare_text {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 10pt;
    background: rgb(0 0 0 / 30%);
    color: #fff;
    padding: 2px 5px;
    border-radius: 15px 0px 10px 0px;
}

.wins_rare_icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: middle;
    background: url(assets/cards/wins_rare.png) no-repeat;
    background-position: center center;
    background-size: contain;
    margin: 1px;
}

.pvp_opponent_name {
    position: absolute;
    top: -20px;
    font-size: 12pt;
    width: 100%;
    text-align: center;
    color: #ffa700;
}

.my_cards_sort_input {
    color: #b7ede8;
    font-size: 12pt;
    border-radius: 10px;
    border: 1px solid rgb(255 255 255 / 10%);
    width: 35px;
    background: rgb(7 29 26 / 20%);
}

.my_cards_sort_wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    width: 310px;
}

.my_cards_sort_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 85px;
    justify-content: space-around;
}

.my_cards_sort_controls {
    width: 70px;
}

.my_cards_sort_filter {
    width: 100%;
    display: inline-block;
    background: #ffa700;
    color: #00081e;
    padding: 10px 15px;
    border-radius: 15px;
    cursor: pointer;
    font-size: 12pt;
}

.my_cards_sort_controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 85px;
    justify-content: space-around;
}

.my_cards_sort_btn {
    width: 100%;
    display: inline-block;
    background: #ffa700;
    color: #00081e;
    padding: 9px 3px;
    border-radius: 15px;
    cursor: pointer;
    font-size: 12pt;
}


/* .snow {
    background: white;
    border-radius: 100%;
    left: 50%;
    position: absolute;
    top: 0;
    width: 1px;
    height: 1px;
  
    z-index: 99;
    box-shadow: 0 0px 2px 0px #fff, 10px 10px 0px 0 #fff, 50px 20px 2px 0 #fff,
      100px 30px 2px 0 #fff, 30px 70px 2px 0 #fff, 130px 70px 2px 0px #fff,
      -30px 30px 2px 0 #fff, -55px 45px 2px 0 #fff, -70px 30px 2px 0 #fff,
      -130px 40px 2px 0 #fff, -150px 90px 2px 0 #fff, -160px 80px 2px 0 #fff,
      -190px 130px 2px 0 #fff, -150px 150px 2px 0 #fff, -130px 120px 2px 0 #fff,
      -100px 130px 2px 0 #fff, -90px 80px 2px 0 #fff, -40px 100px 2px 0 #fff,
      -30px 90px 2px 0 #fff, 0px 100px 2px 0 #fff, 40px 140px 2px 0 #fff,
      70px 120px 2px 0 #fff, 50px 180px 2px 0 #fff, 100px 150px 2px 0 #fff,
      140px 120px 2px 0 #fff, 170px 90px 2px 0 #fff, 170px 130px 2px 0 #fff,
      160px 140px 2px 0 #fff, 170px 130px 2px 0 #fff, 10px 130px 2px 0 #fff,
      180px 180px 2px 0 #fff, 200px 160px 2px 0 #fff, 200px 260px 2px 0 #fff,
      250px 195px 2px 0 #fff, -200px 160px 2px 0 #fff, -200px 180px 2px 0 #fff,
      -220px 185px 2px 0 #fff, -150px 200px 2px 0 #fff, -100px 250px 2px 0 #fff,
      -80px 195px 2px 0 #fff, -190px 280px 2px 0 #fff, -150px 350px 2px 0 #fff,
      -250px 250px 2px 0 #fff, 150px 350px 2px 0 #fff, 100px 230px 2px 0 #fff;
  
    -webkit-animation: snow 60s linear infinite;
    -moz-animation: snow 60s linear infinite;
    -ms-animation: snow 60s linear infinite;
    animation: snow 60s linear infinite;
  }
  
  .snow::after {
    content: "";
    background: white;
    border-radius: 100%;
    left: 100px;
    position: absolute;
    top: -200px;
    width: 3px;
    height: 3px;
  
    z-index: 99;
    box-shadow: 0 0px 2px 0px #fff, 10px 10px 0px 0 #fff, 50px 20px 2px 0 #fff,
      100px 30px 2px 0 #fff, 30px 70px 2px 0 #fff, 130px 70px 2px 0px #fff,
      -30px 30px 2px 0 #fff, -55px 45px 2px 0 #fff, -70px 30px 2px 0 #fff,
      -130px 40px 2px 0 #fff, -150px 90px 2px 0 #fff, -160px 80px 2px 0 #fff,
      -190px 130px 2px 0 #fff, -150px 150px 2px 0 #fff, -130px 120px 2px 0 #fff,
      -100px 130px 2px 0 #fff, -90px 80px 2px 0 #fff, -40px 100px 2px 0 #fff,
      -30px 90px 2px 0 #fff, 0px 100px 2px 0 #fff, 40px 140px 2px 0 #fff,
      70px 120px 2px 0 #fff, 50px 180px 2px 0 #fff, 100px 150px 2px 0 #fff,
      140px 120px 2px 0 #fff, 170px 90px 2px 0 #fff, 170px 130px 2px 0 #fff,
      160px 140px 2px 0 #fff, 170px 130px 2px 0 #fff, 10px 130px 2px 0 #fff,
      180px 180px 2px 0 #fff, 200px 160px 2px 0 #fff, 200px 260px 2px 0 #fff,
      250px 195px 2px 0 #fff, -200px 160px 2px 0 #fff, -200px 180px 2px 0 #fff,
      -220px 185px 2px 0 #fff, -150px 200px 2px 0 #fff, -100px 250px 2px 0 #fff,
      -80px 195px 2px 0 #fff, -190px 280px 2px 0 #fff, -150px 350px 2px 0 #fff,
      -250px 250px 2px 0 #fff, 150px 350px 2px 0 #fff, 100px 230px 2px 0 #fff;
  }
  
  .snow::before {
    content: "";
    background: white;
    border-radius: 100%;
    left: -200px;
    position: absolute;
    top: -300px;
    width: 3px;
    height: 3px;
  
    z-index: 99;
    box-shadow: 0 0px 2px 0px #fff, 10px 10px 0px 0 #fff, 50px 20px 2px 0 #fff,
      100px 30px 2px 0 #fff, 30px 70px 2px 0 #fff, 130px 70px 2px 0px #fff,
      -30px 30px 2px 0 #fff, -55px 45px 2px 0 #fff, -70px 30px 2px 0 #fff,
      -130px 40px 2px 0 #fff, -150px 90px 2px 0 #fff, -160px 80px 2px 0 #fff,
      -190px 130px 2px 0 #fff, -150px 150px 2px 0 #fff, -130px 120px 2px 0 #fff,
      -100px 130px 2px 0 #fff, -90px 80px 2px 0 #fff, -40px 100px 2px 0 #fff,
      -30px 90px 2px 0 #fff, 0px 100px 2px 0 #fff, 40px 140px 2px 0 #fff,
      70px 120px 2px 0 #fff, 50px 180px 2px 0 #fff, 100px 150px 2px 0 #fff,
      140px 120px 2px 0 #fff, 170px 90px 2px 0 #fff, 170px 130px 2px 0 #fff,
      160px 140px 2px 0 #fff, 170px 130px 2px 0 #fff, 10px 130px 2px 0 #fff,
      180px 180px 2px 0 #fff, 200px 160px 2px 0 #fff, 200px 260px 2px 0 #fff,
      250px 195px 2px 0 #fff, -200px 160px 2px 0 #fff, -200px 180px 2px 0 #fff,
      -220px 185px 2px 0 #fff, -150px 200px 2px 0 #fff, -100px 250px 2px 0 #fff,
      -80px 195px 2px 0 #fff, -190px 280px 2px 0 #fff, -150px 350px 2px 0 #fff,
      -250px 250px 2px 0 #fff, 150px 350px 2px 0 #fff, 100px 230px 2px 0 #fff;
  }
  
  @keyframes snow {
    0% {
      transform: translate(0, 0);
      opacity: 0.15;
    }
    20% {
      transform: translate(-20px, 100px);
      opacity: 1;
    }
    70% {
      transform: translate(-70px, 250px);
      opacity: 0.7;
    }
    100% {
      transform: translate(-100px, 300px);
      opacity: 0.1;
    }
  }
  @-moz-keyframes snow {
    0% {
      transform: translate(0, 0);
      opacity: 0.15;
    }
    20% {
      transform: translate(-20px, 100px);
      opacity: 1;
    }
    70% {
      transform: translate(-70px, 250px);
      opacity: 0.7;
    }
    100% {
      transform: translate(-100px, 300px);
      opacity: 0.1;
    }
  }
  @-webkit-keyframes snow {
    0% {
      transform: translate(0, 0);
      opacity: 0.15;
    }
    20% {
      transform: translate(-20px, 100px);
      opacity: 1;
    }
    70% {
      transform: translate(-70px, 250px);
      opacity: 0.7;
    }
    100% {
      transform: translate(-100px, 300px);
      opacity: 0.1;
    }
  }
  @-ms-keyframes snow {
    0% {
      transform: translate(0, 0);
      opacity: 0.15;
    }
    20% {
      transform: translate(-20px, 100px);
      opacity: 1;
    }
    70% {
      transform: translate(-70px, 250px);
      opacity: 0.7;
    }
    100% {
      transform: translate(-100px, 300px);
      opacity: 0.1;
    }
  }


  .snow2 {
    content: "";
    position: absolute;
    top: -100px;
    left: 50%;
    border-radius: 50%;
    width: 3px;
    height: 3px;
    background: #fff;
    opacity: 0.8;
  
    -webkit-animation: slowSnow 90s linear infinite;
    -moz-animation: slowSnow 90s linear infinite;
    -ms-animation: slowSnow 90s linear infinite;
    animation: slowSnow 90s linear infinite;
  
    box-shadow: 0 0px 6px 0px #fff, -20px 50px 4px 1px #fff,
      80px 70px 4px 1px #fff, 200px 150px 4px 1px #fff, -200px 150px 4px 1px #fff,
      -100px 100px 4px 1px #fff, 90px 180px 4px 1px #fff, 190px 280px 4px 1px #fff,
      -150px 250px 4px 1px #fff, -190px 280px 4px 1px #fff,
      -190px 80px 4px 1px #fff, -250px 200px 4px 1px #fff,
      -270px 380px 4px 1px #fff, 270px 330px 4px 1px #fff,
      -200px 390px 4px 1px #fff, -240px 310px 4px 1px #fff,
      180px 380px 4px 1px #fff;
  }
  
  .snow2::before {
    content: "";
    position: absolute;
    top: -500px;
    left: 50%;
    border-radius: 50%;
    width: 5px;
    height: 5px;
    background: #fff;
    opacity: 0.8;
  
    -webkit-animation: slowSnow 30s linear infinite;
    -moz-animation: slowSnow 30s linear infinite;
    -ms-animation: slowSnow 30s linear infinite;
    animation: slowSnow 30s linear infinite;
  
    box-shadow: 0 0px 6px 0px #fff, -20px 50px 4px 1px #fff,
      80px 70px 4px 1px #fff, 200px 150px 4px 1px #fff, -200px 150px 4px 1px #fff,
      -100px 100px 4px 1px #fff, 90px 180px 4px 1px #fff, 190px 280px 4px 1px #fff,
      -150px 250px 4px 1px #fff, -190px 280px 4px 1px #fff,
      -190px 80px 4px 1px #fff, -250px 200px 4px 1px #fff,
      -270px 380px 4px 1px #fff, 270px 330px 4px 1px #fff,
      -200px 390px 4px 1px #fff, -240px 310px 4px 1px #fff,
      180px 380px 4px 1px #fff;
  }
  
  
@keyframes slowSnow {
    0% {
      transform: translate(0, 0);
    }
    20% {
      transform: translate(-20px, 100px);
    }
    70% {
      transform: translate(0px, 250px);
    }
    100% {
      transform: translate(10px, 300px);
    }
  }
  
 */
  

  .wallet_tabs {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 15px;
  }

  .wallet_tab {
    cursor: pointer;
    background: rgb(0 0 0 / 20%);
    padding: 5px 10px;
    border-radius: 10px;
    padding-bottom: 7px;
  }



  .inv_icon_inv {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(assets/i_inv.png) no-repeat;
    background-position: center center;
    background-size: contain;
    margin-bottom: -3px;
    margin-right: -1px;
  }

  .inv_icon_cards {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(assets/i_cards.png) no-repeat;
    background-position: center center;
    background-size: contain;
    margin-bottom: -3px;
    margin-right: -1px;
  }

  .inv_icon_lab {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(assets/i_lab.png) no-repeat;
    background-position: center center;
    background-size: contain;
    margin-bottom: -3px;
    margin-right: -1px;
  }


  .wallet_tab_icon_market {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(assets/w_market.png) no-repeat;
    background-position: center center;
    background-size: contain;
    margin-bottom: -3px;
    margin-right: -1px;
  }


  .wallet_tab_icon_sol {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(assets/w_sol.png) no-repeat;
    background-position: center center;
    background-size: contain;
    margin-bottom: -4px;
    margin-right: -1px;
  }

  .wallet_tab_icon_ton {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(assets/w_ton.png) no-repeat;
    background-position: center center;
    background-size: contain;
    margin-bottom: -4px;
    margin-right: -1px;
  }

  .wallet_tab_icon_pol {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(assets/w_pol.png) no-repeat;
    background-position: center center;
    background-size: contain;
    margin-bottom: -3px;
    margin-right: -1px;
  }





  .inv_tabs {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-evenly;
    gap: 5px;
  }

  .inv_tab {
    cursor: pointer;
    background: rgb(0 0 0 / 20%);
    padding: 5px 10px;
    border-radius: 10px;
    padding-bottom: 7px;
  }


.lab_item_wrap {
    position: relative;
    display: flex;
    width: 280px;
    flex-direction: row;
    justify-content: space-evenly;
    border: 1px solid rgb(112 130 135 / 30%);
    border-radius: 15px;
    margin-bottom: 10px;
    background: rgb(0 0 0 / 10%);
}

.lab_item_wrap_selected {
    background: rgb(0 255 123 / 30%);
    border: 2px solid #00ff80;
}

.lab_item_wrap_click {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 2;
}

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


.lab_btn_wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 10px;
    margin-top: 10px;
}

.lab_btn_create {
    display: inline-block;
    background: #ffa700;
    color: #00081e;
    padding: 10px 15px;
    border-radius: 10px;
    cursor: pointer;
}

.lab_btn_create_disabled {
    opacity: 0.3;
}

.lab_btn_disassemble {
    text-align: center;
    border-radius: 10px;
    border: 1px solid rgb(255 255 255 / 10%);
    padding: 10px;
    background: rgba(28, 153, 134, 0.05);
    cursor: pointer;
}

.lab_btn_disassemble_disabled {
    opacity: 0.3;
}

.spin_wrap {
    position: relative;
    transform: scale(0.6);
    transform-origin: top left;
    width: 500px;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spin_wrap_ov {

    display: inline-block;
    width: 300px;
    height: 300px;
    position: relative;
    margin-top: 20px;
    overflow: hidden;
    border-radius: 50%;
    -webkit-box-shadow: 0px 0px 79px 0px rgb(0 255 246 / 80%);
    -moz-box-shadow: 0px 0px 79px 0px rgb(0 255 246 / 80%);
    box-shadow: 0px 0px 79px 0px rgb(0 255 246 / 80%);
}

.spin_cont{
    width:500px;
    height:470px;
    background-color: #ccc;
    border-radius:50%;
    border:15px solid #ffa700;
    position: relative;
    overflow: hidden;

}

.spin_cont div{
    height: 50%;
    width: 200px;
    position: absolute;
    clip-path: polygon(100% 0, 50% 100%, 0 0);
    transform: translateX(-50%);
    transform-origin: bottom;
    text-align: center;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    font-family: sans-serif;
    color: #fff;
    left: 135px;
}

.spin_cont .s_one{
    background: radial-gradient(circle, rgb(65 30 67) 0%, rgb(255 115 0) 100%);
    left:50%;
}
.spin_cont .s_two{
    background: radial-gradient(circle, rgb(11 45 46) -6%, rgb(163 163 163) 100%);
    transform: rotate(45deg);
}
.spin_cont .s_three{
    background: radial-gradient(circle, rgb(21 45 40) 0%, rgb(149 35 107) 100%);
    transform:rotate(90deg);
}
.spin_cont .s_four{
    background: radial-gradient(circle, rgb(8 37 57) -6%, rgb(0 152 107) 100%);
    transform: rotate(135deg);
}
.spin_cont .s_five{
    background: radial-gradient(circle, rgb(205 40 85) 0%, rgb(0 171 219) 100%);
    transform: rotate(180deg);
}
.spin_cont .s_six{
    background: radial-gradient(circle, rgb(52 0 110) -6%, rgb(187 1 211) 100%);
    transform: rotate(225deg);
}
.spin_cont .s_seven{
    background: radial-gradient(circle, rgb(57 24 115) 0%, rgb(44 219 109) 100%);
    transform: rotate(270deg);
}
.spin_cont .s_eight{
    background: radial-gradient(circle, rgb(255 162 0) -6%, rgb(0 152 107) 100%);
    transform: rotate(315deg);
}


.spin_btn_main{
    position: absolute;
    display: flex;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    background: url(assets/achieve/btn_bg2.jpg);
    animation: bg-animation 18s ease infinite;
    text-transform: uppercase;
    border: 16px solid rgb(255 255 255 / 10%);
    font-weight: bold;
    width: 180px;
    height: 180px;
    font-family: sans-serif;
    border-radius: 50%;
    outline: none;
    letter-spacing: 1px;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    z-index: 6;
}

.spin_arrow {
    position: absolute;
    left: 130px;
    top: -6px;
    width: 40px;
    height: 40px;
    background: url(assets/spin_arrow.png);
    background-position: center;
    background-size: contain;
    z-index: 5;
}

.spin_btn_main_click {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 7;
    cursor: pointer;
}

.spin_btn_main_click_disabled {

    background: rgb(18 76 77 / 90%);
    border-radius: 50%;

}

.spin_bnt_main_text_spin {
    color:#ffa700;
    font-size:32px;
}

.spin_bnt_main_text_price {
    color: #fff;
    font-size: 20pt;
}

.spin_prize {
    position: relative;
    margin-top: 20px;
    display: inline-block;
    width: 85px;
    height: 85px;
    border-radius: 15px;
    border: 4px solid rgb(255 255 255 / 10%);
}


.spin_openings_wrap {
    display: inline-block;
    background: rgb(62 171 167 / 10%);
    width: 300px;
    border-radius: 15px;
    padding: 10px;
}

.spin_d_openings_item {
    border-radius: 10px;
    background: rgb(62 171 167 / 10%);
    border: 1px solid rgb(80 146 157 / 20%);
    margin: 5px;
    text-align: center;
    font-size: 10pt;
}

.spin_d_openings_item_prize {
    font-size: 14pt;
    color: #ffa700;
}

.spin_onchain_score {
    color: #4bd2bc;
    font-weight: bold;
}

.spin_free_spins {
    color: #ffa700;
    font-weight: bold;
}

.spin_item_cntr {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ffa700;
    color: #00081e;
    font-size: 14pt;
    border-radius: 0px 10px 0px 14px;
    padding: 5px 7px;
    font-weight: normal;
}

.ls_ring {
    position: absolute;
    width: 500px;
    height: 500px;
    left: 0;
    top: 0;
    background: url(assets/ls_ring.png);
    background-position: center;
    background-size: contain;
    z-index: 4;
}

.pagination_wrap button{
    background: rgb(0 0 0 / 30%);
    color: #d3fdff;
    border: 1px solid rgb(236 236 236 / 20%);
    border-radius: 5px;
    font-size: 12pt;
    margin: 2px;
    padding: 4px 10px;
    cursor: pointer;
}

.pagination_button.pag_btn_active {
    background: rgb(47 93 84 / 30%);
}

.pagination_wrap {
    margin: 10px;
}

.bh_wrap {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    text-align: center;
}

.bh_header {
    display: flex;
    width: 100%;
    height: 210px;
    align-items: center;
    justify-content: center;
    border-radius: 40px 40px 0px 0px;
    overflow: hidden;
    background: url('assets/bh_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bh_header_img {
    width: 300px;
    height: 300px;
    background: url('assets/bh_header.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    animation: bh_rotate 120s linear infinite;
}
@keyframes bh_rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}

.bh_select_lvl_wrap {
    position: relative;
    display: inline-block;
    width: 280px;
    border-radius: 20px;
    border: 2px solid rgb(53 53 53 / 30%);
    background: rgb(0 0 0 / 20%);
    margin-bottom: 10px;
}

.bh_select_lvl_wrap_selected {
    background: rgb(0 255 123 / 30%);
    border: 2px solid #00ff80;
}

.bh_select_click {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
    top: 0;
    left: 0;
    z-index: 2;
}

.bh_select_lvl {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-evenly;
    margin-top: 6px;
}

.bh_select_i {
    display: flex;
}

.bh_select_time {
    display: flex;
    width: 80px;
    height: 60px;
    background: rgb(0 0 0 / 20%);
    border-radius: 15px;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin-left: 9px;
    margin-bottom: 9px;
    margin-top: 7px;
}

.bh_select_danger {
    display: flex;
    width: 103px;
    height: 60px;
    border-radius: 15px;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin-left: 9px;
    margin-bottom: 9px;
    margin-top: 7px;
}

.bh_select_cntr {
    display: flex;
    width: 60px;
    height: 60px;
    background: rgb(0 0 0 / 20%);
    border-radius: 15px;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin-left: 9px;
    margin-bottom: 9px;
    margin-top: 7px;
}

.bh_timer {
    display: inline-block;
    padding: 5px 20px;
    font-size: 28pt;
    font-weight: bold;
    border-radius: 15px;
    background: rgb(163 198 196 / 20%);
}

.bh_start {
    width: 220px;
    display: inline-block;
    background: #ffa700;
    color: #00081e;
    padding: 15px 15px;
    border-radius: 15px;
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 10px;
}

.bh_start_disabled {
    opacity: 0.3;
}

.bh_check {
    width: 170px;
    display: inline-block;
    background: #04f47e;
    color: #00081e;
    padding: 15px 15px;
    border-radius: 15px;
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 10px;
}

.bh_check_disabled {
    opacity: 0.3;
}

.bh_prize_resources {
    display: flex;
    width: 255px;
    flex-wrap: wrap;
}

.sol_packs_wrap {
    width: 300px;
    margin-top: 20px;
}

.sol_pack {
    display: flex;
    background: rgb(0 0 0 / 20%);
    padding: 10px;
    margin: 12px;
    border-radius: 15px;
    justify-content: space-around;
    align-items: center;
}

.sol_pack_img {
    display: inline-block;
    width: 90px;
    height: 90px;
    border-radius: 15px;
    border: 2px solid rgb(255 255 255 / 5%);
}

.sol_pack_btns {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 90px;
}

.sol_pack_mint {
    position: relative;
    display: inline-block;
    border: 1px solid rgb(255 255 255 / 10%);
    background: rgba(28, 153, 134, 0.05);
    border-radius: 10px;
    padding: 6px 25px 14px 25px;
    cursor: pointer;
    width: 65px;
    font-size: 12pt;
}

.sol_pack_mint_disabled {
    opacity: 0.3;
}

.sol_pack_cont {
    background: rgb(6 7 25 / 60%);
    padding: 10px;
    border-radius: 15px;
}

.sol_pack_fee {
    position: absolute;
    text-align: center;
    font-size: 7pt;
    color: rgb(255 255 255 / 40%);
    bottom: 2px;
    left: 0px;
    width: 100%;
}

.sol_pack_bonus {
    position: absolute;
    text-align: center;
    font-size: 7pt;
    color: rgb(0 8 30);
    bottom: 30px;
    left: 85px;
    width: 52px;
    background: #ffa700;
    border-radius: 5px;
    padding: 2px;
}

.bh_wrap_w {
    display: flex;
    width: 100%;
    justify-content: center;
}

.bhe_pers_wrap {
    display: flex;
    width: 320px;
    min-width: 320px;
    height: 384px;
    background: rgb(0 0 0 / 40%);
    border-radius: 15px;
    overflow: hidden;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
}

.bhe_pers_items_cont {
    width: 160px;
    height: 384px;
}

.bhe_pers_cont {
    position: relative;
    width: 160px;
    height: 384px;
    background: url(assets/ex/main_body.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.bhe_pers_part {
    width: 160px;
    position: absolute;
}

.bhe_pp_head {
    height: 80px;
    left: 0px;
    top:0px;
    z-index: 3;
}

.bhe_pp_body {
    height: 166px;
    left: 0px;
    top:51px;
    z-index: 2;
}

.bhe_pp_legs {
    height: 194px;
    left: 0px;
    top:156px;
    z-index: 1;
}

.bhe_pp_feet {
    height: 68px;
    left: 0px;
    top:317px;
    z-index: 2;
}

.bhe_pp_shadow {
    height: 56px;
    left: 0px;
    top:329px;
    z-index: 0;
}

.bhe_pers_item {
    display: flex;
    position: relative;
    width: 150px;
    height: 86px;
    margin: 5px;
    border-radius: 15px;
    border: 2px solid rgb(255 255 255 / 5%);
    align-items: center;
    justify-content: space-around;
    overflow: hidden;
}

.uiex_pers_item {
    display: flex;
    position: relative;
    width: 150px;
    height: 86px;
    margin: 5px;
    border-radius: 15px;
    border: 2px solid rgb(255 255 255 / 5%);
    align-items: center;
    justify-content: space-around;
    overflow: hidden;
}

.bhe_modal_pers_item {
    display: flex;
    position: relative;
    width: 150px;
    height: 86px;
    margin: 5px;
    border-radius: 15px;
    border: 2px solid rgb(255 255 255 / 5%);
    align-items: center;
    justify-content: space-around;
    overflow: hidden;
    text-align: center;
}

.bhe_item_selected {
    border: 3px solid #00ff80;
}

.bhe_pers_item_rare_common {
    background: rgb(128 128 128 / 35%);
}

.bhe_pers_item_rare_uncommon {
    background: rgb(37 76 212 / 35%);
}

.bhe_pers_item_rare_epic {
    background: rgb(37 212 147 / 35%);
}

.bhe_pers_item_rare_legend {
    background: rgb(255 181 0 / 35%);
}

.bhe_pers_item_rare_img_common {
    background: radial-gradient(circle, rgba(233,233,233,1) 0%, rgba(68,68,68,1) 100%);
}

.bhe_pers_item_rare_img_uncommon {
    background: radial-gradient(circle, rgba(0,194,255,1) 0%, rgba(27,0,135,1) 100%);
}

.bhe_pers_item_rare_img_epic {
    background: radial-gradient(circle, rgba(0,255,171,1) 0%, rgba(0,135,104,1) 100%);
}

.bhe_pers_item_rare_img_legend {
    background: radial-gradient(circle, rgba(255, 226, 0, 1) 0%, rgb(255 162 0) 100%);
}

.bhe_pers_item_part_text {
    position: absolute;
    top: -2px;
    right: -2px;
    font-size: 8pt;
    background: rgb(0 0 0 / 10%);
    padding: 1px 10px;
    border-radius: 0px 20px;
    padding-bottom: 2px;
    color: rgb(255 255 255 / 70%);
    text-transform: uppercase;
}

.bhe_pers_item_part_brand {
    position: absolute;
    bottom: -1px;
    left: 0px;
    width: 100%;
    font-size: 7pt;
    background: rgb(0 0 0 / 20%);
    color: rgb(255 255 255 / 70%);
}

.bhe_pers_item_img {
    position: relative;
    width: 73px;
    height: 73px;
    border-radius: 15px;
    margin-bottom: 10px;
    border: 1px solid rgb(255 255 255 / 10%);
    overflow: hidden;
}

.bhe_pers_item_stats {
    display: flex;
    width: 75px;
    height: 46px;
    flex-direction: row;
    align-items: flex-start;
    font-size: 12pt;
    color: #fff;
    margin-top: 5px;
}

.bhe_pers_item_stat_time_icon {
    display: inline-block;
    width: 21px;
    height: 21px;
    background: url(assets/ex/icon_time.png) no-repeat;
    background-position: center center;
    background-size: contain;
    margin: -1px;
    margin-left: 2px;
}

.bhe_pers_item_stat_def_icon {
    display: inline-block;
    width: 21px;
    height: 21px;
    background: url(assets/ex/icon_def.png) no-repeat;
    background-position: center center;
    background-size: contain;
    margin: -1px;
    margin-left: 2px;
}

.bhe_pers_item_stat_luck_icon {
    display: inline-block;
    width: 21px;
    height: 21px;
    background: url(assets/ex/icon_luck.png) no-repeat;
    background-position: center center;
    background-size: contain;
    margin: -1px;
    margin-left: 2px;
}

.bhe_pers_item_img_head_pdl {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(assets/ex/pdl_head.png) no-repeat;
    background-position: calc(50% + 4px) center;
    background-size: cover;
    z-index: 0;
}

.bhe_pers_item_img_head {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}


.bhe_pers_item_img_body_pdl {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(assets/ex/pdl_body.png) no-repeat;
    background-position: center;
    background-size: cover;
    z-index: 0;
}

.bhe_pers_item_img_body {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.bhe_pers_item_img_legs_pdl {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(assets/ex/pdl_legs.png) no-repeat;
    background-position: center;
    background-size: cover;
    z-index: 0;
}

.bhe_pers_item_img_legs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.bhe_pers_item_img_feet_pdl {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(assets/ex/pdl_feet.png) no-repeat;
    background-position: calc(50% + 33px) center;
    background-size: cover;
    z-index: 0;
}

.bhe_pers_item_img_feet {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.bhe_pers_item_part_brand_text {
    text-transform: uppercase;
}


.bhe_modal_controls {
    display: flex;
    width: 100%;
    padding: 10px;
    background: rgb(0 0 0 / 10%);
    border-radius: 15px;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.bhe_modal_btns {
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 10px;
}

.bhe_modal_use {
    background: #00ff80;
    color: #00081e;
}

.bhe_modal_burn {
    background: rgb(0 0 0 / 20%);
}

.bhe_modal_close {
    background: #ffa700;
    color: #00081e;
}

.bhe_modal_burn_disabled {
    opacity: 0.3;
}

.bhe_modal_use_disabled {
    opacity: 0.3;
}

.bhe_modal_text {
    text-transform: uppercase;
}

.bhe_modal_info {
    padding: 5px 10px;
    background: rgb(0 0 0 / 20%);
    font-size: 8pt;
    width: 212px;
    text-align: center;
    border-radius: 10px;
}


.mr_wrap {
    position: relative;
    width: 100%;
    height: 100%;
    background:url(assets/mr_bg.png);
    background-size: contain;
    background-position: bottom center;
    background-repeat: no-repeat;
}


.mr_grid_cont {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
}

.mr_grid_wrap {
    display: flex;
}

.mr_cell {
    width: 30px;
    height: 30px;
    background: darkblue;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
}

.mr_page {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    overflow-y: scroll;
}

.mr_sectors {
    display: inline-block;
    width: 325px;
    background: rgb(0 0 0 / 20%);
    border-radius: 15px;
    padding: 10px;
}

.mr_info {
    display: inline-block;
    width: 325px;
    background: rgb(0 0 0 / 20%);
    border-radius: 15px;
    padding: 10px;
    text-align: center;
    font-size: 10pt;
    margin-top: 15px;
}

.mr_info a {
    color: #9cfcff;
}

.mr_top {
    display: inline-block;
    width: 325px;
    background: rgb(0 0 0 / 20%);
    border-radius: 15px;
    padding: 10px;
    text-align: center;
}

.mr_top_block {
    font-size: 14pt;
    color: #ffa700;
    padding: 5px;
    background: rgb(0 0 0 / 10%);
    border-radius: 10px;
    margin-bottom: 10px;
}

.mr_top_name {
    overflow: hidden;
}

.mr_top_items {
    margin: 5px;
    border-radius: 10px;
    background: rgb(0 0 0 / 20%);
    text-align: left;
    padding: 5px;
}

.mr_top_item {
    display: inline-block;
    width: 35px;
    height: 35px;
    border-radius: 5px;
    border: 1px solid rgb(255 255 255 / 10%);
    margin: 1px;
}

.mr_in_sector {
    display: inline-block;
    width: 325px;
    background: rgb(5 13 18 / 20%);
    border-radius: 15px;
    padding: 10px;
    margin-top: 20px;
}

.mr_sector_wrap {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 60px;
    background: rgb(0 0 0 / 20%);
    border-radius: 10px;
    margin: 2px;
    cursor: pointer;
    overflow: hidden;
}

.mr_cell_wrap {
    position: relative;
    display: inline-block;
    width: 58px;
    height: 58px;
    background: rgb(0 0 0 / 20%);
    border-radius: 10px;
    margin: 2px;
    cursor: pointer;
    border: 1px solid rgb(255 255 255 / 30%);
}

.mr_cell_name {
    display: none;
    position: absolute;
    width: 100%;
    overflow: hidden;
    font-size: 8pt;
    top: 0;
    left: 0;
    background: #00ff80;
    color: #00081e;
    border-radius: 5px;
    white-space: nowrap;
    padding: 3px;
    text-align: left;
    box-sizing: border-box;
    animation: mr_name_ani 2s ease 0s 1 normal forwards;
    user-select: none;
}

.mr_sector_click {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
    top: 0;
    left: 0;
    z-index: 3;
}

.mr_cell_click {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
    top: 0;
    left: 0;
    z-index: 1;
}

.mr_sector_num {
    position: relative;
    margin-bottom: 2px;
    margin-top: 13px;
    z-index: 2;
}

.mr_cell_num {
    position: relative;
    margin-bottom: 2px;
    margin-top: 13px;
    z-index: 0;
}

.mr_sector_cnt {
    position: relative;
    font-size: 8pt;
    margin-top: 0;
    z-index: 2;
}

.mr_sector_open_o {
    color: #00ff80;
}

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

.mr_select_s_disabled {
    opacity: 0.3;
}

.cell_no {
    background:url(assets/reel_items/mr_no.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    cursor: pointer;
}

.cell_freez {
    background:url(assets/reel_items/mr_freez.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.cell_bil_o {
    background:url(assets/reel_items/reel_100oxy.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.cell_bil_f {
    background:url(assets/reel_items/reel_500food.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.cell_m1 {
    background:url(assets/reel_items/mr_m1.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}


.cell_empty {
    background:url(assets/reel_items/mr_empty.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.cell_solarite {
    background:url(assets/reel_items/reel_solarite.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.cell_oxydium {
    background:url(assets/reel_items/reel_oxydium.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.cell_luminex {
    background:url(assets/reel_items/reel_luminex.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.cell_carrotine {
    background:url(assets/reel_items/reel_carrotine.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.cell_polimeris {
    background:url(assets/reel_items/reel_polimeris.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.cell_boost5 {
    background:url(assets/reel_items/reel_boost5.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.cell_boost10 {
    background:url(assets/reel_items/reel_boost10.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}


.cell_boost25 {
    background:url(assets/reel_items/reel_boost25.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.cell_boost100 {
    background:url(assets/reel_items/reel_boost100.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.cell_human {
    background:url(assets/reel_items/reel_human.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.cell_gb {
    background:url(assets/reel_items/reel_card3.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}


.cell_box {
    background:url(assets/reel_items/reel_box.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.cell_prot {
    background:url(assets/reel_items/reel_protein.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.cell_gift {
    background:url(assets/reel_items/reel_card3.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.cell_lp {
    background:url(assets/reel_items/reel_potion.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.cell_spin {
    background:url(assets/reel_items/reel_spin.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.cell_freez {
    background:url(assets/reel_items/mr_freez.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.cell_bomb {
    background:url(assets/reel_items/mr_m1.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}


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

.mr_timer {
    display: inline-block;
    padding: 5px 20px;
    font-size: 28pt;
    font-weight: bold;
    border-radius: 15px;
    background: rgb(163 198 196 / 20%);
}

.mr_back {
    z-index: 3;
    position: absolute;
    top:20px;
    left: 20px;
    padding: 10px;
    border: 1px solid rgb(255 255 255 / 10%);
    background: rgb(93 150 153 / 20%);
    cursor: pointer;
    font-size: 12pt;
    border-radius: 10px;
}

.mr_top100_btn {
    z-index: 3;
    position: absolute;
    top:20px;
    right: 20px;
    padding: 10px;
    border: 1px solid rgb(255 255 255 / 10%);
    background: rgb(93 150 153 / 20%);
    cursor: pointer;
    font-size: 12pt;
    border-radius: 10px;
}

.mr_sector_timer {
    display: inline-block;
    width: 120px;
    z-index: 3;
    padding: 10px;
    background: rgb(93 150 153 / 20%);
    font-size: 12pt;
    border-radius: 10px;
}


@keyframes mr_name_ani {
    0% {
      opacity: 0.8;
      transform: scale(0.1);
    }
  
    50% {
      opacity: 1;
      transform: scale(0.8);
    }
  
    100% {
      opacity: 0;
      transform: scale(1.5);
    }
  }

  .mr_sector_loader {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    align-items: flex-start;
    justify-content: flex-end;
  }

  .mr_loader {
    width: 20px;
    height: 20px;
    background: url(assets/vp/loader.gif);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin: 2px;
  }

  .mr_next_timer {
    color: #82dcde;
    font-size: 20pt;
    margin: 0;
    background: rgb(0 0 0 / 20%);
    padding-bottom: 4px;
    font-weight: bold;
  }

  .mr_logo {
    display: inline-block;
    width: 140px;
    height: 140px;
    background: url(assets/rush_logo.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-top: 20px;
  }

  .mr_pages {
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
  }

  .mr_top_page {
    position: absolute;
    width: 90%;
    height: 85%;
    border: 1px solid rgb(56 87 90);
    justify-content: center;
    align-items: center;
    background: rgb(4 26 25 / 30%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 40px;
    z-index: 100;
    font-size: 14pt;
    overflow: hidden;
    text-align: center;
}

.mr_top_page_cont {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
}

.mr_page_close {
    position: absolute;
    width: 40px;
    height: 40px;
    top:20px;
    left: 20px;
    background: url(assets/page_close.png) no-repeat;
    background-position: center center;
    background-size: contain;
    cursor: pointer;
    z-index: 20;
}

.mr_top100_wrap {
    display: inline-block;
    width: 325px;
    background: rgb(0 0 0 / 20%);
    border-radius: 15px;
    padding: 10px;
    text-align: center;
}

.mr_top100_item_wrap {
    display: flex;
    width: 100%;
    background: rgb(0 0 0 / 20%);
    border-radius: 15px;
    padding: 10px;
    margin-bottom: 5px;
    box-sizing: border-box;
}

.mr_top100_item_name{
    width: 150px;
    white-space: nowrap;
    overflow: hidden;
    color: #ffa700;
    text-align: left;
}

.mr_top100_item_points {
    width: 150px;
    white-space: nowrap;
    margin-left: auto;
    text-align: right;
    overflow: hidden;
}

.mr_top100_item_points_text {
    color: #00ff80;
}

.mr_top100_place {
    font-weight: bold;
    margin-right: 5px;
    margin-left: 2px;
    color: #02f37b;
}

.mr_sector_fl {
    position: absolute;
    width: 0%;
    height: 100%;
    background: rgb(0 255 182 / 40%);
    top: 0px;
    left: 0px;
    z-index: 1;
}

.mr_sector_fl_full {
    background: rgb(255 174 0 / 40%);
}

.mr_reg_btn {
    width: 170px;
    display: inline-block;
    background: #04f47e;
    color: #00081e;
    padding: 15px 15px;
    border-radius: 15px;
    cursor: pointer;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 14pt;
}

.mr_reg_btn_disabled {
    opacity: 0.3;
}


.mr_mod_wrap {
    width: 280px;
    position: relative;
    display: inline-block;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    border-radius: 15px;
    padding: 5px;
    border: 2px solid rgb(255 255 255 / 30%);
}

.mr_mod_wrap_btn {
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    z-index: 100;
    cursor: pointer;
}

.mr_mod_wrap_selected {
    background: rgb(0 255 123 / 30%);
    border-radius: 15px;
    padding: 5px;
    border: 2px solid #00ff80;
}

.mr_mod_fl {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.mr_mod_text{
    display: inline-block;
    width: 210px;
    text-align: center;
}

.mr_mod_btn {
    width: 170px;
    display: inline-block;
    background: #04f47e;
    color: #00081e;
    padding: 10px 10px;
    border-radius: 15px;
    cursor: pointer;
    margin-bottom: 20px;
    font-size: 14pt;
}

.mr_mod_btn_selected {
    opacity: 0.3;
}

.mr_my_perk {
    margin: 20px;
}

.pol_check {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: red;
    cursor: pointer;
    border-radius: 5px;
}

.pol_check_disabled {
    opacity: 0.3;
}

.daily_page_wrap {
    width: 100%;
    text-align: center;
    overflow-y: scroll;
}

.daily_items_wrap_cont {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
}

.da_cont {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    overflow-x: scroll;
    box-sizing: border-box;
    padding: 5px;
    border-top: 5px solid rgb(0 0 0 / 10%);
    border-bottom: 5px solid rgb(0 0 0 / 10%);
    gap: 10px;
}

.da_card {
    position: relative;
    display: inline-block;
    width: 250px;
    height: 350px;
    border-radius: 20px;
    background: rgb(0 0 0 / 20%);
    flex-shrink: 0;
    border: 2px solid rgb(255 255 255 / 10%);
    overflow: hidden;
}

.da_card_exp {
    background: url(assets/da_exp.png);
    background-size: cover;
    background-position: center;
}

.da_card_rush {
    background: url(assets/da_rush.png);
    background-size: cover;
    background-position: center;
}

.da_card_pvp {
    background: url(assets/da_pvp.png);
    background-size: cover;
    background-position: center;
}

.da_card_arena {
    background: url(assets/da_arena.png);
    background-size: cover;
    background-position: center;
}

.da_card_extra {
    background: url(assets/da_extra.png);
    background-size: cover;
    background-position: center;
}

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

.da_info {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: rgb(0 0 0 / 10%);
    font-size: 11pt;
    margin-top: 50px;
}

.da_check {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    background: #00ff80;
    color: #00081e;
    cursor: pointer;
}

.da_check_all {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    background: #ffa700;
    color: #00081e;
    cursor: pointer;
}

.da_check_disabled {
    opacity: 0.3;
    background: #000;
    color: #fff;
    cursor: default;
}

.da_check_all_disabled {
    opacity: 0.3;
    background: #000;
    color: #fff;
    cursor: default;
}

.da_reward_wrap {
    display: flex;
    position: absolute;
    bottom: 50px;
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
    box-sizing: border-box;
    padding: 0px 10px;
}

.da_reward {
    font-weight: bold;
    margin-left: 5px;
}

.da_next_timer {
    font-size: 25pt;
    margin-top: -5px;
    font-weight: bold;
    color: #00ff80;
}

.da_card_done {
    border: 2px solid #00ff80;
}

.da_cntr {
    margin-left: auto;
    color: #00ff80;
    font-weight: bold;
    margin-right: 5px;
}

.box_code_paste {
    width: 45px;
    height: 45px;
    display: inline-block;
    background: url(assets/paste_icon.png);
    background-size: contain;
    background-position: center;
    color: #00081e;
    border-radius: 10px;
    cursor: pointer;
    margin-left: 5px;
}


.send_code_paste {
    width: 45px;
    height: 44px;
    display: inline-block;
    background: url(assets/paste_icon.png);
    background-size: contain;
    background-position: center;
    color: #00081e;
    border-radius: 10px;
    cursor: pointer;
    /* margin-left: 5px; */
    vertical-align: bottom;
}

.pvpB_main {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    overflow-y: scroll;
}

.pvpB_menu {
    display: flex;
    width: 100%;
    justify-content: center;
    gap: 10px;
}

.pvpB_menu_btn {
    display: inline-block;
    padding: 10px;
    border: 1px solid rgb(255 255 255 / 10%);
    background: rgb(93 150 153 / 20%);
    cursor: pointer;
    font-size: 10pt;
    border-radius: 10px;
}

.pvpB_page {
    width: 100%;
}


.pvpB_b_list_wrap {
    display: inline-block;
    background: rgb(0 0 0 / 10%);
    border-radius: 30px;
    margin-top: 25px;
    width: 350px;
    padding: 10px;
}

.pvpB_my_list_wrap {
    display: inline-block;
    background: rgb(0 0 0 / 10%);
    border-radius: 30px;
    margin-top: 25px;
    width: 350px;
    padding: 10px;
}

.pvpB_h_list_wrap {
    display: inline-block;
    background: rgb(0 0 0 / 10%);
    border-radius: 30px;
    width: 350px;
    padding: 10px;
}

.pvpB_b_list_item_wrap {
    display: flex;
    padding: 10px;
    background: rgb(0 0 0 / 10%);
    border-radius: 15px;
    margin: 5px;
    font-size: 10pt;
    justify-content: flex-start;
    align-items: center;
}


.pvpB_my_list_item_wrap {
    position: relative;
    display: flex;
    padding: 10px;
    background: rgb(0 0 0 / 10%);
    border-radius: 15px;
    margin: 5px;
    font-size: 10pt;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 2px;
}


.pvpB_b_list_item_name {
    text-align: left;
    width: 60px;
    overflow: hidden;
    font-weight: bold;
    white-space: nowrap;
    margin-left: 5px;
    margin-right: 5px;
    color: #ffa700;
}

.pvpB_my_list_item_name {
    text-align: center;
    width: 100px;
    overflow: hidden;
    font-weight: bold;
    white-space: nowrap;
    margin-left: 5px;
    margin-right: 5px;
    color: #ffa700;
}

.pvpB_b_list_item_cards {
    text-align: center;
    width: 75px;
    font-weight: bold;
    border-radius: 7px;
    background: green;
    margin-left: 5px;
    padding: 2px 7px;
    color: #09273b;
}

.pvpB_my_list_item_cards {
    text-align: center;
    width: 75px;
    font-weight: bold;
    border-radius: 7px;
    background: green;
    margin-left: 5px;
    padding: 2px 7px;
    margin-top: 3px;
    color: #09273b;
}

.pvpB_fight {
    text-align: center;
    width: 50px;
    border-radius: 7px;
    background: #00ff80;
    color: #00081e;
    margin-left: auto;
    cursor: pointer;
    padding: 5px 10px;
    font-size: 12pt;
}


.pvpB_fight_disabled {
    opacity: 0.3;
}


.pvpB_my_fight {
    position: absolute;
    top: 10px;
    right: 10px;
    text-align: center;
    width: 60px;
    border-radius: 7px;
    background: #00ff80;
    color: #00081e;
    cursor: pointer;
    padding: 5px 10px;
    font-size: 12pt;
}

.pvpB_my_fight_wait {
    background: rgb(0 0 0 / 30%);
    cursor: default;
    color: #fff;
    opacity: 0.3;
}

.pvpB_create_rare_wrap {
    width: 100%;
    margin-top: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pvpB_create {
    display: inline-block;
    width: 95px;
    background: #ffa700;
    color: #00081e;
    padding: 10px 15px;
    border-radius: 15px;
    cursor: pointer;
    margin-top: 20px;
    text-align: center;
}

.pvpB_create_disabled {
    opacity: 0.3;
}

.pvpB_my_list_item_my_acc {
    font-weight: bold;
    color: #00ff80;
}

.pvpB_my_list_item_op_acc {
    font-weight: bold;
    color: #ffa700;
}

.pvpB_my_list_item_status {
    position: absolute;
    top:10px;
    left: 15px;
    font-size: 20px;
    font-weight: bold;
    color: #ffa700;
}

.pvpB_arena_wrap {
    display: none;
    position: sticky;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgb(0 8 30 / 30%);
    z-index: 4;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    flex-direction: column;
}

.pvpB_arena_wrap_bg {
    position: relative;
    width: 330px;
    height: 540px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: url(assets/pvpB_bg.png);
    background-size: contain;
    background-position: center;
    flex-shrink: 0;
}


.pb_square {
    width: 250px;
    height: 250px;
    position: relative;
    overflow: hidden;
    display: none;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.pb_circle {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform-origin: center center;
    transform: scale(1);
    box-shadow: inset 0 0 0 10px rgb(255 162 0)
}

.pb_circle2 {
    position: absolute;
    width: 100px;
    height: 100px;
    background: url(assets/pvpB_hit.png);
    background-position: center;
    background-size: contain;
    border-radius: 50%;
    transform-origin: center center;
    transform: scale(1);
    z-index: 1;
    cursor: pointer;
    touch-action: manipulation;
}

.pb_card_selected {
    border: 6px solid #00ff4f;
}

.pvpB_arena_acc {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.pvpB_arena_acc_text {
    width: 100%;
    background: linear-gradient(90deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
    padding: 10px;
    box-sizing: border-box;
    color: #84ffaa;
    animation: pb_acc 0.5s ease 0s 1 normal forwards;
}

.pvpB_arena_acc_val {
    color: #ffa200;
    font-size: 20pt;
    font-weight: bold;
}


.pvpB_arena_hp {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.pvpB_arena_hp_text {
    width: 100%;
    background: linear-gradient(90deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
    padding: 10px;
    box-sizing: border-box;
    color: #84ffaa;
    animation: pb_acc 0.5s ease 0s 1 normal forwards;
}

.pvpB_arena_hp_val {
    color: #ffa200;
    font-size: 20pt;
    font-weight: bold;
}



@keyframes pb_acc {
	0% {
		animation-timing-function: ease-in;
		opacity: 1;
		transform: translateY(-45px);
	}

	24% {
		opacity: 1;
	}

	40% {
		animation-timing-function: ease-in;
		transform: translateY(-24px);
	}

	65% {
		animation-timing-function: ease-in;
		transform: translateY(-12px);
	}

	82% {
		animation-timing-function: ease-in;
		transform: translateY(-6px);
	}

	93% {
		animation-timing-function: ease-in;
		transform: translateY(-4px);
	}

	25%,
	55%,
	75%,
	87% {
		animation-timing-function: ease-out;
		transform: translateY(0px);
	}

	100% {
		animation-timing-function: ease-out;
		opacity: 1;
		transform: translateY(0px);
	}
}

.pvpB_info {
    padding: 10px;
    font-size: 8pt;
    background: rgb(0 0 0 / 10%);
    margin-top: 10px;
}

.pvpB_ban {
    color: #ffa700;
}

.pvpB_left {
    position: absolute;
    right: 10px;
    top:13px;
    font-size: 6pt;
    opacity: 0.5;
}


.pvpB_create_private_wrap {
    width: 250px;
    display: flex;
    padding: 10px;
    border-radius: 20px;
    background: rgb(0 0 0 / 10%);
    justify-content: space-evenly;
    gap: 5px;
}

.pvpB_create_private {
    display: inline-block;
    padding: 10px;
    border-radius: 15px;
    background: rgb(0 0 0 / 20%);
    cursor: pointer;
}

.pvpB_create_p_selected {
    background: rgb(0 159 255 / 10%);
    border: 1px solid #00ff4f;
}

.code_copy {
    position: absolute;
    width: 40px;
    height: 40px;
    bottom: 0;
    right: 0;
    background: url(assets/icon_copy.png);
    background-position: center center;
    background-size: contain;
    cursor: pointer;
    opacity: 0.5;
}

.pvpB_b_list_invite_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 15px;
}

.pvpB_b_list_invite_input {
    color: #b7ede8;
    font-size: 8pt;
    border-radius: 10px;
    border: 1px solid rgb(0 255 128);
    width: 116px;
    padding: 8px 5px;
    background: rgb(7 29 26 / 20%);
}

.pvpB_opponent_name {
    position: absolute;
    top: 140px;
    width: 100%;
    color: #ffa200;
    text-align: center;
    overflow: hidden;
    font-weight: bold;
    white-space: nowrap;
}

.pvpB_my_rank {
    z-index: 3;
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 10px;
    border: 1px solid rgb(255 255 255 / 10%);
    background: rgb(255 17 147 / 25%);
    cursor: pointer;
    font-size: 12pt;
    border-radius: 10px;
}

.pvpB_rank_wrap {
    display: flex;
    position: sticky;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgb(0 8 30 / 30%);
    z-index: 4;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    flex-direction: column;
    overflow-y: scroll;
}

.pvpB_table {
    width: 280px;
    text-align: center;
}

.pvpB_table td {
    border: 1px solid rgb(255 255 255 / 10%);
    padding: 5px 10px;
}

.pvpB_rank_info {
    padding: 10px;
    background: rgb(0 0 0 / 20%);
    border-radius: 15px;
    font-size: 10pt;
    margin: 15px;
}

.pvpB_rank_winrate {
    margin-top: 10px;
}

.pvpB_rank_qual_text {
    font-weight: bold;
    font-size: 20pt;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 10px;
    padding: 1px 10px;
}

.pvpB_rank_tier_text {
    font-weight: bold;
    font-size: 20pt;
    margin-right: 5px;
}

.pvpB_rank_page {
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
}

.pvpB_rank_rate_text {
    font-weight: bold;
    font-size: 20pt;
}


.pvpB_rank_close {
    position: absolute;
    width: 40px;
    height: 40px;
    top:20px;
    right: 20px;
    background: url(assets/page_close.png) no-repeat;
    background-position: center center;
    background-size: contain;
    cursor: pointer;
    z-index: 20;
}

.pvpB_rank_wins {
    font-weight: bold;
    font-size: 14pt;
}

.pvpB_rank_losses {
    font-weight: bold;
    font-size: 14pt;
}

.da_cntr_a {
    color: #00ff80;
    font-weight: bold;
}

.da_cntr_all_a {
    color: #00ff80;
    font-weight: bold;
}

.go_to_album {
    display: inline-block;
    background: #ffa700;
    color: #00081e;
    padding: 9px 20px;
    border-radius: 15px;
    cursor: pointer;
    font-size: 12pt;
}

.go_to_album_info {
    display: inline-block;
    padding: 5px 13px;
    font-size: 10pt;
    background: rgb(0 0 0 / 20%);
    border-radius: 15px;
}