.sys-hidden {
  display: none !important;
}

.sys-flex {
  display: flex !important;
}

.sys-inline-flex {
  display: inline-flex !important;
}

.sys-flex-wrap {
  flex-wrap: wrap !important;
}

.sys-items-center {
  align-items: center !important;
}

.sys-justify-between {
  justify-content: space-between !important;
}

.sys-gap-2 {
  gap: var(--sys-space-2) !important;
}

.sys-gap-3 {
  gap: var(--sys-space-3) !important;
}

.sys-gap-4 {
  gap: var(--sys-space-4) !important;
}

.sys-w-full {
  width: 100% !important;
}

.sys-max-w-full {
  max-width: 100% !important;
}

.sys-min-w-0 {
  min-width: 0 !important;
}

.sys-stack {
  display: grid !important;
  gap: var(--sys-space-3) !important;
}

.sys-grid-fit {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)) !important;
  gap: var(--sys-space-3) !important;
}

.sys-overflow-x-auto {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

.sys-overflow-hidden {
  overflow: hidden !important;
}

.sys-text-right {
  text-align: right !important;
}

.sys-text-center {
  text-align: center !important;
}

.sys-text-muted {
  color: var(--sys-color-text-soft) !important;
}

.sys-shadow-sm {
  box-shadow: var(--sys-shadow-sm) !important;
}

.sys-rounded-md {
  border-radius: var(--sys-radius-md) !important;
}

.sys-clamp-1,
.sys-clamp-2 {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.sys-clamp-1 {
  -webkit-line-clamp: 1 !important;
}

.sys-clamp-2 {
  -webkit-line-clamp: 2 !important;
}

.sys-sticky-topbar {
  position: sticky !important;
  top: var(--sys-topbar-height) !important;
}

@media (max-width: 767.98px) {
  .sys-hide-mobile {
    display: none !important;
  }

  .sys-show-mobile {
    display: initial !important;
  }
}

@media (min-width: 768px) {
  .sys-show-mobile {
    display: none !important;
  }
}