@import url("https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i");

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

:root { 
  --primary:#ED563B; 
  --meta:#7A7A7A; 
  --white:#FFFFFF; 
  --header:#F7F7F7; 
  --light:#FAFAFA; 
  --dark:#232D39; 
}
 * { box-sizing:border-box; }
 body { 
  margin:0; color:var(--dark); 
  background:var(--light); 
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; 
}
a { color:inherit; text-decoration:none; }
.app-shell { min-height:100vh; display:flex; }
.sidebar { width:272px; background:var(--white); 
  border-right:1px solid #eee; 
  padding:25px 16px; 
  transition:width .28s ease, padding .28s ease; 
  overflow:hidden; 
  flex:0 0 auto; 
}
 .sidebar.is-collapsed { 
  width:86px; 
  padding-inline:13px; 
}
.brand {
 display:flex; 
 align-items:center; 
 gap:12px; padding:0 10px 30px; 
 white-space:nowrap; 
}
.brand-mark { 
  width:39px; 
  height:39px; 
  display:grid; 
  place-items:center; 
  border-radius:12px; 
  background:var(--primary); 
  color:var(--white); 
  font-size:19px; 
  flex:none; 
}
.brand-name { 
  font-weight:800; 
  font-size:19px; 
  letter-spacing:-.6px; 
}
.side-label {
 color:var(--meta); 
 font-size:11px; 
 font-weight:700; 
 letter-spacing:1.1px; 
 padding:0 12px 10px; 
 white-space:nowrap; 
}
.nav-link { 
  color:var(--meta); 
  display:flex; 
  align-items:center; 
  gap:14px; 
  padding:13px 12px; 
  margin-bottom:5px; 
  border-radius:10px; 
  font-size:14px; 
  font-weight:600; 
  white-space:nowrap; 
  transition:.2s; 
}
.nav-link i {
  width:20px; 
  text-align:center; 
  font-size:17px; 
}
.nav-link:hover,.nav-link.active { 
  background:#fff0ed; 
  color:var(--primary); 
}
.sidebar.is-collapsed .brand-name,.sidebar.is-collapsed .nav-text,.sidebar.is-collapsed .side-label { 
  opacity:0; 
  visibility:hidden; 
}
.sidebar.is-collapsed .brand { 
  gap:0; 
  padding-inline:10px; 
}
.sidebar.is-collapsed .nav-link { 
  justify-content:center; 
  padding-inline:10px; 
}
.page { 
  flex:1; 
  min-width:0; 
}
.topbar { 
  min-height:78px; 
  padding:0 34px; 
  background:var(--header); 
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  gap:20px; 
  border-bottom:1px solid #eee; 
}
.left-tools,.account { 
  display:flex; 
  align-items:center; 
  gap:17px; 
}
.menu-toggle { 
  border:0; 
  color:var(--dark); 
  background:transparent; 
  font-size:20px; 
  padding:8px; 
}
.page-title { 
  margin:0; 
  font-size:18px; 
  font-weight:800; 
}
.account { 
  position:relative; 
}
.profile-button { 
  border:0; 
  background:transparent; 
  padding:5px; 
  display:flex; 
  align-items:center; 
  gap:10px; 
  color:var(--dark); 
}
.avatar { 
  width:38px; 
  height:38px; 
  border-radius:50%; 
  background:var(--dark); 
  color:var(--white); 
  display:grid; 
  place-items:center; 
  font-weight:700; 
}
.user-copy { 
  text-align:left; 
  line-height:1.2; 
}
.user-copy strong { 
  display:block; 
  font-size:13px; 
}
.user-copy small { 
  color:var(--meta); 
  font-size:11px; 
}
.profile-menu { 
  display:none; 
  position:absolute; 
  right:0; 
  top:53px; 
  width:172px; 
  padding:8px; 
  background:var(--white); 
  border:1px solid #eee; 
  border-radius:12px; 
  box-shadow:0 13px 30px rgba(35,45,57,.13); 
  z-index:10; 
}
.profile-menu.show { 
  display:block; 
}
.profile-menu a { 
  display:flex; 
  gap:10px; 
  padding:10px; 
  color:var(--dark); 
  border-radius:8px; 
  font-size:13px; 
}
.profile-menu a:hover { 
  color:var(--primary); 
  background:#fff0ed; 
}
.content { 
  padding:34px; 
  max-width:1550px; 
}
.intro { 
  display:flex; 
  justify-content:space-between; 
  align-items:end; 
  gap:20px; 
  margin-bottom:29px; 
}
.intro h1 { 
  font-size:27px; 
  font-weight:800; 
  margin:0 0 6px; 
  letter-spacing:-.8px; 
}
.intro p { 
  color:var(--meta); 
  margin:0; 
  font-size:14px; 
}
.payment-btn { 
  background:var(--primary); 
  color:var(--white); 
  border:0; 
  border-radius:9px; 
  padding:11px 16px; 
  font-weight:700; 
  font-size:14px; 
  box-shadow:0 7px 15px rgba(237,86,59,.18); 
}
.payment-btn:hover { 
  background:#d9452b; 
  color:var(--white); 
}
.section-heading { 
  margin:0 0 14px; 
  font-size:14px; 
  font-weight:800; 
}
.metric-card,.installments-card { 
  height:100%; 
  border:0; 
  border-radius:14px; 
  background:var(--white); 
  box-shadow:0 4px 20px rgba(35,45,57,.045); 
}
.metric-card .card-body { 
  padding:20px; 
}
.metric-icon { 
  width:43px; 
  height:43px; 
  display:grid; 
  place-items:center; 
  border-radius:12px; 
  color:var(--primary); 
  background:#fff0ed; 
  font-size:18px; 
}
.metric-label { 
  color:var(--meta); 
  font-size:12px; 
  font-weight:600; 
  margin:16px 0 7px; 
}
.metric-value { 
  color:var(--dark); 
  font-size:24px; 
  font-weight:800; 
  letter-spacing:-.7px; 
}
.metric-note { 
  color:var(--meta); 
  font-size:11px; 
  margin-top:5px; 
}
.overview-card .card-body { 
  padding:24px; 
}
.overview-head { 
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
}
.overview-head h2 { 
  font-weight:800; 
  font-size:16px; 
  margin:0; 
}
.legend { 
  color:var(--meta); 
  font-size:12px; 
}
.legend span { 
  display:inline-block; 
  width:8px; 
  height:8px; 
  background:var(--primary); 
  border-radius:50%; 
  margin-right:4px; 
}
.ring-wrap { 
  display:grid; 
  place-items:center; 
  padding:25px 0 12px; 
}
.ring { 
  width:177px; 
  height:177px; 
  border-radius:50%; 
  background:conic-gradient(var(--primary) 0 72%, #f4dbd5 72% 100%); 
  display:grid; 
  place-items:center; 
  position:relative; 
}
.ring:before { 
  content:""; 
  position:absolute; 
  inset:18px; 
  border-radius:50%; 
  background:var(--white); 
}
.ring strong,.ring small { 
  z-index:1; 
}
.ring strong { 
  font-size:30px; 
}
.ring small { 
  margin-top:-55px; 
  color:var(--meta); 
  font-size:11px; 
}
.balance { 
  border-top:1px solid #f0f0f0; 
  padding-top:17px; 
}
.balance small { 
  color:var(--meta); 
}
.balance strong { 
  display:block; 
  font-size:21px; 
  margin-top:4px; 
}
.installments-card .card-body { 
  padding:0; 
}
.table-title { 
  padding:22px 24px 14px; 
  display:flex; 
  justify-content:space-between; 
  align-items:center; 
}
.table-title h2 { 
  margin:0; 
  font-size:16px; 
  font-weight:800; 
}
.view-link { 
  font-size:12px; 
  color:var(--primary); 
  font-weight:700; 
}
.table { 
  margin:0; 
}
.table th { 
  color:var(--meta); 
  font-size:11px; 
  text-transform:uppercase; 
  letter-spacing:.3px; 
  font-weight:700; 
  padding:13px 24px; 
  background:var(--light); 
  border:0; 
}
.table td { 
  padding:17px 24px; 
  color:var(--dark); 
  font-size:13px; 
  vertical-align:middle; 
  border-color:#f2f2f2; 
}
.customer { 
  font-weight:700; 
}
.installment-id { 
  color:var(--meta); 
  font-size:11px; 
}
.status { 
  padding:5px 9px; 
  border-radius:20px; 
  font-size:11px; 
  font-weight:700; 
  display:inline-block; 
}
.completed { 
  color:#348a58; 
  background:#eaf7ef; 
}
.progress-status { 
  color:#b17916; 
  background:#fff6de; 
}
.overdue { 
  color:#ca4a38; 
  background:#fff0ed; 
}
.due { 
  color:var(--meta); 
}
.summary-card { 
  padding:24px; 
}
.summary-card h2 { 
  font-size:16px; 
  font-weight:800; 
  margin:0 0 20px; 
}
.summary-row { 
  display:flex; 
  justify-content:space-between; 
  margin-bottom:15px; 
  font-size:13px; 
}
.summary-row span { 
  color:var(--meta); 
}
.summary-row strong { 
  font-size:14px; 
}
.paybar { 
  height:8px; 
  background:#f7dfda; 
  border-radius:9px; 
  overflow:hidden; 
  margin:5px 0 20px; 
}
.paybar div { 
  width:72%; 
  height:100%; 
  background:var(--primary); 
  border-radius:inherit; 
}
@media (max-width: 991.98px) { 
  .sidebar { 
    width:86px; 
    padding-inline:13px; 
  }
  .sidebar .brand-name,.sidebar .nav-text,.sidebar .side-label { 
    opacity:0; 
    visibility:hidden; 
  }
  .sidebar .brand { 
    gap:0; 
    padding-inline:10px; 
  }
  .sidebar .nav-link { 
    justify-content:center; 
    padding-inline:10px; 
  }
  .content { 
    padding:26px; 
  }
  .topbar { 
    padding:0 26px; 
  } 
}
@media (max-width: 767.98px) { 
  .app-shell { 
    display:block; 
  }
  .sidebar { 
    position:fixed; 
    z-index:20; 
    left:0; 
    top:0; 
    bottom:0; 
    transform:translateX(-100%); 
    width:272px; 
    padding:25px 16px; 
    box-shadow:10px 0 30px rgba(0,0,0,.1); 
  }
  .sidebar.mobile-open { 
    transform:translateX(0); 
  }
  .sidebar .brand-name,.sidebar .nav-text,.sidebar .side-label { 
    opacity:1; 
    visibility:visible; 
  }
  .sidebar .brand { 
    gap:12px; 
  }
  .sidebar .nav-link { 
    justify-content:flex-start; 
    padding-inline:12px; 
  }
  .topbar { 
    padding:0 16px; 
    min-height:70px; 
  }
  .content { 
    padding:24px 16px; 
  }
  .page-title { 
    display:none; 
  }
  .user-copy { 
    display:none; 
  }
  .intro { 
    align-items:flex-start; 
    flex-direction:column; 
    margin-bottom:24px; 
  }
  .intro h1 { 
    font-size:24px; 
  }
  .payment-btn { 
    width:100%; 
  }
  .table th,.table td { 
    padding-left:16px; 
    padding-right:16px; 
  }
  .hide-mobile { 
    display:none; 
  } 
}
  @media (max-width: 420px) { 
    .metric-value { 
      font-size:21px; 
    }
    .content { 
      padding-inline:12px; 
    }
    .overview-card .card-body { 
      padding:18px; 
    } 
  }

/* ------------------------------------footer Section ---------------------------------------*/
 .payflow-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 34px;
    background: #F7F7F7;
    border-top: 1px solid #eeeeee;
    color: #7A7A7A;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 13px;
  }

  .payflow-footer p {
    margin: 0;
  }

  .payflow-footer a {
    color: #ED563B;
    font-weight: 700;
    text-decoration: none;
  }

  .payflow-footer a:hover {
    text-decoration: underline;
  }

  @media screen and (max-width: 767.98px) {
    .payflow-footer {
      flex-direction: column;
      justify-content: center;
      text-align: center;
      padding: 20px 16px;
    }
  }
  /* ------------------------------------Login Page---------------------------------------*/