.block-content.block-content-full::-webkit-scrollbar {
  height: 5px;
}

.block-content.block-content-full::-webkit-scrollbar-thumb {
  background-color: #343a40;
}

.col-sm-12 {
  overflow: auto;
}

@media screen and (max-width: 600px) {
  #map {
    height: 100%;
    width: 100%;
    top: 0px;
    position: relative;
  }
}

/* .block-content.block-content-full::-webkit-scrollbar-track-piece:end {
      margin-right: 50px;
    }

    .block-content.block-content-full::-webkit-scrollbar-track-piece:start {
      margin-left: 50px;
    } */

.cssonly a[href$=".pdf"]:after {
  /* PDF file */
  width: 16px;
  vertical-align: middle;
  margin: 4px 0 2px 4px;
  padding: 4px 0 1px 0px;
  background-color: #fff;
  color: red;
  border: 1px solid red;
  border-top-right-radius: 7px;
  box-shadow: 1px 1px #ccc;
  font-size: 7.7px;
  font-weight: 700;
  font-family: sans-serif;
  line-height: 16px;
  text-decoration: none;
  display: inline-block;
  box-sizing: content-box;
  content: "PDF";
}

.cssonly a[href$=".doc"]:after,
.cssonly a[href$=".docx"]:after {
  width: 16px;
  vertical-align: middle;
  margin: 4px 0 2px 4px;
  padding: 4px 0 1px 0px;
  background-color: #fff;
  color: #00d;
  border: 1px solid #00d;
  border-top-right-radius: 7px;
  box-shadow: 1px 1px #ccc;
  font-size: 7.7px;
  font-weight: 700;
  font-family: sans-serif;
  line-height: 16px;
  text-decoration: none;
  display: inline-block;
  box-sizing: content-box;
  content: "DOC";
}

.cssonly a[href$=".xls"]:after,
.cssonly a[href$=".xlsx"]:after {
  width: 16px;
  vertical-align: middle;
  margin: 4px 0 2px 4px;
  padding: 4px 0 1px 0px;
  background-color: #fff;
  color: #090;
  border: 1px solid #090;
  border-top-right-radius: 7px;
  box-shadow: 1px 1px #ccc;
  font-size: 8px;
  font-weight: 700;
  font-family: tahoma, arial, sans-serif;
  letter-spacing: 0.001em;
  line-height: 16px;
  text-decoration: none;
  display: inline-block;
  box-sizing: content-box;
  content: "XLS";
}

.progress {
  display: none;
  position: relative;
  width: 400px;
  border: 1px solid #ddd;
  padding: 1px;
  border-radius: 3px;
}
.bar {
  background-color: #b4f5b4;
  width: 0%;
  height: 20px;
  border-radius: 3px;
}
.percent {
  position: absolute;
  display: inline-block;
  top: 3px;
  left: 48%;
}

/* html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
} */

#map {
  height: 90%;
  width: 100%;
  top: 10%;
  position: absolute;
  background-color: #333;
}

 /* Default single map */
 #map1,
 #map2 {
   position: absolute;
   top: 10%;
   height: 90%;
   background-color: #333;
 }

 #map1 {
   left: 0;
   width: 100%;
 }

 #map2 {
   display: none;
   left: 50%;
   width: 50%;
 }

 /* Split mode — applied via JS */
 .split #map1 {
   width: 50%;
   left: 0;
 }

 .split #map2 {
   display: block;
   width: 50%;
   left: 50%;
 }

.popupBox {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.9);
  padding: 10px;
  font-family: Arial, sans-serif !important;
  overflow-x: auto;
  border-radius: 3px;
  width: 1000px;
  height: 300px;
  margin: 0;
  list-style: none;
  z-index: 999;
  box-shadow: 0 0 0 2px rgb(0 0 0 / 10%);
}

.popupBoxReport {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.9);
  padding: 10px;
  font-family: Arial, sans-serif !important;
  overflow-x: auto;
  border-radius: 3px;
  width: 550px;
  height: 570px;
  margin: 0;
  list-style: none;
  z-index: 999;
  box-shadow: 0 0 0 2px rgb(0 0 0 / 10%);
}

.popupBoxStats {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.9);
  padding: 10px;
  font-family: Arial, sans-serif !important;
  overflow-x: auto;
  border-radius: 3px;
  width: 900px;
  height: 610px;
  margin: 0;
  list-style: none;
  z-index: 999;
  box-shadow: 0 0 0 2px rgb(0 0 0 / 10%);
}

#controls {
  text-align: center;
  float: left;
  bottom: 0px;
  height: 100%;
  width: 30%;
  background: #ccc;
}

#savePolygon {
  position: absolute;
  top: 350px;
  left: 12px;
  z-index: 400;
  border-radius: 4px;
  text-align: center;
  height: 30px;
  width: 30px;
  /* background-image: linear-gradient(transparent, transparent); */
}

.leaflet-control-layers-expanded {
  height: 200px;
  overflow-y: scroll;
  overflow-x: hidden;
}

:root{
  --blue: #2f6fb2;    /* planned */
  --green: #6fbf5b;   /* actual */
  --accent: #333;
  --muted: #777;
  --bg: #f5f7fa;
  --card-bg: #ffffff;
}

/* Tabs */
.tabs {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom: 12px;
}
.tab-btn {
  background: var(--card-bg);
  border: 1px solid #d8dbe0;
  padding:8px 14px;
  cursor:pointer;
  border-radius:6px;
  /* transition: all .15s; */
  /* box-shadow: 0 1px 0 rgba(0,0,0,0.02); */
}
/* .tab-btn:hover { transform: translateY(-1px); } */
.tab-btn.active {
  /* background: linear-gradient(180deg,#ffffff,#eef6ff); */
  /* border-color: #bcd4ff; */
  /* box-shadow: 0 4px 12px rgba(47,111,178,0.08); */
  font-weight:600;
}

/* Card that wraps chart and heading */
.card {
  background: var(--card-bg);
  border:1px solid #e6e9ee;
  padding:18px;
  border-radius:8px;
  margin-bottom:18px;
}
.card h2 {
  margin: 0 0 8px 0;
  font-size: 22px;
  font-weight:700;
}
.card .subtitle {
  color: var(--muted);
  margin-bottom: 12px;
  font-size: 13px;
}

/* Chart area */
.chart-wrap {
  display:flex;
  justify-content:center;
  align-items:center;
}
canvas { max-width: 100%; height: 360px !important; }

/* Progress since row - like your sample */
.progress-since {
  margin-top: 12px;
  font-size: 15px;
  color: var(--muted);
}
.progress-since .label {
  font-style: italic;
  margin-right: 10px;
}
.progress-list {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:8px;
  align-items:center;
}
.progress-item {
  font-size: 14px;
  background: transparent;
  color: var(--muted);
  display:flex;
  align-items:center;
  gap:8px;
}
.bullet {
  width:8px; height:8px; border-radius:50%;
  background:#000; opacity:0.6;
  display:inline-block;
  margin-right:6px;
}
.growth {
  color: var(--green);
  font-weight:700;
  margin-left:6px;
}

/* Table style (Work Done) */
.table-title {
  margin-top: 18px;
  margin-bottom: 10px;
  text-align:center;
  font-weight:700;
}
table.progress-table {
  width: 100%;
  border-collapse:collapse;
  font-size:14px;
  background: white;
}
table.progress-table th, table.progress-table td {
  border:1px solid #dfe4ea;
  padding: 10px 12px;
  text-align:center;
}
table.progress-table th {
  background: #fbfdff;
  font-weight:700;
}

/* small helpers */
.muted { color: var(--muted); }
.center { text-align:center; }

/* page layout small screens */
@media (max-width:800px){
  canvas { height: 300px !important;}
  .progress-list { gap:8px; }
}

/* video page css */
/* .grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.video-card {
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
}
.thumbnail {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s;
}
.thumbnail:hover { transform: scale(1.05); }
video {
  width: 100%;
  border-radius: 8px;
  margin-top: 10px;
}
h3 {
  font-size: 16px;
  margin: 10px 0;
} */

h2 { margin: 0 0 16px; }
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.card {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  background: #f6f7f9;
}
.thumb {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  transition: transform .15s ease;
  background: #ddd;
}
.card:hover .thumb { transform: scale(1.02); }
/* .play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 56px;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
  pointer-events: none;
} */

/* Overlay with buttons */
 /* Overlay background */
 .overlay {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.card:hover .overlay {
  opacity: 1;
}

/* Play button in the center */
.btn.play {
  font-size: 28px;
  color: white;
  padding: 18px;
  /* border-radius: 50%; */
  /* background: rgba(0,0,0,0.7); */
  transition: all 0.25s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Delete button top-right */
.btn.delete {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 18px;
  color: white;
  padding: 10px;
  border-radius: 30%;
  background: rgba(229,57,53,0.85);
  transition: all 0.25s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn.delete:hover {
  background: #E53935;
  transform: scale(1.15);
}

/* Modal */
.videomodal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 24px;
}
.videomodal.active { display: flex; }
.videomodal-content {
  position: relative;
  width: min(1200px, 90vw);
  height: min(70vh, 80vh);
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.videomodal iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background:#000;
}
.close-btn {
  position: absolute;
  top: 12px;
  right: 18px;
  font-size: 28px;
  line-height: 1;
  color: #fff;
  background: rgba(0,0,0,1);
  border: 0;
  border-radius: 0px;
  padding: 6px 10px;
  cursor: pointer;
}


@media (max-width: 800px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .grid { grid-template-columns: 1fr; }
}