.chart-container canvas{
width:100%;
height:350px;
}

.nav-pills .nav-link{
margin:5px 0;
border-radius:97px;
color:#A19FA3;
text-align:start;
}

.nav-pills .nav-link.active{
background:#0092AD;
color:white;
}

#chart-data td {
    padding:6px;
}

.delete-row {
    color:#b32d2e;
}

.chart-container {
		max-width: 100%;
		width: 100%;
		overflow: hidden;
		background: #fff;
		border : none !important;
	}
	.chart-container .nav-pills button{
		margin: 5px 0;
		border-radius:97px;
	}
	.chart-container .nav .nav-link {
		color:#A19FA3;
		border: none;
		text-align: start;
	}
	
	/* Responsive nav-link alignment */
	@media (max-width: 768px) {
		.chart-container .nav .nav-link {
			text-align: center !important;
		}
	}
	.chart-container .nav .nav-link.active {
		background-color: #0092AD;
		color:white;
	}
	.chart-container  canvas {
		width: 100%;
		height: 350px;
		min-height: 350px;
		max-height: 350px;
	}

	.chart-container {
            max-width: 100%;
            width: 100%;
            overflow: hidden;
            background: #fff;
			border : none !important;
        }
		.chart-container .nav-pills button{
			margin: 5px 0;
			border-radius:97px;
		}
		.chart-container .nav .nav-link {
			color:#A19FA3;
			border: none;
		}
		.chart-container .nav .nav-link.active {
			background-color: #0092AD;
			color:white;
		}
		.chart-container  canvas {
			width: 100%;
			height: 350px;
			min-height: 350px;
			max-height: 350px;
		}

		
			/* Chart container responsive */
			.chart-container.row {
				margin: 0 !important;
			}
			
			.chart-container .col-12.col-sm-4,
			.chart-container .col-12.col-sm-8 {
				padding: 0 5px !important;
			}
			
			/* Chart canvas responsive */
			.chart-container canvas {
				height: 250px !important;
				min-height: 250px !important;
				max-height: 250px !important;
			}
			
/* Nav container */
.nav {
  display: flex;
  list-style: none;
  padding-left: 0;
  margin: 0;
}

/* Vertical nav */
.flex-column {
  flex-direction: column;
}

/* Nav links */
.nav-pills .nav-link {
  display: block;
  padding: 10px 15px;
  margin-bottom: 5px;
  border-radius: 6px;
  text-decoration: none;
  color: #333;
  background-color: #f1f1f1;
  transition: all 0.2s ease;
}

/* Hover state */
.nav-pills .nav-link:hover {
  background-color: #e0e0e0;
}

/* Active state */
.nav-pills .nav-link.active {
  background-color: #0d6efd;
  color: #fff;
}

/* Basic row */
.row {
  display: flex;
  flex-wrap: wrap;
}

/* Base column */
[class*="col-"] {
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
}

/* col-12 */
.col-12 {
  width: 100%;
}

/* Responsive columns (≥576px) */
@media (min-width: 576px) {
  .col-sm-8 {
    width: 66.6667%;
  }

  .col-sm-4 {
    width: 33.3333%;
  }
}