/*
==========================================
PM UI Framework
Utilities
Version: 0.1.0
==========================================
*/

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

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

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

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

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

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

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

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

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

/* ==========================================
   VISIBILITY
========================================== */

.pm-visible {
    visibility: visible !important;
}

.pm-hidden {
    visibility: hidden !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.pm-flex-fill {
    flex: 1 1 auto !important;
}

.pm-flex-grow-0 {
    flex-grow: 0 !important;
}

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

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

.pm-flex-shrink-1 {
    flex-shrink: 1 !important;
}

/* ==========================================
   JUSTIFY CONTENT
========================================== */

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

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

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

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

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

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

/* ==========================================
   ALIGN ITEMS
========================================== */

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

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

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

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

.pm-items-baseline {
    align-items: baseline !important;
}

/* ==========================================
   ALIGN SELF
========================================== */

.pm-self-auto {
    align-self: auto !important;
}

.pm-self-start {
    align-self: flex-start !important;
}

.pm-self-center {
    align-self: center !important;
}

.pm-self-end {
    align-self: flex-end !important;
}

.pm-self-stretch {
    align-self: stretch !important;
}
/* ==========================================
   GRID
========================================== */

.pm-grid-1 {
    grid-template-columns: repeat(1, 1fr) !important;
}

.pm-grid-2 {
    grid-template-columns: repeat(2, 1fr) !important;
}

.pm-grid-3 {
    grid-template-columns: repeat(3, 1fr) !important;
}

.pm-grid-4 {
    grid-template-columns: repeat(4, 1fr) !important;
}

.pm-grid-5 {
    grid-template-columns: repeat(5, 1fr) !important;
}

.pm-grid-6 {
    grid-template-columns: repeat(6, 1fr) !important;
}

.pm-grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
}

.pm-grid-auto-sm {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
}

.pm-grid-auto-lg {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
}

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

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

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

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

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

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

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

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

.pm-gap-7 {
    gap: 2.5rem !important;
}

.pm-gap-8 {
    gap: 3rem !important;
}

/* Column Gap */

.pm-gap-x-0 {
    column-gap: 0 !important;
}

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

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

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

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

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

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

/* Row Gap */

.pm-gap-y-0 {
    row-gap: 0 !important;
}

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

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

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

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

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

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

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

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

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

.pm-w-33 {
    width: 33.3333% !important;
}

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

.pm-w-66 {
    width: 66.6666% !important;
}

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

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

.pm-w-fit {
    width: fit-content !important;
}

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

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

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

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

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

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

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

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

.pm-vh-100 {
    min-height: 100vh !important;
}
/* ==========================================
   MARGIN
========================================== */

.pm-m-0 { margin: 0 !important; }
.pm-m-1 { margin: .25rem !important; }
.pm-m-2 { margin: .5rem !important; }
.pm-m-3 { margin: .75rem !important; }
.pm-m-4 { margin: 1rem !important; }
.pm-m-5 { margin: 1.5rem !important; }
.pm-m-6 { margin: 2rem !important; }
.pm-m-7 { margin: 2.5rem !important; }
.pm-m-8 { margin: 3rem !important; }
.pm-m-auto { margin: auto !important; }

/* Margin Top */

.pm-mt-0 { margin-top: 0 !important; }
.pm-mt-1 { margin-top: .25rem !important; }
.pm-mt-2 { margin-top: .5rem !important; }
.pm-mt-3 { margin-top: .75rem !important; }
.pm-mt-4 { margin-top: 1rem !important; }
.pm-mt-5 { margin-top: 1.5rem !important; }
.pm-mt-6 { margin-top: 2rem !important; }
.pm-mt-7 { margin-top: 2.5rem !important; }
.pm-mt-8 { margin-top: 3rem !important; }
.pm-mt-auto { margin-top: auto !important; }

/* Margin Bottom */

.pm-mb-0 { margin-bottom: 0 !important; }
.pm-mb-1 { margin-bottom: .25rem !important; }
.pm-mb-2 { margin-bottom: .5rem !important; }
.pm-mb-3 { margin-bottom: .75rem !important; }
.pm-mb-4 { margin-bottom: 1rem !important; }
.pm-mb-5 { margin-bottom: 1.5rem !important; }
.pm-mb-6 { margin-bottom: 2rem !important; }
.pm-mb-7 { margin-bottom: 2.5rem !important; }
.pm-mb-8 { margin-bottom: 3rem !important; }
.pm-mb-auto { margin-bottom: auto !important; }

/* Margin Left */

.pm-ml-0 { margin-left: 0 !important; }
.pm-ml-1 { margin-left: .25rem !important; }
.pm-ml-2 { margin-left: .5rem !important; }
.pm-ml-3 { margin-left: .75rem !important; }
.pm-ml-4 { margin-left: 1rem !important; }
.pm-ml-5 { margin-left: 1.5rem !important; }
.pm-ml-6 { margin-left: 2rem !important; }
.pm-ml-7 { margin-left: 2.5rem !important; }
.pm-ml-8 { margin-left: 3rem !important; }
.pm-ml-auto { margin-left: auto !important; }

/* Margin Right */

.pm-mr-0 { margin-right: 0 !important; }
.pm-mr-1 { margin-right: .25rem !important; }
.pm-mr-2 { margin-right: .5rem !important; }
.pm-mr-3 { margin-right: .75rem !important; }
.pm-mr-4 { margin-right: 1rem !important; }
.pm-mr-5 { margin-right: 1.5rem !important; }
.pm-mr-6 { margin-right: 2rem !important; }
.pm-mr-7 { margin-right: 2.5rem !important; }
.pm-mr-8 { margin-right: 3rem !important; }
.pm-mr-auto { margin-right: auto !important; }

/* Margin Horizontal */

.pm-mx-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.pm-mx-1 {
    margin-left: .25rem !important;
    margin-right: .25rem !important;
}

.pm-mx-2 {
    margin-left: .5rem !important;
    margin-right: .5rem !important;
}

.pm-mx-3 {
    margin-left: .75rem !important;
    margin-right: .75rem !important;
}

.pm-mx-4 {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
}

.pm-mx-5 {
    margin-left: 1.5rem !important;
    margin-right: 1.5rem !important;
}

.pm-mx-6 {
    margin-left: 2rem !important;
    margin-right: 2rem !important;
}

.pm-mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Margin Vertical */

.pm-my-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.pm-my-1 {
    margin-top: .25rem !important;
    margin-bottom: .25rem !important;
}

.pm-my-2 {
    margin-top: .5rem !important;
    margin-bottom: .5rem !important;
}

.pm-my-3 {
    margin-top: .75rem !important;
    margin-bottom: .75rem !important;
}

.pm-my-4 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

.pm-my-5 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.pm-my-6 {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
}

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

.pm-p-0 { padding: 0 !important; }
.pm-p-1 { padding: .25rem !important; }
.pm-p-2 { padding: .5rem !important; }
.pm-p-3 { padding: .75rem !important; }
.pm-p-4 { padding: 1rem !important; }
.pm-p-5 { padding: 1.5rem !important; }
.pm-p-6 { padding: 2rem !important; }
.pm-p-7 { padding: 2.5rem !important; }
.pm-p-8 { padding: 3rem !important; }

/* ==========================================
   PADDING (CONTINUACIÓN)
========================================== */

/* Padding Top */

.pm-pt-0 { padding-top: 0 !important; }
.pm-pt-1 { padding-top: .25rem !important; }
.pm-pt-2 { padding-top: .5rem !important; }
.pm-pt-3 { padding-top: .75rem !important; }
.pm-pt-4 { padding-top: 1rem !important; }
.pm-pt-5 { padding-top: 1.5rem !important; }
.pm-pt-6 { padding-top: 2rem !important; }
.pm-pt-7 { padding-top: 2.5rem !important; }
.pm-pt-8 { padding-top: 3rem !important; }

/* Padding Bottom */

.pm-pb-0 { padding-bottom: 0 !important; }
.pm-pb-1 { padding-bottom: .25rem !important; }
.pm-pb-2 { padding-bottom: .5rem !important; }
.pm-pb-3 { padding-bottom: .75rem !important; }
.pm-pb-4 { padding-bottom: 1rem !important; }
.pm-pb-5 { padding-bottom: 1.5rem !important; }
.pm-pb-6 { padding-bottom: 2rem !important; }
.pm-pb-7 { padding-bottom: 2.5rem !important; }
.pm-pb-8 { padding-bottom: 3rem !important; }

/* Padding Left */

.pm-pl-0 { padding-left: 0 !important; }
.pm-pl-1 { padding-left: .25rem !important; }
.pm-pl-2 { padding-left: .5rem !important; }
.pm-pl-3 { padding-left: .75rem !important; }
.pm-pl-4 { padding-left: 1rem !important; }
.pm-pl-5 { padding-left: 1.5rem !important; }
.pm-pl-6 { padding-left: 2rem !important; }
.pm-pl-7 { padding-left: 2.5rem !important; }
.pm-pl-8 { padding-left: 3rem !important; }

/* Padding Right */

.pm-pr-0 { padding-right: 0 !important; }
.pm-pr-1 { padding-right: .25rem !important; }
.pm-pr-2 { padding-right: .5rem !important; }
.pm-pr-3 { padding-right: .75rem !important; }
.pm-pr-4 { padding-right: 1rem !important; }
.pm-pr-5 { padding-right: 1.5rem !important; }
.pm-pr-6 { padding-right: 2rem !important; }
.pm-pr-7 { padding-right: 2.5rem !important; }
.pm-pr-8 { padding-right: 3rem !important; }

/* Padding Horizontal */

.pm-px-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.pm-px-1 {
    padding-left: .25rem !important;
    padding-right: .25rem !important;
}

.pm-px-2 {
    padding-left: .5rem !important;
    padding-right: .5rem !important;
}

.pm-px-3 {
    padding-left: .75rem !important;
    padding-right: .75rem !important;
}

.pm-px-4 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.pm-px-5 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

.pm-px-6 {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

.pm-px-7 {
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important;
}

.pm-px-8 {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
}

/* Padding Vertical */

.pm-py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.pm-py-1 {
    padding-top: .25rem !important;
    padding-bottom: .25rem !important;
}

.pm-py-2 {
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
}

.pm-py-3 {
    padding-top: .75rem !important;
    padding-bottom: .75rem !important;
}

.pm-py-4 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.pm-py-5 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

.pm-py-6 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}

.pm-py-7 {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
}

.pm-py-8 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

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

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

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

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

.pm-text-justify {
    text-align: justify !important;
}

/* ==========================================
   FONT WEIGHT
========================================== */

.pm-fw-light {
    font-weight: 300 !important;
}

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

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

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

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

.pm-fw-extrabold {
    font-weight: 800 !important;
}

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

.pm-uppercase {
    text-transform: uppercase !important;
}

.pm-lowercase {
    text-transform: lowercase !important;
}

.pm-capitalize {
    text-transform: capitalize !important;
}

.pm-normal-case {
    text-transform: none !important;
}

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

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

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

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

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

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

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

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

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

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

.pm-text-black {
    color: #000 !important;
}

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

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

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

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

.pm-bg-primary-dark {
    background: var(--pm-primary-dark) !important;
}

.pm-bg-secondary {
    background: var(--pm-secondary) !important;
}

.pm-bg-accent {
    background: var(--pm-accent) !important;
}

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

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

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

.pm-bg-info {
    background: var(--pm-info) !important;
}

.pm-bg-light {
    background: var(--pm-background-light) !important;
}

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

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

/* ==========================================
   BORDERS
========================================== */

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

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

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

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

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

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

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

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

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

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

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

.pm-border-info {
    border-color: var(--pm-info) !important;
}

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

.pm-rounded-0 {
    border-radius: 0 !important;
}

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

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

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

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

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

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

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

/* ==========================================
   SHADOWS
========================================== */

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

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

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

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

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

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

.pm-static {
    position: static !important;
}

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

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

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

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

/* ==========================================
   TOP / RIGHT / BOTTOM / LEFT
========================================== */

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

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

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

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

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

.pm-z-0 {
    z-index: 0 !important;
}

.pm-z-10 {
    z-index: 10 !important;
}

.pm-z-50 {
    z-index: 50 !important;
}

.pm-z-100 {
    z-index: 100 !important;
}

.pm-z-500 {
    z-index: 500 !important;
}

.pm-z-1000 {
    z-index: 1000 !important;
}

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

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

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

.pm-overflow-scroll {
    overflow: scroll !important;
}

.pm-overflow-visible {
    overflow: visible !important;
}

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

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

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

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

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

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

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

/* ==========================================
   TRANSITIONS
========================================== */

.pm-transition {
    transition: all .25s ease;
}

.pm-transition-fast {
    transition: all .15s ease;
}

.pm-transition-slow {
    transition: all .4s ease;
}

/* ==========================================
   OBJECT FIT
========================================== */

.pm-object-cover {
    object-fit: cover !important;
}

.pm-object-contain {
    object-fit: contain !important;
}

.pm-object-fill {
    object-fit: fill !important;
}

.pm-object-scale-down {
    object-fit: scale-down !important;
}

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

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

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

.pm-select-text {
    user-select: text !important;
}

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

@media (max-width: 768px) {

    .pm-mobile-hidden {
        display: none !important;
    }

    .pm-mobile-block {
        display: block !important;
    }

    .pm-mobile-flex {
        display: flex !important;
    }

    .pm-mobile-grid {
        display: grid !important;
    }

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

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

    .pm-mobile-grid-1 {
        grid-template-columns: 1fr !important;
    }

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

@media (min-width: 769px) {

    .pm-desktop-hidden {
        display: none !important;
    }

    .pm-desktop-block {
        display: block !important;
    }

    .pm-desktop-flex {
        display: flex !important;
    }

    .pm-desktop-grid {
        display: grid !important;
    }
}