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

    /* Prevent Horizontal Scroll */
    html,
    body {
        overflow-x: hidden !important;
    }

    /* Header & Logo Center */
    .header-left .dashboard_bar {
        display: none !important;
    }

    .brand-logo {
        display: none !important;
    }

    .nav-header {
        width: 0px !important;
        padding-right: 25px;
        gap: 10px;
    }

    .refresh-btn {
        right: -5rem;
    }

    .header-center {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: auto;
    }

    .mobile-view {
        display: flex !important;
        align-items: center;
        gap: 5px;
    }

    .app-img {
        height: auto;
        width: 75%;
        filter: brightness(0) invert(1);
    }

    .mobile-hide {
        display: none !important;
    }

    .header .header-content {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    /* DataTables - Inline Length & Filter */
    .dataTables_wrapper>div:first-child {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 8px 0;
    }

    .dataTables_wrapper .dataTables_length {
        display: inline-flex !important;
        align-items: center;
    }

    button.btn.btn-sm {
        padding: 6px 12px !important;
    }

    .dataTables_wrapper .dataTables_filter {
        display: inline-flex !important;
        align-items: center;
        margin: 0 !important;
        float: none !important;
        gap: 8px;
    }

    .dataTables_wrapper .dataTables_filter input {
        width: 120px !important;
    }

    /* Flex Row to Col */
    .d-flex.justify-content-between.align-items-center.mb-2,
    .d-flex.justify-content-between.align-items-center.mb-3 {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px;
    }

    .d-flex.justify-content-between.align-items-center.mb-2>*,
    .d-flex.justify-content-between.align-items-center.mb-3>* {
        width: 100% !important;
    }

    /* Analytics Tiles */
    #statsTilesRow .col,
    #financeTilesRow .col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 15px;
    }

    /* Table Padding */
    .table td,
    .table th,
    table.dataTable td,
    table.dataTable th {
        padding: 6px 8px !important;
        font-size: 11px !important;
    }

    /* Mobile Page Title */
    .mob-page-title {
        display: block !important;
        background: rgba(202, 240, 248, 0.6) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        color: var(--primary) !important;
        padding: 5px 20px !important;
        font-size: 15px;
        font-weight: 700;
        margin: -15px -15px 15px -15px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.6);
        text-align: center;
        border-radius: 0 0 40px 40px;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    }

    .profile-dropdown {
        margin-right: 5px !important;
    }

    /* Buttons & Accordion */
    .accordion-button {
        padding: 10px 15px !important;
    }


    /* DataTables Pagination */
    .dataTables_wrapper .dataTables_paginate {
        float: right !important;
        text-align: right !important;
        width: 100% !important;
        display: flex;
        justify-content: flex-end;
        margin-top: 10px !important;
    }

    .switch-div {
        display: flex;
        align-items: center !important;
        margin-top: 12px;
        justify-content: space-evenly;
    }

    .accordion-button::after {
        right: 1rem;
    }

    .personal-info {
        display: none;
    }

    .app-name {
        font-size: 15px !important;
    }

    .name-div {
        padding: 12px 10px !important
    }

    .select2-container .select2-selection--single .select2-selection__rendered {
        padding: 0.375rem 0.5rem !important;
    }

    .preload-image {
        width: 60% !important;
        max-width: 200px !important;
        display: block !important;
        margin: 0 auto !important;
    }

    .card-body:not(.no-cbs) {
        margin: 0.5rem !important;
        padding: 0.5rem !important;
    }

    .card:not(.no-cbs) {
        margin-left: 0px !important;
        margin-right: 0px !important;
    }
}