/* Declaración de utility-classes en css */
/* ! si se llega a modificar una o más utility-classes, aplicará esos cambios en los elementos y clases en las que es ocupada */


/* Background colors */

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

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

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

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


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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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


.bg-orange-100 {
  background-color: var(--orange-100);
}
  
.bg-orange-200 {
  background-color: var(--orange-200);
}
  
.bg-orange-300 {
  background-color: var(--orange-300);
}
  
.bg-orange-400 {
  background-color: var(--orange-400);
}
  
.bg-orange-500 {
  background-color: var(--orange-500);
}
  
.bg-orange-600 {
  background-color: var(--orange-600);
}
  
.bg-orange-700 {
  background-color: var(--orange-700);
}
  
.bg-orange-800 {
  background-color: var(--orange-800);
}
  
.bg-orange-900 {
  background-color: var(--orange-900);
}


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

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

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

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

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

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

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

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

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

  
.bg-green-100 {
  background-color: var(--green-100);
}
  
.bg-green-200 {
  background-color: var(--green-200);
}
  
.bg-green-300 {
  background-color: var(--green-300);
}
  
.bg-green-400 {
  background-color: var(--green-400);
}
  
.bg-green-500 {
  background-color: var(--green-500);
}
  
.bg-green-600 {
  background-color: var(--green-600);
}
  
.bg-green-700 {
  background-color: var(--green-700);
}
  
.bg-green-800 {
  background-color: var(--green-800);
}
  
.bg-green-900 {
  background-color: var(--green-900);
}


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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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



/* Text colors */

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

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

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

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


.text-gray-100 {
  color: var(--gray-100);
}

.text-gray-200 {
  color: var(--gray-200);
}

.text-gray-300 {
  color: var(--gray-300);
}

.text-gray-400 {
  color: var(--gray-400);
}

.text-gray-500 {
  color: var(--gray-500);
}

.text-gray-600 {
  color: var(--gray-600);
}

.text-gray-700 {
  color: var(--gray-700);
}

.text-gray-800 {
  color: var(--gray-800);
}

.text-gray-900 {
  color: var(--gray-900);
}


.text-red-100 {
  color: var(--red-100);
}

.text-red-200 {
  color: var(--red-200);
}

.text-red-300 {
  color: var(--red-300);
}

.text-red-400 {
  color: var(--red-400);
}

.text-red-500 {
  color: var(--red-500);
}

.text-red-600 {
  color: var(--red-600);
}

.text-red-700 {
  color: var(--red-700);
}

.text-red-800 {
  color: var(--red-800);
}

.text-red-900 {
  color: var(--red-900);
}


.text-orange-100 {
  color: var(--orange-100);
}
  
.text-orange-200 {
  color: var(--orange-200);
}
  
.text-orange-300 {
  color: var(--orange-300);
}
  
.text-orange-400 {
  color: var(--orange-400);
}
  
.text-orange-500 {
  color: var(--orange-500);
}
  
.text-orange-600 {
  color: var(--orange-600);
}
  
.text-orange-700 {
  color: var(--orange-700);
}
  
.text-orange-800 {
  color: var(--orange-800);
}
  
.text-orange-900 {
  color: var(--orange-900);
}


.text-yellow-100 {
  color: var(--yellow-100);
}

.text-yellow-200 {
  color: var(--yellow-200);
}

.text-yellow-300 {
  color: var(--yellow-300);
}

.text-yellow-400 {
  color: var(--yellow-400);
}

.text-yellow-500 {
  color: var(--yellow-500);
}

.text-yellow-600 {
  color: var(--yellow-600);
}

.text-yellow-700 {
  color: var(--yellow-700);
}

.text-yellow-800 {
  color: var(--yellow-800);
}

.text-yellow-900 {
  color: var(--yellow-900);
}

  
.text-green-100 {
  color: var(--green-100);
}
  
.text-green-200 {
  color: var(--green-200);
}
  
.text-green-300 {
  color: var(--green-300);
}
  
.text-green-400 {
  color: var(--green-400);
}
  
.text-green-500 {
  color: var(--green-500);
}
  
.text-green-600 {
  color: var(--green-600);
}
  
.text-green-700 {
  color: var(--green-700);
}
  
.text-green-800 {
  color: var(--green-800);
}
  
.text-green-900 {
  color: var(--green-900);
}


.text-teal-100 {
  color: var(--teal-100);
}

.text-teal-200 {
  color: var(--teal-200);
}

.text-teal-300 {
  color: var(--teal-300);
}

.text-teal-400 {
  color: var(--teal-400);
}

.text-teal-500 {
  color: var(--teal-500);
}

.text-teal-600 {
  color: var(--teal-600);
}

.text-teal-700 {
  color: var(--teal-700);
}

.text-teal-800 {
  color: var(--teal-800);
}

.text-teal-900 {
  color: var(--teal-900);
}


.text-blue-100 {
  color: var(--blue-100);
}

.text-blue-200 {
  color: var(--blue-200);
}

.text-blue-300 {
  color: var(--blue-300);
}

.text-blue-400 {
  color: var(--blue-400);
}

.text-blue-500 {
  color: var(--blue-500);
}

.text-blue-600 {
  color: var(--blue-600);
}

.text-blue-700 {
  color: var(--blue-700);
}

.text-blue-800 {
  color: var(--blue-800);
}

.text-blue-900 {
  color: var(--blue-900);
}


.text-indigo-100 {
  color: var(--indigo-100);
}

.text-indigo-200 {
  color: var(--indigo-200);
}

.text-indigo-300 {
  color: var(--indigo-300);
}

.text-indigo-400 {
  color: var(--indigo-400);
}

.text-indigo-500 {
  color: var(--indigo-500);
}

.text-indigo-600 {
  color: var(--indigo-600);
}

.text-indigo-700 {
  color: var(--indigo-700);
}

.text-indigo-800 {
  color: var(--indigo-800);
}

.text-indigo-900 {
  color: var(--indigo-900);
}


.text-purple-100 {
  color: var(--purple-100);
}

.text-purple-200 {
  color: var(--purple-200);
}

.text-purple-300 {
  color: var(--purple-300);
}

.text-purple-400 {
  color: var(--purple-400);
}

.text-purple-500 {
  color: var(--purple-500);
}

.text-purple-600 {
  color: var(--purple-600);
}

.text-purple-700 {
  color: var(--purple-700);
}

.text-purple-800 {
  color: var(--purple-800);
}

.text-purple-900 {
  color: var(--purple-900);
}


.text-pink-100 {
  color: var(--pink-100);
}

.text-pink-200 {
  color: var(--pink-200);
}

.text-pink-300 {
  color: var(--pink-300);
}

.text-pink-400 {
  color: var(--pink-400);
}

.text-pink-500 {
  color: var(--pink-500);
}

.text-pink-600 {
  color: var(--pink-600);
}

.text-pink-700 {
  color: var(--pink-700);
}

.text-pink-800 {
  color: var(--pink-800);
}

.text-pink-900 {
  color: var(--pink-900);
}



/* Margins */

/* Margin {top, right, bottom, left} */

.m-auto {
  margin: auto;
}

.m-px {
  margin: var(--spacing-px);
}

.m-0 {
  margin: var(--spacing-0);
}

.m-1 {
  margin: var(--spacing-1);
}

.m-2 {
  margin: var(--spacing-2);
}

.m-3 {
  margin: var(--spacing-3);
}

.m-4 {
  margin: var(--spacing-4);
}

.m-5 {
  margin: var(--spacing-5);
}

.m-6 {
  margin: var(--spacing-6);
}

.m-7 {
  margin: var(--spacing-7);
}

.m-8 {
  margin: var(--spacing-8);
}

.m-9 {
  margin: var(--spacing-9);
}

.m-10 {
  margin: var(--spacing-10);
}


/* Margin top */

.mt-auto {
  margin-top: auto;
}

.mt-px {
  margin-top: var(--spacing-px);
}

.mt-0 {
  margin-top: var(--spacing-0);
}

.mt-1 {
  margin-top: var(--spacing-1);
}

.mt-2 {
  margin-top: var(--spacing-2);
}

.mt-3 {
  margin-top: var(--spacing-3);
}

.mt-4 {
  margin-top: var(--spacing-4);
}

.mt-5 {
  margin-top: var(--spacing-5);
}

.mt-6 {
  margin-top: var(--spacing-6);
}

.mt-7 {
  margin-top: var(--spacing-7);
}

.mt-8 {
  margin-top: var(--spacing-8);
}

.mt-9 {
  margin-top: var(--spacing-9);
}

.mt-10 {
  margin-top: var(--spacing-10);
}


/* Margin right */

.mr-auto {
  margin-right: auto;
}

.mr-px {
  margin-right: var(--spacing-px);
}

.mr-0 {
  margin-right: var(--spacing-0);
}

.mr-1 {
  margin-right: var(--spacing-1);
}

.mr-2 {
  margin-right: var(--spacing-2);
}

.mr-3 {
  margin-right: var(--spacing-3);
}

.mr-4 {
  margin-right: var(--spacing-4);
}

.mr-5 {
  margin-right: var(--spacing-5);
}

.mr-6 {
  margin-right: var(--spacing-6);
}

.mr-7 {
  margin-right: var(--spacing-7);
}

.mr-8 {
  margin-right: var(--spacing-8);
}

.mr-9 {
  margin-right: var(--spacing-9);
}

.mr-10 {
  margin-right: var(--spacing-10);
}


/* Margin bottom */

.mb-auto {
  margin-bottom: auto;
}

.mb-px {
  margin-bottom: var(--spacing-px);
}

.mb-0 {
  margin-bottom: var(--spacing-0);
}

.mb-1 {
  margin-bottom: var(--spacing-1);
}

.mb-2 {
  margin-bottom: var(--spacing-2);
}

.mb-3 {
  margin-bottom: var(--spacing-3);
}

.mb-4 {
  margin-bottom: var(--spacing-4);
}

.mb-5 {
  margin-bottom: var(--spacing-5);
}

.mb-6 {
  margin-bottom: var(--spacing-6);
}

.mb-7 {
  margin-bottom: var(--spacing-7);
}

.mb-8 {
  margin-bottom: var(--spacing-8);
}

.mb-9 {
  margin-bottom: var(--spacing-9);
}

.mb-10 {
  margin-bottom: var(--spacing-10);
}


/* Margin left */

.ml-auto {
  margin-left: auto;
}

.ml-px {
  margin-left: var(--spacing-px);
}

.ml-0 {
  margin-left: var(--spacing-0);
}

.ml-1 {
  margin-left: var(--spacing-1);
}

.ml-2 {
  margin-left: var(--spacing-2);
}

.ml-3 {
  margin-left: var(--spacing-3);
}

.ml-4 {
  margin-left: var(--spacing-4);
}

.ml-5 {
  margin-left: var(--spacing-5);
}

.ml-6 {
  margin-left: var(--spacing-6);
}

.ml-7 {
  margin-left: var(--spacing-7);
}

.ml-8 {
  margin-left: var(--spacing-8);
}

.ml-9 {
  margin-left: var(--spacing-9);
}

.ml-10 {
  margin-left: var(--spacing-10);
}


/* Margin {right, left} */

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.mx-px {
  margin-left: var(--spacing-px);
  margin-right: var(--spacing-px);
}

.mx-0 {
  margin-left: var(--spacing-0);
  margin-right: var(--spacing-0);
}

.mx-1 {
  margin-left: var(--spacing-1);
  margin-right: var(--spacing-1);
}

.mx-2 {
  margin-left: var(--spacing-2);
  margin-right: var(--spacing-2);
}

.mx-3 {
  margin-left: var(--spacing-3);
  margin-right: var(--spacing-3);
}

.mx-4 {
  margin-left: var(--spacing-4);
  margin-right: var(--spacing-4);
}

.mx-5 {
  margin-left: var(--spacing-5);
  margin-right: var(--spacing-5);
}

.mx-6 {
  margin-left: var(--spacing-6);
  margin-right: var(--spacing-6);
}

.mx-7 {
  margin-left: var(--spacing-7);
  margin-right: var(--spacing-7);
}

.mx-8 {
  margin-left: var(--spacing-8);
  margin-right: var(--spacing-8);
}

.mx-9 {
  margin-left: var(--spacing-9);
  margin-right: var(--spacing-9);
}

.mx-10 {
  margin-left: var(--spacing-10);
  margin-right: var(--spacing-10);
}


/* Margin {top, bottom} */

.my-auto {
  margin-bottom: auto;
  margin-top: auto;
}

.my-px {
  margin-bottom: var(--spacing-px);
  margin-top: var(--spacing-px);
}

.my-0 {
  margin-bottom: var(--spacing-0);
  margin-top: var(--spacing-0);
}

.my-1 {
  margin-bottom: var(--spacing-1);
  margin-top: var(--spacing-1);
}

.my-2 {
  margin-bottom: var(--spacing-2);
  margin-top: var(--spacing-2);
}

.my-3 {
  margin-bottom: var(--spacing-3);
  margin-top: var(--spacing-3);
}

.my-4 {
  margin-bottom: var(--spacing-4);
  margin-top: var(--spacing-4);
}

.my-5 {
  margin-bottom: var(--spacing-5);
  margin-top: var(--spacing-5);
}

.my-6 {
  margin-bottom: var(--spacing-6);
  margin-top: var(--spacing-6);
}

.my-7 {
  margin-bottom: var(--spacing-7);
  margin-top: var(--spacing-7);
}

.my-8 {
  margin-bottom: var(--spacing-8);
  margin-top: var(--spacing-8);
}

.my-9 {
  margin-bottom: var(--spacing-9);
  margin-top: var(--spacing-9);
}

.my-10 {
  margin-bottom: var(--spacing-10);
  margin-top: var(--spacing-10);
}



/* Paddings */

/* Padding {top, right, bottom, left} */

.p-px {
  padding: var(--spacing-px);
}

.p-0 {
  padding: var(--spacing-0);
}

.p-1 {
  padding: var(--spacing-1);
}

.p-2 {
  padding: var(--spacing-2);
}

.p-3 {
  padding: var(--spacing-3);
}

.p-4 {
  padding: var(--spacing-4);
}

.p-5 {
  padding: var(--spacing-5);
}

.p-6 {
  padding: var(--spacing-6);
}

.p-7 {
  padding: var(--spacing-7);
}

.p-8 {
  padding: var(--spacing-8);
}

.p-9 {
  padding: var(--spacing-9);
}

.p-10 {
  padding: var(--spacing-10);
}


/* Padding top */

.pt-px {
  padding-top: var(--spacing-px);
}

.pt-0 {
  padding-top: var(--spacing-0);
}

.pt-1 {
  padding-top: var(--spacing-1);
}

.pt-2 {
  padding-top: var(--spacing-2);
}

.pt-3 {
  padding-top: var(--spacing-3);
}

.pt-4 {
  padding-top: var(--spacing-4);
}

.pt-5 {
  padding-top: var(--spacing-5);
}

.pt-6 {
  padding-top: var(--spacing-6);
}

.pt-7 {
  padding-top: var(--spacing-7);
}

.pt-8 {
  padding-top: var(--spacing-8);
}

.pt-9 {
  padding-top: var(--spacing-9);
}

.pt-10 {
  padding-top: var(--spacing-10);
}


/* Padding right */

.pr-px {
  padding-right: var(--spacing-px);
}

.pr-0 {
  padding-right: var(--spacing-0);
}

.pr-1 {
  padding-right: var(--spacing-1);
}

.pr-2 {
  padding-right: var(--spacing-2);
}

.pr-3 {
  padding-right: var(--spacing-3);
}

.pr-4 {
  padding-right: var(--spacing-4);
}

.pr-5 {
  padding-right: var(--spacing-5);
}

.pr-6 {
  padding-right: var(--spacing-6);
}

.pr-7 {
  padding-right: var(--spacing-7);
}

.pr-8 {
  padding-right: var(--spacing-8);
}

.pr-9 {
  padding-right: var(--spacing-9);
}

.pr-10 {
  padding-right: var(--spacing-10);
}


/* Padding bottom */

.pb-px {
  padding-bottom: var(--spacing-px);
}

.pb-0 {
  padding-bottom: var(--spacing-0);
}

.pb-1 {
  padding-bottom: var(--spacing-1);
}

.pb-2 {
  padding-bottom: var(--spacing-2);
}

.pb-3 {
  padding-bottom: var(--spacing-3);
}

.pb-4 {
  padding-bottom: var(--spacing-4);
}

.pb-5 {
  padding-bottom: var(--spacing-5);
}

.pb-6 {
  padding-bottom: var(--spacing-6);
}

.pb-7 {
  padding-bottom: var(--spacing-7);
}

.pb-8 {
  padding-bottom: var(--spacing-8);
}

.pb-9 {
  padding-bottom: var(--spacing-9);
}

.pb-10 {
  padding-bottom: var(--spacing-10);
}


/* Padding left */

.pl-px {
  padding-left: var(--spacing-px);
}

.pl-0 {
  padding-left: var(--spacing-0);
}

.pl-1 {
  padding-left: var(--spacing-1);
}

.pl-2 {
  padding-left: var(--spacing-2);
}

.pl-3 {
  padding-left: var(--spacing-3);
}

.pl-4 {
  padding-left: var(--spacing-4);
}

.pl-5 {
  padding-left: var(--spacing-5);
}

.pl-6 {
  padding-left: var(--spacing-6);
}

.pl-7 {
  padding-left: var(--spacing-7);
}

.pl-8 {
  padding-left: var(--spacing-8);
}

.pl-9 {
  padding-left: var(--spacing-9);
}

.pl-10 {
  padding-left: var(--spacing-10);
}


/* Padding {right, left} */

.px-px {
  padding-left: var(--spacing-px);
  padding-right: var(--spacing-px);
}

.px-0 {
  padding-left: var(--spacing-0);
  padding-right: var(--spacing-0);
}

.px-1 {
  padding-left: var(--spacing-1);
  padding-right: var(--spacing-1);
}

.px-2 {
  padding-left: var(--spacing-2);
  padding-right: var(--spacing-2);
}

.px-3 {
  padding-left: var(--spacing-3);
  padding-right: var(--spacing-3);
}

.px-4 {
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-4);
}

.px-5 {
  padding-left: var(--spacing-5);
  padding-right: var(--spacing-5);
}

.px-6 {
  padding-left: var(--spacing-6);
  padding-right: var(--spacing-6);
}

.px-7 {
  padding-left: var(--spacing-7);
  padding-right: var(--spacing-7);
}

.px-8 {
  padding-left: var(--spacing-8);
  padding-right: var(--spacing-8);
}

.px-9 {
  padding-left: var(--spacing-9);
  padding-right: var(--spacing-9);
}

.px-10 {
  padding-left: var(--spacing-10);
  padding-right: var(--spacing-10);
}


/* Padding {top, bottom} */

.py-px {
  padding-bottom: var(--spacing-px);
  padding-top: var(--spacing-px);
}

.py-0 {
  padding-bottom: var(--spacing-0);
  padding-top: var(--spacing-0);
}

.py-1 {
  padding-bottom: var(--spacing-1);
  padding-top: var(--spacing-1);
}

.py-2 {
  padding-bottom: var(--spacing-2);
  padding-top: var(--spacing-2);
}

.py-3 {
  padding-bottom: var(--spacing-3);
  padding-top: var(--spacing-3);
}

.py-4 {
  padding-bottom: var(--spacing-4);
  padding-top: var(--spacing-4);
}

.py-5 {
  padding-bottom: var(--spacing-5);
  padding-top: var(--spacing-5);
}

.py-6 {
  padding-bottom: var(--spacing-6);
  padding-top: var(--spacing-6);
}

.py-7 {
  padding-bottom: var(--spacing-7);
  padding-top: var(--spacing-7);
}

.py-8 {
  padding-bottom: var(--spacing-8);
  padding-top: var(--spacing-8);
}

.py-9 {
  padding-bottom: var(--spacing-9);
  padding-top: var(--spacing-9);
}

.py-10 {
  padding-bottom: var(--spacing-10);
  padding-top: var(--spacing-10);
}



/* Displays */

.block {
  display: block;
}

.inline {
  display: inline;
}

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

.flex {
  display: flex;
}

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

.hidden {
  display: none;
}




/* Positions */

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.relative {
  position: relative;
}

.static {
  position: static;
}

.sticky {
  position: sticky;
}



/* Top, Bottom, Left, Right */

.top-0 {
  top: 0;
}

.bottom-0 {
  bottom: 0;
}

.left-0 {
  left: 0;
}

.right-0 {
  right: 0;
}

.inset-0 {
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
}

.inset-x-0 {
  left: 0;
  right: 0;
}

.inset-y-0 {
  bottom: 0;
  top: 0;
}



/* Z-Index */

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

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

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

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

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

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

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

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

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

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

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

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



/* Font sizes */

.text-xs {
  font-size: var(--text-xs);
}

.text-sm {
  font-size: var(--text-sm);
}

.text-base {
  font-size: var(--text-base);
}

.text-lg {
  font-size: var(--text-lg);
}

.text-xl {
  font-size: var(--text-xl);
}

.text-2xl {
  font-size: var(--text-2xl);
}

.text-3xl {
  font-size: var(--text-3xl);
}

.text-4xl {
  font-size: var(--text-4xl);
}

.text-5xl {
  font-size: var(--text-5xl);
}

.text-6xl {
  font-size: var(--text-6xl);
}



/* Text decorations */

.underline {
  text-decoration: underline;
}

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

.no-underline {
  text-decoration: none;
}



/* Font styles */

.italic {
  font-style: italic;
}

.not-italic {
  font-style: normal;
}



/* Font weights */

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

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

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

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

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

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

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

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

.font-black {
  font-weight: 900;
}



/* Border radiuses */

/* Border radius {top, right, bottom, left} */

.rounded-px {
  border-radius: var(--rounded-px);
}

.rounded-0 {
  border-radius: var(--rounded-0);
}

.rounded-1 {
  border-radius: var(--rounded-1);
}

.rounded-2 {
  border-radius: var(--rounded-2);
}

.rounded-3 {
  border-radius: var(--rounded-3);
}

.rounded-4 {
  border-radius: var(--rounded-4);
}

.rounded-5 {
  border-radius: var(--rounded-5);
}

.rounded-6 {
  border-radius: var(--rounded-6);
}

.rounded-7 {
  border-radius: var(--rounded-7);
}

.rounded-8 {
  border-radius: var(--rounded-8);
}

.rounded-9 {
  border-radius: var(--rounded-9);
}

.rounded-10 {
  border-radius: var(--rounded-10);
}

.rounded-full {
  border-radius: var(--rounded-full);
}


/* Border top radius */

.rounded-t-px {
  border-top-left-radius: var(--rounded-px);
  border-top-right-radius: var(--rounded-px);
}

.rounded-t-0 {
  border-top-left-radius: var(--rounded-0);
  border-top-right-radius: var(--rounded-0);
}

.rounded-t-1 {
  border-top-left-radius: var(--rounded-1);
  border-top-right-radius: var(--rounded-1);
}

.rounded-t-2 {
  border-top-left-radius: var(--rounded-2);
  border-top-right-radius: var(--rounded-2);
}

.rounded-t-3 {
  border-top-left-radius: var(--rounded-3);
  border-top-right-radius: var(--rounded-3);
}

.rounded-t-4 {
  border-top-left-radius: var(--rounded-4);
  border-top-right-radius: var(--rounded-4);
}

.rounded-t-5 {
  border-top-left-radius: var(--rounded-5);
  border-top-right-radius: var(--rounded-5);
}

.rounded-t-6 {
  border-top-left-radius: var(--rounded-6);
  border-top-right-radius: var(--rounded-6);
}

.rounded-t-7 {
  border-top-left-radius: var(--rounded-7);
  border-top-right-radius: var(--rounded-7);
}

.rounded-t-8 {
  border-top-left-radius: var(--rounded-8);
  border-top-right-radius: var(--rounded-8);
}

.rounded-t-9 {
  border-top-left-radius: var(--rounded-9);
  border-top-right-radius: var(--rounded-9);
}

.rounded-t-10 {
  border-top-left-radius: var(--rounded-10);
  border-top-right-radius: var(--rounded-10);
}

.rounded-t-full {
  border-top-left-radius: var(--rounded-full);
  border-top-right-radius: var(--rounded-full);
}


/* Border right radius */

.rounded-r-px {
  border-top-right-radius: var(--rounded-px);
  border-bottom-right-radius: var(--rounded-px);
}

.rounded-r-0 {
  border-top-right-radius: var(--rounded-0);
  border-bottom-right-radius: var(--rounded-0);
}

.rounded-r-1 {
  border-top-right-radius: var(--rounded-1);
  border-bottom-right-radius: var(--rounded-1);
}

.rounded-r-2 {
  border-top-right-radius: var(--rounded-2);
  border-bottom-right-radius: var(--rounded-2);
}

.rounded-r-3 {
  border-top-right-radius: var(--rounded-3);
  border-bottom-right-radius: var(--rounded-3);
}

.rounded-r-4 {
  border-top-right-radius: var(--rounded-4);
  border-bottom-right-radius: var(--rounded-4);
}

.rounded-r-5 {
  border-top-right-radius: var(--rounded-5);
  border-bottom-right-radius: var(--rounded-5);
}

.rounded-r-6 {
  border-top-right-radius: var(--rounded-6);
  border-bottom-right-radius: var(--rounded-6);
}

.rounded-r-7 {
  border-top-right-radius: var(--rounded-7);
  border-bottom-right-radius: var(--rounded-7);
}

.rounded-r-8 {
  border-top-right-radius: var(--rounded-8);
  border-bottom-right-radius: var(--rounded-8);
}

.rounded-r-9 {
  border-top-right-radius: var(--rounded-9);
  border-bottom-right-radius: var(--rounded-9);
}

.rounded-r-10 {
  border-top-right-radius: var(--rounded-10);
  border-bottom-right-radius: var(--rounded-10);
}

.rounded-r-full {
  border-top-right-radius: var(--rounded-full);
  border-bottom-right-radius: var(--rounded-full);
}


/* Border bottom radius */

.rounded-b-px {
  border-bottom-left-radius: var(--rounded-px);
  border-bottom-right-radius: var(--rounded-px);
}

.rounded-b-0 {
  border-bottom-left-radius: var(--rounded-0);
  border-bottom-right-radius: var(--rounded-0);
}

.rounded-b-1 {
  border-bottom-left-radius: var(--rounded-1);
  border-bottom-right-radius: var(--rounded-1);
}

.rounded-b-2 {
  border-bottom-left-radius: var(--rounded-2);
  border-bottom-right-radius: var(--rounded-2);
}

.rounded-b-3 {
  border-bottom-left-radius: var(--rounded-3);
  border-bottom-right-radius: var(--rounded-3);
}

.rounded-b-4 {
  border-bottom-left-radius: var(--rounded-4);
  border-bottom-right-radius: var(--rounded-4);
}

.rounded-b-5 {
  border-bottom-left-radius: var(--rounded-5);
  border-bottom-right-radius: var(--rounded-5);
}

.rounded-b-6 {
  border-bottom-left-radius: var(--rounded-6);
  border-bottom-right-radius: var(--rounded-6);
}

.rounded-b-7 {
  border-bottom-left-radius: var(--rounded-7);
  border-bottom-right-radius: var(--rounded-7);
}

.rounded-b-8 {
  border-bottom-left-radius: var(--rounded-8);
  border-bottom-right-radius: var(--rounded-8);
}

.rounded-b-9 {
  border-bottom-left-radius: var(--rounded-9);
  border-bottom-right-radius: var(--rounded-9);
}

.rounded-b-10 {
  border-bottom-left-radius: var(--rounded-10);
  border-bottom-right-radius: var(--rounded-10);
}

.rounded-b-full {
  border-bottom-left-radius: var(--rounded-full);
  border-bottom-right-radius: var(--rounded-full);
}


/* Border left radius */

.rounded-l-px {
  border-bottom-left-radius: var(--rounded-px);
  border-top-left-radius: var(--rounded-px);
}

.rounded-l-0 {
  border-bottom-left-radius: var(--rounded-0);
  border-top-left-radius: var(--rounded-0);
}

.rounded-l-1 {
  border-bottom-left-radius: var(--rounded-1);
  border-top-left-radius: var(--rounded-1);
}

.rounded-l-2 {
  border-bottom-left-radius: var(--rounded-2);
  border-top-left-radius: var(--rounded-2);
}

.rounded-l-3 {
  border-bottom-left-radius: var(--rounded-3);
  border-top-left-radius: var(--rounded-3);
}

.rounded-l-4 {
  border-bottom-left-radius: var(--rounded-4);
  border-top-left-radius: var(--rounded-4);
}

.rounded-l-5 {
  border-bottom-left-radius: var(--rounded-5);
  border-top-left-radius: var(--rounded-5);
}

.rounded-l-6 {
  border-bottom-left-radius: var(--rounded-6);
  border-top-left-radius: var(--rounded-6);
}

.rounded-l-7 {
  border-bottom-left-radius: var(--rounded-7);
  border-top-left-radius: var(--rounded-7);
}

.rounded-l-8 {
  border-bottom-left-radius: var(--rounded-8);
  border-top-left-radius: var(--rounded-8);
}

.rounded-l-9 {
  border-bottom-left-radius: var(--rounded-9);
  border-top-left-radius: var(--rounded-9);
}

.rounded-l-10 {
  border-bottom-left-radius: var(--rounded-10);
  border-top-left-radius: var(--rounded-10);
}

.rounded-l-full {
  border-bottom-left-radius: var(--rounded-full);
  border-top-left-radius: var(--rounded-full);
}


/* Border top left radius */

.rounded-tl-px {
  border-top-left-radius: var(--rounded-px);
}

.rounded-tl-0 {
  border-top-left-radius: var(--rounded-0);
}

.rounded-tl-1 {
  border-top-left-radius: var(--rounded-1);
}

.rounded-tl-2 {
  border-top-left-radius: var(--rounded-2);
}

.rounded-tl-3 {
  border-top-left-radius: var(--rounded-3);
}

.rounded-tl-4 {
  border-top-left-radius: var(--rounded-4);
}

.rounded-tl-5 {
  border-top-left-radius: var(--rounded-5);
}

.rounded-tl-6 {
  border-top-left-radius: var(--rounded-6);
}

.rounded-tl-7 {
  border-top-left-radius: var(--rounded-7);
}

.rounded-tl-8 {
  border-top-left-radius: var(--rounded-8);
}

.rounded-tl-9 {
  border-top-left-radius: var(--rounded-9);
}

.rounded-tl-10 {
  border-top-left-radius: var(--rounded-10);
}

.rounded-tl-full {
  border-top-left-radius: var(--rounded-full);
}


/* Border top right radius */

.rounded-tr-px {
  border-top-right-radius: var(--rounded-px);
}

.rounded-tr-0 {
  border-top-right-radius: var(--rounded-0);
}

.rounded-tr-1 {
  border-top-right-radius: var(--rounded-1);
}

.rounded-tr-2 {
  border-top-right-radius: var(--rounded-2);
}

.rounded-tr-3 {
  border-top-right-radius: var(--rounded-3);
}

.rounded-tr-4 {
  border-top-right-radius: var(--rounded-4);
}

.rounded-tr-5 {
  border-top-right-radius: var(--rounded-5);
}

.rounded-tr-6 {
  border-top-right-radius: var(--rounded-6);
}

.rounded-tr-7 {
  border-top-right-radius: var(--rounded-7);
}

.rounded-tr-8 {
  border-top-right-radius: var(--rounded-8);
}

.rounded-tr-9 {
  border-top-right-radius: var(--rounded-9);
}

.rounded-tr-10 {
  border-top-right-radius: var(--rounded-10);
}

.rounded-tr-full {
  border-top-right-radius: var(--rounded-full);
}


/* Border bottom left radius */

.rounded-bl-px {
  border-bottom-left-radius: var(--rounded-px);
}

.rounded-bl-0 {
  border-bottom-left-radius: var(--rounded-0);
}

.rounded-bl-1 {
  border-bottom-left-radius: var(--rounded-1);
}

.rounded-bl-2 {
  border-bottom-left-radius: var(--rounded-2);
}

.rounded-bl-3 {
  border-bottom-left-radius: var(--rounded-3);
}

.rounded-bl-4 {
  border-bottom-left-radius: var(--rounded-4);
}

.rounded-bl-5 {
  border-bottom-left-radius: var(--rounded-5);
}

.rounded-bl-6 {
  border-bottom-left-radius: var(--rounded-6);
}

.rounded-bl-7 {
  border-bottom-left-radius: var(--rounded-7);
}

.rounded-bl-8 {
  border-bottom-left-radius: var(--rounded-8);
}

.rounded-bl-9 {
  border-bottom-left-radius: var(--rounded-9);
}

.rounded-bl-10 {
  border-bottom-left-radius: var(--rounded-10);
}

.rounded-bl-full {
  border-bottom-left-radius: var(--rounded-full);
}


/* Border bottom right radius */

.rounded-br-px {
  border-bottom-right-radius: var(--rounded-px);
}

.rounded-br-0 {
  border-bottom-right-radius: var(--rounded-0);
}

.rounded-br-1 {
  border-bottom-right-radius: var(--rounded-1);
}

.rounded-br-2 {
  border-bottom-right-radius: var(--rounded-2);
}

.rounded-br-3 {
  border-bottom-right-radius: var(--rounded-3);
}

.rounded-br-4 {
  border-bottom-right-radius: var(--rounded-4);
}

.rounded-br-5 {
  border-bottom-right-radius: var(--rounded-5);
}

.rounded-br-6 {
  border-bottom-right-radius: var(--rounded-6);
}

.rounded-br-7 {
  border-bottom-right-radius: var(--rounded-7);
}

.rounded-br-8 {
  border-bottom-right-radius: var(--rounded-8);
}

.rounded-br-9 {
  border-bottom-right-radius: var(--rounded-9);
}

.rounded-br-10 {
  border-bottom-right-radius: var(--rounded-10);
}

.rounded-br-full {
  border-bottom-right-radius: var(--rounded-full);
}



/* Vertical alignments */

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

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

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

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

.align-text-top {
  vertical-align: text-top;
}

.align-text-bottom {
  vertical-align: text-bottom;
}



/* border widths */

/* Border width {top, bottom, left, right} */

.border {
  border-width: var(--border);
}

.border-0 {
  border-width: var(--border-0);
}

.border-2 {
  border-width: var(--border-2);
}

.border-3 {
  border-width: var(--border-3);
}

.border-4 {
  border-width: var(--border-4);
}

.border-5 {
  border-width: var(--border-5);
}

.border-6 {
  border-width: var(--border-6);
}

.border-7 {
  border-width: var(--border-7);
}

.border-8 {
  border-width: var(--border-8);
}


/* Border top width */

.border-t {
  border-top-width: var(--border);
}

.border-t-0 {
  border-top-width: var(--border-0);
}

.border-t-2 {
  border-top-width: var(--border-2);
}

.border-t-3 {
  border-top-width: var(--border-3);
}

.border-t-4 {
  border-top-width: var(--border-4);
}

.border-t-5 {
  border-top-width: var(--border-5);
}

.border-t-6 {
  border-top-width: var(--border-6);
}

.border-t-7 {
  border-top-width: var(--border-7);
}

.border-t-8 {
  border-top-width: var(--border-8);
}


/* Border right width */

.border-r {
  border-right-width: var(--border);
}

.border-r-0 {
  border-right-width: var(--border-0);
}

.border-r-2 {
  border-right-width: var(--border-2);
}

.border-r-3 {
  border-right-width: var(--border-3);
}

.border-r-4 {
  border-right-width: var(--border-4);
}

.border-r-5 {
  border-right-width: var(--border-5);
}

.border-r-6 {
  border-right-width: var(--border-6);
}

.border-r-7 {
  border-right-width: var(--border-7);
}

.border-r-8 {
  border-right-width: var(--border-8);
}


/* Border bottom width */

.border-b {
  border-bottom-width: var(--border);
}

.border-b-0 {
  border-bottom-width: var(--border-0);
}

.border-b-2 {
  border-bottom-width: var(--border-2);
}

.border-b-3 {
  border-bottom-width: var(--border-3);
}

.border-b-4 {
  border-bottom-width: var(--border-4);
}

.border-b-5 {
  border-bottom-width: var(--border-5);
}

.border-b-6 {
  border-bottom-width: var(--border-6);
}

.border-b-7 {
  border-bottom-width: var(--border-7);
}

.border-b-8 {
  border-bottom-width: var(--border-8);
}


/* Border left width */

.border-l {
  border-left-width: var(--border);
}

.border-l-0 {
  border-left-width: var(--border-0);
}

.border-l-2 {
  border-left-width: var(--border-2);
}

.border-l-3 {
  border-left-width: var(--border-3);
}

.border-l-4 {
  border-left-width: var(--border-4);
}

.border-l-5 {
  border-left-width: var(--border-5);
}

.border-l-6 {
  border-left-width: var(--border-6);
}

.border-l-7 {
  border-left-width: var(--border-7);
}

.border-l-8 {
  border-left-width: var(--border-8);
}



/* Border styles */

.border-solid {
  border-style: solid;
}

.border-dashed {
  border-style: dashed;
}

.border-dotted {
  border-style: dotted;
}

.border-double {
  border-style: double;
}

.border-none {
  border-style: none;
}



/* Border colors */

.border-transparent {
  border-color: var(--transparent);
}

.border-current {
  border-color: var(--current);
}

.border-black {
  border-color: var(--black);
}

.border-white {
  border-color: var(--white);
}


.border-gray-100 {
  border-color: var(--gray-100);
}

.border-gray-200 {
  border-color: var(--gray-200);
}

.border-gray-300 {
  border-color: var(--gray-300);
}

.border-gray-400 {
  border-color: var(--gray-400);
}

.border-gray-500 {
  border-color: var(--gray-500);
}

.border-gray-600 {
  border-color: var(--gray-600);
}

.border-gray-700 {
  border-color: var(--gray-700);
}

.border-gray-800 {
  border-color: var(--gray-800);
}

.border-gray-900 {
  border-color: var(--gray-900);
}


.border-red-100 {
  border-color: var(--red-100);
}

.border-red-200 {
  border-color: var(--red-200);
}

.border-red-300 {
  border-color: var(--red-300);
}

.border-red-400 {
  border-color: var(--red-400);
}

.border-red-500 {
  border-color: var(--red-500);
}

.border-red-600 {
  border-color: var(--red-600);
}

.border-red-700 {
  border-color: var(--red-700);
}

.border-red-800 {
  border-color: var(--red-800);
}

.border-red-900 {
  border-color: var(--red-900);
}


.border-orange-100 {
  border-color: var(--orange-100);
}
  
.border-orange-200 {
  border-color: var(--orange-200);
}
  
.border-orange-300 {
  border-color: var(--orange-300);
}
  
.border-orange-400 {
  border-color: var(--orange-400);
}
  
.border-orange-500 {
  border-color: var(--orange-500);
}
  
.border-orange-600 {
  border-color: var(--orange-600);
}
  
.border-orange-700 {
  border-color: var(--orange-700);
}
  
.border-orange-800 {
  border-color: var(--orange-800);
}
  
.border-orange-900 {
  border-color: var(--orange-900);
}


.border-yellow-100 {
  border-color: var(--yellow-100);
}

.border-yellow-200 {
  border-color: var(--yellow-200);
}

.border-yellow-300 {
  border-color: var(--yellow-300);
}

.border-yellow-400 {
  border-color: var(--yellow-400);
}

.border-yellow-500 {
  border-color: var(--yellow-500);
}

.border-yellow-600 {
  border-color: var(--yellow-600);
}

.border-yellow-700 {
  border-color: var(--yellow-700);
}

.border-yellow-800 {
  border-color: var(--yellow-800);
}

.border-yellow-900 {
  border-color: var(--yellow-900);
}

  
.border-green-100 {
  border-color: var(--green-100);
}
  
.border-green-200 {
  border-color: var(--green-200);
}
  
.border-green-300 {
  border-color: var(--green-300);
}
  
.border-green-400 {
  border-color: var(--green-400);
}
  
.border-green-500 {
  border-color: var(--green-500);
}
  
.border-green-600 {
  border-color: var(--green-600);
}
  
.border-green-700 {
  border-color: var(--green-700);
}
  
.border-green-800 {
  border-color: var(--green-800);
}
  
.border-green-900 {
  border-color: var(--green-900);
}


.border-teal-100 {
  border-color: var(--teal-100);
}

.border-teal-200 {
  border-color: var(--teal-200);
}

.border-teal-300 {
  border-color: var(--teal-300);
}

.border-teal-400 {
  border-color: var(--teal-400);
}

.border-teal-500 {
  border-color: var(--teal-500);
}

.border-teal-600 {
  border-color: var(--teal-600);
}

.border-teal-700 {
  border-color: var(--teal-700);
}

.border-teal-800 {
  border-color: var(--teal-800);
}

.border-teal-900 {
  border-color: var(--teal-900);
}


.border-blue-100 {
  border-color: var(--blue-100);
}

.border-blue-200 {
  border-color: var(--blue-200);
}

.border-blue-300 {
  border-color: var(--blue-300);
}

.border-blue-400 {
  border-color: var(--blue-400);
}

.border-blue-500 {
  border-color: var(--blue-500);
}

.border-blue-600 {
  border-color: var(--blue-600);
}

.border-blue-700 {
  border-color: var(--blue-700);
}

.border-blue-800 {
  border-color: var(--blue-800);
}

.border-blue-900 {
  border-color: var(--blue-900);
}


.border-indigo-100 {
  border-color: var(--indigo-100);
}

.border-indigo-200 {
  border-color: var(--indigo-200);
}

.border-indigo-300 {
  border-color: var(--indigo-300);
}

.border-indigo-400 {
  border-color: var(--indigo-400);
}

.border-indigo-500 {
  border-color: var(--indigo-500);
}

.border-indigo-600 {
  border-color: var(--indigo-600);
}

.border-indigo-700 {
  border-color: var(--indigo-700);
}

.border-indigo-800 {
  border-color: var(--indigo-800);
}

.border-indigo-900 {
  border-color: var(--indigo-900);
}


.border-purple-100 {
  border-color: var(--purple-100);
}

.border-purple-200 {
  border-color: var(--purple-200);
}

.border-purple-300 {
  border-color: var(--purple-300);
}

.border-purple-400 {
  border-color: var(--purple-400);
}

.border-purple-500 {
  border-color: var(--purple-500);
}

.border-purple-600 {
  border-color: var(--purple-600);
}

.border-purple-700 {
  border-color: var(--purple-700);
}

.border-purple-800 {
  border-color: var(--purple-800);
}

.border-purple-900 {
  border-color: var(--purple-900);
}


.border-pink-100 {
  border-color: var(--pink-100);
}

.border-pink-200 {
  border-color: var(--pink-200);
}

.border-pink-300 {
  border-color: var(--pink-300);
}

.border-pink-400 {
  border-color: var(--pink-400);
}

.border-pink-500 {
  border-color: var(--pink-500);
}

.border-pink-600 {
  border-color: var(--pink-600);
}

.border-pink-700 {
  border-color: var(--pink-700);
}

.border-pink-800 {
  border-color: var(--pink-800);
}

.border-pink-900 {
  border-color: var(--pink-900);
}



/* Box shadows */

.shadow-xs {
  box-shadow: var(--shadow-xs);
}

.shadow-sm {
  box-shadow: var(--shadow-sm);
}

.shadow {
  box-shadow: var(--shadow);
}

.shadow-md {
  box-shadow: var(--shadow-md);
}

.shadow-lg {
  box-shadow: var(--shadow-lg);
}

.shadow-xl {
  box-shadow: var(--shadow-xl);
}

.shadow-2xl {
  box-shadow: var(--shadow-2xl);
}

.shadow-inner {
  box-shadow: var(--shadow-inner);
}

.shadow-none {
  box-shadow: var(--shadow-none);
}



/* Flex directions */

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

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

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

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



/* 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;
}



/* 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;
}