.scrollable {
    position: relative;
    overflow: auto;
    overflow-y: clip;
    scrollbar-width: thin;
    scrollbar-color: #243d5f #dde1e5;
}

.scrollable.enought .scrollable_icon {
    top: 100px;
}


.scrollable.scrollable_nohand {
    .scrollable_icon {
        height: 40px;
        padding-top: 12px;
    }

    .scrollable_icon_hand::before {
        left: 30px;
    }

    .scrollable_icon_hand::after {
        display: none;
    }

    .scrollable_txt {
        margin-top: 5px;
    }
}

.scrollable::-webkit-scrollbar-thumb {
    border-radius: 10px;
}

.scrollable_inner {
    position: absolute;
    inset: 0;
    pointer-events: none;
    transition: opacity 0.3s linear;

    @media print {
        display: none;
    }
}

@media only screen and (min-width: 768px) {
    .scrollable_inner {
        display: none;
    }
}

.scrollable_inner.is_displayed .scrollable_icon {
    opacity: 1;
}

.scrollable_icon {
    width: 114px;
    height: 83px;
    padding: 20px 10px 10px;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    border-radius: 5px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s linear;
}

.scrollable_icon_hand {
    position: relative;
}

.scrollable_icon_hand::after,
.scrollable_icon_hand::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    background-size: contain;
    background-repeat: no-repeat;
}

.scrollable_icon_hand::before {
    width: 40px;
    height: 14px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="41" height="5" viewBox="0 0 41 5" fill="none"><path d="M37.2811 2.17163H27.9687" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/><path d="M36.504 0.000727654L40.264 2.17063L36.504 4.34302V0.000727654Z" fill="white"/><path d="M3.76172 2.17578H13.0742" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/><path d="M3.76 4.34229L0 2.17239L3.76 0V4.34229Z" fill="white"/></svg>');
    position: absolute;
    top: -3px;
    left: 22px;
}

.scrollable_icon_hand::after {
    width: 26px;
    height: 45px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="27" height="44" viewBox="0 0 27 44" fill="none"><path d="M8.19679 45.7626L7.70632 39.8069C7.70632 39.8069 0.5 32.7407 0.5 27.689C0.5 25.1245 0.934411 21.1413 1.10607 19.2057C1.10607 19.2057 1.20241 16.2279 3.20456 16.9058C3.92624 17.1492 4.4605 17.7623 4.66544 18.4945C5.01578 19.7434 5.47471 22.0171 4.78806 23.6742L5.21741 21.8121L4.53757 4.52854C4.53757 4.52854 3.89121 0.93939 6.49943 0.531254C9.10765 0.123117 9.58585 3.84714 9.58585 3.84714L11.0292 12.15C11.0292 12.15 15.1859 9.78702 16.617 14.2345C16.617 14.2345 21.6443 12.2306 22.2346 17.4015C22.2346 17.4015 24.8796 15.6621 26.0024 18.0111C27.8767 21.9348 23.1524 36.6119 21.653 38.5265L21.9648 44.6293" stroke="white" stroke-miterlimit="10" stroke-linejoin="round"/></svg>');
    position: relative;
    bottom: 8px;
}

.scrollable_icon_hand.is_show::after {
    animation: kf_scroll_appear 1.2s linear;
    animation-iteration-count: 2;
}

.scrollable_txt {
    font-size: 10px;
    color: #fff;
    margin-top: -5px;
    line-height: 1.4;
}

@keyframes kf_scroll_appear {
    0% {
        transform: translateX(40px);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    100%,
    50% {
        transform: translateX(-40px);
        opacity: 0;
    }
}