@media screen and (max-width:650px) {

    html,
    body,
    #app {
        max-width: 100%;
        overflow-x: hidden;
    }

    .container-fluid.page-body-wrapper {
        padding-left: 0;
        padding-right: 0;
    }

    #main_content .content-wrapper {
        padding: 68px 12px 24px;
    }

    .stats-menu-grid {
        margin: 0 !important;
    }

    .stats-menu-grid > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 6px !important;
    }

    .stats-menu-grid .card {
        min-height: 92px;
    }

    .stats-menu-grid .card-body {
        padding: 1rem !important;
    }

    .stats-menu-grid h4 {
        font-size: 1rem;
        line-height: 1.35;
    }

    #main_content_map {

        margin-top  : 5px;
        margin-left : 0px;

        transition  : margin 0.3s ease-in-out;
    }

    #main_content {

        margin-left : 0px;
        padding-left: 0 !important;
    }

    #mini_logo_custom {
        
        padding-left: 0px   !important;
    }

    #logo_div_parent {

        width       : 100%  !important;
    }

    #mini_logo_custom_image {

        float       : left;
        width       : 35px !important;
        height      : 35px  !important;
    }

    #header_menu_buttons_div {

        display     : block !important;
        margin-top  : 21px  !important;
    }

    #header_menu {

        width       : 100%; 
        display     : none
    }

    .modal {

        height      : 90%   !important;
    }

    /* Map */

    #show_route_datatable_icon_div, #show_route_customers_list_icon_div {

        left        :   45% ;
        /* bottom      :   15% ; */
    }

    #hide_route_datatable_icon_div, #hide_route_customers_list_icon_div {

        bottom      :   53% ;
        /* left        :   46% ; */
    }

    #map_top_middle_options_div {

        left        :   31%     ;
        top         :   85px    ;
    }

    .map_top_buttons_parent_div {

        display             :   block   ;
        width               :   100%    ;
        left                :   0px     ;
        top                 :   64px    ;
        /* padding-top         :   15px    ; */
        /* padding-bottom      :   15px    ; */
    }

    .map_top_buttons_div {

        width       :   95%     ;
        margin      :   auto    ;
    }

    #map_options_buttons_div {

        display     : block !important;
    }

    /*  */

    .navbar.default-layout-navbar .navbar-brand-wrapper .navbar-brand {

        width           :   20%;
    }

    .navbar.default-layout-navbar .navbar-brand-wrapper .navbar-brand img {

        width           :   35px;
        height          :   35px;
    }

    /*  */

    #mapOptionsDropdown {

        width           :   100%
    }

    /*  */

    .dataTables_paginate {
     
        float           :   none;
    }
}

@media screen and (max-width:1199px) {

    #main_content,
    #main_content_map {
        width: 100%;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    #sidebar {
        position: fixed !important;
        top: 70px;
        bottom: 0;
        left: 0;
        z-index: 1050;
        width: 260px;
        max-width: 85vw;
        transform: translateX(-110%);
        transition: transform 0.25s ease-in-out;
    }

    #sidebar.active {
        transform: translateX(0);
    }

    #main_content .content-wrapper {
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media screen and (max-width:650px) {

    #main_content .content-wrapper {
        padding-left: 12px;
        padding-right: 12px;
    }
}

@media screen and (min-width:1200px) {

    #main_content {

        padding-left : 260px;
    }
}