.color-select .text-color-primary {
  color: var(--ion-color-primary);

.color-select .text-color-secondary {
  color: var(--ion-color-secondary);
}

.color-select .text-color-tertiary {
  color: var(--ion-color-tertiary);
}

.color-select .text-color-success {
  color: var(--ion-color-success);
}

.color-select .text-color-warning {
  color: var(--ion-color-warning);
}

.color-select .text-color-danger {
  color: var(--ion-color-danger);
}

.color-select .text-color-dark {
  color: var(--ion-color-dark);
}

.color-select .text-color-medium {
  color: var(--ion-color-medium);
}

.color-select .text-color-light {
  color: var(--ion-color-light);
}

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

.color-select .text-color-green {
  color: var(--ion-color-green);
}

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

.color-select .text-color-orange {
  color: var(--ion-color-orange);
}

.color-select .text-color-vermilion {
  color: var(--ion-color-vermilion);
}

.color-select .text-color-rose {
  color: var(--ion-color-rose);
}

.color-select .text-color-violet {
  color: var(--ion-color-violet);
}

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

.color-select .text-color-gold {
  color: var(--ion-color-gold);
}

.color-select .text-color-turquoise {
  color: var(--ion-color-turquoise);
}

.color-select .text-color-sepia {
  color: var(--ion-color-sepia);
}

.color-select .text-color-lime {
  color: var(--ion-color-lime);
}

.refresher-active {
  z-index: 1;
}

.fullscreen-modal {
  --width: 100%;
  --height: 100%;
  --border-radius: 0;
}

/* Taiwlind like utlity class */

.nowrap {
  white-space: nowrap;
}

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

.text-base {
  font-size: 1rem;
}

.text-lg {
  font-size: 1.125rem; /* 18px */
  line-height: 1.75rem; /* 28px */
}

.text-xl {
  font-size: 1.25rem; /* 20px */
  line-height: 1.75rem; /* 28px */
}

.text-2xl {
  font-size: 1.5rem; /* 24px */
  line-height: 2rem; /* 32px */
}

.text-3xl {
  font-size: 1.875rem; /* 30px */
  line-height: 2.25rem; /* 36px */
}

.text-4xl {
  font-size: 2.25rem; /* 36px */
  line-height: 2.5rem; /* 40px */
}

.text-5xl {
  font-size: 3rem; /* 48px */
  line-height: 1;
}

.flex {
  display: flex;
}

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

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

.w-full {
  width: 100%;
}

.w-6 {
  width: 1.5rem;
}

.w-12 {
  width: 3rem;
}

.w-16 {
  width: 4rem;
}

.w-24 {
  width: 6rem;
}

.w-28 {
  width: 7rem;
}

.w-32 {
  width: 8rem;
}

.w-40 {
  width: 10rem;
}

.w-48 {
  width: 12rem;
}

.w-60 {
  width: 15rem;
}

.w-80 {
  width: 20rem;
}

.h-full {
  height: 100%;
}

.h-6 {
  height: 1.5rem;
}

.h-12 {
  height: 3rem;
}

.h-16 {
  height: 4rem;
}

.h-24 {
  height: 6rem;
}

.h-28 {
  height: 7rem;
}

.h-32 {
  height: 8rem;
}

.h-40 {
  height: 10rem;
}

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

.text-black {
  color: rgb(0 0 0);
}

.border-2 {
  border-width: 2px;
}

.border-slate-500 {
  border-color: rgb(100 116 139);
}

.rounded {
  border-radius: 0.25rem;
}

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

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

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

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

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

.p-2 {
  padding: 0.5rem;  /* 8px */
}

.p-4 {
  padding: 1rem;  /* 16px */
}

.pt-2 {
  padding-top: 0.5rem;  /* 8px */
}

.pt-4 {
  padding-top: 1rem;  /* 16px */
}

.m-2 {
  margin: 0.5rem;  /* 8px */
}

.m-4 {
  margin: 1rem;  /* 16px */
}

.ml-2 {
  margin-left: 0.5rem;  /* 8px */
}

.ml-4 {
  margin-left: 1rem;  /* 8px */
}

.mt-8 {
  margin-top: 2rem;  /* 16px */
}

.mb-8 {
  margin-bottom: 2rem;  /* 16px */
}