/* Tailwind classes */

.flex {
    display: flex;
}

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


.gap-2 {
    gap: 0.5rem; /* 8px */
}

.gap-4 {
    gap: 1rem; /* 16px */
}

.gap-8 {
    gap: 2rem; /* 32px */
}

.m-4 {
    margin: 1rem; /* 16px */
}

.m-8 {
    margin: 2rem; /* 32px */
}


.h-7 {
    height: 1.75rem; /* 28px */
}

.h-8 {
    height: 2rem; /* 32px */
}

.h-9 {
    height: 2.25rem; /* 36px */
}

.w-14 {
    width: 3.5rem; /* 56px */
}

.w-16 {
    width: 4rem; /* 64px */
}

.w-24 {
    width: 6rem; /* 96px */
}
.w-28 {
    width: 7rem; /* 112px */
}

.w-32 {
    width: 8rem; /* 128px */
}

.w-36 {
    width: 9rem; /* 144px */
}

.w-40 {
    width: 10rem; /* 160px */
}

.w-48 {
    width: 12rem; /* 192px */
}

.h-12 {
    height: 3rem; /* 48px */
}

.m-12 {
    margin: 3rem; /* 48px */
}

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

.justify-start {
    justify-content: flex-start;
}

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

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

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

.justify-items-end {
    justify-items: end;
}

.justify-items-stretch {
    justify-items: stretch;
}

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

.align-around {
    align-items: space-around;
}

.align-evenly {
    align-items: space-evenly;
}

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

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

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

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

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

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

.max-w-xxs {
    max-width: 16rem; /* 256 */
}

.max-w-xs {
    max-width: 20rem; /* 320px */
}

.max-w-sm {
    max-width: 24rem; /* 384px */
}

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

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

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


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

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

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



.justify-self-auto { justify-self: auto;}
.justify-self-start { justify-self: start;}
.justify-self-end { justify-self: end;}
.justify-self-center { justify-self: center;}
.justify-self-stretch { justify-self: stretch;}




.h-full {
    height: 100%;
}

.h-screen {
    height: 100vh;
}



.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.font-normal {
    font-weight: 400;
}

.font-medium {
    font-weight: 500;
}

/* Font Weight */
.font-bold {
    font-weight: 700;
}

.font-semibold {
    font-weight: 600;
}

.font-light {
    font-weight: 300;
}

.font-thin {
    font-weight: 100;
}

/* Font Size */
.text-xs {
    font-size: 0.75rem; /* 12px */
}

.text-sm {
    font-size: 0.875rem; /* 14px */
}

.text-lg {
    font-size: 1.125rem; /* 18px */
}

.text-xl {
    font-size: 1.25rem; /* 20px */
}

.text-2xl {
    font-size: 1.5rem; /* 24px */
}

.text-3xl {
    font-size: 1.875rem; /* 30px */
}

.text-4xl {
    font-size: 2.25rem; /* 36px */
}

.text-5xl {
    font-size: 3rem; /* 48px */
}

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

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

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

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

/* Text Color */
.text-gray-500 {
    color: #6b7280;
}

.text-blue-500 {
    color: #3b82f6;
}

.text-red-500 {
    color: #ef4444;
}

.text-green-500 {
    color: #10b981;
}

.text-yellow-500 {
    color: #f59e0b;
}

/* Line Height */
.leading-none {
    line-height: 1;
}

.leading-tight {
    line-height: 1.25;
}

.leading-snug {
    line-height: 1.375;
}

.leading-normal {
    line-height: 1.5;
}

.leading-relaxed {
    line-height: 1.625;
}

.leading-loose {
    line-height: 2;
}

.visible {
    visibility: visible;
}

.invisible {
    visibility: hidden;
}

.collapse {
    visibility: collapse;
}

/*Add padding */
.p-0 {
    padding: 0;
}
.p-1 {
    padding: 0.25rem; /* 4px */
}
.p-2 {
    padding: 0.5rem; /* 8px */
}

.p-3 {
    padding: 0.75rem; /* 12px */
}

.pr-1 {
    padding-right: 0.25rem; /* 4px */
}

.pr-2 {
    padding-right: 0.5rem; /* 8px */
}

.pl-1 {
    padding-left: 0.25rem; /* 4px */
}

.pl-2 {
    padding-left: 0.5rem; /* 8px */
}
/* Tailwind classes end */