/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

@media (max-width: 991.98px) {
  .card-statistics .card-header,
  .card-statistics .statistics-body {
    padding: 1.5rem !important;
  }
}

.no-break-word {
  word-wrap: normal;
}

.swiper-codes .swiper-slide {
  height: auto;
}

.challenges-badge {
  border-bottom-right-radius: 0px;
  border-top-left-radius: 0px;
}

.featured-badge {
  border-bottom-left-radius: 0px;
  border-top-right-radius: 0px;
}

.featured-badge-icon {
  width: 1rem !important;
  height: 1rem !important;
  -webkit-animation: pulse 1s linear infinite;
  animation: pulse 1s linear infinite;
}

.chat-app-window .chats .chat-body .chat-username-wrapper {
  margin: 0 0 0.5rem 1rem;
}

.multiavatar svg {
  border-radius: 50%;
}

.multiavatar.avatar-sm svg {
  width: 24px;
  height: 24px;
}

.multiavatar.avatar-lg svg {
  width: 50px;
  height: 50px;
}

.multiavatar.avatar-xl svg {
  width: 70px;
  height: 70px;
}

.multiavatar.avatar-header svg {
  width: 40px;
  height: 40px;
}

.multiavatar.avatar-chat svg {
  width: 32px;
  height: 32px;
}

.multiavatar.avatar-table svg {
  width: 32px;
  height: 32px;
}

.avatar-group .multiavatar svg,
.avatar-group .avatar .avatar-content {
  box-shadow: 0 0 0 2px #ffffff, inset 0 0 0 1px rgba(34, 41, 47, 0.07);
}

table.dataTable {
  margin-top: 0 !important;
}

.main-menu .navbar-header .navbar-brand .brand-text {
  padding-left: 0.5rem;
}

.dark-layout .swiper-codes:not(.swiper-parallax) .swiper-slide {
  background-color: #283046 !important;
}

.dark-layout .blockUI.blockOverlay {
  background-color: #283046 !important;
  opacity: 0.8 !important;
}

.blockUI.blockOverlay {
  background-color: #fff !important;
  opacity: 0.8 !important;
}

.lazyload,
.lazyloading {
  opacity: 0;
}

.lazyloaded {
  opacity: 1;
  transition: opacity 300ms;
}

.card-app {
  margin-bottom: 1rem;
}

.card-app .app-picture {
  width: 50px;
  max-width: 50px;
  height: auto;
}

.card-app .app-title {
  margin-bottom: 0.2rem;
}

.card-app .card-header {
  padding: 0.3rem 0.6rem 0 0;
}

.card-app .btn-apps {
  margin-left: 0.5rem;
}

.card-app .card-text {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  line-height: 1.5em;
}

.card-app .card-text-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.5em;
}

.apps-nav-item {
  white-space: nowrap;
}

.swal-adblock-btn {
  margin: 0.3125em;
}

.modal-app-img {
  width: 100px;
  max-width: 100px;
  height: auto;
}

.pop-card {
  transition: transform 0.2s ease 0s;
  cursor: pointer;
}

.pop-card:hover {
  transform: scale(1.03);
}

.fa-snapchat-ghost {
  -webkit-text-fill-color: white;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: black;
}

.bs-stepper .bs-stepper-content .content .content-header {
  margin-bottom: 1.5rem;
}

@media (max-width: 1200px) {
  .bs-stepper.promo-wizard .bs-stepper-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .bs-stepper.promo-wizard .bs-stepper-header .step .step-trigger {
    padding: 0.5rem 0 !important;
    flex-direction: row;
  }
  .bs-stepper.promo-wizard .bs-stepper-header .line {
    display: none;
  }
  .bs-stepper.promo-wizard.vertical {
    flex-direction: column;
  }
  .bs-stepper.promo-wizard.vertical .bs-stepper-header {
    align-items: flex-start;
  }
  .bs-stepper.promo-wizard.vertical .bs-stepper-content {
    padding-top: 1.5rem;
  }
}

.posts-list-link {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; /* Number of lines displayed before it truncate */
  overflow: hidden;
}

.referral-code-group {
  display: none;
}

.chat-widget .chat-app-window .chat-app-form .input-group-text,
.chat-widget .chat-app-window .chat-app-form .message {
  border: 1px solid #d8d6de;
  padding-left: 1rem !important;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1, 1);
  }
  50% {
    -webkit-transform: scale(1.2, 1.2);
  }
  100% {
    -webkit-transform: scale(1, 1);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2, 1.2);
  }
  100% {
    transform: scale(1, 1);
  }
}

.card-activity-feed .activity-feed-title-icon {
  width: 1.714rem;
  height: 1.714rem;
  margin-right: 1.3rem;
  -webkit-animation: pulse 1s linear infinite;
  animation: pulse 1s linear infinite;
}

.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
  opacity: 0;
  -webkit-backface-visibility: hidden;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.mfp-with-zoom.mfp-ready .mfp-container {
  opacity: 1;
}

.mfp-with-zoom.mfp-ready.mfp-bg {
  opacity: 0.8;
}

.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
  opacity: 0;
}

.swiper-slide-reviews {
  min-height: 200px;
}

.light-layout .brand-light-layout {
  display: block !important; 
  max-width: 180px !important; }

.light-layout .brand-dark-layout {
  display: none !important; 
  max-width: 180px !important; }

.dark-layout .brand-light-layout {
  display: none !important; 
  max-width: 180px !important; }

.dark-layout .brand-dark-layout {
  display: block !important; 
  max-width: 180px !important; }

.mfp-wrap { z-index: 2000 }

.leaderboard-table-weekly {
  table-layout: auto !important;
  width: 100% !important;
}

.leaderboard-table-weekly th,
.leaderboard-table-weekly td {
  white-space: normal !important;
  word-wrap: break-word !important;
  padding-right: 0.5rem !important;
}

.leaderboard-table-weekly tr > th:not(:first-child),
.leaderboard-table-weekly tr > td:not(:first-child) {
    padding-left: 0.5rem !important;
}

/* Stock Vuexy .text-muted (#b9b9c3) is too low-contrast on our light layout, especially in the
   welcome/challenges widgets. Darkened a bit for readability without losing the "secondary text"
   hierarchy. Loads after bootstrap.min.css so it wins the cascade. */
.text-muted {
  color: #7d7d8a !important;
}
/* Offer wall (2026-09-24): the "go/success" elements — Easy badge, the Earn button, the modal
   Reward + Level badges and the Start button — render as washed-out Vuexy mint (#28c76f). Pin
   them to the solid brand green so they read as the primary action; the time pill is toned down
   (inline in Tasks.php) to compensate. Scoped to the wall (.card-app / .modal-primary) so it
   never touches the welcome widget's light-success / text-success. */
.card-app .badge-success,
.card-app .btn-success,
.modal-primary .badge-success,
.modal-primary .btn-success {
  background-color: #099d02 !important;
  border-color: #099d02 !important;
  color: #ffffff !important;
}
.card-app .btn-success:hover,
.card-app .btn-success:focus,
.modal-primary .btn-success:hover,
.modal-primary .btn-success:focus {
  background-color: #077d02 !important;
  border-color: #077d02 !important;
}