.offcanvas_slide{
    transition: transform 500ms ease 0s;
    width:800px;
    height:100%;
    position:fixed;
    top:0;
    right:-800px;
    bottom:0;
    z-index: 9000;
}
.offcanvas_slide_sub{
    width:800px;
    height:100%;
    position:fixed;
    top:0;
    right:-800px;
    bottom:0;
    z-index: 9000;
}

.offcanvas_show{
    transform: translate3d(-800px, 0px, 0px);
}
.offcanvas_show_sub{
    left: 0px;
}
.offcanvas_close{
    transform: translate3d(800px, 0px, 0px);
}

@media screen and (min-width: 0px) and (max-width: 810px) {
    .offcanvas_slide{
        width: 100% !important;
        right : -100% !important;
    }
    .offcanvas_slide_sub{
        width: 100% !important;
        right : -100% !important;
    }
    .offcanvas_show{
        transform: translate3d(-100%, 0px, 0px) !important
    }
    #doz_alarm_offcanvas.offcanvas_close{
        transform: translate3d(100%, 0px, 0px) !important;;
    }

}