.phone-number-group {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
}

.phone-number-group .country-code-select,
.phone-number-group > .select2-container {
    flex: 0 0 82px !important;
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
}

.phone-number-group > .form-control.js-mobile-number {
    flex: 1 1 auto;
    min-width: 0;
}

.phone-number-group .select2-selection--single {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

@media (max-width: 767.98px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .page-content,
    .content-wrapper,
    .content-inner {
        min-width: 0;
        max-width: 100%;
        overflow-x: hidden;
    }

    .content,
    .container,
    .container-fluid,
    .page-header-content {
        width: 100%;
        max-width: 100%;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .page-title {
        padding: 1.25rem 0;
        font-size: 1.35rem;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .page-header .d-flex {
        min-width: 0;
        width: 100%;
        align-items: flex-start;
        gap: .75rem;
    }

    .page-header .collapse,
    .page-header .collapsing {
        width: 100%;
    }

    .page-header .collapse {
        display: block !important;
        height: auto !important;
        visibility: visible !important;
    }

    .page-header [data-bs-toggle="collapse"] {
        display: none !important;
    }

    .page-header .hstack {
        flex-wrap: wrap;
        align-items: stretch;
        gap: .75rem !important;
        width: 100%;
        margin-top: 1rem;
    }

    .page-header .hstack > .btn,
    .page-header .hstack > .dropdown,
    .page-header .hstack > .dropdown > .btn {
        width: 100%;
    }

    .card {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .card-body {
        padding: 1rem;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }

    .card-header.text-end {
        display: flex;
        flex-wrap: wrap;
        justify-content: stretch;
        gap: .75rem;
        padding: 1rem;
        text-align: initial !important;
    }

    .card-header.text-end > .btn {
        flex: 1 1 100%;
        min-height: 2.75rem;
        white-space: normal;
    }

    .navbar .overflow-auto {
        max-width: 100%;
        overflow-x: auto !important;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .navbar .nav.flex-nowrap {
        min-width: max-content;
        justify-content: flex-start !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .navbar .navbar-nav-link {
        white-space: nowrap;
    }

    .card-body > .row:has(> table.datatable-scroll-y),
    .card-body > .row:has(.dataTables_wrapper),
    .card-body > .row:has(.dt-container) {
        display: block;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        overflow-x: visible;
        overflow-y: hidden;
    }

    .dataTables_scrollBody::-webkit-scrollbar,
    .dt-scroll-body::-webkit-scrollbar,
    .scrollable-container::-webkit-scrollbar {
        height: 10px;
    }

    .dataTables_scrollBody::-webkit-scrollbar-track,
    .dt-scroll-body::-webkit-scrollbar-track,
    .scrollable-container::-webkit-scrollbar-track {
        background: #edf3fb;
    }

    .dataTables_scrollBody::-webkit-scrollbar-thumb,
    .dt-scroll-body::-webkit-scrollbar-thumb,
    .scrollable-container::-webkit-scrollbar-thumb {
        background: #1688e8;
        border-radius: 999px;
    }

    .dataTables_wrapper,
    .dt-container,
    .dt-scroll,
    .dt-scroll-head,
    .dt-scroll-body,
    .dataTables_scroll,
    .dataTables_scrollHead,
    .dataTables_scrollBody {
        max-width: 100% !important;
    }

    .dataTables_wrapper,
    .dt-container {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        overflow-x: visible !important;
        overflow-y: hidden;
        padding-bottom: 0;
    }

    .dataTables_scrollBody,
    .dt-scroll-body {
        width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-gutter: stable;
        padding-bottom: .65rem;
    }

    .dataTables_wrapper .row,
    .dataTables_wrapper .dt-layout-row {
        width: 100%;
        min-width: 0;
        margin-left: 0;
        margin-right: 0;
    }

    .dataTables_wrapper table.dataTable,
    .dataTables_wrapper table.datatable-scroll-y,
    .dt-container table.dataTable,
    .dt-container table.datatable-scroll-y {
        width: max-content !important;
        min-width: 52rem;
        max-width: none !important;
    }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dt-length,
    .dataTables_wrapper .dt-search {
        float: none;
        width: 100%;
        text-align: left;
        margin-bottom: .75rem;
    }

    .dataTables_wrapper .dataTables_filter input,
    .dataTables_wrapper .dt-search input {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        display: block;
    }

    .dataTables_wrapper .dataTables_paginate,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dt-paging,
    .dataTables_wrapper .dt-info {
        float: none;
        width: 100%;
        text-align: left;
        white-space: normal;
    }

    .scrollable-container {
        display: block !important;
        width: 100%;
        max-width: 100%;
        max-height: 60vh;
        margin-left: 0;
        margin-right: 0;
        overflow-x: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-gutter: stable;
        padding-bottom: .65rem;
    }

    .gridTable {
        width: max-content;
        min-width: 56rem;
        table-layout: auto;
    }

    .gridTableth,
    .gridTabletd {
        min-width: 5.5rem;
        padding: .55rem .4rem;
        white-space: normal;
        word-break: normal;
        overflow-wrap: normal;
        vertical-align: middle;
    }

    .gridTable th:first-child,
    .gridTable td:first-child {
        min-width: 2.75rem;
    }

    .gridTable .form-control,
    .gridTable .select2,
    .gridTable .select2-container {
        min-width: 4.75rem;
        width: 100% !important;
    }

    .gridTable .itemDropdown,
    .gridTable #itemDropdown,
    .gridTable td:has(.item-dropdown),
    .gridTable td:has(.item-Dropdown) {
        min-width: 12rem;
    }

    #addRowBtn {
        min-width: 7rem;
        white-space: nowrap;
        text-align: left;
    }

    #findDetailsBtn,
    #toggleRentalOrderDetails {
        width: 100%;
        white-space: normal;
    }

    .navbar-footer .container-fluid {
        flex-wrap: wrap;
        gap: .5rem;
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 575.98px) {
    .tune-login-page {
        min-height: 100dvh;
        padding: 1.25rem 1rem;
        align-items: center;
        justify-content: center;
    }

    .tune-login-shell {
        width: 100%;
        max-width: 24rem;
        margin: 0 auto;
    }

    .tune-login-shell .content {
        padding: 0;
        margin: 0;
    }

    .tune-login-shell .row {
        margin-left: 0;
        margin-right: 0;
    }

    .tune-login-shell .card {
        width: 100%;
        margin: 0;
    }

    .tune-login-logo {
        width: 8.75rem !important;
        height: 8.75rem !important;
    }

    .tune-login-shell .card-body {
        padding: 1.25rem;
    }

    .tune-login-shell .btn {
        min-height: 2.75rem;
    }
}
/* Keep long navigation dropdowns reachable on shorter screens. */
.admin-menu-scroll {
    max-height: calc(100vh - 8rem);
    max-height: min(70vh, 36rem);
    overflow-x: hidden;
    overflow-y: scroll;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-color: #7b8794 #eef1f5;
    scrollbar-width: auto;
    -webkit-overflow-scrolling: touch;
}

.admin-menu-scroll::-webkit-scrollbar {
    width: .55rem;
}

.admin-menu-scroll::-webkit-scrollbar-track {
    background: #eef1f5;
    border-radius: 999px;
}

.admin-menu-scroll::-webkit-scrollbar-thumb {
    background: #7b8794;
    border: 2px solid #eef1f5;
    border-radius: 999px;
}

.admin-menu-scroll::-webkit-scrollbar-thumb:hover {
    background: #56616d;
}

.admin-menu-scroll .admin-dashboard-toggle::after {
    content: "\f31a";
    transition: transform .2s ease;
}

.admin-menu-scroll .admin-dashboard-submenu.show > .admin-dashboard-toggle::after {
    transform: translateY(-50%) rotate(180deg);
}

.admin-menu-scroll .admin-dashboard-menu {
    position: static !important;
    inset: auto !important;
    float: none;
    width: auto;
    min-width: 0;
    margin: .25rem .65rem .5rem !important;
    padding: .35rem;
    border: 0;
    border-left: 3px solid #5b8def;
    border-radius: .35rem;
    background: #f4f7fb;
    box-shadow: none;
    transform: none !important;
}

.admin-menu-scroll .admin-dashboard-menu .dropdown-item {
    padding-left: 1rem;
    font-size: .8125rem;
    white-space: normal;
}

.admin-menu-scroll .admin-dashboard-menu .dropdown-item:hover,
.admin-menu-scroll .admin-dashboard-menu .dropdown-item:focus {
    background: #e4ecf8;
}