*,
    :before,
    :after,
    ::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: #3b82f680;
        --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: ;
        --tw-contain-size: ;
        --tw-contain-layout: ;
        --tw-contain-paint: ;
        --tw-contain-style:
    }

    *,
    :before,
    :after {
        box-sizing: border-box;
        border: 0 solid #e5e7eb
    }

    :before,
    :after {
        --tw-content: ""
    }

    html,
    :host {
        -webkit-text-size-adjust: 100%;
        tab-size: 4;
        font-feature-settings: normal;
        font-variation-settings: normal;
        -webkit-tap-highlight-color: transparent;
        font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
        line-height: 1.5
    }

    body {
        line-height: inherit;
        margin: 0
    }

    a {
        color: inherit;
        -webkit-text-decoration: inherit;
        text-decoration: inherit
    }

    button {
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        font-family: inherit;
        font-size: 100%;
        font-weight: inherit;
        line-height: inherit;
        letter-spacing: inherit;
        color: inherit;
        margin: 0;
        padding: 0
    }

    button {
        text-transform: none
    }

    button {
        -webkit-appearance: button;
        background-color: #0000;
        background-image: none
    }

    :-moz-focusring {
        outline: auto
    }

    :-moz-ui-invalid {
        box-shadow: none
    }

    ::-webkit-inner-spin-button {
        height: auto
    }

    ::-webkit-outer-spin-button {
        height: auto
    }

    ::-webkit-search-decoration {
        -webkit-appearance: none
    }

    ::-webkit-file-upload-button {
        -webkit-appearance: button;
        font: inherit
    }

    h1,
    h2,
    h4,
    p {
        margin: 0
    }
    p{
        text-align: justify !important;
    }

    ul {
        margin: 0;
        padding: 0;
        list-style: none
    }

    input::-moz-placeholder {
        opacity: 1;
        color: #9ca3af
    }

    textarea::-moz-placeholder {
        opacity: 1;
        color: #9ca3af
    }

    input::placeholder,
    textarea::placeholder {
        opacity: 1;
        color: #9ca3af
    }

    button {
        cursor: pointer
    }

    :disabled {
        cursor: default
    }

    img,
    svg {
        vertical-align: middle;
        display: block
    }

    img {
        max-width: 100%
    }

    :root {
        --radius: .5rem;
        --background: 0 0% 100%;
        --foreground: 222.2 84% 4.9%;
        --card: 0 0% 100%;
        --card-foreground: 222.2 84% 4.9%;
        --popover: 0 0% 100%;
        --popover-foreground: 222.2 84% 4.9%;
        --primary: 0 72% 51%;
        --primary-foreground: 210 40% 98%;
        --secondary: 210 40% 96.1%;
        --secondary-foreground: 222.2 47.4% 11.2%;
        --muted: 210 40% 96.1%;
        --muted-foreground: 215.4 16.3% 46.9%;
        --accent: 210 40% 96.1%;
        --accent-foreground: 222.2 47.4% 11.2%;
        --destructive: 0 84.2% 60.2%;
        --border: 214.3 31.8% 91.4%;
        --input: 214.3 31.8% 91.4%;
        --ring: 0 72% 51%;
        --chart-1: 12 76% 61%;
        --chart-2: 173 58% 39%;
        --chart-3: 197 37% 24%;
        --chart-4: 43 74% 66%;
        --chart-5: 27 87% 67%;
        --sidebar-background: 0 0% 98%;
        --sidebar-foreground: 240 5.3% 26.1%;
        --sidebar-primary: 240 5.9% 10%;
        --sidebar-primary-foreground: 0 0% 98%;
        --sidebar-accent: 240 4.8% 95.9%;
        --sidebar-accent-foreground: 240 5.9% 10%;
        --sidebar-border: 220 13% 91%;
        --sidebar-ring: 217.2 91.2% 59.8%;
        --destructive-foreground: 210 40% 98%
    }

    * {
        border-color: hsl(var(--border))
    }

    body {
        background-color: hsl(var(--background));
        color: hsl(var(--foreground))
    }

    .container {
        width: 100%
    }

    @media (min-width:1400px) {
        .container {
            max-width: 1400px
        }
    }

    .fixed {
        position: fixed
    }

    .absolute {
        position: absolute
    }

    .relative {
        position: relative
    }

    .inset-0 {
        inset: 0
    }

    .left-0 {
        left: 0
    }

    .right-0 {
        right: 0
    }

    .top-0 {
        top: 0
    }

    .z-0 {
        z-index: 0
    }

    .z-10 {
        z-index: 10
    }

    .z-50 {
        z-index: 50
    }

    .order-1 {
        order: 1
    }

    .order-2 {
        order: 2
    }

    .col-span-1 {
        grid-column: span 1/span 1
    }

    .mx-auto {
        margin-left: auto;
        margin-right: auto
    }

    .mb-16 {
        margin-bottom: 4rem
    }

    .mb-4 {
        margin-bottom: 1rem
    }

    .ml-2 {
        margin-left: .5rem
    }

    .mt-1 {
        margin-top: .25rem
    }

    .mt-12 {
        margin-top: 3rem
    }

    .inline-block {
        display: inline-block
    }

    .flex {
        display: flex
    }

    .inline-flex {
        display: inline-flex
    }

    .grid {
        display: grid
    }

    .hidden {
        display: none
    }

    .h-12 {
        height: 3rem
    }

    .h-\[400px\] {
        height: 400px
    }

    .h-full {
        height: 100%
    }

    .min-h-screen {
        min-height: 100vh
    }

    .w-12 {
        width: 3rem
    }

    .w-auto {
        width: auto
    }

    .w-full {
        width: 100%
    }

    .max-w-2xl {
        max-width: 42rem
    }

    .max-w-3xl {
        max-width: 48rem
    }

    .max-w-sm {
        max-width: 24rem
    }

    .shrink-0 {
        flex-shrink: 0
    }

    .flex-grow {
        flex-grow: 1
    }

    @keyframes pulse {
        50% {
            opacity: .5
        }
    }

    @keyframes spin {
        to {
            transform: rotate(360deg)
        }
    }

    .grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr))
    }

    .grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .flex-col {
        flex-direction: column
    }

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

    .items-center {
        align-items: center
    }

    .justify-center {
        justify-content: center
    }

    .justify-between {
        justify-content: space-between
    }

    .gap-12 {
        gap: 3rem
    }

    .gap-16 {
        gap: 4rem
    }

    .gap-2 {
        gap: .5rem
    }

    .gap-4 {
        gap: 1rem
    }

    .gap-6 {
        gap: 1.5rem
    }

    .gap-8 {
        gap: 2rem
    }

    .space-x-3>:not([hidden])~:not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(.75rem*var(--tw-space-x-reverse));
        margin-left: calc(.75rem*calc(1 - var(--tw-space-x-reverse)))
    }

    .space-x-4>:not([hidden])~:not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(1rem*var(--tw-space-x-reverse));
        margin-left: calc(1rem*calc(1 - var(--tw-space-x-reverse)))
    }

    .space-x-6>:not([hidden])~:not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(1.5rem*var(--tw-space-x-reverse));
        margin-left: calc(1.5rem*calc(1 - var(--tw-space-x-reverse)))
    }

    .space-y-1>:not([hidden])~:not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(.25rem*calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(.25rem*var(--tw-space-y-reverse))
    }

    .space-y-1\.5>:not([hidden])~:not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(.375rem*calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(.375rem*var(--tw-space-y-reverse))
    }

    .space-y-2>:not([hidden])~:not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(.5rem*calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(.5rem*var(--tw-space-y-reverse))
    }

    .space-y-3>:not([hidden])~:not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(.75rem*calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(.75rem*var(--tw-space-y-reverse))
    }

    .space-y-4>:not([hidden])~:not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(1rem*calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(1rem*var(--tw-space-y-reverse))
    }

    .space-y-6>:not([hidden])~:not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(1.5rem*calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(1.5rem*var(--tw-space-y-reverse))
    }

    .space-y-8>:not([hidden])~:not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(2rem*calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(2rem*var(--tw-space-y-reverse))
    }

    .overflow-hidden {
        overflow: hidden
    }

    .whitespace-nowrap {
        white-space: nowrap
    }

    .rounded-2xl {
        border-radius: 1rem
    }

    .rounded-full {
        border-radius: 9999px
    }

    .rounded-lg {
        border-radius: var(--radius)
    }

    .rounded-md {
        border-radius: calc(var(--radius) - 2px)
    }

    .rounded-xl {
        border-radius: .75rem
    }

    .border {
        border-width: 1px
    }

    .border-t {
        border-top-width: 1px
    }

    .border-border {
        border-color: hsl(var(--border))
    }

    .border-input {
        border-color: hsl(var(--input))
    }

    .border-primary\/30 {
        border-color: hsl(var(--primary)/.3)
    }

    .border-transparent {
        border-color: #0000
    }

    .bg-background {
        background-color: hsl(var(--background))
    }

    .bg-card {
        background-color: hsl(var(--card))
    }

    .bg-primary {
        background-color: hsl(var(--primary))
    }

    .bg-primary\/10 {
        background-color: hsl(var(--primary)/.1)
    }

    .bg-primary\/20 {
        background-color: hsl(var(--primary)/.2)
    }

    .bg-secondary {
        background-color: hsl(var(--secondary))
    }

    .bg-secondary\/30 {
        background-color: hsl(var(--secondary)/.3)
    }

    .bg-transparent {
        background-color: #0000
    }

    .bg-gradient-to-r {
        background-image: linear-gradient(to right, var(--tw-gradient-stops))
    }

    .from-background {
        --tw-gradient-from: hsl(var(--background)) var(--tw-gradient-from-position);
        --tw-gradient-to: hsl(var(--background)/0) var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
    }

    .via-background\/80 {
        --tw-gradient-to: hsl(var(--background)/0) var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--background)/.8) var(--tw-gradient-via-position), var(--tw-gradient-to)
    }

    .to-transparent {
        --tw-gradient-to: transparent var(--tw-gradient-to-position)
    }

    .object-contain {
        -o-object-fit: contain;
        object-fit: contain
    }

    .object-cover {
        -o-object-fit: cover;
        object-fit: cover
    }

    .p-2 {
        padding: .5rem
    }

    .p-6 {
        padding: 1.5rem
    }

    .px-3 {
        padding-left: .75rem;
        padding-right: .75rem
    }

    .px-4 {
        padding-left: 1rem;
        padding-right: 1rem
    }

    .px-8 {
        padding-left: 2rem;
        padding-right: 2rem
    }

    .py-1 {
        padding-top: .25rem;
        padding-bottom: .25rem
    }

    .py-12 {
        padding-top: 3rem;
        padding-bottom: 3rem
    }

    .py-20 {
        padding-top: 5rem;
        padding-bottom: 5rem
    }

    .py-4 {
        padding-top: 1rem;
        padding-bottom: 1rem
    }

    .pt-0 {
        padding-top: 0
    }

    .pt-20 {
        padding-top: 5rem
    }

    .pt-4 {
        padding-top: 1rem
    }

    .pt-6 {
        padding-top: 1.5rem
    }

    .pt-8 {
        padding-top: 2rem
    }

    .text-center {
        text-align: center
    }

    .text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem
    }

    .text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem
    }

    .text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem
    }

    .text-sm {
        font-size: .875rem;
        line-height: 1.25rem
    }

    .text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem
    }

    .text-xs {
        font-size: .75rem;
        line-height: 1rem
    }

    .font-bold {
        font-weight: 700
    }

    .font-extrabold {
        font-weight: 800
    }

    .font-light {
        font-weight: 300
    }

    .font-medium {
        font-weight: 500
    }

    .font-semibold {
        font-weight: 600
    }

    .uppercase {
        text-transform: uppercase
    }

    .italic {
        font-style: italic
    }

    .leading-relaxed {
        line-height: 1.625
    }

    .tracking-tight {
        letter-spacing: -.025em
    }

    .tracking-wider {
        letter-spacing: .05em
    }

    .text-card-foreground {
        color: hsl(var(--card-foreground))
    }

    .text-foreground {
        color: hsl(var(--foreground))
    }

    .text-muted-foreground {
        color: hsl(var(--muted-foreground))
    }

    .text-primary {
        color: hsl(var(--primary))
    }

    .text-primary-foreground {
        color: hsl(var(--primary-foreground))
    }

    .text-secondary-foreground {
        color: hsl(var(--secondary-foreground))
    }

    .mix-blend-multiply {
        mix-blend-mode: multiply
    }

    .shadow {
        --tw-shadow: 0 1px 3px 0#0000001a, 0 1px 2px -1px #0000001a;
        --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0#0000), var(--tw-ring-shadow, 0 0#0000), var(--tw-shadow)
    }

    .shadow-2xl {
        --tw-shadow: 0 25px 50px -12px #00000040;
        --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0#0000), var(--tw-ring-shadow, 0 0#0000), var(--tw-shadow)
    }

    .shadow-sm {
        --tw-shadow: 0 1px 2px 0#0000000d;
        --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0#0000), var(--tw-ring-shadow, 0 0#0000), var(--tw-shadow)
    }

    .brightness-\[0\.3\] {
        --tw-brightness: brightness(.3);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
    }

    .transition-all {
        transition-property: all;
        transition-timing-function: cubic-bezier(.4, 0, .2, 1)
    }

    .transition-colors {
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
        transition-duration: .15s;
        transition-timing-function: cubic-bezier(.4, 0, .2, 1)
    }

    .duration-1000 {
        transition-duration: 1s
    }

    .duration-300 {
        transition-duration: .3s
    }

    @keyframes enter {
        0% {
            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))
        }
    }

    .animate-in {
        --tw-enter-opacity: initial;
        --tw-enter-scale: initial;
        --tw-enter-rotate: initial;
        --tw-enter-translate-x: initial;
        --tw-enter-translate-y: initial;
        animation-name: enter
    }

    .fade-in {
        --tw-enter-opacity: 0
    }

    .slide-in-from-left {
        --tw-enter-translate-x: -100%
    }

    .duration-1000 {
        animation-duration: 1s
    }

    .duration-300 {
        animation-duration: .3s
    }

    html {
        scroll-behavior: smooth
    }

    .file\:border-0::file-selector-button {
        border-width: 0
    }

    .file\:bg-transparent::file-selector-button {
        background-color: #0000
    }

    .file\:text-sm::file-selector-button {
        font-size: .875rem;
        line-height: 1.25rem
    }

    .file\:font-medium::file-selector-button {
        font-weight: 500
    }

    .file\:text-foreground::file-selector-button {
        color: hsl(var(--foreground))
    }

    .placeholder\:text-gray-800::placeholder {
        --tw-text-opacity: 1;
        color: rgb(31 41 55/var(--tw-text-opacity, 1))
    }

    .placeholder\:text-muted-foreground::placeholder {
        color: hsl(var(--muted-foreground))
    }

    .after\:absolute:after {
        content: var(--tw-content);
        position: absolute
    }

    .after\:-inset-2:after {
        content: var(--tw-content);
        inset: -.5rem
    }

    .after\:inset-y-0:after {
        content: var(--tw-content);
        top: 0;
        bottom: 0
    }

    .after\:left-1\/2:after {
        content: var(--tw-content);
        left: 50%
    }

    .after\:w-1:after {
        content: var(--tw-content);
        width: .25rem
    }

    .after\:w-\[2px\]:after {
        content: var(--tw-content);
        width: 2px
    }

    .after\:-translate-x-1\/2:after {
        content: var(--tw-content);
        --tw-translate-x: -50%;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

    .hover\:border-gray-200:hover {
        --tw-border-opacity: 1;
        border-color: rgb(229 231 235/var(--tw-border-opacity, 1))
    }

    .hover\:bg-accent:hover {
        background-color: hsl(var(--accent))
    }

    .hover\:bg-background:hover {
        background-color: hsl(var(--background))
    }

    .hover\:bg-destructive\/80:hover {
        background-color: hsl(var(--destructive)/.8)
    }

    .hover\:bg-destructive\/90:hover {
        background-color: hsl(var(--destructive)/.9)
    }

    .hover\:bg-gray-50:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(249 250 251/var(--tw-bg-opacity, 1))
    }

    .hover\:bg-muted:hover {
        background-color: hsl(var(--muted))
    }

    .hover\:bg-muted\/40:hover {
        background-color: hsl(var(--muted)/.4)
    }

    .hover\:bg-muted\/50:hover {
        background-color: hsl(var(--muted)/.5)
    }

    .hover\:bg-primary\/5:hover {
        background-color: hsl(var(--primary)/.05)
    }

    .hover\:bg-primary\/80:hover {
        background-color: hsl(var(--primary)/.8)
    }

    .hover\:bg-primary\/90:hover {
        background-color: hsl(var(--primary)/.9)
    }

    .hover\:bg-secondary\/80:hover {
        background-color: hsl(var(--secondary)/.8)
    }

    .hover\:bg-sidebar-accent:hover {
        background-color: hsl(var(--sidebar-accent))
    }

    .hover\:text-accent-foreground:hover {
        color: hsl(var(--accent-foreground))
    }

    .hover\:text-foreground:hover {
        color: hsl(var(--foreground))
    }

    .hover\:text-gray-800:hover {
        --tw-text-opacity: 1;
        color: rgb(31 41 55/var(--tw-text-opacity, 1))
    }

    .hover\:text-muted-foreground:hover {
        color: hsl(var(--muted-foreground))
    }

    .hover\:text-primary:hover {
        color: hsl(var(--primary))
    }

    .hover\:text-sidebar-accent-foreground:hover {
        color: hsl(var(--sidebar-accent-foreground))
    }

    .hover\:underline:hover {
        text-decoration-line: underline
    }

    .hover\:opacity-100:hover {
        opacity: 1
    }

    .hover\:shadow-\[0_0_0_1px_hsl\(var\(--sidebar-accent\)\)\]:hover {
        --tw-shadow: 0 0 0 1px hsl(var(--sidebar-accent));
        --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0#0000), var(--tw-ring-shadow, 0 0#0000), var(--tw-shadow)
    }

    .hover\:shadow-xl:hover {
        --tw-shadow: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
        --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0#0000), var(--tw-ring-shadow, 0 0#0000), var(--tw-shadow)
    }

    .hover\:after\:bg-sidebar-border:hover:after {
        content: var(--tw-content);
        background-color: hsl(var(--sidebar-border))
    }

    .focus\:border-0:focus {
        border-width: 0
    }

    .focus\:bg-accent:focus {
        background-color: hsl(var(--accent))
    }

    .focus\:text-accent-foreground:focus {
        color: hsl(var(--accent-foreground))
    }

    .focus\:outline-none:focus {
        outline-offset: 2px;
        outline: 2px solid #0000
    }

    .focus\:ring-0:focus {
        --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(0px + 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\:ring-1:focus {
        --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(1px + 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\:ring-2:focus {
        --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\:ring-ring:focus {
        --tw-ring-color: hsl(var(--ring))
    }

    .focus\:ring-offset-2:focus {
        --tw-ring-offset-width: 2px
    }

    .focus-visible\:outline-none:focus-visible {
        outline-offset: 2px;
        outline: 2px solid #0000
    }

    .focus-visible\:ring-1: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(1px + 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\: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\:ring-ring:focus-visible {
        --tw-ring-color: hsl(var(--ring))
    }

    .focus-visible\:ring-sidebar-ring:focus-visible {
        --tw-ring-color: hsl(var(--sidebar-ring))
    }

    .focus-visible\:ring-offset-1:focus-visible {
        --tw-ring-offset-width: 1px
    }

    .focus-visible\:ring-offset-2:focus-visible {
        --tw-ring-offset-width: 2px
    }

    .focus-visible\:ring-offset-background:focus-visible {
        --tw-ring-offset-color: hsl(var(--background))
    }

    .active\:bg-sidebar-accent:active {
        background-color: hsl(var(--sidebar-accent))
    }

    .active\:text-sidebar-accent-foreground:active {
        color: hsl(var(--sidebar-accent-foreground))
    }

    .disabled\:pointer-events-none:disabled {
        pointer-events: none
    }

    .disabled\:cursor-not-allowed:disabled {
        cursor: not-allowed
    }

    .disabled\:opacity-50:disabled {
        opacity: .5
    }

    .group\/menu-item:focus-within .group-focus-within\/menu-item\:opacity-100 {
        opacity: 1
    }

    .group:hover .group-hover\:block {
        display: block
    }

    .group:hover .group-hover\:bg-primary {
        background-color: hsl(var(--primary))
    }

    .group:hover .group-hover\:text-gray-400 {
        --tw-text-opacity: 1;
        color: rgb(156 163 175/var(--tw-text-opacity, 1))
    }

    .group:hover .group-hover\:text-primary-foreground {
        color: hsl(var(--primary-foreground))
    }

    .group\/menu-item:hover .group-hover\/menu-item\:opacity-100,
    .group:hover .group-hover\:opacity-100 {
        opacity: 1
    }

    .peer\/menu-button:hover~.peer-hover\/menu-button\:text-sidebar-accent-foreground {
        color: hsl(var(--sidebar-accent-foreground))
    }

    .peer:disabled~.peer-disabled\:cursor-not-allowed {
        cursor: not-allowed
    }

    .peer:disabled~.peer-disabled\:opacity-70 {
        opacity: .7
    }

    .has-\[\:disabled\]\:opacity-50:has(:disabled) {
        opacity: .5
    }

    @keyframes accordion-up {
        0% {
            height: var(--radix-accordion-content-height)
        }

        to {
            height: 0
        }
    }

    @keyframes accordion-down {
        0% {
            height: 0
        }

        to {
            height: var(--radix-accordion-content-height)
        }
    }

    .data-\[panel-group-direction\=vertical\]\:after\:left-0[data-panel-group-direction=vertical]:after {
        content: var(--tw-content);
        left: 0
    }

    .data-\[panel-group-direction\=vertical\]\:after\:h-1[data-panel-group-direction=vertical]:after {
        content: var(--tw-content);
        height: .25rem
    }

    .data-\[panel-group-direction\=vertical\]\:after\:w-full[data-panel-group-direction=vertical]:after {
        content: var(--tw-content);
        width: 100%
    }

    .data-\[panel-group-direction\=vertical\]\:after\:-translate-y-1\/2[data-panel-group-direction=vertical]:after {
        content: var(--tw-content);
        --tw-translate-y: -50%;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

    .data-\[panel-group-direction\=vertical\]\:after\:translate-x-0[data-panel-group-direction=vertical]:after {
        content: var(--tw-content);
        --tw-translate-x: 0px;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

    .data-\[state\=open\]\:hover\:bg-accent:hover[data-state=open] {
        background-color: hsl(var(--accent))
    }

    .data-\[state\=open\]\:hover\:bg-sidebar-accent:hover[data-state=open] {
        background-color: hsl(var(--sidebar-accent))
    }

    .data-\[state\=open\]\:hover\:text-sidebar-accent-foreground:hover[data-state=open] {
        color: hsl(var(--sidebar-accent-foreground))
    }

    .data-\[state\=open\]\:focus\:bg-accent:focus[data-state=open] {
        background-color: hsl(var(--accent))
    }

    .group[data-collapsible=offcanvas] .group-data-\[collapsible\=offcanvas\]\:after\:left-full:after {
        content: var(--tw-content);
        left: 100%
    }

    .group[data-collapsible=offcanvas] .group-data-\[collapsible\=offcanvas\]\:hover\:bg-sidebar:hover {
        background-color: hsl(var(--sidebar-background))
    }

    .dark\:placeholder\:text-white\/90:is(.dark *)::-moz-placeholder {
        color: #ffffffe6
    }

    .dark\:placeholder\:text-white\/90:is(.dark *)::placeholder {
        color: #ffffffe6
    }

    .dark\:hover\:border-gray-800:hover:is(.dark *) {
        --tw-border-opacity: 1;
        border-color: rgb(31 41 55/var(--tw-border-opacity, 1))
    }

    .dark\:hover\:bg-white\/\[0\.03\]:hover:is(.dark *) {
        background-color: #ffffff08
    }

    .dark\:hover\:text-gray-200:hover:is(.dark *) {
        --tw-text-opacity: 1;
        color: rgb(229 231 235/var(--tw-text-opacity, 1))
    }

    @media (min-width:640px) {
        .sm\:flex-row {
            flex-direction: row
        }
    }

    @media (min-width:768px) {
        .md\:order-1 {
            order: 1
        }

        .md\:order-2 {
            order: 2
        }

        .md\:col-span-2 {
            grid-column: span 2/span 2
        }

        .md\:mt-20 {
            margin-top: 5rem
        }

        .md\:flex {
            display: flex
        }

        .md\:hidden {
            display: none
        }

        .md\:h-16 {
            height: 4rem
        }

        .md\:h-\[600px\] {
            height: 600px
        }

        .md\:grid-cols-2 {
            grid-template-columns: repeat(2, minmax(0, 1fr))
        }

        .md\:grid-cols-4 {
            grid-template-columns: repeat(4, minmax(0, 1fr))
        }

        .md\:flex-row {
            flex-direction: row
        }

        .md\:px-6 {
            padding-left: 1.5rem;
            padding-right: 1.5rem
        }

        .md\:py-20 {
            padding-top: 5rem;
            padding-bottom: 5rem
        }

        .md\:py-24 {
            padding-top: 6rem;
            padding-bottom: 6rem
        }

        .md\:py-32 {
            padding-top: 8rem;
            padding-bottom: 8rem
        }

        .md\:text-5xl {
            font-size: 3rem;
            line-height: 1
        }

        .md\:text-6xl {
            font-size: 3.75rem;
            line-height: 1
        }

        .md\:text-xl {
            font-size: 1.25rem;
            line-height: 1.75rem
        }

        .after\:md\:hidden:after {
            content: var(--tw-content);
            display: none
        }
    }

    @media (min-width:1024px) {
        .lg\:grid-cols-3 {
            grid-template-columns: repeat(3, minmax(0, 1fr))
        }

        .lg\:grid-cols-4 {
            grid-template-columns: repeat(4, minmax(0, 1fr))
        }
    }

    .\[\&_svg\]\:pointer-events-none svg {
        pointer-events: none
    }

    .\[\&_svg\]\:size-4 svg {
        width: 1rem;
        height: 1rem
    }

    .\[\&_svg\]\:shrink-0 svg {
        flex-shrink: 0
    }

    [data-sonner-toast]:focus-visible {
        box-shadow: 0 4px 12px rgba(0, 0, 0, .1), 0 0 0 2px rgba(0, 0, 0, .2)
    }

    [data-sonner-toast][data-styled=true] [data-button]:focus-visible {
        box-shadow: 0 0 0 2px rgba(0, 0, 0, .4)
    }

    [data-sonner-toast][data-styled=true] [data-close-button]:focus-visible {
        box-shadow: 0 4px 12px rgba(0, 0, 0, .1), 0 0 0 2px rgba(0, 0, 0, .2)
    }

    [data-sonner-toast][data-styled=true]:hover [data-close-button]:hover {
        background: var(--gray2);
        border-color: var(--gray5)
    }

    [data-sonner-toast][data-swiping=true]::before {
        content: "";
        position: absolute;
        left: -100%;
        right: -100%;
        height: 100%;
        z-index: -1
    }

    [data-sonner-toast][data-y-position=top][data-swiping=true]::before {
        bottom: 50%;
        transform: scaleY(3) translateY(50%)
    }

    [data-sonner-toast][data-y-position=bottom][data-swiping=true]::before {
        top: 50%;
        transform: scaleY(3) translateY(-50%)
    }

    [data-sonner-toast][data-swiping=false][data-removed=true]::before {
        content: "";
        position: absolute;
        inset: 0;
        transform: scaleY(2)
    }

    [data-sonner-toast][data-expanded=true]::after {
        content: "";
        position: absolute;
        left: 0;
        height: calc(var(--gap) + 1px);
        bottom: 100%;
        width: 100%
    }

    [data-sonner-toast][data-removed=true][data-front=false]::before {
        height: calc(var(--initial-height) + 20%)
    }

    @keyframes swipe-out-left {
        from {
            transform: var(--y) translateX(var(--swipe-amount-x));
            opacity: 1
        }

        to {
            transform: var(--y) translateX(calc(var(--swipe-amount-x) - 100%));
            opacity: 0
        }
    }

    @keyframes swipe-out-right {
        from {
            transform: var(--y) translateX(var(--swipe-amount-x));
            opacity: 1
        }

        to {
            transform: var(--y) translateX(calc(var(--swipe-amount-x) + 100%));
            opacity: 0
        }
    }

    @keyframes swipe-out-up {
        from {
            transform: var(--y) translateY(var(--swipe-amount-y));
            opacity: 1
        }

        to {
            transform: var(--y) translateY(calc(var(--swipe-amount-y) - 100%));
            opacity: 0
        }
    }

    @keyframes swipe-out-down {
        from {
            transform: var(--y) translateY(var(--swipe-amount-y));
            opacity: 1
        }

        to {
            transform: var(--y) translateY(calc(var(--swipe-amount-y) + 100%));
            opacity: 0
        }
    }

    [data-sonner-toaster][data-sonner-theme=dark] [data-sonner-toast] [data-close-button]:hover {
        background: var(--normal-bg-hover);
        border-color: var(--normal-border-hover)
    }

    @keyframes sonner-fade-in {
        0% {
            opacity: 0;
            transform: scale(.8)
        }

        100% {
            opacity: 1;
            transform: scale(1)
        }
    }

    @keyframes sonner-fade-out {
        0% {
            opacity: 1;
            transform: scale(1)
        }

        100% {
            opacity: 0;
            transform: scale(.8)
        }
    }

    @keyframes sonner-spin {
        0% {
            opacity: 1
        }

        100% {
            opacity: .15
        }
    }

        .sf-hidden {
        display: none !important
    }

       body {
        transition: opacity ease-in 0.2s
    }