.grid {
    display: grid;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
}

.grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
}

.grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
}

.grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
}

.grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.grid-cols-none {
    grid-template-columns: none;
}

.col-auto {
    grid-column: auto;
}

.col-span-1 {
    grid-column: span 1 / span 1;
}

.col-span-2 {
    grid-column: span 2 / span 2;
}

.col-span-3 {
    grid-column: span 3 / span 3;
}

.col-span-4 {
    grid-column: span 4 / span 4;
}

.col-span-5 {
    grid-column: span 5 / span 5;
}

.col-span-6 {
    grid-column: span 6 / span 6;
}

.col-span-7 {
    grid-column: span 7 / span 7;
}

.col-span-8 {
    grid-column: span 8 / span 8;
}

.col-span-9 {
    grid-column: span 9 / span 9;
}

.col-span-10 {
    grid-column: span 10 / span 10;
}

.col-span-11 {
    grid-column: span 11 / span 11;
}

.col-span-12 {
    grid-column: span 12 / span 12;
}

.col-span-full {
    grid-column: 1 / -1;
}

.col-start-1 {
    grid-column-start: 1;
}

.col-start-2 {
    grid-column-start: 2;
}

.col-start-3 {
    grid-column-start: 3;
}

.col-start-4 {
    grid-column-start: 4;
}

.col-start-5 {
    grid-column-start: 5;
}

.col-start-6 {
    grid-column-start: 6;
}

.col-start-7 {
    grid-column-start: 7;
}

.col-start-8 {
    grid-column-start: 8;
}

.col-start-9 {
    grid-column-start: 9;
}

.col-start-10 {
    grid-column-start: 10;
}

.col-start-11 {
    grid-column-start: 11;
}

.col-start-12 {
    grid-column-start: 12;
}

.col-start-auto {
    grid-column-start: auto;
}

.col-end-1 {
    grid-column-end: 1;
}

.col-end-2 {
    grid-column-end: 2;
}

.col-end-3 {
    grid-column-end: 3;
}

.col-end-4 {
    grid-column-end: 4;
}

.col-end-5 {
    grid-column-end: 5;
}

.col-end-6 {
    grid-column-end: 6;
}

.col-end-7 {
    grid-column-end: 7;
}

.col-end-8 {
    grid-column-end: 8;
}

.col-end-9 {
    grid-column-end: 9;
}

.col-end-10 {
    grid-column-end: 10;
}

.col-end-11 {
    grid-column-end: 11;
}

.col-end-12 {
    grid-column-end: 12;
}

.col-end-auto {
    grid-column-end: auto;
}

.grid-rows-1 {
    grid-template-rows: repeat(1, minmax(0, 1fr));
}

.grid-rows-2 {
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

.grid-rows-3 {
    grid-template-rows: repeat(3, minmax(0, 1fr));
}

.grid-rows-4 {
    grid-template-rows: repeat(4, minmax(0, 1fr));
}

.grid-rows-5 {
    grid-template-rows: repeat(5, minmax(0, 1fr));
}

.grid-rows-6 {
    grid-template-rows: repeat(6, minmax(0, 1fr));
}

.grid-rows-7 {
    grid-template-rows: repeat(7, minmax(0, 1fr));
}

.grid-rows-8 {
    grid-template-rows: repeat(8, minmax(0, 1fr));
}

.grid-rows-9 {
    grid-template-rows: repeat(9, minmax(0, 1fr));
}

.grid-rows-10 {
    grid-template-rows: repeat(10, minmax(0, 1fr));
}

.grid-rows-11 {
    grid-template-rows: repeat(11, minmax(0, 1fr));
}

.grid-rows-12 {
    grid-template-rows: repeat(12, minmax(0, 1fr));
}

.grid-rows-none {
    grid-template-rows: none;
}

.row-auto {
    grid-row: auto;
}

.row-span-1 {
    grid-row: span 1 / span 1;
}

.row-span-2 {
    grid-row: span 2 / span 2;
}

.row-span-3 {
    grid-row: span 3 / span 3;
}

.row-span-4 {
    grid-row: span 4 / span 4;
}

.row-span-5 {
    grid-row: span 5 / span 5;
}

.row-span-6 {
    grid-row: span 6 / span 6;
}

.row-span-7 {
    grid-row: span 7 / span 7;
}

.row-span-8 {
    grid-row: span 8 / span 8;
}

.row-span-9 {
    grid-row: span 9 / span 9;
}

.row-span-10 {
    grid-row: span 10 / span 10;
}

.row-span-11 {
    grid-row: span 11 / span 11;
}

.row-span-12 {
    grid-row: span 12 / span 12;
}

.row-span-full {
    grid-row: 1 / -1;
}

.row-start-1 {
    grid-row-start: 1;
}

.row-start-2 {
    grid-row-start: 2;
}

.row-start-3 {
    grid-row-start: 3;
}

.row-start-4 {
    grid-row-start: 4;
}

.row-start-5 {
    grid-row-start: 5;
}

.row-start-6 {
    grid-row-start: 6;
}

.row-start-7 {
    grid-row-start: 7;
}

.row-start-8 {
    grid-row-start: 8;
}

.row-start-9 {
    grid-row-start: 9;
}

.row-start-10 {
    grid-row-start: 10;
}

.row-start-11 {
    grid-row-start: 11;
}

.row-start-12 {
    grid-row-start: 12;
}

.row-start-auto {
    grid-row-start: auto;
}

.row-end-1 {
    grid-row-end: 1;
}

.row-end-2 {
    grid-row-end: 2;
}

.row-end-3 {
    grid-row-end: 3;
}

.row-end-4 {
    grid-row-end: 4;
}

.row-end-5 {
    grid-row-end: 5;
}

.row-end-6 {
    grid-row-end: 6;
}

.row-end-7 {
    grid-row-end: 7;
}

.row-end-8 {
    grid-row-end: 8;
}

.row-end-9 {
    grid-row-end: 9;
}

.row-end-10 {
    grid-row-end: 10;
}

.row-end-11 {
    grid-row-end: 11;
}

.row-end-12 {
    grid-row-end: 12;
}

.row-end-auto {
    grid-row-end: auto;
}

.grid-flow-row {
    grid-auto-flow: row;
}

.grid-flow-col {
    grid-auto-flow: column;
}

.grid-flow-dense {
    grid-auto-flow: dense;
}

.grid-flow-row-dense {
    grid-auto-flow: row dense;
}

.grid-flow-col-dense {
    grid-auto-flow: column dense;
}

.auto-cols-auto {
    grid-auto-columns: auto;
}

.auto-cols-min {
    grid-auto-columns: min-content;
}

.auto-cols-max {
    grid-auto-columns: max-content;
}

.auto-cols-fr {
    grid-auto-columns: minmax(0, 1fr);
}

.auto-rows-auto {
    grid-auto-rows: auto;
}

.auto-rows-min {
    grid-auto-rows: min-content;
}

.auto-rows-max {
    grid-auto-rows: max-content;
}

.auto-rows-fr {
    grid-auto-rows: minmax(0, 1fr);
}

.gap-0 {
    gap: 0px;
}

.gap-x-0 {
    column-gap: 0px;
}

.gap-y-0 {
    row-gap: 0px;
}

.gap-px {
    gap: 1px;
}

.gap-x-px {
    column-gap: 1px;
}

.gap-y-px {
    row-gap: 1px;
}

.gap-1 {
    gap: 0.25rem
}

.gap-x-1 {
    column-gap: 0.25rem
}

.gap-y-1 {
    row-gap: 0.25rem;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-x-2 {
    column-gap: 0.5rem;
}

.gap-y-2 {
    row-gap: 0.5rem;
}

.gap-3 {
    gap: 0.75rem;
}

.gap-x-3 {
    column-gap: 0.75rem;
}

.gap-y-3 {
    row-gap: 0.75rem;
}

.gap-4 {
    gap: 1rem;
}

.gap-x-4 {
    column-gap: 1rem;
}

.gap-y-4 {
    row-gap: 1rem;
}

.gap-5 {
    gap: 1.25rem;
}

.gap-x-5 {
    column-gap: 1.25rem
}

.gap-y-5 {
    row-gap: 1.25rem;
}

.gap-6 {
    gap: 1.5rem;
}

.gap-x-6 {
    column-gap: 1.5rem;
}

.gap-y-6 {
    row-gap: 1.5rem;
}

.gap-7 {
    gap: 1.75rem;
}

.gap-x-7 {
    column-gap: 1.75rem;
}

.gap-y-7 {
    row-gap: 1.75rem;
}

.gap-8 {
    gap: 2rem;
}

.gap-x-8 {
    column-gap: 2rem;
}

.gap-y-8 {
    row-gap: 2rem;
}

.order-1 {
    order: 1;
}

.order-2 {
    order: 2;
}

.order-3 {
    order: 3;
}

.order-4 {
    order: 4;
}

.order-5 {
    order: 5;
}

.order-6 {
    order: 6;
}

.order-7 {
    order: 7;
}

.order-8 {
    order: 8;
}

.order-9 {
    order: 9;
}

.order-10 {
    order: 10;
}

.order-11 {
    order: 11;
}

.order-12 {
    order: 12;
}

.order-first {
    order: -999
}

.order-last {
    order: 9999;
}

.order-none {
    order: 0;
}

.cursor-auto {
    cursor: auto;
}

.cursor-default {
    cursor: default;
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-wait {
    cursor: wait;
}

.cursor-text {
    cursor: text;
}

.cursor-move {
    cursor: move;
}

.cursor-help {
    cursor: help;
}

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

.cursor-none {
    cursor: none;
}

.cursor-context-menu {
    cursor: context-menu;
}

.cursor-progress {
    cursor: progress;
}

.cursor-cell {
    cursor: cell;
}

.cursor-crosshair {
    cursor: crosshair;
}

.cursor-vertical-text {
    cursor: vertical-text;
}

.cursor-alias {
    cursor: alias;
}

.cursor-copy {
    cursor: copy;
}

.cursor-no-drop {
    cursor: no-drop;
}

.cursor-grab {
    cursor: grab;
}

.cursor-grabbing {
    cursor: grabbing;
}

.cursor-all-scroll {
    cursor: all-scroll;
}

.cursor-col-resize {
    cursor: col-resize;
}

.cursor-row-resize {
    cursor: row-resize;
}

.cursor-n-resize {
    cursor: n-resize;
}

.cursor-e-resize {
    cursor: e-resize;
}

.cursor-s-resize {
    cursor: s-resize;
}

.cursor-w-resize {
    cursor: w-resize;
}

.cursor-ne-resize {
    cursor: ne-resize;
}

.cursor-nw-resize {
    cursor: nw-resize;
}

.cursor-se-resize {
    cursor: se-resize;
}

.cursor-sw-resize {
    cursor: sw-resize;
}

.cursor-ew-resize {
    cursor: ew-resize;
}

.cursor-ns-resize {
    cursor: ns-resize;
}

.cursor-nesw-resize {
    cursor: nesw-resize;
}

.cursor-nwse-resize {
    cursor: nwse-resize;
}

.cursor-zoom-in {
    cursor: zoom-in;
}

.cursor-zoom-out {
    cursor: zoom-out;
}

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

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

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

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

.text-start {
    text-align: start;

}

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

.order-1 {
    order: 1;
}

.order-2 {
    order: 2;
}

.order-3 {
    order: 3;
}

.order-4 {
    order: 4;
}

.order-5 {
    order: 5;
}

.order-6 {
    order: 6;
}

.order-7 {
    order: 7;
}

.order-8 {
    order: 8;
}

.order-9 {
    order: 9;
}

.order-10 {
    order: 10;
}

.order-first {
    order: -9999;
}

.order-last {
    order: 9999;

}

.order-none {
    order: 0;
}

.flex {
    display: flex;
}

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

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

/* -- tailwind ---*/
.w-0 {
    width: 0px;
}

.w-px {
    width: 1px;
}

.w-1 {
    width: 0.25rem;
    /* 4px */
}


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

.w-3 {
    width: 0.75rem;
    /* 12px */
}

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

.w-5 {
    width: 1.25rem;
    /* 20px */
}

.w-6 {
    width: 1.5rem;
    /* 24px */
}

.w-7 {
    width: 1.75rem;
    /* 28px */
}

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

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

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

.w-11 {
    width: 2.75rem;
    /* 44px */
}

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

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

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

.w-20 {
    width: 5rem;
    /* 80px */
}

.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-44 {
    width: 11rem;
    /* 176px */
}

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

.w-52 {
    width: 13rem;
    /* 208px */
}

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

.w-60 {
    width: 15rem;
    /* 240px */
}

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

.w-72 {
    width: 18rem;
    /* 288px */
}

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

.w-96 {
    width: 24rem;
}

.w-112 {
    width: 28rem;
}

.w-auto {
    width: auto;
}

.w-full {
    width: 100%;
}

.w-screen {
    width: 100vw;
}

.w-min {
    width: min-content;
}

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

.w-fit {
    width: fit-content;
}

.h-0 {
    height: 0px;
}

.h-px {
    height: 1px;
}

/* 2px */
.h-1 {
    height: 0.25rem;
}

/* 6px */
.h-2 {
    height: 0.5rem;
}

/* 10px */
.h-3 {
    height: 0.75rem;
}

/* 14px */
.h-4 {
    height: 1rem;
}

/* 16px */
.h-5 {
    height: 1.25rem;
}

/* 20px */
.h-6 {
    height: 1.5rem;
}

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

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

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

/* 36px */
.h-10 {
    height: 2.5rem;
}

/* 40px */
.h-11 {
    height: 2.75rem;
}

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

/* 48px */
.h-14 {
    height: 3.5rem;
}

/* 56px */
.h-16 {
    height: 4rem;
}

/* 64px */
.h-20 {
    height: 5rem;
}

/* 80px */
.h-24 {
    height: 6rem;
}

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

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

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

/* 144px */
.h-40 {
    height: 10rem;
}

/* 160px */
.h-44 {
    height: 11rem;
}

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

/* 192px */
.h-52 {
    height: 13rem;
}

/* 208px */
.h-56 {
    height: 14rem;
}

/* 224px */
.h-60 {
    height: 15rem;
}

/* 240px */
.h-64 {
    height: 16rem;
}

/* 256px */
.h-72 {
    height: 18rem;
}

/* 288px */
.h-80 {
    height: 20rem;
}

/* 320px */
.h-96 {
    height: 24rem;
}

/* 384px */
.h-auto {
    height: auto;
}

.h-full {
    height: 100%;
}

.h-screen {
    height: 100vh;
}

.h-min {
    height: min-content;
}

.h-max {
    height: max-content;
}

.h-fit {
    height: fit-content;
}

.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}

.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
}

.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}

.text-5xl {
    font-size: 3rem;
    line-height: 1;
}

.text-6xl {
    font-size: 3.75rem;
    line-height: 1;
}

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

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

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

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

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

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

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

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

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

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

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

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

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


.absolute {
    position: absolute;
}

.top-0 {
    top: 0;
}

.left-0 {
    left: 0;
}

.right-0 {
    right: 0;
}

.bottom-0 {
    bottom: 0;
}

.m-0 {
    margin: 0;
}

.p-0 {
    padding: 0;
}

.h-screen {
    height: 100vh;
}

.w-min {
    width: min-content;
}

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

.w-fit {
    width: fit-content;
}

.w-screen {
    width: 100vw;
}

.w-min {
    width: min-content;
}

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

.w-fit {
    width: fit-content;
}

.d-none {
    display: none;
}

.text-3xl {
    font-size: 30px;
    line-height: 2.25rem;
}

.text-2xl {
    font-size: 24px;
    line-height: 2rem;
}

.text-xl {
    font-size: 20px;
    line-height: 1.75rem;
}

.text-lg {
    font-size: 18px;
    line-height: 1.75rem;
}

.text-base {
    font-size: 16px;
    line-height: 1.5rem;
}

.text-sm {
    font-size: 14px;
    line-height: 1.25rem;
}

.text-xs {
    font-size: 12px;
    line-height: 1rem;
}

.font-extrabold {
    font-weight: 800;
}

.font-bold {
    font-weight: 700;
}

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

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

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

.text-black {
    color: #000;
}

.text-white {
    color: #fff;
}
.pl-1{
    padding-left: 0.25rem;
}
.pl-5 {
    padding-left: 1.25rem;
}
.ml-auto{
    margin-left: auto;
}
.self-end{
    align-self: flex-end;
}

.bg-red-500{
    background-color: red;
}

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