@font-face {
    font-family: 'RoobetFont';
    src: url('../files/DBf4-KLM.woff2') format('woff2');
    font-weight: 111;
    font-style: normal;
}

body {
    /* font-family: 'RoobetFont', sans-seif; */
    font-family: "Outfit", sans-serif;
    background:rgb(9, 12, 29);
    min-height:100vh;
    color:white;
}
#game,#refer,#event,#my{
    padding-bottom:80px;
}
.header
{
    background:rgb(25, 25, 57);
position: fixed;
top:0;
left:0;
width:100%;
padding:11px 0;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 56;
}
.logo{
    width:35px;
    margin-left:16px;
}
.balanceBar{
    background:rgb(9, 12, 29);
    padding:10px;
    border-radius: 14px;   
     /* box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 2px, rgba(255, 204, 0, 0.925) 0px 0px 0px 4px; */
     margin-right: 10px;
    padding: 3px 10px;
    border-radius: 20px;
}
div.addBalanceIcon
{
    box-shadow: rgb(197, 106, 24) 0px -3px 0px 0px inset, rgb(255, 234, 47) 0px 2px 0px 0px inset;
    transition: background-size 0.3s ease-in-out;
    background: linear-gradient(420deg, rgb(255, 206, 0) 0%, rgb(255, 206, 0) 49%, rgb(255, 184, 0) 49%, rgb(255, 184, 0) 100%) left center / 100% 100% no-repeat;
    padding:10px;
    border-radius:6px;

    padding: 4px 10px;
    border-radius: 10px;
    padding: 4px 8px;
}
.balanceBar>img{
    width:23px;
}
#balance{
    font-weight:bold;
}
.balanceBar{
    display: flex;
    gap:7px;
    align-items: center;
}
.valutIcon{
    color:#dbd6ff;
    margin-right:20px;
    font-size:21px;
}
.floatDown{
    background-color: rgb(25, 25, 57);
    padding: 11px;
    color: #9789CD;
    border-radius: 14px;
    position: absolute;
    margin-top: 135px;
    font-weight: bold;
    border: 3px solid;
    /* height:0; */
    display: none;
}

  
  
  
  .gameBar{
        height: 250px;
    margin-top: 52px;
    /* background: black; */
    position: relative;
    /* z-index: 10 left: 2.5%; */
    /* width: 95%; */
    margin: 10px;
    margin-top: 69px;
    }
    .gamePanel{
        background:rgb(25, 25, 57);
        padding:10px;
        margin:10px;
        border-radius:8px;
    }
    .startGame
    {
margin:10px;
border-radius: 10px;
text-align: center;
padding:9px;
    box-shadow: rgb(197, 106, 24) 0px -3px 0px 0px inset, rgb(255, 234, 47) 0px 2px 0px 0px inset;
    transition: background-size 0.3s ease-in-out;
    background: linear-gradient(420deg, rgb(255, 206, 0) 0%, rgb(255, 206, 0) 15%, rgb(255, 184, 0) 15%, rgb(255, 184, 0) 100%) left center / 100% 100% no-repeat;
/* -webkit-text-stroke: 2px  */
 text-shadow: 1px 1px 2px #C56A18;
font-weight: bold;
    }
    .gameSpace{
        /* padding-top: calc(40vh + 57px); */
    }

    .label{
        margin:10px;
    }
    .label>i{
        color:rgb(120, 65, 238);
    }
    .inputHolder{
        background:rgb(9, 12, 29);
        outline:rgb(44, 40, 82) solid 0.125rem;
        display: flex;
        margin:10px;
        padding:5px;
        justify-content: space-between;
        align-items: center;
        border-radius:8px;
    }
    .dollaricon{
       color: rgb(180, 166, 226)
    }
    .inputHolder>input{
     
        background: transparent;
    border: none;
    outline: none;
    width: 60%;
    color: white;
    font-size: 14px;
    font-weight: bold;
    margin-left: 3px;
    }
    .changeBtn{
        background:rgb(44, 40, 82);
        padding:7px;
        border-radius: 7px;
        font-weight:bold;
        font-size:12px;
        margin: 0px 2px;
    }
    .gameTip{
       background: rgb(120, 65, 238);
       color:white;
       margin:10px;
       padding:7px;
       border-radius:8px;
       font-size:12px;
       text-align: center;

    }
    .game-content{
        background:#313464;
        display: flex;
        width:2053px;
        height:250px;
transition:all 3s;
    }
    
    .greenLine{
        width:70px;
        background-image:url(../img/side1.svg);
        background-size: cover;
        background-color:#0DA784;
    }
    .greenLine1{
        width:70px;
        background-image:url(../img/side2.svg);
        background-size: cover;
        background-color:#0DA784;
    }

    .bLine{
        width:110px;
    background-image: url(../img/border.png);
    background-size: 100% 100%;
    transform: rotate(180deg);

    display: flex;
    align-items: center;
    justify-content: center;
    }
    .gameBar{
        overflow:hidden;
        border-radius: 8px;

    }
    .road{
        width:110px;
        display: flex;
    align-items: center;
    justify-content: center;
    }
    .roadEnd{
       
    width: 3px;
    /* height: 10000px;
    position: absolute;
    right: 0px;
    flex-shrink: 0; */
    background-size: cover;
    background-image: url(../img/road.svg);
    background-repeat: repeat-y;
    }
    .chicken {
    width: 74px;
    height: 74px;
    background-image: url('../img/chicken.svg') ;
    background-size: 100% 100%;
    transform: rotate(180deg);
    transition: all 1.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.amountWin{
background:  rgb(120, 65, 238);;
padding:4px 8px;
border-radius:6px;
margin-top:130px;
display: none;
}
.chicken.active>.amountWin{
    display:flex;
}
.chicken.running{
    animation: running1 0.5s infinite steps(1);
}
.chicken.die{
    background-image: url('../img/chicken_die.svg'); 

}
.chicken.kk::before{
    content: "";
    background-image: url(../img/feather1.svg);
    width: 57px;
    height: 55px;
    background-size: contain;
    margin-top: -14px;
    margin-left: -41px;
}
.chicken.kk::after{
    content: "";
    background-image: url(../img/feather2.svg);
    width: 57px;
    height: 55px;
    background-size: contain;
    margin-top: -14px;
    margin-left: 41px;
}

@keyframes running1 {
    0% {
        background-image: url('../img/chicken1.svg'); 
       
    }
    50% {
        background-image: url('../img/chicken2.svg')  ;
      
    }
    100% {
        background-image: url('../img/chicken1.svg') ;
       
    }
}

    .winStone{
        width:90px;
        height:90px;
        background:url(../img/stone_coin.svg);
        background-size:100% 100%;
        display: flex;
    align-items: center;
    justify-content: center;
    color:rgb(155, 155, 155);
    font-weight:bold;
    }

    .overRoad{
        position: absolute;
    /* width: 1000px; */
    /* background: red; */
    height: 350px;
    z-index: 10;
    left: 173px;
    display: flex;
    }
    .vehicleRoad{
        width: 110px;
    /* background: green; */
    display: flex
;
    justify-content: center;
    }
    .vehicle1{
        width:90px;
        height:150px;
        background:url(../img/vehicle1.svg);
        background-size:100% 100%; transform: translateY(-360px);
        transition:all 2.5s;
        position: absolute;
    }
    .vehicle2{
        width:90px;
        height:150px;
        background:url(../img/vehicle2.svg);
        background-size:100% 100%; transform: translateY(-360px);
        transition:all 2.5s;
        position: absolute;
    }

    .vehicle3{
        width:90px;
        height:150px;
        background:url(../img/vehicle3.svg);
        background-size:100% 100%; transform: translateY(-360px);
        transition:all 2.5s;
        position: absolute;
    }

    .vehicle4{
        width:90px;
        height:150px;
        background:url(../img/vehicle4.svg);
        background-size:100% 100%; transform: translateY(-360px);
        transition:all 2.5s;
        position: absolute;
    }

    .vehicle5{
        width:90px;
        height:150px;
        background:url(../img/vehicle5.svg);
        background-size:100% 100%; transform: translateY(-360px);
        transition:all 2.5s;
        position: absolute;
    }

    .vehicle6{
        width:90px;
        height:150px;
        background:url(../img/vehicle6.svg);
        background-size:100% 100%; transform: translateY(-360px);
        transition:all 2.5s;
        position: absolute;
    }

    .vehicle7{
        width:90px;
        height:150px;
        background:url(../img/vehicle7.svg);
        background-size:100% 100%; transform: translateY(-360px);
        transition:all 2.5s;
        position: absolute;
    }

    .vehicle8{
        width:90px;
        height:150px;
        background:url(../img/vehicle8.svg);
        background-size:100% 100%; transform: translateY(-360px);
        transition:all 2.5s;
        position: absolute;
    }




.vehicleSpace{
    width:3px;
}
.stoneBlock{
    width:80px;
    height:35px;
    background:url(../img/stoneshadow.svg);
    background-size:100% 100%;
    position: absolute;
    margin-top:-140px;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
}
.stoneBlock>img{
    width:60px;
    margin-top:-25px;
}

.road.active>.stoneBlock{
    display: flex;
}
.road.active>.winStone.win{
  background:url(https://i.ibb.co/GQJjKxJT/image.png);
  background-size: 100% 100%;
  color:transparent;
  opacity:1;

}
.winStone.tie{
    opacity:0;
}
.inputCurrency{
    width:21px;
}

 .cashOut{
        margin: 10px;
    border-radius: 10px;
    text-align: center;
    padding: 9px;
    background: rgb(44, 40, 82);
    color: rgb(217, 209, 244);
    box-shadow: rgb(35, 32, 66) 0px -3px 0px 0px inset, rgb(89, 81, 142) 0px 2px 0px 0px inset;
    text-shadow: rgb(25, 25, 57) 0px 1px 0px;
    font-weight: bold;
    display: none;
    }

   .sView>span{
        color:rgb(180, 166, 226);
        font-weight:bold;
    }
    .sView{
        margin:10px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .bheader{
        margin:10px;
        font-weight:bold;
        font-size:17px;
    }
    .rankb{
        display: flex;
        align-items: center;
        gap:16px;
        font-size:25px;
        font-weight:bold;
    }
    .rankb>img{
        width:35px;
    }
    .winsOption{
        background: rgb(25, 25, 57);
    padding: 10px;
    margin: 10px;
    border-radius: 8px;
    }
    .moreRecord{
        --roo-btn-text-stroke-color: #191939;
    -webkit-text-stroke-color: rgb(25, 25, 57);
    background: rgb(44, 40, 82);
    color: rgb(217, 209, 244);
    box-shadow: rgb(35, 32, 66) 0px -3px 0px 0px inset, rgb(89, 81, 142) 0px 2px 0px 0px inset;
    text-shadow: rgb(25, 25, 57) 0px 1px 0px;
    margin:10px;
    padding:10px;
    border-radius:8px;
    font-weight:bold;
    text-align: center;
    }
    .leaderBoardBox{
        background:rgb(25, 25, 57);
        margin:10px;
        /* padding:10px; */
        border-radius: 8px;
    }
    .imgInner{
        height:130px;
        background:url(https://roobet.com/cdn-cgi/image/dpr=2.0,width=auto,height=auto,quality=85,format=auto/https://roobet-dev-public-images-prod.s3.amazonaws.com/bannerImage-aeLFp4wRD.jpeg);
        background-size:cover;
        border-radius:8px 8px 0 0;
        background-position: center;
    }
    .content{
        padding:10px;
    }
    .cb{
        font-size:29px;
        font-weight: bold;
    }
    .cb>b{
      color:  rgb(255, 206, 0);
    }
    .viewRank{
        margin:10px;
border-radius: 10px;
text-align: center;
padding:9px;
    box-shadow: rgb(197, 106, 24) 0px -3px 0px 0px inset, rgb(255, 234, 47) 0px 2px 0px 0px inset;
    transition: background-size 0.3s ease-in-out;
    background: linear-gradient(420deg, rgb(255, 206, 0) 0%, rgb(255, 206, 0) 15%, rgb(255, 184, 0) 15%, rgb(255, 184, 0) 100%) left center / 100% 100% no-repeat;
/* -webkit-text-stroke: 2px  */
 text-shadow: 1px 1px 2px #C56A18;
font-weight: bold;

    }
    .bbBar{
        background:#191939;
        position: fixed;
        bottom:0;
        left:0;
        width:100%;
        display: flex;
        justify-content: space-around;
        padding:10px 0;
        border-top:1px solid rgb(9, 12, 29);
    }
    .appicon{
        width:23%;
        display: flex;
        flex-direction: column;
        gap:8px;
        align-items: center;
        font-weight:bold;
    }
    .appicon>i{
       color: #9789CD;
       font-size:110%;
    }
    .appicon.active>i{
        color:#FFCA00;
    }
    .referBg{
        margin:10px;
        padding:10px;
        border-radius:8px;
        background:url(../img/referbg.png);
        background-size: cover;
    }
    .lt{
        width:96%;
        display: block;
        margin:10px auto;
    }
    .attr_shadow{
        text-shadow: rgba(65, 10, 155, 0.5) 0px 4px 0px;
        font-weight: bolder;
font-size:32px;
    }
    a{
        color:white;
    }
    .referBox{
        margin:10px;
        padding:10px;
        border-radius:8px;
        background:rgb(25, 25, 57);
    }
    .inBoxp{
        color:rgb(151, 137, 205);
    }
    .linkBox{
        background-color: rgb(70, 62, 122);
        outline:2px solid rgb(123, 108, 185);
        
        border-radius:13px;
        padding:10px;
        margin:10px;
    }
    .linkBox>input{
        background:transparent;
        border:none;
        outline:none;
        color:white;
        font-size:18px;
        width:100%;
        opacity:0.9;
        font-weight:bold;
        font-family: "Outfit", sans-serif;
    }
    .copyUrl{
        margin:10px;
border-radius: 10px;
text-align: center;
padding:9px;
    box-shadow: rgb(197, 106, 24) 0px -3px 0px 0px inset, rgb(255, 234, 47) 0px 2px 0px 0px inset;
    transition: background-size 0.3s ease-in-out;
    background: linear-gradient(420deg, rgb(255, 206, 0) 0%, rgb(255, 206, 0) 15%, rgb(255, 184, 0) 15%, rgb(255, 184, 0) 100%) left center / 100% 100% no-repeat;
/* -webkit-text-stroke: 2px  */
 /* text-shadow: 1px 1px 2px  */
font-weight: bolder;
outline: rgb(9, 12, 29) solid 4px !important;

    }
    .copyUrl>span{
        font-size:17px;
        /* -webkit-text-stroke:; */
        /* -webkit-text-stroke: 2px #C56A18; */
    }
    .cHeader{
        background:rgb(25, 25, 57);
        top:0;
        left:0;
        position:fixed;
        width:100%;
        z-index:12;
    }
    .mainHeader{
        margin:11px 0;
        text-align: center;
        font-weight: bold;
        font-size:22px;
    }
    .tabSwitch{
       display: flex;
       justify-content: space-around;
       align-items: center;
    }
    .tabSwitch>div{
        padding:8px 0;
        text-align: center;
        width: 33.34%;
        color:rgb(180, 166, 226);
font-weight:bold;
    }
    .tabSwitch>div.active{
        border-bottom:2px solid rgb(120, 65, 238);
        color:white;
    }
    .spaceP{
        padding:40px;
    }

 .rfBox{
        margin:10px;
        padding:10px;
        border-radius:8px;
        background-color: rgb(44, 40, 82);
    }
    .innerRf{
        margin:10px;
        padding:10px;
        border-radius:8px;
        display: flex;
        flex-direction: column;
        gap:6px;
        background-color:rgb(25, 25, 57);
        /* align-items: center; */
    }
    .innerRf>span{
        font-weight:bold;
        color:rgb(180, 166, 226);
    }
    .pcv{
        font-size:27px;
        display: flex;
        gap:6px;
        font-weight:bold;
    }
    .pcv>img{
        width:24px;
    }
    .flexBox{
        display: flex;
        justify-content: space-around;
    }
    .flexBox>div{
        width:40%;
        justify-content: center;
        align-items: center;
    }
      .trHeader{
        display: flex;
        justify-content: space-around;
        margin:10px;
        padding:10px;
        border-radius:8px;
        background:rgb(44, 40, 82);
    }
    .trHeader>div{
        text-align: center;
    }
    .freindsBox{
        display: flex;
        justify-content: space-between;
        margin:10px;
        padding:10px;
        font-weight:bold;
        align-items: center;
    }
    .freindsBox>img{
        width:24px;
    }
    .freindName{
        width:60%;
        margin-left:6px;
    }
    .freindCommission{
        color:rgb(0, 214, 71);
        margin-right: 18px;
        display: flex;
        align-items: center;
        gap:3px;
        width: 30%;
    text-align: right;
    justify-content: flex-end;
    
    }
    .freindCommission>img{
        width:18px;
    }
     .accBox{
        background:rgb(25, 25, 57)
        ;
        margin:10px;
        border-radius:8px;
        padding:10px;
    }
    .lockerIcon{
        width:30%;
        float:right;
    }
    .bt{
      font-size:24px;  
      font-weight:bold;
      margin-top:40px;
    }
    .bt>b{
        color:rgb(255, 206, 0)
    }
    .balanceBox{
        background:rgb(44, 40, 82);
        padding:10px;
        margin:10px;
        border-radius:8px;
        color:rgb(180, 166, 226)
    }.balanceBox>div{
        color:white;
        font-size:28px;
    display: flex;
    gap:6px;
    align-items: center;
    font-weight: bold;
    }
    .balanceBox>div>img{
        width:27px;
    }
    .btnFlex{
        display:flex;
        justify-content: space-around;
        align-items: center;
        margin:10px 3px;
    }
    .btnFlex>div{
        width:40%;
        padding:9px;
        border-radius:10px;
        text-align: center;
    }
    .depositBtn{
        box-shadow: rgb(197, 106, 24) 0px -3px 0px 0px inset, rgb(255, 234, 47) 0px 2px 0px 0px inset;
    transition: background-size 0.3s ease-in-out;
    background: linear-gradient(420deg, rgb(255, 206, 0) 0%, rgb(255, 206, 0) 15%, rgb(255, 184, 0) 15%, rgb(255, 184, 0) 100%) left center / 100% 100% no-repeat;
/* -webkit-text-stroke: 2px  */
 text-shadow: 1px 1px 2px #C56A18;
font-weight: bold;
    }
    .withdrawBtn{
        background: rgb(44, 40, 82);
    color: rgb(217, 209, 244);
    box-shadow: rgb(35, 32, 66) 0px -3px 0px 0px inset, rgb(89, 81, 142) 0px 2px 0px 0px inset;
    text-shadow: rgb(25, 25, 57) 0px 1px 0px;
    font-weight: bold;

    }
    .Loption{
        margin:19px 8px; 
        display: flex;
        justify-content: space-between;
    }
    .Loption>div{
        width:80%;
    }
    .Loption>i{
        color:#9789CD;
    }