.shortcut-scrollbar-container {
    box-sizing: content-box;
    position: absolute;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
    width: calc(100% - 80px);
    padding: 40px;
    align-content: center;
    justify-content: flex-start;
}

    .shortcut-scrollbar-container::-webkit-scrollbar {
        display: none;
    }

.shortcut-container-1,
.shortcut-container-2,
.shortcut-container-3,
.shortcut-container-4,
.shortcut-container-5,
.shortcut-container-6 {
    justify-content: center;
}

@media screen and (max-width: 470px) {
    .shortcut-container-2 {
        justify-content: flex-start;
    }
}

@media screen and (max-width: 670px) {
    .shortcut-container-3 {
        justify-content: flex-start;
    }
}

@media screen and (max-width: 880px) {
    .shortcut-container-4 {
        justify-content: flex-start;
    }
}

@media screen and (max-width: 1080px) {
    .shortcut-container-5 {
        justify-content: flex-start;
    }
}

@media screen and (max-width: 1270px) {
    .shortcut-container-6 {
        justify-content: flex-start;
    }
}

.shortcut {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s ease-in, box-shadow 0.25s ease-in;
    width: 190px !important;
    margin: 6px;
    height: 200px;
}

.shortcut-image{
    width:auto;
}

    .shortcut:hover {
        box-shadow: 0 10px 38px 0 rgba(0, 0, 0, 0.15);
        transform: translateY(-2px);
    }

    .shortcut:active {
        box-shadow: 0 10px 38px 0 rgba(0, 0, 0, 0.05);
        transform: translateY(2px);
    }

    .shortcut .Shortcut-icon {
        padding-top: 16px;
        margin-top: auto;
    }


.shortcut-outer-container {
    position: relative;
    height: 300px;
}

.shortcut-button-right {
    background-color: #103C23;
    background-image: url("data:image/svg+xml,%3Csvg width='13' height='14' xmlns='http://www.w3.org/2000/svg'%3E%3Cdesc%3E Created with Sketch. %3C/desc%3E%3Cg stroke='%23FFF' stroke-width='1.5' fill='none' fill-rule='evenodd'%3E%3Cpath d='M6 1l6 6-6 6M0 7h11'/%3E%3C/g%3E%3C/svg%3E");
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 14px;
    content: "";
    display: none;
    flex-shrink: 0;
    height: 24px;
    pointer-events: all;
    position: absolute;
    right: 0;
    top: 90px;
    width: 24px;
}

.shortcut-button-left {
    background-color: #103C23;
    background-image: url("data:image/svg+xml,%3Csvg width='13' height='14' xmlns='http://www.w3.org/2000/svg'%3E%3Cdesc%3E Created with Sketch. %3C/desc%3E%3Cg stroke='%23FFF' stroke-width='1.5' fill='none' fill-rule='evenodd'%3E%3Cpath d='M6 1l6 6-6 6M0 7h11'/%3E%3C/g%3E%3C/svg%3E");
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 14px;
    content: "";
    display: none;
    flex-shrink: 0;
    height: 24px;
    pointer-events: all;
    position: absolute;
    top: 90px;
    transform: scaleX(-1);
    width: 24px;
}

.shortcut-button-disable {
    background-color: #D5D6D8;
    pointer-events: none;
}

.shortcut-gradient-right {
    background-image: linear-gradient(to left, white, rgba(255, 255, 255, 0));
    right: 0px;
}

.shortcut-gradient-left {
    background-image: linear-gradient(to right, white, rgba(255, 255, 255, 0));
    left: 0px;
}

.shortcut-gradient {
    height: 202px;
    position: absolute;
    top: 44px;
    width: 90px;
    z-index: 1111;
    -webkit-tap-highlight-color: transparent;
}

.shortcut-gradident-disable {
    background-image: none;
    pointer-events: none;
}

.shortcut-button-left.is-active {
    display: block;
}

.shortcut-button-right.is-active {
    display: block;
}

@media (min-width: 480px) {
    .shortcut-outer-container {
        height: auto;
    }
    
    .shortcut-scrollbar-container {
        flex-wrap: wrap;
        justify-content: center;
        position: static;
    }
}