/* ===== mobile ===== */

    @media (max-width: 1199px) {
        .account-filter-grid.account-filter-grid-4 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 991px) {
        .account-balance-card,
        .account-nav-card,
        .account-content-card {
            border-radius: .875rem;
        }

        .account-page-title,
        .deposit-page-title {
            font-size: 1.75rem;
        }

        .account-filter-grid,
        .account-filter-grid.account-filter-grid-3,
        .account-filter-grid.account-filter-grid-4 {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 767px) {
        .account-page-shell {
            padding-top: 1.125rem;
            padding-bottom: 1.625rem;
        }

        .account-page-head {
            margin-bottom: .875rem;
        }

        .account-page-title,
        .deposit-page-title {
            font-size: 1.5rem;
            line-height: 1.1;
            margin-bottom: .25rem;
        }

        .account-page-subtitle,
        .deposit-page-subtitle {
            font-size: .8125rem;
            margin-bottom: 0;
            opacity: .74;
        }

        .account-balance-card,
        .account-nav-card {
            padding: .875rem;
            border-radius: .875rem;
        }

        .account-content-card {
            padding: .75rem;
            border-radius: .75rem;
            min-height: 0;
        }

        .account-filter-card,
        .account-table-card {
            padding: 0 !important;
            border-radius: 0 !important;
            background: transparent !important;
            border: 0 !important;
            box-shadow: none !important;
            margin-bottom: .875rem !important;
        }

        .account-section-title,
        .account-balance-title {
            font-size: 1.125rem;
        }

        .account-nav-item {
            font-size: .875rem;
            padding: .6875rem .75rem;
        }

        .account-field {
            background: rgba(255,255,255,.04);
            border: 1px solid rgba(255,255,255,.08);
            border-radius: .75rem;
            padding: .75rem;
        }

        .account-date-grid,
        .deposit-methods-grid,
        .account-filter-grid.account-filter-grid-2 {
            grid-template-columns: 1fr;
            gap: .625rem;
        }

        .account-filter-grid {
            gap: .75rem;
        }

        .account-filter-actions {
            flex-direction: column;
            margin-top: .75rem;
            gap: .625rem;
        }

        .account-btn,
        .deposit-method-btn,
        .withdraw-method-btn {
            width: 100%;
            min-width: 0;
            height: 2.75rem;
            font-size: .875rem;
            border-radius: .75rem;
        }

        .account-input,
        .account-select {
            height: 2.75rem;
            font-size: .875rem;
            border-radius: .75rem;
        }

        .account-table-wrap,
        .account-internal-page > .account-table-card .account-table-wrap {
            background: transparent !important;
            border: 0 !important;
            border-radius: 0 !important;
            padding: 0 !important;
            box-shadow: none !important;
        }

        .account-datatable thead th,
        .account-datatable tbody td {
            padding: .75rem .625rem;
            font-size: .8125rem;
        }

        .account-status-badge {
            min-width: 4.75rem;
            font-size: .6875rem;
            padding: .375rem .625rem;
        }

        .deposit-method-card {
            flex-direction: column;
            align-items: stretch;
            text-align: center;
            min-height: 0;
            padding: 1rem;
        }

        .deposit-method-logo,
        .withdraw-method-logo {
            margin: 0 auto;
        }

        .account-table-card .dataTables_wrapper > .row:last-child {
            display: grid !important;
            grid-template-columns: auto 1fr !important;
            align-items: center !important;
            gap: .75rem !important;
            margin-top: .75rem !important;
        }

        .account-table-card .dataTables_wrapper > .row:last-child > div {
            width: auto !important;
            max-width: none !important;
            flex: none !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        .account-table-card .dataTables_wrapper .dataTables_info {
            display: none !important;
        }

        .account-table-card .dataTables_wrapper .dataTables_length {
            margin: 0 !important;
            text-align: left !important;
            padding-right: .5rem !important;
        }

        .account-table-card .dataTables_wrapper .dataTables_length label {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: flex-start !important;
            gap: .5rem !important;
            width: auto !important;
            margin: 0 !important;
            white-space: nowrap !important;
            font-size: .75rem !important;
        }

        .account-table-card .dataTables_wrapper .dataTables_length select {
            min-width: 3.5rem !important;
            width: 3.5rem !important;
            height: 2.375rem !important;
            padding: 0 .5rem !important;
            margin: 0 !important;
            text-align: center !important;
        }

        .account-table-card .dataTables_wrapper .dataTables_paginate {
            margin: 0 !important;
            text-align: right !important;
            justify-self: end !important;
            padding-left: .5rem !important;
        }

        .account-table-card .dataTables_wrapper .dataTables_paginate .pagination {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: flex-end !important;
            flex-wrap: nowrap !important;
            gap: .375rem !important;
            margin: 0 !important;
            white-space: nowrap !important;
        }

        .account-table-card .dataTables_wrapper .dataTables_paginate .pagination .page-item {
            flex: 0 0 auto !important;
        }

        .account-table-card .dataTables_wrapper .dataTables_paginate .pagination .page-link {
            min-width: 2.375rem !important;
            width: 2.375rem !important;
            height: 2.375rem !important;
            padding: 0 !important;
            border-radius: .625rem !important;
            font-size: .8125rem !important;
        }

        .dataTables_wrapper .child .dtr-details > li .dtr-title {
            width: 32%;
            min-width: 4.875rem;
            padding: .6rem .75rem .6rem 0 !important;
            font-size: .6875rem !important;
        }

        .dataTables_wrapper .child .dtr-details > li .dtr-data {
            padding: .6rem 0 !important;
            font-size: .8125rem !important;
        }

        table.dataTable > tbody > tr.child > td.child {
            padding: .5rem .75rem !important;
        }

        #messageModal .modal-header {
            padding: 1rem 1rem .875rem;
        }

        #messageModal .modal-title {
            font-size: 1.25rem;
        }

        #messageModal .modal-body {
            padding: 1rem;
        }

        #messageModal .modal-footer {
            padding: .875rem 1rem;
        }

        .account-message-hero,
        .account-message-body-card {
            padding: 1rem;
            border-radius: .875rem;
        }

        .account-message-subject {
            font-size: 1.5rem;
        }

        .account-message-richtext {
            font-size: .875rem;
            line-height: 1.65;
        }

        #modalCoupon .modal-dialog.modal-coupon-dialog {
            max-width: calc(100% - 1rem);
            margin: .5rem auto;
        }

        #modalCoupon .coupon-paper-frame {
            height: 72vh;
            min-height: 26.25rem;
        }

        #modalCoupon .coupon-paper-iframe {
            border-radius: .875rem;
        }

        #modalCoupon .modal-coupon-close.close,
        #modalCoupon .modal-coupon-close {
            width: 2.5rem;
            height: 2.5rem;
        }

        #modalCoupon .modal-footer.modal-coupon-footer {
            gap: .625rem;
        }

        #modalCoupon .modal-coupon-btn {
            min-width: 6.875rem;
            height: 2.625rem;
            font-size: .875rem;
            border-radius: .75rem;
        }

        .datepicker-days table tr th,
        .datepicker-days table tr td {
            width: calc((100vw - 3rem) / 7) !important;
            height: calc((100vw - 3rem) / 7) !important;
            min-width: 3rem !important;
            min-height: 3rem !important;
            line-height: calc((100vw - 3rem) / 7) !important;
            font-size: 1rem !important;
        }

        .datepicker .datepicker-months span,
        .datepicker .datepicker-years span,
        .datepicker .datepicker-decades span,
        .datepicker .datepicker-centuries span {
            height: 3rem !important;
            line-height: 3rem !important;
            font-size: .95rem !important;
        }

        .datepicker,
        .datepicker.datepicker-dropdown,
        .datepicker.dropdown-menu {
            width: calc(100vw - 1rem) !important;
            min-width: calc(100vw - 1rem) !important;
            max-width: calc(100vw - 1rem) !important;
            left: .5rem !important;
            right: auto !important;
            padding: .875rem !important;
        }

        .datepicker table {
            width: 100% !important;
            table-layout: fixed !important;
        }

        .datepicker .datepicker-switch,
        .datepicker .prev,
        .datepicker .next {
            height: 3rem !important;
            line-height: 3rem !important;
            font-size: 1rem !important;
        }

        #bonusWagerModalBar {
            padding: .4375rem .5625rem .5rem;
        }

        #bonusWagerModalBar .bwm-title {
            font-size: .625rem;
            max-width: 68%;
        }

        #bonusWagerModalBar .bwm-percent {
            font-size: .8125rem;
        }

        #bonusWagerModalBar .bwm-values {
            font-size: .5625rem;
        }
    }