:root {
  --prj-spacing-1: 0.25rem;
  --prj-spacing-2: 0.5rem;
  --prj-spacing-3: 1rem;
  --prj-spacing-4: 2rem;
  --prj-spacing-5: 3rem;
}

.d-flex {
  display: flex;
}

.flex-eq > * {
  flex: 100%;
}

.hstack {
  --prj-gap: var(--prj-spacing-3);
  display: flex;
  gap: var(--prj-gap);
  align-items: center;
}

.hstack-reverse {
  --prj-gap: var(--prj-spacing-3);
  display: flex;
  gap: var(--prj-gap);
  align-items: center;
  flex-direction: row-reverse;
}

.vstack {
  --prj-gap: var(--prj-spacing-3);
  display: flex;
  flex-direction: column;
}

.vstack {
  --prj-gap: var(--prj-spacing-3);
  display: flex;
  flex-direction: column-reverse;
  flex-direction: column;
}

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

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

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

.grid {
  --prj-gap: var(--prj-spacing-3);
  --prj-columns: repeat(3, 1fr);
  display: grid;
  grid-template-columns: var(--prj-columns);
  gap: var(--prj-gap);
}

.grid-cols-1 {
  --prj-columns: repeat(1, 1fr);
}

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

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

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

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

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

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

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

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

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

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

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

.gap-0 {
  --prj-gap: 0;
}

.gap-1 {
  --prj-gap: var(--prj-spacing-1);
}

.gap-2 {
  --prj-gap: var(--prj-spacing-2);
}

.gap-3 {
  --prj-gap: var(--prj-spacing-3);
}

.gap-4 {
  --prj-gap: var(--prj-spacing-4);
}

.gap-5 {
  --prj-gap: var(--prj-spacing-5);
}

.list-unstyle {
  list-style: none;
}

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

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

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

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

.align-start {
  vertical-align: start;
}

.align-center {
  vertical-align: middle;
}

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

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

/* Start Width */
.w-auto {
  width: auto;
}
.w-10 {
  width: 10%;
}
.w-20 {
  width: 20%;
}
.w-30 {
  width: 30%;
}
.w-40 {
  width: 40%;
}
.w-50 {
  width: 50%;
}
.w-60 {
  width: 60%;
}
.w-70 {
  width: 70%;
}
.w-80 {
  width: 80%;
}
.w-90 {
  width: 90%;
}
.w-100 {
  width: 100%;
}
/* End Width */

/* Start Height */
.h-auto {
  height: auto;
}
.h-10 {
  height: 10%;
}
.h-20 {
  height: 20%;
}
.h-30 {
  height: 30%;
}
.h-40 {
  height: 40%;
}
.h-50 {
  height: 50%;
}
.h-60 {
  height: 60%;
}
.h-70 {
  height: 70%;
}
.h-80 {
  height: 80%;
}
.h-90 {
  height: 90%;
}
.h-100 {
  height: 100%;
}
/* End Width */

/* Start Margins */
.m-0 {
  margin: 0 !important;
}
.m-1 {
  margin: var(--prj-spacing-1) !important;
}
.m-2 {
  margin: var(--prj-spacing-2) !important;
}
.m-3 {
  margin: var(--prj-spacing-3) !important;
}
.m-4 {
  margin: var(--prj-spacing-4) !important;
}
.m-5 {
  margin: var(--prj-spacing-5) !important;
}
.m-auto {
  margin: auto !important;
}
.mx-1 {
  margin-right: var(--prj-spacing-1) 0 !important;
}
.mx-2 {
  margin-right: var(--prj-spacing-2) 0 !important;
}
.mx-3 {
  margin-right: var(--prj-spacing-3) 0 !important;
}
.mx-4 {
  margin-right: var(--prj-spacing-4) 0 !important;
}
.mx-5 {
  margin-right: var(--prj-spacing-5) 0 !important;
}
.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}
.my-0 {
  margin-top: var(--prj-spacing-1) !important;
  margin-bottom: var(--prj-spacing-1) !important;
}
.my-1 {
  margin-top: var(--prj-spacing-1) !important;
  margin-bottom: var(--prj-spacing-1) !important;
}
.my-2 {
  margin-top: var(--prj-spacing-2) !important;
  margin-bottom: var(--prj-spacing-2) !important;
}
.my-3 {
  margin-top: var(--prj-spacing-3) !important;
  margin-bottom: var(--prj-spacing-3) !important;
}
.my-4 {
  margin-top: var(--prj-spacing-4) !important;
  margin-bottom: var(--prj-spacing-4) !important;
}
.my-5 {
  margin-top: var(--prj-spacing-5) !important;
  margin-bottom: var(--prj-spacing-5) !important;
}
.my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}
.mt-0 {
  margin-top: 0 !important;
}
.mt-1 {
  margin-top: var(--prj-spacing-1) !important;
}
.mt-2 {
  margin-top: var(--prj-spacing-2) !important;
}
.mt-3 {
  margin-top: var(--prj-spacing-3) !important;
}
.mt-4 {
  margin-top: var(--prj-spacing-4) !important;
}
.mt-5 {
  margin-top: var(--prj-spacing-5) !important;
}
.mt-auto {
  margin-top: auto !important;
}
.mb-0 {
  margin-bottom: 0 !important;
}
.mb-1 {
  margin-bottom: var(--prj-spacing-1) !important;
}
.mb-2 {
  margin-bottom: var(--prj-spacing-2) !important;
}
.mb-3 {
  margin-bottom: var(--prj-spacing-3) !important;
}
.mb-4 {
  margin-bottom: var(--prj-spacing-4) !important;
}
.mb-5 {
  margin-bottom: var(--prj-spacing-5) !important;
}
.mb-auto {
  margin-bottom: auto !important;
}
.ml-1 {
  margin-left: var(--prj-spacing-1) !important;
}
.ml-2 {
  margin-left: var(--prj-spacing-2) !important;
}
.ml-3 {
  margin-left: var(--prj-spacing-3) !important;
}
.ml-4 {
  margin-left: var(--prj-spacing-4) !important;
}
.ml-5 {
  margin-left: var(--prj-spacing-5) !important;
}
.ml-auto {
  margin-left: auto !important;
}
.mr-1 {
  margin-right: var(--prj-spacing-1) !important;
}
.mr-2 {
  margin-right: var(--prj-spacing-2) !important;
}
.mr-3 {
  margin-right: var(--prj-spacing-3) !important;
}
.mr-4 {
  margin-right: var(--prj-spacing-4) !important;
}
.mr-5 {
  margin-right: var(--prj-spacing-5) !important;
}
.mr-auto {
  margin-right: var(--prj-spacing-5) !important;
}
/* End Margins */

/* Start paddings */
.p-0 {
  padding: 0 !important;
}
.p-1 {
  padding: var(--prj-spacing-1) !important;
}
.p-2 {
  padding: var(--prj-spacing-2) !important;
}
.p-3 {
  padding: var(--prj-spacing-3) !important;
}
.p-4 {
  padding: var(--prj-spacing-4) !important;
}
.p-5 {
  padding: var(--prj-spacing-5) !important;
}
.p-auto {
  padding: auto !important;
}
.px-1 {
  padding-left: var(--prj-spacing-1) !important;
  padding-right: var(--prj-spacing-1) !important;
}
.px-2 {
  padding-left: var(--prj-spacing-2) !important;
  padding-right: var(--prj-spacing-2) !important;
}
.px-3 {
  padding-left: var(--prj-spacing-3) !important;
  padding-right: var(--prj-spacing-3) !important;
}
.px-4 {
  padding-left: var(--prj-spacing-4) !important;
  padding-right: var(--prj-spacing-4) !important;
}
.px-5 {
  padding-left: var(--prj-spacing-5) !important;
  padding-right: var(--prj-spacing-5) !important;
}
.px-auto {
  padding-left: auto !important;
  padding-right: auto !important;
}
.py-0 {
  padding-top: var(--prj-spacing-1) !important;
  padding-bottom: var(--prj-spacing-1) !important;
}
.py-1 {
  padding-top: var(--prj-spacing-1) !important;
  padding-bottom: var(--prj-spacing-1) !important;
}
.py-2 {
  padding-top: var(--prj-spacing-2) !important;
  padding-bottom: var(--prj-spacing-2) !important;
}
.py-3 {
  padding-top: var(--prj-spacing-3) !important;
  padding-bottom: var(--prj-spacing-3) !important;
}
.py-4 {
  padding-top: var(--prj-spacing-4) !important;
  padding-bottom: var(--prj-spacing-4) !important;
}
.py-5 {
  padding-top: var(--prj-spacing-5) !important;
  padding-bottom: var(--prj-spacing-5) !important;
}
.py-auto {
  padding-top: auto !important;
  padding-bottom: auto !important;
}
.pt-1 {
  padding-top: var(--prj-spacing-1) !important;
}
.pt-2 {
  padding-top: var(--prj-spacing-2) !important;
}
.pt-3 {
  padding-top: var(--prj-spacing-3) !important;
}
.pt-4 {
  padding-top: var(--prj-spacing-4) !important;
}
.pt-5 {
  padding-top: var(--prj-spacing-5) !important;
}
.pt-auto {
  padding-top: auto !important;
}
.pb-0 {
  padding-bottom: 0 !important;
}
.pb-1 {
  padding-bottom: var(--prj-spacing-1) !important;
}
.pb-2 {
  padding-bottom: var(--prj-spacing-2) !important;
}
.pb-3 {
  padding-bottom: var(--prj-spacing-3) !important;
}
.pb-4 {
  padding-bottom: var(--prj-spacing-4) !important;
}
.pb-5 {
  padding-bottom: var(--prj-spacing-5) !important;
}
.pb-auto {
  padding-bottom: auto !important;
}
.pl-1 {
  padding-left: var(--prj-spacing-1) !important;
}
.pl-2 {
  padding-left: var(--prj-spacing-2) !important;
}
.pl-3 {
  padding-left: var(--prj-spacing-3) !important;
}
.pl-4 {
  padding-left: var(--prj-spacing-4) !important;
}
.pl-5 {
  padding-left: var(--prj-spacing-5) !important;
}
.pl-auto {
  padding-left: auto !important;
}
.pr-1 {
  padding-right: var(--prj-spacing-1) !important;
}
.pr-2 {
  padding-right: var(--prj-spacing-2) !important;
}
.pr-3 {
  padding-right: var(--prj-spacing-3) !important;
}
.pr-4 {
  padding-right: var(--prj-spacing-4) !important;
}
.pr-5 {
  padding-right: var(--prj-spacing-5) !important;
}
.pr-auto {
  padding-right: var(--prj-spacing-5) !important;
}
/* End paddings */