/**
* 2007-2025 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@prestashop.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author    PrestaShop SA <contact@prestashop.com>
*  @copyright 2007-2025 PrestaShop SA
*  @license   http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*
* Don't forget to prefix your containers with your own identifier
* to avoid any conflicts with others containers.
*/
div#pxmenu{}

div#pxmenu .pxmenu-overlay{display: none;position: fixed;left: 0; top: 0; width: 100%; height: 100%; cursor: pointer; z-index: 19;background-color: rgba(0, 0, 0, 0.6)}
div#pxmenu.open .pxmenu-overlay{display: block;}

div#pxmenu div.pxmenu-header{display: flex; flex-direction: row;justify-content: end;}
div#pxmenu div.pxmenu-header>p{margin-right: auto;align-self: end;}
div#pxmenu div.pxmenu-header>p span{}
div#pxmenu div.pxmenu-header>p span.p1{}
div#pxmenu div.pxmenu-header>p span.p2{}
div#pxmenu div.pxmenu-header>.logo-area{align-self: center;}
div#pxmenu div.pxmenu-header a{}
div#pxmenu div.pxmenu-header a img.logo{}
div#pxmenu div.pxmenu-header>i.pxmenu-close{cursor: pointer;}



div#pxmenu div.pxmenu-container{
    position: fixed;
    top: 0;
    left: -33%;
    visibility: hidden;
    z-index: 20;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    width: 33%;
    height: 100%;
    transition: transform .2s ease-out;
}
div#pxmenu.open div.pxmenu-container{
    transform: translateX(100%);
    visibility: visible;
}

div#pxmenu div.pxmenu-container.open{width: 66%;left: -66%;}

div#pxmenu div.pxmenu-container ul.pxmenu-items{
    color: #000;
    padding: 1.5rem;
    position: relative;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
}
div#pxmenu div.pxmenu-container ul.pxmenu-items li.pxmenu-item{
    display: flex;
    flex-direction: row;
    padding: 5px;
}
div#pxmenu div.pxmenu-container.open ul.pxmenu-items li.pxmenu-item{    width: 50%;}

div#pxmenu div.pxmenu-container ul.pxmenu-items li.pxmenu-item>.material-icons{margin-left: auto;cursor: pointer;}
div#pxmenu div.pxmenu-container ul.pxmenu-items li.pxmenu-item>.pxmenu-arrow_backward{display: none;}
div#pxmenu div.pxmenu-container ul.pxmenu-items li.pxmenu-item.open>.pxmenu-arrow_backward{display: block;}
div#pxmenu div.pxmenu-container ul.pxmenu-items li.pxmenu-item.open>.pxmenu-arrow_forward{display: none;}

div#pxmenu div.pxmenu-container ul.pxmenu-items li.pxmenu-item:hover{}
div#pxmenu div.pxmenu-container ul.pxmenu-items li.pxmenu-item a{color: #000}
div#pxmenu div.pxmenu-container ul.pxmenu-items li.pxmenu-item>a{}

div#pxmenu div.pxmenu-container ul.pxmenu-items li.pxmenu-item div.item-panel{
    visibility: hidden;
    background-color: #fff;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    opacity: 0;
    padding: 1.5rem;
    transition: all .2s ease-out;
}
div#pxmenu div.pxmenu-container ul.pxmenu-items li.pxmenu-item.open div.item-panel{
    visibility: visible;
    width: 50%;
    left: 50%;
    opacity: 1;
    max-height: 100%;
    overflow: scroll;
}

div#pxmenu div.pxmenu-container ul.pxmenu-items li.pxmenu-item div.item-panel ul{}
div#pxmenu div.pxmenu-container ul.pxmenu-items li.pxmenu-item div.item-panel ul li{}


div#pxmenu div.pxmenu-container ul.pxmenu-items li.pxmenu-item div.item-panel ul li>.material-icons{margin-left: auto;cursor: pointer;}
div#pxmenu div.pxmenu-container ul.pxmenu-items li.pxmenu-item div.item-panel ul li>.pxmenu-arrow_upward{display: none;}
div#pxmenu div.pxmenu-container ul.pxmenu-items li.pxmenu-item div.item-panel ul li.open>.pxmenu-arrow_upward{display: block;}
div#pxmenu div.pxmenu-container ul.pxmenu-items li.pxmenu-item div.item-panel ul li.open>.pxmenu-arrow_downward{display: none;}

div#pxmenu div.pxmenu-container ul.pxmenu-items li.pxmenu-item div.item-panel>ul{}
div#pxmenu div.pxmenu-container ul.pxmenu-items li.pxmenu-item div.item-panel>ul>li{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
div#pxmenu div.pxmenu-container ul.pxmenu-items li.pxmenu-item div.item-panel>ul>li>a{}
div#pxmenu div.pxmenu-container ul.pxmenu-items li.pxmenu-item div.item-panel>ul>li.foot{}
div#pxmenu div.pxmenu-container ul.pxmenu-items li.pxmenu-item div.item-panel>ul>li.foot>a{}

div#pxmenu div.pxmenu-container ul.pxmenu-items li.pxmenu-item div.item-panel>ul>li>ul.menulist{
    display: none;
    flex-direction: column;
    width: 100%;
}
div#pxmenu div.pxmenu-container ul.pxmenu-items li.pxmenu-item div.item-panel>ul>li.open>ul.menulist{}
div#pxmenu div.pxmenu-container ul.pxmenu-items li.pxmenu-item div.item-panel>ul>li>ul>li{}
div#pxmenu div.pxmenu-container ul.pxmenu-items li.pxmenu-item div.item-panel>ul>li>ul>li>a{}
div#pxmenu div.pxmenu-container ul.pxmenu-items li.pxmenu-item div.item-panel>ul>li>ul>li.foot{}
div#pxmenu div.pxmenu-container ul.pxmenu-items li.pxmenu-item div.item-panel>ul>li>ul>li.foot>a{}

@media(max-width: 1024px) {
    div#pxmenu div.pxmenu-container{
        left: -50%;
        min-width: 50%;
    }
    div#pxmenu div.pxmenu-container.open{width: 80%;left: -80%;}

}
@media(max-width: 760px) {
    div#pxmenu div.pxmenu-container.open{width: 90%;left: -90%;}
}
@media(max-width: 680px) {
    div#pxmenu div.pxmenu-container {width: 90%;left: -90%;}
    div#pxmenu div.pxmenu-container ul.pxmenu-items li.pxmenu-item.open div.item-panel {
        position: static;
        width: 100%;
    }
    div#pxmenu div.pxmenu-container.open ul.pxmenu-items li.pxmenu-item {
        width: 100%;
        flex-wrap: wrap;
    }
}