.drawer-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 1040;
}

.drawer-backdrop.show {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.drawer-nav,
.drawer-nav * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.drawer-nav,
.drawer-nav .list .menu .menu-drawer {
    position: fixed;
    margin-top: -1px;
    height: 100%;
    top: 0;
    width: 0;
    background-color: #f0f0f0;
    z-index: 1050;
    overflow-x: hidden;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
}

.drawer-nav {
    z-index: 1050;
}

.drawer-nav .list .menu .menu-drawer {
    z-index: 1060;
}

.drawer-nav.left,
.drawer-nav.left .list .menu .menu-drawer {
    left: 0;
}

.drawer-nav.right,
.drawer-nav.right .list .menu .menu-drawer {
    right: 0;
}

.drawer-nav.left.open,
.drawer-nav.right.open,
.drawer-nav.left .list .menu .menu-drawer.open,
.drawer-nav.right .list .menu .menu-drawer.open {
    width: 100%;
    padding: 5px 10px;
}

.drawer-nav .list a {
    display: block;
}

.drawer-nav .list .header,
.drawer-nav .list .sub-header {
    height: 50px;
    position: relative;
    background-color: inherit;
}

.drawer-nav .list .header .logo,
.drawer-nav .list .header img {
    height: 100%;
    width: auto;
}

.drawer-nav .list .header .close,
.drawer-nav .list .menu .menu-toggle::after,
.drawer-nav .list .sub-header .drawer-close {
    margin: 0;
    position: absolute;
    top: 50%;
    -webkit-transform: translatey(-50%);
    -ms-transform: translatey(-50%);
    transform: translatey(-50%);
    opacity: 0.8;
}

.drawer-nav .list .header .close i,
.drawer-nav .list .sub-header .drawer-close i {
    font-size: 18px;
    font-weight: normal;
}

.drawer-nav.left .list .header .close,
.drawer-nav.left .list .sub-header .drawer-close {
    right: 8px;
}

.drawer-nav.right .list .header .close,
.drawer-nav.right .list .sub-header .drawer-close {
    left: 8px;
}

.drawer-nav .list .menu .back-btn {
    font-weight: normal;
    font-size: 18px;
}

.drawer-nav .list .menu .back-btn,
.drawer-nav .list .header .close,
.drawer-nav .list .sub-header .drawer-close {
    color: var(--primary-color);
}

.drawer-nav .list li,
.drawer-nav .list .menu .menu-drawer li {
    padding: 10px;
    height: 50px;
    border-bottom: 2px solid rgb(226, 226, 226);
}

.drawer-nav .list .menu {
    position: relative;
    font-weight: normal;
    width: 100%;
}

.drawer-nav .list .menu .menu-toggle,
.drawer-nav .list .menu .menu-drawer li {
    font-weight: normal;
    line-height: 30px;
}

.drawer-nav .list .menu .menu-toggle::after {
    font-family: "feather-icons" !important;
    font-size: 15px;
    color: rgb(128, 128, 128);
}

.drawer-nav.left .list .menu .menu-toggle::after {
    content: "\f131";
    right: 10px;
}

.drawer-nav.right .list .menu .menu-toggle::after {
    content: "\f130";
    left: 10px;
}