* {
    margin: 0;
    box-sizing: border-box;
}

body {
    font-family: "Inter", sans-serif;
}


.d-flex {
    display: flex;
}

.d-block {
    display: block;
}

.d-inline {
    display: inline;
}

.p-relative {
    position: relative;
}

.w-100 {
    width: 100%;
}
.w-60 {
    width: 60%;
}
.w-50 {
    width: 50%;
}
.w-30 {
    width: 30%;
}

.w-20 {
    width: 20%;
}
.h-100 {
    height: 100%;
}
.w-fit-content {
    width: fit-content;
}
.h-fit-content {
    height: fit-content;
}

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

@media screen and (max-width: 560px) {
    .sm-flex-column {
        flex-direction: column;
    }
    .sm-w-100 {
        width: 100%;
    }
    
}

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

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

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

.align-self-start {
    align-self:flex-start;
}

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

.gap-2 {
    gap: 8px !important;
}
.gap-1 {
    gap: 4px !important;
}

/* Typography */

.text-xs {
    font-size: 0.75rem !important; /* 12px */
    line-height: 1rem; /* 16px */
}

.text-sm {
    font-size: 0.875rem !important; /* 14px */
    line-height: 1.25rem; /* 20px */
}

.text-base {
    font-size: 1rem !important; /* 16px */
    line-height: 1.5rem; /* 24px */
}

.text-lg {
    font-size: 1.125rem !important; /* 18px */
    line-height: 1.75rem; /* 28px */
}

.text-xl {
    font-size: 1.25rem !important; /* 20px */
    line-height: 1.75rem; /* 28px */
}

.text-2xl {
    font-size: 1.5rem !important; /* 24px */
    line-height: 2rem; /* 32px */
}

.text-3xl {
    font-size: 1.875rem !important; /* 30px */
    line-height: 2.25rem; /* 36px */
}

.text-4xl {
    font-size: 2.25rem !important; /* 36px */
    line-height: 2.5rem; /* 40px */
}

.text-5xl {
    font-size: 3rem !important; /* 48px */
    line-height: 1;
}

.text-6xl {
    font-size: 3.75rem !important; /* 60px */
    line-height: 1;
}

.text-7xl {
    font-size: 4.5rem; /* 72px */
    line-height: 1;
}

.text-8xl {
    font-size: 6rem; /* 96px */
    line-height: 1;
}

.text-9xl {
    font-size: 8rem; /* 128px */
    line-height: 1;
}


.mt-2 {
    margin-top: 8px;
}

.mb-4 {
    margin-bottom: 32px;
}

.kg-after::after {
    content: " kg";
}

.p-1 {
    padding: 4px !important;
}

.square {
    aspect-ratio: 1/1;
    width: fit-content;
    height: auto;
}

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

.deleted {
    text-decoration: line-through;
}

.scroll-x {
    overflow-x: auto;
}
.scroll-y {
    overflow-y: auto;
}

/* .scroll-x::-webkit-scrollbar {
    display: none;
} */

.no-white-space {
    white-space: nowrap;
}