body{
        font-family: "Ubuntu", serif;
  font-weight: 500;
  font-style: normal;
  background:#232626;
  color:white;
  overflow-x: hidden;

    }
    .noData{
        height: 100%;
    display: flex
;
    justify-content: center;
    align-items: center;
    color: #6d8b9a;
    }
   

#home,#invite,#withdraw,#rank{
    padding-bottom:80px;
    min-height:100vh;
}



    .bottom-bar{
        position: fixed;
        bottom:0;
        left:0;
        /* height:100px; */
        padding:4px;
        width:100%;
        background:#0f1d28;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .bottom-bar>div{
        display: flex;
        flex-direction: column;
        font-size:14px;
        align-items: center;
        justify-content: center;
        gap:6px;
        width:17%;
        color:#6d8b9a;
        padding:10px 0;
    }
    .bottom-bar>div>i{
        font-size:17px;
    }
    .bottom-bar>div.active{
        background:#19313d;
        color:#00dd6e;
        border-radius:7px;
    }

    .spinBgImg{
        background:url();
        width:320px;
        height:320px;
        background-size: 100% 100%;
        margin:auto;
        margin-top:20%;
        display: block; 
    }
    .spinRoate{
        background: url();
    width: 213px;
    height: 213px;
    background-size: 100% 100%;
    margin: auto;
    /* margin-top: 33%; */
    /* display: block; */
    position: absolute;
    margin-top: 47px;
    margin-left: 55px;

 
    }
    .myBalance{
        font-size:45px;
        color:#00dd6e;
        display: flex;
        align-items: center;
        justify-content: center;
        gap:7px;
        /* margin-top:10%; */
    }
    .myBalance>img{
        width:55px;
    }
    .progressBar{
        background:#1b2329;
        width:80%;
        /* height:22px; */
        border-radius: 24px;
        overflow: hidden;
        display: block;
        margin:15px auto;
        background-color: #373f40;
        border: .1rem solid #6de42b;
        padding:3px;
    }
    .progress{
        height:22px;
        width:50%;
       background: linear-gradient(to left, #00dd6e, #00984c);
background-image:url(./images/progressbar.png);
        border-radius: 24px;
background-size:cover;
    }
    .moneyLeft{
        font-size:20px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap:5px;
        color:white;
    }
    .moneyLeft>img{
        width:24px;
    }
    .moneyLeft>span{
        color:#00dd6e;
    }
    .spinNow{
        background: linear-gradient(to left, #00dd6e, #00984c);
        color:white;
        padding:10px;
        font-size:18px;
        margin:16px 20px;
        border-radius:7px;
        text-align: center;
    }
    .invite2spin{
        background: linear-gradient(to bottom, #00dd6e, #00984c);
        color:white;
        padding:10px;
        font-size:18px;
        margin:9px;
        border-radius:7px;
        text-align: center;
    }
.tryBg{
    width:350px;
    height:350px;
    margin:10px auto;
    display: block;
    filter: drop-shadow(2px 4px 6px #00ff7b);
}
.taskIcon{
    color:#00dd6e;
    margin:0 23px;
    font-size:30px;
}
.spinbg{
    width:100%;
}
.mainSpin{
    width: 180px;
    height: 180px;
    position: absolute;
    margin-top: 77px;
    /* display: none; */
    transition: all 4s;
    /* transform: rotate(4000deg); */
}
.spinner{
    display: flex;
    justify-content: center;
}
.marqueeEffect{
    background: linear-gradient(to bottom, #00dd6e, #00984c);
        color:white;
        padding:10px;
        font-size:14px;
        margin:9px;
        border-radius:7px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        gap:6 px;
        display: inline-block;
}
.marqueeEffect>img{
    width:20px;
    margin-bottom:-6px;
}
.spinLeft{
    background: #05a254;
    color: white;
    border-radius: 50%;
    display: flex
;
    flex-direction: column;
    gap: 0px;
    position: absolute;
    justify-content: center;
    align-items: center;
    margin-top: 131px;
    padding: 11px;
    font-size: 14px;
    width: 42px;
    height: 42px;
    border:4px solid #1b2329;
}
.spinLeft>span{
    font-size:24px;
    font-weight: bold;
}
.tft{
    font-size:24px;
    margin:13px;
    display: flex;
    justify-content: space-between;
    padding:9px;
}
.lister{
    /* background: #1b2329; */
    margin:14px;
    border-radius: 14px;
    height:74vh;
}
.loadingScreen{
    position: fixed;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background:rgba(0,0,0,0.84);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index:199;
            display:flex;
}
/* HTML: <div class="loader"></div> */
/* HTML: <div class="loader"></div> */
.loader {
  width: 40px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: 
    radial-gradient(farthest-side,#05a254 94%,#0000) top/8px 8px no-repeat,
    conic-gradient(#0000 30%,#05a254);
  -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);
  animation: l13 1s infinite linear;
}
@keyframes l13{ 
  100%{transform: rotate(1turn)}
}

.loader0 {
  width: 80px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 14px solid;
  border-color: #05a254 #05a25352;
  animation: l1 1s infinite;
}
@keyframes l1 {to{transform: rotate(.5turn)}}

.toast{
    position: fixed;
  z-index: 99;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  /* background: #00c160; */
  background:rgba(0,0,0,0.8);
  border-radius: 8px;
  padding: 10px;
  transition: all 0.3s;
}


.getRewardLay{
    position: fixed;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background:rgba(0,0,0,0.84);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index:13;
            display:none;
}
.congotext
{
    font-size: 35px;
    letter-spacing: 1px;
    font-weight: bold;
    background: linear-gradient(to bottom, #00dd6e, #00984c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    text-shadow: 0px 0px 10px #00dd6e;
    -webkit-text-stroke: 0.4px #ffffff;
}
.coinPrize{
  
  width: 32%;
  position: absolute;

}
.centerPrenure{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.rotatingShine{
    background:url();
    background-size: 100% 100%;
    width:200px;
    height:200px;
    animation: rotate 9s linear infinite;
    scale:1.4;
}
.spinner{
    animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.rewardWin{
    font-size: 35px;
    color: #fede04;
    font-weight:bold;
    margin-bottom:10px;
}
.claimBtn{
 


    width: 84%;
    background-color: #ffdf00;
    color: black;
    margin: 19px auto;
    padding: 10px;
    text-align: center;
    border-radius: 8px;
    font-size: 20px;


    background-image: url(./images/yellowbg.png);
    background-size: cover;
}



.paymentLay,.checkinLay{
    position: fixed;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background:rgba(0,0,0,0.84);
            display: flex;
            flex-direction: column;
            justify-content: center;
            /* align-items: center; */
            z-index:9;
            display:none;
}

.paymentCenterBox{
    background:#0f1d28;
    color:white;
    width:80%;
    padding:10px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:19px; width:70%;
}
.paymentLay{
    /* display:flex; */
    align-items: center;
    padding:29px 0;
   z-index:50;
}
.bigicon{
    color:#00c160;
    font-size:55px;
}
.processp{
    color:#00c160;
font-size:19px;
}



    .thecongo{
        background:url(./images/yellowbg.png);
      background-size: 100% 100%;
    color: black;
    text-align: center;
    font-size: 29px;
    width: 90%;
    padding: 9px;
    font-weight: bold;

    }
    .coinWin{
        /* margin:10px auto; */
        width:200px;
    }



    .getSpin{
        margin-top: -150px;
    width: 94%;
    position: absolute;
    }
    .dSpace{
        height:190px;
    }
    .getL{
        /* margin:10px 30px 10px 14px; */
        padding:10px;
        padding-top:25px;
        z-index: 10;
    position: relative;
    }
    .mmm{
        font-size:26px;
        color:#141517;
        font-weight:bold;
        position: absolute;
        margin-top:-40px;
        margin-left:19px;

    }



    #rank,#invite{
        position: fixed;
        top:0;
        left:0;
        width:100%;
        background:rgba(0,0,0,0.8);
        height:100%;
        z-index:21;
    }

    #withdrawT{
        position: fixed;
        top:0;
        left:0;
        width:100%;
        background:rgba(0,0,0,0.8);
        height:100%;

        display: flex;
        align-items: center;
        justify-content: center;
        z-index:17;

    }
    .withdrawBox{
        width:75%;
        padding:10px;
        border-radius:10px;
        background-image: url(./images/mainbg.png);
    background-size: cover;
    }
    .wdImg{
        width:50%;
        display: block;
        margin:15px auto;

        width: 63%;
            display: block;
            margin: -2px auto;
    }
    .wdTips{
        font-size:16px;
        text-align: center;
        color:white;
    }
    .wdTips>span{
        color:#00d66b;
    }
    .addressHere{
        background:#141517;
        border-radius:25px;
        padding:11px;
        font-size:17px;
        width:87%;
        display: block;
        margin:9px auto;
        outline: none;
        border:none;
        /* font-weight: bold; */
        color:white;
        text-align: center;
    }
    .submitWithdraw{
        /* width: 84%; */
    background-color: #00ba51;
    color: white;
    margin:9px;
    padding: 10px;
    text-align: center;
    border-radius: 8px;
    font-size: 20px;
    background-image: url(./images/greenbg.png);
    background-size: cover;
    }
    .warningWd{
        background-color: #00ba5142;
        color: #00ba51;
        padding:7px;
        font-size:12px;
        border-radius:7px;
        margin:9px;
        text-align: center;
    }
    .cutIcon{
        background:rgb(74 83 84);
        color:white;
        padding:6px 10px;
        border-radius: 5px;
        float:right;

        margin-left: -33px;
    }


.withdrawBar{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.withdrawBar>img{
    width:32px;
}
.withdrawBar>div{
    background: #00cb5b;
    color: white;
    padding: 2px 6px;
    border-radius: 20px;
    font-size: 12px;
}
.flexp{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin:10px 5px;
}
.guranteeTip{
    color:white;
    font-size:17px;
    margin:12px 0;
    text-align: center;
}
#qrcode{
    display: none;
}
.rfLink{
    width:70%;

}



        .Channel>img,.Support>img{
            width:21px;
        }
        .Channel{
            border-radius:8px;
            background:linear-gradient(60deg,#0a7ebb,#089eed);
            padding:11px;
            color:white;
            width:40%;
            font-size:16px;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            gap:7px;
        }
        .Support{
            border-radius:8px;
            background:linear-gradient(60deg,#918a00,#dcbf00);
            padding:11px;
            color:white;
            width:40%;
            font-size:16px;
            text-align: center;

            display: flex;
            justify-content: center;
            align-items: center;
            gap:7px;
        }

        .optionF{
            display: flex;
            justify-content: space-around;
            margin:10px 4px;
        }
        .ccOverlay{
            background:rgba(0,0,0,0.4);
            padding:3px;
            margin:6px;
            border-radius:10px;
        }
.copyNow{
    background:#1b2329;
    color:#00d66b;
    border-radius: 4px;
    padding:7px;
font-size:14px;

}
        .copyValue{
    background: linear-gradient(78deg, #20d164, #00a854);
margin:10px;
padding:10px;
display: flex;
align-items: center;
justify-content: space-between;
color:white;
font-size:13px;
border-radius: 10px;
gap:7px;
        }
 .shareOption>img{
    width:27%;
 }
        .shareOption{
            display:flex;
            justify-content: space-around;
            align-items: center;
            margin:20px 10px;
        }
        .shareTip{
text-align: center;
font-size: 18px;
color:rgb(255, 240, 0);
margin:7px 0;
        }
.spinNowbtn{
    border-radius:25px;
    padding:11px;
    background-image:url();
    background: linear-gradient(to bottom, #008d46, #00d66b);
    margin:25px;
    color:white;
    font-weight:bold;
    font-size:19px;
    text-align: center;
align-items: center;
justify-content: center;
    display: flex;
    gap:8px;
}
.spinNowbtn>img{
    width:27px

}
.rounder>div{
    display: flex;
    flex-direction: column;
    gap:7px;
    width: 73px;
    justify-content: center;
    align-items: center;
}
.rounder>div>span{
    font-size:25px;
    font-weight: bold;
}
.rounder>div>img{
    width:40px;
}

.ro1
{
    transform: translate(101px, 55px) rotate(324deg);
}
.ro2{
    transform: translate(186px, -20px) rotate(33deg);
}
.ro3{
    transform: translate(233px, -21px) rotate(98deg);
}
.ro4{
    transform: translate(189px, -18px) rotate(152deg);
}
.ro5{
    transform: translate(98px, -98px) rotate(218deg);
}
.ro6{
    transform: translate(59px, -249px) rotate(268deg);
}


        .rounder{
            position: absolute;
           width: 365px;
           height:334px;
           transition: all 4s;
        }
        .spinDo{
                  width: 86px;
    height: 96px;
    background: url(./images/spindo.png);
    background-size: cover;
    position: absolute;
    margin-top: 113px;
    font-size: 18px;
    color: black;
    display: flex
;
    justify-content: center;
    align-items: center;
    padding-top: 6px;
    color: #3d3d3d;
    font-weight: bold;
    z-index:3;
        }
        .spin-type{
             width: 365px;
    height: 365px;
    position: absolute;
    margin-top: -15px;
    transition: all 4s;
        }
        .spin-lay{
            width:340px;
            height:340px;
            position: absolute;
    z-index:3;


        }
        .spin-main-bg{
            width:100%;
        }
        .spinF{
            display: flex;
            flex-direction: column;
align-items: center;

height: 344px;
        }
        .balanceNow>img{
            width:18px;
        }
        .balanceNow{
            display: flex;
            align-items: center;
            gap:6px;
        }
        .balanceBox>img{
            width:100%;
        }
        .balanceBox{
            padding:10px;
            width:30%;
            border-radius:10px;
            display: flex;
            flex-direction: column;
            /* gap:-10px; */
            background:rgb(101, 49, 32);
            align-items: center;
            justify-content: center;
            background: linear-gradient(to bottom, #008d46, #00984c);
        }


        .gIcon>img{
            width:70%;
            /* margin:-10px auto; */
        }
        .gText{
            background:#ea3c00;
            color:white;
            padding:2px 6px;
            border-radius:20px;
font-size:9px;
        }
        .gIcon{
            padding:6px;
            width:16%;
            border-radius:10px;
            display: flex;
            flex-direction: column;
            gap:-10px;
            /* background:rgb(101, 49, 32); */
            align-items: center;
            justify-content: center;
        }
.iconsBarr{
    background:rgba(0,0,0,0.6);
    padding:5px;
    display: flex;
    justify-content: space-between;
    border-radius:9px;
}
        .gameBar{
            padding:9px;
            margin:8px;
            min-height:80vh;
            background-image:url(./images/mainbg.png);
            background-size:cover;

        }
        .joinChannel{
            background:#1b2329;
            color:#00dd6e;
            text-align: center;
            font-size:18px;
            border-radius: 5px;
            padding:11px;
            margin:5px;

            background-color: #00ba51;
    color: white;
    margin: 9px;
    padding: 10px;
    text-align: center;
    border-radius: 8px;
    /* font-size: 20px; */
    background-image: url(./images/greenbg.png);
    background-size: cover;
        }
        .spinText{
            display: flex;
            gap:4px;
            align-items: center;
            font-size:18px;
            text-align: center;
            justify-content: center;
            margin:10px 0;
            margin-top:25px;
        }
        .spinText>img{
            width:26px;
        }
        .spinBigIcon{
            width:75px;
            display: block;
            margin:5px auto;
        }
        .msgBox{
            /* background: linear-gradient(to bottom, #1fff8f, #00984c); */
    color:white;
    width:90%;
    /* padding:10px; */
    border-radius: 10px;

    background-color:#303231;
    /* background-image:url(https://i.ibb.co/mF2zVpVy/image.png); */
    /* background-size: contain; */
    /* background-repeat:no-repeat ; */
        }
        .msgOverLay{
            position: fixed;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background:rgba(0,0,0,0.7);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index:9;
            display: none;
            z-index:49;

            padding-top: 10%;
        }
        .settingsIcon{
            background-color: #0f1d28;
            color:#ffffff9e;
            border-radius:10px;
            padding:9px;
            font-size: 23px;
            float:right;
            margin-top:-49px;
            margin-right:14px;
        }
        .settingLay{
            position: fixed;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background:rgba(0,0,0,0.7);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index:9;
            display: none;
        }
        .mainHeader{
            font-size:23px;
            font-weight: bold;
            text-align: center;
        }
        .displayBetween{
            margin:17px 10px;
           
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

      
.settings{
    background: linear-gradient(to bottom, #1fff8f, #00984c);
    color:white;
    width:80%;
    padding:10px;
    border-radius: 10px;
}

.userid{
    text-align: center;
    margin:10px 0;
    color:#09161f
}
.toogleSwitch{
    width:47px;
    height:23px;
    border-radius: 25px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background:#a1a1a1;
    transition: all 0.3s;

}
.toogleSwitch.active{
    background:#00733a;
    justify-content: flex-end;

}
.rbtn{
    width:20px;
    height:20px;
    border-radius: 50%;
    background-color:white;
    transition: all 0.3s;

}
    


    .inviteLinkinvite{
        background: linear-gradient(to bottom, #00dd6e, #00984c);
    color: white;
    padding: 10px;
    font-size: 19px;
    margin: 9px;
    border-radius: 7px;
    text-align: center;
   
    }
    .txt{
        font-size:14px;
        line-height: 163%;
    }  
.txt>span{
    color:#09161f;
}
.shareTo{
    display: flex;
    gap:10px;
    justify-content: center;
    margin:13px auto;
}
.shareTo>div{
background:#09161f;
border-radius: 50%;
color:#00dd6e;
padding:6px;
font-size: 14px;
}
.listMenu{
    /* height:50vh; */
}
.userProfile{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:10px;
    margin:7px;
    border-bottom: 1px solid #00ff4912;
background: #1b2329;
border-radius: 8px;
}
.profileImg{
    width:38px;
    border-radius: 50%;
}
.profileName{
    color:white;
    font-size:18px;
    width:56%;
    overflow: hidden;
}
.spinReward{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap:4px;
    font-size:19px;
    color:#00dd6e;
    width: 86px;
    width: 84px;
}
.spinReward>img{
    width:28px;
}
.remindBtn{
    background: linear-gradient(to bottom, #00dd6e, #00984c);
    color: white;
    padding: 10px;
    font-size: 14px;
    margin: 9px;
    border-radius: 7px;
    text-align: center;
}
.spinInvite{
    display: flex;
    align-items: center;
    font-size: 24px;
    color: #00dd6e;
    gap:4px;
}
.spinInvite>img{
    width:29px;
}
.appHeader{
    text-align: center;
    font-size: 23px;
    margin:18px 0;
    display: flex;
    gap:7px;
    align-items: center;
}
.appHeader>img{
    width:24px;
}
.whatRank>img{
    width:32px;
    height:36px;
}

.whatRank{
    color:white;
    width:34px;
    font-size:18px;
    margin-right:5px;
    text-align: center;
}
.totalFreind{
    color:#00dd6e;
    display: flex;
    align-items: center;
    gap:5px;
}
.totalFreind>img{
   width:17px;
}
.cWithdraw{
    font-size:28px;
    margin:30px;
    display: flex;
    align-items: center;
    gap:4px;
}
.cWithdraw>img{
    width:36px;
}
#freinds_list{
    height: 50vh;
    overflow: scroll;
}
#rank_list{
    overflow-y: scroll;
    height: 100%;
}

.tcheader{
        background: url(./images/yellowbg.png);
    background-size: cover;
    color: black;
    text-align: center;
    font-size: 18px;
    width: 90%;
    padding: 9px;
    font-weight: bold;
    margin: 19px 10px;
}

.closepopup2{
    width:84%;
      background-color: #ffdf00;
    color: black;
    margin: 19px auto;
    padding: 10px;
    text-align: center;
    border-radius: 8px;
    font-size: 20px;
    background-image: url(./images/yellowbg.png);
    background-size: cover;
}

.flex2{
    margin:10px;
    display: flex;
    justify-content: space-around;
}
.bbarr{
    border-radius: 8px;
    background: linear-gradient(60deg, #0a7ebb, #089eed);
    padding: 11px;
    color: white;
    width: 40%;
    font-size: 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 7px;
}

.bbarr>b{
    font-size:23px;
}
.bbarr>span{
    font-size:14px;
    opacity:0.9;
}

.inviteWarning {
    background-color: rgba(0,255,255,0.2);
    color: aqua;
    padding: 8px;
    font-size: 12px;
    border-radius: 7px;
    margin: 12px;
    text-align: center;
}



    .wdTotalBox{
        background: linear-gradient(to bottom, #00dd6e, #00984c);
    color: white;
    padding: 10px;
    font-size: 18px;
    margin: 9px;
    border-radius: 7px;
    text-align: center;
    }
    .flex-line{
        display: flex;
        justify-content: space-between;
        padding:10px 0;
        border-bottom: 1px solid #002f145d;
        color:#ffffff;
        font-size:14px;
    }

    .coinleft{
        display: flex;
        gap:5px;
        align-items: center;
        color:white;
    }
    .coinleft>img{
        width:23px;
    }
    .wdHistoryTab{
        background: #0f1d28;
    margin: 14px;
    border-radius: 14px;
    height: 50vh;
    /* overflow:scroll; */
    padding:10px;
    }



    .wdHistory_div{
        height:82%;
        overflow:scroll;
    }
    .wdHistory{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin:10px 0;
        padding:5px;
    }
    .wdDesc{
        display: flex;
        gap:5px;
        flex-direction: column;
    }
    .wdDesc>b{
        font-size:19px;
        color:#00dd6e;
    }
    .wdDesc>span{
        font-size:13px;
        opacity:0.7;
    }
    .wdAmount{
        display: flex;
        align-items: center;
        font-size:19px;
        gap:7px;
    }
    .wdAmount>img{
        width:24px;
    }

.withdrawNow{
    width:40%;
    background: linear-gradient(to bottom, #00dd6e, #00984c);
    color: white;
    margin:19px auto;
    padding:10px;
    text-align: center;
    border-radius: 8px;
}



.depositSpin{
    background: rgba(0,0,0,0.8);
        position: fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        overflow-y: scroll;
        display: none;
        z-index: 11;
}
.depositBox{
    width: 24%;
    background: linear-gradient(to bottom, #00dd6e, #00984c);
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
}
.depositBox>img{
    width:57%;
}
.depositBox>b{
    font-size:20px;
}
.purchaseAmo{
    background-color: #09161f;
    color:white;
border-radius:10px;
/* margin:5px; */
padding:10px;
display: flex;
align-items: center;
justify-content: center;
gap:5px;
width:85%;
text-align: center;
font-size:17px;
}
.purchaseAmo>img{
    width:14px;
}
.depositFlex{
    display: flex;
    justify-content: space-evenly;
    margin:10px 0;
}



    .taskLayer{
        background: rgba(0,0,0,0.8);
        position: fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        overflow-y: scroll;
        display: none;
        z-index: 11;
    }
    .dimoFlex{
        padding:10px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin:5px 15px;
      
    }
    .totalDiamond{
        display: flex;
        gap:10px;
        align-items: center;
        color:#00dd6e;
        font-size:25px;
        font-weight: bold;
    }
    .totalDiamond>img{
        width:33px;
    }
    .reedemDiamond{
        background: linear-gradient(to bottom, #00dd6e, #00984c);
        color: white;
        border-radius: 8px;
        padding:10px 15px;

    }
    .reedemDiamond.disabled{
        filter:grayscale(1);
    }
    .reedemTip{
        display: flex;
        font-size:15px;
        gap:5px;
        align-items: center;
        margin:5px 0;

    }
    .reedemTip>img{
        width:24px;
    }
    .rewardHeader{
        background: linear-gradient(to bottom, #00dd6e, #00984c);
        color: white;
        margin:15px;
        border-radius:10px 10px 0 0;
        text-align: center;
        font-size:24px;
margin-bottom:0;
padding:11px;
    }
    .checkinTab{
        background: #0f1d28;
        color:white;
        /* height:30vh; */
        margin:15px;
        margin-top:0;
        border-radius:0 0 10px 10px ;
        padding:9px;
    }
    .checkinflex {
    display: flex
;
    justify-content: space-around;
    margin: 10px 0;
}
.checkinBox {
    width: 17%;
    background: linear-gradient(to bottom, #00dd6e, #00984c);
    border-radius: 10px;
    padding: 10px;
    display: flex
;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.dayCount{
    font-size:17px;
}
.checkinreward{
    display: flex;
    align-items: center;
    gap:5px;
}
.checkinreward>img{
    width:24px;
}
.checkinTip{
     color:#00984c;
     text-align: center;
     margin:10px 0;
}
.claimCheckin{
    background: linear-gradient(to bottom, #00dd6e, #00984c);
    color: white;
    width: 40%;
    display: block;
    text-align: center;
    padding: 10px;
    border-radius: 7px;
    margin: 8px auto;
}
.claimCheckin.disabled{
    filter:grayscale(1);
}
.loopHole{
    display: flex;
    justify-content: space-between;
    padding:0 30px;
    margin-bottom:-56px;
    align-items: center;
    z-index:1;
}
.loopHole>img{
    width:30px;
}

.checkinBox.disabled{
filter: grayscale(1);
}
.taskListBox{
    background: #0f1d28;
    background:#1b2329;
    color:white;
    margin:10px;
    border-radius: 10px;
    padding:10px;
}
.theader{
    margin:10px;
    font-size:19px;
}
.taskScroll{
    height:78vh;
    overflow-y: scroll;
}
.crossMark{
    border-radius: 50%;
    border: 2px solid white;
    padding: 5px 9px;
    font-size: 20px;
    position: fixed;
    top: 25px;
    left: 89%;
}





.closePopup1{
    width: 84%;
    background-color: #1bd43a;
    color: white;
    margin: 19px auto;
    padding: 10px;
    text-align: center;
    border-radius: 8px;
    font-size: 20px;
    background-image: url(./images/greenbg.png);
    background-size: cover;
}


.mheader{
    background: url(./images/greenbg.png);
   background-size: cover;
    color: white;
    text-align: center;
    font-size: 18px;
    width: 90%;
    padding: 9px;
    font-weight: bold;
    margin: 19px 10px;
}

.taskBox{
    display: flex;
 justify-content: space-around;
 align-items: center;
 margin:10px 0;   
}
.taskBox>img{
    
width: 40px;
    height: 40px;
    border-radius: 50%;

}
.taskAbout{
    width:55%;
    display: flex;
    flex-direction: column;
    gap:5px;
}
.taskName{
    font-size:17px;
}
.taskReward{
    display: flex;
    gap:5px;
align-items: center;
}
.taskReward>img{
    width:20px;
}
.taskgo{
    background: linear-gradient(to bottom, #00dd6e, #00984c);
    color: white;
    padding:7px 13px;
    margin:10px;
    border-radius: 10px;
    font-size:15px;
}
.taskgo.disabled{
    filter:grayscale(1);
}
.closePopup{
    background: linear-gradient(to bottom, #00dd6e, #00984c);
    color: white;
    width: 50%;
    display: block;
    text-align: center;
    padding: 10px;
    border-radius: 7px;
    margin: 8px auto;
}