:root{
  --slim-blue:#1b84e7;
  --slim-dark:#343a40;
  --slim-muted:#868e96;
  --slim-border:#d9dfe7;
  --slim-soft:#f6f7fb;
  --slim-card:#ffffff;
  --slim-green:#23bf8f;
  --slim-orange:#f59f00;
  --slim-purple:#845ef7;
  --slim-red:#fa5252;
  --slim-shadow:0 8px 24px rgba(24,35,52,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#eef1f5;
  color:#343a40;
  font-family:Roboto,Arial,sans-serif;
  font-size:14px;
  line-height:1.45;
}
a{color:inherit;text-decoration:none}
.container{width:100%;max-width:1180px;margin:0 auto;padding:0 18px}
.slim-header{
  background:#fff;
  height:72px;
  border-bottom:1px solid #dee2e8;
  display:flex;
  align-items:center;
  position:sticky;
  top:0;
  z-index:30;
}
.slim-header .container{display:flex;align-items:center;justify-content:space-between;height:100%}
.slim-header-left,.slim-header-right{display:flex;align-items:center;gap:18px;min-width:0}
.slim-logo{
  font-size:28px;
  font-weight:700;
  color:#212529;
  letter-spacing:-1.2px;
  margin-right:10px;
}
.slim-logo span{color:var(--slim-blue)}
.search-box{
  height:40px;
  width:340px;
  border:1px solid #d8dee8;
  border-radius:3px;
  display:flex;
  align-items:center;
  background:#f8f9fb;
  color:#9299a6;
  padding:0 12px;
}
.search-box input{
  border:0;
  outline:0;
  background:transparent;
  width:100%;
  height:100%;
  padding-left:9px;
  color:#343a40;
}
.header-pill{
  display:flex;
  gap:8px;
  align-items:center;
  border:1px solid #e1e5ec;
  background:#f8f9fb;
  padding:8px 12px;
  border-radius:3px;
  color:#606a78;
  font-size:13px;
  white-space:nowrap;
}
.logout-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#495057;
  font-weight:500;
  white-space:nowrap;
}
.logout-link:hover{color:var(--slim-blue)}
.slim-navbar{
  background:#343a40;
  min-height:52px;
  color:#ced4da;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
  position:sticky;
  top:72px;
  z-index:25;
}
.slim-navbar .nav{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  align-items:center;
  min-height:52px;
}
.nav-item{position:relative}
.nav-item>a{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:52px;
  padding:0 17px;
  color:#ced4da;
  font-size:13px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.4px;
}
.nav-item>a i{font-size:14px;color:#adb5bd}
.nav-item.active>a,.nav-item:hover>a{background:#2b3035;color:#fff}
.nav-item.active>a i,.nav-item:hover>a i{color:var(--slim-blue)}
.nav-item.has-sub:hover .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.sub-menu{
  position:absolute;
  left:0;
  top:52px;
  width:640px;
  background:#fff;
  color:#343a40;
  border:1px solid #dfe5ee;
  box-shadow:0 12px 35px rgba(19,35,57,.15);
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:.18s ease;
  z-index:80;
}
.mega-menu{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:22px 24px}
.mega-menu label{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  color:#8a93a3;
  margin-bottom:8px;
  font-weight:700;
  letter-spacing:.7px;
}
.mega-menu a{display:block;padding:7px 0;color:#495057;font-size:13px}
.mega-menu a:hover{color:var(--slim-blue)}
.slim-mainpanel{padding:30px 0 36px}
.slim-pageheader{margin-bottom:20px}
.breadcrumb{
  margin:0 0 9px;
  padding:0;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  color:#9099a8;
  font-size:12px;
}
.breadcrumb li:not(:last-child)::after{content:'/';padding-left:8px;color:#b1b8c3}
.slim-pagetitle{
  margin:0;
  color:#1f2937;
  font-size:18px;
  text-transform:uppercase;
  letter-spacing:.5px;
  font-weight:700;
}
.manager-header{
  background:#fff;
  border:1px solid var(--slim-border);
  padding:24px;
  margin-bottom:22px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  box-shadow:var(--slim-shadow);
}
.manager-header h2{margin:0 0 6px;font-size:27px;letter-spacing:-.4px;color:#212529}
.manager-header p{margin:0;color:#6c7582;max-width:620px}
.filter-form{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:#8992a2;font-weight:700}
.field input,.field select{
  min-width:156px;
  height:39px;
  border:1px solid #d8dee8;
  border-radius:3px;
  padding:0 11px;
  color:#343a40;
  background:#fff;
  outline:0;
}
.field select{min-width:180px}
.filter-form button,.btn-line{
  height:39px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:0;
  border-radius:3px;
  background:var(--slim-blue);
  color:#fff;
  padding:0 15px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
}
.btn-line{height:34px;background:#fff;color:var(--slim-blue);border:1px solid #bcdcff}
.row{display:flex;flex-wrap:wrap;margin:0 -10px}
[class*="col-"]{padding:0 10px;margin-bottom:20px;width:100%}
.col-xl-3{flex:0 0 25%;max-width:25%}
.col-xl-4{flex:0 0 33.3333%;max-width:33.3333%}
.col-xl-8{flex:0 0 66.6667%;max-width:66.6667%}
.cards-row{margin-bottom:0}
.dash-card{
  background:#fff;
  border:1px solid var(--slim-border);
  min-height:154px;
  padding:21px 22px;
  position:relative;
  overflow:hidden;
  box-shadow:var(--slim-shadow);
}
.dash-card::after{
  content:'';
  position:absolute;
  right:-35px;
  bottom:-45px;
  width:130px;
  height:130px;
  border-radius:50%;
  background:rgba(27,132,231,.075);
}
.dash-card label,.section-label{
  margin:0 0 10px;
  display:block;
  color:#7b8494;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.8px;
  font-weight:700;
}
.dash-card h1{font-size:35px;line-height:1;margin:0 0 10px;color:#212529;letter-spacing:-1px}
.dash-card h1.small-h1{font-size:18px;line-height:1.25;letter-spacing:0}
.dash-card span{display:block;color:#8b95a4;font-size:13px}
.dash-card-icon{
  width:42px;
  height:42px;
  border-radius:50%;
  background:rgba(27,132,231,.1);
  color:var(--slim-blue);
  display:flex;
  align-items:center;
  justify-content:center;
  position:absolute;
  right:20px;
  top:20px;
  z-index:1;
}
.dash-card-icon.green{background:rgba(35,191,143,.1);color:var(--slim-green)}
.dash-card-icon.orange{background:rgba(245,159,0,.13);color:var(--slim-orange)}
.dash-card-icon.purple{background:rgba(132,94,247,.12);color:var(--slim-purple)}
.highlight-blue{background:linear-gradient(135deg,#1b84e7,#0b68c4);border-color:#1b84e7;color:#fff}
.highlight-blue label,.highlight-blue h1,.highlight-blue span{color:#fff}
.highlight-blue .dash-card-icon{background:rgba(255,255,255,.16);color:#fff}
.section-wrapper{
  background:#fff;
  border:1px solid var(--slim-border);
  padding:22px;
  box-shadow:var(--slim-shadow);
  height:100%;
}
.mt-20{margin-top:20px;height:auto}
.section-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:15px}
.section-header h3{font-size:17px;margin:0;color:#212529;font-weight:600}
.chart-legend{font-size:12px;color:#7d8795;display:flex;align-items:center;gap:7px;white-space:nowrap}
.chart-legend span{width:10px;height:10px;border-radius:50%;background:var(--slim-blue);display:inline-block}
.chart-legend span:nth-child(2){background:#23bf8f}
.badge-soft{
  display:inline-flex;
  align-items:center;
  padding:6px 9px;
  border:1px solid #d9e9fb;
  color:#2679c5;
  background:#f2f8ff;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
}
.chart-box{position:relative;height:260px;width:100%}
.chart-box.tall{height:330px}
.chart-box.donut{height:210px;margin-top:10px}
.slim-side-card{display:flex;flex-direction:column}
.audience-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:6px 0 10px}
.audience-stats div{background:#f7f9fc;border:1px solid #e4e9f0;padding:12px;text-align:center;border-radius:3px}
.audience-stats strong{display:block;font-size:20px;color:#212529}
.audience-stats span{font-size:11px;color:#7c8796;text-transform:uppercase;font-weight:700}
.muted-text{font-size:12px;color:#8a94a3;margin:12px 0 0}
#map{width:100%;height:438px;border:1px solid #dbe2eb;background:#f7f9fc;z-index:1}
.map-note{font-size:12px;color:#7d8795;margin-top:9px;line-height:1.45}
.popup-note{display:inline-block;margin-top:5px;color:#7d8795;font-size:12px;line-height:1.35}
.country-list,.compact-list,.profile-list{display:flex;flex-direction:column}
.country-item,.compact-list div,.profile-list div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px 0;
  border-bottom:1px solid #edf0f5;
}
.country-item:first-child,.compact-list div:first-child,.profile-list div:first-child{padding-top:0}
.country-item:last-child,.compact-list div:last-child,.profile-list div:last-child{border-bottom:0;padding-bottom:0}
.country-item strong,.compact-list span,.profile-list strong{color:#343a40;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis}
.country-item span,.profile-list span{display:block;color:#8b95a4;font-size:12px;margin-top:2px}
.country-item b,.compact-list strong{color:var(--slim-blue);font-size:14px;white-space:nowrap}
.compact-list span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#505a67}
.profile-list div{align-items:flex-start}
.profile-list span{font-size:11px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;color:#8a93a3;min-width:105px;margin:0}
.profile-list strong{text-align:right;word-break:break-word}
.feature-list{padding:0;margin:2px 0 0;list-style:none}
.feature-list li{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid #edf0f5;color:#566171}
.feature-list li:last-child{border-bottom:0}
.feature-list i{color:var(--slim-green)}
.table-responsive{overflow-x:auto;width:100%}
.slim-table{width:100%;border-collapse:collapse;min-width:900px}
.slim-table th{
  background:#f7f9fc;
  color:#6e7786;
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.6px;
  text-align:left;
  padding:13px 14px;
  border-top:1px solid #e8edf4;
  border-bottom:1px solid #e8edf4;
  white-space:nowrap;
}
.slim-table td{
  padding:13px 14px;
  border-bottom:1px solid #edf0f5;
  color:#4b5563;
  vertical-align:top;
  max-width:280px;
}
.slim-table tbody tr:hover{background:#fbfdff}
.url-cell{max-width:310px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.table-link{display:inline-flex;padding:5px 9px;background:#f0f7ff;color:var(--slim-blue);border-radius:3px;font-weight:700;font-size:12px}
.empty{color:#8a94a3;text-align:center;padding:18px!important}
.footer-line{display:flex;justify-content:space-between;gap:20px;color:#8b95a4;font-size:12px;padding:18px 0 4px}
.visitor-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.alert-box{padding:12px 13px;border-radius:3px;margin-bottom:16px;font-size:13px}
.alert-box.danger{background:#fff5f5;color:#c92a2a;border:1px solid #ffc9c9}
.signin-page{background:#343a40;min-height:100vh;display:flex;align-items:center;justify-content:center}
.signin-wrapper{width:100%;padding:24px}
.signin-box{max-width:410px;margin:0 auto;background:#fff;border-radius:4px;padding:35px;border:1px solid #454b51;box-shadow:0 22px 60px rgba(0,0,0,.32)}
.signin-brand{font-size:32px;font-weight:700;color:#212529;letter-spacing:-1.2px;margin-bottom:20px}
.signin-brand strong{color:var(--slim-blue)}
.signin-box h2{margin:0 0 7px;font-size:24px}
.signin-box p{margin:0 0 22px;color:#7b8494}
.signin-box label{display:block;margin:14px 0 6px;font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:#7c8796;font-weight:700}
.signin-box input{width:100%;height:42px;border:1px solid #d8dee8;border-radius:3px;padding:0 12px;outline:0}
.signin-box button{margin-top:18px;width:100%;height:42px;border:0;border-radius:3px;background:var(--slim-blue);color:#fff;font-weight:700;cursor:pointer}
.signin-box small{display:block;margin-top:15px;color:#8a94a3}
@media(max-width:1024px){
  .col-xl-3{flex:0 0 50%;max-width:50%}
  .col-xl-4,.col-xl-8{flex:0 0 100%;max-width:100%}
  .manager-header{align-items:flex-start;flex-direction:column}
  .filter-form{justify-content:flex-start}
  .search-box{width:260px}
}
@media(max-width:760px){
  .slim-header{height:auto;min-height:72px;padding:12px 0;position:relative}
  .slim-navbar{top:0;position:relative;overflow-x:auto}
  .slim-header .container,.slim-header-left,.slim-header-right{align-items:flex-start;flex-direction:column;gap:10px}
  .slim-header-right{width:100%}
  .hide-sm{display:none}
  .search-box{width:100%}
  .slim-navbar .nav{min-width:760px}
  .container{padding:0 14px}
  .slim-mainpanel{padding-top:20px}
  .manager-header{padding:18px}
  .manager-header h2{font-size:23px}
  .filter-form,.field,.field input,.field select,.filter-form button{width:100%;min-width:0}
  .col-xl-3,.col-md-6{flex:0 0 100%;max-width:100%}
  .section-wrapper{padding:17px}
  .chart-box,.chart-box.tall{height:270px}
  #map{height:350px}
  .audience-stats{grid-template-columns:1fr}
  .footer-line{flex-direction:column;gap:4px}
  .sub-menu{display:none}
}
.notice-panel{
  border-left:4px solid var(--slim-blue);
  color:#334155;
}
.badge-soft.danger{
  background:#fff1f2;
  color:#e03131;
}
code{
  background:#f1f5f9;
  border:1px solid #e2e8f0;
  border-radius:3px;
  color:#0f172a;
  padding:2px 5px;
  font-size:12px;
}
#visitor-history,
#recent-visits{
  height:auto;
  scroll-margin-top:140px;
}

#recent-visits{
  margin-top:24px;
}

@media(max-width:760px){
  #visitor-history,
  #recent-visits{
    scroll-margin-top:24px;
  }

  #recent-visits{
    margin-top:18px;
  }
}
