una/plugins_public/tailwind/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-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-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-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-left {
        @apply ml-2;
    }
    .bx-artificer .bx-def-margin-sec-left-auto {
        @apply ml-2 first:ml-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-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-auto {
        @apply pl-2 first:pl-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-artificer .bx-def-border {
        @apply border border-gray-200 dark:border-gray-700;
    }
    .bx-artificer .bx-def-round-corners {
        @apply rounded-md;
    }

    /* 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 {
        @apply text-sm text-gray-700 dark:text-gray-200 font-semibold;
    }

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

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

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

    .bx-artificer h3,
    .bx-artificer .bx-def-font-h3 {
        @apply text-xl;
    }
    
    .bx-artificer h2,
    .bx-artificer .bx-def-font-h2 {
        @apply text-2xl;
    }

    .bx-artificer h1,
    .bx-artificer .bx-def-font-h1 {
        @apply text-3xl leading-10;
    }

    /* Common elements: Pages. */
    .bx-def-color-bg-page{
	@apply bg-gray-100 dark:bg-gray-900;
    }

    /* Common elements: Blocks, Boxes, etc. */
    .bx-artificer .bx-def-box {
        @apply flex flex-col overflow-hidden;
    }
    .bx-artificer .bx-def-box.bx-def-box-hor {
        @apply flex-row;
    }
    .bx-artificer .bx-def-color-bg-block,
    .bx-artificer .bx-def-color-bg-box,
    .bx-artificer .bx-popup-color-bg {
        @apply bg-white dark:bg-gray-800 shadow;
    }
    .bx-artificer .bx-def-border-block,
    .bx-artificer .bx-def-box,
    .bx-artificer .bx-popup-border {
        @apply ring-1 ring-gray-300 dark:ring-gray-700;
    }
    .bx-artificer .bx-def-border-radius-block,
    .bx-artificer .bx-def-box-round-corners,
    .bx-artificer .bx-popup-border {
        @apply rounded-md;
    }
    .bx-artificer .bx-content-padding-block {
        @apply p-3 md:p-4;
    }
    .bx-artificer .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-artificer .bx-def-color-bg-box-active {
        @apply bg-gray-100 dark:bg-gray-700;
    }

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

    /* Common Elements: 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:-translate-y-px;
    }
    .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 px-4 py-2;
        @apply bx-btn-shadow;
        @apply bx-btn-bg;
        @apply bx-btn-border;
        @apply bx-btn-text;
        @apply transform-gpu transition-all duration-150;
        @apply bx-btn-hover bx-btn-active;
    }
    .bx-btn i, 
    .bx-btn u {
        @apply inline-block align-middle;
    }

    .bx-btn i, 
    .bx-btn img {
        @apply w-5 h-5 leading-5 text-gray-600 dark:text-gray-300;
    }

    .bx-btn:hover i, 
    .bx-btn:hover img {
        @apply text-gray-800 dark:text-gray-100;
    }

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

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

    .bx-btn.bx-btn-primary {
        @apply bg-blue-600 hover:bg-blue-500 active:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 dark:active:bg-blue-800;
        @apply border border-blue-600 hover:border-blue-500 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;
    }

    .bx-btn.bx-btn-small {
        @apply py-1 text-xs;
    }

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


    /* Common elements: Forms */
    .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 {
        @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;
    }

    /* Common elements: Forms: Text Input */
    .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,
    .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-1.5;
        @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-sm 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-artificer .bx-form-input-wrapper-password {
        @apply relative block w-full pl-3 pr-8;
        @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-sm 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/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;
        @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-sm 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-artificer .bx-form-input-checkbox,
    .bx-artificer .bx-form-input-radio {
        @apply block w-4 h-4;
        @apply bg-gray-50 dark:bg-gray-900/50 bg-origin-border;
        @apply border 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 rounded;
        @apply appearance-none select-none;
    }
    .bx-artificer .bx-def-font-inputs.bx-form-input-checkbox,
    .bx-artificer .bx-def-font-inputs.bx-form-input-radio {
        @apply leading-6 text-sm font-medium text-blue-600 dark:text-blue-600;
    }
    .bx-artificer .bx-form-input-checkbox:checked,
    .bx-artificer .bx-form-input-radio:checked {
        background-color: currentColor;
        border-color: transparent;
    }
    .bx-artificer .bx-form-input-checkbox:checked {
        background-image:url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2aWV3Qm94PScwIDAgMTYgMTYnIGZpbGw9JyNmZmYnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTEyLjIwNyA0Ljc5M2ExIDEgMCAwIDEgMCAxLjQxNGwtNSA1YTEgMSAwIDAgMS0xLjQxNCAwbC0yLTJhMSAxIDAgMCAxIDEuNDE0LTEuNDE0TDYuNSA5LjA4Nmw0LjI5My00LjI5M2ExIDEgMCAwIDEgMS40MTQgMHonLz48L3N2Zz4=)
    }
    .bx-artificer .bx-form-input-radio:checked {
        background-image:url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2aWV3Qm94PScwIDAgMTYgMTYnIGZpbGw9JyNmZmYnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PGNpcmNsZSBjeD0nOCcgY3k9JzgnIHI9JzMnLz48L3N2Zz4=)
    }


    /* Common elements: Forms: Switcher Input */
    .bx-artificer .bx-switcher-cont.on button {
        @apply bg-white dark:bg-gray-800;
    }
    .bx-artificer .bx-switcher-cont.on button span {
        @apply bg-green-500 dark:bg-green-500 translate-x-5;
    }
    .bx-artificer .bx-switcher-cont.off button {
        @apply bg-gray-200 dark:bg-gray-900;
    }
    .bx-artificer .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-sm 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 overflow-visible;
    }

    .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 ring-1 ring-gray-300 dark:ring-gray-700 rounded-md;
    }

    .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-artificer .bx-stl-mil,
    .bx-artificer .bx-stl-mil-sm,
    .bx-artificer .bx-stl-mil-wo-bg,
    .bx-artificer .bx-stl-mil-wo-bg-gaps {
        @apply leading-6 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 font-medium;
    }
    
    .bx-artificer .bx-stl-mil,
    .bx-artificer .bx-stl-mil-sm,
    .bx-artificer .bx-stl-mil-wo-bg {
        @apply flex items-center px-3 py-1.5;
    }
    .bx-artificer .bx-stl-mil,
    .bx-artificer .bx-stl-mil-sm {
        @apply active:bg-gray-300 dark:active:bg-black/50 hover:bg-gray-200/50 dark:hover:bg-gray-700/50;
        @apply rounded-md;
    }
    .bx-artificer .bx-stl-mil-sm {
        @apply px-2 leading-5;
    }
    .bx-artificer .bx-popup .bx-stl-mil-sm {
        @apply px-4;
    }
    .bx-artificer .bx-stl-mil-hover {
        @apply hover:text-gray-800 dark:hover:text-gray-200;
        @apply hover:bg-gray-200/50 dark:hover:bg-gray-700/50;
    }
    .bx-artificer .bx-stl-mil-active {
        @apply active:bg-gray-300 dark:active:bg-black/50;
    }
    .bx-artificer .bx-popup .bx-stl-mil,
    .bx-artificer .bx-popup .bx-stl-mil-sm {
        @apply rounded-none;
    }
    .bx-artificer .bx-menu-tab-active .bx-stl-mil,
    .bx-artificer .bx-menu-tab-active .bx-stl-mil-sm {
        @apply ring-1 ring-white/50 dark:ring-gray-800/50 bg-gray-200 dark:bg-gray-900 text-gray-900 dark:text-white;
    }
    .bx-artificer .bx-popup .bx-menu-tab-active .bx-stl-mil,
    .bx-artificer .bx-popup .bx-menu-tab-active .bx-stl-mil-sm {
        @apply ring-0;
    }
    .bx-artificer .bx-stl-mii,
    .bx-artificer .bx-stl-mii-sm,
    .bx-artificer .bx-stl-mil .sys-action-do-icon {
        @apply flex items-center justify-center text-gray-500 text-lg;
    }
    
    .bx-artificer .bx-stl-mii > *,
    .bx-artificer .bx-stl-mii-sm > *,
    .bx-artificer .bx-stl-mil .sys-action-do-icon > * {
        @apply flex items-center justify-center h-6 w-6 mr-3;
    }
    .bx-artificer .bx-stl-mii:last-child > *,
    .bx-artificer .bx-stl-mii-sm:last-child > *,
    .bx-artificer .bx-stl-mil .sys-action-do-icon:last-child > * {
        @apply mr-0;
    }
    .bx-artificer .bx-stl-mil .sys-action-do-icon ~ .sys-action-do-text {
        @apply ml-0; 
    }
    .bx-artificer .bx-stl-mii-sm {
        @apply h-4 w-4 mr-1 leading-4 text-sm;
    }
    .bx-artificer .bx-stl-mit {
        @apply truncate;
    }
    .bx-artificer .bx-stl-mia {
        @apply inline-block py-0.5 px-2 bg-gray-200 dark:bg-gray-800 text-gray-600 dark:text-gray-300 text-xs rounded-full;
    }

    /* 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;
    }

    /* 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;
    }

    /* 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;
    }

    /* Main menu */
    /* 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;
    }

    /* 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
    }


    /* Profile Cover Actions */
    .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-artificer .bx-informer-msg a {
        @apply text-blue-600 hover:text-blue-700 dark:text-blue-500 dark:hover:text-blue-600;
    }
    .bx-artificer .bx-informer-msg-info {
        @apply bg-blue-50 text-blue-700;
    }
    .bx-artificer .bx-informer-msg-alert {
        @apply bg-yellow-50 text-yellow-700;
    }
    .bx-artificer .bx-informer-msg-error {
        @apply bg-red-50 text-red-700;
    }
    .bx-artificer .bx-form-row-view-value {
        @apply truncate;
    }

    /* Common elements: All Actions */
    .bx-artificer .sys-action-counter.sys-ac-link,
    .bx-artificer .sys-action-counter .sys-ac-link {
        @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;
    }
    .bx-artificer .sys-action-counter.sys-ac-only.sys-ac-link,
    .bx-artificer .sys-action-counter.sys-ac-only .sys-ac-link {
        @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: Units */
    .bx-artificer .bx-def-icon-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-artificer .bx-base-text-unit-title a,
    .bx-artificer .bx-tl-title a {
        @apply hover:underline hover:text-blue-700 dark:hover:text-blue-600;
    }

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

    
    /* Modules: Timeline */
    .bx-artificer .bx-tl-item-text .bx-tl-content.bx-tl-overflow:before {
        @apply bg-gradient-to-b from-transparent to-white dark:to-gray-800;
    }


    /* 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;
    }
}