*,
*::before,
*::after {
  box-sizing: border-box!important;
  user-select:none;
  --webkit-user-select:none;
}
body {
    background-color: #0A161D !important;
    color: var(--color) !important;
    margin: 0 auto;
    line-height: normal;
    transition: var(--transition);
    font-family: "Geologica", sans-serif !important;
    background-size: cover;
    background-position: center;
        --tw-rotate: 180deg;
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgba(59, 130, 246, .5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
}
a{
text-decoration:none!important;
color:var(--color)!important;
}
button{
outline:none!important;
border:none;
cursor:pointer!important;
}
input{
border:none!important;
outline:none!important;
}
.odometer{
  font-family: "Geologica", sans-serif!important;
}
button:disabled{
cursor:no-drop!important; 
filter: brightness(0.6);
color:var(--color)!important;
}
p{
margin-bottom:0px!important;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
margin-bottom:0px!important;     
}
.hover:hover{
opacity:0.85;
cursor:pointer!important;
transition:var(--transition);
}
::selection {
background: #ffffff70;
}
::-moz-selection {
background: #ffffff70;
}  
body::-webkit-scrollbar {
  width: 0px;
}
body::-webkit-scrollbar-track {
  background: transparent;
}
body::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 20px;
  border: 0px solid transparent;
}
:root{
--bg: #070034;
--color:#f2ebf8;
--gradient-purple: linear-gradient(90deg, #952cfe, #6301ed);
--gradient-purple-reverse: #94a6cd26;
--gradient-purple-1st: #952cfe;
--gradient-purple-2st: #6301ed;
--border-radius: 10px;
--padding-sides: 15px;
--font-size-classic: 14px;
--transition:0.3s;
--card-bg: #11063c;
--card-bg-border: #130c45;
--gradient-purple-shadow:#6301ed85;
--gradient-orange: linear-gradient(90deg, #ff8e3b, #ff6020);
--gap:20px;
}    

.default_btn{
    background: linear-gradient(93.73deg, #108de7, #0855c4);
    color: var(--color);
    border-radius: var(--border-radius);
    height: 40px;
    width: fit-content;
    padding-left: var(--padding-sides);
    padding-right: var(--padding-sides);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-classic);
    transition: var(--transition);
}
.default_btn:hover{
--x: 100%;   
}
.default_btn.small{
height: 30px;    
}
.default_btn.medium{
height: 50px;    
}
.default_btn.big{
height: 60px;    
}
.default_btn.full{
 width:100%;   
}

input[name="login"] {
    height: 50px!important;
    margin-top: 15px!important;
    border: 1px solid #0855c4!important;
    border-radius: 10px!important;
    background: transparent!important;
    padding: 15px!important;
    color: #fff !important;
    width: 100%!important;
}

input[name="pass"] {
    height: 50px!important;
    margin-top: 15px!important;
    border: 1px solid #0855c4 !important;
    border-radius: 10px!important;
    background: transparent!important;
    padding: 15px!important;
    color: #fff !important;
    width: 100%!important;
}

button[name="regButton"]{
    width: 100%!important;
    height: 50px!important;
    border-radius: var(--border-radius)!important;
    margin-top: 15px!important;
    background: linear-gradient(93.73deg, #108de7, #0855c4)!important;
    color: var(--color)!important;
}

.header{
    position: fixed;
    top: 10;
    left: 0;
    right: 0;
    height: 80px;
    background: transparent;
    display: flex;
    align-items: center;
    padding: 11px;
    z-index:10;
}
.header .container{
    background: transparent;
    height: 100%;
    display: flex;
    justify-content: space-between;  
}
.header_navigation{
    box-shadow: 0px 0px 10px #070034c4;    
    width: fit-content;
    padding: 5px;
    border-radius: var(--border-radius);
    background: #1D263C;
    border: 1px solid transparent;
    height: 100%;
    display: flex;
    gap: 10px;
    align-items: center; 
}
.header_navigation .header_navigation_item{
    height: 100%;
    align-items: center;
    justify-content: center;
    display: flex;
    border-radius: var(--border-radius);
    padding-left: var(--padding-sides);
    padding-right: var(--padding-sides);
    font-size: var(--font-size-classic);  
}
.header_navigation .header_navigation_item.active{
    background: linear-gradient(93.73deg, #108de7, #0855c4);
    transition: var(--transition);
}
.header_navigation .header_navigation_item.active:hover{
--x: 100%;   
}

.header_userblock{
    box-shadow: 0px 0px 10px #070034c4;    
    width: fit-content;
    padding: 5px;
    border-radius: var(--border-radius);
    background: #1D263C;
    border: 1px solid transparent;
    height: 100%;
    display: flex;
    gap: 10px;
    align-items: center;  
}
.header_userblock .header_userbalance{
    border-radius: var(--border-radius);
    background: #94a6cd26;
    border: 1px solid transparent;
    height: 100%;
    align-items: center;
    justify-content: end;
    display: flex;
    font-size: var(--font-size-classic);
    padding-left: var(--padding-sides);
    padding-right: var(--padding-sides);
    width: 120px;  
}
.fpro{
font-family: "Font Awesome 6 Pro"!important;    
}
.fduo{
font-family: "Font Awesome 6 Duotone"!important;    
}
.header_userphoto{
    border-radius: var(--border-radius);
    background: #94a6cd26;
    border: 1px solid transparent;
    height: 100%;
    align-items: center;
    justify-content: flex-start;
    display: flex;
    font-size: var(--font-size-classic);
    padding-left: 7px;
    padding-right: 7px;
width: fit-content;
    position: relative;      
}
.header_userphoto img{
    width: 34px;
    height: 34px;
    border-radius: 5px;    
}
.header_userphoto i{
    width: 34px;
    height: 34px;
    border-radius: 5px;
    opacity: 0.3;
    position: inherit;
    right: -2px;
    font-size: 34px;
}    

.header_userblock button{
 height:100%;   
}
.header_userblock .header_userbalance{
position: relative;    
}
.header_userblock .header_userbalance i{
    position: absolute;
    left: 10px;    
}
.header_userblock .header_userbalance i:before{
  color: transparent;
  position: relative;
  background-clip: text;
  -webkit-background-clip: text;
background-image: linear-gradient(93.73deg, #108de7, #0855c4);
}    


.header_logo{
    box-shadow: 0px 0px 10px #070034c4;    
    height: 65px;
    border-radius: var(--border-radius);
    background: #1D263C;
    border: 1px solid transparent;
    width: 65px;
    margin-top: -3px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--border-radius);
    position: relative;    
}
.header_logo .title_logo{
    position: absolute;
    z-index: 1;
    font-size: 22px;
    font-weight: 500;
    line-height: 24px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;    
}
.header_logo_square {
width: 40px;
    height: 40px;
    background: var(--gradient-purple-reverse);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    border-radius: 10px;
}


.container.main{
margin-top: 100px; 
}

.home_screen{
    display: flex;
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
    margin-top: 250px;
    margin-bottom: 0px;
    padding: 50px 0px 50px 0px;
}

.home_screen .col_50{
        width: 50%;
}

.internal_first{
    text-align: center;
    padding: 0px 0px 0px 150px;
}

.home_screen h2{
    font-family: "Righteous";
    font-size: 3.6rem;
    font-weight: 600;
    margin-bottom: 30px!important;
}

.home_screen p{
    text-align: center;
    font-size: 18px;
}

.home_banners{
display:flex;
gap:var(--gap);
}
.home_banners .register_bonus{
height: 300px;
    width: 100%;
    background: linear-gradient(90deg, var(--gradient-purple-1st), var(--gradient-purple-2st) 51%, var(--gradient-purple-1st)) var(--x, 0) / 200%;
    transition: var(--transition);
    border-radius: var(--border-radius);    
    position:relative;
    overflow:hidden;
        padding: 30px;
}
.home_banners .register_bonus:hover{
--x: 100%;   
}    
.home_banners .register_bonus .banner_icon{
    width: 400px;
    position: absolute;
    right: 0;
    bottom: 0;    
    pointer-events:none;
}

.home_banners .newuser_bonus{
height: 300px;
    width: 50%;
    background: linear-gradient(90deg, #ff8c3a, #ff6120 51%, #ff8d3a) var(--x, 0) / 200%;
    transition: var(--transition);    
    border-radius: var(--border-radius);
    position: relative;
    overflow: hidden;
        padding: 30px;
}

.home_banners .newuser_bonus:hover{
--x: 100%;   
}   
.home_banners .newuser_bonus .banner_icon{
    width: 330px;
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    pointer-events: none;
    margin-left: auto;
    margin-right: auto;
}
.home_banners .register_bonus .banner_description{
display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    width: fit-content;
z-index: 1;
    position: relative;    
}
.home_banners .register_bonus .banner_description div{
    display: flex;
    flex-direction: column;
    gap: 10px;    
}
.home_banners .register_bonus .banner_description div .main_text{
font-size: 28px;
    width: 350px;
    line-height: 30px;
    text-shadow: 0px 2px 5px #00000029;
    word-break: break-word;    
}
.home_banners .register_bonus .banner_description div .muted_text{
    font-size: 13px;
    width: 350px;
    line-height: 20px;
    text-shadow: 0px 2px 5px #00000029;
    word-break: break-word;
    opacity: 0.4;   
}
.home_banners .register_bonus .banner_description .banner_claim_bonus{
    background: #ffffff1c;
    width: 250px;
    border-radius: var(--border-radius);
    padding: 8px;
    border: 1px solid #ffffff29;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    backdrop-filter: blur(8px);
    --webkit-backdrop-filter: blur(8px);  
}
.home_banners .register_bonus .banner_description .banner_claim_bonus .amount_claim{
    display: flex;
    flex-direction: column;
    gap: 0px;    
}
.home_banners .register_bonus .banner_description .banner_claim_bonus .amount_claim span:nth-child(1){
    text-transform: uppercase;
    opacity: 0.4;
    font-size: 12px;    
}
.home_banners .register_bonus .banner_description .banner_claim_bonus .amount_claim span:nth-child(2){
    font-size: 18px;
    font-weight: 600;    
}
.home_banners .register_bonus .banner_description .banner_claim_bonus .claim_button{
border-radius: 5px;
    height: 45px;
    color: #932afd;
    font-size: 15px;
    padding-left: var(--padding-sides);
    padding-right: var(--padding-sides);
}

.home_banners .newuser_bonus .banner_description2{
    display: flex;
    flex-direction: column;
    width: fit-content;    
z-index: 1;
    position: relative;    
}
.home_banners .newuser_bonus .banner_description2 span:nth-child(1){
    font-size: 28px;
    width: 350px;
    line-height: 30px;
    text-shadow: 0px 2px 5px #00000029;
    word-break: break-word;    
}
.home_banners .newuser_bonus .banner_description2 span:nth-child(2){
    font-size: 13px;
    width: 350px;
    line-height: 20px;
    text-shadow: 0px 2px 5px #00000029;
    word-break: break-word;
    opacity: 0.5;    
}

.home_games{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--gap);
    margin-top: var(--gap);
}  
.home_games .home_games_item{
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: var(--border-radius);
    background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box, linear-gradient(180deg, var(--card-bg-border), var(--card-bg)) border-box;
    border: 1px solid transparent;
    padding: var(--padding-sides);
}
.home_games .home_games_item .game_image{
 width: 100%;
    height: 150px;
    border-radius: var(--border-radius);   
}
.home_games .home_games_item .game_name{
    text-align: center;
    color: #8c65bb;
    font-weight: 600;
    font-size: 18px;
    line-height: 18px;
    margin-top: 15px;    
}
.home_games .home_games_item .game_sort{
    font-size: 14px;
    line-height: 14px;
    text-align: center;
    color: #46226f;
    font-weight: 500;
    margin-top: 7px;    
}


@media (max-width: 1097px) {
   .home_banners {
      flex-direction:column!important; 
   } 
.home_banners .register_bonus {
padding: 15px!important;    
    height: 250px!important;
}
.home_banners .newuser_bonus {
display:none!important;    
}
.home_banners .register_bonus .banner_description div .main_text {
    font-size: 20px!important;
    width: 100%!important;
}
.home_banners .register_bonus .banner_description div .muted_text {
    font-size: 12px!important;
    width: 100%!important;
}
 .home_banners .register_bonus .banner_description .banner_claim_bonus {
  width:100%!important;   
 }
.header_navigation {
display:none!important;     
}
 
.home_games{
grid-template-columns:1fr;    
}

   .home_banners .register_bonus .banner_icon {
    width: 250px!important;    
}  
}

.loading-page{
    margin-top: 100px;
    display: flex;
    justify-content: center;    
}
.loader {
    width: 32px;
    height: 32px;
    border: 4px solid #FFF;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    }
    @keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
    }     
.home_games .home_games_item{
    transition: transform var(--transition);    
}
.home_games .home_games_item:hover{
    transform: scale(1.02);
}      

.classic_table_container{
    display: flex;
    flex-direction: column;
    border-radius: var(--border-radius);
    background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box, linear-gradient(180deg, var(--card-bg-border), var(--card-bg)) border-box;
    border: 1px solid transparent;
}
.classic_table_container.mt{
 margin-top:var(--gap);   
}
.classic_table_container.mb{
 margin-bottom:var(--gap);   
}
.classic_table_header{
display: flex;
    justify-content: space-around;
    padding: var(--padding-sides);
    border-bottom: 2px solid #8c65bb0d;  
}
.classic_table_header .item{
    width: 100%;
    text-align: center;
    font-size: var(--font-size-classic);
    color: #8c65bb;
    font-weight: 500;
}
.classic_table_content_container{
    display: flex;
    flex-direction: column;      
}
.classic_table_item:nth-child(1){
 border:none;   
}
.classic_table_item{
    display: flex;
    justify-content: space-around;
    padding: var(--padding-sides);
    border-top: 1px solid #46226f1c; 
}
.classic_table_item .item{
width: 100%;
    text-align: center;
    font-size: var(--font-size-classic);
    color: #50376d;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.classic_table_item .item.text_green{
    color: #5fa95b;
    font-weight: 600;    
}
.classic_table_item .item.text_red{
color: #bf5353;
    font-weight: 600;    
}
.classic_table_item .item i{
    width: 24px;
    height: 24px;
}
.classic_table_item .item img{
    width: 24px;
    height: 24px;
    border-radius: 5px;    
}

@media (max-width: 1097px) {
.classic_table_header .item {
    font-size: 12px!important;
}
.classic_table_item .item {
    font-size: 12px!important;    
}
.classic_table_item .item i{
    width: 18px!important; 
    height: 18px!important; 
}
.classic_table_item .item img{
    width: 18px!important; 
    height: 18px!important; 
    border-radius: 3px!important;     
}
}

.home_banners .register_bonus .banner_icon {
transition: transform var(--transition);    
}
.home_banners .register_bonus:hover .banner_icon{
transform: scale(1.05);    
}
.home_banners .newuser_bonus .banner_icon {
transition: transform var(--transition);    
}
.home_banners .newuser_bonus:hover .banner_icon{
transform: scale(1.05);    
}


.accordion {
    width: 100%;
    margin: 2rem auto;
}
.accordion-item {
border-radius: 16px !important;
    background: #1d1e20 !important;;
    border: 1px solid transparent !important;
    color: #f0f2f5 !important;
    margin: 1rem 0;
}
.accordion-item-header {
  padding: 0.5rem 3rem 0.5rem 1rem;
  min-height: 3.5rem;
  line-height: 1.25rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}
.accordion-item-header::after {
  content: "\002B";
    font-size: 24px;
  position: absolute;
  right: 1rem;
    color: #f2ebf824;  
}
.accordion-item-header.active::after {
  content: "\2212";
  color:#f2ebf8ad!important;
}
.accordion-item-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  
}
.accordion-item-body-content {
    padding: 1rem;
    color: #9aa1b1;
    font-weight: 400;
    font-size: 14px;
}
.accordion-item-header.active{
    background: #2e3035; 
    border-radius: 16px 16px 0px 0px;   
    color:#fff!important;
 } 
 .faq-title{
        display: flex;
    justify-content: center;
    height: 50px;
    align-items: center;
    font-size: 24px;
    font-weight: 500;
    text-transform: uppercase;
    text-shadow: 0px 0px 20px #8669a9ab; 
 }
@media (max-width: 1097px) { 
 .header .container{
     padding:0!important;
 }
.accordion-item-header {
 font-size:12px!important;  
        min-height: 2.8rem!important; 
}
.accordion-item-body-content {
 font-size:13px!important;     
}

 
}


.bonus_banners{
    display: flex;
    gap: var(--gap);    
}   
.bonus_banners .bonus_vk{
    height: 250px;
    width: 100%;
background: linear-gradient(90deg, #007eff, #0043ff 51%, #007eff) var(--x, 0) / 200%;
    transition: var(--transition);
    border-radius: var(--border-radius);
    position: relative;
    overflow: hidden;
    padding: 30px;    
}  

.bonus_banners .bonus_vk:hover{
--x: 100%;   
} 
.bonus_banners .bonus_vk img{
    width: 170px;
    position: absolute;
    right: -15;
    bottom: -28px;
    transform: rotate(5deg);    
}
.bonus_banners .bonus_tg{
    height: 250px;
    width: 100%;
background: linear-gradient(90deg, #00b8ff, #0066ff 51%, #00b8ff) var(--x, 0) / 200%;
    transition: var(--transition);
    border-radius: var(--border-radius);
    position: relative;
    overflow: hidden;
    padding: 30px;
}  

.bonus_banners .bonus_tg:hover{
--x: 100%;   
} 
.bonus_banners .bonus_tg img{
    width: 170px;
    position: absolute;
    right: -24px;
    bottom: -28px;
    transform: rotate(-12deg);  
}
.banner_desc{
    display: flex;
    flex-direction: column;
width: 100%;
    gap: 10px;
}
.banner_title{
    font-size: 28px;
    width: fit-content;
    line-height: 30px;
    text-shadow: 0px 2px 5px #00000029;
    word-break: break-word;    
}
.banner_info{
font-size: 15px;
    width: fit-content;
    line-height: 20px;
    text-shadow: 0px 2px 5px #00000029;
    word-break: break-word;
    opacity: 0.4;    
}
.banner_info b{
    filter: drop-shadow(0px 0px 5px black);    
}


.bonus_banners .bonus_promo{
height: 250px;
    width: 700px;
background: linear-gradient(90deg, var(--gradient-purple-1st), var(--gradient-purple-2st) 51%, var(--gradient-purple-1st)) var(--x, 0) / 200%;
    transition: var(--transition);
    border-radius: var(--border-radius);
    position: relative;
    overflow: hidden;
    padding: 30px;
}  

.bonus_banners .bonus_promo:hover{
--x: 100%;   
} 


.banner_desc .banner_claim_bonus{
background: #ffffff1c;
    width: fit-content;
    border-radius: var(--border-radius);
    padding: 8px;
    border: 1px solid #ffffff29;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    backdrop-filter: blur(8px);
    gap: 5px;
    -webkit-backdrop-filter: blur(8px);
    position: absolute;
    bottom: 30px;
    left: 30px;
    right: 30px; 
}
.banner_desc .banner_claim_bonus .amount_claim{
display: flex;
    flex-direction: column;
    gap: 0px;    
}
.banner_desc .banner_claim_bonus .claim_button {
    border-radius: 5px;
    height: 40px;
    color: #932afd;
    font-size: 15px;
    padding-left: var(--padding-sides);
    padding-right: var(--padding-sides);
}
.banner_desc .banner_claim_bonus .amount_claim input{
    width: 100%;
    height: 40px;
    border-radius: 5px;
    padding-left: 10px;
    font-size: 14px;
    color: #fff;
    font-weight: 400;    
    background: #f0f0f038;    
}
.banner_desc .banner_claim_bonus .amount_claim input::-webkit-input-placeholder {
    color:    #ffffff9c;
}
.banner_desc .banner_claim_bonus .amount_claim input:-moz-placeholder {
   color:    #ffffff9c;
   opacity:  1;
}
.banner_desc .banner_claim_bonus .amount_claim input::-moz-placeholder {
   color:    #ffffff9c;
   opacity:  1;
}
.banner_desc .banner_claim_bonus .amount_claim input:-ms-input-placeholder {
   color:    #ffffff9c;
}
.banner_desc .banner_claim_bonus .amount_claim input::-ms-input-placeholder {
   color:    #ffffff9c;
}
.banner_desc .banner_claim_bonus .amount_claim input::placeholder {
   color:    #ffffff9c;
}

.white_button{
    border-radius: 5px;
    height: 40px;
    color: #0073ff;
    font-size: 15px;
    padding-left: var(--padding-sides);
    padding-right: var(--padding-sides);
    position: absolute;
    bottom: 30px;
    left: 30px;    
}
.white_button.vkbg{
color: #0073ff!important;    
}
.white_button.tgbg{
color: #009eff!important;    
}
.white_button.nonactive{
opacity:0.8; 
}


.banner_desc .banner_tg_bonus{
background: #ffffff1c;
    width: fit-content;
    border-radius: var(--border-radius);
    padding: 8px;
    border: 1px solid #ffffff29;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    backdrop-filter: blur(8px);
    gap: 5px;
    -webkit-backdrop-filter: blur(8px);
    position: absolute;
    bottom: 30px;
    left: 30px;
    right: 30px; 
}
.banner_desc .banner_tg_bonus .amount_claim{
display: flex;
    flex-direction: column;
    gap: 0px;    
}
.banner_desc .banner_tg_bonus .claim_button {
    border-radius: 5px;
    height: 40px;
    color: #008fff;
    font-size: 15px;
    padding-left: var(--padding-sides);
    padding-right: var(--padding-sides);
}
.banner_desc .banner_tg_bonus .amount_claim input{
width: 120px;
    height: 40px;
    border-radius: 5px;
    padding-left: 10px;
    font-size: 14px;
    color: #fff;
    font-weight: 400;    
    background: #f0f0f038;    
}
.banner_desc .banner_tg_bonus .amount_claim input::-webkit-input-placeholder {
    color:    #ffffff9c;
}
.banner_desc .banner_tg_bonus .amount_claim input:-moz-placeholder {
   color:    #ffffff9c;
   opacity:  1;
}
.banner_desc .banner_tg_bonus .amount_claim input::-moz-placeholder {
   color:    #ffffff9c;
   opacity:  1;
}
.banner_desc .banner_tg_bonus .amount_claim input:-ms-input-placeholder {
   color:    #ffffff9c;
}
.banner_desc .banner_tg_bonus .amount_claim input::-ms-input-placeholder {
   color:    #ffffff9c;
}
.banner_desc .banner_tg_bonus .amount_claim input::placeholder {
   color:    #ffffff9c;
}

@media (max-width: 1097px) { 
 
.bonus_banners {
 flex-direction:column;   
}
.bonus_banners .bonus_promo {
width:100%!important;
height: 180px!important;
     padding: 20px!important;
}
.banner_desc {
     gap: 5px!important; 
}
.banner_desc .banner_claim_bonus{
    left: 20px!important; 
    bottom: 20px!important;     
}  
.bonus_banners .bonus_vk {
width:100%!important;
height: 180px!important;
     padding: 20px!important;    
}
.bonus_banners .bonus_tg {
width:100%!important;
height: 180px!important;
     padding: 20px!important;    
}
.bonus_banners .bonus_vk img {
        width: 90px !important;
        right: -8px !important;
        top: -16px !important;    
}
.bonus_banners .bonus_tg img {
        width: 100px !important;
        right: -20px !important;
        top: -22px !important;
}
.white_button{
    bottom: 20px!important; 
    left: 20px!important;     
}    
.banner_desc .banner_tg_bonus{
    left: 20px!important;
    bottom: 20px!important;    
}    
.banner_title {
font-size: 24px!important;    
}
.banner_info {
    font-size: 13px!important;
}
    
    
    
}

.footer{
    width: 100%;
    position: relative;
    margin-top: 100px;
    margin-bottom: 90px;
} 
.footer .container{
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;    
} 
.footer .container .copyright{
 color: #f0f2f5 !important;   
  font-size:14px;
}
.footer .container .socials{
display: flex;
    gap: 10px;    
}
.footer .container .socials a{
    color: #f0f2f5 !important;
    font-size: 14px;    
}
.footer .container .socials a img{
    width: 32px;
    height: 32px;    
}
@media (max-width: 1097px) {
.footer .container .copyright{
 color: #f0f2f5 !important;  
 font-size:12px!important;
} 
#f1{
display:none;    
}
#f2{
display:none;
}
}


.referals{
    display: flex;
    gap: var(--gap);    
}    
.referal_stats{
    display: grid;
    gap: var(--gap);
    grid-template-columns: 1fr 1fr;
    width: 100%;
}
.referal_stats_item{
 width: 100%;
    box-shadow: 0px 0px 10px #070034c4;
    background: var(--card-bg);
    padding: 5px;
    border-radius: var(--border-radius);
    background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box, linear-gradient(180deg, var(--card-bg-border), var(--card-bg)) border-box;
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;
    padding: 20px;   
}
.referal_stats_item_title{
    font-size: 18px;
    color: #8c65bb;
    text-transform: uppercase;
    font-weight: 600;
    text-align: center;    
}
.referal_stats_item_amount{
    text-align: center;
    font-size: 15px;
    margin-top: 5px;
    font-weight: 500;
    color: #ece5f3;    
}
.ref_action{
gap: 10px;
    height: 100px;
    box-shadow: 0px 0px 10px #070034c4;
    background: var(--card-bg);
    padding: 5px;
    border-radius: var(--border-radius);
    background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box, linear-gradient(180deg, var(--card-bg-border), var(--card-bg)) border-box;
    border: 1px solid transparent;
    display: flex;
    padding: 20px;
    width: 50%;    
}
.ref_action input{
    background: #ffffff26;
    font-size: 14px;
    width: 100%;
    border-radius: 10px;
    padding-left: 15px;
    padding-right: 15px;
    color: #fff;    
}
.ref_action button{
    width: 70px;
    border-radius: 10px;
    color: #ede0f8;
    background: linear-gradient(90deg, var(--gradient-purple-1st), var(--gradient-purple-2st) 51%, var(--gradient-purple-1st)) var(--x, 0) / 200%;
    font-size: 20px;    
    transition:var(--transition);
}
.ref_action button:hover{
--x: 100%;   
} 

@media (max-width: 1097px) {
    
 .referals {
  flex-direction:column;   
 }
.ref_action {
 width:100%!important;   
}
   .referal_stats_item_title {
    font-size:12px!important;   
   }
.faq-title {
 font-size:16px!important;   
}
}

.text__content{
    box-shadow: 0px 0px 10px #070034c4;
    background: var(--card-bg);
    border-radius: var(--border-radius);
    background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box, linear-gradient(180deg, var(--card-bg-border), var(--card-bg)) border-box;
    border: 1px solid transparent;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: #8c65bb; 
}  
.text__content p{
  color:#8c65bb54;  
}


.game_area{
box-shadow: 0px 0px 10px #070034c4;
    width: 100% background: var(--card-bg);
    padding: 30px;
    border-radius: var(--border-radius);
    background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box, linear-gradient(180deg, var(--card-bg-border), var(--card-bg)) border-box;
    border: 1px solid transparent;
    height: fit-content;
    display: flex;
    flex-direction: column;
    gap: 10px;
}    

.nvuti_game{
    display: flex;
    gap: var(--gap);
    width: 100%;    
}
.nvuti_game .controls{
    width: 100%;
    display: flex;
    gap: 20px;    
height: fit-content;    
}
.nvuti_game .controls .control{
width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;    
}
.nvuti_game .controls .control input{
    height: 50px;
    border-radius: var(--border-radius);
    color: #f2ebf8;
    background: #ffffff0a;
    font-size: 14px;
    padding-left: var(--padding-sides);
    padding-right: var(--padding-sides);    
}
.nvuti_game .controls .control span{
    font-size: 14px;    
}
.nvuti_game .action{
    width: 100%;
    flex-direction: column;
    display: flex;    
    gap: 25px;    
}
.nvuti_game .action .dice_wins{
    display: flex;
    flex-direction: column;
    text-align: center;    
}
.nvuti_game .action .dice_wins .centerwin{
    font-size: 38px;
    font-weight: 600;
    text-align: center;    
}
.nvuti_game .action .dice_wins .centerwin_info{
     color: #9775c161;
    font-size: 14px;   
}
.nvuti_game .action .tw_action{
     display: flex;
    width: 100%;
    gap: 10px;   
}
.nvuti_game .action .tw_action .insert_action{
    width: 100%;    
}
.nvuti_game .action .tw_action .insert_action .dice-tickets{
color: #f2ebf894;
    display: flex;
    justify-content: center;
    margin-bottom: 7px;
    font-size: 14px;
}
.nvuti_game .action .tw_action .insert_action button{
    width: 100%;   
}
#succes_bet{
background: linear-gradient(45deg, #76c375, #4dc349);
    border-radius: var(--border-radius);
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    gap: 5px;
    margin-top: -10px;    
}
#error_bet{
    background: linear-gradient(45deg, #c35959, #c34949);
    border-radius: var(--border-radius);
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    gap: 5px;
    margin-top: -10px;    
}
#betLoad{
    background: #ff000000;
    border-radius: var(--border-radius);
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    gap: 5px;
    margin-top: -10px;    
}
.hash_container{
    width: 100%;
    word-break: break-word;
    text-align: center;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.hash_container span{
    color: #8c65bb;
    font-size: 16px;    
}
.hash_container #hash{
     font-size: 12px;
    color: #442d5f;   
}


@media (max-width: 1097px) {
    
 .nvuti_game {
  flex-direction:column!important;   
 }
.nvuti_game .controls {
  flex-direction:column!important;       
}
.hash_container{
display:none;    
}   

}

.modal {
--bs-modal-width: 600px;
}
.modal-content{
    border-radius: var(--border-radius)!important;
    background: #1D263C!important;
    border: 1px solid transparent!important;
    padding: 15px!important;
}
.modal_header{
    height: 30px;
    align-items: center;
    display: flex;
    width: 100%;
    gap: 10px;    
}
.clos{
    position: absolute;
    right: 15px;
    top: 15px;    
}
.modal_header .modal_types{
     display: flex;
    gap: 7px;
    align-items: center;
    border-radius: var(--border-radius);
    background: #94a6cd26;
    border: 1px solid transparent;
    padding: 10px;
    font-size: 14px;   
}
.modal_header .modal_types.active{
background: #94a6cd26;    
}
.modal_header .modal_types i{
    width: 20px;    
}

.modal_header .modal_types i.fa-duotone:after, .fad:after {
    color: #c28eff;
}

.modal_wallet_combo{
 display: flex;
    flex-direction: column;
gap: 10px;
    width: 100%;
    margin-top: 20px;   
}
.modal_wallet_combo .header_title{
    font-size: 15px;
    width: 100%;
    text-align: left;    
}
.modal_wallet_combo input{
border-radius: var(--border-radius);
    background: #94a6cd26;
    border: 1px solid transparent !important;
    padding: 10px;
    font-size: 14px;
    color: #eee7f5;
    padding-left: 15px; 
}

input::-webkit-input-placeholder {
    color:    #ffffff9c;
}
input:-moz-placeholder {
   color:    #ffffff9c;
   opacity:  1;
}
input::-moz-placeholder {
   color:    #ffffff9c;
   opacity:  1;
}
input:-ms-input-placeholder {
   color:    #ffffff9c;
}
input::-ms-input-placeholder {
   color:    #ffffff9c;
}
input::placeholder {
   color:    #ffffff9c;
}

.modal_wallet_buttons{
display: flex;
    gap: 10px;    
}
.modal_wallet_buttons button{
border-radius: var(--border-radius);
    background: #94a6cd26;
    border: 1px solid transparent !important;
    width: 100%;
    padding: 7px;
    color: #fff;
    font-weight: 600;
    font-size: 14px;    
}
.modal_wallet_buttons button.active{
    background: linear-gradient(93.73deg, #108de7, #0855c4);
    color: #fff;
    border: none !important;    
}
.modal_wallet_method_list{
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: 20px;    
}
.modal_wallet_method_list .header_title{
    font-size: 15px;
    width: 100%;
    text-align: left;    
}
.modal_wallet_method_list .modal_wallet_methods{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px;
}
.modal_wallet_method_list .modal_wallet_methods .method_item{
    width: 100%;
    border-radius: var(--border-radius);
    border: 2px solid transparent !important;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;  
        gap: 7px;
        position:relative;
        overflow:hidden;
        transition: var(--transition);
}
.modal_wallet_method_list .modal_wallet_methods .method_item img{
    width: 32px;
    height: 32px;    
    z-index: 1;    
    transition: var(--transition);
    border-radius: 10px;        
}
.modal_wallet_method_list .modal_wallet_methods .method_item span{
    font-size: 14px;
    z-index: 1;    
    color: #f2ebf86e;    
        transition: var(--transition);    
}

.modal_wallet_method_list .modal_wallet_methods .method_item.active{
    background: linear-gradient(#1b0642, #1b0642) padding-box, linear-gradient(90deg, #482a81, #311d5d) border-box;
        transition: var(--transition);    
}
.modal_wallet_method_list .modal_wallet_methods .method_item.active span{
    font-size: 14px;
    color: #fff;    
}
.modal_wallet_method_list .modal_wallet_methods .method_item .backdrop_bg{
    width: 50px;
    height: 50px;
    position: absolute;
    top: -10px;
    border-radius: 100px;    
    filter: blur(30px);  
    opacity:0.5;
}
.modal_wallet_method_list .modal_wallet_methods .method_item.active .backdrop_bg{
opacity:1;
        transition: var(--transition);
}
.modal_wallet_method_list .modal_wallet_methods .method_item .backdrop_bg.sbp{
    background: linear-gradient(180deg, #ffb700, #ff7013);
}
.modal_wallet_method_list .modal_wallet_methods .method_item .backdrop_bg.fk{
background: linear-gradient(180deg, #4cb8e9, #356eb3);
}
.modal_wallet_method_list .modal_wallet_methods .method_item .backdrop_bg.banks{
    background: linear-gradient(180deg, #ff2734, #d90a3b);
}
.modal_wallet_method_list .modal_wallet_methods .method_item .backdrop_bg.crypto{
    background: linear-gradient(180deg, #50af95, #0ef7b7);
}

.modal_wallet_method_list .modal_wallet_methods .method_item .backdrop_bg.sber{
background: linear-gradient(180deg, #5ddb23, #21a038);
}
.modal_wallet_method_list .modal_wallet_methods .method_item .backdrop_bg.tinkoff{
    background: linear-gradient(90deg, #ffdd2d, #b5ff00);
}
.modal_wallet_method_list .modal_wallet_methods .method_item .backdrop_bg.banksUAH{
    background: linear-gradient(90deg, #e5d605, #0fb5eb);
}
.modal_wallet_method_list .modal_wallet_methods .method_item .backdrop_bg.banksKZ{
    background: linear-gradient(90deg, #34cde5, #16e3ff);
}

.modal_footer{
    display: flex;
    align-items: center;
    justify-content: end;
    margin-top: 15px;    
gap: 10px;    
}
.default_btn.nogradient{
    background: #94a6cd26;
    border: 1px solid transparent !important;
    color: #fff!important;    
}

@media (max-width: 1097px) {
    
.modal_wallet_method_list .modal_wallet_methods {
    grid-template-columns: 1fr 1fr 1fr!important;
}
.modal_wallet_buttons button {
    font-size: 12px!important;
}

}


.validation_input_group{
 display: flex;
    background: linear-gradient(#1b0642, #1b0642) padding-box, linear-gradient(180deg, #191349, #140b3b) border-box;
    border: 1px solid transparent;
    width: 100%;
    height: 45px;
    border-radius: var(--border-radius);
    align-items: center;   
    margin-top: 15px;    
}    
.validation_input_group .validation_input_icon{
    width: 50px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #9f97b0;    
}    
.validation_input_group .validation_input{
width: 100%;
    height: 100%;
    background: transparent;
    color: #f2ebf8;
    font-size: 14px;    
} 
.validation_terms{
    text-align: center;
    font-size: 12px;
    margin-top: 25px;
    margin-bottom: 25px;    
}
.validation_terms span{
    color: #108de7;    
}
.validation_terms span a{
color: #108de7 !important;
    font-weight: bold;    
}
.auth_socials__divider{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    white-space: nowrap;
    line-height: 12px;
    font-size: 15px;
    color: #c1a9df;
    font-weight: 500;
    margin-top: 10px;
}
.auth_socials__divider:before, .auth_socials__divider:after {
    content: "";
    width: 100%;
    height: 1px;
background: #46226f3b;
}

.button_tg{
    width: 100%;
    height: 50px;
    border-radius: var(--border-radius);
    margin-top: 15px;
    background: #0088CC;    
}

.button_tg img{
width: 40px;
    height: 40px;    
}

.button_vk{
    width: 100%;
    height: 50px;
    border-radius: var(--border-radius);
    margin-top: 15px;
    background: #0078ff;    
}
.button_vk img{
width: 40px;
    height: 40px;    
}
.auth_footer{
    color: #613f87;
    text-align: center;
    font-size: 14px;
    margin-top: 15px;    
}
.auth_footer a{
    color: #8c65bb !important;
    font-weight: bold; 
    cursor: pointer;    
}


.profile_container{
display: flex;
    gap: var(--gap);    
}   
.profile_cashier{
    width: 30%;
    padding: 20px;
    border-radius: var(--border-radius);
    background: #1D263C;
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;
    gap: 10px;    
}
.profile_balance{
display: flex;
    flex-direction: column;
    border-radius: var(--border-radius);
    background: #94a6cd26;
    border: 1px solid transparent;
    padding: 10px;  
}
.profile_balance span:nth-child(1){
    text-transform: uppercase; 
    font-size:14px;
}
.profile_balance span:nth-child(2){
    color: #e4dbeb78;
    font-weight: 500;
    font-size: 18px;    
}
.default_btn.green{
width: 100%;
    background: linear-gradient(90deg, #27d15b, #198b3c 51%, #27d15b) var(--x, 0) / 200%;    
}
.default_btn.red{
    width: 100%;
    background: linear-gradient(90deg, #c53d44, #7f1b1b 51%, #c53d44) var(--x, 0) / 200%;    
}

.profile_info{
width: 100%;
    background: var(--card-bg);
    padding: 20px;
    border-radius: var(--border-radius);
    background: #1D263C;
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;
    gap: 10px;   
}
.title_info{
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 500;
    color: #efe5f8;    
}
.login_current{
 border: 1px solid #c59af814;
    border-radius: 10px;
    padding: 10px;
    font-size: 16px;
    display: flex;
    gap: 6px;
    align-items: center;
}
.login_current b{
}
.login_current i{
    font-size: 16px;
}

.telegram_alert{
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background: linear-gradient(45deg, #039be5, #006eff);
}
.telegram_alert button{
    background: linear-gradient(90deg, #ffffff, #b1d2f1 51%, #ffffff) var(--x, 0) / 200%;
    color: #017df7;  
}
.telegram_alert .telegram_alert_combo{
    display: flex;
    gap: 10px;
    align-items: center;    
}
.telegram_alert .telegram_alert_combo img{
    width: 32px;
    height: 32px;    
}
.telegram_alert .telegram_alert_combo span{
font-weight: 500;
    font-size: 13px;
    color: #efe5f8;    
}

.profile_set_details{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: 100%;
    gap: 10px;    
}
.profile_set_details input{
    height: 50px;
    border-radius: var(--border-radius);
    color: #f2ebf8;
    background: #ffffff0a;
    font-size: 14px;
    padding-left: var(--padding-sides);
    padding-right: var(--padding-sides);    
}
.profile_set_details button{
    height: 50px;
    width: 100%;
}

@media (max-width: 1097px) {
    
.profile_container {
    flex-direction: column;    
}
.profile_cashier {
    width: 100%!important;
}
.telegram_alert .telegram_alert_combo span {
    font-size: 12px!important;
}
.profile_set_details {
grid-template-columns: 1fr!important;    
}
.default_btn.red {
 width:100%!Important;   
}

}


.mobile_bar{
left: 0;
    right: 0;
    width: 100%;
    position: fixed;
    bottom: 0;
    border-radius: var(--border-radius);
    background: #1D263C;
    border: 1px solid transparent;
    height: 70px;
    display: none;
    justify-content: space-around;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
    z-index: 4;    
} 
.mobile_bar a{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: #108de7 !important;
    font-size: 14px;
    font-weight: 600;   
} 
.mobile_bar a i{
     color: #108de7 !important;
    font-size: 20px;   
} 
@media (max-width: 1097px) {
.mobile_bar{
 display:flex!important;   
}
    
}

.righteous-regular {
  font-family: "Righteous", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.mine {
    display: flex;
    margin-bottom: 50px;
}

.panel-control-mines{
    margin: 0 auto;
}

.mines-selector{
    margin: 0 auto;
    width: 50%;
    min-width: 510px;
    padding: .5rem 1rem;
    display: flex;
    background: #151b2e;
    border-radius: 16px;
    justify-content: space-between;
}

.bets-selector{
    margin-top: 20px !important;
    margin: 0 auto;
    width: 50%;
    min-width: 510px;
    padding: .5rem 1rem;
    background: #151b2e;
    border-radius: 16px;
    display: flex;
}

.basis-2\/3 {
    flex-basis: 66.666667% !important;
}

.basis-1\/3 {
    flex-basis: 33.333333% !important;
    padding-left: 10px;
}

.ml-1 {
    margin-left: .25rem !important;
}
.my-auto {
    margin-bottom: auto !important;
    margin-top: auto !important;
}

.app-input__currency {
    color: hsla(0, 0%, 100%, .251);
    font-weight: 500;
    text-align: left;
}

.bet-panel__control {
    align-items: center;
    display: flex;
    height: 44px;
    justify-content: center;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    position: relative;
    width: 44px;
    line-height: normal;
    background: none;
    border: none;
    font-size: 100%;
    margin: 0;
}

.bet-panel__control-border-right {
    right: 0;
    --tw-bg-opacity: 1;
    background-color: rgb(151 163 203 / var(--tw-bg-opacity));
    border-radius: .75rem;
    height: 60%;
    opacity: .2;
    position: absolute;
    width: 1px;
}

.bet-panel__control-border-left {
    left: 0;
    --tw-bg-opacity: 1;
    background-color: rgb(151 163 203 / var(--tw-bg-opacity));
    border-radius: .75rem;
    height: 60%;
    opacity: .2;
    position: absolute;
    width: 1px;
}

.bet-panel__control-icon {
    color: #97a3cb;
}

.input-money{
color: #f3f3f3;
    display: flex;
    font-family: Halvar Breit Rg, sans-serif;
    font-size: 18px;
    font-weight: 500;
    height: 44px;
    line-height: 24px;
    background: #0a0d2c;
    border-radius: 8px;
}

.input-money-control{
    width: 100% !important;
    display: flex !important;
}

.input-money-control-inputer{
    padding: .7rem 0;
    justify-content: center !important;
    flex: 1 1 !important;
    display: flex !important;
}

input#minesAmount {
    width: 90px;
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    margin-right: 2%;
    text-align: right;
    background: none;
    border: none;
    margin: 0;
    outline: none;
    color: #f3f3f3;
    font-family: Cherry Bomb One, sans-serif;
}

.mines-amount-cont{
    align-items: center;
    display: flex;
    justify-content: space-between;
    --tw-bg-opacity: 1;
    background-color: rgb(10 15 30 / 1);
    border-radius: .5rem;
    flex: 0 1 auto;
    flex-basis: 66.666667%;
    height: 2.75rem;
    max-width: 225px;
    padding: .75rem 1rem;
}

.select-traps__arrow-icon_prev{
    --tw-rotate: 180deg;
    fill: #97a3cb;
    height: 1.25rem;
    width: .75rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

button#prev_preset_btn {
    background-color: transparent;
}

button#next_preset_btn {
    background-color: transparent;
}

.select-traps__arrow-icon_next{
    fill: #97a3cb;
    height: 1.25rem;
    width: .75rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.select-traps__content {
    align-content: center;
    align-items: center;
    display: flex;
    flex: none;
    flex-direction: column;
    width: 5rem;
}

.select-traps__traps_amount {
    color: #f3f3f3;
    font-family: Halvar Breit Md, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

.select-traps__title {
    color: #97a3cb;
    font-size: 12px;
    font-weight: 400;
    line-height: 15px;
}

input#minesBombs {
    color: #f3f3f3;
    width: 90px;
    font-family: Cherry Bomb One, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
    text-align: center;
    background: none;
}

.status-bar__status {
    align-items: center;
    -webkit-column-gap: .5rem;
    column-gap: .5rem;
    display: flex
;
}
.status-bar__icon {
    display: flex
;
    place-items: center;
}
svg {
    vertical-align: middle;
}

.status-bar__status-content {
    align-items: flex-start;
    display: flex
;
    flex-direction: column;
    justify-content: center;
}

.status-bar__status-content {
    align-items: flex-start;
    display: flex
;
    flex-direction: column;
    justify-content: center;
}
.status-bar__status-text
{
    padding-left: 1px;
    line-height: 10px;
}

.status-bar__status-text-amount, .status-bar__status-text-currency {
    font-family: Cherry Bomb One, sans-serif;
    font-size: 13px;
    line-height: 1rem;
}

.leading-4 {
    line-height: 1rem !important;
}
.text-sm {
    font-size: .875rem !important;
}

.status-bar__status-text-currency {
    color: #858cab;
    font-weight: 500;
}

.status-bar__status-text-amount, .status-bar__status-text-currency {
    font-family: Cherry Bomb One, sans-serif;
    font-size: .875rem;
    line-height: 1rem;
}

.status-bar__status-title {
    color: #13f36c;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1rem;
    margin-right: .25rem;
    white-space: nowrap;
}

.mines_wrapper:before{
    background-image: url(/media/crack2.svg);
    background-size: 68px 201px;
    content: "";
    height: 201px;
    left: -125px;
    position: absolute;
    top: 140px;
    width: 68px;
}

.cells-board {
    background-color: #0a0f1d;
    background-image: url(/media/cellsFrame.png);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: auto;
    border-radius: 25px;
    box-shadow: 0 -2px 20px rgba(42, 49, 69, .4), 0 4px 54px rgba(42, 49, 69, .2);
    display: grid;
    grid-template-columns: repeat(5, 66px);
    grid-template-rows: repeat(5, 66px);
    overflow: hidden;
    padding: 10px;
}

.cells-board .cell {
    align-items: center;
    display: flex;
    justify-content: center;
    z-index: 1;
}

.cells-board-mask {
    height: 320px;
    left: 15px;
    -webkit-mask-clip: border-box;
    mask-clip: initial;
    -webkit-mask-image: url(/media/cells-mask.svg);
    mask-image: url(/media/cells-mask.svg);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    position: absolute;
    top: 15px;
    width: 320px;
    z-index: 2;
}
.cells-board-mask .animated-highlight {
    background: linear-gradient(180deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, .4) 98.37%, hsla(0, 0%, 100%, 0));
    height: 74px;
    position: absolute;
    right: 170px;
    top: 50px;
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
    width: 610px;
    z-index: 3;
}

.default_btn.wf{
width:100%;
height: 100%;
    margin-top: 0px !important;    
}
.mines-control {
    flex-direction: column;
}
.mines_wrapper {
    background: #151b2e;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 10px;
    margin: 0 auto;
    padding: 10px;
    border-radius: 5px;
    margin-top: 50px;
}
.mines_wrapper .mines_item {
    background: #108de7;
    width: 70px;
    height: 70px;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 0px 5px #821bf787;
}
.mines_wrapper .mines_item i {
    font-size: 28px;
}
.mines_wrapper .mines_item img {
    width: 38px;
    height: 38px;
}
.mines_wrapper .mines_item.success {
    background: linear-gradient(90deg, #d2a5ff, #a655df);
    box-shadow: 0px 0px 5px #ec2fff91;
    animation: bounce .3s ease both;    
}
@keyframes bounce{
0% {
    transform: scale(.1) translateZ(0);
}

50% {
    transform: scale(1.01);
}
80% {
    transform: scale(1);
}
100% {
    transform: scale(1) translateZ(0);
}    
}
.mines_wrapper .mines_item.error {
    background: linear-gradient(90deg, #ff8658, #ef4d0e);
    box-shadow: 0px 0px 5px #ff622f91;
}
.mines_coefficients {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    margin-top: 15px;
    margin-bottom: 15px;
    padding-bottom: 4px;
}
.mines_coefficients .item {
    background: #ef212d;
    border: 2px solid transparent;
    color: #ffffff !important;
    display: flex;
    flex-direction: column;
    padding: 10px;
    border-radius: 5px;
    align-items: center;
    justify-content: center;
    height: fit-content;
    gap: 5px;
    font-size: 18px;
    min-width: 100px;
}
.mines_coefficients .item.active {
    background: #fff !important;
    border: 2px solid #ef212d;
    color: #ef212d !important;
}
.mines_coefficients .item .mines_step {
    font-size: 12px;
    opacity: 0.5;
}
.mines_coefficients::-webkit-scrollbar {
    height: 5px;
    cursor: pointer;
}
.mines_coefficients::-webkit-scrollbar-track {
    background: #fff;
}
.mines_coefficients::-webkit-scrollbar-thumb {
    background-color: #ef212d85;
    border-radius: 20px;
}
@media (max-width: 1000px) {
    .mines_wrapper .mines_item {
        width: 55px !important;
        height: 55px !important;
    }
    .mines_wrapper .mines_item i {
        font-size: 24px !important;
    }
    .mines_wrapper .mines_item img {
        width: 24px !important;
        height: 24px !important;
    }
    .mines_wrapper {
        gap: 5px !important;
    }
    .mines_coefficients {
        gap: 5px !important;
        margin-top: 10px !important;
        margin-bottom: 10px !important;
        padding-bottom: 3px !important;
    }
    .mines_coefficients .item {
        min-width: 80px !important;
        padding: 7px !important;
        font-size: 15px !important;
    }
    .mines_coefficients .item .mines_step {
        font-size: 10px !important;
    }
}

.cherry-bomb-one-regular {
  font-family: "Cherry Bomb One", system-ui;
  font-weight: 400;
  font-style: normal;
}

@media (max-width: 1097px) {
    .mines-selector{
        width: 100%;
        min-width: max-content;
    }
    .bets-selector{
        width: 100%;
        min-width: max-content;
    }
    .default_btn{
        font-size: 13px;
    }
}

button.play_button {
    margin-top: 30px;
    border-radius: 8px;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    padding: 15px 25px 15px 25px;
    text-align: center;
    background: linear-gradient(93.73deg, #108de7, #0855c4);
    color: #fff;
}

img.first-image {
    width: -webkit-fill-available;
    box-shadow: 0 -2px 20px rgba(42, 49, 69, .4), 0 4px 54px rgba(42, 49, 69, .2);
    border-radius: 10px;
}

.tg_button{
    color:#fff;
    background: #1d98dc;
    width: 100%;
    border-radius: var(--border-radius);
    height: 40px;
    padding-left: var(--padding-sides);
    padding-right: var(--padding-sides);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-classic);
    transition: var(--transition);
}