* {
  box-sizing: border-box;
}

.skeleton-item {
  background: #ededed;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.skeleton-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
  animation: shimmer 2s infinite;
}

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

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

.skeleton-row {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 32px 0 0;
  display: flex;
  gap: 16px;
}

.skeleton-content {
  flex: 2;
}

.skeleton-sidebar {
  flex: 1;
}

.skeleton-loader {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.skeleton-block {
  background: white;
  padding: 24px 16px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.skeleton-loader2 {
  background: white;
  padding: 16px 16px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 94px 16px 0;
}

.skeleton-first-block {
  display: flex;
  flex-direction: column;
}

@media (max-width: 1023px) {
  #appCheckout {
    background: white;
  }

  .skeleton-row {
    flex-direction: column;
    padding: 48px 16px 16px 16px;
    gap: 24px;
  }

  .skeleton-content,
  .skeleton-sidebar {
    flex: 1;
  }

  .skeleton-loader {
    gap: 24px;
  }

  .skeleton-block {
    padding: 20px 0;
    border: none;
    background: transparent;
  }

  .skeleton-loader2 {
    margin: 0;
    padding: 16px 0;
    border: none;
    background: transparent;
  }

  .skeleton-first-block .skeleton-title {
    height: 32px !important;
    width: 160px !important;
    margin-top: 8px !important;
    margin-bottom: 12px !important;
  }

  .skeleton-first-block .skeleton-subtitle {
    height: 20px !important;
    width: 220px !important;
    margin-bottom: 16px !important;
  }

  .skeleton-first-block .skeleton-info {
    height: 60px !important;
    width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
  }

  .skeleton-first-block .skeleton-buttons {
    height: 48px !important;
    width: 100% !important;
    margin-bottom: 12px !important;
  }

  .skeleton-first-block::after {
    content: '';
    display: block;
    height: 48px;
    width: 100%;
    background: #ededed;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
  }

  .skeleton-first-block::after::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
    animation: shimmer 2s infinite;
  }

  .skeleton-buyer-block .skeleton-buyer-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .skeleton-buyer-block .skeleton-buyer-row {
    flex-direction: column !important;
    gap: 16px !important;
  }

  .skeleton-buyer-block .skeleton-buyer-row>div {
    flex: unset !important;
  }
}