/* ========================================= */
/* AkbarBin UI Framework */
/* Version : 1.0.0 */
/* ========================================= */

/* ========================================= */
/* TEXT ALIGN */
/* ========================================= */

.text-left {
  text-align: left !important;
}

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

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

/* ========================================= */
/* TEXT COLOR */
/* ========================================= */

.text-primary {
  color: var(--color-primary) !important;
}

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

.text-white {
  color: var(--color-white) !important;
}

/* ========================================= */
/* DISPLAY */
/* ========================================= */

.hidden {
  display: none !important;
}

.block {
  display: block !important;
}

.inline-block {
  display: inline-block !important;
}

/* ========================================= */
/* WIDTH */
/* ========================================= */

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

.w-auto {
  width: auto !important;
}

/* ========================================= */
/* MARGIN TOP */
/* ========================================= */

.mt-16 {
  margin-top: var(--space-16) !important;
}

.mt-32 {
  margin-top: var(--space-32) !important;
}

.mt-48 {
  margin-top: var(--space-48) !important;
}

.mt-64 {
  margin-top: var(--space-64) !important;
}

/* ========================================= */
/* MARGIN BOTTOM */
/* ========================================= */

.mb-16 {
  margin-bottom: var(--space-16) !important;
}

.mb-32 {
  margin-bottom: var(--space-32) !important;
}

.mb-48 {
  margin-bottom: var(--space-48) !important;
}

.mb-64 {
  margin-bottom: var(--space-64) !important;
}

/* ========================================= */
/* MARGIN LEFT */
/* ========================================= */

.ml-16 {
  margin-left: var(--space-16) !important;
}

.ml-32 {
  margin-left: var(--space-32) !important;
}

/* ========================================= */
/* MARGIN RIGHT */
/* ========================================= */

.mr-16 {
  margin-right: var(--space-16) !important;
}

.mr-32 {
  margin-right: var(--space-32) !important;
}

/* ========================================= */
/* PADDING TOP */
/* ========================================= */

.pt-16 {
  padding-top: var(--space-16) !important;
}

.pt-32 {
  padding-top: var(--space-32) !important;
}

.pt-48 {
  padding-top: var(--space-48) !important;
}

/* ========================================= */
/* PADDING BOTTOM */
/* ========================================= */

.pb-16 {
  padding-bottom: var(--space-16) !important;
}

.pb-32 {
  padding-bottom: var(--space-32) !important;
}

.pb-48 {
  padding-bottom: var(--space-48) !important;
}

/* ========================================= */
/* SHADOW */
/* ========================================= */

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

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

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

/* ========================================= */
/* BORDER RADIUS */
/* ========================================= */

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

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

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

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

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

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

/* ========================================= */
/* GAP */
/* ========================================= */

.gap-8 {
  gap: var(--space-8);
}

.gap-12 {
  gap: var(--space-12);
}

.gap-16 {
  gap: var(--space-16);
}

.gap-24 {
  gap: var(--space-24);
}

.gap-32 {
  gap: var(--space-32);
}