/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY3VzdG9tLmNzcyIsInNvdXJjZXMiOlsiY3VzdG9tLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiJ9 */

/*# sourceMappingURL=custom.css.map */
/* =========================
TABLE
========================= */

/* ==================================================
   ASHWAPAY CRM - UNIVERSAL TABLE DESIGN
================================================== */

/* =========================
   TABLE
========================= */

#example1{
    width:100% !important;
}

#example1 tbody td{
    padding:10px 8px !important;
    vertical-align:middle !important;
    border-color:#edf2f7 !important;
}

#example1 tbody tr{
    transition:.2s ease;
}

#example1 tbody tr:hover{
    background:#eff6ff !important;
    box-shadow:inset 4px 0 0 #2563eb;
}

/* =========================
   STICKY HEADER
========================= */


#example1 thead th{
    position:sticky;
    top:0;
    z-index:999;

    background:linear-gradient(
        135deg,
        #ffffff 0%,
        #f8fafc 40%,
        #eef2f7 100%
    ) !important;

    color:#0f172a !important;

    border-bottom:3px solid #2563eb !important;

    font-size:14px !important;
    font-weight:800 !important;

    letter-spacing:.8px;
    text-transform:uppercase;
    text-align:center;

    padding:14px 10px !important;

    box-shadow:
        0 4px 12px rgba(37,99,235,.08);

    white-space:nowrap;
}

/* =========================
   CUSTOMER
========================= */

.crm-customer{
    min-width:250px;
    text-align:left;
}

.customer-item{
    padding:6px 0;
    border-bottom:1px solid #e5e7eb;
}

.customer-item:last-child{
    border-bottom:none;
}

/* NAME */

.cust-name{
    display:block;

    font-size:14px;
    font-weight:700;
    color:#111827;

    transition:.2s ease;
}

.cust-name:hover{
    color:#2563eb;
    cursor:pointer;
}

.cust-name span{
    display:block;

    max-width:220px;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* MOBILE */

.cust-mobile{
    font-size:13px;
    font-weight:600;
    color:#2563eb;
}

/* ADDRESS */

.cust-address{
    display:block;

    font-size:12px;
    color:#64748b;
}

.cust-address span{
    display:block;

    max-width:220px;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
/* =========================
   PAYMENT
========================= */

.payment-item{
    padding:6px 0;
    border-bottom:1px solid #e5e7eb;

    font-size:13px;
    font-weight:700;

    color:#475569;
}

.payment-item:last-child{
    border-bottom:none;
}

.paid-link{
    color:#16a34a !important;
    font-weight:700;
    text-decoration:none !important;
}

.paid-link:hover{
    color:#15803d !important;
}

.due-link{
    font-weight:700;
    text-decoration:none !important;
}

.due-red{
    color:#dc2626 !important;
}

.due-green{
    color:#16a34a !important;
}

.validity-value{
    color:#2563eb;
    font-size:11px !important;
    font-weight:700 !important;
}

.days-green{
    color:#16a34a;
    font-size:11px !important;
    font-weight:700 !important;
}

.days-orange{
    color:#f59e0b;
    font-size:11px !important;
    font-weight:700 !important;
}

.days-red{
    color:#dc2626;
    font-size:11px !important;
    font-weight:700 !important;
}

/* =========================
   CONNECTION
========================= */

.device-item,
.connection-item{
    padding:6px 0;
    border-bottom:1px solid #e5e7eb;
}

.device-item:last-child,
.connection-item:last-child{
    border-bottom:none;
}

.device-label{
    font-size:12px;
    font-weight:600;
    color:#64748b;
}

.device-value{
    font-size:14px;
    font-weight:700;
}

.stb-value{
    color:#2563eb;
}

.vc-value{
    color:#ea580c;
}

.mac-value{
    color:#0891b2;
}

.package-value{
    font-size:13px;
    font-weight:700;
    color:#2563eb;
}

.mso-value{
    font-size:12px;
    font-weight:600;
    color:#475569;
}

.type-value{
    font-size:12px;
    font-weight:700;
    color:#16a34a;
}

/* =========================
   COPY TOAST
========================= */

.copy-value{
    cursor:pointer;
    transition:.2s ease;
}

.copy-value:hover{
    opacity:.75;
}

.copy-toast{
    position:fixed;

    top:80px;
    right:20px;

    z-index:99999;

    background:#16a34a;
    color:#fff;

    padding:10px 15px;

    border-radius:8px;

    font-size:13px;
    font-weight:600;

    box-shadow:
        0 8px 20px rgba(22,163,74,.25);

    opacity:0;
    visibility:hidden;

    transition:.25s ease;
}

.copy-toast.show{
    opacity:1;
    visibility:visible;
}

/* =========================
   FILTERS
========================= */

.card-body label{
    font-size:12px;
    font-weight:700;
    color:#475569;

    margin-bottom:6px;
}

.card-body .form-control,
.card-body select{

    height:44px !important;

    border:1px solid #dbe4f0 !important;
    border-radius:10px !important;

    background:#fff !important;

    transition:.25s ease;
}

.card-body .form-control:focus,
.card-body select:focus{

    border-color:#2563eb !important;

    box-shadow:
        0 0 0 4px rgba(37,99,235,.08) !important;
}

/* =========================
   SEARCH BUTTON
========================= */

input[type="submit"],
.btn-primary{

    border-radius:10px !important;

    font-weight:700 !important;

    box-shadow:
        0 8px 20px rgba(37,99,235,.18);

    transition:.25s ease;
}

input[type="submit"]:hover,
.btn-primary:hover{

    transform:translateY(-1px);
}

/* =========================
   DATATABLE
========================= */

.dataTables_filter input{

    height:40px !important;

    border:1px solid #dbe4f0 !important;
    border-radius:10px !important;

    background:#fff !important;
}

.dataTables_filter input:focus{

    border-color:#2563eb !important;

    box-shadow:
        0 0 0 4px rgba(37,99,235,.08) !important;
}

.dataTables_length select{

    height:40px !important;

    border:1px solid #dbe4f0 !important;
    border-radius:10px !important;
}



/* =========================
   MOBILE
========================= */

@media(max-width:768px){

    .cust-name{
        font-size:13px;
    }

    .cust-mobile{
        font-size:12px;
    }

    .cust-address{
        font-size:11px;
    }

    .device-value,
    .package-value{
        font-size:12px;
    }

    .payment-item{
        font-size:11px;
    }
}
.new-customer-btn{

    display:inline-flex;
    align-items:center;

    padding:10px 18px;

    background:#ecfdf5;

    border:1px solid #bbf7d0;

    border-radius:12px;

    color:#16a34a !important;

    font-size:13px;
    font-weight:800;

    text-decoration:none !important;

    transition:.2s ease;
}

.new-customer-btn:hover{

    background:#dcfce7;

    color:#15803d !important;

    transform:translateY(-1px);
}
.sno-badge{
    width:32px;
    height:32px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#e0edff;
    border:1px solid #bcd3ff;
    color:#2563eb;
    font-weight:700;
}

#example1 tbody tr:hover .sno-badge{
    background:#2563eb;
    color:#fff;
}
/* CONNECTION COLUMN WIDTH */

/* CUSTOMER */

#example1 th:nth-child(3),
#example1 td:nth-child(3){
    width:240px !important;
    min-width:240px !important;
}

/* GROUP */

#example1 th:nth-child(4),
#example1 td:nth-child(4){
    width:200px !important;
    min-width:200px !important;
}

/* PAYMENT */

#example1 th:nth-child(5),
#example1 td:nth-child(5){
    width:180px !important;
    min-width:180px !important;
}

/* CONNECTION */

#example1 th:nth-child(6),
#example1 td:nth-child(6){
    width:240px !important;
    min-width:180px !important;
}

/* PACKAGE */

#example1 th:nth-child(7),
#example1 td:nth-child(7){
    width:180px !important;
    min-width:180px !important;
}
.device-value{
    white-space:nowrap;
}
/* CUSTOMER ID BADGE */

.custid-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    height:32px;
    padding:0 12px;

    background:#fff;

    border:1px solid #3b82f6;
    border-right:none;

    border-radius:8px 0 0 8px;

    color:#2563eb;
    font-size:13px;
    font-weight:700;
}

/* DROPDOWN BUTTON */

.custid-drop-btn{
    width:32px;
    height:32px;

    background:#f8fbff;

    border:1px solid #3b82f6;
    border-left:1px solid #dbeafe;

    border-radius:0 8px 8px 0;

    padding:0;

    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.custid-drop-btn:hover{
    background:#eff6ff;
}

.custid-drop-btn::after{
    margin:0 !important;
}

/* DROPDOWN MENU FIX */

.dropdown-menu{
    z-index:999999 !important;
}

/* TABLE CUT ISSUE FIX */

/* TABLE WRAPPER FIX */

.card{
    overflow:hidden;
}

.card-body{
    overflow:hidden;
      padding-bottom:80px !important;
}

.table-responsive{
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
}

.dataTables_wrapper{
    width:100%;
}
/* CUSTOMER ACTION DROPDOWN FIX */

#example1 .dropdown,
#example1 .btn-group{
    position:static !important;
}

#example1 .dropdown-menu{
    z-index:999999 !important;
}
.custid-drop-btn::after{
    border:none !important;
    content:"▾";

    font-size:16px;
    color:#2563eb;

    margin:0 !important;

    display:inline-block;
    transition:transform .25s ease;
}

.dropdown.show .custid-drop-btn::after{
    transform:rotate(180deg);
}
/* =========================
   MOBILE TABLE FIX
========================= */

@media (max-width:768px){

    .table-responsive{
        width:100%;
        overflow-x:auto !important;
        overflow-y:hidden !important;
        -webkit-overflow-scrolling:touch;
    }

    #example1{
        min-width:1200px;
    }

    .card{
        overflow:hidden !important;
    }

    .card-body{
        overflow:hidden !important;
        padding:10px !important;
    }

}
/* ===================================
   GROUP + LOCATION COLUMN
=================================== */

.group-location-wrap{
    min-width:190px;
}

/* GROUP TREE */

.group-tree{
    text-align:left;

    padding-bottom:8px;
    margin-bottom:8px;

    border-bottom:1px solid #e5e7eb;
}

.main-group{
    font-size:12px;
    font-weight:700;
    color:#2563eb;

    line-height:18px;
}

.sub-group{
    padding-left:18px;
    margin-top:4px;

    font-size:11px;
    font-weight:700;
    color:#64748b;

    line-height:16px;
}

/* LOCATION */

.group-location{
    text-align:center;
}

/* LOCATION TAGGED */

.location-tagged{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;

    padding:5px 12px;

    border-radius:20px;

    background:#dcfce7;
    border:1px solid #86efac;

    color:#15803d !important;

    font-size:11px;
    font-weight:700;

    text-decoration:none !important;

    transition:.2s ease;
}

.location-tagged:hover{
    background:#bbf7d0;
    color:#166534 !important;

    transform:translateY(-1px);

    text-decoration:none !important;
}

/* LOCATION MISSING */

.location-not-tagged{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;

    padding:5px 12px;

    border-radius:20px;

    background:#fee2e2;
    border:1px solid #fecaca;

    color:#dc2626;

    font-size:11px;
    font-weight:700;

    animation:pulseTag 2s infinite;
}

/* PULSE */

@keyframes pulseTag{

    0%{
        opacity:1;
    }

    50%{
        opacity:.75;
    }

    100%{
        opacity:1;
    }
}

/* MOBILE */

@media(max-width:768px){

    .group-location-wrap{
        min-width:170px;
    }

    .main-group{
        font-size:11px;
    }

    .sub-group{
        font-size:10px;
    }

    .location-tagged,
    .location-not-tagged{
        font-size:10px;
        padding:4px 10px;
    }

}
/* =========================
   ACTIVATE (Pending)
========================= */

.bg-red{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    gap:6px;

    min-width:90px;
    height:34px;

    background:linear-gradient(135deg,#ff5f56,#ef4444) !important;
    color:#fff !important;

    border-radius:50px;
    font-size:12px !important;
    font-weight:700 !important;
    text-decoration:none !important;

    box-shadow:0 4px 12px rgba(239,68,68,.25);
    transition:.25s;
}

.bg-red:hover{
    transform:translateY(-1px);
    color:#fff !important;
}

.bg-red:before{
    content:'○';
    font-size:13px;
}


/* =========================
   ACTIVATED (Status Badge)
========================= */

.bg-green{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    gap:6px;

    min-width:95px;
    height:30px;

    background:#ecfdf5 !important;
    color:#16a34a !important;

    border:1px solid #bbf7d0;
    border-radius:50px;

    font-size:12px !important;
    font-weight:700 !important;

    box-shadow:none !important;
    cursor:default;
}

.bg-green:before{
    content:'●';
    color:#22c55e;
    font-size:11px;
}


/* =========================
   RENEW
========================= */

.btn-success{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;

    background:#eef2ff !important;
    color:#4f46e5 !important;

    border:1px solid #c7d2fe !important;
    border-radius:50px !important;

    padding:6px 14px !important;
    min-width:90px;
    margin-top:6px;

    font-size:12px !important;
    font-weight:600 !important;

    box-shadow:none !important;
    text-decoration:none !important;

    transition:all .2s ease;
}

.btn-success:before{
    content:'↻ ';
    font-weight:700;
}

.btn-success:hover{
    background:#4f46e5 !important;
    color:#fff !important;
    border-color:#4f46e5 !important;

    transform:translateY(-1px);
    box-shadow:0 4px 10px rgba(79,70,229,.18);
}
.cash-badge{
    display:inline-block;
    background:#ecfdf5;
    color:#16a34a;
    padding:2px 10px;
    border-radius:20px;
    font-size:11px;
    font-weight:600;
}

.online-badge{
    display:inline-block;
    background:#eff6ff;
    color:#2563eb;
    padding:2px 10px;
    border-radius:20px;
    font-size:11px;
    font-weight:600;
}