/* ===== HEADER SKELETON MODE ===== */
.header.loading * {
  color: transparent !important;
}

.header.loading img,
.header.loading svg {
  opacity: 0;
}

.header.loading .logo,
.header.loading .hdr-pill,
.header.loading .user-avatar,
.header.loading .user-name {
  position: relative;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  overflow: hidden;
}

/* sizes maintain */
.header.loading .logo {
  width: max-content;
}

.header.loading .hdr-pill {
  width: 5em;
  height: 2em;
}

.header.loading .user-avatar {
  width: 2em;
  height: 2em;
}

.header.loading .user-name {
  width: 4.5em;
  height: 1em;
}

.header.loading .hdr-badge {
  background: transparent;
  color: transparent;
}

/* shimmer */
.header.loading .logo::after,
.header.loading .hdr-pill::after,
.header.loading .user-avatar::after,
.header.loading .user-name::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, .5),
      transparent);
  animation: headerShimmer 1.4s infinite;
}

@keyframes headerShimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

/* ===== SKELETON ONLY (NO ORIGINAL CSS TOUCHED) ===== */
/* ===== MOBILE MENU SKELETON ===== */
.loading .mobile-menu-btn {
  position: relative;
  color: transparent !important;
  background: #e5e7eb;
  overflow: hidden;
  border: none;
  box-shadow: none;
  background-color: transparent;
}

/* icon hide */
.loading .mobile-menu-btn i {
  opacity: 0;
}

/* shimmer */
.loading .mobile-menu-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, .6),
      transparent);
  animation: shimmer 1.4s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

/* ===== SKELETON LOADING STATE ===== */
#topRow.loading * {
  color: transparent !important;
}

#topRow.loading i {
  opacity: 0;
}

#topRow.loading button,
#topRow.loading .mode-toggle,
#topRow.loading .page-title,
#topRow.loading .page-sub {
  position: relative;
  overflow: hidden;
  background: #e5e7eb;
  border-radius: 6px;
}

/* shimmer */
#topRow.loading button::after,
#topRow.loading .mode-toggle::after,
#topRow.loading .page-title::after,
#topRow.loading .page-sub::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, .6),
      transparent);
  animation: shimmer 1.4s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

/* ======== welcome-card  start =========*/
/* ===== WELCOME SKELETON (ADD ONLY) ===== */

@keyframes sk-shimmer {
  from {
    background-position: 200% 0;
  }

  to {
    background-position: -200% 0;
  }
}

.welcome.loading .welcome-badge,
.welcome.loading .welcome-text h2,
.welcome.loading .welcome-text p,
.welcome.loading .actions .btn {
  color: transparent !important;
  position: relative;
  pointer-events: none;
  background: transparent;
  border: none;
  box-shadow: none;
}

.welcome.loading .welcome-badge::after,
.welcome.loading .welcome-text h2::after,
.welcome.loading .welcome-text p::after,
.welcome.loading .actions .btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, .18) 25%,
      rgba(255, 255, 255, .35) 50%,
      rgba(255, 255, 255, .18) 75%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.4s infinite ease-in-out;
  border-radius: 6px;
  border: none;
  box-shadow: none;
}

/* icon hide */
.welcome.loading .welcome-badge i,
.welcome.loading .actions i {
  opacity: 0;
  background: transparent;
  border-radius: 0;
}

/* better line widths */
.welcome.loading .welcome-text h2 {
  min-height: 1.6em;
  width: 22em;
  background: transparent;
}

.welcome.loading .welcome-text p {
  min-height: 1.2em;
  max-width: 36em;
  background: transparent;
}

.welcome.loading .actions .btn {
  min-height: 2.7em;
  background: transparent;
  border-radius: 0;
  border: none;
  box-shadow: none;
}

/* ======== welcome-card  end =========*/

@keyframes sk-shimmer {
  from {
    background-position: 200% 0;
  }

  to {
    background-position: -200% 0;
  }
}

.stats-grid.loading .stat-label,
.stats-grid.loading .stat-value,
.stats-grid.loading .stat-foot span,
.stats-grid.loading .stat-icon {
  color: transparent !important;
  position: relative;
  pointer-events: none;
  border: none;
  box-shadow: none;
  background: #e5e7eb;
}

.stats-grid.loading .stat-label::after,
.stats-grid.loading .stat-value::after,
.stats-grid.loading .stat-foot span::after,
.stats-grid.loading .stat-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      #e0e0e0 25%,
      #f5f5f5 50%,
      #e0e0e0 75%);
  background: linear-gradient(90deg,
      rgba(255, 255, 255, .18) 25%,
      rgba(255, 255, 255, .35) 50%,
      rgba(255, 255, 255, .18) 75%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.4s infinite ease-in-out;
  border-radius: 6px;
}

.stats-grid.loading .stat-icon i {
  opacity: 0;
}


/* type-grid */
/* ===== TYPES GRID SKELETON (ADD ONLY) ===== */

@keyframes sk-shimmer {
  from {
    background-position: 200% 0;
  }

  to {
    background-position: -200% 0;
  }
}

.types-grid.loading .type-title-badge,
.types-grid.loading .type-desc,
.types-grid.loading .type-badge,
.types-grid.loading .type-icon-circle,
.types-grid.loading .mini-kpi .k,
.types-grid.loading .mini-kpi .v,
.types-grid.loading .type-actions .btn {
  color: transparent !important;
  position: relative;
  pointer-events: none;
  border: none;
  box-shadow: none;
  background-color: transparent;
}

.types-grid.loading .type-title-badge::after,
.types-grid.loading .type-desc::after,
.types-grid.loading .type-badge::after,
.types-grid.loading .type-icon-circle::after,
.types-grid.loading .mini-kpi .k::after,
.types-grid.loading .mini-kpi .v::after,
.types-grid.loading .type-actions .btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      #e0e0e0 25%,
      #f5f5f5 50%,
      #e0e0e0 75%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.4s infinite ease-in-out;
  border-radius: 6px;
  border: none;
  box-shadow: none;
}

.types-grid.loading .type-icon-circle i {
  opacity: 0;
}

/* ===== GRID + CARDS SKELETON ===== */
.grid-2.loading * {
  color: transparent !important;
}

.grid-2.loading i,
.grid-2.loading canvas {
  opacity: 0;
}

/* blocks */
.grid-2.loading .card-head h3,
.grid-2.loading .select,
.grid-2.loading .chart-wrap,
.grid-2.loading .qa-btn,
.grid-2.loading .qa-ico,
.grid-2.loading .qa-t,
.grid-2.loading .qa-s,
.grid-2.loading .qa-right i,
.grid-2.loading .act-ico,
.grid-2.loading .act-time,
.grid-2.loading .act-title,
.grid-2.loading .act-meta,
.grid-2.loading .vertical-legend span,
.grid-2.loading .legend span {
  position: relative;
  background: #e5e7eb;
  border-radius: 1em;
  overflow: hidden;
  border: none;
  box-shadow: none;
}

.grid-2.loading .qa-btn {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* sizes maintain */
.grid-2.loading .card-head h3 {
  width: 14em;
  height: 1.4em;
}

.grid-2.loading .btn {
  background: #e5e7eb;
  position: relative;
  border-radius: 1em;
  overflow: hidden;
  border: none;
  box-shadow: none;
}

.grid-2.loading .select {
  width: 7em;
  height: 2.1em;
}

.grid-2.loading .chart-wrap {
  min-height: 18em;
}

.grid-2.loading .qa-btn {
  height: 4.2em;
  border: none;
  box-shadow: none;
}

/* shimmer */
.grid-2.loading .btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, .6),
      transparent);
  animation: shimmer 1.4s infinite;
}

.grid-2.loading .card-head h3::after,
.grid-2.loading .select::after,
.grid-2.loading .chart-wrap::after,
.grid-2.loading .qa-btn::after,
.grid-2.loading .qa-ico::after,
.grid-2.loading .qa-t::after,
.grid-2.loading .qa-s::after,
.grid-2.loading .qa-right i::after,
.grid-2.loading .act-ico::after,
.grid-2.loading .act-time::after,
.grid-2.loading .act-title::after,
.grid-2.loading .act-meta::after,
.grid-2.loading .vertical-legend span::after,
.grid-2.loading .legend span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, .6),
      transparent);
  animation: shimmer 1.4s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

/* ===== TABLE SKELETON ===== */
.card.loading * {
  color: transparent !important;
}

.card.loading {
  position: relative;
  overflow: hidden;
}

.card.loading table {
  position: relative;
  overflow: hidden;
}

.card.loading i {
  opacity: 0;
}

/* header */
.card.loading .card-head h3 {
  width: 10em;
  height: 1.3em;
  background: #e5e7eb;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}

/* filter buttons */
.card.loading .card-head .btn {
  width: 6em;
  height: 2.2em;
  background: #e5e7eb;
  border-radius: 999px;
  border: none;
  box-shadow: none;
}

/* table rows */
.card.loading th,
.card.loading td {
  position: relative;
}

.card.loading td::before,
.card.loading th::before {
  content: "";
  display: block;
  width: 100%;
  height: 1em;
  background: #e5e7eb;
  border-radius: 4px;
}

/* status pill */
.card.loading .status {
  background: #e5e7eb !important;
  border-color: transparent !important;
}

/* shimmer */
.card.loading .card-head h3::after,
.card.loading .btn::after,
.card.loading td::after,
.card.loading th::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, .6),
      transparent);
  animation: shimmer 1.4s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

.bottom-nav.loading .nav-item .mobile-nav-icon,
.bottom-nav.loading .nav-item .nav-label,
.bottom-nav.loading .user-info .user-avatar {
  position: relative;
  background: #e5e7eb;
  border-radius: 1em;
  overflow: hidden;
  color: transparent;
}

.bottom-nav.loading .nav-item .mobile-nav-icon image {
  display: none;
}

.bottom-nav.loading .nav-item .nav-label {
  width: 4em;
}

.bottom-nav.loading .nav-item .mobile-nav-icon svg,
.bottom-nav.loading .nav-item .nav-badge {
  background: #e5e7eb;
  overflow: hidden;
  color: transparent;
}

.bottom-nav.loading .nav-item .mobile-nav-icon::after,
.bottom-nav.loading .nav-item .nav-label::after,
.bottom-nav.loading .nav-item .mobile-nav-icon::after,
.bottom-nav.loading .nav-item .nav-label::after,
.bottom-nav.loading .user-info .user-avatar::after,
.bottom-nav.loading .nav-item .mobile-nav-icon svg::after,
.bottom-nav.loading .nav-item .nav-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, .6),
      transparent);
  animation: shimmer 1.4s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

/* =====================================
   UNIVERSAL SKELETON ANIMATION
   (BALANCE + SUMMARY SAME STYLE)
   ===================================== */

@keyframes skeleton-loading {

  0% {
    background-position: -800px 0;
  }

  100% {
    background-position: 800px 0;
  }

}

/* =====================================
   TOP TABS SKELETON
   ===================================== */

.top-tabs.loading .item-label,
.top-tabs.loading .nav-icon {

  color: transparent !important;
  /* hide text/icon */

  position: relative;

  overflow: hidden;

  width: max-content;
  height: max-content;
  border-color: transparent;

}

.top-tabs.loading .top-tab {
  border-color: transparent;
}

/* shimmer layer */

.top-tabs.loading .item-label::after,
.top-tabs.loading .nav-icon::after {

  content: "";

  position: absolute;

  inset: 0;

  border-radius: 0.4em;

  background: linear-gradient(90deg,
      #e0e0e0 25%,
      #f5f5f5 37%,
      #e0e0e0 63%);

  background-size: 800px 100%;

  animation: skeleton-loading 2s infinite linear;

}

/* =====================================
   SIDE NAV SKELETON
   ===================================== */
.side-nav.loading .nav-label,
.side-nav.loading .nav-icon {

  color: transparent !important;
  /* hide text/icon */

  position: relative;

  overflow: hidden;

  width: max-content;
  height: max-content;

}


/* shimmer overlay */
.side-nav.loading .nav-label::after,
.side-nav.loading .nav-icon::after {

  content: "";

  position: absolute;

  inset: 0;

  border-radius: 0.4em;

  background: linear-gradient(90deg,
      #e0e0e0 25%,
      #f5f5f5 37%,
      #e0e0e0 63%);

  background-size: 800px 100%;

  animation: skeleton-loading 2.4s infinite cubic-bezier(0.4, 0, 0.2, 1);

}

/* =====================================
   HIDE ORIGINAL CONTENT
   ===================================== */

.balance-card.skeleton .balance-label,
.balance-card.skeleton .balance-amount,
.balance-card.skeleton .balance-date span,
.balance-card.skeleton .date-icon,

.summary-card.skeleton .summary-label,
.summary-card.skeleton .summary-value,
.summary-card.skeleton .summary-card-icon {

  color: transparent;

  position: relative;

  overflow: hidden;

  width: max-content;

  height: max-content;

}


/* keep summary icon exact position */

.summary-card.skeleton .summary-card-icon {

  position: absolute;

  right: 1em;

  top: 1em;

  width: 2.2em;

  height: 2.2em;

}


/* =====================================
   SKELETON SHIMMER LAYER
   ===================================== */

.balance-card.skeleton .balance-label::after,
.balance-card.skeleton .balance-amount::after,
.balance-card.skeleton .balance-date span::after,
.balance-card.skeleton .date-icon::after,

.summary-card.skeleton .summary-label::after,
.summary-card.skeleton .summary-value::after,
.summary-card.skeleton .summary-card-icon::after {

  content: "";

  position: absolute;

  inset: 0;

  border-radius: 0.4em;

  background: linear-gradient(90deg,
      #e0e0e0 25%,
      #f5f5f5 37%,
      #e0e0e0 63%);

  background-size: 800px 100%;
  animation: skeleton-loading 2s infinite linear;

}


/* keep icons round */

.balance-card.skeleton .date-icon::after,
.summary-card.skeleton .summary-card-icon::after {

  border-radius: 50%;

}



/* =============================
   TRANSACTION SKELETON
   SAME AS SUMMARY-CARD STYLE
   ============================= */

.transaction-container.loading .section-header span,
.transaction-card.loading .transaction-type,
.transaction-card.loading .transaction-id,
.transaction-card.loading .transaction-amount,
.transaction-card.loading .transaction-date,
.transaction-card.loading .status-badge,
.action-button.loading button {

  color: transparent !important;

  position: relative;

  overflow: hidden;
  height: max-content;
  width: max-content;
  background-color: transparent;

}


/* shimmer layer */

.transaction-container.loading .section-header span::after,
.transaction-card.loading .transaction-type::after,
.transaction-card.loading .transaction-id::after,
.transaction-card.loading .transaction-amount::after,
.transaction-card.loading .transaction-date::after,
.transaction-card.loading .status-badge::after,
.action-button.loading button::after {

  content: "";

  position: absolute;

  inset: 0;

  border-radius: 0.4em;

  background: linear-gradient(90deg,
      #e0e0e0 25%,
      #f5f5f5 37%,
      #e0e0e0 63%);

  background-size: 800px 100%;

  animation: skeleton-loading 2s infinite linear;

}


/* keep badge round */

.transaction-card.loading .status-badge::after {

  border-radius: 2em;

}


/* keep button shape */

.action-button.loading button::after {

  border-radius: 3em;

}

@keyframes skeleton-loading {

  0% {
    background-position: -800px 0;
  }

  100% {
    background-position: 800px 0;
  }

}

/* =========================
   SKELETON ONLY FOR HEADER
========================= */

.loading .back-button,
.loading .page-title,
.loading .pill-btn {
  position: relative;
  color: transparent !important;
  border-color: transparent !important;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
  border: none;
  box-shadow: none;
  background-color: transparent;
}


/* shimmer layer */
.loading .back-button::after,
.loading .page-title::after,
.loading .pill-btn::after {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(90deg,
      #eeeeee 25%,
      #dddddd 37%,
      #eeeeee 63%);

  background-size: 800px 100%;
  animation: skeleton-loading 2.2s infinite linear;
}


/* keep round shapes */
.loading .back-button::after,
.loading .pill-btn::after {
  border-radius: 62.5em;
}

.loading .page-title::after {
  border-radius: 0.4em;
}


/* animation */
@keyframes skeleton-loading {

  0% {
    background-position: -800px 0;
  }

  100% {
    background-position: 800px 0;
  }

}

/* =============================
   AD ITEM SKELETON
============================= */

.ad-item.loading * {
  color: transparent !important;
  border-color: transparent !important;
}

.ad-item.loading img {
  opacity: 0;
}

.ad-item.loading .ad-image,
.ads-section.loading .section-header span,
.ad-item.loading .ad-title,
.ad-item.loading .badge,
.ad-item.loading .ad-meta span,
.ad-item.loading .ad-dates div,
.ad-item.loading .btn,
.ad-item.loading .status-badge,
.ad-item.loading .image-count {
  position: relative;
  overflow: hidden;
  border: none;
  box-shadow: none;
  background-color: transparent;
}


/* shimmer layer */

.ad-item.loading .ad-image::after,
.ad-item.loading .ad-title::after,
.ad-item.loading .badge::after,
.ad-item.loading .ad-meta span::after,
.ad-item.loading .ad-dates div::after,
.ad-item.loading .btn::after,
.ad-item.loading .status-badge::after,
.ad-item.loading .image-count::after,
.ads-section.loading .section-header span::after {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(90deg,
      #eeeeee 25%,
      #dddddd 37%,
      #eeeeee 63%);

  background-size: 800px 100%;

  animation: skeleton-loading 2.2s infinite linear;

}


/* keep proper shapes */

.ad-item.loading .ad-image::after {
  border-radius: 1.1em;
}

.ad-item.loading .badge::after,
.ad-item.loading .btn::after,
.ad-item.loading .status-badge::after {
  border-radius: 62.5em;
}

.ad-item.loading .image-count::after {
  border-radius: 0.75em;
}

.ad-item.loading .ad-title::after,
.ad-item.loading .ad-meta span::after,
.ad-item.loading .ad-dates div::after {
  border-radius: 0.4em;
}


/* animation */

@keyframes skeleton-loading {

  0% {
    background-position: -800px 0;
  }

  100% {
    background-position: 800px 0;
  }

}


/* =============================
PROFILE CARD SKELETON
============================= */

.profile-card.loading * {
  color: transparent !important;
  border-color: transparent !important;
}

.profile-card.loading input,
.profile-card.loading select {
  color: transparent !important;
}


/* skeleton base */

.profile-card.loading h2,
.profile-card.loading h4,
.profile-card.loading label,
.profile-card.loading input,
.profile-card.loading select,
.profile-card.loading .radio-group label,
.profile-card.loading .btn,
.profile-card.loading .info {
  background-color: #dddddd;
  color: transparent;
  border-color: transparent;
  position: relative;
  overflow: hidden;
  width: max-content;
  height: max-content;
  border: none;
  box-shadow: none;
}

.profile-card.loading input::placeholder {
  color: transparent;
}

.profile-card.loading input,
.profile-card.loading select {
  width: 100%;
}

/* shimmer layer */

.profile-card.loading h2::after,
.profile-card.loading h4::after,
.profile-card.loading label::after,
.profile-card.loading input::after,
.profile-card.loading select::after,
.profile-card.loading .radio-group label::after,
.profile-card.loading .btn::after,
.profile-card.loading .info::after {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(90deg,
      #eeeeee 25%,
      #dddddd 37%,
      #eeeeee 63%);

  background-size: 800px 100%;

  animation: skeleton-loading 2.2s infinite linear;

  border-radius: 0.5em;

}


/* input height fix */

.profile-card.loading input,
.profile-card.loading select {

  height: 2.8em;

}


/* button shape */

.profile-card.loading .btn::after {

  border-radius: 3em;

}


/* radio circle */

.profile-card.loading input[type="radio"]::after {

  border-radius: 50%;

}


/* animation */

@keyframes skeleton-loading {

  0% {
    background-position: -800px 0;
  }

  100% {
    background-position: 800px 0;
  }

}

.profile-card * {
  transition: all .25s ease;
}
.loading button{
  background-color: transparent;
}
/* =============================
SIDEBAR SKELETON
============================= */

.sidebar.loading *{
    color: transparent !important;
    border-color: transparent !important;
}

/* base elements */
.sidebar.loading .section-header span,
.sidebar.loading .sb-label,
.sidebar.loading .sb-item i,
.sidebar.loading .sb-item span,
.sidebar.loading .sb-text,
.sidebar.loading .sb-count,
.sidebar.loading .sb-icon{
    position: relative;
    overflow: hidden;
}

/* shimmer layer */

.sidebar.loading .section-header span::after,
.sidebar.loading .sb-label::after,
.sidebar.loading .sb-text::after,
.sidebar.loading .sb-count::after,
.sidebar.loading .sb-icon::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:.4em;

    background:linear-gradient(
        90deg,
        #eeeeee 25%,
        #dddddd 37%,
        #eeeeee 63%
    );

    background-size:800px 100%;
    animation:skeleton-loading 2.2s infinite linear;
}

/* item full row skeleton */
.sidebar.loading .sb-item i::after,
.sidebar.loading .sb-item span::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:.6em;

    background:linear-gradient(
        90deg,
        #eeeeee 25%,
        #dddddd 37%,
        #eeeeee 63%
    );

    background-size:800px 100%;
    animation:skeleton-loading 2.2s infinite linear;
}

/* icon circle look */
.sidebar.loading .sb-icon::after{
    border-radius:50%;
}

/* count pill shape */
.sidebar.loading .sb-count::after{
    border-radius:62.5em;
}

/* animation */
@keyframes skeleton-loading{
    0%{
        background-position:-800px 0;
    }
    100%{
        background-position:800px 0;
    }
}
/* =============================
   TOOLBAR SKELETON
============================= */

.toolbar.loading *{
    color: transparent !important;
    border-color: transparent !important;
}

/* base elements */
.toolbar.loading .tab,
.toolbar.loading .tab .tc,
.toolbar.loading .sort-sel,
.toolbar.loading .vb,
.ads-section.loading .vb,
.ads-section.loading .vb.active,
.toolbar.loading .vb.active,
.toolbar.loading .vsep{
    position: relative;
    overflow: hidden;
    border-color: transparent !important;
        background:linear-gradient(
        90deg,
        #eeeeee 25%,
        #dddddd 37%,
        #eeeeee 63%
    );
}

/* shimmer layer */

.toolbar.loading .tab::after,
.toolbar.loading .tab .tc::after,
.toolbar.loading .sort-sel::after,
.toolbar.loading .vb::after,
.ads-section.loading .vb::after,
.ads-section.loading .vb.active::after,
.toolbar.loading .vb.active::after,
.toolbar.loading .vsep::after{

    content:"";
    position:absolute;
    inset:0;
    border-radius:.4em;

    background:linear-gradient(
        90deg,
        #eeeeee 25%,
        #dddddd 37%,
        #eeeeee 63%
    );

    background-size:800px 100%;
    animation:skeleton-loading 2.2s infinite linear;
}
.toolbar.loading .sort-sel{
  background-color: #eee;
}
/* pill look for tab count */
.ads-section.loading .tab .tc::after,
.toolbar.loading .tab .tc::after{
    border-radius:62.5em;
}

/* square view buttons */
.toolbar.loading .vb::after,
.ads-section.loading .vb::after{
    border-radius:.45em;
}

/* animation */
@keyframes skeleton-loading{
    0%{
        background-position:-800px 0;
    }
    100%{
        background-position:800px 0;
    }
}

/* =========================
   ADS CARD SKELETON
========================= */

.main-panel.loading .ads-grid .ad-card *{
    color: transparent !important;
}

.main-panel.loading .ads-grid .ad-card{
    pointer-events:none;
}

/* shimmer base */

.ad-list-container.loading .ads-grid .c-img,
.ad-list-container.loading .ads-grid .c-title,
.ad-list-container.loading .ads-grid .c-line,
.ad-list-container.loading .ads-grid .mc-cat svg,
.ad-list-container.loading .ads-grid .mc-cat span,
.ad-list-container.loading .ads-grid .mc-post-date svg,
.ad-list-container.loading .ads-grid .mc-post-date span,
.ad-list-container.loading .ads-grid .c-loc,
.ad-list-container.loading .ads-grid .mc-tag,
.ad-list-container.loading .ads-grid .mc-price,
.ad-list-container.loading .ads-grid .c-badges span,
.ad-list-container.loading .ads-grid .star-rating,
.pag.loading .pg-btn{
    position:relative;
    overflow:hidden;
}
.main-panel.loading .ads-grid .c-img,
.main-panel.loading .ads-grid .c-title,
.main-panel.loading .ads-grid .c-line,
.main-panel.loading .ads-grid .mc-cat svg,
.main-panel.loading .ads-grid .mc-cat span,
.main-panel.loading .ads-grid .mc-post-date svg,
.main-panel.loading .ads-grid .mc-post-date span,
.main-panel.loading .ads-grid .c-loc,
.main-panel.loading .ads-grid .mc-tag,
.main-panel.loading .ads-grid .mc-price,
.main-panel.loading .ads-grid .c-badges span,
.main-panel.loading .ads-grid .star-rating,
.pag.loading .pg-btn{
    position:relative;
    overflow:hidden;
}

.main-panel.loading .ad-list-card .c-img,
.main-panel.loading .ad-list-card .c-title,
.main-panel.loading .ad-list-card .c-line,
.main-panel.loading .ad-list-card .mc-cat svg,
.main-panel.loading .ad-list-card .mc-cat span,
.main-panel.loading .ad-list-card .mc-post-date svg,
.main-panel.loading .ad-list-card .mc-post-date span,
.main-panel.loading .ad-list-card .c-loc,
.main-panel.loading .ad-list-card .mc-tag,
.main-panel.loading .ad-list-card .mc-price,
.main-panel.loading .ad-list-card .c-badges span,
.main-panel.loading .ad-list-card .star-rating{
    position:relative;
    overflow:hidden;
    color: transparent;
    border-color: transparent;
}
.ad-list-container.loading .ad-list-card .c-img,
.ad-list-container.loading .ad-list-card .c-title,
.ad-list-container.loading .ad-list-card .c-line,
.ad-list-container.loading .ad-list-card .mc-cat svg,
.ad-list-container.loading .ad-list-card .mc-cat span,
.ad-list-container.loading .ad-list-card .mc-post-date svg,
.ad-list-container.loading .ad-list-card .mc-post-date span,
.ad-list-container.loading .ad-list-card .c-loc,
.ad-list-container.loading .ad-list-card .mc-tag,
.ads-section.loading .ad-dates div,
.ads-section.loading .status-badge,
.ads-section.loading .badge,
.ad-list-container.loading .ad-list-card .mc-price,
.ad-list-container.loading .ad-list-card .status-badge,
.ad-list-container.loading .ad-list-card .c-badges span,
.ad-list-container.loading .ad-list-card .star-rating{
    position:relative;
    overflow:hidden;
    color: transparent;
    border-color: transparent;
}

/* shimmer layer */

.pag.loading .pg-btn.active{
    position: relative;
    overflow: hidden;
    border-color: transparent !important;
        background:linear-gradient(
        90deg,
        #eeeeee 25%,
        #dddddd 37%,
        #eeeeee 63%
    );
}
.pag.loading .pg-btn::before,
.main-panel.loading .ads-grid .c-img::before,
.main-panel.loading .ads-grid .c-title::before,
.main-panel.loading .ads-grid .c-line::before,
.main-panel.loading .ads-grid .mc-cat svg::before,
.main-panel.loading .ads-grid .mc-cat span::before,
.main-panel.loading .ads-grid .mc-post-date svg::before,
.main-panel.loading .ads-grid .mc-post-date span::before,
.main-panel.loading .ads-grid .c-loc::before,
.main-panel.loading .ads-grid .mc-tag::before,
.main-panel.loading .ads-grid .mc-price::before,
.main-panel.loading .ads-grid .c-badges span::before,
.main-panel.loading .ads-grid .star-rating::before{

    content:"";
    position:absolute;
    inset:0;

    background:linear-gradient(
        90deg,
        #eeeeee 25%,
        #dddddd 37%,
        #eeeeee 63%
    );

    background-size:900px 100%;
    animation:skeleton-loading 2.4s infinite linear;
    border-color: transparent !important;
}
.pag.loading .pg-btn::before,
.ad-list-container.loading .ads-grid .c-img::before,
.ad-list-container.loading .ads-grid .c-title::before,
.ad-list-container.loading .ads-grid .c-line::before,
.ad-list-container.loading .ads-grid .mc-cat svg::before,
.ad-list-container.loading .ads-grid .mc-cat span::before,
.ad-list-container.loading .ads-grid .mc-post-date svg::before,
.ad-list-container.loading .ads-grid .mc-post-date span::before,
.ad-list-container.loading .ads-grid .c-loc::before,
.ad-list-container.loading .ads-grid .mc-tag::before,
.ad-list-container.loading .ads-grid .mc-price::before,
.ad-list-container.loading .ads-grid .c-badges span::before,
.ads-section.loading .ad-dates div::before,
.ads-section.loading .status-badge::before,
.ads-section.loading .badge::before,
.ad-list-container.loading .ads-grid .star-rating::before{
  width: auto;
    content:"";
    position:absolute;
    inset:0;

    background:linear-gradient(
        90deg,
        #eeeeee 25%,
        #dddddd 37%,
        #eeeeee 63%
    );

    background-size:900px 100%;
    animation:skeleton-loading 2.4s infinite linear;
    border-color: transparent !important;
}
.main-panel.loading .ad-list-card .c-img::before,
.main-panel.loading .ad-list-card .c-title::before,
.main-panel.loading .ad-list-card .c-line::before,
.main-panel.loading .ad-list-card .mc-cat svg::before,
.main-panel.loading .ad-list-card .mc-cat span::before,
.main-panel.loading .ad-list-card .mc-post-date svg::before,
.main-panel.loading .ad-list-card .mc-post-date span::before,
.main-panel.loading .ad-list-card .c-loc::before,
.main-panel.loading .ad-list-card .mc-tag::before,
.main-panel.loading .ad-list-card .mc-price::before,
.main-panel.loading .ad-list-card .c-badges span::before,
.main-panel.loading .ad-list-card .star-rating::before{

    content:"";
    position:absolute;
    inset:0;

    background:linear-gradient(
        90deg,
        #eeeeee 25%,
        #dddddd 37%,
        #eeeeee 63%
    );

    background-size:900px 100%;
    animation:skeleton-loading 2.4s infinite linear;
    border-color: transparent !important;
}
.ad-list-container.loading .ad-list-card .c-img::before,
.ad-list-container.loading .ad-list-card .c-title::before,
.ad-list-container.loading .ad-list-card .c-line::before,
.ad-list-container.loading .ad-list-card .mc-cat svg::before,
.ad-list-container.loading .ad-list-card .mc-cat span::before,
.ad-list-container.loading .ad-list-card .mc-post-date svg::before,
.ad-list-container.loading .ad-list-card .mc-post-date span::before,
.ad-list-container.loading .ad-list-card .c-loc::before,
.ad-list-container.loading .ad-list-card .mc-tag::before,
.ad-list-container.loading .ad-list-card .mc-price::before,
.ad-list-container.loading .ad-list-card .status-badge::before,
.ad-list-container.loading .ad-list-card .c-badges span::before,
.ad-list-container.loading .ad-list-card .star-rating::before{

    content:"";
    position:absolute;
    inset:0;

    background:linear-gradient(
        90deg,
        #eeeeee 25%,
        #dddddd 37%,
        #eeeeee 63%
    );

    background-size:900px 100%;
    animation:skeleton-loading 2.4s infinite linear;
    border-color: transparent !important;
}

/* image height maintain */

.ad-list-container.loading.loading .ads-grid .c-img,
.main-panel.loading .ads-grid .c-img,
.ad-list-container.loading .ads-grid .c-img,
.main-panel.loading .ad-list-card .c-img{
    background:#eee;
}
.ad-list-container.loading.loading .ad-list-card .c-img button,
.main-panel.loading .ad-list-card button,
.ad-list-container.loading .ads-grid button,
.main-panel.loading .ads-grid button{
      position:absolute;
    /* overflow:hidden; */
        background:#eee;
        border-radius: 50%;
}
.ad-list-container.loading .ads-grid button{
  position: relative;
}
.ad-list-container.loading .ad-list-card .c-img button::before,
.main-panel.loading .ad-list-card button::before,
.ad-list-container.loading .ads-grid button::before,
.main-panel.loading .ads-grid button::before{
border-radius: 50%;
    content:"";
    position:absolute;
    inset:0;

    background:linear-gradient(
        90deg,
        #eeeeee 25%,
        #dddddd 37%,
        #eeeeee 63%
    );

    background-size:900px 100%;
    animation:skeleton-loading 2.4s infinite linear;
}
.ad-list-container.loading.loading .ad-list-card svg,
.main-panel.loading .ad-list-card svg,
.ads-section.loading .ads-grid svg,
.main-panel.loading .ads-grid svg{
      background:#eee;
      color: transparent;
}
.ads-section.loading .hbtn{
  position: relative;
}
.ads-section.loading .hbtn::before{
  content:"";
    position: absolute;
  background-color: #dddddd;
  color: #dddddd;
  overflow: hidden;
  border-radius: 50%;
}
/* title width */

.ad-list-container.loading.loading .ad-list-card .c-title,
.main-panel.loading .ad-list-card .c-title,
.main-panel.loading .ads-grid .c-title{
    height:1.2em;
    width:70%;
    border-radius:.3em;
}

/* line */

.main-panel.loading .ads-grid .c-line{
   margin-top: 0.2em;
}

/* footer */

.main-panel.loading .ads-grid .mc-price{
    height:1em;
    width:5em;
}

.main-panel.loading .ads-grid .star-rating{
    height:1em;
    width:6em;
}
.main-panel.loading .ad-list-card .c-line{
   margin-top: 0.2em;
}

/* footer */

.main-panel.loading .ad-list-card .mc-price{
    height:1em;
    width:5em;
}

.main-panel.loading .ad-list-card .star-rating{
    height:1em;
    width:6em;
}
.ad-list-container.loading.loading .ad-list-card .c-line{
   margin-top: 0.2em;
}

/* footer */

.ad-list-container.loading.loading .ad-list-card .mc-price{
    height:1em;
    width:5em;
}

.ad-list-container.loading.loading .ad-list-card .star-rating{
    height:1em;
    width:6em;
}

/* animation */

@keyframes skeleton-loading{
    0%{
        background-position:-900px 0;
    }
    100%{
        background-position:900px 0;
    }
}
/* =========================
   ACTIVITY CARD SKELETON
========================= */

.card.loading *{
    color:transparent !important;
}

/* skeleton elements */

.card.loading .act-ico,
.card.loading .act-title,
.card.loading .act-meta,
.card.loading .act-time,
.card.loading .btn,
.card.loading .card-head h3{
    position:relative;
    overflow:hidden;
}

/* shimmer layer */

.card.loading .act-ico::after,
.card.loading .act-title::after,
.card.loading .act-meta::after,
.card.loading .act-time::after,
.card.loading .btn::after,
.card.loading .card-head h3::after{

    content:"";
    position:absolute;
    inset:0;
    border-radius:.4em;

    background:linear-gradient(
        90deg,
        #eeeeee 25%,
        #dddddd 37%,
        #eeeeee 63%
    );

    background-size:800px 100%;
    animation:skeleton-loading 2.2s infinite linear;
}

/* icon shape */

.card.loading .act-ico::after{
    border-radius:.875em;
}

/* title size */

.card.loading .act-title{
    height:1em;
    width:12em;
}

/* meta line */

.card.loading .act-meta{
    height:.8em;
    width:16em;
    margin-top:.3em;
}

/* time */

.card.loading .act-time{
    height:.8em;
    width:4em;
}

/* animation */

@keyframes skeleton-loading{
    0%{
        background-position:-800px 0;
    }
    100%{
        background-position:800px 0;
    }
}