@media screen and (min-width: 768px) {
    ::-webkit-scrollbar {
        -webkit-appearance: none;
        width: 12px;
        height: 12px;
    }



    ::-webkit-scrollbar-thumb {
        background-color: rgba(0,0,0,.3);
        border-radius: 10px;
    }

        ::-webkit-scrollbar-thumb:hover {
            background-color: rgba(var(--bs-primary), 0.6);
            -webkit-transition: background-color 1s linear;
            -ms-transition: background-color 1s linear;
            transition: background-color 1s linear;
        }

    ::-webkit-scrollbar-track {
        background-color: transparent;
    }

   /* ::-webkit-scrollbar:hover {
        height: 20px;
        width: 20px;
    }

    *:hover::-webkit-scrollbar-corner {
        width: 20px;
        height: 20px;
    }

    *::-webkit-scrollbar-thumb:hover {
        width: 20px;
        height: 20px;
        border-radius: 3px;
    }*/

    .dark-version ::-webkit-scrollbar-thumb {
        /*background-color: rgba(299,299,299, .8);*/
        background-color: rgba(var(--bs-primary), 0.6);
        border-radius: 10px;
    }
}

@media only screen and (min-width: 768px) {
    .mobile-responsive {
        overflow-x: auto; 
        overflow-y: auto;         
        overflow-y: overlay !important;
    }
}

/*.navbar-vertical.navbar-expand-xs {
    scrollbar-gutter: stable both-edges;
    overflow-y: overlay;
}*/

@media (prefers-reduced-motion: no-preference) {
    /*:root {
        scroll-behavior: smooth;
        scrollbar-gutter: stable both-edges;
        overflow-y: overlay;
    }*/
}

::-webkit-scrollbar-thumb:active {
    border: 1px dotted black;
}

/*.scrollbar-gutter-y {
    scrollbar-gutter: stable;
    overflow-y: overlay !important;
}
.scrollbar-gutter-x {
    scrollbar-gutter: stable both-edges;
    overflow-x: overlay !important;
}*/