:root{
    --spacing-auto:auto;
    --spacing-xxs:0.375rem;
    --spacing-xs:0.5rem;
    --spacing-sm:1rem;
    --spacing-md:2rem;
    --spacing-lg:4rem;
    --sizing-auto:auto;
    --sizing-none:none;
    --sizing-full:100%;
    --sizing-xxs:16rem;
    --sizing-xs:20rem;
    --sizing-sm:24rem;
    --sizing-md:28rem;
    --sizing-lg:32rem;
    --sizing-xl:36rem;
    --sizing-2xl:40rem;
    --sizing-3xl:48rem;
    --sizing-4xl:56rem;
    --sizing-5xl:64rem;
    --sizing-6xl:72rem;
    --sizing-7xl:80rem;
    --sizing-8xl:90rem;
    --glow-spacing-x:var(--spacing-md);
    --glow-spacing-y:var(--spacing-lg);
    --spacing-1:0.25rem;
    --spacing-2:0.5rem;
    --spacing-3:0.75rem;
    --spacing-4:1rem;
    --spacing-5:1.25rem;
    --spacing-6:1.5rem;
    --spacing-8:2rem;
    --spacing-10:2.5rem;
    --spacing-12:3rem;
    --spacing-16:4rem;
    --spacing-20:5rem;
    --spacing-24:6rem;
    --spacing-32:8rem;
    --spacing-40:10rem;
    --spacing-48:12rem;
    --spacing-56:14rem;
    --spacing-64:16rem

}
.drac-box{
    @apply box-border
}
.drac-box h1,.drac-box h2,.drac-box h3,.drac-box h4{
    @apply m-0
}
.drac-p-none{
    @apply pt-[var(--spacing-none)] pr-[var(--spacing-none)] pb-[var(--spacing-none)] pl-[var(--spacing-none)]
}
.drac-px-none{
    @apply pl-[var(--spacing-none)] pr-[var(--spacing-none)]
}
.drac-py-none{
    @apply pb-[var(--spacing-none)] pt-[var(--spacing-none)]
}
.drac-pl-none{
    @apply pl-[var(--spacing-none)]
}
.drac-pr-none{
    @apply pr-[var(--spacing-none)]
}
.drac-pt-none{
    @apply pt-[var(--spacing-none)]
}
.drac-pb-none{
    @apply pb-[var(--spacing-none)]
}
.drac-p-xxs{
    @apply pt-[var(--spacing-xxs)] pr-[var(--spacing-xxs)] pb-[var(--spacing-xxs)] pl-[var(--spacing-xxs)]
}
.drac-px-xxs{
    @apply pl-[var(--spacing-xxs)] pr-[var(--spacing-xxs)]
}
.drac-py-xxs{
    @apply pb-[var(--spacing-xxs)] pt-[var(--spacing-xxs)]
}
.drac-pl-xxs{
    @apply pl-[var(--spacing-xxs)]
}
.drac-pr-xxs{
    @apply pr-[var(--spacing-xxs)]
}
.drac-pt-xxs{
    @apply pt-[var(--spacing-xxs)]
}
.drac-pb-xxs{
    @apply pb-[var(--spacing-xxs)]
}
.drac-p-xs{
    @apply pt-[var(--spacing-xs)] pr-[var(--spacing-xs)] pb-[var(--spacing-xs)] pl-[var(--spacing-xs)]
}
.drac-px-xs{
    @apply pl-[var(--spacing-xs)] pr-[var(--spacing-xs)]
}
.drac-py-xs{
    @apply pb-[var(--spacing-xs)] pt-[var(--spacing-xs)]
}
.drac-pl-xs{
    @apply pl-[var(--spacing-xs)]
}
.drac-pr-xs{
    @apply pr-[var(--spacing-xs)]
}
.drac-pt-xs{
    @apply pt-[var(--spacing-xs)]
}
.drac-pb-xs{
    @apply pb-[var(--spacing-xs)]
}
.drac-p-sm{
    @apply pt-[var(--spacing-sm)] pr-[var(--spacing-sm)] pb-[var(--spacing-sm)] pl-[var(--spacing-sm)]
}
.drac-px-sm{
    @apply pl-[var(--spacing-sm)] pr-[var(--spacing-sm)]
}
.drac-py-sm{
    @apply pb-[var(--spacing-sm)] pt-[var(--spacing-sm)]
}
.drac-pl-sm{
    @apply pl-[var(--spacing-sm)]
}
.drac-pr-sm{
    @apply pr-[var(--spacing-sm)]
}
.drac-pt-sm{
    @apply pt-[var(--spacing-sm)]
}
.drac-pb-sm{
    @apply pb-[var(--spacing-sm)]
}
.drac-p-md{
    @apply pt-[var(--spacing-md)] pr-[var(--spacing-md)] pb-[var(--spacing-md)] pl-[var(--spacing-md)]
}
.drac-px-md{
    @apply pl-[var(--spacing-md)] pr-[var(--spacing-md)]
}
.drac-py-md{
    @apply pb-[var(--spacing-md)] pt-[var(--spacing-md)]
}
.drac-pl-md{
    @apply pl-[var(--spacing-md)]
}
.drac-pr-md{
    @apply pr-[var(--spacing-md)]
}
.drac-pt-md{
    @apply pt-[var(--spacing-md)]
}
.drac-pb-md{
    @apply pb-[var(--spacing-md)]
}
.drac-p-lg{
    @apply pt-[var(--spacing-lg)] pr-[var(--spacing-lg)] pb-[var(--spacing-lg)] pl-[var(--spacing-lg)]
}
.drac-px-lg{
    @apply pl-[var(--spacing-lg)] pr-[var(--spacing-lg)]
}
.drac-py-lg{
    @apply pb-[var(--spacing-lg)] pt-[var(--spacing-lg)]
}
.drac-pl-lg{
    @apply pl-[var(--spacing-lg)]
}
.drac-pr-lg{
    @apply pr-[var(--spacing-lg)]
}
.drac-pt-lg{
    @apply pt-[var(--spacing-lg)]
}
.drac-pb-lg{
    @apply pb-[var(--spacing-lg)]
}
.drac-m-auto{
    @apply mt-[var(--spacing-auto)] mr-[var(--spacing-auto)] mb-[var(--spacing-auto)] ml-[var(--spacing-auto)]
}
.drac-mx-auto{
    @apply ml-[var(--spacing-auto)] mr-[var(--spacing-auto)]
}
.drac-my-auto{
    @apply mb-[var(--spacing-auto)] mt-[var(--spacing-auto)]
}
.drac-ml-auto{
    @apply ml-[var(--spacing-auto)]
}
.drac-mr-auto{
    @apply mr-[var(--spacing-auto)]
}
.drac-mt-auto{
    @apply mt-[var(--spacing-auto)]
}
.drac-mb-auto{
    @apply mb-[var(--spacing-auto)]
}
.drac-m-none{
    @apply mt-[var(--spacing-none)] mr-[var(--spacing-none)] mb-[var(--spacing-none)] ml-[var(--spacing-none)]
}
.drac-mx-none{
    @apply ml-[var(--spacing-none)] mr-[var(--spacing-none)]
}
.drac-my-none{
    @apply mb-[var(--spacing-none)] mt-[var(--spacing-none)]
}
.drac-ml-none{
    @apply ml-[var(--spacing-none)]
}
.drac-mr-none{
    @apply mr-[var(--spacing-none)]
}
.drac-mt-none{
    @apply mt-[var(--spacing-none)]
}
.drac-mb-none{
    @apply mb-[var(--spacing-none)]
}
.drac-m-xxs{
    @apply mt-[var(--spacing-xxs)] mr-[var(--spacing-xxs)] mb-[var(--spacing-xxs)] ml-[var(--spacing-xxs)]
}
.drac-mx-xxs{
    @apply ml-[var(--spacing-xxs)] mr-[var(--spacing-xxs)]
}
.drac-my-xxs{
    @apply mb-[var(--spacing-xxs)] mt-[var(--spacing-xxs)]
}
.drac-ml-xxs{
    @apply ml-[var(--spacing-xxs)]
}
.drac-mr-xxs{
    @apply mr-[var(--spacing-xxs)]
}
.drac-mt-xxs{
    @apply mt-[var(--spacing-xxs)]
}
.drac-mb-xxs{
    @apply mb-[var(--spacing-xxs)]
}
.drac-m-xs{
    @apply mt-[var(--spacing-xs)] mr-[var(--spacing-xs)] mb-[var(--spacing-xs)] ml-[var(--spacing-xs)]
}
.drac-mx-xs{
    @apply ml-[var(--spacing-xs)] mr-[var(--spacing-xs)]
}
.drac-my-xs{
    @apply mb-[var(--spacing-xs)] mt-[var(--spacing-xs)]
}
.drac-ml-xs{
    @apply ml-[var(--spacing-xs)]
}
.drac-mr-xs{
    @apply mr-[var(--spacing-xs)]
}
.drac-mt-xs{
    @apply mt-[var(--spacing-xs)]
}
.drac-mb-xs{
    @apply mb-[var(--spacing-xs)]
}
.drac-m-sm{
    @apply mt-[var(--spacing-sm)] mr-[var(--spacing-sm)] mb-[var(--spacing-sm)] ml-[var(--spacing-sm)]
}
.drac-mx-sm{
    @apply ml-[var(--spacing-sm)] mr-[var(--spacing-sm)]
}
.drac-my-sm{
    @apply mb-[var(--spacing-sm)] mt-[var(--spacing-sm)]
}
.drac-ml-sm{
    @apply ml-[var(--spacing-sm)]
}
.drac-mr-sm{
    @apply mr-[var(--spacing-sm)]
}
.drac-mt-sm{
    @apply mt-[var(--spacing-sm)]
}
.drac-mb-sm{
    @apply mb-[var(--spacing-sm)]
}
.drac-m-md{
    @apply mt-[var(--spacing-md)] mr-[var(--spacing-md)] mb-[var(--spacing-md)] ml-[var(--spacing-md)]
}
.drac-mx-md{
    @apply ml-[var(--spacing-md)] mr-[var(--spacing-md)]
}
.drac-my-md{
    @apply mb-[var(--spacing-md)] mt-[var(--spacing-md)]
}
.drac-ml-md{
    @apply ml-[var(--spacing-md)]
}
.drac-mr-md{
    @apply mr-[var(--spacing-md)]
}
.drac-mt-md{
    @apply mt-[var(--spacing-md)]
}
.drac-mb-md{
    @apply mb-[var(--spacing-md)]
}
.drac-m-lg{
    @apply mt-[var(--spacing-lg)] mr-[var(--spacing-lg)] mb-[var(--spacing-lg)] ml-[var(--spacing-lg)]
}
.drac-mx-lg{
    @apply ml-[var(--spacing-lg)] mr-[var(--spacing-lg)]
}
.drac-my-lg{
    @apply mb-[var(--spacing-lg)] mt-[var(--spacing-lg)]
}
.drac-ml-lg{
    @apply ml-[var(--spacing-lg)]
}
.drac-mr-lg{
    @apply mr-[var(--spacing-lg)]
}
.drac-mt-lg{
    @apply mt-[var(--spacing-lg)]
}
.drac-mb-lg{
    @apply mb-[var(--spacing-lg)]
}
.drac-h-auto{
    @apply h-[var(--sizing-auto)]
}
.drac-w-auto{
    @apply w-[var(--sizing-auto)]
}
.drac-h-none{
    @apply h-[var(--sizing-none)]
}
.drac-w-none{
    @apply w-[var(--sizing-none)]
}
.drac-h-full{
    @apply h-[var(--sizing-full)]
}
.drac-w-full{
    @apply w-[var(--sizing-full)]
}
.drac-h-xxs{
    @apply h-[var(--sizing-xxs)]
}
.drac-w-xxs{
    @apply w-[var(--sizing-xxs)]
}
.drac-h-xs{
    @apply h-[var(--sizing-xs)]
}
.drac-w-xs{
    @apply w-[var(--sizing-xs)]
}
.drac-h-sm{
    @apply h-[var(--sizing-sm)]
}
.drac-w-sm{
    @apply w-[var(--sizing-sm)]
}
.drac-h-md{
    @apply h-[var(--sizing-md)]
}
.drac-w-md{
    @apply w-[var(--sizing-md)]
}
.drac-h-lg{
    @apply h-[var(--sizing-lg)]
}
.drac-w-lg{
    @apply w-[var(--sizing-lg)]
}
.drac-h-xl{
    @apply h-[var(--sizing-xl)]
}
.drac-w-xl{
    @apply w-[var(--sizing-xl)]
}
.drac-h-2xl{
    @apply h-[var(--sizing-2xl)]
}
.drac-w-2xl{
    @apply w-[var(--sizing-2xl)]
}
.drac-h-3xl{
    @apply h-[var(--sizing-3xl)]
}
.drac-w-3xl{
    @apply w-[var(--sizing-3xl)]
}
.drac-h-4xl{
    @apply h-[var(--sizing-4xl)]
}
.drac-w-4xl{
    @apply w-[var(--sizing-4xl)]
}
.drac-h-5xl{
    @apply h-[var(--sizing-5xl)]
}
.drac-w-5xl{
    @apply w-[var(--sizing-5xl)]
}
.drac-h-6xl{
    @apply h-[var(--sizing-6xl)]
}
.drac-w-6xl{
    @apply w-[var(--sizing-6xl)]
}
.drac-h-7xl{
    @apply h-[var(--sizing-7xl)]
}
.drac-w-7xl{
    @apply w-[var(--sizing-7xl)]
}
.drac-h-8xl{
    @apply h-[var(--sizing-8xl)]
}
.drac-w-8xl{
    @apply w-[var(--sizing-8xl)]
}
:root{
    --black:#21222c;
    --blackSecondary:#414558;
    --blackTernary:#a7abbe;
    --blackLight:rgba(33,34,44,.05);
    --grey:#414558;
    --greySecondary:#626784;
    --greyTernary:#b6b9c9;
    --greyLight:rgba(65,69,88,.05);
    --white:#f8f8f2;
    --whiteSecondary:#fff;
    --whiteLight:hsla(60,30%,96%,.05);
    --cyan:#80ffea;
    --cyanSecondary:#ccfff6;
    --cyanLight:rgba(128,255,234,.05);
    --green:#8aff80;
    --greenSecondary:#d0ffcc;
    --greenLight:rgba(138,255,128,.05);
    --orange:#ffca80;
    --orangeSecondary:#ffeacc;
    --orangeLight:rgba(255,202,128,.05);
    --pink:#ff80bf;
    --pinkSecondary:#ffcce6;
    --pinkLight:rgba(255,128,191,.05);
    --purple:#9580ff;
    --purpleSecondary:#d4ccff;
    --purpleLight:rgba(149,128,255,.05);
    --red:#ff9580;
    --redSecondary:#ffd4cc;
    --redLight:rgba(255,149,128,.05);
    --yellow:#ffff80;
    --yellowSecondary:#ffc;
    --yellowLight:rgba(255,255,128,.05);
    --cyan-transparent:rgba(128,255,234,.1);
    --green-transparent:rgba(138,255,128,.1);
    --orange-transparent:rgba(255,202,128,.1);
    --pink-transparent:rgba(255,128,191,.1);
    --purple-transparent:rgba(149,128,255,.1);
    --red-transparent:rgba(255,149,128,.1);
    --yellow-transparent:rgba(255,255,128,.1);
    --disabled:#6c7393;
    --gradientDegree:135deg;
    --glowColor:hsla(0,0%,100%,.25);
    --cyan-100:rgba(128,255,234,.1);
    --green-100:rgba(138,255,128,.1);
    --orange-100:rgba(255,202,128,.1);
    --pink-100:rgba(255,128,191,.1);
    --purple-100:rgba(149,128,255,.1);
    --red-100:rgba(255,149,128,.1);
    --yellow-100:rgba(255,255,128,.1);
    --cyan-200:rgba(128,255,234,.2);
    --green-200:rgba(138,255,128,.2);
    --orange-200:rgba(255,202,128,.2);
    --pink-200:rgba(255,128,191,.2);
    --purple-200:rgba(149,128,255,.2);
    --red-200:rgba(255,149,128,.2);
    --yellow-200:rgba(255,255,128,.2);
    --cyan-300:rgba(128,255,234,.3);
    --green-300:rgba(138,255,128,.3);
    --orange-300:rgba(255,202,128,.3);
    --pink-300:rgba(255,128,191,.3);
    --purple-300:rgba(149,128,255,.3);
    --red-300:rgba(255,149,128,.3);
    --yellow-300:rgba(255,255,128,.3);
    --cyan-400:rgba(128,255,234,.4);
    --green-400:rgba(138,255,128,.4);
    --orange-400:rgba(255,202,128,.4);
    --pink-400:rgba(255,128,191,.4);
    --purple-400:rgba(149,128,255,.4);
    --red-400:rgba(255,149,128,.4);
    --yellow-400:rgba(255,255,128,.4);
    --cyan-500:rgba(128,255,234,.5);
    --green-500:rgba(138,255,128,.5);
    --orange-500:rgba(255,202,128,.5);
    --pink-500:rgba(255,128,191,.5);
    --purple-500:rgba(149,128,255,.5);
    --red-500:rgba(255,149,128,.5);
    --yellow-500:rgba(255,255,128,.5);
    --cyan-600:rgba(128,255,234,.6);
    --green-600:rgba(138,255,128,.6);
    --orange-600:rgba(255,202,128,.6);
    --pink-600:rgba(255,128,191,.6);
    --purple-600:rgba(149,128,255,.6);
    --red-600:rgba(255,149,128,.6);
    --yellow-600:rgba(255,255,128,.6);
    --cyan-700:rgba(128,255,234,.7);
    --green-700:rgba(138,255,128,.7);
    --orange-700:rgba(255,202,128,.7);
    --pink-700:rgba(255,128,191,.7);
    --purple-700:rgba(149,128,255,.7);
    --red-700:rgba(255,149,128,.7);
    --yellow-700:rgba(255,255,128,.7);
    --cyan-800:rgba(128,255,234,.8);
    --green-800:rgba(138,255,128,.8);
    --orange-800:rgba(255,202,128,.8);
    --pink-800:rgba(255,128,191,.8);
    --purple-800:rgba(149,128,255,.8);
    --red-800:rgba(255,149,128,.8);
    --yellow-800:rgba(255,255,128,.8);
    --cyan-900:rgba(128,255,234,.9);
    --green-900:rgba(138,255,128,.9);
    --orange-900:rgba(255,202,128,.9);
    --pink-900:rgba(255,128,191,.9);
    --purple-900:rgba(149,128,255,.9);
    --red-900:rgba(255,149,128,.9);
    --yellow-900:rgba(255,255,128,.9);
    --accentColor:var(--purple);
    --purple-cyan:linear-gradient(var(--gradientDegree),var(--purple) 0%,var(--cyan) 100%);
    --yellow-pink:linear-gradient(var(--gradientDegree),var(--yellow) 0%,var(--pink) 100%);
    --cyan-green:linear-gradient(var(--gradientDegree),var(--cyan) 0%,var(--green) 100%);
    --pink-purple:linear-gradient(var(--gradientDegree),var(--pink) 0%,var(--purple) 100%)

}
.drac-bg-purple-cyan{
    background:linear-gradient(var(--gradientDegree),var(--purple) 0,var(--cyan) 100%)
}
.drac-bg-purple-cyan-transparent{
    background:linear-gradient(var(--gradientDegree),var(--purple-transparent) 0,var(--cyan-transparent) 100%)
}
.drac-text-purple-cyan{
    @apply bg-clip-text bg-[linear-gradient(var(--gradientDegree),var(--purple)_0,var(--cyan)_100%)] bg-[100%];
    -webkit-text-fill-color:transparent;
    -moz-text-fill-color:transparent;
    -webkit-background-clip:text;
    -moz-background-clip:text;
    -webkit-box-decoration-break:clone
}
.drac-bg-yellow-pink{
    background:linear-gradient(var(--gradientDegree),var(--yellow) 0,var(--pink) 100%)
}
.drac-bg-yellow-pink-transparent{
    background:linear-gradient(var(--gradientDegree),var(--yellow-transparent) 0,var(--pink-transparent) 100%)
}
.drac-text-yellow-pink{
    @apply bg-clip-text bg-[linear-gradient(var(--gradientDegree),var(--yellow)_0,var(--pink)_100%)] bg-[100%];
    -webkit-text-fill-color:transparent;
    -moz-text-fill-color:transparent;
    -webkit-background-clip:text;
    -moz-background-clip:text;
    -webkit-box-decoration-break:clone
}
.drac-bg-cyan-green{
    background:linear-gradient(var(--gradientDegree),var(--cyan) 0,var(--green) 100%)
}
.drac-bg-cyan-green-transparent{
    background:linear-gradient(var(--gradientDegree),var(--cyan-transparent) 0,var(--green-transparent) 100%)
}
.drac-text-cyan-green{
    @apply bg-clip-text bg-[linear-gradient(var(--gradientDegree),var(--cyan)_0,var(--green)_100%)] bg-[100%];
    -webkit-text-fill-color:transparent;
    -moz-text-fill-color:transparent;
    -webkit-background-clip:text;
    -moz-background-clip:text;
    -webkit-box-decoration-break:clone
}
.drac-bg-pink-purple{
    background:linear-gradient(var(--gradientDegree),var(--pink) 0,var(--purple) 100%)
}
.drac-bg-pink-purple-transparent{
    background:linear-gradient(var(--gradientDegree),var(--pink-transparent) 0,var(--purple-transparent) 100%)
}
.drac-text-pink-purple{
    @apply bg-clip-text bg-[linear-gradient(var(--gradientDegree),var(--pink)_0,var(--purple)_100%)] bg-[100%];
    -webkit-text-fill-color:transparent;
    -moz-text-fill-color:transparent;
    -webkit-background-clip:text;
    -moz-background-clip:text;
    -webkit-box-decoration-break:clone
}
.drac-bg-black{
    @apply bg-[color:var(--black)]
}
.drac-bg-black-secondary{
    @apply bg-[color:var(--blackSecondary)];
    --accentColor:var(--blackSecondary)
}
.drac-bg-black-transparent{
    @apply bg-[color:var(--black-transparent)];
    --accentColor:var(--black-transparent)
}
.drac-text-black{
    @apply text-[color:var(--black)]
}
.drac-text-black-secondary{
    @apply text-[color:var(--blackSecondary)]
}
.drac-glow-black{
    @apply bg-[color:var(--black)];
    --glowColor:var(--black)
}
.drac-border-black{
    --borderColor:var(--black)

}
.drac-bg-grey{
    @apply bg-[color:var(--grey)]
}
.drac-bg-grey-secondary{
    @apply bg-[color:var(--greySecondary)];
    --accentColor:var(--greySecondary)
}
.drac-bg-grey-transparent{
    @apply bg-[color:var(--grey-transparent)];
    --accentColor:var(--grey-transparent)
}
.drac-text-grey{
    @apply text-[color:var(--grey)]
}
.drac-text-grey-secondary{
    @apply text-[color:var(--greySecondary)]
}
.drac-glow-grey{
    @apply bg-[color:var(--grey)];
    --glowColor:var(--grey)
}
.drac-border-grey{
    @apply border-[color:var(--grey)];
    --borderColor:var(--grey)
}
.drac-bg-white{
    @apply bg-[color:var(--white)]
}
.drac-bg-white-secondary{
    @apply bg-[color:var(--whiteSecondary)];
    --accentColor:var(--whiteSecondary)
}
.drac-bg-white-transparent{
    @apply bg-[color:var(--white-transparent)];
    --accentColor:var(--white-transparent)
}
.drac-text-white{
    @apply text-[color:var(--white)]
}
.drac-text-white-secondary{
    @apply text-[color:var(--whiteSecondary)]
}
.drac-glow-white{
    @apply bg-[color:var(--white)];
    --glowColor:var(--white)
}
.drac-border-white{
    --borderColor:var(--white)

}
.drac-bg-cyan{
    @apply bg-[color:var(--cyan)]
}
.drac-bg-cyan-secondary{
    @apply bg-[color:var(--cyanSecondary)];
    --accentColor:var(--cyanSecondary)
}
.drac-bg-cyan-transparent{
    @apply bg-[color:var(--cyan-transparent)];
    --accentColor:var(--cyan-transparent)
}
.drac-text-cyan{
    @apply text-[color:var(--cyan)]
}
.drac-text-cyan-secondary{
    @apply text-[color:var(--cyanSecondary)]
}
.drac-glow-cyan{
    @apply bg-[color:var(--cyan)];
    --glowColor:var(--cyan)
}
.drac-border-cyan{
    --borderColor:var(--cyan)

}
.drac-bg-green{
    @apply bg-[color:var(--green)]
}
.drac-bg-green-secondary{
    @apply bg-[color:var(--greenSecondary)];
    --accentColor:var(--greenSecondary)
}
.drac-bg-green-transparent{
    @apply bg-[color:var(--green-transparent)];
    --accentColor:var(--green-transparent)
}
.drac-text-green{
    @apply text-[color:var(--green)]
}
.drac-text-green-secondary{
    @apply text-[color:var(--greenSecondary)]
}
.drac-glow-green{
    @apply bg-[color:var(--green)];
    --glowColor:var(--green)
}
.drac-border-green{
    --borderColor:var(--green)

}
.drac-bg-orange{
    @apply bg-[color:var(--orange)]
}
.drac-bg-orange-secondary{
    @apply bg-[color:var(--orangeSecondary)];
    --accentColor:var(--orangeSecondary)
}
.drac-bg-orange-transparent{
    @apply bg-[color:var(--orange-transparent)];
    --accentColor:var(--orange-transparent)
}
.drac-text-orange{
    @apply text-[color:var(--orange)]
}
.drac-text-orange-secondary{
    @apply text-[color:var(--orangeSecondary)]
}
.drac-glow-orange{
    @apply bg-[color:var(--orange)];
    --glowColor:var(--orange)
}
.drac-border-orange{
    --borderColor:var(--orange)

}
.drac-bg-pink{
    @apply bg-[color:var(--pink)]
}
.drac-bg-pink-secondary{
    @apply bg-[color:var(--pinkSecondary)];
    --accentColor:var(--pinkSecondary)
}
.drac-bg-pink-transparent{
    @apply bg-[color:var(--pink-transparent)];
    --accentColor:var(--pink-transparent)
}
.drac-text-pink{
    @apply text-[color:var(--pink)]
}
.drac-text-pink-secondary{
    @apply text-[color:var(--pinkSecondary)]
}
.drac-glow-pink{
    @apply bg-[color:var(--pink)];
    --glowColor:var(--pink)
}
.drac-border-pink{
    --borderColor:var(--pink)

}
.drac-bg-purple{
    @apply bg-[color:var(--purple)]
}
.drac-bg-purple-secondary{
    @apply bg-[color:var(--purpleSecondary)];
    --accentColor:var(--purpleSecondary)
}
.drac-bg-purple-transparent{
    @apply bg-[color:var(--purple-transparent)];
    --accentColor:var(--purple-transparent)
}
.drac-text-purple{
    @apply text-[color:var(--purple)]
}
.drac-text-purple-secondary{
    @apply text-[color:var(--purpleSecondary)]
}
.drac-glow-purple{
    @apply bg-[color:var(--purple)];
    --glowColor:var(--purple)
}
.drac-border-purple{
    --borderColor:var(--purple)

}
.drac-bg-red{
    @apply bg-[color:var(--red)]
}
.drac-bg-red-secondary{
    @apply bg-[color:var(--redSecondary)];
    --accentColor:var(--redSecondary)
}
.drac-bg-red-transparent{
    @apply bg-[color:var(--red-transparent)];
    --accentColor:var(--red-transparent)
}
.drac-text-red{
    @apply text-[color:var(--red)]
}
.drac-text-red-secondary{
    @apply text-[color:var(--redSecondary)]
}
.drac-glow-red{
    @apply bg-[color:var(--red)];
    --glowColor:var(--red)
}
.drac-border-red{
    --borderColor:var(--red)

}
.drac-bg-yellow{
    @apply bg-[color:var(--yellow)]
}
.drac-bg-yellow-secondary{
    @apply bg-[color:var(--yellowSecondary)];
    --accentColor:var(--yellowSecondary)
}
.drac-bg-yellow-transparent{
    @apply bg-[color:var(--yellow-transparent)];
    --accentColor:var(--yellow-transparent)
}
.drac-text-yellow{
    @apply text-[color:var(--yellow)]
}
.drac-text-yellow-secondary{
    @apply text-[color:var(--yellowSecondary)]
}
.drac-glow-yellow{
    @apply bg-[color:var(--yellow)];
    --glowColor:var(--yellow)
}
.drac-border-yellow{
    --borderColor:var(--yellow)

}
.drac-bg-animated{
    @apply animate-[animatedGradient_6s_ease_infinite_alternate] bg-[linear-gradient(var(--gradientDegree),var(--orange),var(--yellow),var(--red),var(--pink),var(--purple),var(--cyan),var(--green))] bg-[300%_300%] content-[""]
}
:root{
    --border-size:0.1rem;
    --rounded-none:0;
    --rounded-sm:0.125rem;
    --rounded:0.25rem;
    --rounded-md:0.375rem;
    --rounded-lg:0.5rem;
    --rounded-xl:0.75rem;
    --rounded-2xl:1rem;
    --rounded-3xl:1.5rem;
    --rounded-full:9999px

}
.drac-border-black{
    @apply border-[color:var(--black)]
}
.drac-border-white{
    @apply border-[color:var(--white)]
}
.drac-border-cyan{
    @apply border-[color:var(--cyan)]
}
.drac-border-green{
    @apply border-[color:var(--green)]
}
.drac-border-orange{
    @apply border-[color:var(--orange)]
}
.drac-border-pink{
    @apply border-[color:var(--pink)]
}
.drac-border-purple{
    @apply border-[color:var(--purple)]
}
.drac-border-red{
    @apply border-[color:var(--red)]
}
.drac-border-yellow{
    @apply border-[color:var(--yellow)]
}
.drac-rounded-none{
    @apply rounded-[var(--rounded-none)]
}
.drac-rounded-sm{
    @apply rounded-[var(--rounded-sm)]
}
.drac-rounded{
    @apply rounded-[var(--rounded)]
}
.drac-rounded-md{
    @apply rounded-[var(--rounded-md)]
}
.drac-rounded-lg{
    @apply rounded-[var(--rounded-lg)]
}
.drac-rounded-xl{
    @apply rounded-[var(--rounded-xl)]
}
.drac-rounded-2xl{
    @apply rounded-[var(--rounded-2xl)]
}
.drac-rounded-3xl{
    @apply rounded-[var(--rounded-3xl)]
}
.drac-rounded-full{
    @apply rounded-[var(--rounded-full)]
}
:root{
    --display-none:none;
    --display-block:block;
    --display-flex:flex;
    --display-grid:grid;
    --display-table:table;
    --display-inline:inline;
    --display-inline-block:inline-block;
    --display-inline-flex:inline-flex;
    --display-inline-grid:inline-grid;
    --display-inline-table:inline-table

}
.drac-d-none{
    display:var(--display-none)
}
.drac-d-block{
    display:var(--display-block)
}
.drac-d-flex{
    display:var(--display-flex)
}
.drac-d-grid{
    display:var(--display-grid)
}
.drac-d-table{
    display:var(--display-table)
}
.drac-d-inline{
    display:var(--display-inline)
}
.drac-d-inline-block{
    display:var(--display-inline-block)
}
.drac-d-inline-flex{
    display:var(--display-inline-flex)
}
.drac-d-inline-grid{
    display:var(--display-inline-grid)
}
.drac-d-inline-table{
    display:var(--display-inline-table)
}
:root{
    --font-xs:0.75rem;
    --font-sm:0.875rem;
    --font-md:1rem;
    --font-lg:1.125rem;
    --font-xl:1.25rem;
    --font-2xl:1.5rem;
    --font-3xl:1.875rem;
    --font-4xl:2.25rem;
    --font-5xl:3rem;
    --font-6xl:4rem;
    --line-height-xs:1;
    --line-height-sm:1.25;
    --line-height-md:1.375;
    --line-height-lg:1.5;
    --line-height-xl:1.625;
    --line-height-2xl:2

}
.drac-btn,.drac-heading,.drac-input,.drac-select,.drac-text{
    font-family:Fira Code,monospace
}
.drac-heading{
    @apply m-0 text-[length:var(--font-lg)]
}
code{
    @apply rounded-[var(--rounded-sm)] text-[color:var(--purple-900)] px-[0.3rem] py-[0.1rem];
    background:var(--purple-100);
    font-family:Fira Code,monospace
}
.drac-heading-2xl{
    @apply text-[length:var(--font-5xl)]
}
.drac-heading-xl{
    @apply text-[length:var(--font-2xl)]
}
.drac-heading-lg{
    @apply text-[length:var(--font-xl)]
}
.drac-heading-sm{
    @apply text-[length:var(--font-md)]
}
.drac-heading-xs{
    @apply text-[length:var(--font-sm)]
}
.drac-text-bold{
    @apply font-bold
}
.drac-text-semibold{
    @apply font-semibold
}
.drac-text{
    @apply text-[length:var(--font-md)]
}
.drac-text.drac-text-lg{
    @apply text-[length:var(--font-lg)]
}
.drac-text.drac-text-sm{
    @apply text-[length:var(--font-sm)]
}
.drac-text.drac-text-xs{
    @apply text-[length:var(--font-xs)]
}
.drac-line-height{
    @apply leading-[var(--line-height-md)]
}
.drac-line-height-2xl{
    @apply leading-[var(--line-height-2xl)]
}
.drac-line-height-xl{
    @apply leading-[var(--line-height-xl)]
}
.drac-line-height-lg{
    @apply leading-[var(--line-height-lg)]
}
.drac-line-height-sm{
    @apply leading-[var(--line-height-sm)]
}
.drac-line-height-xs{
    @apply leading-[var(--line-height-xs)]
}
.drac-text-left{
    @apply text-left
}
.drac-text-center{
    @apply text-center
}
.drac-text-right{
    @apply text-right
}
.drac-text-justify{
    @apply text-justify
}
.drac-btn{
    @apply appearance-none rounded-[var(--rounded-lg)] box-border cursor-pointer inline-block text-center no-underline border-[none] disabled:bg-[color:var(--disabled)] disabled:text-[color:var(--black)] disabled:cursor-not-allowed text-[length:var(--font-md)] h-[var(--spacing-10)] leading-[var(--spacing-10)] min-w-[var(--spacing-10)] pr-[var(--spacing-4)] pl-[var(--spacing-4)] py-0;
    -webkit-appearance:none;
    -moz-appearance:none
}
.drac-btn:active,.drac-btn:focus{
    @apply shadow-[inset_-4px_-4px_1px_hsla(0,0%,100%,0.3)] opacity-75;
    outline:0
}
.drac-btn:not(:disabled):hover{
    @apply shadow-[4px_4px_hsla(0,0%,100%,0.1)] opacity-75
}
.drac-btn:not(:disabled):disabled:hover{
    @apply shadow-none
}
.drac-btn-outline{
    @apply bg-transparent border-[length:var(--border-size)] border-solid disabled:bg-transparent disabled:border-[color:var(--disabled)] disabled:text-[color:var(--disabled)]
}
.drac-btn-outline:disabled .drac-text{
    @apply text-[color:var(--disabled)]
}
.drac-btn-ghost:active,.drac-btn-ghost:focus,.drac-btn-ghost:not(:disabled):hover{
    @apply bg-[hsla(0,0%,100%,0.1)] shadow-none
}
.drac-btn-ghost:disabled{
    @apply bg-[color:var(--disabled)] text-[color:var(--black)]
}
.drac-btn-ghost:disabled .drac-text{
    @apply text-[color:var(--black)]
}
.drac-btn.drac-btn-xs{
    @apply text-[length:var(--font-xs)] h-[var(--spacing-6)] leading-[var(--spacing-6)] min-w-[var(--spacing-6)] pr-[var(--spacing-2)] pl-[var(--spacing-2)] py-0
}
.drac-btn.drac-btn-sm{
    @apply text-[length:var(--font-sm)] h-[var(--spacing-8)] leading-[var(--spacing-8)] min-w-[var(--spacing-8)] pr-[var(--spacing-3)] pl-[var(--spacing-3)] py-0
}
.drac-btn.drac-btn-lg{
    @apply text-[length:var(--font-lg)] h-[var(--spacing-12)] leading-[var(--spacing-12)] min-w-[var(--spacing-12)] pr-[var(--spacing-6)] pl-[var(--spacing-6)] py-0
}
.drac-badge{
    @apply bg-[color:var(--accentColor)] rounded-[var(--rounded-lg)] px-6 py-4 border-[none]
}
.drac-badge,.drac-badge .drac-text{
    @apply uppercase
}
.drac-badge-outline,.drac-badge-subtle{
    @apply border-[length:var(--border-size)] border-solid
}
.drac-badge-outline{
    @apply bg-transparent
}
.drac-input{
    @apply rounded-[var(--rounded-lg)] box-border transition-all duration-[0.3s] ease-[ease-in-out] w-full border-[0.3rem] border-solid border-transparent focus:border-[color:var(--white)] text-[length:var(--font-md)] h-[var(--spacing-10)] pr-[var(--spacing-4)] pl-[var(--spacing-4)] py-0;
    -webkit-appearance:textfield;
    background:var(--blackSecondary);
    outline:none
}
.drac-input::-moz-placeholder{
    @apply text-[color:var(--blackTernary)]
}
.drac-input::placeholder{
    @apply text-[color:var(--blackTernary)]
}
.drac-input-outline{
    @apply border-[color:var(--blackTernary)];
    background:transparent
}
.drac-input-outline.drac-input-black,.drac-input-outline.drac-input-black:focus,.drac-input.drac-input-black:focus{
    @apply border-[color:var(--black)]
}
.drac-input-outline.drac-input-blackSecondary,.drac-input-outline.drac-input-blackSecondary:focus,.drac-input.drac-input-blackSecondary:focus{
    @apply border-[color:var(--blackSecondary)]
}
.drac-input-outline.drac-input-white,.drac-input-outline.drac-input-white:focus,.drac-input.drac-input-white:focus{
    @apply border-[color:var(--white)]
}
.drac-input-outline.drac-input-cyan,.drac-input-outline.drac-input-cyan:focus,.drac-input.drac-input-cyan:focus{
    @apply border-[color:var(--cyan)]
}
.drac-input-outline.drac-input-green,.drac-input-outline.drac-input-green:focus,.drac-input.drac-input-green:focus{
    @apply border-[color:var(--green)]
}
.drac-input-outline.drac-input-orange,.drac-input-outline.drac-input-orange:focus,.drac-input.drac-input-orange:focus{
    @apply border-[color:var(--orange)]
}
.drac-input-outline.drac-input-pink,.drac-input-outline.drac-input-pink:focus,.drac-input.drac-input-pink:focus{
    @apply border-[color:var(--pink)]
}
.drac-input-outline.drac-input-purple,.drac-input-outline.drac-input-purple:focus,.drac-input.drac-input-purple:focus{
    @apply border-[color:var(--purple)]
}
.drac-input-outline.drac-input-red,.drac-input-outline.drac-input-red:focus,.drac-input.drac-input-red:focus{
    @apply border-[color:var(--red)]
}
.drac-input-outline.drac-input-yellow,.drac-input-outline.drac-input-yellow:focus,.drac-input.drac-input-yellow:focus{
    @apply border-[color:var(--yellow)]
}
.drac-input.drac-input-sm{
    @apply text-[length:var(--font-sm)] h-[var(--spacing-8)] pr-[var(--spacing-3)] pl-[var(--spacing-3)] py-0
}
.drac-input.drac-input-lg{
    @apply text-[length:var(--font-lg)] h-[var(--spacing-12)] pr-[var(--spacing-6)] pl-[var(--spacing-6)] py-0
}
.drac-input.drac-input-border-sm{
    @apply border-[0.1rem]
}
.drac-input.drac-input-border-md{
    @apply border-[0.2rem]
}
.drac-input.drac-input-border-lg{
    @apply border-[0.3rem]
}
.drac-select{
    @apply appearance-none rounded-[var(--rounded-lg)] box-border text-[color:var(--white)] relative transition-all duration-[0.3s] ease-[ease-in-out] w-full border-[0.3rem] border-solid border-transparent before:bg-white before:content-[""] before:inline-block before:h-[0.45rem] before:relative before:-rotate-45 before:rotate-45 before:align-top before:w-[0.45rem] before:border-solid before:border-[0.25rem_0.25rem_0_0] before:left-[0.15rem] before:left-0 before:top-[0.15rem] focus:border-[color:var(--white)] disabled:text-[color:var(--black)] disabled:cursor-not-allowed disabled:opacity-50 text-[length:var(--font-md)] h-[var(--spacing-10)] pl-[var(--spacing-4)] pr-[var(--spacing-8)];
    -webkit-appearance:none;
    -moz-appearance:none;
    background:var(--blackSecondary);
    outline:none
}
.drac-select::-moz-placeholder{
    @apply text-[color:var(--blackTernary)]
}
.drac-select::placeholder{
    @apply text-[color:var(--blackTernary)]
}
.drac-select:disabled{
    background:var(--blackTernary)
}
.drac-select-outline:disabled{
    @apply text-[color:var(--white)]
}
.drac-select-outline,.drac-select-outline:disabled{
    @apply border-[color:var(--blackTernary)];
    background:transparent
}
.drac-select-arrow{
    @apply items-center inline-flex h-full justify-center pointer-events-none absolute right-[var(--spacing-2)] -translate-y-2/4 w-[var(--spacing-8)] z-[2] top-2/4
}
.drac-select-arrow svg{
    @apply fill-current h-[3.6rem] w-[3.6rem]
}
.drac-select:disabled+.drac-select-arrow{
    @apply text-[color:var(--black)]
}
.drac-select-outline:disabled+.drac-select-arrow{
    @apply text-[color:var(--white)] opacity-50
}
.drac-select-outline.drac-select-black,.drac-select-outline.drac-select-black:focus,.drac-select.drac-select-black:focus{
    @apply border-[color:var(--black)]
}
.drac-select-outline.drac-select-white,.drac-select-outline.drac-select-white:focus,.drac-select.drac-select-white:focus{
    @apply border-[color:var(--white)]
}
.drac-select-outline.drac-select-cyan,.drac-select-outline.drac-select-cyan:focus,.drac-select.drac-select-cyan:focus{
    @apply border-[color:var(--cyan)]
}
.drac-select-outline.drac-select-green,.drac-select-outline.drac-select-green:focus,.drac-select.drac-select-green:focus{
    @apply border-[color:var(--green)]
}
.drac-select-outline.drac-select-orange,.drac-select-outline.drac-select-orange:focus,.drac-select.drac-select-orange:focus{
    @apply border-[color:var(--orange)]
}
.drac-select-outline.drac-select-pink,.drac-select-outline.drac-select-pink:focus,.drac-select.drac-select-pink:focus{
    @apply border-[color:var(--pink)]
}
.drac-select-outline.drac-select-purple,.drac-select-outline.drac-select-purple:focus,.drac-select.drac-select-purple:focus{
    @apply border-[color:var(--purple)]
}
.drac-select-outline.drac-select-red,.drac-select-outline.drac-select-red:focus,.drac-select.drac-select-red:focus{
    @apply border-[color:var(--red)]
}
.drac-select-outline.drac-select-yellow,.drac-select-outline.drac-select-yellow:focus,.drac-select.drac-select-yellow:focus{
    @apply border-[color:var(--yellow)]
}
.drac-select.drac-select-sm{
    @apply text-[length:var(--font-sm)] h-[var(--spacing-8)]
}
.drac-select.drac-select-lg{
    @apply text-[length:var(--font-lg)] h-[var(--spacing-12)]
}
.drac-anchor{
    @apply no-underline
}
.drac-text-black\--hover:hover{
    @apply text-[color:var(--black)]
}
.drac-text-black-secondary--hover:hover{
    @apply text-[color:var(--blackSecondary)]
}
.drac-text-white\--hover:hover{
    @apply text-[color:var(--white)]
}
.drac-text-white-secondary--hover:hover{
    @apply text-[color:var(--whiteSecondary)]
}
.drac-text-cyan\--hover:hover{
    @apply text-[color:var(--cyan)]
}
.drac-text-cyan-secondary--hover:hover{
    @apply text-[color:var(--cyanSecondary)]
}
.drac-text-green\--hover:hover{
    @apply text-[color:var(--green)]
}
.drac-text-green-secondary--hover:hover{
    @apply text-[color:var(--greenSecondary)]
}
.drac-text-orange\--hover:hover{
    @apply text-[color:var(--orange)]
}
.drac-text-orange-secondary--hover:hover{
    @apply text-[color:var(--orangeSecondary)]
}
.drac-text-pink\--hover:hover{
    @apply text-[color:var(--pink)]
}
.drac-text-pink-secondary--hover:hover{
    @apply text-[color:var(--pinkSecondary)]
}
.drac-text-purple\--hover:hover{
    @apply text-[color:var(--purple)]
}
.drac-text-purple-secondary--hover:hover{
    @apply text-[color:var(--purpleSecondary)]
}
.drac-text-red\--hover:hover{
    @apply text-[color:var(--red)]
}
.drac-text-red-secondary--hover:hover{
    @apply text-[color:var(--redSecondary)]
}
.drac-text-yellow\--hover:hover{
    @apply text-[color:var(--yellow)]
}
.drac-text-yellow-secondary--hover:hover{
    @apply text-[color:var(--yellowSecondary)]
}
.drac-text-purple-cyan\--hover:hover{
    @apply bg-[linear-gradient(var(--gradientDegree),var(--purple)_0,var(--cyan)_100%)]
}
.drac-text-purple-cyan\--hover:hover,.drac-text-yellow-pink\--hover:hover{
    @apply bg-clip-text bg-[100%];
    -webkit-text-fill-color:transparent;
    -moz-text-fill-color:transparent;
    -webkit-background-clip:text;
    -moz-background-clip:text
}
.drac-text-yellow-pink\--hover:hover{
    @apply bg-[linear-gradient(var(--gradientDegree),var(--yellow)_0,var(--pink)_100%)]
}
.drac-text-cyan-green\--hover:hover{
    @apply bg-[linear-gradient(var(--gradientDegree),var(--cyan)_0,var(--green)_100%)]
}
.drac-text-cyan-green\--hover:hover,.drac-text-pink-purple\--hover:hover{
    @apply bg-clip-text bg-[100%];
    -webkit-text-fill-color:transparent;
    -moz-text-fill-color:transparent;
    -webkit-background-clip:text;
    -moz-background-clip:text
}
.drac-text-pink-purple\--hover:hover{
    @apply bg-[linear-gradient(var(--gradientDegree),var(--pink)_0,var(--purple)_100%)]
}
:root{
    --subtle-avatar-shadow:inset 0 0 0.5rem 0.5rem rgba(0,0,0,.5)

}
.drac-avatar{
    @apply items-center border flex h-[4.4rem] justify-center uppercase w-[4.5rem] border-solid
}
.drac-avatar,.drac-avatar-background{
    @apply rounded-[var(--rounded-full)] box-border
}
.drac-avatar-background{
    @apply bg-[50%] bg-no-repeat bg-cover h-full w-full;
    display:"inline-block"
}
.drac-avatar-lg-stroke{
    @apply border-[3px]
}
.drac-avatar-no-border{
    @apply shadow-[var(--subtle-avatar-shadow)] border-0
}
.drac-avatar-subtle{
    @apply shadow-[var(--subtle-avatar-shadow)] grayscale
}
.drac-avatar .drac-text{
    @apply uppercase translate-y-px
}
.drac-checkbox,.drac-radio{
    @apply appearance-none border border-[color:var(--local-bg-color,var(--border))] cursor-pointer inline-block h-[21px] relative align-top m-0 border-solid;
    --active-inner:var(--white);
    --background:var(--white);
    --disabled:var(--blackSecondary);
    --disabled-inner:var(--blackTernary);
    --local-bg-color:var(--border-hover);
    -webkit-appearance:none;
    -moz-appearance:none;
    outline:none;
    transition:background .3s,border-color .3s,box-shadow .2s
}
.drac-checkbox:after,.drac-radio:after{
    @apply content-[""] block absolute transition-transform duration-[var(--local-transform-speed,0.3s)] ease-[var(--local-transform-effect,ease),opacity] delay-[var(--local-opacity-speed,0.2s)] left-0 top-0
}
.drac-checkbox:checked{
    background:var(--local-bg,var(--background))
}
.drac-checkbox:checked,.drac-radio:checked{
    --local-bg:var(--active);
    --local-bg-color:var(--active);
    --local-opacity-speed:0.3s;
    --local-transform-speed:0.6s;
    --local-transform-effect:cubic-bezier(0.2,0.85,0.32,1.2)

}
.drac-checkbox:disabled,.drac-radio:disabled{
    @apply cursor-not-allowed opacity-90;
    --local-bg:var(--disabled)
}
.drac-checkbox:disabled:checked,.drac-radio:disabled:checked{
    --local-bg:var(--disabled-inner);
    --local-bg-color:var(--border)

}
.drac-checkbox:disabled+label,.drac-radio:disabled+label{
    @apply cursor-not-allowed
}
.drac-checkbox:focus,.drac-radio:focus{
    @apply shadow-[0_0_0_var(--focus)]
}
.drac-checkbox:not(.drac-switch),.drac-radio:not(.drac-switch){
    @apply w-[21px]
}
.drac-checkbox:not(.drac-switch):after,.drac-radio:not(.drac-switch):after{
    @apply opacity-[var(--local-opacity,0)]
}
.drac-checkbox:not(.drac-switch):checked,.drac-radio:not(.drac-switch):checked{
    --local-opacity:1

}
.drac-checkbox+label,.drac-radio+label{
    @apply cursor-pointer inline-block text-sm leading-[21px] align-top ml-1
}
.drac-checkbox:not(.drac-switch){
    @apply rounded-[7px] after:border-[color:var(--black)] after:h-[9px] after:rotate-[var(--local-rotation,20deg] after:w-[5px] after:border-l-0 after:border-t-0 after:border-2 after:border-solid after:left-1.5 after:top-0.5
}
.drac-checkbox:not(.drac-switch):checked{
    --local-rotation:43deg

}
.drac-checkbox.drac-switch{
    @apply w-[38px] rounded-[11px] after:h-[15px] after:translate-x-[var(--x,0] after:w-[15px] after:rounded-[50%] after:left-0.5 after:top-0.5
}
.drac-checkbox.drac-switch:after{
    background:var(--ab,var(--active-inner))
}
.drac-checkbox.drac-switch:checked{
    --ab:var(--active);
    --x:17px;
    background:none
}
.drac-checkbox.drac-switch:disabled:not(:checked):after{
    @apply opacity-60
}
.drac-radio{
    @apply rounded-[50%] after:h-[19px] after:opacity-0 after:scale-x-[var(--scale] after:scale-y-[var(--scale] after:w-[19px] after:rounded-[50%]
}
.drac-radio:after{
    background:var(--local-bg-color)
}
.drac-radio:disabled:checked:after{
    background:var(--disabled-inner)
}
.drac-radio:checked{
    --scale:0.8

}
.drac-checkbox-black,.drac-radio-black,.drac-switch-black{
    --active:var(--black);
    --focus:var(--blackSecondary);
    --border:var(--blackSecondary);
    --border-hover:var(--black)

}
.drac-checkbox-white,.drac-radio-white,.drac-switch-white{
    --active:var(--white);
    --focus:var(--whiteSecondary);
    --border:var(--whiteSecondary);
    --border-hover:var(--white)

}
.drac-checkbox-cyan,.drac-radio-cyan,.drac-switch-cyan{
    --active:var(--cyan);
    --focus:var(--cyanSecondary);
    --border:var(--cyanSecondary);
    --border-hover:var(--cyan)

}
.drac-checkbox-green,.drac-radio-green,.drac-switch-green{
    --active:var(--green);
    --focus:var(--greenSecondary);
    --border:var(--greenSecondary);
    --border-hover:var(--green)

}
.drac-checkbox-orange,.drac-radio-orange,.drac-switch-orange{
    --active:var(--orange);
    --focus:var(--orangeSecondary);
    --border:var(--orangeSecondary);
    --border-hover:var(--orange)

}
.drac-checkbox-pink,.drac-radio-pink,.drac-switch-pink{
    --active:var(--pink);
    --focus:var(--pinkSecondary);
    --border:var(--pinkSecondary);
    --border-hover:var(--pink)

}
.drac-checkbox-purple,.drac-radio-purple,.drac-switch-purple{
    --active:var(--purple);
    --focus:var(--purpleSecondary);
    --border:var(--purpleSecondary);
    --border-hover:var(--purple)

}
.drac-checkbox-red,.drac-radio-red,.drac-switch-red{
    --active:var(--red);
    --focus:var(--redSecondary);
    --border:var(--redSecondary);
    --border-hover:var(--red)

}
.drac-checkbox-yellow,.drac-radio-yellow,.drac-switch-yellow{
    --active:var(--yellow);
    --focus:var(--yellowSecondary);
    --border:var(--yellowSecondary);
    --border-hover:var(--yellow)

}
.drac-scrollbar-grey{
    @apply overflow-auto;
    --drac-scrollbar-bg:transparent;
    --drac-scrollbar-border:var(--greyLight);
    --drac-scrollbar-thumb:var(--grey);
    --drac-scrollbar-thumb-hover:var(--greySecondary)
}
.drac-scrollbar-grey::-webkit-scrollbar{
    @apply bg-[color:var(--drac-scrollbar-bg)] h-[1.4rem] w-[1.4rem]
}
.drac-scrollbar-grey::-webkit-scrollbar-track:horizontal{
    @apply border-t-[color:var(--drac-scrollbar-border)] border-t border-solid
}
.drac-scrollbar-grey::-webkit-scrollbar-track:vertical{
    @apply border-l-[color:var(--drac-scrollbar-border)] border-l border-solid
}
.drac-scrollbar-grey::-webkit-scrollbar-corner{
    @apply bg-transparent border-l-[color:var(--drac-scrollbar-border)] border-t-[color:var(--drac-scrollbar-border)] border-l border-solid border-t
}
.drac-scrollbar-grey::-webkit-scrollbar-thumb{
    @apply bg-clip-content bg-[color:var(--drac-scrollbar-thumb)] min-h-[3rem] min-w-[3rem] rounded-2xl border-[0.4rem] border-solid border-transparent hover:bg-[color:var(--drac-scrollbar-thumb-hover)];
    -moz-background-clip:content;
    -webkit-background-clip:content
}
.drac-scrollbar-cyan{
    @apply overflow-auto;
    --drac-scrollbar-bg:transparent;
    --drac-scrollbar-border:var(--cyanLight);
    --drac-scrollbar-thumb:var(--cyan);
    --drac-scrollbar-thumb-hover:var(--cyanSecondary)
}
.drac-scrollbar-cyan::-webkit-scrollbar{
    @apply bg-[color:var(--drac-scrollbar-bg)] h-[1.4rem] w-[1.4rem]
}
.drac-scrollbar-cyan::-webkit-scrollbar-track:horizontal{
    @apply border-t-[color:var(--drac-scrollbar-border)] border-t border-solid
}
.drac-scrollbar-cyan::-webkit-scrollbar-track:vertical{
    @apply border-l-[color:var(--drac-scrollbar-border)] border-l border-solid
}
.drac-scrollbar-cyan::-webkit-scrollbar-corner{
    @apply bg-transparent border-l-[color:var(--drac-scrollbar-border)] border-t-[color:var(--drac-scrollbar-border)] border-l border-solid border-t
}
.drac-scrollbar-cyan::-webkit-scrollbar-thumb{
    @apply bg-clip-content bg-[color:var(--drac-scrollbar-thumb)] min-h-[3rem] min-w-[3rem] rounded-2xl border-[0.4rem] border-solid border-transparent hover:bg-[color:var(--drac-scrollbar-thumb-hover)];
    -moz-background-clip:content;
    -webkit-background-clip:content
}
.drac-scrollbar-green{
    @apply overflow-auto;
    --drac-scrollbar-bg:transparent;
    --drac-scrollbar-border:var(--greenLight);
    --drac-scrollbar-thumb:var(--green);
    --drac-scrollbar-thumb-hover:var(--greenSecondary)
}
.drac-scrollbar-green::-webkit-scrollbar{
    @apply bg-[color:var(--drac-scrollbar-bg)] h-[1.4rem] w-[1.4rem]
}
.drac-scrollbar-green::-webkit-scrollbar-track:horizontal{
    @apply border-t-[color:var(--drac-scrollbar-border)] border-t border-solid
}
.drac-scrollbar-green::-webkit-scrollbar-track:vertical{
    @apply border-l-[color:var(--drac-scrollbar-border)] border-l border-solid
}
.drac-scrollbar-green::-webkit-scrollbar-corner{
    @apply bg-transparent border-l-[color:var(--drac-scrollbar-border)] border-t-[color:var(--drac-scrollbar-border)] border-l border-solid border-t
}
.drac-scrollbar-green::-webkit-scrollbar-thumb{
    @apply bg-clip-content bg-[color:var(--drac-scrollbar-thumb)] min-h-[3rem] min-w-[3rem] rounded-2xl border-[0.4rem] border-solid border-transparent hover:bg-[color:var(--drac-scrollbar-thumb-hover)];
    -moz-background-clip:content;
    -webkit-background-clip:content
}
.drac-scrollbar-orange{
    @apply overflow-auto;
    --drac-scrollbar-bg:transparent;
    --drac-scrollbar-border:var(--orangeLight);
    --drac-scrollbar-thumb:var(--orange);
    --drac-scrollbar-thumb-hover:var(--orangeSecondary)
}
.drac-scrollbar-orange::-webkit-scrollbar{
    @apply bg-[color:var(--drac-scrollbar-bg)] h-[1.4rem] w-[1.4rem]
}
.drac-scrollbar-orange::-webkit-scrollbar-track:horizontal{
    @apply border-t-[color:var(--drac-scrollbar-border)] border-t border-solid
}
.drac-scrollbar-orange::-webkit-scrollbar-track:vertical{
    @apply border-l-[color:var(--drac-scrollbar-border)] border-l border-solid
}
.drac-scrollbar-orange::-webkit-scrollbar-corner{
    @apply bg-transparent border-l-[color:var(--drac-scrollbar-border)] border-t-[color:var(--drac-scrollbar-border)] border-l border-solid border-t
}
.drac-scrollbar-orange::-webkit-scrollbar-thumb{
    @apply bg-clip-content bg-[color:var(--drac-scrollbar-thumb)] min-h-[3rem] min-w-[3rem] rounded-2xl border-[0.4rem] border-solid border-transparent hover:bg-[color:var(--drac-scrollbar-thumb-hover)];
    -moz-background-clip:content;
    -webkit-background-clip:content
}
.drac-scrollbar-pink{
    @apply overflow-auto;
    --drac-scrollbar-bg:transparent;
    --drac-scrollbar-border:var(--pinkLight);
    --drac-scrollbar-thumb:var(--pink);
    --drac-scrollbar-thumb-hover:var(--pinkSecondary)
}
.drac-scrollbar-pink::-webkit-scrollbar{
    @apply bg-[color:var(--drac-scrollbar-bg)] h-[1.4rem] w-[1.4rem]
}
.drac-scrollbar-pink::-webkit-scrollbar-track:horizontal{
    @apply border-t-[color:var(--drac-scrollbar-border)] border-t border-solid
}
.drac-scrollbar-pink::-webkit-scrollbar-track:vertical{
    @apply border-l-[color:var(--drac-scrollbar-border)] border-l border-solid
}
.drac-scrollbar-pink::-webkit-scrollbar-corner{
    @apply bg-transparent border-l-[color:var(--drac-scrollbar-border)] border-t-[color:var(--drac-scrollbar-border)] border-l border-solid border-t
}
.drac-scrollbar-pink::-webkit-scrollbar-thumb{
    @apply bg-clip-content bg-[color:var(--drac-scrollbar-thumb)] min-h-[3rem] min-w-[3rem] rounded-2xl border-[0.4rem] border-solid border-transparent hover:bg-[color:var(--drac-scrollbar-thumb-hover)];
    -moz-background-clip:content;
    -webkit-background-clip:content
}
.drac-scrollbar-purple{
    @apply overflow-auto;
    --drac-scrollbar-bg:transparent;
    --drac-scrollbar-border:var(--purpleLight);
    --drac-scrollbar-thumb:var(--purple);
    --drac-scrollbar-thumb-hover:var(--purpleSecondary)
}
.drac-scrollbar-purple::-webkit-scrollbar{
    @apply bg-[color:var(--drac-scrollbar-bg)] h-[1.4rem] w-[1.4rem]
}
.drac-scrollbar-purple::-webkit-scrollbar-track:horizontal{
    @apply border-t-[color:var(--drac-scrollbar-border)] border-t border-solid
}
.drac-scrollbar-purple::-webkit-scrollbar-track:vertical{
    @apply border-l-[color:var(--drac-scrollbar-border)] border-l border-solid
}
.drac-scrollbar-purple::-webkit-scrollbar-corner{
    @apply bg-transparent border-l-[color:var(--drac-scrollbar-border)] border-t-[color:var(--drac-scrollbar-border)] border-l border-solid border-t
}
.drac-scrollbar-purple::-webkit-scrollbar-thumb{
    @apply bg-clip-content bg-[color:var(--drac-scrollbar-thumb)] min-h-[3rem] min-w-[3rem] rounded-2xl border-[0.4rem] border-solid border-transparent hover:bg-[color:var(--drac-scrollbar-thumb-hover)];
    -moz-background-clip:content;
    -webkit-background-clip:content
}
.drac-scrollbar-red{
    @apply overflow-auto;
    --drac-scrollbar-bg:transparent;
    --drac-scrollbar-border:var(--redLight);
    --drac-scrollbar-thumb:var(--red);
    --drac-scrollbar-thumb-hover:var(--redSecondary)
}
.drac-scrollbar-red::-webkit-scrollbar{
    @apply bg-[color:var(--drac-scrollbar-bg)] h-[1.4rem] w-[1.4rem]
}
.drac-scrollbar-red::-webkit-scrollbar-track:horizontal{
    @apply border-t-[color:var(--drac-scrollbar-border)] border-t border-solid
}
.drac-scrollbar-red::-webkit-scrollbar-track:vertical{
    @apply border-l-[color:var(--drac-scrollbar-border)] border-l border-solid
}
.drac-scrollbar-red::-webkit-scrollbar-corner{
    @apply bg-transparent border-l-[color:var(--drac-scrollbar-border)] border-t-[color:var(--drac-scrollbar-border)] border-l border-solid border-t
}
.drac-scrollbar-red::-webkit-scrollbar-thumb{
    @apply bg-clip-content bg-[color:var(--drac-scrollbar-thumb)] min-h-[3rem] min-w-[3rem] rounded-2xl border-[0.4rem] border-solid border-transparent hover:bg-[color:var(--drac-scrollbar-thumb-hover)];
    -moz-background-clip:content;
    -webkit-background-clip:content
}
.drac-scrollbar-yellow{
    @apply overflow-auto;
    --drac-scrollbar-bg:transparent;
    --drac-scrollbar-border:var(--yellowLight);
    --drac-scrollbar-thumb:var(--yellow);
    --drac-scrollbar-thumb-hover:var(--yellowSecondary)
}
.drac-scrollbar-yellow::-webkit-scrollbar{
    @apply bg-[color:var(--drac-scrollbar-bg)] h-[1.4rem] w-[1.4rem]
}
.drac-scrollbar-yellow::-webkit-scrollbar-track:horizontal{
    @apply border-t-[color:var(--drac-scrollbar-border)] border-t border-solid
}
.drac-scrollbar-yellow::-webkit-scrollbar-track:vertical{
    @apply border-l-[color:var(--drac-scrollbar-border)] border-l border-solid
}
.drac-scrollbar-yellow::-webkit-scrollbar-corner{
    @apply bg-transparent border-l-[color:var(--drac-scrollbar-border)] border-t-[color:var(--drac-scrollbar-border)] border-l border-solid border-t
}
.drac-scrollbar-yellow::-webkit-scrollbar-thumb{
    @apply bg-clip-content bg-[color:var(--drac-scrollbar-thumb)] min-h-[3rem] min-w-[3rem] rounded-2xl border-[0.4rem] border-solid border-transparent hover:bg-[color:var(--drac-scrollbar-thumb-hover)];
    -moz-background-clip:content;
    -webkit-background-clip:content
}
.drac-card{
    @apply bg-[color:var(--accentColor)] rounded-[var(--rounded-lg)] shadow-[-2px_var(--glow-spacing-x)_var(--glow-spacing-y)_var(--glowColor)]
}
.drac-card-subtle{
    @apply shadow-none border-solid border-2;
    background:none
}
.drac-tabs{
    @apply border-b-[color:var(--disabled)] inline-flex p-0 border-b border-solid;
    list-style:none
}
.drac-tab{
    @apply pt-[var(--spacing-sm)] pb-[var(--spacing-sm)] relative px-0 after:content-[""] after:h-0.5 after:absolute after:w-full after:scale-x-75 after:-bottom-px after:inset-x-0
}
.drac-tab,.drac-tab:after{
    @apply transition-all duration-[0.2s] ease-[ease-in-out]
}
.drac-tab:after{
    background:transparent
}
.drac-tab-link{
    @apply text-[color:var(--disabled)] pt-[var(--spacing-sm)] pr-[var(--spacing-sm)] pb-[var(--spacing-sm)] pl-[var(--spacing-sm)] no-underline transition-[color] duration-[0.2s] ease-[ease-in-out]
}
.drac-tab:hover .drac-tab-link{
    @apply text-[color:var(--white)]
}
.drac-tabs-black .drac-tab-active:after{
    @apply scale-x-100;
    background:var(--black)
}
.drac-tabs-black .drac-tab-active .drac-tab-link{
    @apply text-[color:var(--black)]
}
.drac-tabs-white .drac-tab-active:after{
    @apply scale-x-100;
    background:var(--white)
}
.drac-tabs-white .drac-tab-active .drac-tab-link{
    @apply text-[color:var(--white)]
}
.drac-tabs-cyan .drac-tab-active:after{
    @apply scale-x-100;
    background:var(--cyan)
}
.drac-tabs-cyan .drac-tab-active .drac-tab-link{
    @apply text-[color:var(--cyan)]
}
.drac-tabs-green .drac-tab-active:after{
    @apply scale-x-100;
    background:var(--green)
}
.drac-tabs-green .drac-tab-active .drac-tab-link{
    @apply text-[color:var(--green)]
}
.drac-tabs-orange .drac-tab-active:after{
    @apply scale-x-100;
    background:var(--orange)
}
.drac-tabs-orange .drac-tab-active .drac-tab-link{
    @apply text-[color:var(--orange)]
}
.drac-tabs-pink .drac-tab-active:after{
    @apply scale-x-100;
    background:var(--pink)
}
.drac-tabs-pink .drac-tab-active .drac-tab-link{
    @apply text-[color:var(--pink)]
}
.drac-tabs-purple .drac-tab-active:after{
    @apply scale-x-100;
    background:var(--purple)
}
.drac-tabs-purple .drac-tab-active .drac-tab-link{
    @apply text-[color:var(--purple)]
}
.drac-tabs-red .drac-tab-active:after{
    @apply scale-x-100;
    background:var(--red)
}
.drac-tabs-red .drac-tab-active .drac-tab-link{
    @apply text-[color:var(--red)]
}
.drac-tabs-yellow .drac-tab-active:after{
    @apply scale-x-100;
    background:var(--yellow)
}
.drac-tabs-yellow .drac-tab-active .drac-tab-link{
    @apply text-[color:var(--yellow)]
}
.drac-table{
    @apply border-[color:var(--accentColor)] w-full border-collapse
}
.drac-table th{
    @apply font-medium text-left uppercase pb-[0.2rem]
}
.drac-table td{
    @apply border-[color:var(--disabled)] p-2 border-solid border-[0.1rem]
}
.drac-table.drac-table-black td{
    @apply border-[color:var(--black)]
}
.drac-table-striped.drac-table-black tr:nth-child(2n){
    @apply bg-[color:var(--blackLight)]
}
.drac-table.drac-table-white td{
    @apply border-[color:var(--white)]
}
.drac-table-striped.drac-table-white tr:nth-child(2n){
    @apply bg-[color:var(--whiteLight)]
}
.drac-table.drac-table-cyan td{
    @apply border-[color:var(--cyan)]
}
.drac-table-striped.drac-table-cyan tr:nth-child(2n){
    @apply bg-[color:var(--cyanLight)]
}
.drac-table.drac-table-green td{
    @apply border-[color:var(--green)]
}
.drac-table-striped.drac-table-green tr:nth-child(2n){
    @apply bg-[color:var(--greenLight)]
}
.drac-table.drac-table-orange td{
    @apply border-[color:var(--orange)]
}
.drac-table-striped.drac-table-orange tr:nth-child(2n){
    @apply bg-[color:var(--orangeLight)]
}
.drac-table.drac-table-pink td{
    @apply border-[color:var(--pink)]
}
.drac-table-striped.drac-table-pink tr:nth-child(2n){
    @apply bg-[color:var(--pinkLight)]
}
.drac-table.drac-table-purple td{
    @apply border-[color:var(--purple)]
}
.drac-table-striped.drac-table-purple tr:nth-child(2n){
    @apply bg-[color:var(--purpleLight)]
}
.drac-table.drac-table-red td{
    @apply border-[color:var(--red)]
}
.drac-table-striped.drac-table-red tr:nth-child(2n){
    @apply bg-[color:var(--redLight)]
}
.drac-table.drac-table-yellow td{
    @apply border-[color:var(--yellow)]
}
.drac-table-striped.drac-table-yellow tr:nth-child(2n){
    @apply bg-[color:var(--yellowLight)]
}
.drac-table.drac-table-striped tr:nth-child(2n){
    @apply bg-[color:var(--whiteLight)]
}
.drac-list{
    list-style:none
}
.drac-list-unordered li:before{
    @apply content-["—"] pr-2.5
}
.drac-list-ordered{
    counter-reset:li
}
.drac-list-ordered-lower-alpha{
    --type:lower-alpha

}
.drac-list-ordered-upper-alpha{
    --type:upper-alpha

}
.drac-list-ordered-lower-roman{
    --type:lower-roman

}
.drac-list-ordered-upper-roman{
    --type:upper-roman

}
.drac-list-ordered-decimal{
    --type:decimal

}
.drac-list-ordered li{
    @apply ml-[-30px] before:text-[color:var(--accentColor)] before:content-[counter(li,var(--type,decimal))"."] before:inline-block before:text-right before:w-[30px] before:ml-[15px] before:pr-[5px];
    counter-increment:li
}
.drac-list-black.drac-list-ordered li:before,.drac-list-black.drac-list-unordered li:before{
    @apply text-[color:var(--black)]
}
.drac-list-blackSecondary.drac-list-ordered li:before,.drac-list-blackSecondary.drac-list-unordered li:before{
    @apply text-[color:var(--blackSecondary)]
}
.drac-list-white.drac-list-ordered li:before,.drac-list-white.drac-list-unordered li:before{
    @apply text-[color:var(--white)]
}
.drac-list-cyan.drac-list-ordered li:before,.drac-list-cyan.drac-list-unordered li:before{
    @apply text-[color:var(--cyan)]
}
.drac-list-green.drac-list-ordered li:before,.drac-list-green.drac-list-unordered li:before{
    @apply text-[color:var(--green)]
}
.drac-list-orange.drac-list-ordered li:before,.drac-list-orange.drac-list-unordered li:before{
    @apply text-[color:var(--orange)]
}
.drac-list-pink.drac-list-ordered li:before,.drac-list-pink.drac-list-unordered li:before{
    @apply text-[color:var(--pink)]
}
.drac-list-purple.drac-list-ordered li:before,.drac-list-purple.drac-list-unordered li:before{
    @apply text-[color:var(--purple)]
}
.drac-list-red.drac-list-ordered li:before,.drac-list-red.drac-list-unordered li:before{
    @apply text-[color:var(--red)]
}
.drac-list-yellow.drac-list-ordered li:before,.drac-list-yellow.drac-list-unordered li:before{
    @apply text-[color:var(--yellow)]
}
.drac-list-none{
    @apply ml-0 pl-0;
    list-style:none
}