.tippy-box[data-animation="scale"][data-placement^="top"] {
transform-origin: bottom;
}
.tippy-box[data-animation="scale"][data-placement^="bottom"] {
transform-origin: top;
}
.tippy-box[data-animation="scale"][data-placement^="left"] {
transform-origin: right;
}
.tippy-box[data-animation="scale"][data-placement^="right"] {
transform-origin: left;
}
.tippy-box[data-animation="scale"][data-state="hidden"] {
transform: scale(0.5);
opacity: 0;
}.twf-bg-black {
background-color: #000;
}
.twf-bg-white {
background-color: #fff;
}
.twf-text-white {
color: #fff;
}
.twf-text-black {
color: #000;
}
.twf-text-gray-600 {
color: #4b5563;
}
.twf-text-sm {
font-size: 0.875rem;
}
.twf-text-md {
font-size: 1rem;
}
.twf-hover\:bg-black:hover {
background-color: #000;
}
.twf-hover\:text-black:hover {
color: #000;
}
.twf-hover\:underline:hover {
text-decoration: underline;
} .twf-font-bold {
font-weight: 700;
}
.twf-font-medium {
font-weight: 500;
}
.twf-text-lg {
font-size: 1.125rem;
}
.twf-px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.twf-py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.twf-p-2 {
padding: 0.5rem;
}
.twf-p-4 {
padding: 1rem;
}
.twf-mb-4 {
margin-bottom: 1rem;
}
.twf-mb-6 {
margin-bottom: 1.5rem;
}
.twf-mt-2 {
margin-top: 0.5rem;
}
.twf-mt-6 {
margin-top: 1.5rem;
}
.twf-mt-16 {
margin-top: 4rem;
}
.twf-mx-auto {
margin-left: auto;
margin-right: auto;
}
.twf-my-8 {
margin-top: 2rem;
margin-bottom: 2rem;
}
.twf-mx-0 {
margin-left: 0;
margin-right: 0;
} .twf-flex {
display: flex;
}
.twf-flex-col {
flex-direction: column;
}
.twf-flex-row {
flex-direction: row;
}
.twf-justify-between {
justify-content: space-between;
}
.twf-items-center {
align-items: center;
}
.twf-gap-2 {
gap: 0.5rem;
}
.twf-gap-5 {
gap: 1.25rem;
}
.twf-fixed {
position: fixed;
}
.twf-relative {
position: relative;
}
.twf-inset-0 {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.twf-top-0 {
top: 0;
}
.twf-left-0 {
left: 0;
}
.twf-z-40 {
z-index: 40;
}
.twf-z-50 {
z-index: 50;
} .twf-w-full {
width: 100%;
}
.twf-w-\[90\%\] {
width: 90%;
}
.twf-w-\[25\%\] {
width: 25%;
}
.twf-h-auto {
height: auto;
}
.twf-h-full {
height: 100%;
}
.twf-h-screen {
height: 100vh;
} .twf-shadow-lg {
box-shadow:
0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.twf-border-2 {
border-width: 2px;
}
.twf-border-black {
border-color: #000;
}
.twf-bg-black\/50 {
background-color: rgba(0, 0, 0, 0.5);
} .twf-transition-transform {
transition-property: transform;
transition-duration: 0.3s;
transition-timing-function: ease;
}
.twf-duration-300 {
transition-duration: 0.3s;
}
.twf-transform {
transform: translateX(0);
}
.twf--translate-x-full {
transform: translateX(-100%);
}
.twf-translate-x-0 {
transform: translateX(0);
} .twf-hidden {
display: none;
}
.twf-block {
display: block;
} .twf-hr {
height: 2px;
background-color: black;
border-width: 1px;
margin-top: 1rem;
margin-bottom: 1rem;
} input[type="number"].twf-input {
border: 2px solid black;
background-color: white;
padding: 0.5rem 1rem;
outline: none;
} @media (min-width: 768px) {
.md\:twf-flex-row {
flex-direction: row;
}
.md\:twf-mx-0 {
margin-left: 0;
margin-right: 0;
}
.md\:twf-w-\[25\%\] {
width: 25%;
}
.md\:twf-h-screen {
height: 100vh;
}
.md\:twf-mt-0 {
margin-top: 0 !important;
}
.md\:twf-hidden {
display: none;
}
.md\:twf-block {
display: block;
}
}