/*****************************  width *****************************/
.w-1\/2 {
  width: 50%;
}
.w-1\/3 {
  width: 33.333333%;
}
.w-2\/3 {
  width: 66.666667%;
}
.w-1\/8 {
  width: 12.5%;
}
/************************** height ***************************/
.h-full {
  height: 100%;
}

.h-1\/3 {
  height: 33.333333%;
}
.h-2\/3 {
  height: 66.666667%;
}
.h-1\/8 {
  height: 12.5%;
}
/*****************************  margin *****************************/
.m-0 {
  margin: 0px;
}
.m-4 {
  margin: 4px;
}
.m-8 {
  margin: 8px;
}
.m-12 {
  margin: 12px;
}
.m-16 {
  margin: 16px;
}
.m-24 {
  margin: 16px;
}
.m-32 {
  margin: 32px;
}

//top
.mt-0 {
  margin-top: 0px;
}
.mt-1 {
  margin-top: 1px;
}
.mt-4 {
  margin-top: 4px;
}
.mt-8 {
  margin-top: 8px;
}
.mt-12 {
  margin-top: 12px;
}
.mt-16 {
  margin-top: 16px;
}
.mt-24 {
  margin-top: 24px;
}
.mt-32 {
  margin-top: 32px;
}
//right
.mr-0 {
  margin-right: 0px;
}
.mr-1 {
  margin-right: 1px;
}
.mr-4 {
  margin-right: 4px;
}
.mr-8 {
  margin-right: 8px;
}
.mr-12 {
  margin-right: 12px;
}
.mr-16 {
  margin-right: 16px;
}
.mr-24 {
  margin-right: 24px;
}
.mr-32 {
  margin-right: 32px;
}
//left
.ml-0 {
  margin-left: 0px;
}
.ml-1 {
  margin-right: 1px;
}
.ml-4 {
  margin-left: 4px;
}
.ml-8 {
  margin-left: 8px;
}
.ml-12 {
  margin-left: 12px;
}
.ml-16 {
  margin-left: 16px;
}
.ml-24 {
  margin-left: 24px;
}
.ml-32 {
  margin-left: 32px;
}
//bottom
.mb-0 {
  margin-bottom: 0px;
}
.mb-1 {
  margin-bottom: 1px;
}
.mb-4 {
  margin-bottom: 4px;
}
.mb-8 {
  margin-bottom: 8px;
}
.mb-12 {
  margin-bottom: 12px;
}
.mb-16 {
  margin-bottom: 16px;
}
.mb-24 {
  margin-bottom: 24px;
}
.mb-32 {
  margin-bottom: 32px;
}
// mx
.mx-0 {
  margin-left: 0px;
  margin-right: 0px;
}
.mx-4 {
  margin-left: 4px;
  margin-right: 4px;
}
.mx-8 {
  margin-left: 8px;
  margin-right: 8px;
}
.mx-12 {
  margin-left: 12px;
  margin-right: 12px;
}
.mx-16 {
  margin-left: 16px;
  margin-right: 16px;
}
.mx-24 {
  margin-left: 12px;
  margin-right: 12px;
}
.mx-32 {
  margin-left: 32px;
  margin-right: 32px;
}
// my
.my-0 {
  margin-top: 0px;
  margin-bottom: 0px;
}
.my-4 {
  margin-top: 4px;
  margin-bottom: 4px;
}
.my-8 {
  margin-top: 8px;
  margin-bottom: 8px;
}
.my-12 {
  margin-top: 12px;
  margin-bottom: 12px;
}
.my-16 {
  margin-top: 16px;
  margin-bottom: 16px;
}
.my-24 {
  margin-top: 24px;
  margin-bottom: 24px;
}
.my-32 {
  margin-top: 32px;
  margin-bottom: 32px;
}

/*****************************  padding *****************************/
.p-0 {
  padding: 0px;
}
.p-4 {
  padding: 4px;
}
.p-8 {
  padding: 8px;
}
.p-12 {
  padding: 12px;
}
.p-16 {
  padding: 16px;
}
.p-24 {
  padding: 16px;
}
.p-32 {
  padding: 32px;
}
//top
.pt-0 {
  padding-top: 0px;
}
.pt-4 {
  padding-top: 4px;
}
.pt-8 {
  padding-top: 8px;
}
.pt-12 {
  padding-top: 12px;
}
.pt-16 {
  padding-top: 16px;
}
.pt-24 {
  padding-top: 24px;
}
.pt-32 {
  padding-top: 32px;
}
//right
.pr-0 {
  padding-right: 0px;
}
.pr-4 {
  padding-right: 4px;
}
.pr-8 {
  padding-right: 8px;
}
.pr-12 {
  padding-right: 12px;
}
.pr-16 {
  padding-right: 16px;
}
.pr-24 {
  padding-right: 24px;
}
.pr-32 {
  padding-right: 32px;
}
//left
.pl-0 {
  padding-left: 0px;
}
.pl-4 {
  padding-left: 4px;
}
.pl-8 {
  padding-left: 8px;
}
.pl-12 {
  padding-left: 12px;
}
.pl-16 {
  padding-left: 16px;
}
.pl-24 {
  padding-left: 24px;
}
.pl-32 {
  padding-left: 32px;
}
//bottom
.pb-0 {
  padding-bottom: 0px;
}
.pb-4 {
  padding-bottom: 4px;
}
.pb-8 {
  padding-bottom: 8px;
}
.pb-12 {
  padding-bottom: 12px;
}
.pb-16 {
  padding-bottom: 16px;
}
.pb-24 {
  padding-bottom: 24px;
}
.pb-32 {
  padding-bottom: 32px;
}

// px
.px-4 {
  padding-left: 4px;
  padding-right: 4px;
}
.px-8 {
  padding-left: 8px;
  padding-right: 8px;
}
.px-12 {
  padding-left: 12px;
  padding-right: 12px;
}
.px-16 {
  padding-left: 16px;
  padding-right: 16px;
}
.px-24 {
  padding-left: 12px;
  padding-right: 12px;
}
.px-32 {
  padding-left: 32px;
  padding-right: 32px;
}
// my
.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}
.py-4 {
  padding-top: 4px;
  padding-bottom: 4px;
}
.py-8 {
  padding-top: 8px;
  padding-bottom: 8px;
}
.py-12 {
  padding-top: 12px;
  padding-bottom: 12px;
}
.py-16 {
  padding-top: 16px;
  padding-bottom: 16px;
}
.py-24 {
  padding-top: 24px;
  padding-bottom: 24px;
}
.py-32 {
  padding-top: 32px;
  padding-bottom: 32px;
}

/*****************************  flex *****************************/
.flex {
  display: flex;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-col {
  flex-direction: column;
}
.justify-around {
  justify-content: space-around;
}
.justify-between {
  justify-content: space-between;
}
.justify-evenly {
  justify-content: space-evenly;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-baseline {
  justify-content: baseline;
}
.justify-center {
  justify-content: center;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-center {
  align-items: center;
}

/*****************************  border *****************************/
.border {
  border-width: 1px;
}
.border-primary {
  --tw-border-opacity: 1;
  border-color: rgba(9, 96, 189, var(--tw-border-opacity));
}
.border-solid {
  border-style: solid;
}
.border-t-0 {
  border-top-width: 0px;
}
.border-radius {
  border-radius: 4px;
}
.cursor-pointer {
  cursor: pointer;
}

/*****************************  text *****************************/
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.font-medium {
  font-weight: 500;
}