/* ==========================================================================
   Sales Administration System
   Enterprise Utilities
   File        : utilities.css
   Description : Reusable Utility Classes
   Dependency  : theme.css
   ========================================================================== */


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

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

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

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

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

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

.d-grid {
    display: grid !important;
}

.d-none {
    display: none !important;
}


/* ==========================================================================
   FLEX
   ========================================================================== */

.flex-row {
    flex-direction: row !important;
}

.flex-column {
    flex-direction: column !important;
}

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

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

.flex-grow-1 {
    flex-grow: 1 !important;
}

.flex-shrink-0 {
    flex-shrink: 0 !important;
}

.justify-start {
    justify-content: flex-start !important;
}

.justify-center {
    justify-content: center !important;
}

.justify-end {
    justify-content: flex-end !important;
}

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

.justify-around {
    justify-content: space-around !important;
}

.justify-evenly {
    justify-content: space-evenly !important;
}

.align-start {
    align-items: flex-start !important;
}

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

.align-end {
    align-items: flex-end !important;
}

.align-stretch {
    align-items: stretch !important;
}

.gap-0 {
    gap: 0 !important;
}

.gap-1 {
    gap: .25rem !important;
}

.gap-2 {
    gap: .5rem !important;
}

.gap-3 {
    gap: .75rem !important;
}

.gap-4 {
    gap: 1rem !important;
}

.gap-5 {
    gap: 1.5rem !important;
}

.gap-6 {
    gap: 2rem !important;
}


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

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

.w-25 {
    width: 25% !important;
}

.w-50 {
    width: 50% !important;
}

.w-75 {
    width: 75% !important;
}

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

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

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

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


/* ==========================================================================
   HEIGHT
   ========================================================================== */

.h-auto {
    height: auto !important;
}

.h-25 {
    height: 25% !important;
}

.h-50 {
    height: 50% !important;
}

.h-75 {
    height: 75% !important;
}

.h-100 {
    height: 100% !important;
}

.min-h-100 {
    min-height: 100% !important;
}

.max-h-100 {
    max-height: 100% !important;
}


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

.m-0 {
    margin: 0 !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.mt-1 {
    margin-top: .25rem !important;
}

.mt-2 {
    margin-top: .5rem !important;
}

.mt-3 {
    margin-top: .75rem !important;
}

.mt-4 {
    margin-top: 1rem !important;
}

.mt-5 {
    margin-top: 1.5rem !important;
}

.mt-6 {
    margin-top: 2rem !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-1 {
    margin-bottom: .25rem !important;
}

.mb-2 {
    margin-bottom: .5rem !important;
}

.mb-3 {
    margin-bottom: .75rem !important;
}

.mb-4 {
    margin-bottom: 1rem !important;
}

.mb-5 {
    margin-bottom: 1.5rem !important;
}

.mb-6 {
    margin-bottom: 2rem !important;
}

.ms-auto {
    margin-left: auto !important;
}

.me-auto {
    margin-right: auto !important;
}


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

.p-0 {
    padding: 0 !important;
}

.p-1 {
    padding: .25rem !important;
}

.p-2 {
    padding: .5rem !important;
}

.p-3 {
    padding: .75rem !important;
}

.p-4 {
    padding: 1rem !important;
}

.p-5 {
    padding: 1.5rem !important;
}

.p-6 {
    padding: 2rem !important;
}

.pt-0 {
    padding-top: 0 !important;
}

.pb-0 {
    padding-bottom: 0 !important;
}

.ps-0 {
    padding-left: 0 !important;
}

.pe-0 {
    padding-right: 0 !important;
}


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

.border {
    border: 1px solid var(--border-color) !important;
}

.border-top {
    border-top: 1px solid var(--border-color) !important;
}

.border-bottom {
    border-bottom: 1px solid var(--border-color) !important;
}

.border-start {
    border-left: 1px solid var(--border-color) !important;
}

.border-end {
    border-right: 1px solid var(--border-color) !important;
}

.border-0 {
    border: none !important;
}

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

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

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

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

.rounded-pill {
    border-radius: 999px !important;
}

.rounded-circle {
    border-radius: 50% !important;
}


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

.shadow-none {
    box-shadow: none !important;
}

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

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

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


/* ==========================================================================
   OVERFLOW
   ========================================================================== */

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

.overflow-auto {
    overflow: auto !important;
}

.overflow-x-auto {
    overflow-x: auto !important;
}

.overflow-y-auto {
    overflow-y: auto !important;
}


/* ==========================================================================
   POSITION
   ========================================================================== */

.position-relative {
    position: relative !important;
}

.position-absolute {
    position: absolute !important;
}

.position-fixed {
    position: fixed !important;
}

.position-sticky {
    position: sticky !important;
}

.top-0 {
    top: 0 !important;
}

.bottom-0 {
    bottom: 0 !important;
}

.start-0 {
    left: 0 !important;
}

.end-0 {
    right: 0 !important;
}


/* ==========================================================================
   Z INDEX
   ========================================================================== */

.z-dropdown {
    z-index: var(--z-dropdown) !important;
}

.z-sticky {
    z-index: var(--z-sticky) !important;
}

.z-fixed {
    z-index: var(--z-fixed) !important;
}

.z-modal {
    z-index: var(--z-modal) !important;
}

.z-loading {
    z-index: var(--z-loading) !important;
}


/* ==========================================================================
   CURSOR
   ========================================================================== */

.cursor-pointer {
    cursor: pointer !important;
}

.cursor-default {
    cursor: default !important;
}

.cursor-not-allowed {
    cursor: not-allowed !important;
}

.cursor-move {
    cursor: move !important;
}


/* ==========================================================================
   OPACITY
   ========================================================================== */

.opacity-0 {
    opacity: 0 !important;
}

.opacity-25 {
    opacity: .25 !important;
}

.opacity-50 {
    opacity: .5 !important;
}

.opacity-75 {
    opacity: .75 !important;
}

.opacity-100 {
    opacity: 1 !important;
}


/* ==========================================================================
   BACKGROUND
   ========================================================================== */

.bg-white {
    background: #FFF !important;
}

.bg-light {
    background: #F8F9FA !important;
}

.bg-transparent {
    background: transparent !important;
}

.bg-primary-soft {
    background: var(--color-primary-soft) !important;
}

.bg-success-soft {
    background: var(--color-success-soft) !important;
}

.bg-warning-soft {
    background: var(--color-warning-soft) !important;
}

.bg-danger-soft {
    background: var(--color-danger-soft) !important;
}


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

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

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

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

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

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

.text-muted {
    color: #6C757D !important;
}

.text-white {
    color: #FFF !important;
}

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

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

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

.fw-normal {
    font-weight: 400 !important;
}

.fw-medium {
    font-weight: 500 !important;
}

.fw-semibold {
    font-weight: 600 !important;
}

.fw-bold {
    font-weight: 700 !important;
}

.fs-xs {
    font-size: .75rem !important;
}

.fs-sm {
    font-size: .875rem !important;
}

.fs-md {
    font-size: 1rem !important;
}

.fs-lg {
    font-size: 1.125rem !important;
}

.fs-xl {
    font-size: 1.25rem !important;
}

.fs-2xl {
    font-size: 1.5rem !important;
}


/* ==========================================================================
   WHITE SPACE
   ========================================================================== */

.text-nowrap {
    white-space: nowrap !important;
}

.text-wrap {
    white-space: normal !important;
}

.text-truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}


/* ==========================================================================
   USER SELECT
   ========================================================================== */

.user-select-none {
    user-select: none !important;
}

.user-select-all {
    user-select: all !important;
}


/* ==========================================================================
   TRANSITION
   ========================================================================== */

.transition {
    transition: all var(--transition-fast) !important;
}


/* ==========================================================================
   ROTATION
   ========================================================================== */

.rotate-90 {
    transform: rotate(90deg) !important;
}

.rotate-180 {
    transform: rotate(180deg) !important;
}


/* ==========================================================================
   POINTER EVENTS
   ========================================================================== */

.pe-none {
    pointer-events: none !important;
}

.pe-auto {
    pointer-events: auto !important;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width:768px) {

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

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

    .mobile-flex-column {
        flex-direction: column !important;
    }
}