.list-check li::marker {
  content: "✓";
  padding-right: 4px;
  font-size: 18px;
}
.list-check li {
  padding-left: 8px;
}
.rate {
  display: inline-block;
  height: 46px;
  padding: 0 10px;
}
.rate:not(:checked) > input {
  position: absolute;
  top: -9999px;
}
.rate:not(:checked) > label {
  float: right;
  width: 1em;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  font-size: 30px;
  color: #ccc;
}
.rate:not(:checked) > label:before {
  content: "★ ";
}
.rate > input:checked ~ label {
  color: #ffc700;
}
.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
  color: #deb217;
}
.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
  color: #c59b08;
}

.social-link.footer a {
  min-width: 40px;
  min-height: 40px;
}
.social-link a {
  width: 40px;
  height: 40px;
  color: #fff;
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
  z-index: 1;
  background: rgba(255, 255, 255, 0.062745098);
  border-radius: 100%;
  font-size: 14px;
}
.social-link a::after {
  content: " ";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100px;
  background: #53e6a1;
  opacity: 0.06;
  transform: scale(0);
  transition: all 0.4s ease;
  z-index: -1;
}
.social-link a:hover::after {
  opacity: 1;
  transform: scale(1);
}
/* .silver,
.gold,
.Diamond {
  position: absolute;
  top: -10px;
  right: 10px;
  z-index: 5;
} */
/* .silver span,
.gold span,
.Diamond span {
    position: absolute;
    top: 47px;
    z-index: 5;
    left: 50px;
    text-align: center;
    font-size: 14px;
    width: 70px;
} */
.silver {
  background-image: url("../images/silver.png");
  background-repeat: no-repeat;
  background-size: contain;
  width: 60px;
  height: 60px;
  top: 10px;
  right: 10px;
}
.silver-gradint-bg{
    background: linear-gradient(90deg, #A8A9AD 0%, #ececec 20%, #C0C0C3 40%, #fdfdfd 60%, #D7D7D8 80%, #E3E3E3 100%);

}
.silver-gradient {
 position: absolute;
  width: auto;
  height: 30px;
  top: 0px;
  background: linear-gradient(90deg, #A8A9AD 0%, #ececec 20%, #C0C0C3 40%, #fdfdfd 60%, #D7D7D8 80%, #E3E3E3 100%);
          left: -10px;
  right: -10px;
  border-radius: 4px 4px 0 0 !important;
}
.silver-gradient::after{
    content: "";
    position: absolute;
    top: 30px;
    left: 0px;
    border-left: 10px solid transparent;
    border-top: 10px solid #C0C0C3;

}
.silver-gradient::before{
    content: "";
    position: absolute;
    top: 30px;
    right: 0px;
    border-right: 10px solid transparent;
    border-top: 10px solid #C0C0C3;

}
.gold-gradient {
 position: absolute;
  width: auto;
  height: 20px;
  top: 0px;
  background: linear-gradient(135deg, 
  #967117 0%,    /* Dark Gold */
  #C3974F 25%,   /* Bronze Gold */
  #FFD700 50%,   /* Pure Gold */
  #E6C200 75%,   /* Rich Gold */
  #B8860B 100%   /* Deep Gold */
);
          left: -10px;
  right: -10px;
  border-radius: 4px 4px 0 0 !important;
}
.gold-gradient::after{
    content: "";
    position: absolute;
    top: 20px;
    left: 0px;
    border-left: 10px solid transparent;
    border-top: 10px solid #FFD700;

}
.gold-gradient::before{
    content: "";
    position: absolute;
    top: 20px;
    right: 0px;
    border-right: 10px solid transparent;
    border-top: 10px solid #FFD700;

}

.Diamond-gradint {
 position: absolute;
  width: auto;
  height: 20px;
  top: 0px;
  background: linear-gradient(135deg, 
  #0F4C81 0%,    /* Dark Navy Blue */
  #1A73E8 25%,   /* Bright Royal Blue */
  #2A9DF4 50%,   /* Metallic Sky Blue */
  #5EC8E5 75%,   /* Light Aqua Blue */
  #B3E5FC 100%   /* Soft Ice Blue */
);
          left: -10px;
  right: -10px;
  border-radius: 4px 4px 0 0 !important;
}
.Diamond-gradint::after{
    content: "";
    position: absolute;
    top: 20px;
    left: 0px;
    border-left: 10px solid transparent;
    border-top: 10px solid #2A9DF4;

}
.Diamond-gradint::before{
    content: "";
    position: absolute;
    top: 20px;
    right: 0px;
    border-right: 10px solid transparent;
    border-top: 10px solid #2A9DF4;

}
.gold {
  background-image: url("../images/gold.png");
  background-repeat: no-repeat;
  background-size: contain;
  width: 60px;
  height: 60px;
  top: 10px;
  right: 10px;
}
.Diamond {
  background-image: url("../images/daimond.png");
  background-repeat: no-repeat;
  background-size: contain;
  width: 60px;
  height: 60px;
  top: 10px;
  right: 10px;
}
.w-fit-content{
    width: fit-content !important;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active{
background: rgb(83 230 161) !important;
}
.swiper-pagination-bullet{
  background-color: rgba(83, 230, 161 ,.2) !important;
}


::-webkit-scrollbar {
  width: 10px;
  height: 10px; 
  display: none;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 5px;
  display: none;
}

::-webkit-scrollbar-thumb {
  background: #041628;
  border-radius: 10px;
  border: 2px solid #fff;
  display: none;
}

::-webkit-scrollbar-thumb:hover {
  background: #041628;
  display: none;
}




.feedPollSystem .pollAnswersWrapper {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
}

.feedPollSystem .pollAnswersWrapper .pollAnswer {
  margin-top: 10px;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  padding: 8px 12px;
  color: #050505;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}

.feedPollSystem .pollAnswersWrapper .pollAnswer .pollAnswerProgress {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 0;
  background: linear-gradient(to right, #1e6469, #213e2a);
  transition: width .3s ease;
}

.feedPollSystem .pollAnswersWrapper .pollAnswer .pollOptionText {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 1;
  color: #fffcfc;
}

.feedPollSystem .pollAnswersWrapper .pollAnswer .pollOptionPercentage {
  flex-shrink: 0;
  padding-left: 48px;
  z-index: 1;
  color: #fffcfc;
}

.voteProgress {
  cursor: pointer;
  background: #1f2e40 !important;
}

.voteProgress:hover {
  cursor: pointer;
  background: #384f6b !important;
}
.voteProgressActive {
  cursor: pointer;
  background: #384f6b !important;
  position: relative;
}
.voteProgressActive::after {
  content: "";
  display: inline-block;
  width: 2em; /* Adjust size as needed */
  height: 2em; /* Adjust size as needed */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2353e6a1"><path d="M20.285 6.709a1 1 0 0 0-1.414 0L9 16.586l-4.293-4.293a1 1 0 1 0-1.414 1.414l5 5a1 1 0 0 0 1.414 0l11-11a1 1 0 0 0 0-1.414z"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 3px;
  right: 12px;
  transition: all ease-in-out 0.2s;
}


/* @keyframes clickEffect {
  0% { transform: scale(1); opacity: 1; box-shadow: 0 0 5px rgba(255, 255, 255, 0.2); }
  40% { transform: scale(1.3); opacity: 0.8; box-shadow: 0 0 15px rgba(255, 255, 255, 0.4); }
  100% { transform: scale(1); opacity: 1; box-shadow: 0 0 5px rgba(255, 255, 255, 0.2); }
}
 */
.clickAnimation {
  animation: clickEffect 0.1s ease-in-out;
}

aside nav ul li a{
  padding: 6px 8px;
    background-color: rgb(107 114 128 / 20%);
    border: 1px solid rgb(255 255 255 / 3%);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
  
  }
  aside nav ul li a:hover{
    border-color:#000000;
    color: #53e6a1;
  }

  aside nav ul li  aside nav ul li a.active a > span{
    border-color:#53e6a1;
    color: #53e6a1;
  }
  a.active > span{
    border-color:#53e6a1;
    color: #53e6a1;
  }
  aside nav ul li:nth-child(1) a:hover svg path,aside nav ul li:nth-child(1) a.active svg path {
   stroke: #53e6a1 !important;
  }
  aside nav ul li:nth-child(2) a:hover svg path , aside nav ul li:nth-child(2) a.active svg path{
   fill: #53e6a1 !important;
  }
  /* aside nav ul li:nth-child(3) a:hover svg path ,aside nav ul li:nth-child(3) a.active svg path {
   fill: #53e6a1 !important;
  } */
  aside nav ul li:nth-child(3) a:hover svg path,aside nav ul li:nth-child(3) a.active svg path {
   fill: #53e6a1 !important;
  }
  aside nav ul li:nth-child(4) a:hover svg path:nth-child(1),aside nav ul li:nth-child(4) a.active svg path:nth-child(1) {
   stroke: #53e6a1 !important;
  }
  aside nav ul li:nth-child(4) a:hover svg path:nth-child(2),aside nav ul li:nth-child(4) a.active svg path:nth-child(2) {
   fill: #53e6a1 !important;
  }
  aside nav ul li:nth-child(5) a:hover svg path,aside nav ul li:nth-child(5) a.active svg path {
   stroke: #53e6a1 !important;
  }
  
  
  header div a.active{
    color:rgb(161 240 224 / var(--tw-text-opacity, 1));
    border-bottom: 4px solid rgb(161 240 224 / 60%);
  }
  header div a.active span{
    color:rgb(161 240 224 / var(--tw-text-opacity, 1));
  }
  header div a:nth-child(1).active svg path{
    fill: #53e6a1;
  }
  header div a:nth-child(2).active svg path{
    stroke: #53e6a1;
  }
  header div a:nth-child(3).active svg path{
    fill: #53e6a1;
  }
  header div a:nth-child(4).active svg path{
    fill: #53e6a1;
  }
  
  header div a:nth-child(8).active svg path{
    fill: #53e6a1;
  }
  
  
  header div a:nth-child(5).active svg circle,
  header div a:nth-child(5).active svg path:nth-last-child(1),
  header div a:nth-child(5).active svg path.cls-1,
  header div a:nth-child(5).active svg path.cls-2,
  header div a:nth-child(6).active svg g path,
  header div a:nth-child(7).active svg g path
  {
    fill: #53e6a1;
  }
  
  

  label.error {
    font-size: 12px;
    font-weight: 600;
    color: var(--danger);
    position: absolute;
    top: -24px;
    padding: 0px 3px;
    background: #d95c5c;
    border-radius: 6px;
    color: #fff !important;
    width: auto;
    text-align: center;
    right: 0;
    z-index: 11;
    text-transform: none;
    padding-left: 11px;
    padding-right: 11px;
}
label.error::before {
  position: absolute;
  content: "";
  width: 0.6em;
  height: 0.6em;
  background-image: none;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transition: background 0.1s linear;
  margin-left: -0.3em;
  top: auto;
  background: #d95c5c;
  right: 4px;
  bottom: -3px;
  left: auto;
}

aside nav ul li a::after{
  content: "";
  background-image: url('data:image/svg+xml,<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_3105_2)"><path d="M199.991 80.7893L198.182 15.2452C197.98 7.9163 192.081 2.01734 184.752 1.81449L119.207 0.00553871C115.378 -0.101534 111.755 1.34734 109.056 4.04676L4.04618 109.057C-1.34091 114.444 -1.34091 123.209 4.04618 128.596L71.3997 195.949C76.799 201.35 85.5388 201.351 90.9394 195.95L195.95 90.94C198.622 88.2672 200.095 84.5671 199.991 80.7893ZM169.98 63.2406C160.798 72.4218 145.938 72.4227 136.756 63.2406C127.596 54.0806 127.596 39.1762 136.756 30.0167C145.938 20.8351 160.798 20.8347 169.98 30.0167C179.139 39.1762 179.139 54.0806 169.98 63.2406Z" fill="%2353E6A1"/></g><defs><clipPath id="clip0_3105_2"><rect width="200" height="200" fill="white"/></clipPath></defs></svg>');  
  position: absolute;
  top: 13px;
  right: -20px;
  z-index: 10;
  height: 12px;
  width: 12px;
  background-size: contain;
  background-repeat: no-repeat;
  transition: all ease-in-out 0.2s;
}
 aside nav ul li a.click-active::after{
  right: 16px;
}
 aside nav ul li a.click-active::after{
  right: 16px;
}

#btn_spinner {
  display: none;
}


.post-img .post-img-icon{
  opacity: 0;
  visibility: hidden;
position: absolute;
top: 50%;
left: 50%;
z-index: 10;
transform: translate(-50% , -50%);
transition: all ease-in-out 0.2s;
}
.post-img:hover .post-img-icon{
  opacity: 1;
  visibility: visible;
}

.post-img::after {
  opacity: 0;
  visibility: hidden;
  content: "";
position: absolute;
inset: 0;
background: rgba(0, 0,0, 80%);
transition: all ease-in-out 0.2s;
}
.post-img:hover::after {
  opacity: 1;
  visibility: visible;

}


.lightbox {
  display: none;
  position: fixed;
  z-index: 99999999;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  align-items: center;
  justify-content: center;
}
.lightbox img {
  max-width: 90%;
  max-height: 90%;
  margin-top: 30px;
  margin-bottom: 30px;
  border-radius: 8px;
}
.lightbox:target {
  display: flex;
}

.close {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 3em;
  color: #fff;
  text-decoration: none;
}

.thumbnail {
  max-width: 100%;
}

.thumbnail-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}




.fileUpload input.upload {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  filter: alpha(opacity = 0);
}
.input-group-append .btn, .input-group-prepend .btn {
  padding: 5.5px;
  font-size: 14px;
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active:focus, .btn-secondary:active {
  color: var(--black) !important;
}

input-group-append .btn, .input-group-prepend .btn {
  padding: 5.5px;
  font-size: 14px;
}

.upload-btn {
  border-radius: 0;
  line-height: 29px;
}
.btn {
  display: inline-block;
  font-weight: 500;
  text-align: center;
  white-space: unset;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: none;
  font-size: 14px;
  line-height: 1.2;
  border-radius: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  padding: 12px 25px;
  text-transform: capitalize;
  font-weight: 500;
  position: relative;
  box-shadow: none !important;
}

.sidebarmain:has(.sidebaractive){
  background-color: rgba(0, 0, 0, 0.4);
  position: absolute;
  inset: 0;
  z-index: 99999;
}


.success-gif-img{
  filter: invert(50%) brightness(200%)
  }
  .success-green-box{
  background-color: #53E6A1;
  width: 100%;
  padding: 60px 20px;
  text-align: center;
  }

  .sucess-model-sec h3{
  font-size: 36px !important;
  }
  .sucess-model-sec h3 + p{
  font-size: 18px !important;
  }
  .sucess-model-sec {
  border-radius: 12px !important;
  overflow: hidden;
  }
  .sucess-model-sec{
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.05);
  }
 .success-green-box .tick {
    stroke-dasharray: 29px;
    stroke-dashoffset: 29px;
    animation: draw .5s cubic-bezier(.25, .25, .25, 1) forwards;
    animation-delay: .6s
}

.success-green-box .circle {
    fill-opacity: 0;
    stroke: #219a00;
    stroke-width: 16px;
    transform-origin: center;
    transform: scale(0);
    animation: grow 1s cubic-bezier(.25, .25, .25, 1.25) forwards;   
}

@keyframes grow {
    60% {
        transform: scale(.8);
        stroke-width: 4px;
        fill-opacity: 0;
    }
    100% {
        transform: scale(.9);
        stroke-width: 8px;
        fill-opacity: 1;
        fill: #219a00;
    }
}

@keyframes draw {
    100% { stroke-dashoffset: 0; }
}






.like-bounce {
  animation: bounceLike 0.4s ease;
}

@keyframes bounceLike {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.4);
  }
  60% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

/* Fill the path with green when liked */
svg.liked path {
  fill: #53e6a1 !important;
  stroke: #53e6a1 !important;
}

.disabled-join {
  background: #6c6c6c7a !important;
  color: rgb(156 156 156) !important;
}
.disabled-join:hover{
  cursor: not-allowed !important
}

    /* Override default DataTable styles to match Tailwind and dark theme */
    #purchaseTable thead th {
      background-color: #2b2b3d;
      color: #f0f0f0;
      border-color: #1d2d3e;
      text-align: center;
    }
    #purchaseTable tbody tr:hover {
      background-color: #33334d;
    }
    #purchaseTable tbody tr {
        border-color: #1d2d3e;
        height: 60px;
    }
    #purchaseTable tbody td {
        border-color: #1d2d3e;
        text-align: center;
        font-size: 15px;
    }
    
    #purchaseTable tbody tr:nth-child(even) td {
  background-color: #26263a; /* Darker for odd rows */
}

#purchaseTable tbody tr:nth-child(odd) td {
  background-color: #1e1e2f; /* Slightly lighter for even rows */
}
#purchaseTable tbody tr:hover td {
  background-color: #33334d !important;
}

  
  
.radio-wrapper-1 {
  
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 400;
  line-height: 1.5;
}

.radio-wrapper-1 label {
  display: inline-block;
  padding-left: .25em;
  padding-right: 1.25em;
}

.radio-wrapper-1 input[type=radio] {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  margin-bottom: 0;
  margin-right: 0;
}

.radio-wrapper-1 input[type=radio] {
  background-position: center center;
  -webkit-print-color-adjust: exact;
  appearance: none;
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: contain;
  border: 1px solid rgba(0, 0, 0, .25);
  height: 1em;
  margin-top: .25em;
  vertical-align: top;
  width: 1em;
  border-radius: 50%;
}

.radio-wrapper-1 input[type=radio]:active {
  filter: brightness(90%);
}

.radio-wrapper-1 input[type=radio]:focus {
  border-color: #86b7fe;
  box-shadow: rgba(13, 110, 253, .25) 0 0 0 .25rem;
  outline: 0;
}

.radio-wrapper-1 input[type=radio]:checked {
  background-color: #53E6A1;
  border-color: #53E6A1;
}

.radio-wrapper-1 input[type=radio]:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}

.radio-wrapper-1 input[type=radio]:disabled {
  filter: none;
  opacity: .5;
  pointer-events: none;
}

.radio-wrapper-1 input[type=radio]:disabled ~ label {
  opacity: .5;
}