/* METER CSS */
.rank_bounus {
  display: flex;
  justify-content: space-around;
}

/* BANK OFFICE */
.gauge_height {
  height: 176px;
}

.bottom-sid-right-block {
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-evenly;  
  flex-direction: column;
}

.bottom-sid-inner {
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  /* justify-content: center; */
}

.ebebeb {
  box-shadow: rgb(41 41 239 / 42%) 0px 7px 29px 0px;
  background: linear-gradient(90deg, rgba(95, 188, 254, 1) 43%, rgba(37, 63, 205, 1) 83%);
  border-radius: 20px;
}


.gauge {
  height: 85px;
  /*overflow: hidden;*/
  position: relative;
  width: 200px;
  margin: 25px 18px;
}

.gauge .arc {
  /* background-image:
        radial-gradient(#fff 0, #ebebeb 60%, transparent 60%),
        conic-gradient(green 0, orange 135deg, #ccc 135deg, #ccc 180deg, #ebebeb 180deg, #ebebeb 360deg); */
  background-image: radial-gradient(rgba(95, 188, 254, 1) 0, 60%, transparent 60%), conic-gradient(lime 0, yellow 60deg, orange 120deg, #ff1717fa 150deg, #f1f1f1 150deg, #e1e1e1f2 180deg, #665d5d00 180deg);
  background-position: center center, center center;
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 100%;
  border-radius: 50%;
  border-style: none;
  height: 200px;
  position: relative;
  transform: rotate(-90deg);
  width: 100%;
}


/* start css for social media in register page */
.social-links {
  margin-top: 20px;
}

.social-links h4 {
  background: -webkit-linear-gradient(#ef07ff, #030448);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 500;
  font-size: 18px;
  margin: 8px 0;
}

.social-link {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.social-link a img {
  width: 20px;
}

.d-span {
  display: flex;
}

.claim-button {
  text-decoration: none;
  padding: 4px 10px;
  text-align: center;
  position: relative;
  border-radius: 17px;
  width: 130px;
  margin: 0px 8px;
  border: 1px solid rgb(118 61 255);
  font-size: 14px;
  font-weight: 100;
  letter-spacing: 1px;
  background: transparent;
  color: #000000;
  overflow: hidden;
  box-shadow: 0 0 0 0 transparent;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}

.claim-button:hover {
  background-image: linear-gradient(135deg, #f63, #f06, #7b2eff);
  color: #ffffff;
  box-shadow: 0 0 30px 5px rgba(118 61 255 0.815);
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

.claim-button:hover::before {
  -webkit-animation: sh02 0.5s 0s linear;
  -moz-animation: sh02 0.5s 0s linear;
  animation: sh02 0.5s 0s linear;
}

.claim-button::before {
  content: '';
  display: block;
  width: 0px;
  height: 86%;
  position: absolute;
  top: 7%;
  left: 0%;
  opacity: 0;
  background: #fff;
  box-shadow: 0 0 50px 30px #fff;
  -webkit-transform: skewX(-20deg);
  -moz-transform: skewX(-20deg);
  -ms-transform: skewX(-20deg);
  -o-transform: skewX(-20deg);
  transform: skewX(-20deg);
}

@keyframes sh02 {
  from {
    opacity: 0;
    left: 0%;
  }

  50% {
    opacity: 1;
  }

  to {
    opacity: 0;
    left: 100%;
  }
}

.claim-button:active {
  box-shadow: 0 0 0 0 transparent;
  -webkit-transition: box-shadow 0.2s ease-in;
  -moz-transition: box-shadow 0.2s ease-in;
  transition: box-shadow 0.2s ease-in;
}

.claim-button.claimed {
  background-color: #28a745;
  /* Green color for claimed */
  color: white;
}

/* #registration_form_btn{
  cursor: not-allowed;
}

#registration_form_btn.enabled {
  cursor: pointer;
  background-color: #28a745;
} */

/* end css for social media in register page */

.gauge .pointer {
  background: #fff;
  border: 1px solid #000;
  border-radius: 5px;
  bottom: 0;
  content: '';
  height: 6px;
  left: 0;
  position: absolute;
  transform: rotate(149deg) translateX(-19px) translateY(-29px);
  transform-origin: 85px 0;
  width: 20px;
  z-index: 5;
}

.gauge .mask::before,
.gauge .mask::after {
  background-image: radial-gradient(transparent 0, transparent 50%, #fff 50%, #fff 100%);
  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
  content: '';
  height: 0px;
  position: absolute;
  width: 18px;
}

.gauge .mask::before {
  left: -2px;
  bottom: 0;
}

.gauge .mask::after {
  bottom: 0;
  right: -2px;
}

.gauge .label {
  bottom: -22px;
  font-size: 39px;
  font-weight: 400;
  left: 0;
  line-height: 0px;
  position: absolute;
  text-align: center;
  width: 100%;
}

/* PROFILE CSS */

.User_Profile_ {
  /* border: 1px solid #d5cece; */
  padding: 20px;
  border-radius: 20px;
  background: linear-gradient(45deg, rgb(112 0 253) 35%, rgb(33 9 231) 76%);
}

.form-group label {
  /* padding-bottom: 10px; */
}


.btn-secondary {
  padding: 10px;
  border-radius: 10px;
  background-image: linear-gradient(135deg, #f63, #f06, #7b2eff);
  color: #fff;
  width: 300px;
  border: 0px solid #fff;
  margin-bottom: 10px;
}

.btn-secondary:disabled,
.btn-secondary[disabled] {
  border: 1px solid #ffffff;
  background-image: linear-gradient(135deg, rgb(43, 41, 41), rgb(22, 16, 19), #19181b);
  color: #ffffff;
}

/* Animation */
.reveal {
  position: relative;
  opacity: 0;
}

.reveal.active {
  opacity: 1;
}

.active.fade-bottom {
  animation: fade-bottom 1s ease-in;
}

.active.fade-left {
  animation: fade-left 1s ease-in;
}

.active.fade-right {
  animation: fade-right 1s ease-in;
}

@keyframes fade-bottom {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-left {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fade-right {
  0% {
    transform: translateX(100px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}






/* ON LOAD ANIMATION */

/* FOR LEFT */

.slide-right {
  -webkit-animation: slide-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: slide-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}


/* ----------------------------------------------
 * Generated by Animista on 2024-6-26 1:30:32
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-right
 * ----------------------------------------
 */
@-webkit-keyframes slide-right {
  0% {
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px);
  }

  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
}

@keyframes slide-right {
  0% {
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px);
  }

  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
}



/* FOR RIGHT */
.slide-left {
  -webkit-animation: slide-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: slide-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2024-6-26 1:37:41
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-left
 * ----------------------------------------
 */
@-webkit-keyframes slide-left {
  0% {
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px);
  }

  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
}

@keyframes slide-left {
  0% {
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
  }

  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
}



/* FOR BOTTOM */

.slide-top {
  -webkit-animation: slide-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: slide-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2024-6-26 1:50:5
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-top
 * ----------------------------------------
 */
@-webkit-keyframes slide-top {
  0% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
  }

  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

@keyframes slide-top {
  0% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
  }

  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}



@media only screen and (max-width: 600px) {
  .d-span {
    display: contents;
  }

}