/* Utilities CSS */

:root {
--spacing-unit: 0.25rem; /* 1 unit = 0.25rem */
--maroon: #782456;
--green: #EDFFE8;
--blue: #E8FCFF;
--yellow: #FFF3DD;
--small-screen: 700px;
}

/* Background colors */

.bg-maroon {
background-color: var(--maroon);
}

.bg-green {
background-color: var(--green);
}

.bg-blue {
background-color: var(--blue);
}

.bg-yellow {
background-color: var(--yellow);
}

.text-white {
color: white;
}

.text-black {
color: black;
}

.text-maroon {
  color: var(--maroon);
}

/* Gaps */
.gap-0 { gap: 0; }
.gap-1 { gap: calc(1 * var(--spacing-unit)); }
.gap-2 { gap: calc(2 * var(--spacing-unit)); }
.gap-3 { gap: calc(3 * var(--spacing-unit)); }
.gap-4 { gap: calc(4 * var(--spacing-unit)); }
.gap-5 { gap: calc(5 * var(--spacing-unit)); }
.gap-6 { gap: calc(6 * var(--spacing-unit)); }
.gap-7 { gap: calc(7 * var(--spacing-unit)); }
.gap-8 { gap: calc(8 * var(--spacing-unit)); }
.gap-9 { gap: calc(9 * var(--spacing-unit)); }
.gap-10 { gap: calc(10 * var(--spacing-unit)); }
.gap-11 { gap: calc(11 * var(--spacing-unit)); }
.gap-12 { gap: calc(12 * var(--spacing-unit)); }

/* Margins */
.m-0 { margin: 0; }
.m-1 { margin: calc(1 * var(--spacing-unit)); }
.m-2 { margin: calc(2 * var(--spacing-unit)); }
.m-3 { margin: calc(3 * var(--spacing-unit)); }
.m-4 { margin: calc(4 * var(--spacing-unit)); }
.m-5 { margin: calc(5 * var(--spacing-unit)); }
.m-6 { margin: calc(6 * var(--spacing-unit)); }
.m-7 { margin: calc(7 * var(--spacing-unit)); }
.m-8 { margin: calc(8 * var(--spacing-unit)); }
.m-9 { margin: calc(9 * var(--spacing-unit)); }
.m-10 { margin: calc(10 * var(--spacing-unit)); }
.m-11 { margin: calc(11 * var(--spacing-unit)); }
.m-12 { margin: calc(12 * var(--spacing-unit)); }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: calc(1 * var(--spacing-unit)); }
.mt-2 { margin-top: calc(2 * var(--spacing-unit)); }
.mt-3 { margin-top: calc(3 * var(--spacing-unit)); }
.mt-4 { margin-top: calc(4 * var(--spacing-unit)); }
.mt-5 { margin-top: calc(5 * var(--spacing-unit)); }
.mt-6 { margin-top: calc(6 * var(--spacing-unit)); }
.mt-7 { margin-top: calc(7 * var(--spacing-unit)); }
.mt-8 { margin-top: calc(8 * var(--spacing-unit)); }
.mt-9 { margin-top: calc(9 * var(--spacing-unit)); }
.mt-10 { margin-top: calc(10 * var(--spacing-unit)); }
.mt-11 { margin-top: calc(11 * var(--spacing-unit)); }
.mt-12 { margin-top: calc(12 * var(--spacing-unit)); }

.mr-0 { margin-right: 0; }
.mr-1 { margin-right: calc(1 * var(--spacing-unit)); }
.mr-2 { margin-right: calc(2 * var(--spacing-unit)); }
.mr-3 { margin-right: calc(3 * var(--spacing-unit)); }
.mr-4 { margin-right: calc(4 * var(--spacing-unit)); }
.mr-5 { margin-right: calc(5 * var(--spacing-unit)); }
.mr-6 { margin-right: calc(6 * var(--spacing-unit)); }
.mr-7 { margin-right: calc(7 * var(--spacing-unit)); }
.mr-8 { margin-right: calc(8 * var(--spacing-unit)); }
.mr-9 { margin-right: calc(9 * var(--spacing-unit)); }
.mr-10 { margin-right: calc(10 * var(--spacing-unit)); }
.mr-11 { margin-right: calc(11 * var(--spacing-unit)); }
.mr-12 { margin-right: calc(12 * var(--spacing-unit)); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: calc(1 * var(--spacing-unit)); }
.mb-2 { margin-bottom: calc(2 * var(--spacing-unit)); }
.mb-3 { margin-bottom: calc(3 * var(--spacing-unit)); }
.mb-4 { margin-bottom: calc(4 * var(--spacing-unit)); }
.mb-5 { margin-bottom: calc(5 * var(--spacing-unit)); }
.mb-6 { margin-bottom: calc(6 * var(--spacing-unit)); }
.mb-7 { margin-bottom: calc(7 * var(--spacing-unit)); }
.mb-8 { margin-bottom: calc(8 * var(--spacing-unit)); }
.mb-9 { margin-bottom: calc(9 * var(--spacing-unit)); }
.mb-10 { margin-bottom: calc(10 * var(--spacing-unit)); }
.mb-11 { margin-bottom: calc(11 * var(--spacing-unit)); }
.mb-12 { margin-bottom: calc(12 * var(--spacing-unit)); }

.ml-0 { margin-left: 0; }
.ml-1 { margin-left: calc(1 * var(--spacing-unit)); }
.ml-2 { margin-left: calc(2 * var(--spacing-unit)); }
.ml-3 { margin-left: calc(3 * var(--spacing-unit)); }
.ml-4 { margin-left: calc(4 * var(--spacing-unit)); }
.ml-5 { margin-left: calc(5 * var(--spacing-unit)); }
.ml-6 { margin-left: calc(6 * var(--spacing-unit)); }
.ml-7 { margin-left: calc(7 * var(--spacing-unit)); }
.ml-8 { margin-left: calc(8 * var(--spacing-unit)); }
.ml-9 { margin-left: calc(9 * var(--spacing-unit)); }
.ml-10 { margin-left: calc(10 * var(--spacing-unit)); }
.ml-11 { margin-left: calc(11 * var(--spacing-unit)); }
.ml-12 { margin-left: calc(12 * var(--spacing-unit)); }

.mx-0 { margin-left: 0; margin-right: 0; }
.mx-1 { margin-left: calc(1 * var(--spacing-unit)); margin-right: calc(1 * var(--spacing-unit)); }
.mx-2 { margin-left: calc(2 * var(--spacing-unit)); margin-right: calc(2 * var(--spacing-unit)); }
.mx-3 { margin-left: calc(3 * var(--spacing-unit)); margin-right: calc(3 * var(--spacing-unit)); }
.mx-4 { margin-left: calc(4 * var(--spacing-unit)); margin-right: calc(4 * var(--spacing-unit)); }
.mx-5 { margin-left: calc(5 * var(--spacing-unit)); margin-right: calc(5 * var(--spacing-unit)); }
.mx-6 { margin-left: calc(6 * var(--spacing-unit)); margin-right: calc(6 * var(--spacing-unit)); }
.mx-7 { margin-left: calc(7 * var(--spacing-unit)); margin-right: calc(7 * var(--spacing-unit)); }
.mx-8 { margin-left: calc(8 * var(--spacing-unit)); margin-right: calc(8 * var(--spacing-unit)); }
.mx-9 { margin-left: calc(9 * var(--spacing-unit)); margin-right: calc(9 * var(--spacing-unit)); }
.mx-10 { margin-left: calc(10 * var(--spacing-unit)); margin-right: calc(10 * var(--spacing-unit)); }
.mx-11 { margin-left: calc(11 * var(--spacing-unit)); margin-right: calc(11 * var(--spacing-unit)); }
.mx-12 { margin-left: calc(12 * var(--spacing-unit)); margin-right: calc(12 * var(--spacing-unit)); }

.my-0 { margin-top: 0; margin-bottom: 0; }
.my-1 { margin-top: calc(1 * var(--spacing-unit)); margin-bottom: calc(1 * var(--spacing-unit)); }
.my-2 { margin-top: calc(2 * var(--spacing-unit)); margin-bottom: calc(2 * var(--spacing-unit)); }
.my-3 { margin-top: calc(3 * var(--spacing-unit)); margin-bottom: calc(3 * var(--spacing-unit)); }
.my-4 { margin-top: calc(4 * var(--spacing-unit)); margin-bottom: calc(4 * var(--spacing-unit)); }
.my-5 { margin-top: calc(5 * var(--spacing-unit)); margin-bottom: calc(5 * var(--spacing-unit)); }
.my-6 { margin-top: calc(6 * var(--spacing-unit)); margin-bottom: calc(6 * var(--spacing-unit)); }
.my-7 { margin-top: calc(7 * var(--spacing-unit)); margin-bottom: calc(7 * var(--spacing-unit)); }
.my-8 { margin-top: calc(8 * var(--spacing-unit)); margin-bottom: calc(8 * var(--spacing-unit)); }
.my-9 { margin-top: calc(9 * var(--spacing-unit)); margin-bottom: calc(9 * var(--spacing-unit)); }
.my-10 { margin-top: calc(10 * var(--spacing-unit)); margin-bottom: calc(10 * var(--spacing-unit)); }
.my-11 { margin-top: calc(11 * var(--spacing-unit)); margin-bottom: calc(11 * var(--spacing-unit)); }
.my-12 { margin-top: calc(12 * var(--spacing-unit)); margin-bottom: calc(12 * var(--spacing-unit)); }

.m-auto { margin: auto }
.ml-auto { margin-left: auto }
.mr-auto { margin-right: auto }
.mt-auto { margin-top: auto }
.mb-auto { margin-bottom: auto}
.my-auto { margin-block: auto}
.mx-auto { margin-inline: auto}

/* Paddings */
.p-0 { padding: 0; }
.p-1 { padding: calc(1 * var(--spacing-unit)); }
.p-2 { padding: calc(2 * var(--spacing-unit)); }
.p-3 { padding: calc(3 * var(--spacing-unit)); }
.p-4 { padding: calc(4 * var(--spacing-unit)); }
.p-5 { padding: calc(5 * var(--spacing-unit)); }
.p-6 { padding: calc(6 * var(--spacing-unit)); }
.p-7 { padding: calc(7 * var(--spacing-unit)); }
.p-8 { padding: calc(8 * var(--spacing-unit)); }
.p-9 { padding: calc(9 * var(--spacing-unit)); }
.p-10 { padding: calc(10 * var(--spacing-unit)); }
.p-11 { padding: calc(11 * var(--spacing-unit)); }
.p-12 { padding: calc(12 * var(--spacing-unit)); }

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: calc(1 * var(--spacing-unit)); }
.pt-2 { padding-top: calc(2 * var(--spacing-unit)); }
.pt-3 { padding-top: calc(3 * var(--spacing-unit)); }
.pt-4 { padding-top: calc(4 * var(--spacing-unit)); }
.pt-5 { padding-top: calc(5 * var(--spacing-unit)); }
.pt-6 { padding-top: calc(6 * var(--spacing-unit)); }
.pt-7 { padding-top: calc(7 * var(--spacing-unit)); }
.pt-8 { padding-top: calc(8 * var(--spacing-unit)); }
.pt-9 { padding-top: calc(9 * var(--spacing-unit)); }
.pt-10 { padding-top: calc(10 * var(--spacing-unit)); }
.pt-11 { padding-top: calc(11 * var(--spacing-unit)); }
.pt-12 { padding-top: calc(12 * var(--spacing-unit)); }

.pr-0 { padding-right: 0; }
.pr-1 { padding-right: calc(1 * var(--spacing-unit)); }
.pr-2 { padding-right: calc(2 * var(--spacing-unit)); }
.pr-3 { padding-right: calc(3 * var(--spacing-unit)); }
.pr-4 { padding-right: calc(4 * var(--spacing-unit)); }
.pr-5 { padding-right: calc(5 * var(--spacing-unit)); }
.pr-6 { padding-right: calc(6 * var(--spacing-unit)); }
.pr-7 { padding-right: calc(7 * var(--spacing-unit)); }
.pr-8 { padding-right: calc(8 * var(--spacing-unit)); }
.pr-9 { padding-right: calc(9 * var(--spacing-unit)); }
.pr-10 { padding-right: calc(10 * var(--spacing-unit)); }
.pr-11 { padding-right: calc(11 * var(--spacing-unit)); }
.pr-12 { padding-right: calc(12 * var(--spacing-unit)); }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: calc(1 * var(--spacing-unit)); }
.pb-2 { padding-bottom: calc(2 * var(--spacing-unit)); }
.pb-3 { padding-bottom: calc(3 * var(--spacing-unit)); }
.pb-4 { padding-bottom: calc(4 * var(--spacing-unit)); }
.pb-5 { padding-bottom: calc(5 * var(--spacing-unit)); }
.pb-6 { padding-bottom: calc(6 * var(--spacing-unit)); }
.pb-7 { padding-bottom: calc(7 * var(--spacing-unit)); }
.pb-8 { padding-bottom: calc(8 * var(--spacing-unit)); }
.pb-9 { padding-bottom: calc(9 * var(--spacing-unit)); }
.pb-10 { padding-bottom: calc(10 * var(--spacing-unit)); }
.pb-11 { padding-bottom: calc(11 * var(--spacing-unit)); }
.pb-12 { padding-bottom: calc(12 * var(--spacing-unit)); }

.pl-0 { padding-left: 0; }
.pl-1 { padding-left: calc(1 * var(--spacing-unit)); }
.pl-2 { padding-left: calc(2 * var(--spacing-unit)); }
.pl-3 { padding-left: calc(3 * var(--spacing-unit)); }
.pl-4 { padding-left: calc(4 * var(--spacing-unit)); }
.pl-5 { padding-left: calc(5 * var(--spacing-unit)); }
.pl-6 { padding-left: calc(6 * var(--spacing-unit)); }
.pl-7 { padding-left: calc(7 * var(--spacing-unit)); }
.pl-8 { padding-left: calc(8 * var(--spacing-unit)); }
.pl-9 { padding-left: calc(9 * var(--spacing-unit)); }
.pl-10 { padding-left: calc(10 * var(--spacing-unit)); }
.pl-11 { padding-left: calc(11 * var(--spacing-unit)); }
.pl-12 { padding-left: calc(12 * var(--spacing-unit)); }

.px-0 { padding-left: 0; padding-right: 0; }
.px-1 { padding-left: calc(1 * var(--spacing-unit)); padding-right: calc(1 * var(--spacing-unit)); }
.px-2 { padding-left: calc(2 * var(--spacing-unit)); padding-right: calc(2 * var(--spacing-unit)); }
.px-3 { padding-left: calc(3 * var(--spacing-unit)); padding-right: calc(3 * var(--spacing-unit)); }
.px-4 { padding-left: calc(4 * var(--spacing-unit)); padding-right: calc(4 * var(--spacing-unit)); }
.px-5 { padding-left: calc(5 * var(--spacing-unit)); padding-right: calc(5 * var(--spacing-unit)); }
.px-6 { padding-left: calc(6 * var(--spacing-unit)); padding-right: calc(6 * var(--spacing-unit)); }
.px-7 { padding-left: calc(7 * var(--spacing-unit)); padding-right: calc(7 * var(--spacing-unit)); }
.px-8 { padding-left: calc(8 * var(--spacing-unit)); padding-right: calc(8 * var(--spacing-unit)); }
.px-9 { padding-left: calc(9 * var(--spacing-unit)); padding-right: calc(9 * var(--spacing-unit)); }
.px-10 { padding-left: calc(10 * var(--spacing-unit)); padding-right: calc(10 * var(--spacing-unit)); }
.px-11 { padding-left: calc(11 * var(--spacing-unit)); padding-right: calc(11 * var(--spacing-unit)); }
.px-12 { padding-left: calc(12 * var(--spacing-unit)); padding-right: calc(12 * var(--spacing-unit)); }

.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: calc(1 * var(--spacing-unit)); padding-bottom: calc(1 * var(--spacing-unit)); }
.py-2 { padding-top: calc(2 * var(--spacing-unit)); padding-bottom: calc(2 * var(--spacing-unit)); }
.py-3 { padding-top: calc(3 * var(--spacing-unit)); padding-bottom: calc(3 * var(--spacing-unit)); }
.py-4 { padding-top: calc(4 * var(--spacing-unit)); padding-bottom: calc(4 * var(--spacing-unit)); }
.py-5 { padding-top: calc(5 * var(--spacing-unit)); padding-bottom: calc(5 * var(--spacing-unit)); }
.py-6 { padding-top: calc(6 * var(--spacing-unit)); padding-bottom: calc(6 * var(--spacing-unit)); }
.py-7 { padding-top: calc(7 * var(--spacing-unit)); padding-bottom: calc(7 * var(--spacing-unit)); }
.py-8 { padding-top: calc(8 * var(--spacing-unit)); padding-bottom: calc(8 * var(--spacing-unit)); }
.py-9 { padding-top: calc(9 * var(--spacing-unit)); padding-bottom: calc(9 * var(--spacing-unit)); }
.py-10 { padding-top: calc(10 * var(--spacing-unit)); padding-bottom: calc(10 * var(--spacing-unit)); }
.py-11 { padding-top: calc(11 * var(--spacing-unit)); padding-bottom: calc(11 * var(--spacing-unit)); }
.py-12 { padding-top: calc(12 * var(--spacing-unit)); padding-bottom: calc(12 * var(--spacing-unit)); }
  
/* Base Width Utilities */

.w-0 {
  width: 0;
}

.w-full {
  width: 100%;
}

.w-1 {
  width: var(--spacing-unit); /* 1 spacing unit */
}

.w-2 {
  width: calc(var(--spacing-unit) * 2);
}

.w-4 {
  width: calc(var(--spacing-unit) * 4);
}

.w-8 {
  width: calc(var(--spacing-unit) * 8);
}

.w-16 {
  width: calc(var(--spacing-unit) * 16);
}

.w-32 {
  width: calc(var(--spacing-unit) * 32);
}

.w-48 {
  width: calc(var(--spacing-unit) * 48);
}

.w-64 {
  width: calc(var(--spacing-unit) * 64);
}

.w-80 {
  width: calc(var(--spacing-unit) * 80);
}

.w-96 {
  width: calc(var(--spacing-unit) * 96);
}

.w-auto {
  width: auto;
}

.w-screen {
  width: 100vw;
}

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

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

/* Percentage-Based Width Utilities */

.w-1\/2 {
  width: 50%;
}

.w-1\/3 {
  width: 33.333333%;
}

.w-2\/3 {
  width: 66.666667%;
}

.w-1\/4 {
  width: 25%;
}

.w-2\/4 {
  width: 50%;
}

.w-3\/4 {
  width: 75%;
}

.w-1\/5 {
  width: 20%;
}

.w-2\/5 {
  width: 40%;
}

.w-3\/5 {
  width: 60%;
}

.w-4\/5 {
  width: 80%;
}

.w-1\/6 {
  width: 16.666667%;
}

.w-2\/6 {
  width: 33.333333%;
}

.w-3\/6 {
  width: 50%;
}

.w-4\/6 {
  width: 66.666667%;
}

.w-5\/6 {
  width: 83.333333%;
}

.w-1\/12 {
  width: 8.333333%;
}

.w-2\/12 {
  width: 16.666667%;
}

.w-3\/12 {
  width: 25%;
}

.w-4\/12 {
  width: 33.333333%;
}

.w-5\/12 {
  width: 41.666667%;
}

.w-6\/12 {
  width: 50%;
}

.w-7\/12 {
  width: 58.333333%;
}

.w-8\/12 {
  width: 66.666667%;
}

.w-9\/12 {
  width: 75%;
}

.w-10\/12 {
  width: 83.333333%;
}

.w-11\/12 {
  width: 91.666667%;
}

/* Small Screen (sm) Width Utilities */

@media (max-width: 700px) {
  .sm\:w-0 {
    width: 0;
  }

  .sm\:w-full {
    width: 100%;
  }

  .sm\:w-1 {
    width: var(--spacing-unit);
  }

  .sm\:w-2 {
    width: calc(var(--spacing-unit) * 2);
  }

  .sm\:w-4 {
    width: calc(var(--spacing-unit) * 4);
  }

  .sm\:w-8 {
    width: calc(var(--spacing-unit) * 8);
  }

  .sm\:w-16 {
    width: calc(var(--spacing-unit) * 16);
  }

  .sm\:w-32 {
    width: calc(var(--spacing-unit) * 32);
  }

  .sm\:w-48 {
    width: calc(var(--spacing-unit) * 48);
  }

  .sm\:w-64 {
    width: calc(var(--spacing-unit) * 64);
  }

  .sm\:w-80 {
    width: calc(var(--spacing-unit) * 80);
  }

  .sm\:w-96 {
    width: calc(var(--spacing-unit) * 96);
  }

  .sm\:w-auto {
    width: auto;
  }

  .sm\:w-screen {
    width: 100vw;
  }

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

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

  /* Percentage-Based Width Utilities */

  .sm\:w-1\/2 {
    width: 50%;
  }

  .sm\:w-1\/3 {
    width: 33.333333%;
  }

  .sm\:w-2\/3 {
    width: 66.666667%;
  }

  .sm\:w-1\/4 {
    width: 25%;
  }

  .sm\:w-2\/4 {
    width: 50%;
  }

  .sm\:w-3\/4 {
    width: 75%;
  }

  .sm\:w-1\/5 {
    width: 20%;
  }

  .sm\:w-2\/5 {
    width: 40%;
  }

  .sm\:w-3\/5 {
    width: 60%;
  }

  .sm\:w-4\/5 {
    width: 80%;
  }

  .sm\:w-1\/6 {
    width: 16.666667%;
  }

  .sm\:w-2\/6 {
    width: 33.333333%;
  }

  .sm\:w-3\/6 {
    width: 50%;
  }

  .sm\:w-4\/6 {
    width: 66.666667%;
  }

  .sm\:w-5\/6 {
    width: 83.333333%;
  }

  .sm\:w-1\/12 {
    width: 8.333333%;
  }

  .sm\:w-2\/12 {
    width: 16.666667%;
  }

  .sm\:w-3\/12 {
    width: 25%;
  }

  .sm\:w-4\/12 {
    width: 33.333333%;
  }

  .sm\:w-5\/12 {
    width: 41.666667%;
  }

  .sm\:w-6\/12 {
    width: 50%;
  }

  .sm\:w-7\/12 {
    width: 58.333333%;
  }

  .sm\:w-8\/12 {
    width: 66.666667%;
  }

  .sm\:w-9\/12 {
    width: 75%;
  }

  .sm\:w-10\/12 {
    width: 83.333333%;
  }

  .sm\:w-11\/12 {
    width: 91.666667%;
  }
}

/* Base Flex Utilities */

/* Flex Container */
.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

/* Flex Direction */
.flex-row {
  flex-direction: row;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

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

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

/* Flex Wrap */
.flex-wrap {
  flex-wrap: wrap;
}

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

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

/* Flex Items */
.flex-1 {
  flex: 1 1 0%;
}

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

.flex-initial {
  flex: 0 1 auto;
}

.flex-none {
  flex: none;
}

/* Justify Content */
.justify-start {
  justify-content: flex-start;
}

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

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

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

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

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

/* Align Items */
.items-start {
  align-items: flex-start;
}

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

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

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

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

/* Align Content */
.content-start {
  align-content: flex-start;
}

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

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

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

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

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

/* Align Self */
.self-auto {
  align-self: auto;
}

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

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

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

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

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

/* Order */
.order-first {
  order: -9999;
}

.order-last {
  order: 9999;
}

.order-none {
  order: 0;
}

.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;
}

/* Flex Grow */
.flex-grow {
  flex-grow: 1;
}

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

/* Flex Shrink */
.flex-shrink {
  flex-shrink: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

/* Additional Utilities for Flex Basis */
.flex-basis-auto {
  flex-basis: auto;
}

.flex-basis-0 {
  flex-basis: 0;
}

.flex-basis-1 {
  flex-basis: 1rem;
}

.flex-basis-2 {
  flex-basis: 2rem;
}

/* Additional Utilities for Flex Grow */
.flex-grow-1 {
  flex-grow: 1;
}

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

/* Additional Utilities for Flex Shrink */
.flex-shrink-1 {
  flex-shrink: 1;
}

.flex-shrink-2 {
  flex-shrink: 2;
}

/* Small Screen (sm) Flex Utilities */

/* Flex Container */
@media (max-width: 700px) {
  .sm\:flex {
    display: flex;
  }

  .sm\:inline-flex {
    display: inline-flex;
  }

  /* Flex Direction */
  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:flex-row-reverse {
    flex-direction: row-reverse;
  }

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

  .sm\:flex-col-reverse {
    flex-direction: column-reverse;
  }

  /* Flex Wrap */
  .sm\:flex-wrap {
    flex-wrap: wrap;
  }

  .sm\:flex-wrap-reverse {
    flex-wrap: wrap-reverse;
  }

  .sm\:flex-nowrap {
    flex-wrap: nowrap;
  }

  /* Flex Items */
  .sm\:flex-1 {
    flex: 1 1 0%;
  }

  .sm\:flex-auto {
    flex: 1 1 auto;
  }

  .sm\:flex-initial {
    flex: 0 1 auto;
  }

  .sm\:flex-none {
    flex: none;
  }

  /* Justify Content */
  .sm\:justify-start {
    justify-content: flex-start;
  }

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

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

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

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

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

  /* Align Items */
  .sm\:items-start {
    align-items: flex-start;
  }

  .sm\:items-end {
    align-items: flex-end;
  }

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

  .sm\:items-baseline {
    align-items: baseline;
  }

  .sm\:items-stretch {
    align-items: stretch;
  }

  /* Align Content */
  .sm\:content-start {
    align-content: flex-start;
  }

  .sm\:content-end {
    align-content: flex-end;
  }

  .sm\:content-center {
    align-content: center;
  }

  .sm\:content-between {
    align-content: space-between;
  }

  .sm\:content-around {
    align-content: space-around;
  }

  .sm\:content-evenly {
    align-content: space-evenly;
  }

  /* Align Self */
  .sm\:self-auto {
    align-self: auto;
  }

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

  .sm\:self-end {
    align-self: flex-end;
  }

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

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

  .sm\:self-baseline {
    align-self: baseline;
  }

  /* Order */
  .sm\:order-first {
    order: -9999;
  }

  .sm\:order-last {
    order: 9999;
  }

  .sm\:order-none {
    order: 0;
  }

  .sm\:order-1 {
    order: 1;
  }

  .sm\:order-2 {
    order: 2;
  }

  .sm\:order-3 {
    order: 3;
  }

  .sm\:order-4 {
    order: 4;
  }

  .sm\:order-5 {
    order: 5;
  }

  .sm\:order-6 {
    order: 6;
  }

  .sm\:order-7 {
    order: 7;
  }

  .sm\:order-8 {
    order: 8;
  }

  .sm\:order-9 {
    order: 9;
  }

  .sm\:order-10 {
    order: 10;
  }

  .sm\:order-11 {
    order: 11;
  }

  .sm\:order-12 {
    order: 12;
  }

  /* Flex Grow */
  .sm\:flex-grow {
    flex-grow: 1;
  }

  .sm\:flex-grow-0 {
    flex-grow: 0;
  }

  /* Flex Shrink */
  .sm\:flex-shrink {
    flex-shrink: 1;
  }

  .sm\:flex-shrink-0 {
    flex-shrink: 0;
  }

  /* Additional Utilities for Flex Basis */
  .sm\:flex-basis-auto {
    flex-basis: auto;
  }

  .sm\:flex-basis-0 {
    flex-basis: 0;
  }

  .sm\:flex-basis-1 {
    flex-basis: 1rem;
  }

  .sm\:flex-basis-2 {
    flex-basis: 2rem;
  }

  /* Additional Utilities for Flex Grow */
  .sm\:flex-grow-1 {
    flex-grow: 1;
  }

  .sm\:flex-grow-2 {
    flex-grow: 2;
  }

  /* Additional Utilities for Flex Shrink */
  .sm\:flex-shrink-1 {
    flex-shrink: 1;
  }

  .sm\:flex-shrink-2 {
    flex-shrink: 2;
  }
}

.flex-static {
  flex: 0 0 auto;
}

.whitespace-wrap {
  white-space: wrap;
}