.absolute { position: absolute; }
.relative { position: relative; }

.inline-block { display: inline-block; }
.block { display: block; }

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

.w-full { width: 100%; }
.w-fit { width: fit-content; }
.h-full { height: 100%; }

.cursor-pointer { cursor: pointer; }
.select-none { user-select: none; }

.bg-white { background-color: white; }
.bg-lightgray { background-color: #EFF1F1 }

.text-white { color: white; }
.text-black { color: black; }
.text-lightgray { color: #EFF1F1; }
.text-gray { color: #d3d3d3; }

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

.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; }

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

.z-0{ z-index: 0; }
.z-10{ z-index: 10; }
.z-20{ z-index: 20; }
.z-30{ z-index: 30; }
.z-40{ z-index: 40; }
.z-50{ z-index: 50; }
.z-auto{ z-index: auto; }

.font-bold { font-weight: bold; }
.rounded-full { border-radius: 9999px; }

.max-w-min { max-width: min-content; }

.space-x-0 > *:not(:first-child) { margin-left: 0px; }
.space-x-0.5 > *:not(:first-child) { margin-left: 0.125rem; /* 2px */ }
.space-x-1 > *:not(:first-child) { margin-left: 0.25rem; /* 4px */ }
.space-x-1.5 > *:not(:first-child) { margin-left: 0.375rem; /* 6px */ }
.space-x-2 > *:not(:first-child) { margin-left: 0.5rem; /* 8px */ }
.space-x-2.5 > *:not(:first-child) { margin-left: 0.625rem; /* 10px */ }
.space-x-3 > *:not(:first-child) { margin-left: 0.75rem; /* 12px */ }
.space-x-3.5 > *:not(:first-child) { margin-left: 0.875rem; /* 14px */ }
.space-x-4 > *:not(:first-child) { margin-left: 1rem; /* 16px */ }
.space-x-5 > *:not(:first-child) { margin-left: 1.25rem; /* 20px */ }

.m-l-auto { margin-left: auto; }

.right-0 { right: 0; }


.flex { display: flex; }
.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-initial { flex: 0 1 auto; }
.flex-none { flex: none; }
.grow { flex-grow: 1; }
.grow-0 { flex-grow: 0; }
.flex-wrap{ flex-wrap: wrap; }
.flex-wrap-reverse{ flex-wrap: wrap-reverse; }
.flex-nowrap{ flex-wrap: nowrap; }

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

.visible { visibility: visible; }
.invisible { visibility: hidden; }
.collapse { visibility: collapse; }
.hidden { display: none; }


.whitespace-normal { white-space: normal; }
.whitespace-nowrap { white-space: nowrap; }
.whitespace-pre { white-space: pre; }
.whitespace-pre-line { white-space: pre-line; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.whitespace-break-spaces { white-space: break-spaces; }

.top-full { top: 100%; }
.right-full { right: 100%; }
.bottom-full { bottom: 100%; }
.left-full { left: 100%; }

.shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.shadow { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); }
.shadow-md { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); }
.shadow-inner { box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); }
.shadow-none { box-shadow: 0 0 #0000; }

.bg-lightgray\:hover:hover {
    background-color: #f3f8f8;
}

.p-x-20 {
    padding-left: 20px;
    padding-right: 20px;
}

.p-y-10 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.bg-primary {
    background-color: #2196f3;
}