.nav-pills .nav-link {
        transition: all 0.3s ease;
        border: 1px solid transparent;
    }

    .nav-pills .nav-link:hover {
        background-color: rgba(13, 110, 253, 0.1);
        border-color: rgba(13, 110, 253, 0.2);
    }

    .nav-pills .nav-link.active {
        background-color: #ffffff;
        border-color: #0d6efd;
        color: #0d6efd;
    }

    .btn-check:checked + .btn-outline-primary {
        background-color:#0d6efd;
        border-color: #0d6efd;
        color: white;
    }

    .account-section {
        transition: all 0.3s ease;
    }

    .form-control:focus, .js-example-basic-single:focus {
        border-color: #0d6efd;
        box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
    }

    .card {
        border: none;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    }

    .alert {
        border: none;
        border-radius: 0.5rem;
    }

    .badge {
        font-size: 0.75em;
    }

    .spinner-border-sm {
        width: 1rem;
        height: 1rem;
    }

    @media (max-width: 768px) {
        .btn-group .btn {
            font-size: 0.875rem;
            padding: 0.5rem 0.75rem;
        }

        .card-header h4 {
            font-size: 1.1rem;
        }

        .badge {
            font-size: 0.65em;
            margin: 0.1rem;
        }
    }

    .input-group-text {
        background-color: #f8f9fa;
        border-color: #dee2e6;
    }

    .form-text {
        font-size: 0.875em;
    }

    .modal-content {
        border: none;
        border-radius: 0.5rem;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }

    .was-validated .form-control:valid,
    .was-validated .js-example-basic-single:valid {
        border-color: #198754;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='m2.3 6.73.94-.94 1.06 1.06-1.88 1.88L.54 6.84l.94-.94L2.3 6.73z'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right calc(0.375em + 0.1875rem) center;
        background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    }

    .was-validated .form-control:invalid,
    .was-validated .js-example-basic-single:invalid {
        border-color: #dc3545;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.8 4.6 2.4 2.4M8.2 4.6l-2.4 2.4'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right calc(0.375em + 0.1875rem) center;
        background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    }

    .text-primary { color: #0d6efd !important; }
    .text-success { color: #198754 !important; }
    .text-warning { color: #ffc107 !important; }
    .text-muted { color: #6c757d !important; }

    .bg-light { background-color: #f8f9fa !important; }
    .bg-primary { background-color: #0d6efd !important; }
    .bg-warning { background-color: #ffc107 !important; }

    .border-warning { border-color: #ffc107 !important; }
    .border-0 { border: 0 !important; }

    .rounded { border-radius: 0.375rem !important; }
    .rounded-pill { border-radius: 50rem !important; }

    .shadow-sm { box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; }

    .fw-bold { font-weight: 700 !important; }

    .gap-2 { gap: 0.5rem !important; }

    .me-1 { margin-right: 0.25rem !important; }
    .me-2 { margin-right: 0.5rem !important; }
    .me-3 { margin-right: 1rem !important; }
    .ms-2 { margin-left: 0.5rem !important; }
    .mb-0 { margin-bottom: 0 !important; }
    .mb-3 { margin-bottom: 1rem !important; }
    .mb-4 { margin-bottom: 1.5rem !important; }
    .mt-4 { margin-top: 1.5rem !important; }

    .p-0 { padding: 0 !important; }
    .p-1 { padding: 0.25rem !important; }
    .p-3 { padding: 1rem !important; }
    .p-4 { padding: 1.5rem !important; }
    .px-3 { padding-right: 1rem !important; padding-left: 1rem !important; }
    .px-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
    .py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
    .pt-3 { padding-top: 1rem !important; }

    .d-none { display: none !important; }
    .d-grid { display: grid !important; }
    .d-inline-flex { display: inline-flex !important; }

    .w-100 { width: 100% !important; }

    .text-center { text-align: center !important; }

    .justify-content-between { justify-content: space-between !important; }
    .align-items-center { align-items: center !important; }


/* top_ups_index */
        .avatar-xs {
            width: 2rem;
            height: 2rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .avatar-sm {
            width: 3rem;
            height: 3rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .bg-soft-primary {
            background-color: rgba(13, 110, 253, 0.1);
        }

        .btn-ghost-secondary {
            color: #6c757d;
            border: none;
            background: transparent;
        }

        .btn-ghost-secondary:hover {
            color: #495057;
            background-color: rgba(108, 117, 125, 0.1);
        }

        .table-hover tbody tr:hover {
            background-color: rgba(0, 0, 0, 0.025);
        }

        .dropdown-toggle::after {
            display: none;
        }

        .breadcrumb-item + .breadcrumb-item::before {
            content: ">";
        }

        .text-truncate {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .vr {
            width: 1px;
            background-color: rgba(255, 255, 255, 0.3);
            opacity: 1;
        }

        @media (max-width: 768px) {
            .card-header .row > .col-auto {
                margin-top: 1rem;
            }

            #bulkActionsBar {
                left: 1rem;
                right: 1rem;
                transform: none;
            }
        }