/*Common colors*/

.green-backgound {
    background: #0A8754 !important;
}

.primary-backgound {
    background: #3B82F6 !important;
}

.purple-backgound {
    background: #A855F7 !important;
}

.orange-backgound {
    background: #F97316 !important;
}

.light-green-backgound {
    background: #00ff5826;
}

.light-primary-backgound {
    background: #3B82F61A;
}

.light-purple-backgound {
    background: #A855F71A;
}

.light-orange-backgound {
    background: #0061ff1f;
}


/*=======================================
    Login Page
 ========================================*/

.login-page {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    width: 70%;
    height: auto;
    margin: 40px auto;
    font-family: 'Poppins', sans-serif;
    box-shadow: 0 4px 25px rgba(0,0,0,0.1);
}

.account-common-bg {
    background-image: url('../image/acoount/common-bg.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.login-main-back {
    background: linear-gradient(135deg, #f5f7ff, #ffffff) !important;
}

.login-logo {
    position: absolute;
    top: -30px;
    left: -8px;
}

.login-page .left-panel {
    padding: 60px;
}

    .login-page .left-panel h2 {
        font-size: 32px;
        font-weight: 600;
    }

.login-page .form-control {
    padding: 12px;
    border-radius: 10px;
}

.login-page .form-label {
    color: #9794AA;
    font-weight: 500;
}

.login-page .password-icon {
    position: absolute;
    right: 15px;
    bottom: 12px;
}

.login-page .btn-register {
    background: #5d5dff !important;
    border-color: #5d5dff !important;
    padding: 12px;
    border-radius: 8px;
}

    .login-page .btn-register:hover {
        background: #6a51e8;
    }

.login-page .divider {
    text-align: center;
    margin: 20px 0;
    color: #777;
    position: relative;
}

    .login-page .divider::before, .divider::after {
        content: "";
        height: 1px;
        width: 40%;
        background: #ccc;
        position: absolute;
        top: 50%;
    }

    .login-page .divider::before {
        left: 0;
    }

    .login-page .divider::after {
        right: 0;
    }

/* RIGHT PANEL */
.login-page .right-panel {
    background: linear-gradient(180deg, #6C3BFF, #883BFF, #5C2DFF);
    color: white;
    padding: 60px;
    display: flex;
    gap: 80px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    background-image: url('../image/acoount/login-right-back.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.login-page .right-box {
    background: rgba(255, 255, 255, 0.2);
    padding: 40px;
    border-radius: 20px;
    max-width: 450px;
}


    .login-page .right-box h1 {
        font-size: 32px;
        font-weight: 700;
    }

.login-page .text-lights {
    color: #FCFCFC;
    font-size: 18px;
    font-weight: 500;
}

.login-bg-btn {
    background: #5d5dff !important;
    border-color: #5d5dff !important;
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    height: 50px !important;
}

.forgot-password-login {
    color: #5d5dff !important;
}


/*================================
    Pop-Up After Click Login Button
==================================*/

.login-page .popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999;
}

.login-page .verify-your-account {
    position: absolute;
    width: 448px;
    min-height: 100px;
    left: 50%;
    top: 50%;
    background: #FFFFFF;
    box-shadow: 0px 25px 50px rgba(0, 0, 0, 0.25);
    border-radius: 16px;
    padding: 32px;
    text-align: center;
    font-family: 'Inter', sans-serif;
    transform: translate(-50%, -50%);
}


/* Close */
.login-page .close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    border: none;
    background: transparent;
    font-size: 20px;
    color: #9CA3AF;
}

/* Icon */
.login-page .icon-wrapper {
    width: 64px;
    height: 64px;
    background: #DBEAFE;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}

    .login-page .icon-wrapper i {
        font-size: 32px;
        color: #2563EB;
    }

/* Text */
.login-page .verify-your-account h2 {
    font-size: 24px;
    font-weight: 700;
    color: #1F2937;
    margin-bottom: 12px;
}

.login-page .subtitle {
    font-size: 14px;
    color: #4B5563;
    font-weight: 400;
    margin-bottom: 24px;
}

    .login-page .subtitle .phone {
        color: #2563EB;
        display: block;
        margin-top: 4px;
    }

/* OTP */
.login-page .otp-section label {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    display: block;
    text-align: left;
    margin-bottom: 12px;
}

.login-page .otp-inputs {
    display: flex;
    gap: 12px;
    justify-content: center;
}

    .login-page .otp-inputs input {
        width: 48px;
        height: 48px;
        border: 2px solid #D1D5DB;
        border-radius: 8px;
        font-size: 18px;
        text-align: center;
    }

/* Resend */
.login-page .resend {
    margin-top: 20px;
    font-size: 14px;
    color: #4B5563;
    font-weight: 400;
}

    .login-page .resend p {
        margin-bottom: 4px;
        color: #374151;
    }

    .login-page .resend span {
        color: #9CA3AF;
    }

/* Button */
.login-page .verify-btn {
    width: 100%;
    height: 56px;
    margin-top: 24px;
    background: #D1D5DB;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    color: #FFFFFF;
    cursor: not-allowed;
}

/* Divider */
.login-page hr {
    margin: 20px 0;
    height: 2px;
    border-color: #E5E7EB;
    opacity: 35;
}

/* Help */
.login-page .help .having-trouble {
    color: #6B7280;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 400;
}

.login-page .help .send-code {
    color: #2563EB;
    font-size: 12px;
    text-decoration: none;
    font-weight: 500;
}

.back-arrow {
    position: absolute;
    top: 15px;
    left: 15px;
    background: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #333;
}

/*==============login end===================*/

/*=======================================
 Forgot Password Page
 ========================================*/

/* Main Container */
.forgot-password-container {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 25px rgba(0,0,0,0.1);
    font-family: 'Poppins', sans-serif;
    border-radius: 20px;
    overflow: hidden;
    width: 80%;
    height: auto;
    margin: 40px auto;
    position: relative;
}

    /* --- Left Side (Forgot Password Form) --- */
    .forgot-password-container .password-form {
        padding: 50px 40px;
    }

    .forgot-password-container .logo-placeholder {
        margin-bottom: 45px;
    }

    .forgot-password-container .back-link {
        font-size: 16px;
        color: #495057;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        margin-bottom: 10px;
        font-weight: 500;
    }

    .forgot-password-container h2 {
        font-size: 32px;
        font-weight: 700;
        margin-bottom: 10px;
        color: #212529;
    }

    .forgot-password-container .instruction-text {
        font-size: 16px;
        color: #6c757d;
        margin-bottom: 25px;
    }

    .forgot-password-container .form-label {
        font-size: 16px;
        color: #9794AA;
        font-weight: 500;
        margin-bottom: 5px;
    }

    .forgot-password-container .form-control {
        height: 50px;
        border-radius: 8px;
        font-size: 16px;
        border-color: #ced4da;
    }

    .forgot-password-container .btn-submit {
        background-color: #5d5dff;
        border-color: #5d5dff;
        color: #fff;
        font-size: 18px;
        font-weight: 600;
        height: 50px;
        border-radius: 8px;
        margin-top: 10px;
        width: 100%;
    }

    .forgot-password-container .separator {
        display: flex;
        align-items: center;
        text-align: center;
        margin: 30px 0;
    }

        .forgot-password-container .separator::before,
        .forgot-password-container .separator::after {
            content: '';
            flex: 1;
            border-bottom: 1px solid #dee2e6;
        }

        .forgot-password-container .separator:not(:empty)::before {
            margin-right: .5em;
        }

        .forgot-password-container .separator:not(:empty)::after {
            margin-left: .5em;
        }

    .forgot-password-container .social-btn {
        height: 45px;
        border-radius: 8px;
        border: 1px solid #515DEF;
        background-color: #fff;
        color: #495057;
        font-size: 1.25rem; /* Icon size */
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .forgot-password-container .social-btn:hover {
            background-color: #f2f2f2;
        }

        .forgot-password-container .social-btn.facebook i {
            color: #4267B2;
        }

        .forgot-password-container .social-btn.google i {
            color: #DB4437;
        }

        .forgot-password-container .social-btn.apple i {
            color: #000000;
        }


    /* --- Right Side --- */

    .forgot-password-container .right-panel {
        background: linear-gradient(180deg, #6C3BFF, #883BFF, #5C2DFF);
        color: white;
        padding: 60px;
        display: flex;
        gap: 80px;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: relative;
        background-image: url(../image/acoount/login-right-back.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    .forgot-password-container .right-box {
        background: rgba(255, 255, 255, 0.2);
        padding: 40px;
        border-radius: 20px;
        max-width: 450px;
    }

    .forgot-password-container .text-lights {
        color: #FCFCFC;
        font-size: 18px;
        font-weight: 500;
    }

    .forgot-password-container .right-box h1 {
        font-size: 32px;
        font-weight: 700;
    }

/*=======================================
 Verify Code Page
 ========================================*/

.verify-code {
    max-width: 80%;
    width: 100%;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 25px rgba(0,0,0,0.1);
    margin: 0;
}

    /* --- Left Side (Verification Form) --- */
    .verify-code .verification-form {
        padding: 50px 40px;
        padding-bottom: 80px;
    }

    .verify-code .logo-placeholder {
        margin-bottom: 70px;
    }

    .verify-code .back-link {
        font-size: 16px;
        color: #495057;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        margin-bottom: 20px;
        font-weight: 500;
    }

    .verify-code h2 {
        font-size: 40px;
        font-weight: 700;
        margin-bottom: 10px;
        color: #212529;
    }

    .verify-code .instruction-text {
        font-size: 16px;
        color: #6c757d;
        margin-bottom: 30px;
    }

    .verify-code .form-label {
        font-size: 14px;
        color: #6c757d;
        margin-bottom: 5px;
    }

    .verify-code .input-group input {
        height: 50px;
        border-radius: 8px;
        font-size: 18px;
        font-weight: 600;
        border-color: #ced4da;
        padding: 0.375rem 1rem;
    }

    .verify-code .input-group .btn-icon:focus {
        box-shadow: none;
    }

    .verify-code .input-group .btn-icon {
        border: 1px solid #ced4da;
        border-left: none;
        background-color: #fff;
        color: #adb5bd;
        padding: 0 15px;
        border-radius: 0 8px 8px 0;
        font-size: 1rem;
        height: 50px;
        display: flex;
        align-items: center;
    }

    .verify-code .resend-link {
        font-size: 14px;
        margin-top: 10px;
    }

        .verify-code .resend-link a {
            color: #dc3545;
            font-weight: 600;
            text-decoration: none;
        }

    .verify-code .btn-verify {
        background-color: #5d5dff;
        border-color: #5d5dff;
        color: #fff;
        font-size: 18px;
        font-weight: 600;
        height: 50px;
        border-radius: 8px;
        margin-top: 25px;
        width: 100%;
    }

    /* --- Right Side () --- */

    .verify-code .right-panel {
        background: linear-gradient(180deg, #6C3BFF, #883BFF, #5C2DFF);
        color: white;
        padding: 60px;
        display: flex;
        gap: 80px;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: relative;
        background-image: url(../image/acoount/login-right-back.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    .verify-code .right-box {
        background: rgba(255, 255, 255, 0.2);
        padding: 40px;
        border-radius: 20px;
        max-width: 450px;
    }

    .verify-code .text-lights {
        color: #FCFCFC;
        font-size: 18px;
        font-weight: 500;
    }

    .verify-code .right-box h1 {
        font-size: 32px;
        font-weight: 700;
    }

/*=======================================
 Set a New Password Page
 ========================================*/

.set-new-password {
    max-width: 80%;
    width: 100%;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 25px rgba(0,0,0,0.1);
    margin: 0;
}

    /* --- Left Side (Password Form) --- */
    .set-new-password .password-form {
        padding: 50px 40px;
    }

    .set-new-password .logo-placeholder {
        margin-bottom: 50px;
        border-radius: 4px;
    }

    .set-new-password h2 {
        font-size: 32px;
        font-weight: 700;
        margin-bottom: 10px;
        color: #212529;
    }

    .set-new-password .main-title {
        margin-bottom: 10px;
    }

    .set-new-password .instruction-text {
        font-size: 16px;
        color: #6c757d;
        margin-bottom: 40px;
    }

    .set-new-password .form-label {
        font-size: 14px;
        color: #6c757d;
        margin-bottom: 5px;
    }

    .set-new-password .input-group input {
        height: 50px;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        border-color: #ced4da;
        padding: 0.375rem 1rem;
    }

    .set-new-password .input-group .btn-icon:focus {
        box-shadow: none;
    }

    .set-new-password .input-group .btn-icon {
        border: 1px solid #ced4da;
        border-left: none;
        background-color: #fff;
        color: #adb5bd;
        padding: 0 15px;
        border-radius: 0 8px 8px 0;
        font-size: 1rem;
        height: 50px;
        display: flex;
        align-items: center;
    }

    .set-new-password .btn-submit {
        background-color: #5d5dff;
        border-color: #5d5dff;
        color: #fff;
        font-size: 18px;
        font-weight: 600;
        height: 50px;
        border-radius: 8px;
        margin-top: 15px;
        width: 100%;
    }

    /* --- Right Side --- */
    .set-new-password .right-panel {
        background: linear-gradient(180deg, #6C3BFF, #883BFF, #5C2DFF);
        color: white;
        padding: 60px;
        display: flex;
        gap: 80px;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: relative;
        background-image: url(../image/acoount/login-right-back.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    .set-new-password .right-box {
        background: rgba(255, 255, 255, 0.2);
        padding: 40px;
        border-radius: 20px;
        max-width: 450px;
    }

    .set-new-password .text-lights {
        color: #FCFCFC;
        font-size: 18px;
        font-weight: 500;
    }

    .set-new-password .bottom--text {
        margin-right: 115px;
        margin-top: 80px;
    }

    .set-new-password .right-box h1 {
        font-size: 32px;
        font-weight: 700;
    }


/*=======================================
 Admin Layout Page
 ========================================*/

/* ==================== TOPBAR ===================== */

.admin-layout-page .topbar {
    position: fixed;
    top: 0;
    left: 0;
    height: 80px;
    width: 100%;
    background: #ffffff;
    padding: 0 40px;
    border-bottom: 1px solid #eee;
    z-index: 1000;
}

.admin-layout-page .logo-box {
    width: 100%;
    height:40px;
}

.admin-layout-page .user-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.admin-layout-page .user-name {
    font-size: 14px;
    font-weight: 600;
    color: #0D1A3A;
    margin: 0;
}

.admin-layout-page .user-id {
    font-size: 12px;
    color: #6B7280;
    font-weight: 400;
    margin-top: -2px;
}

.admin-layout-page .dashboard-title {
    font-size: 26px;
    font-weight: 600;
    color: #343C6A;
}

.admin-layout-page .toggle-btn {
    font-size: 32px;
    cursor: pointer;
    padding-right: 20px;
}

.admin-layout-page .wallet-balance-topbar {
    background: linear-gradient(135deg, #0A8754, #009e17);
    padding: 8px 16px;
    border-radius: 999px;
    font-weight: 700;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #E5E7EB;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transition: all 0.25s ease;
}

    .admin-layout-page .wallet-balance-topbar:hover {
        background: linear-gradient(135deg, #16563b, #17b32e);
        box-shadow: 0 6px 18px rgba(37, 99, 235, 0.18);
        transform: translateY(-1px);
    }

    .admin-layout-page .wallet-balance-topbar i {
        font-size: 20px;
        color: white;
    }

.admin-layout-page .wallet-amount {
    font-size: 15px;
    letter-spacing: 0.3px;
}


.admin-layout-page .btn-logout-custom:hover {
    background: #F9FAFB;
    color: #000;
}

.admin-layout-page .topbar-right {
    gap: 28px;
}

.admin-layout-page .notification {
    font-size: 20px;
    color: #333;
    position: relative;
}

    .admin-layout-page .notification::after {
        content: "";
        position: absolute;
        top: -3px;
        right: -3px;
        width: 8px;
        height: 8px;
        background: red;
        border-radius: 50%;
    }

.admin-layout-page .v-line {
    width: 1px;
    height: 28px;
    background-color: #E5E7EB;
}

.admin-layout-page .help-icon {
    font-size: 20px;
    color: #444;
}

/*======================================================
    Dashboard Home page Table Design css
======================================================*/

#dataTables-example1_wrapper .dataTables_filter,
#dataTables-example1_wrapper .dataTables_length,
#dataTables-example1_wrapper .dataTables_info,
#dataTables-example1_wrapper .dataTables_paginate {
    display: none !important;
}

.device-list-container {
    padding: 20px;
}

    .device-list-container .table-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: #333;
        margin-bottom: 6px;
        padding-left: 5px;
    }

.device-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

    .device-table thead th {
        background-color: #f8f9fa !important;
        color: #495057;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.75rem;
        letter-spacing: 0.5px;
        padding: 12px 15px;
        border-top: none !important;
        border-bottom: 2px solid #dee2e6 !important;
        vertical-align: middle;
    }

    .device-table tbody td {
        padding: 14px 15px;
        vertical-align: middle;
        font-size: 0.9rem;
        color: #555;
        border-bottom: 1px solid #f1f1f1; 
    }

    .device-table tbody tr:hover {
        background-color: #fcfcfc;
    }

.badge-custom {
    padding: 5px 10px;
    border-radius: 50px;
    font-weight: 500;
    font-size: 0.75rem;
}

.device-id-cell {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-remove {
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s;
}

.custom-device-wrapper .device-table {
    border-collapse: separate;
    table-layout: auto;
    width: 100% !important;
    border-spacing: 0 8px;
}

.col-ip {
    min-width: 160px;
}

.custom-device-wrapper .device-table thead th {
    white-space: nowrap;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    padding: 15px;
    border-bottom: 2px solid #eee !important;
}

.btn-remove-custom {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    white-space: nowrap; 
    padding: 7px 15px;
    font-weight: 500;
}

.device-id-text {
    display: block;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #888;
}

.table-responsive::-webkit-scrollbar {
    height: 5px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: #dee2e6;
    border-radius: 10px;
}


/*=====================================================
    All Universal data table css
========================================================*/

/* Table Header Style */
.dataTables_wrapper .table thead th {
    background-color: #f8f9fa;
    color: #334155;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
    padding: 15px;
    border-bottom: 2px solid #e2e8f0;
}

/* Horizontal Borders Only */
.table td {
    padding: 12px 15px;
    border-bottom: 1px solid #f1f5f9;
    color: #475569;
    vertical-align: middle;
}

/* Search Input styling */
.dataTables_filter input {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 6px 12px;
    outline: none;
}

/* Professional Pagination Buttons */
.page-item.active .page-link {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.dataTables_length select {
    padding:6px 12px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

/*====================================
    Profile to menu in Admin Profile
=============================================*/
.admin-layout-page .profile-dropdown-wrapper {
    position: relative;
    display: inline-block;
}

    .admin-layout-page .profile-dropdown-wrapper:hover {
        cursor: pointer;
    }

.admin-layout-page .profile-dropdown-menu {
    position: absolute;
    top: 121%;
    right: -65px;
    width: 330px;
    z-index: 1000;
    padding-top: 12px;
    display: none;
    opacity: 0;
    transform: translateY(15px) scale(0.95);
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

    .admin-layout-page .profile-dropdown-menu.show {
        display: block;
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    .admin-layout-page .profile-dropdown-menu.instant-hide {
        display: none !important;
        opacity: 0 !important;
        transition: none !important;
    }

.admin-layout-page .profile-avatar-large {
    height: 48px;
    width: 48px;
    border-radius: 50%;
}

.admin-layout-page .profile-popup-content {
    background: #FFFFFF;
    border: 1px solid #F1F1F1;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0px 20px 45px rgba(0, 0, 0, 0.1);
    position: relative;
    max-width: 300px;
}

.admin-layout-page .profile-close-btn {
    position: absolute;
    top: 18px;
    right: 18px;
    background: #F8F9FA;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9CA3AF;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .admin-layout-page .profile-close-btn:hover {
        background: #F3F4F6;
        color: #111827;
        transform: rotate(90deg);
    }

.admin-layout-page .profile-user-name {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
}

.admin-layout-page .profile-user-id-box {
    font-size: 12px;
    color: #6B7280;
    margin-top: 2px;
}

.admin-layout-page .status-pending-pill {
    background: #F9FAFB;
    border: 1px solid #F3F4F6;
    border-radius: 12px;
    padding: 7px;
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 14px;
    font-weight: 400;
    color: #353945;
    margin: 18px 0;
    justify-content: center;
}

.admin-layout-page .status-custom-icon {
    width: 27px;
    height: 29px;
}

.admin-layout-page .profile-nav-divider {
    height: 1px;
    background: #F3F4F6;
    margin-bottom: 10px;
}

.admin-layout-page .profile-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 10px;
    text-decoration: none !important;
    color: #4B5563;
    font-weight: 500;
    border-radius: 10px;
    transition: 0.2s all;
}

    .admin-layout-page .profile-menu-item:hover {
        background: #F9FAFB;
        color: #111827;
    }

.admin-layout-page .profile-menu-icon {
    font-size: 18px;
}

.admin-layout-page .btn-logout-custom {
    margin-top: 15px;
    border: 1px solid #353945;
    border-radius: 14px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #18191D;
    font-weight: 700;
    transition: all 0.3s ease;
}

    .admin-layout-page .btn-logout-custom:hover {
        background: #111827;
        color: #e7eaf3 !important;
    }


/* ===== SIDEBAR BASE ===== */

.admin-layout-page .sidebar {
    position: fixed;
    top: 80px;
    left: 0;
    width: 256px;
    height: calc(100vh - 100px);
    background: #FFFFFF;
    transition: all 0.3s ease;
    z-index: 999;
    overflow-y: auto;
}

.admin-layout-page .menu-label {
    padding: 10px 25px;
    font-size: 12px;
    font-weight: 700;
    color: #9CA3AF;
    letter-spacing: 1px;
}

.admin-layout-page .side-bar .nav-item {
    margin: 4px 10px;
    border-radius: 12px;
    list-style: none;
}

.admin-layout-page .sidebar-link {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    text-decoration: none;
    color: #092C4C;
    font-weight: 500;
    cursor: pointer;
    transition: 0.3s;
}

    .admin-layout-page .sidebar-link i:first-child {
        font-size: 15px;
        margin-right: 15px;
    }

.admin-layout-page .nav-item.active > .sidebar-link {
    background: #F0F5FF;
    border-radius: 12px;
}

.admin-layout-page .nav-item.active .sidebar-link {
    color: #092C4C;
}

.admin-layout-page .submenu {
    list-style: none;
    padding-left: 32px;
    position: relative;
    display: none;
    margin-top: 2px;
}

    .admin-layout-page .submenu::before {
        content: '';
        position: absolute;
        left: 18px;
        top: -4px;
        bottom: 39px;
        width: 1.6px;
        background: #b2a7a7;
    }

    .admin-layout-page .submenu li {
        position: relative;
        padding: 4px 0;
    }

        .admin-layout-page .submenu li .sub-arrow {
            position: absolute;
            left: -14px;
            top: 2px;
            filter: brightness(0) saturate(100%) invert(76%) sepia(1%) saturate(0%) hue-rotate(209deg) brightness(90%) contrast(89%);
        }

.admin-layout-page .module-name {
    font-size: 14px;
    color: #092C4C;
    font-weight: 600;
}

.admin-layout-page .submenu li a {
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    color: #767676;
}

.admin-layout-page .submenu li a {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 12px;
    border-radius: 10px;
}

    .admin-layout-page .submenu li a.active-sub {
        background: #E0E7FF;
        color: #1E3A8A;
        font-weight: 600;
    }


/*
.admin-layout-page .submenu li.active-sub {
    background: #E0E7FF;
    border-radius: 10px;
    padding-left: 10px;
    margin-right: 10px;
}
*/
.admin-layout-page .submenu li.active-sub a {
    background: #E0E7FF;
    color: #3b588b;
    font-weight: 600;
}

.admin-layout-page .has-submenu.open .arrow-icon {
    transform: rotate(180deg);
}

.admin-layout-page .content-wrapper {
    margin-left: 256px;
    padding: 20px;
    padding-top: 100px;
    transition: all 0.3s ease;
    background: #ced8e930;
    height: 100%;
    min-height: 750px;
}

/* ======================================
    Admin Change Password Page
 ======================================= */

.change-password-page .change-password-admin {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    overflow: hidden;
    margin-top: 30px;
}

.change-password-page .change-password-des {
    background: rgba(255, 255, 255, 0.2);
    padding: 40px;
    border-radius: 20px;
    max-width: 450px;
}

.change-password-page .password-graphic-section {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px;
    color: #FFFFFF;
    text-align: center;
}

.change-password-page .shield-icon-wrapper {
    font-size: 80px;
    margin-bottom: 20px;
    opacity: 0.9;
}

.change-password-page .graphic-heading {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
}

.change-password-page .graphic-text {
    font-size: 15px;
    opacity: 0.8;
    line-height: 1.6;
}

.change-password-page .password-form-section {
    padding: 40px;
}

.change-password-page .form-main-heading {
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
}

.change-password-page .form-sub-text {
    font-size: 14px;
    color: #6B7280;
    margin-bottom: 30px;
}

.change-password-page .input-field-group {
    position: relative;
    margin-bottom: 20px;
}

.change-password-page .field-label-text {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 8px;
}

.change-password-page .input-with-icon {
    position: relative;
}

.change-password-page .prefix-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9CA3AF;
    font-size: 18px;
}

.change-password-page .password-control-input {
    width: 100%;
    padding: 12px 45px 12px 42px;
    border: 1px solid #D1D5DB;
    border-radius: 10px;
    font-size: 15px;
    transition: all 0.2s;
}

    .change-password-page .password-control-input:focus {
        outline: none;
        border-color: #2563EB;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
    }

.change-password-page .toggle-visibility {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: #9CA3AF;
    cursor: pointer;
    padding: 0;
}

.change-password-page .strength-meter-container {
    height: 4px;
    width: 100%;
    background-color: #E5E7EB;
    border-radius: 2px;
    margin-top: 8px;
    overflow: hidden;
}

.change-password-page .strength-fill-bar {
    height: 100%;
    width: 40%;
    background-color: #FBBF24;
    transition: width 0.3s;
}

.change-password-page .action-button-group {
    display: flex;
    gap: 12px;
    margin-top: 30px;
}

.change-password-page .btn-update-now {
    background-color: #2563EB;
    color: #FFFFFF;
    border: none;
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 15px;
    flex: 2;
    transition: background 0.2s;
}

    .change-password-page .btn-update-now:hover {
        background-color: #1D4ED8;
    }

.change-password-page .btn-reset-cancel {
    background-color: #FFFFFF;
    color: #374151;
    border: 1px solid #D1D5DB;
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 15px;
    flex: 1;
}

/* ======================================
    Admin Index Dashboard Page
 ======================================= */


.admin-dashboard-page .header-cards {
    height: 100%;
}

    .admin-dashboard-page .header-cards .stat-card {
        background: #ffffff;
        border-radius: 20px;
        padding: 20px 22px;
/*        display: flex;*/
        position: relative;
        box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    }

    .admin-dashboard-page .header-cards .icon-box {
        width: 45.151161193847656px;
        height: 45.151161193847656px;
        border-radius: 10.04px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }

    .admin-dashboard-page .header-cards .green {
        background: #00ff5826;
        color: #0A8754;
    }

    .admin-dashboard-page .header-cards .blue {
        background: #0079ff26;
        color: #3B82F6;
    }

    .admin-dashboard-page .header-cards .purple {
        background: #A855F71A;
        color: #A855F7;
    }

    .admin-dashboard-page .header-cards .orange {
        background: #F973161A;
        color: #F97316;
    }

    .admin-dashboard-page .header-cards .green1 {
        color: #0A8754;
    }

    .admin-dashboard-page .header-cards .blue1 {
        color: #3B82F6;
    }

    .admin-dashboard-page .header-cards .purple1 {
        color: #A855F7;
    }

    .admin-dashboard-page .header-cards .orange1 {
        color: #F97316;
    }

    .admin-dashboard-page .header-cards .stat-content {
/*        margin-top: 13px;*/
    }

    .admin-dashboard-page .header-cards .stat-title {
        font-size: 14px;
        color: #555;
        font-weight: 500;
        margin: 0;
    }

    .admin-dashboard-page .header-cards .stat-amount {
        font-size: 21px;
        font-weight: 700;
        color: #1a1a1a;
        margin-bottom: 0;
    }

    .admin-dashboard-page .header-cards .trend-icon {
        position: absolute;
        top: 30px;
        right: 25px;
        font-size: 14px;
    }

.admin-dashboard-page .api-cards {
}


    .admin-dashboard-page .api-cards .action-card {
        height: auto;
        border-radius: 13.38px;
        padding: 24px 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #fff;
        box-shadow: 0px 0.836483px 1.67297px rgba(0, 0, 0, 0.05);
    }

    .admin-dashboard-page .api-cards .green-card {
        background: #0A8754;
    }

    .admin-dashboard-page .api-cards .dark-card {
        background: #0D1A3A;
    }

    .admin-dashboard-page .api-cards .action-card h4 {
        font-size: 17px;
        font-weight: 600;
        margin: 0;
    }

    .admin-dashboard-page .api-cards .action-card p {
        font-size: 12px;
        font-weight: 400;
        opacity: 0.85;
        margin: 4px 0 0;
    }

    .admin-dashboard-page .api-cards .icon-btn {
        width: 46.84302520751953px;
        height: 46.84302520751953px;
        border-radius: 10.04px;
        background: rgba(255,255,255,0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }

    .admin-dashboard-page .api-cards .white-card {
        height: auto;
        background: #fff;
        border-radius: 13.38px;
        padding: 24px 24px;
        box-shadow: 0px 0.836483px 1.67297px rgba(0, 0, 0, 0.05);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

        .admin-dashboard-page .api-cards .white-card h4 {
            font-size: 18px;
            font-weight: 700;
            color: #0F172A;
            margin: 0;
        }

        .admin-dashboard-page .api-cards .white-card p {
            font-size: 14px;
            font-weight: 500;
            color: #555;
            margin: 4px 0 0;
        }

    .admin-dashboard-page .api-cards .icon-box {
        width: 33.45930099487305px;
        height: 33.45930099487305px;
        border-radius: 10.04px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
    }

    .admin-dashboard-page .api-cards .blue {
        background: #EAF2FF;
        color: #2563EB;
    }

    .admin-dashboard-page .api-cards .orange {
        background: #FFF1E6;
        color: #EA580C;
    }

    .admin-dashboard-page .api-cards .purple {
        background: #F3E8FF;
        color: #7C3AED;
    }

    .admin-dashboard-page .api-cards .green {
        background: #E9F7EF;
        color: #1E8449;
    }

    .admin-dashboard-page .api-cards .api-setting-card {
        height: auto;
        background: #FFFFFF;
        border-radius: 13.38px;
        padding: 24px;
        box-shadow: 0px 0.836483px 1.67297px rgba(0, 0, 0, 0.05);
    }

    .admin-dashboard-page .api-cards .api-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

        .admin-dashboard-page .api-cards .api-header h3 {
            font-size: 17px;
            font-weight: 600;
            margin: 0;
        }

    .admin-dashboard-page .api-cards .active-badge {
        background: #E9F7EF;
        color: #0A8754;
        font-size: 10px;
        padding: 4px 12px;
        border-radius: 20px;
    }

    .admin-dashboard-page .api-cards .api-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .admin-dashboard-page .api-cards .api-list li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 14px 0;
        }

    .admin-dashboard-page .api-cards .api-left {
        display: flex;
        gap: 14px;
        align-items: center;
    }

        .admin-dashboard-page .api-cards .api-left h5 {
            font-size: 14px;
            font-weight: 500;
            color: #0D1A3A;
            margin: 0;
        }

        .admin-dashboard-page .api-cards .api-left p {
            font-size: 11px;
            font-weight: 400;
            color: #6B7280;
            margin: 2px 0 0;
        }

    .admin-dashboard-page .api-cards .api-setting-right-icon {
        font-size: 14px;
        color: #9CA3AF;
    }

.admin-dashboard-page .information-cards {
    height: auto;
    font-family: 'Inter', sans-serif;
}

    .admin-dashboard-page .information-cards .top-card {
        height: auto;
        background: #FFFFFF;
        box-shadow: 0px 0.836483px 1.67297px rgba(0, 0, 0, 0.05);
        border-radius: 13.3837px;
        padding: 18px;
    }

    .admin-dashboard-page .information-cards .profile-img {
        width: 48px;
        height: 48px;
        border-radius: 50%;
    }

    .admin-dashboard-page .information-cards .company-name {
        font-size: 15.06px;
        font-weight: 600;
        color: #0D1A3A;
        margin-bottom: 2px;
    }

    .admin-dashboard-page .information-cards .member-id {
        font-size: 12px;
        color: #6B7280;
        margin-bottom: 6px;
    }

    .admin-dashboard-page .information-cards .kyc-badge {
        background: #0A87541A;
        color: #0A8754;
        font-size: 11px;
        padding: 4px 8px;
        border-radius: 999px;
        display: inline-block;
    }

    .admin-dashboard-page .information-cards .last-login {
        font-size: 11px;
        color: #6B7280;
        margin-top: 6px;
    }

    .admin-dashboard-page .information-cards .lower-card {
        box-sizing: border-box;
        height: auto;
        background: #FEF9E7;
        border: 1px solid #FEF3C7;
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
        border-radius: 13.3837px;
        padding: 18px;
    }

    .admin-dashboard-page .information-cards .announcement-title {
        font-size: 15px;
        font-weight: 600;
        margin-bottom: 16px;
    }

    .admin-dashboard-page .information-cards .announcement-icon {
        height: 26.767440795898438px !important;
        width: 26.767440795898438px !important;
        border-radius: 6.69px;
        font-size: 13.38px;
        font-weight: 600;
        background: #FACC1533;
        color: #CA8A04;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .admin-dashboard-page .information-cards .announcement-item {
        background: #FFFFFF;
        border-radius: 10px;
        padding: 14px;
        display: flex;
        gap: 10px;
        margin-bottom: 12px;
    }

        .admin-dashboard-page .information-cards .announcement-item h6 {
            font-size: 12px;
            color: #0D1A3A;
            font-weight: 500;
            margin-bottom: 4px;
        }

        .admin-dashboard-page .information-cards .announcement-item p {
            font-size: 11px;
            font-weight: 400;
            color: #2D3748;
            margin-bottom: 2px;
        }

        .admin-dashboard-page .information-cards .announcement-item small {
            font-size: 11px;
            color: #9CA3AF;
        }

    .admin-dashboard-page .information-cards .dot {
        font-size: 10.06px;
        margin-top: 3px;
    }

    .admin-dashboard-page .information-cards .yellow {
        color: #F1C40F;
    }

    .admin-dashboard-page .information-cards .green {
        color: #22C55E;
    }

    .admin-dashboard-page .information-cards .blue {
        color: #3B82F6;
    }

    .admin-dashboard-page .information-cards .purple {
        color: #A855F7;
    }

/* ======================================
    Admin Profile Page
 ======================================= */

.admin-profile-page .profile-details {
    box-sizing: border-box;
    background: #FFFFFF;
    border: 1px solid #F3F4F6;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 16px;
    align-self: stretch;
    flex-grow: 0;
    padding: 20px;
    margin-bottom: 20px;
}

.admin-profile-page .profile-pic-container {
    position: relative;
    width: 100px;
    height: 100px;
    margin-right: 20px;
    flex-shrink: 0;
}

.admin-profile-page .profile-img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 16px;
}

.admin-profile-page .camera-icon {
    position: absolute;
    bottom: -5px;
    right: -5px;
    background-color: #5d5dff;
    color: #fff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border: 2px solid #fff;
}

.admin-profile-page .profile-text-content {
    flex-grow: 1;
}

.admin-profile-page .name {
    font-size: 24px;
    font-weight: 700;
    color: #212529;
    margin-bottom: 5px;
}

.admin-profile-page .member-info {
    font-size: 16px;
    color: #6c757d;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.admin-profile-page .badge-merchant {
    background-color: #DBEAFE;
    color: #1D4ED8;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 9999px;
    font-size: 12px;
    white-space: nowrap;
}

.admin-profile-page .badge-kyc {
    background-color: #DCFCE7;
    color: #15803D;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 9999px;
    font-size: 12px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}

.admin-profile-page .last-login {
    font-size: 14px;
    color: #6c757d;
    margin-top: 10px;
}

.admin-profile-page .btn-edit {
    background-color: #fff;
    color: #5d5dff;
    border: 2px solid #5d5dff;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 8px;
    white-space: nowrap;
    height: 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}

    .admin-profile-page .btn-edit:hover {
        border: 2px solid Black;
        background-color: lightgray;
        color: black;
    }

.admin-profile-page .info-card {
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    min-height: 386px;
    border-radius: 16px;
    margin-bottom: 20px;
}

.admin-profile-page .card-header-edit {
    font-size: 14px;
    color: #5d5dff;
    font-weight: 500;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.admin-profile-page .info-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.admin-profile-page .info-icon-container {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-size: 18px;
    flex-shrink: 0;
}

.admin-profile-page .icon-blue {
    background-color: #e0e7ff;
    color: #5d5dff;
}

.admin-profile-page .icon-green {
    background-color: #e6ffe6;
    color: #28a745;
}

.admin-profile-page .icon-purple {
    background-color: #f0e6ff;
    color: #8a2be2;
}

.admin-profile-page .icon-orange {
    background-color: #fff0e0;
    color: #ff8c00;
}

.admin-profile-page .icon-pink {
    background-color: #ffe6f0;
    color: #ff69b4;
}

.admin-profile-page .icon-dark-blue {
    background-color: #e6f0ff;
    color: #1e90ff;
}

.admin-profile-page .icon-teal {
    background-color: #e0ffff;
    color: #00ced1;
}

.admin-profile-page .icon-red {
    background-color: #ffe0e6;
    color: #dc3545;
}

.admin-profile-page .icon-brown {
    background-color: #f0e6dd;
    color: #a0522d;
}

.admin-profile-page .icon-map {
    background-color: #e6f7ff;
    color: #00bfff;
}

.admin-profile-page .icon-light-green {
    background-color: #f0fff0;
    color: #6b8e23;
}

.admin-profile-page .info-text-content {
    flex-grow: 1;
}

.admin-profile-page .info-label {
    font-size: 14px;
    color: #6c757d;
    margin: 0;
    line-height: 1.2;
}

.admin-profile-page .info-value {
    font-size: 16px;
    font-weight: 600;
    color: #212529;
    margin: 0;
    line-height: 1.2;
}

.admin-profile-page .city-state-row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.admin-profile-page .city-item, .state-item {
    flex: 1;
    min-width: 45%;
}

    .admin-profile-page .city-item .info-item, .state-item .info-item {
        margin-bottom: 0;
    }

/* Card Styles */
.admin-profile-page .kyc-security-setting .setting-card {
    background-color: #fff;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    min-height: 535px;
    margin-bottom: 20px;
}

/* Card Header */
.admin-profile-page .card-header-title {
    font-size: 18px;
    font-weight: 600;
    color: #212529;
    margin-bottom: 22px;
}

.admin-profile-page .kyc-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 15px;
    background: #F0FDF4;
    border-radius: 12px;
    margin-bottom: 12px;
}

    .admin-profile-page .kyc-item.pending-back {
        background: #FFFBEB;
    }

    .admin-profile-page .kyc-item:last-child {
        border-bottom: none;
    }

.admin-profile-page .kyc-content {
    display: flex;
    align-items: center;
}

.admin-profile-page .kyc-icon-container {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-size: 18px;
    flex-shrink: 0;
}

.admin-profile-page .kyc-icon-veri {
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-size: 18px;
    flex-shrink: 0;
}

.admin-profile-page .kyc-label {
    font-size: 16px;
    font-weight: 600;
    color: #212529;
    margin: 0;
    line-height: 1.2;
}

.admin-profile-page .kyc-detail {
    font-size: 12px;
    color: #6B7280;
    margin: 0;
    line-height: 1.2;
}

.admin-profile-page .badge-verified {
    background-color: #e6ffe6;
    color: #28a745;
    font-weight: 600;
    padding: 3px 11px;
    border-radius: 9999px;
    font-size: 12px;
}

.admin-profile-page .badge-pending {
    background-color: #FEF3C7;
    color: #B45309;
    font-weight: 600;
    padding: 3px 11px;
    border-radius: 9999px;
    font-size: 12px;
}

.admin-profile-page .badge-complete {
    background-color: #e6ffe6;
    color: #28a745;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 14px;
}

.admin-profile-page .setting-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
    background: #F9FAFB;
    margin-bottom: 12px;
    border-radius: 12px;
}

    .admin-profile-page .setting-list-item:last-child {
        border-bottom: none;
    }

.admin-profile-page .setting-list-content {
    display: flex;
    align-items: center;
}

.admin-profile-page .setting-detail-text {
    font-size: 12px;
    color: #6B7280;
    margin-top: 2px;
}

.admin-profile-page .setting-list-item i.bi-chevron-right {
    color: #adb5bd;
    font-size: 1.2rem;
}

.admin-profile-page .kyc-icon-aadhaar {
    background-color: #e6ffe6;
    color: #28a745;
}

.admin-profile-page .kyc-icon-pan {
    background-color: #e6ffe6;
    color: #28a745;
}

.admin-profile-page .kyc-icon-bank {
    background-color: #fff8e6;
    color: #ff8c00;
}

.admin-profile-page .kyc-icon-doc {
    background-color: #e6ffe6;
    color: #28a745;
}

.admin-profile-page .kyc-icon-gst {
    background-color: #fff8e6;
    color: #ff8c00;
}

.admin-profile-page .security-icon-password {
    background-color: #e0e7ff;
    color: #5d5dff;
}

.admin-profile-page .security-icon-2fa {
    background-color: #e6ffe6;
    color: #28a745;
}

.admin-profile-page .security-icon-pin {
    background-color: #f0e6ff;
    color: #8a2be2;
}

.admin-profile-page .security-icon-devices {
    background-color: #e6f0ff;
    color: #1e90ff;
}

.admin-profile-page .security-icon-session {
    background-color: #ffe0e6;
    color: #dc3545;
}

.admin-profile-page .api-activity-log .setting-card {
    background-color: #fff;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    min-height: 450px;
}

.admin-profile-page .card-header-action {
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    display: flex;
    align-items: center;
}

/* --- API Settings Card Styles --- */
.admin-profile-page .api-section {
    margin-bottom: 15px;
    background: #F9FAFB;
    padding: 15px 15px;
    border-radius: 12px;
}

.admin-profile-page .api-label {
    font-size: 14px;
    font-weight: 500;
    color: #6c757d;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
}

.admin-profile-page .api-value {
    font-size: 16px;
    font-weight: 600;
    color: #212529;
    padding: 10px 0;
}

.admin-profile-page .api-key-value {
    font-size: 14px;
    text-align: center;
    border-radius: 8px;
    background: white;
    font-family: monospace;
    font-weight: 500;
    color: #212529;
    padding: 10px 0;
}

.admin-profile-page .ip-list {
    display: flex;
    gap: 15px;
    padding: 10px 0;
}

.admin-profile-page .ip-item {
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #212529;
}

.admin-profile-page .btn-api-logs {
    background-color: #5d5dff;
    border-color: #5d5dff;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    height: 45px;
    border-radius: 8px;
    width: 100%;
}

    .admin-profile-page .btn-api-logs:hover {
        background-color: #5d5dff;
        border-color: #5d5dff;
        color: #fff;
        font-size: 16px;
        font-weight: 600;
        height: 45px;
        border-radius: 8px;
        width: 100%;
    }


/* --- Activity Log Card Styles --- */
.admin-profile-page .log-item {
    display: flex;
    align-items: flex-start;
    padding: 15px 0;
    border-bottom: 1px solid #f3f4f6;
}

    .admin-profile-page .log-item:last-child {
        border-bottom: none;
    }

.admin-profile-page .log-icon-container {
    width: 40px;
    height: 40px;
    border-radius: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-size: 16px;
    flex-shrink: 0;
    background-color: #e6ffe6;
    color: #28a745;
}

.admin-profile-page .log-title {
    font-size: 16px;
    font-weight: 600;
    color: #212529;
    margin: 0;
}

.admin-profile-page .log-detail {
    font-size: 14px;
    color: #6c757d;
    margin: 0;
}

/*=======================================
 KYC Management Section (Manage KYC)
 ========================================*/

.manage-kyc-page .manage-kyc-title {
    font-size: 20px;
    font-weight: 600;
    color: #111827;
}

.manage-kyc-page .status-badge-top {
    background-color: #FEF9C3;
    color: #854D0E;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 50px;
}

.manage-kyc-page .gst-number-info {
    font-size: 12px;
    font-weight: 400;
    color: #6B7280;
}

.manage-kyc-page .verification-strip {
    background-color: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.manage-kyc-page .merchant-kyc-box {
    margin-bottom: 16px;
    padding: 20px;
    border-radius: 6px;
    border: 1px solid #E5E7EB;
}

.manage-kyc-page .gst-verification-icon {
    background: #FEF9C3;
    color: #CA8A04;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.manage-kyc-page .custom-card-container {
    padding: 20px;
    background-color: #fcfcfc;
}

.manage-kyc-page .doc-title {
    font-size: 1.2rem;
    font-weight: 500;
    color: #344054;
    margin-bottom: 12px;
}

.manage-kyc-page .upload-box-wrapper {
    border: 2px dashed #D1D5DB;
    border-radius: 12px;
    padding: 20px;
    background-color: #F9FAFB;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: border-color 0.3s ease;
}

.manage-kyc-page .doc-icon-box {
    width: 80px !important;
    height: 80px !important;
    border: 1px solid #EAECF0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
}

.manage-kyc-page .pdf-icon-color {
    color: #E31B23;
    font-size: 30px;
}

.manage-kyc-page .doc-info-title {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
    margin-bottom: 4px;
}

.manage-kyc-page .doc-info-meta {
    font-size: 0.9rem;
    color: #667085;
    margin-bottom: 0;
}

.manage-kyc-page .view-btn-custom {
    border: 1px solid #D0D5DD;
    background-color: #ffffff;
    color: #344054;
    padding: 8px 20px;
    border-radius: 8px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.manage-kyc-page .marchant-kyc-box-title {
    color: #111827;
    font-size: 18px;
    font-weight: 500;
    width: 100%;
    padding: 16px 10px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    background: #e5ecf3;
}

.manage-kyc-page .view-btn-custom:hover {
    background-color: #f9fafb;
    border-color: #98A2B3;
}

.manage-kyc-page .btn-save-continue {
    background: white;
    color: #374151;
    padding: 12px 35px;
    border-radius: 8px;
    font-weight: 600;
    border: none;
    border: 1px solid #D1D5DB;
}

    .manage-kyc-page .btn-save-continue:hover {
        background: #2563EB;
        color: white;
    }

.manage-kyc-page .contact-person-details {
    background: #FFFFFF;
    border: 0.835041px solid #E5E7EB;
    box-shadow: 0px 0.835041px 1.67008px rgba(0, 0, 0, 0.05);
    border-radius: 10.0205px;
    padding: 24px;
}

.manage-kyc-page .details-title {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .manage-kyc-page .details-title i {
        color: #2563EB;
        font-size: 20px;
    }

.manage-kyc-page .form-label-custom {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.manage-kyc-page .text-danger-custom {
    color: #EF4444;
}

.manage-kyc-page .form-control-custom {
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 14px;
    color: #111827;
    transition: all 0.2s ease-in-out;
}

    .manage-kyc-page .form-control-custom:focus {
        border-color: #2563EB;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        outline: none;
    }

    .manage-kyc-page .form-control-custom::placeholder {
        color: #9CA3AF;
        opacity: 0.7;
    }

.manage-kyc-page .aadhaar-verification {
    box-sizing: border-box;
    background: #FFFFFF;
    border: 0.835041px solid #E5E7EB;
    box-shadow: 0px 0.835041px 1.67008px rgba(0, 0, 0, 0.05);
    border-radius: 10.0205px;
    padding: 20px;
}

.manage-kyc-page .upload-dashed-wrapper {
    border: 1px dashed #D1D5DB;
    border-radius: 8px;
    padding: 20px;
    background-color: #F9FAFB;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .manage-kyc-page .upload-dashed-wrapper:hover {
        border-color: #2563EB;
        background-color: #EFF6FF;
    }

.manage-kyc-page .status-badge-pending {
    background: #FEF9C3;
    color: #854D0E;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.manage-kyc-page .file-uploaded-preview {
    display: flex;
    align-items: center;
    width: 100%;
}

.manage-kyc-page .extra-small {
    font-size: 11px;
}

.manage-kyc-page .pan-verification {
    box-sizing: border-box;
    background: #FFFFFF;
    border: 0.835041px solid #E5E7EB;
    box-shadow: 0px 0.835041px 1.67008px rgba(0, 0, 0, 0.05);
    border-radius: 10.0205px;
    padding: 24px;
}

.manage-kyc-page .pan-status-badge {
    background-color: #FEF9C3;
    color: #854D0E;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #FEF08A;
}

.manage-kyc-page .custom-input {
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    font-size: 14px;
}

    .manage-kyc-page .custom-input:focus {
        border-color: #2563EB;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    }

.manage-kyc-page .upload-dashed-wrapper {
    border: 1.5px dashed #D1D5DB;
    border-radius: 10px;
    padding: 20px;
    background-color: #F9FAFB;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .manage-kyc-page .upload-dashed-wrapper:hover {
        border-color: #2563EB;
        background-color: #F0F7FF;
    }

.manage-kyc-page .pan-info-note {
    background-color: #EFF6FF;
    padding: 10px 15px;
    border-radius: 8px;
    color: #1E40AF;
    font-size: 12px;
}

.manage-kyc-page .file-uploaded-preview {
    display: flex;
    width: 100%;
}

.manage-kyc-page .extra-small {
    font-size: 11px;
}

/*Upload photo section*/

.manage-kyc-page .verification-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 24px 21px;
    background: #FFFFFF;
    border: 0.835041px solid #E5E7EB;
    box-shadow: 0px 0.835041px 1.67008px rgba(0, 0, 0, 0.05);
    border-radius: 10.0205px;
}

.manage-kyc-page .verification-title {
    font-weight: 600;
    color: #111827;
    font-size: 16px;
}

.manage-kyc-page .verification-subtitle {
    color: #6B7280;
    font-size: 13px;
}

.manage-kyc-page .status-badge {
    background-color: #FEF9C3;
    color: #854D0E;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 500;
}

.manage-kyc-page .upload-area {
    margin-bottom: 20px;
}

.manage-kyc-page .avatar-placeholder {
    width: 133px;
    height: 133px;
    background: #F9FAFB;
    height: 133px;
    border: 1.7px dashed #D1D5DB;
    border-radius: 50%;
    background-color: transparent;
}

.manage-kyc-page .avatar-icon {
    font-size: 45px;
    color: #D1D5DB;
}

.manage-kyc-page .btn-upload {
    background-color: #2563EB;
    color: white;
    border-radius: 8px;
    font-weight: 500;
    border: none;
    transition: background 0.3s;
}

    .manage-kyc-page .btn-upload:hover {
        background-color: #1D4ED8;
        color: white;
    }

.manage-kyc-page .guidelines-box {
    background-color: #EFF6FF;
    border: 1px solid #DBEAFE;
    border-radius: 8px;
    padding: 16px;
    width: 80%;
}

.manage-kyc-page .info-icon {
    color: #2563EB;
    font-size: 13px;
}

.manage-kyc-page .guidelines-header {
    color: #1F2937;
    font-weight: 600;
    font-size: 0.95rem;
}

.manage-kyc-page .guidelines-list li {
    color: #4B5563;
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.manage-kyc-page .avatar-placeholder {
    width: 133px;
    height: 133px;
    background: #F9FAFB;
    border: 1.7px dashed #D1D5DB;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
}

.manage-kyc-page #preview-img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.manage-kyc-page .modal-content {
    border-radius: 12px;
}

.manage-kyc-page .modal-header .btn-close {
    background-color: #f8f9fa;
    border-radius: 50%;
    padding: 8px;
    opacity: 1;
}

/*Footer Section in contact person*/

.manage-kyc-page .contact-person-footer {
    box-sizing: border-box;
    height: auto;
    background: linear-gradient(90deg, #EFF6FF 0%, #EEF2FF 100%);
    border: 0.835041px solid #BFDBFE;
    border-radius: 10.0205px;
    padding: 20px 0;
    flex: none;
    order: 4;
    align-self: stretch;
    flex-grow: 0;
    margin-top: 20px;
}

.manage-kyc-page .footer-title {
    color: #111827;
    font-size: 16px;
}

.manage-kyc-page .footer-subtitle {
    color: #4B5563;
    font-size: 14px;
}

.manage-kyc-page .btn-back {
    background: #FFFFFF;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    color: #374151;
    font-size: 14px;
    transition: all 0.3s ease;
}

    .manage-kyc-page .btn-back:hover {
        background: #F9FAFB;
        border-color: #9CA3AF;
    }

.manage-kyc-page .btn-submit {
    background: #2563EB;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    box-shadow: 0px 4px 6px rgba(37, 99, 235, 0.2);
    transition: all 0.3s ease;
}

    .manage-kyc-page .btn-submit:hover {
        background: #1D4ED8;
        transform: translateY(-1px);
    }

.manage-kyc-page .footer-icon-circle {
    font-size: 18px;
}

/*Owner Details Tab Section*/

.manage-kyc-page .doc-icon-box1 {
    width: 40px;
    height: 40px;
    background: #ffff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    flex-shrink: 0;
    font-size: 17px;
}

.manage-kyc-page .owner-details .owner-card {
    box-sizing: border-box;
    padding: 24px 24px;
    background: #FFFFFF;
    border: 0.835041px solid #E5E7EB;
    box-shadow: 0px 0.835041px 1.67008px rgba(0, 0, 0, 0.05);
    border-radius: 10.0205px;
    height: auto;
}

.manage-kyc-page .owner-details .owner-header {
    font-weight: 600;
    color: #111827;
    font-size: 18px;
    text-align: left;
}

.manage-kyc-page .owner-details .custom-label {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
}

.manage-kyc-page .owner-details .custom-input,
.manage-kyc-page .owner-details .custom-input-group .form-control {
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    background: #F9FAFB;
}

.owner-details .custom-input:focus,
.owner-details .custom-input-group .form-control:focus {
    box-shadow: none;
    border-color: #2563EB;
}

.manage-kyc-page .owner-details .custom-input-group .input-group-text {
    border: 1px solid #D1D5DB;
    border-radius: 0 8px 8px 0;
}

.manage-kyc-page .owner-details .verified-badge {
    background-color: #DCFCE7;
    color: #15803D;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}

.manage-kyc-page .owner-details .input-group > .form-control:focus + .input-group-text {
    border-color: #2563EB;
}


/*=======================================
 Wallet Payment Page Change Deposite Money
 ========================================*/

.wallet-payment-page .wallet-payment-cards {
    height: auto;
    box-sizing: border-box;
    border-radius: 0px;
}

.wallet-payment-page .custom-card-container {
    background: #FFFFFF;
    border: 0.927623px solid #E5E7EB;
    box-shadow: 0px 0.927623px 1.85525px rgba(0, 0, 0, 0.05);
    border-radius: 11.1315px;
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.wallet-payment-page .custom-card-container-child1 {
    padding: 10px;
    background: #EBF5FF;
    border-radius: 12px;
}

.wallet-payment-page .custom-card-container-child2 {
    padding: 10px;
    background: #FFF7ED;
    border-radius: 12px;
}

.wallet-payment-page .custom-card-container-child3 {
    padding: 10px;
    background: #F3F4F6;
    border-radius: 12px;
}

.wallet-payment-page .custom-card-container-child4 {
    padding: 10px;
    background: #dde6f1;
    border-radius: 12px;
}


.wallet-payment-page .card-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.wallet-payment-page .bg-wallet {
    background-color: #10B981;
    color: #ffff;
}

.wallet-payment-page .bg-collection {
    background-color: #F59E0B;
    color: #ffff;
}

.wallet-payment-page .bg-settlement {
    background-color: #6B7280;
    color: #ffff;
}

.wallet-payment-page .bg-bank {
    background-color: #3B82F6;
    color: #ffff;
}

.wallet-payment-page .status-badge-live {
    background-color: #F3F4F6;
    color: #6B7280;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
}

.wallet-payment-page .status-badge-pending {
    background-color: #FFF7ED;
    color: #C2410C;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
}

.wallet-payment-page .status-badge-active {
    background-color: #F0FDF4;
    color: #166534;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
}

.wallet-payment-page .card-label-text {
    color: #6B7280;
    font-size: 14px;
    font-weight: 500;
}

.wallet-payment-page .card-value-text {
    color: #111827;
    font-size: 20px;
    font-weight: 700;
}

    .wallet-payment-page .card-value-text.value1 {
        color: #10B981;
    }

    .wallet-payment-page .card-value-text.value2 {
        color: #F59E0B;
    }

    .wallet-payment-page .card-value-text.value3 {
        color: #6B7280;
    }

    .wallet-payment-page .card-value-text.value4 {
        color: #3B82F6;
    }

.wallet-payment-page .trend-up-text {
    color: #10B981;
    font-size: 12px;
    font-weight: 600;
}

.wallet-payment-page .sub-info-text {
    color: #6B7280;
    font-size: 12px;
}

.wallet-payment-page .verified-text {
    color: #10B981;
    font-size: 12px;
    font-weight: 500;
}

.wallet-payment-page .add-money-wallet {
    box-sizing: border-box;
    background: #FFFFFF;
    border: 0.922078px solid #F3F4F6;
    box-shadow: 0px 0.922078px 1.84416px rgba(0, 0, 0, 0.05);
    border-radius: 7.37662px;
    padding: 24px;
}

.wallet-payment-page .header-section-wallet {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wallet-payment-page .wallet-title-text {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.wallet-payment-page .wallet-subtitle-text {
    font-size: 12px;
    color: #6B7280;
}

.wallet-payment-page .plus-icon-button {
    background-color: #F0F7FF;
    color: #004AAD;
    width: 44.26px;
    height: 44.26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: none;
}

.wallet-payment-page .bank-details-inner-box {
    background-color: #F9FAFB;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
}

.wallet-payment-page .details-heading-wallet {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 20px;
}

.wallet-payment-page .label-wallet-detail {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}

.wallet-payment-page .value-wallet-detail {
    font-size: 13px;
    color: #4B5563;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
}

.wallet-payment-page .copy-icon-blue {
    color: #3B82F6;
    cursor: pointer;
    font-size: 0.9rem;
}

.wallet-payment-page .qr-placeholder-box {
    border: 1.5px dashed #D1D5DB;
    border-radius: 12px;
    width: 56.01px;
    height: 56.01px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFFFFF;
}

.wallet-payment-page .qr-icon-style {
    font-size: 1rem;
    color: #9CA3AF;
}

.wallet-payment-page .btn-copy-all-wallet {
    background-color: #3B82F6;
    color: #FFFFFF;
    border: none;
    border-radius: 14.75px;
    padding: 10px 14px;
    width: 100%;
    font-weight: 600;
    transition: 0.3s;
    font-size: 12.91px;
}

.wallet-payment-page .file-hidden-input {
    position: absolute;
    left: -9999px;
    opacity: 0;
}


.date-input-wrapper-custom {
    position: relative;
    display: flex;
    align-items: center;
}

.custom-datepicker-input::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    z-index: 2; 
}

.custom-calendar-icon {
    position: absolute;
    right: 15px;
    color: #6c757d; 
    pointer-events: none; 
    font-size: 1.1rem;
    z-index: 1;
}

.custom-datepicker-input {
    padding-right: 40px !important; 
    background-color: #f8f9fa ;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    position: relative;
    z-index: 1;
}

    .custom-datepicker-input:focus {
        border-color: #0d6efd !important; 
        box-shadow: none !important;
    }

.wallet-payment-page .transfer-details {
    box-sizing: border-box;
    background: #FFFFFF;
    border: 0.922078px solid #F3F4F6;
    box-shadow: 0px 0.922078px 1.84416px rgba(0, 0, 0, 0.05);
    border-radius: 7.37662px;
    padding: 26.7403px 30.4286px 30.4286px;
}

.wallet-payment-page .custom-label-style {
    font-size: 12.91px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 8px;
}

.wallet-payment-page .custom-file-btn {
    background-color: #3883f0;
    color: #fff;
    padding: 8px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    display: inline-block;
}

    .wallet-payment-page .custom-file-btn:hover {
        background-color: #1D4ED8;
    }

.wallet-payment-page .input-field-custom {
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 15px;
    color: #111827;
}

.wallet-payment-page .form-select-field {
    appearance: none;
    background-image: url(../image/common/drop-arrow.svg);
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px 12px;
}

.wallet-payment-page .input-field-custom::placeholder {
    color: #9CA3AF;
}

.wallet-payment-page .upload-proof-container {
    border: 1.5px dashed #D1D5DB;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    background-color: #F9FAFB;
    margin-top: 10px;
}

.wallet-payment-page .upload-icon-circle {
    background-color: #EBF5FF;
    color: #3B82F6;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 6px;
}

.wallet-payment-page .upload-text-main {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 4px;
}

.wallet-payment-page .upload-text-sub {
    font-size: 12px;
    color: #6B7280;
}

.wallet-payment-page .btn-submit-transfer {
    background-color: #2563EB;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 10px 14px;
    width: 45%;
    font-weight: 600;
    font-size: 16px;
    margin-top: 24px;
    transition: 0.3s;
}

    .wallet-payment-page .btn-submit-transfer:hover {
        background-color: #1D4ED8;
    }

.wallet-payment-page .proof-modal-overlay {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px);
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.wallet-payment-page .proof-modal-box {
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    width: 100%;
    max-width: 450px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUpFadeIn 0.3s ease-out;
}

.wallet-payment-page .proof-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
    background: #fafafa;
}

.wallet-payment-page .modal-title-text {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.wallet-payment-page .close-icon-btn {
    background: transparent;
    border: none;
    font-size: 20px;
    color: #888;
    cursor: pointer;
    padding: 5px;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .wallet-payment-page .close-icon-btn:hover {
        color: #ff4757;
    }

.wallet-payment-page .proof-modal-body {
    padding: 15px;
    text-align: center;
    background-color: #fff;
    max-height: 70vh;
    overflow-y: auto;
}

    .wallet-payment-page .proof-modal-body img {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
        border: 1px solid #eee;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }

.wallet-payment-page .btn-view-proof {
    background-color: #e0e7ff;
    color: #4338ca;
    border: none;
    padding: 9px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s;
}

    .wallet-payment-page .btn-view-proof:hover {
        background-color: #c7d2fe;
    }

@keyframes slideUpFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.wallet-payment-page .qr-placeholder-box {
    border: 7.5px dashed #D1D5DB;
    border-radius: 60px;
    width: 100%;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFFFFF;
}

.wallet-payment-page .qr-icon-style {
    font-size: 10rem;
    color: #9CA3AF;
}

.company-qr-title {
    font-size: 17px;
    color: #111827;
    font-weight: 600;
}

.wallet-payment-page .qr-section {
    box-sizing: border-box;
    height: auto;
    background: #FFFFFF;
    border: 0.922078px solid #F5F6F8;
    box-shadow: 0px 0.922078px 1.84416px rgba(0, 0, 0, 0.05);
    border-radius: 11.0649px;
    padding: 24px;
}

.wallet-payment-page .quick-actions {
    box-sizing: border-box;
    height: auto;
    background: #FFFFFF;
    border: 0.922078px solid #F5F6F8;
    box-shadow: 0px 0.922078px 1.84416px rgba(0, 0, 0, 0.05);
    border-radius: 11.0649px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.wallet-payment-page .btn-withdraw-main {
    background-color: #0052FF;
    color: #FFFFFF;
    border: none;
    border-radius: 10px;
    padding: 10px 14px;
    font-weight: 600;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    transition: 0.3s;
}

.wallet-payment-page .settlement-info-box {
    background-color: #F0F7FF;
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
}

.wallet-payment-page .info-icon-blue {
    color: #2563EB;
    font-size: 15px;
}

.wallet-payment-page .settlement-text-title {
    font-size: 13px;
    font-weight: 500;
    color: #1E3A8A;
    margin: 0;
}

.wallet-payment-page .settlement-text-detail {
    font-size: 12px;
    color: #1D4ED8;
    font-weight: 400;
    margin: 0;
}

.wallet-card-link12 {
    display: flex;
    align-items: center;
    background: #c7d2fe !important;
    padding: 16px 20px;
    border-radius: 12px;
    border: 1.5px solid #f3f4f6;
    position: relative;
    width:100%;
}

.link-outerback {
    display:flex;
    background: #ffffff;
    text-decoration: none;
    padding: 16px;
    border-radius: 12px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

    /* Hover Effect - Thoda blue tint aur lift */
    .link-outerback:hover {
        border-color: #1F3A8A;
        background: #f8faff;
        transform: translateY(-2px);
        box-shadow: 0 10px 20px -5px rgba(31, 58, 138, 0.15);
    }

    /* Click/Active Effect - Button dabne wala feel */
     .link-outerback:active {
    transform: translateY(0) scale(0.98);
     }

.icon-container12 {
    width: 46px;
    height: 46px;
    background: #1F3A8A;
    color: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.text-content12 {
    display: flex;
    flex-direction: column;
    margin-left: 16px;
    flex-grow: 1; /* Isse arrow end mein chala jayega */
}

.title12 {
    font-weight: 700;
    font-size: 16px;
    color: #111827;
    margin-bottom: 2px;
}

.subtitle12 {
    color: #6b7280;
    font-size: 13px;
    font-weight: 400;
}

.arrow-icon12 {
    color: #d1d5db;
    font-size: 14px;
    transition: transform 0.2s ease;
}

/* Hover par arrow thoda right move karega */
.wallet-card-link12:hover .arrow-icon {
    transform: translateX(4px);
    color: #1F3A8A;
}

/*=======================================
  Deposit Money History Page
 ========================================*/

.deposit-money-history-page .deposit-money-history-title {
    font-size: 20px;
    color: #535353;
    font-weight: 600;
}

/*=======================================
  Withdrawal Money Page
 ========================================*/

.withdrawal-money-page .main-header-title {
    font-size: 20px;
    font-weight: 600;
    color: #111827;
}

.withdrawal-money-page .withdrawal-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    gap: 20px;
    height: auto;
    background: #FFFFFF;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.06), 0px 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
}

.withdrawal-money-page .withdrawal-title {
    font-size: 20px;
    font-weight: 600;
    color: #111827;
}

.withdrawal-money-page .form-label-custom {
    font-size: 14px;
    font-weight: 500;
    color: #4B5563;
    margin-bottom: 8px;
}

.withdrawal-money-page .input-group-custom {
    position: relative;
    width: 100%;
}

.withdrawal-money-page .input-field {
    width: 100%;
    padding: 12px 16px 12px 40px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    font-size: 16px;
    color: #111827;
    outline: none;
    transition: border-color 0.2s;
}

    .withdrawal-money-page .input-field:focus {
        border-color: #6366F1;
    }

.withdrawal-money-page .currency-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #6B7280;
}

.withdrawal-money-page .limit-text {
    font-size: 12px;
    color: #6B7280;
    margin-top: 6px;
}

.withdrawal-money-page .bank-card-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.withdrawal-money-page .bank-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    cursor: pointer;
    transition: 0.2s;
}

.withdrawal-money-page .bank-option-selected {
    border-color: #6366F1;
    background-color: #F9FAFB;
}

.withdrawal-money-page .bank-info-flex {
    display: flex;
    align-items: center;
    gap: 12px;
}

.withdrawal-money-page .bank-name {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.withdrawal-money-page .bank-sub {
    font-size: 13px;
    color: #6B7280;
}

.withdrawal-money-page .bank-icon-bg {
    width: 40px;
    height: 40px;
    background: #FEE2E2;
    color: #EF4444;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.withdrawal-money-page .remarks-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    font-size: 14px;
    color: #111827;
}

.withdrawal-money-page .withdraw-btn-primary {
    width: 100%;
    padding: 12px;
    background: #6366F1;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: 0.2s;
}

    .withdrawal-money-page .withdraw-btn-primary:hover {
        background: #4F46E5;
    }

.withdrawal-money-page .money-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    gap: 21px;
    height: auto;
    background: #FFFFFF;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.06), 0px 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
}

.withdrawal-money-page .stats-container-blue {
    background-color: #F0F7FF;
    border-radius: 12px;
    padding: 20px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.withdrawal-money-page .stat-item-flex {
    display: flex;
    align-items: center;
    gap: 16px;
}

.withdrawal-money-page .stat-icon-box {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background-color: #DBEAFE;
    flex-shrink: 0;
}

.withdrawal-money-page .icon-locked {
    color: #3B82F6;
}

.withdrawal-money-page .icon-min {
    color: #3B82F6;
}

.withdrawal-money-page .icon-time {
    color: #3B82F6;
}

.withdrawal-money-page .stat-label-text {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #2563EB;
}

.withdrawal-money-page .stat-value-text {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #111827;
}

.withdrawal-money-page .secure-info-box {
    background-color: #F9FAFB;
    border-radius: 12px;
    padding: 16px;
    width: 100%;
    display: flex;
    gap: 12px;
}

.withdrawal-money-page .secure-icon {
    color: #10B981;
    font-size: 18px;
    margin-top: 2px;
}

.withdrawal-money-page .secure-title {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 4px;
}

.withdrawal-money-page .secure-desc {
    display: block;
    font-size: 13px;
    color: #6B7280;
    line-height: 1.5;
    margin-bottom: 8px;
}

.withdrawal-money-page .history-link-custom {
    font-size: 14px;
    color: #3B82F6;
    text-decoration: none;
    font-weight: 500;
}

    .withdrawal-money-page .history-link-custom:hover {
        text-decoration: underline;
    }

/*================================
    Pop-Up After Click Login Button
==================================*/

.withdrawal-money-page .popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999;
    margin-top: 24px;
}

.withdrawal-money-page .verify-your-account {
    position: absolute;
    width: 448px;
    height: 573px;
    left: calc(50% - 448px / 2);
    top: calc(50% - 573px / 2 - 0.5px);
    background: #FFFFFF;
    box-shadow: 0px 25px 50px rgba(0, 0, 0, 0.25);
    border-radius: 16px;
    padding: 32px;
    text-align: center;
    font-family: 'Inter', sans-serif;
}

/* Close */
.withdrawal-money-page .close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    border: none;
    background: transparent;
    font-size: 20px;
    color: #9CA3AF;
}

/* Icon */
.withdrawal-money-page .icon-wrapper {
    width: 64px;
    height: 64px;
    background: #DBEAFE;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}

    .withdrawal-money-page .icon-wrapper i {
        font-size: 32px;
        color: #2563EB;
    }

/* Text */
.withdrawal-money-page .verify-your-account h2 {
    font-size: 24px;
    font-weight: 700;
    color: #1F2937;
    margin-bottom: 12px;
}

.withdrawal-money-page .subtitle {
    font-size: 14px;
    color: #4B5563;
    font-weight: 400;
    margin-bottom: 24px;
}

    .withdrawal-money-page .subtitle .phone {
        color: #2563EB;
        display: block;
        margin-top: 4px;
    }

/* OTP */
.withdrawal-money-page .otp-section label {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    display: block;
    text-align: left;
    margin-bottom: 12px;
}

.withdrawal-money-page .otp-inputs {
    display: flex;
    gap: 12px;
    justify-content: center;
}

    .withdrawal-money-page .otp-inputs input {
        width: 48px;
        height: 48px;
        border: 2px solid #D1D5DB;
        border-radius: 8px;
        font-size: 18px;
        text-align: center;
    }

/* Resend */
.withdrawal-money-page .resend {
    margin-top: 20px;
    font-size: 14px;
    color: #4B5563;
    font-weight: 400;
}

    .withdrawal-money-page .resend p {
        margin-bottom: 4px;
        color: #374151;
    }

    .withdrawal-money-page .resend span {
        color: #9CA3AF;
    }

/* Button */
.withdrawal-money-page .verify-btn {
    width: 100%;
    height: 56px;
    margin-top: 24px;
    background: #D1D5DB;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    color: #FFFFFF;
    cursor: not-allowed;
}

/* Divider */
.withdrawal-money-page hr {
    margin: 20px 0;
    height: 2px;
    border-color: #E5E7EB;
    opacity: 35;
}

/* Help */
.withdrawal-money-page .help .having-trouble {
    color: #6B7280;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 400;
}

.withdrawal-money-page .help .send-code {
    color: #2563EB;
    font-size: 12px;
    text-decoration: none;
    font-weight: 500;
}


/*=======================================
  Withdrawal Money History Page
 ========================================*/

.withdrawal-money-history .withdrawal-money-history-title {
    font-size: 20px;
    color: #535353;
    font-weight: 600;
}


/*=======================================
 Wallet Transaction Page
 ========================================*/
.wallet-transaction-page .wallet-transaction-header {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    height: auto;
    border-radius: 0px;
    margin-bottom: 16px;
}

.wallet-transaction-page .header-text-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wallet-transaction-page .main-header-title {
    font-size: 20px;
    font-weight: 600;
    color: #111827;
    margin: 0;
    line-height: 1.2;
}

.wallet-transaction-page .sub-header-description {
    font-size: 16px;
    color: #4B5563;
    font-weight: 400;
    margin: 0;
}

.wallet-transaction-page .btn-download-report {
    background-color: #2563EB;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 400;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s ease;
    white-space: nowrap;
}

    .wallet-transaction-page .btn-download-report:hover {
        background-color: #1D4ED8;
        color: #FFFFFF;
    }

.wallet-transaction-page .download-icon-style {
    font-size: 1.1rem;
}

.wallet-transaction-page .wallet-transaction-filter {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    gap: 13px;
    height: auto;
    background: #FFFFFF;
    border: 0.81314px solid #E2E8F0;
    box-shadow: 0px 0.81314px 1.62628px rgba(0, 0, 0, 0.05);
    border-radius: 9.75768px;
    flex: none;
    order: 1;
    flex-grow: 0;
}

.wallet-transaction-page .filter-label-text {
    font-size: 13px;
    font-weight: 500;
    color: #475569;
    margin-bottom: 6px;
    display: block;
}

.wallet-transaction-page .filter-input-control {
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    color: #1E293B;
    width: 100%;
    background-color: #FFFFFF;
    transition: border-color 0.2s;
}

    .wallet-transaction-page .filter-input-control:focus {
        outline: none;
        border-color: #2563EB;
        box-shadow: none;
    }

.wallet-transaction-page .search-group-wrapper {
    position: relative;
    display: flex;
    width: 100%;
}

.wallet-transaction-page .search-icon-prefix {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94A3B8;
    font-size: 16px;
}

.wallet-transaction-page .search-input-field {
    padding-left: 38px !important;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.wallet-transaction-page .btn-search-blue {
    background-color: #2563EB;
    color: #FFFFFF;
    border: none;
    border-radius: 0 8px 8px 0;
    padding: 9px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wallet-transaction-page .btn-export-green {
    background-color: #10B981;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    white-space: nowrap;
}

.wallet-transaction-page .btn-reset-text {
    background: transparent;
    border: none;
    color: #64748B;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px;
    font-size: 14px;
    white-space: nowrap;
}

.wallet-transaction-page .wallet-transaction-table {
    box-sizing: border-box;
    background: #FFFFFF;
    border: 0.942989px solid #F3F4F6;
    box-shadow: 0px 0.942989px 1.88598px rgba(0, 0, 0, 0.05);
    border-radius: 22.6317px;
    height: auto;
    overflow: hidden;
}

.wallet-transaction-page .custom-table-container {
    width: 100%;
    overflow-x: auto;
}

.wallet-transaction-page .txn-table-header {
    background-color: #F9FAFB;
    border-bottom: 1px solid #F3F4F6;
}

.wallet-transaction-page .txn-header-cell {
    padding: 16px;
    font-size: 14px;
    font-weight: 600;
    color: #6B7280;
    letter-spacing: 0.05em;
    background: #F9FAFB !important;
}

.wallet-transaction-page .txn-row-item {
    border-bottom: 1px solid #F3F4F6;
    transition: background 0.2s;
}

    .wallet-transaction-page .txn-row-item:hover {
        background-color: #FBFBFF;
    }

.wallet-transaction-page .txn-body-cell {
    padding: 20px 16px;
    vertical-align: middle;
}

.wallet-transaction-page .date-time-text {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.wallet-transaction-page .sub-date-text {
    font-size: 12px;
    color: #6B7280;
    margin: 0;
}

.wallet-transaction-page .icon-box-small {
    width: 37.72px;
    height: 37.72px;
    border-radius: 11.32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.wallet-transaction-page .bg-light-blue {
    background-color: #EBF5FF;
    color: #3B82F6;
}

.wallet-transaction-page .bg-light-purple1 {
    background-color: #F3E8FF;
    color: #9333EA;
}

.wallet-transaction-page .bg-light-purple {
    background-color: #F5F3FF;
    color: #8B5CF6;
}

.wallet-transaction-page .bg-light-green {
    background-color: #ECFDF5;
    color: #10B981;
}

.wallet-transaction-page .bg-light-red {
    background-color: #FEF2F2;
    color: #EF4444;
}

.wallet-transaction-page .type-label-text {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    margin-left: 12px;
}

.wallet-transaction-page .summary-main-text {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.wallet-transaction-page .summary-sub-text {
    font-size: 12px;
    color: #6B7280;
    margin: 0;
}

.wallet-transaction-page .amt-negative {
    color: #EF4444;
    font-weight: 700;
}

.wallet-transaction-page .amt-positive {
    color: #10B981;
    font-weight: 700;
}

.wallet-transaction-page .amt-neutral {
    color: #6B7280;
    font-weight: 700;
}

.wallet-transaction-page .status-pill-success {
    background-color: #DCFCE7;
    color: #166534;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.wallet-transaction-page .status-pill-failed {
    background-color: #FEE2E2;
    color: #991B1B;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.wallet-transaction-page .ref-id-text {
    font-size: 13px;
    color: #6B7280;
}

.wallet-transaction-page .transaction-table-pagination {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    height: auto;
    border-radius: 0px;
    width: 100%;
}

.wallet-transaction-page .pagination-info-text {
    font-size: 14px;
    color: #6B7280;
    font-weight: 500;
}

.wallet-transaction-page .custom-pagination-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wallet-transaction-page .page-control-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6B7280;
    text-decoration: none;
    transition: all 0.2s;
}

    .wallet-transaction-page .page-control-btn:hover {
        border-radius: 8px;
        border: none;
        background-color: #2563EB;
        color: #FFFFFF;
    }

.wallet-transaction-page .page-num-link {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    color: #6B7280;
    transition: 0.3s;
}

    .wallet-transaction-page .page-num-link.active-page {
        background-color: #2563EB;
        color: #FFFFFF;
    }

    .wallet-transaction-page .page-num-link:hover:not(.active-page) {
        background-color: #2563EB;
        color: #FFFFFF;
    }

/* ========================================
   Data table style Start
   ======================================== */

.dataTables_wrapper .dataTables_filter {
    margin-bottom: 15px;
}
/* ========================================
   Data table style End
   ======================================== */
/* ========================================
   Ticket Management Add New Action Page
   ======================================== */
.add-menu .add-new-action-title {
    font-size: 18px;
    font-weight: 600;
    color: #262626;
}

.add-menu .action-form {
    border-radius: 15.47px;
    background: #FFFFFF;
    border: 0.97px solid #E5E7EB;
    margin-left: 0;
    margin-top: 16px;
}

    .add-menu .action-form .rest-action {
        width: 92.40625px;
        height: 50px;
        margin-top: 25.47px;
        border-radius: 7.73px;
        border: 0.97px solid #D1D5DB;
        font-size: 13.54px;
        font-weight: 400;
        color: #374151;
    }

    .add-menu .action-form .save-action {
        background: #2563EB;
        width: 137.859375px;
        height: 50px;
        margin-top: 25.47px;
        border-radius: 7.73px;
        border: 0.97px solid #D1D5DB;
        font-size: 13.54px;
        font-weight: 500;
        color: #FFFFFF;
    }

.action-form .action-name {
    width: 811.734375px;
    margin-top: 5px;
    height: 50px;
}

.action-form .actionName-box {
    width: 100%;
    margin-top: 0px;
}

.add-menu .add-list {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    font-family: "Inter", sans-serif;
    margin-top: 16px;
}

    /* --- Header --- */
    .add-menu .add-list .top-bar {
        padding: 18px 22px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

.add-list .active-btn button {
    background: #10B981;
    width: 96.203125px;
    height: 36px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #FFFFFF;
    border: 1px solid #E5E7EB;
}

.add-list .inactive-btn button {
    background: #E5E7EB;
    width: 106.5625px;
    height: 36px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    border: 1px solid #E5E7EB;
}

.add-menu .add-list .search-box {
    position: relative;
}

    .add-menu .add-list .search-box i {
        position: absolute;
        left: 10px;
        top: 16px;
        color: #9CA3AF;
    }

    .add-menu .add-list .search-box input {
        /*        width: 309.37548828125px;*/
        height: 46px;
        border: 0.97px solid #D1D5DB;
        border-radius: 7.73px;
        padding-left: 36px;
        font-size: 13.54px;
        width: 100%;
    }

.add-list .sub-top-bar {
    padding: 18px 22px;
}

.add-menu .add-list .menus-table td {
    padding: 22px 16px;
    text-align: center;
    font-size: 14px;
    color: #4B5563;
    border-bottom: 1px solid #E5E7EB;
    font-weight: 400;
}

.add-menu .add-list input:checked + .slider {
    background: #10B981;
}

.add-menu .add-list-footer {
    padding: 30px 25px;
}

    .add-menu .add-list-footer .page-show-range {
        font-size: 14px;
        font-weight: 400;
        color: #4B5563;
    }

    .add-menu .add-list-footer .btn-left {
        border: 1px solid #D1D5DB;
        height: 38px;
        width: 34.75px;
        font-size: 14px;
        color: #4B5563;
        border-radius: 8px;
        background: white;
    }

    .add-menu .add-list-footer .page-number {
        border: 1px solid #D1D5DB;
        height: 38px;
        width: 34.75px;
        font-size: 14px;
        color: #4B5563;
        border-radius: 8px;
        background: #2563EB;
    }

    .add-menu .add-list-footer .btn-right {
        border: 1px solid #D1D5DB;
        height: 38px;
        width: 34.75px;
        font-size: 14px;
        color: #4B5563;
        border-radius: 8px;
        background: white;
    }

/* ========================================
   Create Ticket Page
   ======================================== */

.create-ticket-page .setting-card {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    padding: 28px;
    width: 70%;
}

.create-ticket-page .card-header-title {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    border-bottom: 2px solid #F3F4F6;
    padding-bottom: 12px;
}

.create-ticket-page .form-label {
    font-size: 14px;
    color: #374151;
    margin-bottom: 8px;
}

.create-ticket-page .form-control, .form-select {
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    padding: 10px 14px;
    transition: all 0.2s;
}

    .create-ticket-page .form-control:focus, .form-select:focus {
        border-color: #2563EB;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    }

.create-ticket-page .input-group-text-custom {
    background-color: #F9FAFB;
    border: 1px solid #D1D5DB;
    border-left: none;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    color: #6B7280;
}

    .create-ticket-page .input-group-text-custom:hover {
        color: #2563EB;
        background-color: #EFF6FF;
    }

.create-ticket-page .btn-primary {
    background-color: #2563EB;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    padding: 10px 24px;
}

.create-ticket-page .btn-light {
    background-color: #F3F4F6;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    font-weight: 600;
    color: #4B5563;
}

.create-ticket-page .custom-modal-content {
    border-radius: 15px;
    border: none;
    overflow: hidden;
}
.max-w-800 {
    max-width: 800px
}

.create-ticket-page .modal-header-custom {
    background-color: #F9FAFB;
    border-bottom: 1px solid #F3F4F6;
    padding: 15px 20px;
}

/* ========================================
   My Profile Page
   ======================================== */

.my-profile-page .profile-edit-title {
    font-weight: 600;
    color: #535353;
    font-size: 20px;
}

.my-profile-page .change-profile-photo {
    box-sizing: border-box;
    height: auto;
    background: #FFFFFF;
    border: 0.926136px solid #E5E7EB;
    box-shadow: 0px 0.926136px 1.85227px rgba(0, 0, 0, 0.05);
    border-radius: 11.1136px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 18px 24px;
    gap: 10px;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
    margin-bottom: 16px;
}

.my-profile-page .avatar-container-wrapper {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.my-profile-page .profile-avatar-image {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    object-fit: cover;
    border: 2px solid #F3F4F6;
}

.my-profile-page .camera-icon-badge {
    position: absolute;
    bottom: -9px;
    right: 0;
    width: 28px;
    height: 28px;
    background-color: #2563EB;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 14px;
    border: 2px solid #FFFFFF;
    cursor: pointer;
}

.my-profile-page .profile-content-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.my-profile-page .profile-title-label {
    font-size: 16px;
    font-weight: 500;
    color: #111827;
    margin: 0;
}

.my-profile-page .profile-subtitle-hint {
    font-size: 13px;
    font-weight: 400;
    color: #6B7280;
    margin: 0;
}

.my-profile-page .personal-information {
    box-sizing: border-box;
    padding: 18px;
    padding-top: 0;
    height: auto;
}

.my-profile-page .section-header-text {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 24px;
}

.my-profile-page .label-custom-style {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 8px;
    display: block;
}

.my-profile-page .input-container-wrapper {
    position: relative;
    margin-bottom: 20px;
}

.my-profile-page .form-control-custom {
    background-color: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 15px;
    color: #111827;
    width: 100%;
    transition: 0.3s ease;
}

    .my-profile-page .form-control-custom:focus {
        outline: none;
        border-color: #2563EB;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    }

.my-profile-page .form-control-readonly {
    color: #6B7280;
    cursor: not-allowed;
}

.my-profile-page .verified-badge-pill {
    position: absolute;
    right: 12px;
    top: 70%;
    transform: translateY(-50%);
    background-color: #DCFCE7;
    color: #166534;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 9260.44px;
}

.my-profile-page .lock-icon-style {
    position: absolute;
    right: 16px;
    top: 70%;
    transform: translateY(-50%);
    color: #9CA3AF;
}

/*business-information*/

.my-profile-page .business-information {
    height: auto;
}

.my-profile-page .business-kyc {
    font-size: 16px;
    color: #111827;
    font-weight: 600;
}

.my-profile-page .contact-kyc {
    font-size: 16px;
    color: #111827;
    font-weight: 600;
}

.my-profile-page .input-group-wrapper {
    position: relative;
    margin-bottom: 20px;
}

.my-profile-page .form-input-field {
    background-color: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 15px;
    color: #111827;
    width: 100%;
    transition: border-color 0.3s ease;
}

    .my-profile-page .form-input-field:focus {
        outline: none;
        border-color: #2563EB;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    }

.my-profile-page .form-select-field {
    appearance: none;
    background-image: url("../image/common/drop-arrow.svg");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px 12px;
}

.my-profile-page .textarea-field {
    height: 100px;
    resize: none;
}

.my-profile-page .verified-status-pill {
    position: absolute;
    right: 40px;
    top: 70%;
    transform: translateY(-50%);
    background-color: #DCFCE7;
    color: #166534;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 100px;
}

.my-profile-page .field-lock-icon {
    position: absolute;
    right: 16px;
    top: 70%;
    transform: translateY(-50%);
    color: #9CA3AF;
}

/* Business Logo Popup css */

.my-profile-page .view-logo-btn {
    position: absolute;
    right: 12px;
    top: 70%;
    transform: translateY(-50%);
    background: #F3F4F6;
    border: none;
    color: #4B5563;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
}

    .my-profile-page .view-logo-btn:hover {
        background: #E5E7EB;
        color: #2563EB;
    }

/* Modal / Popup Overlay */
.my-profile-page .logo-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    backdrop-filter: blur(2px);
}

/* Modal Content Box */
.my-profile-page .logo-modal-content {
    background: #FFFFFF;
    width: 320px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    overflow: hidden;
    animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-my-profile:hover {
    color: white;
    background: #0d6efd;
}

.my-profile-page .modal-header-custom {
    padding: 12px 16px;
    border-bottom: 1px solid #F3F4F6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: #374151;
    font-size: 14px;
}

.my-profile-page .modal-close-icon {
    background: none;
    border: none;
    font-size: 18px;
    color: #9CA3AF;
    cursor: pointer;
}

    .my-profile-page .modal-close-icon:hover {
        color: #EF4444;
    }

.my-profile-page .modal-body-custom {
    padding: 20px;
    text-align: center;
}

    .my-profile-page .modal-body-custom img {
        max-width: 100%;
        max-height: 200px;
        border-radius: 8px;
        object-fit: contain;
    }

/*banking-details*/

.my-profile-page .banking-details {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    height: auto;
}

.my-profile-page .bank-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

.my-profile-page .bank-main-title {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

.my-profile-page .bank-sub-title {
    font-size: 14px;
    color: #6B7280;
}

.my-profile-page .status-badge-red {
    background-color: #FEF2F2;
    color: #991B1B;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.my-profile-page .label-custom {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
}

.my-profile-page .input-custom {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    font-size: 14px;
    color: #111827;
    outline: none;
    background-color: #FFFFFF;
}

.my-profile-page .input-readonly {
    background-color: #F9FAFB;
    color: #9CA3AF;
}

.my-profile-page .helper-text {
    font-size: 12px;
    color: #9CA3AF;
    margin-top: 4px;
}

.my-profile-page .secure-note-blue {
    width: 100%;
    background-color: #EFF6FF;
    border: 1px solid #DBEAFE;
    border-radius: 6px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #1E40AF;
}

.my-profile-page .btn-submit-main {
    padding: 10px 40px;
    background: #2563EB;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    color: #ffff;
    font-weight: 600;
    font-size: 15px;
    transition: 0.2s;
}

.my-profile-page .btn-cancel-custom {
    padding: 10px 40px;
    background: #FFFFFF;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    color: #374151;
    font-weight: 600;
    font-size: 15px;
    transition: 0.2s;
}

.my-profile-page .btn-save-custom {
    padding: 10px 40px;
    background: #D1D5DB;
    border: none;
    border-radius: 8px;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 15px;
    cursor: not-allowed;
}

.my-profile-page .actions-flex {
    display: flex;
    gap: 12px;
    width: 100%;
    justify-content: flex-end;
    margin-top: 10px;
}


/*kyc-documents*/

.my-profile-page .kyc-type-card {
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 16px;
}

.my-profile-page .kyc-documents {
    box-sizing: border-box;
    background: #FFFFFF;
    height: auto;
}

.my-profile-page .kyc-header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 22px;
}

.my-profile-page .kyc-main-title {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

.my-profile-page .kyc-status-count {
    font-size: 13px;
    color: #6B7280;
    font-weight: 400;
}

.my-profile-page .doc-item-card {
    display: flex;
    align-items: center;
    background: #F9FBFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    transition: all 0.2s ease;
}

    .my-profile-page .doc-item-card:hover {
        border-color: #E5E7EB;
        background-color: #F9FAFB;
    }

.my-profile-page .doc-icon-box {
    width: 40px;
    height: 40px;
    background: #ffff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    flex-shrink: 0;
    font-size: 17px;
}

.my-profile-page .bg-blue-light {
    background-color: #EFF6FF;
    color: #2563EB;
}

.my-profile-page .bg-green-light {
    background-color: #F0FDF4;
    color: #16A34A;
}

.my-profile-page .bg-business-lic {
    background-color: #F3E8FF;
    color: #6B21A8;
}

.my-profile-page .bg-gst {
    background-color: #DCFCE7;
    color: #15803D;
}

.my-profile-page .bg-business-pan {
    background-color: #E0E7FF;
    color: #4338CA;
}

.my-profile-page .bg-orange-light {
    background-color: #FFF7ED;
    color: #EA580C;
}

.my-profile-page .doc-info-content {
    flex-grow: 1;
}

.my-profile-page .doc-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.my-profile-page .doc-name-text {
    font-size: 15px;
    font-weight: 500;
    color: #111827;
}

.my-profile-page .doc-meta-text {
    font-size: 13px;
    color: #6B7280;
    margin-top: 2px;
    font-weight: 400;
}

.my-profile-page .status-pill-custom {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
}

.my-profile-page .status-verified {
    background-color: #DCFCE7;
    color: #166534;
}

.my-profile-page .status-pending {
    background-color: #FEF3C7;
    color: #92400E;
}

.my-profile-page .doc-action-btns {
    display: flex;
    gap: 12px;
    color: #2563EB;
    font-size: 18px;
}

.my-profile-page .action-link-btn {
    color: #2563EB;
    cursor: pointer;
    text-decoration: none;
}

.add-merchant-input-p {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

/*============================================
    My Profile tabs CSS
=============================================*/
.my-profile-page .profile-steps-card, .content-card {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    padding: 20px;
}

.my-profile-page .steps-title {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 24px;
}

.my-profile-page .custom-step-tabs .nav-link {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    margin-bottom: 16px;
    padding: 10px 16px;
    transition: all 0.3s ease;
    width: 100%;
}

    .my-profile-page .custom-step-tabs .nav-link.active {
        border: 2px solid #2563EB !important;
        background-color: #F8FAFF !important;
    }

.my-profile-page .step-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.my-profile-page .step-number {
    width: 32px;
    height: 32px;
    background: #E5E7EB;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #6B7280;
    flex-shrink: 0;
}

.my-profile-page .nav-link.active .step-number {
    background: #2563EB;
    color: #fff;
}

.my-profile-page .step-number.step-success {
    background: #22C55E !important;
    color: #fff !important;
}

.my-profile-page .step-name {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 4px;
}

.my-profile-page .status-pill {
    font-size: 12px;
    font-weight: 500;
    padding: 2px 10px;
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.my-profile-page .status-pending {
    background: #FEF3C7;
    color: #92400E;
}

.my-profile-page .status-accepted {
    background: #DCFCE7;
    color: #166534;
}

.my-profile-page .status-default {
    color: #4B5563;
}
.my-profile-page .status-rejected {
    color: #dc2626;
    background: #FFDCDC;
}


/* ========================================
   API Transaction Page
   ======================================== */

.api-transaction-page .api-transaction-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    gap: 16px;
    height: auto;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

.api-transaction-page .header-main-title {
    font-size: 20px;
    font-weight: 600;
    color: #334155;
    margin: 0;
}

.api-transaction-page .toggle-switch-container {
    display: flex;
    background-color: #F1F5F9;
    padding: 4px;
    border-radius: 8px;
    gap: 4px;
}

.api-transaction-page .toggle-tab-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.api-transaction-page .active-tab-white {
    background-color: #FFFFFF;
    color: #1E293B;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
}

.api-transaction-page .inactive-tab-text {
    background-color: transparent;
    color: #64748B;
}

.api-transaction-page .tab-icon-size {
    font-size: 16px;
}

.api-transaction-page .api-transaction-cards {
    height: auto;
    border-radius: 0px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    margin-top: 20px;
}

.api-transaction-page .api-data-card-box {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    transition: transform 0.2s;
}

.api-transaction-page .card-content-left {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.api-transaction-page .card-label-heading {
    font-size: 14.15px;
    font-weight: 500;
    color: #4B5563;
    margin: 0;
}

.api-transaction-page .card-main-value {
    font-size: 30.32px;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.api-transaction-page .icon-rounded-bg {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.api-transaction-page .bg-soft-blue {
    background-color: #EFF6FF;
    color: #3B82F6;
}

.api-transaction-page .bg-soft-green {
    background-color: #ECFDF5;
    color: #10B981;
}

.api-transaction-page .bg-soft-red {
    background-color: #FEF2F2;
    color: #EF4444;
}

.api-transaction-page .bg-soft-purple {
    background-color: #F5F3FF;
    color: #8B5CF6;
}

.api-transaction-page .api-transaction-filter {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    gap: 13px;
    height: auto;
    background: #FFFFFF;
    border: 0.81314px solid #E2E8F0;
    box-shadow: 0px 0.81314px 1.62628px rgba(0, 0, 0, 0.05);
    border-radius: 9.75768px;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
    margin: 20px 0;
}

.api-transaction-page .filter-input-label {
    font-size: 13px;
    font-weight: 500;
    color: #64748B;
    margin-bottom: 6px;
    display: block;
}

.api-transaction-page .filter-select-field, .filter-date-field, .filter-search-input {
    width: 100%;
    height: 42px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 0 12px;
    font-size: 14px;
    color: #1E293B;
    background-color: #FFFFFF;
}

.api-transaction-page .filter-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.api-transaction-page .search-icon-prefix {
    position: absolute;
    left: 12px;
    color: #94A3B8;
}

.api-transaction-page .filter-search-input {
    padding-left: 35px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

    .api-transaction-page .filter-search-input:focus {
        outline: none;
        box-shadow: none;
        border: 1px solid #CBD5E1 !important;
    }

.api-transaction-page .search-submit-btn {
    background-color: #2563EB;
    color: white;
    border: none;
    height: 42px;
    padding: 0 15px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.api-transaction-page .export-dropdown-btn {
    background-color: #10B981;
    color: white;
    border: none;
    height: 42px;
    border-radius: 8px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.export-filter-all {
    background-color: #10B981;
    color: white;
    border: none;
    height: 42px;
    border-radius: 8px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.reset-filter-all {
    color: #64748B;
    text-decoration: none;
    padding: 12px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    background: none;
    border: none;
}

.api-transaction-page .api-transaction-table {
    box-sizing: border-box;
    height: auto;
    background: #FFFFFF;
    border: 0.978996px solid #E5E7EB;
    box-shadow: 0px 0.978996px 1.95799px rgba(0, 0, 0, 0.05);
    border-radius: 11.7479px;
    flex: none;
    order: 2;
    flex-grow: 0;
    padding: 0;
    overflow: hidden;
    margin-top: 20px;
}

.api-transaction-page .custom-table-container {
    overflow-x: auto;
}

.api-transaction-page .table-data-main {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.api-transaction-page .table-header-row {
    background-color: #F9FAFB;
    border-bottom: 1px solid #E5E7EB;
}

.api-transaction-page .header-cell-text {
    padding: 16px;
    font-weight: 600;
    color: #4B5563;
    text-align: left;
    white-space: nowrap;
}

.api-transaction-page .body-cell-data {
    padding: 16px;
    color: #1F2937;
    border-bottom: 1px solid #F3F4F6;
    vertical-align: middle;
}

.api-transaction-page .txn-id-link {
    color: #2563EB;
    text-decoration: none;
    font-weight: 400;
}

.api-transaction-page .badge-status {
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.api-transaction-page .status-success {
    background-color: #DCFCE7;
    color: #166534;
}

.api-transaction-page .status-refunded {
    background-color: #DBEAFE;
    color: #1E40AF;
}

.api-transaction-page .status-failed {
    background-color: #FEE2E2;
    color: #991B1B;
}

.api-transaction-page .method-badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
}

.api-transaction-page .method-post {
    background-color: #E0E7FF;
    color: #4338CA;
}

.api-transaction-page .method-get {
    background-color: #ECFDF5;
    color: #047857;
}

.api-transaction-page .http-code-badge {
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 600;
}

.api-transaction-page .code-200 {
    background-color: #DCFCE7;
    color: #166534;
}

.api-transaction-page .code-201 {
    background-color: #DCFCE7;
    color: #166534;
}

.api-transaction-page .code-400 {
    background-color: #FEE2E2;
    color: #991B1B;
}

.api-transaction-page .text-muted-time {
    color: #6B7280;
    font-size: 13px;
}

/* ========================================
   Commission Overview Page
   ======================================== */

.commission-overview-page .commission-overview-title {
    color: #6B7280;
    font-size: 20px;
    font-weight: 600;
}

.commission-overview-page .commission-overview-filter {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    gap: 13px;
    height: auto;
    background: #FFFFFF;
    border: 0.81314px solid #E2E8F0;
    box-shadow: 0px 0.81314px 1.62628px rgba(0, 0, 0, 0.05);
    border-radius: 9.75768px;
    flex: none;
    order: 1;
    flex-grow: 0;
}

.commission-overview-page .filter-label-text {
    font-size: 13px;
    font-weight: 500;
    color: #64748B;
    margin-bottom: 6px;
    display: block;
}

.commission-overview-page .filter-dropdown-select {
    width: 100%;
    height: 42px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 0 12px;
    font-size: 14px;
    color: #1E293B;
    background-color: #FFFFFF;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    appearance: none;
}

.commission-overview-page .search-group-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.commission-overview-page .search-input-field {
    width: 60%;
    height: 42px;
    border: 1px solid #E2E8F0;
    border-radius: 8px 0 0 8px;
    padding: 0 12px 0 35px;
    font-size: 14px;
    color: #1E293B;
}

    .commission-overview-page .search-input-field:focus {
        outline: none;
        box-shadow: none;
        border: 1px solid #E2E8F0;
    }

.commission-overview-page .search-icon-inside {
    position: absolute;
    left: 12px;
    color: #94A3B8;
    font-size: 16px;
}

.commission-overview-page .search-action-btn {
    background-color: #2563EB;
    color: #FFFFFF;
    border: none;
    height: 42px;
    padding: 0 15px;
    border-radius: 0 8px 8px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.commission-overview-page .dtm-fix-commission-container {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    margin-top: 20px;
    overflow: hidden;
}

.commission-overview-page .section-main-title {
    padding: 20px 24px 10px;
    font-size: 20px;
    font-weight: 600;
    color: #111827;
}

.commission-overview-page .card-wrapper {
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    margin: 15px 24px 25px;
    background: #fff;
}

.commission-overview-page .header-section {
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #F3F4F6;
}

.commission-overview-page .icon-box-blue {
    width: 40px;
    height: 40px;
    background-color: #EFF6FF;
    color: #3B82F6;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.commission-overview-page .main-title-text {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.commission-overview-page .sub-title-text {
    font-size: 14px;
    color: #6B7280;
    margin: 0;
    font-weight: 400;
}

.commission-overview-page .active-status-badge {
    background-color: #ECFDF5;
    color: #10B981;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.commission-overview-page .status-dot-green {
    width: 6px;
    height: 6px;
    background-color: #10B981;
    border-radius: 50%;
}

.commission-overview-page .grid-table-header {
    background-color: #F9FAFB;
    border-bottom: 1px solid #E5E7EB;
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 600;
    color: #4B5563;
}

.commission-overview-page .grid-table-row {
    padding: 16px 20px;
    border-bottom: 1px solid #F3F4F6;
    font-size: 14px;
    color: #111827;
    align-items: center;
    transition: background 0.2s;
}

    .commission-overview-page .grid-table-row:hover {
        background-color: #FBFBFE;
    }

    .commission-overview-page .grid-table-row:last-child {
        border-bottom: none;
    }

.commission-overview-page .font-weight-bold-val {
    font-weight: 600;
}

.commission-overview-page .type-badge-fix {
    background-color: #EFF6FF;
    color: #2563EB;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.commission-overview-page .mobile-label {
    display: none;
    font-size: 11px;
    text-transform: uppercase;
    color: #9CA3AF;
    font-weight: 700;
    margin-bottom: 2px;
}

.commission-overview-page .percentage-commission {
    box-sizing: border-box;
    height: auto;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    margin-top: 20px;
}

.commission-overview-page .percentage-commission-title {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    padding: 16px;
}

.commission-overview-page .comm-table-responsive {
    width: 100%;
    overflow-x: auto;
}

.commission-overview-page .comm-data-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 1100px;
}

.commission-overview-page .comm-thead {
    background-color: #F9FAFB;
    border-bottom: 1px solid #E5E7EB;
}

.commission-overview-page .comm-th {
    padding: 16px 24px;
    font-size: 14px;
    font-weight: 600;
    color: #4B5563;
    text-align: left;
}

.commission-overview-page .comm-td {
    padding: 20px 24px;
    vertical-align: middle;
    border-bottom: 1px solid #F3F4F6;
}

.commission-overview-page .operator-flex {
    display: flex;
    align-items: center;
    gap: 12px;
}

.commission-overview-page .operator-icon-box {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.commission-overview-page .bg-blue-soft {
    background-color: #EFF6FF;
    color: #3B82F6;
}

.commission-overview-page .bg-red-soft {
    background-color: #FEF2F2;
    color: #EF4444;
}

.commission-overview-page .bg-purple-soft {
    background-color: #F5F3FF;
    color: #8B5CF6;
}

.commission-overview-page .bg-green-soft {
    background-color: #ECFDF5;
    color: #10B981;
}

.commission-overview-page .bg-yellow-soft {
    background-color: #FFFBEB;
    color: #F59E0B;
}

.commission-overview-page .operator-name {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}

.commission-overview-page .operator-sub {
    font-size: 13px;
    color: #6B7280;
}

.commission-overview-page .code-badge {
    font-family: monospace;
    font-size: 13px;
    color: #374151;
    font-weight: 600;
    background: #F3F4F6;
    padding: 4px 8px;
    border-radius: 4px;
}

.commission-overview-page .text-dim {
    font-size: 14px;
    color: #6B7280;
}

.commission-overview-page .status-active {
    color: #10B981;
    font-weight: 600;
    font-size: 14px;
}

.commission-overview-page .status-deactive {
    color: #EF4444;
    font-weight: 600;
    font-size: 14px;
}

.commission-overview-page .update-info {
    font-size: 13px;
    color: #4B5563;
}

.commission-overview-page .update-by {
    display: block;
    font-size: 12px;
    color: #9CA3AF;
}

.commission-overview-page .form-switch .form-check-input {
    width: 40px;
    height: 20px;
    cursor: pointer;
}

.commission-overview-page .comm-footer {
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #FFFFFF;
}

.commission-overview-page .results-text {
    font-size: 14px;
    color: #6B7280;
}

.commission-overview-page .pagination-link {
    padding: 8px 16px;
    border: 1px solid #E5E7EB;
    background: #FFFFFF;
    border-radius: 8px;
    font-size: 14px;
    color: #374151;
    text-decoration: none;
    transition: 0.2s;
}

.commission-overview-page .page-active {
    background-color: #2563EB;
    color: #FFFFFF;
    border-color: #2563EB;
}

/*=========================================
    Service List Page CSS 
===========================================*/

.service-overview-wrapper {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    padding: 20px 0;
}

.so-card {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e0e6ed;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
    margin-bottom: 24px;
}

    .so-card:hover {
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
    }

.so-header {
    background: #f8f9fc;
    padding: 20px;
    border-bottom: 1px solid #e0e6ed;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.so-icon-container {
    width: 48px;
    height: 48px;
    background: #eef2ff;
    color: #4e73df;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 1.2rem;
}

.so-title-area {
    flex: 1;
}

.so-main-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #2e384d;
    margin-bottom: 4px;
    display: block;
}

.so-pricing-info {
    display: flex;
    gap: 15px;
    font-size: 0.85rem;
    color: #6c757d;
}

    .so-pricing-info strong {
        color: #495057;
    }

.so-status-badge {
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.so-status-active {
    background: #e1f7ec;
    color: #0d9488;
}

.so-status-inactive {
    background: #fff1f2;
    color: #e11d48;
}

.so-body {
    padding: 20px;
}

.so-body-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: #adb5bd;
    text-transform: uppercase;
    margin-bottom: 15px;
    display: block;
}

.so-service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.so-service-item {
    background: #f1f5f9;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #475569;
    display: flex;
    align-items: center;
    border: 1px solid transparent;
    transition: all 0.2s;
}

    .so-service-item:hover {
        background: #fff;
        border-color: #cbd5e1;
        color: #1e293b;
    }

    .so-service-item::before {
        content: "•";
        color: #4e73df;
        font-weight: bold;
        margin-right: 10px;
    }

@media (max-width: 576px) {
    .so-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .so-status-badge {
        align-self: flex-start;
    }
}

/* Switch button And popup */

/* 1. Toggle Button Design */
.otp-service-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 22px;
}

    .otp-service-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.otp-service-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .3s;
    border-radius: 20px;
}

    .otp-service-slider:before {
        position: absolute;
        content: "";
        height: 16px;
        width: 16px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: .3s;
        border-radius: 50%;
    }

input:checked + .otp-service-slider {
    background-color: #007bff;
}

    input:checked + .otp-service-slider:before {
        transform: translateX(22px);
    }

/* 2. OTP Box Styling - Compact & Clean */
.otp-field-container {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.otp-box {
    width: 45px;
    height: 45px; /* Size kam ki hai */
    border: 1.5px solid #dee2e6;
    border-radius: 8px;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    background: #fff;
    transition: 0.2s;
}

    .otp-box:focus {
        border-color: #4285f4;
        outline: none;
        box-shadow: 0 0 0 3px rgba(66,133,244,0.1);
    }
    /* Remove arrows from number input */
    .otp-box::-webkit-inner-spin-button, .otp-box::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

/* 3. Icon Styling */
.otp-icon-wrapper {
    display: flex;
    justify-content: center;
}

.otp-icon-dashed {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #eef4ff;
    border: 2px dashed #4285f4;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 4. Verify Button */
.btn-verify-main {
    background-color: #007bff !important;
    color: white !important;
    border: none;
    border-radius: 8px;
}

    .btn-verify-main:enabled {
        background-color: #4285f4;
    }

/* ========================================
   Income Report Page
 ======================================== */

.income-report-page .income-report-title {
    font-size: 20px;
    font-weight: 600;
    color: #535353;
}

.income-report-page .wallet-payment-cards {
    height: auto;
    box-sizing: border-box;
    border-radius: 0px;
}

.income-report-page .custom-card-container {
    background: #FFFFFF;
    border: 0.927623px solid #E5E7EB;
    box-shadow: 0px 0.927623px 1.85525px rgba(0, 0, 0, 0.05);
    border-radius: 11.1315px;
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.income-report-page .card-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.income-report-page .status-badge-live {
    background-color: #F3F4F6;
    color: #6B7280;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
}

.income-report-page .status-badge-pending {
    background-color: #FFF7ED;
    color: #C2410C;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
}

.income-report-page .status-badge-active {
    background-color: #F0FDF4;
    color: #166534;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
}

.income-report-page .card-label-text {
    margin-top: 8px;
    color: #6B7280;
    font-size: 13px;
    font-weight: 500;
}

.income-report-page .card-value-text {
    color: #111827;
    font-size: 22.13px;
    font-weight: 700;
}

.income-report-page .trend-up-text {
    color: #10B981;
    font-size: 12px;
    font-weight: 600;
}

.income-report-page .sub-info-text {
    color: #6B7280;
    font-size: 12px;
}

.income-report-page .verified-text {
    color: #10B981;
    font-size: 12px;
    font-weight: 500;
}

.income-report-page .card-icon-box.bg-rupee {
    color: #16A34A !important;
    background: #DCFCE7 !important;
}

.income-report-page .card-icon-box.bg-setteled {
    color: #EA580C;
    background: #FFEDD5;
}

.income-report-page .card-icon-box.bg-transaction {
    color: #9333EA;
    background: #F3E8FF;
}

.income-report-page .badge-percentage {
    color: #16A34A;
    background: #F0FDF4;
    border-radius: 8.37px;
    font-size: 13px;
    padding: 2px 10px;
}

.income-report-page .badge-total {
    color: #9333EA;
    background: #FAF5FF;
    border-radius: 8.37px;
    font-size: 13px;
    padding: 2px 10px;
}

.income-report-page .badge-pending {
    color: #EA580C;
    background: #FFF7ED;
    border-radius: 8.37px;
    font-size: 13px;
    padding: 2px 10px;
}

.income-report-page .income-report-table {
    box-sizing: border-box;
    height: auto;
    background: #FFFFFF;
    border: 1.04044px solid #F3F4F6;
    box-shadow: 0px 1.04044px 2.08088px rgba(0, 0, 0, 0.05);
    border-radius: 16.6471px;
    padding: 0;
    overflow: hidden;
    margin-top: 20px;
}

.income-report-page .report-table-responsive {
    width: 100%;
    overflow-x: auto;
}

.income-report-page .income-data-grid {
    width: 100%;
    border-collapse: collapse;
    min-width: 1100px;
}

.income-report-page .income-thead {
    background-color: #F9FAFB;
    border-bottom: 1px solid #F3F4F6;
}

.income-report-page .income-th {
    padding: 14px 20px;
    font-size: 13px;
    font-weight: 600;
    color: #6B7280;
    text-align: left;
}

.income-report-page .income-td {
    padding: 16px 20px;
    vertical-align: middle;
    border-bottom: 1px solid #F3F4F6;
}

.income-report-page .date-text {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.income-report-page .time-text {
    font-size: 12px;
    color: #9CA3AF;
}

.income-report-page .service-info-flex {
    display: flex;
    align-items: center;
    gap: 12px;
}

.income-report-page .service-icon-bg {
    width: 41.42px;
    height: 41.42px;
    border-radius: 8.32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.income-report-page .bg-blue-light {
    background-color: #EFF6FF;
    color: #3B82F6;
}

.income-report-page .bg-purple-light {
    background-color: #F5F3FF;
    color: #8B5CF6;
}

.income-report-page .bg-green-light {
    background-color: #ECFDF5;
    color: #10B981;
}

.income-report-page .bg-yellow-light {
    background-color: #FFFBEB;
    color: #F59E0B;
}

.income-report-page .bg-pink-light {
    background-color: #FDF2F8;
    color: #EC4899;
}

.income-report-page .bg-indigo-light {
    background-color: #EEF2FF;
    color: #6366F1;
}

.income-report-page .service-main-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.income-report-page .service-sub-name {
    font-size: 12px;
    color: #9CA3AF;
}

.income-report-page .amount-bold {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.income-report-page .earned-success {
    color: #10B981;
    font-weight: 600;
    font-size: 14px;
}

.income-report-page .earned-pending {
    color: #F97316;
    font-weight: 600;
    font-size: 14px;
}

.income-report-page .comm-detail-subtext {
    display: block;
    font-size: 12px;
    color: #9CA3AF;
}

.income-report-page .status-pill {
    padding: 5px 14px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.income-report-page .status-pill-success {
    background-color: #DCFCE7;
    color: #15803D;
}

.income-report-page .status-pill-pending {
    background-color: #FFEDD5;
    color: #9A3412;
}

.income-report-page .ref-id-text {
    font-size: 13px;
    color: #4B5563;
}

.income-report-page .pagination-footer {
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.income-report-page .page-nav-btn {
    padding: 6px 14px;
    border: 1px solid #E5E7EB;
    background: #FFFFFF;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    text-decoration: none;
}

.income-report-page .page-num-active {
    background-color: #4F46E5;
    color: #FFFFFF;
    border-color: #4F46E5;
}

/*=======================================

 API Overview Module

 ========================================*/

/*=======================================
 My Services Page 
 ========================================*/

.my-services-page .my-services-title {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

.my-services-page .my-services-subtitle {
    font-size: 16px;
    font-weight: 400;
    color: #4B5563;
}

.my-services-table {
    box-sizing: border-box;
    height: auto;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    margin: 0;
}

.services-scroll {
    width: 100%;
    overflow-x: auto;
}

.services-data-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 800px;
}

.services-thead {
    background-color: #F9FAFB;
    border-bottom: 1px solid #E5E7EB;
}

.services-th {
    padding: 16px 24px;
    font-size: 14px;
    font-weight: 600;
    color: #4B5563;
    text-align: left;
}

.services-td {
    padding: 16px 24px;
    vertical-align: middle;
    border-bottom: 1px solid #F3F4F6;
}

.service-info-flex {
    display: flex;
    align-items: center;
    gap: 16px;
}

.service-icon-container {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.bg-blue-soft {
    background-color: #EFF6FF;
    color: #3B82F6;
}

.bg-purple-soft {
    background-color: #F5F3FF;
    color: #8B5CF6;
}

.bg-yellow-soft {
    background-color: #FFFBEB;
    color: #D97706;
}

.bg-green-soft {
    background-color: #ECFDF5;
    color: #10B981;
}

.bg-red-soft {
    background-color: #FEF2F2;
    color: #EF4444;
}

.bg-indigo-soft {
    background-color: #EEF2FF;
    color: #6366F1;
}

.bg-pink-soft {
    background-color: #FDF2F8;
    color: #DB2777;
}

.service-name-text {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.comm-type-text {
    font-size: 16px;
    color: #4B5563;
    font-weight: 400;
}

.status-pill-active {
    background-color: #ECFDF5;
    color: #065F46;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
}

.status-pill-inactive {
    background-color: #F3F4F6;
    color: #374151;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
}

.form-switch .form-check-input {
    width: 40px;
    height: 20px;
    cursor: pointer;
}

.services-footer {
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #FFFFFF;
}

.footer-info-text {
    font-size: 14px;
    color: #6B7280;
}

.pagination-custom {
    display: flex;
    gap: 8px;
    align-items: center;
}

.page-btn-custom {
    padding: 6px 14px;
    border: 1px solid #E5E7EB;
    background: #FFFFFF;
    border-radius: 6px;
    font-size: 14px;
    color: #374151;
    text-decoration: none;
    transition: 0.2s;
}

.page-active-custom {
    background-color: #4F46E5;
    color: #FFFFFF;
    border-color: #4F46E5;
}

.my-services-page .my-services-table tbody tr:nth-child(even) {
    background: #F9FAFB;
}

/*=======================================
 Settings Module
 ========================================*/

/*=======================================
 Manage API Keys Page
 ========================================*/

.manage-api-keys-page .manage-api-keys-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    gap: 8px;
    height: auto;
    width: 100%;
}

.manage-api-keys-page .manage-api-title {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-size: 20px;
    line-height: 32px;
    color: #374151;
}

.manage-api-keys-page .btn-add-api {
    background: #2563EB;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    transition: background 0.3s ease;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
}

    .manage-api-keys-page .btn-add-api:hover {
        background: #1D4ED8;
        color: #ffffff;
    }

.manage-api-keys-page .api-overviews {
    box-sizing: border-box;
    height: auto;
    background: #FFFFFF;
    border: 1px solid #ECEEF0;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    padding: 16px 20px;
    width: 100%;
}

.manage-api-keys-page .api-main-title {
    color: #1A202C;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.manage-api-keys-page .api-status-text, .api-update-text {
    font-size: 14px;
    color: #4B5563;
}

.manage-api-keys-page .status-dot {
    font-size: 9px;
    margin-top: 3px;
}

.manage-api-keys-page .api-toggle-container {
    background: #F3F4F6;
    border-radius: 8px;
    width: fit-content;
}

.manage-api-keys-page .toggle-btn-item {
    font-size: 14px;
    border-radius: 6px;
    transition: all 0.2s ease;
    color: #6B7280;
}

.manage-api-keys-page .btn-live.active-live {
    background: #2563EB;
    color: #FFFFFF;
}

.manage-api-keys-page .btn-sandbox:hover {
    color: #111827;
}

.manage-api-keys-page .manage-api-key-section {
    background: #FFFFFF;
    border: 1px solid #ECEEF0;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    overflow: hidden;
}

.manage-api-keys-page .table-light-bg {
    background-color: #F9FAFB;
}

.manage-api-keys-page .api-row-item {
    transition: background-color 0.2s ease;
}

    .manage-api-keys-page .api-row-item:hover {
        background-color: #FAFAFB;
    }

.manage-api-keys-page .fs-xs {
    font-size: 12px;
}

.manage-api-keys-page .cursor-pointer {
    cursor: pointer;
}

.manage-api-keys-page .action-icon {
    font-size: 16px;
    transition: color 0.2s ease;
}

    .manage-api-keys-page .action-icon:hover {
        color: #111827 !important;
    }

.manage-api-keys-page .badge-active {
    background: #F5F3FF;
    color: #7C3AED;
    border-radius: 6px;
    font-weight: 500;
    font-size: 12px;
}

.manage-api-keys-page .badge-inactive {
    background: #FFF7ED;
    color: #EA580C;
    border-radius: 6px;
    font-weight: 500;
    font-size: 12px;
}

.manage-api-keys-page .documentation-section {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 25px;
    gap: 16px;
    height: auto;
    background: #FFFFFF;
    border: 1px solid #ECEEF0;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    flex: none;
    order: 1;
    flex-grow: 0;
    width: 100%;
}

.manage-api-keys-page .doc-card {
    padding: 16px;
    background: #FFFFFF;
    border: 1px solid #ECEEF0;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .manage-api-keys-page .doc-card:hover {
        transform: translateY(-2px);
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.05);
    }

.manage-api-keys-page .doc-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.manage-api-keys-page .bg-orange-light {
    background-color: #FFF7ED;
}

.manage-api-keys-page .text-orange {
    color: #EA580C;
}

.manage-api-keys-page .bg-blue-light {
    background-color: #EFF6FF;
}

.manage-api-keys-page .text-blue {
    color: #2563EB;
}

.manage-api-keys-page .bg-green-light {
    background-color: #F0FDF4;
}

.manage-api-keys-page .text-green {
    color: #16A34A;
}

.manage-api-keys-page .doc-item-name {
    color: #1F2937;
    font-size: 15px;
}

.manage-api-keys-page .webhook-settings {
    box-sizing: border-box;
    padding: 25px;
    height: auto;
    background: #FFFFFF;
    border: 1px solid #ECEEF0;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    max-width: 650px;
}

.manage-api-keys-page .custom-input {
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    font-size: 14px;
    color: #111827;
    transition: border-color 0.2s;
}

    .manage-api-keys-page .custom-input::placeholder {
        color: #9CA3AF;
    }

    .manage-api-keys-page .custom-input:focus {
        border-color: #2563EB;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        outline: none;
    }

.manage-api-keys-page .custom-checkbox .form-check-input {
    width: 18px;
    height: 18px;
    border: 1.5px solid #D1D5DB;
    border-radius: 4px;
    cursor: pointer;
}

    .manage-api-keys-page .custom-checkbox .form-check-input:checked {
        background-color: #2563EB;
        border-color: #2563EB;
    }

.manage-api-keys-page .custom-checkbox .form-check-label {
    font-size: 14px;
    cursor: pointer;
    color: #374151 !important;
}

.manage-api-keys-page .btn-save-webhook {
    background-color: #2563EB;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    transition: background 0.2s;
}

    .manage-api-keys-page .btn-save-webhook:hover {
        background-color: #1D4ED8;
        color: #FFFFFF;
    }

.manage-api-keys-page .whitelist-section {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 23px 13px;
    gap: 22px;
    height: auto;
    background: #FFFFFF;
    border: 1px solid #ECEEF0;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    width: 100%;
    max-width: 700px;
}

.manage-api-keys-page .whitelist-card {
    width: 100%;
    border: 1px solid #ECEEF0;
    border-radius: 10px;
    padding: 20px;
}

.manage-api-keys-page .whitelist-header {
    color: #111827;
    font-size: 17px;
}

.manage-api-keys-page .custom-switch {
    width: 40px !important;
    height: 20px !important;
    cursor: pointer;
}

.manage-api-keys-page .custom-input-group .form-control {
    border: 1px solid #E5E7EB;
    border-radius: 8px 0 0 8px;
    font-size: 14px;
}

.manage-api-keys-page .btn-add-whitelist {
    background-color: #2563EB;
    color: #FFFFFF;
    border: none;
    border-radius: 0 8px 8px 0;
    font-size: 14px;
}

    .manage-api-keys-page .btn-add-whitelist:hover {
        background-color: #1D4ED8;
        color: #FFFFFF;
    }

.manage-api-keys-page .whitelist-item {
    background-color: #F9FAFB;
}

.manage-api-keys-page .cursor-pointer {
    cursor: pointer;
}

.manage-api-keys-page .text-danger:hover {
    opacity: 0.7;
}

.manage-api-keys-page .custom-modal-content {
    background: #FFFFFF;
    border-radius: 18px;
    padding: 20px 15px;
    border: none;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
}

.manage-api-keys-page .whitelist-section {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: auto;
}

.manage-api-keys-page .custom-input-group .form-control {
    border-radius: 8px 0 0 8px;
    font-size: 14px;
    color: #374151;
    border: 1px solid #ECEEF0;
}

.manage-api-keys-page .btn-copy-icon {
    border-radius: 0 8px 8px 0 !important;
    background: #2563EB !important;
    border-color: #2563EB !important;
    width: 45px;
}

.manage-api-keys-page .manage-api-keys-page .btn-copy-icon i {
    color: white !important;
}

.manage-api-keys-page .alert-danger-custom {
    background-color: #FEF2F2;
    color: #B91C1C;
    border: 1px solid #FEE2E2 !important;
}

.manage-api-keys-page .btn-create-final {
    background: #2563EB;
    color: #FFFFFF;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    transition: all 0.2s ease;
}

    .manage-api-keys-page .btn-create-final:hover {
        background: #1D4ED8;
        color: white;
    }

.manage-api-keys-page .btn-close:focus {
    box-shadow: none;
}

/*================================
    Pop-Up 2FA In Manage API keys popup
==================================*/

.manage-api-keys-page .popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    pointer-events: auto;
}

.manage-api-keys-page .verify-your-account {
    position: absolute;
    width: 448px;
    min-height: 100px;
    left: 50%;
    top: 50%;
    background: #FFFFFF;
    box-shadow: 0px 25px 50px rgba(0, 0, 0, 0.25);
    border-radius: 16px;
    padding: 32px;
    text-align: center;
    font-family: 'Inter', sans-serif;
    transform: translate(-50%, -50%);
    z-index: 10000;
    pointer-events: auto;
}


/* Close */
.manage-api-keys-page .close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    border: none;
    background: transparent;
    font-size: 20px;
    color: #9CA3AF;
}

/* Icon */
.manage-api-keys-page .icon-wrapper {
    width: 64px;
    height: 64px;
    background: #DBEAFE;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    min-width:64px;
}

    .manage-api-keys-page .icon-wrapper i {
        font-size: 32px;
        color: #2563EB;
    }

/* Text */
.manage-api-keys-page .verify-your-account h2 {
    font-size: 24px;
    font-weight: 700;
    color: #1F2937;
    margin-bottom: 12px;
}

.manage-api-keys-page .subtitle {
    font-size: 14px;
    color: #4B5563;
    font-weight: 400;
    margin-bottom: 24px;
}

    .manage-api-keys-page .subtitle .phone {
        color: #2563EB;
        display: block;
        margin-top: 4px;
    }

/* OTP */
.manage-api-keys-page .otp-section label {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    display: block;
    text-align: left;
    margin-bottom: 12px;
}

.manage-api-keys-page .otp-inputs {
    display: flex;
    gap: 12px;
    justify-content: center;
}

    .manage-api-keys-page .otp-inputs input {
        width: 48px;
        height: 48px;
        border: 2px solid #D1D5DB;
        border-radius: 8px;
        font-size: 18px;
        text-align: center;
    }

/* Resend */
.manage-api-keys-page .resend {
    margin-top: 20px;
    font-size: 14px;
    color: #4B5563;
    font-weight: 400;
}

    .manage-api-keys-page .resend p {
        margin-bottom: 4px;
        color: #374151;
    }

    .manage-api-keys-page .resend span {
        color: #9CA3AF;
    }

/* Button */
.manage-api-keys-page .verify-btn {
    width: 100%;
    height: 56px;
    margin-top: 24px;
    background: #D1D5DB;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    color: #FFFFFF;
    cursor: not-allowed;
}
    .manage-api-keys-page .verify-btn.activeverify {
        cursor: pointer;
        background: #0d6efd;
    }
    /* Divider */
    .manage-api-keys-page hr {
        margin: 20px 0;
        height: 2px;
        border-color: #E5E7EB;
        opacity: 35;
    }

/* Help */
.manage-api-keys-page .help .having-trouble {
    color: #6B7280;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 400;
}

.manage-api-keys-page .help .send-code {
    color: #2563EB;
    font-size: 12px;
    text-decoration: none;
    font-weight: 500;
}


/*======================== News Scrolling============================*/

/* The outer window that hides overflow */
.announcement-container {
    height: 361px; /* Adjust this height to fit exactly 5 items */
    overflow: hidden;
    position: relative;
    /*border: 1px solid #f0f0f0;*/ /* Optional styling */
    padding: 5px;
}

/* The class that handles the animation logic */
.announcement-scroll.is-scrolling {
    display: flex;
    flex-direction: column;
    animation: tickerVertical 20s linear infinite;
}

/* Stops scrolling when user moves mouse over news */
.announcement-container:hover .is-scrolling {
    animation-play-state: paused;
}

/* Individual item styling */
.announcement-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    min-height: 50px; /* Ensures consistent scrolling speed */
}

/* The Movement Logic */
@keyframes tickerVertical {
    0% {
        transform: translateY(0);
    }

    100% {
        /* Move up by 50% because we duplicated the list */
        transform: translateY(-50%);
    }
}


/*  Notification*/


.news-box {
    background: #ffffff;
    border: 1px solid #ddd;
    border-left: 4px solid #ccc;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.news-box.unread {
    background: #f0f4ff;
    border-left-color: #0d6efd;
    font-weight: 500;
}

.news-box.read {
    background: #f9f9f9;
    border-left-color: #ccc;
    opacity: 0.85;
}

.news-box:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.unread-dot {
    width: 8px;
    height: 8px;
    background-color: #0d6efd;
    border-radius: 50%;
    margin-top: 6px;
    margin-left: 2px;
    flex-shrink: 0;
}

.news-content small {
    color: #6c757d;
    font-size: 12px;
}

/* Collapse / Expand */
.news-text {
    overflow: hidden;
}

    .news-text.collapsed .news-inner {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1; 
        overflow: hidden;
    }

    .news-text.expanded .news-inner {
        display: block;
    }

.read-more-link {
    font-size: 13px;
    color: #0d6efd;
    cursor: pointer;
    text-decoration: none;
    font-weight: 500;
}

    .read-more-link::after {
        content: " ▼";
        font-size: 10px;
        margin-left: 2px;
    }

.news-text.expanded + .read-more-link::after {
    content: " ▲";
}

/*=================================
    Payment Gatway
========================================*/

:root {
    --bg-body: #f4f7fa;
    --primary-blue: #007bff;
}

body {
    background-color: var(--bg-body);
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Main Container */
.main-wrapper11 {
    max-width: 1100px;
    margin: 0px auto;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    display: flex;
    min-height: 85vh;
}

/* Left Side: Amount Selection */
.section-left {
    width: 45%;
    padding: 40px;
    background-color: #ffffff;
    border-right: 1px solid #edf2f7;
}

/* Right Side: Payment Methods */
.section-right {
    width: 55%;
    padding: 40px;
    background-color: #fcfdfe;
}

/* Amount Box (From Image) */
.amount-display-box {
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    padding: 30px;
    text-align: center;
    font-size: 3rem;
    font-weight: 700;
    color: #cbd5e0;
    margin-bottom: 25px;
    background: #fff;
}

/* Quick Amount Buttons (Same Colors) */
.btn-amount {
    border: none;
    border-radius: 25px;
    padding: 10px 20px;
    font-weight: 600;
    min-width: 80px;
}

.bg-100 {
    background-color: #e1f5fe;
    color: #03a9f4;
}

.bg-200 {
    background-color: #f3e5f5;
    color: #9c27b0;
}

.bg-500 {
    background-color: #e8f5e9;
    color: #4caf50;
}

.bg-1000 {
    background-color: #fff3e0;
    color: #ff9800;
}

.bg-100:hover {
    background-color: #e1f5fe;
    color: #03a9f4;
}

.bg-200:hover {
    background-color: #f3e5f5;
    color: #9c27b0;
}

.bg-500:hover {
    background-color: #e8f5e9;
    color: #4caf50;
}

.bg-1000:hover {
    background-color: #fff3e0;
    color: #ff9800;
}

/* Payment Option List */
.payment-item {
    display: flex;
    align-items: center;
    padding: 18px;
    border: 1px solid #edf2f7;
    border-radius: 14px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: 0.2s ease;
    text-decoration: none;
    color: inherit;
    background: #fff;
}

    .active-pg {
        border-color: var(--primary-blue);
        background: #f8fbff;
    }

.process-payment{
    margin-top:120px !important;
}

/* Icons Styling (From Image) */
.icon-box {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-right: 15px;
}

.icon-blue {
    background-color: #e3f2fd;
    color: #1976d2;
}

.icon-green {
    background-color: #e8f5e9;
    color: #2e7d32;
}

.icon-purple {
    background-color: #f3e5f5;
    color: #7b1fa2;
}

.badge-rec {
    background-color: #00c853;
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 4px;
}

/* Secure Footer Box */
.secure-footer {
    background-color: #e3f2fd;
    border-radius: 15px;
    padding: 15px;
    color: #0d47a1;
    display: flex;
    align-items: center;
    margin-top: 20px;
}

/* Mobile Responsive */
@media (max-width: 992px) {
    .main-wrapper11 {
        flex-direction: column;
        margin: 10px;
        border-radius: 15px;
    }

    .section-left, .section-right {
        width: 100%;
        padding: 25px;
    }

    .section-left {
        border-right: none;
        border-bottom: 1px solid #edf2f7;
    }
}

/* Payment gateway scoped spinner removal */
.pgw-no-spinner input[type="number"]::-webkit-inner-spin-button,
.pgw-no-spinner input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pgw-no-spinner input[type="number"] {
    -moz-appearance: textfield;
}

/*Success Popup*/

.success-circle {
    width: 80px;
    height: 80px;
    background: #00c853;
    color: white;
    font-size: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    animation: scaleIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes scaleIn {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

/* Modal Styling */
.modal-content {
    animation: slideUp 0.4s ease-out;
}

@keyframes slideUp {
    0% {
        transform: translateY(20px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/*=================================
    Support Details Page -- Chat Support
========================================*/

.chat-header {
    background: #002140;
    color: #d2d8de;
}

.haeder-user {
    color: #002140;
    background: white;
    height: 35px;
    width: 35px;
    border-radius: 50%;
    font-size:25px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.merchant-chat {
    color: #274056;
    font-size:12px;
}

.admin-chat {
    color: #d2d8de;
    font-size: 12px;
}

.send-message{
    right:67px;
}

    .message-box {
        padding-left: 16px;
        padding-right: 43px;
    }

.attach-fill-remove{
    height:15px;
    width:15px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:7px;
    border-radius:50%;
}

.message-time{
    font-size:12px;
}

.chat-attach-file {
    background: #ea555f !important;
    color: white !important;
}

.message-text {
    word-break: break-word;
    overflow-wrap: anywhere;
}

/*=======================================

    Table Responsive

========================================*/

.Common-th-td {
    white-space: nowrap !important;
    vertical-align: middle !important;
}

/* Data Table Pagination Section */

/*.dataTables_wrapper .dataTables_paginate .paginate_button {
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

.dataTables_wrapper .dataTables_info {
    font-size: 14px;
    color: #6b7280;
}

.dataTables_wrapper .dataTables_paginate {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: end;
}

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 6px 12px;
        border-radius: 8px;
        border: 1px solid #e5e7eb;
        background: white;
        font-size: 14px;
        color: #374151;
        transition: all 0.2s ease;
    }

        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            background-color: #f3f4f6;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            background-color: #2563eb;
            color: #2563EB !important;
            border-color: #2563eb;
            font-weight: 700;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
            color: #2563EB !important;
            font-weight: 700 !important;
            transition: ease-in-out !important;
            transition: all 0.3s ease !important;
        }
*/
    /* Remove Bootstrap hover effect */
/*    .dataTables_wrapper .dataTables_paginate .page-link {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: #374151 !important;
    }
*/
    /* Custom button base */
/*    .dataTables_wrapper .dataTables_paginate .paginate_button {
        background: white !important;
        color: #374151 !important;
        transition: all 0.2s ease !important;
    }

        .dataTables_wrapper .dataTables_paginate .paginate_button:active {
            box-shadow: none !important;
        }


table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before, table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
    margin-right: .5em !important;
    display: inline-block !important;
    font-size: 16px !important;
    color: rgba(0, 0, 0, 0.5) !important;
    content: "►" !important;
}

table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before, table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before {
    content: "▼" !important;
    font-size: 16px !important;
}*/



/*table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before, table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
}*/