:root {
  --skeleton-base: #eceef3;
  --skeleton-shine: #f8f9fc;
  --skeleton-border: #e3e6ee;
}

@keyframes skeletonShimmer {
  0% {
    background-position: 120% 50%;
  }

  100% {
    background-position: -120% 50%;
  }
}

@keyframes skeletonSweep {
  0% {
    transform: translateX(-120%);
  }

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

.app-loading {
  cursor: progress !important;
}

/* .app-loading :is(a, button, input, textarea, select) {
  pointer-events: none !important;
} */

.app-loading :is(input, textarea, select) {
  pointer-events: none !important;
}

.app-loading :is(.notification-dropdown, .global-search-results, .logout-button-container, #networkStatusModal) {
  display: none !important;
}

.app-loading .header-logo,
.app-loading .sidebar-logo {
  position: relative;
}

.app-loading .header-logo img,
.app-loading .sidebar-logo img,
.app-loading .header img,
.app-loading .sidebar img,
.app-loading .dashboard-container img,
.app-loading .dashboard-container svg,
.app-loading .footer img {
  opacity: 0 !important;
}

.app-loading .header-logo::before,
.app-loading .sidebar-logo::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(110deg, var(--skeleton-base) 25%, var(--skeleton-shine) 40%, var(--skeleton-base) 55%);
  background-size: 220% 100%;
  animation: skeletonShimmer 1.2s ease-in-out infinite;
}

.app-loading :is(.sidebar-toggle-button,
  .search-box,
  .search-button,
  .toggle-search-button,
  .close-search-button,
  .notification-button,
  .messages-button,
  .profile-picture-container,
  .toggle-user-popup-icon-container,
  .nav-title-icon-container,
  .nav-link.active,
  .sidebar-school-logo-container,
  .sidebar-school-academic-calender-icon-container,
  .sidebar-school-label-icon-container,
  .close-sidebar-school-info-button,
  .dashboard-header-stat,
  .stat-icon-container,
  .stat-graph-track,
  .stat-graph,
  .dashboard-main-left .left .top,
  .dashboard-main-left .left .bottom,
  .dashboard-main-left .right .top,
  .dashboard-main-left .right .bottom,
  .dashboard-main-right .top,
  .dashboard-main-right .bottom,
  .section-body-department-item,
  .subject-item,
  .student-classes-container,
  .student-card,
  .activity-card,
  .action-card,
  .section-body-action-button,
  .activity-icon-container,
  .action-card-icon-container,
  .department-hod-profile-picture-container,
  .subject-item-image-container,
  .class-icon-container,
  .footer .left,
  .footer .right) {
  position: relative;
  overflow: hidden;
  background: var(--skeleton-base) !important;
  border-color: var(--skeleton-border) !important;
  box-shadow: none !important;
  animation: none !important;
}

.app-loading :is(.search-button) {
  position: absolute !important;
}

.app-loading :is(.sidebar-school-logo-container) {
  border-radius: 50%;
}

.app-loading :is(.nav-link) {
  background-color: rgb(248, 248, 250) !important;
  border-color: rgb(251, 251, 251) !important;
  position: relative;
  overflow: hidden;
  box-shadow: none !important;
  animation: none !important;
}



.app-loading :is(.sidebar-toggle-button,
  .search-box,
  .search-button,
  .toggle-search-button,
  .close-search-button,
  .notification-button,
  .messages-button,
  .profile-picture-container,
  .toggle-user-popup-icon-container,
  .nav-title-icon-container,
  .nav-link,
  .sidebar-school-logo-container,
  .sidebar-school-academic-calender-icon-container,
  .sidebar-school-label-icon-container,
  .close-sidebar-school-info-button,
  .dashboard-header-stat,
  .stat-icon-container,
  .stat-graph-track,
  .stat-graph,
  .dashboard-main-left .left .top,
  .dashboard-main-left .left .bottom,
  .dashboard-main-left .right .top,
  .dashboard-main-left .right .bottom,
  .dashboard-main-right .top,
  .dashboard-main-right .bottom,
  .section-body-department-item,
  .subject-item,
  .student-classes-container,
  .student-card,
  .activity-card,
  .action-card,
  .section-body-action-button,
  .activity-icon-container,
  .action-card-icon-container,
  .department-hod-profile-picture-container,
  .subject-item-image-container,
  .class-icon-container,
  .footer .left,
  .footer .right)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,
      rgba(255, 255, 255, 0) 20%,
      rgba(255, 255, 255, 0.72) 48%,
      rgba(255, 255, 255, 0) 78%);
  animation: skeletonSweep 1.2s ease-in-out infinite;
  pointer-events: none;
}


.app-loading :is(.header-logo span,
  .sidebar-logo span,
  .username,
  .user-role,
  .sidebar-school-name,
  .sidebar-school-level,
  .sidebar-school-year,
  .sidebar-school-term,
  .sidebar-school-info span,
  .sidebar-school-motto,
  .stat-header,
  .stat-number,
  .stat-trend,
  .stat-graph-title,
  .section-title,
  .department-name,
  .department-hod-name span,
  .hod-tag,
  .subject-item span,
  .student-class-name,
  .student-class-subject,
  .student-gender-container span,
  .students-performance,
  .activity-message,
  .activity-time span,
  .action-card-message span,
  .action-card-file-name,
  .action-card-assessment-name,
  #sc-total,
  .footer .left,
  .footer .right) {
  color: transparent !important;
  text-shadow: none !important;
  border-color: transparent !important;
  border-radius: 999px !important;
}

.app-loading :is(.header-logo span,
  .sidebar-logo span,
  .username,
  .user-role,
  .sidebar-school-name,
  .sidebar-school-level,
  .sidebar-school-year,
  .sidebar-school-term,
  .sidebar-school-info span,
  .sidebar-school-motto,
  .stat-header,
  .stat-number,
  .stat-trend,
  .stat-graph-title,
  .section-title,
  .department-name,
  .department-hod-name span,
  .hod-tag,
  .subject-item span,
  .student-class-name,
  .student-class-subject,
  .student-gender-container span,
  .students-performance,
  .activity-message,
  .activity-time span,
  .action-card-message span,
  .action-card-file-name,
  .action-card-assessment-name,
  #sc-total,
  .footer .left,
  .footer .right) {
  display: inline-block;
  position: relative;
  overflow: hidden;
  background: var(--skeleton-base) !important;
  animation: none !important;
}

.app-loading :is(.header-logo span,
  .sidebar-logo span,
  .username,
  .user-role,
  .sidebar-school-name,
  .sidebar-school-level,
  .sidebar-school-year,
  .sidebar-school-term,
  .sidebar-school-info span,
  .sidebar-school-motto,
  .stat-header,
  .stat-number,
  .stat-trend,
  .stat-graph-title,
  .section-title,
  .department-name,
  .department-hod-name span,
  .hod-tag,
  .subject-item span,
  .student-class-name,
  .student-class-subject,
  .student-gender-container span,
  .students-performance,
  .activity-message,
  .activity-time span,
  .action-card-message span,
  .action-card-file-name,
  .action-card-assessment-name,
  #sc-total,
  .footer .left,
  .footer .right)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,
      rgba(255, 255, 255, 0) 20%,
      rgba(255, 255, 255, 0.78) 48%,
      rgba(255, 255, 255, 0) 78%);
  animation: skeletonSweep 1.2s ease-in-out infinite;
  pointer-events: none;
}

.app-loading .nav-links-title {
  color: transparent !important;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row-reverse;
}

.app-loading .nav-links-title::after {
  content: "";
  display: block;
  height: 8px;
  width: 78%;
  border-radius: 999px;
  background: linear-gradient(110deg, var(--skeleton-base) 25%, var(--skeleton-shine) 40%, var(--skeleton-base) 55%);
  background-size: 220% 100%;
  animation: skeletonShimmer 1.2s ease-in-out infinite;
}

.app-loading .nav-link {
  color: transparent !important;
  position: relative;
  overflow: hidden;
}

.app-loading .nav-link::before {
  display: none !important;
}

.app-loading .nav-link::after {
  content: "";
  position: absolute;
  left: 14px !important;
  right: 14px !important;
  top: 0px !important;
  bottom: 0px !important;
  transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(110deg, var(--skeleton-base) 25%, var(--skeleton-shine) 40%, var(--skeleton-base) 55%);
  background-size: 220% 100%;
  animation: skeletonShimmer 1.2s ease-in-out infinite;
}

.app-loading .profile-picture {
  color: transparent !important;
}

.app-loading .notification-count,
.app-loading .message-count {
  color: transparent !important;
  background: linear-gradient(110deg, var(--skeleton-base) 25%, var(--skeleton-shine) 40%, var(--skeleton-base) 55%) !important;
  background-size: 220% 100% !important;
  animation: skeletonShimmer 1.2s ease-in-out infinite;
  border-color: var(--skeleton-border) !important;
}

.app-loading .search-box::placeholder {
  color: transparent !important;
}

.app-loading .students-performance-ring {
  opacity: 0 !important;
}

.app-loading .students-performance-container {
  position: relative;
}

.app-loading .students-performance-container::after {
  content: "";
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: linear-gradient(110deg, var(--skeleton-base) 25%, var(--skeleton-shine) 40%, var(--skeleton-base) 55%);
  background-size: 220% 100%;
  animation: skeletonShimmer 1.2s ease-in-out infinite;
}

.app-loading :is(.students-performance) {
  position: absolute !important;
}


.app-loading .section-pagination-button {
  background: var(--skeleton-base) !important;
}

.app-loading .section-pagination-button.active {
  background: var(--skeleton-base) !important;
}

@media (max-width: 900px) {
  .app-loading .nav-links-title::after {
    width: 70%;
  }
}