/* =================  SPACING =================== */

/*margin*/
.m-0 {
  margin: 0px;
}
.m-1 {
  margin: 1px;
}
.m-2 {
  margin: 2px;
}
.m-3 {
  margin: 3px;
}
.m-4 {
  margin: 4px;
}
.m-5 {
  margin: 5px;
}
.m-6 {
  margin: 6px;
}
.m-7 {
  margin: 7px;
}
.m-8 {
  margin: 8px;
}
.m-9 {
  margin: 9px;
}
.m-10 {
  margin: 10px;
}
.m-11 {
  margin: 11px;
}
.m-12 {
  margin: 12px;
}
.m-13 {
  margin: 13px;
}
.m-14 {
  margin: 14px;
}
.m-15 {
  margin: 15px;
}
.m-16 {
  margin: 16px;
}
.m-17 {
  margin: 17px;
}
.m-18 {
  margin: 18px;
}
.m-19 {
  margin: 19px;
}
.m-20 {
  margin: 20px;
}
.m-auto {
  margin: auto;
}
.mt-0 {
  margin-top: 0px;
}
.mt-1 {
  margin-top: 1px;
}
.mt-2 {
  margin-top: 2px;
}
.mt-3 {
  margin-top: 3px;
}
.mt-4 {
  margin-top: 4px;
}
.mt-5 {
  margin-top: 5px;
}
.mt-6 {
  margin-top: 6px;
}
.mt-7 {
  margin-top: 7px;
}
.mt-8 {
  margin-top: 8px;
}
.mt-9 {
  margin-top: 9px;
}
.mt-10 {
  margin-top: 10px;
}
.mt-11 {
  margin-top: 11px;
}
.mt-12 {
  margin-top: 12px;
}
.mt-13 {
  margin-top: 13px;
}
.mt-14 {
  margin-top: 14px;
}
.mt-15 {
  margin-top: 15px;
}
.mt-16 {
  margin-top: 16px;
}
.mt-17 {
  margin-top: 17px;
}
.mt-18 {
  margin-top: 18px;
}
.mt-19 {
  margin-top: 19px;
}
.mt-20 {
  margin-top: 20px;
}
.mr-0 {
  margin-right: 0px;
}
.mr-1 {
  margin-right: 1px;
}
.mr-2 {
  margin-right: 2px;
}
.mr-3 {
  margin-right: 3px;
}
.mr-4 {
  margin-right: 4px;
}
.mr-5 {
  margin-right: 5px;
}
.mr-6 {
  margin-right: 6px;
}
.mr-7 {
  margin-right: 7px;
}
.mr-8 {
  margin-right: 8px;
}
.mr-9 {
  margin-right: 9px;
}
.mr-10 {
  margin-right: 10px;
}
.mr-11 {
  margin-right: 11px;
}
.mr-12 {
  margin-right: 12px;
}
.mr-13 {
  margin-right: 13px;
}
.mr-14 {
  margin-right: 14px;
}
.mr-15 {
  margin-right: 15px;
}
.mr-16 {
  margin-right: 16px;
}
.mr-17 {
  margin-right: 17px;
}
.mr-18 {
  margin-right: 18px;
}
.mr-19 {
  margin-right: 19px;
}
.mr-20 {
  margin-right: 20px;
}
.mb-0 {
  margin-bottom: 0px;
}
.mb-1 {
  margin-bottom: 1px;
}
.mb-2 {
  margin-bottom: 2px;
}
.mb-3 {
  margin-bottom: 3px;
}
.mb-4 {
  margin-bottom: 4px;
}
.mb-5 {
  margin-bottom: 5px;
}
.mb-6 {
  margin-bottom: 6px;
}
.mb-7 {
  margin-bottom: 7px;
}
.mb-8 {
  margin-bottom: 8px;
}
.mb-9 {
  margin-bottom: 9px;
}
.mb-10 {
  margin-bottom: 10px;
}
.mb-11 {
  margin-bottom: 11px;
}
.mb-12 {
  margin-bottom: 12px;
}
.mb-13 {
  margin-bottom: 13px;
}
.mb-14 {
  margin-bottom: 14px;
}
.mb-15 {
  margin-bottom: 15px;
}
.mb-16 {
  margin-bottom: 16px;
}
.mb-17 {
  margin-bottom: 17px;
}
.mb-18 {
  margin-bottom: 18px;
}
.mb-19 {
  margin-bottom: 19px;
}
.mb-20 {
  margin-bottom: 20px;
}
.ml-0 {
  margin-left: 0px;
}
.ml-1 {
  margin-left: 1px;
}
.ml-2 {
  margin-left: 2px;
}
.ml-3 {
  margin-left: 3px;
}
.ml-4 {
  margin-left: 4px;
}
.ml-5 {
  margin-left: 5px;
}
.ml-6 {
  margin-left: 6px;
}
.ml-7 {
  margin-left: 7px;
}
.ml-8 {
  margin-left: 8px;
}
.ml-9 {
  margin-left: 9px;
}
.ml-10 {
  margin-left: 10px;
}
.ml-11 {
  margin-left: 11px;
}
.ml-12 {
  margin-left: 12px;
}
.ml-13 {
  margin-left: 13px;
}
.ml-14 {
  margin-left: 14px;
}
.ml-15 {
  margin-left: 15px;
}
.ml-16 {
  margin-left: 16px;
}
.ml-17 {
  margin-left: 17px;
}
.ml-18 {
  margin-left: 18px;
}
.ml-19 {
  margin-left: 19px;
}
.ml-20 {
  margin-left: 20px;
}
.mx-0 {
  margin-left: 0px;
  margin-right: 0px;
}
.mx-1 {
  margin-left: 1px;
  margin-right: 1px;
}
.mx-2 {
  margin-left: 2px;
  margin-right: 2px;
}
.mx-3 {
  margin-left: 3px;
  margin-right: 3px;
}
.mx-4 {
  margin-left: 4px;
  margin-right: 4px;
}
.mx-5 {
  margin-left: 5px;
  margin-right: 5px;
}
.mx-6 {
  margin-left: 6px;
  margin-right: 6px;
}
.mx-7 {
  margin-left: 7px;
  margin-right: 7px;
}
.mx-8 {
  margin-left: 8px;
  margin-right: 8px;
}
.mx-9 {
  margin-left: 9px;
  margin-right: 9px;
}
.mx-10 {
  margin-left: 10px;
  margin-right: 10px;
}
.mx-11 {
  margin-left: 11px;
  margin-right: 11px;
}
.mx-12 {
  margin-left: 12px;
  margin-right: 12px;
}
.mx-13 {
  margin-left: 13px;
  margin-right: 13px;
}
.mx-14 {
  margin-left: 14px;
  margin-right: 14px;
}
.mx-15 {
  margin-left: 15px;
  margin-right: 15px;
}
.mx-16 {
  margin-left: 16px;
  margin-right: 16px;
}
.mx-17 {
  margin-left: 17px;
  margin-right: 17px;
}
.mx-18 {
  margin-left: 18px;
  margin-right: 18px;
}
.mx-19 {
  margin-left: 19px;
  margin-right: 19px;
}
.mx-20 {
  margin-left: 20px;
  margin-right: 20px;
}
.my-0 {
  margin-top: 0px;
  margin-bottom: 0px;
}
.my-1 {
  margin-top: 1px;
  margin-bottom: 1px;
}
.my-2 {
  margin-top: 2px;
  margin-bottom: 2px;
}
.my-3 {
  margin-top: 3px;
  margin-bottom: 3px;
}
.my-4 {
  margin-top: 4px;
  margin-bottom: 4px;
}
.my-5 {
  margin-top: 5px;
  margin-bottom: 5px;
}
.my-6 {
  margin-top: 6px;
  margin-bottom: 6px;
}
.my-7 {
  margin-top: 7px;
  margin-bottom: 7px;
}
.my-8 {
  margin-top: 8px;
  margin-bottom: 8px;
}
.my-9 {
  margin-top: 9px;
  margin-bottom: 9px;
}
.my-10 {
  margin-top: 10px;
  margin-bottom: 10px;
}
.my-11 {
  margin-top: 11px;
  margin-bottom: 11px;
}
.my-12 {
  margin-top: 12px;
  margin-bottom: 12px;
}
.my-13 {
  margin-top: 13px;
  margin-bottom: 13px;
}
.my-14 {
  margin-top: 14px;
  margin-bottom: 14px;
}
.my-15 {
  margin-top: 15px;
  margin-bottom: 15px;
}
.my-16 {
  margin-top: 16px;
  margin-bottom: 16px;
}
.my-17 {
  margin-top: 17px;
  margin-bottom: 17px;
}
.my-18 {
  margin-top: 18px;
  margin-bottom: 18px;
}
.my-19 {
  margin-top: 19px;
  margin-bottom: 19px;
}
.my-20 {
  margin-top: 20px;
  margin-bottom: 20px;
}
/*************************************************/
/*padding*/
.p-0 {
  padding: 0px;
}
.p-1 {
  padding: 1px;
}
.p-2 {
  padding: 2px;
}
.p-3 {
  padding: 3px;
}
.p-4 {
  padding: 4px;
}
.p-5 {
  padding: 5px;
}
.p-6 {
  padding: 6px;
}
.p-7 {
  padding: 7px;
}
.p-8 {
  padding: 8px;
}
.p-9 {
  padding: 9px;
}
.p-10 {
  padding: 10px;
}
.p-11 {
  padding: 11px;
}
.p-12 {
  padding: 12px;
}
.p-13 {
  padding: 13px;
}
.p-14 {
  padding: 14px;
}
.p-15 {
  padding: 15px;
}
.p-16 {
  padding: 16px;
}
.p-17 {
  padding: 17px;
}
.p-18 {
  padding: 18px;
}
.p-19 {
  padding: 19px;
}
.p-20 {
  padding: 20px;
}
.pt-0 {
  padding-top: 0px;
}
.pt-1 {
  padding-top: 1px;
}
.pt-2 {
  padding-top: 2px;
}
.pt-3 {
  padding-top: 3px;
}
.pt-4 {
  padding-top: 4px;
}
.pt-5 {
  padding-top: 5px;
}
.pt-6 {
  padding-top: 6px;
}
.pt-7 {
  padding-top: 7px;
}
.pt-8 {
  padding-top: 8px;
}
.pt-9 {
  padding-top: 9px;
}
.pt-10 {
  padding-top: 10px;
}
.pt-11 {
  padding-top: 11px;
}
.pt-12 {
  padding-top: 12px;
}
.pt-13 {
  padding-top: 13px;
}
.pt-14 {
  padding-top: 14px;
}
.pt-15 {
  padding-top: 15px;
}
.pt-16 {
  padding-top: 16px;
}
.pt-17 {
  padding-top: 17px;
}
.pt-18 {
  padding-top: 18px;
}
.pt-19 {
  padding-top: 19px;
}
.pt-20 {
  padding-top: 20px;
}
.pr-0 {
  padding-right: 0px;
}
.pr-1 {
  padding-right: 1px;
}
.pr-2 {
  padding-right: 2px;
}
.pr-3 {
  padding-right: 3px;
}
.pr-4 {
  padding-right: 4px;
}
.pr-5 {
  padding-right: 5px;
}
.pr-6 {
  padding-right: 6px;
}
.pr-7 {
  padding-right: 7px;
}
.pr-8 {
  padding-right: 8px;
}
.pr-9 {
  padding-right: 9px;
}
.pr-10 {
  padding-right: 10px;
}
.pr-11 {
  padding-right: 11px;
}
.pr-12 {
  padding-right: 12px;
}
.pr-13 {
  padding-right: 13px;
}
.pr-14 {
  padding-right: 14px;
}
.pr-15 {
  padding-right: 15px;
}
.pr-16 {
  padding-right: 16px;
}
.pr-17 {
  padding-right: 17px;
}
.pr-18 {
  padding-right: 18px;
}
.pr-19 {
  padding-right: 19px;
}
.pr-20 {
  padding-right: 20px;
}
.pb-0 {
  padding-bottom: 0px;
}
.pb-1 {
  padding-bottom: 1px;
}
.pb-2 {
  padding-bottom: 2px;
}
.pb-3 {
  padding-bottom: 3px;
}
.pb-4 {
  padding-bottom: 4px;
}
.pb-5 {
  padding-bottom: 5px;
}
.pb-6 {
  padding-bottom: 6px;
}
.pb-7 {
  padding-bottom: 7px;
}
.pb-8 {
  padding-bottom: 8px;
}
.pb-9 {
  padding-bottom: 9px;
}
.pb-10 {
  padding-bottom: 10px;
}
.pb-11 {
  padding-bottom: 11px;
}
.pb-12 {
  padding-bottom: 12px;
}
.pb-13 {
  padding-bottom: 13px;
}
.pb-14 {
  padding-bottom: 14px;
}
.pb-15 {
  padding-bottom: 15px;
}
.pb-16 {
  padding-bottom: 16px;
}
.pb-17 {
  padding-bottom: 17px;
}
.pb-18 {
  padding-bottom: 18px;
}
.pb-19 {
  padding-bottom: 19px;
}
.pb-20 {
  padding-bottom: 20px;
}
.pl-0 {
  padding-left: 0px;
}
.pl-1 {
  padding-left: 1px;
}
.pl-2 {
  padding-left: 2px;
}
.pl-3 {
  padding-left: 3px;
}
.pl-4 {
  padding-left: 4px;
}
.pl-5 {
  padding-left: 5px;
}
.pl-6 {
  padding-left: 6px;
}
.pl-7 {
  padding-left: 7px;
}
.pl-8 {
  padding-left: 8px;
}
.pl-9 {
  padding-left: 9px;
}
.pl-10 {
  padding-left: 10px;
}
.pl-11 {
  padding-left: 11px;
}
.pl-12 {
  padding-left: 12px;
}
.pl-13 {
  padding-left: 13px;
}
.pl-14 {
  padding-left: 14px;
}
.pl-15 {
  padding-left: 15px;
}
.pl-16 {
  padding-left: 16px;
}
.pl-17 {
  padding-left: 17px;
}
.pl-18 {
  padding-left: 18px;
}
.pl-19 {
  padding-left: 19px;
}
.pl-20 {
  padding-left: 20px;
}
.px-0 {
  padding-left: 0px;
  padding-right: 0px;
}
.px-1 {
  padding-left: 1px;
  padding-right: 1px;
}
.px-2 {
  padding-left: 2px;
  padding-right: 2px;
}
.px-3 {
  padding-left: 3px;
  padding-right: 3px;
}
.px-4 {
  padding-left: 4px;
  padding-right: 4px;
}
.px-5 {
  padding-left: 5px;
  padding-right: 5px;
}
.px-6 {
  padding-left: 6px;
  padding-right: 6px;
}
.px-7 {
  padding-left: 7px;
  padding-right: 7px;
}
.px-8 {
  padding-left: 8px;
  padding-right: 8px;
}
.px-9 {
  padding-left: 9px;
  padding-right: 9px;
}
.px-10 {
  padding-left: 10px;
  padding-right: 10px;
}
.px-11 {
  padding-left: 11px;
  padding-right: 11px;
}
.px-12 {
  padding-left: 12px;
  padding-right: 12px;
}
.px-13 {
  padding-left: 13px;
  padding-right: 13px;
}
.px-14 {
  padding-left: 14px;
  padding-right: 14px;
}
.px-15 {
  padding-left: 15px;
  padding-right: 15px;
}
.px-16 {
  padding-left: 16px;
  padding-right: 16px;
}
.px-17 {
  padding-left: 17px;
  padding-right: 17px;
}
.px-18 {
  padding-left: 18px;
  padding-right: 18px;
}
.px-19 {
  padding-left: 19px;
  padding-right: 19px;
}
.px-20 {
  padding-left: 20px;
  padding-right: 20px;
}
.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}
.py-1 {
  padding-top: 1px;
  padding-bottom: 1px;
}
.py-2 {
  padding-top: 2px;
  padding-bottom: 2px;
}
.py-3 {
  padding-top: 3px;
  padding-bottom: 3px;
}
.py-4 {
  padding-top: 4px;
  padding-bottom: 4px;
}
.py-5 {
  padding-top: 5px;
  padding-bottom: 5px;
}
.py-6 {
  padding-top: 6px;
  padding-bottom: 6px;
}
.py-7 {
  padding-top: 7px;
  padding-bottom: 7px;
}
.py-8 {
  padding-top: 8px;
  padding-bottom: 8px;
}
.py-9 {
  padding-top: 9px;
  padding-bottom: 9px;
}
.py-10 {
  padding-top: 10px;
  padding-bottom: 10px;
}
.py-11 {
  padding-top: 11px;
  padding-bottom: 11px;
}
.py-12 {
  padding-top: 12px;
  padding-bottom: 12px;
}
.py-13 {
  padding-top: 13px;
  padding-bottom: 13px;
}
.py-14 {
  padding-top: 14px;
  padding-bottom: 14px;
}
.py-15 {
  padding-top: 15px;
  padding-bottom: 15px;
}
.py-16 {
  padding-top: 16px;
  padding-bottom: 16px;
}
.py-17 {
  padding-top: 17px;
  padding-bottom: 17px;
}
.py-18 {
  padding-top: 18px;
  padding-bottom: 18px;
}
.py-19 {
  padding-top: 19px;
  padding-bottom: 19px;
}
.py-20 {
  padding-top: 20px;
  padding-bottom: 20px;
}
/*************************************************/
/*gap*/
.gap-0 {
  gap: 0px;
}
.gap-1 {
  gap: 1px;
}
.gap-2 {
  gap: 2px;
}
.gap-3 {
  gap: 3px;
}
.gap-4 {
  gap: 4px;
}
.gap-5 {
  gap: 5px;
}
.gap-6 {
  gap: 6px;
}
.gap-7 {
  gap: 7px;
}
.gap-8 {
  gap: 8px;
}
.gap-9 {
  gap: 9px;
}
.gap-10 {
  gap: 10px;
}
.gap-11 {
  gap: 11px;
}
.gap-12 {
  gap: 12px;
}
.gap-13 {
  gap: 13px;
}
.gap-14 {
  gap: 14px;
}
.gap-15 {
  gap: 15px;
}
.gap-16 {
  gap: 16px;
}
.gap-17 {
  gap: 17px;
}
.gap-18 {
  gap: 18px;
}
.gap-19 {
  gap: 19px;
}
.gap-20 {
  gap: 20px;
}
/* ================= END SPACING =================== */

/* =================  TEXT =================== */

/* font-size */
.f-s-6 {
  font-size: 6px;
}
.f-s-7 {
  font-size: 7px;
}
.f-s-8 {
  font-size: 8px;
}
.f-s-9 {
  font-size: 9px;
}
.f-s-10 {
  font-size: 10px;
}
.f-s-11 {
  font-size: 11px;
}
.f-s-12 {
  font-size: 12px;
}
.f-s-13 {
  font-size: 13px;
}
.f-s-14 {
  font-size: 14px;
}
.f-s-15 {
  font-size: 15px;
}
.f-s-16 {
  font-size: 16px;
}
.f-s-17 {
  font-size: 17px;
}
.f-s-18 {
  font-size: 18px;
}
.f-s-19 {
  font-size: 19px;
}
.f-s-20 {
  font-size: 20px;
}
.f-s-21 {
  font-size: 21px;
}
.f-s-22 {
  font-size: 22px;
}
.f-s-23 {
  font-size: 23px;
}
.f-s-24 {
  font-size: 24px;
}
.f-s-25 {
  font-size: 25px;
}
.f-s-26 {
  font-size: 26px;
}
.f-s-27 {
  font-size: 27px;
}
.f-s-28 {
  font-size: 28px;
}
.f-s-29 {
  font-size: 29px;
}
.f-s-30 {
  font-size: 30px;
}
/*************************************************/
.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

/* =================  SPACING REM =================== */

/*margin rem*/
.m-1rem {
  margin: 0.1rem;
}
.m-2rem {
  margin: 0.2rem;
}
.m-3rem {
  margin: 0.3rem;
}
.m-4rem {
  margin: 0.4rem;
}
.m-5rem {
  margin: 0.5rem;
}
.m-6rem {
  margin: 0.6rem;
}
.m-7rem {
  margin: 0.7rem;
}
.m-8rem {
  margin: 0.8rem;
}
.m-9rem {
  margin: 0.9rem;
}
.m-10rem {
  margin: 1rem;
}
.m-11rem {
  margin: 1.1rem;
}
.m-12rem {
  margin: 1.2rem;
}
.m-13rem {
  margin: 1.3rem;
}
.m-14rem {
  margin: 1.4rem;
}
.m-15rem {
  margin: 1.5rem;
}
.m-16rem {
  margin: 1.6rem;
}
.m-17rem {
  margin: 1.7rem;
}
.m-18rem {
  margin: 1.8rem;
}
.m-19rem {
  margin: 1.9rem;
}
.m-20rem {
  margin: 2rem;
}
.m-auto {
  margin: auto;
}
.mt-1rem {
  margin-top: 0.1rem;
}
.mt-2rem {
  margin-top: 0.2rem;
}
.mt-3rem {
  margin-top: 0.3rem;
}
.mt-4rem {
  margin-top: 0.4rem;
}
.mt-5rem {
  margin-top: 0.5rem;
}
.mt-6rem {
  margin-top: 0.6rem;
}
.mt-7rem {
  margin-top: 0.7rem;
}
.mt-8rem {
  margin-top: 0.8rem;
}
.mt-9rem {
  margin-top: 0.9rem;
}
.mt-10rem {
  margin-top: 1rem;
}
.mt-11rem {
  margin-top: 1.1rem;
}
.mt-12rem {
  margin-top: 1.2rem;
}
.mt-13rem {
  margin-top: 1.3rem;
}
.mt-14rem {
  margin-top: 1.4rem;
}
.mt-15rem {
  margin-top: 1.5rem;
}
.mt-16rem {
  margin-top: 1.6rem;
}
.mt-17rem {
  margin-top: 1.7rem;
}
.mt-18rem {
  margin-top: 1.8rem;
}
.mt-19rem {
  margin-top: 1.9rem;
}
.mt-20rem {
  margin-top: 2rem;
}
.mr-1rem {
  margin-right: 0.1rem;
}
.mr-2rem {
  margin-right: 0.2rem;
}
.mr-3rem {
  margin-right: 0.3rem;
}
.mr-4rem {
  margin-right: 0.4rem;
}
.mr-5rem {
  margin-right: 0.5rem;
}
.mr-6rem {
  margin-right: 0.6rem;
}
.mr-7rem {
  margin-right: 0.7rem;
}
.mr-8rem {
  margin-right: 0.8rem;
}
.mr-9rem {
  margin-right: 0.9rem;
}
.mr-10rem {
  margin-right: 1rem;
}
.mr-11rem {
  margin-right: 1.1rem;
}
.mr-12rem {
  margin-right: 1.2rem;
}
.mr-13rem {
  margin-right: 1.3rem;
}
.mr-14rem {
  margin-right: 1.4rem;
}
.mr-15rem {
  margin-right: 1.5rem;
}
.mr-16rem {
  margin-right: 1.6rem;
}
.mr-17rem {
  margin-right: 1.7rem;
}
.mr-18rem {
  margin-right: 1.8rem;
}
.mr-19rem {
  margin-right: 1.9rem;
}
.mr-20rem {
  margin-right: 2rem;
}
.mb-1rem {
  margin-bottom: 0.1rem;
}
.mb-2rem {
  margin-bottom: 0.2rem;
}
.mb-3rem {
  margin-bottom: 0.3rem;
}
.mb-4rem {
  margin-bottom: 0.4rem;
}
.mb-5rem {
  margin-bottom: 0.5rem;
}
.mb-6rem {
  margin-bottom: 0.6rem;
}
.mb-7rem {
  margin-bottom: 0.7rem;
}
.mb-8rem {
  margin-bottom: 0.8rem;
}
.mb-9rem {
  margin-bottom: 0.9rem;
}
.mb-10rem {
  margin-bottom: 1rem;
}
.mb-11rem {
  margin-bottom: 1.1rem;
}
.mb-12rem {
  margin-bottom: 1.2rem;
}
.mb-13rem {
  margin-bottom: 1.3rem;
}
.mb-14rem {
  margin-bottom: 1.4rem;
}
.mb-15rem {
  margin-bottom: 1.5rem;
}
.mb-16rem {
  margin-bottom: 1.6rem;
}
.mb-17rem {
  margin-bottom: 1.7rem;
}
.mb-18rem {
  margin-bottom: 1.8rem;
}
.mb-19rem {
  margin-bottom: 1.9rem;
}
.mb-20rem {
  margin-bottom: 2rem;
}
.ml-1rem {
  margin-left: 0.1rem;
}
.ml-2rem {
  margin-left: 0.2rem;
}
.ml-3rem {
  margin-left: 0.3rem;
}
.ml-4rem {
  margin-left: 0.4rem;
}
.ml-5rem {
  margin-left: 0.5rem;
}
.ml-6rem {
  margin-left: 0.6rem;
}
.ml-7rem {
  margin-left: 0.7rem;
}
.ml-8rem {
  margin-left: 0.8rem;
}
.ml-9rem {
  margin-left: 0.9rem;
}
.ml-10rem {
  margin-left: 1rem;
}
.ml-11rem {
  margin-left: 1.1rem;
}
.ml-12rem {
  margin-left: 1.2rem;
}
.ml-13rem {
  margin-left: 1.3rem;
}
.ml-14rem {
  margin-left: 1.4rem;
}
.ml-15rem {
  margin-left: 1.5rem;
}
.ml-16rem {
  margin-left: 1.6rem;
}
.ml-17rem {
  margin-left: 1.7rem;
}
.ml-18rem {
  margin-left: 1.8rem;
}
.ml-19rem {
  margin-left: 1.9rem;
}
.ml-20rem {
  margin-left: 2rem;
}
.mx-1rem {
  margin-left: 0.1rem;
  margin-right: 0.1rem;
}
.mx-2rem {
  margin-left: 0.2rem;
  margin-right: 0.2rem;
}
.mx-3rem {
  margin-left: 0.3rem;
  margin-right: 0.3rem;
}
.mx-4rem {
  margin-left: 0.4rem;
  margin-right: 0.4rem;
}
.mx-5rem {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.mx-6rem {
  margin-left: 0.6rem;
  margin-right: 0.6rem;
}
.mx-7rem {
  margin-left: 0.7rem;
  margin-right: 0.7rem;
}
.mx-8rem {
  margin-left: 0.8rem;
  margin-right: 0.8rem;
}
.mx-9rem {
  margin-left: 0.9rem;
  margin-right: 0.9rem;
}
.mx-10rem {
  margin-left: 1rem;
  margin-right: 1rem;
}
.mx-11rem {
  margin-left: 1.1rem;
  margin-right: 1.1rem;
}
.mx-12rem {
  margin-left: 1.2rem;
  margin-right: 1.2rem;
}
.mx-13rem {
  margin-left: 1.3rem;
  margin-right: 1.3rem;
}
.mx-14rem {
  margin-left: 1.4rem;
  margin-right: 1.4rem;
}
.mx-15rem {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}
.mx-16rem {
  margin-left: 1.6rem;
  margin-right: 1.6rem;
}
.mx-17rem {
  margin-left: 1.7rem;
  margin-right: 1.7rem;
}
.mx-18rem {
  margin-left: 1.8rem;
  margin-right: 1.8rem;
}
.mx-19rem {
  margin-left: 1.9rem;
  margin-right: 1.9rem;
}
.mx-20rem {
  margin-left: 2rem;
  margin-right: 2rem;
}

.my-1rem {
  margin-top: 0.1rem;
  margin-bottom: 0.1rem;
}
.my-2rem {
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
}
.my-3rem {
  margin-top: 0.3rem;
  margin-bottom: 0.3rem;
}
.my-4rem {
  margin-top: 0.4rem;
  margin-bottom: 0.4rem;
}
.my-5rem {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.my-6rem {
  margin-top: 0.6rem;
  margin-bottom: 0.6rem;
}
.my-7rem {
  margin-top: 0.7rem;
  margin-bottom: 0.7rem;
}
.my-8rem {
  margin-top: 0.8rem;
  margin-bottom: 0.8rem;
}
.my-9rem {
  margin-top: 0.9rem;
  margin-bottom: 0.9rem;
}
.my-10rem {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.my-11rem {
  margin-top: 1.1rem;
  margin-bottom: 1.1rem;
}
.my-12rem {
  margin-top: 1.2rem;
  margin-bottom: 1.2rem;
}
.my-13rem {
  margin-top: 1.3rem;
  margin-bottom: 1.3rem;
}
.my-14rem {
  margin-top: 1.4rem;
  margin-bottom: 1.4rem;
}
.my-15rem {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.my-16rem {
  margin-top: 1.6rem;
  margin-bottom: 1.6rem;
}
.my-17rem {
  margin-top: 1.7rem;
  margin-bottom: 1.7rem;
}
.my-18rem {
  margin-top: 1.8rem;
  margin-bottom: 1.8rem;
}
.my-19rem {
  margin-top: 1.9rem;
  margin-bottom: 1.9rem;
}
.my-20rem {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
/*************************************************/
/*padding rem*/
.p-1rem {
  padding: 0.1rem;
}
.p-2rem {
  padding: 0.2rem;
}
.p-3rem {
  padding: 0.3rem;
}
.p-4rem {
  padding: 0.4rem;
}
.p-5rem {
  padding: 0.5rem;
}
.p-6rem {
  padding: 0.6rem;
}
.p-7rem {
  padding: 0.7rem;
}
.p-8rem {
  padding: 0.8rem;
}
.p-9rem {
  padding: 0.9rem;
}
.p-10rem {
  padding: 1rem;
}
.p-11rem {
  padding: 1.1rem;
}
.p-12rem {
  padding: 1.2rem;
}
.p-13rem {
  padding: 1.3rem;
}
.p-14rem {
  padding: 1.4rem;
}
.p-15rem {
  padding: 1.5rem;
}
.p-16rem {
  padding: 1.6rem;
}
.p-17rem {
  padding: 1.7rem;
}
.p-18rem {
  padding: 1.8rem;
}
.p-19rem {
  padding: 1.9rem;
}
.p-20rem {
  padding: 2rem;
}
.pt-1rem {
  padding-top: 0.1rem;
}
.pt-2rem {
  padding-top: 0.2rem;
}
.pt-3rem {
  padding-top: 0.3rem;
}
.pt-4rem {
  padding-top: 0.4rem;
}
.pt-5rem {
  padding-top: 0.5rem;
}
.pt-6rem {
  padding-top: 0.6rem;
}
.pt-7rem {
  padding-top: 0.7rem;
}
.pt-8rem {
  padding-top: 0.8rem;
}
.pt-9rem {
  padding-top: 0.9rem;
}
.pt-10rem {
  padding-top: 1rem;
}
.pt-11rem {
  padding-top: 1.1rem;
}
.pt-12rem {
  padding-top: 1.2rem;
}
.pt-13rem {
  padding-top: 1.3rem;
}
.pt-14rem {
  padding-top: 1.4rem;
}
.pt-15rem {
  padding-top: 1.5rem;
}
.pt-16rem {
  padding-top: 1.6rem;
}
.pt-17rem {
  padding-top: 1.7rem;
}
.pt-18rem {
  padding-top: 1.8rem;
}
.pt-19rem {
  padding-top: 1.9rem;
}
.pt-20rem {
  padding-top: 2rem;
}
.pr-1rem {
  padding-right: 0.1rem;
}
.pr-2rem {
  padding-right: 0.2rem;
}
.pr-3rem {
  padding-right: 0.3rem;
}
.pr-4rem {
  padding-right: 0.4rem;
}
.pr-5rem {
  padding-right: 0.5rem;
}
.pr-6rem {
  padding-right: 0.6rem;
}
.pr-7rem {
  padding-right: 0.7rem;
}
.pr-8rem {
  padding-right: 0.8rem;
}
.pr-9rem {
  padding-right: 0.9rem;
}
.pr-10rem {
  padding-right: 1rem;
}
.pr-11rem {
  padding-right: 1.1rem;
}
.pr-12rem {
  padding-right: 1.2rem;
}
.pr-13rem {
  padding-right: 1.3rem;
}
.pr-14rem {
  padding-right: 1.4rem;
}
.pr-15rem {
  padding-right: 1.5rem;
}
.pr-16rem {
  padding-right: 1.6rem;
}
.pr-17rem {
  padding-right: 1.7rem;
}
.pr-18rem {
  padding-right: 1.8rem;
}
.pr-19rem {
  padding-right: 1.9rem;
}
.pr-20rem {
  padding-right: 2rem;
}
.pb-1rem {
  padding-bottom: 0.1rem;
}
.pb-2rem {
  padding-bottom: 0.2rem;
}
.pb-3rem {
  padding-bottom: 0.3rem;
}
.pb-4rem {
  padding-bottom: 0.4rem;
}
.pb-5rem {
  padding-bottom: 0.5rem;
}
.pb-6rem {
  padding-bottom: 0.6rem;
}
.pb-7rem {
  padding-bottom: 0.7rem;
}
.pb-8rem {
  padding-bottom: 0.8rem;
}
.pb-9rem {
  padding-bottom: 0.9rem;
}
.pb-10rem {
  padding-bottom: 1rem;
}
.pb-11rem {
  padding-bottom: 1.1rem;
}
.pb-12rem {
  padding-bottom: 1.2rem;
}
.pb-13rem {
  padding-bottom: 1.3rem;
}
.pb-14rem {
  padding-bottom: 1.4rem;
}
.pb-15rem {
  padding-bottom: 1.5rem;
}
.pb-16rem {
  padding-bottom: 1.6rem;
}
.pb-17rem {
  padding-bottom: 1.7rem;
}
.pb-18rem {
  padding-bottom: 1.8rem;
}
.pb-19rem {
  padding-bottom: 1.9rem;
}
.pb-20rem {
  padding-bottom: 2rem;
}
.pl-1rem {
  padding-left: 0.1rem;
}
.pl-2rem {
  padding-left: 0.2rem;
}
.pl-3rem {
  padding-left: 0.3rem;
}
.pl-4rem {
  padding-left: 0.4rem;
}
.pl-5rem {
  padding-left: 0.5rem;
}
.pl-6rem {
  padding-left: 0.6rem;
}
.pl-7rem {
  padding-left: 0.7rem;
}
.pl-8rem {
  padding-left: 0.8rem;
}
.pl-9rem {
  padding-left: 0.9rem;
}
.pl-10rem {
  padding-left: 1rem;
}
.pl-11rem {
  padding-left: 1.1rem;
}
.pl-12rem {
  padding-left: 1.2rem;
}
.pl-13rem {
  padding-left: 1.3rem;
}
.pl-14rem {
  padding-left: 1.4rem;
}
.pl-15rem {
  padding-left: 1.5rem;
}
.pl-16rem {
  padding-left: 1.6rem;
}
.pl-17rem {
  padding-left: 1.7rem;
}
.pl-18rem {
  padding-left: 1.8rem;
}
.pl-19rem {
  padding-left: 1.9rem;
}
.pl-20rem {
  padding-left: 2rem;
}
.px-1rem {
  padding-left: 0.1rem;
  padding-right: 0.1rem;
}
.px-2rem {
  padding-left: 0.2rem;
  padding-right: 0.2rem;
}
.px-3rem {
  padding-left: 0.3rem;
  padding-right: 0.3rem;
}
.px-4rem {
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}
.px-5rem {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-6rem {
  padding-left: 0.6rem;
  padding-right: 0.6rem;
}
.px-7rem {
  padding-left: 0.7rem;
  padding-right: 0.7rem;
}
.px-8rem {
  padding-left: 0.8rem;
  padding-right: 0.8rem;
}
.px-9rem {
  padding-left: 0.9rem;
  padding-right: 0.9rem;
}
.px-10rem {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-11rem {
  padding-left: 1.1rem;
  padding-right: 1.1rem;
}
.px-12rem {
  padding-left: 1.2rem;
  padding-right: 1.2rem;
}
.px-13rem {
  padding-left: 1.3rem;
  padding-right: 1.3rem;
}
.px-14rem {
  padding-left: 1.4rem;
  padding-right: 1.4rem;
}
.px-15rem {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-16rem {
  padding-left: 1.6rem;
  padding-right: 1.6rem;
}
.px-17rem {
  padding-left: 1.7rem;
  padding-right: 1.7rem;
}
.px-18rem {
  padding-left: 1.8rem;
  padding-right: 1.8rem;
}
.px-19rem {
  padding-left: 1.9rem;
  padding-right: 1.9rem;
}
.px-20rem {
  padding-left: 2rem;
  padding-right: 2rem;
}
.py-1rem {
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
}
.py-2rem {
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}
.py-3rem {
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}
.py-4rem {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}
.py-5rem {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-6rem {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}
.py-7rem {
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}
.py-8rem {
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}
.py-9rem {
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}
.py-10rem {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-11rem {
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
}
.py-12rem {
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
}
.py-13rem {
  padding-top: 1.3rem;
  padding-bottom: 1.3rem;
}
.py-14rem {
  padding-top: 1.4rem;
  padding-bottom: 1.4rem;
}
.py-15rem {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-16rem {
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
}
.py-17rem {
  padding-top: 1.7rem;
  padding-bottom: 1.7rem;
}
.py-18rem {
  padding-top: 1.8rem;
  padding-bottom: 1.8rem;
}
.py-19rem {
  padding-top: 1.9rem;
  padding-bottom: 1.9rem;
}
.py-20rem {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.p-0-5 {
  padding: 0 5%;
}
.p-1-5 {
  padding: 1 5%;
}
.p-2-5 {
  padding: 2 5%;
}
.p-3-5 {
  padding: 3 5%;
}

/*************************************************/
/*gap rem*/
.gap-1rem {
  gap: 0.1rem;
}
.gap-2rem {
  gap: 0.2rem;
}
.gap-3rem {
  gap: 0.3rem;
}
.gap-4rem {
  gap: 0.4rem;
}
.gap-5rem {
  gap: 0.5rem;
}
.gap-6rem {
  gap: 0.6rem;
}
.gap-7rem {
  gap: 0.7rem;
}
.gap-8rem {
  gap: 0.8rem;
}
.gap-9rem {
  gap: 0.9rem;
}
.gap-10rem {
  gap: 1rem;
}
.gap-11rem {
  gap: 1.1rem;
}
.gap-12rem {
  gap: 1.2rem;
}
.gap-13rem {
  gap: 1.3rem;
}
.gap-14rem {
  gap: 1.4rem;
}
.gap-15rem {
  gap: 1.5rem;
}
.gap-16rem {
  gap: 1.6rem;
}
.gap-17rem {
  gap: 1.7rem;
}
.gap-18rem {
  gap: 1.8rem;
}
.gap-19rem {
  gap: 1.9rem;
}
.gap-20rem {
  gap: 2rem;
}
.gap-2-25rem {
  gap: 2.25rem;
}
.gap-25rem {
  gap: 2.5rem;
}
.gap-2-75rem {
  gap: 2.75rem;
}
.gap-30rem {
  gap: 3rem;
}
.gap-3-25rem {
  gap: 3.25rem;
}
.gap-35rem {
  gap: 3.5rem;
}
.gap-3-75rem {
  gap: 3.75rem;
}
.gap-40rem {
  gap: 4rem;
}
.gap-4-25rem {
  gap: 4.25rem;
}
.gap-45rem {
  gap: 4.5rem;
}
.gap-4-75rem {
  gap: 4.75rem;
}
/* ================= END SPACING REM =================== */

/* =================  TEXT REM =================== */

/* font-size rem */
.f-s-6rem {
  font-size: 0.6rem;
}
.f-s-7rem {
  font-size: 0.7rem;
}
.f-s-8rem {
  font-size: 0.8rem;
}
.f-s-9rem {
  font-size: 0.9rem;
}
.f-s-10rem {
  font-size: 1rem;
}
.f-s-11rem {
  font-size: 1.1rem;
}
.f-s-12rem {
  font-size: 1.2rem;
}
.f-s-13rem {
  font-size: 1.3rem;
}
.f-s-14rem {
  font-size: 1.4rem;
}
.f-s-15rem {
  font-size: 1.5rem;
}
.f-s-16rem {
  font-size: 1.6rem;
}
.f-s-17rem {
  font-size: 1.7rem;
}
.f-s-18rem {
  font-size: 1.8rem;
}
.f-s-19rem {
  font-size: 1.9rem;
}
.f-s-20rem {
  font-size: 2rem;
}
.f-s-21rem {
  font-size: 2.1rem;
}
.f-s-22rem {
  font-size: 2.2rem;
}
.f-s-23rem {
  font-size: 2.3rem;
}
.f-s-24rem {
  font-size: 2.4rem;
}
.f-s-25rem {
  font-size: 2.5rem;
}
.f-s-26rem {
  font-size: 2.6rem;
}
.f-s-27rem {
  font-size: 2.7rem;
}
.f-s-28rem {
  font-size: 2.8rem;
}
.f-s-29rem {
  font-size: 2.9rem;
}
.f-s-30rem {
  font-size: 3rem;
}

/*************************************************/
/*font-weight*/
.f-w-100 {
  font-weight: 100;
}
.f-w-200 {
  font-weight: 200;
}
.f-w-300 {
  font-weight: 300;
}
.f-w-400 {
  font-weight: 400;
}
.f-w-500 {
  font-weight: 500;
}
.f-w-600 {
  font-weight: 600;
}
.f-w-700 {
  font-weight: 700;
}
.f-w-800 {
  font-weight: 800;
}
.f-w-900 {
  font-weight: 900;
}
/*************************************************/
/*line-height*/
.line-height-08 {
  line-height: 0.8;
}
.line-height-09 {
  line-height: 0.9;
}
.line-height-10 {
  line-height: 1;
}
.line-height-11 {
  line-height: 1.1;
}
.line-height-12 {
  line-height: 1.2;
}
.line-height-13 {
  line-height: 1.3;
}
.line-height-14 {
  line-height: 1.4;
}
.line-height-15 {
  line-height: 1.5;
}
.line-height-16 {
  line-height: 1.6;
}
.line-height-17 {
  line-height: 1.7;
}
.line-height-18 {
  line-height: 1.8;
}
.line-height-19 {
  line-height: 1.9;
}
.line-height-20 {
  line-height: 2;
}
/*************************************************/
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-center {
  text-align: center;
}
.text-linethrough {
  text-decoration: line-through;
}
.text-none {
  text-decoration: none;
}
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box !important;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  white-space: normal;
}
.text-truncate-2row {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}
.text-truncate-3row {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  white-space: normal;
}
/* ================= END TEXT =================== */

/* =================  COLORS =================== */

/*color*/
.c-inherit {
  color: inherit;
}
.c-primary {
  color: var(--primary);
}
.c-secondary {
  color: var(--secondary);
}
.c-indigo {
  color: var(--indigo);
}
.c-black {
  color: var(--black);
}
.c-white {
  color: var(--white);
}
.c-gray {
  color: var(--gray);
}
.c-red {
  color: var(--red);
}
.c-green {
  color: var(--green);
}
.c-orange {
  color: var(--orange);
}
.c-yellow {
  color: var(--yellow);
}
.c-dark {
  color: var(--gray-dark);
}
.c-light {
  color: var(--lighter-gray);
}
.c-base {
  color: var(--base);
}
.c-basecontrast {
  color: var(--basecontrast);
}
.c-baselight {
  color: var(--baselight);
}
.c-baselightcontrast {
  color: var(--baselightcontrast);
}
.c-basedark {
  color: var(--basedark);
}
.c-basedarkcontrast {
  color: var(--basedarkcontrast);
}
.c-default {
  color: var(--default);
}
.c-defaultcontrast {
  color: var(--defaultcontrast);
}
.c-disable {
  color: var(--disable);
}
.c-disablecontrast {
  color: var(--disablecontrast);
}
.c-enable {
  color: var(--enable);
}
.c-enablecontrast {
  color: var(--enablecontrast);
}

/*************************************************/

/*background-color*/
.bg-c-inherit {
  background-color: inherit;
}
.bg-c-primary {
  background-color: var(--primary);
}
.bg-c-secondary {
  background-color: var(--secondary);
}
.bg-c-indigo {
  background-color: var(--indigo);
}
.bg-c-black {
  background-color: var(--black);
}
.bg-c-white {
  background-color: var(--white);
}
.bg-c-gray {
  background-color: var(--gray);
}
.bg-c-red {
  background-color: var(--red);
}
.bg-c-green {
  background-color: var(--green);
}
.bg-c-orange {
  background-color: var(--orange);
}
.bg-c-yellow {
  background-color: var(--yellow);
}
.bg-c-dark {
  background-color: var(--gray-dark);
}
.bg-c-light {
  background-color: var(--lighter-gray);
}
.bg-c-base {
  background-color: var(--base);
}
.bg-c-basecontrast {
  background-color: var(--basecontrast);
}
.bg-c-baselight {
  background-color: var(--baselight);
}
.bg-c-baselightcontrast {
  background-color: var(--baselightcontrast);
}
.bg-c-basedark {
  background-color: var(--basedark);
}
.bg-c-basedarkcontrast {
  background-color: var(--basedarkcontrast);
}
.bg-c-default {
  background-color: var(--default);
}
.bg-c-defaultcontrast {
  background-color: var(--defaultcontrast);
}
.bg-c-disable {
  background-color: var(--disable);
}
.bg-c-disablecontrast {
  background-color: var(--disablecontrast);
}
.bg-c-enable {
  background-color: var(--enable);
}
.bg-c-enablecontrast {
  background-color: var(--enablecontrast);
}
/* ================= END COLORS =================== */

/* =================  BORDERS =================== */
/*border*/
.border-none {
  border: none !important;
}
.br-t-none {
  border-top-width: 0 !important;
}
.br-r-none {
  border-right-width: 0 !important;
}
.br-b-none {
  border-bottom-width: 0 !important;
}
.br-l-none {
  border-left-width: 0 !important;
}
.br-solid-t-1 {
  border-top: 1px solid;
}
.br-solid-r-1 {
  border-right: 1px solid;
}
.br-solid-b-1 {
  border-bottom: 1px solid;
}
.br-solid-l-1 {
  border-left: 1px solid;
}
.br-solid-t-2 {
  border-top: 2px solid;
}
.br-solid-r-2 {
  border-right: 2px solid;
}
.br-solid-b-2 {
  border-bottom: 2px solid;
}
.br-solid-l-2 {
  border-left: 2px solid;
}
.br-solid-t-3 {
  border-top: 3px solid;
}
.br-solid-r-3 {
  border-right: 3px solid;
}
.br-solid-b-3 {
  border-bottom: 3px solid;
}
.br-solid-l-3 {
  border-left: 3px solid;
}
.br-solid-t-4 {
  border-top: 4px solid;
}
.br-solid-r-4 {
  border-right: 4px solid;
}
.br-solid-b-4 {
  border-bottom: 4px solid;
}
.br-solid-l-4 {
  border-left: 4px solid;
}
.br-solid-w-1 {
  border: 1px solid;
}
.br-solid-w-2 {
  border: 2px solid;
}
.br-solid-w-3 {
  border: 3px solid;
}
.br-solid-w-4 {
  border: 4px solid;
}
.br-dotted-w-1 {
  border: 1px dotted;
}
.br-dotted-w-2 {
  border: 2px dotted;
}
.br-dotted-w-3 {
  border: 3px dotted;
}
.br-dotted-w-4 {
  border: 4px dotted;
}
.br-dashed-w-1 {
  border: 1px dashed;
}
.br-dashed-w-2 {
  border: 2px dashed;
}
.br-dashed-w-3 {
  border: 3px dashed;
}
.br-dashed-w-4 {
  border: 4px dashed;
}
/*************************************************/
/*border-color*/
.br-c-primary {
  border-color: var(--primary);
}
.br-c-secondary {
  border-color: var(--secondary);
}
.br-c-white {
  border-color: var(--white);
}
.br-c-red {
  border-color: var(--red);
}
.br-c-green {
  border-color: var(--green);
}
.br-c-black {
  border-color: var(--black);
}
.br-c-base {
  border-color: var(--base);
}
.br-c-basecontrast {
  border-color: var(--basecontrast);
}
.br-c-baselight {
  border-color: var(--baselight);
}
.br-c-baselightcontrast {
  border-color: var(--baselightcontrast);
}
.br-c-basedark {
  border-color: var(--basedark);
}
.br-c-basedarkcontrast {
  border-color: var(--basedarkcontrast);
}
.br-c-default {
  border-color: var(--default);
}
.br-c-defaultcontrast {
  border-color: var(--defaultcontrast);
}
.br-c-disable {
  border-color: var(--disable);
}
.br-c-disablecontrast {
  border-color: var(--disablecontrast);
}
.br-c-enable {
  border-color: var(--enable);
}
.br-c-enablecontrast {
  border-color: var(--enablecontrast);
}
.br-c-enablesoft {
  border-color: var(--enable);
}
/*************************************************/
/*border-radius*/
.br-radius-0 {
  border-radius: 0;
}
.br-tr-radius-0 {
  border-top-right-radius: 0;
}
.br-tl-radius-0 {
  border-top-left-radius: 0;
}
.br-br-radius-0 {
  border-bottom-right-radius: 0;
}
.br-bl-radius-0 {
  border-bottom-left-radius: 0;
}
.br-radius-50 {
  border-radius: 50%;
}
.br-radius-100 {
  border-radius: 100%;
}
.br-tr-radius-50 {
  border-top-right-radius: 50%;
}
.br-tr-radius-50 {
  border-top-right-radius: 100%;
}
.br-tl-radius-50 {
  border-top-left-radius: 50%;
}
.br-tl-radius-50 {
  border-top-left-radius: 100%;
}
.br-br-radius-50 {
  border-bottom-right-radius: 50%;
}
.br-br-radius-50 {
  border-bottom-right-radius: 100%;
}
.br-bl-radius-50 {
  border-bottom-left-radius: 50%;
}
.br-bl-radius-50 {
  border-bottom-left-radius: 100%;
}
.br-radius-4 {
  border-radius: 4px;
}
.br-radius-5 {
  border-radius: 5px;
}
.br-radius-6 {
  border-radius: 6px;
}
.br-radius-7 {
  border-radius: 7px;
}
.br-radius-8 {
  border-radius: 8px;
}
.br-radius-9 {
  border-radius: 9px;
}
.br-radius-10 {
  border-radius: 10px;
}
.br-tr-radius-4 {
  border-top-right-radius: 4px;
}
.br-tr-radius-5 {
  border-top-right-radius: 5px;
}
.br-tr-radius-6 {
  border-top-right-radius: 6px;
}
.br-tr-radius-7 {
  border-top-right-radius: 7px;
}
.br-tr-radius-8 {
  border-top-right-radius: 8px;
}
.br-tr-radius-9 {
  border-top-right-radius: 9px;
}
.br-tr-radius-10 {
  border-top-right-radius: 10px;
}
.br-tl-radius-4 {
  border-top-left-radius: 4px;
}
.br-tl-radius-5 {
  border-top-left-radius: 5px;
}
.br-tl-radius-6 {
  border-top-left-radius: 6px;
}
.br-tl-radius-7 {
  border-top-left-radius: 7px;
}
.br-tl-radius-8 {
  border-top-left-radius: 8px;
}
.br-tl-radius-9 {
  border-top-left-radius: 9px;
}
.br-tl-radius-10 {
  border-top-left-radius: 10px;
}
.br-br-radius-4 {
  border-bottom-right-radius: 4px;
}
.br-br-radius-5 {
  border-bottom-right-radius: 5px;
}
.br-br-radius-6 {
  border-bottom-right-radius: 6px;
}
.br-br-radius-7 {
  border-bottom-right-radius: 7px;
}
.br-br-radius-8 {
  border-bottom-right-radius: 8px;
}
.br-br-radius-9 {
  border-bottom-right-radius: 9px;
}
.br-br-radius-10 {
  border-bottom-right-radius: 10px;
}
.br-bl-radius-4 {
  border-bottom-left-radius: 4px;
}
.br-bl-radius-5 {
  border-bottom-left-radius: 5px;
}
.br-bl-radius-6 {
  border-bottom-left-radius: 6px;
}
.br-bl-radius-7 {
  border-bottom-left-radius: 7px;
}
.br-bl-radius-8 {
  border-bottom-left-radius: 8px;
}
.br-bl-radius-9 {
  border-bottom-left-radius: 9px;
}
.br-bl-radius-10 {
  border-bottom-left-radius: 10px;
}
/* ================= END BORDERS =================== */

/* =================  DISPLAY =================== */
.hide {
  display: none !important;
}
.flex {
  display: flex;
}
.grid {
  display: grid;
}
.block {
  display: block;
}
.inline-flex {
  display: inline-flex;
}
.inline-grid {
  display: inline-grid;
}
.inline-block {
  display: inline-block;
}
/*direction and justify*/
.flex-col {
  flex-direction: column;
}
.flex-row {
  flex-direction: row;
}
.flex-col-rev {
  flex-direction: column-reverse;
}
.flex-row-rev {
  flex-direction: row-reverse;
}
.wrap {
  flex-wrap: wrap;
}
.nowrap {
  flex-wrap: nowrap;
}
.flex-start {
  justify-content: flex-start;
}
.flex-end {
  justify-content: flex-end;
}
.flex-center {
  justify-content: center;
}
.space-around {
  justify-content: space-around;
}
.space-between {
  justify-content: space-between;
}
.space-evenly {
  justify-content: space-evenly;
}
.flex-center-all {
  display: flex;
  justify-content: center;
  align-items: center;
}
/*************************************************/
/*align*/
.item-start {
  align-items: start;
}
.item-center {
  align-items: center;
}
.item-end {
  align-items: end;
}
/*************************************************/
/*float*/
.float-r {
  float: right;
}
.float-l {
  float: left;
}
/* ================= END DISPLAY =================== */

/* =================  POSITION =================== */
/*position*/
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.fixed {
  position: fixed;
}
.sticky {
  position: sticky;
}
/*************************************************/
/*btlr*/
.t-0 {
  top: 0;
}
.b-0 {
  bottom: 0;
}
.l-0 {
  left: 0;
}
.r-0 {
  right: 0;
}
.t-100 {
  top: 100%;
}
.b-100 {
  bottom: 100%;
}
.r-100 {
  right: 100%;
}
.l-100 {
  left: 100%;
}
.top-left {
  top: 2%;
  left: 2%;
}
.top-center {
  top: 2%;
  left: 50%;
  transform: translateX(-50%);
}
.top-right {
  top: 2%;
  right: 2%;
}
.center-left {
  top: 50%;
  left: 2%;
  transform: translateY(-50%);
}
.center-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.center-right {
  top: 50%;
  right: 2%;
  transform: translateY(-50%);
}
.bottom-left {
  bottom: 2%;
  left: 2%;
}
.bottom-center {
  bottom: 2%;
  left: 50%;
  transform: translateX(-50%);
}
.bottom-right {
  bottom: 2%;
  right: 2%;
}

.sticky-top {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}
/* ================= END POSITION =================== */

/* =================  ANIMATION =================== */
.transition-1 {
  transition: 0.1s;
}
.transition-2 {
  transition: 0.2s;
}
.transition-3 {
  transition: 0.3s;
}
.transition-4 {
  transition: 0.4s;
}
.transition-5 {
  transition: 0.5s;
}
/* =================  END ANIMATION =================== */

/* =================  ZINDEX =================== */
.z-index-9 {
  z-index: 9;
}
.z-index-99 {
  z-index: 99;
}
.z-index-999 {
  z-index: 999;
}
.z-index-9999 {
  z-index: 9999;
}
.z-index-99999 {
  z-index: 99999;
}
.z-index-999999 {
  z-index: 999999;
}
/* ================= END ZINDEX =================== */

/* =================  OPACITY =================== */
.opacity-0 {
  opacity: 0;
}
.opacity-1 {
  opacity: 0.1;
}
.opacity-2 {
  opacity: 0.2;
}
.opacity-3 {
  opacity: 0.3;
}
.opacity-4 {
  opacity: 0.4;
}
.opacity-5 {
  opacity: 0.5;
}
.opacity-6 {
  opacity: 0.6;
}
.opacity-7 {
  opacity: 0.7;
}
.opacity-8 {
  opacity: 0.8;
}
.opacity-9 {
  opacity: 0.9;
}
.opacity-10 {
  opacity: 1;
}

.opacity-hover-0:hover {
  opacity: 0;
}
.opacity-hover-1:hover {
  opacity: 0.1;
}
.opacity-hover-2:hover {
  opacity: 0.2;
}
.opacity-hover-3:hover {
  opacity: 0.3;
}
.opacity-hover-4:hover {
  opacity: 0.4;
}
.opacity-hover-5:hover {
  opacity: 0.5;
}
.opacity-hover-6:hover {
  opacity: 0.6;
}
.opacity-hover-7:hover {
  opacity: 0.7;
}
.opacity-hover-8:hover {
  opacity: 0.8;
}
.opacity-hover-9:hover {
  opacity: 0.9;
}
.opacity-hover-10:hover {
  opacity: 1;
}
/* ================= END OPACITY =================== */

/* ================== BUTTONS  =================== */
.btn-enable {
  color: var(--enablecontrast);
  background: var(--enable);
}
.btn-enablecontrast {
  color: var(--enable);
  background: var(--enablecontrast);
}
.btn-disable {
  color: var(--disablecontrast);
  background: var(--disable);
}
.btn-disablecontrast {
  color: var(--disable);
  background: var(--disablecontrast);
}
.btn-default {
  color: var(--defaultcontrast);
  background: var(--default);
}
.btn-defaultcontrast {
  color: var(--default);
  background: var(--defaultcontrast);
}
.btn-red {
  color: var(--white);
  background: var(--red);
}
.btn-green {
  color: var(--white);
  background: var(--green);
}
/* ================= BUTTON BUTTONS =================== */

/* ================== HOVER  =================== */

/* button-hover */
.btn-hover-enable:hover {
  color: var(--enablecontrast);
  background: var(--enable);
}
.btn-hover-enablecontrast:hover {
  color: var(--enable);
  background: var(--enablecontrast);
}
.btn-hover-disable:hover {
  color: var(--disablecontrast);
  background: var(--disable);
}
.btn-hover-disablecontrast:hover {
  color: var(--disable);
  background: var(--disablecontrast);
}
.btn-hover-default:hover {
  color: var(--defaultcontrast);
  background: var(--default);
}
.btn-hover-defaultcontrast:hover {
  color: var(--default);
  background: var(--defaultcontrast);
}
.btn-hover-red:hover {
  color: var(--white);
  background: var(--red);
}
.btn-hover-redcontrast:hover {
  color: var(--red);
  background: var(--white);
}
.btn-hover-green:hover {
  color: var(--white);
  background: var(--green);
}
.btn-hover-greencontrast:hover {
  color: var(--green);
  background: var(--white);
}

/* text-hover */
.text-hover-enable:hover {
  color: var(--enable);
}
.text-hover-disable:hover {
  color: var(--disable);
}
.text-hover-default:hover {
  color: var(--default);
}
.text-hover-red:hover {
  color: var(--red);
}
.text-hover-green:hover {
  color: var(--green);
}

/* font-hover */
.font-hover-10rem:hover {
  font-size: 1rem;
}
.font-hover-11rem:hover {
  font-size: 1.1rem;
}
.font-hover-12rem:hover {
  font-size: 1.2rem;
}
.font-hover-13rem:hover {
  font-size: 1.3rem;
}
.font-hover-14rem:hover {
  font-size: 1.4rem;
}
.font-hover-15rem:hover {
  font-size: 1.5rem;
}
.font-hover-16rem:hover {
  font-size: 1.6rem;
}
.font-hover-17rem:hover {
  font-size: 1.7rem;
}
.font-hover-18rem:hover {
  font-size: 1.8rem;
}
.font-hover-19rem:hover {
  font-size: 1.9rem;
}
.font-hover-20rem:hover {
  font-size: 2rem;
}

/* bold-hover */
.bold-hover-500:hover {
  font-weight: 500;
}
.bold-hover-600:hover {
  font-weight: 600;
}
.bold-hover-700:hover {
  font-weight: 700;
}
.bold-hover-800:hover {
  font-weight: 800;
}
.bold-hover-900:hover {
  font-weight: 900;
}

/* shadow-hover */
.shadow-hover-light {
  box-shadow: 0 0 0 0 var(--baselight);
}
.shadow-hover-light:hover {
  box-shadow: 0 1px 8px 0 var(--baselight);
}
.shadow-hover-dark {
  box-shadow: 0 0 0 0 var(--basedark);
}
.shadow-hover-dark:hover {
  box-shadow: 0 1px 8px 0 var(--basedark);
}
.shadow-hover-enable {
  box-shadow: 0 0 0 0 var(--enable);
}
.shadow-hover-enable:hover {
  box-shadow: 0 1px 16px 0 var(--enable);
}

/* ================= END HOVER =================== */

/* =================  OVERFLOW =================== */
.scroll-h {
  overflow: hidden;
}
.scroll-auto {
  overflow: auto;
}
.scroll-y-h {
  overflow-y: hidden;
}
.scroll-y-auto {
  overflow-y: auto;
}
.scroll-x-h {
  overflow-x: hidden;
}
.scroll-x-auto {
  overflow-x: auto;
}
/* ================= END ZINDEX =================== */

/* =================  ROTATE =================== */
.rotate45 {
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
}
.rotate90 {
  transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
}
.rotate180 {
  transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -o-transform: rotate(180deg);
}
.rotate270 {
  transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  -o-transform: rotate(270deg);
}
/* ================= END ROTATE =================== */

/* =================  CURSOR =================== */
.cursor-d {
  cursor: default;
}
.cursor-p {
  cursor: pointer;
}
.cursor-not {
  cursor: not-allowed;
}
.cursor-zi {
  cursor: zoom-in;
}
/* ================= END CURSOR =================== */

/* =================  RESİZE =================== */
.textare_resizeY {
  resize: vertical;
}
.textare_resizeX {
  resize: horizontal;
}
.textare_resize {
  resize: both;
}
.textare_notresize {
  resize: none;
}
/* ================= END RESİZE =================== */

/* =================  IMAGE && BOXSIZE && WİDTH & HEIGTH =================== */
.image-fit {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.image-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image-fill {
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.border-box {
  box-sizing: border-box;
}
/*************************************************/
/*width - height*/
.w-0 {
  width: 0;
}
.w-5 {
  width: 5%;
}
.w-10 {
  width: 10%;
}
.w-15 {
  width: 15%;
}
.w-20 {
  width: 20%;
}
.w-25 {
  width: 25%;
}
.w-30 {
  width: 30%;
}
.w-35 {
  width: 35%;
}
.w-40 {
  width: 40%;
}
.w-45 {
  width: 45%;
}
.w-50 {
  width: 50%;
}
.w-60 {
  width: 60%;
}
.w-65 {
  width: 65%;
}
.w-70 {
  width: 70%;
}
.w-75 {
  width: 75%;
}
.w-80 {
  width: 80%;
}
.w-85 {
  width: 85%;
}
.w-90 {
  width: 90%;
}
.w-95 {
  width: 95%;
}
.w-full {
  width: 100%;
}
.w-fit {
  width: fit-content;
}
.w-min {
  width: min-content;
}
.w-max {
  width: max-content;
}
.w-100vw {
  width: 100vw;
}
.h-0 {
  height: 0;
}
.h-5 {
  height: 5%;
}
.h-10 {
  height: 10%;
}
.h-15 {
  height: 15%;
}
.h-20 {
  height: 20%;
}
.h-25 {
  height: 25%;
}
.h-30 {
  height: 30%;
}
.h-35 {
  height: 35%;
}
.h-40 {
  height: 40%;
}
.h-45 {
  height: 45%;
}
.h-50 {
  height: 50%;
}
.h-60 {
  height: 60%;
}
.h-65 {
  height: 65%;
}
.h-70 {
  height: 70%;
}
.h-75 {
  height: 75%;
}
.h-80 {
  height: 80%;
}
.h-85 {
  height: 85%;
}
.h-90 {
  height: 90%;
}
.h-95 {
  height: 95%;
}
.h-full {
  height: 100%;
}
.h-fit {
  height: fit-content;
}
.h-min {
  height: min-content;
}
.h-max {
  height: max-content;
}
.h-100vh {
  height: 100vh;
}
/* ================= END IMAGE && BOXSIZE && WİDTH & HEIGTH =================== */

.animate-translateX-in-100 {
  animation-name: animate-translateX-in-100;
  animation-duration: 1s;
}
.animate-translateX-out-100 {
  animation-name: animate-translateX-out-100;
  animation-duration: 1s;
}
.animate-translateY-in-100 {
  animation-name: animate-translateY-in-100;
  animation-duration: 1s;
}
.animate-translateY-out-100 {
  animation-name: animate-translateY-out-100;
  animation-duration: 1s;
}
.animate-translateX-in-95 {
  animation-name: animate-translateX-in-95;
  animation-duration: 1s;
}
.animate-translateX-out-95 {
  animation-name: animate-translateX-out-95;
  animation-duration: 1s;
}
.animate-translateY-in-95 {
  animation-name: animate-translateY-in-95;
  animation-duration: 1s;
}
.animate-translateY-out-95 {
  animation-name: animate-translateY-out-95;
  animation-duration: 1s;
}
.animate-translateX-in-90 {
  animation-name: animate-translateX-in-90;
  animation-duration: 1s;
}
.animate-translateX-out-90 {
  animation-name: animate-translateX-out-90;
  animation-duration: 1s;
}
.animate-translateY-in-90 {
  animation-name: animate-translateY-in-90;
  animation-duration: 1s;
}
.animate-translateY-out-90 {
  animation-name: animate-translateY-out-90;
  animation-duration: 1s;
}
.animate-translateX-in-85 {
  animation-name: animate-translateX-in-85;
  animation-duration: 1s;
}
.animate-translateX-out-85 {
  animation-name: animate-translateX-out-85;
  animation-duration: 1s;
}
.animate-translateY-in-85 {
  animation-name: animate-translateY-in-85;
  animation-duration: 1s;
}
.animate-translateY-out-85 {
  animation-name: animate-translateY-out-85;
  animation-duration: 1s;
}
.animate-translateX-in-80 {
  animation-name: animate-translateX-in-80;
  animation-duration: 1s;
}
.animate-translateX-out-80 {
  animation-name: animate-translateX-out-80;
  animation-duration: 1s;
}
.animate-translateY-in-80 {
  animation-name: animate-translateY-in-80;
  animation-duration: 1s;
}
.animate-translateY-out-80 {
  animation-name: animate-translateY-out-80;
  animation-duration: 1s;
}
.animate-translateX-in-75 {
  animation-name: animate-translateX-in-75;
  animation-duration: 1s;
}
.animate-translateX-out-75 {
  animation-name: animate-translateX-out-75;
  animation-duration: 1s;
}
.animate-translateY-in-75 {
  animation-name: animate-translateY-in-75;
  animation-duration: 1s;
}
.animate-translateY-out-75 {
  animation-name: animate-translateY-out-75;
  animation-duration: 1s;
}
.animate-translateX-in-70 {
  animation-name: animate-translateX-in-70;
  animation-duration: 1s;
}
.animate-translateX-out-70 {
  animation-name: animate-translateX-out-70;
  animation-duration: 1s;
}
.animate-translateY-in-70 {
  animation-name: animate-translateY-in-70;
  animation-duration: 1s;
}
.animate-translateY-out-70 {
  animation-name: animate-translateY-out-70;
  animation-duration: 1s;
}
.animate-translateX-in-65 {
  animation-name: animate-translateX-in-65;
  animation-duration: 1s;
}
.animate-translateX-out-65 {
  animation-name: animate-translateX-out-65;
  animation-duration: 1s;
}
.animate-translateY-in-65 {
  animation-name: animate-translateY-in-65;
  animation-duration: 1s;
}
.animate-translateY-out-65 {
  animation-name: animate-translateY-out-65;
  animation-duration: 1s;
}
.animate-translateX-in-60 {
  animation-name: animate-translateX-in-60;
  animation-duration: 1s;
}
.animate-translateX-out-60 {
  animation-name: animate-translateX-out-60;
  animation-duration: 1s;
}
.animate-translateY-in-60 {
  animation-name: animate-translateY-in-60;
  animation-duration: 1s;
}
.animate-translateY-out-60 {
  animation-name: animate-translateY-out-60;
  animation-duration: 1s;
}
.animate-translateX-in-55 {
  animation-name: animate-translateX-in-55;
  animation-duration: 1s;
}
.animate-translateX-out-55 {
  animation-name: animate-translateX-out-55;
  animation-duration: 1s;
}
.animate-translateY-in-55 {
  animation-name: animate-translateY-in-55;
  animation-duration: 1s;
}
.animate-translateY-out-55 {
  animation-name: animate-translateY-out-55;
  animation-duration: 1s;
}
.animate-translateX-in-50 {
  animation-name: animate-translateX-in-50;
  animation-duration: 1s;
}
.animate-translateX-out-50 {
  animation-name: animate-translateX-out-50;
  animation-duration: 1s;
}
.animate-translateY-in-50 {
  animation-name: animate-translateY-in-50;
  animation-duration: 1s;
}
.animate-translateY-out-50 {
  animation-name: animate-translateY-out-50;
  animation-duration: 1s;
}
.animate-translateX-in-45 {
  animation-name: animate-translateX-in-45;
  animation-duration: 1s;
}
.animate-translateX-out-45 {
  animation-name: animate-translateX-out-45;
  animation-duration: 1s;
}
.animate-translateY-in-45 {
  animation-name: animate-translateY-in-45;
  animation-duration: 1s;
}
.animate-translateY-out-45 {
  animation-name: animate-translateY-out-45;
  animation-duration: 1s;
}
.animate-translateX-in-40 {
  animation-name: animate-translateX-in-40;
  animation-duration: 1s;
}
.animate-translateX-out-40 {
  animation-name: animate-translateX-out-40;
  animation-duration: 1s;
}
.animate-translateY-in-40 {
  animation-name: animate-translateY-in-40;
  animation-duration: 1s;
}
.animate-translateY-out-40 {
  animation-name: animate-translateY-out-40;
  animation-duration: 1s;
}
.animate-translateX-in-35 {
  animation-name: animate-translateX-in-35;
  animation-duration: 1s;
}
.animate-translateX-out-35 {
  animation-name: animate-translateX-out-35;
  animation-duration: 1s;
}
.animate-translateY-in-35 {
  animation-name: animate-translateY-in-35;
  animation-duration: 1s;
}
.animate-translateY-out-35 {
  animation-name: animate-translateY-out-35;
  animation-duration: 1s;
}
.animate-translateX-in-30 {
  animation-name: animate-translateX-in-30;
  animation-duration: 1s;
}
.animate-translateX-out-30 {
  animation-name: animate-translateX-out-30;
  animation-duration: 1s;
}
.animate-translateY-in-30 {
  animation-name: animate-translateY-in-30;
  animation-duration: 1s;
}
.animate-translateY-out-30 {
  animation-name: animate-translateY-out-30;
  animation-duration: 1s;
}
.animate-translateX-in-25 {
  animation-name: animate-translateX-in-25;
  animation-duration: 1s;
}
.animate-translateX-out-25 {
  animation-name: animate-translateX-out-25;
  animation-duration: 1s;
}
.animate-translateY-in-25 {
  animation-name: animate-translateY-in-25;
  animation-duration: 1s;
}
.animate-translateY-out-25 {
  animation-name: animate-translateY-out-25;
  animation-duration: 1s;
}
.animate-translateX-in-20 {
  animation-name: animate-translateX-in-20;
  animation-duration: 1s;
}
.animate-translateX-out-20 {
  animation-name: animate-translateX-out-20;
  animation-duration: 1s;
}
.animate-translateY-in-20 {
  animation-name: animate-translateY-in-20;
  animation-duration: 1s;
}
.animate-translateY-out-20 {
  animation-name: animate-translateY-out-20;
  animation-duration: 1s;
}
.animate-translateX-in-15 {
  animation-name: animate-translateX-in-15;
  animation-duration: 1s;
}
.animate-translateX-out-15 {
  animation-name: animate-translateX-out-15;
  animation-duration: 1s;
}
.animate-translateY-in-15 {
  animation-name: animate-translateY-in-15;
  animation-duration: 1s;
}
.animate-translateY-out-15 {
  animation-name: animate-translateY-out-15;
  animation-duration: 1s;
}
.animate-translateX-in-10 {
  animation-name: animate-translateX-in-10;
  animation-duration: 1s;
}
.animate-translateX-out-10 {
  animation-name: animate-translateX-out-10;
  animation-duration: 1s;
}
.animate-translateY-in-10 {
  animation-name: animate-translateY-in-10;
  animation-duration: 1s;
}
.animate-translateY-out-10 {
  animation-name: animate-translateY-out-10;
  animation-duration: 1s;
}
.animate-translateX-in-5 {
  animation-name: animate-translateX-in-5;
  animation-duration: 1s;
}
.animate-translateX-out-5 {
  animation-name: animate-translateX-out-5;
  animation-duration: 1s;
}
.animate-translateY-in-5 {
  animation-name: animate-translateY-in-5;
  animation-duration: 1s;
}
.animate-translateY-out-5 {
  animation-name: animate-translateY-out-5;
  animation-duration: 1s;
}
.animate-translateX-in-0 {
  animation-name: animate-translateX-in-0;
  animation-duration: 1s;
}
.animate-translateX-out-0 {
  animation-name: animate-translateX-out-0;
  animation-duration: 1s;
}
.animate-translateY-in-0 {
  animation-name: animate-translateY-in-0;
  animation-duration: 1s;
}
.animate-translateY-out-0 {
  animation-name: animate-translateY-out-0;
  animation-duration: 1s;
}
@keyframes animate-translateX-in-0 {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes animate-translateX-out-0 {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes animate-translateY-in-0 {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(-100%);
  }
}
@keyframes animate-translateY-out-0 {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(-100%);
  }
}
@keyframes animate-translateX-in-5 {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(-95%);
  }
}
@keyframes animate-translateX-out-5 {
  0% {
    transform: translateX(-95%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes animate-translateY-in-5 {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(-95%);
  }
}
@keyframes animate-translateY-out-5 {
  0% {
    transform: translateY(-95%);
  }
  100% {
    transform: translateY(-100%);
  }
}
@keyframes animate-translateX-in-10 {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(-90%);
  }
}
@keyframes animate-translateX-out-10 {
  0% {
    transform: translateX(-90%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes animate-translateY-in-10 {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(-90%);
  }
}
@keyframes animate-translateY-out-10 {
  0% {
    transform: translateY(-90%);
  }
  100% {
    transform: translateY(-100%);
  }
}
@keyframes animate-translateX-in-15 {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(-85%);
  }
}
@keyframes animate-translateX-out-15 {
  0% {
    transform: translateX(-85%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes animate-translateY-in-15 {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(-85%);
  }
}
@keyframes animate-translateY-out-15 {
  0% {
    transform: translateY(-85%);
  }
  100% {
    transform: translateY(-100%);
  }
}
@keyframes animate-translateX-in-20 {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(-80%);
  }
}
@keyframes animate-translateX-out-20 {
  0% {
    transform: translateX(-80%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes animate-translateY-in-20 {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(-80%);
  }
}
@keyframes animate-translateY-out-20 {
  0% {
    transform: translateY(-80%);
  }
  100% {
    transform: translateY(-100%);
  }
}
@keyframes animate-translateX-in-25 {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(-75%);
  }
}
@keyframes animate-translateX-out-25 {
  0% {
    transform: translateX(-75%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes animate-translateY-in-25 {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(-75%);
  }
}
@keyframes animate-translateY-out-25 {
  0% {
    transform: translateY(-75%);
  }
  100% {
    transform: translateY(-100%);
  }
}
@keyframes animate-translateX-in-30 {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(-70%);
  }
}
@keyframes animate-translateX-out-30 {
  0% {
    transform: translateX(-70%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes animate-translateY-in-30 {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(-70%);
  }
}
@keyframes animate-translateY-out-30 {
  0% {
    transform: translateY(-70%);
  }
  100% {
    transform: translateY(-100%);
  }
}
@keyframes animate-translateX-in-35 {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(-65%);
  }
}
@keyframes animate-translateX-out-35 {
  0% {
    transform: translateX(-65%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes animate-translateY-in-35 {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(-65%);
  }
}
@keyframes animate-translateY-out-35 {
  0% {
    transform: translateY(-65%);
  }
  100% {
    transform: translateY(-100%);
  }
}
@keyframes animate-translateX-in-40 {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(-60%);
  }
}
@keyframes animate-translateX-out-40 {
  0% {
    transform: translateX(-60%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes animate-translateY-in-40 {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(-60%);
  }
}
@keyframes animate-translateY-out-40 {
  0% {
    transform: translateY(-60%);
  }
  100% {
    transform: translateY(-100%);
  }
}
@keyframes animate-translateX-in-45 {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(-55%);
  }
}
@keyframes animate-translateX-out-45 {
  0% {
    transform: translateX(-55%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes animate-translateY-in-45 {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(-55%);
  }
}
@keyframes animate-translateY-out-45 {
  0% {
    transform: translateY(-55%);
  }
  100% {
    transform: translateY(-100%);
  }
}
@keyframes animate-translateX-in-50 {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(-50%);
  }
}
@keyframes animate-translateX-out-50 {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes animate-translateY-in-50 {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(-50%);
  }
}
@keyframes animate-translateY-out-50 {
  0% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(-100%);
  }
}
@keyframes animate-translateX-in-55 {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(-45%);
  }
}
@keyframes animate-translateX-out-55 {
  0% {
    transform: translateX(-45%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes animate-translateY-in-55 {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(-45%);
  }
}
@keyframes animate-translateY-out-55 {
  0% {
    transform: translateY(-45%);
  }
  100% {
    transform: translateY(-100%);
  }
}
@keyframes animate-translateX-in-60 {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(-40%);
  }
}
@keyframes animate-translateX-out-60 {
  0% {
    transform: translateX(-40%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes animate-translateY-in-60 {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(-40%);
  }
}
@keyframes animate-translateY-out-60 {
  0% {
    transform: translateY(-40%);
  }
  100% {
    transform: translateY(-100%);
  }
}
@keyframes animate-translateX-in-65 {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(-35%);
  }
}
@keyframes animate-translateX-out-65 {
  0% {
    transform: translateX(-35%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes animate-translateY-in-65 {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(-35%);
  }
}
@keyframes animate-translateY-out-65 {
  0% {
    transform: translateY(-35%);
  }
  100% {
    transform: translateY(-100%);
  }
}
@keyframes animate-translateX-in-70 {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(-30%);
  }
}
@keyframes animate-translateX-out-70 {
  0% {
    transform: translateX(-30%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes animate-translateY-in-70 {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(-30%);
  }
}
@keyframes animate-translateY-out-70 {
  0% {
    transform: translateY(-30%);
  }
  100% {
    transform: translateY(-100%);
  }
}
@keyframes animate-translateX-in-75 {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(-25%);
  }
}
@keyframes animate-translateX-out-75 {
  0% {
    transform: translateX(-25%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes animate-translateY-in-75 {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(-25%);
  }
}
@keyframes animate-translateY-out-75 {
  0% {
    transform: translateY(-25%);
  }
  100% {
    transform: translateY(-100%);
  }
}
@keyframes animate-translateX-in-80 {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(-20%);
  }
}
@keyframes animate-translateX-out-80 {
  0% {
    transform: translateX(-20%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes animate-translateY-in-80 {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(-20%);
  }
}
@keyframes animate-translateY-out-80 {
  0% {
    transform: translateY(-20%);
  }
  100% {
    transform: translateY(-100%);
  }
}
@keyframes animate-translateX-in-85 {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(-15%);
  }
}
@keyframes animate-translateX-out-85 {
  0% {
    transform: translateX(-15%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes animate-translateY-in-85 {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(-15%);
  }
}
@keyframes animate-translateY-out-85 {
  0% {
    transform: translateY(-15%);
  }
  100% {
    transform: translateY(-100%);
  }
}
@keyframes animate-translateX-in-90 {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(-10%);
  }
}
@keyframes animate-translateX-out-90 {
  0% {
    transform: translateX(-10%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes animate-translateY-in-90 {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(-10%);
  }
}
@keyframes animate-translateY-out-90 {
  0% {
    transform: translateY(-10%);
  }
  100% {
    transform: translateY(-100%);
  }
}
@keyframes animate-translateX-in-95 {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(-5%);
  }
}
@keyframes animate-translateX-out-95 {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes animate-translateY-in-95 {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(-5%);
  }
}
@keyframes animate-translateY-out-95 {
  0% {
    transform: translateY(-5%);
  }
  100% {
    transform: translateY(-100%);
  }
}
@keyframes animate-translateX-in-100 {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes animate-translateX-out-100 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes animate-translateY-in-100 {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes animate-translateY-out-100 {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}
.translateX-in-0 {
  transform: translateX(0%);
}

.translateX-out-0 {
  transform: translateX(0%);
}

.translateY-in-0 {
  transform: translateY(0%);
}

.translateY-out-0 {
  transform: translateY(0%);
}

.translateX-in-5 {
  transform: translateX(5%);
}

.translateX-out-5 {
  transform: translateX(-5%);
}

.translateY-in-5 {
  transform: translateY(5%);
}

.translateY-out-5 {
  transform: translateY(-5%);
}

.translateX-in-10 {
  transform: translateX(10%);
}

.translateX-out-10 {
  transform: translateX(-10%);
}

.translateY-in-10 {
  transform: translateY(10%);
}

.translateY-out-10 {
  transform: translateY(-10%);
}

.translateX-in-15 {
  transform: translateX(15%);
}

.translateX-out-15 {
  transform: translateX(-15%);
}

.translateY-in-15 {
  transform: translateY(15%);
}

.translateY-out-15 {
  transform: translateY(-15%);
}

.translateX-in-20 {
  transform: translateX(20%);
}

.translateX-out-20 {
  transform: translateX(-20%);
}

.translateY-in-20 {
  transform: translateY(20%);
}

.translateY-out-20 {
  transform: translateY(-20%);
}

.translateX-in-25 {
  transform: translateX(25%);
}

.translateX-out-25 {
  transform: translateX(-25%);
}

.translateY-in-25 {
  transform: translateY(25%);
}

.translateY-out-25 {
  transform: translateY(-25%);
}

.translateX-in-30 {
  transform: translateX(30%);
}

.translateX-out-30 {
  transform: translateX(-30%);
}

.translateY-in-30 {
  transform: translateY(30%);
}

.translateY-out-30 {
  transform: translateY(-30%);
}

.translateX-in-35 {
  transform: translateX(35%);
}

.translateX-out-35 {
  transform: translateX(-35%);
}

.translateY-in-35 {
  transform: translateY(35%);
}

.translateY-out-35 {
  transform: translateY(-35%);
}

.translateX-in-40 {
  transform: translateX(40%);
}

.translateX-out-40 {
  transform: translateX(-40%);
}

.translateY-in-40 {
  transform: translateY(40%);
}

.translateY-out-40 {
  transform: translateY(-40%);
}

.translateX-in-45 {
  transform: translateX(45%);
}

.translateX-out-45 {
  transform: translateX(-45%);
}

.translateY-in-45 {
  transform: translateY(45%);
}

.translateY-out-45 {
  transform: translateY(-45%);
}

.translateX-in-50 {
  transform: translateX(50%);
}

.translateX-out-50 {
  transform: translateX(-50%);
}

.translateY-in-50 {
  transform: translateY(50%);
}

.translateY-out-50 {
  transform: translateY(-50%);
}

.translateX-in-55 {
  transform: translateX(55%);
}

.translateX-out-55 {
  transform: translateX(-55%);
}

.translateY-in-55 {
  transform: translateY(55%);
}

.translateY-out-55 {
  transform: translateY(-55%);
}

.translateX-in-60 {
  transform: translateX(60%);
}

.translateX-out-60 {
  transform: translateX(-60%);
}

.translateY-in-60 {
  transform: translateY(60%);
}

.translateY-out-60 {
  transform: translateY(-60%);
}

.translateX-in-65 {
  transform: translateX(65%);
}

.translateX-out-65 {
  transform: translateX(-65%);
}

.translateY-in-65 {
  transform: translateY(65%);
}

.translateY-out-65 {
  transform: translateY(-65%);
}

.translateX-in-70 {
  transform: translateX(70%);
}

.translateX-out-70 {
  transform: translateX(-70%);
}

.translateY-in-70 {
  transform: translateY(70%);
}

.translateY-out-70 {
  transform: translateY(-70%);
}

.translateX-in-75 {
  transform: translateX(75%);
}

.translateX-out-75 {
  transform: translateX(-75%);
}

.translateY-in-75 {
  transform: translateY(75%);
}

.translateY-out-75 {
  transform: translateY(-75%);
}

.translateX-in-80 {
  transform: translateX(80%);
}

.translateX-out-80 {
  transform: translateX(-80%);
}

.translateY-in-80 {
  transform: translateY(80%);
}

.translateY-out-80 {
  transform: translateY(-80%);
}

.translateX-in-85 {
  transform: translateX(85%);
}

.translateX-out-85 {
  transform: translateX(-85%);
}

.translateY-in-85 {
  transform: translateY(85%);
}

.translateY-out-85 {
  transform: translateY(-85%);
}

.translateX-in-90 {
  transform: translateX(90%);
}

.translateX-out-90 {
  transform: translateX(-90%);
}

.translateY-in-90 {
  transform: translateY(90%);
}

.translateY-out-90 {
  transform: translateY(-90%);
}

.translateX-in-95 {
  transform: translateX(95%);
}

.translateX-out-95 {
  transform: translateX(-95%);
}

.translateY-in-95 {
  transform: translateY(95%);
}

.translateY-out-95 {
  transform: translateY(-95%);
}
.translateX-in-100 {
  transform: translateX(100%);
}

.translateX-out-100 {
  transform: translateX(-100%);
}

.translateY-in-100 {
  transform: translateY(100%);
}

.translateY-out-100 {
  transform: translateY(-100%);
}

.transition-all {
  transition: all 1s;
}