.dashboard-user-box{
  background:linear-gradient(to right,#9c88ff,#8c7ae6);
  border-radius: 12px;
  padding:20px;
  color:#e2f3f5;
  text-align: center;
  margin:10px;
  overflow: hidden;
  background: linear-gradient(45deg,#775ada,#6f52d2);
}

.dashboard-user-box .top-section {
  text-shadow: 0 0 3px #00000038;
}

.dashboard-stats .widget-bg-color-icon{
  border-radius: 10px;
}

/* .dashboard-user-box.reward-claim {
background:linear-gradient(to right,#ce9e10,#d47700);
border: none;
} */

.dashboard-user-box .text-alt{
color:#ffe7a3;
}

.dashboard-user-box .username{
color:white;
}

.user-level{

  background: linear-gradient(to right, #5034b1, #673AB7);
  color: #ffffff;
  padding: 4px 0px 4px 12px;
  border-radius:4px;
  transform-origin: top;
  /* margin-right: -20px; */
  font-size: 16px;
  max-width: 120px;
  margin-top:4px;
  /* float: right; */
}

.user-level i{
  color:#fabf18;
  margin-right:2px;
}

.current-level-prop {
  color:#eaffe5;
  margin-top:5px;
}

.current-level-prop i {
font-size: 17px;
line-height: 10px;
position: relative;
top: 3px;
color: #c6b5ff;
}

.dashboard-stats{
  margin:10px;
}

.daily-bonus{
  background:linear-gradient(to right, rgb(242, 153, 74), rgb(242, 201, 76));
  overflow: hidden;
  filter: grayscale(0);
  border-radius: 10px;
  border:0px;
  /* box-shadow: 0 0 15px #d35400; */
/* text-shadow: 0 0 15px #d35400; */
  /* color:white; */
}

.daily-bonus-claimed{
  pointer-events: none;
  opacity: 0.8;
  filter:grayscale(0.7);
}

.daily-bonus-goal{
  filter: grayscale(0.5);
  /* pointer-events: none; */
}

.daily-bonus.loyalty-reward{
background:linear-gradient(to right, rgb(12, 235, 235), rgb(32, 227, 178), rgb(41, 255, 198));
}

.daily-bonus.loyalty-reward .loyalty-streak{
background-color:#00675d;
}

.daily-bonus.loyalty-reward .text-brown{
color:#00675d;
}

.daily-bonus.quest-tracker{
  /* background:linear-gradient(to right, rgb(97, 144, 232), rgb(167, 191, 232)); */
  background:linear-gradient(to right, rgb(167, 112, 239), rgb(207, 139, 243), rgb(253, 185, 155));
}
.daily-bonus.quest-tracker .text-brown{
  color: #64339a;
}

.loyalty-streak{
background-color: #814905;
position: absolute;
color: white;
top: 8px;
left: -6px;
padding: 1px 13px;
font-weight: 400;
border-radius: 3px;
transform: skewX(20deg);
}

.loyalty-streak span{
transform:skewX(-20deg);
display: inline-block;
}

.daily-bonus-available{
  animation: pulse 2s infinite;
  cursor: pointer;
  display:block;
}

@keyframes pulse {
  0% {
      box-shadow: 0 0 0 0 #ffffff1a;
  }
  70% {
      box-shadow: 0 0 0 10px #cca92c00;
  }
  100% {
      box-shadow: 0 0 0 0 #cca92c00;
  }
}

.daily-bonus-available:after {
  animation: shine 5s ease-in-out  infinite;
  animation-delay: 0s;
  animation-fill-mode: forwards;  
  content: "";
  position: absolute;
  top: 0%;
  left: -150%;
  width: 150%;
  height: 100%;
  opacity: 0;
  transform: skewX(30deg);
  
  background: rgba(255, 255, 255, 0.13);
  background: linear-gradient(
    to right, 
    rgba(255, 255, 255, 0.13) 0%,
    rgba(255, 255, 255, 0.13) 77%,
    rgba(255, 255, 255, 0.5) 92%,
    rgba(255, 255, 255, 0.0) 100%
  );
}

.daily-bonus-available.loyalty-reward:after {
  animation-delay: 1.1s;
}

.daily-bonus-available.quest-tracker:after {
  animation-delay: 0.8s;
}

@keyframes shine{
  40% {
    opacity: 1;
    left:-10%;
    transition-property: left, top, opacity;
    transition-duration: 0.7s, 0.7s, 0.15s;
    transition-timing-function: ease;
  }
  100% {
    opacity: 0;
    left: -10%;
    transition-property: left, top, opacity;
  }
}

.dashboard-user-box .progress-bar{
  /* background-color: #5238ad; */ /* Alternative color */
  background-color: #ffffffd1;
}


.dashboard-user-box .progress{
  background-color:#ffffff1c;
}

.user-box-icon i{
  font-size:30px;
  /* background-color:#8674e2; */
  /* box-shadow: 0px 0px 6px 0px rgba(255, 255, 255, 0.33);
  border-radius: 50%;
  padding:9px 18px; */
}

.level-reward-box, .max-level-congrats-box {
  padding: 20px;
  padding-bottom: 10px;
  margin: 11px -20px -20px -20px;
  background-color: #7867ce;
/* border-radius: 0px 0px 5px 5px; */
}

.level-reward-box {
  background-color: #6046bb;
  /* color: #fffbcb; */
  color: #31e8ff;
  font-weight: 400;
  box-shadow: 0px -1px 4px 0px #8e75e48f;
}

.max-level-congrats-box {
  background-color: #2d2263;
  box-shadow: 0px 0px 2px 1px #fed30094;
  padding: 13px;
}


.reward-claim .level-reward-box {
  background-color: #291C5A;
  color: #5a3f00;
  padding: 0px;
  box-shadow: 0px -1px 6px 0px #0000004d;
}


.level-reward-box .next-level-text, .level-reward-box .next-level{
transform: skewX(20deg);
padding: 4px 18px;
margin-left: -30px;
font-weight: 400;
font-size: 13px;
margin-top: -10px;
}

.level-reward-box .next-level-text{
color: #c1deff;
background: #342567;
max-width: 250px;
float: left;
}

.level-reward-box .next-level{
max-width: 250px;
clip-path: polygon(0% 0%, 97% 0%, 100% 50%, 85% 100%, 0% 100%);
background: #7f5aff;
margin-left: 0px;
color: #ffffff;
float: left;
}

.next-level-text div, .next-level div{
transform: skewX(-20deg);
}

.reward-claim .level-reward-box{
padding:0px;
}

.reward-claim .next-level-preview{
display: none;
}

.reward-claim-box .reward-text-1 {
  color: #ffc744;
}
.reward-claim-box .level-previous {
  color: #cfc2ff;
}
.reward-claim-box .level-arrow {
  color: #a086ff;
}
.reward-claim-box .level-current {
  color: #fffdf7;
}
.reward-claim-box .reward-icon {
line-height: 53px;
font-size: 53px;
color: #fac127;
}
.next-level-preview .text-success {
color:#89ff00 !important;
/* color: #a3ff9d !important; */
}
.next-level-preview .header {
/* border-bottom: 1px solid #907dec; */
margin-bottom: 5px;
color: moccasin;
}
.next-level-props > .col:first-child {
text-align: left;
}
.next-level-props > .col:last-child {
text-align: right;
}

.dashboard-user-box .bg-icon-info{
  border: 6px solid #8f77e4 !important;
  background-color: #6046bb !important;
}

.dashboard-user-box .avatar-lg{
  height: 5.5rem;
  width: 5.5rem;
}

.badge-user-info{
  background-color:#ffffff12;
  padding:6px 11px;
  border-radius: 3px;
  /* border: 1px solid #c3c3c3; */
  box-shadow:0 0 2px 0 rgba(40, 48, 55, 0.6);
}

.badge-user-info i{
  color: #ffffff87;
}

.badge-help{
  border-left: 1px solid #8674e2;
  background: #ffffff33;
  color: #ffffff !important;
  padding: 2px 6px;
  font-size: 15px;
  /* height: 100%; */
  position: relative;
  top: 0px;
  right: -10px;
  cursor: pointer;
  border-radius: 0px 3px 3px 0px;
  bottom: -18px;
  display: inline-block;
}

.dashboard-card-box{
  background-color:#2c343d;
}

.news-box{
  max-height:570px;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right: 10px;
}

.news-box-parent-card{
  max-height: 670px;
}

.news-post{
  background-color:#2c353e;
  /* border:1px solid #3c4650; */
}

.claim-reward-modal {
  backdrop-filter: blur(5px);
  /* margin-top: 50px; */
}
.claim-reward-modal .modal-content {
  /* background-color: #fef4e1; */
  background-color:white;
  box-shadow: 0 1rem 3rem rgba(0,0,0,.375);
  border-radius: 7px;
  border-radius: 20px;
  background-image: url("/static/img/landing/bg-lines.ecb0c6b9d733.png");
  background-size:cover;
}

.claim-reward-modal .modal-footer{
  border-top: 2px solid #efe6d5;
}
.claim-reward-modal .model-prop-icon {
color: #a449b3b5;
}

.reward-section {
  display: none;
}

.reward-text{
  font-size: 20px;
  color: #1c5bc1;
  margin-top:12px;
}
.reward-text .reward-title {
background-image: linear-gradient( 76.8deg,  rgba(121,45,129,1) 3.6%, rgba(36,31,98,1) 90.4% );
background-image: linear-gradient( 135.8deg,  rgba(26,26,29,1) 27.1%, rgba(111,34,50,1) 77.5% );
background-image: linear-gradient( 109.6deg,  rgba(41,125,182,1) 3.6%, rgba(77,58,151,1) 51%, rgba(103,55,115,1) 92.9% );
background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(0,52,89,1) 0%, rgb(5, 138, 189) 90% );
}
.reward-text .reward-value {
font-weight: 500;
color: #926c96;
/* color: #c13c46; */
}
.reward-text .reward-increment {
color: mediumseagreen;
}

.text-gradient{
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.level-upgrade-arrow{
  background-image: -webkit-linear-gradient(0deg, #f7b84b, #f1556c);
  color: #f7b84b;
}

.upgrade-perks-text{
  color: #b57b17;
  background-image: -webkit-linear-gradient(45deg, #ffa812, #f1556c);
  text-shadow: 0px 0px 5px #f7b84b7d;
}
.level-upgraded-text{
  color: #f1556c;
  background-image: -webkit-linear-gradient(45deg, #f1556c, #6559cc);
  /* text-shadow: 0px 1px 11px #f7b84b; */
}

.level-text-gradient{
  color: #f35626;
background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);
  
animation: hue 10s infinite linear;
}

@keyframes hue {
  from {
    -webkit-filter: hue-rotate(0deg);
  }
  50% {
      text-shadow: 0px 1px 15px #f7b84b;
  }
  to {
    -webkit-filter: hue-rotate(-360deg);
  }
}

/* =================== FIREWORKS START ============================ */

.pyro > .before, .pyro > .after {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  box-shadow: -120px -218.66667px blue, 248px -16.66667px #00ff84, 190px 16.33333px #002bff, -113px -308.66667px #ff009d, -109px -287.66667px #ffb300, -50px -313.66667px #ff006e, 226px -31.66667px #ff4000, 180px -351.66667px #ff00d0, -12px -338.66667px #00f6ff, 220px -388.66667px #99ff00, -69px -27.66667px #ff0400, -111px -339.66667px #6200ff, 155px -237.66667px #00ddff, -152px -380.66667px #00ffd0, -50px -37.66667px #00ffdd, -95px -175.66667px #a6ff00, -88px 10.33333px #0d00ff, 112px -309.66667px #005eff, 69px -415.66667px #ff00a6, 168px -100.66667px #ff004c, -244px 24.33333px #ff6600, 97px -325.66667px #ff0066, -211px -182.66667px #00ffa2, 236px -126.66667px #b700ff, 140px -196.66667px #9000ff, 125px -175.66667px #00bbff, 118px -381.66667px #ff002f, 144px -111.66667px #ffae00, 36px -78.66667px #f600ff, -63px -196.66667px #c800ff, -218px -227.66667px #d4ff00, -134px -377.66667px #ea00ff, -36px -412.66667px #ff00d4, 209px -106.66667px #00fff2, 91px -278.66667px #000dff, -22px -191.66667px #9dff00, 139px -392.66667px #a6ff00, 56px -2.66667px #0099ff, -156px -276.66667px #ea00ff, -163px -233.66667px #00fffb, -238px -346.66667px #00ff73, 62px -363.66667px #0088ff, 244px -170.66667px #0062ff, 224px -142.66667px #b300ff, 141px -208.66667px #9000ff, 211px -285.66667px #ff6600, 181px -128.66667px #1e00ff, 90px -123.66667px #c800ff, 189px 70.33333px #00ffc8, -18px -383.66667px #00ff33, 100px -6.66667px #ff008c;
  -moz-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  -webkit-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  -o-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  -ms-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards; }

.pyro > .after {
  -moz-animation-delay: 1.25s, 1.25s, 1.25s;
  -webkit-animation-delay: 1.25s, 1.25s, 1.25s;
  -o-animation-delay: 1.25s, 1.25s, 1.25s;
  -ms-animation-delay: 1.25s, 1.25s, 1.25s;
  animation-delay: 1.25s, 1.25s, 1.25s;
  -moz-animation-duration: 1.25s, 1.25s, 6.25s;
  -webkit-animation-duration: 1.25s, 1.25s, 6.25s;
  -o-animation-duration: 1.25s, 1.25s, 6.25s;
  -ms-animation-duration: 1.25s, 1.25s, 6.25s;
  animation-duration: 1.25s, 1.25s, 6.25s; }

@-webkit-keyframes bang {
  from {
    box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; } }
@-moz-keyframes bang {
  from {
    box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; } }
@-o-keyframes bang {
  from {
    box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; } }
@-ms-keyframes bang {
  from {
    box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; } }
@keyframes bang {
  from {
    box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; } }
@-webkit-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0; } }
@-moz-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0; } }
@-o-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0; } }
@-ms-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0; } }
@keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0; } }
@-webkit-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%; }

  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%; }

  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%; }

  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%; }

  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%; } }
@-moz-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%; }

  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%; }

  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%; }

  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%; }

  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%; } }
@-o-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%; }

  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%; }

  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%; }

  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%; }

  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%; } }
@-ms-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%; }

  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%; }

  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%; }

  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%; }

  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%; } }
@keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%; }

  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%; }

  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%; }

  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%; }

  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%; } }


/* ======================  FIREWORKS END ========================= */

/* Claim Rewards Loader */
#rewards-loader{
  position:relative;
  width:30px;
  height:30px;
  background:#3498db;
  border-radius:50px;
  animation: reward_loader_anim 1.5s infinite linear;
  /* margin: 120px auto; */
  margin: 60px auto;
}
#rewards-loader:after{
  box-sizing: unset;
  position:absolute;
  width:50px;
  height:50px;
  border-top:10px solid #9b59b6;
  border-bottom:10px solid #9b59b6;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-radius:50px;
  content:'';
  top:-20px;
  left:-20px;
  animation: reward_loader_anim_after 1.5s infinite linear;
}
@keyframes reward_loader_anim {
  0% {transform: rotate(0deg);}
  50% {transform: rotate(180deg);background:#2ecc71;}
  100% {transform: rotate(360deg);}
}
@keyframes reward_loader_anim_after {
  0% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
  50% {border-top:10px solid #3498db;border-bottom:10px solid #3498db;}
  100% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
}



/* Claim Rewards Loader Text */
div.luminate {
  text-align: center;
  font-weight: 700;
  letter-spacing:3px;

  background: gold;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 25px;
  font-family: "Source Sans Pro", sans-serif;
  -webkit-animation: glow 1200ms linear infinite ;
          animation: glow 1200ms linear infinite ;
}

@-webkit-keyframes glow {
  40% {
    text-shadow: 0 0 2px #c93c57;
  }
}
@keyframes glow {
  40% {
    text-shadow: 0 0 2px #c93c57;
  }
}


.btn-wrap{
height: 100%;
position: absolute;
top: 0;
width: 15px;
transform: skewX(-20deg);
transform-origin: bottom;
}
.btn-wrap.wrap1 {
left: 0;
background-color: #fac02530;
}
.btn-wrap.wrap2 { 
left: 15px;
background-color: #fac32f87;
}



.btn-claim {
color: white;
padding: 6px 32px;
text-transform: uppercase;
letter-spacing: 4px;
position: relative;
overflow: hidden;
cursor: pointer;
}
.btn-claim span {
position: relative;
z-index: 1;
margin-top: -5px;
}
.btn-claim:before, .btn-claim:after {
content: '';
position: absolute;
display: block;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
.btn-claim:before {
-webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
background-color: #ffffff4a;
-webkit-transition: -webkit-transform 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: -webkit-transform 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: transform 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: transform 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.btn-claim:after {
background: linear-gradient(45deg, #d47b02, #ffb600);
-webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
-webkit-transition: -webkit-transform 300ms 300ms cubic-bezier(0.16, 0.73, 0.58, 0.62);
transition: -webkit-transform 300ms 300ms cubic-bezier(0.16, 0.73, 0.58, 0.62);
transition: transform 300ms 300ms cubic-bezier(0.16, 0.73, 0.58, 0.62);
transition: transform 300ms 300ms cubic-bezier(0.16, 0.73, 0.58, 0.62), -webkit-transform 300ms 300ms cubic-bezier(0.16, 0.73, 0.58, 0.62);
}
.btn-claim:hover:before {
-webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
}
.btn-claim:hover:after {
-webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
}
/* .reward-claim-box .button-section {
padding: 20px;
} */
.reward-claim-box .text-section {
padding: 20px;
padding-left: 30px;
padding-bottom: 16px;
}

.btn-claim {
position: absolute;
height: 100%;
/* width: 100%; */
top: 0;
left: 30px;
right: 0;
padding: 30px;
padding-right: 45px;
transform: skewX(-20deg);
transform-origin: bottom;
color: #422603;
text-shadow: 0 0 4px white;
background: radial-gradient(#ffde8c 9%, #f9b602)
}
.btn-claim span {
transform: skewX(20deg);
display: inline-block;
}


@media (max-width:768px) {
  .btn-wrap, .btn-claim, .btn-wrap.wrap2, .btn-claim span  { 
    position: relative;
    transform: none;
    left: 0;
  }
  .btn-wrap { 
    height: 10px;
    width: 100%;
  }
  .btn-claim {
    padding: 15px 0px;
  }
  .username {
    font-size: 20px;
  }
}

@media (max-width: 480px){
.username {
  font-size: 18px;
}
.current-level-prop {
  font-size: 13px;
}
.user-level {
  font-size: 14px;
  padding-right: 15px;
}
}

@media (min-width: 1200px) and (max-width:1400px) {
.reward-claim-box .reward-icon {
  line-height: 35px;
  font-size: 30px;
}
.btn-claim {
  padding: 60px 20px 5px 5px;
}
.username {
  font-size: 22px;
}
}
@media (min-width: 1400px) and (max-width:1600px) {
.reward-claim-box .reward-icon {
  line-height: 40px;
  font-size: 40px
}
}

.level-info-button{
  background-color: #6046bb;
  cursor: pointer;
  padding:2px 5px;
  border-radius: 4px;
  color:white;
  opacity: 0.7;
  font-size:12px;
}

.level-info-button:hover{
  opacity: 1;
}

.new-user-checklist-wrap{
  background: linear-gradient( 315deg, #212930 75%, #262f38);
  border-radius: 8px;
  margin-bottom:20px;
  overflow: hidden;
  display: none;
}

@media only screen and (min-width: 769px) {
  /* For desktop */
  .new-user-checklist-wrap.for-desktop{
    display: block;
  }
}

@media only screen and (max-width: 768px) {
  /* For mobile */
  .new-user-checklist-wrap.for-mobile{
    display: block;
  }
}

.new-user-checklist-card{
  padding:20px;
}

.new-user-checklist-card .checklist-header{
  font-size:18px;
  margin-top: -5px;
}

.new-user-checklist-wrap .progress-bar{
  border-radius: 0px;
  background:linear-gradient(to right, rgb(54, 209, 220), rgb(91, 134, 229));
  animation:smooth_progressbar 1.5s ease;
  /* background:linear-gradient(to right, rgb(6, 190, 182), rgb(72, 177, 191)); */
}

@keyframes smooth_progressbar {
  0%{
    width:0%;
  }
}

.new-user-checklist-wrap .progress{
  border-radius: 0px;
  /* background: #2c353e; */
  background:#36404a;
}

.checklist-task{
  /* background: #2c353e; */
  /* background-color:#182026; */
  background:#2a343b;
  padding:15px;
  border-radius: 8px;
}

.checklist-task.task-completed{
  color:#bdbdbd;
  color: #a8b5c3b3;
  background: #273037;
}

.checklist-task.task-completed .task-text{
  text-decoration: line-through;
}

.checklist-task.task-pending:first-child, :not(.checklist-task.task-pending) + .checklist-task.task-pending {
  border:2px solid #1e90ff36;
  animation:next_task_checklist 3s linear infinite;
}

@keyframes next_task_checklist {
  0% {
    border:2px solid #1e90ff00;
  }
  50% {
    border:2px solid #1e90ff80;
  }
  100% {
    border:2px solid #1e90ff00;
  }
}

.checklist-task .task-icon{
  background-color:#3a4550;
  /* background-color:#252f37; */
  border-radius: 50%;
  height:40px;
  width:40px;
  text-align: center;
  line-height: 40px;
  color:white;
  margin-right:10px;
}

.checklist-task.task-completed .task-icon{
  background:linear-gradient(to right, rgb(2, 170, 176), rgb(0, 205, 172));
  font-size:20px;
}

.checklist-task .task-name{
  font-weight: 500;
}

.checklist-task .task-description{
  opacity:0.8;
  font-size:13px;
}

.checklist-task .task-reward{
  background:linear-gradient(to right, rgb(242, 153, 74), rgb(242, 201, 76));
  filter: grayscale(0.5);
  pointer-events: none;
  color:#814905;
  padding:4px 10px;
  border-radius: 4px;
  font-weight: 500;
}

.checklist-task.task-completed .task-reward{
  background: #126D71;
  color: #ecedf26e;
  font-weight: 400;
}

.checklist-task.reward-available .task-reward{
  filter:none;
  animation: pulse 2s infinite;
  pointer-events:auto;
}

.checklist-task.reward-available .task-reward.disabled{
  pointer-events: none;
  opacity:0.5;
}

.dashboard-news-announcement{
  background-color: #232c34;
  background:linear-gradient(292deg, #232c34, #19242e);
  cursor: pointer;
  margin:0px -2px;
}

.dashboard-news-announcement p{
  display: inline;
}

.dashboard-news-announcement .post-content{
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
}