*, ::before, ::after { box-sizing: border-box; /* 1 */ border-width: 0; /* 2 */ border-style: solid; /* 2 */ border-color: #e5e7eb; /* 2 */ } ::before, ::after { --tw-content: ''; } /* 1. Use a consistent sensible line-height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. 3. Use a more readable tab size. 4. Use the user's configured `sans` font-family by default. 5. Use the user's configured `sans` font-feature-settings by default. 6. Use the user's configured `sans` font-variation-settings by default. 7. Disable tap highlights on iOS */ /* Make elements with the HTML hidden attribute stay hidden by default */ [hidden] { display: none; } *, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; } ::backdrop { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; } .anycontext-fixed { position: fixed; } .anycontext-absolute { position: absolute; } .anycontext-relative { position: relative; } .anycontext-bottom-0 { bottom: 0px; } .anycontext-bottom-12 { bottom: 3rem; } .anycontext-right-0 { right: 0px; } .anycontext-z-50 { z-index: 50; } .anycontext-z-\[99999\] { z-index: 99999; } .anycontext-mb-4 { margin-bottom: 1rem; } .anycontext-mt-8 { margin-top: 2rem; } .anycontext-flex { display: flex; } .anycontext-inline-flex { display: inline-flex; } .anycontext-h-10 { height: 2.5rem; } .anycontext-h-11 { height: 2.75rem; } .anycontext-h-5 { height: 1.25rem; } .anycontext-h-9 { height: 2.25rem; } .anycontext-max-h-\[75vh\] { max-height: 75vh; } .anycontext-w-10 { width: 2.5rem; } .anycontext-w-5 { width: 1.25rem; } .anycontext-w-full { width: 100%; } @keyframes anycontext-spin { to { transform: rotate(360deg); } } .anycontext-animate-spin { animation: anycontext-spin 1s linear infinite; } .anycontext-flex-col { flex-direction: column; } .anycontext-items-center { align-items: center; } .anycontext-justify-center { justify-content: center; } .anycontext-justify-between { justify-content: space-between; } .anycontext-gap-2 { gap: 0.5rem; } .anycontext-gap-4 { gap: 1rem; } .anycontext-overflow-hidden { overflow: hidden; } .anycontext-overflow-y-auto { overflow-y: auto; } .anycontext-whitespace-nowrap { white-space: nowrap; } .anycontext-rounded-md { border-radius: 0.375rem; } .anycontext-border { border-width: 1px; } .anycontext-border-stone-200 { --tw-border-opacity: 1; border-color: rgb(231 229 228 / var(--tw-border-opacity)); } .anycontext-bg-red-500 { --tw-bg-opacity: 1; background-color: rgb(239 68 68 / var(--tw-bg-opacity)); } .anycontext-bg-stone-100 { --tw-bg-opacity: 1; background-color: rgb(245 245 244 / var(--tw-bg-opacity)); } .anycontext-bg-stone-900 { --tw-bg-opacity: 1; background-color: rgb(28 25 23 / var(--tw-bg-opacity)); } .anycontext-bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } .anycontext-bg-gradient-to-tr { background-image: linear-gradient(to top right, var(--tw-gradient-stops)); } .anycontext-from-purple-400 { --tw-gradient-from: #c084fc var(--tw-gradient-from-position); --tw-gradient-to: rgb(192 132 252 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .anycontext-to-purple-600 { --tw-gradient-to: #9333ea var(--tw-gradient-to-position); } .anycontext-px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } .anycontext-px-4 { padding-left: 1rem; padding-right: 1rem; } .anycontext-px-8 { padding-left: 2rem; padding-right: 2rem; } .anycontext-py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; } .anycontext-py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; } .anycontext-py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .anycontext-font-sans { font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; } .anycontext-text-sm { font-size: 0.875rem; line-height: 1.25rem; } .anycontext-text-lg { font-size: 1.125rem; line-height: 1.75rem; } .anycontext-font-medium { font-weight: 500; } .anycontext-font-semibold { font-weight: 600; } .anycontext-text-black { --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity)); } .anycontext-text-stone-50 { --tw-text-opacity: 1; color: rgb(250 250 249 / var(--tw-text-opacity)); } .anycontext-text-stone-900 { --tw-text-opacity: 1; color: rgb(28 25 23 / var(--tw-text-opacity)); } .anycontext-text-stone-950 { --tw-text-opacity: 1; color: rgb(12 10 9 / var(--tw-text-opacity)); } .anycontext-underline-offset-4 { text-underline-offset: 4px; } .anycontext-shadow-md { --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .anycontext-outline { outline-style: solid; } .anycontext-ring-offset-white { --tw-ring-offset-color: #fff; } .anycontext-transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } @keyframes enter { from { opacity: var(--tw-enter-opacity, 1); transform: translate3d( var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0 ) scale3d( var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1) ) rotate(var(--tw-enter-rotate, 0)); } } @keyframes exit { to { opacity: var(--tw-exit-opacity, 1); transform: translate3d( var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0 ) scale3d( var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1) ) rotate(var(--tw-exit-rotate, 0)); } } .anycontext-animate-in { animation-name: enter; animation-duration: 150ms; --tw-enter-opacity: initial; --tw-enter-scale: initial; --tw-enter-rotate: initial; --tw-enter-translate-x: initial; --tw-enter-translate-y: initial; } .anycontext-fade-in-0 { --tw-enter-opacity: 0; } .anycontext-zoom-in-95 { --tw-enter-scale: 0.95; } /* ext.css - Assuming this is your CSS file */ .anycontext-overlay { position: fixed; top: 0; left: 0; min-height: 100vh; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 99998; } .anycontext-sidebar { position: fixed; top: 0; right: 0; min-height: 100vh; width: 100%; max-width: 31%; /* Responsive width */ z-index: 99999; padding: 8px 16px; /* px-4 py-2 */ } .anycontext-sidebar-content { position: relative; display: flex; flex-direction: column; height: 95vh; background-color: white; border-radius: 8px; /* rounded-lg */ padding: 8px; /* px-2 */ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */ } .anycontext-close-button { position: absolute; right: 0; padding: 8px; /* p-2 */ border-radius: 4px; /* rounded-md */ margin: 8px; /* m-2 */ } .anycontext-close-button:hover { background-color: rgba(114, 87, 255, 0.5); /* hover:bg-[#7257ff]/50 */ color: white; /* hover:text-white */ } .anycontext-open-button { color: white; background-color: #7257ff; background-opacity: 75%; cursor: pointer; padding: 8px; /* px-4 py-2 */ border-radius: 4px 0 0 4px; /* rounded-l-md */ display: flex; align-items: center; justify-content: space-between; } .anycontext-header { margin: 16px; /* m-4 */ font-weight: 600; /* font-semibold */ font-size: 1.25rem; /* text-xl */ color: black; } .anycontext-icon { height: 24px; /* h-6 */ width: 24px; /* w-6 */ } .file\:anycontext-border-0::file-selector-button { border-width: 0px; } .file\:anycontext-bg-transparent::file-selector-button { background-color: transparent; } .file\:anycontext-text-sm::file-selector-button { font-size: 0.875rem; line-height: 1.25rem; } .file\:anycontext-font-medium::file-selector-button { font-weight: 500; } .placeholder\:anycontext-text-stone-500::-moz-placeholder { --tw-text-opacity: 1; color: rgb(120 113 108 / var(--tw-text-opacity)); } .placeholder\:anycontext-text-stone-500::placeholder { --tw-text-opacity: 1; color: rgb(120 113 108 / var(--tw-text-opacity)); } .hover\:anycontext-bg-red-500\/90:hover { background-color: rgb(239 68 68 / 0.9); } .hover\:anycontext-bg-stone-100:hover { --tw-bg-opacity: 1; background-color: rgb(245 245 244 / var(--tw-bg-opacity)); } .hover\:anycontext-bg-stone-100\/80:hover { background-color: rgb(245 245 244 / 0.8); } .hover\:anycontext-bg-stone-900\/90:hover { background-color: rgb(28 25 23 / 0.9); } .hover\:anycontext-text-stone-900:hover { --tw-text-opacity: 1; color: rgb(28 25 23 / var(--tw-text-opacity)); } .hover\:anycontext-underline:hover { text-decoration-line: underline; } .focus-visible\:anycontext-outline-none:focus-visible { outline: 2px solid transparent; outline-offset: 2px; } .focus-visible\:anycontext-ring-2:focus-visible { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .focus-visible\:anycontext-ring-stone-950:focus-visible { --tw-ring-opacity: 1; --tw-ring-color: rgb(12 10 9 / var(--tw-ring-opacity)); } .focus-visible\:anycontext-ring-offset-2:focus-visible { --tw-ring-offset-width: 2px; } .disabled\:anycontext-pointer-events-none:disabled { pointer-events: none; } .disabled\:anycontext-cursor-not-allowed:disabled { cursor: not-allowed; } .disabled\:anycontext-opacity-30:disabled { opacity: 0.3; } .disabled\:anycontext-opacity-50:disabled { opacity: 0.5; } .data-\[state\=closed\]\:anycontext-animate-out[data-state='closed'] { animation-name: exit; animation-duration: 150ms; --tw-exit-opacity: initial; --tw-exit-scale: initial; --tw-exit-rotate: initial; --tw-exit-translate-x: initial; --tw-exit-translate-y: initial; } .data-\[state\=closed\]\:anycontext-fade-out-0[data-state='closed'] { --tw-exit-opacity: 0; } .data-\[state\=closed\]\:anycontext-zoom-out-95[data-state='closed'] { --tw-exit-scale: 0.95; } .data-\[side\=bottom\]\:anycontext-slide-in-from-top-2[data-side='bottom'] { --tw-enter-translate-y: -0.5rem; } .data-\[side\=left\]\:anycontext-slide-in-from-right-2[data-side='left'] { --tw-enter-translate-x: 0.5rem; } .data-\[side\=right\]\:anycontext-slide-in-from-left-2[data-side='right'] { --tw-enter-translate-x: -0.5rem; } .data-\[side\=top\]\:anycontext-slide-in-from-bottom-2[data-side='top'] { --tw-enter-translate-y: 0.5rem; } :is(.anycontext-dark .dark\:anycontext-border-stone-800) { --tw-border-opacity: 1; border-color: rgb(41 37 36 / var(--tw-border-opacity)); } :is(.anycontext-dark .dark\:anycontext-bg-red-900) { --tw-bg-opacity: 1; background-color: rgb(127 29 29 / var(--tw-bg-opacity)); } :is(.anycontext-dark .dark\:anycontext-bg-stone-50) { --tw-bg-opacity: 1; background-color: rgb(250 250 249 / var(--tw-bg-opacity)); } :is(.anycontext-dark .dark\:anycontext-bg-stone-800) { --tw-bg-opacity: 1; background-color: rgb(41 37 36 / var(--tw-bg-opacity)); } :is(.anycontext-dark .dark\:anycontext-bg-stone-950) { --tw-bg-opacity: 1; background-color: rgb(12 10 9 / var(--tw-bg-opacity)); } :is(.anycontext-dark .dark\:anycontext-text-stone-50) { --tw-text-opacity: 1; color: rgb(250 250 249 / var(--tw-text-opacity)); } :is(.anycontext-dark .dark\:anycontext-text-stone-900) { --tw-text-opacity: 1; color: rgb(28 25 23 / var(--tw-text-opacity)); } :is(.anycontext-dark .dark\:anycontext-ring-offset-stone-950) { --tw-ring-offset-color: #0c0a09; } :is( .anycontext-dark .dark\:placeholder\:anycontext-text-stone-400 )::-moz-placeholder { --tw-text-opacity: 1; color: rgb(168 162 158 / var(--tw-text-opacity)); } :is( .anycontext-dark .dark\:placeholder\:anycontext-text-stone-400 )::placeholder { --tw-text-opacity: 1; color: rgb(168 162 158 / var(--tw-text-opacity)); } :is(.anycontext-dark .dark\:hover\:anycontext-bg-red-900\/90:hover) { background-color: rgb(127 29 29 / 0.9); } :is(.anycontext-dark .dark\:hover\:anycontext-bg-stone-50\/90:hover) { background-color: rgb(250 250 249 / 0.9); } :is(.anycontext-dark .dark\:hover\:anycontext-bg-stone-800:hover) { --tw-bg-opacity: 1; background-color: rgb(41 37 36 / var(--tw-bg-opacity)); } :is(.anycontext-dark .dark\:hover\:anycontext-bg-stone-800\/80:hover) { background-color: rgb(41 37 36 / 0.8); } :is(.anycontext-dark .dark\:hover\:anycontext-text-stone-50:hover) { --tw-text-opacity: 1; color: rgb(250 250 249 / var(--tw-text-opacity)); } :is( .anycontext-dark .dark\:focus-visible\:anycontext-ring-stone-300:focus-visible ) { --tw-ring-opacity: 1; --tw-ring-color: rgb(214 211 209 / var(--tw-ring-opacity)); }