:root{
    --primary_color: #e02b1d;
    --dark-red: #6e1414;
    --white-color: #ffffff;
    --grey-50: #f1f1f1;
    --grey-100: #e2e2e2;
    --grey-800: #555555;
    --black_color: #000000;
    --blue-color: #1f2e44;
  }
  *{ box-sizing:border-box; }
  body{
    font-family: "Poppins", sans-serif;
    margin:0;
    min-height:100vh;
    background:#faf6ee;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 14px 24px;
  }

  /* variable css start */
  .primary_color {
    color: #e02b1d;
  }
  .primary_btn { 
    background: var(--primary_color);
    border: 1px solid var(--primary_color) !important;
    color: var(--white-color);
    font-weight:500;
    padding:12px;
    border-radius:8px;
    border:none;
    font-size:0.95rem;
    width:100%;
    transition:background .2s ease; 
    letter-spacing: 0.5px;
  }
  .primary_btn:hover {
    color: var(--primary_color);
    border: 1px solid var(--primary_color);
  }

  h1 , h2 , h3 , h4 , h5 , h6 {
    font-weight: bold;
  }

  h3 {
    font-size: 32px;
    line-height: 36px;
  }
  h4 {
    font-size: 28px;
    line-height: 34px;
  }
  h5 {
    font-size: 22px;
    line-height: 26px;
  }
  h6 {
    font-size: 18px;
    line-height: 22px;
  }

  p {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
  }
  a {
    text-decoration: none;
  }
  /* variable css close */
  .auth-wrap{
    width:100%;
    max-width:960px;
    background: var(--white-color);
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,0.12);
    display:flex;
    min-height:600px;
  }

  /* ---------- LEFT BRAND PANEL ---------- */
    .loginCol.password {
        display: flex;
        gap: 20px;
    }
    .loginCol {
    padding-bottom: 4px;
}
.auth-brand .logo {
    text-align: center;
    margin-bottom: 40px;
}
.auth-brand h4 {
  margin-bottom: 14px;
  letter-spacing: 1px;
}
  .auth-brand{
    position:relative;
    flex:1 1 42%;
    background: var(--grey-50);
    color: var(--white-color);
    padding:44px 38px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    overflow:hidden;
  }
  .btn-social img {
    width: 18px;
    margin-right: 2px;
  }
  .auth-brand .om-pattern{
    position:absolute;
    inset:0;
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    align-content:start;
    opacity:0.1;
    pointer-events:none;
    padding:20px;
  }
  .auth-brand .om-pattern span{
    font-size:1.4rem;
    text-align:center;
    padding:14px 0;
  }   
  .auth-brand .brand-footer{
    font-size:14px;
    line-height: 18px; 
  }

  /* ---------- RIGHT FORM PANEL ---------- */
  .auth-form-panel{
    flex:1 1 58%;
    padding:48px 52px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .auth-form-panel h4 {  
    margin-bottom: 10px; 
  }
  .auth-form-panel .sub{
    color:var(--grey-800); 
    margin-bottom:28px;
  }

.form-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--grey-800);
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}
  .form-control{
    padding:11px 14px;
    border-radius:8px;
    border:1px solid var(--grey-100);
    font-size: 14px;
    line-height: 18px;
  }
  .form-control::placeholder {
    font-size: 13px;
  }
  .form-control:focus{ 
    box-shadow:0 0 0 3px rgba(244,180,0,0.15);
    border-color: var(--primary_color);
  }
  .input-icon-wrap{
    position:relative;
  }
  .input-icon-wrap .form-control{
    padding-right:44px;
  }
  .input-icon-wrap .toggle-eye{
    position:absolute;
    right:14px;
    top:50%;
    transform:translateY(-50%);
    color: var(--grey-800);
    cursor:pointer;
    background:none;
    border:none;
    font-size:1rem;
  }

  .form-check-label{
    font-size: 14px;
    line-height: 18px;
    color: var(--grey-800);
  }
  .forgot-link{
    font-size: 14px;
    line-height: 18px; 
  } 
  

  .divider{
    display:flex;
    align-items:center;
    gap:12px;
    margin:24px 0;
    color: var(--grey-800);
    font-size: 12px;
  }
  .divider::before, .divider::after{
    content:"";
    flex:1;
    height:1px;
    background: var(--grey-100);
  }

  .btn-social{
    border:1px solid var(--grey-100);
    background:var(--white-color);
    padding:10px;
    border-radius:8px;
    font-size:0.88rem;
    font-weight:500;
    color: var(--grey-800);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    transition:background .2s ease;
  }
  .btn-social:hover{ background:#f7f7f7; }

  .switch-link{
    text-align:center;
    font-size:0.9rem;
    color:var(--grey-800);
    margin-top:26px;
  }   
 

  /* sign up css start */
  .signUp_outer .auth-brand p {
    margin-bottom: 20px;
  }
  .signUp_outer .auth-brand ul li {
    padding-bottom: 4px;
  }
  .signUp_outer .auth-brand ul li a {
    color: var(--black_color);
    font-size: 14px;
    line-height: 18px;
    text-decoration: none;
    font-weight: 300;
    letter-spacing: 0.5px;
  }
  .signUp_outer .auth-brand ul li a img {
    width: 16px;
    top: -2px;
    position: relative;
  }
  form#signupForm {
    margin-top: 12px;
  }
  .auth-wrap h4 {
    color: var(--blue-color);
  }
  /* sign up css close */

  /* dashboard css start */
  .app {
    display: flex;
    min-height: 100vh;
    width: 100%;
}
  /* dark backdrop behind the sidebar on mobile, fades in/out with the panel */
  .sidebar-overlay{
    position:fixed;
    inset:0;
    background:rgba(10,12,25,0.5);
    backdrop-filter:blur(2px);
    z-index:1040;
    opacity:0;
    pointer-events:none;
    transition:opacity .3s ease;
  }
  .sidebar-overlay.show{
    opacity:1;
    pointer-events:auto;
  }
  .mobile-topbar {
    display: none;
  }
.sidebar {
    width: 230px;
    flex-shrink: 0;
    background: var(--grey-50);
    color: var(--white-color);
    padding: 22px 0px;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    overflow-y: auto;
    transition: left .3s ease;
    z-index: 1050;
}
.sidebar .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    padding: 0 20px;
}
.sidebar-nav li {
    margin-bottom: 4px;
}

.sidebar-nav a.active {
    background: var(--primary_color);
    color: var(--white-color);
    box-shadow: 0 6px 16px rgba(229, 55, 42, 0.35);
}
.sidebar-nav a:hover {
  background-color: var(--primary_color);
    color: var(--white-color);

}
.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    border-radius: 0px;
    color: var(--black_color);
    font-size: 14px;
    line-height: 18px;
    font-weight: 500;
    text-decoration: none; 
}
.sidebar-nav li a i.bi.bi {
    font-size: 16px;
    line-height: 20px;
}
.main-content {
    margin-left: 230px;
    flex: 1; 
    width: 100%; 
}
.rightSide_column {
  padding: 0px 30px 50px;
}
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap; 
    background: var(--white-color);
    padding: 16px 26px;
}
button.dashboard.btn-add.primary_btn {
    padding: 8px 10px;
    font-size: 14px;
    letter-spacing: 1px;
    width: 160px;
}
button.dashboard.btn-add.primary_btn:hover {
  background-color: #e02b1da1;
  color: var(--white-color);
}
.topbar .welcome h4 { 
    color: var(--blue-color);
}
.topbar-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}
.icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center; 
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    position: relative;
    flex-shrink: 0;
} 
.stat-card .outerCard {
    display: flex;
    gap: 20px;
    height: 100%;
    align-items: flex-end;
    padding-top: 40px;
}
.stat-card .label {
    font-size: 14px;
    line-height: 24px; 
    font-weight: 500;
}
.stat-card .value {
    font-size: 38px;
    line-height: 42px; 
    font-weight: 600;
} 
.icon-btn .dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary_color);
}
button.dashboard.btn-add.primary_btn img {
    width: 12px;
}

 .outerRow .col-6.col-md-4 {
    padding: 20px 20px;
}

.stat-card {
    border-radius: 20px;
    padding: 18px 20px;
    height: 100%;
    position: relative;
    overflow: hidden; 
    /* margin: 18px 10px; */
}
.row.outerRow {
    background: var(--white-color);
    padding: 30px 36px;
    border-radius: 20px;
    margin-top: 40px;
}
.row.outerRow .col-md-6 { 
    padding: 18px 10px;
}
.btnCol {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--white-color);
    padding: 5px 20px;
    text-decoration: none;
    color: var(--black_color);
    font-size: 14px;
    line-height: 18px;
    border-radius: 0 20px 0px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.btnCol i.bi.bi-arrow-right-short {
    font-size: 20px;
    line-height: 24px;
    border: 1px solid #DFDFDF;
    border-radius: 100px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
}
.card-pink {
    background: #FFEAFD;
}
.card-pink .label , .card-pink .value {
  color: #5F2459; 
}
.card-green {
    background: #E1F6F4;
}
.card-green .label , .card-green .value {
  color: #1A5765; 
}

.card-blue {
    background: #E9F3FF;
}
.card-blue .label , .card-blue .value {
  color: #24558E; 
}


.card-orange {
    background: #F8EFE1;
}
.card-orange .label , .card-orange .value {
  color: #5F461F; 
}


.card-lightblue {
    background: #F2F4F7;
}
.card-lightblue  .label , .card-lightblue  .value {
  color: #365179; 
}


.card-yellow {
    background: #F3F6E1;
}
.card-yellow .label , .card-yellow .value {
  color: #5C671C; 
}

.revenue-card {
    margin-top: 40px;
    background: var(--white-color);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 10px 0 39px 0 #00000004;
}


.rev-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 6px;
}
.revenue-card h5 { 
    margin-bottom: 2px; 
}
.revenue-card .sub {
    font-size: 0.8rem;
    color: var(--grey-800);
}
.rev-head-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.sort-label {
    font-size: 0.78rem;
    color: var(--grey-800);
    white-space: nowrap;
}
.month-select {
    font-size: 0.82rem;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid #eee;
    color: #333;
    background: var(--white-color);
}
.download-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid #eee;
    background: var(--white-color);
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}


.chart-wrap {
    position: relative;
    height: 260px;
    margin-top: 18px;
}
.chart-tooltip {
    position: absolute;
    pointer-events: none;
    background: var(--white-color);
    border-radius: 10px;
    padding: 8px 14px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
    text-align: center;
    transform: translate(-50%, -115%);
    opacity: 0;
    transition: opacity .15s ease;
    white-space: nowrap;
    z-index: 5;
}
.chart-tooltip .t-date {
    font-size: 0.68rem;
    color: var(--grey-800);
    letter-spacing: 0.4px;
}
.chart-tooltip .t-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--blue-color);
}
.chart-tooltip::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: var(--white-color);
}
.period-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 26px;
}
.period-pills button {
    border: 1px solid var(--grey-100);
    background: var(--grey-50);
    color: var(--grey-800);
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    padding: 8px 18px;
    border-radius: 20px;
    transition: all .2s ease;
}
.period-pills button.active {
    background: var(--primary_color);
    border-color: var(--primary_color);
    color: var(--white-color);
    box-shadow: 0 6px 14px rgba(229, 55, 42, 0.3);
}
.table-card{
  background:var(--white-color); 
  padding:22px 24px 10px;
  box-shadow:0 2px 14px rgba(0,0,0,0.04);
  border-radius: 20px;
}
.table-card .table-head-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:18px;
  } 
.sidebar-nav{
  list-style:none;
  padding:0;
  margin:0;
}
.export-btn:hover{
  background:var(--primary_color);
  color:var(--white-color);
}
.export-btn{
    background:var(--primary_color);
    color: var(--white-color);
    font-size: 14px;
    font-weight:600;
    padding:8px 16px;
    border-radius:10px;
    border:none;
    white-space:nowrap;
  }
  .welcome {
    display: flex;
    align-items: center;
    gap: 14px;
}
i.bi.bi-list {
    font-size: 28px;
    display: none;
}
/* dashboard css close */

/* today order css start */
/* ---------------- MAIN CONTENT ---------------- */
  .main-content.todayOrders {  
    padding: 20px 30px 20px; 
  } 

  .page-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:20px;
  }
  .page-head h4 {
    margin:0 0 3px;
  }
  .page-head .breadcrumb-sub{
    font-size: 14px;
    line-height: 18px;
    color:var(--grey-800);
  } 

  /* ---------------- SUMMARY STRIP ---------------- */
  .summary-strip{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom:22px;
  }
  .summary-chip{
    background:var(--white-color);
    border-radius:12px;
    padding:14px 20px;
    flex:1 1 160px;
    box-shadow:0 2px 10px rgba(0,0,0,0.04);
  }
  .summary-chip .label{ font-size:0.75rem; color:var(--text-muted); margin-bottom:4px; }
  .summary-chip .value{
    font-size:1.3rem;
    font-weight:700; }
  .summary-chip.accent-red .value{
    color:var(--primary_color);
  }
  .summary-chip.accent-green .value{
    color:#1f8a4c;
  }
  .summary-chip.accent-blue .value{
    color:#3454c9;
  }
  .summary-chip.accent-orange .value{
    color:#c96b1f;
  }

  /* ---------------- TABLE CARD ---------------- */ 
  .table-tools{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
  }
  .search-box{
    display:flex;
    align-items:center;
    gap:8px;
    background:#f4f5f9;
    border-radius:10px;
    padding:8px 14px;
  }
  .search-box input{
    border:none;
    background:transparent;
    font-size: 14px;
    outline:none;
    width:170px;
  }
  .search-box i{
    color:var(--grey-800);
  }
  .filter-select{
    font-size: 14px;
    line-height: 18px;
    padding:8px 14px;
    border-radius:10px;
    border:1px solid #eee;
    color: var(--grey-800);
    background:var(--white-color);
  }


  /* table itself */
  .orders-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    font-size:0.85rem;
  }
  .orders-table thead th{
    text-align:left;
    font-size:0.72rem;
    text-transform:uppercase;
    letter-spacing:0.4px;
    color:var(--text-muted);
    font-weight:600;
    padding:10px 14px;
    border-bottom:1px solid #f0f0f3;
    white-space:nowrap;
  }
  .orders-table tbody td{
    padding:14px 14px;
    border-bottom:1px solid #f5f5f8;
    vertical-align:middle;
    color:#22243a;
  }
  .orders-table tbody tr:hover{ background:#fafafe; }

  .order-id{ font-weight:600; color:var(--navy); }

  .customer-cell{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .customer-cell img{
    width:34px;height:34px;
    border-radius:50%;
    object-fit:cover;
    flex-shrink:0;
  }
  .customer-cell .c-name{
    font-weight:600;
    font-size: 14px;
    line-height: 18px;
  }
  .customer-cell .c-email{
    font-size: 12px;
    line-height: 16px;
    color:var(--grey-800);
  }

  .product-cell{
    display:flex;
    align-items:center;
    gap:8px;
  }
  .product-cell i {
    color:var(--primary_color);
  }

  .amount-cell{
    font-weight:600;
  }

  .agent-cell{
    display:flex;
    align-items:center;
    gap:8px;
    font-size: 14px;
    line-height: 18px;
  }
  .agent-cell .agent-dot{
    width:8px;height:8px;
    border-radius:50%;
    background:var(--primary_color);
    flex-shrink:0;
  }

  .amount-cell{
    font-weight:700;
    color:#1f8a4c;
  }


  .status-badge{
    font-size: 12px;
    font-weight: 500;
    padding:5px 12px;
    border-radius:20px;
    display:inline-block;
    white-space:nowrap;
  }
  .status-delivered{ background:#dcf4e3; color:#1f8a4c; }
  .status-pending{ background:#f7f3d4; color:#a68c1f; }
  .status-processing{ background:#dde6fb; color:#3454c9; }
  .status-cancelled{ background:#fbe1ea; color:#c23568; }

  .row-actions{
    display:flex;
    gap:6px;
  }
  .row-actions button{
    width:30px;height:30px;
    border-radius:8px;
    border:1px solid var(--grey-100);
    background:var(--white-color);
    color:var(--grey-800);
    font-size: 14px;
  }
  .row-actions button:hover{
    background:#f4f5f9;
  }
  .row-actions a{
    width:30px;
    height:30px;
    border-radius:8px;
    border:1px solid var(--grey-100);
    background:var(--white-color);
    color:#E5372A;
    font-size: 14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    transition:background 0.2s ease;
  }
  .row-actions a:hover{
    background:#f4f5f9;
    color:#E5372A;
  }

  .table-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    padding:16px 4px 18px;
    font-size: 14px;
    color:var(--grey-800);
  }
  .pagination-btns{
    display:flex;
    gap:6px;
  }
  .pagination-btns button{
    width:30px;height:30px;
    border-radius:8px;
    border:1px solid var(--grey-100);
    background:var(--grey-800);
    color:var(--grey-800);
    font-size: 12px;
  }
  .pagination-btns button.active{
    background:var(--primary_color);
    border-color:var(--primary_color);
    color:var(--white-color);
  }

  .table-responsive-wrap{
    overflow-x:auto;
  } 
/* today order css close */

/* today sales css start */ 
  .sales-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    font-size: 14px;
    line-height: 18px;
  }
  .sales-table thead th{
    text-align:left;
    font-size: 12px;
    text-transform:uppercase;
    letter-spacing:0.4px;
    color:var(--grey-800);
    font-weight:600;
    padding:10px 14px;
    border-bottom:1px solid var(--grey-100);
    white-space:nowrap;
  }
  .sales-table tbody td{
    padding: 14px;
    border-bottom:1px solid var(--grey-100);
    vertical-align:middle;
    color:#22243a;
  }
  .sales-table tbody tr:hover{
    background:var(--grey-100);
  }

  .sale-id{
    font-weight:600;
    color:var(--blue-color);
  }


  .payment-badge{
    font-size: 12px;
    line-height: 16px;
    font-weight:600;
    padding:5px 12px;
    border-radius:20px;
    display:inline-block;
    white-space:nowrap;
  }
  .payment-paid{
    background:#dcf4e3;
    color:#1f8a4c;
  }
  .payment-cod{
    background:#f7f3d4;
    color:#a68c1f;
  }
  .payment-refunded{
    background:#fbe1ea;
    color:#c23568;
  }
  /* today sales css close */

/* pending payment starts here*/

  /* .amount-cell {
    background: #f7f3d4;
    color: #a68c1f;
} */

/* pending payment ends here*/

  /* monthely sales css start */
    /* ---------------- CHART CARD ---------------- */
  .chart-card{
    background: var(--white-color); 
    padding:22px 24px 18px;
    box-shadow:0 2px 14px rgba(0,0,0,0.04);
    margin-bottom:22px;
    border-radius: 20px;
  }
  .chart-card .rev-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:10px;
  }
  .chart-card h5{
    font-weight:700;
    margin:0 0 2px; 
  }
  .chart-card .sub{
    font-size:0.8rem;
    color:var(--grey-800);
  }
  .month-select{
    font-size:0.82rem;
    padding:7px 14px;
    border-radius:20px;
    border:1px solid var(--grey-100);
    color:var(--grey-800);
    background:var(--white-color);
  }
  .chart-wrap{
    position:relative;
    height:230px;
    margin-top:10px;
  }
  /* monthely sales css close */
  

  /* total customer css start */
  .add-customer-btn{
    background:var(--primary_color);
    color:var(--white-color);
    font-size: 14px;
    font-weight:600;
    padding:8px 16px;
    border-radius:10px;
    border:none;
    white-space:nowrap;
  }
  .add-customer-btn:hover{
    background:#c92c20;
    color:var(--white-color);
  }


  .customers-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    font-size: 14px;
  }
  .customers-table thead th{
    text-align:left;
    font-size: 12px;
    text-transform:uppercase;
    letter-spacing:0.4px;
    color:var(--grey-800);
    font-weight:600;
    padding:10px 14px;
    border-bottom:1px solid var(--grey-50);
    white-space:nowrap;
  }
  .customers-table tbody td{
    padding:14px 14px;
    border-bottom:1px solid var(--grey-100);
    vertical-align:middle;
    color:var(--blue-color);
  }
  .customers-table tbody tr:hover{
    background:var(--grey-100);
  }

  .cust-id{
    font-weight:600;
    color:var(--blue-color);
  }
  .location-cell{
    display:flex;
    align-items:center;
    gap:6px;
    font-size: 12px;
  }
  .location-cell i{
    color:var(--primary_color);
  }
  .orders-cell{
    font-weight:600;
  }
  .spend-cell{
    font-weight:700;
    color:#1f8a4c;
  }

  .status-active{
    background:#dcf4e3;
    color:#1f8a4c;
  }
  .status-inactive{
    background:#f1f1f4;
    color:var(--grey-800);
  }
  .status-vip{
    background:#f7f3d4;
    color:#a68c1f;
  }
  /* total customer css close */


  /* payment css start */
  .remind-all-btn{
    background:var(--primary_color);
    color: var(--white-color);
    font-size: 14px;
    font-weight:600;
    padding: 8px 16px;
    border-radius: 10px;
    border: none;
    white-space: nowrap;
  }
  .remind-all-btn:hover{
    background:#c92c20; color: var(--white-color);
  }


     /* table itself */
  .payments-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    font-size: 14px;
  }
  .payments-table thead th{
    text-align:left;
    font-size: 14px;
    text-transform:uppercase;
    letter-spacing:0.4px;
    color:var(--grey-800);
    font-weight:600;
    padding:10px 14px;
    border-bottom:1px solid #f0f0f3;
    white-space:nowrap;
  }
  .payments-table tbody td{
    padding:14px 14px;
    border-bottom:1px solid #f5f5f8;
    vertical-align:middle;
    color: var(--blue-color);
  }
  .payments-table tbody tr:hover{
    background:#fafafe;
  }
  .payments-table tbody tr.overdue-row{
    background:#fef6f5;
  }
  .payments-table tbody tr.overdue-row:hover{
    background:#fcece9;
  }
  .pay-id{
    font-weight:600;
    color:var(--blue-color);
  }

  .due-cell{
    display:flex;
    align-items:center;
    gap:6px;
  }
  .due-cell .overdue-tag{
    font-size:0.68rem;
    font-weight:600;
    color:#c23568;
    background:#fbe1ea;
    padding:2px 8px;
    border-radius:20px;
  }
  .method-cell{
    display:flex;
    align-items:center;
    gap:6px;
    font-size: 14px;
  }
  .method-cell i{
    color: var(--grey-800);
  }

  .status-overdue{ background:#fbe1ea; color:#c23568; }
  .status-partial{ background:#dde6fb; color:#3454c9; }
  /* payment css close */

  /* agent css start */
  .add-agent-btn{
    background:var(--primary_color);
    color:var(--white-color);
    font-size: 14px;
    font-weight:600;
    padding:8px 16px;
    border-radius:10px;
    border:none;
    white-space:nowrap;
  }
  .add-agent-btn:hover{
    background:#c92c20;
    color:var(--white-color);
  }
  /* table itself */
  .agents-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    font-size: 14px;
  }
  .agents-table thead th{
    text-align:left;
    font-size: 14px;
    text-transform:uppercase;
    letter-spacing:0.4px;
    color:var(--grey-800);
    font-weight:600;
    padding: 10px 14px;
    border-bottom:1px solid #f0f0f3;
    white-space:nowrap;
  }
  .agents-table tbody td{
    padding: 14px;
    border-bottom:1px solid #f5f5f8;
    vertical-align:middle;
    color:#000000;
  }
  .agents-table tbody tr:hover{
    background:#fafafe;
  }

  .agent-id{
    font-weight:600;
    color:#000000;
  }

  .agent-cell {
    display: flex;
    align-items:center;
    gap:10px;
  }
  .agent-cell .avatar-wrap{
    position:relative;
    flex-shrink:0;
  }
  .agent-cell img{
    width:38px;
    height:38px;
    border-radius:50%;
    object-fit:cover;
  }
  .agent-cell .status-dot{
    position:absolute;
    bottom:0; right:0;
    width:10px;height:10px;
    border-radius:50%;
    border:2px solid var(--white-color);
    background:#ccc;
  }
  .agent-cell .status-dot.online{
    background:#2ecc71;
  }
  .agent-cell .a-name{
    font-weight:600;
    font-size: 14px;
  }
  .agent-cell .a-email{
    font-size: 14px;
    color:var(--grey-800);
  }


    .region-cell{
      display:flex;
      align-items:center;
      gap:6px;
      font-size: 14px;
    }
  .region-cell i {
    color:var(--primary_color);
  }
  .rating-cell{
    display:flex;
    align-items:center;
    gap:5px;
    color:#a68c1f;
    font-weight:600;
    font-size: 14px;
  }
  .deals-cell{
    font-weight:600;
  }
  .revenue-cell{
    font-weight:700;
    color:#1f8a4c;
  }
  .status-onleave{
    background:#f7f3d4;
    color:#a68c1f;
  }
  .profile-chip {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .profile-chip img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }
  .profile-chip .name {
    font-size: 14px;
    line-height: 18px;
    font-weight: 700;
  }
  .profile-chip .role {
    font-size: 14px;
    line-height: 18px;
    font-weight: 500;
    color: var(--grey-800)
  }
  /* agent css close */

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

  @media only screen and (max-width: 992px) {
  /* login css start */
  .auth-brand { 
      flex: 1 1 48%; 
      padding: 30px 26px; 
  }
  .auth-form-panel { 
      padding: 28px 32px; 
  } 
  /* login css close */

  /* dashboard css start */
  .rightSide_column {
      padding: 0px 15px 20px;
  /* dashboard css close */

  /* orders css start */
  .agentsDashboard .page-head .breadcrumb-sub {
      font-size: 22px;
      line-height: 24px; 
  }
/* orders css close */
  }
}

@media only screen and (max-width: 767px) {
  /* login css start */ 
  .auth-wrap {
    display: block;
  }
  .auth-form-panel {
        padding: 18px 14px;
    }
    .auth-brand { 
        padding: 18px 14px;
    }
    .auth-brand .logo { 
        margin-bottom: 20px;
    }
  /* login css close */
}

@media only screen and (max-width: 575px) {
  /* login css start */ 
.loginCol.password { 
    gap: 7px;
}
  /* login css close */ 
}