/**
 * this is the default CSS file used by the module mxb_menu_sub
 *
 * you can edit this file and change everything you need.
 * - when the option "enable custom CSS" is esabled, the module will use your CSS
 * - when the option is disabled, the module will use the default CSS
 * - if you need to recover the original CSS, just click on the option below the CSS edit area.
 *
 * be aware to touch @params: position, display, z-index ...
 *    position: do not add position parameter! it must be relative to allow submenu area to attach to it
 *    menus position is absolute, related to the main menu div (mxb_menu_sub.menu)
 *
 * customizable @params: 
 *    background, border-radius, box-shadow, padding and so on.
 *
 * alert customizing @params:
 *    top: note that original top param is set to: auto!important;
 *    max-width: originally set to 2000px
 *    width: 100% (submenu area fullwidth)
 *
 * desktop and mobile configuration:
 *    container #id can be used to create different css for desktop and mobile version:
 *      .desktop.mxb_menu_sub.menu
 *      .mobile.mxb_menu_sub.menu
 *
 * MENU TREE, "data" tags are used as keys to recognize menu position and sequence:
 * 1) DATA-DEPTH: you can read vertical elements (menu > sub-menu - sub-sub-menu ...) as menu "depth"
 * 2) DATA-KEY: horizontal elements on the same menu (menu items) are defined by keys
 * 
 * For example: 
 * - data-depth=0, data-key=0 is the first element of the main menu
 * - data-depth=0, data-key=2 is the third element of the main menu
 * - data-depth=1, data-key=0 is the first element of every sub menus
 * 
 * MENU STRUCTURE:
 * We have a main div "mxb_menu_sub menu" that contains an <ul> element tagged as data-depth=0.
 * Every <li data-depth="0"> element contains
 *  a first div "mxb-menu-item" with link, text and image
 *  a second div "sub-menu" that will have the same structure of the first "menu", with <ul data-depth="1"> and related <li>
 * the third level will be contained by the div "sub-menu2", with its own <ul data-depth="2">
 * 
 * "data-depth" is used on every menu element
 * .mxb_menu_sub li[data-key="1"]>div.sub-menu[data-depth="1"] li[data-key="2"]
 *      above we get the third element of the second sub-menu of the second main menu item.
 * .mxb_menu_sub li[data-key="0"]>div.sub-menu[data-depth="1"] li span[data-key="1"]
 * .mxb_menu_sub li[data-key="0"]>div.sub-menu[data-depth="1"] li img[data-key="1"]
 *      the 2 rows above identify a specific menu item and image
 *
 */



/****************************************
 * BLOCK #1
 * SPECIAL CLASSES
 *
 * used to configure different menu layout type
 *
 ****************************************/
 /* font for "show more" link when the number of items exceed the max rows */
.mxb_menu_sub.menu ul>li span.show-more {
  color: lightgrey;
  text-decoration: underline;
}

/**
 * layout: type-column
 * set the <li> elements and related container to be shown as single column menu under the main menu item
 * applyed to sub-menu with with and without children (sub-items)
 * 
 */
.desktop.mxb_menu_sub ul[data-depth="0"]>li.type-column {
  position: relative;
}
.desktop.mxb_menu_sub li>div.sub-menu[data-depth="1"].type-column {
  left: auto;
  width: 200px;
  max-width: 200px;
}
.desktop.mxb_menu_sub li>div.sub-menu[data-depth="1"].type-column li {
  width: 100%;
}

/**
 * layout: type-grid
 * set the <li> elements to be shown as a wide grid
 * applyed to sub-menu with items and related children (sub-items) only
 */
/* NOTE: exclude a specific element from "type-grid" class, to show it as "default" layout, use ":not(.data-key-n)" tag:
.desktop.mxb_menu_sub li:not(.data-key-7)>div.sub-menu[data-depth="1"].type-grid li.has-children {
*/
.desktop.mxb_menu_sub li>div.sub-menu[data-depth="1"].type-grid li.has-children {
  border-left: 1px solid grey;
  margin-left: 3px;
  padding-left: 3px;
  height: 100%;
  display: inline-block;
  vertical-align: top;
  float: none;
  margin-bottom: 10px;
}


/**
 * layout: type-page
 */
.desktop.mxb_menu_sub li>div.sub-menu[data-depth="1"].type-page li.has-children div.sub-menu2 {
  position: absolute;
  top: 0px;
  left: 200px;
  background: #EFEFEF;
  bottom: 0px;
  right: 0px;
  display: block;
  max-width: 100%;
}

.desktop.mxb_menu_sub li>div.sub-menu[data-depth="1"].type-page {
  min-height: 250px;
  padding-bottom: 20px;
}
/* very important settings to let the js to calculate the height of the sub-menu page */
.desktop.mxb_menu_sub li>div.sub-menu[data-depth="1"].type-page li.has-children[data-depth="1"],
.desktop.mxb_menu_sub li>div.sub-menu[data-depth="1"].type-page li[data-depth="2"] {
  display: block;
  float: none;
}
/* create some space for sub-menu items image moved into sub-menu2 area */
.mxb_menu_sub img.menu-thumb.type-page {
  display:block;
  margin: 5px;
  -webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.75);
}
.mxb_menu_sub .sub-menu-description {
  display: none;
}
.desktop.mxb_menu_sub li>div.sub-menu[data-depth="1"].type-page .sub-menu-description {
  display: block;
  float: right;
  height: 100%;
  width: 70%;
  background: #EFEFEF;
  border-left: 1px solid lightgrey;
  padding: 20px;
}
/*** END OF BLOCK #1 ***/



/****************************************
 * BLOCK #2
 * DATA-DEPTH 0/1 - SET MENU APPEARANCE
 *
 * 1) set menu-nav and sub-menu window appearance
 * 2) set text and links appearance
 *
 ****************************************/
.mxb_menu_sub.menu {
  width: 100%; /* set width to dimension the menu bar as you wish */
  background: #EA5D0B; /* and give it a background color */
  padding:  6px 0px 6px 0px  !important;
}

/* set the main menu navbar width, background, position and so on */
.desktop.mxb_menu_sub.menu .mxb-menu-container {
  /*
  background-color: white;
  padding-bottom: 20px;
  -webkit-box-shadow: 1px 5px 6px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 1px 5px 6px 0px rgba(0,0,0,0.75);
  box-shadow: 1px 5px 6px 0px rgba(0,0,0,0.75);
  */
  /*
  width: 100% !important;
  display: block !important;
  text-align: center !important;
  */
}

/* this is the sub-menu div that opens hovering the main menu items */
.desktop.mxb_menu_sub .sub-menu {
  /* width: 300px; */
  border: 0px solid grey;
  -webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.75);
  border-radius: 0 0 3px 3px;
  -moz-border-radius: 0 0 3px 3px;
  -webkit-border-radius: 0 0 3px 3px;
}
.mobile.mxb_menu_sub .sub-menu {
  /* position: relative; */
  background-color: transparent;
  margin-top: 10px;
  margin-left: 0px !important;
  margin-right: 0px !important;
  border-style: solid;
  border-color: white;
  border-width: 1px 0px 0px 0px;
  -webkit-box-shadow: transparent 0px 0px 0px;
  -moz-box-shadow: transparent 0px 0px 0px;
  box-shadow: transparent 0px 0px 0px;
  -webkit-border-radius: 0px 0px 0px 0px;
  -moz-border-radius: 0px 0px 0px 0px;
  border-radius: 0px 0px 0px 0px;
}

/* column alignment into sub-menus */
.desktop.mxb_menu_sub div.sub-menu ul[data-depth="1"] {
  text-align: left;
}
.desktop.mxb_menu_sub div.sub-menu ul[data-depth="1"]>li {
  text-align: left;
}

/* distance between menu elements for desktop menu */
.desktop.mxb_menu_sub ul[data-depth="0"]>li {
  margin-left: 2px;
  margin-right: 2px;
}
/* appearance of main menu elements */
.mxb_menu_sub.menu ul[data-depth="0"] {
  /* margin-bottom: 1px; */
  margin:  0px;
}
/* appearance of every menu elements */
.mxb_menu_sub.menu ul[data-depth="0"]>li {
  /* padding: 12px 8px 0px 8px; */
  padding:  0px 8px 0px 8px !important;
  margin-top: 0px;
  font-size: 1.125rem;
  font-weight: 600;
}
/* this is the configuration for the text links */
.mxb_menu_sub.menu ul[data-depth="0"]>li a {
  /* color: white !important; */
}
.mxb_menu_sub.menu ul[data-depth="0"]>li a span:hover {
  text-decoration: none;
}
.mxb_menu_sub.menu ul[data-depth="1"]>li a span:hover {
  color: #2fb5d2;
  text-decoration: none;
}
/* use hover event to create specific mouseover effect on depth 0 main menu buttons (image + text) */
.mxb_menu_sub.menu ul[data-depth="0"]>li[data-depth="0"] a:hover {
  opacity: 0.7;
  /* border-color:  yellow; */
}
/* this is the text container of the desktop main menu items */
.desktop.mxb_menu_sub.menu ul[data-depth="0"]>li span[data-depth="0"] {
    /* text-transform: uppercase; */
}
/* font of the main menu items, both desktop and mobile */
.mxb_menu_sub.menu ul[data-depth="0"]>li span {
  word-wrap: break-word;
  font-size: 15px;
}
/* font of the main menu items only (depth=0), both desktop and mobile */
.mxb_menu_sub.menu ul[data-depth="0"]>li span[data-depth="0"] {
  font-weight: 500;
  color: white;
}
/* this is the text container of the desktop main menu items */
.desktop._mxb_menu_.menu ul[data-depth="0"]>li span[data-depth="0"] {
  /* text-transform: uppercase; */
}
.mobile.mxb_menu_sub.menu ul[data-depth="0"]>li span,
.desktop.mxb_menu_sub.menu ul[data-depth="1"]>li span {
  /* text-transform: capitalize; */
}
/*
.mxb_menu_sub.menu ul[data-depth="0"]>li span[data-depth="0"] {
  color: white;
}
*/
.mxb_menu_sub.menu ul>li i.material-icons {
  color: white;
}
.mxb_menu_sub.menu ul[data-depth="1"]>li span {
  /* color:  #3154A0; */
}
/* font of the sub-menu main items (not sub-items) */
.desktop.mxb_menu_sub.menu ul[data-depth="1"]>li span {
  font-weight: 500;
  color: #3154A0;
}
.desktop.mxb_menu_sub.menu ul[data-depth="1"]>li[data-depth="1"].has-children span[data-depth="1"] {
  font-weight: 600;
}
.mobile.mxb_menu_sub.menu ul[data-depth="1"]>li span {
  font-weight: 500;
  color: white;
}
/* for desktop: set different padding left for third level menu elements: it will be listed under every sub-menu item */
.desktop.mxb_menu_sub.menu ul[data-depth="2"] {
  padding-left: 4px !important;
}
/* for mobile: set different padding left for third level menu elements: it will be listed under every sub-menu item */
.mobile.mxb_menu_sub.menu ul[data-depth="2"]>li span.menu-text {
  padding-left: 10px !important;
}
/* hide special char after menu text for mobile menu */
.mobile.mxb_menu_sub.menu ul[data-depth="1"]>li span.mxb-menu-item-right-arrow {
  display: none;
}

/*
 * CUSTOMIZE SINGLE ELEMENT
 * you can customize a single menu element using data-depth and data-key combination
 */
/* first main-menu element appearance */
.desktop.mxb_menu_sub.menu ul[data-depth="0"]>li[data-key="0"] a {
  /* color: white !important; */
}
/* also set related image thumbnail */
.desktop.mxb_menu_sub.menu ul[data-depth="0"]>li[data-key="0"] img.menu-thumb {
  /*
  margin-right: 0px !important;
  width: 80px !important;
  */
}

/**
 * CUSTOM
 * depth 0: item #0 (OFFERTE)
 * this is the main menu single item area
 */
.desktop.mxb_menu_sub.menu ul[data-depth="0"]>li[data-key="0"] {
  /* margin-left: 5px !important; */
  text-transform: uppercase;
  padding: 10px 6px 12px 6px !important;
  background: #3154A0 !important;
  border-radius: 3px 3px 3px 3px;
  -moz-border-radius: 3px 3px 3px 3px;
  -webkit-border-radius: 3px 3px 3px 3px;
}

/*** END OF BLOCK #2 ***/



/****************************************
 * BLOCK #3
 * SET IMAGES AND THUMBS
 *
 * this is the menu image class for every depth.
 * note: image width: this css configuration will override the value set in mxb_menu_sub configuration (over the edit css field ...)
 * 
 ****************************************/
.mxb_menu_sub img.menu-thumb {
  margin-right: 3px;
  border-radius: 3px 3px 3px 3px;
  -moz-border-radius: 3px 3px 3px 3px;
  -webkit-border-radius: 3px 3px 3px 3px;
}
.mobile.mxb_menu_sub img.menu-thumb {
  margin-right: 3px;
}
/* disable single-line class for menus that are not "grid" or "default": type-column won't have a single-line thumb */
.mxb_menu_sub li.type-grid img.menu-thumb.single-line,
.mxb_menu_sub li.type-default img.menu-thumb.single-line {
    /*
    display: block;
    margin-bottom: 5px;
    */
}
/* or enable single-line only for image miniatures (data-type="image") and not for icons (data-type="icon") */
.mxb_menu_sub li.type-grid img.menu-thumb[data-type="image"].single-line {
    display: block;
    margin-bottom: 5px;
}

/* hide thumb images for sub-menu items in mobile menu */
.mobile.mxb_menu_sub.menu ul[data-depth="1"]>li img.menu-thumb {
  display: none;
}

/* menu image for depth="1" (first level sub-menu) */
.mxb_menu_sub .sub-menu ul[data-depth="1"]>li[data-depth="1"] img.menu-thumb {
  /* width: 40px; */
  border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
}

/* customize dimension and layout of the images for every level of sub-menu */
.mxb_menu_sub .menu ul[data-depth="0"]>li[data-depth="0"] img.menu-thumb {
  /* width:  80px; */
}
.mxb_menu_sub .sub-menu ul[data-depth="1"]>li img.menu-thumb {
  /* width:  40px; */
}
.mxb_menu_sub .sub-menu2 ul[data-depth="2"]>li img.menu-thumb,
.mxb_menu_sub .sub-menu2 ul[data-depth="3"]>li img.menu-thumb,
.mxb_menu_sub .sub-menu2 ul[data-depth="4"]>li img.menu-thumb {
  /* width:  32px; */
}
/*** END OF BLOCK #3 ***/



/****************************************
 * BLOCK #4
 * DATA-DEPTH *ANY* - SPECIFIC SUB_MENU ITEM
 * 
 * you can hide or customize menu items using their identifier (prefix + id_category, id_product, id_link...) for every depth or a specific one
 * identifiers:
 *  'category-' + id_category
 *  'product-' + id_product
 *  'manufacturer-' + id_manufacturer
 *  'supplier-' + id_supplier
 *  'shop-' + id_shop
 *  'lnk-' + link label
 *  'cms-page-' + id_cms
 *  'cms-category-' + id_cms_category
 *
 ****************************************/
.mxb_menu_sub .sub-menu ul>li[data-page-identifier="category-10"] {
  /* display:none; */
}
/* specific depth (1): */
.mxb_menu_sub .sub-menu ul[data-depth="1"]>li[data-page-identifier="category-10"] {
  /* display:none; */
}
/* specific depth (1), category "world import" in "categorie" sub-menu must be hidden */
.mxb_menu_sub .sub-menu ul[data-depth="1"]>li[data-page-identifier="category-328"] {
  display:none !important; 
}
/*** END OF BLOCK #4 ***/