.flex {
    display: flex !important;

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

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

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

    &.gap-xs {
        gap: var(--spacing-xs) !important;
    }

    &.gap-sm {
        gap: var(--spacing-sm) !important;
    }

    &.gap-md {
        gap: var(--spacing-md) !important;
    }

    &.gap-lg {
        gap: var(--spacing-lg) !important;
    }

    &.gap-xl {
        gap: var(--spacing-xl) !important;
    }

    &.gap-xxl {
        gap: var(--spacing-xxl) !important;
    }

    &.stretch {
        align-items: stretch !important;
        justify-content: stretch !important;
    }

    &.center {
        align-items: center !important;
        justify-content: center !important;
    }

    &.top {
        align-items: start !important;
    }

    &.bottom {
        align-items: end !important;
    }

    &.left {
        justify-content: left !important;
    }

    &.right {
        justify-content: right !important;
    }

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

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

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

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

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

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

    &.justify-stretch {
        justify-content: stretch !important;
    }
}

.fixed {
    position: fixed !important;
}


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

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

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

.w-fit {
    width: fit-content;
}

.ml-2 {
    margin-left: .5rem !important;
}

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

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

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

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

.max-h-15 {
    max-height: 15%;
}

.xl\:h-85 .ui-chart {
    height: 95% !important;
}

.text-sm {
    font-size: 0.875rem !important;
    line-height: 0.875rem !important;
}

.text-md {
    font-size: 1rem !important;
    line-height: 1rem !important;
}

.text-lg {
    font-size: 1.125rem !important;
    line-height: 1.125rem !important;
}

.text-xl {
    font-size: 1.25rem !important;
    line-height: 1.25rem !important;
}

.text-2xl {
    font-size: 1.5rem !important;
    line-height: 1.5rem !important;
}

.text-3xl {
    font-size: 1.75rem !important;
    line-height: 1.75rem !important;
}

.text-4xl {
    font-size: 2rem !important;
    line-height: 2rem !important;
}

.text-5xl {
    font-size: 2.5rem !important;
    line-height: 2.5rem !important;
}

.text-6xl {
    font-size: 3rem !important;
    line-height: 3rem !important;
}


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.h-100 {
    height: 100%;
}

.bw-xs {
    border-width: var(--border-width-xs) !important;
}

.bw-sm {
    border-width: var(--border-width-sm) !important;
}

.bw-md {
    border-width: var(--border-width-md) !important;
}

.bw-lg {
    border-width: var(--border-width-lg) !important;
}

.bw-xl {
    border-width: var(--border-width-xl) !important;
}

.bw-xxl {
    border-width: var(--border-width-xxl) !important;
}

.br-xs {
    border-radius: var(--border-radius-xs) !important;
}

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

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

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

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

.br-xxl {
    border-radius: var(--border-radius-xxl) !important;
}

.fs-xs {
    font-size: var(--font-size-way-smaller) !important;
}

.fs-sm {
    font-size: var(--font-size-smaller) !important;
}

.fs-lg {
    font-size: var(--font-size-little-bigger) !important;
}

.fs-xl {
    font-size: var(--font-size-bigger) !important;
}

.fs-xxl {
    font-size: var(--font-size-way-bigger) !important;
}

.fs-regular {
    font-size: var(--font-size-regular) !important;
}