/*
Theme Name: PM Dashboard
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Noto Sans", 'Segoe UI', sans-serif !important;
    background: #f3f4f8;
}

/* Layout */
.dashboard-wrapper {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.sidebar {
    min-width: 240px;
    background: #ffffff;
    border-right: 1px solid #e5e7eb;
    padding: 20px !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.sidebar-top {
    margin-bottom: 30px;
}

.sidebar-logo {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 30px;
}

.sidebar a {
    display: block;
    padding: 12px;
    border-radius: 8px;
    color: #374151;
    text-decoration: none;
    margin-bottom: 8px;
    font-weight: 500;
}

.sidebar a.active {
    background: #3b82f6;
    color: white;
}

.sidebar a:hover {
    background: #e5e7eb;
}

/* Main Area */
.main-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #f3f4f8;
}

/* Top Header */
.top-header {
    height: 70px;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
}

.search-box input {
    width: 350px;
    padding: 10px 15px;
    border-radius: 25px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
}

/* Content Area */
.content-area {
    flex: 1;
    padding: 40px 60px;
}

.center-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Empty State */
.empty-icon {
    font-size: 80px;
    margin-bottom: 20px;
}

.empty-title {
    font-weight: 500;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0.25px;
    text-align: center;
    vertical-align: middle;
    margin-bottom: 11px;
    color: #252526;
}

.empty-desc {
    width: 419px;
    font-weight: 400;
    font-size: 16px;
    line-height: 23px;
    letter-spacing: -0.25px;
    text-align: center;
    color: #6b7280;
    margin: 0 auto 11px;
}

.btn-primary-custom {
    background: #2C66EF;
    color: white;
    font-weight: 500;
    font-size: 13px;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
}

/* Page Container */
.page-container {
    padding: 40px 60px;
}

/* Breadcrumb */
.breadcrumb {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 20px;
}

.breadcrumb a {
    color: #3b82f6;
    text-decoration: none;
}

/* Heading */
.page-container h1 {
    font-size: 22px;
    margin-bottom: 20px;
}

#projectSelect {
    display:block !important;
}

#sprintStatus {
    display:block !important;
}

.nice-select {
    display: none;
}

/* Status */
.status-bar {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 40px;
}

.status-progress {
    width: 200px;
    height: 6px;
    background: #e5e7eb;
    border-radius: 10px;
}

.status-text {
    color: #9ca3af;
    font-size: 14px;
}

/* Grid */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
}

.full-width {
    margin-bottom: 30px;
}

/* Line Inputs */
.line-input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #cbd5e1;
    padding: 8px 0;
    outline: none;
    background: transparent;
}

.line-textarea {
    width: 100%;
    border: 1px solid #e5e7eb;
    padding: 10px;
    min-height: 120px;
    resize: none;
    background: #f3f4f8;
}

/* Dashed Boxes */
.dashed-box {
    border: 2px dashed;
    padding: 15px;
    margin-bottom: 20px;
    cursor: pointer;
    font-weight: 500;
}

.dashed-box.blue { border-color:#3b82f6; color:#3b82f6; }
.dashed-box.red { border-color:#ef4444; color:#ef4444; }
.dashed-box.orange { border-color:#f59e0b; color:#f59e0b; }

/* Buttons */
.form-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
}

.btn-light {
    padding: 8px 16px;
    background: #f3f4f6;
    border: none;
    border-radius: 6px;
    text-decoration: none;
}

.btn-primary {
    padding: 8px 16px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 6px;
}

/* Outcome row */
.outcome-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.outcome-row input {
    flex: 1;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #3b82f6;
    background: #fff;
}

.section-block {
    margin-bottom: 30px;
}

.risk-row,
.decision-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.drag-icon {
    color: #9ca3af;
    font-size: 14px;
    cursor: grab;
}

.remove-btn {
    cursor: pointer;
    font-size: 14px;
    color: #9ca3af;
}

.remove-btn:hover {
    color: #000;
}

/* Risk input */
.risk-row input {
    flex: 1;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #ef4444;
    background: #fff;
}

/* Decision input */
.decision-row input {
    flex: 1;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #f59e0b;
    background: #fff;
}

/* ================= EXACT FIGMA MILESTONE ================= */

.ms-wrapper h1 {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 24px;
}

.ms-breadcrumb {
    font-size: 14px;
    margin-bottom: 12px;
    color: #6b7280;
}

/* TYPE GRID */

.ms-type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

.ms-type {
    background: #f9fafb;
    padding: 24px;
    border-radius: 20px;
    display: flex;
    gap: 18px;
    border: 2px solid transparent;
    transition: 0.2s ease;
}

.ms-type.active {
    background: #eef2ff;
    border: 2px solid #3b82f6;
}

.ms-icon {
    width: 60px;
    height: 60px;
    background: #e5e7eb;
    border-radius: 50%;
}

.ms-icon.blue {
    background: #3b82f6;
}

.ms-type h3 {
    font-size: 20px;
    margin-bottom: 6px;
}

.ms-type p {
    font-size: 14px;
    color: #6b7280;
}

/* TIMELINE CARD */

.timeline-card {
    background: #ffffff;
    padding: 28px;
    border-radius: 24px;
    margin-bottom: 32px;
}

.timeline-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
}

.auto-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
}

.toggle {
    width: 40px;
    height: 22px;
    background: #e5e7eb;
    border-radius: 20px;
}

/* SPRINT CARD */

.sprint-card {
    background: #f9fafb;
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 20px;
}

.sprint-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
}

.sprint-date {
    font-size: 13px;
    color: #6b7280;
}

.status-pill {
    background: #e5e7eb;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
}

.task-row {
    background: #f3f4f6;
    padding: 10px 14px;
    border-radius: 10px;
    margin-bottom: 8px;
}

.add-task {
    font-size: 14px;
    color: #3b82f6;
    margin-top: 10px;
}

.collapsed {
    opacity: 0.9;
}

/* ADD SPRINT */

.add-sprint {
    border: 2px dashed #d1d5db;
    padding: 16px;
    border-radius: 16px;
    text-align: center;
    font-weight: 500;
    color: #3b82f6;
    cursor: pointer;
}

/* PREVIEW */

.timeline-preview {
    background: #ffffff;
    padding: 28px;
    border-radius: 24px;
}

.preview-box {
    height: 420px;
    background: #f9fafb;
    border-radius: 16px;
}

/* TYPE CARDS */
.ms-type {
    background: #f8fafc;
    padding: 28px;
    border-radius: 22px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

.ms-type.active {
    background: #eef2ff;
    border: 2px solid #3b82f6;
    box-shadow: 0 6px 16px rgba(59,130,246,0.15);
}

.ms-icon {
    width: 64px;
    height: 64px;
}

/* TIMELINE BUILDER CARD */
.timeline-card {
    background: #ffffff;
    padding: 32px;
    border-radius: 28px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.05);
}

/* Timeline Header spacing */
.timeline-header h3 {
    font-size: 20px;
    font-weight: 600;
}

/* Sprint Card */
.sprint-card {
    background: #f9fafb;
    padding: 24px;
    border-radius: 22px;
    margin-bottom: 22px;
}

/* Sprint header spacing */
.sprint-header {
    margin-bottom: 18px;
}

/* Status pill */
.status-pill {
    background: #e5e7eb;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 12px;
}

/* Task rows */
.task-row {
    background: #f3f4f6;
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 10px;
}

/* Add Sprint dashed */
.add-sprint {
    border: 2px dashed #d1d5db;
    padding: 18px;
    border-radius: 20px;
    font-weight: 500;
    color: #3b82f6;
    background: #f9fafb;
}

/* Timeline Preview Card */
.timeline-preview {
    background: #ffffff;
    padding: 32px;
    border-radius: 28px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.05);
}

.preview-box {
    background: #f3f4f6;
    border-radius: 20px;
    height: 460px;
    margin-top: 20px;
}

/* Better spacing between sections */
.ms-type-grid {
    margin-bottom: 40px;
}

.timeline-card {
    margin-bottom: 40px;
}

/* ===== Strategy Cards ===== */

.strategy-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

.strategy-card {
    background: #f8fafc;
    border-radius: 20px;
    padding: 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    border: 1px solid transparent;
    transition: 0.2s ease;
}

.strategy-card.active {
    background: #eef4ff;
    border: 2px solid #3b82f6;
}

.strategy-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #3b82f6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 20px;
}

.strategy-content h3 {
    font-size: 18px;
    margin-bottom: 4px;
}

.strategy-content p {
    font-size: 14px;
    color: #6b7280;
}

/* ===== Timeline Builder ===== */

.timeline-builder {
    background: #f1f5f9;
    border-radius: 24px;
    padding: 32px;
    margin-bottom: 40px;
}

.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.timeline-header h2 {
    font-size: 22px;
    font-weight: 600;
}

.auto-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #6b7280;
}

/* ===== Sprint Card ===== */

.sprint-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 20px;
    border: 1px solid #e5e7eb;
}

.sprint-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.sprint-title {
    font-size: 16px;
    font-weight: 600;
}

.sprint-dates {
    font-size: 13px;
    color: #6b7280;
}

.status-badge {
    background: #f3f4f6;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    color: #374151;
}

.task-item {
    background: #f3f4f6;
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 10px;
    font-size: 14px;
    color: #374151;
}

.add-task-link {
    color: #3b82f6;
    font-size: 14px;
    cursor: pointer;
}

.add-sprint-box {
    border: 2px dashed #cbd5e1;
    border-radius: 16px;
    padding: 18px;
    text-align: center;
    font-size: 14px;
    color: #3b82f6;
    cursor: pointer;
    background: #ffffff;
}

.timeline-preview {
    background: #f1f5f9;
    border-radius: 24px;
    padding: 28px;
    margin-top: 30px;
}

.timeline-preview h3 {
    font-size: 18px;
    margin-bottom: 16px;
}

/* ================= FIGMA PERFECT TIMELINE ================= */

.timeline-preview {
    background: #f3f4f6;
    border-radius: 28px;
    padding: 32px;
}

.preview-box {
    background: #f9fafb;
    border-radius: 24px;
    padding: 40px 20px 20px 20px;
    height: 520px;
    position: relative;
    overflow: hidden;
}

/* Vertical Grid Lines */
.timeline-grid {
    /* position: relative; */
    min-height: 250px;
}

.timeline-grid::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        to right,
        #e5e7eb 0px,
        #e5e7eb 1px,
        transparent 1px,
        transparent 160px
    );
}

/* Month Titles */
.month {
    position: absolute;
    top: 0;
    font-size: 15px;
    font-weight: 600;
    color: #374151;
}

.month:nth-child(1) { left: 8%; }
.month:nth-child(2) { left: 42%; }
.month:nth-child(3) { left: 75%; }

/* Sprint Labels */
.sprint-label {
    position: absolute;
    top: 45px;
    font-size: 12px;
    color: #6b7280;
}

.sprint-label:nth-child(4) { left: 8%; }
.sprint-label:nth-child(5) { left: 22%; }
.sprint-label:nth-child(6) { left: 36%; }
.sprint-label:nth-child(7) { left: 50%; }
.sprint-label:nth-child(8) { left: 64%; }
.sprint-label:nth-child(9) { left: 78%; }

/* Milestone Card */
.milestone {
    position: absolute;
    width: 200px;
    padding: 14px 20px;
    background: #ffffff;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

/* Rounded Top Colored Strip */
.milestone::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 6px;
    width: 100%;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

/* Colors */
.milestone.red::before { background: #ef4444; }
.milestone.orange::before { background: #f97316; }
.milestone.yellow::before { background: #eab308; }
.milestone.green::before { background: #22c55e; }
.milestone.blue::before { background: #3b82f6; }
.milestone.purple::before { background: #6366f1; }
.milestone.violet::before { background: #8b5cf6; }

/*vivek css*/


/* Wrapper */
.timeline-box{
  max-width:1200px;
  margin:30px auto;
  background:#fff;
  border-radius:18px;
  border:1px solid #e6e8ec;
  overflow:hidden;
}

/* Header */
.timeline-header{
  padding:16px 20px;
  font-weight:600;
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid #eee;
  margin-bottom: 0;
}

/* Common rows */
.row{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  border-bottom:1px solid #eee;
  text-align:center;
}

/* Months */
.months{
  background:#fafafa;
  font-size:13px;
  font-weight:600;
}
.month{
  padding:12px 0;
  border-right:1px solid #eee;
}

/* Sprints */
.sprints{
  font-size:12px;
}
.sprints div{
  /* grid-column:span 2; */
  padding:10px 4px;
  border-right:1px solid #eee;
}
.sprints small{
  display:block;
  font-size:10px;
  color:#888;
}

/* Weeks */
.weeks{
  font-size:11px;
  color:#9aa0a6;
}
.weeks div{
  padding:8px 0;
  border-right:1px solid #f0f0f0;
}

/* Grid */
/* .timeline-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:90px;
  padding:20px 12px 60px;
  position:relative;
} */

/* Task cards */
/* .task{
  background:#fff;
  border-radius:10px;
  padding:10px 12px;
  font-size:12.5px;
  box-shadow:0 1px 2px rgba(0,0,0,.1);
  position:relative;
  height: 40px;
} */

/* Colors */
/*.red{border-top:3px solid #e74c3c}
.orange{border-top:3px solid #f39c12}
.yellow{border-top:3px solid #f1c40f}
.green{border-top:3px solid #7cb342}
.blue{border-top:3px solid #5dade2}
.indigo{border-top:3px solid #4f6bd8}
.purple{border-top:3px solid #a569bd}*/

/* Milestone */
.milestone .dot{
  position:absolute;
  right: 40px;
  bottom:-10px;
  width:6px;
  height:6px;
  background:#888;
  border-radius:50%;
}
.milestone .dot::after{
  content:"";
  position:absolute;
  top:6px;
  left:2px;
  height:55px;
  border-left:2px dotted #aaa;
}
.milestone .label{
  position:absolute;
  bottom:-80px;
  right: 15px;
  font-size:10px;
  color:#777;
}
#dashboard-btn,
#projects-btn {
    cursor: pointer;
}
.dashboard-title {
font-size: 22px;
font-weight: 600;
margin-bottom: 25px;
color: #222;
}

/* Grid */
.dashboard-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Card */
.dashboard-card {
    background: #fff;
    padding: 22px;
    border-radius: 14px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.3s ease;
}

.dashboard-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

/* Content */
.card-content h4 {
    font-size: 14px;
    font-weight: 500;
    color: #666;
    margin-bottom: 6px;
}

.card-number {
    font-size: 20px;
    font-weight: 600;
    color: #1e293b;
}

/* Icon */
.card-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
}

/* Icon Colors */
.bg-blue { background: #3b82f6; }
.bg-green { background: #22c55e; }
.bg-purple { background: #8b5cf6; }
.bg-red { background: #ef4444; }

/* Responsive */
@media (max-width: 992px) {
    .dashboard-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .dashboard-cards {
        grid-template-columns: 1fr;
    }
}

.section-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
}

.dashboard-table th,
.dashboard-table td {
    padding: 14px 12px;
    font-size: 14px;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

.dashboard-table th {
    font-weight: 600;
    color: #374151;
}

.dashboard-table tbody tr:hover {
    background: #f9fafb;
}
.spotlightSwiper{
    width:100%;
    max-width:100%;
    overflow:hidden;
}

.spotlightSwiper .swiper-wrapper{
    width: auto;
    box-sizing: border-box;
}

.spotlightSwiper .swiper-slide{
    width:100% !important;
    flex-shrink:0;
    /* margin-right: 10px !important; */
}

.spotlight-nav{
display:flex;
align-items:center;
gap:8px;
}

.swiper-button-next,
.swiper-button-prev{
position:static;
width:auto;
height:auto;
margin:0;
}

.insight-card{
    min-width:0;
}

.swiper-button-next:after,
.swiper-button-prev:after{
    font-size:14px;
}

/* Grid */
.dashboard-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.content-area {
    padding: 40px 15px;
}

/* Card */
.dashboard-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

/* Content */
.card-content h4 {
font-size: 12px;
font-weight: 300 !important;
color: #666;
margin-bottom: 6px;
}

.spotlight-box h4 {
font-size: 17px;
}

.insight-card h3 {
margin-bottom: 20px;
font-size: 20px;
color: #343C6A;
}

.card-number {
    font-size: 20px;
    font-weight: 600;
    color: #1e293b;
}

.insight-card .spotlight-box .highlight {
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Icon */
.card-icon {
    width: 52px;
    height: 52px !important;
    min-height:52px !important;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
}

/* Icon Colors */
.bgs-blue {
background-color: #8b5cf647 !important;
}
.bg-green {
background: #f59e0b40;
}
.bg-purple {
background: #10b9813d !important;
}
.bg-red {
background: #ef44443b;
}

/* Responsive */
@media (max-width: 992px) {
    .dashboard-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .dashboard-cards {
        grid-template-columns: 1fr;
    }
}


/*table css*/

.table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 29px;
}

.view-all-btn {
    color: #004EFF;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    letter-spacing: 0;
}

/* Table Wrapper */
.table-wrapper {
    margin-top: 19px;
    background: #fff;
    padding: 25px;
    border-radius: 14px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.08);
}

.section-title {
    font-size: 18px;
    font-weight: 700;
    color: #343C6A;
    font-family: "Noto Sans";
    margin: 0;
    line-height: 100%;
    letter-spacing: 0;
}

/* Table */
.dashboard-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.dashboard-table thead {
    background: #f8fafc;
}

.dashboard-table td {
    font-family: "Noto Sans";
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    letter-spacing: 0%;
    padding: 12px;
    color: #232323;
    text-align: left;
    border-bottom: 1px solid #F2F4F7;
    background: #FFFFFF !important;
}

.dashboard-table th {
    font-weight: 500;
    color: #718EBF;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0;
    font-family: "Noto Sans";
    border-bottom: 1px solid #E6EFF5;
    background: #FFFFFF !important;
    padding: 12px;
}

.dashboard-table tbody tr:hover {
    background: #f9fafb;
}

table tr:nth-last-child(1) td {
    border-bottom: unset;
}

/* Status Badges */
.status {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.status.ongoing {
    background: #dbeafe;
    color: #1d4ed8;
}

.status.completed {
    background: #dcfce7;
    color: #166534;
}

.status.overdue {
    background: #fee2e2;
    color: #991b1b;
}

/* View Link */
.view-link {
    font-family: "Noto Sans";
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 0%;
    color: #004EFF;
}

.view-link:hover {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
    .dashboard-table {
        display: block;
        overflow-x: auto;
    }
}


/*new section chat*/

.insights-wrapper {
    display: flex;
    gap: 20px;
    margin-top: 30px;
}

.insight-card {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.insight-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.tabs span {
    padding: 6px 10px;
    background: #f3f4f6;
    border-radius: 6px;
    margin-left: 5px;
    font-size: 12px;
    cursor: pointer;
}

.tabs .active {
    background: #2563eb;
    color: #fff;
}

.milestone-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.badge {
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12px;
    color: #fff;
}

.badge.red { background: #ef4444; }
.badge.orange { background: #f59e0b; }
.badge.green { background: #10b981; }

.spotlight-box h4 {
    margin: 0;
}

.highlight {
    padding: 10px;
    border-radius: 8px;
    margin-top: 10px;
    font-size: 14px;
}

.insight-card h3 {
    font-size: 20px;
}

.highlight.green { background: #ecfdf5; }
.highlight.red { background: #f9dddd; }
.highlight.orange { background: #fff7ed; }

@media (max-width: 1100px) {
    .insights-wrapper {
        grid-template-columns: 1fr;
    }
}


/* Staffing Section */
.staffing-wrapper {
    background: #FFFFFF;
    padding: 25px;
    border-radius: 10px;
    margin-top: 20px;
}

.staffing-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.staffing-header h2 {
    font-size: 20px;
    font-weight: 600;
}

.toggle-buttons .active {
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.staffing-controls .toggle-buttons {
    display: flex;
    width: 45%;
    justify-content: end;
}

.staffing-content {
    display: flex;
    align-items: center;
    gap: 40px;
}

/* Chart */
.staffing-chart {
    position: relative;
    width: 300px;
    height: 300px;
}

.center-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.center-text h3 {
    margin: 0;
    font-size: 24px;
}

.center-text p {
    margin: 0;
    font-size: 14px;
    color: #666;
}

/* Legend */
.staffing-legend {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px 40px;
    width: 100%;
}

.legend-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.legend-item {
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dot {
    width: 12px;
    height: 12px;
    margin-right: 10px;
    border-radius: 50%;
    display: inline-block;
}

/* Colors */
.teal { background:#14b8a6; }
.blue { background:#3b82f6; }
.purple { background:#8b5cf6; }
.violet { background:#a855f7; }
.pink { background:#ec4899; }
.red { background:#ef4444; }
.orange { background:#f97316; }
.yellow { background:#facc15; }
.green { background:#84cc16; }
.darkgreen { background:#22c55e; }

/* Responsive */
@media(max-width: 1024px){
    .staffing-content{
        flex-direction: column;
        align-items: flex-start;
    }
}


/*overlay code*/

/* OVERLAY */
.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
    z-index: 999;
}

/* DRAWER */
.project-drawer {
    position: fixed;
    top: 0;
    right: -100%;
    width: 1044px;
    height: 100%;
    background: #fff;
    box-shadow: -10px 0 30px rgba(0,0,0,0.15);
    transition: 0.4s ease;
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

.project-drawer.active { right: 0; }
.drawer-overlay.active { opacity: 1; visibility: visible; }

/* HEADER */
.drawer-header {
    padding: 53px 60px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.status-badge {
    background: #dcfce7;
    color: #166534;
    padding: 4px 10px;
    font-size: 11px;
    border-radius: 20px;
}

.close-drawer {
    font-size: 26px;
    cursor: pointer;
}

/* BODY */
.drawer-body {
    padding: 20px;
    overflow-y: auto;
}

/* INFO GRID */
.info-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 15px;
    background: #f9fafc;
    padding: 15px;
    border-radius: 10px;
}

/* SECTION */
.drawer-section { margin-top: 25px; }
.drawer-section h3 { margin-bottom: 10px; }

 /* New Drawer Styles */
.new-header{
    align-items:flex-start;
}

 /* INFO CARD*/
.drawer-body .info-card {
    display: flex;
    gap: 25px;
    width: auto;
    max-width: 688px;
    padding: 32px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 2px solid #0CC2B440;
    background: #0CC2B405;
}

/* ITEM */
.info-item{
    display:grid;
    align-items:center;
    gap:12px;
}

/* ICON */
.info-card .icon{
    width: 25px;
    height: 23px;
    border-radius: 8px;
    background: #0CC2B405;
    display: flex;
    align-items: center;
}

/* TEXT */
.info-item small {
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0%;
    text-transform: uppercase;
    color: #767F8C;
}

.info-item p {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0%;
    color: #18191C;
    margin-top: 4px;
}

/* RESPONSIVE */
@media(max-width:768px){
    .info-card{
        grid-template-columns:1fr 1fr;
    }
}
.finance-cards{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
}

.finance-box{
    background:#f9fafc;
    padding:15px;
    border-radius:10px;
}

.finance-box h4{
    margin-top:5px;
    font-size:18px;
}

.finance-box.green h4{ color:#16a34a; }
.finance-box.blue h4{ color:#2563eb; }
.finance-box.gray h4{ color:#6b7280; }

.financial-prog-wrapper .progress-wrap {
    margin-top: 24px;
}

.progress-bar{
    width:100%;
    height:8px;
    background:#e5e7eb;
    border-radius:10px;
    overflow:hidden;
}

.progress-fill{
    height:100%;
    background:#f59e0b;
    width:0%;
    transition:0.4s ease;
}

.project-title{
    font-size:24px;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:10px;
}

.updated-text {
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #82808F;
    margin-top: 6px;
}

span#drawerUpdated {
    font-weight: 600;
    color: #BBBBBE;
}

/* TIMELINE */
.timeline-wrapper {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow-x: auto;
}

.timeline-header {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    text-align: center;
    background: #f3f4f6;
    padding: 8px;
    font-weight: 600;
}

.sprint-row {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    text-align: center;
    font-size: 12px;
    padding: 6px;
    border-bottom: 1px solid #eee;
}

.timeline-grid {
    position: relative;
    height: 220px;
    min-width: 1000px;
    background: repeating-linear-gradient(
        to right,
        #f3f4f6 0px,
        #f3f4f6 1px,
        transparent 1px,
        transparent 150px
    );
}

/* TASK */
.task {
    position: absolute;
    top: 50px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    color: #000;
}

.t1 { background:#fde68a; }
.t2 { background:#bfdbfe; }
.t3 { background:#c4b5fd; }
.t4 { background:#d1fae5; }
.t5 { background:#fecaca; }
.t6 { background:#fed7aa; }

/* BOTTOM BOX */
.bottom-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 25px;
}

.risk-box {
    background:#fef2f2;
    padding:15px;
    border-radius:8px;
}

.decision-box {
    background:#fff7ed;
    padding:15px;
    border-radius:8px;
}

.month {
    position: static;
    top: 0;
    font-size: 15px;
    font-weight: 600;
    color: #374151;
}

.staffing-controls{
    display: flex;
    align-items: center;
    gap: 10px;
    width: 50%;
    justify-content: end;
}

#staffingProject{
    padding:6px 10px;
    border-radius:6px;
    border:1px solid #d1d5db;
    background:#fff;
    font-size:13px;
    width: 30%;
    display: block !important;
}

@media(max-width:768px){
    .project-drawer { width:100%; }
    .info-grid { grid-template-columns:1fr; }
    .bottom-box { grid-template-columns:1fr; }
}

.dashboard-wrapper div.sidebar a:hover {
    background-color: transparent;
}
.dashboard-wrapper div.sidebar a.active {
    background: #4880FF;
    color: #fff;
}
.dashboard-wrapper .sidebar a {
    padding: 15px;
    border-radius: 6px;
    font-family: Noto Sans;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.3px;
    color: #202224;
    text-align: center;
    position: relative;
}
.dashboard-wrapper div.sidebar a.active:before {
    content: '';
    position: absolute;
    width: 9px;
    height: 51px;
    top: 0;
    left: -24px;
    border-radius: 4px;
    background: #4880FF;
}
.dashboard-wrapper .sidebar {
    padding: 0 !important;
}
.dashboard-wrapper .sidebar .sidebar-top, .dashboard-wrapper .sidebar .sidebar-bottom {
    padding: 20px 20px 0;
}
.dashboard-wrapper .sidebar .sidebar-bottom {
    padding-bottom: 20px !important;
    border-top: 1px solid #E0E0E0;
}
.dashboard-wrapper .search-box {
    min-width: 390px;
    border-radius: 19px;
    border: 0.6px solid #D5D5D5;
    background: #F5F6FA;
    font-family: Noto Sans;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #202224;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.dashboard-wrapper .search-box input {
    padding: 0;
    border: 0 !important;
    background: transparent;
    outline: none !important;
    border-radius: 0;
    width: 100%;
}
.dashboard-wrapper .sidebar-logo {
    text-align: center;
}
.dashboard-wrapper .dash-prof-details span {
    margin-right: 20px;
}
.dashboard-wrapper .dash-prof-details .user-info {
    margin-left: 10px;
}
.dashboard-wrapper .user-info strong {
    font-family: Noto Sans;
    font-weight: 700;
    font-size: 14px;
    line-height: normal;
    color: #404040;
}
.dashboard-wrapper .user-info small {
    font-family: Noto Sans;
    font-weight: 600;
    font-size: 12px;
    line-height: normal;
    color: #565656;
}
.dashboard-wrapper .main-area {
    background: #F5F6FA;
}
.dashboard-wrapper .main-area .dashboard-title {
    font-family: Noto Sans !important;
    font-weight: 700;
    font-size: 32px;
    line-height: normal;
    color: #202224;
}
.dashboard-wrapper .dashboard-cards {
    gap: 30px;
}
.dashboard-wrapper .dashboard-cards .dashboard-card {
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: 6px 6px 54px 0px #0000000D;
    padding: 16px;
    display: block;
    transition: 0.3s ease;
}
.dashboard-wrapper .dashboard-card h4 {
    font-family: Noto Sans;
    font-weight: 600 !important;
    font-size: 16px;
    line-height: normal;
    color: #202224;
    margin-bottom: 16px;
    opacity: 0.7;
}
.dashboard-wrapper .dashboard-card .card-number {
    font-family: Noto Sans;
    font-weight: 700;
    font-size: 28px;
    line-height: normal;
    letter-spacing: 1px;
    color: #202224;
    margin-bottom: 30px;
}
.dashboard-wrapper .dashboard-card .card-icon {
    width: 60px;
    height: 60px !important;
    border-radius: 23px;
}
.dashboard-wrapper .dashboard-card .card-icon.bgs-blue {
    background: #E6DCFD !important;
}
.dashboard-wrapper .dashboard-card .card-icon.bg-green {
    background: #FCEACB !important;
}
.dashboard-wrapper .dashboard-card .card-icon.bg-purple {
    background: #CCF0E4 !important;
}
.dashboard-wrapper .dashboard-card .card-icon.bg-red {
    background: #FFDED2 !important;
}
.dashboard-wrapper .insights-wrapper h3 {
    font-family: Noto Sans;
    font-weight: 700;
    font-size: 18px;
    line-height: normal;
    color: #333B69;
}
.dashboard-wrapper .insights-wrapper .insight-card {
    border-radius: 20px;
    padding: 14px 22px;
    box-shadow: none;
    height: 100%;
}
.dashboard-wrapper .insights-wrapper .insight-card.insight-milestones-card {
    padding: 12px 14px;
}
.dashboard-wrapper .insight-card .tabs span {
    font-family: Noto Sans;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    line-height: normal;
    background: transparent;
    color: #8181A5;
    display: inline-block;
    padding: 10px 22px;
    margin: 0;
    border: 1px solid transparent;
}
.dashboard-wrapper .insight-card .tabs span.active {
    border: 1px solid #ECECF2;
    background: #F5F6FA;
    color: #1C1D21;
}
.spotlight-card .spotlight-head {
    justify-content: space-between;
    margin-bottom: 10px;
}
.spotlight-card .spotlight-head * {
    margin: 0;
}
.spotlight-card .spotlight-head span:after {
    display: none;
}
.spotlight-card .spotlight-nav .slide-count {
    font-family: Noto Sans;
    font-weight: 400;
    font-size: 12px;
    line-height: normal;
    color: #000;
}
.spotlight-card .spotlight-nav .slide-count .active {
    font-size: 14px;
}
.insight-card .spotlight-box-head {
    border-bottom: 1px solid #F2F2F2;
    padding-bottom: 11px;
    margin-bottom: 16px;
}
.insight-card .spotlight-box-head h4 {
    font-family: Noto Sans;
    font-weight: 700;
    font-size: 14px;
    line-height: normal;
    color: #000;
    padding-left: 4px;
}
.insight-card .spotlight-box-head p {
    font-family: Noto Sans;
    font-weight: 400;
    font-size: 12px;
    line-height: normal;
    color: #9597A1;
    margin: 0;
    padding-left: 4px;
}
.insight-card .spotlight-box .highlight {
    padding: 10px 18px;
    font-family: Noto Sans;
    font-weight: 600;
    font-size: 12px;
    line-height: normal;
}
.insight-card .spotlight-box .highlight ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.insight-card .spotlight-box .highlight strong {
    margin-bottom: 4px;
    display: block;
}
.insight-card .spotlight-box .highlight br {
    display: none;
}
.insight-card .spotlight-box .highlight.green strong {
    color: #10B981;
}
.insight-card .spotlight-box .highlight li {
    font-family: Noto Sans;
    font-weight: 400;
    font-size: 12px;
    line-height: normal;
    color: #000;
}
.insight-card .spotlight-box .highlight.red strong {
    color: #EF4444;
}
.insight-card .spotlight-box .highlight.orange strong {
    color: #F59E0B;
}
.dashboard-wrapper .insights-wrapper > div {
    display: flex;
    flex-direction: column;
    height: auto;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: calc(33.33333333% - 14px);
}
.insights-wrapper .budget-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.insights-wrapper .budget-card-head * {
    margin: 0;
}
.budget-card-head .insight-header {
    padding: 8px 14px 8px 8px;
    border: 1px solid #E8E8E8;
    border-radius: 8px;
    background: #fff;
    position: relative;
    gap: 8px;
}
.budget-card-head .insight-header:before {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.6562 3.75012H2.34375C1.5671 3.75012 0.9375 4.37972 0.9375 5.15637V11.7189C0.9375 12.4955 1.5671 13.1251 2.34375 13.1251H12.6562C13.4329 13.1251 14.0625 12.4955 14.0625 11.7189V5.15637C14.0625 4.37972 13.4329 3.75012 12.6562 3.75012Z' stroke='black' stroke-width='0.609939' stroke-linejoin='round'/%3E%3Cpath d='M4.21875 3.75V2.8125C4.21875 2.56386 4.31752 2.3254 4.49334 2.14959C4.66915 1.97377 4.90761 1.875 5.15625 1.875H9.84375C10.0924 1.875 10.3308 1.97377 10.5067 2.14959C10.6825 2.3254 10.7812 2.56386 10.7812 2.8125V3.75' stroke='black' stroke-width='0.609939' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.0625 7.03131H0.9375' stroke='black' stroke-width='0.609939' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.375 7.03131V7.73444C9.375 7.7966 9.35031 7.85621 9.30635 7.90016C9.2624 7.94412 9.20279 7.96881 9.14062 7.96881H5.85938C5.79721 7.96881 5.7376 7.94412 5.69365 7.90016C5.64969 7.85621 5.625 7.7966 5.625 7.73444V7.03131' stroke='black' stroke-width='0.609939' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    width: 15px;
    height: 15px;
    position: absolute;
    pointer-events: none;
}
.budget-card-head .insight-header #projectSelect {
    border: 0;
    outline: 0;
    cursor: pointer;
    appearance: none;
    padding-right: 25px;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='6' viewBox='0 0 12 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.499988 0.790684C0.501644 0.723348 0.523411 0.658047 0.562488 0.603184C0.670091 0.481715 0.853765 0.465267 0.981238 0.565684L5.89374 4.60318C5.91886 4.6226 5.9495 4.63354 5.98124 4.63443C6.01505 4.63443 6.04794 4.62347 6.07499 4.60318L10.9812 0.565684C11.0109 0.54104 11.0448 0.521981 11.0812 0.509434C11.1185 0.503256 11.1565 0.503256 11.1937 0.509434C11.2329 0.516275 11.2708 0.528914 11.3062 0.546934C11.3394 0.564315 11.369 0.587617 11.3937 0.615684C11.4165 0.64559 11.4335 0.679512 11.4437 0.715684C11.453 0.752613 11.453 0.791256 11.4437 0.828184C11.4493 0.865478 11.4493 0.903391 11.4437 0.940684C11.424 0.974009 11.3987 1.00362 11.3687 1.02818L6.44374 5.06568C6.18339 5.29025 5.79784 5.29025 5.53749 5.06568L0.606238 1.01568C0.572232 0.988629 0.544509 0.954509 0.524988 0.915684C0.507796 0.87629 0.49927 0.833661 0.499988 0.790684Z' fill='%231D1D1B' stroke='black'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center right;
    font-family: Noto Sans;
    font-weight: 400;
    font-size: 12px;
    line-height: normal;
    color: #718EBF;
    padding-left: 24px;
}
.dashboard-wrapper .dashboard-cards .dashboard-card .trend {
    display: flex;
    align-items: center;
    gap: 10px;
}
.dashboard-wrapper .dashboard-card .trend div {
    font-family: Noto Sans;
    font-weight: 600;
    font-size: 16px;
    line-height: normal;
    color: #606060;
}
.dashboard-wrapper .dashboard-card .trend div .text-success {
    color: #00B69B !important;
}
.dashboard-wrapper .dashboard-card .trend .text-danger {
    color: #F93C65 !important;
}
.row.months div{
    background:#f6f6f6;
    text-align:center;
    padding:10px;
    font-weight:600;
    border-right:1px solid #ddd;
}
.row.sprints div{
    text-align:center;
    padding:8px;
    font-weight:600;
    border-right:1px solid #ddd;
    border-top:1px solid #ddd;
}
.row.weeks div{
    text-align:center;
    padding:6px;
    font-size:12px;
    border-right:1px solid #eee;
    border-top:1px solid #ddd;
}
.resource-box{
    background:#ffffff;
    border-radius:16px;
    padding:28px;
    margin-top:25px;
    box-shadow:0 1px 0 rgba(0,0,0,0.04);
    border:1px solid #eef1f6;
}
.resource-header{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    font-weight:600;
    color:#6b86b3;
    font-size:15px;
    margin-bottom:14px;
    padding-bottom:10px;
    border-bottom:1px solid #e8edf5;
}
.resource-row{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:30px;
    margin-top:8px;
}
.resource-row input,
.resource-row select{
    width:100%;
    border:none;
    border-bottom:1px solid #cfd6e6;
    background:transparent;
    padding:10px 4px;
    font-size:14px;
    outline:none;
}
.resource-row input::placeholder{
    color:#9aa8c5;
}
.add-resource{
    margin-top:18px;
    color:#2f6fed;
    font-weight:600;
    cursor:pointer;
    font-size:15px;
}
.add-resource:hover{
    opacity:.8;
}
.fund-section{
    grid-column:1/-1;
    margin-top:15px;
}
.fund-row{
    display:grid;
    grid-template-columns:1fr 1fr auto;
    gap:20px;
    align-items:center;
    margin-top:10px;
}
.add-more,
.add-disbursed,
.add-utilised{
    margin-top:10px;
    color:#2f6fed;
    font-weight:600;
    font-size:15px;
    cursor:pointer;
    display:inline-block;
}
.add-more:hover,
.add-disbursed:hover,
.add-utilised:hover{
    opacity:.8;
}
.remove-row{
    cursor:pointer;
    color:red;
    font-weight:bold;
    font-size:18px;
    line-height:1;
}
.fund-row input{
    width:100%;
    border:none;
    border-bottom:1px solid #cfd6e6;
    background:transparent;
    padding:10px 4px;
    font-size:14px;
    outline:none;
}
.fund-row input::placeholder{
    color:#9aa8c5;
}
select .proj_status{width: 10%;}
.proj_status,
.agency_name {
    display: block !important;
}
.nice-select.agency_name,
.nice-select.proj_status {
    display: none !important;
}
.section-card {
    border-radius: 14px;
    margin-bottom: 25px;
    margin-top: 26px;
    border: 1px solid #eee;
}
.section-card h3 {
    margin-bottom: 15px;
    font-weight: 600;
}
#createProjectForm .section-card {
    border: unset;
}
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}
input, textarea, select {
    width: 100%;
    border: none;
    border-bottom: 1px solid #ccc;
    padding: 8px;
    outline: none;
    background: transparent;
}
textarea {
    min-height: 80px;
    resize: vertical;
    margin-top: 10px;
}
.manpower-box {
    background: #FFFFFF;
    padding: 22px 29px 26px 29px;
    border-radius: 25px;
}
.manpower-box .table-header {
    margin: 0;
    border-bottom: 1px solid #E6EFF5;
    padding-bottom: 8px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr 30px;
}
.manpower-box .table-header div {
    color: #718EBF;
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
}
.add-more {
    color: #4a6cf7;
    cursor: pointer;
    margin-top: 10px;
    font-weight: 500;
}
.date-field {
    margin-bottom: 10px;
    width: 18%;
}
.row{
    display:grid;
    grid-auto-flow:column;
    margin: 0;
}
.metrics-row {
    display: grid !important;
    grid-template-columns: 2fr 1fr 30px !important;
    gap: 20px;
    margin-bottom: 10px;
    align-items: center;
}
.table-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr 30px;
    gap: 15px;
    margin-bottom: 10px;
    align-items: center;
}
.metrics-row {
    display: grid;
    grid-template-columns: 30px 2fr 1fr;
    gap: 20px;
    margin-bottom: 10px;
    align-items: center;
}
.deliverable-row {
    display: grid;
    gap: 15px;
    margin-bottom: 15px;
    align-items: start;
}
.deliverable-row textarea {
    min-height: 80px;
    resize: vertical;
}
.remove-btn {
    color: red;
    cursor: pointer;
    text-align: center;
    margin-top: 25px;
    font-size: 26px;
}
.dashboard-wrapper.project-create .form-wrapper {
    padding: 0 24px 24px;
}
.project-create .breadcrumb {
    margin: 0 !important;
    gap: 5px;
    background: #E3E6F2;
    font-family: Noto Sans;
    font-weight: 400;
    font-size: 12px;
    line-height: normal;
    letter-spacing: 0.32px;
    padding: 8px 24px;
    color: #161616;
}
.project-create .top-header {
    border: 0;
}
.project-create .breadcrumb a {
    color: #0F62FE;
}
.project-create h1 {
    font-family: Noto Sans;
    font-weight: 700;
    font-size: 32px;
    padding: 15px 24px 0;
    line-height: normal;
    letter-spacing: -0.11px;
    color: #202224;
}
.project-create #createProjectForm .section-heading h2 {
    font-family: Noto Sans;
    font-weight: 500;
    font-size: 20px !important;
    line-height: normal;
    letter-spacing: 0.32px;
    color: #525252;
}
.project-create #createProjectForm label {
    font-family: Noto Sans;
    font-weight: 400;
    font-size: 12px;
    line-height: normal;
    letter-spacing: 0.32px;
    color: #525252;
    margin-bottom: 8px;
}
.project-create #createProjectForm input,
.project-create #createProjectForm textarea,
.project-create #createProjectForm .select2-container,
.project-create #createProjectForm select {
    border: 0;
    border-bottom: 1px solid #8D8D8D;
    background: transparent;
}
.project-create #createProjectForm input[type="date"] {
    padding: 10px 16px;
    color: #6F6F6F;
}
.project-create #createProjectForm input::placeholder,
.project-create #createProjectForm textarea::placeholder {
    color: #A8A8A8;
}
.project-create #createProjectForm .add-disbursed,
.project-create #createProjectForm .add-utilised,
.project-create #createProjectForm .add-more {
    font-family: Noto Sans;
    font-weight: 600;
    font-size: 16px;
    line-height: normal;
    text-transform: capitalize;
    color: #2C66EF;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}
.project-create #createProjectForm .divider {
    margin: 24px 0;
    width: 100%;
    height: 1px;
    background: #9E9E9E;
}
.project-create #createProjectForm #manpowerContainer input, .project-create #createProjectForm #manpowerContainer select, .project-create #createProjectForm #manpowerContainer .select2-container {
    background: #F5F6FA;
}
#createProjectForm #manpowerContainer {
    margin-top: 16px;
}
.project-create .form-actions {
    margin-top: 0;
    padding: 26px;
    background: #fff;
}
.project-create .form-actions .btn-light {
    padding: 10px 24px;
    font-family: Noto Sans;
    font-weight: 500;
    font-size: 13px;
    line-height: normal;
    letter-spacing: -0.25%;
    color: #2C66EF;
    background-color: transparent;
    border: 1px solid #C1D3FF;
}
#mark-selected-read.btn-primary,
#mark-all-read.btn-primary,
.mark-read-btn.btn-primary,
.project-create .form-actions .btn-primary {
    font-family: Noto Sans;
    font-weight: 500;
    font-size: 13px;
    line-height: normal;
    letter-spacing: -0.25%;
    color: #fff;
    padding: 10px 48px;
    margin-left: 16px;
    background-color: #2C66EF;
    border: 1px solid #2C66EF;
}


.drawer-body .manpower-detail-box {
    margin-top: 26px;
}
.drawer-body .manpower-detail-box h4 {
    font-family: Noto Sans;
    font-size: 18px;
    font-weight: 600;
    line-height: normal;
    color: #030711;
    margin-bottom: 16px;
}
.drawer-body .manpower-detail-box .manpower-count {
    border-radius: 12px;
    padding: 20px;
    background: #fff;
    box-shadow: 0px 1px 3px 0px #0000000A;
    border: 1px solid #E1E7EF;
}
.drawer-body .manpower-count .top-count {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 1fr 1fr;
    margin-bottom: 20px;
    gap: 24px;
}
.drawer-body .manpower-count .top-count span {
    display: block;
    font-family: Noto Sans;
    font-weight: 500;
    font-size: 11px;
    line-height: normal;
    letter-spacing: 0.55px;
    text-transform: uppercase;
    color: #65758B;
    margin-bottom: 5px;
}
.drawer-body .manpower-count .top-count span.count {
    font-weight: 700;
    font-size: 24px;
}
.drawer-body .manpower-count .top-count span.sanctioned-count {
    color: #030711;
}
.drawer-body .manpower-count .top-count span.in-place-count {
    color: #10B981;
}
.drawer-body .manpower-count .top-count span.vacancy-count {
    color: #EF4444;
}
.drawer-body .manpower-count .top-count .detail:not(:last-child) {
    border-right: 1px solid #E1E7EF;
}
.drawer-body .manpower-detail-box .table-wrapper {
    padding: 0;
}
.drawer-body .manpower-detail-box .table-wrapper th {
    color: #718EBF;
    border-bottom: 1px solid #E1E7EF;
    background: #F9FAFB !important;
    padding: 16px 14px;
    position: relative;
}
.manpower-detail-box .dashboard-table {
    border: 1px solid #E1E7EF;
    box-shadow: 0px 1px 3px 0px #0000000A;
    border-radius: 12px;
    border-collapse: separate;
}
.manpower-detail-box .dashboard-table thead, .manpower-detail-box .dashboard-table tr {
    border-radius: 12px 12px 0 0;
}
.drawer-body .manpower-detail-box .table-wrapper tr th:first-of-type {
    border-radius: 12px 0 0 0;
}
.drawer-body .manpower-detail-box .table-wrapper tr th:last-of-type {
    border-radius: 0 12px 0 0px;
}
.drawer-body .manpower-detail-box .dashboard-table tr td:first-of-type {
    color: #65758B;
}
.drawer-body .manpower-detail-box .dashboard-table tr td:nth-child(2), .drawer-body .manpower-detail-box .dashboard-table tr td:nth-child(3) {
    color: #030711;
}
.drawer-body .manpower-detail-box .dashboard-table tr td:nth-child(4) {
    color: #21C45D !important;
}
.drawer-body .manpower-detail-box .dashboard-table tr td:nth-child(5) {
    color: #EF4343 !important;
}
.drawer-body .manpower-detail-box .dashboard-table tr td:nth-child(6) {
    color: #65758B;
}
.drawer-body .manpower-detail-box .dashboard-table tr td {
    padding: 16px;
}
.drawer-body .manpower-detail-box .dashboard-table tbody tr:last-of-type td:first-of-type {
    border-radius: 0 0 0 12px;
}
.drawer-body .manpower-detail-box .dashboard-table tbody tr:last-of-type td:last-of-type {
    border-radius: 0 0 12px 0;
}
.drawer-body .drawer-section h3 {
    font-family: Noto Sans;
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
    color: #000000;
}
div#drawerOverview {
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 0%;
    color: #525252;
}
.drawer-body .deliverables_details .date {
    font-family: Noto Sans;
    font-weight: 500;
    font-size: 12px;
    line-height: normal;
    letter-spacing: 0.55px;
    text-transform: uppercase;
    color: #65758B;
    margin-bottom: 6px;
}
.drawer-body .deliverables_details .details {
    font-family: Noto Sans;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #525252;
    margin-bottom: 10px;
}
.drawer-section #keyMetrics {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, 1fr);
}
.drawer-section #keyMetrics span {
    display: block;
}
.drawer-section #keyMetrics .metric_details {
    border-radius: 14px;
    padding: 16px;
    border: 1px solid #E1E7EF;
    box-shadow: 6px 6px 54px 0px #0000000D;
}
.drawer-section #keyMetrics span.details {
    font-family: Noto Sans;
    font-weight: 600;
    font-size: 16px;
    line-height: normal;
    opacity: 0.7;
    color: #202224;
    margin-bottom: 5px;
}
.drawer-section #keyMetrics span.price {
    font-family: Noto Sans;
    font-weight: 700;
    font-size: 28px;
    line-height: normal;
    color: #202224;
}
.drawer-body .manpower-detail-box .table-wrapper th:before {
    content: '';
    position: absolute;
    height: 107%;
    width: 2px;
    left: -2px;
    top: -2px;
    background: #f9fafb;
}
.drawer-body .manpower-detail-box .table-wrapper tr th:first-of-type::before {
    display: none;
}
.manpower-detail-box .manpower-count .progress {
    background: transparent;
    display: inline-block;
    width: 100%;
}
.manpower-detail-box .manpower-count .progress .staffing-progress-bar {
    height: 8px;
    margin-top: 10px;
    background: #F9FAFB;
    display: flex;
    border-radius: 50px;
}
.manpower-detail-box .manpower-count .progress .staffing-progress-bar #progressFill {
    background: #F59E0B;
    border-radius: 50px;
}
.manpower-detail-box .manpower-count .progress .d-flex span {
    font-family: Noto Sans;
    font-weight: 400;
    font-size: 12px;
    line-height: normal;
    color: #65758B;
}
.manpower-detail-box .manpower-count .progress .d-flex span.staffing-percentage {
    color: #030711;
}
.project-drawer .drawer-body {
    padding: 0 60px 53px;
}
.drawer-body .manpower-detail-box .dashboard-table tbody tr:last-of-type td {
    background: #F9FAFB !important;
    position: relative;
}
.drawer-body .manpower-detail-box .dashboard-table tbody tr:last-of-type td:before {
    content: '';
    position: absolute;
    height: 107%;
    width: 2px;
    left: -2px;
    top: -2px;
    background: #f9fafb;
}
.drawer-body .manpower-detail-box .dashboard-table tbody tr:last-of-type td:first-of-type::before {
    display: none;
}
.drawer-body .info-card .info-item {
    max-width: 150px;
    min-width: 150px;
    align-items: flex-start;
    display: flex;
    flex-direction: column;
}
.financial-prog-wrapper {
    border-radius: 12px;
    box-shadow: 0px 1px 3px 0px #0000000A;
    border: 1px solid #E1E7EF;
}
.finance-box small {
    font-family: Noto Sans;
    font-weight: 500;
    font-size: 11px;
    line-height: normal;
    text-transform: uppercase;
    color: #65758B;
}
.finance-box h4 {
    font-family: Noto Sans;
    font-weight: 700;
    font-size: 24px;
    line-height: normal;
}
.finance-box h4#fpBudget {
    color: #030711;
}
.finance-box.green h4#fpDisbursed {
    color: #10B981;
}
.finance-box.blue h4#fpUtilized {
    color: #3B82F6;
}
.finance-box.gray h4#fpRemaining {
    color: #65758B;
}
.financial-prog-wrapper .progress-wrap span {
    font-family: Noto Sans;
    font-weight: 400;
    font-size: 12px;
    line-height: normal;
    color: #65758B;
    margin-bottom: 8px;
}
.financial-prog-wrapper .progress-wrap span#fpPercent {
    color: #030711;
}
.financial-prog-wrapper .progress-wrap .progress-bar {
    background-color: #F9FAFB;
}
.financial-prog-wrapper .financial-values {
    padding: 25px 25px 30px;
    border-bottom: 1px solid #E1E7EF;
}
.financial-prog-wrapper .finance-notes {
    padding: 15px 25px 25px;
}
.financial-prog-wrapper .finance-notes p#fpNotes {
    margin: 0;
    font-family: Noto Sans;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #525252;
}
.financial-prog-wrapper .finance-notes h4 {
    font-family: Noto Sans;
    font-weight: 700;
    font-size: 16px;
    line-height: normal;
    color: #000000;
    margin-bottom: 10px;
}
.staffing-header h2 {
    font-family: Noto Sans;
    font-weight: 700;
    font-size: 18px;
    line-height: normal;
    color: #1C1D21;
    margin: 0;
}
.staffing-select-box:before {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.6562 3.75012H2.34375C1.5671 3.75012 0.9375 4.37972 0.9375 5.15637V11.7189C0.9375 12.4955 1.5671 13.1251 2.34375 13.1251H12.6562C13.4329 13.1251 14.0625 12.4955 14.0625 11.7189V5.15637C14.0625 4.37972 13.4329 3.75012 12.6562 3.75012Z' stroke='black' stroke-width='0.609939' stroke-linejoin='round'/%3E%3Cpath d='M4.21875 3.75V2.8125C4.21875 2.56386 4.31752 2.3254 4.49334 2.14959C4.66915 1.97377 4.90761 1.875 5.15625 1.875H9.84375C10.0924 1.875 10.3308 1.97377 10.5067 2.14959C10.6825 2.3254 10.7812 2.56386 10.7812 2.8125V3.75' stroke='black' stroke-width='0.609939' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.0625 7.03131H0.9375' stroke='black' stroke-width='0.609939' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.375 7.03131V7.73444C9.375 7.7966 9.35031 7.85621 9.30635 7.90016C9.2624 7.94412 9.20279 7.96881 9.14062 7.96881H5.85938C5.79721 7.96881 5.7376 7.94412 5.69365 7.90016C5.64969 7.85621 5.625 7.7966 5.625 7.73444V7.03131' stroke='black' stroke-width='0.609939' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    width: 15px;
    height: 15px;
    position: absolute;
    pointer-events: none;
}
.staffing-select-box {
    padding: 4px 14px 4px 8px;
    border: 1px solid #E8E8E8;
    border-radius: 8px;
    background: #fff;
    position: relative;
    gap: 8px;
    display: flex;
    align-items: center;
}
.staffing-select-box #staffingProject {
    width: auto;
    border: 0;
    outline: 0;
    cursor: pointer;
    appearance: none;
    padding-right: 25px;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='6' viewBox='0 0 12 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.499988 0.790684C0.501644 0.723348 0.523411 0.658047 0.562488 0.603184C0.670091 0.481715 0.853765 0.465267 0.981238 0.565684L5.89374 4.60318C5.91886 4.6226 5.9495 4.63354 5.98124 4.63443C6.01505 4.63443 6.04794 4.62347 6.07499 4.60318L10.9812 0.565684C11.0109 0.54104 11.0448 0.521981 11.0812 0.509434C11.1185 0.503256 11.1565 0.503256 11.1937 0.509434C11.2329 0.516275 11.2708 0.528914 11.3062 0.546934C11.3394 0.564315 11.369 0.587617 11.3937 0.615684C11.4165 0.64559 11.4335 0.679512 11.4437 0.715684C11.453 0.752613 11.453 0.791256 11.4437 0.828184C11.4493 0.865478 11.4493 0.903391 11.4437 0.940684C11.424 0.974009 11.3987 1.00362 11.3687 1.02818L6.44374 5.06568C6.18339 5.29025 5.79784 5.29025 5.53749 5.06568L0.606238 1.01568C0.572232 0.988629 0.544509 0.954509 0.524988 0.915684C0.507796 0.87629 0.49927 0.833661 0.499988 0.790684Z' fill='%231D1D1B' stroke='black'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center right;
    font-family: Noto Sans;
    font-weight: 400;
    font-size: 12px;
    line-height: normal;
    color: #718EBF;
    padding-left: 24px;
}
.staffing-controls .toggle-buttons button {
    border: none;
    padding: 10px 8px;
    border-radius: 8px;
    background: transparent;
    margin-left: 10px;
    font-family: Noto Sans;
    font-weight: 700;
    font-size: 14px;
    line-height: normal;
    color: #8181A5;
}
.staffing-controls .toggle-buttons button.active {
    border: 1px solid #ECECF2;
    box-shadow: none;
    color: #1C1D21;
}
.staffing-legend .legend-item .label {
    font-family: Noto Sans;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #1C1D21;
}
.staffing-legend .legend-item strong {
    font-family: Noto Sans;
    font-weight: 700;
    font-size: 14px;
    line-height: normal;
    color: #1C1D21;
}
.dasboard-head-right .exp-year-field {
    display: flex;
    max-width: 220px;
    padding: 13px;
    position: relative;
    background: #fff;
    border-radius: 8px;
    align-items: center;
}
.dasboard-head-right .exp-year-field .select-grpup {
    align-items: center;
    display: flex;
}
.dasboard-head-right .exp-year-field .input-group {
    width: min-content;
    position: unset;
}
.dasboard-head-right .exp-year-field #exp-year {
    padding: 0;
    flex: unset;
    min-width: 75px;
    cursor: pointer;
    padding-left: 30px;
    height: auto;
    font-family: Noto Sans;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #000000;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 16C1.34808 15.9956 0.00878107 14.6599 0 13.008V5.808C0.00439585 4.15297 1.34497 2.81239 3 2.808H3.8C4.10258 2.84311 4.33083 3.09938 4.33083 3.404C4.33083 3.70861 4.10258 3.96488 3.8 4H3C2.51778 3.99565 2.05415 4.18584 1.71391 4.52759C1.37366 4.86934 1.18552 5.3338 1.192 5.816V13.016C1.19198 13.4941 1.38298 13.9523 1.72251 14.2888C2.06204 14.6254 2.52197 14.8123 3 14.808H12.6C13.0767 14.808 13.5337 14.6181 13.87 14.2803C14.2063 13.9425 14.3941 13.4846 14.392 13.008V5.808C14.3941 5.33061 14.2065 4.87192 13.8705 4.53286C13.5344 4.19379 13.0774 4.00211 12.6 4H11.8C11.4717 4.00003 11.2044 3.73624 11.2 3.408C11.1957 3.24537 11.2568 3.0878 11.3695 2.97054C11.4823 2.85327 11.6373 2.78608 11.8 2.784H12.6C14.2519 2.78837 15.5912 4.12409 15.6 5.776V12.976C15.6086 13.7764 15.296 14.5469 14.7322 15.1152C14.1685 15.6835 13.4005 16.0022 12.6 16H3Z' fill='black'/%3E%3Cpath d='M6.2001 4C5.86873 4 5.6001 3.73137 5.6001 3.4C5.6001 3.06863 5.86873 2.8 6.2001 2.8H9.4001C9.73147 2.8 10.0001 3.06863 10.0001 3.4C10.0001 3.73137 9.73147 4 9.4001 4H6.2001Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.18415 3.408C3.18415 4.40211 3.99004 5.208 4.98415 5.208V5.2C5.462 5.19486 5.91874 5.00239 6.25615 4.664C6.59163 4.32595 6.77874 3.86825 6.77615 3.392V1.792C6.76741 0.802833 5.96535 0.00433836 4.97615 0C4.4981 -1.90554e-05 4.03986 0.190975 3.70333 0.530509C3.3668 0.870042 3.17989 1.32997 3.18415 1.808V3.408ZM4.56269 1.38421C4.67395 1.27145 4.82575 1.20799 4.98415 1.208C5.30938 1.20788 5.57548 1.46689 5.58415 1.792V3.392C5.58418 3.72469 5.31681 3.99562 4.98415 4C4.83923 3.99582 4.70158 3.9356 4.60015 3.832C4.47577 3.72504 4.40061 3.57182 4.39215 3.408V1.808C4.39001 1.64961 4.45144 1.49697 4.56269 1.38421Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.31218 4.664C9.6479 5.00393 10.1064 5.19426 10.5842 5.192V5.2C11.0616 5.19788 11.5186 5.00621 11.8546 4.66714C12.1907 4.32807 12.3783 3.86939 12.3762 3.392V1.792C12.3674 0.802833 11.5654 0.00433836 10.5762 0C9.58649 0 8.78418 0.802306 8.78418 1.792V3.392C8.7846 3.86923 8.97452 4.32676 9.31218 4.664ZM9.99218 1.792C9.99215 1.46373 10.2559 1.19638 10.5842 1.192C10.7447 1.18986 10.8994 1.25213 11.0136 1.36488C11.1279 1.47764 11.1922 1.63147 11.1922 1.792V3.392C11.1922 3.72337 10.9236 3.992 10.5922 3.992C10.2608 3.992 9.99218 3.72337 9.99218 3.392V1.792Z' fill='black'/%3E%3Cpath d='M0.6 8C0.268629 8 0 7.73137 0 7.4C0 7.06863 0.268629 6.8 0.6 6.8H15C15.3314 6.8 15.6 7.06863 15.6 7.4C15.6045 7.56046 15.5427 7.71568 15.4292 7.82918C15.3157 7.94268 15.1605 8.00446 15 8H0.6Z' fill='black'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center left;
    border: 0;
    margin-right: 5px;
}
.dasboard-head-right .exp-year-field .input-group:after {
    content: '';
    height: 100%;
    position: absolute;
    top: 0;
    left: 90px;
    width: 2px;
    background: #FAFAFB;
}
.dasboard-head-right .exp-year-field #quarter {
    padding: 0;
    border: 0;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='6' viewBox='0 0 12 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.499988 0.790692C0.501644 0.723356 0.523411 0.658055 0.562488 0.603192C0.670091 0.481723 0.853765 0.465275 0.981238 0.565692L5.89374 4.60319C5.91886 4.62261 5.9495 4.63355 5.98124 4.63444C6.01505 4.63444 6.04794 4.62348 6.07499 4.60319L10.9812 0.565692C11.0109 0.541048 11.0448 0.521989 11.0812 0.509442C11.1185 0.503264 11.1565 0.503264 11.1937 0.509442C11.2329 0.516283 11.2708 0.528922 11.3062 0.546942C11.3394 0.564323 11.369 0.587624 11.3937 0.615692C11.4165 0.645598 11.4335 0.67952 11.4437 0.715692C11.453 0.75262 11.453 0.791264 11.4437 0.828192C11.4493 0.865486 11.4493 0.903398 11.4437 0.940692C11.424 0.974017 11.3987 1.00363 11.3687 1.02819L6.44374 5.06569C6.18339 5.29026 5.79784 5.29026 5.53749 5.06569L0.606238 1.01569C0.572232 0.988637 0.544509 0.954517 0.524988 0.915692C0.507796 0.876297 0.49927 0.833668 0.499988 0.790692Z' fill='%231D1D1B' stroke='black'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center right;
    padding-right: 25px;
    padding-left: 10px;
    cursor: pointer;
    font-family: Noto Sans;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #000000;
}
.exp-button {
    border: 1px solid #D0D5DD;
    gap: 8px;
    opacity: 1;
    border-radius: 8px;
    border-width: 1px;
    height: 46px;
    background: #FFFFFF;
    margin-left: 17px;
}
.exp-button:focus-visible {
    outline: unset;
}
.exp-button .btn {
    height: 46px;
    color: #004EFF;
}
input#select-all,
input.notif-checkbox,
input.project-checkbox {
    width: 16px;
    height: 16px;
}
.insight-header .tabs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
.page-container.dashboard-container {
    padding: 32px;
}
.dashboard-wrapper .insights-wrapper .spotlight-card .insight-card {
    max-width: 270px;
}
span#drawerProjectTitle {
    font-family: Noto Sans;
}
.status-badge {
    font-family: Noto Sans;
}
.dashboard-table td .view-link.open-drawer, .dashboard-table td span.status {
    white-space: nowrap;
}
.dash-pagination {
    display: flex;
    align-items: center;
    margin-top: 15px;
    border-top: 1px solid #ccc;
    padding-top: 10px;
    gap: 50px;
}
.dash-pagination .per-page-selector {
    width: 45%;
}
.dash-pagination .per-page-selector form {
    display: flex;
    align-items: center;
    gap: 10px;
}
.dash-pagination .per-page-selector form label {
    white-space: nowrap;
    font-family: "Noto Sans";
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #232323;
}
.dash-pagination .per-page-selector form select {
    min-width: 70px;
    width: auto;
    outline: 0;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='6' viewBox='0 0 12 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.499988 0.790684C0.501644 0.723348 0.523411 0.658047 0.562488 0.603184C0.670091 0.481715 0.853765 0.465267 0.981238 0.565684L5.89374 4.60318C5.91886 4.6226 5.9495 4.63354 5.98124 4.63443C6.01505 4.63443 6.04794 4.62347 6.07499 4.60318L10.9812 0.565684C11.0109 0.54104 11.0448 0.521981 11.0812 0.509434C11.1185 0.503256 11.1565 0.503256 11.1937 0.509434C11.2329 0.516275 11.2708 0.528914 11.3062 0.546934C11.3394 0.564315 11.369 0.587617 11.3937 0.615684C11.4165 0.64559 11.4335 0.679512 11.4437 0.715684C11.453 0.752613 11.453 0.791256 11.4437 0.828184C11.4493 0.865478 11.4493 0.903391 11.4437 0.940684C11.424 0.974009 11.3987 1.00362 11.3687 1.02818L6.44374 5.06568C6.18339 5.29025 5.79784 5.29025 5.53749 5.06568L0.606238 1.01568C0.572232 0.988629 0.544509 0.954509 0.524988 0.915684C0.507796 0.87629 0.49927 0.833661 0.499988 0.790684Z' fill='%231D1D1B' stroke='black'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center right 10px;
    font-family: Noto Sans;
    font-weight: 600;
    font-size: 16px;
    line-height: normal;
    color: #232323;
    border: 2px solid #e9e9e9;
    border-radius: 5px;
    padding: 5px 8px;
}
.dash-pagination .pagination-wrapper {
    display: flex;
    gap: 50px;
    align-items: center;
    margin-left: auto;
    justify-content: space-between;
    width: 55%;
}
.dash-pagination .pagination-wrapper .pagination-info {
    font-family: "Noto Sans";
    font-weight: 400;
    font-size: 16px;
    white-space: nowrap;
    line-height: 100%;
    letter-spacing: 0%;
    color: #232323;
}
.dash-pagination .pagination-wrapper .pagination-links {
    display: flex;
    align-items: center;
    gap: 8px;
}
.dash-pagination .pagination-wrapper .pagination-links a {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 2px solid #e9e9e9;
    border-radius: 4px;
    font-family: "Noto Sans";
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    color: #232323;
}
#dashboard-content .page-container {
    padding: 32px;
}
#dashboard-content .page-container .table-header {
    margin-top: 0;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #161616;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0 8px;
    display: inline;
    border: 0;
    overflow: hidden;
}
.select2-container--default .select2-selection--single {
    border: 0;
    background: unset;
    display: flex;
}
.select2-container {
    padding: 5px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: auto;
    right: 2px;
}
.select2-container--open .select2-dropdown--below {
    border-top: 1px solid #aaa;
}
#notification-popup {
    display:none;
    position:absolute;
    right:80px;
    top:69px;
    width:400px;
    background:#fff;
    border:1px solid #ddd;
    border-radius:8px;
    padding:0px;
    z-index:999;
    text-align: center;
    box-shadow: 0 0 18px rgba(0, 0, 0, .3);
}
#notify-count {
    background: #FE2323;
    height: 7px;
    width: 7px;
    border: 1.5px solid #F6F7F8;
    display: block;
    border-radius: 50%;
    position: absolute;
    right: 0px;
    margin: 0;
    top: 2px;
}
.notify-title strong {
    font-size: 17px;
    text-align: center;
    display: block;
    color: #fff;
    border-bottom: 1px solid #E6EFF5;
    padding: 10px;
    background: rgb(72 128 255);
    border-radius: 8px 8px 0 0;
}
.notify-item div {
    font-size: 16px;
    color: #232323;
    font-weight: 400;
}
.notify-item {
    padding: 10px 15px;
    border-bottom: 1px solid #dedede;
    text-align: left;
}
.all-notify-link {
    margin: 10px auto;
    display: inline-block;
    vertical-align: top;
}
.dashboard-wrapper .dash-prof-details #notification-bell {
    position: relative;
    cursor: pointer;
}
#notification-list {
    max-height: calc(100vh - 170px);
    overflow: auto;
}



@media (min-width: 1382.98px) {
    .dashboard-wrapper .insights-wrapper .spotlight-card .insight-card {
        max-width: 380px;
    }
}

@media (min-width: 1519.98px) {
    .dashboard-wrapper .insights-wrapper .spotlight-card .insight-card {
        max-width: 560px;
    }
}

@media (max-width: 1199.98px) {
    .project-drawer {
        width: 900px;
    }
    .drawer-header {
        padding: 30px;
    }
    .project-drawer .drawer-body {
        padding: 0 30px 50px;
    }
    .manpower-detail-box .dashboard-table {
        display: table;
    }
}

@media (min-width: 991.98px) and (max-width: 1199.98px) {
    .page-container.dashboard-container {
        padding: 20px;
    }
    .insight-header .tabs {
        flex-wrap: wrap;
        gap: 5px;
    }
    .dashboard-wrapper .dashboard-card .card-number {
        font-size: 22px;
    }
    .dashboard-wrapper .dashboard-card h4 {
        font-size: 14px;
    }
    .dashboard-wrapper .dashboard-cards {
        gap: 15px;
    }
    .sidebar {
        min-width: 200px;
    }
    .staffing-controls, .staffing-controls .toggle-buttons {
        width: auto;
    }
}

@media (max-width: 991.98px) {
    .top-header .sidebar-toggler {
        background: #4880ff;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 30px;
        cursor: pointer;
    }
    .dashboard-overlay {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: #00000080;
        z-index: 30;
        transition: all 0.3s ease-in-out;
        display: none;
    }
    .dashboard-overlay.show {
        display: block;
    }
    .dashboard-wrapper .sidebar {
        position: fixed;
        left: -240px;
        height: 100%;
        transition: all 0.3s ease-in-out;
    }
    .dashboard-wrapper .sidebar.active {
        left: 0;
        z-index: 99;
    }
    .project-drawer {
        width: 100%;
    }
    .insights-wrapper {
        flex-direction: column;
    }
    .dashboard-wrapper .insights-wrapper > div {
        width: 100%;
    }
    .dashboard-wrapper .insights-wrapper .spotlight-card .insight-card {
        max-width: 100%;
    }
    .dashboard-wrapper .insights-wrapper .insight-card #budgetChart {
        width: 100% !important;
    }
    .staffing-controls {
        width: auto;
    }
    .staffing-controls .toggle-buttons {
        width: auto;
    }
    .dash-pagination {
        align-items: flex-start;
        gap: 10px;
    }
    .dash-pagination .per-page-selector {
        width: auto;
    }
    .dash-pagination .pagination-wrapper {
        gap: 20px;
        margin-left: 10px;
        width: 100%;
    }
    #deliverablesContainer .date-field {
        width: 50%;
    }
}

@media (max-width: 767.98px) {
    .top-header {
        flex-wrap: wrap;
        row-gap: 20px;
        height: auto;
        padding: 15px;
    }
    .dashboard-wrapper .search-box {
        min-width: auto;
    }
    .staffing-header {
        flex-wrap: wrap;
        row-gap: 15px;
    }
    .insight-header .tabs {
        flex-wrap: wrap;
        justify-content: flex-start;
        row-gap: 15px;
    }
    .staffing-content .staffing-chart {
        max-width: 240px;
    }
    .staffing-controls {
        flex-wrap: wrap;
        width: 100%;
        justify-content: flex-start;
    }
    .staffing-controls .toggle-buttons button {
        margin-left: 0;
    }
    .staffing-controls .toggle-buttons {
        width: 100%;
        justify-content: flex-start;
    }
    .page-container.dashboard-container {
        padding: 20px;
    }
    .table-wrapper {
        overflow: auto;
        max-width: calc(100vw - 40px);
    }
    .dash-pagination {
        flex-direction: column;
        gap: 20px;
    }
    .dash-pagination .pagination-wrapper {
        align-items: center;
        justify-content: flex-start;
    }
    .financial-values .finance-cards {
        display: flex;
        flex-wrap: wrap;
    }
    .financial-values .finance-cards .finance-box {
        width: calc(50% - 8px);
    }
    .drawer-body .info-card {
        flex-wrap: wrap;
        row-gap: 10px;
    }
    .drawer-section #keyMetrics {
        grid-template-columns: repeat(3, 1fr);
    }
    .drawer-section #keyMetrics span.price {
        font-size: 24px;
    }
    span#drawerProjectTitle {
        font-size: 24px !important;
    }
    .manpower-box-wrapper {
        max-width: calc(100vw - 50px);
    }
    .section-card .manpower-box .overflow-wrapper {
        overflow: auto;
        padding-bottom: 10px;
    }
    .manpower-box .table-header {
        gap: 20px;
        width: fit-content;
    }
    .manpower-box .table-header div {
        min-width: 100px;
        line-height: normal;
    }
    .section-card .manpower-box #manpowerContainer {
        width: fit-content;
    }
    .section-card .manpower-box #manpowerContainer .table-row {
        gap: 20px;
    }
    .section-card .manpower-box #manpowerContainer .table-row input, .section-card .manpower-box #manpowerContainer .table-row select , .section-card .manpower-box #manpowerContainer .table-row .select2-container {
        min-width: 100px;
    }
    .project-create h1 {
        font-size: 24px;
    }
    #projects-empty .empty-desc {
        width: auto;
    }
    #dashboard-content .page-container .table-wrapper {
        max-width: calc(100vw - 65px);
    }
}

@media (max-width: 575.98px) {
    .dash-pagination .pagination-wrapper {
        margin: 0;
        flex-direction: column;
    }
    .dash-pagination .per-page-selector {
        margin: 0 auto;
    }
    .dash-pagination .pagination-wrapper .pagination-links {
        flex-wrap: wrap;
        justify-content: center;
    }
    .drawer-section #keyMetrics {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 559.98px) {
    #notification-popup {
        right: auto;
        top: 140px;
        max-width: calc(100% - 30px);
    }
}

@media (max-width: 480.98px) {
    .financial-values .finance-cards .finance-box {
        width: 100%;
    }
    .drawer-section #keyMetrics {
        grid-template-columns: repeat(1, 1fr);
    }
    .grid-2 {
        grid-template-columns: 1fr;
    }
    #deliverablesContainer .date-field {
        width: 100%;
    }
    .project-create .form-actions {
        flex-wrap: wrap;
        gap: 20px;
    }
}