body {
	background-color: #f2f4f5;
}

.dashboard-header {
	padding: 1rem;
}
.dashboard-title {
	font-size: 1.5rem;
	font-weight: 600;
	margin: 0;
	color: #333;
}
.btn-tab {
	border-radius: 8px;
	margin-left: -1px;
	border: transparent !important;
}
/* Active tab */
.btn-tab.active {
	background-color: #fff;
	border-top-right-radius: 4px !important;
	border-bottom-right-radius: 4px !important;
	border-top-left-radius: 4px !important;
	border-bottom-left-radius: 4px !important;
	border: transparent !important;
}
/* Inactive tab */
.btn-tab:not(.active) {
	color: #838f97;
}
.row.dashboard-header.align-items-center {
	justify-content: space-between;
}
.col.text-end {
	max-width: fit-content;
}
.nav.btn-group {
	background-color: #e8ebec;
}

/* Chart section */
.charts {
	background-color: #fcfcfc;
	border-radius: 8px;

	.charts-header {
		justify-content: space-between;
		padding-bottom: 0.75rem;
		border-bottom: 1px solid #d5dbdd;
	}

	.dropdown button.dropdown-toggle {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 150px;
		background-color: #fff;
		border: 2px solid #d5dbdd;
		border-radius: 8px;
		color: #495057;
	}
}

.chart-container {
	background-color: #f8f9fa;
	padding: 20px;
	.chart-placeholder {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 300px;
		background-color: #f1f5f7;
	}
}
.companies {
	.tab-pane.fade:not(.show) {
		opacity: 0;
		display: none;
	}
	.top-ranked-companies {
		a {
			color: #007bff;
			text-decoration: none;
		}
	}
	.company-card {
		text-align: center;
		padding: 20px;
		height:100%;
		border-radius: 8px;
		border: 1px solid #d5dbdd;
		h6 {
			color: #363c3f;
		}
	}
	.donut {
		width: 100px;
		height: 100px;
		margin: auto;
		position: relative;
	}
	.average-dei {
		p {
			color: #04407c;
			background-color: #f2f4f5;
			border-radius: 8px;
		}
	}
}

.checkbox-container {
	padding-bottom: 10px;
}
.section-header {
	font-size: 18px;
	font-weight: 700;
	color: #363c3f;
	margin-bottom: 0;
	display:flex;
	gap:8px;
}

/* text */
section.methodology,
section.latest-news,
section.latest-updates {
	background-color: #fcfcfc;
	border-radius: 8px;
	a {
		text-decoration: none;
		i {
			color: #535a5f !important;
		}
	}
}

section.methodology .methodology-border-bottom {
	border-bottom: 1px solid #d5dbdd;
}
section.latest-news {
	.tags {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.news-items {
		> div {
			border-top: 1px solid #d5dbdd;
			padding-top: 10px;
		}
	}
	.nav.nav-pills {
		.nav-link {
			color: #838f97;
			&.active {
				background-color: #f2f4f5 !important;
				color: #04407c;
			}
		}
	}
}
section.latest-updates {
	.tags {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.data-items {
		> div {
			border-top: 1px solid #d5dbdd;
			padding-top: 10px;
		}
	}
	.nav.nav-pills {
		.nav-link {
			color: #838f97;
			&.active {
				background-color: #f2f4f5 !important;
				color: #04407c;
			}
		}
	}
}
@media (max-width: 768px) {
	body {
		background-color: #f2f4f5;
	}

	.dashboard-header {
		padding: 1rem;
	}

	.dashboard-title {
		font-size: 1.5rem;
		font-weight: 600;
		margin: 0;
		color: #333;
	}

	.btn-tab {
		border-radius: 8px;
		margin-left: -1px;
		border: transparent !important;
	}

		/* Active tab */
		.btn-tab.active {
			background-color: #fff;
			border-top-right-radius: 4px !important;
			border-bottom-right-radius: 4px !important;
			border-top-left-radius: 4px !important;
			border-bottom-left-radius: 4px !important;
			border: transparent !important;
		}

		/* Inactive tab */
		.btn-tab:not(.active) {
			color: #838f97;
		}

	.row.dashboard-header.align-items-center {
		justify-content: space-between;
	}

	.col.text-end {
		max-width: fit-content;
	}

	.nav.btn-group {
		background-color: #e8ebec;
	}

	/* Chart section */
	.charts {
		background-color: #fcfcfc;
		border-radius: 8px;
	}

		.charts .charts-header {
			justify-content: space-between;
			padding-bottom: 0.75rem;
			border-bottom: 1px solid #d5dbdd;
		}

		.charts .dropdown button.dropdown-toggle {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 150px;
			background-color: #fff;
			border: 2px solid #d5dbdd;
			border-radius: 8px;
			color: #495057;
		}

	.chart-container {
		background-color: #f8f9fa;
		padding: 20px;
	}

		.chart-container .chart-placeholder {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 300px;
			background-color: #f1f5f7;
		}

	.companies .tab-pane.fade:not(.show) {
		opacity: 0;
		display: none;
	}

	.companies .top-ranked-companies a {
		color: #007bff;
		text-decoration: none;
	}

	.companies .company-card {
		text-align: center;
		padding: 20px;
		height: 100%;
		border-radius: 8px;
		border: 1px solid #d5dbdd;
	}

		.companies .company-card h6 {
			color: #363c3f;
		}

	.companies .donut {
		width: 100px;
		height: 100px;
		margin: auto;
		position: relative;
	}

	.companies .average-dei p {
		color: #04407c;
		background-color: #f2f4f5;
		border-radius: 8px;
	}

	.checkbox-container {
		padding-bottom: 10px;
	}

	.section-header {
		font-size: 18px;
		font-weight: 700;
		color: #363c3f;
		margin-bottom: 0;
		display: flex;
		gap: 8px;
	}

	/* Text sections */
	section.methodology,
	section.latest-news,
	section.latest-updates {
		background-color: #fcfcfc;
		border-radius: 8px;
	}

		section.methodology a,
		section.latest-news a,
		section.latest-updates a {
			text-decoration: none;
		}

			section.methodology a i,
			section.latest-news a i,
			section.latest-updates a i {
				color: #535a5f !important;
			}

		section.methodology .methodology-border-bottom {
			border-bottom: 1px solid #d5dbdd;
		}

		section.latest-news .tags,
		section.latest-updates .tags {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		section.latest-news .news-items > div,
		section.latest-updates .data-items > div {
			border-top: 1px solid #d5dbdd;
			padding-top: 10px;
		}

		section.latest-news .nav.nav-pills .nav-link,
		section.latest-updates .nav.nav-pills .nav-link {
			color: #838f97;
		}

			section.latest-news .nav.nav-pills .nav-link.active,
			section.latest-updates .nav.nav-pills .nav-link.active {
				background-color: #f2f4f5 !important;
				color: #04407c;
			}

}