.c3-scrollbar--ready {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.c3-scrollbar {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.c3-scrollbar__wrapper {
    display: block;
    width: calc(100% + 4rem);
    height: 100%;
    padding-right: 4rem;
    overflow-x: hidden;
    overflow-y: scroll;
}

.c3-scrollbar__rail {
    width: 2rem;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.c3-scrollbar__pointer {
    display: block;
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 100%;
    opacity: 0.125;
    transition: top 100ms, opacity 300ms;
    -webkit-transition: top 100ms, opacity 300ms;
}

.c3-scrollbar--scroll .c3-scrollbar__pointer {
    opacity: 1;
}

.c3-scrollbar__pointer:before {
    content: '';
    display: block;
    width: 4px;
    height: 4px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    z-index: 99;
    background-color: var(--e-global-color-accent);
}

@media (max-width: 767px) {
    .c3-scrollbar__rail {
        width: 1.2rem;
        height: 100%;
    }

    .c3-scrollbar__pointer:before {
        width: 3px;
        height: 3px;
    }
}