/* ------------------------------------------------------------- *
 * Custom scrollbar style
/* ------------------------------------------------------------- */

.tt-custom-scrollbar {
    overflow-y: auto;
}

/* Works on Firefox */

.tt-custom-scrollbar,
.tt-sliding-sidebar-inner,
.tt-sidebar {
    scrollbar-width: thin;
    scrollbar-color: #555 #2a2a2a;
}

select {
    scrollbar-width: thin;
    scrollbar-color: #666 #2a2a2a;
}

.tt-custom-scrollbar::-webkit-scrollbar,
.tt-sliding-sidebar-inner::-webkit-scrollbar,
.tt-sidebar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

select::-webkit-scrollbar {
    width: 10px;
}

.tt-custom-scrollbar::-webkit-scrollbar-track,
.tt-sliding-sidebar-inner::-webkit-scrollbar-track,
.tt-sidebar::-webkit-scrollbar-track,
select::-webkit-scrollbar-track {
    background: #2a2a2a;
}

.tt-custom-scrollbar::-webkit-scrollbar-thumb,
.tt-sliding-sidebar-inner::-webkit-scrollbar-thumb,
.tt-sidebar::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 50px;
}

select::-webkit-scrollbar-thumb {
    background-color: #666;
    border-radius: 50px;
}

body:not(.is-mobile).tt-smooth-scroll {
    overflow: hidden;
}

body:not(.is-mobile).tt-smooth-scroll #scroll-container {
    width: auto;
    height: 100vh;
    overflow: auto;
    margin: 0;
}

/* Styling scrollbar */

.scrollbar-track {
    background: transparent !important;
    z-index: 99999 !important;
}

.scrollbar-thumb {
    background: #DDD !important;
    opacity: .25;
    transition: opacity 0.2s ease-in-out;
    top: 15px !important;
}

.scrollbar-track:hover .scrollbar-thumb {
    opacity: .5;
}

#scroll-container {
    overflow: hidden;
}

.scroll-content {
    overflow: hidden;
}

.scrollbar-track-x {
    display: none;
    &.show {
        display: none;
    }
}