CAREUI.css

.cui-input-legend::before {
    content: " ";
    position: absolute;
    left: -4px;
    right: -4px;
    top: calc(50% - 3px);
    height: 6px;
    background: #fff;
    z-index: -1;
}

.cui-label-required::after {
    content: "*";
    color: rgb(255, 81, 0);
    font-size: 1.2em;
    font-weight: bold;
    margin-left: 4px;
}

.cui-input-base {
    @apply text-sm block w-full py-3 px-4 text-black placeholder:text-secondary-600 bg-white disabled:bg-secondary-200 border border-secondary-400 focus:border-primary-400 ring-0 focus:ring-1 ring-primary-400 outline-none focus:outline-none shadow-none rounded transition-colors duration-300 !important
}

.cui-dropdown-base {
    @apply z-40 w-full rounded-b-md xl:rounded-b-lg shadow-lg overflow-auto max-h-96 bg-secondary-100 divide-y divide-secondary-300 ring-1 ring-secondary-400 focus:outline-none
}

.cui-card {
    @apply bg-white p-5 rounded-lg shadow
}

.tooltip {
    @apply relative
}

.tooltip .tooltip-text {
    visibility: hidden;
    opacity: 0;
    @apply bg-black/75 backdrop-blur text-white text-center p-2 rounded absolute z-50 text-sm block transition-opacity whitespace-nowrap pointer-events-none
}

.tooltip .tooltip-left {
    transform: translateX(20px);
}

.tooltip .tooltip-right {
    transform: translateX(-20px);
}

.tooltip .tooltip-top {
    transform: translateY(20px);
}

.tooltip .tooltip-bottom {
    transform: translateY(-20px);
}

.tooltip .tooltip-right {
    top: 20%;
    left: calc(100% + 10px);
}


.tooltip .tooltip-top {
    bottom: 100%;
    left: 50%;
}

.tooltip .tooltip-bottom {
    top: 100%;
    left: 50%;
}

.tooltip .tooltip-left {
    top: -5px;
    right: calc(100% + 10px);
}

.tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 100;
    transform: translateX(0px);
    transform: translateY(0px);
}

.cui-input:-webkit-autofill,
.cui-input:-webkit-autofill:hover,
.cui-input:-webkit-autofill:focus,
.cui-input:-webkit-autofill:active {
    box-shadow: 0 0 0 40px #f9fafb inset !important;
    -webkit-box-shadow: 0 0 0 40px #f9fafb inset !important;
}

.cui-slideover-x {
    @apply w-full md:w-[300px] h-full
}

.cui-slideover-y {
    @apply h-full md:h-[300px] w-full
}

.button-primary-default { @apply accent-primary-500 bg-primary-500 hover:bg-primary-400 text-white !important }
.button-primary-ghost { @apply accent-primary-500 hover:bg-primary-100 text-primary-500 !important }
.button-primary-border { @apply border border-primary-500 }

.button-secondary-default { @apply accent-secondary-200 bg-white hover:bg-secondary-200 text-secondary-800 !important }
.button-secondary-ghost { @apply accent-secondary-300 hover:bg-secondary-400 text-secondary-700 !important }
.button-secondary-border { @apply border border-secondary-300 }

.button-danger-default { @apply accent-danger-500 bg-danger-500 hover:bg-danger-400 text-white !important }
.button-danger-ghost { @apply accent-danger-500 hover:bg-danger-100 text-danger-500 !important }
.button-danger-border { @apply border border-danger-500 }

.button-warning-default { @apply accent-warning-500 bg-warning-500 hover:bg-warning-400 text-white !important }
.button-warning-ghost { @apply accent-warning-500 hover:bg-warning-100 text-warning-500 !important }
.button-warning-border { @apply border border-warning-500 }

.button-alert-default { @apply accent-alert-600 bg-alert-600 hover:bg-alert-500 text-white !important }
.button-alert-ghost { @apply accent-alert-600 hover:bg-alert-100 text-alert-600 !important }
.button-alert-border { @apply border border-alert-600 }

.button-shape-square { @apply rounded }
.button-shape-circle { @apply rounded-full }

.button-size-small { @apply px-2 py-1 text-xs }
.button-size-default { @apply py-2 px-4 text-sm }
.button-size-large { @apply py-3 px-5 text-base }

.dropdown-item-primary { @apply accent-primary-500 hover:bg-primary-100 text-black hover:text-primary-500 }
.dropdown-item-secondary { @apply accent-secondary-200 hover:bg-secondary-200 text-secondary-700 }
.dropdown-item-danger { @apply accent-danger-500 hover:bg-danger-100 text-danger-500 }
.dropdown-item-warning { @apply accent-warning-500 hover:bg-warning-100 text-warning-500 }
.dropdown-item-alert { @apply accent-alert-600 hover:bg-alert-100 text-alert-600 }

a.button-primary-default { @apply hover:bg-primary-400 }
a.button-primary-ghost { @apply hover:bg-primary-100 }

a.button-secondary-default { @apply hover:bg-secondary-200 }
a.button-secondary-ghost { @apply hover:bg-secondary-100 }

a.button-danger-default { @apply hover:bg-danger-400 }
a.button-danger-ghost { @apply hover:bg-danger-100 }

a.button-warning-default { @apply hover:bg-warning-400 }
a.button-warning-ghost { @apply hover:bg-warning-100 }

a.button-alert-default { @apply hover:bg-alert-500 }
a.button-alert-ghost { @apply hover:bg-alert-100 }

button.button-primary-default { @apply enabled:hover:bg-primary-400 }
button.button-primary-ghost { @apply enabled:hover:bg-primary-100 }

button.button-secondary-default { @apply enabled:hover:bg-secondary-200 }
button.button-secondary-ghost { @apply enabled:hover:bg-secondary-100 }

button.button-danger-default { @apply enabled:hover:bg-danger-400 }
button.button-danger-ghost { @apply enabled:hover:bg-danger-100 }

button.button-warning-default { @apply enabled:hover:bg-warning-400 }
button.button-warning-ghost { @apply enabled:hover:bg-warning-100 }

button.button-alert-default { @apply enabled:hover:bg-alert-500 }
button.button-alert-ghost { @apply enabled:hover:bg-alert-100 }

.cui-form-button-group {
    @apply flex flex-col-reverse md:flex-row md:justify-end gap-2 w-full md:w-auto
}

.cui-range-slider {
    @apply outline-none bg-black/10 h-2 w-full appearance-none transition-all
}
.cui-range-slider::-webkit-slider-thumb  {
    @apply appearance-none w-5 aspect-square bg-black border border-black rounded-full cursor-pointer hover:scale-125 transition-all
} 
.cui-range-slider::-moz-range-thumb  {
    @apply appearance-none w-5 aspect-square bg-black border border-black rounded-full cursor-pointer
} 
hr {
    @apply border border-secondary-300
}