@tailwind base;

@tailwind components;

.sr-only {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border-width: 0
}

.collapse {

    visibility: collapse
}

.absolute {

    position: absolute
}

.relative {

    position: relative
}

.sticky {

    position: sticky
}

.bottom-0 {

    bottom: 0px
}

.right-2 {

    right: 0.5rem
}

.top-0 {

    top: 0px
}

.top-2 {

    top: 0.5rem
}

.z-50 {

    z-index: 50
}

.m-0 {

    margin: 0px
}

.m-4 {

    margin: 1rem
}

.mx-12 {

    margin-left: 3rem;

    margin-right: 3rem
}

.mx-2 {

    margin-left: 0.5rem;

    margin-right: 0.5rem
}

.mx-8 {

    margin-left: 2rem;

    margin-right: 2rem
}

.mx-auto {

    margin-left: auto;

    margin-right: auto
}

.mb-0 {

    margin-bottom: 0px
}

.mb-10 {

    margin-bottom: 2.5rem
}

.mb-12 {

    margin-bottom: 3rem
}

.mb-16 {

    margin-bottom: 4rem
}

.mb-2 {

    margin-bottom: 0.5rem
}

.mb-3 {

    margin-bottom: 0.75rem
}

.mb-4 {

    margin-bottom: 1rem
}

.mb-6 {

    margin-bottom: 1.5rem
}

.mb-8 {

    margin-bottom: 2rem
}

.ml-2 {

    margin-left: 0.5rem
}

.mr-2 {

    margin-right: 0.5rem
}

.mr-4 {

    margin-right: 1rem
}

.mt-1 {

    margin-top: 0.25rem
}

.mt-12 {

    margin-top: 3rem
}

.mt-14 {

    margin-top: 3.5rem
}

.mt-16 {

    margin-top: 4rem
}

.mt-2 {

    margin-top: 0.5rem
}

.mt-4 {

    margin-top: 1rem
}

.mt-5 {

    margin-top: 1.25rem
}

.mt-6 {

    margin-top: 1.5rem
}

.mt-8 {

    margin-top: 2rem
}

.inline-block {

    display: inline-block
}

.flex {

    display: flex
}

.table {

    display: table
}

.grid {

    display: grid
}

.hidden {

    display: none
}

.h-10 {

    height: 2.5rem
}

.h-12 {

    height: 3rem
}

.h-32 {

    height: 8rem
}

.h-4 {

    height: 1rem
}

.h-48 {

    height: 12rem
}

.h-6 {

    height: 1.5rem
}

.h-8 {

    height: 2rem
}

.h-\[200px\] {

    height: 200px
}

.h-\[80px\] {

    height: 80px
}

.h-auto {

    height: auto
}

.max-h-24 {

    max-height: 6rem
}

.min-h-5 {

    min-height: 1.25rem
}

.min-h-\[75vh\] {

    min-height: 75vh
}

.min-h-full {

    min-height: 100%
}

.min-h-screen {

    min-height: 100vh
}

.w-10 {

    width: 2.5rem
}

.w-10\/12 {

    width: 83.333333%
}

.w-12 {

    width: 3rem
}

.w-2\/3 {

    width: 66.666667%
}

.w-32 {

    width: 8rem
}

.w-4 {

    width: 1rem
}

.w-40 {

    width: 10rem
}

.w-6 {

    width: 1.5rem
}

.w-60 {

    width: 15rem
}

.w-8 {

    width: 2rem
}

.w-80 {

    width: 20rem
}

.w-\[180px\] {

    width: 180px
}

.w-\[200px\] {

    width: 200px
}

.w-full {

    width: 100%
}

.min-w-72 {

    min-width: 18rem
}

.max-w-3xl {

    max-width: 48rem
}

.max-w-\[1100px\] {

    max-width: 1100px
}

.max-w-\[1200px\] {

    max-width: 1200px
}

.max-w-\[320px\] {

    max-width: 320px
}

.max-w-\[60\%\] {

    max-width: 60%
}

.max-w-\[640px\] {

    max-width: 640px
}

.max-w-screen-3xl {

    max-width: 2000px
}

.flex-1 {

    flex: 1 1 0%
}

.flex-none {

    flex: none
}

.shrink-0 {

    flex-shrink: 0
}

.grow {

    flex-grow: 1
}

.table-auto {

    table-layout: auto
}

.border-collapse {

    border-collapse: collapse
}

.cursor-pointer {

    cursor: pointer
}

.grid-flow-col {

    grid-auto-flow: column
}

.grid-cols-1 {

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

.grid-cols-2 {

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

.flex-row {

    flex-direction: row
}

.flex-col {

    flex-direction: column
}

.flex-col-reverse {

    flex-direction: column-reverse
}

.flex-wrap {

    flex-wrap: wrap
}

.items-center {

    align-items: center
}

.justify-center {

    justify-content: center
}

.justify-between {

    justify-content: space-between
}

.gap-2 {

    gap: 0.5rem
}

.gap-4 {

    gap: 1rem
}

.gap-5 {

    gap: 1.25rem
}

.gap-6 {

    gap: 1.5rem
}

.gap-8 {

    gap: 2rem
}

.space-x-2 > :not([hidden]) ~ :not([hidden]) {

    --tw-space-x-reverse: 0;

    margin-right: calc(0.5rem * var(--tw-space-x-reverse));

    margin-left: calc(0.5rem * 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-y-2 > :not([hidden]) ~ :not([hidden]) {

    --tw-space-y-reverse: 0;

    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));

    margin-bottom: calc(0.5rem * 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-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
}

.overflow-x-auto {

    overflow-x: auto
}

.rounded {

    border-radius: 0.25rem
}

.rounded-2xl {

    border-radius: 1rem
}

.rounded-box {

    border-radius: var(--rounded-box, 1rem)
}

.rounded-full {

    border-radius: 9999px
}

.rounded-lg {

    border-radius: 0.5rem
}

.rounded-md {

    border-radius: 0.375rem
}

.border {

    border-width: 1px
}

.border-2 {

    border-width: 2px
}

.border-8 {

    border-width: 8px
}

.border-b-2 {

    border-bottom-width: 2px
}

.border-t {

    border-top-width: 1px
}

.border-t-8 {

    border-top-width: 8px
}

.border-ccc-yellow {

    --tw-border-opacity: 1;

    border-color: rgb(239 233 21 / var(--tw-border-opacity, 1))
}

.border-error {

    --tw-border-opacity: 1;

    border-color: var(--fallback-er,oklch(var(--er)/var(--tw-border-opacity, 1)))
}

.border-primary {

    --tw-border-opacity: 1;

    border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity, 1)))
}

.border-secondary {

    --tw-border-opacity: 1;

    border-color: var(--fallback-s,oklch(var(--s)/var(--tw-border-opacity, 1)))
}

.bg-\[\#000000\] {

    --tw-bg-opacity: 1;

    background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1))
}

.bg-\[\#043927\] {

    --tw-bg-opacity: 1;

    background-color: rgb(4 57 39 / var(--tw-bg-opacity, 1))
}

.bg-\[\#082B0F\] {

    --tw-bg-opacity: 1;

    background-color: rgb(8 43 15 / var(--tw-bg-opacity, 1))
}

.bg-\[\#1F2833\] {

    --tw-bg-opacity: 1;

    background-color: rgb(31 40 51 / var(--tw-bg-opacity, 1))
}

.bg-\[\#204e4a\] {

    --tw-bg-opacity: 1;

    background-color: rgb(32 78 74 / var(--tw-bg-opacity, 1))
}

.bg-\[\#515A47\] {

    --tw-bg-opacity: 1;

    background-color: rgb(81 90 71 / var(--tw-bg-opacity, 1))
}

.bg-\[\#747474\] {

    --tw-bg-opacity: 1;

    background-color: rgb(116 116 116 / var(--tw-bg-opacity, 1))
}

.bg-\[\#ACBFA4\] {

    --tw-bg-opacity: 1;

    background-color: rgb(172 191 164 / var(--tw-bg-opacity, 1))
}

.bg-\[\#AFBE8F\] {

    --tw-bg-opacity: 1;

    background-color: rgb(175 190 143 / var(--tw-bg-opacity, 1))
}

.bg-\[\#F3F3F3\] {

    --tw-bg-opacity: 1;

    background-color: rgb(243 243 243 / var(--tw-bg-opacity, 1))
}

.bg-\[\#FCFCFC\] {

    --tw-bg-opacity: 1;

    background-color: rgb(252 252 252 / var(--tw-bg-opacity, 1))
}

.bg-\[\#dde392\] {

    --tw-bg-opacity: 1;

    background-color: rgb(221 227 146 / var(--tw-bg-opacity, 1))
}

.bg-accent {

    --tw-bg-opacity: 1;

    background-color: var(--fallback-a,oklch(var(--a)/var(--tw-bg-opacity, 1)))
}

.bg-base-100 {

    --tw-bg-opacity: 1;

    background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity, 1)))
}

.bg-base-100\/90 {

    background-color: var(--fallback-b1,oklch(var(--b1)/0.9))
}

.bg-base-200 {

    --tw-bg-opacity: 1;

    background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity, 1)))
}

.bg-base-300 {

    --tw-bg-opacity: 1;

    background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity, 1)))
}

.bg-ccc-beige {

    --tw-bg-opacity: 1;

    background-color: rgb(226 232 206 / var(--tw-bg-opacity, 1))
}

.bg-ccc-green {

    --tw-bg-opacity: 1;

    background-color: rgb(8 43 15 / var(--tw-bg-opacity, 1))
}

.bg-ccc-green2 {

    --tw-bg-opacity: 1;

    background-color: rgb(0 100 0 / var(--tw-bg-opacity, 1))
}

.bg-ccc-grey-dark {

    --tw-bg-opacity: 1;

    background-color: rgb(31 40 51 / var(--tw-bg-opacity, 1))
}

.bg-ccc-grey-light {

    --tw-bg-opacity: 1;

    background-color: rgb(237 234 229 / var(--tw-bg-opacity, 1))
}

.bg-ccc-grey-medium {

    --tw-bg-opacity: 1;

    background-color: rgb(116 116 116 / var(--tw-bg-opacity, 1))
}

.bg-ccc-yellow {

    --tw-bg-opacity: 1;

    background-color: rgb(239 233 21 / var(--tw-bg-opacity, 1))
}

.bg-error {

    --tw-bg-opacity: 1;

    background-color: var(--fallback-er,oklch(var(--er)/var(--tw-bg-opacity, 1)))
}

.bg-gray-800 {

    --tw-bg-opacity: 1;

    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1))
}

.bg-info {

    --tw-bg-opacity: 1;

    background-color: var(--fallback-in,oklch(var(--in)/var(--tw-bg-opacity, 1)))
}

.bg-neutral {

    --tw-bg-opacity: 1;

    background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity, 1)))
}

.bg-primary {

    --tw-bg-opacity: 1;

    background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity, 1)))
}

.bg-primary-content {

    --tw-bg-opacity: 1;

    background-color: var(--fallback-pc,oklch(var(--pc)/var(--tw-bg-opacity, 1)))
}

.bg-secondary {

    --tw-bg-opacity: 1;

    background-color: var(--fallback-s,oklch(var(--s)/var(--tw-bg-opacity, 1)))
}

.bg-secondary-content {

    --tw-bg-opacity: 1;

    background-color: var(--fallback-sc,oklch(var(--sc)/var(--tw-bg-opacity, 1)))
}

.bg-stat-box {

    --tw-bg-opacity: 1;

    background-color: rgb(4 57 39 / var(--tw-bg-opacity, 1))
}

.bg-success {

    --tw-bg-opacity: 1;

    background-color: var(--fallback-su,oklch(var(--su)/var(--tw-bg-opacity, 1)))
}

.bg-transparent {

    background-color: transparent
}

.bg-warning {

    --tw-bg-opacity: 1;

    background-color: var(--fallback-wa,oklch(var(--wa)/var(--tw-bg-opacity, 1)))
}

.bg-opacity-90 {

    --tw-bg-opacity: 0.9
}

.fill-current {

    fill: currentColor
}

.stroke-current {

    stroke: currentColor
}

.object-cover {

    -o-object-fit: cover;

       object-fit: cover
}

.object-top {

    -o-object-position: top;

       object-position: top
}

.p-0 {

    padding: 0px
}

.p-1 {

    padding: 0.25rem
}

.p-10 {

    padding: 2.5rem
}

.p-12 {

    padding: 3rem
}

.p-2 {

    padding: 0.5rem
}

.p-3 {

    padding: 0.75rem
}

.p-4 {

    padding: 1rem
}

.p-6 {

    padding: 1.5rem
}

.p-8 {

    padding: 2rem
}

.px-3 {

    padding-left: 0.75rem;

    padding-right: 0.75rem
}

.px-4 {

    padding-left: 1rem;

    padding-right: 1rem
}

.px-6 {

    padding-left: 1.5rem;

    padding-right: 1.5rem
}

.px-7 {

    padding-left: 1.75rem;

    padding-right: 1.75rem
}

.py-2 {

    padding-top: 0.5rem;

    padding-bottom: 0.5rem
}

.py-3 {

    padding-top: 0.75rem;

    padding-bottom: 0.75rem
}

.py-5 {

    padding-top: 1.25rem;

    padding-bottom: 1.25rem
}

.py-8 {

    padding-top: 2rem;

    padding-bottom: 2rem
}

.pb-1 {

    padding-bottom: 0.25rem
}

.pb-48 {

    padding-bottom: 12rem
}

.pl-0 {

    padding-left: 0px
}

.pl-2 {

    padding-left: 0.5rem
}

.pr-8 {

    padding-right: 2rem
}

.pt-2 {

    padding-top: 0.5rem
}

.pt-32 {

    padding-top: 8rem
}

.pt-4 {

    padding-top: 1rem
}

.pt-6 {

    padding-top: 1.5rem
}

.text-left {

    text-align: left
}

.text-center {

    text-align: center
}

.font-poppins {

    font-family: Poppins, sans-serif
}

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

.text-\[16px\] {

    font-size: 16px
}

.text-lg {

    font-size: 1.125rem;

    line-height: 1.75rem
}

.text-sm {

    font-size: 0.875rem;

    line-height: 1.25rem
}

.text-xs {

    font-size: 0.75rem;

    line-height: 1rem
}

.font-bold {

    font-weight: 700
}

.font-medium {

    font-weight: 500
}

.font-semibold {

    font-weight: 600
}

.uppercase {

    text-transform: uppercase
}

.leading-6 {

    line-height: 1.5rem
}

.leading-\[28px\] {

    line-height: 28px
}

.leading-\[38px\] {

    line-height: 38px
}

.text-\[\#082B0F\] {

    --tw-text-opacity: 1;

    color: rgb(8 43 15 / var(--tw-text-opacity, 1))
}

.text-\[\#367c2b\] {

    --tw-text-opacity: 1;

    color: rgb(54 124 43 / var(--tw-text-opacity, 1))
}

.text-accent {

    --tw-text-opacity: 1;

    color: var(--fallback-a,oklch(var(--a)/var(--tw-text-opacity, 1)))
}

.text-base-100 {

    --tw-text-opacity: 1;

    color: var(--fallback-b1,oklch(var(--b1)/var(--tw-text-opacity, 1)))
}

.text-black {

    --tw-text-opacity: 1;

    color: rgb(0 0 0 / var(--tw-text-opacity, 1))
}

.text-ccc-grey-light {

    --tw-text-opacity: 1;

    color: rgb(237 234 229 / var(--tw-text-opacity, 1))
}

.text-ccc-yellow {

    --tw-text-opacity: 1;

    color: rgb(239 233 21 / var(--tw-text-opacity, 1))
}

.text-neutral {

    --tw-text-opacity: 1;

    color: var(--fallback-n,oklch(var(--n)/var(--tw-text-opacity, 1)))
}

.text-primary {

    --tw-text-opacity: 1;

    color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity, 1)))
}

.text-primary-content {

    --tw-text-opacity: 1;

    color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity, 1)))
}

.text-secondary {

    --tw-text-opacity: 1;

    color: var(--fallback-s,oklch(var(--s)/var(--tw-text-opacity, 1)))
}

.text-white {

    --tw-text-opacity: 1;

    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.underline {

    text-decoration-line: underline
}

.opacity-70 {

    opacity: 0.7
}

.shadow {

    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);

    --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-lg {

    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px 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-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)
}

.ring {

    --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(3px + 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)
}

.ring-primary {

    --tw-ring-opacity: 1;

    --tw-ring-color: var(--fallback-p,oklch(var(--p)/var(--tw-ring-opacity, 1)))
}

.ring-offset-2 {

    --tw-ring-offset-width: 2px
}

.ring-offset-base-100 {

    --tw-ring-offset-color: var(--fallback-b1,oklch(var(--b1)/1))
}

.backdrop-blur-3xl {

    --tw-backdrop-blur: blur(64px);

    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

.backdrop-blur-lg {

    --tw-backdrop-blur: blur(16px);

    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

.backdrop-filter {

    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

.transition {

    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    transition-duration: 150ms
}

.duration-150 {

    transition-duration: 150ms
}

.duration-200 {

    transition-duration: 200ms
}

.ease-in-out {

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}

.ease-out {

    transition-timing-function: cubic-bezier(0, 0, 0.2, 1)
}

/*
@layer utilities {
  .small-caps {
    font-variant: small-caps;
  }

  .text-content {
    @apply max-w-screen-lg;
    @apply mx-auto;   
  }
}
*/

.after\:absolute::after {

    content: var(--tw-content);

    position: absolute
}

.after\:bottom-0::after {

    content: var(--tw-content);

    bottom: 0px
}

.after\:left-0::after {

    content: var(--tw-content);

    left: 0px
}

.after\:h-1::after {

    content: var(--tw-content);

    height: 0.25rem
}

.after\:w-0::after {

    content: var(--tw-content);

    width: 0px
}

.after\:bg-primary::after {

    content: var(--tw-content);

    --tw-bg-opacity: 1;

    background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity, 1)))
}

.after\:duration-200::after {

    content: var(--tw-content);

    transition-duration: 200ms
}

.hover\:border-base-100:hover {

    --tw-border-opacity: 1;

    border-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-border-opacity, 1)))
}

.hover\:bg-base-100:hover {

    --tw-bg-opacity: 1;

    background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity, 1)))
}

.hover\:bg-gray-900:hover {

    --tw-bg-opacity: 1;

    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1))
}

.hover\:bg-primary:hover {

    --tw-bg-opacity: 1;

    background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity, 1)))
}

.hover\:text-base-100:hover {

    --tw-text-opacity: 1;

    color: var(--fallback-b1,oklch(var(--b1)/var(--tw-text-opacity, 1)))
}

.hover\:text-primary:hover {

    --tw-text-opacity: 1;

    color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity, 1)))
}

.hover\:ease-in:hover {

    transition-timing-function: cubic-bezier(0.4, 0, 1, 1)
}

.hover\:after\:w-full:hover::after {

    content: var(--tw-content);

    width: 100%
}

.focus\:outline-none:focus {

    outline: 2px solid transparent;

    outline-offset: 2px
}

.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-primary:focus {

    --tw-ring-opacity: 1;

    --tw-ring-color: var(--fallback-p,oklch(var(--p)/var(--tw-ring-opacity, 1)))
}

.focus\:ring-opacity-50:focus {

    --tw-ring-opacity: 0.5
}

.focus\:after\:w-full:focus::after {

    content: var(--tw-content);

    width: 100%
}

@media (min-width: 640px) {

    .sm\:block {

        display: block
    }

    .sm\:w-72 {

        width: 18rem
    }

    .sm\:grid-cols-2 {

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

@media (min-width: 768px) {

    .md\:mx-auto {

        margin-left: auto;

        margin-right: auto
    }

    .md\:mb-12 {

        margin-bottom: 3rem
    }

    .md\:mb-6 {

        margin-bottom: 1.5rem
    }

    .md\:mb-8 {

        margin-bottom: 2rem
    }

    .md\:ml-6 {

        margin-left: 1.5rem
    }

    .md\:mt-12 {

        margin-top: 3rem
    }

    .md\:block {

        display: block
    }

    .md\:inline-block {

        display: inline-block
    }

    .md\:inline {

        display: inline
    }

    .md\:flex {

        display: flex
    }

    .md\:hidden {

        display: none
    }

    .md\:h-20 {

        height: 5rem
    }

    .md\:h-\[40px\] {

        height: 40px
    }

    .md\:w-1\/2 {

        width: 50%
    }

    .md\:w-20 {

        width: 5rem
    }

    .md\:w-24 {

        width: 6rem
    }

    .md\:w-72 {

        width: 18rem
    }

    .md\:w-80 {

        width: 20rem
    }

    .md\:max-w-\[1100px\] {

        max-width: 1100px
    }

    .md\:grid-cols-2 {

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

    .md\:grid-cols-3 {

        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .md\:grid-cols-5 {

        grid-template-columns: repeat(5, minmax(0, 1fr))
    }

    .md\:flex-row {

        flex-direction: row
    }

    .md\:gap-6 {

        gap: 1.5rem
    }

    .md\:rounded-full {

        border-radius: 9999px
    }

    .md\:border-4 {

        border-width: 4px
    }

    .md\:border-primary {

        --tw-border-opacity: 1;

        border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity, 1)))
    }

    .md\:bg-ccc-grey-light {

        --tw-bg-opacity: 1;

        background-color: rgb(237 234 229 / var(--tw-bg-opacity, 1))
    }

    .md\:p-2 {

        padding: 0.5rem
    }

    .md\:pt-6 {

        padding-top: 1.5rem
    }

    .md\:text-left {

        text-align: left
    }

    .md\:text-center {

        text-align: center
    }

    .md\:text-3xl {

        font-size: 1.875rem;

        line-height: 2.25rem
    }

    .md\:text-\[32px\] {

        font-size: 32px
    }

    .md\:text-\[64px\] {

        font-size: 64px
    }

    .md\:leading-\[76\.8px\] {

        line-height: 76.8px
    }

    .md\:text-black {

        --tw-text-opacity: 1;

        color: rgb(0 0 0 / var(--tw-text-opacity, 1))
    }
}

@media (min-width: 1024px) {

    .lg\:mx-28 {

        margin-left: 7rem;

        margin-right: 7rem
    }

    .lg\:mb-12 {

        margin-bottom: 3rem
    }

    .lg\:mb-24 {

        margin-bottom: 6rem
    }

    .lg\:mt-12 {

        margin-top: 3rem
    }

    .lg\:inline {

        display: inline
    }

    .lg\:flex {

        display: flex
    }

    .lg\:hidden {

        display: none
    }

    .lg\:w-96 {

        width: 24rem
    }

    .lg\:min-w-32 {

        min-width: 8rem
    }

    .lg\:grid-cols-3 {

        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .lg\:grid-cols-4 {

        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .lg\:pr-24 {

        padding-right: 6rem
    }
}

@media (min-width: 1280px) {

    .xl\:block {

        display: block
    }

    .xl\:w-96 {

        width: 24rem
    }

    .xl\:grid-cols-4 {

        grid-template-columns: repeat(4, minmax(0, 1fr))
    }
}

*, ::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:  ;

    --tw-contain-size:  ;

    --tw-contain-layout:  ;

    --tw-contain-paint:  ;

    --tw-contain-style:  
}

::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:  ;

    --tw-contain-size:  ;

    --tw-contain-layout:  ;

    --tw-contain-paint:  ;

    --tw-contain-style:  
}

/*
! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::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
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: Ranade-Thin, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

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

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

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

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

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

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

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

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

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

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

:root,
[data-theme]{

    background-color: var(--fallback-b1,oklch(var(--b1)/1));

    color: var(--fallback-bc,oklch(var(--bc)/1))
}

@supports not (color: oklch(0% 0 0)){

    :root{

        color-scheme: light;

        --fallback-p: #491eff;

        --fallback-pc: #d4dbff;

        --fallback-s: #ff41c7;

        --fallback-sc: #fff9fc;

        --fallback-a: #00cfbd;

        --fallback-ac: #00100d;

        --fallback-n: #2b3440;

        --fallback-nc: #d7dde4;

        --fallback-b1: #ffffff;

        --fallback-b2: #e5e6e6;

        --fallback-b3: #e5e6e6;

        --fallback-bc: #1f2937;

        --fallback-in: #00b3f0;

        --fallback-inc: #000000;

        --fallback-su: #00ca92;

        --fallback-suc: #000000;

        --fallback-wa: #ffc22d;

        --fallback-wac: #000000;

        --fallback-er: #ff6f70;

        --fallback-erc: #000000
    }

    @media (prefers-color-scheme: dark){

        :root{

            color-scheme: dark;

            --fallback-p: #7582ff;

            --fallback-pc: #050617;

            --fallback-s: #ff71cf;

            --fallback-sc: #190211;

            --fallback-a: #00c7b5;

            --fallback-ac: #000e0c;

            --fallback-n: #2a323c;

            --fallback-nc: #a6adbb;

            --fallback-b1: #1d232a;

            --fallback-b2: #191e24;

            --fallback-b3: #15191e;

            --fallback-bc: #a6adbb;

            --fallback-in: #00b3f0;

            --fallback-inc: #000000;

            --fallback-su: #00ca92;

            --fallback-suc: #000000;

            --fallback-wa: #ffc22d;

            --fallback-wac: #000000;

            --fallback-er: #ff6f70;

            --fallback-erc: #000000
        }
    }
}

html{

    -webkit-tap-highlight-color: transparent
}

*{

    scrollbar-color: color-mix(in oklch, currentColor 35%, transparent) transparent
}

*:hover{

    scrollbar-color: color-mix(in oklch, currentColor 60%, transparent) transparent
}

:root{

    --b1: 99.1069% 0 0;

    --bc: 19.8214% 0 0;

    --ac: 91.1794% 0 0;

    --nc: 80% 0 0;

    --inc: 12.0045% 0.020767 184.703992;

    --suc: 18.3899% 0.007021 117.652362;

    --wac: 18.3899% 0.007021 117.652362;

    --erc: 12.5591% 0.051537 29.233885;

    --rounded-box: 1rem;

    --rounded-btn: 0.5rem;

    --rounded-badge: 1.9rem;

    --animation-btn: 0.25s;

    --animation-input: .2s;

    --btn-focus-scale: 0.95;

    --border-btn: 1px;

    --tab-border: 1px;

    --tab-radius: 0.5rem;

    --b2: 91.9496% 0.035107 117.652362;

    --b3: 100% 0 0;

    --p: 34.3346% 0.082806 156.30041;

    --a: 55.8969% 0 0;

    --n: 0% 0 0;

    --pc: 34.3346% 0.082806 156.30041;

    --sc: 46.5257% 0.095384 166.971705;

    --in: 60.0224% 0.103837 184.703992;

    --su: 91.9496% 0.035107 117.652362;

    --wa: 91.9496% 0.035107 117.652362;

    --er: 62.7955% 0.257683 29.233885
}

[data-theme=ccclight]{

    --b1: 99.1069% 0 0;

    --bc: 19.8214% 0 0;

    --ac: 91.1794% 0 0;

    --nc: 80% 0 0;

    --inc: 12.0045% 0.020767 184.703992;

    --suc: 18.3899% 0.007021 117.652362;

    --wac: 18.3899% 0.007021 117.652362;

    --erc: 12.5591% 0.051537 29.233885;

    --rounded-box: 1rem;

    --rounded-btn: 0.5rem;

    --rounded-badge: 1.9rem;

    --animation-btn: 0.25s;

    --animation-input: .2s;

    --btn-focus-scale: 0.95;

    --border-btn: 1px;

    --tab-border: 1px;

    --tab-radius: 0.5rem;

    --b2: 91.9496% 0.035107 117.652362;

    --b3: 100% 0 0;

    --p: 34.3346% 0.082806 156.30041;

    --a: 55.8969% 0 0;

    --n: 0% 0 0;

    --pc: 34.3346% 0.082806 156.30041;

    --sc: 46.5257% 0.095384 166.971705;

    --in: 60.0224% 0.103837 184.703992;

    --su: 91.9496% 0.035107 117.652362;

    --wa: 91.9496% 0.035107 117.652362;

    --er: 62.7955% 0.257683 29.233885
}

[data-theme=cccdark]{

    --b1: 25.602% 0.064338 147.048104;

    --bc: 85.1204% 0.012868 147.048104;

    --ac: 18.7596% 0.001488 80.72066;

    --nc: 20% 0 0;

    --inc: 85.5899% 0.00737 260.030984;

    --suc: 84.1536% 0.007965 265.754874;

    --wac: 86.1294% 0.01243 164.300005;

    --erc: 12.5591% 0.051537 29.233885;

    --rounded-box: 1rem;

    --rounded-btn: 0.5rem;

    --rounded-badge: 1.9rem;

    --animation-btn: 0.25s;

    --animation-input: .2s;

    --btn-focus-scale: 0.95;

    --border-btn: 1px;

    --tab-border: 1px;

    --tab-radius: 0.5rem;

    --b2: 23.9292% 0 0;

    --b3: 28.5017% 0 0;

    --p: 90.9364% 0.193095 107.769142;

    --s: 100% 0 0;

    --a: 93.7982% 0.007441 80.72066;

    --n: 100% 0 0;

    --pc: 90.9364% 0.193095 107.769142;

    --sc: 0% 0 0;

    --in: 27.9495% 0.036848 260.030984;

    --su: 20.7682% 0.039824 265.754874;

    --wa: 30.647% 0.06215 164.300005;

    --er: 62.7955% 0.257683 29.233885
}

h1,
  h2,
  h3,
  h4 {
    line-height: 1.2;
    color: var(--clr-gf-alt);
  }

h1 {
    font-size: 4rem;
  }

h2 {
    font-size: 2rem;
  }

h3 {
    font-size: 1.5rem;
  }

h4 {
    font-size: 1.3rem;
  }

/*
  h1 {
    font-family: "Anton", sans-serif;
    font-size: 2rem;
    font-weight: 700;
    font-variant: small-caps;
    padding-top: 2rem;
    padding-bottom: 0.5rem;
    @apply text-primary;
  }

  h2 {
    font-family: "Anton", sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    font-variant: small-caps;
    padding-top: 1.6rem;
    padding-bottom: 0.5rem;
    @apply text-primary;
  }

  h3 {
    font-family: "Anton", sans-serif;
    font-size: 1.6rem;
    font-weight: 500;
    font-variant: small-caps;
    padding-top: 1rem;
    padding-bottom: 0.5rem;
    @apply text-primary;
  }

  h4 {
    font-family: "Anton", sans-serif;
    font-size: 1.2rem;
    font-weight: 500;
    font-variant: small-caps;
    padding-top: 1rem;
    padding-bottom: 0.5rem;
    @apply text-primary;
  }

  h5 {
    font-family: "Anton", sans-serif;
    font-size: 1rem;
    font-weight: 500;
    font-variant: small-caps;
    padding-top: 1rem;
    padding-bottom: 0.5rem;
    @apply text-primary;
  }
    */

h1 {
    font-family: "Anton", sans-serif;
    font-size: 4rem;
    font-weight: 700;
    font-variant: small-caps;
    padding-top: 2rem;
    padding-bottom: 0.5rem;

    --tw-text-opacity: 1;

    color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity, 1)));
  }

h2 {
    font-family: "Anton", sans-serif;
    font-size: 3.2rem;
    font-weight: 700;
    font-variant: small-caps;
    padding-top: 1.2rem;
    padding-bottom: 0.5rem;

    --tw-text-opacity: 1;

    color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity, 1)));
  }

h3 {
    font-family: "Anton", sans-serif;
    font-size: 1.6rem;
    font-weight: 500;
    font-variant: small-caps;
    padding-top: 1rem;
    padding-bottom: 0.5rem;

    --tw-text-opacity: 1;

    color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity, 1)));
  }

h4 {
    font-family: "Anton", sans-serif;
    font-size: 1.2rem;
    font-weight: 500;
    font-variant: small-caps;
    padding-top: 1rem;
    padding-bottom: 0.5rem;

    --tw-text-opacity: 1;

    color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity, 1)));
  }

h5 {
    font-family: "Anton", sans-serif;
    font-size: 1rem;
    font-weight: 500;
    font-variant: small-caps;
    padding-top: 1rem;
    padding-bottom: 0.5rem;

    --tw-text-opacity: 1;

    color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity, 1)));
  }

.container{

    width: 100%
}

@media (min-width: 640px){

    .container{

        max-width: 640px
    }
}

@media (min-width: 768px){

    .container{

        max-width: 768px
    }
}

@media (min-width: 1024px){

    .container{

        max-width: 1024px
    }
}

@media (min-width: 1280px){

    .container{

        max-width: 1280px
    }
}

@media (min-width: 1536px){

    .container{

        max-width: 1536px
    }
}

@media (min-width: 2000px){

    .container{

        max-width: 2000px
    }
}

.alert{

    display: grid;

    width: 100%;

    grid-auto-flow: row;

    align-content: flex-start;

    align-items: center;

    justify-items: center;

    gap: 1rem;

    text-align: center;

    border-radius: var(--rounded-box, 1rem);

    border-width: 1px;

    --tw-border-opacity: 1;

    border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));

    padding: 1rem;

    --tw-text-opacity: 1;

    color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));

    --alert-bg: var(--fallback-b2,oklch(var(--b2)/1));

    --alert-bg-mix: var(--fallback-b1,oklch(var(--b1)/1));

    background-color: var(--alert-bg)
}

@media (min-width: 640px){

    .alert{

        grid-auto-flow: column;

        grid-template-columns: auto minmax(auto,1fr);

        justify-items: start;

        text-align: start
    }
}

.avatar{

    position: relative;

    display: inline-flex
}

.avatar > div{

    display: block;

    aspect-ratio: 1 / 1;

    overflow: hidden
}

.avatar img{

    height: 100%;

    width: 100%;

    -o-object-fit: cover;

       object-fit: cover
}

.avatar.placeholder > div{

    display: flex;

    align-items: center;

    justify-content: center
}

@media (hover:hover){

    .label a:hover{

        --tw-text-opacity: 1;

        color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)))
    }

    .menu li > *:not(ul, .menu-title, details, .btn):active,
.menu li > *:not(ul, .menu-title, details, .btn).active,
.menu li > details > summary:active{

        --tw-bg-opacity: 1;

        background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));

        --tw-text-opacity: 1;

        color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity)))
    }

    .tab:hover{

        --tw-text-opacity: 1
    }

    .table tr.hover:hover,
  .table tr.hover:nth-child(even):hover{

        --tw-bg-opacity: 1;

        background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)))
    }

    .table-zebra tr.hover:hover,
  .table-zebra tr.hover:nth-child(even):hover{

        --tw-bg-opacity: 1;

        background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)))
    }
}

.btn{

    display: inline-flex;

    height: 3rem;

    min-height: 3rem;

    flex-shrink: 0;

    cursor: pointer;

    -webkit-user-select: none;

       -moz-user-select: none;

            user-select: none;

    flex-wrap: wrap;

    align-items: center;

    justify-content: center;

    border-radius: var(--rounded-btn, 0.5rem);

    border-color: transparent;

    border-color: oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity));

    padding-left: 1rem;

    padding-right: 1rem;

    text-align: center;

    font-size: 0.875rem;

    line-height: 1em;

    gap: 0.5rem;

    font-weight: 600;

    text-decoration-line: none;

    transition-duration: 200ms;

    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);

    border-width: var(--border-btn, 1px);

    transition-property: color, background-color, border-color, opacity, box-shadow, transform;

    --tw-text-opacity: 1;

    color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));

    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);

    --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);

    outline-color: var(--fallback-bc,oklch(var(--bc)/1));

    background-color: oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity));

    --tw-bg-opacity: 1;

    --tw-border-opacity: 1
}

.btn-disabled,
  .btn[disabled],
  .btn:disabled{

    pointer-events: none
}

.btn-circle{

    height: 3rem;

    width: 3rem;

    border-radius: 9999px;

    padding: 0px
}

:where(.btn:is(input[type="checkbox"])),
:where(.btn:is(input[type="radio"])){

    width: auto;

    -webkit-appearance: none;

       -moz-appearance: none;

            appearance: none
}

.btn:is(input[type="checkbox"]):after,
.btn:is(input[type="radio"]):after{

    --tw-content: attr(aria-label);

    content: var(--tw-content)
}

.card{

    position: relative;

    display: flex;

    flex-direction: column;

    border-radius: var(--rounded-box, 1rem)
}

.card:focus{

    outline: 2px solid transparent;

    outline-offset: 2px
}

.card figure{

    display: flex;

    align-items: center;

    justify-content: center
}

.card.image-full{

    display: grid
}

.card.image-full:before{

    position: relative;

    content: "";

    z-index: 10;

    border-radius: var(--rounded-box, 1rem);

    --tw-bg-opacity: 1;

    background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));

    opacity: 0.75
}

.card.image-full:before,
    .card.image-full > *{

    grid-column-start: 1;

    grid-row-start: 1
}

.card.image-full > figure img{

    height: 100%;

    -o-object-fit: cover;

       object-fit: cover
}

.card.image-full > .card-body{

    position: relative;

    z-index: 20;

    --tw-text-opacity: 1;

    color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity)))
}

.checkbox{

    flex-shrink: 0;

    --chkbg: var(--fallback-bc,oklch(var(--bc)/1));

    --chkfg: var(--fallback-b1,oklch(var(--b1)/1));

    height: 1.5rem;

    width: 1.5rem;

    cursor: pointer;

    -webkit-appearance: none;

       -moz-appearance: none;

            appearance: none;

    border-radius: var(--rounded-btn, 0.5rem);

    border-width: 1px;

    border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));

    --tw-border-opacity: 0.2
}

.collapse:not(td):not(tr):not(colgroup){

    visibility: visible
}

.collapse{

    position: relative;

    display: grid;

    overflow: hidden;

    grid-template-rows: max-content 0fr;

    transition: grid-template-rows 0.2s;

    width: 100%;

    border-radius: var(--rounded-box, 1rem)
}

.collapse-title,
.collapse > input[type="checkbox"],
.collapse > input[type="radio"],
.collapse-content{

    grid-column-start: 1;

    grid-row-start: 1
}

.collapse > input[type="checkbox"],
.collapse > input[type="radio"]{

    -webkit-appearance: none;

       -moz-appearance: none;

            appearance: none;

    opacity: 0
}

:where(.collapse > input[type="checkbox"]),
:where(.collapse > input[type="radio"]){

    height: 100%;

    width: 100%;

    z-index: 1
}

.collapse-content{

    visibility: hidden;

    grid-column-start: 1;

    grid-row-start: 2;

    min-height: 0px;

    transition: visibility 0.2s;

    transition: padding 0.2s ease-out,
    background-color 0.2s ease-out;

    padding-left: 1rem;

    padding-right: 1rem;

    cursor: unset
}

.collapse[open],
.collapse-open,
.collapse:focus:not(.collapse-close){

    grid-template-rows: max-content 1fr
}

.collapse:not(.collapse-close):has(> input[type="checkbox"]:checked),
.collapse:not(.collapse-close):has(> input[type="radio"]:checked){

    grid-template-rows: max-content 1fr
}

.collapse[open] > .collapse-content,
.collapse-open > .collapse-content,
.collapse:focus:not(.collapse-close) > .collapse-content,
.collapse:not(.collapse-close) > input[type="checkbox"]:checked ~ .collapse-content,
.collapse:not(.collapse-close) > input[type="radio"]:checked ~ .collapse-content{

    visibility: visible;

    min-height: -moz-fit-content;

    min-height: fit-content
}

.drawer{

    position: relative;

    display: grid;

    grid-auto-columns: max-content auto;

    width: 100%
}

.drawer-content{

    grid-column-start: 2;

    grid-row-start: 1;

    min-width: 0px
}

.drawer-side{

    pointer-events: none;

    position: fixed;

    inset-inline-start: 0px;

    top: 0px;

    grid-column-start: 1;

    grid-row-start: 1;

    display: grid;

    width: 100%;

    grid-template-columns: repeat(1, minmax(0, 1fr));

    grid-template-rows: repeat(1, minmax(0, 1fr));

    align-items: flex-start;

    justify-items: start;

    overflow-x: hidden;

    overflow-y: hidden;

    overscroll-behavior: contain;

    height: 100vh;

    height: 100dvh
}

.drawer-side > .drawer-overlay{

    position: sticky;

    top: 0px;

    place-self: stretch;

    cursor: pointer;

    background-color: transparent;

    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);

    transition-duration: 200ms
}

.drawer-side > *{

    grid-column-start: 1;

    grid-row-start: 1
}

.drawer-side > *:not(.drawer-overlay){

    transition-property: transform;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);

    transition-duration: 300ms;

    will-change: transform;

    transform: translateX(-100%)
}

[dir="rtl"] .drawer-side > *:not(.drawer-overlay){

    transform: translateX(100%)
}

.drawer-toggle{

    position: fixed;

    height: 0px;

    width: 0px;

    -webkit-appearance: none;

       -moz-appearance: none;

            appearance: none;

    opacity: 0
}

.drawer-toggle:checked ~ .drawer-side{

    pointer-events: auto;

    visibility: visible;

    overflow-y: auto
}

.drawer-toggle:checked ~ .drawer-side > *:not(.drawer-overlay){

    transform: translateX(0%)
}

.drawer-end > .drawer-toggle ~ .drawer-content{

    grid-column-start: 1
}

.drawer-end > .drawer-toggle ~ .drawer-side{

    grid-column-start: 2;

    justify-items: end
}

.drawer-end > .drawer-toggle ~ .drawer-side > *:not(.drawer-overlay){

    transform: translateX(100%)
}

[dir="rtl"] .drawer-end > .drawer-toggle ~ .drawer-side > *:not(.drawer-overlay){

    transform: translateX(-100%)
}

.drawer-end > .drawer-toggle:checked ~ .drawer-side > *:not(.drawer-overlay){

    transform: translateX(0%)
}

@media (hover: hover){

    .btn:hover{

        --tw-border-opacity: 1;

        border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity)));

        --tw-bg-opacity: 1;

        background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)))
    }

    @supports (color: color-mix(in oklab, black, black)){

        .btn:hover{

            background-color: color-mix(
            in oklab,
            oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%,
            black
          );

            border-color: color-mix(
            in oklab,
            oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%,
            black
          )
        }
    }

    @supports not (color: oklch(0% 0 0)){

        .btn:hover{

            background-color: var(--btn-color, var(--fallback-b2));

            border-color: var(--btn-color, var(--fallback-b2))
        }
    }

    .btn.glass:hover{

        --glass-opacity: 25%;

        --glass-border-opacity: 15%
    }

    .btn-ghost:hover{

        border-color: transparent
    }

    @supports (color: oklch(0% 0 0)){

        .btn-ghost:hover{

            background-color: var(--fallback-bc,oklch(var(--bc)/0.2))
        }
    }

    .btn-disabled:hover,
    .btn[disabled]:hover,
    .btn:disabled:hover{

        --tw-border-opacity: 0;

        background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));

        --tw-bg-opacity: 0.2;

        color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));

        --tw-text-opacity: 0.2
    }

    @supports (color: color-mix(in oklab, black, black)){

        .btn:is(input[type="checkbox"]:checked):hover, .btn:is(input[type="radio"]:checked):hover{

            background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);

            border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black)
        }
    }

    :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(.active, .btn):hover, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.active, .btn):hover{

        cursor: pointer;

        outline: 2px solid transparent;

        outline-offset: 2px
    }

    @supports (color: oklch(0% 0 0)){

        :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(.active, .btn):hover, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.active, .btn):hover{

            background-color: var(--fallback-bc,oklch(var(--bc)/0.1))
        }
    }

    .tab[disabled],
    .tab[disabled]:hover{

        cursor: not-allowed;

        color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));

        --tw-text-opacity: 0.2
    }
}

.footer{

    display: grid;

    width: 100%;

    grid-auto-flow: row;

    place-items: start;

    -moz-column-gap: 1rem;

         column-gap: 1rem;

    row-gap: 2.5rem;

    font-size: 0.875rem;

    line-height: 1.25rem
}

.footer > *{

    display: grid;

    place-items: start;

    gap: 0.5rem
}

.footer-center{

    place-items: center;

    text-align: center
}

.footer-center > *{

    place-items: center
}

@media (min-width: 48rem){

    .footer{

        grid-auto-flow: column
    }

    .footer-center{

        grid-auto-flow: row dense
    }
}

.label{

    display: flex;

    -webkit-user-select: none;

       -moz-user-select: none;

            user-select: none;

    align-items: center;

    justify-content: space-between;

    padding-left: 0.25rem;

    padding-right: 0.25rem;

    padding-top: 0.5rem;

    padding-bottom: 0.5rem
}

.hero{

    display: grid;

    width: 100%;

    place-items: center;

    background-size: cover;

    background-position: center
}

.hero > *{

    grid-column-start: 1;

    grid-row-start: 1
}

.input{

    flex-shrink: 1;

    -webkit-appearance: none;

       -moz-appearance: none;

            appearance: none;

    height: 3rem;

    padding-left: 1rem;

    padding-right: 1rem;

    font-size: 1rem;

    line-height: 2;

    line-height: 1.5rem;

    border-radius: var(--rounded-btn, 0.5rem);

    border-width: 1px;

    border-color: transparent;

    --tw-bg-opacity: 1;

    background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)))
}

.input[type="number"]::-webkit-inner-spin-button,
.input-md[type="number"]::-webkit-inner-spin-button{

    margin-top: -1rem;

    margin-bottom: -1rem;

    margin-inline-end: -1rem
}

.join{

    display: inline-flex;

    align-items: stretch;

    border-radius: var(--rounded-btn, 0.5rem)
}

.join :where(.join-item){

    border-start-end-radius: 0;

    border-end-end-radius: 0;

    border-end-start-radius: 0;

    border-start-start-radius: 0
}

.join .join-item:not(:first-child):not(:last-child),
  .join *:not(:first-child):not(:last-child) .join-item{

    border-start-end-radius: 0;

    border-end-end-radius: 0;

    border-end-start-radius: 0;

    border-start-start-radius: 0
}

.join .join-item:first-child:not(:last-child),
  .join *:first-child:not(:last-child) .join-item{

    border-start-end-radius: 0;

    border-end-end-radius: 0
}

.join .dropdown .join-item:first-child:not(:last-child),
  .join *:first-child:not(:last-child) .dropdown .join-item{

    border-start-end-radius: inherit;

    border-end-end-radius: inherit
}

.join :where(.join-item:first-child:not(:last-child)),
  .join :where(*:first-child:not(:last-child) .join-item){

    border-end-start-radius: inherit;

    border-start-start-radius: inherit
}

.join .join-item:last-child:not(:first-child),
  .join *:last-child:not(:first-child) .join-item{

    border-end-start-radius: 0;

    border-start-start-radius: 0
}

.join :where(.join-item:last-child:not(:first-child)),
  .join :where(*:last-child:not(:first-child) .join-item){

    border-start-end-radius: inherit;

    border-end-end-radius: inherit
}

@supports not selector(:has(*)){

    :where(.join *){

        border-radius: inherit
    }
}

@supports selector(:has(*)){

    :where(.join *:has(.join-item)){

        border-radius: inherit
    }
}

.link{

    cursor: pointer;

    text-decoration-line: underline
}

.mask{

    -webkit-mask-size: contain;

            mask-size: contain;

    -webkit-mask-repeat: no-repeat;

            mask-repeat: no-repeat;

    -webkit-mask-position: center;

            mask-position: center
}

.menu{

    display: flex;

    flex-direction: column;

    flex-wrap: wrap;

    font-size: 0.875rem;

    line-height: 1.25rem;

    padding: 0.5rem
}

.menu :where(li ul){

    position: relative;

    white-space: nowrap;

    margin-inline-start: 1rem;

    padding-inline-start: 0.5rem
}

.menu :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)), .menu :where(li:not(.menu-title) > details > summary:not(.menu-title)){

    display: grid;

    grid-auto-flow: column;

    align-content: flex-start;

    align-items: center;

    gap: 0.5rem;

    grid-auto-columns: minmax(auto, max-content) auto max-content;

    -webkit-user-select: none;

       -moz-user-select: none;

            user-select: none
}

.menu li.disabled{

    cursor: not-allowed;

    -webkit-user-select: none;

       -moz-user-select: none;

            user-select: none;

    color: var(--fallback-bc,oklch(var(--bc)/0.3))
}

.menu :where(li > .menu-dropdown:not(.menu-dropdown-show)){

    display: none
}

:where(.menu li){

    position: relative;

    display: flex;

    flex-shrink: 0;

    flex-direction: column;

    flex-wrap: wrap;

    align-items: stretch
}

:where(.menu li) .badge{

    justify-self: end
}

.modal{

    pointer-events: none;

    position: fixed;

    inset: 0px;

    margin: 0px;

    display: grid;

    height: 100%;

    max-height: none;

    width: 100%;

    max-width: none;

    justify-items: center;

    padding: 0px;

    opacity: 0;

    overscroll-behavior: contain;

    z-index: 999;

    background-color: transparent;

    color: inherit;

    transition-duration: 200ms;

    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);

    transition-property: transform, opacity, visibility;

    overflow-y: hidden
}

:where(.modal){

    align-items: center
}

.modal-box{

    max-height: calc(100vh - 5em);

    grid-column-start: 1;

    grid-row-start: 1;

    width: 91.666667%;

    max-width: 32rem;

    --tw-scale-x: .9;

    --tw-scale-y: .9;

    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));

    border-bottom-right-radius: var(--rounded-box, 1rem);

    border-bottom-left-radius: var(--rounded-box, 1rem);

    border-top-left-radius: var(--rounded-box, 1rem);

    border-top-right-radius: var(--rounded-box, 1rem);

    --tw-bg-opacity: 1;

    background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));

    padding: 1.5rem;

    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);

    transition-duration: 200ms;

    box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;

    overflow-y: auto;

    overscroll-behavior: contain
}

.modal-open,
.modal:target,
.modal-toggle:checked + .modal,
.modal[open]{

    pointer-events: auto;

    visibility: visible;

    opacity: 1
}

:root:has(:is(.modal-open, .modal:target, .modal-toggle:checked + .modal, .modal[open])){

    overflow: hidden;

    scrollbar-gutter: stable
}

.navbar{

    display: flex;

    align-items: center;

    padding: var(--navbar-padding, 0.5rem);

    min-height: 4rem;

    width: 100%
}

:where(.navbar > *:not(script, style)){

    display: inline-flex;

    align-items: center
}

.navbar-start{

    width: 50%;

    justify-content: flex-start
}

.navbar-end{

    width: 50%;

    justify-content: flex-end
}

.radio{

    flex-shrink: 0;

    --chkbg: var(--bc);

    height: 1.5rem;

    width: 1.5rem;

    cursor: pointer;

    -webkit-appearance: none;

       -moz-appearance: none;

            appearance: none;

    border-radius: 9999px;

    border-width: 1px;

    border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));

    --tw-border-opacity: 0.2
}

.select{

    display: inline-flex;

    cursor: pointer;

    -webkit-user-select: none;

       -moz-user-select: none;

            user-select: none;

    -webkit-appearance: none;

       -moz-appearance: none;

            appearance: none;

    height: 3rem;

    min-height: 3rem;

    padding-inline-start: 1rem;

    padding-inline-end: 2.5rem;

    font-size: 0.875rem;

    line-height: 1.25rem;

    line-height: 2;

    border-radius: var(--rounded-btn, 0.5rem);

    border-width: 1px;

    border-color: transparent;

    --tw-bg-opacity: 1;

    background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));

    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);

    background-position: calc(100% - 20px) calc(1px + 50%),
    calc(100% - 16.1px) calc(1px + 50%);

    background-size: 4px 4px,
    4px 4px;

    background-repeat: no-repeat
}

.select[multiple]{

    height: auto
}

.stats{

    display: inline-grid;

    border-radius: var(--rounded-box, 1rem);

    --tw-bg-opacity: 1;

    background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));

    --tw-text-opacity: 1;

    color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)))
}

:where(.stats){

    grid-auto-flow: column;

    overflow-x: auto
}

.stat{

    display: inline-grid;

    width: 100%;

    grid-template-columns: repeat(1, 1fr);

    -moz-column-gap: 1rem;

         column-gap: 1rem;

    border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));

    --tw-border-opacity: 0.1;

    padding-left: 1.5rem;

    padding-right: 1.5rem;

    padding-top: 1rem;

    padding-bottom: 1rem
}

.stat-figure{

    grid-column-start: 2;

    grid-row: span 3 / span 3;

    grid-row-start: 1;

    place-self: center;

    justify-self: end
}

.stat-title{

    grid-column-start: 1;

    white-space: nowrap;

    color: var(--fallback-bc,oklch(var(--bc)/0.6))
}

.stat-value{

    grid-column-start: 1;

    white-space: nowrap;

    font-size: 2.25rem;

    line-height: 2.5rem;

    font-weight: 800
}

.swap{

    position: relative;

    display: inline-grid;

    -webkit-user-select: none;

       -moz-user-select: none;

            user-select: none;

    place-content: center;

    cursor: pointer
}

.swap > *{

    grid-column-start: 1;

    grid-row-start: 1;

    transition-duration: 300ms;

    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);

    transition-property: transform, opacity
}

.swap input{

    -webkit-appearance: none;

       -moz-appearance: none;

            appearance: none
}

.swap .swap-on,
.swap .swap-indeterminate,
.swap input:indeterminate ~ .swap-on{

    opacity: 0
}

.swap input:checked ~ .swap-off,
.swap-active .swap-off,
.swap input:indeterminate ~ .swap-off{

    opacity: 0
}

.swap input:checked ~ .swap-on,
.swap-active .swap-on,
.swap input:indeterminate ~ .swap-indeterminate{

    opacity: 1
}

.tabs{

    display: grid;

    align-items: flex-end
}

.tabs-lifted:has(.tab-content[class^="rounded-"])
    .tab:first-child:not(:is(.tab-active, [aria-selected="true"])), .tabs-lifted:has(.tab-content[class*=" rounded-"])
    .tab:first-child:not(:is(.tab-active, [aria-selected="true"])){

    border-bottom-color: transparent
}

.tab{

    position: relative;

    grid-row-start: 1;

    display: inline-flex;

    height: 2rem;

    cursor: pointer;

    -webkit-user-select: none;

       -moz-user-select: none;

            user-select: none;

    -webkit-appearance: none;

       -moz-appearance: none;

            appearance: none;

    flex-wrap: wrap;

    align-items: center;

    justify-content: center;

    text-align: center;

    font-size: 0.875rem;

    line-height: 1.25rem;

    line-height: 2;

    --tab-padding: 1rem;

    --tw-text-opacity: 0.5;

    --tab-color: var(--fallback-bc,oklch(var(--bc)/1));

    --tab-bg: var(--fallback-b1,oklch(var(--b1)/1));

    --tab-border-color: var(--fallback-b3,oklch(var(--b3)/1));

    color: var(--tab-color);

    padding-inline-start: var(--tab-padding, 1rem);

    padding-inline-end: var(--tab-padding, 1rem)
}

.tab:is(input[type="radio"]){

    width: auto;

    border-bottom-right-radius: 0px;

    border-bottom-left-radius: 0px
}

.tab:is(input[type="radio"]):after{

    --tw-content: attr(aria-label);

    content: var(--tw-content)
}

.tab:not(input):empty{

    cursor: default;

    grid-column-start: span 9999
}

.tab-content{

    grid-column-start: 1;

    grid-column-end: span 9999;

    grid-row-start: 2;

    margin-top: calc(var(--tab-border) * -1);

    display: none;

    border-color: transparent;

    border-width: var(--tab-border, 0)
}

:checked + .tab-content:nth-child(2),
  :is(.tab-active, [aria-selected="true"]) + .tab-content:nth-child(2){

    border-start-start-radius: 0px
}

input.tab:checked + .tab-content,
:is(.tab-active, [aria-selected="true"]) + .tab-content{

    display: block
}

.table{

    position: relative;

    width: 100%;

    border-radius: var(--rounded-box, 1rem);

    text-align: left;

    font-size: 0.875rem;

    line-height: 1.25rem
}

.table :where(.table-pin-rows thead tr){

    position: sticky;

    top: 0px;

    z-index: 1;

    --tw-bg-opacity: 1;

    background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)))
}

.table :where(.table-pin-rows tfoot tr){

    position: sticky;

    bottom: 0px;

    z-index: 1;

    --tw-bg-opacity: 1;

    background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)))
}

.table :where(.table-pin-cols tr th){

    position: sticky;

    left: 0px;

    right: 0px;

    --tw-bg-opacity: 1;

    background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)))
}

.toggle{

    flex-shrink: 0;

    --tglbg: var(--fallback-b1,oklch(var(--b1)/1));

    --handleoffset: 1.5rem;

    --handleoffsetcalculator: calc(var(--handleoffset) * -1);

    --togglehandleborder: 0 0;

    height: 1.5rem;

    width: 3rem;

    cursor: pointer;

    -webkit-appearance: none;

       -moz-appearance: none;

            appearance: none;

    border-radius: var(--rounded-badge, 1.9rem);

    border-width: 1px;

    border-color: currentColor;

    background-color: currentColor;

    color: var(--fallback-bc,oklch(var(--bc)/0.5));

    transition: background,
    box-shadow var(--animation-input, 0.2s) ease-out;

    box-shadow: var(--handleoffsetcalculator) 0 0 2px var(--tglbg) inset,
    0 0 0 2px var(--tglbg) inset,
    var(--togglehandleborder)
}

.avatar-group :where(.avatar){

    overflow: hidden;

    border-radius: 9999px;

    border-width: 4px;

    --tw-border-opacity: 1;

    border-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-border-opacity)))
}

.btm-nav > * .label{

    font-size: 1rem;

    line-height: 1.5rem
}

@media (prefers-reduced-motion: no-preference){

    .btn{

        animation: button-pop var(--animation-btn, 0.25s) ease-out
    }
}

.btn:active:hover,
  .btn:active:focus{

    animation: button-pop 0s ease-out;

    transform: scale(var(--btn-focus-scale, 0.97))
}

@supports not (color: oklch(0% 0 0)){

    .btn{

        background-color: var(--btn-color, var(--fallback-b2));

        border-color: var(--btn-color, var(--fallback-b2))
    }
}

.btn:focus-visible{

    outline-style: solid;

    outline-width: 2px;

    outline-offset: 2px
}

.btn.glass{

    --tw-shadow: 0 0 #0000;

    --tw-shadow-colored: 0 0 #0000;

    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

    outline-color: currentColor
}

.btn.glass.btn-active{

    --glass-opacity: 25%;

    --glass-border-opacity: 15%
}

.btn-ghost{

    border-width: 1px;

    border-color: transparent;

    background-color: transparent;

    color: currentColor;

    --tw-shadow: 0 0 #0000;

    --tw-shadow-colored: 0 0 #0000;

    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

    outline-color: currentColor
}

.btn-ghost.btn-active{

    border-color: transparent;

    background-color: var(--fallback-bc,oklch(var(--bc)/0.2))
}

.btn.btn-disabled,
  .btn[disabled],
  .btn:disabled{

    --tw-border-opacity: 0;

    background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));

    --tw-bg-opacity: 0.2;

    color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));

    --tw-text-opacity: 0.2
}

.btn:is(input[type="checkbox"]:checked),
.btn:is(input[type="radio"]:checked){

    --tw-border-opacity: 1;

    border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity)));

    --tw-bg-opacity: 1;

    background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));

    --tw-text-opacity: 1;

    color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)))
}

.btn:is(input[type="checkbox"]:checked):focus-visible, .btn:is(input[type="radio"]:checked):focus-visible{

    outline-color: var(--fallback-p,oklch(var(--p)/1))
}

@keyframes button-pop{

    0%{

        transform: scale(var(--btn-focus-scale, 0.98))
    }

    40%{

        transform: scale(1.02)
    }

    100%{

        transform: scale(1)
    }
}

.card :where(figure:first-child){

    overflow: hidden;

    border-start-start-radius: inherit;

    border-start-end-radius: inherit;

    border-end-start-radius: unset;

    border-end-end-radius: unset
}

.card :where(figure:last-child){

    overflow: hidden;

    border-start-start-radius: unset;

    border-start-end-radius: unset;

    border-end-start-radius: inherit;

    border-end-end-radius: inherit
}

.card:focus-visible{

    outline: 2px solid currentColor;

    outline-offset: 2px
}

.card.bordered{

    border-width: 1px;

    --tw-border-opacity: 1;

    border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)))
}

.card.compact .card-body{

    padding: 1rem;

    font-size: 0.875rem;

    line-height: 1.25rem
}

.card.image-full :where(figure){

    overflow: hidden;

    border-radius: inherit
}

.checkbox:focus{

    box-shadow: none
}

.checkbox:focus-visible{

    outline-style: solid;

    outline-width: 2px;

    outline-offset: 2px;

    outline-color: var(--fallback-bc,oklch(var(--bc)/1))
}

.checkbox:disabled{

    border-width: 0px;

    cursor: not-allowed;

    border-color: transparent;

    --tw-bg-opacity: 1;

    background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));

    opacity: 0.2
}

.checkbox:checked,
  .checkbox[aria-checked="true"]{

    background-repeat: no-repeat;

    animation: checkmark var(--animation-input, 0.2s) ease-out;

    background-color: var(--chkbg);

    background-image: linear-gradient(-45deg, transparent 65%, var(--chkbg) 65.99%),
      linear-gradient(45deg, transparent 75%, var(--chkbg) 75.99%),
      linear-gradient(-45deg, var(--chkbg) 40%, transparent 40.99%),
      linear-gradient(
        45deg,
        var(--chkbg) 30%,
        var(--chkfg) 30.99%,
        var(--chkfg) 40%,
        transparent 40.99%
      ),
      linear-gradient(-45deg, var(--chkfg) 50%, var(--chkbg) 50.99%)
}

.checkbox:indeterminate{

    --tw-bg-opacity: 1;

    background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));

    background-repeat: no-repeat;

    animation: checkmark var(--animation-input, 0.2s) ease-out;

    background-image: linear-gradient(90deg, transparent 80%, var(--chkbg) 80%),
      linear-gradient(-90deg, transparent 80%, var(--chkbg) 80%),
      linear-gradient(0deg, var(--chkbg) 43%, var(--chkfg) 43%, var(--chkfg) 57%, var(--chkbg) 57%)
}

@keyframes checkmark{

    0%{

        background-position-y: 5px
    }

    50%{

        background-position-y: -2px
    }

    100%{

        background-position-y: 0
    }
}

details.collapse{

    width: 100%
}

details.collapse summary{

    position: relative;

    display: block;

    outline: 2px solid transparent;

    outline-offset: 2px
}

details.collapse summary::-webkit-details-marker{

    display: none
}

.collapse:focus-visible{

    outline-style: solid;

    outline-width: 2px;

    outline-offset: 2px;

    outline-color: var(--fallback-bc,oklch(var(--bc)/1))
}

.collapse:has(.collapse-title:focus-visible),
.collapse:has(> input[type="checkbox"]:focus-visible),
.collapse:has(> input[type="radio"]:focus-visible){

    outline-style: solid;

    outline-width: 2px;

    outline-offset: 2px;

    outline-color: var(--fallback-bc,oklch(var(--bc)/1))
}

.collapse-arrow > .collapse-title:after{

    position: absolute;

    display: block;

    height: 0.5rem;

    width: 0.5rem;

    --tw-translate-y: -100%;

    --tw-rotate: 45deg;

    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));

    transition-property: all;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);

    transition-duration: 150ms;

    transition-duration: 0.2s;

    top: 1.9rem;

    inset-inline-end: 1.4rem;

    content: "";

    transform-origin: 75% 75%;

    box-shadow: 2px 2px;

    pointer-events: none
}

.collapse-plus > .collapse-title:after{

    position: absolute;

    display: block;

    height: 0.5rem;

    width: 0.5rem;

    transition-property: all;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);

    transition-duration: 300ms;

    top: 0.9rem;

    inset-inline-end: 1.4rem;

    content: "+";

    pointer-events: none
}

.collapse:not(.collapse-open):not(.collapse-close) > input[type="checkbox"],
.collapse:not(.collapse-open):not(.collapse-close) > input[type="radio"]:not(:checked),
.collapse:not(.collapse-open):not(.collapse-close) > .collapse-title{

    cursor: pointer
}

.collapse:focus:not(.collapse-open):not(.collapse-close):not(.collapse[open]) > .collapse-title{

    cursor: unset
}

.collapse-title{

    position: relative
}

.collapse-title,
:where(.collapse > input[type="checkbox"]),
:where(.collapse > input[type="radio"]){

    padding: 1rem;

    padding-inline-end: 3rem;

    min-height: 3.75rem;

    transition: background-color 0.2s ease-out
}

.collapse[open] > :where(.collapse-content),
.collapse-open > :where(.collapse-content),
.collapse:focus:not(.collapse-close) > :where(.collapse-content),
.collapse:not(.collapse-close) > :where(input[type="checkbox"]:checked ~ .collapse-content),
.collapse:not(.collapse-close) > :where(input[type="radio"]:checked ~ .collapse-content){

    padding-bottom: 1rem;

    transition: padding 0.2s ease-out,
    background-color 0.2s ease-out
}

.collapse[open].collapse-arrow > .collapse-title:after,
.collapse-open.collapse-arrow > .collapse-title:after,
.collapse-arrow:focus:not(.collapse-close) > .collapse-title:after,
.collapse-arrow:not(.collapse-close) > input[type="checkbox"]:checked ~ .collapse-title:after,
.collapse-arrow:not(.collapse-close) > input[type="radio"]:checked ~ .collapse-title:after{

    --tw-translate-y: -50%;

    --tw-rotate: 225deg;

    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))
}

.collapse[open].collapse-plus > .collapse-title:after,
.collapse-open.collapse-plus > .collapse-title:after,
.collapse-plus:focus:not(.collapse-close) > .collapse-title:after,
.collapse-plus:not(.collapse-close) > input[type="checkbox"]:checked ~ .collapse-title:after,
.collapse-plus:not(.collapse-close) > input[type="radio"]:checked ~ .collapse-title:after{

    content: "−"
}

.drawer-toggle:checked ~ .drawer-side > .drawer-overlay{

    background-color: #0006
}

.drawer-toggle:focus-visible ~ .drawer-content label.drawer-button{

    outline-style: solid;

    outline-width: 2px;

    outline-offset: 2px
}

.input input{

    --tw-bg-opacity: 1;

    background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));

    background-color: transparent
}

.input input:focus{

    outline: 2px solid transparent;

    outline-offset: 2px
}

.input[list]::-webkit-calendar-picker-indicator{

    line-height: 1em
}

.input-bordered{

    border-color: var(--fallback-bc,oklch(var(--bc)/0.2))
}

.input:focus,
  .input:focus-within{

    box-shadow: none;

    border-color: var(--fallback-bc,oklch(var(--bc)/0.2));

    outline-style: solid;

    outline-width: 2px;

    outline-offset: 2px;

    outline-color: var(--fallback-bc,oklch(var(--bc)/0.2))
}

.input:has(> input[disabled]),
  .input-disabled,
  .input:disabled,
  .input[disabled]{

    cursor: not-allowed;

    --tw-border-opacity: 1;

    border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));

    --tw-bg-opacity: 1;

    background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));

    color: var(--fallback-bc,oklch(var(--bc)/0.4))
}

.input:has(> input[disabled])::-moz-placeholder, .input-disabled::-moz-placeholder, .input:disabled::-moz-placeholder, .input[disabled]::-moz-placeholder{

    color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity)));

    --tw-placeholder-opacity: 0.2
}

.input:has(> input[disabled])::placeholder,
  .input-disabled::placeholder,
  .input:disabled::placeholder,
  .input[disabled]::placeholder{

    color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity)));

    --tw-placeholder-opacity: 0.2
}

.input:has(> input[disabled]) > input[disabled]{

    cursor: not-allowed
}

.input::-webkit-date-and-time-value{

    text-align: inherit
}

.join > :where(*:not(:first-child)){

    margin-top: 0px;

    margin-bottom: 0px;

    margin-inline-start: -1px
}

.join > :where(*:not(:first-child)):is(.btn){

    margin-inline-start: calc(var(--border-btn) * -1)
}

.link:focus{

    outline: 2px solid transparent;

    outline-offset: 2px
}

.link:focus-visible{

    outline: 2px solid currentColor;

    outline-offset: 2px
}

.mask-circle{

    -webkit-mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle fill='black' cx='100' cy='100' r='100' fill-rule='evenodd'/%3e%3c/svg%3e");

            mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle fill='black' cx='100' cy='100' r='100' fill-rule='evenodd'/%3e%3c/svg%3e")
}

:where(.menu li:empty){

    --tw-bg-opacity: 1;

    background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));

    opacity: 0.1;

    margin: 0.5rem 1rem;

    height: 1px
}

.menu :where(li ul):before{

    position: absolute;

    bottom: 0.75rem;

    inset-inline-start: 0px;

    top: 0.75rem;

    width: 1px;

    --tw-bg-opacity: 1;

    background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));

    opacity: 0.1;

    content: ""
}

.menu :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)),
.menu :where(li:not(.menu-title) > details > summary:not(.menu-title)){

    border-radius: var(--rounded-btn, 0.5rem);

    padding-left: 1rem;

    padding-right: 1rem;

    padding-top: 0.5rem;

    padding-bottom: 0.5rem;

    text-align: start;

    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);

    transition-duration: 200ms;

    text-wrap: balance
}

:where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(summary, .active, .btn).focus, :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(summary, .active, .btn):focus, :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):is(summary):not(.active, .btn):focus-visible, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(summary, .active, .btn).focus, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(summary, .active, .btn):focus, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):is(summary):not(.active, .btn):focus-visible{

    cursor: pointer;

    background-color: var(--fallback-bc,oklch(var(--bc)/0.1));

    --tw-text-opacity: 1;

    color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));

    outline: 2px solid transparent;

    outline-offset: 2px
}

.menu li > *:not(ul, .menu-title, details, .btn):active,
.menu li > *:not(ul, .menu-title, details, .btn).active,
.menu li > details > summary:active{

    --tw-bg-opacity: 1;

    background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));

    --tw-text-opacity: 1;

    color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity)))
}

.menu :where(li > details > summary)::-webkit-details-marker{

    display: none
}

.menu :where(li > details > summary):after,
.menu :where(li > .menu-dropdown-toggle):after{

    justify-self: end;

    display: block;

    margin-top: -0.5rem;

    height: 0.5rem;

    width: 0.5rem;

    transform: rotate(45deg);

    transition-property: transform, margin-top;

    transition-duration: 0.3s;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    content: "";

    transform-origin: 75% 75%;

    box-shadow: 2px 2px;

    pointer-events: none
}

.menu :where(li > details[open] > summary):after,
.menu :where(li > .menu-dropdown-toggle.menu-dropdown-show):after{

    transform: rotate(225deg);

    margin-top: 0
}

.mockup-phone .display{

    overflow: hidden;

    border-radius: 40px;

    margin-top: -25px
}

.mockup-browser .mockup-browser-toolbar .input{

    position: relative;

    margin-left: auto;

    margin-right: auto;

    display: block;

    height: 1.75rem;

    width: 24rem;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    --tw-bg-opacity: 1;

    background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));

    padding-left: 2rem;

    direction: ltr
}

.mockup-browser .mockup-browser-toolbar .input:before{

    content: "";

    position: absolute;

    left: 0.5rem;

    top: 50%;

    aspect-ratio: 1 / 1;

    height: 0.75rem;

    --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));

    border-radius: 9999px;

    border-width: 2px;

    border-color: currentColor;

    opacity: 0.6
}

.mockup-browser .mockup-browser-toolbar .input:after{

    content: "";

    position: absolute;

    left: 1.25rem;

    top: 50%;

    height: 0.5rem;

    --tw-translate-y: 25%;

    --tw-rotate: -45deg;

    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));

    border-radius: 9999px;

    border-width: 1px;

    border-color: currentColor;

    opacity: 0.6
}

.modal:not(dialog:not(.modal-open)),
  .modal::backdrop{

    background-color: #0006;

    animation: modal-pop 0.2s ease-out
}

.modal-backdrop{

    z-index: -1;

    grid-column-start: 1;

    grid-row-start: 1;

    display: grid;

    align-self: stretch;

    justify-self: stretch;

    color: transparent
}

.modal-open .modal-box,
.modal-toggle:checked + .modal .modal-box,
.modal:target .modal-box,
.modal[open] .modal-box{

    --tw-translate-y: 0px;

    --tw-scale-x: 1;

    --tw-scale-y: 1;

    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))
}

@keyframes modal-pop{

    0%{

        opacity: 0
    }
}

@keyframes progress-loading{

    50%{

        background-position-x: -115%
    }
}

.radio:focus{

    box-shadow: none
}

.radio:focus-visible{

    outline-style: solid;

    outline-width: 2px;

    outline-offset: 2px;

    outline-color: var(--fallback-bc,oklch(var(--bc)/1))
}

.radio:checked,
  .radio[aria-checked="true"]{

    --tw-bg-opacity: 1;

    background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));

    background-image: none;

    animation: radiomark var(--animation-input, 0.2s) ease-out;

    box-shadow: 0 0 0 4px var(--fallback-b1,oklch(var(--b1)/1)) inset,
      0 0 0 4px var(--fallback-b1,oklch(var(--b1)/1)) inset
}

.radio:disabled{

    cursor: not-allowed;

    opacity: 0.2
}

@keyframes radiomark{

    0%{

        box-shadow: 0 0 0 12px var(--fallback-b1,oklch(var(--b1)/1)) inset,
      0 0 0 12px var(--fallback-b1,oklch(var(--b1)/1)) inset
    }

    50%{

        box-shadow: 0 0 0 3px var(--fallback-b1,oklch(var(--b1)/1)) inset,
      0 0 0 3px var(--fallback-b1,oklch(var(--b1)/1)) inset
    }

    100%{

        box-shadow: 0 0 0 4px var(--fallback-b1,oklch(var(--b1)/1)) inset,
      0 0 0 4px var(--fallback-b1,oklch(var(--b1)/1)) inset
    }
}

@keyframes rating-pop{

    0%{

        transform: translateY(-0.125em)
    }

    40%{

        transform: translateY(-0.125em)
    }

    100%{

        transform: translateY(0)
    }
}

.select:focus{

    box-shadow: none;

    border-color: var(--fallback-bc,oklch(var(--bc)/0.2));

    outline-style: solid;

    outline-width: 2px;

    outline-offset: 2px;

    outline-color: var(--fallback-bc,oklch(var(--bc)/0.2))
}

.select-disabled,
  .select:disabled,
  .select[disabled]{

    cursor: not-allowed;

    --tw-border-opacity: 1;

    border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));

    --tw-bg-opacity: 1;

    background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));

    color: var(--fallback-bc,oklch(var(--bc)/0.4))
}

.select-disabled::-moz-placeholder, .select:disabled::-moz-placeholder, .select[disabled]::-moz-placeholder{

    color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity)));

    --tw-placeholder-opacity: 0.2
}

.select-disabled::placeholder,
  .select:disabled::placeholder,
  .select[disabled]::placeholder{

    color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity)));

    --tw-placeholder-opacity: 0.2
}

.select-multiple,
  .select[multiple],
  .select[size].select:not([size="1"]){

    background-image: none;

    padding-right: 1rem
}

[dir="rtl"] .select{

    background-position: calc(0% + 12px) calc(1px + 50%),
    calc(0% + 16px) calc(1px + 50%)
}

@keyframes skeleton{

    from{

        background-position: 150%
    }

    to{

        background-position: -50%
    }
}

:where(.stats) > :not([hidden]) ~ :not([hidden]){

    --tw-divide-x-reverse: 0;

    border-right-width: calc(1px * var(--tw-divide-x-reverse));

    border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));

    --tw-divide-y-reverse: 0;

    border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));

    border-bottom-width: calc(0px * var(--tw-divide-y-reverse))
}

[dir="rtl"] .stats > *:not([hidden]) ~ *:not([hidden]){

    --tw-divide-x-reverse: 1
}

.swap-rotate .swap-on,
.swap-rotate .swap-indeterminate,
.swap-rotate input:indeterminate ~ .swap-on{

    --tw-rotate: 45deg;

    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))
}

.swap-rotate input:checked ~ .swap-off,
.swap-active:where(.swap-rotate) .swap-off,
.swap-rotate input:indeterminate ~ .swap-off{

    --tw-rotate: -45deg;

    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))
}

.swap-rotate input:checked ~ .swap-on,
.swap-active:where(.swap-rotate) .swap-on,
.swap-rotate input:indeterminate ~ .swap-indeterminate{

    --tw-rotate: 0deg;

    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))
}

.swap-flip .swap-on,
.swap-flip .swap-indeterminate,
.swap-flip input:indeterminate ~ .swap-on{

    transform: rotateY(180deg);

    backface-visibility: hidden;

    opacity: 1
}

.swap-flip input:checked ~ .swap-off,
.swap-active:where(.swap-flip) .swap-off,
.swap-flip input:indeterminate ~ .swap-off{

    transform: rotateY(-180deg);

    backface-visibility: hidden;

    opacity: 1
}

.swap-flip input:checked ~ .swap-on,
.swap-active:where(.swap-flip) .swap-on,
.swap-flip input:indeterminate ~ .swap-indeterminate{

    transform: rotateY(0deg)
}

.tabs-lifted > .tab:focus-visible{

    border-end-end-radius: 0;

    border-end-start-radius: 0
}

.tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]), .tab:is(input:checked){

    border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));

    --tw-border-opacity: 1;

    --tw-text-opacity: 1
}

.tab:focus{

    outline: 2px solid transparent;

    outline-offset: 2px
}

.tab:focus-visible{

    outline: 2px solid currentColor;

    outline-offset: -5px
}

.tab-disabled,
  .tab[disabled]{

    cursor: not-allowed;

    color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));

    --tw-text-opacity: 0.2
}

.tabs-bordered > .tab{

    border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));

    --tw-border-opacity: 0.2;

    border-style: solid;

    border-bottom-width: calc(var(--tab-border, 1px) + 1px)
}

.tabs-lifted > .tab{

    border: var(--tab-border, 1px) solid transparent;

    border-width: 0 0 var(--tab-border, 1px) 0;

    border-start-start-radius: var(--tab-radius, 0.5rem);

    border-start-end-radius: var(--tab-radius, 0.5rem);

    border-bottom-color: var(--tab-border-color);

    padding-inline-start: var(--tab-padding, 1rem);

    padding-inline-end: var(--tab-padding, 1rem);

    padding-top: var(--tab-border, 1px)
}

.tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]), .tabs-lifted > .tab:is(input:checked){

    background-color: var(--tab-bg);

    border-width: var(--tab-border, 1px) var(--tab-border, 1px) 0 var(--tab-border, 1px);

    border-inline-start-color: var(--tab-border-color);

    border-inline-end-color: var(--tab-border-color);

    border-top-color: var(--tab-border-color);

    padding-inline-start: calc(var(--tab-padding, 1rem) - var(--tab-border, 1px));

    padding-inline-end: calc(var(--tab-padding, 1rem) - var(--tab-border, 1px));

    padding-bottom: var(--tab-border, 1px);

    padding-top: 0
}

.tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):before, .tabs-lifted > .tab:is(input:checked):before{

    z-index: 1;

    content: "";

    display: block;

    position: absolute;

    width: calc(100% + var(--tab-radius, 0.5rem) * 2);

    height: var(--tab-radius, 0.5rem);

    bottom: 0;

    background-size: var(--tab-radius, 0.5rem);

    background-position: top left,
        top right;

    background-repeat: no-repeat;

    --tab-grad: calc(69% - var(--tab-border, 1px));

    --radius-start: radial-gradient(
        circle at top left,
        transparent var(--tab-grad),
        var(--tab-border-color) calc(var(--tab-grad) + 0.25px),
        var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)),
        var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.25px)
      );

    --radius-end: radial-gradient(
        circle at top right,
        transparent var(--tab-grad),
        var(--tab-border-color) calc(var(--tab-grad) + 0.25px),
        var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)),
        var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.25px)
      );

    background-image: var(--radius-start), var(--radius-end)
}

.tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):first-child:before, .tabs-lifted > .tab:is(input:checked):first-child:before{

    background-image: var(--radius-end);

    background-position: top right
}

[dir="rtl"] .tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):first-child:before, [dir="rtl"] .tabs-lifted > .tab:is(input:checked):first-child:before{

    background-image: var(--radius-start);

    background-position: top left
}

.tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):last-child:before, .tabs-lifted > .tab:is(input:checked):last-child:before{

    background-image: var(--radius-start);

    background-position: top left
}

[dir="rtl"] .tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):last-child:before, [dir="rtl"] .tabs-lifted > .tab:is(input:checked):last-child:before{

    background-image: var(--radius-end);

    background-position: top right
}

.tabs-lifted
  > :is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled])
  + .tabs-lifted
  :is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):before, .tabs-lifted > .tab:is(input:checked) + .tabs-lifted .tab:is(input:checked):before{

    background-image: var(--radius-end);

    background-position: top right
}

.tabs-boxed .tab{

    border-radius: var(--rounded-btn, 0.5rem)
}

.table:where([dir="rtl"], [dir="rtl"] *){

    text-align: right
}

.table :where(th, td){

    padding-left: 1rem;

    padding-right: 1rem;

    padding-top: 0.75rem;

    padding-bottom: 0.75rem;

    vertical-align: middle
}

.table tr.active,
  .table tr.active:nth-child(even),
  .table-zebra tbody tr:nth-child(even){

    --tw-bg-opacity: 1;

    background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)))
}

.table :where(thead tr, tbody tr:not(:last-child), tbody tr:first-child:last-child){

    border-bottom-width: 1px;

    --tw-border-opacity: 1;

    border-bottom-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)))
}

.table :where(thead, tfoot){

    white-space: nowrap;

    font-size: 0.75rem;

    line-height: 1rem;

    font-weight: 700;

    color: var(--fallback-bc,oklch(var(--bc)/0.6))
}

.table :where(tfoot){

    border-top-width: 1px;

    --tw-border-opacity: 1;

    border-top-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)))
}

@keyframes toast-pop{

    0%{

        transform: scale(0.9);

        opacity: 0
    }

    100%{

        transform: scale(1);

        opacity: 1
    }
}

[dir="rtl"] .toggle{

    --handleoffsetcalculator: calc(var(--handleoffset) * 1)
}

.toggle:focus-visible{

    outline-style: solid;

    outline-width: 2px;

    outline-offset: 2px;

    outline-color: var(--fallback-bc,oklch(var(--bc)/0.2))
}

.toggle:hover{

    background-color: currentColor
}

.toggle:checked,
  .toggle[aria-checked="true"]{

    background-image: none;

    --handleoffsetcalculator: var(--handleoffset);

    --tw-text-opacity: 1;

    color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)))
}

[dir="rtl"] .toggle:checked, [dir="rtl"] .toggle[aria-checked="true"]{

    --handleoffsetcalculator: calc(var(--handleoffset) * -1)
}

.toggle:indeterminate{

    --tw-text-opacity: 1;

    color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));

    box-shadow: calc(var(--handleoffset) / 2) 0 0 2px var(--tglbg) inset,
      calc(var(--handleoffset) / -2) 0 0 2px var(--tglbg) inset,
      0 0 0 2px var(--tglbg) inset
}

[dir="rtl"] .toggle:indeterminate{

    box-shadow: calc(var(--handleoffset) / 2) 0 0 2px var(--tglbg) inset,
        calc(var(--handleoffset) / -2) 0 0 2px var(--tglbg) inset,
        0 0 0 2px var(--tglbg) inset
}

.toggle:disabled{

    cursor: not-allowed;

    --tw-border-opacity: 1;

    border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));

    background-color: transparent;

    opacity: 0.3;

    --togglehandleborder: 0 0 0 3px var(--fallback-bc,oklch(var(--bc)/1)) inset,
      var(--handleoffsetcalculator) 0 0 3px var(--fallback-bc,oklch(var(--bc)/1)) inset
}

.btn-sm{

    height: 2rem;

    min-height: 2rem;

    padding-left: 0.75rem;

    padding-right: 0.75rem;

    font-size: 0.875rem
}

.btn-md{

    height: 3rem;

    min-height: 3rem;

    padding-left: 1rem;

    padding-right: 1rem;

    font-size: 0.875rem
}

.btn-square:where(.btn-sm){

    height: 2rem;

    width: 2rem;

    padding: 0px
}

.btn-square:where(.btn-md){

    height: 3rem;

    width: 3rem;

    padding: 0px
}

.btn-circle:where(.btn-xs){

    height: 1.5rem;

    width: 1.5rem;

    border-radius: 9999px;

    padding: 0px
}

.btn-circle:where(.btn-sm){

    height: 2rem;

    width: 2rem;

    border-radius: 9999px;

    padding: 0px
}

.btn-circle:where(.btn-md){

    height: 3rem;

    width: 3rem;

    border-radius: 9999px;

    padding: 0px
}

.btn-circle:where(.btn-lg){

    height: 4rem;

    width: 4rem;

    border-radius: 9999px;

    padding: 0px
}

.drawer-open > .drawer-toggle{

    display: none
}

.drawer-open > .drawer-toggle ~ .drawer-side{

    pointer-events: auto;

    visibility: visible;

    position: sticky;

    display: block;

    width: auto;

    overscroll-behavior: auto
}

.drawer-open > .drawer-toggle ~ .drawer-side > *:not(.drawer-overlay){

    transform: translateX(0%)
}

[dir="rtl"] .drawer-open > .drawer-toggle ~ .drawer-side > *:not(.drawer-overlay){

    transform: translateX(0%)
}

.drawer-open > .drawer-toggle:checked ~ .drawer-side{

    pointer-events: auto;

    visibility: visible
}

.drawer-open > .drawer-side{

    overflow-y: auto
}

html:has(.drawer-toggle:checked){

    overflow-y: hidden;

    scrollbar-gutter: stable
}

.join.join-vertical{

    flex-direction: column
}

.join.join-vertical .join-item:first-child:not(:last-child),
  .join.join-vertical *:first-child:not(:last-child) .join-item{

    border-end-start-radius: 0;

    border-end-end-radius: 0;

    border-start-start-radius: inherit;

    border-start-end-radius: inherit
}

.join.join-vertical .join-item:last-child:not(:first-child),
  .join.join-vertical *:last-child:not(:first-child) .join-item{

    border-start-start-radius: 0;

    border-start-end-radius: 0;

    border-end-start-radius: inherit;

    border-end-end-radius: inherit
}

.join.join-horizontal{

    flex-direction: row
}

.join.join-horizontal .join-item:first-child:not(:last-child),
  .join.join-horizontal *:first-child:not(:last-child) .join-item{

    border-end-end-radius: 0;

    border-start-end-radius: 0;

    border-end-start-radius: inherit;

    border-start-start-radius: inherit
}

.join.join-horizontal .join-item:last-child:not(:first-child),
  .join.join-horizontal *:last-child:not(:first-child) .join-item{

    border-end-start-radius: 0;

    border-start-start-radius: 0;

    border-end-end-radius: inherit;

    border-start-end-radius: inherit
}

.stats-vertical{

    grid-auto-flow: row
}

.tabs-md :where(.tab){

    height: 2rem;

    font-size: 0.875rem;

    line-height: 1.25rem;

    line-height: 2;

    --tab-padding: 1rem
}

.tabs-lg :where(.tab){

    height: 3rem;

    font-size: 1.125rem;

    line-height: 1.75rem;

    line-height: 2;

    --tab-padding: 1.25rem
}

.tabs-sm :where(.tab){

    height: 1.5rem;

    font-size: 0.875rem;

    line-height: .75rem;

    --tab-padding: 0.75rem
}

.tabs-xs :where(.tab){

    height: 1.25rem;

    font-size: 0.75rem;

    line-height: .75rem;

    --tab-padding: 0.5rem
}

.avatar.online:before{

    content: "";

    position: absolute;

    z-index: 10;

    display: block;

    border-radius: 9999px;

    --tw-bg-opacity: 1;

    background-color: var(--fallback-su,oklch(var(--su)/var(--tw-bg-opacity)));

    outline-style: solid;

    outline-width: 2px;

    outline-color: var(--fallback-b1,oklch(var(--b1)/1));

    width: 15%;

    height: 15%;

    top: 7%;

    right: 7%
}

.avatar.offline:before{

    content: "";

    position: absolute;

    z-index: 10;

    display: block;

    border-radius: 9999px;

    --tw-bg-opacity: 1;

    background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));

    outline-style: solid;

    outline-width: 2px;

    outline-color: var(--fallback-b1,oklch(var(--b1)/1));

    width: 15%;

    height: 15%;

    top: 7%;

    right: 7%
}

.drawer-open > .drawer-toggle ~ .drawer-side > .drawer-overlay{

    cursor: default;

    background-color: transparent
}

.join.join-vertical > :where(*:not(:first-child)){

    margin-left: 0px;

    margin-right: 0px;

    margin-top: -1px
}

.join.join-vertical > :where(*:not(:first-child)):is(.btn){

    margin-top: calc(var(--border-btn) * -1)
}

.join.join-horizontal > :where(*:not(:first-child)){

    margin-top: 0px;

    margin-bottom: 0px;

    margin-inline-start: -1px
}

.join.join-horizontal > :where(*:not(:first-child)):is(.btn){

    margin-inline-start: calc(var(--border-btn) * -1);

    margin-top: 0px
}

.modal-top :where(.modal-box){

    width: 100%;

    max-width: none;

    --tw-translate-y: -2.5rem;

    --tw-scale-x: 1;

    --tw-scale-y: 1;

    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));

    border-bottom-right-radius: var(--rounded-box, 1rem);

    border-bottom-left-radius: var(--rounded-box, 1rem);

    border-top-left-radius: 0px;

    border-top-right-radius: 0px
}

.modal-middle :where(.modal-box){

    width: 91.666667%;

    max-width: 32rem;

    --tw-translate-y: 0px;

    --tw-scale-x: .9;

    --tw-scale-y: .9;

    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));

    border-top-left-radius: var(--rounded-box, 1rem);

    border-top-right-radius: var(--rounded-box, 1rem);

    border-bottom-right-radius: var(--rounded-box, 1rem);

    border-bottom-left-radius: var(--rounded-box, 1rem)
}

.modal-bottom :where(.modal-box){

    width: 100%;

    max-width: none;

    --tw-translate-y: 2.5rem;

    --tw-scale-x: 1;

    --tw-scale-y: 1;

    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));

    border-top-left-radius: var(--rounded-box, 1rem);

    border-top-right-radius: var(--rounded-box, 1rem);

    border-bottom-right-radius: 0px;

    border-bottom-left-radius: 0px
}

.stats-vertical > :not([hidden]) ~ :not([hidden]){

    --tw-divide-x-reverse: 0;

    border-right-width: calc(0px * var(--tw-divide-x-reverse));

    border-left-width: calc(0px * calc(1 - var(--tw-divide-x-reverse)));

    --tw-divide-y-reverse: 0;

    border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));

    border-bottom-width: calc(1px * var(--tw-divide-y-reverse))
}

.stats-vertical{

    overflow-y: auto
}

.sr-only{

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border-width: 0
}

.collapse{

    visibility: collapse
}

.absolute{

    position: absolute
}

.relative{

    position: relative
}

.sticky{

    position: sticky
}

.bottom-0{

    bottom: 0px
}

.right-2{

    right: 0.5rem
}

.top-0{

    top: 0px
}

.top-2{

    top: 0.5rem
}

.z-50{

    z-index: 50
}

.m-0{

    margin: 0px
}

.m-4{

    margin: 1rem
}

.mx-12{

    margin-left: 3rem;

    margin-right: 3rem
}

.mx-2{

    margin-left: 0.5rem;

    margin-right: 0.5rem
}

.mx-8{

    margin-left: 2rem;

    margin-right: 2rem
}

.mx-auto{

    margin-left: auto;

    margin-right: auto
}

.mb-0{

    margin-bottom: 0px
}

.mb-10{

    margin-bottom: 2.5rem
}

.mb-12{

    margin-bottom: 3rem
}

.mb-16{

    margin-bottom: 4rem
}

.mb-2{

    margin-bottom: 0.5rem
}

.mb-3{

    margin-bottom: 0.75rem
}

.mb-4{

    margin-bottom: 1rem
}

.mb-6{

    margin-bottom: 1.5rem
}

.mb-8{

    margin-bottom: 2rem
}

.ml-2{

    margin-left: 0.5rem
}

.mr-2{

    margin-right: 0.5rem
}

.mr-4{

    margin-right: 1rem
}

.mt-1{

    margin-top: 0.25rem
}

.mt-12{

    margin-top: 3rem
}

.mt-14{

    margin-top: 3.5rem
}

.mt-16{

    margin-top: 4rem
}

.mt-2{

    margin-top: 0.5rem
}

.mt-4{

    margin-top: 1rem
}

.mt-5{

    margin-top: 1.25rem
}

.mt-6{

    margin-top: 1.5rem
}

.mt-8{

    margin-top: 2rem
}

.inline-block{

    display: inline-block
}

.flex{

    display: flex
}

.table{

    display: table
}

.grid{

    display: grid
}

.hidden{

    display: none
}

.h-10{

    height: 2.5rem
}

.h-12{

    height: 3rem
}

.h-32{

    height: 8rem
}

.h-4{

    height: 1rem
}

.h-48{

    height: 12rem
}

.h-6{

    height: 1.5rem
}

.h-8{

    height: 2rem
}

.h-\[200px\]{

    height: 200px
}

.h-\[80px\]{

    height: 80px
}

.h-auto{

    height: auto
}

.max-h-24{

    max-height: 6rem
}

.min-h-5{

    min-height: 1.25rem
}

.min-h-\[75vh\]{

    min-height: 75vh
}

.min-h-full{

    min-height: 100%
}

.min-h-screen{

    min-height: 100vh
}

.w-10{

    width: 2.5rem
}

.w-10\/12{

    width: 83.333333%
}

.w-12{

    width: 3rem
}

.w-2\/3{

    width: 66.666667%
}

.w-32{

    width: 8rem
}

.w-4{

    width: 1rem
}

.w-40{

    width: 10rem
}

.w-6{

    width: 1.5rem
}

.w-60{

    width: 15rem
}

.w-8{

    width: 2rem
}

.w-80{

    width: 20rem
}

.w-\[180px\]{

    width: 180px
}

.w-\[200px\]{

    width: 200px
}

.w-full{

    width: 100%
}

.min-w-72{

    min-width: 18rem
}

.max-w-3xl{

    max-width: 48rem
}

.max-w-\[1100px\]{

    max-width: 1100px
}

.max-w-\[1200px\]{

    max-width: 1200px
}

.max-w-\[320px\]{

    max-width: 320px
}

.max-w-\[60\%\]{

    max-width: 60%
}

.max-w-\[640px\]{

    max-width: 640px
}

.max-w-screen-3xl{

    max-width: 2000px
}

.flex-1{

    flex: 1 1 0%
}

.flex-none{

    flex: none
}

.shrink-0{

    flex-shrink: 0
}

.grow{

    flex-grow: 1
}

.table-auto{

    table-layout: auto
}

.border-collapse{

    border-collapse: collapse
}

.cursor-pointer{

    cursor: pointer
}

.grid-flow-col{

    grid-auto-flow: column
}

.grid-cols-1{

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

.grid-cols-2{

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

.flex-row{

    flex-direction: row
}

.flex-col{

    flex-direction: column
}

.flex-col-reverse{

    flex-direction: column-reverse
}

.flex-wrap{

    flex-wrap: wrap
}

.items-center{

    align-items: center
}

.justify-center{

    justify-content: center
}

.justify-between{

    justify-content: space-between
}

.gap-2{

    gap: 0.5rem
}

.gap-4{

    gap: 1rem
}

.gap-5{

    gap: 1.25rem
}

.gap-6{

    gap: 1.5rem
}

.gap-8{

    gap: 2rem
}

.space-x-2 > :not([hidden]) ~ :not([hidden]){

    --tw-space-x-reverse: 0;

    margin-right: calc(0.5rem * var(--tw-space-x-reverse));

    margin-left: calc(0.5rem * 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-y-2 > :not([hidden]) ~ :not([hidden]){

    --tw-space-y-reverse: 0;

    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));

    margin-bottom: calc(0.5rem * 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-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
}

.overflow-x-auto{

    overflow-x: auto
}

.rounded{

    border-radius: 0.25rem
}

.rounded-2xl{

    border-radius: 1rem
}

.rounded-box{

    border-radius: var(--rounded-box, 1rem)
}

.rounded-full{

    border-radius: 9999px
}

.rounded-lg{

    border-radius: 0.5rem
}

.rounded-md{

    border-radius: 0.375rem
}

.border{

    border-width: 1px
}

.border-2{

    border-width: 2px
}

.border-8{

    border-width: 8px
}

.border-b-2{

    border-bottom-width: 2px
}

.border-t{

    border-top-width: 1px
}

.border-t-8{

    border-top-width: 8px
}

.border-ccc-yellow{

    --tw-border-opacity: 1;

    border-color: rgb(239 233 21 / var(--tw-border-opacity, 1))
}

.border-error{

    --tw-border-opacity: 1;

    border-color: var(--fallback-er,oklch(var(--er)/var(--tw-border-opacity, 1)))
}

.border-primary{

    --tw-border-opacity: 1;

    border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity, 1)))
}

.border-secondary{

    --tw-border-opacity: 1;

    border-color: var(--fallback-s,oklch(var(--s)/var(--tw-border-opacity, 1)))
}

.bg-\[\#000000\]{

    --tw-bg-opacity: 1;

    background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1))
}

.bg-\[\#043927\]{

    --tw-bg-opacity: 1;

    background-color: rgb(4 57 39 / var(--tw-bg-opacity, 1))
}

.bg-\[\#082B0F\]{

    --tw-bg-opacity: 1;

    background-color: rgb(8 43 15 / var(--tw-bg-opacity, 1))
}

.bg-\[\#1F2833\]{

    --tw-bg-opacity: 1;

    background-color: rgb(31 40 51 / var(--tw-bg-opacity, 1))
}

.bg-\[\#204e4a\]{

    --tw-bg-opacity: 1;

    background-color: rgb(32 78 74 / var(--tw-bg-opacity, 1))
}

.bg-\[\#515A47\]{

    --tw-bg-opacity: 1;

    background-color: rgb(81 90 71 / var(--tw-bg-opacity, 1))
}

.bg-\[\#747474\]{

    --tw-bg-opacity: 1;

    background-color: rgb(116 116 116 / var(--tw-bg-opacity, 1))
}

.bg-\[\#ACBFA4\]{

    --tw-bg-opacity: 1;

    background-color: rgb(172 191 164 / var(--tw-bg-opacity, 1))
}

.bg-\[\#AFBE8F\]{

    --tw-bg-opacity: 1;

    background-color: rgb(175 190 143 / var(--tw-bg-opacity, 1))
}

.bg-\[\#F3F3F3\]{

    --tw-bg-opacity: 1;

    background-color: rgb(243 243 243 / var(--tw-bg-opacity, 1))
}

.bg-\[\#FCFCFC\]{

    --tw-bg-opacity: 1;

    background-color: rgb(252 252 252 / var(--tw-bg-opacity, 1))
}

.bg-\[\#dde392\]{

    --tw-bg-opacity: 1;

    background-color: rgb(221 227 146 / var(--tw-bg-opacity, 1))
}

.bg-accent{

    --tw-bg-opacity: 1;

    background-color: var(--fallback-a,oklch(var(--a)/var(--tw-bg-opacity, 1)))
}

.bg-base-100{

    --tw-bg-opacity: 1;

    background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity, 1)))
}

.bg-base-100\/90{

    background-color: var(--fallback-b1,oklch(var(--b1)/0.9))
}

.bg-base-200{

    --tw-bg-opacity: 1;

    background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity, 1)))
}

.bg-base-300{

    --tw-bg-opacity: 1;

    background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity, 1)))
}

.bg-ccc-beige{

    --tw-bg-opacity: 1;

    background-color: rgb(226 232 206 / var(--tw-bg-opacity, 1))
}

.bg-ccc-green{

    --tw-bg-opacity: 1;

    background-color: rgb(8 43 15 / var(--tw-bg-opacity, 1))
}

.bg-ccc-green2{

    --tw-bg-opacity: 1;

    background-color: rgb(0 100 0 / var(--tw-bg-opacity, 1))
}

.bg-ccc-grey-dark{

    --tw-bg-opacity: 1;

    background-color: rgb(31 40 51 / var(--tw-bg-opacity, 1))
}

.bg-ccc-grey-light{

    --tw-bg-opacity: 1;

    background-color: rgb(237 234 229 / var(--tw-bg-opacity, 1))
}

.bg-ccc-grey-medium{

    --tw-bg-opacity: 1;

    background-color: rgb(116 116 116 / var(--tw-bg-opacity, 1))
}

.bg-ccc-yellow{

    --tw-bg-opacity: 1;

    background-color: rgb(239 233 21 / var(--tw-bg-opacity, 1))
}

.bg-error{

    --tw-bg-opacity: 1;

    background-color: var(--fallback-er,oklch(var(--er)/var(--tw-bg-opacity, 1)))
}

.bg-gray-800{

    --tw-bg-opacity: 1;

    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1))
}

.bg-info{

    --tw-bg-opacity: 1;

    background-color: var(--fallback-in,oklch(var(--in)/var(--tw-bg-opacity, 1)))
}

.bg-neutral{

    --tw-bg-opacity: 1;

    background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity, 1)))
}

.bg-primary{

    --tw-bg-opacity: 1;

    background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity, 1)))
}

.bg-primary-content{

    --tw-bg-opacity: 1;

    background-color: var(--fallback-pc,oklch(var(--pc)/var(--tw-bg-opacity, 1)))
}

.bg-secondary{

    --tw-bg-opacity: 1;

    background-color: var(--fallback-s,oklch(var(--s)/var(--tw-bg-opacity, 1)))
}

.bg-secondary-content{

    --tw-bg-opacity: 1;

    background-color: var(--fallback-sc,oklch(var(--sc)/var(--tw-bg-opacity, 1)))
}

.bg-stat-box{

    --tw-bg-opacity: 1;

    background-color: rgb(4 57 39 / var(--tw-bg-opacity, 1))
}

.bg-success{

    --tw-bg-opacity: 1;

    background-color: var(--fallback-su,oklch(var(--su)/var(--tw-bg-opacity, 1)))
}

.bg-transparent{

    background-color: transparent
}

.bg-warning{

    --tw-bg-opacity: 1;

    background-color: var(--fallback-wa,oklch(var(--wa)/var(--tw-bg-opacity, 1)))
}

.bg-opacity-90{

    --tw-bg-opacity: 0.9
}

.fill-current{

    fill: currentColor
}

.stroke-current{

    stroke: currentColor
}

.object-cover{

    -o-object-fit: cover;

       object-fit: cover
}

.object-top{

    -o-object-position: top;

       object-position: top
}

.p-0{

    padding: 0px
}

.p-1{

    padding: 0.25rem
}

.p-10{

    padding: 2.5rem
}

.p-12{

    padding: 3rem
}

.p-2{

    padding: 0.5rem
}

.p-3{

    padding: 0.75rem
}

.p-4{

    padding: 1rem
}

.p-6{

    padding: 1.5rem
}

.p-8{

    padding: 2rem
}

.px-3{

    padding-left: 0.75rem;

    padding-right: 0.75rem
}

.px-4{

    padding-left: 1rem;

    padding-right: 1rem
}

.px-6{

    padding-left: 1.5rem;

    padding-right: 1.5rem
}

.px-7{

    padding-left: 1.75rem;

    padding-right: 1.75rem
}

.py-2{

    padding-top: 0.5rem;

    padding-bottom: 0.5rem
}

.py-3{

    padding-top: 0.75rem;

    padding-bottom: 0.75rem
}

.py-5{

    padding-top: 1.25rem;

    padding-bottom: 1.25rem
}

.py-8{

    padding-top: 2rem;

    padding-bottom: 2rem
}

.pb-1{

    padding-bottom: 0.25rem
}

.pb-48{

    padding-bottom: 12rem
}

.pl-0{

    padding-left: 0px
}

.pl-2{

    padding-left: 0.5rem
}

.pr-8{

    padding-right: 2rem
}

.pt-2{

    padding-top: 0.5rem
}

.pt-32{

    padding-top: 8rem
}

.pt-4{

    padding-top: 1rem
}

.pt-6{

    padding-top: 1.5rem
}

.text-left{

    text-align: left
}

.text-center{

    text-align: center
}

.font-poppins{

    font-family: Poppins, sans-serif
}

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

.text-\[16px\]{

    font-size: 16px
}

.text-lg{

    font-size: 1.125rem;

    line-height: 1.75rem
}

.text-sm{

    font-size: 0.875rem;

    line-height: 1.25rem
}

.text-xs{

    font-size: 0.75rem;

    line-height: 1rem
}

.font-bold{

    font-weight: 700
}

.font-medium{

    font-weight: 500
}

.font-semibold{

    font-weight: 600
}

.uppercase{

    text-transform: uppercase
}

.leading-6{

    line-height: 1.5rem
}

.leading-\[28px\]{

    line-height: 28px
}

.leading-\[38px\]{

    line-height: 38px
}

.text-\[\#082B0F\]{

    --tw-text-opacity: 1;

    color: rgb(8 43 15 / var(--tw-text-opacity, 1))
}

.text-\[\#367c2b\]{

    --tw-text-opacity: 1;

    color: rgb(54 124 43 / var(--tw-text-opacity, 1))
}

.text-accent{

    --tw-text-opacity: 1;

    color: var(--fallback-a,oklch(var(--a)/var(--tw-text-opacity, 1)))
}

.text-base-100{

    --tw-text-opacity: 1;

    color: var(--fallback-b1,oklch(var(--b1)/var(--tw-text-opacity, 1)))
}

.text-black{

    --tw-text-opacity: 1;

    color: rgb(0 0 0 / var(--tw-text-opacity, 1))
}

.text-ccc-grey-light{

    --tw-text-opacity: 1;

    color: rgb(237 234 229 / var(--tw-text-opacity, 1))
}

.text-ccc-yellow{

    --tw-text-opacity: 1;

    color: rgb(239 233 21 / var(--tw-text-opacity, 1))
}

.text-neutral{

    --tw-text-opacity: 1;

    color: var(--fallback-n,oklch(var(--n)/var(--tw-text-opacity, 1)))
}

.text-primary{

    --tw-text-opacity: 1;

    color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity, 1)))
}

.text-primary-content{

    --tw-text-opacity: 1;

    color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity, 1)))
}

.text-secondary{

    --tw-text-opacity: 1;

    color: var(--fallback-s,oklch(var(--s)/var(--tw-text-opacity, 1)))
}

.text-white{

    --tw-text-opacity: 1;

    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.underline{

    text-decoration-line: underline
}

.opacity-70{

    opacity: 0.7
}

.shadow{

    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);

    --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-lg{

    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px 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-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)
}

.ring{

    --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(3px + 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)
}

.ring-primary{

    --tw-ring-opacity: 1;

    --tw-ring-color: var(--fallback-p,oklch(var(--p)/var(--tw-ring-opacity, 1)))
}

.ring-offset-2{

    --tw-ring-offset-width: 2px
}

.ring-offset-base-100{

    --tw-ring-offset-color: var(--fallback-b1,oklch(var(--b1)/1))
}

.backdrop-blur-3xl{

    --tw-backdrop-blur: blur(64px);

    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

.backdrop-blur-lg{

    --tw-backdrop-blur: blur(16px);

    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

.backdrop-filter{

    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

.transition{

    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    transition-duration: 150ms
}

.duration-150{

    transition-duration: 150ms
}

.duration-200{

    transition-duration: 200ms
}

.ease-in-out{

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}

.ease-out{

    transition-timing-function: cubic-bezier(0, 0, 0.2, 1)
}

.small-caps {
    font-variant: small-caps;
  }

/*
  .text-content {
    @apply max-w-screen-lg;
    @apply mx-auto;  
     background-color: #671212; 
  } */

* {
  padding: 0;
  margin: 0;
  /*border: 0;
  outline: 0;
  background-color: inherit;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  box-shadow: none;*/
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

h1 {
  font-size: 4rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.3rem;
}

ul {
  list-style-type: none;
}

a {
  text-decoration: none;
}

button {
  cursor: pointer;
}

/* @media (max-width: 900px) {
  h1 {
    font-size: 2.6rem;
  }
} */

/*===================
  buttons and links
===================*/

/* 
.link {
  color: var(--clr-primary);
  padding: 0 0 0.3em 0;
  position: relative;
}

.link:hover {
  color: var(--clr-primary);
}

.link::before {
  content: "";
  display: inline;
  width: 0%;
  height: 0.2em;
  position: absolute;
  bottom: 0;
  background-color: var(--clr-primary);
  transition: width 0.2s ease-in;
}

.link:hover::before,
.link:focus::before {
  width: 100%;
}

.link--nav {
  color: var(--clr-fg);
  text-transform: lowercase;
  font-weight: 500;
}

.link--icon {
  color: var(--clr-fg);
  font-size: 1.2rem;
} */

/* 
.btn {
  display: block;
  padding: 0.8em 1.4em;
  font-weight: 500;
  font-size: 0.9rem;
  text-transform: lowercase;
  transition: transform 0.2s ease-in-out;
}

.btn--outline {
  color: var(--clr-primary);
  border: 2px solid var(--clr-primary);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.btn--outline:focus,
.btn--outline:hover {
  color: var(--clr-bg);
}

.btn--outline:before {
  content: "";
  position: absolute;
  background-color: var(--clr-primary);
  right: 100%;
  bottom: 0;
  left: 0;
  top: 0;
  z-index: -1;
  transition: right 0.2s ease-in-out;
}

.btn--outline:hover::before,
.btn--outline:focus::before {
  right: 0;
}

.btn--plain {
  text-transform: initial;
  background-color: var(--clr-bg-alt);
  box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
  border: 0;
}

.btn--plain:hover {
  transform: translateY(-4px);
}

.btn--icon {
  padding: 0;
  font-size: 1.2rem;
}

.btn--icon:hover,
.btn--icon:focus {
  color: var(--clr-primary);
}

.btn--icon:active {
  transform: translateY(-5px);
}  */

/*========
  layout
========*/

/* 
.center {
  display: flex;
  align-items: center;
}

.header {
  height: 8em;
  max-width: 2000px;
  width: 95%;
  margin: 0 auto;
  justify-content: space-between;
} */

/* 
main {
  max-width: 2000px;
  width: 95%;
  margin: 0 auto;
}

.section {
  margin-top: 5em;
}

.section__title {
  text-align: center;
  margin-bottom: 1em;
  text-transform: uppercase;
} */

/* .section__potws{
  position: relative;
  padding-top: 2em;
  padding-bottom: 3em;
  width: 100vw; 
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--div-bg);
  margin-top: 5em;
  text-align: center;
  margin-bottom: 1em;
  text-transform: uppercase;
  overflow: hidden;
} */

/* 
.nav__list {
  margin-right: 1.5em;
  display: flex;
}

.nav__list-item {
  margin-left: 1.5em;
}

.nav__hamburger {
  display: none;
  width: 1em;
} */

/* 
.about {
  flex-direction: column;
  margin-top: 3em;
} */

/*.about__name {
  color: var(--clr-primary);
  font-family: 'Poppins', sans-serif;
  font-size: 64px;
  line-height: 76.8px;
  letter-spacing: normal;
  font-weight: 700;
} */

/* .about__role {
  margin-top: 1.2em;
} */

/* .about__desc {
  font-size: 1rem;
  max-width: 600px;
}

.about__desc,
.about__contact {
  margin-top: 2.4em;
} */

/* .about .link--icon {
  margin-right: 0.8em;
} */

/* .about .btn--outline {
  margin-right: 1em;
} */

/* 
.projects__grid {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18em, 1fr));
  grid-gap: 2em;
}

.project {
  padding: 2em;
  margin: 0 auto;
  text-align: center;
  box-shadow: var(--shadow);
  transition: transform 0.2s linear;
}

.project:hover {
  transform: translateY(-7px);
}

.project__description {
  margin-top: 1em;
}

.project__stack {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 1.2em 0;
}

.project__stack-item {
  margin: 0.5em;
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--clr-fg-alt);
}

.project .link--icon {
  margin-left: 0.5em;
} */

/*   
.potws__grid {
  max-width: 2000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(24em, 1fr));
  grid-gap: 2em;
  background-color: var(--div-bg);
  ;
}


.potw {
  text-align: center;
  box-shadow: var(--shadow);
  transition: transform 0.2s linear;
  background-color: var(--img-border-fg);

}

.potw__image {
  width: 90%;
  aspect-ratio: 1; 
  object-fit:contain; 
}

.potw:hover {
  transform: translateY(-7px);
}

.potw__image {
  display: block;
} */

/* 
.skills__list {
  max-width: 450px;
  width: 95%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.skills__list-item {
  margin: 0.5em;
}

.contact {
  flex-direction: column;
}

.footer {
  padding: 3em 0;
  margin-top: 4em;
  text-align: center;
}

.footer__link {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--clr-fg);
}

.scroll-top {
  display: none;
  position: fixed;
  bottom: 1em;
  right: 2em;
  background-color: transparent;
  font-size: 1.8rem;
  transition: transform 0.2s ease-in-out;
}

@media (max-width: 600px) {
  .header {
    height: 6em;
  }

  .section {
    margin-top: 4em;
  }

  .nav__list {
    flex-direction: column;
    padding: 4em 0;
    position: absolute;
    right: 0;
    left: 0;
    top: 5em;
    background-color: var(--clr-bg);
    width: 0;
    overflow: hidden;
    transition: width 0.2s ease-in-out;
  }

  .display-nav-list {
    width: 100%;
  }

  .nav__list-item {
    margin: 0.5em 0;
  }

  .nav__hamburger {
    display: flex;
    margin-left: 0.8em;
  }

  .about {
    align-items: flex-start;
    margin-top: 2em;
  }

  .footer {
    padding: 2em;
    margin-top: 3em;
  }

  .scroll-container {
    display: none;
  }
} */

/* quick hack for pagefind */

body.cccdark {
  --pagefind-ui-primary: #eeeeee;
  --pagefind-ui-text: #eeeeee;
  --pagefind-ui-background: #152028;
  --pagefind-ui-border: #152028;
  --pagefind-ui-tag: #152028;
}

/* navbar styling ideas */

.our-navbar {
  max-width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  height: 70px;
  -moz-column-gap: 5px;
       column-gap: 5px;
}

.navbar-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  overflow-x: auto;
  flex: 1 1 auto;
  width: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  will-change: scroll-position;

  & li {
    display: flex;

    &:first-child {
      margin-left: auto;
    }
  }

  & a {
    color: rgb(127, 141, 125);
    text-decoration: none;
    display: flex;
    align-items: center;
    padding: 0 1em;
    white-space: nowrap;

    &:hover {
      background-image: linear-gradient(bisque, bisque);
      background-repeat: no-repeat;
      background-size: calc(100% - 2em) 1px;
      background-position: center bottom;
    }

    &.is-selected {
      color: green;
      background: darkgreen;
    }
  }
}

.navbar-search {
  align-self: center;
  padding: 0;
  margin: 0;
  min-width: 173px;
  min-height: 36px;
}

/* Gradient Border styling */

.card-wrapper{

    background-image: linear-gradient(to bottom, var(--tw-gradient-stops));

    --tw-gradient-from: #334155 var(--tw-gradient-from-position);

    --tw-gradient-to: rgb(51 65 85 / 0) var(--tw-gradient-to-position);

    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

    --tw-gradient-to: #1e293b var(--tw-gradient-to-position);

    position: relative;

    overflow: hidden;

    border-radius: 1rem
}

/* Gradient */

.card-wrapper::before {
  background: conic-gradient(
    rgba(244, 114, 182, 0.4) 0deg,
    rgba(192, 132, 252, 0.4) 0deg,
    transparent 80deg
  );
  position: absolute;
  left: -25%;
  top: -25%;
  height: 150%;
  width: 150%;
}

@keyframes border-spin{

    100%{

        transform: rotate(360deg)
    }
}

.card-wrapper::before{

    animation: border-spin 7s linear infinite;

    --tw-content: '';

    content: var(--tw-content);

    position: absolute
}

/* Body */

.card-content{

    left: 1px;

    top: 1px;

    height: calc(100% - 2px);

    width: calc(100% - 2px);

    background-image: linear-gradient(to bottom, var(--tw-gradient-stops));

    --tw-gradient-from: #1e293b var(--tw-gradient-from-position);

    --tw-gradient-to: rgb(30 41 59 / 0) var(--tw-gradient-to-position);

    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

    --tw-gradient-to: #0f172a var(--tw-gradient-to-position);

    position: absolute;

    border-radius: 1rem
}

/* Mocking around with the Header and Navbar Styles 
.header {
  background-color: bg-secondary;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

.navbar {
  max-width: 1024px;
  background-color: bg-secondary;
  margin: auto;
  height: 56px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
*/

/* Styling  to the Player and to the Season Page */

.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;/* Add padding to bring elements towards the margins */
  color: primary 
}

/* Player Info on the PLAYER Page */

.mask-circle {  /* headshot styling */  max-width: 1024px;  margin-left: 1.25rem;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  width: 200px;
  height: 200px;
  -o-object-fit: cover;
     object-fit: cover; 
}

.mask {
  margin-right: 20px; /* Add space between the image and stats */
}

/*  Set the Player Info to 5 column layout on large screens */

.player-info{
  display: grid;
  grid-template-columns: repeat(5, 1fr); 
  grid-template-rows: 2; 
  gap: 20px;
  padding: 10px;
  margin: 0 auto;
}

.player-info > * {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
  padding: 5px; 
  text-align: center; 
}

.player-info > *:nth-child(1) {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

/* Set the Player Info to 4 column layout for tablet devices */

@media (max-width: 1024px) {
  .player-info {
    grid-template-columns: repeat(4, 1fr); 
    grid-template-rows: 3; 
    padding: 0 10px; 
    gap: 10px; 
    }

    .player-info > * {
      grid-column: auto; 
      grid-row: auto; 
      margin: 0 auto;
    } 

    .player-info > *:nth-child(1) { 
      grid-column: 1 / 2;
      grid-row: 1 / 4;
      justify-self: center; 
      align-self: center;
    }
}

/* Set the Player Info to 2 column layout for mobile devices */

@media (max-width: 768px) {
  .player-info {
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: auto; 
    justify-content: center;
    gap: 10px;
  }
  
  .player-info > * {
    grid-column: auto; 
    grid-row: auto; 
    margin: 0 auto;
  } 
  .player-info > *:nth-child(1) { 
    grid-column: 1 / 3;
    justify-self: center; 
  }
}

/*  End Player Info on the PLAYER Page */

/* Slider on Seasons Page */

.slider{
    position: relative;
    width: 100%;
    margin: auto;
    overflow: hidden;
    }

.slider img{
    width: 100%;
    display: none;
  }

img.displaySlide{
    display: block;
    animation-name: fade;
    animation-duration: 1.5s;
  }

.slider button{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    padding: 10px 15px;
    background-color: hsla(0, 0%, 0%, 0.5);
    color: white;
    border: none;
    cursor: pointer;
  }

.prev{
    left: 0;
  }

.next{
    right: 0;
  }

@keyframes fade {
    from {opacity: .5}
    to {opacity: 1}
  }

@media (min-width: 1024px){

    .lg\:stats-horizontal{

        grid-auto-flow: column
    }

    .lg\:stats-horizontal > :not([hidden]) ~ :not([hidden]){

        --tw-divide-x-reverse: 0;

        border-right-width: calc(1px * var(--tw-divide-x-reverse));

        border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));

        --tw-divide-y-reverse: 0;

        border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));

        border-bottom-width: calc(0px * var(--tw-divide-y-reverse))
    }

    .lg\:stats-horizontal{

        overflow-x: auto
    }

    .lg\:stats-horizontal:where([dir="rtl"], [dir="rtl"] *){

        --tw-divide-x-reverse: 1
    }
}

.after\:absolute::after{

    content: var(--tw-content);

    position: absolute
}

.after\:bottom-0::after{

    content: var(--tw-content);

    bottom: 0px
}

.after\:left-0::after{

    content: var(--tw-content);

    left: 0px
}

.after\:h-1::after{

    content: var(--tw-content);

    height: 0.25rem
}

.after\:w-0::after{

    content: var(--tw-content);

    width: 0px
}

.after\:bg-primary::after{

    content: var(--tw-content);

    --tw-bg-opacity: 1;

    background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity, 1)))
}

.after\:duration-200::after{

    content: var(--tw-content);

    transition-duration: 200ms
}

.hover\:border-base-100:hover{

    --tw-border-opacity: 1;

    border-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-border-opacity, 1)))
}

.hover\:bg-base-100:hover{

    --tw-bg-opacity: 1;

    background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity, 1)))
}

.hover\:bg-gray-900:hover{

    --tw-bg-opacity: 1;

    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1))
}

.hover\:bg-primary:hover{

    --tw-bg-opacity: 1;

    background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity, 1)))
}

.hover\:text-base-100:hover{

    --tw-text-opacity: 1;

    color: var(--fallback-b1,oklch(var(--b1)/var(--tw-text-opacity, 1)))
}

.hover\:text-primary:hover{

    --tw-text-opacity: 1;

    color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity, 1)))
}

.hover\:ease-in:hover{

    transition-timing-function: cubic-bezier(0.4, 0, 1, 1)
}

.hover\:after\:w-full:hover::after{

    content: var(--tw-content);

    width: 100%
}

.focus\:outline-none:focus{

    outline: 2px solid transparent;

    outline-offset: 2px
}

.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-primary:focus{

    --tw-ring-opacity: 1;

    --tw-ring-color: var(--fallback-p,oklch(var(--p)/var(--tw-ring-opacity, 1)))
}

.focus\:ring-opacity-50:focus{

    --tw-ring-opacity: 0.5
}

.focus\:after\:w-full:focus::after{

    content: var(--tw-content);

    width: 100%
}

@media (min-width: 640px){

    .sm\:block{

        display: block
    }

    .sm\:w-72{

        width: 18rem
    }

    .sm\:grid-cols-2{

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

@media (min-width: 768px){

    .md\:mx-auto{

        margin-left: auto;

        margin-right: auto
    }

    .md\:mb-12{

        margin-bottom: 3rem
    }

    .md\:mb-6{

        margin-bottom: 1.5rem
    }

    .md\:mb-8{

        margin-bottom: 2rem
    }

    .md\:ml-6{

        margin-left: 1.5rem
    }

    .md\:mt-12{

        margin-top: 3rem
    }

    .md\:block{

        display: block
    }

    .md\:inline-block{

        display: inline-block
    }

    .md\:inline{

        display: inline
    }

    .md\:flex{

        display: flex
    }

    .md\:hidden{

        display: none
    }

    .md\:h-20{

        height: 5rem
    }

    .md\:h-\[40px\]{

        height: 40px
    }

    .md\:w-1\/2{

        width: 50%
    }

    .md\:w-20{

        width: 5rem
    }

    .md\:w-24{

        width: 6rem
    }

    .md\:w-72{

        width: 18rem
    }

    .md\:w-80{

        width: 20rem
    }

    .md\:max-w-\[1100px\]{

        max-width: 1100px
    }

    .md\:grid-cols-2{

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

    .md\:grid-cols-3{

        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .md\:grid-cols-5{

        grid-template-columns: repeat(5, minmax(0, 1fr))
    }

    .md\:flex-row{

        flex-direction: row
    }

    .md\:gap-6{

        gap: 1.5rem
    }

    .md\:rounded-full{

        border-radius: 9999px
    }

    .md\:border-4{

        border-width: 4px
    }

    .md\:border-primary{

        --tw-border-opacity: 1;

        border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity, 1)))
    }

    .md\:bg-ccc-grey-light{

        --tw-bg-opacity: 1;

        background-color: rgb(237 234 229 / var(--tw-bg-opacity, 1))
    }

    .md\:p-2{

        padding: 0.5rem
    }

    .md\:pt-6{

        padding-top: 1.5rem
    }

    .md\:text-left{

        text-align: left
    }

    .md\:text-center{

        text-align: center
    }

    .md\:text-3xl{

        font-size: 1.875rem;

        line-height: 2.25rem
    }

    .md\:text-\[32px\]{

        font-size: 32px
    }

    .md\:text-\[64px\]{

        font-size: 64px
    }

    .md\:leading-\[76\.8px\]{

        line-height: 76.8px
    }

    .md\:text-black{

        --tw-text-opacity: 1;

        color: rgb(0 0 0 / var(--tw-text-opacity, 1))
    }
}

@media (min-width: 1024px){

    .lg\:mx-28{

        margin-left: 7rem;

        margin-right: 7rem
    }

    .lg\:mb-12{

        margin-bottom: 3rem
    }

    .lg\:mb-24{

        margin-bottom: 6rem
    }

    .lg\:mt-12{

        margin-top: 3rem
    }

    .lg\:inline{

        display: inline
    }

    .lg\:flex{

        display: flex
    }

    .lg\:hidden{

        display: none
    }

    .lg\:w-96{

        width: 24rem
    }

    .lg\:min-w-32{

        min-width: 8rem
    }

    .lg\:grid-cols-3{

        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .lg\:grid-cols-4{

        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .lg\:pr-24{

        padding-right: 6rem
    }
}

@media (min-width: 1280px){

    .xl\:block{

        display: block
    }

    .xl\:w-96{

        width: 24rem
    }

    .xl\:grid-cols-4{

        grid-template-columns: repeat(4, minmax(0, 1fr))
    }
}