@media screen {
    .dj-offcanvas-wrapper {
        height: 100%;
    }

    .dj-offcanvas-pusher,
    .dj-offcanvas-pusher-in {
        height: 100%;
    }

    .dj-offcanvas-pusher-in {
        display: flex;
        flex-direction: column;
    }

    .dj-offcanvas-logo {
        display: flex;
        align-items: center;
        flex-grow: 3;
        justify-content: center;
        max-height: 200px;
        margin: 50px 0 20px;
        text-align: center;
    }

    .dj-offcanvas-logo a {
        display: block;
    }

    .dj-offcanvas-logo img {
        width: 240px;
        max-width: 240px;
    }

    .dj-mobile-nav,
    .dj-mobile-nav a {
        font-size: 18px;
    }

    .dj-mobile-nav .toggler {
        display: none;
    }

    .dj-mobile-nav .current.active > a {
        color: #5078FE;
    }

    .dj-offcanvas-top {
        min-height: 38px;
        padding: 10px 15px;
        border-bottom: 2px solid #EBECEE;
    }

    .dj-offcanvas .dj-offcanvas-nav {
        flex-grow: 2;
    }

    .dj-offcanvas-anim .dj-offcanvas,
    .dj-offcanvas-anim .dj-offcanvas .dj-offcanvas-nav {
        display: flex !important;
        flex-direction: column;
    }

    .dj-offcanvas-anim .dj-offcanvas .dj-offcanvas-nav,
    .dj-offcanvas-anim .dj-offcanvas .dj-offcanvas-content {
    }

    .dj-offcanvas .dj-offcanvas-modules {
        margin-top: 15px;
    }

    .dj-offcanvas .dj-offcanvas-content + .dj-offcanvas-modules {
        margin-top: auto;
    }

    .dj-offcanvas .dj-offcanvas-modules .user_login {
        position: absolute;
        top: 0;
        right: 0;
    }

    .dj-offcanvas .dj-offcanvas-modules .user_login .ico.login {
        display: none;
    }

    .dj-offcanvas-modules ul.quickicons {
        display: flex;
        align-items: stretch;
        flex-direction: column;
        margin: 15px 0 0 0;
        padding: 0;
        gap: 10px 10px;
    }

    .dj-mobile-nav {
        display: flex;
        flex-direction: column;
        margin: 0 0 15px 0;
        padding: 0;
        gap: 5px 0;
    }

    .dj-mobile-nav li {
        list-style: none;
    }

    .dj-mobile-nav > li {
        min-height: 55px;
    }

    .dj-mobile-nav ul li + li {
        margin-top: 3px;
    }

    .dj-mobile-nav > li > .sep,
    .dj-mobile-nav > li > a {
        display: flex;
        align-items: center;
        min-height: 55px !important;
        padding: 10px 15px;
        border-radius: 6px;
        gap:0 5px;
    }

    .dj-megamenu .feed > a span,
    .dj-megamenu .dashboard > a span,
    .dj-megamenu .help-center > a span,
    .dj-megamenu .separator span,
    .dj-megamenu .home > a span,
    .dj-megamenu .reports > a span,
    .dj-megamenu .parts > a span {
        display: flex !important;
        align-items: center;
    }

    .dj-mobile-nav > li.active > .sep.opened {
        background: #fff;
    }

    .dj-mobile-nav > li > .sep.opened,
    .dj-mobile-nav > li > a.opened {
        border-radius: 6px 6px 0 0;
    }

    .dj-mobile-nav ul {
        padding-left: 50px;
    }

    .dj-mobile-nav ul.collapsed:not(.in) {
        display: none;
    }

    .dj-mobile-nav ul li span,
    .dj-mobile-nav ul li a {
        font-size: 16px;
    }

    .dj-mobile-nav ul li a {
        text-decoration: none;
    }

    .dj-mobile-nav li .show {
        margin-left: auto;
    }

    .dj-megamenu .feed > a:before,
    .dj-megamenu .dashboard > a:before,
    .dj-megamenu .home > a:before,
    .dj-megamenu .inventory > a:before,
    .dj-megamenu .vendors > a:before,
    .dj-megamenu .task-list > a:before,
    .dj-megamenu .reports > a:before,
    .dj-megamenu .help-center > a:before,
    .dj-megamenu .parts > a:before,
    .dj-megamenu  li.lvl_1 ul li.lvl_2 a:before,
    .dj-mobile-nav a.feed:before,
    .dj-mobile-nav a.help-center:before,
    .dj-mobile-nav a.reports:before,
    .dj-mobile-nav a.home:before,
    .dj-mobile-nav a.dashboard:before,
    .dj-mobile-nav a.parts:before,
    .dj-mobile-nav .sep.inventory:before,
    .dj-mobile-nav .sep.vendors:before,
    .dj-mobile-nav .sep.task-list:before {
        display: block;
        width: 24px;
        height: 24px;

        content: "";
        background-color: #7A8AA7;
        -webkit-mask: url("../images/icons/add_car.svg") no-repeat 50% 50%;
        mask: url("../images/icons/add_car.svg") no-repeat 50% 50%;
        -webkit-mask-size: contain;
        mask-size: contain;
    }
    .dj-megamenu .recon-board > a:before,
    .dj-megamenu .sold-inventory > a:before,
    .dj-megamenu .service-dashboard > a:before,
    .dj-megamenu .vehicles > a:before{
        width: 20px;
        height: 20px;
        margin-right: 0px;
    }

    .dj-megamenu  li.lvl_1 ul li.lvl_2.current a:before{
        background-color: #5078FE;
    }



    .dj-megamenu .feed > a span:before,
    .dj-megamenu .dashboard > a span:before,
    .dj-megamenu .home > a span:before,
    .dj-megamenu .separator.inventory1 > a span:before,
    .dj-megamenu .separator.vendors > a span:before,
    .dj-megamenu .separator.task-list > a span:before,
    .dj-megamenu .help-center > a span:before,
    .dj-megamenu .reports > a span:before,
    .dj-megamenu .parts > a span:before{
        margin-right: 10px;
    }

    .dj-megamenu .dashboard > a:before,
    .dj-mobile-nav a.dashboard:before,
    .dj-megamenu .home > a:before,
    .dj-mobile-nav a.home:before {
        -webkit-mask: url("../images/icons/dashboard.svg") no-repeat 50% 50%;
        mask: url("../images/icons/dashboard.svg") no-repeat 50% 50%;
        -webkit-mask-size: contain;
        mask-size: contain;
    }

    .dj-megamenu .separator.inventory > a:before ,
    .dj-mobile-nav .sep.inventory:before {
        -webkit-mask: url("../images/icons/car.svg") no-repeat 50% 50%;
        mask: url("../images/icons/car.svg") no-repeat 50% 50%;
        -webkit-mask-size: contain;
        mask-size: contain;
    }

    .dj-megamenu .separator.vendors > a:before,
    .dj-mobile-nav .sep.vendors:before {
        -webkit-mask: url("../images/icons/ep_user.svg") no-repeat 50% 50%;
        mask: url("../images/icons/ep_user.svg") no-repeat 50% 50%;
        -webkit-mask-size: contain;
        mask-size: contain;
    }

    .dj-megamenu .separator.task-list > a:before,
    .dj-mobile-nav .sep.task-list:before {
        -webkit-mask: url("../images/icons/ep_list.svg") no-repeat 50% 50%;
        mask: url("../images/icons/ep_list.svg") no-repeat 50% 50%;
        -webkit-mask-size: contain;
        mask-size: contain;
    }

    .dj-megamenu .feed > a:before,
    .dj-mobile-nav a.feed:before {
        -webkit-mask: url("../images/notepad.svg") no-repeat 50% 50%;
        mask: url("../images/notepad.svg") no-repeat 50% 50%;
        -webkit-mask-size: contain;
        mask-size: contain;
    }

    .dj-mobile-nav a.reports:before {
        -webkit-mask: url("../images/icons/ep_rep.svg") no-repeat 50% 50%;
        mask: url("../images/icons/ep_rep.svg") no-repeat 50% 50%;
        -webkit-mask-size: contain;
        mask-size: contain;
    }

    .dj-megamenu .help-center > a:before,
    .dj-mobile-nav a.help-center:before {
        -webkit-mask: url("../images/icons/help.svg") no-repeat 50% 50%;
        mask: url("../images/icons/help.svg") no-repeat 50% 50%;
        -webkit-mask-size: contain;
        mask-size: contain;
    }


    .dj-megamenu .parts > a:before,
    .dj-mobile-nav a.parts:before {
        -webkit-mask: url("../images/icons/parts.svg") no-repeat 50% 50%;
        mask: url("../images/icons/parts.svg") no-repeat 50% 50%;
        -webkit-mask-size: contain;
        mask-size: contain;
    }

    .dj-megamenu li.lvl_1 ul li.lvl_2.vehicles >  a:before {
        -webkit-mask: url("../images/icons/cars.svg") no-repeat 50% 50%;
        mask: url("../images/icons/cars.svg") no-repeat 50% 50%;
        -webkit-mask-size: contain;
        mask-size: contain;

    }
    .dj-megamenu li.lvl_1 ul li.lvl_2.service-dashboard > a:before{
        -webkit-mask: url("../images/icons/service.svg") no-repeat 50% 50%;
        mask: url("../images/icons/service.svg") no-repeat 50% 50%;
        -webkit-mask-size: contain;
        mask-size: contain;

    }
    .dj-megamenu li.lvl_1 ul li.lvl_2.sold-inventory > a:before {
        -webkit-mask: url("../images/icons/soldcar.svg") no-repeat 50% 50%;
        mask: url("../images/icons/soldcar.svg") no-repeat 50% 50%;
        -webkit-mask-size: contain;
        mask-size: contain;

    }
    .dj-megamenu li.lvl_1 ul li.lvl_2.recon-board > a:before {
        -webkit-mask: url("../images/icons/board.svg") no-repeat 50% 50%;
        mask: url("../images/icons/board.svg") no-repeat 50% 50%;
        -webkit-mask-size: contain;
        mask-size: contain;
    }

    .dj-megamenu li.lvl_1 ul li.lvl_2.vehicle-locations > a:before {
        -webkit-mask: url("../images/icons/vehiclelocation.svg") no-repeat 50% 50%;
        mask: url("../images/icons/vehiclelocation.svg") no-repeat 50% 50%;
        -webkit-mask-size: contain;
        mask-size: contain;
    }

    .dj-megamenu li.lvl_1 ul li.lvl_2.transfers-list > a:before {
        -webkit-mask: url("../images/transfers.svg") no-repeat 50% 50%;
        mask: url("../images/transfers.svg") no-repeat 50% 50%;
        -webkit-mask-size: contain;
        mask-size: contain;
    }

    .dj-megamenu li.lvl_1 ul li.lvl_2.locations-map > a:before {
        -webkit-mask: url("../images/icons/locationmap.svg") no-repeat 50% 50%;
        mask: url("../images/icons/locationmap.svg") no-repeat 50% 50%;
        -webkit-mask-size: contain;
        mask-size: contain;
    }

    .dj-megamenu li.lvl_1 ul li.lvl_2.history > a:before {
        -webkit-mask: url("../images/icons/history.svg") no-repeat 50% 50%;
        mask: url("../images/icons/history.svg") no-repeat 50% 50%;
        -webkit-mask-size: contain;
        mask-size: contain;
    }
    .dj-megamenu li.lvl_1 ul li.lvl_2.tasks > a:before {
        -webkit-mask: url("../images/task_todo.svg") no-repeat 50% 50%;
        mask: url("../images/task_todo.svg") no-repeat 50% 50%;
        -webkit-mask-size: contain;
        mask-size: contain;
    }


    .dj-megamenu li.lvl_1 ul li.lvl_2.tasks > a:before {
        -webkit-mask: url("../images/task_todo.svg") no-repeat 50% 50%;
        mask: url("../images/task_todo.svg") no-repeat 50% 50%;
        -webkit-mask-size: contain;
        mask-size: contain;
    }

    .dj-megamenu li.lvl_1 ul li.lvl_2.postsale-tasks  > a:before {
        -webkit-mask: url("../images/icons/postsale.svg") no-repeat 50% 50%;
        mask: url("../images/icons/postsale.svg") no-repeat 50% 50%;
        -webkit-mask-size: contain;
        mask-size: contain;
    }

    .dj-megamenu li.lvl_1 ul li.lvl_2.for-me > a:before {
        -webkit-mask: url("../images/usertasks.svg") no-repeat 50% 50%;
        mask: url("../images/usertasks.svg") no-repeat 50% 50%;
        -webkit-mask-size: contain;
        mask-size: contain;
    }


    #left .nav.menu li.lvl_1 > a,
    #left .nav.menu li.lvl_2 > a {
        display: flex;
        gap:0 5px;
        align-items: center;
        line-height: 1.1;
    }

    #left:not(.minimized) .nav.menu li.lvl_2 > a:before{
        display: none;
    }


    .dj-offcanvas-modules ul.quickicons {
        justify-content: center;
    }

    .dj-offcanvas-modules ul.quickicons li {
        width: 100%;
        height: auto;
        text-align: left;
    }

    .dj-offcanvas-modules ul.quickicons a {
        font-size: 16px;
        line-height: 1;
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: flex-start;
        height: 100%;
        min-height: 60px;
        padding: 10px 15px !important;
        border: none !important;
        border-radius: 5px;
        background: #fff;
        gap: 0 10px;
    }

    .dj-offcanvas-modules ul.quickicons a:focus,
    .dj-offcanvas-modules ul.quickicons a:hover {
        color: #fff;
        background: #5078FE;
    }

    .dj-offcanvas-modules ul.quickicons a:focus .img:before,
    .dj-offcanvas-modules ul.quickicons a:hover .img:before {
        background-color: #fff;
    }

    .dj-offcanvas-modules ul.quickicons a span {
        font-size: 16px;
        line-height: 1;
    }

    .dj-offcanvas-modules ul.quickicons li a:before {
        width: 28px !important;
        height: 30px !important;
    }

    .dj-mobileitem .sep {
        color: #5A738E;
    }
}