/* UTILITIES.CSS */

.d-none {
    display: none !important
}

.d-block {
    display: block !important
}

.d-flex {
    display: flex !important
}

.flex-wrap {
    flex-wrap: wrap
}

.flex-column {
    flex-direction: column
}

.justify-center {
    justify-content: center
}

.justify-between {
    justify-content: space-between
}

.align-center {
    align-items: center
}

.w-100 {
    width: 100%
}

.h-100 {
    height: 100%
}

.text-center {
    text-align: center
}

.text-left {
    text-align: left
}

.text-right {
    text-align: right
}

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

.shadow {
    box-shadow: var(--shadow-md)
}

.bg-card {
    background: var(--bg-card)
}

.mt-0 {
    margin-top: 0
}

.mt-10 {
    margin-top: 10px
}

.mt-20 {
    margin-top: 20px
}

.mt-30 {
    margin-top: 30px
}

.mt-40 {
    margin-top: 40px
}

.mt-60 {
    margin-top: 60px
}

.mb-0 {
    margin-bottom: 0
}

.mb-10 {
    margin-bottom: 10px
}

.mb-20 {
    margin-bottom: 20px
}

.mb-30 {
    margin-bottom: 30px
}

.mb-40 {
    margin-bottom: 40px
}

.mb-60 {
    margin-bottom: 60px
}

.pt-20 {
    padding-top: 20px
}

.pt-40 {
    padding-top: 40px
}

.pb-20 {
    padding-bottom: 20px
}

.pb-40 {
    padding-bottom: 40px
}

.p-10 {
    padding: 10px
}

.p-20 {
    padding: 20px
}

.p-30 {
    padding: 30px
}

.p-40 {
    padding: 40px
}

.gap-10 {
    gap: 10px
}

.gap-20 {
    gap: 20px
}

.gap-30 {
    gap: 30px
}