.ui-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(226, 232, 240, 0.88) rgba(2, 6, 23, 0.9);
}

.ui-scrollbar::-webkit-scrollbar {
    width: 0.62rem;
    height: 0.62rem;
}

.ui-scrollbar::-webkit-scrollbar-track {
    background: rgba(2, 6, 23, 0.94);
}

.ui-scrollbar::-webkit-scrollbar-thumb {
    border: 2px solid rgba(2, 6, 23, 0.94);
    border-radius: 9999px;
    background: rgba(226, 232, 240, 0.9);
    background-clip: padding-box;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.ui-scrollbar:hover::-webkit-scrollbar-thumb {
    background: rgba(248, 250, 252, 0.96);
}

.dark .ui-scrollbar {
    scrollbar-color: rgba(226, 232, 240, 0.88) rgba(2, 6, 23, 0.92);
}

.dark .ui-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(226, 232, 240, 0.9);
}

.dark .ui-scrollbar:hover::-webkit-scrollbar-thumb {
    background: rgba(248, 250, 252, 0.96);
}

body.backoffice-app,
body.frontoffice-app {
    scrollbar-width: thin;
    scrollbar-color: rgba(226, 232, 240, 0.88) rgba(2, 6, 23, 0.9);
}

body.backoffice-app ::-webkit-scrollbar,
body.frontoffice-app ::-webkit-scrollbar {
    width: 0.62rem;
    height: 0.62rem;
}

body.backoffice-app ::-webkit-scrollbar-track,
body.frontoffice-app ::-webkit-scrollbar-track {
    background: rgba(2, 6, 23, 0.94);
}

body.backoffice-app ::-webkit-scrollbar-thumb,
body.frontoffice-app ::-webkit-scrollbar-thumb {
    border: 2px solid rgba(2, 6, 23, 0.94);
    border-radius: 9999px;
    background: rgba(226, 232, 240, 0.9);
    background-clip: padding-box;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

body.backoffice-app ::-webkit-scrollbar-thumb:hover,
body.frontoffice-app ::-webkit-scrollbar-thumb:hover {
    background: rgba(248, 250, 252, 0.96);
}

body.backoffice-app ::-webkit-scrollbar-corner,
body.frontoffice-app ::-webkit-scrollbar-corner {
    background: transparent;
}

@media (prefers-color-scheme: dark) {
    .ui-scrollbar {
        scrollbar-color: rgba(226, 232, 240, 0.88) rgba(2, 6, 23, 0.92);
    }

    .ui-scrollbar::-webkit-scrollbar-thumb {
        background: rgba(226, 232, 240, 0.9);
    }

    .ui-scrollbar:hover::-webkit-scrollbar-thumb {
        background: rgba(248, 250, 252, 0.96);
    }

    body.backoffice-app,
    body.frontoffice-app {
        scrollbar-color: rgba(226, 232, 240, 0.88) rgba(2, 6, 23, 0.92);
    }

    body.backoffice-app ::-webkit-scrollbar-thumb,
    body.frontoffice-app ::-webkit-scrollbar-thumb {
        background: rgba(226, 232, 240, 0.9);
    }

    body.backoffice-app ::-webkit-scrollbar-thumb:hover,
    body.frontoffice-app ::-webkit-scrollbar-thumb:hover {
        background: rgba(248, 250, 252, 0.96);
    }
}