/* ==================================================
APP UI UTILITIES
Spacing, display, flex, text, size, shadows, radius
================================================== */

.app-m-1 { margin: .25rem !important; } 
.app-m-2 { margin: .5rem !important; } 
.app-m-3 { margin: .75rem !important; } 
.app-m-4 { margin: 1rem !important; }

.app-mt-1 { margin-top: .25rem !important; } 
.app-mt-2 { margin-top: .5rem !important; } 
.app-mt-3 { margin-top: .75rem !important; } 
.app-mt-4 { margin-top: 1rem !important; }

.app-mb-1 { margin-bottom: .25rem !important; } 
.app-mb-2 { margin-bottom: .5rem !important; } 
.app-mb-3 { margin-bottom: .75rem !important; } 
.app-mb-4 { margin-bottom: 1rem !important; }

.app-mx-1 { margin-left: .25rem !important; margin-right: .25rem !important; } 
.app-mx-2 { margin-left: .5rem !important; margin-right: .5rem !important; } 
.app-mx-3 { margin-left: .75rem !important; margin-right: .75rem !important; } 
.app-mx-4 { margin-left: 1rem !important; margin-right: 1rem !important; }

.app-my-1 { margin-top: .25rem !important; margin-bottom: .25rem !important; } 
.app-my-2 { margin-top: .5rem !important; margin-bottom: .5rem !important; } 
.app-my-3 { margin-top: .75rem !important; margin-bottom: .75rem !important; } 
.app-my-4 { margin-top: 1rem !important; margin-bottom: 1rem !important; }

.app-p-1 { padding: .25rem !important; } 
.app-p-2 { padding: .5rem !important; } 
.app-p-3 { padding: .75rem !important; } 
.app-p-4 { padding: 1rem !important; }

.app-pt-1 { padding-top: .25rem !important; } 
.app-pt-2 { padding-top: .5rem !important; } 
.app-pt-3 { padding-top: .75rem !important; } 
.app-pt-4 { padding-top: 1rem !important; }

.app-pb-1 { padding-bottom: .25rem !important; } 
.app-pb-2 { padding-bottom: .5rem !important; } 
.app-pb-3 { padding-bottom: .75rem !important; } 
.app-pb-4 { padding-bottom: 1rem !important; }

.app-px-1 { padding-left: .25rem !important; padding-right: .25rem !important; } 
.app-px-2 { padding-left: .5rem !important; padding-right: .5rem !important; } 
.app-px-3 { padding-left: .75rem !important; padding-right: .75rem !important; } 
.app-px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }

.app-py-1 { padding-top: .25rem !important; padding-bottom: .25rem !important; } 
.app-py-2 { padding-top: .5rem !important; padding-bottom: .5rem !important; } 
.app-py-3 { padding-top: .75rem !important; padding-bottom: .75rem !important; } 
.app-py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }


.app-d-none { display: none !important; }
.app-d-block { display: block !important; }
.app-d-flex { display: flex !important; }
.app-d-grid { display: grid !important; }

.app-justify-content-between { justify-content: space-between !important; }
.app-justify-content-center { justify-content: center !important; }
.app-align-items-center { align-items: center !important; }
.app-flex-column { flex-direction: column !important; }
.app-gap-1 { gap: .25rem !important; } .app-gap-2 { gap: .5rem !important; } .app-gap-3 { gap: .75rem !important; }


/* font size */
.app-fs-1 { font-size: 1rem !important; } 
.app-fs-2 { font-size: 1.25rem !important; } 
.app-fs-3 { font-size: 1.5rem !important; } 
.app-fs-4 { font-size: 1.75rem !important; } 
.app-fs-5 { font-size: 2rem !important; }

/* text weight */
.app-fw-normal { font-weight: 400 !important; }
.app-fw-medium { font-weight: 500 !important; }
.app-fw-semibold { font-weight: 600 !important; }
.app-fw-bold { font-weight: 700 !important; }


/* text */
.app-text-center { text-align: center !important; }
.app-text-muted { color: var(--app-muted) !important; }
.app-text-primary { color: var(--app-primary) !important; }
.app-text-purple { color: var(--app-purple) !important; }
.app-text-indigo { color: var(--app-indigo) !important; }
.app-text-teal { color: var(--app-teal) !important; }
.app-text-cyan { color: var(--app-cyan) !important; }
.app-text-white { color: var(--app-white) !important; }
.app-text-black { color: var(--app-black) !important; }
.app-text-gray { color: var(--app-gray) !important; }
.app-text-light { color: var(--app-light) !important; }
.app-text-dark { color: var(--app-dark) !important; }

/* letter spacing */
.app-tracking-tight { letter-spacing: -0.025em !important; }
.app-tracking-snug { letter-spacing: -0.0125em !important; }
.app-tracking-normal { letter-spacing: 0 !important; }
.app-tracking-wide { letter-spacing: 0.025em !important; }

/* text transform */
.app-uppercase { text-transform: uppercase !important; }
.app-lowercase { text-transform: lowercase !important; }
.app-capitalize { text-transform: capitalize !important; }

/* text-decoration */
.app-text-underline { text-decoration: underline !important; }
.app-text-no-underline { text-decoration: none !important; }

/* text-decoration-color */
.app-text-underline-primary { text-decoration-color: var(--app-primary) !important; }
.app-text-underline-purple { text-decoration-color: var(--app-purple) !important; }
.app-text-underline-indigo { text-decoration-color: var(--app-indigo) !important; }

/* text-decoration-thickness */
.app-text-underline-thickness-1 { text-decoration-thickness: 1px !important; }
.app-text-underline-thickness-2 { text-decoration-thickness: 2px !important; }
.app-text-underline-thickness-3 { text-decoration-thickness: 3px !important; }

/* background */
.app-bg-primary { background: var(--app-primary) !important; color: #fff !important; }
.app-bg-purple { background: var(--app-purple) !important; color: #fff !important; }
.app-bg-indigo { background: var(--app-indigo) !important; color: #fff !important; }
.app-bg-dark { background: var(--app-dark) !important; color: #fff !important; }

.app-border-primary { border-color: var(--app-primary) !important; }
.app-border-purple { border-color: var(--app-purple) !important; }
.app-border-indigo { border-color: var(--app-indigo) !important; }

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

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

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