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

    body {
        padding-top: calc(3.75rem + env(safe-area-inset-top));
    }

    .top-bar {
        min-height: 3.5rem;
        padding-top: env(safe-area-inset-top);
        padding-right: 0.35rem;
        padding-left: 4.6rem !important;
    }

    .top-bar__left,
    .top-bar__right {
        min-width: 0;
    }

    .top-bar__right {
        flex: 1;
        justify-content: flex-end;
    }

    .top-bar__left .top-bar__item,
    .top-bar__right .top-bar__item {
        margin-left: 0.45rem;
        margin-right: 0;
        max-width: 34vw;
        min-width: 0;
    }

    .top-bar__item .dropdown,
    .top-bar__item .dropdown > a {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .top-bar__avatar-dropdown .dropdown,
    .top-bar__avatar-dropdown .dropdown > a,
    #notifications-dropdown .dropdown,
    #notifications-dropdown .dropdown > a {
        max-width: none;
        overflow: visible;
    }

    .notification-menu,
    .top-bar .dropdown-menu {
        width: min(22rem, calc(100vw - 1rem)) !important;
        max-width: calc(100vw - 1rem);
    }

    .menu-left__lock {
        width: 3.4rem;
        height: 3.5rem;
        padding-top: 1.15rem;
    }

    .menu-left .menu-left__lock {
        right: -3.4rem;
    }

    .utils__content {
        margin-left: 0 !important;
        padding-right: 0.75rem;
        padding-left: 0.75rem;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }

    .utils__top-sidebar .pull-right,
    .card-header .pull-right {
        float: none !important;
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        margin-bottom: 0.6rem;
    }

    .card-header .pull-right .btn,
    .utils__top-sidebar .pull-right .btn,
    .form-actions .btn,
    .login .btn {
        width: 100%;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .breadcrumb {
        float: none;
        display: flex;
        flex-wrap: wrap;
        padding-left: 0;
        margin-bottom: 0.4rem;
    }

    .card-header,
    .card-body,
    .card-footer {
        padding-right: 0.85rem;
        padding-left: 0.85rem;
    }

    .card-body,
    .dataTables_wrapper,
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    table.dataTable {
        min-width: 36rem;
    }

    .dataTables_filter,
    .dataTables_length,
    .dt-buttons {
        float: none !important;
        text-align: left !important;
        width: 100%;
    }

    .dataTables_filter input,
    .dataTables_length select {
        width: 100% !important;
        margin-left: 0 !important;
        max-width: 100%;
    }

    .dt-buttons .btn {
        margin-bottom: 0.35rem;
    }

    input,
    select,
    textarea,
    .form-control,
    .select2-container {
        max-width: 100%;
        font-size: 16px;
    }

    .select2-container {
        width: 100% !important;
    }

    .modal-dialog {
        width: calc(100% - 1rem);
        max-width: calc(100% - 1rem);
        margin: 0.5rem auto;
    }

    #modal-preview-file .modal-dialog {
        width: calc(100% - 0.5rem) !important;
        max-width: calc(100% - 0.5rem) !important;
    }

    #modal-preview-file .modal-body {
        height: 65vh !important;
    }

    .note-toolbar,
    .note-btn-group {
        white-space: normal;
    }

    .login {
        min-height: 100vh;
        min-height: 100dvh;
    }

    .login__block {
        padding: 1.25rem 0.75rem calc(1.25rem + env(safe-area-inset-bottom));
    }

    .login__block__inner {
        min-width: 0;
        width: 100%;
        max-width: 100%;
        padding: 1.4rem 1rem 1rem;
    }

    .login img,
    .login__logo {
        width: 100% !important;
        max-width: 16rem;
        height: auto;
    }

    .code-input {
        letter-spacing: 0.35rem;
        font-size: 1.35rem;
    }

    .wrap-transaction-buttons,
    .card-header .btn-group,
    .form-actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.4rem;
        width: 100%;
    }

    .wrap-transaction-buttons .btn,
    .form-actions .btn,
    .col-lg-2.form-group .btn {
        width: 100%;
        margin: 0 0 0.35rem !important;
    }

    .col-lg-2.form-group {
        padding-top: 0 !important;
    }

    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

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

    .footer-transactions--fixed {
        left: 0.75rem;
        right: 0.75rem;
        width: auto;
    }

    .progressCard-totals {
        flex-direction: column;
        align-items: stretch;
    }

    .progressCard-totals .progressCard {
        min-width: 0;
        width: 100%;
        margin-right: 0;
    }

    .report,
    .fc-view-container,
    .note-editor {
        max-width: 100%;
        overflow-x: auto;
    }

    .report .report__year {
        width: auto;
        flex: 1 1 8rem;
    }

    .excel-classification-select,
    .excel-row-actions,
    .custom-file,
    .dropify-wrapper,
    .apexcharts-canvas,
    .apexcharts-svg {
        min-width: 0;
        max-width: 100%;
        width: 100% !important;
    }

    .select2-dropdown,
    .dropdown-menu {
        max-width: calc(100vw - 1rem);
    }
}