.wrapper {

    margin: auto;
    /*text-align: center;*/
    position: relative;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-bottom: 20px !important;
    width: 100%;
    padding-top: 5px;
}
.scrolls {
    overflow-x: scroll;
    overflow-y: hidden;
    height: auto;
    white-space:nowrap;
}
.scrolls > div {
    /*box-shadow: 1px 1px 10px #999;*/
    margin: 2px;
    margin-top: 1%!important;
    cursor: pointer;
    display:inline-block;
    *display:inline;
    *zoom:1;

    vertical-align:top;
}

@media only screen and (max-width: 600px) {
    .scrolls > div {
        width: 80% !important;
    }
    .homeBrandSection{
        width: 15rem;
        margin: auto;
    }
}



.categoriesCount{
    background-color: #5b52a2;
    color: #cbd5e0;
    margin-left: -6%;
    top: -4.4em;
    /* right: 3%; */
    right: -1%;
    position: relative;
    float: right;
    font-size: 9px;
    font-weight: 800;
    padding-right: 3px;
    padding-left: 3px;
    border-radius: 50%;
}

.categoriesImage{
    width: 1.5rem;
    color: #cbd5e0;
    margin-left: -6%;
    height: 1.5em;
    top: -3.4em;
    /* right: 10%; */
    right: 4%;
    border-radius: 50%;
    position: relative;
    float: right;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.09);

}

.top-right {
    position: relative;
    top: -9.3em;
    right: 1em;
    text-align: center;
    background: #5b52a2;
    min-width: 5em;
    color: white;
    padding: 5px;
}
.top-right > .promotion_type{
    font-size: 1.2em;
    line-height: 1;
}

.top-left{
    position: relative;
    top: -6em;
    right: 0em;
    text-align: center;
    background: #5b52a2;
    width: 3em;
    height: 3em;
    color: white;
    padding: 5px;

 }
 
 .top-left-expired{
    position: relative;
    top: -9em;
    right: 0em;
    text-align: center;
    background: transparent;
    width: 7em;
    height: 0;
    color: white;
    padding: 5px;

}

/*.scrolls::-webkit-scrollbar {*/
/*    width: 1px;*/
/*}*/

/*.scrolls::-webkit-scrollbar-track {*/
/*    background: #fff;*/
/*}*/

/*.scrolls::-webkit-scrollbar-thumb {*/

/*  background: #42389d;*/
/*}*/


.scrolls::-webkit-scrollbar-track
{
    background-color: #fff;
}

.scrolls::-webkit-scrollbar
{
    height: 3px;
    background-color: #fff;
}

.scrolls::-webkit-scrollbar-thumb
{
    background-color: rgb(88 81 236 / 33%);
}
.active{
    color: #5b52a2;
}

.sba-bg {
    background: #5A55A0;
}

.sba-color {
    color: #5A55A0;
}

.sba-red {
    color: #9F3E3D;
}

/*:root {*/
/*    --gutter: 20px;*/
/*}*/
/*.horizonal-slider {*/
/*    display: grid;*/
/*    grid-gap: calc(var(--gutter) / 2);*/
/*    grid-template-columns: repeat(16, calc(50% - var(--gutter) * 2));*/
/*    grid-template-rows: minmax(150px, 1fr);*/
/*    overflow-x: scroll;*/
/*    scroll-snap-type: x proximity;*/
/*    padding-bottom: calc(.75 * var(--gutter));*/
/*    margin-bottom: calc(-.25 * var(--gutter));*/
/*    list-style: none;*/
/*    padding: 0;*/
/*}*/

/*.horizontal-slider-container {*/
/*    width: 100%;*/

/*}*/
/*.item {*/
/*    scroll-snap-align: center;*/
/*    padding: calc(var(--gutter) / 2 * 1.5);*/
/*    padding-left: 0 !important;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    background: #fff;*/
/*    border-radius: 8px;*/
/*}*/