/* mobile size */
@media (max-width: 767px) {
    div#category_menu_list_wrapper {
        padding: 0;
    }

    /* Main category menu */

    div#slide_left span.glyphicon-chevron-left {
        margin-top: 19px;
        left: 14px;
        color: black;
    }

    div#slide_right span.glyphicon-chevron-right {
        margin-top: 19px;
        right: 14px;
        color: black;
    }

    div.crumbs-control-holder div#slide_left {
        box-shadow: 19px 1px 21px 11px #ffffff;
        right: 14px;
        z-index: 1;
    }

    div.crumbs-control-holder div#slide_right {
        box-shadow: -19px 0 21px 11px #ffffff;;
        left: 14px;
        z-index: 1;
    }

    div#slide_right .glyphicon-chevron-right:before,
    div#slide_left .glyphicon-chevron-left:before {
        opacity: 0.3;
    }

    div#crumbs_control_holder div.col-sm-1 {
        padding-left: 0;
        padding-right: 0;
    }


    /* Sub category menu */

    div#sub_slide_left span.glyphicon-chevron-left {
        margin-top: 13px;
        left: 14px;
        color: black;
    }

    div#sub_slide_right span.glyphicon-chevron-right {
        margin-top: 13px;
        right: 14px;
        color: black;
    }

    div.sub-crumbs-control-holder div#sub_slide_left {
        box-shadow: 10px 0px 19px 15px #ffffff;
        right: 14px;
        z-index: 1;
    }

    div.sub-crumbs-control-holder div#sub_slide_right {
        box-shadow: -10px 0 19px 15px #ffffff;
        left: 14px;
        z-index: 1;
    }

    div#sub_slide_right .glyphicon-chevron-right:before,
    div#sub_slide_left .glyphicon-chevron-left:before {
        opacity: 0.3;
    }

    div#sub_crumbs_control_holder div.col-sm-1 {
        padding-left: 0;
        padding-right: 0;
    }
}



/* Main category menu */

div#category_menu_list_wrapper {
    position: -webkit-sticky;
    position: sticky;
    z-index: 1029;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

nav.category-menu-list {
    overflow: hidden;
    width: 100%;
    /* if box-shadow pixels changes, remember to add changes to the custom css file: customer.settings.css.helper.php around line 250 */
    box-shadow: 3px 3px 18px #888888;
    background-color: white;
    position: relative;
}

nav.category-menu-list div.crumbs-control-holder {
    display: flex;
    overflow: hidden;
}

nav.category-menu-list div.crumbs-control-holder:after {
    overflow: hidden;
}

nav.category-menu-list div.crumbs-control-holder div.crumbs-holder {
    position: relative;
    overflow-x: auto;
    -webkit-box-flex: 1;
    margin: 0 auto;
    padding-bottom: 2px;
    -ms-overflow-style: none;  /* Hide scrollbar for Internet Explorer 10+ */
    scrollbar-width: none;  /* Hide scrollbar for Firefox */
}

nav.category-menu-list div.crumbs-control-holder div.grab,
nav.sub-category-menu-list div.sub-crumbs-control-holder div.grab {
    cursor: move; /* fallback: no `url()` support or images disabled */
    cursor: -webkit-grab; /* Chrome 1-21, Safari 4+ */
    cursor: -moz-grab; /* Firefox 1.5-26 */
    cursor: grab; /* W3C standards syntax, should come least */
}

nav.category-menu-list div.crumbs-control-holder div.grabbing,
nav.sub-category-menu-list div.sub-crumbs-control-holder div.grabbing {
    cursor: -moz-grabbing !important;
    cursor: grabbing !important;
    cursor: -webkit-grabbing !important;
}

nav.category-menu-list div.crumbs-control-holder div.crumbs-holder::-webkit-scrollbar {
    display: none;  /* Hide scrollbar for Safari and Chrome */
}

div.crumbs-control-holder div.crumbs-holder ul {
    padding: 0 10px 0 10px;
    display: inline-flex;
    display: -webkit-inline-flex;
    margin: 0;
    list-style-type: none;
    white-space: nowrap;
}

div.crumbs-control-holder div.crumbs-holder ul li {
    padding-right: 15px;
    padding-left: 15px;
}

div.crumbs-control-holder div.crumbs-holder ul li a {
    display: inline-block;
    position: relative;
    overflow: hidden;
    height: 38px;
    line-height: 57px;
    color: #333;
    font-size: 16px;
}

div.crumbs-holder ul li a span.glyphicon-chevron-down {
    font-size: 11px;
    top: 2px;
}

div.crumbs-control-holder div.crumbs-holder ul li.active {
    font-weight: bold;
    border-bottom-style: solid;
    border-bottom-width: 4px;
    border-bottom-color: #e97114;
    height: 50px;
}

div.crumbs-control-holder div.crumbs-holder ul li.active a {
    font-weight: bold;
    font-size: 20px;
}

@media (min-width: 768px) {
    div.crumbs-control-holder div#slide_left {
        /* if box-shadow pixels changes, remember to add changes to the custom css file: customer.settings.css.helper.php around line 250 */
        box-shadow: 3px 2px 12px #888888;
    }

    div.crumbs-control-holder div#slide_right {
        /* if box-shadow pixels changes, remember to add changes to the custom css file: customer.settings.css.helper.php around line 250 */
        box-shadow: -3px 0 12px #888888;
    }

    div.crumbs-control-holder div#slide_left,
    div.crumbs-control-holder div#slide_right {
        width: 37px;
        cursor: pointer;
        z-index: 1;
    }

    div#slide_left span.glyphicon-chevron-left,
    div#slide_right span.glyphicon-chevron-right {
        margin-top: 18px;
        right: 3px;
    }
}



/* Sub category menu */
nav.sub-category-menu-list {
    overflow: hidden;
    width: 95%;
    margin: 0 auto 30px;
    /* if box-shadow pixels changes, remember to add changes to the custom css file: customer.settings.css.helper.php around line 250 */
    box-shadow: 1px 3px 15px #888888;
    background-color: white;
}

nav.sub-category-menu-list div.sub-crumbs-control-holder {
    display: flex;
    overflow: hidden;
}

nav.sub-category-menu-list div.sub-crumbs-control-holder:after {
    overflow: hidden;
}

nav.sub-category-menu-list div.sub-crumbs-control-holder div.sub-crumbs-holder {
    position: relative;
    overflow-x: auto;
    -webkit-box-flex: 1;
    margin: 0 auto;
    padding-bottom: 4px;
}

/* Hide scrollbar for Chrome, Safari and Opera */
nav.sub-category-menu-list div.sub-crumbs-control-holder div.sub-crumbs-holder::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
nav.sub-category-menu-list div.sub-crumbs-control-holder div.sub-crumbs-holder {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

div.sub-crumbs-control-holder div.sub-crumbs-holder ul {
    padding: 0 10px 0 10px;
    display: inline-flex;
    display: -webkit-inline-flex;
    margin: 0;
    list-style-type: none;
    white-space: nowrap;
    height: 40px;
}

div.sub-crumbs-control-holder div.sub-crumbs-holder ul li {
    padding-right: 10px;
    padding-left: 10px;
}

div.sub-crumbs-control-holder div.sub-crumbs-holder ul li a {
    display: inline-block;
    position: relative;
    overflow: hidden;
    height: 32px;
    line-height: 49px;
    color: #333;
    font-size: 13px;
}

div.sub-crumbs-control-holder div.sub-crumbs-holder ul li.active {
    font-weight: bold;
    border-bottom-style: solid;
    border-bottom-width: 3px;
    border-bottom-color: #e97114;
}

div.sub-crumbs-control-holder div.sub-crumbs-holder ul li.active a {
    font-weight: bold;
    font-size: 16px;
}

@media (min-width: 767px) {
    div.sub-crumbs-control-holder div#sub_slide_left {
        /* if box-shadow pixels changes, remember to add changes to the custom css file: customer.settings.css.helper.php around line 250 */
        box-shadow: 3px 2px 12px #888888;
    }

    div.sub-crumbs-control-holder div#sub_slide_right {
        /* if box-shadow pixels changes, remember to add changes to the custom css file: customer.settings.css.helper.php around line 250 */
        box-shadow: -3px 0 12px #888888;
    }

    div.sub-crumbs-control-holder div#sub_slide_left,
    div.sub-crumbs-control-holder div#sub_slide_right  {
        width: 30px;
        cursor: pointer;
        z-index: 1;
    }

    div#sub_slide_left span.glyphicon-chevron-left,
    div#sub_slide_right span.glyphicon-chevron-right {
        margin-top: 14px;
        right: 7px;
    }
}