.scrollable {
    display: block;
    white-space: nowrap;
    overflow: auto;
    /*min-height: 88px;*/
}

.scrollable::-webkit-scrollbar {
    height: 0.25rem;
    background: rgba(0, 0, 0, 0.1);
    background: transparent;
    border-radius: 1.5rem
}

.scrollable::-webkit-scrollbar-thumb {
    background: #57C7B4;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 1.5rem
}

.scrollable.scrollbar-secondary::-webkit-scrollbar-thumb {
    background: #5F628A
}

.scrollable.scrollbar-white::-webkit-scrollbar {
    background: rgba(255, 255, 255, 0.25)
}

.scrollable.scrollbar-white::-webkit-scrollbar-thumb {
    background: #fff
}

.scrollable.scrollbar-none::-webkit-scrollbar {
    background: none
}

.scrollable.scrollbar-none::-webkit-scrollbar-thumb {
    background: none
}

.scrollable>div,
.scrollable>li {
    display: inline-block;
    white-space: normal;
    vertical-align: top;
    max-width: 80%
}

.scrollable>div+div,
.scrollable>div+li,
.scrollable>li+div,
.scrollable>li+li {
    margin-left: 1rem
}

.scrollable.scrollable-3>div,
.scrollable.scrollable-3>li {
    max-width: 33%
}

.scrollable.scrollable-2>div,
.scrollable.scrollable-2>li {
    max-width: 45%
}

@media (max-width: 575.98px) {
    .scrollable-xs {
        display: block;
        white-space: nowrap;
        overflow: auto;
        padding: 0 0 1rem
    }
    .scrollable-xs::-webkit-scrollbar {
        height: 0.25rem;
        background: rgba(0, 0, 0, 0.1);
        background: transparent;
        border-radius: 1.5rem
    }
    .scrollable-xs::-webkit-scrollbar-thumb {
        background: #57C7B4;
        background: rgba(0, 0, 0, 0.25);
        border-radius: 1.5rem
    }
    .scrollable-xs.scrollbar-secondary::-webkit-scrollbar-thumb {
        background: #5F628A
    }
    .scrollable-xs.scrollbar-white::-webkit-scrollbar {
        background: rgba(255, 255, 255, 0.25)
    }
    .scrollable-xs.scrollbar-white::-webkit-scrollbar-thumb {
        background: #fff
    }
    .scrollable-xs.scrollbar-none {
        margin-bottom: -0.25rem
    }
    .scrollable-xs.scrollbar-none::-webkit-scrollbar {
        background: none
    }
    .scrollable-xs.scrollbar-none::-webkit-scrollbar-thumb {
        background: none
    }
    .scrollable-xs>div,
    .scrollable-xs>li {
        display: inline-block;
        white-space: normal;
        vertical-align: top;
        max-width: 80%
    }
    .scrollable-xs>div+div,
    .scrollable-xs>div+li,
    .scrollable-xs>li+div,
    .scrollable-xs>li+li {
        margin-left: 1rem
    }
    .scrollable-xs.scrollable-3>div,
    .scrollable-xs.scrollable-3>li {
        max-width: 33%
    }
    .scrollable-xs.scrollable-2>div,
    .scrollable-xs.scrollable-2>li {
        max-width: 45%
    }
}

@media (max-width: 767.98px) {
    .scrollable-sm {
        display: block;
        white-space: nowrap;
        overflow: auto;
        padding: 0 0 1rem
    }
    .scrollable-sm::-webkit-scrollbar {
        height: 0.25rem;
        background: rgba(0, 0, 0, 0.1);
        background: transparent;
        border-radius: 1.5rem
    }
    .scrollable-sm::-webkit-scrollbar-thumb {
        background: #57C7B4;
        background: rgba(0, 0, 0, 0.25);
        border-radius: 1.5rem
    }
    .scrollable-sm.scrollbar-secondary::-webkit-scrollbar-thumb {
        background: #5F628A
    }
    .scrollable-sm.scrollbar-white::-webkit-scrollbar {
        background: rgba(255, 255, 255, 0.25)
    }
    .scrollable-sm.scrollbar-white::-webkit-scrollbar-thumb {
        background: #fff
    }
    .scrollable-sm.scrollbar-none {
        margin-bottom: -0.25rem
    }
    .scrollable-sm.scrollbar-none::-webkit-scrollbar {
        background: none
    }
    .scrollable-sm.scrollbar-none::-webkit-scrollbar-thumb {
        background: none
    }
    .scrollable-sm>div,
    .scrollable-sm>li {
        display: inline-block;
        white-space: normal;
        vertical-align: top;
        max-width: 80%
    }
    .scrollable-sm>div+div,
    .scrollable-sm>div+li,
    .scrollable-sm>li+div,
    .scrollable-sm>li+li {
        margin-left: 1rem
    }
    .scrollable-sm.scrollable-3>div,
    .scrollable-sm.scrollable-3>li {
        max-width: 33%
    }
    .scrollable-sm.scrollable-2>div,
    .scrollable-sm.scrollable-2>li {
        max-width: 45%
    }
}

@media (max-width: 991.98px) {
    .scrollable-md {
        display: block;
        white-space: nowrap;
        overflow: auto;
        padding: 0 0 1rem
    }
    .scrollable-md::-webkit-scrollbar {
        height: 0.25rem;
        background: rgba(0, 0, 0, 0.1);
        background: transparent;
        border-radius: 1.5rem
    }
    .scrollable-md::-webkit-scrollbar-thumb {
        background: #57C7B4;
        background: rgba(0, 0, 0, 0.25);
        border-radius: 1.5rem
    }
    .scrollable-md.scrollbar-secondary::-webkit-scrollbar-thumb {
        background: #5F628A
    }
    .scrollable-md.scrollbar-white::-webkit-scrollbar {
        background: rgba(255, 255, 255, 0.25)
    }
    .scrollable-md.scrollbar-white::-webkit-scrollbar-thumb {
        background: #fff
    }
    .scrollable-md.scrollbar-none {
        margin-bottom: -0.25rem
    }
    .scrollable-md.scrollbar-none::-webkit-scrollbar {
        background: none
    }
    .scrollable-md.scrollbar-none::-webkit-scrollbar-thumb {
        background: none
    }
    .scrollable-md>div,
    .scrollable-md>li {
        display: inline-block;
        white-space: normal;
        vertical-align: top;
        max-width: 80%
    }
    .scrollable-md>div+div,
    .scrollable-md>div+li,
    .scrollable-md>li+div,
    .scrollable-md>li+li {
        margin-left: 1rem
    }
    .scrollable-md.scrollable-3>div,
    .scrollable-md.scrollable-3>li {
        max-width: 33%
    }
    .scrollable-md.scrollable-2>div,
    .scrollable-md.scrollable-2>li {
        max-width: 45%
    }
}

@media (max-width: 1199.98px) {
    .scrollable-lg {
        display: block;
        white-space: nowrap;
        overflow: auto;
        padding: 0 0 1rem
    }
    .scrollable-lg::-webkit-scrollbar {
        height: 0.25rem;
        background: rgba(0, 0, 0, 0.1);
        background: transparent;
        border-radius: 1.5rem
    }
    .scrollable-lg::-webkit-scrollbar-thumb {
        background: #57C7B4;
        background: rgba(0, 0, 0, 0.25);
        border-radius: 1.5rem
    }
    .scrollable-lg.scrollbar-secondary::-webkit-scrollbar-thumb {
        background: #5F628A
    }
    .scrollable-lg.scrollbar-white::-webkit-scrollbar {
        background: rgba(255, 255, 255, 0.25)
    }
    .scrollable-lg.scrollbar-white::-webkit-scrollbar-thumb {
        background: #fff
    }
    .scrollable-lg.scrollbar-none {
        margin-bottom: -0.25rem
    }
    .scrollable-lg.scrollbar-none::-webkit-scrollbar {
        background: none
    }
    .scrollable-lg.scrollbar-none::-webkit-scrollbar-thumb {
        background: none
    }
    .scrollable-lg>div,
    .scrollable-lg>li {
        display: inline-block;
        white-space: normal;
        vertical-align: top;
        max-width: 80%
    }
    .scrollable-lg>div+div,
    .scrollable-lg>div+li,
    .scrollable-lg>li+div,
    .scrollable-lg>li+li {
        margin-left: 1rem
    }
    .scrollable-lg.scrollable-3>div,
    .scrollable-lg.scrollable-3>li {
        max-width: 33%
    }
    .scrollable-lg.scrollable-2>div,
    .scrollable-lg.scrollable-2>li {
        max-width: 45%
    }
}

.scrollable-xl {
    display: block;
    white-space: nowrap;
    overflow: auto;
    padding: 0 0 1rem
}

.scrollable-xl::-webkit-scrollbar {
    height: 0.25rem;
    background: rgba(0, 0, 0, 0.1);
    background: transparent;
    border-radius: 1.5rem
}

.scrollable-xl::-webkit-scrollbar-thumb {
    background: #57C7B4;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 1.5rem
}

.scrollable-xl.scrollbar-secondary::-webkit-scrollbar-thumb {
    background: #5F628A
}

.scrollable-xl.scrollbar-white::-webkit-scrollbar {
    background: rgba(255, 255, 255, 0.25)
}

.scrollable-xl.scrollbar-white::-webkit-scrollbar-thumb {
    background: #fff
}

.scrollable-xl.scrollbar-none {
    margin-bottom: -0.25rem
}

.scrollable-xl.scrollbar-none::-webkit-scrollbar {
    background: none
}

.scrollable-xl.scrollbar-none::-webkit-scrollbar-thumb {
    background: none
}

.scrollable-xl>div,
.scrollable-xl>li {
    display: inline-block;
    white-space: normal;
    vertical-align: top;
    max-width: 80%
}

.scrollable-xl>div+div,
.scrollable-xl>div+li,
.scrollable-xl>li+div,
.scrollable-xl>li+li {
    margin-left: 1rem
}

.scrollable-xl.scrollable-3>div,
.scrollable-xl.scrollable-3>li {
    max-width: 33%
}

.scrollable-xl.scrollable-2>div,
.scrollable-xl.scrollable-2>li {
    max-width: 45%
}