@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}

.skeleton-app {
  pointer-events: none;
}

.skeleton-app .app-icon {
  width: 40px;
  height: 40px;
  border-radius: 50% 50%;
  animation: 2s ease-in-out .5s infinite pulse;
}

.skeleton-app:nth-of-type(1) .app-icon,
.skeleton-app:nth-of-type(9) .app-icon {
  background-color: #f3d9d8;
}

.skeleton-app:nth-of-type(2) .app-icon,
.skeleton-app:nth-of-type(4) .app-icon {
  background-color: #e2dcf4;
}

.skeleton-app:nth-of-type(3) .app-icon {
  background-color: #d8e8f5;
}

.skeleton-app:nth-of-type(5) .app-icon {
  background-color: #dcdcdc;
}

.skeleton-app:nth-of-type(7) .app-icon {
  background-color: #ffede4;
}

.skeleton-app:nth-of-type(6) .app-icon,
.skeleton-app:nth-of-type(8) .app-icon {
  background-color: #ccf6e5;
}

.skeleton-app .app-name {
  width: 80px;
  height: 16px;
  border-radius: 10px;
  background-color: #f0f0f0;
  margin-top: 8px;
  animation: 2s ease-in-out .5s infinite pulse;
}

.overlay-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 24px;
  background: #5F5F5FCC;
  border-radius: 90px;
  z-index: 900;
  font-size: 16px;
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
}
