/* background */
.bg-red { background-color: red; opacity:0.5;}
.bg-blue { background-color: blue; opacity:0.5;}
.bg-green { background-color: green; opacity:0.5;}
.bg-y { background-color: yellow; opacity:0.5; }
.bg-p { background-color: pink; opacity:0.5; }
.bg-a { background-color: aqua; opacity:0.5; }
.bg-o { background-color: olive; opacity:0.5; }

/* width */
.w-0 { width: 0; }
.w-px { width: 1px; }
.w-1 { width: 0.25rem; }
.w-2 { width: 0.5rem; }
.w-3 { width: 0.75rem; }
.w-4 { width: 1rem; }
.w-5 { width: 1.25rem; }
.w-6 { width: 1.5rem; }
.w-7 { width: 1.75rem; }
.w-8 { width: 2rem; }
.w-9 { width: 2.25rem; }
.w-10 { width: 2.5rem; }
.w-11 { width: 2.75rem; }
.w-12 { width: 3rem; }
.w-13 { width: 3.375rem; }
.w-14 { width: 3.5rem; }
.w-16 { width: 4rem; }
.w-18 { width: 4.5rem; }
.w-20 { width: 5rem; }
.w-24 { width: 6rem; }
.w-26 { width: 6.5rem; }
.w-28 { width: 7rem; }
.w-32 { width: 8rem; }
.w-36 { width: 9rem; }
.w-40 { width: 10rem; }
.w-44 { width: 11rem; }
.w-47 { width: 11.875rem; }
.w-48 { width: 12rem; }
.w-52 { width: 13rem; }
.w-56 { width: 14rem; }
.w-60 { width: 15rem; }
.w-64 { width: 16rem; }
.w-72 { width: 18rem; }
.w-80 { width: 20rem; }
.w-96 { width: 24rem; }
.w-100 { width: 26rem; }
.w-104 { width: 28rem; }
.w-120 { width: 30rem; }
.w-144 { width: 36rem; }
.w-168 { width: 42rem; }
.w-192 { width: 48rem; }
.w-240 { width: 59rem; }
.w-auto { width: auto; }
.w-half { width: 50%; }
.w-1-3 { width: 33.333333%; }
.w-2-3 { width: 66.666666%; }
.w-1-4 { width: 25%; }
.w-2-4 { width: 50%; }
.w-3-4 { width: 75%; }
.w-1-5 { width: 20%; }
.w-2-5 { width: 40%; }
.w-3-5 { width: 60%; }
.w-4-5 { width: 80%; }
.w-1-6 { width: 16.666667%; }
.w-2-6 { width: 33.333333%; }
.w-3-6 { width: 50%; }
.w-4-6 { width: 66.666667%; }
.w-5-6 { width: 83.333333%; }
.w-1-12 { width: 8.333333%; }
.w-2-12 { width: 16.666667%; }
.w-3-12 { width: 25%; }
.w-4-12 { width: 33.333333%; }
.w-5-12 { width: 41.666667%; }
.w-6-12 { width: 50%; }
.w-7-12 { width: 58.333333%; }
.w-8-12 { width: 66.666667%; }
.w-9-12 { width: 75%; }
.w-10-12 { width: 83.333333%; }
.w-11-12 { width: 91.666667%; }
.w-full { width: 100%; }
.w-min { width: min-content; }
.w-max { width: max-content; }
.w-fit { width: fit-content; }

/* height */
.h-px { height: 1px; }
.h-1 { height: 0.25rem; }
.h-2 { height: 0.5rem; }
.h-3 { height: 0.75rem; }
.h-4 { height: 1rem; }
.h-5 { height: 1.25rem; }
.h-6 { height: 1.5rem; }
.h-7 { height: 1.75rem; }
.h-8 { height: 2rem; }
.h-9 { height: 2.25rem; }
.h-10 { height: 2.5rem; }
.h-11 { height: 2.75rem; }
.h-12 { height: 3rem; }
.h-14 { height: 3.5rem; }
.h-16 { height: 4rem; }
.h-18 { height: 4.5rem; }
.h-20 { height: 5rem; }
.h-40 { height: 10rem; }
.h-full { height: 100%; }

/* margin */
.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mr-0 { margin-right: 0; }
.ml-0 { margin-left: 0; }
.m-1 { margin: 0.25rem; }
.mt-1 { margin-top: 0.25rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mr-1 { margin-right: 0.25rem; }
.ml-1 { margin-left: 0.25rem; }
.m-2 { margin: 0.5rem; }
.mt-2 { margin-top: 0.5rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mr-2 { margin-right: 0.5rem; }
.ml-2 { margin-left: 0.5rem; }
.m-3 { margin: 0.75rem; }
.mt-3 { margin-top: 0.75rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mr-3 { margin-right: 0.75rem; }
.ml-3 { margin-left: 0.75rem; }
.m-4 { margin: 1rem; }
.mt-4 { margin-top: 1rem; }
.mb-4 { margin-bottom: 1rem; }
.mr-4 { margin-right: 1rem; }
.ml-4 { margin-left: 1rem; }
.m-6 { margin: 1.5rem; }
.mt-6 { margin-top: 1.5rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mr-6 { margin-right: 1.5rem; }
.ml-6 { margin-left: 1.5rem; }
.m-8 { margin: 2rem; }
.mt-8 { margin-top: 2rem; }
.mb-8 { margin-bottom: 2rem; }
.mr-8 { margin-right: 2rem; }
.ml-8 { margin-left: 2rem; }
.m-12 { margin: 3rem; }
.mt-12 { margin-top: 3rem; }
.mb-12 { margin-bottom: 3rem; }
.mr-12 { margin-right: 3rem; }
.ml-12 { margin-left: 3rem; }
.m-24 { margin: 6rem; }
.mt-24 { margin-top: 6rem; }
.mb-24 { margin-bottom: 6rem; }
.mr-24 { margin-right: 6rem; }
.ml-24 { margin-left: 6rem; }
.m-48 { margin: 12rem; }
.mt-48 { margin-top: 12rem; }
.mb-48 { margin-bottom: 12rem; }
.mr-48 { margin-right: 12rem; }
.ml-48 { margin-left: 12rem; }
.m-60 { margin: 15rem; }
.mt-60 { margin-top: 15rem; }
.mb-60 { margin-bottom: 15rem; }
.mr-60 { margin-right: 15rem; }
.ml-60 { margin-left: 15rem; }

/* padding */
.p-0 { padding: 0; }
.pt-0 { padding-top: 0; }
.pb-0 { padding-bottom: 0; }
.pr-0 { padding-right: 0; }
.pl-0 { padding-left: 0; }
.p-1 { padding: 0.25rem; }
.pt-1 { padding-top: 0.25rem; }
.pb-1 { padding-bottom: 0.25rem; }
.pr-1 { padding-right: 0.25rem; }
.pl-1 { padding-left: 0.25rem; }
.p-2 { padding: 0.5rem; }
.pt-2 { padding-top: 0.5rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pr-2 { padding-right: 0.5rem; }
.pl-2 { padding-left: 0.5rem; }
.p-3 { padding: 0.75rem; }
.pt-3 { padding-top: 0.75rem; }
.pb-3 { padding-bottom: 0.75rem; }
.pr-3 { padding-right: 0.75rem; }
.pl-3 { padding-left: 0.75rem; }
.p-4 { padding: 1rem; }
.pt-4 { padding-top: 1rem; }
.pb-4 { padding-bottom: 1rem; }
.pr-4 { padding-right: 1rem; }
.pl-4 { padding-left: 1rem; }
.p-6 { padding: 1.5rem; }
.pt-6 { padding-top: 1.5rem; }
.pb-6 { padding-bottom: 1.5rem; }
.pr-6 { padding-right: 1.5rem; }
.pl-6 { padding-left: 1.5rem; }
.p-8 { padding: 2rem; }
.pt-8 { padding-top: 2rem; }
.pb-8 { padding-bottom: 2rem; }
.pr-8 { padding-right: 2rem; }
.pl-8 { padding-left: 2rem; }
.p-11 { padding: 2.625rem; }
.pt-11 { padding-top: 2.625rem; }
.pb-11 { padding-bottom: 2.625rem; }
.pr-11 { padding-right: 2.625rem; }
.pl-11 { padding-left: 2.625rem; }
.p-12 { padding: 3rem; }
.pt-12 { padding-top: 3rem; }
.pb-12 { padding-bottom: 3rem; }
.pr-12 { padding-right: 3rem; }
.pl-12 { padding-left: 3rem; }
.p-24 { padding: 6rem; }
.pt-24 { padding-top: 6rem; }
.pb-24 { padding-bottom: 6rem; }
.pr-24 { padding-right: 6rem; }
.pl-24 { padding-left: 6rem; }
.p-32 { padding: 8rem; }
.pt-32 { padding-top: 8rem; }
.pb-32 { padding-bottom: 8rem; }
.pr-32 { padding-right: 8rem; }
.pl-32 { padding-left: 8rem; }
.p-36 { padding: 9rem; }
.pt-36 { padding-top: 9rem; }
.pb-36 { padding-bottom: 9rem; }
.pr-36 { padding-right: 9rem; }
.pl-36 { padding-left: 9rem; }
.p-41 { padding: 10.25rem; }
.pt-41 { padding-top: 10.25rem; }
.pb-41 { padding-bottom: 10.25rem; }
.pr-41 { padding-right: 10.25rem; }
.pl-41 { padding-left: 10.25rem; }
.p-48 { padding: 12rem; }
.pt-48 { padding-top: 12rem; }
.pb-48 { padding-bottom: 12rem; }
.pr-48 { padding-right: 12rem; }
.pl-48 { padding-left: 12rem; }
.p-69 { padding: 15.5rem; }
.pt-69 { padding-top: 15.5rem; }
.pb-69 { padding-bottom: 15.5rem; }
.pr-69 { padding-right: 15.5rem; }
.pl-69 { padding-left: 15.5rem; }
.p-70 { padding: 15.625rem; }
.pt-70 { padding-top: 15.625rem; }
.pb-70 { padding-bottom: 15.625rem; }
.pr-70 { padding-right: 15.625rem; }
.pl-70 { padding-left: 15.625rem; }

/* border */
.border { border: 0.5px solid; margin-bottom: -0.5px}
.border-t { border-top: 0.5px solid; }
.border-b { border-bottom: 0.5px solid; }
.border-r { border-right: 0.5px solid; }
.border-l { border-left: 0.5px solid; }
.border-dashed { border: 0.5px dashed; }
.border-t-dashed { border-top: 0.5px dashed; }
.border-b-dashed { border-bottom: 0.5px dashed; }
.border-r-dashed { border-right: 0.5px dashed; }
.border-l-dashed { border-left: 0.5px dashed; }
.border-t-dotted { border-top: 0.5px dotted; }
.border-b-dotted { border-bottom: 0.5px dotted; }
.border-r-dotted { border-right: 0.5px dotted; }
.border-l-dotted { border-left: 0.5px dotted; }
.border-dotted { border: 0.5px dotted; }
.border-b-double { border-bottom: 3px double; }

.rounded-lg { border-radius: 0.5rem; }

/* float */
.float-right { float: right; }
.float-left { float: left; }

/* text-align */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }
.text-start { text-align: start; }
.text-end { text-align: end; }

/* font-size */
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm {font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }

/* font-weight */
.font-light { font-weight: 300; }
.font-bold { font-weight: 700; }

/* letter-spacing */
.tracking-tight { letter-spacing: -0.05em; }
.tracking-widest { letter-spacing: 0.1em; }

/* overflow */
.overflow-hidden { overflow: hidden; }
.overflow-wrap { overflow: wrap; }

/* table */
/*.cell { float: left; padding-right: 0.25rem; padding-top: 4px; padding-bottom: 4px; }*/
.cell { float: left; padding-top: 4px; padding-bottom: 4px; }
.cell-tight { float: left; padding-top: 0.1px; padding-bottom: 0.1px; }
.cell-right { float: right; padding-top: 4px; padding-bottom: 4px; }


/* position */
.absolute { position: absolute; }
.fixed { position: fixed; }
.relative { position: relative; }

/* line height */
.leading-none {line-height: 1rem;}
.leading-tight {line-height: 1.25rem;}
.leading-normal {line-height: 1.5rem;}