/* Remove default margins, paddings, and other browser defaults */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: none;
    outline: none;
    text-decoration: none;
    list-style-type: none;
}

.font-barlow {
    font-family: var(--font-family-base) !important;
}

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

.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 UTILITIES
=========================
*/

/* Flex Direction */
.flex-row {
    flex-direction: row !important;
}

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

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

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

/* Flex Wrap */
.flex-wrap {
    flex-wrap: wrap !important;
}

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

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

/* Justify Content */
.justify-start {
    justify-content: flex-start !important;
}

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

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

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

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

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

/* Align Items */
.align-start {
    align-items: flex-start !important;
}

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

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

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

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

/* Align Self */
.align-self-start {
    align-self: flex-start !important;
}

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

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

.align-self-baseline {
    align-self: baseline !important;
}

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

/* flex-shrink utility */
.flex-shrink-0 {
    flex-shrink: 0 !important;
}

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

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

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

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

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

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

/*
========================
    SPACING UTILITIES
=========================
*/

/* Margin */
.m-0 {
    margin: 0 !important;
}

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

.mr-0 {
    margin-right: 0 !important;
}

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

.ml-0 {
    margin-left: 0 !important;
}

.m-1 {
    margin: var(--spacing-xs) !important;
}

.mt-1 {
    margin-top: var(--spacing-xs) !important;
}

.mr-1 {
    margin-right: var(--spacing-xs) !important;
}

.mb-1 {
    margin-bottom: var(--spacing-xs) !important;
}

.ml-1 {
    margin-left: var(--spacing-xs) !important;
}

.m-2 {
    margin: var(--spacing-sm) !important;
}

.mt-2 {
    margin-top: var(--spacing-sm) !important;
}

.mr-2 {
    margin-right: var(--spacing-sm) !important;
}

.mb-2 {
    margin-bottom: var(--spacing-sm) !important;
}

.ml-2 {
    margin-left: var(--spacing-sm) !important;
}

.m-3 {
    margin: var(--spacing-md) !important;
}

.mt-3 {
    margin-top: var(--spacing-md) !important;
}

.mr-3 {
    margin-right: var(--spacing-md) !important;
}

.mb-3 {
    margin-bottom: var(--spacing-md) !important;
}

.ml-3 {
    margin-left: var(--spacing-md) !important;
}

.ml-16px {
    margin-left: var(--spacing-lg-16) !important;
}

.m-4 {
    margin: var(--spacing-lg) !important;
}

.mt-4 {
    margin-top: var(--spacing-lg) !important;
}

.mr-4 {
    margin-right: var(--spacing-lg) !important;
}

.mb-4 {
    margin-bottom: var(--spacing-lg) !important;
}

.ml-4 {
    margin-left: var(--spacing-lg) !important;
}

.m-5 {
    margin: var(--spacing-xl) !important;
}

.mt-5 {
    margin-top: var(--spacing-xl) !important;
}

.mr-5 {
    margin-right: var(--spacing-xl) !important;
}

.mb-5 {
    margin-bottom: var(--spacing-xl) !important;
}

.ml-5 {
    margin-left: var(--spacing-xl) !important;
}

/* Padding */
.p-0 {
    padding: 0 !important;
}

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

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

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

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

.p-1 {
    padding: var(--spacing-xs) !important;
}

.pt-1 {
    padding-top: var(--spacing-xs) !important;
}

.pr-1 {
    padding-right: var(--spacing-xs) !important;
}

.pb-1 {
    padding-bottom: var(--spacing-xs) !important;
}

.pl-1 {
    padding-left: var(--spacing-xs) !important;
}

.p-2 {
    padding: var(--spacing-sm) !important;
}

.pt-2 {
    padding-top: var(--spacing-sm) !important;
}

.pr-2 {
    padding-right: var(--spacing-sm) !important;
}

.pb-2 {
    padding-bottom: var(--spacing-sm) !important;
}

.pl-2 {
    padding-left: var(--spacing-sm) !important;
}

.p-3 {
    padding: var(--spacing-md) !important;
}

.pt-3 {
    padding-top: var(--spacing-md) !important;
}

.pr-3 {
    padding-right: var(--spacing-md) !important;
}

.pb-3 {
    padding-bottom: var(--spacing-md) !important;
}

.pl-3 {
    padding-left: var(--spacing-md) !important;
}

.p-16px {
    padding: var(--spacing-lg-16) !important;
}

.p-4 {
    padding: var(--spacing-lg) !important;
}

.pt-4 {
    padding-top: var(--spacing-lg) !important;
}

.pr-4 {
    padding-right: var(--spacing-lg) !important;
}

.pb-4 {
    padding-bottom: var(--spacing-lg) !important;
}

.pl-4 {
    padding-left: var(--spacing-lg) !important;
}

.p-5 {
    padding: var(--spacing-xl) !important;
}

.pt-5 {
    padding-top: var(--spacing-xl) !important;
}

.pr-5 {
    padding-right: var(--spacing-xl) !important;
}

.pb-5 {
    padding-bottom: var(--spacing-xl) !important;
}

.pl-5 {
    padding-left: var(--spacing-xl) !important;
}

.p-30px {
    padding: var(--spacing-3xl) !important;
    /* 30px */
}

/* Gap */
.gap-0 {
    gap: 0 !important;
}

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

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

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

.gap-3 {
    gap: var(--spacing-md) !important;
    /* 10px */
}

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

.gap-5 {
    gap: var(--spacing-xl) !important;
    /* 20px */
}

.gap-6 {
    gap: var(--spacing-3xl) !important;
    /* 30px */
}

.gap-8 {
    gap: var(--spacing-5xl) !important;
    /* 40px */
}

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

/* Text Alignment */
.text-left {
    text-align: left !important;
}

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

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

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

/* Text Transform */
.text-uppercase {
    text-transform: uppercase !important;
}

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

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

/* Font Weight */
.font-weight-normal {
    font-weight: var(--font-weight-regular) !important;
}

.font-weight-medium {
    font-weight: var(--font-weight-medium) !important;
}

.font-weight-semibold {
    font-weight: var(--font-weight-semibold) !important;
}

.font-weight-bold {
    font-weight: var(--font-weight-bold) !important;
}

/* Font Style */
.font-italic {
    font-style: italic !important;
}

.font-normal {
    font-style: normal !important;
}

/* Font Size */
.fs-10 {
    font-size: var(--font-size-b-10) !important;
}

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

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

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

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

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

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

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

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

/* Line Height */
.lh-normal {
    line-height: var(--line-height-normal) !important;
}

.lh-26px {
    line-height: var(--line-height-b-20) !important;
    /* 26px */
}

.lh-24px {
    line-height: var(--line-height-b-18) !important;
    /* 24px */
}

.lh-sm {
    line-height: 1.2 !important;
}

.lh-base {
    line-height: 1.5 !important;
}

.lh-lg {
    line-height: 1.8 !important;
}

/* Letter Spacing */
.ls-h-56 {
    letter-spacing: var(--letter-spacing-h-56) !important;
}

.ls-h-42 {
    letter-spacing: var(--letter-spacing-h-42) !important;
}

.ls-h-32 {
    letter-spacing: var(--letter-spacing-h-32) !important;
}

.ls-h-26 {
    letter-spacing: var(--letter-spacing-h-26) !important;
}

.ls-h-24 {
    letter-spacing: var(--letter-spacing-h-24) !important;
}

.ls-h-20 {
    letter-spacing: var(--letter-spacing-h-20) !important;
}

.ls-h-18 {
    letter-spacing: var(--letter-spacing-h-18) !important;
}

.ls-h-16 {
    letter-spacing: var(--letter-spacing-h-16) !important;
}

.ls-h-14 {
    letter-spacing: var(--letter-spacing-h-14) !important;
}

.ls-b-26 {
    letter-spacing: var(--letter-spacing-b-26) !important;
}

.ls-b-24 {
    letter-spacing: var(--letter-spacing-b-24) !important;
}

/*
========================
    COLOR UTILITIES
=========================
*/

/* Text Color */
.text-primary {
    color: var(--color-primary) !important;
}

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

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

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

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

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

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

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

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

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

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

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

/* Background Color */
.bg-primary {
    background-color: var(--color-primary) !important;
}

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

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

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

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

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

.bg-muted {
    background-color: var(--color-support) !important;
}

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

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

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

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

/*
========================
    WIDTH AND HEIGHT UTILITIES
=========================
*/

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

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

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

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

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

.w-max-content {
    width: max-content !important;
}

/* Widths in fixed pixels */

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

.w-22 {
    width: 22px !important;
}

.w-43 {
    width: 43px !important;
}

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

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

.w-we-fi-av {
    width: -webkit-fill-available !important;
}

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

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

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

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

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

.h-we-fi-av {
    height: -webkit-fill-available !important;
}

/* Heights in fixed pixels */
.h20px{
    height: 20px !important;
}

.h-22 {
    height: 22px !important;
}

.h-43 {
    height: 43px !important;
}

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

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

.min-vw-100 {
    min-width: 100vw !important;
}

.min-vh-100 {
    min-height: 100vh !important;
}

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

.border-solid{
    border: solid;
}

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

.border-0 {
    border: 0 !important;
}
.border-2px {
    border-width: 2px !important;
}

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

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

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

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

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

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

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

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

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

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

/* Border Radius */
.rounded {
    border-radius: var(--border-radius-sm) !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.z-20 {
    z-index: 20 !important;
}

.z-30 {
    z-index: 30 !important;
}

.z-40 {
    z-index: 40 !important;
}

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

.z-auto {
    z-index: auto !important;
}

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

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

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

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

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

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

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

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

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

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

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

/*
========================
    OTHER UTILITIES
=========================
*/

/* Box Shadows */
/* .shadow {
    box-shadow: var(--box-shadow-default) !important;
} */

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

/* Text Decoration */
.text-decoration-none {
    text-decoration: none !important;
}

.text-decoration-underline {
    text-decoration: underline !important;
}

.text-decoration-line-through {
    text-decoration: line-through !important;
}

/* Float */
.float-left {
    float: left !important;
}

.float-right {
    float: right !important;
}

.float-none {
    float: none !important;
}

/* Clearfix */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

.resize-none {
    resize: none;
}

/* Click Effects */
.scale-click:active {
    transform: scale(0.98);
    transition: all var(--transition-duration);
}