img, video, canvas, iframe {
    max-width: 100%;
}

img {
    height: auto;
}

#map, .leaflet-container {
    max-width: 100%;
}

@media (max-width: 1169px) {
    body {
        overflow-x: hidden;
    }

    .top-title-section {
        flex-wrap: wrap !important;
        row-gap: 10px;
        column-gap: 10px;
    }

    .card-header .d-flex {
        flex-wrap: wrap;
        row-gap: 8px;
        column-gap: 8px;
    }

    .page-titles {
        flex-wrap: wrap;
        row-gap: 4px;
    }
}

@media (min-width: 1024px) {
    html[dir="rtl"] .page-wrapper {
        padding-left: 0;
        padding-right: 265px;
    }
}

@media (max-width: 1199px) {
    [class*="col-xl-"]:not([class*="col-lg-"]):not([class*="col-md-"]):not([class*="col-sm-"]) {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 991px) {
    [class*="col-lg-"]:not([class*="col-md-"]):not([class*="col-sm-"]) {
        flex: 0 0 100%;
        max-width: 100%;
    }

    [class*="col-xl-"]:not([class*="col-md-"]):not([class*="col-sm-"]) {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    [class*="col-md-"]:not([class*="col-sm-"]) {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 575px) {
    [class*="col-sm-"], [class*="col-md-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 1023px) {
    html[dir="rtl"] .page-wrapper {
        margin-left: 0;
        margin-right: 60px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    body:not(.mini-sidebar) .page-wrapper {
        margin-left: 265px;
    }

    body:not(.mini-sidebar) .footer {
        left: 265px;
    }

    html[dir="rtl"] .page-wrapper {
        margin-left: 0;
        margin-right: 265px;
    }
}

@media (max-width: 767px) {
    .page-wrapper {
        padding-top: 60px !important;
    }

    body:not(.mini-sidebar) .page-wrapper {
        margin-left: 0;
        margin-right: 0;
    }

    html[dir="rtl"] .page-wrapper {
        margin-right: 0;
    }

    .container-fluid {
        padding: 0 15px 20px;
    }

    .left-sidebar {
        height: 100vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mini-sidebar .left-sidebar, .mini-sidebar .sidebar-footer {
        transition: left .25s ease, right .25s ease;
    }

    html[dir="rtl"] .mini-sidebar .left-sidebar, html[dir="rtl"] .mini-sidebar .sidebar-footer {
        left: auto;
        right: -265px;
        transition: right .25s ease;
    }

    html[dir="rtl"] .mini-sidebar.show-sidebar .left-sidebar, html[dir="rtl"] .mini-sidebar.show-sidebar .sidebar-footer {
        left: auto;
        right: 0;
        transition: right .25s ease;
    }

    .sidebar-backdrop {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, .45);
        z-index: 15;
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s ease, visibility .25s ease;
        -webkit-tap-highlight-color: transparent;
    }

    body.show-sidebar .sidebar-backdrop {
        opacity: 1;
        visibility: visible;
    }

    body.show-sidebar {
        overflow: hidden;
    }

    .topbar .top-navbar {
        padding: 0 10px;
        flex-wrap: nowrap;
        align-items: center;
    }

    .topbar .top-navbar .navbar-header {
        height: auto;
        line-height: normal;
        padding: 7px 0;
        flex: 0 0 auto;
        width: auto;
        min-width: 0;
    }

    .topbar .top-navbar .navbar-collapse {
        width: auto !important;
        flex: 1 1 auto;
        min-width: 0;
        justify-content: flex-end;
        flex-wrap: nowrap;
    }

    .topbar .top-navbar .navbar-nav {
        flex-wrap: nowrap;
    }

    .topbar .top-navbar .navbar-nav .nav-link {
        padding: 8px 7px;
        line-height: 1.3;
    }

    .topbar .nav-item-user {
        display: none !important;
    }

    .topbar .language-list {
        margin-left: 4px !important;
        margin-right: 4px !important;
    }

    .page-titles {
        flex-wrap: wrap;
        row-gap: 4px;
        padding: 12px 15px;
        margin-bottom: 10px;
    }

    .page-titles .breadcrumb {
        float: none;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .card {
        margin-bottom: 14px;
    }

    .card-header {
        padding: 12px 14px;
    }

    .card-body {
        padding: 14px;
    }

    .card-header .d-flex {
        flex-wrap: wrap;
        row-gap: 8px;
        column-gap: 8px;
    }

    .card-header .card-header-title {
        min-width: 0;
        flex: 1 1 auto;
    }

    .card-header .card-header-right {
        width: 100%;
        flex-wrap: wrap;
        row-gap: 8px;
        column-gap: 8px;
        justify-content: flex-start !important;
    }

    .card-header .card-header-right .btn, .card-header .card-header-right .card-header-btn {
        flex: 1 1 auto;
    }

    .card-header .d-flex, .top-title-section .d-flex, .form-group.row .d-flex {
        flex-wrap: wrap;
        row-gap: 6px;
        column-gap: 6px;
    }

    .card-header .d-flex > .form-control, .form-group.row .d-flex > .form-control {
        flex: 1 1 auto;
        max-width: 100%;
        min-width: 0;
    }

    .top-title-section {
        flex-wrap: wrap !important;
        row-gap: 10px;
        column-gap: 10px;
    }

    .top-title-section .top-title-left {
        width: 100%;
        min-width: 0;
    }

    .top-title-section .top-title-right {
        width: 100%;
        flex-wrap: wrap;
        row-gap: 8px;
        column-gap: 8px;
        justify-content: flex-start !important;
    }

    .top-title-section .top-title-right .select-box {
        flex: 1 1 100%;
    }

    .select-box {
        width: 100%;
        max-width: 100%;
    }

    .select-box .select2-container {
        width: 100% !important;
        min-width: 0;
    }

    .select2-container--open .select2-dropdown {
        max-width: calc(100vw - 30px);
    }

    .btn {
        white-space: normal;
        padding-top: .6rem !important;
        padding-bottom: .6rem !important;
    }

    .btn-sm {
        padding-top: .5rem !important;
        padding-bottom: .5rem !important;
    }

    .modal-header .close {
        padding: 8px;
    }

    .btn-group > .btn, .btn-group > .dropdown-toggle {
        white-space: nowrap;
    }

    .menu-tab ul {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .menu-tab ul > li {
        flex: 0 0 auto;
    }

    .card-header-tab ul.nav-tab {
        flex-wrap: wrap;
        row-gap: 6px;
    }

    .form-group.row.width-50 {
        width: 100%;
    }

    .order_edit-genrl .form-group.row.widt-50 {
        width: 100%;
    }

    .form-group.row > [class*="col-"] {
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .row.restaurant_payout_create {
        max-width: 100%;
        display: block;
    }

    .restaurant_payout_create-inner fieldset legend, .vendor_payout_create-inner fieldset legend {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: break-word;
    }

    .order_edit-genrl .form-group.row.gendetail-col .control-label > strong {
        width: 100%;
        float: none;
        display: block;
        padding-right: 0;
        border-bottom: 0;
    }

    .order_edit-genrl .form-group.row.gendetail-col .control-label > span {
        margin-left: 0;
        margin-right: 0;
        padding-bottom: 10px;
        border-bottom: 2px dashed #e9e9e9;
    }

    .switch-box .switch {
        float: none;
        margin-inline-start: 15px;
    }

    .btm-btn.form-group {
        text-align: center;
    }

    .error_top, .success_top {
        width: 100%;
        max-width: 100%;
    }

    .dropdown-menu {
        max-width: calc(100vw - 20px);
        overflow-y: auto;
    }

    .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }

    .page-item {
        margin: 2px;
    }

    .daterangepicker {
        width: 278px;
        max-width: calc(100vw - 16px);
        left: 8px !important;
        right: auto;
    }

    html[dir="rtl"] .daterangepicker {
        left: auto !important;
        right: 8px;
    }

    .daterangepicker .ranges {
        float: none !important;
        width: 100% !important;
        padding: 0 0 8px;
    }

    .daterangepicker .ranges ul {
        width: 100% !important;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .daterangepicker .ranges li {
        padding: 6px 12px;
    }

    .daterangepicker .drp-calendar {
        float: none !important;
        clear: none !important;
        width: auto !important;
        max-width: 100%;
    }

    .daterangepicker .drp-calendar.right {
        display: none !important;
    }

    .daterangepicker .drp-input {
        max-width: 100%;
    }

    .daterangepicker .drp-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        justify-content: flex-end;
        padding-top: 8px;
    }

    .daterangepicker .drp-buttons .btn {
        flex: 1 1 auto;
        min-width: 90px;
    }

    .modal-dialog {
        margin: 8px auto;
        max-width: calc(100vw - 16px);
    }

    .modal-content {
        max-height: calc(100vh - 16px);
        display: flex;
        flex-direction: column;
    }

    .modal-header, .modal-footer {
        flex-shrink: 0;
        flex-wrap: wrap;
        gap: 6px;
    }

    .modal-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .select2-container .select2-dropdown {
        z-index: 3010;
    }

    .note-dropdown-menu {
        min-width: 0 !important;
        max-width: calc(100vw - 24px) !important;
        overflow-x: auto;
    }

    .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate, .dataTables_wrapper .dt-buttons {
        float: none !important;
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
        text-align: start;
    }
}

@media (max-width: 575px) {
    img#logo_web {
        max-width: 80px;
    }

    .topbar .language-list .language-select {
        display: none;
    }

    .topbar .language-list .language-options select {
        max-width: 84px;
        height: 30px;
        padding: 4px 4px;
        font-size: 12px;
        color: #fff !important;
        background: rgba(255, 255, 255, .12);
        border: 1px solid rgba(255, 255, 255, .3);
        border-radius: 6px;
    }

    .topbar .top-navbar .navbar-nav .nav-link {
        padding: 8px 5px;
    }

    .page-titles {
        padding: 10px 15px;
    }

    .page-titles .breadcrumb-item {
        padding-left: .4rem;
        padding-right: .4rem;
    }

    .card-body, .card-header {
        padding: 12px;
    }

    .btn {
        padding-left: 10px;
        padding-right: 10px;
    }

    .daterangepicker {
        width: calc(100vw - 16px);
    }

    .modal-dialog {
        margin: 6px auto;
        max-width: calc(100vw - 12px);
    }
}

@media (max-width: 767px) {
    .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter {
        margin-top: 6px;
        margin-bottom: 6px;
    }

    .dataTables_wrapper .dataTables_length label {
        display: block;
        width: 100%;
        margin-bottom: 0;
    }

    .dataTables_wrapper .dataTables_length select {
        display: block;
        width: 100% !important;
        max-width: 100%;
        margin-top: 4px;
    }

    .dataTables_wrapper .dataTables_filter label {
        display: block;
        width: 100%;
        margin-bottom: 0;
        text-align: start;
    }

    .dataTables_wrapper .dataTables_filter input {
        display: block;
        width: 100% !important;
        max-width: 100%;
        margin-left: 0 !important;
        margin-top: 4px;
    }

    .dataTables_wrapper .dataTables_info {
        padding-top: 10px;
        text-align: start !important;
    }

    .dataTables_wrapper .dataTables_paginate {
        padding-top: 8px;
        text-align: center !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        display: inline-block;
        margin: 2px !important;
        padding: 8px 10px !important;
        white-space: nowrap;
    }

    .dataTables_wrapper .dt-buttons {
        margin-bottom: 6px;
    }

    .dataTables_wrapper .dt-buttons .btn {
        margin: 2px 4px 2px 0;
    }

    div.dt-button-collection {
        position: fixed !important;
        top: 50% !important;
        right: auto !important;
        left: 50% !important;
        transform: translate(-50%, -50%);
        width: min(320px, calc(100vw - 32px)) !important;
        max-height: 70vh;
        overflow-y: auto;
        padding: 12px;
    }

    div.dt-button-collection .dt-button {
        display: block;
        width: 100%;
        text-align: start;
        margin: 4px 0;
        white-space: normal;
    }

    .table-responsive {
        -webkit-overflow-scrolling: touch;
        margin-bottom: 14px;
    }
}