una/template/css/tailwind.css

/* tailwind source */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
    .animation-delay-2000 {
        animation-delay: 2s;
    }
    .animation-delay-4000 {
        animation-delay: 4s;
    }
}

@layer components {
    /* Global: HTML tags */
    ol, ul {
        @apply pl-10 list-outside;
    }

    ul {
        @apply list-disc;
    }

    ol {
        @apply list-decimal;
    }


    /* Defaults */
    .bx-skip-link {
        @apply absolute -top-16 focus:top-0 m-2 px-4 py-2;
        @apply border border-gray-200 dark:border-gray-700;
        @apply bg-gray-200/80 dark:bg-gray-800/80;
        @apply text-gray-800 dark:text-gray-200 font-medium;
        @apply rounded;
    }

    .bx-def-vanilla-html {
        @apply prose dark:prose-invert;
        @apply prose-a:text-blue-500 prose-a:font-medium prose-a:no-underline hover:prose-a:underline visited:prose-a:text-purple-500;
    }
    
    .bx-def-vanilla-html.bx-def-vh-sm {
        @apply prose-sm;
    }
    .bx-def-vanilla-html img::after,
    .bx-def-vanilla-html p::after{
        content: '';
        display: block;
        clear: both;
    }
    
    .bx-def-vanilla-html div > :where(:first-child):not(:where([class~="not-prose"] *)),
    .bx-def-vanilla-html > :where(:first-child):not(:where([class~="not-prose"] *)){
        margin-top: 0 !important;
    }
    
    .bx-def-vanilla-html div > :where(:last-child):not(:where([class~="not-prose"] *)),
    .bx-def-vanilla-html > :where(:last-child):not(:where([class~="not-prose"] *)) {
        margin-bottom: 0 !important;
    }

    .bx-artificer .bx-menthion-link {
        @apply font-normal text-blue-600 hover:text-blue-700 dark:text-blue-500 dark:hover:text-blue-600;
    }

    .bx-artificer .bx-def-box-sizing {
        @apply box-border;
    }

    .bx-artificer .bx-def-align-center {
        @apply flex items-center justify-center !important;
    }

    .bx-artificer .bx-def-valign-center {
        @apply flex items-center !important;
    }


    /* Color Palette */
    .bx-std .bx-def-color-bg-hl,
    .bx-std .bx-def-color-bg-hl-even:nth-child(even),
    .bx-std .bx-def-color-bg-hl-hover:hover,
    .bx-artificer .bx-def-color-bg-hl,
    .bx-artificer .bx-def-color-bg-hl-even:nth-child(even),
    .bx-artificer .bx-def-color-bg-hl-hover:hover {
        @apply bg-gray-100/50 dark:bg-gray-700/50;
    }

    .bx-artificer .col-red1 {
        @apply text-red-500;
    }
    .bx-artificer .bg-col-red1 { 
        @apply bg-red-400;
    }
    .bx-artificer .col-red1-dark { 
        @apply text-red-800; 
    }
    .bx-artificer .bg-col-red1-dark { 
        @apply bg-red-700;
    }

    .bx-artificer .col-red2 { 
        @apply text-rose-500; 
    }
    .bx-artificer .bg-col-red2 { 
        @apply bg-rose-400;
    }
    .bx-artificer .col-red2-dark { 
        @apply text-rose-800;
    }
    .bx-artificer .bg-col-red2-dark {
        @apply bg-rose-700;
    }

    .bx-artificer .col-red3 {
        @apply text-orange-500;
    }
    .bx-artificer .bg-col-red3 {
        @apply bg-orange-400;
    }
    .bx-artificer .col-red3-dark {
        @apply text-orange-800;
    }
    .bx-artificer .bg-col-red3-dark {
        @apply bg-orange-700;
    }

    .bx-artificer .col-green1 {
        @apply text-green-500;
    }
    .bx-artificer .bg-col-green1 {
        @apply bg-green-400;
    }
    .bx-artificer .col-green1-dark {
        @apply text-green-800;
    }
    .bx-artificer .bg-col-green1-dark {
        @apply bg-green-700;
    }

    .bx-artificer .col-green2 {
        @apply text-teal-500;
    }
    .bx-artificer .bg-col-green2 {
        @apply bg-teal-400;
    }
    .bx-artificer .col-green2-dark {
        @apply text-teal-800;
    }
    .bx-artificer .bg-col-green2-dark {
        @apply bg-teal-700;
    }

    .bx-artificer .col-green3 {
        @apply text-emerald-500;
    }
    .bx-artificer .bg-col-green3 {
        @apply bg-emerald-400;
    }
    .bx-artificer .col-green3-dark {
        @apply text-emerald-800;
    }
    .bx-artificer .bg-col-green3-dark {
        @apply bg-emerald-700;
    }

    .bx-artificer .col-blue1 {
        @apply text-blue-500;
    }
    .bx-artificer .bg-col-blue1 {
        @apply bg-blue-400;
    }
    .bx-artificer .col-blue1-dark {
        @apply text-blue-800;
    }
    .bx-artificer .bg-col-blue1-dark {
        @apply bg-blue-700;
    }

    .bx-artificer .col-blue2 {
        @apply text-purple-500;
    }
    .bx-artificer .bg-col-blue2 {
        @apply bg-purple-400;
    }
    .bx-artificer .col-blue2-dark {
        @apply text-purple-800;
    }
    .bx-artificer .bg-col-blue2-dark {
        @apply bg-purple-700;
    }

    .bx-artificer .col-blue3 {
        @apply text-sky-500;
    }
    .bx-artificer .bg-col-blue3 {
        @apply bg-sky-400;
    }
    .bx-artificer .col-blue3-dark {
        @apply text-sky-800;
    }
    .bx-artificer .bg-col-blue3-dark {
        @apply bg-sky-700;
    }

    .bx-artificer .col-gray {
        @apply text-gray-500;
    }
    .bx-artificer .bg-col-gray {
        @apply bg-gray-400;
    }
    .bx-artificer .col-gray-dark {
        @apply text-gray-800;
    }
    .bx-artificer .bg-col-gray-dark {
        @apply bg-gray-700;
    }

    /* Margins and Paddings */
    .bx-artificer .bx-def-centered {
        @apply mx-auto;
    }
    .bx-artificer .bx-def-margin {
        @apply m-4;
    }
    .bx-artificer .bx-def-margin-neg {
        @apply -m-4;
    }
    .bx-artificer .bx-def-margin-left {
        @apply ml-4;
    }
    .bx-artificer .bx-def-margin-left-auto {
        @apply ml-4 first:ml-0;
    }
    .bx-artificer .bx-def-margin-right {
        @apply mr-4;
    }
    .bx-artificer .bx-def-margin-top {
        @apply mt-4;
    }
    .bx-artificer .bx-def-margin-top-auto {
        @apply mt-4 first:mt-0;
    }
    .bx-artificer .bx-def-margin-bottom {
        @apply mb-4;
    }
    .bx-artificer .bx-def-margin-leftright {
        @apply mx-4;
    }
    .bx-artificer .bx-def-margin-leftright-neg {
        @apply -mx-4;
    }
    .bx-artificer .bx-def-margin-topbottom {
        @apply my-4;
    }
    .bx-artificer .bx-def-margin-topbottom-neg {
        @apply -my-4;
    }
    .bx-artificer .bx-def-margin-lefttopright {
        @apply mx-4 mt-4;
    }
    .bx-artificer .bx-def-margin-rightbottomleft {
        @apply mx-4 mb-4;
    }
    
    .bx-artificer .bx-def-margin-sec {
        @apply m-2;
    }
    .bx-artificer .bx-def-margin-sec-neg {
        @apply -m-2;
    }
    .bx-artificer .bx-def-margin-sec-left {
        @apply ml-2;
    }
    .bx-artificer .bx-def-margin-sec-left-auto {
        @apply ml-2 first:ml-0;
    }
    .bx-artificer .bx-def-margin-sec-left-auto.bx-dir {
        @apply rtl:ml-0 rtl:mr-2 rtl:first:mr-0;
    }
    .bx-artificer .bx-def-margin-sec-right {
        @apply mr-2;
    }
    .bx-artificer .bx-def-margin-sec-top {
        @apply mt-2;
    }
    .bx-artificer .bx-def-margin-sec-top-auto {
        @apply mt-2 first:mt-0;
    }
    .bx-artificer .bx-def-margin-sec-bottom {
        @apply mb-2;
    }
    .bx-artificer .bx-def-margin-sec-bottom-neg {
        @apply -mb-2;
    }
    .bx-artificer .bx-def-margin-sec-leftright {
        @apply mx-2;
    }
    .bx-artificer .bx-def-margin-sec-leftright-neg {
        @apply -mx-2;
    }
    .bx-artificer .bx-def-margin-sec-lefttopright-neg {
        @apply -mx-2 -mt-2;
    }
    .bx-artificer .bx-def-margin-sec-topbottom {
        @apply my-2;
    }
    .bx-artificer .bx-def-margin-sec-topbottom-neg {
        @apply -my-2;
    }
    .bx-artificer .bx-def-margin-sec-lefttopright {
        @apply mx-2 mt-2;
    }
    .bx-artificer .bx-def-margin-sec-rightbottomleft {
        @apply mx-2 mb-2;
    }

    .bx-artificer .bx-def-margin-thd {
        @apply m-1;
    }
    .bx-artificer .bx-def-margin-thd-neg {
        @apply -m-1;
    }
    .bx-artificer .bx-def-margin-thd-left {
        @apply ml-1;
    }
    .bx-artificer .bx-def-margin-thd-left-auto {
        @apply ml-1 first:ml-0;
    }
    .bx-artificer .bx-def-margin-thd-right {
        @apply mr-1;
    }
    .bx-artificer .bx-def-margin-thd-top {
        @apply mt-1;
    }
    .bx-artificer .bx-def-margin-thd-top-auto {
        @apply mt-1 first:mt-0;
    }
    .bx-artificer .bx-def-margin-thd-bottom {
        @apply mb-1;
    }
    .bx-artificer .bx-def-margin-thd-leftright {
        @apply mx-1;
    }
    .bx-artificer .bx-def-margin-thd-leftright-neg {
        @apply -mx-1;
    }
    .bx-artificer .bx-def-margin-thd-topbottom {
        @apply my-1;
    }
    .bx-artificer .bx-def-margin-thd-topbottom-neg {
        @apply -my-1;
    }
    .bx-artificer .bx-def-margin-thd-lefttopright {
        @apply mx-1 mt-1;
    }
    .bx-artificer .bx-def-margin-thd-rightbottomleft {
        @apply mx-1 mb-1;
    }

    .bx-artificer .bx-def-padding {
        @apply p-4;
    }
    .bx-artificer .bx-def-padding-left {
        @apply pl-4;
    }
    .bx-artificer .bx-def-padding-left-auto {
        @apply pl-4 first:pl-0;
    }
    .bx-artificer .bx-def-padding-right {
        @apply pr-4;
    }
    .bx-artificer .bx-def-padding-top {
        @apply pt-4;
    }
    .bx-artificer .bx-def-padding-top-auto {
        @apply pt-4 first:pt-0;
    }
    .bx-artificer .bx-def-padding-bottom {
        @apply pb-4;
    }
    .bx-artificer .bx-def-padding-leftright {
        @apply px-4;
    }
    .bx-artificer .bx-def-padding-topbottom {
        @apply py-4;
    }
    .bx-artificer .bx-def-padding-lefttopright {
        @apply px-4 pt-4;
    }
    .bx-artificer .bx-def-padding-rightbottomleft {
        @apply px-4 pb-4;
    }
    
    .bx-artificer .bx-def-padding-sec {
        @apply p-2;
    }
    .bx-artificer .bx-def-padding-sec-left {
        @apply pl-2;
    }
    .bx-artificer .bx-def-padding-sec-left.bx-dir {
        @apply pl-0 ltr:pl-2 rtl:pr-2;
    }
    .bx-artificer .bx-def-padding-sec-left-auto {
        @apply pl-2 first:pl-0;
    }
    .bx-artificer .bx-def-padding-sec-left-auto.bx-dir {
        @apply pl-0 ltr:pl-2 ltr:first:pl-0 rtl:pr-2 rtl:first:pr-0;
    }
    .bx-artificer .bx-def-padding-sec-right {
        @apply pr-2;
    }
    .bx-artificer .bx-def-padding-sec-top {
        @apply pt-2;
    }
    .bx-artificer .bx-def-padding-sec-top-auto {
        @apply pt-2 first:pt-0;
    }
    .bx-artificer .bx-def-padding-sec-bottom {
        @apply pb-2;
    }
    .bx-artificer .bx-def-padding-sec-leftright {
        @apply px-2;
    }
    .bx-artificer .bx-def-padding-sec-topbottom {
        @apply py-2;
    }
    .bx-artificer .bx-def-padding-sec-lefttopright {
        @apply px-2 pt-2;
    }
    .bx-artificer .bx-def-padding-sec-rightbottomleft {
        @apply px-2 pb-2;
    }

    .bx-artificer .bx-def-padding-thd {
        @apply p-1;
    }
    .bx-artificer .bx-def-padding-thd-left {
        @apply pl-1;
    }
    .bx-artificer .bx-def-padding-thd-left-auto {
        @apply pl-1 first:pl-0;
    }
    .bx-artificer .bx-def-padding-thd-right {
        @apply pr-1;
    }
    .bx-artificer .bx-def-padding-thd-top {
        @apply pt-1;
    }
    .bx-artificer .bx-def-padding-thd-top-auto {
        @apply pt-1 first:pt-0;
    }
    .bx-artificer .bx-def-padding-thd-bottom {
        @apply pb-1;
    }
    .bx-artificer .bx-def-padding-thd-leftright {
        @apply px-1;
    }
    .bx-artificer .bx-def-padding-thd-topbottom {
        @apply py-1;
    }
    .bx-artificer .bx-def-padding-thd-lefttopright {
        @apply px-1 pt-1;
    }
    .bx-artificer .bx-def-padding-thd-rightbottomleft {
        @apply px-1 pb-1;
    }

    /* Borders */
    .bx-std .bx-def-border,
    .bx-artificer .bx-def-border {
        @apply border border-gray-200 dark:border-gray-700;
    }
    .bx-artificer .bx-def-round-corners {
        @apply rounded-xl;
    }

    /* Fonts */
    .bx-def-font,
    .bx-artificer .bx-def-font-inputs:not(.bx-btn) {
        @apply font-inter text-gray-500 dark:text-gray-400;
    }

    .bx-def-font-grayed {
        @apply text-gray-700 dark:text-gray-500 text-opacity-60;
    }

    .bx-def-font-author,
    .bx-def-font-author.bx-def-font-meta {
        @apply text-sm text-gray-800 hover:text-black dark:text-gray-300 dark:hover:text-white font-semibold;
    }

    .bx-def-font-meta {
        @apply text-sm;
    }
    .bx-def-font-meta:not(a) {
        @apply text-gray-700 dark:text-gray-400 text-opacity-60;
    }
    a.bx-def-font-meta {
        @apply hover:underline;
    }

    .bx-artificer .bx-def-a-colored {
        @apply text-blue-600 hover:text-blue-700 dark:text-blue-500 dark:hover:text-blue-600;
    }

    .bx-std a.bx-def-font-meta,
    .bx-std a.bx-def-font-meta.bx-def-a-colored,
    .bx-artificer a.bx-def-font-meta,
    .bx-artificer a.bx-def-font-meta.bx-def-a-colored {
        @apply text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-50;
    }
    .bx-artificer .bx-def-font-meta:not(a) {
        @apply text-opacity-100;
    }

    .bx-artificer .bx-def-font-small {
        @apply text-xs;
    }

    .bx-artificer .bx-def-font-middle {
        @apply text-sm;
    }

    .bx-artificer .bx-def-font-large {
        @apply text-lg;
    }

    /* Typography in combination with 'bx-def-vanilla-html' class */
    .bx-def-vanilla-html h1,
    .bx-def-vanilla-html .bx-def-font-h1 {
        @apply scroll-m-20 text-4xl font-extrabold tracking-tight;
    }

    .bx-def-vanilla-html h2,
    .bx-def-vanilla-html .bx-def-font-h2 {
        @apply scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight transition-colors first:mt-0;
    }

    .bx-def-vanilla-html h3,
    .bx-def-vanilla-html .bx-def-font-h3 {
        @apply scroll-m-20 text-xl font-semibold tracking-tight;
    }

    .bx-def-vanilla-html h4 {
        @apply scroll-m-20 font-semibold tracking-tight;
    }

    .bx-def-vanilla-html p {
        @apply leading-7 [&:not(:first-child)]:mt-6;
    }

    .bx-def-vanilla-html blockquote {
        @apply mt-6 border-l-2 pl-6 italic;
    }

    .bx-def-vanilla-html table {
        @apply w-full;
    }

    .bx-def-vanilla-html tr {
        @apply m-0 border-t p-0;
    }

    .bx-def-vanilla-html th {
        @apply border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right;
    }

    .bx-def-vanilla-html td {
        @apply border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right;
    }

    .bx-def-vanilla-html ul {
        @apply my-6 ml-6 list-disc [&>li]:mt-2;
    }

    .bx-def-vanilla-html code {
        @apply relative rounded px-[0.3rem] py-[0.2rem] text-sm font-semibold;
    }

    /* Common elements: Icons. */
    .bx-icon svg {
        @apply w-5 h-5;
    }
    .bx-icon.bx-icon-small svg {
        @apply w-4 h-4;
    }
    .bx-icon.bx-icon-close svg,
    .bx-icon.bx-icon-hamburger svg {
        @apply w-7 h-7;
    }

    /* Common elements: Pages. */
    .bx-layout-wrapper{
        @apply gap-4 lg:gap-6 flex flex-col;
    }
    .bx-layout-row{
        @apply w-full flex relative flex-wrap md:flex-nowrap gap-y-4 lg:gap-y-6;
    }
    .bx-layout-col{
        @apply max-w-full w-full;
        flex-shrink: 2 !important;
    }

    .bx-layout-cell, 
    .bx-search-results-container {
        @apply flex flex-col gap-4 lg:gap-6;
    }
    .bx-layout-gap{
        @apply gap-y-4 lg:gap-y-6;
    }
    .bx-def-color-bg-page{
        @apply bg-gray-100 dark:bg-gray-900;
    }

    /* Common elements: Blocks, Boxes, etc. */
    .bx-def-box {
        @apply flex flex-col;
    }
    .bx-def-box.bx-def-box-hor {
        @apply flex-row;
    }
    .bx-def-color-bg-block {
        @apply bg-white dark:bg-gray-800;
    }
    .bx-def-color-bg-box,
    .bx-popup-color-bg {
        @apply bg-white dark:bg-gray-800 shadow-md;
    }
    .bx-def-color-bg-box-overflow {
        @apply bg-gradient-to-b from-transparent to-white dark:to-gray-800;
    }
    /* Elevated surfaces: hairline ring + stacked shadow in one box-shadow (see tailwind.smooth-shadow.js), never border + shadow. */
    .bx-def-border-block {
        @apply smooth-shadow-ring-sm;
    }
    .bx-def-box,
    .bx-popup-border {
        @apply ring-1 ring-gray-300/50 dark:ring-gray-600/50;
    }
    .bx-def-border-radius-block,
    .bx-def-box-round-corners,
    .bx-popup-border {
        @apply rounded-2xl;
    }
    .bx-content-padding-block {
        @apply p-3 md:p-4;
    }
    .bx-def-color-bg-box-hover {
        @apply hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-800 dark:hover:text-gray-200;
    }
    .bx-def-color-bg-box-active {
        @apply bg-gray-100 dark:bg-gray-700;
    }

    .bx-db-title {
        @apply text-lg xl:text-xl font-bold text-gray-800 dark:text-gray-100 align-middle;
    }

    /* Common Elements: HR */
    .bx-std .bx-def-hr,
    .bx-artificer .bx-def-hr {
        @apply mx-0 p-0 border-t border-gray-200 dark:border-gray-700;
    }

    /* Common Elements: Labels */
    .bx-artificer .bx-def-label {
        @apply inline-block min-w-6 px-4 py-1 bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500 text-gray-800 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-200 text-sm font-normal rounded-full box-border;
    }
    
    /* Common Elements: Alerts */
    .bx-def-unit-alert,
    .bx-def-unit-alert-small,
    .bx-def-unit-alert-middle {
        @apply block absolute top-0 -right-0.5 text-center text-white;
    }
    .bx-def-unit-alert {
        @apply h-4 p-1 leading-4 rounded-full text-xs;
        min-width: 1rem;
    }

    /* Common elements: Buttons */
    .bx-btn-shadow {
        @apply shadow-sm hover:shadow active:shadow-none;
    }
    .bx-btn-border {
        @apply border border-gray-300 dark:border-gray-600 rounded-md;
    }
    .bx-btn-bg {
        @apply bg-gray-100 dark:bg-gray-700;
    }
    .bx-btn-text {
        @apply text-sm text-gray-700 dark:text-gray-100 font-medium ;
    }
    .bx-btn-hover {
        @apply hover:bg-white dark:hover:bg-gray-600;
        @apply hover:border-gray-300 dark:hover:border-gray-500;
        @apply hover:text-gray-800 dark:hover:text-white;
        @apply hover:no-underline;
        @apply hover:-translate-y-px;
    }
    .bx-btn-focus {
        @apply focus:outline-none;
        @apply focus-visible:border-blue-500 dark:focus-visible:border-blue-500 focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900;
    }
    
    .bx-btn-active {
        @apply active:bg-gray-300 dark:active:bg-gray-800;
        @apply active:border-gray-400 dark:active:border-gray-700;
        @apply active:text-gray-900 dark:active:text-gray-200;
        @apply active:translate-y-px;
    }
    .bx-btn {
        @apply relative inline-flex items-center min-h-11 px-4 py-2 touch-manipulation;
        @apply bx-btn-shadow;
        @apply bx-btn-bg;
        @apply bx-btn-border rounded-[10px];
        @apply bx-btn-text;
        @apply transform-gpu transition duration-150;
        @apply cursor-pointer;
        @apply bx-btn-hover bx-btn-focus bx-btn-active;
    }
    .bx-btn i, 
    .bx-btn u {
        @apply inline-block align-middle;
    }

    .bx-btn i, 
    .bx-btn img,
    .bx-btn svg {
        @apply w-5 h-5 leading-5;
    }
    .bx-btn i:not(.sys-colored),
    .bx-btn img {
        @apply text-gray-600 dark:text-gray-300;
    }

    .bx-btn:hover i:not(.sys-colored), 
    .bx-btn:hover img {
        @apply text-gray-800 dark:text-gray-100;
    }

    .bx-btn i {
        @apply text-center;
    }

    .bx-btn img {
        @apply bg-contain bg-no-repeat bg-center;
    }
    
    .bx-btn svg {
        @apply inline align-middle;
    }

    .bx-btn u {
        @apply ml-2 first:ml-0 no-underline;
    }

    .bx-btn.bx-btn-primary {
        @apply bg-blue-600 hover:bg-blue-700 active:bg-blue-800 dark:bg-blue-700 dark:hover:bg-blue-600 dark:active:bg-blue-800;
        @apply border border-blue-600 hover:border-blue-700 active:border-blue-800 dark:border-blue-600 dark:hover:border-blue-500 dark:active:border-blue-700;
        @apply text-white hover:text-white active:text-white dark:text-white dark:hover:text-white dark:active:text-white;
    }

    .bx-btn.bx-btn-primary i, 
    .bx-btn.bx-btn-primary img {
        @apply text-gray-300;
    }
    
    .bx-btn.bx-btn-primary:hover i, 
    .bx-btn.bx-btn-primary:hover img {
        @apply text-gray-100;
    }
    
    .bx-btn.bx-btn-disabled {
        @apply bg-gray-50 dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-400 hover:text-gray-400 dark:hover:text-gray-400 focus:ring-0 focus:ring-offset-0 shadow-none cursor-default !important;
    }

    /* Button sizes (height / corner radius): mini 28px/6px with the hit area extended to 44px, small 36px/8px, default 44px/10px, large 52px/12px, xlarge 60px/14px. */
    .bx-btn.bx-btn-mini {
        @apply min-h-7 px-2.5 py-1 text-xs rounded-md;
        @apply after:content-[''] after:absolute after:-inset-y-2 after:-inset-x-1;
    }
    .bx-btn.bx-btn-small {
        @apply min-h-9 px-3 py-1 text-sm rounded-lg;
    }
    .bx-btn.bx-btn-large {
        @apply min-h-[3.25rem] px-5 text-base rounded-xl;
    }
    .bx-btn.bx-btn-xlarge {
        @apply min-h-[3.75rem] px-6 text-lg rounded-[14px];
    }

    .bx-btn.bx-btn-mini i, 
    .bx-btn.bx-btn-mini img,
    .bx-btn.bx-btn-mini svg,
    .bx-btn.bx-btn-small i, 
    .bx-btn.bx-btn-small img,
    .bx-btn.bx-btn-small svg {
        @apply w-4 h-4 leading-4;
    }

    /* Common elements: Forms */
    .bx-std form,
    .bx-artificer form {
        @apply text-sm font-normal text-gray-700 dark:text-gray-300;
    }

    .bx-artificer form a:not(.bx-btn),
    .bx-artificer .sys-jf-agreement a:not(.bx-btn), 
    .bx-artificer .sys-lf-agreement a:not(.bx-btn) {
        @apply font-normal text-blue-600 hover:text-blue-700 dark:text-blue-500 dark:hover:text-blue-600;
    }

    .bx-artificer .bx-form-caption,
    .bx-artificer .bx-form-row-view-caption {
        @apply text-gray-700 dark:text-gray-300 text-sm font-medium;
    }

    .bx-artificer .bx-form-value {
        @apply mt-1 first:mt-0;
    }

    .bx-artificer .bx-form-required,
    .bx-artificer .bx-form-warn {
        @apply text-red-400;
    }

    .bx-form-section.bx-form-section-header {
        @apply border border-gray-300 dark:border-gray-900 rounded-2xl;
        @apply bg-gray-100 dark:bg-gray-800;
        @apply overflow-hidden;
    }
    .bx-form-section.bx-form-section-header .bx-form-section-title:hover {
        @apply bg-white dark:bg-gray-900 bg-gradient-to-b from-gray-100 dark:from-gray-800;
    }
    .bx-form-section.bx-form-section-header:not(.bx-form-collapsed) {
        @apply bg-white dark:bg-gray-900;
    }
    .bx-form-section.bx-form-section-header .bx-form-section-content {
        @apply bg-white dark:bg-gray-900;
    }

    /* Common elements: Forms: Text Input */
    .bx-std .bx-form-input-slider,
    .bx-std .bx-form-input-doublerange,
    .bx-std .bx-form-input-select_multiple,
    .bx-std .bx-form-input-select,
    .bx-std .bx-form-input-number,
    .bx-std .bx-form-input-time,
    .bx-std .bx-form-input-datepicker,
    .bx-std .bx-form-input-datetime,
    .bx-std .bx-form-input-textarea:not(.bx-form-input-html),
    .bx-std .bx-form-input-text,
    .bx-std .bx-form-input-price,
    .bx-std .bx-form-input-wrapper-price span,
    .bx-artificer .bx-form-input-slider,
    .bx-artificer .bx-form-input-doublerange,
    .bx-artificer .bx-form-input-select_multiple,
    .bx-artificer .bx-form-input-select,
    .bx-artificer .bx-form-input-number,
    .bx-artificer .bx-form-input-time,
    .bx-artificer .bx-form-input-datepicker,
    .bx-artificer .bx-form-input-datetime,
    .bx-artificer .bx-form-input-textarea:not(.bx-form-input-html),
    .bx-artificer .bx-form-input-text,
    .bx-artificer .bx-form-input-price,
    .bx-artificer .bx-form-input-wrapper-price span {
        @apply block w-full px-3 py-2;
        @apply bg-gray-50 dark:bg-gray-900/50 focus:bg-white dark:focus:bg-gray-900;
        @apply border border-gray-300 dark:border-gray-700 focus:border-blue-500 dark:focus:border-blue-500 focus:border-opacity-70 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-20 focus:outline-none;
        @apply leading-6 text-base font-medium text-gray-700 dark:text-gray-300 focus:text-gray-900 dark:focus:text-gray-100;
        @apply placeholder:text-gray-500 dark:focus:placeholder:text-gray-700 focus:placeholder:text-gray-300;
        @apply rounded-md;
    }
	
    /* Common elements: Forms: Password Input */
    .bx-std .bx-form-input-wrapper-password,
    .bx-artificer .bx-form-input-wrapper-password {
        @apply relative block w-full;
        @apply bg-gray-50 dark:bg-gray-900/50 focus:bg-white dark:focus:bg-gray-900;
        @apply border border-gray-300 dark:border-gray-700 focus:border-blue-500 dark:focus:border-blue-500 focus:border-opacity-70 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-20 focus:outline-none;
        @apply leading-6 text-base font-medium text-gray-700 dark:text-gray-300 focus:text-gray-900 dark:focus:text-gray-100;
        @apply placeholder:text-gray-500 dark:focus:placeholder:text-gray-700 focus:placeholder:text-gray-300;
        @apply rounded-md;
    }
    .bx-std .bx-form-input-wrapper-password .bx-form-input-password,
    .bx-artificer .bx-form-input-wrapper-password .bx-form-input-password {
        @apply block w-full pl-3 py-2 pr-8;
        @apply rounded-md;
    }
    .bx-artificer .bx-form-input-wrapper-password .bx-form-input-password {
        @apply ltr:pl-3 rtl:pl-8 ltr:pr-8 rtl:pr-3;
    }

    /* Common elements: Forms: Checkbox/Radio Set Input */
    .bx-artificer .bx-form-input-wrapper-checkbox_set,
    .bx-artificer .bx-form-input-wrapper-radio_set {
        @apply relative block w-full py-2 px-3;
    }
    .bx-std .bx-form-input-checkbox_set,
    .bx-std .bx-form-input-radio_set,
    .bx-artificer .bx-form-input-wrapper-checkbox_set,
    .bx-artificer .bx-form-input-wrapper-radio_set {
        @apply max-h-80 overflow-x-auto;
        @apply bg-gray-50 dark:bg-gray-900/50 focus:bg-white dark:focus:bg-gray-900;
        @apply border border-gray-300 dark:border-gray-700 focus:border-blue-500 dark:focus:border-blue-500 focus:border-opacity-70 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-20 focus:outline-none;
        @apply leading-6 text-base font-medium text-gray-700 dark:text-gray-300 focus:text-gray-900 dark:focus:text-gray-100;
        @apply placeholder:text-gray-500 dark:focus:placeholder:text-gray-700 focus:placeholder:text-gray-300;
        @apply rounded-md;
    }

    /* Common elements: Forms: Checkbox Input */
    .bx-form-input-wrapper-checkbox,
    .bx-form-input-wrapper-radio {
        @apply block w-5 h-5 m-0.5;
        @apply border-2 border-transparent;
    }

    .bx-form-input-checkbox,
    .bx-form-input-radio {
        @apply block w-4 h-4;
        @apply bg-gray-50 dark:bg-gray-900/50 bg-origin-border;
        @apply border-2 border-gray-300 dark:border-gray-700 focus:border-blue-500 dark:focus:border-blue-500 focus:border-opacity-70;
        @apply placeholder:text-gray-500 dark:focus:placeholder:text-gray-700 focus:placeholder:text-gray-300;
        @apply scale-150 rounded;
        @apply appearance-none select-none;
    }
    .bx-def-font-inputs.bx-form-input-checkbox,
    .bx-def-font-inputs.bx-form-input-radio {
        @apply leading-6 text-base font-medium text-blue-600 dark:text-blue-600;
    }
    .bx-form-input-checkbox:checked,
    .bx-form-input-radio:checked {
        background-color: currentColor;
        border-color: transparent;
    }
    .bx-form-input-checkbox:checked {
        background-image:url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2aWV3Qm94PScwIDAgMTYgMTYnIGZpbGw9JyNmZmYnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTEyLjIwNyA0Ljc5M2ExIDEgMCAwIDEgMCAxLjQxNGwtNSA1YTEgMSAwIDAgMS0xLjQxNCAwbC0yLTJhMSAxIDAgMCAxIDEuNDE0LTEuNDE0TDYuNSA5LjA4Nmw0LjI5My00LjI5M2ExIDEgMCAwIDEgMS40MTQgMHonLz48L3N2Zz4=)
    }
    .bx-form-input-radio:checked {
        background-image:url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2aWV3Qm94PScwIDAgMTYgMTYnIGZpbGw9JyNmZmYnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PGNpcmNsZSBjeD0nOCcgY3k9JzgnIHI9JzMnLz48L3N2Zz4=)
    }
    
    .bx-form-input-radio_set,
    .bx-form-input-checkbox_set {
        @apply flex flex-wrap items-center;
    }
    .bx-form-input-dv {
        @apply ml-4;
    }
    .bx-form-input-dv-nl {
        @apply h-2 w-full last:hidden;
    }

    /* Common elements: Forms: Switcher Input */
    .bx-switcher-cont.on button {
        @apply bg-white dark:bg-gray-800;
    }
    .bx-switcher-cont.on button span {
        @apply bg-green-500 dark:bg-green-500 ltr:translate-x-5 rtl:-translate-x-5;
    }
    .bx-switcher-cont.off button {
        @apply bg-gray-200 dark:bg-gray-900;
    }
    .bx-switcher-cont.off button span {
        @apply bg-white dark:bg-gray-500 translate-x-0;
    }

    /* Common elements: Forms: Autosuggestion Input */
    .bx-artificer .bx-form-input-text.bx-form-input-autotoken {
        @apply flex flex-wrap items-stretch w-full py-2 px-3 ;
        @apply bg-gray-50 dark:bg-gray-900/50 focus:bg-white dark:focus:bg-gray-900;
        @apply border border-gray-300 dark:border-gray-700 focus:border-blue-500 dark:focus:border-blue-500 focus:border-opacity-70 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-20 focus:outline-none;
        @apply leading-6 text-base font-medium text-gray-700 dark:text-gray-300 focus:text-gray-900 dark:focus:text-gray-100;
        @apply placeholder:text-gray-500 dark:focus:placeholder:text-gray-700 focus:placeholder:text-gray-300;
        @apply rounded-md;
    }
    .bx-artificer .bx-form-input-autotoken b.val {
        @apply bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600;
    }


    /* Common elements: Popups */
    .bx-artificer > .bx-popup-wrapper {
        @apply max-h-full overflow-x-hidden overflow-y-auto;
    }

    .bx-artificer .bx-popup-applied {
        @apply rounded-lg;
    }

    .bx-artificer .bx-popup-responsive:not(.bx-popup-full-screen):not(.bx-popup-menu) {
        @apply w-full md:w-auto;
    }

    .bx-artificer .bx-popup-full-screen {
        @apply w-full;
    }

    .bx-artificer .bx-popup {
        @apply relative;
    }

    .bx-artificer .bx-popup-color-bg {
        @apply bg-white dark:bg-gray-800 shadow;
    }

    .bx-artificer .bx-popup-border {
        @apply m-px ring-1 ring-gray-300 dark:ring-gray-700 rounded-2xl;
    }

    .bx-artificer .bx-popup-width {
        @apply w-full md:w-128;
    }

    .bx-artificer .bx-popup-width-small,
    .bx-artificer .bx-popup-menu .bx-popup-content {
        @apply w-56;
    }

    .bx-artificer .bx-popup-full-screen .bx-popup-width {
        @apply w-full md:w-full;
    }

    .bx-artificer .bx-popup-fog {
        @apply bg-gray-600 opacity-75;
    }


    /* Common elements: Menus */
    .bx-stl-mil-gaps {
        @apply px-3 py-2;
    }

    .bx-stl-mil-gaps-sm {
        @apply px-2 py-1.5;
    }

    .bx-stl-mil-hover-text {
        @apply hover:text-gray-800 dark:hover:text-gray-200;
    }
    .bx-stl-mil-hover-bg {
        @apply hover:bg-gray-200/50 dark:hover:bg-gray-700/50;
    }
    .bx-stl-mil-hover {
        @apply bx-stl-mil-hover-text;
        @apply bx-stl-mil-hover-bg;
    }

    .bx-stl-mil-focus {
        @apply focus:border-blue-500 dark:focus:border-blue-500 focus:border-opacity-70 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-20 focus:outline-none;
    }
    
    .bx-stl-mil-active-bg {
        @apply active:border-gray-300 dark:active:border-gray-700;
        @apply active:bg-gray-300 dark:active:bg-black/50;
    }
    .bx-stl-mil-active {
        @apply bx-stl-mil-active-bg;
    }
    
    .bx-stl-mil,
    .bx-stl-mil-sm,
    .bx-stl-mil-wo-bg,
    .bx-stl-mil-wo-bg-gaps,
    .bx-stl-mil-wo-gaps,
    .bx-stl-mil-wo-gaps-sm,
    .bx-std .bx-stl-mil,
    .bx-std .bx-stl-mil-sm,
    .bx-std .bx-stl-mil-wo-bg,
    .bx-std .bx-stl-mil-wo-bg-gaps,
    .bx-std .bx-stl-mil-wo-gaps,
    .bx-std .bx-stl-mil-wo-gaps a,
    .bx-std .bx-stl-mil-wo-gaps-sm {
        @apply flex items-center;
        @apply text-base text-gray-600 dark:text-gray-400 font-medium;
        @apply bx-stl-mil-hover-text;
    }

    .bx-stl-mil,
    .bx-stl-mil-sm,
    .bx-stl-mil-wo-bg {
        @apply bx-stl-mil-gaps;
    }

    .bx-stl-mil,
    .bx-stl-mil-sm,
    .bx-stl-mil-wo-gaps,
    .bx-stl-mil-wo-gaps-sm {
        @apply border border-transparent;
        @apply rounded-md;
        @apply bx-stl-mil-hover-bg bx-stl-mil-active-bg;
    }
    .bx-stl-mil.bx-stl-mib,
    .bx-stl-mil-sm.bx-stl-mib,
    .bx-stl-mil-wo-gaps.bx-stl-mib,
    .bx-stl-mil-wo-gaps-sm.bx-stl-mib {
        @apply border border-gray-300 dark:border-gray-700;
    }
    .bx-stl-mil-sm,
    .bx-stl-mil-wo-gaps-sm {
        @apply text-sm;
    }

    .bx-stl-mil-sm {
        @apply px-2 py-1.5;
    }
    .bx-popup .bx-stl-mil-sm,
    .bx-popup .bx-stl-mil-gaps-sm {
        @apply px-4;
    }

    .bx-popup ul:not(.bx-menu-hor) .bx-stl-mil,
    .bx-popup ul:not(.bx-menu-hor) .bx-stl-mil-sm,
    .bx-popup ul:not(.bx-menu-hor) .bx-stl-mil-wo-gaps,
    .bx-popup ul:not(.bx-menu-hor) .bx-stl-mil-wo-gaps-sm {
        @apply rounded-none;
    }
    .bx-menu-tab-active.bx-stl-mil,
    .bx-menu-tab-active.bx-stl-mil-sm,
    .bx-menu-tab-active.bx-stl-mil-wo-gaps,
    .bx-menu-tab-active.bx-stl-mil-wo-gaps-sm,
    .bx-menu-tab-active .bx-stl-mil,
    .bx-menu-tab-active .bx-stl-mil-sm,
    .bx-menu-tab-active .bx-stl-mil-wo-gaps,
    .bx-menu-tab-active .bx-stl-mil-wo-gaps-sm,
    .bx-menu-item-active .bx-stl-mil,
    .bx-menu-item-active .bx-stl-mil-sm, 
    .bx-menu-item-active .bx-stl-mil-wo-gaps,
    .bx-menu-item-active .bx-stl-mil-wo-gaps-sm {
        @apply text-gray-900 dark:text-white;
        @apply bg-gray-200 dark:bg-gray-900;
        @apply ring-1 ring-white/50 dark:ring-gray-800/50;
    }
    .bx-popup .bx-menu-tab-active.bx-stl-mil,
    .bx-popup .bx-menu-tab-active.bx-stl-mil-sm,
    .bx-popup .bx-menu-tab-active.bx-stl-mil-wo-gaps,
    .bx-popup .bx-menu-tab-active.bx-stl-mil-wo-gaps-sm,
    .bx-popup .bx-menu-tab-active .bx-stl-mil,
    .bx-popup .bx-menu-tab-active .bx-stl-mil-sm,
    .bx-popup .bx-menu-tab-active .bx-stl-mil-wo-gaps,
    .bx-popup .bx-menu-tab-active .bx-stl-mil-wo-gaps-sm {
        @apply ring-0;
    }
    .bx-stl-mii,
    .bx-stl-mii-sm,
    .bx-stl-mil .sys-action-do-icon,
    .bx-stl-mil-sm .sys-action-do-icon,
    .bx-stl-mil-wo-gaps .sys-action-do-icon,
    .bx-stl-mil-wo-gaps-sm .sys-action-do-icon {
        @apply flex items-center justify-center text-gray-500 text-lg;
    }
    
    .bx-stl-mii > *,
    .bx-stl-mii-sm > *,
    .bx-stl-mil .sys-action-do-icon > *,
    .bx-stl-mil-sm .sys-action-do-icon > *,
    .bx-stl-mil-wo-gaps .sys-action-do-icon > *,
    .bx-stl-mil-wo-gaps-sm .sys-action-do-icon > * {
        @apply flex items-center justify-center h-6 w-6 ltr:mr-3 rtl:ml-3;
    }
    .bx-std .bx-stl-mii > * {
        @apply flex items-center justify-center h-6 w-6 ltr:mr-3 rtl:ml-3 !important;
    }
    .bx-std .bx-stl-mii > svg {
        @apply text-gray-500 !important;
    }
    .bx-std li:hover .bx-stl-mii > svg {
        @apply text-gray-700 dark:text-gray-300 !important;
    }

    .bx-stl-mii:last-child > *,
    .bx-stl-mii-sm:last-child > *,
    .bx-stl-mil .sys-action-do-icon:last-child > *,
    .bx-stl-mil-sm .sys-action-do-icon:last-child > *,
    .bx-stl-mil-wo-gaps .sys-action-do-icon:last-child > *,
    .bx-stl-mil-wo-gaps-sm .sys-action-do-icon:last-child > * {
        @apply ltr:mr-0 rtl:ml-0;
    }
    .bx-stl-mil .sys-action-do-icon ~ .sys-action-do-text,
    .bx-stl-mil-sm .sys-action-do-icon ~ .sys-action-do-text,
    .bx-stl-mil-wo-gaps .sys-action-do-icon ~ .sys-action-do-text,
    .bx-stl-mil-wo-gaps-sm .sys-action-do-icon ~ .sys-action-do-text {
        @apply ltr:ml-0 rtl:mr-0;
    }
    .bx-stl-mii-sm > *,
    .bx-stl-mil-sm .sys-action-do-icon > *,
    .bx-stl-mil-wo-gaps-sm .sys-action-do-icon > * {
        @apply h-5 w-5 ltr:mr-1.5 rtl:ml-1.5 text-sm;
    }
    .bx-stl-mit {
        @apply truncate;
    }
    .bx-stl-mia {
        @apply inline-block py-0.5 px-2 bg-gray-200/50 dark:bg-gray-800/50 text-gray-600 dark:text-gray-300 text-xs rounded-full;
    }

    /* Common elements: Horizontal menu */
    .bx-artificer .bx-menu-hor li.bx-menu-tab-active a,
    .bx-artificer .bx-menu-custom-hor li.bx-menu-tab-active a {
        @apply text-gray-700 dark:text-gray-200 font-medium;
    }

    /* Common elements: Vertical menu */
    .bx-artificer .bx-menu-ver li.bx-menu-tab-active .bx-mi-highlight,
    .bx-artificer .bx-menu-verlit li.bx-menu-tab-active .bx-mi-highlight,
    .bx-artificer .bx-menu-custom-ver li.bx-menu-tab-active .bx-mi-highlight {
        @apply bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white font-medium;
    }

    /* Common elements: Vertical menu in Popup */
    .bx-artificer .bx-popup .bx-menu-ver > li:hover {
        @apply hover:text-gray-900 dark:hover:text-gray-100;
    }

    .bx-artificer .bx-popup .bx-menu-ver > li.bx-def-color-bg-active {
        @apply bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white;
    }

    /* Common elements: Toolbar menu */
    .bx-artificer .bx-menu-toolbar .bx-menu-toolbar-item .bx-menu-toolbar-item-unit {
        @apply border-4 border-transparent;
    }
    .bx-artificer .bx-menu-toolbar .bx-menu-toolbar-item .bx-menu-toolbar-item-unit .bx-def-icon-size {
        @apply h-8 w-8;
    }

    /* Common elements: Page Submenu */
    .bx-artificer .bx-menu-main-submenu .bx-menu-item.bx-menu-tab-active a {
        @apply text-gray-900 dark:text-gray-100;
    }
    .bx-artificer .bx-menu-main-submenu .bx-menu-item.bx-menu-tab-active .bx-mi-underline {
        @apply bg-blue-500 group-hover:bg-blue-500;
    }

    /* Common elements: Profile Stats menu */
    .bx-artificer .bx-menu-profile-stats.bx-menu-ver li.bx-menu-tab-active {
        @apply bg-slate-900/[.08] dark:bg-slate-900 ring-1 ring-gray-200 dark:ring-gray-800 text-gray-900 dark:text-white;
    }
    .bx-artificer .bx-menu-profile-stats.bx-menu-ver li.bx-psmi-show-more,
    .bx-artificer .bx-menu-profile-stats.bx-menu-ver li.bx-psmi-show-less {
        @apply text-gray-400 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-300
    }


    /* Common elements: Profile Cover */
    .bx-artificer .bx-base-pofile-cover-thumb + .bx-base-pofile-cover-user {
        @apply ltr:lg:pl-52 rtl:lg:pr-52;
    }

    .bx-artificer .bx-base-pofile-cover-actions div.bx-base-general-entity-actions .bx-menu-custom-hor.bx-menu-hor-inline li.bx-mi-primary {
        @apply border-transparent text-gray-200 hover:text-white bg-blue-600 hover:bg-blue-700 focus:ring-blue-500;
    }


    /* Common elements: Informers */
    .bx-informer-msg {
        @apply flex items-center gap-3 py-3 px-4 rounded-xl ring-1 ring-inset text-sm leading-5;
    }
    .bx-informer-indicator {
        @apply flex-none flex items-center justify-center w-9 h-9 rounded-full;
    }
    .bx-informer-indicator .sys-icon {
        @apply w-5 h-5 leading-5 text-xl text-center;
    }
    .bx-informer-content {
        @apply flex-1 min-w-0 font-medium;
    }
    .bx-informer-content a:not(.bx-btn) {
        @apply font-semibold underline underline-offset-2 hover:opacity-80;
    }
    .bx-informer-action {
        @apply flex-none whitespace-nowrap;
    }
    .bx-informer-msg-info {
        @apply bg-blue-50 text-blue-800 ring-blue-200 dark:bg-blue-500/10 dark:text-blue-200 dark:ring-blue-500/25;
    }
    .bx-informer-msg-info .bx-informer-indicator {
        @apply bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300;
    }
    .bx-informer-msg-alert {
        @apply bg-yellow-50 text-yellow-800 ring-yellow-200 dark:bg-yellow-500/10 dark:text-yellow-200 dark:ring-yellow-500/25;
    }
    .bx-informer-msg-alert .bx-informer-indicator {
        @apply bg-yellow-100 text-yellow-700 dark:bg-yellow-500/20 dark:text-yellow-300;
    }
    .bx-informer-msg-error {
        @apply bg-red-50 text-red-800 ring-red-200 dark:bg-red-500/10 dark:text-red-200 dark:ring-red-500/25;
    }
    .bx-informer-msg-error .bx-informer-indicator {
        @apply bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-300;
    }


    /* Common elements: All Actions */
    .sys-action-counter.sys-ac-link,
    .sys-action-counter .sys-ac-link,
    .sys-ac-link .sys-action-counter {
        @apply flex items-center;
        @apply border-none;
        @apply text-gray-500 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-300;
        @apply rounded-full;
    }
    .sys-action-counter.sys-ac-only.sys-ac-link,
    .sys-action-counter.sys-ac-only .sys-ac-link,
    .sys-ac-link .sys-action-counter.sys-ac-only {
        @apply hover:bg-gray-100 dark:hover:bg-gray-600;
    }

    /* Common elements: Comments */
    .bx-artificer .cmt .bx-base-general-unit-meta-username {
        @apply text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white;
    }
    
    /* Common Elements: Votes */
    .bx-vote-bls-submenu-cnt {
        @apply border-b-gray-300 dark:border-b-gray-700;
    }
    .bx-vote-bls-submenu-cnt ul li.bx-menu-inter-act {
        @apply border-b-gray-500 dark:border-b-gray-500;
    }

    /* Common elements: Units */
    .bx-def-icon-badge-size,
    .bx-def-thumb-badge-size,
    .bx-def-ava-badge-size {
        @apply h-6 w-6;
    }
    .bx-def-ava-big-badge-size {
        @apply h-8 w-8;
    }

    .bx-artificer .bx-def-icon-size,
    .bx-artificer .bx-profile-avatar .bx-def-thumb-size,
    .bx-artificer .bx-profile-stats .bx-ps-user .bx-def-thumb-size {
        @apply h-8 w-8;
    }
    .bx-artificer .bx-def-thumb-size {
        @apply h-10 w-10;
    }
    .bx-artificer .bx-def-ava-size {
        @apply h-24 w-24;
    }
    .bx-artificer .bx-def-ava-big-size {
        @apply w-48 h-48;
    }

    .bx-base-text-unit-title a,
    .bx-tl-title a {
        @apply text-gray-800 hover:text-blue-500 dark:text-gray-100 dark:hover:text-blue-400 hover:no-underline;
    }

    .bx-base-text-unit-ext .bx-base-text-unit-text {
	@apply ltr:text-left rtl:text-right;
    }

    div.bx-tl-item-image{
        @apply aspect-video lg:aspect-auto rounded-lg;
    }
    img.bx-tl-item-image {
        @apply w-full h-full object-center object-cover lg:w-full lg:h-full rounded-lg;
    }

    .bx-base-text-unit-title a {
        @apply text-lg lg:text-xl font-semibold;
    }

    .bx-base-pofile-unit-badge {
        @apply inline-flex align-middle;
    }

    .bx-artificer .bx-base-pofile-unit-online {
        @apply absolute w-2.5 h-2.5 right-0.5 bottom-0.5 ring-1 ring-inset ring-white dark:ring-gray-800 bg-green-500 rounded-full;
    }

    .bx-artificer .bx-base-general-unit-meta .bx-base-profile-unit-meta-item > a:not(.bx-btn),
    .bx-artificer .bx-base-general-unit-meta ul.bx-menu-custom.bx-menu-custom-hor .bx-base-pofile-unit {
        @apply p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700;
    }


    /* Common elements: Auth */
    .sys-auth-block {
        @apply grid-cols-2;
    }
    .sys-auth-block.sys-auth-compact-container {
        @apply grid-cols-4;
    }


    /* Common elements: Votes */
    .bx-vote-likes .bx-vote-element-holder .bx-vote-do-vote.bx-vote-disabled,
    .bx-vote-likes .bx-vote-element-holder .bx-vote-do-vote.bx-vote-disabled .sys-icon {
        @apply text-gray-300 dark:text-gray-700;
    }

    /* Studio */
    .bx-std.bx-def-font,
    .bx-std .bx-def-font-inputs {
        @apply font-inter;
    }

    .bx-std-bg.bx-def-color-bg-page {
        @apply bg-gray-200 dark:bg-black;
    }

    .bx-std .bx-menu-top-center .bx-menu-tab-active .bx-mi-icon {
        @apply ring-4 ring-blue-300/50 ring-offset-2 ring-offset-white dark:ring-offset-black;
    }
    /* The divider follows the dock items it separates: both are hidden below md. */
    .bx-std .bx-menu-top-center .bx-menu-item-divider {
        @apply hidden md:flex border-l border-black/10 dark:border-white/10;
    }
    .bx-std .bx-menu-top-center .bx-menu-item-static,
    .bx-std .bx-menu-top-center .bx-menu-item-dynamic {
        @apply hidden md:flex;
    }

    .bx-std .bx-std-menu-top-left li a {
        @apply text-gray-800 dark:text-gray-200;
    }

    .bx-std .bx-stg-icon-gray-bg {
        @apply h-8 w-8;
        @apply bg-gray-200 bg-no-repeat bg-center;
        @apply rounded-lg;
    }

    /* Header buttons: a light-to-dark gradient like the app icons, edged by a 5% inset hairline instead of a border so the gradient's darker end never clashes with it. */
    .bx-std .bx-menu-toolbar .bx-menu-tab-item,
    .bx-std .bx-std-search-trigger,
    .bx-std .bx-std-header-btn {
        @apply relative border-0 bg-gradient-to-b from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800;
        @apply hover:from-gray-200 hover:to-gray-300 dark:hover:from-gray-600 dark:hover:to-gray-700;
        @apply text-gray-600 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300;
        @apply hover:ring-4 hover:ring-gray-200 dark:hover:ring-gray-800 hover:ring-offset-2 hover:ring-offset-white dark:hover:ring-offset-black;
        @apply transition duration-300 active:duration-100 active:scale-95 active:shadow-none;
        @apply after:absolute after:inset-0 after:rounded-[inherit] after:pointer-events-none after:ring-1 after:ring-inset after:ring-black/10 dark:after:ring-white/5;
    }
    .bx-std .bx-menu-toolbar .bx-menu-tab-item a {
        @apply text-gray-600 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300;
    }

    .bx-std-block.cnt-ttl-bg,
    .bx-std-block.cnt-bg {
        @apply bg-white dark:bg-gray-900;
        @apply rounded-2xl smooth-shadow-ring-sm;
    }

    #bx-std-pcap-menu-popup-account .bx-popup li a,
    #bx-std-pcap-menu-popup-account .bx-popup li .sys-icon,
    #bx-std-pcap-menu-popup-scheme .bx-popup li a {
        @apply text-gray-800 dark:text-gray-200 hover:text-black dark:hover:text-white;
    }
    
    #bx-std-pcap-menu-popup-assistant .bx-popup .bx-popup-header h2,
    #bx-std-pcap-menu-popup-assistant .bx-popup .bx-popup-header a {
        @apply text-gray-800 dark:text-gray-100;
    }

    .bx-std-pmen-item {
        @apply hover:bg-gray-200 dark:hover:bg-gray-800;
        @apply hover:font-medium;
        @apply duration-300;
    }
    .bx-std-pmen-item.bx-menu-tab-active {
        @apply bg-blue-300/50 hover:bg-blue-300/50;
        @apply font-semibold;
    }
    /* The item background plays the role of the header icons' ring-4; the icon only gets the 1px offset gap. */
    .bx-std-pmen-item .bx-std-pmen-ic-icon {
        @apply duration-300;
    }
    .bx-std-pmen-item:hover .bx-std-pmen-ic-icon,
    .bx-std-pmen-item.bx-menu-tab-active .bx-std-pmen-ic-icon {
        @apply ring-2 ring-white dark:ring-black;
    }
    .bx-std-pmen-item a {
        @apply text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white;
    }
    .bx-std-pmen-item.bx-menu-tab-active a {
        @apply text-gray-900 dark:text-white;
    }

    .bx-std .bx-def-font-color {
        @apply text-gray-800 dark:text-gray-200;
    }

    .bx-std .bx-def-color-bg-block,
    .bx-std .bx-popup-color-bg {
        @apply bg-white dark:bg-gray-900;
    }
    .bx-std .bx-def-color-bg-block {
        @apply smooth-shadow-ring-sm;
    }

    /* Icon tiles (launcher, top menu, side menu): soft outer shadow plus an inset hairline that darkens the tile in light mode and lightens it in dark mode, so the edge takes on the artwork's own hue. */
    .bx-std .bx-icon-tile {
        @apply relative smooth-shadow-md;
        @apply after:absolute after:inset-0 after:rounded-[inherit] after:pointer-events-none;
        @apply after:ring-1 after:ring-inset after:ring-black/10 dark:after:ring-white/15;
    }

    /* 36px tiles and buttons in the header: a tight stack that stays inside the bar. The md stack above is sized for the 72px launcher tiles and lands mostly below the bar, where it reads as no shadow at all. */
    .bx-std .bx-std-menu-top .bx-icon-tile,
    .bx-std .bx-menu-toolbar .bx-menu-tab-item,
    .bx-std .bx-std-search-trigger,
    .bx-std .bx-std-header-btn,
    .bx-std .bx-std-tile-btn {
        --tw-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.05), 0 4px 8px rgba(0, 0, 0, 0.04);
        --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 2px 4px var(--tw-shadow-color), 0 4px 8px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    }

    /* Sidebar icon tiles: the same gray gradient button as the header tools, hovered through the parent link (.group). */
    .bx-std .bx-std-tile-btn {
        @apply relative border-0 bg-gradient-to-b from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800;
        @apply text-gray-600 dark:text-gray-400;
        @apply after:absolute after:inset-0 after:rounded-[inherit] after:pointer-events-none after:ring-1 after:ring-inset after:ring-black/10 dark:after:ring-white/5;
    }
    /* 20px glyph in the 36px tile, like the header buttons (the svg fills the padding box; font icons get the same size). */
    .bx-std .bx-std-tile-btn > .sys-icon {
        @apply flex items-center justify-center text-[20px] leading-5;
    }
    /* group-hover can't be @applied here (Tailwind would put .group above .bx-std), so the hovered link is spelled out. */
    .bx-std .group:hover .bx-std-tile-btn {
        @apply from-gray-200 to-gray-300 dark:from-gray-600 dark:to-gray-700 text-gray-700 dark:text-gray-300;
    }

    /* Popups float above blocks, so they get the larger shadow stack with the same hairline ring. */
    .bx-std .bx-popup-border {
        @apply border-0 ring-0 rounded-2xl smooth-shadow-ring-lg;
    }
    /* Popup menus: same item treatment as the page sidebar, with 20px icons. */
    .bx-std .bx-popup-content:has(> .bx-menu-verlit) {
        @apply p-1;
    }
    .bx-std .bx-menu-verlit li {
        @apply mt-0.5 first:mt-0 rounded-lg duration-300;
        @apply hover:bg-gray-200 dark:hover:bg-gray-800;
        @apply active:bg-blue-300/50;
    }
    .bx-std .bx-menu-verlit li.bx-menu-tab-active {
        @apply bg-blue-300/50 hover:bg-blue-300/50;
    }
    .bx-std .bx-menu-verlit li a {
        @apply flex items-center gap-3 h-9 px-2.5 rounded-lg text-sm whitespace-nowrap;
    }
    .bx-std .bx-menu-verlit li svg,
    .bx-std .bx-menu-verlit li img,
    .bx-std .bx-menu-verlit li .sys-icon {
        @apply flex-none w-5 h-5 m-0;
    }
    /* Dropdown menus are tighter than modals: 12px outer radius over 8px items with 4px padding. */
    .bx-std .bx-popup-menu .bx-popup-border {
        @apply rounded-xl;
    }
    /* Account menu: the signed-in name is a label and the theme row holds a segmented control; neither is a link. */
    .bx-std .bx-menu-account {
        @apply min-w-48;
    }
    .bx-std .bx-menu-verlit li.bx-mv-static {
        @apply hover:bg-transparent dark:hover:bg-transparent active:bg-transparent;
    }
    .bx-std .bx-menu-verlit li.bx-mv-static > div {
        @apply flex items-center gap-3 h-9 px-2.5 text-sm whitespace-nowrap;
    }
    .bx-std .bx-menu-verlit li.bx-mv-label {
        @apply mb-1 pb-1 rounded-none border-b border-black/10 dark:border-white/10;
    }
    .bx-std .bx-menu-verlit li.bx-mv-label > div {
        @apply font-semibold;
    }
    .bx-std .bx-menu-verlit li.bx-mv-theme {
        @apply mt-1 pt-1 rounded-none border-t border-black/10 dark:border-white/10;
    }
    .bx-std .bx-menu-verlit li.bx-mv-theme > div > span {
        @apply flex-auto;
    }
    .bx-std .bx-theme-toggle {
        @apply flex p-0.5 rounded-full bg-gray-200 dark:bg-gray-800;
    }
    .bx-std .bx-theme-option {
        @apply flex items-center justify-center w-7 h-7 rounded-full text-gray-500 dark:text-gray-400 transition-colors duration-150;
        @apply hover:text-gray-900 dark:hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500;
    }
    .bx-std .bx-theme-option[aria-checked="true"] {
        @apply bg-white dark:bg-gray-700 text-gray-900 dark:text-white smooth-shadow-xs;
    }
    .bx-std .bx-menu-verlit li .bx-theme-option svg {
        @apply w-4 h-4;
    }
    /* App settings popup (launcher edit mode): same chrome and row rhythm as the dropdown menus. */
    .bx-std .bx-mod-popup-settings .bx-form-element-wrapper {
        @apply mt-0.5 first:mt-0 rounded-lg duration-300;
        @apply hover:bg-gray-200 dark:hover:bg-gray-800;
    }
    .bx-std .bx-mod-popup-settings {
        @apply min-w-48;
    }
    .bx-std .bx-mod-popup-settings .bx-form-element-wrapper-oneline .bx-form-element {
        @apply flex items-center h-9 px-2.5;
    }
    /* Label on the left, control on the right: the same reading order as the Theme row in the account menu. */
    .bx-std .bx-mod-popup-settings .bx-form-caption-oneline {
        @apply order-first flex-auto mx-0 text-sm whitespace-nowrap;
    }
    .bx-std .bx-mod-popup-settings .bx-form-value-oneline {
        @apply ml-3;
    }
    .bx-std .bx-popup-header h2 {
        @apply text-gray-800 dark:text-gray-100;
    }
    .bx-std .bx-popup-header .bx-icon-close {
        @apply text-gray-900 dark:text-white;
    }
    
    .bx-std .bx-btn {
        @apply inline-flex items-center;
        @apply min-h-11;
    }

    .bx-std .bx-btn:not(.bx-btn-primary) {
        @apply bg-gray-200 dark:bg-gray-800 hover:bg-white dark:hover:bg-gray-700 active:bg-gray-200/80 dark:active:bg-gray-800/50;
        @apply border-gray-300 dark:border-0;
        @apply text-sm font-medium leading-10;
    }
    .bx-std .bx-btn:not(.bx-btn-primary),
    .bx-std .bx-btn:not(.bx-btn-primary) .sys-icon:not(.sys-colored),
    .bx-std .bx-act,
    .bx-std .bx-act .sys-icon:not(.sys-colored) {
        @apply text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-50 active:text-gray-900 dark:active:text-gray-50;
    }

    .bx-std .bx-btn.bx-btn-primary {
        @apply bg-black/80 dark:bg-white hover:bg-black dark:hover:bg-white/80 active:bg-black/80 dark:active:bg-white/80;
        @apply border-0 border-white/20 dark:border-white/20;
        @apply text-white dark:text-black text-sm font-medium leading-10;
        @apply active:opacity-50;
    }
    .bx-std .bx-btn.bx-btn-primary .sys-icon:not(.sys-colored) {
        @apply text-white dark:text-black;
    }
    
    
    /* Studio: Launcher */
    .bx-std-bg.bx-std-page-launcher {
        @apply bg-gray-100 dark:bg-black;
    }

    /* Keyboard focus in Studio chrome: one blue ring on the visual control, the link itself carries no outline. */
    .bx-std .bx-menu-top-center li a:focus-visible,
    .bx-std .bx-menu-toolbar .bx-menu-tab-item a:focus-visible,
    .bx-std .bx-menu-breadcrumb li a:focus-visible,
    .bx-std .bx-std-search-trigger:focus-visible,
    .bx-std .bx-std-widget-link:focus-visible,
    .bx-std .bx-std-pmen-item a:focus-visible {
        @apply outline-none;
    }
    .bx-std .bx-menu-top-center li a:focus-visible .bx-mi-icon,
    .bx-std .bx-menu-toolbar .bx-menu-tab-item:has(a:focus-visible),
    .bx-std .bx-menu-breadcrumb li a:focus-visible .bx-std-header-btn,
    .bx-std .bx-std-search-trigger:focus-visible,
    .bx-std .bx-std-widget-icon:has(> .bx-std-widget-link:focus-visible),
    .bx-std .bx-std-pmen-item:has(a:focus-visible) {
        @apply ring-2 ring-blue-500 dark:ring-blue-400 ring-offset-2 ring-offset-white dark:ring-offset-black;
    }
    .bx-std .bx-std-widget-icon:has(> .bx-std-widget-link:focus-visible) {
        @apply ring-offset-gray-200 dark:ring-offset-black scale-105;
    }
    .bx-std .bx-std-pmen-item:has(a:focus-visible) {
        @apply ring-offset-0;
    }
    /* Launcher: the tile Enter will open while filtering looks exactly like a hovered tile. */
    .bx-std .bx-std-widget-icon.bx-std-widget-icon-pick {
        @apply ring-4 ring-gray-300 dark:ring-gray-700 ring-offset-2 ring-offset-gray-200 dark:ring-offset-black scale-105;
    }
    /* Launcher grid: one uniform inset per tile, so the gap between columns, between rows and above the first row is always 2x the inset. */
    .bx-std .bx-std-launcher {
        @apply pt-3 sm:pt-4 lg:pt-5;
    }
    .bx-std .bx-std-widgets .bx-std-widget {
        @apply p-3 sm:p-4 lg:p-5;
    }

    /* Builder-based pages (Dashboard): 8px gutters and gaps everywhere, matching the header's mt-2/mx-2 and the sidebar pages. */
    .bx-std .bx-std-page-content-cnt.bx-def-padding-rightbottomleft {
        @apply px-2 pb-2;
    }
    .bx-std .bx-layout-wrapper {
        @apply gap-2;
    }
    .bx-std .bx-layout-row {
        @apply gap-y-2;
    }
    .bx-std .bx-layout-cell {
        @apply gap-2;
    }
    .bx-std .bx-layout-col[class*="ltr:md:pr-"],
    .bx-std .bx-layout-col[class*="ltr:lg:pr-"] {
        @apply ltr:md:pr-2 rtl:md:pl-2;
    }
    .bx-std .bx-layout-col[class*=" md:pr-"] {
        @apply md:pr-2;
    }

    /* Studio: Settings */
    #adm-settings-form-categorized .bx-form-advanced-wrapper .bx-form-section-wrapper:last-child {
        @apply bg-white/90 dark:bg-gray-900/90; 
    }


    /* Modules: Timeline */
    .bx-artificer .group\/item:hover .bx-tl-item-text .bx-tl-content.bx-tl-overflow .bx-tl-content-overflow {
        @apply to-gray-50;
    }
    .dark .bx-artificer .group\/item:hover .bx-tl-item-text .bx-tl-content.bx-tl-overflow .bx-tl-content-overflow {
        @apply to-gray-900;
    }
    .bx-artificer .bx-tl-item-activity .bx-stl-mil-wo-gaps-sm .sys-action-element-holder > a,
    .bx-artificer .bx-menu-object-bx_timeline_menu_item_manage .bx-stl-mil-wo-gaps-sm .sys-action-element-holder > a,
    .bx-artificer .bx-menu-object-sys_cmts_item_manage .bx-stl-mil-wo-gaps-sm .sys-action-element-holder > a{
        @apply relative flex;
        @apply bx-stl-mil-gaps-sm;
    }
    .bx-artificer .bx-popup .bx-menu-object-bx_timeline_menu_item_manage .bx-stl-mil-wo-gaps-sm .sys-action-element-holder > a, 
    .bx-artificer .bx-popup .bx-menu-object-sys_cmts_item_manage .bx-stl-mil-wo-gaps-sm .sys-action-element-holder > a {
        @apply px-4;
    }


    /* 3d Party: Flickity */
    .bx-artificer .flickity-button {
        @apply text-gray-700 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 opacity-75 hover:opacity-100;
    }


    /* 3d Party: Quill */
    .bx-artificer div.ql-editor {
        @apply bg-gray-50 dark:bg-gray-900/50 focus:bg-white dark:focus:bg-gray-900;
    }

    .bx-artificer div.ql-editor:focus{
        @apply border border-gray-300 dark:border-gray-700 focus:border-blue-500 dark:focus:border-blue-500 focus:border-opacity-70 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-20 focus:outline-none;
    }

    .bx-artificer .ql-mention-list li {
        @apply flex items-center px-4 py-2 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:text-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 text-sm font-normal;
    }
    
    /* Modules: Editor */
    .editor_toolbar button.selected{
        @apply bg-gray-300 dark:bg-black/50 dark:text-gray-200 text-gray-800;
    }

    /* Modules: Forum. Units - new view, for UNA14 need to migrate in general */
    .bx-artificer .bx-base-unit-showcase-wrapper.bx-forum-wrapper:not(.flickity-enabled)
    {
        grid-auto-rows: 0; 
        grid-template-rows: repeat(1, 1fr);
        overflow-y: hidden;
    }
    
    .bx-artificer .bx-base-text-unit-gallery-wrapper.bx-forum-wrapper,
    .bx-artificer .bx-base-unit-showcase-wrapper.bx-forum-wrapper:not(.flickity-enabled)
    {
        @apply max-w-full grid sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4 md:max-w-none;
    }
    
    .bx-artificer .bx-layout-column-wide .bx-base-text-unit-gallery-wrapper.bx-forum-wrapper,
    .bx-artificer .bx-layout-column-wide .bx-base-unit-showcase-wrapper.bx-forum-wrapper:not(.flickity-enabled)
    {
        @apply max-w-full grid sm:grid-cols-2 md:grid-cols-3 gap-4 md:max-w-none;
    }
    
    .bx-artificer .bx-layout-column-half .bx-base-text-unit-gallery-wrapper.bx-forum-wrapper,
    .bx-artificer .bx-layout-column-half .bx-base-unit-showcase-wrapper.bx-forum-wrapper:not(.flickity-enabled)
    {
        @apply max-w-full grid sm:grid-cols-1 md:grid-cols-2 gap-4 md:max-w-none;
    }
    .bx-artificer .bx-layout-column-thin .bx-base-text-unit-gallery-wrapper.bx-forum-wrapper,
    .bx-artificer .bx-layout-column-thin .bx-base-unit-showcase-wrapper.bx-forum-wrapper:not(.flickity-enabled)
    {
        @apply max-w-full grid sm:grid-cols-1 gap-4 md:max-w-none;
    }
    .bx-artificer .bx-base-unit-showcase-wrapper.bx-forum-wrapper.flickity-enabled
    { 
       @apply block;
    }
    .bx-artificer .bx-base-unit-showcase-wrapper.bx-forum-wrapper .flickity-slider{ 
       @apply space-x-4 ;
    }
    .bx-artificer .bx-search-result-block.bx-clearfix:before{
        @apply hidden;
    }

    /* badges */
    .bx-badges-list{
        @apply inline-flex grow-0 space-x-1 w-min
    }
    .bx-badge{
        @apply inline-flex items-center w-max space-x-1 px-1.5 py-0.5 rounded-full;
        @apply text-white text-xs font-medium whitespace-nowrap;
        @apply opacity-90 hover:opacity-100 active:translate-y-0.5
    }
    .bx-badge img,
    .bx-badge svg {
        @apply max-h-4 m-0 p-0;
    }
    .sys-icon-image.bx-badge-icon,
    .sys-icon-svg.bx-badge-icon{
        @apply w-4 h-4
    }
    
    /* filepond */
    .filepond--drop-label label{
        @apply leading-6 text-base font-medium text-gray-700 dark:text-gray-300;
    }
}

/* Select2 dark/light styles */

/* Base container */
.select2-container .select2-selection--single {
    @apply h-10 flex items-center border rounded-md px-3;
}

/* Light mode */
.select2-container--default .select2-selection--single {
    @apply bg-white border-gray-300 text-gray-900;
}

/* Dark mode */
.dark .select2-container--default .select2-selection--single .select2-selection__rendered,
.dark .select2-container--default .select2-selection--single {
    @apply bg-gray-800 border-gray-600 text-gray-100;
}

/* Dropdown */
.select2-dropdown {
    @apply rounded-md border shadow-lg;
}

/* Light dropdown */
.select2-container--default .select2-dropdown {
    @apply bg-white border-gray-300;
}

/* Dark dropdown */
.dark .select2-container--default .select2-dropdown {
    @apply bg-gray-800 border-gray-600;
}

/* Options */
.select2-results__option {
    @apply px-3 py-2 cursor-pointer;
}

/* Hover / active */
.select2-results__option--highlighted {
    @apply bg-blue-500 text-white;
}

/* Selected item */
.select2-results__option[aria-selected=true] {
    @apply bg-blue-100;
}

.dark .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.dark .select2-results__option[aria-selected=true] {
    @apply bg-blue-700 text-white;
}

/* Search input */
.select2-search__field {
    @apply w-full px-2 py-1 border rounded-md;
}

.dark .select2-search__field {
    @apply bg-gray-700 border-gray-600 text-white;
}