/* Bootstrap Utility Classes - Recreated for compatibility */

/* Display */
.d-flex { display: flex !important; }
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline-block { display: inline-block !important; }
.d-lg-flex { display: flex !important; }
.d-lg-block { display: block !important; }
.d-md-none { display: none !important; }
.d-md-flex { display: flex !important; }

@media (min-width: 768px) {
    .d-md-none { display: none !important; }
    .d-md-flex { display: flex !important; }
}

@media (min-width: 992px) {
    .d-lg-flex { display: flex !important; }
    .d-lg-block { display: block !important; }
}

/* Flexbox */
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-stretch { align-items: stretch !important; }
.align-self-center { align-self: center !important; }
.align-self-top { align-self: flex-start !important; }
.align-self-end { align-self: flex-end !important; }

/* Spacing */
.m-0 { margin: 0 !important; }
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
.mx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.me-1 { margin-right: 0.25rem !important; }
.me-2 { margin-right: 0.5rem !important; }
.ms-2 { margin-left: 0.5rem !important; }
.ms-5 { margin-left: 3rem !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.p-0 { padding: 0 !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
.ps-2 { padding-left: 0.5rem !important; }

@media (min-width: 992px) {
    .mb-lg-3 { margin-bottom: 1rem !important; }
    .mb-lg-4 { margin-bottom: 1.5rem !important; }
    .mb-lg-5 { margin-bottom: 3rem !important; }
    .my-lg-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
    .my-lg-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
    .pb-lg-2 { padding-bottom: 0.5rem !important; }
    .pb-lg-3 { padding-bottom: 1rem !important; }
    .pb-lg-4 { padding-bottom: 1.5rem !important; }
    .ms-lg-2 { margin-left: 0.5rem !important; }
    .mt-lg-3 { margin-top: 1rem !important; }
}

/* Text */
.text-center { text-align: center !important; }
.text-start { text-align: left !important; }
.text-end { text-align: right !important; }
.text-left { text-align: left !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-capitalize { text-transform: capitalize !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-truncate { 
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.text-white { color: #ffffff !important; }
.text-black { color: #000000 !important; }
.text-purple { color: #6A51E8 !important; }
.text-deepBlue { color: #1a1a2e !important; }
.text-grey { color: #666666 !important; }
.text-tertiary { color: #999999 !important; }
.fw-bold { font-weight: 700 !important; }
.fw-regular { font-weight: 400 !important; }

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

/* Position */
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }

/* Order */
.order-1 { order: 1 !important; }
.order-2 { order: 2 !important; }
.order-3 { order: 3 !important; }
.order-md-1 { order: 1 !important; }
.order-md-2 { order: 2 !important; }
.order-md-4 { order: 4 !important; }
.order-lg-1 { order: 1 !important; }
.order-lg-2 { order: 2 !important; }
.order-lg-3 { order: 3 !important; }

@media (min-width: 768px) {
    .order-md-1 { order: 1 !important; }
    .order-md-2 { order: 2 !important; }
    .order-md-4 { order: 4 !important; }
}

@media (min-width: 992px) {
    .order-lg-1 { order: 1 !important; }
    .order-lg-2 { order: 2 !important; }
    .order-lg-3 { order: 3 !important; }
}

/* Gap */
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }

/* Cursor */
.cursor-pointer { cursor: pointer !important; }

/* Image */
.img-fluid { 
    max-width: 100%;
    height: auto;
}

/* Font Sizes */
.font-11 { font-size: 0.6875rem !important; }
.font-12 { font-size: 0.75rem !important; }
.font-14 { font-size: 0.875rem !important; }
.font-15 { font-size: 0.9375rem !important; }
.font-16 { font-size: 1rem !important; }
.font-secondary { font-family: var(--font-secondary) !important; }

@media (min-width: 992px) {
    .font-lg-12 { font-size: 0.75rem !important; }
}

/* Max Width */
.mwx-150 { max-width: 150px !important; }
.mwx-492 { max-width: 492px !important; }
.mwx-620 { max-width: 620px !important; }
.mwx-650 { max-width: 650px !important; }
.mwx-680 { max-width: 680px !important; }
.mwx-750 { max-width: 750px !important; }

/* Row/Column Grid */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}

.col-12 { 
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

.col-lg-4 {
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

.col-lg-6 {
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

@media (min-width: 992px) {
    .col-lg-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    .col-lg-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Table Responsive */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}