#ocScrollDirectional.oc-scroll-directional {
    position: fixed !important;
    font-size: var(--sdbg-desktop-size, 44px);
    width: 1em;
    height: 1em;
    border: 0;
    border-radius: 50%;
    padding: 0;
    margin: 0;
    cursor: pointer;
    z-index: 99990;
    display: block;
    opacity: .94;
    visibility: visible;
    pointer-events: auto;
    transition: transform .30s ease, background .25s ease, box-shadow .25s ease, opacity .25s ease;
    background: var(--sdbg-btn-color, #777777);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.35),
        inset 0 -3px 6px rgba(0,0,0,.14),
        var(--sdbg-shadow-normal, 0 8px 18px rgba(0,0,0,.22));
    -webkit-appearance: none;
    appearance: none;
}

#ocScrollDirectional.oc-scroll-directional:hover,
#ocScrollDirectional.oc-scroll-directional:focus {
    outline: none;
    opacity: 1;
    background: var(--sdbg-btn-hover-color, #ff3b1f);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.35),
        inset 0 -3px 6px rgba(110,0,0,.18),
        var(--sdbg-shadow-hover, 0 10px 22px rgba(255,36,0,.30));
}

#ocScrollDirectional.oc-scroll-directional:active {
    transform: translate3d(0,1px,0) scale(.97);
}

#ocScrollDirectional.oc-scroll-directional::before {
    content: '';
    position: absolute;
    left: .182em;
    right: .182em;
    top: .114em;
    height: .295em;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
}

#ocScrollDirectional .oc-scroll-directional__arrow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: .364em;
    height: .364em;
    margin-left: -.182em;
    margin-top: -.182em;
    transition: transform .35s ease;
}

#ocScrollDirectional.is-down .oc-scroll-directional__arrow {
    transform: rotate(180deg);
}

#ocScrollDirectional .oc-scroll-directional__arrow::before,
#ocScrollDirectional .oc-scroll-directional__arrow::after {
    content: '';
    position: absolute;
    display: block;
    box-sizing: border-box;
}

#ocScrollDirectional .oc-scroll-directional__arrow::before {
    left: .136em;
    top: .091em;
    width: .091em;
    height: .250em;
    border-radius: .046em;
    background: var(--sdbg-arrow-color, #ffffff);
}

#ocScrollDirectional .oc-scroll-directional__arrow::after {
    left: .046em;
    top: 0;
    width: .273em;
    height: .273em;
    border-top: .091em solid var(--sdbg-arrow-color, #ffffff);
    border-left: .091em solid var(--sdbg-arrow-color, #ffffff);
    transform: rotate(45deg);
}

#ocScrollDirectional .oc-scroll-directional__text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* Desktop position */
#ocScrollDirectional[data-desktop-position="top-left"] {
    left: var(--sdbg-desktop-x, 18px) !important;
    right: auto !important;
    top: var(--sdbg-desktop-y, 18px) !important;
    bottom: auto !important;
}
#ocScrollDirectional[data-desktop-position="top-right"] {
    left: auto !important;
    right: var(--sdbg-desktop-x, 18px) !important;
    top: var(--sdbg-desktop-y, 18px) !important;
    bottom: auto !important;
}
#ocScrollDirectional[data-desktop-position="middle-left"] {
    left: var(--sdbg-desktop-x, 18px) !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%);
}
#ocScrollDirectional[data-desktop-position="middle-right"] {
    left: auto !important;
    right: var(--sdbg-desktop-x, 18px) !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%);
}
#ocScrollDirectional[data-desktop-position="bottom-left"] {
    left: var(--sdbg-desktop-x, 18px) !important;
    right: auto !important;
    top: auto !important;
    bottom: var(--sdbg-desktop-y, 18px) !important;
}
#ocScrollDirectional[data-desktop-position="bottom-right"] {
    left: auto !important;
    right: var(--sdbg-desktop-x, 18px) !important;
    top: auto !important;
    bottom: var(--sdbg-desktop-y, 18px) !important;
}

@media (max-width: 767px) {
    #ocScrollDirectional.oc-scroll-directional {
        font-size: var(--sdbg-mobile-size, 40px);
    }

    #ocScrollDirectional[data-mobile-position="top-left"] {
        left: var(--sdbg-mobile-x, 14px) !important;
        right: auto !important;
        top: var(--sdbg-mobile-y, 14px) !important;
        bottom: auto !important;
        transform: none;
    }
    #ocScrollDirectional[data-mobile-position="top-right"] {
        left: auto !important;
        right: var(--sdbg-mobile-x, 14px) !important;
        top: var(--sdbg-mobile-y, 14px) !important;
        bottom: auto !important;
        transform: none;
    }
    #ocScrollDirectional[data-mobile-position="middle-left"] {
        left: var(--sdbg-mobile-x, 14px) !important;
        right: auto !important;
        top: 50% !important;
        bottom: auto !important;
        transform: translateY(-50%);
    }
    #ocScrollDirectional[data-mobile-position="middle-right"] {
        left: auto !important;
        right: var(--sdbg-mobile-x, 14px) !important;
        top: 50% !important;
        bottom: auto !important;
        transform: translateY(-50%);
    }
    #ocScrollDirectional[data-mobile-position="bottom-left"] {
        left: var(--sdbg-mobile-x, 14px) !important;
        right: auto !important;
        top: auto !important;
        bottom: var(--sdbg-mobile-y, 14px) !important;
        transform: none;
    }
    #ocScrollDirectional[data-mobile-position="bottom-right"] {
        left: auto !important;
        right: var(--sdbg-mobile-x, 14px) !important;
        top: auto !important;
        bottom: var(--sdbg-mobile-y, 14px) !important;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    #ocScrollDirectional.oc-scroll-directional,
    #ocScrollDirectional .oc-scroll-directional__arrow {
        transition: none;
    }
}