a.mobileMenu                    {display: none !important;}

@media all and (max-width: 980px) {
    #container {padding:10px !Important;min-height:unset !Important;}
    a.mobileMenu                {display: inline !important;}

    #userHeader .left, #userHeader .mobileHide, #header .mobileHide
                            {display: none !important;}
    #userHeader .right      {float: none !important; text-align: center; margin: 0 auto; font-size: 1rem;}
    #userHeader .mobileMenu, #header .mobileMenu
                            {display: inline-block;}

    #header .links          {float: right; padding: 12px 12px; text-align: right; width: auto !important;}
    #header .links a        {padding: 0 80px 0 0; font-size: 40px; background-image: url('/resources/icons/threelines.png'); background-size: contain; background-repeat: no-repeat; background-position: right; }

    .modal.mobileMenu       {margin: 0 !important; left: 0; width: 90% !important; padding: 20px 5% !important; background: #666666;}
    .modal.mobileMenu a     {display: block; clear: both;font-size: 14px; padding: 10px 0; color: #FFFFFF; border-bottom: 2px dotted #ffffff;}
    .modal.mobileMenu a:last-of-type
                            {border-bottom: none;}
    .modalClose.menuClose   {position: fixed; top: 0; left: auto; right: 0; margin: 0 !important; width: 5%; height: auto; margin-left: -20%; padding: 20px 5%; border: 0; font-size: 40px; border-radius: 0 0 0 20px;}

    #mapSide                {top: 250px;}
    .title-background h1    {text-align: center !important;padding-top: 0 !Important;}

    .p-5 {padding:1rem !important;}

    }

@media(max-width: 355px) {
    #header .links a {font-size: 22px !important; padding: 0px 45px 0 0;}
}

/* Bootstrap nav styles */

.navbar {
    background-color: #ebebeb;
}

.navbar-nav {
    margin: 0;
}

.navbar-toggler-icon {
    width: 20px;
    height: 20px;
}

ul.navbar-nav li {
    list-style-type: none;
    margin: 0;
}

ul.navbar-nav li a {
    font-size: 12px;
    border-radius: 5px;
    color: #000!important;
}

ul.navbar-nav li a.dropdown-toggle {
    color: #000 !important;
}

ul.navbar-nav li a.dropdown-toggle:focus {
    background-color: #ebebeb !important;
}

ul.navbar-nav li a:hover {
    background-color: #d9d9d9;
    border: 0;
}

.dropdown-menu {
    border: none;
    background-color: #f8f9fa;
    padding: 0;
    margin: 0;
}

/* Breakpoint Styles */

#overviewMaps #mapSide {
    top: 400px;
    right: 20px;
    z-index: 9999;
    width: 400px;
}

#reportBTN,
#csvBTN {
    width: unset;
}

.table tr:nth-child(odd) {
    background: unset;
}

#map {
    margin-bottom: 200px !important;
}

@media(max-width: 1200px) {
    .container {
        width: 1170px
    }

    a.nav-link {
        padding-left: 10px !important;
    }

    .corporate-button {
        line-height: 28px;
    }
}

@media(max-width: 992px) {
    .container {
        width: 970px
    }

    .mobile-report-wrapper {
        width: 900px;
    }

    #mapSide {
        position: unset !important;
        width: 100% !important;
    }

    #map {
        margin-bottom: 40px !important;
    }

    .table {
        width: unset !important;
    }

    a.nav-link,
    .dropdown-item {
        padding: 10px 10px;
    }

}

@media(max-width: 768px) {
    .container {
        width: 750px
    }

    .mobile-report-wrapper {
        width: 900px;
    }

    #mapSide {
        position: unset !important;
        width: 100% !important;
    }

    ul.pagination li {
        margin: 0 !important;
    }

    .length_bottom {
        width: 100%;
        margin-bottom: 20px;
    }
    
    .dataTables_paginate {
        font-size: 10px;
    }

    .dataTables_paginate .button {
        margin-right: 0;
        font-size: 12px;
    }

    .paginate_page {
        padding-left: 2px;
    }

    .dataTables_paginate .paginate_of {
        padding-right: 2px!important;
    }
}

@media(max-width: 576px) {
    ul.pagination li {
        margin: 0 !important;
    }

    .length_bottom {
        width: 100%;
        margin-bottom: 20px;
    }

    .dataTables_paginate {
        font-size: 10px;
    }

    .dataTables_paginate .button {
        margin-right: 0;
        font-size: 12px;
    }

    .paginate_page {
        padding-left: 2px;
    }

    .dataTables_paginate .paginate_of {
        padding-right: 2px!important;
    }

    .mobile-report-wrapper {
        width: 900px;
    }

    #mapSide {
        position: unset !important;
        width: 100% !important;
    }

    .complaint-flex {
        display: flex;
        flex-direction: column;
    }

    .complaint-lhs,
    .complaint-rhs {
        width: 100% !important;
    }

    .complaint-lhs {
        order: 2;
    }

    .complaint-rhs {
        order: 1;
    }
}