html,
body {
  height: 100%;
  background-color: #282828 !important;
}
.device-error{
    display: none;
    height: 100%;
    align-items: center;
    font-size: 0.7em;
    text-align: center;
}

.hiddendiv{
    display: none !important;
}

.showdiv{

    display: flex !important;
}

.active {
    color: white !important;
}

.deactive{
    color: #6f6f6f;
    border-bottom: none !important;
}

/* width */
::-webkit-scrollbar {
  width: 0px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #7a7a7a00; 
  border-radius: 10px;   
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #282828; 
}


@media only screen and (max-width: 340px) {
  .appbody{
    display: none;
    }
  .device-error{
    display: flex;
  }
}
@media only screen and (max-height: 480px) {
  .appbody{
    display: none;
    }
  .device-error{
    display: flex;
  }
}


.appbody {
    max-width: 480px !important;
    height: 100%;
    background-image: url(/public/assets/images/appbg.svg);
    background-color: #171717ed;
    background-blend-mode: overlay;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 680px;
}

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

.user-tel-pic {
    width: 48px;
    height: 48px;
    background: lightgrey;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.user-tel-pic span {
    font-size: 1.9em;
    font-weight: 500;
    /*margin-bottom: 2px;*/
}

.invite-button button i{
   	transform: scaleX(-1);
}

.invite-button button {
    border: none;
    border-radius: 15px;
    display: flex;
    justify-content: space-evenly;
    width: 100px;
    align-items: center;
    font-size: 1.1em;
    font-weight: 600;
}

.totalwad {
    display: flex;
    justify-content: flex-end;
    font-size: 1.1em;
    z-index: 2;
}

.totalwad span{
  	font-weight: 700;
}

.appbanner {
    min-height: 168px;
    background-image: url(/public/assets/images/wadbanner2.svg);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 200px;
    z-index: 1;
    position: relative;
    right: 8px;
    top: -40px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.appbanner-overlay {
    width: 250px;
    min-height: 140px;
    background-image: url(/public/assets/images/wadbanner.svg);
    background-size: 250px;
    background-repeat: no-repeat;
    background-position: bottom center;
    position: relative;
    right: -8px;
}

.minedata {
    text-align: center;
    font-size: 3.5em;
    font-weight: 500;
    position: relative;
    top: -30px;
}

.tasks-slide {
    position: fixed;
    bottom: 50px;
    left: 0;
    display: flex;
    justify-content: center;
    z-index: 2;
    transform: translateY(43%);
    transition: transform 0.5s ease;
}

button#taskslidertog {
    text-align: center;
    font-size: 2em;
    position: absolute;
    top: -24px;
    border: none;
    border-radius: 50%;
    background: none;
    color: #c1c1c1;
    z-index: -1;
    animation: bobbing 2s infinite ease-in-out alternate;
    
}

@keyframes bobbing {
  0% {
    transform: translateY(0); /* Start at original position */
  }
  100% {
    transform: translateY(-8px); /* Move 10px upwards */
  }
  from {
    text-shadow:
      0 0 20px #fff,
      0 0 30px #25874c,
      0 0 40px #25874c,
      0 0 50px #25874c,
      0 0 60px #25874c,
      0 0 70px #25874c,
      0 0 80px #25874c;
  }
  to { 
    text-shadow:
      0 0 10px #fff,
      0 0 20px #2db563,
      0 0 30px #2db563,
      0 0 40px #2db563,
      0 0 50px #2db563,
      0 0 60px #2db563,
      0 0 70px #2db563;
  }
}


.taskslider{
   	background: #3c3c3c;
   	height: 620px;
    width: 480px;
    border-radius: 25px 25px 0px 0px;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    
}

ul.tabnav {
    display: flex;
    list-style-type: none;
    gap: 50px;
    margin-bottom: 8px;
    padding-left: 0px;
}

.tabnav li.tabdeactive {
    border-bottom: 2px solid;
    padding-bottom: 6px;
    width: 120px;
    display: none;
    justify-content: center;
}

.tabnav li.tabactive {
    border-bottom: 2px solid;
    padding-bottom: 6px;
    width: 120px;
    display: flex;
    justify-content: center;

}

.tabnav a {
    border: none;
    background: none;
    color: #f0f0f0;
    font-size: 1.2em;
    font-weight: 500;
}

.slideUP {
  transform: translateY(0%) !important;
}

.slideUP2 {
  display: flex !important;
  transform: translateY(0%) !important;
  transition: transform 0.5s ease;
}

.wallet-slide {
    position: fixed;
    bottom: 50px;
    left: 0;
    display: none;
    justify-content: center;
    z-index: 2;
    transform: translateY(100%);
}

.walletslider{
    background: #3c3c3c;
    height: 380px;
    width: 480px;
    border-radius: 25px 25px 0px 0px;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    
}

.walletslider i {
    font-size: 5.5em;
}

.walletslider button {
    border: none;
    width: 220px;
    height: 38px;
    border-radius: 12px;
    background: cornflowerblue;
    color: white;
    font-size: 1em;
    font-weight: 500;
}

button.buttonoff {
    background: #6b6b6b;
    color: #a7a7a7;
}

.teg-date {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    font-size: 1.8em;
    font-weight: 700;
    margin: 10px 0px 20px 0px;
}

.teg-date div {
    width: 70px;
    height: 70px;
    background: #1e1e1e;
    display: flex;
    border-radius: 10px;
    margin: -5px;
    color: #6b6b6b;
    font-size: 1.5em;
    justify-content: center;
    line-height: normal;
}

.teg-date span {
    z-index: 2;
    color: white;
}


.people-slide {
    position: fixed;
    bottom: 50px;
    left: 0;
    display: none;
    justify-content: center;
    z-index: 2;
    transform: translateY(100%);
}

.peopleslider{
    background: #3c3c3c;
    height: 620px;
    width: 480px;
    border-radius: 25px 25px 0px 0px;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    
}

@media only screen and (max-width: 410px) {
  .tasks-slide, .people-slide{
    transform: translateY(53%);
    }

    .singletask {
    width: 360px !important;
    }

    .singlepeople {
    width: 360px !important;
    }

    .peoplelist span {
    width: 220px !important;
    }

    .icon-bar-ft, .taskslider, .appbody {
    width: 410px;
    }

    .taskdetail h6 {
    font-size: 0.75em !important;
    }

    .taskimage {
    width: 50px !important;
    height: 45px !important;
    }

    .peopleimage {
    width: 50px !important;
    height: 45px !important;
    }

    .invite-section p {
    
    width: 250px !important;
    }

}

@media only screen and (max-width: 375px) {
  .tasks-slide, .people-slide{
    transform: translateY(71%);
    }

    .singletask {
    width: 320px !important;
    }

    .singlepeople {
    width: 320px !important;
    }

    .peoplelist span {
    width: 180px !important;
    }
    
    .appbanner-overlay {
     width: 220px;
     background-size: 220px;
    }

    .minedata {
        font-size: 3em;
   }

   .taskdetail h6 {
    font-size: 0.7em !important;
    }

    .taskimage {
    width: 48px !important;
    height: 43px !important;
    }

    .peopleimage {
    width: 48px !important;
    height: 43px !important;
    }

    .taskdetail {
    width: 65%;
    }
}


@media only screen and (max-height: 685px) {
  .tasks-slide, .people-slide{
    transform: translateY(71%) !important;
    }
  .tasks-slide.slideUP, .people-slide.slideUP2 {
    transform: translateY(15%) !important;
  }
  .taskscroll {
    height: 440px !important;
   }

   .peoplescroll {
    height: 360px !important;
   }

}

@media only screen and (max-height: 585px) {
  
  .tasks-slide.slideUP, .people-slide.slideUP2 {
    transform: translateY(30%) !important;
  }
  .taskscroll {
    height: 340px !important;
   }

   .peoplescroll {
    height: 260px !important;
   }

}

.taskscroll {
    overflow-y: scroll;
    height: 550px;
    padding-bottom: 50px;
}

.taskholder {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
}

.singletask {
    display: flex;
    background: #1e1e1e;
    width: 420px;
    height: 80px;
    margin: 3px;
    border-radius: 20px;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}


.taskimage {
    background: #3c3c3c;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
}

.taskdetail {
    display: flex;
    flex-direction: column;
    width: 68%;
    padding: 12px;
}

.taskdetail h6 {
    margin: 2px;
    font-size: 0.85em;
}

.taskdetail span {
    font-size: 0.8em;
    font-weight: 500;
    color: #bfbfbf;
}

.taskaction button {
    border: none;
    border-radius: 10px;
    padding: 4px 18px;
    font-weight: 500;
}

button.claimbt {
    background: #2db563;
    color: aliceblue;
    padding: 4px 16px;
    font-weight: 500;
}

button.taskdone {
    padding: 4px 25px !important;
    background: #3c3c3c;
    color: #2db563;
    font-weight: 800 !important;
}

.dailytaskholder {
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    gap: 10px;
    padding-top: 25px;
}

.taskcell {
    width: 60px;
    height: 60px;
    background: #6b6b6b;
    border-radius: 10px;
    margin-bottom: 15px;
    text-align: center;
}
.taskcell span {
    font-size: 0.7em;
    position: relative;
    top: -22px;
    color: #c1c1c1;
}

.taskcell p {
    font-size: 0.8em;
    font-weight: 700;
    position: relative;
    bottom: -10px;
}

.tasklock {
    width: 60px;
    height: 60px;
    background: #040404b3;
    background-image: url(/public/assets/images/lock.svg);
    background-repeat: no-repeat;
    background-size: 14px;
    background-position: center;
    border-radius: 10px;
    position: relative;
    bottom: 24px;
}

.taskcell.dailytask {
    background-image: url(/public/assets/images/check-circle.svg);
    background-repeat: no-repeat;
    background-size: 18px;
    background-position: center 14px;
    background-color: #1e1e1e;
}

.taskcell.dailygift {
    background-image: url(/public/assets/images/open-gift.svg);
    background-repeat: no-repeat;
    background-size: 25px;
    background-position: center 12px;
    background-color: #1e1e1e;
}

.taskcell.daygift {
    background-image: url(/public/assets/images/gift-box.svg);
    background-repeat: no-repeat;
    background-size: 35px;
    background-position: center center;
}

.taskcell.daytask {
    background-image: url(/public/assets/images/wad-icon.svg);
    background-repeat: no-repeat;
    background-size: 22px;
    background-position: center center;
}

.appfooter {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    z-index: 2;
}

.icon-bar-ft {
	background: black;
    display: flex;
    border-radius: 25px 25px 0px 0px;
    width: 480px;
    justify-content: space-between;
}
.home-bt button, .task-bt button, .wallet-bt button, .friend-bt button, .leader-bt button {
    background: transparent;
    border: none;
    color: #3b3b3b;
    font-size: 2.3em;
}

.invite-section {
    display: flex;
    justify-content: space-evenly;
    flex-direction: row;
    width: 100%;
}

.invite-section p {
    background: #1e1e1e;
    color: #afafaf;
    padding: 12px 18px;
    border-radius: 10px;
    margin: 0px !important;
    width: 280px;
}

.invite-section button {
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 10px;
    font-size: 1.6em;
}

.peopleslider h3 {
    border-bottom: 2px solid;
    padding-bottom: 8px;
    width: 100px;
    text-align: center;
    margin-bottom: 12px !important;
}

.leaderboard h3 {
    width: 150px;
}


.peoplescroll {
    overflow-y: scroll;
    height: 550px;
    padding-bottom: 50px;
}

.peopleholder {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
}

.singlepeople {
    display: flex;
    background: #1e1e1e;
    width: 420px;
    height: 80px;
    margin: 3px;
    border-radius: 20px;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}


.peopleimage {
    background: #3c3c3c;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
}

.peopledetail {
    display: flex;
    flex-direction: column;
    width: 68%;
    padding: 12px;
}

.peopledetail h6 {
    margin: 2px;
    font-size: 1em;
}

.peopledetail span {
    font-size: 0.9em;
    font-weight: 500;
    color: #bfbfbf;
}

.peopleaction button {
    border: none;
    border-radius: 10px;
    padding: 4px 18px;
    font-weight: 500;
}

.peoplelist {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-top: 25px;
}

.peoplelist p {
    margin: 0;
    color: #d7d7d7;
    font-size: 0.95em;
    font-weight: 500;
}

.peoplelist span {
    width: 280px;
    border-bottom: 1px solid #ababab;
    padding-top: 5px;
}

.peopleaction h5 {
    margin: 0;
    color: #949494;
    padding-right: 8px;
}

.minescore .peopleaction h5 {
    color: #35d369;
    font-weight: 700;
}

.minescore span {
    color: #35d374;
}
.minescore {
    border: 0.13em solid #2db563;
}