.me-1 {
    margin-inline-end: .25rem !important;
}

.me-2 {
    margin-inline-end: .5rem !important;
}

.me-3 {
    margin-inline-end: 1rem !important;
}

.me-4 {
    margin-inline-end: 1.5rem !important;
}

.me-5 {
    margin-inline-end: 3rem !important;
}

.me-auto {
    margin-inline-end: auto !important;

}

.ms-1 {
    margin-inline-start: .25rem !important;
}

.ms-2 {
    margin-inline-start: .5rem !important;
}

.ms-3 {
    margin-inline-start: 1rem !important;
}

.ms-4 {
    margin-inline-start: 1.5rem !important;
}

.ms-5 {
    margin-inline-start: 3rem !important;
}

.ms-auto {
    margin-inline-start: auto !important;
}





.pe-1 {
    padding-inline-end: .25rem !important;
}

.pe-2 {
    padding-inline-end: .5rem !important;
}

.pe-3 {
    padding-inline-end: 1rem !important;
}

.pe-4 {
    padding-inline-end: 1.5rem !important;
}

.pe-5 {
    padding-inline-end: 3rem !important;
}

.ps-1 {
    padding-inline-start: .25rem !important;
}

.ps-2 {
    padding-inline-start: .5rem !important;
}

.ps-3 {
    padding-inline-start: 1rem !important;
}

.ps-4 {
    padding-inline-start: 1.5rem !important;
}

.ps-5 {
    padding-inline-start: 3rem !important;
}




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

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

.gap-3 {
    gap: 1rem !important;
}

.gap-4 {
    gap: 1.5rem !important;
}

.gap-5 {
    gap: 3rem !important;
}



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

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

.row-gap-3 {
    row-gap: 1rem !important;
}

.row-gap-4 {
    row-gap: 1.5rem !important;
}

.row-gap-5 {
    row-gap: 3rem !important;
}









.relative {
    position: relative;
}

.icon {
    font-size: 1rem;

    &.icon-xxs {
        font-size: 0.5rem;
    }

    &.icon-xs {
        font-size: 0.7rem;
    }

    &.icon-sm {
        font-size: 0.8rem;
    }


    &.icon-md {
        font-size: 1.1rem !important;
    }

    &.icon-lg {
        font-size: 1.3rem !important;
    }

    &.icon-xl {
        font-size: 1.5rem !important;
    }

    &.icon-xxl {
        font-size: 2rem;
    }

    &.icon-xxxl {
        font-size: 2.5rem;
    }

}


.color-success,
.success {
    color: var(--color-success-light-300) !important;
}

.color-danger,
.danger {
    color: var(--color-danger-light-300) !important;
}

.color-gray,
.text-gray {
    color: var(--color-gray-light-500) !important;
}



.color-gray-light,
.text-gray-light {
    color: var(--color-gray-light-100);
}


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


.bg-gray-dark {
    background-color: var(--color-gray-light-300);
}

.bg-gray {
    background-color: var(--color-gray-light-200);
}

.bg-gray-light {
    background-color: var(--color-gray-light-100);
}

.bg-black {
    background-color: #000;
}

.bg-primary-faded {
    background-color: var(--color-primary-light-50);
}


.bg-warning {
    background-color: var(--color-warning-light-300) !important;
}



.bg-warning-dark {
    background-color: var(--color-warning-light-500) !important;
}

.color-warning-dark {
    color: var(--color-warning-light-500) !important;
}



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

.color-danger-light {
    color: var(--color-danger-light-200) !important;
}



img {
    max-width: 100%;
    height: auto;
}

.text-end {
    text-align: end;
}

small,
.small {
    font-size: 12px;
}

.no-border {
    border: none !important;
}

.no-border-radius {
    border-radius: unset !important;
}

.no-background {
    background-color: none !important;
}

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

.base-border-light {
    border: var(--base-border) !important;
    border-color: var(--color-gray-light-200) !important;
}


.base-text-color {
    color: var(--base-text-color);
}

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


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

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

.base-border-radius {
    border-radius: var(--border-radius);
}

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

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


.border-radius-xxs {
    border-radius: var(--border-radius-xxs);
}


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


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

.line-height-1 {
    line-height: 1 !important;
}

.text-wrap-auto {
    text-wrap: auto;
}


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

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

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

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

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

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

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

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

.line-height-1 {
    line-height: 1 !important;
}

.line-height-1-5 {
    line-height: 1.5 !important;
}

.line-height-2 {
    line-height: 2 !important;
}

.line-height-2-5 {
    line-height: 2.5 !important;
}

.line-height-3 {
    line-height: 3 !important;
}

.line-height-4 {
    line-height: 4 !important;
}

.aspect-ratio-1-1 {
    aspect-ratio: 1/1;
}


.cursor-pointer {
    cursor: pointer;
}

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


.cursor-default {
    cursor: default !important;

    * {
        cursor: default !important;

    }
}








.flex-wrap {
    flex-wrap: wrap;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-start {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.flex-end {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

@media all and (min-width : $breakpoint-lg) {

    .flex-lg-between {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .flex-lg-center {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .flex-lg-start {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .flex-lg-end {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

}

.base-box-shadow {
    box-shadow: var(--base-box-shadow);
}

.flex-grow {
    flex-grow: 1;
}

.overflow-wrap-anywhere {
    overflow-wrap: anywhere;
}

/* Width classes */
@for $i from 1 through 100 {
    .w-#{$i * 5}px {
        width: #{$i * 5}px;
        min-width: #{$i * 5}px;
    }
}

/* Height classes */
@for $i from 1 through 100 {
    .h-#{$i * 5}px {
        height: #{$i * 5}px;
        min-height: #{$i * 5}px;
    }
}