@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');
@import url('components.css');

:root {
  --white: #ffffff;
  --black: #000000;

  --content-l: #f0f0f0;
  --content-ml: #dbdbdb;
  --content: #a6a6a6;
  --content-md: #7d7d7d;
  --content-d: #5c5c5c;

  --container-l: #656565;
  --container-ml: #444444;
  --container: #333333;
  --container-md: #222222;
  --container-d: #1d1d1d;
  --container-dd: #181818;

  --separator: #666666;

  /* red : danger - error - delete - unavailable */
  --red: #E80B0B;
  --red-hover: #d10e0e;
  --red-active: #a70909;
  --red-inactive: #e76262;
  --red-gradient-r: linear-gradient(to right, #E80B0B 0%, #990707 100%);
  --red-gradient-l: linear-gradient(to left, #E80B0B 0%, #990707 100%);
  --red-gradient-t: linear-gradient(to top, #E80B0B 0%, #990707 100%);
  --red-gradient-b: linear-gradient(to bottom, #E80B0B 0%, #990707 100%);

  /* orange : main - view - edit - active - busy */
  --orange: #eb6100;
  --orange-hover: #da5b07;
  --orange-active: #c44e00;
  --orange-inactive: #e79357;
  --orange-gradient-r: linear-gradient(to right, #eb6100 0%, #d35400 100%);
  --orange-gradient-l: linear-gradient(to left, #eb6100 0%, #d35400 100%);
  --orange-gradient-t: linear-gradient(to top, #eb6100 0%, #d35400 100%);
  --orange-gradient-b: linear-gradient(to bottom, #eb6100 0%, #d35400 100%);

  /* yellow : status - notification - warning */
  --yellow: #e7bd30;
  --yellow-hover: #ddac2f;
  --yellow-active: #b88f00;
  --yellow-inactive: #f0d27c;
  --yellow-gradient-r: linear-gradient(to right, #eec43b 0%, #b88f00 100%);
  --yellow-gradient-l: linear-gradient(to left, #eec43b 0%, #b88f00 100%);
  --yellow-gradient-t: linear-gradient(to top, #eec43b 0%, #b88f00 100%);
  --yellow-gradient-b: linear-gradient(to bottom, #eec43b 0%, #b88f00 100%);

  /* green : accept - success - important - available */
  --green: #1eaa59;
  --green-hover: #239a55;
  --green-active: #1f7a4b;
  --green-inactive: #67ca8d;
  --green-gradient-r: linear-gradient(to right, #27ae60 0%, #1f7a4b 100%);
  --green-gradient-l: linear-gradient(to left, #27ae60 0%, #1f7a4b 100%);
  --green-gradient-t: linear-gradient(to top, #27ae60 0%, #1f7a4b 100%);
  --green-gradient-b: linear-gradient(to bottom, #27ae60 0%, #1f7a4b 100%);

  /* blue : details - supplementary - reserved */
  --blue: #1f56b6;
  --blue-hover: #1a4f9f;
  --blue-active: #143978;
  --blue-inactive: #6a99e4;
  --blue-gradient-r: linear-gradient(to right, #1f56b6 0%, #143978 100%);
  --blue-gradient-l: linear-gradient(to left, #1f56b6 0%, #143978 100%);
  --blue-gradient-t: linear-gradient(to top, #1f56b6 0%, #143978 100%);
  --blue-gradient-b: linear-gradient(to bottom, #1f56b6 0%, #143978 100%);

  /* purple : important - mandatory - maintenance */
  --purple: #9c297c;
  --purple-hover: #8b1f6c;
  --purple-active: #611b4d;
  --purple-inactive: #c55daf;
  --purple-gradient-r: linear-gradient(to right, #9c297c 0%, #571745 100%);
  --purple-gradient-l: linear-gradient(to left, #9c297c 0%, #571745 100%);
  --purple-gradient-t: linear-gradient(to top, #9c297c 0%, #571745 100%);
  --purple-gradient-b: linear-gradient(to bottom, #9c297c 0%, #571745 100%);
}

::selection{
  background-color: #894d1cbb;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: var(--container);
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  border-radius: 10px;
  background-color: var(--container);
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: var(--container-l);
}

body {
  /* font-family: "oswald", sans-serif; */
  font-weight: 500;
  font-style: normal;
  color: var(--content-l);
}
body * {
  /* font-family: "oswald", sans-serif; */
  color: var(--content-l);
}

h1,h2,h3,p{ margin: 0 !important; }

/* positions */
.relative{ position: relative !important; }
.fixed{ position: fixed !important; }
.sticky{ position: sticky !important; }
.absolute{ position: absolute !important; }
.absolute-center{
  position: absolute !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.absolute-fill{
  position: absolute !important;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.top-0{ top: 0; }
.bottom-0{ bottom: 0; }
.left-0{ left: 0; }
.right-0{ right: 0; }
.translateX{ left: 50%; transform: translateX(-50%); }
.translateY{ top: 50%; transform: translateY(-50%); }

/* displays */
.d-none{ display: none !important; }
.d-block{ display: block !important; }
.d-inline{ display: inline !important; }
.d-inline-block{ display: inline-block !important; }
.d-grid{ display: grid !important; }
.d-contents{ display: contents !important; }
.d-table{ display: table !important; }
.d-table-cell{ display: table-cell !important; }
.d-table-row{ display: table-row !important; }

/* flex */
.flex-row{
  display: flex;
  flex-direction: row;
}
.flex-column{
  display: flex;
  flex-direction: column;
}
.flex-center{
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-1{ flex: 1; }
.flex-wrap{ flex-wrap: wrap; }

.justify-between{ justify-content: space-between; }
.justify-around{ justify-content: space-around; }
.justify-evenly{ justify-content: space-evenly; }
.justify-center{ justify-content: center; }
.justify-start{ justify-content: flex-start; }
.justify-end{ justify-content: flex-end; }

.align-between{ align-items: space-between; }
.align-around{ align-items: space-around; }
.align-evenly{ align-items: space-evenly; }
.align-center{ align-items: center; }
.align-start{ align-items: flex-start; }
.align-end{ align-items: flex-end; }

/* height */
.h-100svh{ height: 100svh; }
.h-100{ height: 100%; }
.h-95{ height: 95%; }
.h-90{ height: 90%; }
.h-85{ height: 85%; }
.h-80{ height: 80%; }
.h-75{ height: 75%; }
.h-70{ height: 70%; }
.h-65{ height: 65%; }
.h-60{ height: 60%; }
.h-55{ height: 55%; }
.h-50{ height: 50%; }
.h-45{ height: 45%; }
.h-40{ height: 40%; }
.h-35{ height: 35%; }
.h-30{ height: 30%; }
.h-25{ height: 25%; }
.h-20{ height: 20%; }
.h-15{ height: 15%; }
.h-10{ height: 10%; }
.h-5{ height: 5%; }
.h-auto{ height: auto; }
.h-fit{ height: fit-content; }
.h-min{ height: min-content; }
.h-max{ height: max-content; }

.min-h-100svh{ min-height: 100svh; }
.min-h-100{ min-height: 100%; }
.min-h-95{ min-height: 95%; }
.min-h-90{ min-height: 90%; }
.min-h-85{ min-height: 85%; }
.min-h-80{ min-height: 80%; }
.min-h-75{ min-height: 75%; }
.min-h-70{ min-height: 70%; }
.min-h-65{ min-height: 65%; }
.min-h-60{ min-height: 60%; }
.min-h-55{ min-height: 55%; }
.min-h-50{ min-height: 50%; }
.min-h-45{ min-height: 45%; }
.min-h-40{ min-height: 40%; }
.min-h-35{ min-height: 35%; }
.min-h-30{ min-height: 30%; }
.min-h-25{ min-height: 25%; }
.min-h-20{ min-height: 20%; }
.min-h-15{ min-height: 15%; }
.min-h-10{ min-height: 10%; }
.min-h-5{ min-height: 5%; }
.min-h-auto{ min-height: auto; }
.min-h-fit{ min-height: fit-content; }
.min-h-max{ min-height: max-content; }
.min-h-min{ min-height: min-content; }

.max-h-100svh{ max-height: 100svh; }
.max-h-100{ max-height: 100%; }
.max-h-95{ max-height: 95%; }
.max-h-90{ max-height: 90%; }
.max-h-85{ max-height: 85%; }
.max-h-80{ max-height: 80%; }
.max-h-75{ max-height: 75%; }
.max-h-70{ max-height: 70%; }
.max-h-65{ max-height: 65%; }
.max-h-60{ max-height: 60%; }
.max-h-55{ max-height: 55%; }
.max-h-50{ max-height: 50%; }
.max-h-45{ max-height: 45%; }
.max-h-40{ max-height: 40%; }
.max-h-35{ max-height: 35%; }
.max-h-30{ max-height: 30%; }
.max-h-25{ max-height: 25%; }
.max-h-20{ max-height: 20%; }
.max-h-15{ max-height: 15%; }
.max-h-10{ max-height: 10%; }
.max-h-5{ max-height: 5%; }
.max-h-auto{ max-height: auto; }
.max-h-fit{ max-height: fit-content; }
.max-h-max{ max-height: max-content; }
.max-h-min{ max-height: min-content; }

/* width */
.w-100vw{ width: 100vw; }
.w-100{ width: 100%; }
.w-95{ width: 95%; }
.w-90{ width: 90%; }
.w-85{ width: 85%; }
.w-80{ width: 80%; }
.w-75{ width: 75%; }
.w-70{ width: 70%; }
.w-65{ width: 65%; }
.w-60{ width: 60%; }
.w-55{ width: 55%; }
.w-50{ width: 50%; }
.w-45{ width: 45%; }
.w-40{ width: 40%; }
.w-35{ width: 35%; }
.w-30{ width: 30%; }
.w-25{ width: 25%; }
.w-20{ width: 20%; }
.w-15{ width: 15%; }
.w-10{ width: 10%; }
.w-5{ width: 5%; }
.w-auto{ width: auto; }
.w-min{ width: min-content; }
.w-max{ width: max-content; }
.w-fit{ width: fit-content; }

.min-w-100svh{ min-width: 100svh; }
.min-w-100{ min-width: 100%; }
.min-w-95{ min-width: 95%; }
.min-w-90{ min-width: 90%; }
.min-w-85{ min-width: 85%; }
.min-w-80{ min-width: 80%; }
.min-w-75{ min-width: 75%; }
.min-w-70{ min-width: 70%; }
.min-w-65{ min-width: 65%; }
.min-w-60{ min-width: 60%; }
.min-w-55{ min-width: 55%; }
.min-w-50{ min-width: 50%; }
.min-w-45{ min-width: 45%; }
.min-w-40{ min-width: 40%; }
.min-w-35{ min-width: 35%; }
.min-w-30{ min-width: 30%; }
.min-w-25{ min-width: 25%; }
.min-w-20{ min-width: 20%; }
.min-w-15{ min-width: 15%; }
.min-w-10{ min-width: 10%; }
.min-w-5{ min-width: 5%; }
.min-w-auto{ min-width: auto; }
.min-w-max{ min-width: max-content; }
.min-w-fit{ min-width: fit-content; }
.min-w-min{ min-width: min-content; }

.max-w-100svh{ max-width: 100svh; }
.max-w-100{ max-width: 100%; }
.max-w-95{ max-width: 95%; }
.max-w-90{ max-width: 90%; }
.max-w-85{ max-width: 85%; }
.max-w-80{ max-width: 80%; }
.max-w-75{ max-width: 75%; }
.max-w-70{ max-width: 70%; }
.max-w-65{ max-width: 65%; }
.max-w-60{ max-width: 60%; }
.max-w-55{ max-width: 55%; }
.max-w-50{ max-width: 50%; }
.max-w-45{ max-width: 45%; }
.max-w-40{ max-width: 40%; }
.max-w-35{ max-width: 35%; }
.max-w-30{ max-width: 30%; }
.max-w-25{ max-width: 25%; }
.max-w-20{ max-width: 20%; }
.max-w-15{ max-width: 15%; }
.max-w-10{ max-width: 10%; }
.max-w-5{ max-width: 5%; }
.max-w-auto{ max-width: auto; }
.max-w-max{ max-width: max-content; }
.max-w-fit{ max-width: fit-content; }
.max-w-min{ max-width: min-content; }

/* gap */
.g-0{ gap: 0; }
.g-025{ gap: .25em; }
.g-05{ gap: .5em; }
.g-075{ gap: .75em; }
.g-1{ gap: 1em; }
.g-15{ gap: 1.5em; }
.g-2{ gap: 2em; }
.g-3{ gap: 3em; }
.g-4{ gap: 4em; }
.g-5{ gap: 5em; }
.g-6{ gap: 6em; }
.g-7{ gap: 7em; }
.g-8{ gap: 8em; }
.g-9{ gap: 9em; }
.g-10{ gap: 10em; }

/* padding - all sides */
.p-0 { padding: 0; }
.p-025 { padding: .25em; }
.p-05 { padding: .5em; }
.p-1 { padding: 1em; }
.p-2 { padding: 2em; }
.p-3 { padding: 3em; }
.p-4 { padding: 4em; }
.p-5 { padding: 5em; }
.p-6 { padding: 6em; }
.p-7 { padding: 7em; }
.p-8 { padding: 8em; }
.p-9 { padding: 9em; }
.p-10 { padding: 10em; }

/* padding - top */
.pt-0 { padding-top: 0; }
.pt-05 { padding-top: .5em; }
.pt-1 { padding-top: 1em; }
.pt-2 { padding-top: 2em; }
.pt-3 { padding-top: 3em; }
.pt-4 { padding-top: 4em; }
.pt-5 { padding-top: 5em; }
.pt-6 { padding-top: 6em; }
.pt-7 { padding-top: 7em; }
.pt-8 { padding-top: 8em; }
.pt-9 { padding-top: 9em; }
.pt-10 { padding-top: 10em; }

/* padding - bottom */
.pb-0 { padding-bottom: 0; }
.pb-025 { padding-bottom: .25em; }
.pb-05 { padding-bottom: .5em; }
.pb-1 { padding-bottom: 1em; }
.pb-2 { padding-bottom: 2em; }
.pb-3 { padding-bottom: 3em; }
.pb-4 { padding-bottom: 4em; }
.pb-5 { padding-bottom: 5em; }
.pb-6 { padding-bottom: 6em; }
.pb-7 { padding-bottom: 7em; }
.pb-8 { padding-bottom: 8em; }
.pb-9 { padding-bottom: 9em; }
.pb-10 { padding-bottom: 10em; }

/* padding - left */
.pl-0 { padding-left: 0; }
.pl-05 { padding-left: .5em; }
.pl-1 { padding-left: 1em; }
.pl-2 { padding-left: 2em; }
.pl-3 { padding-left: 3em; }
.pl-4 { padding-left: 4em; }
.pl-5 { padding-left: 5em; }
.pl-6 { padding-left: 6em; }
.pl-7 { padding-left: 7em; }
.pl-8 { padding-left: 8em; }
.pl-9 { padding-left: 9em; }
.pl-10 { padding-left: 10em; }

/* padding - right */
.pr-0 { padding-right: 0; }
.pr-05 { padding-right: .5em; }
.pr-1 { padding-right: 1em; }
.pr-2 { padding-right: 2em; }
.pr-3 { padding-right: 3em; }
.pr-4 { padding-right: 4em; }
.pr-5 { padding-right: 5em; }
.pr-6 { padding-right: 6em; }
.pr-7 { padding-right: 7em; }
.pr-8 { padding-right: 8em; }
.pr-9 { padding-right: 9em; }
.pr-10 { padding-right: 10em; }

/* padding - horizontal */
.px-0 { padding-left: 0; padding-right: 0; }
.px-05 { padding-left: .5em; padding-right: .5em; }
.px-1 { padding-left: 1em; padding-right: 1em; }
.px-2 { padding-left: 2em; padding-right: 2em; }
.px-3 { padding-left: 3em; padding-right: 3em; }
.px-4 { padding-left: 4em; padding-right: 4em; }
.px-5 { padding-left: 5em; padding-right: 5em; }
.px-6 { padding-left: 6em; padding-right: 6em; }
.px-7 { padding-left: 7em; padding-right: 7em; }
.px-8 { padding-left: 8em; padding-right: 8em; }
.px-9 { padding-left: 9em; padding-right: 9em; }
.px-10 { padding-left: 10em; padding-right: 10em; }

/* padding - vertical */
.py-0 { padding-top: 0; padding-bottom: 0; }
.py-05 { padding-top: .5em; padding-bottom: .5em; }
.py-1 { padding-top: 1em; padding-bottom: 1em; }
.py-2 { padding-top: 2em; padding-bottom: 2em; }
.py-3 { padding-top: 3em; padding-bottom: 3em; }
.py-4 { padding-top: 4em; padding-bottom: 4em; }
.py-5 { padding-top: 5em; padding-bottom: 5em; }
.py-6 { padding-top: 6em; padding-bottom: 6em; }
.py-7 { padding-top: 7em; padding-bottom: 7em; }
.py-8 { padding-top: 8em; padding-bottom: 8em; }
.py-9 { padding-top: 9em; padding-bottom: 9em; }
.py-10 { padding-top: 10em; padding-bottom: 10em; }

/* margin - all sides */
.m-0 { margin: 0 !important; }
.m-05 { margin: .5em !important; }
.m-1 { margin: 1em !important; }
.m-2 { margin: 2em !important; }
.m-3 { margin: 3em !important; }
.m-4 { margin: 4em !important; }
.m-5 { margin: 5em !important; }
.m-6 { margin: 6em !important; }
.m-7 { margin: 7em !important; }
.m-8 { margin: 8em !important; }
.m-9 { margin: 9em !important; }
.m-10 { margin: 10em !important; }
.m-auto { margin: auto !important; }

/* margin - top */
.mt-0 { margin-top: 0 !important; }
.mt-05 { margin-top: .5em !important; }
.mt-1 { margin-top: 1em !important; }
.mt-2 { margin-top: 2em !important; }
.mt-3 { margin-top: 3em !important; }
.mt-4 { margin-top: 4em !important; }
.mt-5 { margin-top: 5em !important; }
.mt-6 { margin-top: 6em !important; }
.mt-7 { margin-top: 7em !important; }
.mt-8 { margin-top: 8em !important; }
.mt-9 { margin-top: 9em !important; }
.mt-10 { margin-top: 10em !important; }
.mt-auto { margin-top: auto !important; }

/* margin - bottom */
.mb-0 { margin-bottom: 0 !important; }
.mb-05 { margin-bottom: .5em !important; }
.mb-1 { margin-bottom: 1em !important; }
.mb-2 { margin-bottom: 2em !important; }
.mb-3 { margin-bottom: 3em !important; }
.mb-4 { margin-bottom: 4em !important; }
.mb-5 { margin-bottom: 5em !important; }
.mb-6 { margin-bottom: 6em !important; }
.mb-7 { margin-bottom: 7em !important; }
.mb-8 { margin-bottom: 8em !important; }
.mb-9 { margin-bottom: 9em !important; }
.mb-10 { margin-bottom: 10em !important; }
.mb-auto { margin-bottom: auto !important; }

/* margin - left */
.ml-0 { margin-left: 0 !important; }
.ml-05 { margin-left: .5em !important; }
.ml-1 { margin-left: 1em !important; }
.ml-2 { margin-left: 2em !important; }
.ml-3 { margin-left: 3em !important; }
.ml-4 { margin-left: 4em !important; }
.ml-5 { margin-left: 5em !important; }
.ml-6 { margin-left: 6em !important; }
.ml-7 { margin-left: 7em !important; }
.ml-8 { margin-left: 8em !important; }
.ml-9 { margin-left: 9em !important; }
.ml-10 { margin-left: 10em !important; }
.ml-auto { margin-left: auto !important; }

/* margin - right */
.mr-0 { margin-right: 0 !important; }
.mr-05 { margin-right: .5em !important; }
.mr-1 { margin-right: 1em !important; }
.mr-2 { margin-right: 2em !important; }
.mr-3 { margin-right: 3em !important; }
.mr-4 { margin-right: 4em !important; }
.mr-5 { margin-right: 5em !important; }
.mr-6 { margin-right: 6em !important; }
.mr-7 { margin-right: 7em !important; }
.mr-8 { margin-right: 8em !important; }
.mr-9 { margin-right: 9em !important; }
.mr-10 { margin-right: 10em !important; }
.mr-auto { margin-right: auto !important; }

/* margin - vertical */
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-05 { margin-top: .5em !important; margin-bottom: .5em !important; }
.my-1 { margin-top: 1em !important; margin-bottom: 1em !important; }
.my-2 { margin-top: 2em !important; margin-bottom: 2em !important; }
.my-3 { margin-top: 3em !important; margin-bottom: 3em !important; }
.my-4 { margin-top: 4em !important; margin-bottom: 4em !important; }
.my-5 { margin-top: 5em !important; margin-bottom: 5em !important; }
.my-6 { margin-top: 6em !important; margin-bottom: 6em !important; }
.my-7 { margin-top: 7em !important; margin-bottom: 7em !important; }
.my-8 { margin-top: 8em !important; margin-bottom: 8em !important; }
.my-9 { margin-top: 9em !important; margin-bottom: 9em !important; }
.my-10 { margin-top: 10em !important; margin-bottom: 10em !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }

/* margin - horizontal */
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-05 { margin-left: .5em !important; margin-right: .5em !important; }
.mx-1 { margin-left: 1em !important; margin-right: 1em !important; }
.mx-2 { margin-left: 2em !important; margin-right: 2em !important; }
.mx-3 { margin-left: 3em !important; margin-right: 3em !important; }
.mx-4 { margin-left: 4em !important; margin-right: 4em !important; }
.mx-5 { margin-left: 5em !important; margin-right: 5em !important; }
.mx-6 { margin-left: 6em !important; margin-right: 6em !important; }
.mx-7 { margin-left: 7em !important; margin-right: 7em !important; }
.mx-8 { margin-left: 8em !important; margin-right: 8em !important; }
.mx-9 { margin-left: 9em !important; margin-right: 9em !important; }
.mx-10 { margin-left: 10em !important; margin-right: 10em !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* border radius */
.bdr-0 { border-radius: 0; }
.bdr-02 { border-radius: .2em; }
.bdr-04 { border-radius: .4em; }
.bdr-05 { border-radius: .5em; }
.bdr-08 { border-radius: .8em; }
.bdr-1 { border-radius: 1em; }
.bdr-12 { border-radius: 1.2em; }
.bdr-circle { border-radius: 50%; }

/* cursors */
.pointer{
  cursor: pointer;
  pointer-events: all;
}
.not-allowed{
  cursor: not-allowed;
  pointer-events: none;
}
.not-events{
  pointer-events: none;
}

.square{ aspect-ratio: 1 / 1; }

/* overflow */
.overflow-ellipsis{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.overflow-hidden{ overflow: hidden; }
.overflow-scroll{ overflow: scroll; }
.overflow-auto{ overflow: auto; }
.overflow-visible{ overflow: visible; }
.overflow-x-hidden{ overflow-x: hidden; }
.overflow-x-scroll{ overflow-x: scroll; }
.overflow-x-auto{ overflow-x: auto; }
.overflow-x-visible{ overflow-x: visible; }
.overflow-y-hidden{ overflow-y: hidden; }
.overflow-y-scroll{ overflow-y: scroll; }
.overflow-y-auto{ overflow-y: auto; }
.overflow-y-visible{ overflow-y: visible; }

.bold{ font-weight: 1000 !important; }
.thin{ font-weight: 100 !important }
.z-1{ z-index: 1; }
.z-0{ z-index: 0; }
.no-decorations{
  text-decoration: none;
  outline: none;
  border: none;
}
.text-vertical{
  writing-mode: vertical-rl;
  text-orientation: upright;
}
.text-center {
  text-align: center;
}

/* user feedback */
.click-haptic-tr{
  transition: transform .3s ease !important;
}
.click-haptic:active {
  transform: scale(0.9);
}
.click-haptic-med:active {
  transform: scale(0.95);
}
.click-haptic-small:active {
  transform: scale(0.98);
}

/* preload animations */
.preload * {
  transition: none !important;
  animation-duration: 0s !important;
}

/* background colors */
.bg-white { background-color: var(--white); }
.bg-black { background-color: var(--black); }
.bg-content-l { background-color: var(--content-l); }
.bg-content-ml { background-color: var(--content-ml); }
.bg-content { background-color: var(--content); }
.bg-content-md { background-color: var(--content-md); }
.bg-content-d { background-color: var(--content-d); }
.bg-container-l { background-color: var(--container-l); }
.bg-container-ml { background-color: var(--container-ml); }
.bg-container { background-color: var(--container); }
.bg-container-md { background-color: var(--container-md); }
.bg-container-d { background-color: var(--container-d); }
.bg-container-dd { background-color: var(--container-dd); }
.bg-separator { background-color: var(--separator); }
.bg-red { background-color: var(--red); }
.bg-red-hover { background-color: var(--red-hover); }
.bg-red-active { background-color: var(--red-active); }
.bg-red-inactive { background-color: var(--red-inactive); }
.bg-red-gradient-r { background: var(--red-gradient-r); }
.bg-red-gradient-l { background: var(--red-gradient-l); }
.bg-red-gradient-t { background: var(--red-gradient-t); }
.bg-red-gradient-b { background: var(--red-gradient-b); }
.bg-orange { background-color: var(--orange); }
.bg-orange-hover { background-color: var(--orange-hover); }
.bg-orange-active { background-color: var(--orange-active); }
.bg-orange-inactive { background-color: var(--orange-inactive); }
.bg-orange-gradient-r { background: var(--orange-gradient-r); }
.bg-orange-gradient-l { background: var(--orange-gradient-l); }
.bg-orange-gradient-t { background: var(--orange-gradient-t); }
.bg-orange-gradient-b { background: var(--orange-gradient-b); }
.bg-yellow { background-color: var(--yellow); }
.bg-yellow-hover { background-color: var(--yellow-hover); }
.bg-yellow-active { background-color: var(--yellow-active); }
.bg-yellow-inactive { background-color: var(--yellow-inactive); }
.bg-yellow-gradient-r { background: var(--yellow-gradient-r); }
.bg-yellow-gradient-l { background: var(--yellow-gradient-l); }
.bg-yellow-gradient-t { background: var(--yellow-gradient-t); }
.bg-yellow-gradient-b { background: var(--yellow-gradient-b); }
.bg-green { background-color: var(--green); }
.bg-green-hover { background-color: var(--green-hover); }
.bg-green-active { background-color: var(--green-active); }
.bg-green-inactive { background-color: var(--green-inactive); }
.bg-green-gradient-r { background: var(--green-gradient-r); }
.bg-green-gradient-l { background: var(--green-gradient-l); }
.bg-green-gradient-t { background: var(--green-gradient-t); }
.bg-green-gradient-b { background: var(--green-gradient-b); }
.bg-blue { background-color: var(--blue); }
.bg-blue-hover { background-color: var(--blue-hover); }
.bg-blue-active { background-color: var(--blue-active); }
.bg-blue-inactive { background-color: var(--blue-inactive); }
.bg-blue-gradient-r { background: var(--blue-gradient-r); }
.bg-blue-gradient-l { background: var(--blue-gradient-l); }
.bg-blue-gradient-t { background: var(--blue-gradient-t); }
.bg-blue-gradient-b { background: var(--blue-gradient-b); }
.bg-purple { background-color: var(--purple); }
.bg-purple-hover { background-color: var(--purple-hover); }
.bg-purple-active { background-color: var(--purple-active); }
.bg-purple-inactive { background-color: var(--purple-inactive); }
.bg-purple-gradient-r { background: var(--purple-gradient-r); }
.bg-purple-gradient-l { background: var(--purple-gradient-l); }
.bg-purple-gradient-t { background: var(--purple-gradient-t); }
.bg-purple-gradient-b { background: var(--purple-gradient-b); }
.bg-transparent { background-color: transparent; }

/* background hover colors */
.bg-hover-white:hover { background-color: var(--white); }
.bg-hover-black:hover { background-color: var(--black); }
.bg-hover-content-l:hover { background-color: var(--content-l); }
.bg-hover-content-ml:hover { background-color: var(--content-ml); }
.bg-hover-content:hover { background-color: var(--content); }
.bg-hover-content-md:hover { background-color: var(--content-md); }
.bg-hover-content-d:hover { background-color: var(--content-d); }
.bg-hover-container-l:hover { background-color: var(--container-l); }
.bg-hover-container-ml:hover { background-color: var(--container-ml); }
.bg-hover-container:hover { background-color: var(--container); }
.bg-hover-container-md:hover { background-color: var(--container-md); }
.bg-hover-container-d:hover { background-color: var(--container-d); }
.bg-hover-container-dd:hover { background-color: var(--container-dd); }
.bg-hover-separator:hover { background-color: var(--separator); }
.bg-hover-red:hover { background-color: var(--red); }
.bg-hover-red-hover:hover { background-color: var(--red-hover); }
.bg-hover-red-active:hover { background-color: var(--red-active); }
.bg-hover-red-inactive:hover { background-color: var(--red-inactive); }
.bg-hover-red-gradient-r:hover { background: var(--red-gradient-r); }
.bg-hover-red-gradient-l:hover { background: var(--red-gradient-l); }
.bg-hover-red-gradient-t:hover { background: var(--red-gradient-t); }
.bg-hover-red-gradient-b:hover { background: var(--red-gradient-b); }
.bg-hover-orange:hover { background-color: var(--orange); }
.bg-hover-orange-active:hover { background-color: var(--orange-active); }
.bg-hover-orange-active:hover { background-color: var(--orange-active); }
.bg-hover-orange-inactive:hover { background-color: var(--orange-inactive); }
.bg-hover-orange-gradient-r:hover { background: var(--orange-gradient-r); }
.bg-hover-orange-gradient-l:hover { background: var(--orange-gradient-l); }
.bg-hover-orange-gradient-t:hover { background: var(--orange-gradient-t); }
.bg-hover-orange-gradient-b:hover { background: var(--orange-gradient-b); }
.bg-hover-yellow:hover { background-color: var(--yellow); }
.bg-hover-yellow-active:hover { background-color: var(--yellow-active); }
.bg-hover-yellow-active:hover { background-color: var(--yellow-active); }
.bg-hover-yellow-inactive:hover { background-color: var(--yellow-inactive); }
.bg-hover-yellow-gradient-r:hover { background: var(--yellow-gradient-r); }
.bg-hover-yellow-gradient-l:hover { background: var(--yellow-gradient-l); }
.bg-hover-yellow-gradient-t:hover { background: var(--yellow-gradient-t); }
.bg-hover-yellow-gradient-b:hover { background: var(--yellow-gradient-b); }
.bg-hover-green:hover { background-color: var(--green); }
.bg-hover-green-hover:hover { background-color: var(--green-hover); }
.bg-hover-green-active:hover { background-color: var(--green-active); }
.bg-hover-green-inactive:hover { background-color: var(--green-inactive); }
.bg-hover-green-gradient-r:hover { background: var(--green-gradient-r); }
.bg-hover-green-gradient-l:hover { background: var(--green-gradient-l); }
.bg-hover-green-gradient-t:hover { background: var(--green-gradient-t); }
.bg-hover-green-gradient-b:hover { background: var(--green-gradient-b); }
.bg-hover-blue:hover { background-color: var(--blue); }
.bg-hover-blue-hover:hover { background-color: var(--blue-hover); }
.bg-hover-blue-active:hover { background-color: var(--blue-active); }
.bg-hover-blue-inactive:hover { background-color: var(--blue-inactive); }
.bg-hover-blue-gradient-r:hover { background: var(--blue-gradient-r); }
.bg-hover-blue-gradient-l:hover { background: var(--blue-gradient-l); }
.bg-hover-blue-gradient-t:hover { background: var(--blue-gradient-t); }
.bg-hover-blue-gradient-b:hover { background: var(--blue-gradient-b); }
.bg-hover-purple:hover { background-color: var(--purple); }
.bg-hover-purple-hover:hover { background-color: var(--purple-hover); }
.bg-hover-purple-active:hover { background-color: var(--purple-active); }
.bg-hover-purple-inactive:hover { background-color: var(--purple-inactive); }
.bg-hover-purple-gradient-r:hover { background: var(--purple-gradient-r); }
.bg-hover-purple-gradient-l:hover { background: var(--purple-gradient-l); }
.bg-hover-purple-gradient-t:hover { background: var(--purple-gradient-t); }
.bg-hover-purple-gradient-b:hover { background: var(--purple-gradient-b); }
.bg-hover-transparent:hover { background-color: transparent; }

/* text colors */
.text-white { color: var(--white); }
.text-black { color: var(--black); }
.text-content-l { color: var(--content-l); }
.text-content-ml { color: var(--content-ml); }
.text-content { color: var(--content) !important; }
.text-content-md { color: var(--content-md); }
.text-content-d { color: var(--content-d); }
.text-container-l { color: var(--container-l); }
.text-container-ml { color: var(--container-ml); }
.text-container { color: var(--container); }
.text-container-md { color: var(--container-md); }
.text-container-d { color: var(--container-d); }
.text-container-dd { color: var(--container-dd); }
.text-separator { color: var(--separator); }
.text-red { color: var(--red); }
.text-red-hover { color: var(--red-hover); }
.text-red-active { color: var(--red-active); }
.text-red-inactive { color: var(--red-inactive); }
.text-red-gradient-r { background: var(--red-gradient-r); }
.text-red-gradient-l { background: var(--red-gradient-l); }
.text-red-gradient-t { background: var(--red-gradient-t); }
.text-red-gradient-b { background: var(--red-gradient-b); }
.text-orange { color: var(--orange); }
.text-orange-hover { color: var(--orange-hover); }
.text-orange-active { color: var(--orange-active); }
.text-orange-inactive { color: var(--orange-inactive); }
.text-orange-gradient-r { background: var(--orange-gradient-r); }
.text-orange-gradient-l { background: var(--orange-gradient-l); }
.text-orange-gradient-t { background: var(--orange-gradient-t); }
.text-orange-gradient-b { background: var(--orange-gradient-b); }
.text-yellow { color: var(--yellow); }
.text-yellow-hover { color: var(--yellow-hover); }
.text-yellow-active { color: var(--yellow-active); }
.text-yellow-inactive { color: var(--yellow-inactive); }
.text-yellow-gradient-r { background: var(--yellow-gradient-r); }
.text-yellow-gradient-l { background: var(--yellow-gradient-l); }
.text-yellow-gradient-t { background: var(--yellow-gradient-t); }
.text-yellow-gradient-b { background: var(--yellow-gradient-b); }
.text-green { color: var(--green); }
.text-green-hover { color: var(--green-hover); }
.text-green-active { color: var(--green-active); }
.text-green-inactive { color: var(--green-inactive); }
.text-green-gradient-r { background: var(--green-gradient-r); }
.text-green-gradient-l { background: var(--green-gradient-l); }
.text-green-gradient-t { background: var(--green-gradient-t); }
.text-green-gradient-b { background: var(--green-gradient-b); }
.text-blue { color: var(--blue); }
.text-blue-hover { color: var(--blue-hover); }
.text-blue-active { color: var(--blue-active); }
.text-blue-inactive { color: var(--blue-inactive); }
.text-blue-gradient-r { background: var(--blue-gradient-r); }
.text-blue-gradient-l { background: var(--blue-gradient-l); }
.text-blue-gradient-t { background: var(--blue-gradient-t); }
.text-blue-gradient-b { background: var(--blue-gradient-b); }
.text-purple { color: var(--purple); }
.text-purple-hover { color: var(--purple-hover); }
.text-purple-active { color: var(--purple-active); }
.text-purple-inactive { color: var(--purple-inactive); }
.text-purple-gradient-r { background: var(--purple-gradient-r); }
.text-purple-gradient-l { background: var(--purple-gradient-l); }
.text-purple-gradient-t { background: var(--purple-gradient-t); }
.text-purple-gradient-b { background: var(--purple-gradient-b); }

/* text hover colors */
.text-hover-white:hover { color: var(--white); }
.text-hover-black:hover { color: var(--black); }
.text-hover-content-l:hover { color: var(--content-l); }
.text-hover-content-ml:hover { color: var(--content-ml); }
.text-hover-content:hover { color: var(--text); }
.text-hover-content-md:hover { color: var(--content-md); }
.text-hover-content-d:hover { color: var(--content-d); }
.text-hover-container-l:hover { color: var(--container-l); }
.text-hover-container-ml:hover { color: var(--container-ml); }
.text-hover-container:hover { color: var(--container); }
.text-hover-container-md:hover { color: var(--container-md); }
.text-hover-container-d:hover { color: var(--container-d); }
.text-hover-container-dd:hover { color: var(--container-dd); }
.text-hover-separator:hover { color: var(--separator); }
.text-hover-red:hover { color: var(--red); }
.text-hover-red-hover:hover { color: var(--red-hover); }
.text-hover-red-active:hover { color: var(--red-active); }
.text-hover-red-inactive:hover { color: var(--red-inactive); }
.text-hover-red-gradient-r:hover { background: var(--red-gradient-r); }
.text-hover-red-gradient-l:hover { background: var(--red-gradient-l); }
.text-hover-red-gradient-t:hover { background: var(--red-gradient-t); }
.text-hover-red-gradient-b:hover { background: var(--red-gradient-b); }
.text-hover-orange:hover { color: var(--orange); }
.text-hover-orange-hover:hover { color: var(--orange-hover); }
.text-hover-orange-active:hover { color: var(--orange-active); }
.text-hover-orange-inactive:hover { color: var(--orange-inactive); }
.text-hover-orange-gradient-r:hover { background: var(--orange-gradient-r); }
.text-hover-orange-gradient-l:hover { background: var(--orange-gradient-l); }
.text-hover-orange-gradient-t:hover { background: var(--orange-gradient-t); }
.text-hover-orange-gradient-b:hover { background: var(--orange-gradient-b); }
.text-hover-yellow:hover { color: var(--yellow); }
.text-hover-yellow-hover:hover { color: var(--yellow-hover); }
.text-hover-yellow-active:hover { color: var(--yellow-active); }
.text-hover-yellow-inactive:hover { color: var(--yellow-inactive); }
.text-hover-yellow-gradient-r:hover { background: var(--yellow-gradient-r); }
.text-hover-yellow-gradient-l:hover { background: var(--yellow-gradient-l); }
.text-hover-yellow-gradient-t:hover { background: var(--yellow-gradient-t); }
.text-hover-yellow-gradient-b:hover { background: var(--yellow-gradient-b); }
.text-hover-green:hover { color: var(--green); }
.text-hover-green-hover:hover { color: var(--green-hover); }
.text-hover-green-active:hover { color: var(--green-active); }
.text-hover-green-inactive:hover { color: var(--green-inactive); }
.text-hover-green-gradient-r:hover { background: var(--green-gradient-r); }
.text-hover-green-gradient-l:hover { background: var(--green-gradient-l); }
.text-hover-green-gradient-t:hover { background: var(--green-gradient-t); }
.text-hover-green-gradient-b:hover { background: var(--green-gradient-b); }
.text-hover-blue:hover { color: var(--blue); }
.text-hover-blue-hover:hover { color: var(--blue-hover); }
.text-hover-blue-active:hover { color: var(--blue-active); }
.text-hover-blue-inactive:hover { color: var(--blue-inactive); }
.text-hover-blue-gradient-r:hover { background: var(--blue-gradient-r); }
.text-hover-blue-gradient-l:hover { background: var(--blue-gradient-l); }
.text-hover-blue-gradient-t:hover { background: var(--blue-gradient-t); }
.text-hover-blue-gradient-b:hover { background: var(--blue-gradient-b); }
.text-hover-purple:hover { color: var(--purple); }
.text-hover-purple-hover:hover { color: var(--purple-hover); }
.text-hover-purple-active:hover { color: var(--purple-active); }
.text-hover-purple-inactive:hover { color: var(--purple-inactive); }
.text-hover-purple-gradient-r:hover { background: var(--purple-gradient-r); }
.text-hover-purple-gradient-l:hover { background: var(--purple-gradient-l); }
.text-hover-purple-gradient-t:hover { background: var(--purple-gradient-t); }
.text-hover-purple-gradient-b:hover { background: var(--purple-gradient-b); }

/* transitions */
.tr-1{ transition: all .1s ease-in-out; }
.tr-2{ transition: all .2s ease-in-out; }
.tr-3{ transition: all .3s ease-in-out; }
.tr-4{ transition: all .4s ease-in-out; }
.tr-5{ transition: all .5s ease-in-out; }
.tr-6{ transition: all .6s ease-in-out; }
.tr-7{ transition: all .7s ease-in-out; }
.tr-8{ transition: all .8s ease-in-out; }
.tr-9{ transition: all .9s ease-in-out; }
.tr-10{ transition: all 1s ease-in-out; }

/* opacity */
.opacity-0 { opacity: 0; }
.opacity-10 { opacity: 0.1; }
.opacity-20 { opacity: 0.2; }
.opacity-30 { opacity: 0.3; }
.opacity-40 { opacity: 0.4; }
.opacity-50 { opacity: 0.5; }
.opacity-60 { opacity: 0.6; }
.opacity-70 { opacity: 0.7; }
.opacity-80 { opacity: 0.8; }
.opacity-90 { opacity: 0.9; }
.opacity-100 { opacity: 1; }

/* font sizes */
.fs-05 { font-size: .5em !important; }
.fs-075 { font-size: .75em !important; }
.fs-08 { font-size: .8em !important; }
.fs-09 { font-size: .9em !important; }
.fs-1 { font-size: 1em !important; }
.fs-115 { font-size: 1.15em; }
.fs-125 { font-size: 1.25em; }
.fs-15 { font-size: 1.5em; }
.fs-175 { font-size: 1.75em; }
.fs-2 { font-size: 2em; }
.fs-3 { font-size: 3em; }
.fs-4 { font-size: 4em; }
.fs-5 { font-size: 5em; }
.fs-6 { font-size: 6em; }
.fs-7 { font-size: 7em; }
.fs-8 { font-size: 8em; }
.fs-9 { font-size: 9em; }
.fs-10 { font-size: 10em; }

.letter-spacing{ letter-spacing: .05em; }
.uppercase { text-transform: uppercase; }

/* line clamping */
.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}
.line-clamp-4 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
}
.invert{
  filter: invert();
}

/* media queries for responsive design */
@media screen and (max-width: 1200px) {
  .laptop-row { display: flex !important; flex-direction: row !important; }
  .laptop-column { display: flex !important; flex-direction: column !important; }
  .laptop-align-center { align-items: center !important; }
  .laptop-align-start { align-items: flex-start !important; }
  .laptop-align-end { align-items: flex-end !important; }
  .laptop-justify-center { justify-content: center !important; }
  .laptop-justify-between { justify-content: space-between !important; }
  .laptop-justify-end { justify-content: flex-end !important; }
  .laptop-flex-1 { flex: 1 !important; }
  .laptop-flex-wrap { flex-wrap: wrap !important; }
  .laptop-text-center { text-align: center !important; }
  .laptop-text-left { text-align: left !important; }

  .laptop-w-100 { width: 100% !important; }
  .laptop-w-auto { width: auto !important; }
  .laptop-w-50 { width: 50% !important; }
  .laptop-w-75 { width: 75% !important; }
  .laptop-w-25 { width: 25% !important; }
  .laptop-w-33 { width: 33.333% !important; }
  .laptop-w-66 { width: 66.666% !important; }

  .laptop-h-auto { height: auto !important; }
  .laptop-h-100 { height: 100% !important; }
  .laptop-h-50 { height: 50% !important; }
  .laptop-h-25 { height: 25% !important; }
  .laptop-h-75 { height: 75% !important; }

  .laptop-d-none { display: none !important; }
  .laptop-d-block { display: block !important; }
  .laptop-d-flex { display: flex !important; }

  .laptop-fs-05 { font-size: 0.5em !important; }
  .laptop-fs-075 { font-size: 0.75em !important; }
  .laptop-fs-0875 { font-size: 0.875em !important; }

  .laptop-p-0 { padding: 0 !important; }
  .laptop-p-05 { padding: 0.5em !important; }
  .laptop-p-1 { padding: 1em !important; }
  .laptop-p-15 { padding: 1.5em !important; }
  .laptop-p-2 { padding: 2em !important; }

  .laptop-pt-1 { padding-top: 1em !important; }
  .laptop-pr-1 { padding-right: 1em !important; }
  .laptop-pb-1 { padding-bottom: 1em !important; }
  .laptop-pl-1 { padding-left: 1em !important; }

  .laptop-px-1 { padding-left: 1em !important; padding-right: 1em !important; }
  .laptop-py-1 { padding-top: 1em !important; padding-bottom: 1em !important; }

  .laptop-m-0 { margin: 0 !important; }
  .laptop-m-05 { margin: 0.5em !important; }
  .laptop-m-1 { margin: 1em !important; }
  .laptop-m-15 { margin: 1.5em !important; }
  .laptop-m-2 { margin: 2em !important; }

  .laptop-mt-1 { margin-top: 1em !important; }
  .laptop-mr-1 { margin-right: 1em !important; }
  .laptop-mb-1 { margin-bottom: 1em !important; }
  .laptop-ml-1 { margin-left: 1em !important; }

  .laptop-mx-1 { margin-left: 1em !important; margin-right: 1em !important; }
  .laptop-my-1 { margin-top: 1em !important; margin-bottom: 1em !important; }

  .laptop-g-0 { gap: 0 !important; }
  .laptop-g-05 { gap: 0.5em !important; }
  .laptop-g-1 { gap: 1em !important; }
  .laptop-g-15 { gap: 1.5em !important; }
  .laptop-g-2 { gap: 2em !important; }

  .laptop-overflow-ellipsis{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis !important; }
  .laptop-overflow-hidden{ overflow: hidden !important; }
  .laptop-overflow-scroll{ overflow: scroll !important; }
  .laptop-overflow-auto{ overflow: auto !important; }
  .laptop-overflow-visible{ overflow: visible !important; }
  .laptop-overflow-x-hidden{ overflow-x: hidden !important; }
  .laptop-overflow-x-scroll{ overflow-x: scroll !important; }
  .laptop-overflow-x-auto{ overflow-x: auto !important; }
  .laptop-overflow-x-visible{ overflow-x: visible !important; }
  .laptop-overflow-y-hidden{ overflow-y: hidden !important; }
  .laptop-overflow-y-scroll{ overflow-y: scroll !important; }
  .laptop-overflow-y-auto{ overflow-y: auto !important; }
  .laptop-overflow-y-visible{ overflow-y: visible !important; }
}

@media screen and (max-width: 992px) {
  .tablet-row { display: flex !important; flex-direction: row !important; }
  .tablet-column { display: flex !important; flex-direction: column !important; }
  .tablet-align-center { align-items: center !important; }
  .tablet-align-start { align-items: flex-start !important; }
  .tablet-align-end { align-items: flex-end !important; }
  .tablet-justify-center { justify-content: center !important; }
  .tablet-justify-between { justify-content: space-between !important; }
  .tablet-justify-end { justify-content: flex-end !important; }
  .tablet-flex-1 { flex: 1 !important; }
  .tablet-flex-wrap { flex-wrap: wrap !important; }
  .tablet-text-center { text-align: center !important; }
  .tablet-text-left { text-align: left !important; }

  .tablet-w-100 { width: 100% !important; }
  .tablet-w-auto { width: auto !important; }
  .tablet-w-50 { width: 50% !important; }
  .tablet-w-75 { width: 75% !important; }
  .tablet-w-25 { width: 25% !important; }
  .tablet-w-33 { width: 33.333% !important; }
  .tablet-w-66 { width: 66.666% !important; }

  .tablet-h-auto { height: auto !important; }
  .tablet-h-100 { height: 100% !important; }
  .tablet-h-50 { height: 50% !important; }
  .tablet-h-25 { height: 25% !important; }
  .tablet-h-75 { height: 75% !important; }

  .tablet-d-none { display: none !important; }
  .tablet-d-block { display: block !important; }
  .tablet-d-flex { display: flex !important; }

  .tablet-fs-05 { font-size: 0.5em !important; }
  .tablet-fs-075 { font-size: 0.75em !important; }
  .tablet-fs-0875 { font-size: 0.875em !important; }

  .tablet-p-0 { padding: 0 !important; }
  .tablet-p-05 { padding: 0.5em !important; }
  .tablet-p-1 { padding: 1em !important; }
  .tablet-p-15 { padding: 1.5em !important; }
  .tablet-p-2 { padding: 2em !important; }

  .tablet-pt-1 { padding-top: 1em !important; }
  .tablet-pr-1 { padding-right: 1em !important; }
  .tablet-pb-1 { padding-bottom: 1em !important; }
  .tablet-pl-1 { padding-left: 1em !important; }

  .tablet-px-1 { padding-left: 1em !important; padding-right: 1em !important; }
  .tablet-py-1 { padding-top: 1em !important; padding-bottom: 1em !important; }

  .tablet-m-0 { margin: 0 !important; }
  .tablet-m-05 { margin: 0.5em !important; }
  .tablet-m-1 { margin: 1em !important; }
  .tablet-m-15 { margin: 1.5em !important; }
  .tablet-m-2 { margin: 2em !important; }

  .tablet-mt-1 { margin-top: 1em !important; }
  .tablet-mr-1 { margin-right: 1em !important; }
  .tablet-mb-1 { margin-bottom: 1em !important; }
  .tablet-ml-1 { margin-left: 1em !important; }

  .tablet-mx-1 { margin-left: 1em !important; margin-right: 1em !important; }
  .tablet-my-1 { margin-top: 1em !important; margin-bottom: 1em !important; }

  .tablet-g-0 { gap: 0 !important; }
  .tablet-g-05 { gap: 0.5em !important; }
  .tablet-g-1 { gap: 1em !important; }
  .tablet-g-15 { gap: 1.5em !important; }
  .tablet-g-2 { gap: 2em !important; }

  .tablet-overflow-ellipsis{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis !important; }
  .tablet-overflow-hidden{ overflow: hidden !important; }
  .tablet-overflow-scroll{ overflow: scroll !important; }
  .tablet-overflow-auto{ overflow: auto !important; }
  .tablet-overflow-visible{ overflow: visible !important; }
  .tablet-overflow-x-hidden{ overflow-x: hidden !important; }
  .tablet-overflow-x-scroll{ overflow-x: scroll !important; }
  .tablet-overflow-x-auto{ overflow-x: auto !important; }
  .tablet-overflow-x-visible{ overflow-x: visible !important; }
  .tablet-overflow-y-hidden{ overflow-y: hidden !important; }
  .tablet-overflow-y-scroll{ overflow-y: scroll !important; }
  .tablet-overflow-y-auto{ overflow-y: auto !important; }
  .tablet-overflow-y-visible{ overflow-y: visible !important; }
}

@media screen and (max-width: 768px) {
  .mobile-d-none { display: none !important; }
  .mobile-d-block { display: block !important; }
  .mobile-row { flex-direction: row !important; }
  .mobile-column { display: flex !important; flex-direction: column !important; }
  .mobile-align-center { align-items: center !important; }
  .mobile-align-start { align-items: flex-start !important; }
  .mobile-align-end { align-items: flex-end !important; }
  .mobile-justify-center { justify-content: center !important; }
  .mobile-justify-between { justify-content: space-between !important; }
  .mobile-justify-end { justify-content: flex-end !important; }
  .mobile-flex-1 { flex: 1 !important; }
  .mobile-flex-wrap { flex-wrap: wrap !important; }
  .mobile-text-center { text-align: center !important; }
  .mobile-text-left { text-align: left !important; }

  .mobile-w-100 { width: 100% !important; }
  .mobile-w-auto { width: auto !important; }
  .mobile-w-50 { width: 50% !important; }
  .mobile-w-75 { width: 75% !important; }
  .mobile-w-25 { width: 25% !important; }
  .mobile-w-33 { width: 33.333% !important; }
  .mobile-w-66 { width: 66.666% !important; }

  .mobile-max-w-100 { max-width: 100% !important; }
  .mobile-max-w-auto { max-width: auto !important; }
  .mobile-max-w-50 { max-width: 50% !important; }
  .mobile-max-w-75 { max-width: 75% !important; }
  .mobile-max-w-25 { max-width: 25% !important; }
  .mobile-max-w-33 { max-width: 33.333% !important; }
  .mobile-max-w-66 { max-width: 66.666% !important; }

  .mobile-min-w-100 { min-width: 100% !important; }
  .mobile-min-w-auto { min-width: auto !important; }
  .mobile-min-w-50 { min-width: 50% !important; }
  .mobile-min-w-75 { min-width: 75% !important; }
  .mobile-min-w-25 { min-width: 25% !important; }
  .mobile-min-w-33 { min-width: 33.333% !important; }
  .mobile-min-w-66 { min-width: 66.666% !important; }

  .mobile-h-auto { height: auto !important; }
  .mobile-h-100 { height: 100% !important; }
  .mobile-h-50 { height: 50% !important; }
  .mobile-h-25 { height: 25% !important; }
  .mobile-h-75 { height: 75% !important; }

  .mobile-max-h-auto { max-height: auto !important; }
  .mobile-max-h-100 { max-height: 100% !important; }
  .mobile-max-h-50 { max-height: 50% !important; }
  .mobile-max-h-25 { max-height: 25% !important; }
  .mobile-max-h-75 { max-height: 75% !important; }

  .mobile-min-h-auto { min-height: auto !important; }
  .mobile-min-h-100 { min-height: 100% !important; }
  .mobile-min-h-50 { min-height: 50% !important; }
  .mobile-min-h-25 { min-height: 25% !important; }
  .mobile-min-h-75 { min-height: 75% !important; }

  .mobile-d-none { display: none !important; }
  .mobile-d-block { display: block !important; }
  .mobile-d-flex { display: flex !important; }

  .mobile-fs-05 { font-size: 0.5em !important; }
  .mobile-fs-075 { font-size: 0.75em !important; }
  .mobile-fs-0875 { font-size: 0.875em !important; }
  .mobile-fs-1 { font-size: 1em !important; }
  .mobile-fs-125 { font-size: 1.25em !important; }
  .mobile-fs-15 { font-size: 1.5em !important; }

  .mobile-p-0 { padding: 0 !important; }
  .mobile-p-05 { padding: 0.5em !important; }
  .mobile-p-1 { padding: 1em !important; }
  .mobile-p-15 { padding: 1.5em !important; }
  .mobile-p-2 { padding: 2em !important; }

  .mobile-pt-1 { padding-top: 1em !important; }
  .mobile-pr-1 { padding-right: 1em !important; }
  .mobile-pb-1 { padding-bottom: 1em !important; }
  .mobile-pl-1 { padding-left: 1em !important; }

  .mobile-px-05 { padding-left: 0.5em !important; padding-right: 0.5em !important; }
  .mobile-px-1 { padding-left: 1em !important; padding-right: 1em !important; }
  .mobile-py-1 { padding-top: 1em !important; padding-bottom: 1em !important; }
  .mobile-py-2 { padding-top: 2em !important; padding-bottom: 2em !important; }

  .mobile-m-0 { margin: 0 !important; }
  .mobile-m-05 { margin: 0.5em !important; }
  .mobile-m-1 { margin: 1em !important; }
  .mobile-m-15 { margin: 1.5em !important; }
  .mobile-m-2 { margin: 2em !important; }

  .mobile-mt-1 { margin-top: 1em !important; }
  .mobile-mr-1 { margin-right: 1em !important; }
  .mobile-mb-1 { margin-bottom: 1em !important; }
  .mobile-ml-1 { margin-left: 1em !important; }

  .mobile-mx-1 { margin-left: 1em !important; margin-right: 1em !important; }
  .mobile-my-1 { margin-top: 1em !important; margin-bottom: 1em !important; }

  .mobile-g-0 { gap: 0 !important; }
  .mobile-g-05 { gap: 0.5em !important; }
  .mobile-g-1 { gap: 1em !important; }
  .mobile-g-15 { gap: 1.5em !important; }
  .mobile-g-2 { gap: 2em !important; }

  .mobile-overflow-ellipsis{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis !important; }
  .mobile-overflow-hidden{ overflow: hidden !important; }
  .mobile-overflow-scroll{ overflow: scroll !important; }
  .mobile-overflow-auto{ overflow: auto !important; }
  .mobile-overflow-visible{ overflow: visible !important; }
  .mobile-overflow-x-hidden{ overflow-x: hidden !important; }
  .mobile-overflow-x-scroll{ overflow-x: scroll !important; }
  .mobile-overflow-x-auto{ overflow-x: auto !important; }
  .mobile-overflow-x-visible{ overflow-x: visible !important; }
  .mobile-overflow-y-hidden{ overflow-y: hidden !important; }
}