:root {
	--1p2: calc(0.35 + 0.10);
	--2p3: calc(var(--1p2) + 0.20);
	
	/* Chart sizing */
	--w: 240px;
	--w14: calc(340px / -4);
	--first-color: #2e2e41;
	--second-color: #5b85ff;
	--third-color: #434354;
	--text-color: #fff;
	
	--box-shadow: 0 5px 25px rgb(2, 2, 2, 0.1);
	--text-shadow: 0 5px 25px rgb(2, 2, 2, 0.1);
	--bg: #fafbfe;
	--card: #fff;
	--muted: #9aa0ac;
	--axis: #e9e9ee;
	--shadow: 0 2px 8px rgba(16,24,40,0.06);
	--radius: 12px;
	--bg: #ffffff;
	--muted: #7a7a7a;
	--grid: #e6e6e6;
	--accent: #3b82f6;
	--panel-pad: 16px;
	--card-radius: 6px;
	--font: "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif";
}
.card-list {
    margin-bottom: 24px;
    border: none!important;
    background: #f2f2f2;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
li{
	list-style: none;
}
ul{
	padding: 0;
}
.form-label {
    display: block;
    margin-bottom: 5px;
    color: #252627;
    font-weight: bold;
	margin-bottom: 1rem;
}
.document-p{
    font-size: 16px;
}
.text-size{
    font-size: 16px;
}
.location-flag{
    height: 20px;
}
.dashbord-counter{
    text-align: center;
}
.document-ppt {
    text-align: center;
}
.location{
    column-gap: 10px;
    align-items: center;
}
.submenu-lists{
    padding-left: 25px !important;
}
.scroller-conuntry {
    max-height: 250px;
    overflow-y: auto;
}

.pie-chart {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 74vh;
    margin: 0;
    padding: 15px;
}
.chart-container {
	width: 100%;
	max-width: 600px;
	/* height: 400px; */
	position: relative;
}
canvas {
	width: 100% !important;
	height: 100% !important;
}

.document-p{
	text-align: start;
}

.chart-counter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -74%);
    font-size: 40px;
}
.chart-counters {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-48%, -88%);
    font-size: 40px;
}


.category {
    background-color: #fff;
    max-width: 347px;
    width: 100%;
    color: #6a6868e3;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.submit {
    width: 13%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    margin: 35px auto 0;
    font-size: 17px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}
.list-unstyled-dropdown li{
	display: flex;
	align-items: center;
	font-size: 16PX;
}
.category ul li input {
	accent-color: #9CA5C7;
	appearance: none;
	width: 19px;
	height: 19px;
	background-color: #9ca5c74d;
	border: 1px solid #9CA5C7;
	border-radius: 3px;
	cursor: pointer;
	position: relative;
}
.category ul li input:checked {
	background-color: transparent;
}
.category ul li input:checked::after {
	content: "✔";
	position: absolute;
	font-size: 14px;
	color: #070707;
	top: -1px;
	left: 2px;
	font-weight: bold;
}
.sort .custom-dropdown select {
	background-color: #252B45;
	color: #fff;
	border: 1px solid #9CA5C7;
	border-radius: 3px;
}
.sort .custom-dropdown select option {
	background-color: #39405B;
}

.search-input {
    background: #EEEEEE;
    color: #212121;
    vertical-align: middle;
    font-size: 13px;
    line-height: 2;
    padding: 8px 20px;
    border: 0;
    outline: none;
    box-shadow: inset 0 -1px 1px -1px #CCCCCC, inset 0 1px 1px -1px #CCCCCC, inset 1px 0 1px -1px #CCCCCC;
	width: 82%;
}


.years__wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}
.combobox {
    width: 100%;
    padding: 10px;
    padding-right: 30px; 
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #fff;
    cursor: pointer;
}
.date-search{
	padding: 7px 12px;
    border-radius: 5px;
    background: #1c84ee;
    color: #fff;
	border: none;
}

/* tab section start */



.main-container {
	position: relative;
}

/* ===== Tab navigation content ===== */
.tab-nav-bar {
	position: relative;
	margin: 8px 0;
	width: 100%;
}

.tab-navigation {
	width: 100%;
}

.tab-menu {
	display: flex;          /* flex for equal width tabs */
	width: 100%;
	padding: 0;
	margin: 0;
	list-style: none;
}

.tab-menu li {
	flex: 1;                /* each tab takes equal space */
}

.tab-btn {
	display: block;
	/* make button stretch inside li */
	padding: 9px 5px;
	font-size: 12px;
	font-weight: 500;
	color: #fff;
	background: #0881da;
	cursor: pointer;
	transition: background-color .3s ease;
	text-align: center;
	margin: 3px 2px;
}

.tab-btn i {
	margin-right: 6px;
	font-size: 16px;
}

.tab-btn:hover {
	background: #0568ad;
}

.tab-btn.active {
	background: #046662;
	border-bottom: 2px solid #05ff76;
}

/* 📱 On mobile, still full width but stacked vertically */
@media (max-width: 768px) {
	.tab-menu {
        flex-direction: column;
	}
	.tab-menu li {
        width: 100%;
	}
	.tab-btn {
        text-align: center;
		width: 100%;  
	}
}
/* ===== Tab content ===== */
.tab-content {
	position: relative;
	justify-content: center;
	width: 100%;
}

.tab {
	/* position: absolute; */
	top: 0;
	right: auto;
	bottom: 0;
	left: auto;
	max-width: 100%;
	opacity: 0;
	
	transform: translateX(25px);
	content-visibility: hidden;
}

.tab.active {
	transform: translateX(0);
	content-visibility: visible;
	opacity: 1;
	transition: opacity 1s ease, transform 1s ease;
}

.country {
	color: var(--third-color);
	font-size: 5em;
	font-weight: 700;
	text-align: center;
	text-shadow: var(--text-shadow);
}


/* ===== Media queries (max-width: 1050px;) ===== */
@media screen and (max-width: 1050px) {
	section {
		margin: 0 0;
	}
	
	.tab .row {
		flex-direction: column;
	}
	
	.tab .img-card {
		width: auto;
		max-width: 600px;
	}
	
	.country {
		font-size: 10vw;
		padding-bottom: 50px;
	}
	
}

.input-box {
    position: relative;
    height: 32px;
    max-width: 900px;
    width: 100%;
    background: #fff;
    margin: 0 0 20px 0;
    border-radius: 8px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.input-box i,
.input-box .button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.input-box i {
	left: 20px;
	font-size: 30px;
	color: #707070;
}
.input-box input {
    height: 100%;
    width: 100%;
    outline: none;
    font-size: 13px;
    font-weight: 400;
    border: none;
    padding: 0 0px 0 27px;
    background-color: transparent;
}



/* Responsive */
@media screen and (max-width: 500px) {
	.input-box {
		height: 66px;
		margin: 0 8px;
	}
	.input-box i {
		left: 12px;
		font-size: 25px;
	}
	.input-box input {
		padding: 0 112px 0 50px;
	}
	
}


/* userinterface css */

.indication-list-btn {
    background-color: #F2F2F2;
    padding: 20px 15px;
    text-align: center;
    border-radius: 6px;
    /* box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; */
    border: 1px solid #dfdfdf;
}
.indication-counter-no {
    color: #3fb2ff;
    margin-top: 13px;
}
.indication-region-no {
    color: #7dda57;
	margin-top: 13px;
}
.indication-metrics-no {
    color: #ff914c;
	margin-top: 13px;
}
.userinter-submit {
    border: 1px solid #ccc;
    padding: 15px;
    width: 14%;
    font-size: 16px;
    border-radius: 6px;
    margin: 30px auto 0;
	background: #36b7fd;
	color: #fff;
}
.userinter-submit:hover{
	background-color: #ccc;
	color: #111;
}

.header-item span{
	color: #000;
}
i.mdi.mdi-chevron-down {
    color: #000;
    font-size: 16px;
}


/* dropdown and search bar start */

.dropdowns {
	position: relative;
	display: inline-block;
	width: 100%;
}

.dropdown-toggles {
	width: 100%;
	padding: 16px;
	border: 1px solid #ccc;
	background-color: #acafb866;
	cursor: pointer;
	text-align: left;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	min-height: 40px;
	border-radius: 2px;
}

.selected-options {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	align-items: center;
	width: 100%;
	justify-content: center;
	font-size: 15px;
}
.selected-options-text{
	font-size: 13px;
	gap: 2px;
}
.selected-item {
	/* background: #e0e0e0; */
	padding: 5px 8px;
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* width: calc(33.33% - 10px); */
	box-sizing: border-box;
}

.selected-item .remove {
	cursor: pointer;
	font-weight: bold;
	margin-left: 5px;
}

.dropdown-menus {
	display: none;
	width: 100%;
	background-color: #fff;
	border: 1px solid #ccc;
	box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
	z-index: 1000;
	max-height: 264px;
	overflow-y: auto;
	margin-top: 10px;
}
.dropdown-lists{
	position: absolute;
}
.dropdown-menus.show {
	display: block;
}

.search-box {
    padding: 8px;
    border: 1px solid #ccc;
    height: 40px;
    max-width: 900px;
    width: 93%;
    background: #fff;
    margin: 15px 0 20px 8px;
    border-radius: 8px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.dropdown-item{
	display: flex;
	column-gap: 10px;
}
.dropdown-items {
	padding: 8px;
	display: flex;
	align-items: center;
	cursor: pointer;
}

.dropdown-items:hover {
	background-color: #f1f1f1;
}

.dropdown-items input {
	margin-right: 10px;
}

.checkbox-container {
	display: flex;
	flex-wrap: wrap;
}

.dropdown-items {
	width: 50%; /* 2 columns */
	box-sizing: border-box;
}


/* sub nav menu start */

.sub-nav {
    text-align: center;
}
.sub-nab-list {
    background: #fff;
    padding: 15px;
    border-radius: 6px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.subnav-a {
    color: #111;
    font-size: 16px;
    letter-spacing: .5px;
    font-weight: 500;
}


/* epidemiology */

.table-list th {
	border-bottom: 1px solid #ffffff !important;
	border-right: 1px solid #ffffff !important;
	font-size: 15px;
	font-weight: 700;
	padding: 10px 20px;
	text-align: center;
}
.table-list td {
	border: 1px solid #8d8c8c75 !important;
	background: #f1f1f1 !important;
	font-family: 'Lato', sans-serif;
	font-size: 13px;
	color: #666666 !important;
	padding: 10px 20px;
}
.table-list thead th {
	padding: 15px 20px;
	text-align: center;
}
.table-list tr th {
	background: #f1f1f1 !important;
	border: 1px solid #8d8c8c75 !important;
}


.left-menu {
    min-height: 100%;
    padding: 30px 10px;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    border: 1px solid #ccc;
}
.label i{
	font-size: 17px;
	color: #39b10a;
}
.left-menu h2 {
    position: relative;
    color: #30455c;
    font-size: 17px;
	text-align: center;
}
.left-menu .tabordion {
	position: relative;
	width: 100%;
	color: #30455c;
	margin: 0;
}
.left-menu .tabordion section {
	display: block;
	width: 100%;
	left: 0;
}
.left-menu .tabordion section input[name=sections] {
	left: -9999px;
	position: absolute;
	top: -9999px;
}
.left-menu .tabordion section input[name=sections]:checked + .label {
    background: #838080;
    color: #fbfbfb;
    font-size: 12px;
    width: 33%;
}
.left-menu .tabordion section input[name=sections]:checked ~ article {
    display: block;
    background: #f5f5f5a3;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}
.left-menu .tabordion section .label {
	background: rgba(220, 231, 235, 0.5);
	color: #1e1e1e;
	cursor: pointer;
	display: block;
	font-size: 12px;
	transition: background 0.3s ease-in-out;
	padding: 10px;
	position: relative;
	width: 100%;
	z-index: 100;
}
.left-menu .tabordion section article {
	display: none;
	left: 0;
	width: 100%;
	padding:1em;
	position: relative;
	top: 0;
}
.left-menu .tabordion section article p {
	margin-bottom: 1em;
}
.left-menu .tabordion section article:after {
	background-color: transparent;
	bottom: 0;
	content: "";
	display: block;
	left: -229px;
	position: absolute;
	top: 0;
	width: 220px;
	z-index: 1;
}

@media all and (min-width: 768px) {
	.left-menu .tabordion {
		width: 80%;
		color: #30455c;
	}
	.left-menu .tabordion section .label {
		background: rgb(135 133 133 / 26%);
		/* border-left: 1px solid #22bec6; */
		/* padding: 1em 2.5%; */
		width: 33%;
	}
	.left-menu .tabordion section article {
		position: absolute;
		width: 90%;
		left: 35.5%;
	}
}

.pdf-btn {
    text-align: center;
	padding: 15px;
}
.pdf-list {
    padding: 15px;
    font-size: 15px;
}



#linechartContainer{
	height:450px;
}

.axis path,
.axis line
{
	fill:none;
	stroke:black;
	shape-rendering: crispEdges;
}

.axis text
{
	font-family : "Avenir Next";
	font-size:11px;
}


/* datble tabs section  */


.download-files {
	background: #dedfe3;
	color: #000;
	padding: 15px 25px;
	border-radius: 5px;
	font-size: 15px;
	display: flex;
	column-gap: 15px;
	align-items: center;
}
.file-download {
	margin-top: 15px;
	display: flex;
	justify-content: center;
}
.download-files i{
	font-size: 17px;
    color: #39b10a;
}
/* select dropdown checkbox */
/* Center the loader on the screen */
/* Overlay covering the whole page */
#loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Light black with transparency */
    display: none; /* Hidden by default */
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;
}

/* Loader spinner */
#loader {
    border: 8px solid #f3f3f3; /* Light gray background */
    border-top: 8px solid #3498db; /* Blue spinner */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
}

/* Spin animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.dropdown-container {
	position: relative;
	width: 100%;
	/* margin-bottom: 30px; */
}
.sec{padding: 15px 10px;border: 1px solid #e3e3e3;margin: 0px;}
.dropdown-container .dropdown-selected {
	border: 1px solid #a19f9f;
	padding: 5px 12px;
	border-radius: 6px;
	cursor: pointer;
	min-height: 40px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 2px;
	position: relative;
	overflow: hidden;
}
.form-select {
	border: 1px solid #a19f9f;
	padding: 5px 12px;
	border-radius: 6px;
	min-height: 40px;
}

.dropdown-container .dropdown-selected::after {
	content: '▼';
	position: absolute;
	right: 10px;
	font-size: 12px;
	color: #3e3d3d;
	pointer-events: none;
}

.dropdown-container .dropdown-placeholder {
	color: #4a4747;
}

.dropdown-container .selected-tag {
	background-color: #007bff;
	color: white;
	padding: 4px 8px;
	border-radius: 5px;
	display: flex;
	align-items: center;
	font-size: 12px;
	align-items: center;
}

.dropdown-container .selected-tag .remove-tag {
	margin-left: 6px;
	cursor: pointer;
	font-weight: bold;
}

.dropdown-container .dropdown-list {
	position: absolute;
	top: 105%;
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 6px;
	box-shadow: 0 4px 6px rgba(0,0,0,0.1);
	z-index: 100;
	display: none;
	max-height: 220px;
	overflow-y: auto;
	padding: 10px;
}
.dropdown-container .dropdown-search-wrapper {
	position: relative;
}
.dropdown-container .dropdown-search {
	width: 100%;
    padding: 4px 8px 4px 28px;
    margin-bottom: 8px;
    border: 1px solid #a39c9c;
    border-radius: 25px;
    background: #F2F2F2;
}
.dropdown-container .search-icon {
	position: absolute;
    left: 9px;
    top: 41%;
    transform: translateY(-50%);
    font-size: 13px;
    color: #554949;
}
.dropdown-container .dropdown-item {
	margin: 5px 0;
	padding: 0px;
}

.dropdown-container .dropdown-item label {
	font-size: 14px;
    cursor: pointer;
    color: #424242;
    font-weight: normal;
}
.dropdown-container .dropdown-item label strong{
	color: #1d1b1b;
    font-weight: 700;
}

.dropdown-container input[type="checkbox"] {
	margin-right: 8px;
}


.indication-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px;
    max-width: 550px;
    /* margin: 20px auto; */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    font-family: Arial, sans-serif;
}

.indication-card h4 {
    font-size: 15px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}

.indication-card h4::before {
    content: "📋";
    margin-right: 8px;
    font-size: 16px;
}

.indication-divider {
    border: 0;
    border-top: 2px solid #3498db;
    margin: 0 0 20px 0;
}

.indication-option {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 8px 10px;
    border: 1px solid #dcdfe3;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.indication-option:hover {
    background: #f0f6ff;
    border-color: #3498db;
}

.indication-option input[type="radio"] {
    margin-right: 10px;
    accent-color: #3498db;
}
.indication-option input[type="checkbox"] {
    margin-right: 10px;
    accent-color: #3498db;
}

.no-list {
    color: #e74c3c;
    font-weight: bold;
    text-align: center;
    margin-top: 10px;
}
.right-side-table {
	margin-left: 1%;
	transition: margin-left 0.3s ease;
}

.right-side-table.with-sidebar {
	margin-left: 23%; /* default desktop */
}

/* Tablet */
@media (max-width: 1024px) {
	.right-side-table.with-sidebar {
		margin-left: 20%;
	}
}

/* Mobile */
@media (max-width: 768px) {
	.right-side-table.with-sidebar {
		margin-left: 0; /* stack below modal or full width */
	}
}

ul.menu {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	list-style: none;
	padding: 0;
	margin: 0;
	justify-content: center;
}

ul.menu li a {
	display: block;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
	padding: 13px 30px;
	font-size: 15px;
	font-weight: bold;
	color: #000;
	text-decoration: none;
	transition: transform 0.2s, box-shadow 0.2s;
	min-width: 190px;
	text-align: center;
}

ul.menu li a:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 12px rgba(0,0,0,0.15);
	color: #007bff; /* optional hover color */
}
.dtable_bg{background:#e2e2e2;color: #000;text-transform: uppercase;}
.cat_table {width: 100%;border-collapse: collapse;}
.cat_table th, .cat_table td {min-width: 100px;text-align: right;vertical-align: middle;white-space: nowrap;padding:8px 10px;}.cat_table th:first-child,.cat_table td:first-child {min-width: 200px;text-align: left;}
 .cat_table tbody tr:hover {
	background-color: #9e9b9b4d;
} 
.cat_table tbody td {
	position: relative;
}
.cat_table {
	border-collapse: collapse;
	overflow: hidden;
	color: #000;
	text-transform: capitalize;
}
 .cat_table tbody td:hover:before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -9999px;
	bottom: -9999px;
	background-color: #9e9b9b4d;
	z-index: -1;
} 
.overview_dashboard {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
}

.ocard {
	border-radius: 16px;
	padding: 24px;
	color: #111827;
	position: relative;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 4px 12px rgb(0 0 0 / 23%);
	transition: all 0.3s ease;
}

.ocard:hover {
	transform: translateY(-8px);
	box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}

.ocard h3 {
	font-size: 13px;
	font-weight: 600;
	margin: 0;
	opacity: 0.85;
	color: #000;
	width: 85%;
}

.ocard .value {
	font-size: 25px;
	font-weight: 700;
	margin: 12px 0;
}

.ocard p {
	font-size: 13px;
	margin: 0;
	opacity: 0.75;
	color: #000;
}

.ofooter {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 16px;
}

.trend {
	font-size: 13px;
	font-weight: 600;
	padding: 4px 12px;
	border-radius: 14px;
	transition: all 0.3s ease;
}

.up { color: #059669; background: #d1fae5; }
.down { color: #dc2626; background: #fee2e2; }

.ocard:hover .trend.up {
	background: #bbf7d0;
	color: #047857;
}

.ocard:hover .trend.down {
	background: #fecaca;
	color: #b91c1c;
}

.vs {
	font-size: 13px;
	color: #6b7280;
	font-weight: 500;
}

/* Icon styling */
.oicon {
	position: absolute;
	top: 18px;
	right: 18px;
	font-size: 22px;
	padding: 10px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.6);
	transition: transform 0.3s ease;
}

.ocard:hover .oicon {
	transform: rotate(10deg) scale(1.1);
}

/* Background colors */
.blue { background: #eef6ff; }
.green { background: #effff5; }
.pink { background: #ffe4f0; }
.teal { background: #e0f7f7; }
.purple { background: #fdf4ff; }
.lavender { background: #f5f3ff; }
.red { background: #fff1f2; }
.yellow { background: #fffbe6; }
.orange { background: #f39c12; }
.cyan { background: #e0f7ff; }
.brown { background: #f5e6d3; }
.dark { background: #e8eaf6; }
.darkblue { background: #5842c9;}
.black { background: #353535;}

/* Different icon colors */
.blue .oicon { color: #2563eb; }
.green .oicon { color: #059669; }
.pink .oicon { color: #db2777; }
.teal .oicon { color: #0d9488; }
.purple .oicon { color: #7c3aed; }
.lavender .oicon { color: #6d28d9; }
.red .oicon { color: #dc2626; }
.yellow .oicon { color: #d97706; }
.orange .oicon { color: #ea580c; }
.cyan .oicon { color: #0284c7; }
.brown .oicon { color: #92400e; }
.dark .oicon { color: #1e3a8a; }
/* Regional */
.region_ctr {
	gap: 20px;
	max-width: 1200px;
	margin: auto;
}
.region_ctr_dvi {
	display: flex;
	gap: 20px;
}
.region_ctr .card {
	background: #fff;
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 2px 8px rgb(0 0 0 / 22%);
	flex: 1;
}
.region_ctr .card h3 {
	color: #00a049;
	margin: 0;
	font-size: 15px;
}
.region_ctr .card p {
	margin: 4px 0 20px;
	font-size: 13px;
	color: #555;
}
.region_ctr .region-box {
	background: #fff;
	border-radius: 12px;
	padding: 15px;
	margin-bottom: 15px;
	box-shadow: 0 0px 6px rgb(8 0 0 / 33%);
}
.region_ctr .arow {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 6px;
}
.region_ctr .region-title {
	font-weight: bold;
	font-size: 15px;
	display: flex;
	align-items: center;
}
.region_ctr .dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	display: inline-block;
	margin-right: 8px;
}
.region_ctr .patients {
	font-size: 13px;
	color: #555;
}
.region_ctr .growth {
	font-size: 13px;
	color: #00a049;
}
.region_ctr .per-1000 {
	font-weight: bold;
	font-size: 20px;
	color: #333;
	text-align: right;
}
.region_ctr .per-label {
	font-size: 12px;
	color: #666;
	text-align: right;
}
.region_ctr .countries {
	font-size: 12px;
    color: #888;
    text-align: right;
    border: none;
    background: transparent;
}
/* Table wrapper */
.custom-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	background: #fff;
	border-radius: 8px;
	overflow: hidden;
	margin-top: 15px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	table-layout: fixed; /* allow custom widths */
}

/* Column widths */
.col-definition {
	width: 32%; /* wider Market Definition column */
}
.col-countries {
	width: 68%;
}

/* Header row */
.custom-table thead {
	background: linear-gradient(90deg, #002d62, #00509e);
	color: #fff;
}

/* Table cells */
.custom-th, .custom-td {
	padding: 12px 15px;
	text-align: left;
}

.custom-td {
	border-top: 1px solid #eee;
	line-height: 1.5em;
	font-size: 14px;
}

/* Table rows */
.custom-tr {
	transition: background 0.3s ease;
}

/* .custom-tr:hover {
	background: #f0f4ff;
} */

/* Responsive styles */
@media (max-width: 768px) {
	.custom-table,
	.custom-table thead,
	.custom-table tbody,
	.custom-tr,
	.custom-th,
	.custom-td {
        display: block;
        width: 100% !important;
	}
	
	.custom-table thead {
        display: none; /* hide header on mobile */
	}
	
	.custom-tr {
        margin-bottom: 15px;
        border: 1px solid #ddd;
        border-radius: 10px;
        padding: 12px;
        background: #fff;
        box-shadow: 0 3px 8px rgba(0,0,0,0.05);
        transition: transform 0.2s ease;
	}
	
	.custom-tr:hover {
        transform: translateY(-3px);
	}
	
	.custom-td {
        border: none;
        display: block;
        padding: 8px 5px;
        text-align: left !important;
        white-space: normal;        /* wrap text */
        word-wrap: break-word;
        overflow-wrap: break-word;
	}
	
	.custom-td::before {
        content: attr(data-label);
        font-weight: bold;
        color: #002d62;
        display: block;
        margin-bottom: 5px;
	}
}
/* 🔹 Responsive: stack left-right vertically on small screens */
@media (max-width: 600px) {
	.region_ctr{display: block;}
    .region_ctr .arow {
        flex-direction: column;
        align-items: flex-start;
	}
	.region_ctr .arow > div {
        width: 100%;
        margin-top: 4px;
	}
	.region_ctr .per-1000,
	.region_ctr .per-label,
	.region_ctr .countries {
        text-align: left; /* align neatly under left side */
	}
}

/* Right Panel (Chart) */
.region_ctr #chart {
	width: 100%;
	height: 300px;
}
.region_ctr .legend-list {
	margin-top: 15px;
	font-size: 14px;
}
.region_ctr .legend-item {
	display: flex;
	justify-content: space-between;
	margin: 4px 0;
}
.region_ctr.legend-label {
	display: flex;
	align-items: center;
	gap: 6px;
}
.region_ctr .dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	display: inline-block;
}
.patient_journey h2 {
    font-size: 20px;
    font-weight: 600;
    color: #0445b6;
    margin: 13px 0px 7px;
    display: inline-block;
}
.patient_journey .card {
	background: #fff;
	border-radius: 12px;
	padding: 20px 25px;
	border: 1px solid #d3cece !important;
	margin-top: 20px;
}

/* ✅ New Flex container for Left & Right */
.patient_journey .card-body {
	display: flex;
	justify-content: space-between;
	gap: 30px;
	flex-wrap: wrap;
	padding: 0px;
}

.patient_journey .left-container {
	flex: 2;
	min-width: 600px;
}

.patient_journey .right-container {
	flex: 1;
	min-width: 260px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Funnel Header */
.funnel-header-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 25px;
}

.funnel-header {
	font-size: 15px;
	font-weight: 600;
	color: #0445b6;
}

.efficiency {
	font-size: 20px;
	font-weight: 600;
	color: #1aa357;
	text-align: right;
}

.efficiency .text {
	display: block;
	font-size: 12px;
	font-weight: normal;
	color: #6f7471;
}

/* Funnel items */
.funnel-item {
	background: #F9FAFC;
	border: 1px solid #e1e4eb;
	border-radius: 10px;
	padding: 15px 18px;
	margin-bottom: 20px;
}

.funnel-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.funnel-info {
	display: flex;
	gap: 12px;
	align-items: center;
}

.patient_journey .icon {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	color: #fff;
	flex-shrink: 0;
}

.icon-black { background: #353535; }
.icon-blue { background: #1976d2; }
.icon-green { background: #1aa357; }
.icon-red { background: #e74c3c; }
.icon-orange { background: #f39c12; }
.icon-purple { background: #9b59b6; }
.icon-darkblue { background: #5842c9; }

.label {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 2px;
}

.patients {
	font-size: 13px;
	color: #666;
}

.bar-container {
	background: #b2b4b9;
	border-radius: 10px;
	height: 20px;
	width: 100%;
	position: relative;
	overflow: hidden;
}

.bar {
	height: 100%;
	border-radius: 10px;
}

.bar.gray { background: #d1d5db; }
.bar.blue { background: #1976d2; }
.bar.green { background: #1aa357; }
.bar.red { background: #e74c3c; }
.bar.yellow { background: #f2c94c; }
.bar.purple { background: #9b59b6; }

.bar-label {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    font-weight: 600;
    color: #fff; /* white text */

    /* black border effect */
    /* text-shadow: 
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000; */
}

.stats {
	font-size: 15px;
	font-weight: 600;
	color: #333;
	text-align: right;
}

.dropoff {
	font-size: 12px;
	color: #e74c3c;
	font-weight: 500;
	margin-left: 5px;
	display: block;
}

/* Side Panels */
.panel {
	padding: 15px 20px;
	border-radius: 12px;
	font-size: 14px;
	box-shadow: 0 2px 6px rgb(0 0 0 / 28%);
}

.panel.red { background: #ffeaea; color: #c93030; }
.panel.yellow { background: #fff7d6; color: #b77900; }
.panel.blue { background: #eaf4ff; color: #1a50e0; }
.panel.green { background: #e9f9ef; color: #1aa357; }

.panel h3 {
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 8px;
}

.panel h3 .dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: inline-block;
}

.panel.red h3 .dot { background: #c93030; }
.panel.yellow h3 .dot { background: #b77900; }
.panel.blue h3 .dot { background: #1a50e0; }
.panel.green h3 .dot { background: #1aa357; }

.panel .big {
	font-size: 26px;
	font-weight: 700;
	margin: 5px 0;
}

.panel p {
	margin: 0;
	font-size: 13px;
}

.bar-container-rgt {
	background: #e5e7eb;
	border-radius: 10px;
	height: 10px;
	margin-top: 15px;
	overflow: hidden;
	margin-bottom: 10px;
}
.pmr_insight h2 {
	margin-bottom: 20px !important;
    font-size: 20px;
    color: #000;
    margin: 16px 0px;
}

/* ====== Layout ====== */
.pmr-container {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 20px;
}

.pmr-card {
	flex: 1;
	min-width: 300px;
	background: #f0f0f0;
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	border: 1px solid #e5e5e5;
}

/* ====== Header Section ====== */
.pmr-card-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 5px;
}

.pmr-region-title {
	font-size: 16px;
	font-weight: 600;
	color: #000;
}

.pmr-adherence {
	text-align: right;
	line-height: 1.2;
}

.pmr-adherence .pmr-percent {
	font-size: 22px;
	font-weight: bold;
	color: #1a73e8;
	display: block;
}

.pmr-adherence .pmr-label {
	font-size: 12px;
	font-weight: 500;
	color: #666;
	display: block;
	line-height: 27px;
}

/* ====== Content ====== */
.pmr-sub-title {
	font-weight: bold;
	margin-bottom: 8px;
	font-size: 15px;
}

.pmr-barriers-title {
	color: #d93025;
}

.pmr-enablers-title {
	color: #056608;
}

.pmr-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 15px;
}

.pmr-tag {
	padding: 6px 12px;
	border-radius: 6px;
	font-size: 14px;
	display: inline-block;
}

.pmr-tag.pmr-barrier {
	background: #fde0e0;
	color: #a33;
}

.pmr-tag.pmr-enabler {
	background: #d8f9d8;
	color: #056608;
}
/* Responsive: stack on small screens */
@media (max-width: 768px) {
	.pmr-container {
        flex-direction: column;
	}
}
/* ====== pmr_insight Footer ====== */
.pmr-footer {
	font-size: 13px;
	color:#4d4c4c;
	border-top: 1px solid #c8c3c3;
	padding-top: 10px;
	margin-top: 10px;
}
@media(max-width: 1024px) {
	.card-body {
        flex-direction: column;
	}
	.left-container, .right-container {
        min-width: 100%;
	}
}
.ds-card {
	background: #F0F0F0;
	border: 1px solid #e0e6ed;
	border-radius: 10px;
	padding: 20px 25px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.05);
	margin: auto;
}

.ds-card-header {
	display: flex;
	align-items: center;
	font-weight: 600;
	font-size: 18px;
	color: #1a1a1a;
	margin-bottom: 20px;
}

.ds-card-header-icon {
	margin-right: 10px;
	color: #4a90e2;
	font-size: 20px;
}

.ds-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
}

.ds-section {
	margin-bottom: 15px;
}

.ds-section-title {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 10px;
	color: #1f3b57;
}

.ds-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.ds-list-item {
	font-size: 14px;
	color: #333;
	margin-bottom: 6px;
	position: relative;
	padding-left: 15px;
}

.ds-list-item::before {
	content: "•";
	position: absolute;
	left: 0;
	color: #4a90e2;
	font-weight: bold;
}

@media (max-width: 768px) {
	.ds-content {
        grid-template-columns: 1fr;
	}
}

.wrap {
	max-width:1150px;
	margin:22px auto;
	padding:0 18px;
}

/* grid */
.age-gender .dashboard {
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap:18px;
	align-items:stretch; /* ✅ force same height */
}

/* card */
.age-gender .card {
	background: var(--card);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
	border: 1px solid #f0f0f3 !important;
	display:flex;
	flex-direction:column; /* ✅ stretch chart area */
}

.age-gender .card .card-top {
	padding: 16px 18px;
	display:flex;
	flex-direction:column;
	gap:6px;
}

.card.age .card-top {
	background: linear-gradient(180deg, rgba(251,243,254,1) 0%, rgba(255,255,255,1) 100%);
}
.card.risk .card-top {
	background: linear-gradient(180deg, rgba(255,250,240,1) 0%, rgba(255,255,255,1) 100%);
}

.card-top .title-row {
	display:flex;
	gap:10px;
	align-items:center;
}

.age-gender .title {
	margin:0;
	font-weight:600;
	font-size:16px;
}
.age-gender .title.age { color:#7b4bd6; }
.age-gender .title.risk { color:#ff6a00; }

.age-gender .subtitle {
	font-size:12px;
	color:var(--muted);
	margin-left:2px;
}

/* body area inside card */
.age-gender .card-body {
	padding: 18px;
	flex:1; /* ✅ ensures equal height inside */
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
}

.age-gender .chart {
	width:100%;
	height:300px; /* ✅ equal chart height */
	min-height:300px;
	flex-shrink:0;
}

/* legend centered under left chart */
.age-gender .legend-center {
	display:flex;
	justify-content:center;
	gap:24px;
	align-items:center;
	margin-top:14px;
	font-size:13px;
	color:#222;
}
.age-gender .legend-item {
	display:flex;
	gap:8px;
	align-items:center;
}
.age-gender .dot {
	width:12px;
	height:12px;
	border-radius:50%;
	display:inline-block;
}
.age-gender .male { background:#3399ff; }
.age-gender .female { background:#ff3366; }

/* right legend */
.age-gender .legend-grid {
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap:10px 28px;
	margin-top:18px;
	font-size:13px;
	color:#222;
	align-items:center;
}

.age-gender .legend-row {
	display:flex;
	align-items:center;
	gap:10px;
}

.age-gender .legend-label { color:#222; }
.age-gender .legend-value { margin-left:auto; font-weight:600; color:#111; }

.age-gender .muted { color:var(--muted); font-size:12px; }

@media (max-width:880px){
	.age-gender.dashboard { grid-template-columns: 1fr; }
	.age-gender.chart { height:260px; min-height:260px; }
}
.disease .header {
	font-size: 20px;
	font-weight: bold;
	color: #1d9f55;
	margin-bottom: 10px;
}
.disease .sub-header {
	font-size: 13px;
	color: #666;
	margin-bottom: 20px;
}

/* grid */
.disease .dashboard {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	align-items: stretch;
}

/* card */
.disease .card {
	background: var(--card);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
	border: 1px solid #f0f0f3 !important;;
	display: flex;
	flex-direction: column;
}

.disease .card .card-top {
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.disease .card.age .card-top {
	background: linear-gradient(180deg, rgba(251,243,254,1) 0%, rgba(255,255,255,1) 100%);
}
.disease .card.risk .card-top {
	background: linear-gradient(180deg, rgba(255,250,240,1) 0%, rgba(255,255,255,1) 100%);
}

.disease .card-top .title-row {
	display: flex;
	gap: 10px;
	align-items: center;
}

.disease .title {
	margin: 0;
	font-weight: 600;
	font-size: 16px;
}
.disease .title.age { color: #7b4bd6; }
.disease .title.risk { color: #ff6a00; }

.disease .subtitle {
	font-size: 12px;
	color: var(--muted);
	margin-left: 28px; /* ✅ aligned with icon */
}

#lineChart, #barChart {
	width: 100%;
	height: 300px;
}

.disease .stats {
	display: flex;
	justify-content: space-between;
	margin-top: 15px;
	gap: 15px;
	padding: 0 18px 18px 18px;
}
.disease .stat-box {
	flex: 1;
	padding: 12px;
	border-radius: 6px;
	text-align: center;
	font-weight: bold;
}
.disease .blue-box {
	background: #e6f0ff;
	color: #007bff;
}
.disease .red-box {
	background: #ffe6e6;
	color: #d9534f;
}
.disease .note {
	font-size: 12px;
	color: #555;
	margin: 10px 0 16px;
	text-align: center;
}
.full-width-container {
    width: 100%;
    margin: 0 auto; /* Centers the container while maintaining full-width behavior */
    background: #fff;
    padding: 0px 0px 0px;
    border-radius: 8px;
}

.full-width-container h2 {
    color: #333;
    text-align: left; /* Aligns the heading to the left */
	font-size: 15px;
	text-transform: uppercase;
}

.indicator-wrapper {
    display: flex;
    flex-direction: column; /* Stacks children vertically */
}

.indicator-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap; /* Allows list items to wrap to the next line */
    gap: 10px; /* Adds space between list items */
}

.indication-option {
    display: block;
    padding: 10px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    border-radius: 4px;
    width: auto;
}

.indication-option:hover {
    background-color: #e9e9e9;
}

input[type="checkbox"] {
    margin-right: 10px;
}

.select-all-label {
    border-bottom: 2px solid #ddd;
    margin-bottom: 15px;
    padding-bottom: 15px;
    width: 100%; /* Ensures the "Select All" section takes full width */
}

.incidence_graph{
	margin:5px auto;
	padding:12px;
}

.incidence_graph .row{
	display:flex;
	gap:32px;
	align-items:stretch;
	justify-content:space-between;
	flex-wrap:wrap;
}

.chart-card {
	background:#fff;
	padding: var(--panel-pad);
	border-radius: var(--card-radius);
	flex:1 1 48%;
	min-width:300px;
	box-sizing:border-box;
	position:relative;
	
	box-shadow: 
	0 2px 6px rgba(59,130,246,0.15),
	0 6px 12px rgba(0,0,0,0.08),
	0 12px 24px rgba(59,130,246,0.10);
}

.chart-title{
	text-align:center;
	font-size:16px;
	color:#000;
	margin:6px 0 10px;
	font-weight:600;
}

.y-label{
	position:absolute;
	left:16px;
	top:48px;
	bottom:38px;
	width:40px;
	display:flex;
	align-items:center;
	justify-content:center;
	transform: translateX(-12px);
	writing-mode:sideways-lr;
	text-orientation:mixed;
	color:#000;
	font-size:13px;
}

.chart-area{
	padding-left:15px;
	height:300px;
}

.incidence_graph .source{
	font-size:12px;
	color:#000;
	margin-top:8px;
	margin-left:6px;
}

.gap-2{gap: .8rem !important;}
.tag {
    padding: 10px 18px;
    background: #fff;
    border-radius: 25px;
    font-size: 0.9rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, background 0.3s ease;
    cursor: default;
    width: 250px;
	gap: 8px !important;
}

.cloud {
    /*background-color: #e6f0ff;*/
    color: #2E86DE;
    border: 1px solid #2E86DE;
}
.cloud:hover {
	transform: scale(1.05);
	background: #2E86DE;
	color: #fff;
}

.indications,
.indications a {
    color: #7DD657;
}

.indications {
    border: 1px solid #7DD657;
}
.indications:hover,
.indications:hover a {
    transform: scale(1.05);
    background: #7DD657;
    color: #fff;
}
.countries {
    /*background-color: #f3e8ff;*/
    color: #FF914D;
    border: 1px solid #FF914D;
}
.countries:hover {
	transform: scale(1.05);
	background: #FF914D;
	color: #fff;
}
.text-muted {
    font-family: "Open Sans", sans-serif;
    font-size: 18px;
    font-weight: 500;
}

.stat-box {
    background-color: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    text-align: center;
    transition: transform 0.2s;
}

.stat-box:hover {
    transform: translateY(-5px);
}

.stat-box .value {
    font-size: 24px;
    font-weight: bold;
}

.btn-blue {
    background-color: #345bff;
    color: white;
}

.btn-blue:hover {
    background-color: #1e3dc9;
    color: white;
}
.button-method:hover{
    color: #fff !important;
}

.btn-custom {
    font-weight: 500;
    padding: 10px 20px;
    min-width: 180px;
    text-align: center;
    display: inline-block;
}

/* ******************************* */
/* ******************************* */
/* ******************************* */
.coverage-card {
    border-radius: 12px;
    padding: 24px;
    background-color: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid #345bff63;
}
.text-muteds{
    font-family: "Open Sans", sans-serif;
    font-size: 13px;
    color: #4d4949;
    font-weight: 600;
}
.data-title h5{
    font-family: "Open Sans", sans-serif;
    font-size: 18px;
    font-weight: bold;
}
.data-list {
    background: #cccccc2b;
    padding: 6px;
    border-radius: 6px;
    font-family: "Open Sans", sans-serif;
    font-weight: bold;
    font-size: 15px;
    color: #000;
}
.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
}

.badge-pill {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 130px;   /* same width for all */
    height: 32px;       /* fixed height */
    padding: 0 10px;
    border-radius: 20px;
    background-color: #d0dbfdbf;
    color: #345bff;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

.summary-box {
    background: linear-gradient(to right, #eef4ff, #f5faff);
    border-radius: 12px;
    padding: 21px;
    border: 1px solid #345bff63;
}

.summary-box h2 {
    font-weight: 800;
    font-size: 27px;
}
.summary-box1 {
        background: linear-gradient(to right, #eef4ff, #f5faff);
    border-radius: 12px;
    padding: 15px;
    border: 1px solid #345bff63;
}

.summary-box1 h3 {
    color: #0445b6;
    font-size: 27px;
    margin-top: 8px;
}
.summary-box1 h2 {
    font-weight: bold;
    font-size: 23px;
}
.desc-fix{
padding-left: 0 !important;
margin-left: 26px;
}
@media (max-width: 576px) {
    .badge-pill {
		padding: 6px 6px;
        font-size: 11px;
		min-width: 110px;
	}
	
    .summary-box h2 {
		font-size: 1.5rem;
	} 
	.desc-fix{margin-left: 0px;}
	.data-list{font-size: 11px;}
} 

.pie-chart {
    display: flex;
    align-items: center;
    justify-content: center;
}

#chart {
    height: 450px;
    width: 100%;
}

@media (max-width: 767px) {
    #chart {
		height: 55vw;
		aspect-ratio: 1 / 1;
		max-width: 100%;
	}
}

@media (max-width: 480px) {
    #chart {
		height: 55vw;
		max-width: 100%;
	}
}

@media (max-width: 360px) {
    #chart {
		height: 70vw;
	}
}

.coverage-box {
    border: 1px solid #345bff63;
    border-radius: 12px;
    padding: 30px;
    max-width: 100%;
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.coverage-box h4 {
    font-family: "Open Sans", sans-serif;
    font-size: 18px;
    font-weight: 700;
}

.coverage-box p {
    margin-bottom: 25px;
    font-size: 13px;
    color: #4d4949;
    font-weight: 600;
}

.market-group {
    margin-bottom: 23px;
}

.market-group h6 {
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 14px;
}

.badge-country {
    display: inline-block;
    background-color: #f1f1f1;
    color: #000;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    margin: 5px 5px 0 0;
}

.progress {
    height: 8px;
    border-radius: 4px;
    background-color: #e0e0e0;
    margin-top: 5px;
}

.progress-bar {
    background-color: #787676;
}

.coverage-footer {
    background: linear-gradient(to right, #f0fff4, #f0f7ff);
	border: 1px solid #a4edba;
	border-radius: 12px;
    padding: 24px;
	text-align: center;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.coverage-footer h2 {
    font-weight: 800;
    font-size: 27px;
    color: #10b143;
}

.coverage-footer p {
    margin: 0;
    font-size: 1rem;
    color: #555;
}
.chart-box {
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 1px 8px rgba(0,0,0,0.04);
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}
.info-box {
    border-radius: 12px;
    padding: 25px 15px;
    text-align: center;
    border: 1px solid transparent;
}

.indications-box {
    background-color: #f9f3fe;
    border-color: #e8d6ff;
    color: #8f00ff;
}

.markets-box {
    background-color: #eef5ff;
    border-color: #cce0ff;
    color: #2967ff;
}

.info-number {
    font-size: 28px;
    font-weight: 700;
}

.info-text {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-top: 5px;
    font-family: "Open Sans", sans-serif;
}

.info-icon {
    font-size: 24px;
    margin-bottom: 5px;
}
.section-box {
    border: 1px solid #e4e9f0;
    border-radius: 10px;
    padding: 30px;
    background-color: #ffffff;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}
.section-title {
    font-weight: 600;
    font-size: 20px;
}
.section-subtitle {
    color: #6c757d;
    font-size: 15px;
    margin-bottom: 25px;
    font-family: "Open Sans", sans-serif;
}
.list-box-blue {
    background-color: #f0f6ff;
    padding: 14px 20px;
    border-radius: 8px;
    margin-bottom: 10px;
}
.list-box-green {
    background-color: #e9f9ee;
    padding: 14px 20px;
    border-radius: 8px;
    margin-bottom: 10px;
}
.list-title {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 2px;
}
.list-description {
    font-size: 13px;
    color: #555;
}
.blue-header {
    color: #2967ff;
}
.green-header {
    color: #20b25c;
}
.icon {
    font-size: 16px;
    margin-right: 8px;
    color: #2967ff;
}
.icon-green{
    color: #20b25c;
    font-size: 16px;
    margin-right: 8px;
}

.purple-header {
    color: #a020f0;
    font-weight: bold;
}

.orange-header {
    color: #e67e22;
    font-weight: bold;
}

.list-box-purple {
    background-color: rgba(160, 32, 240, 0.05);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 10px;
}

.list-box-orange {
    background-color: rgba(230, 126, 34, 0.07);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 10px;
}


.list-description {
    font-size: 13px;
    color: #666;
}

.icon-purple {
    color: #a020f0;
    margin-right: 8px;
}

.icon-orange {
    color: #e67e22;
    margin-right: 8px;
}

.section-wrapper {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 24px;
    background-color: #fff;
    margin: 20px auto;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}


.info-value {
    color: #2967ff;
    font-weight: bold;
    font-size: 18px;
    background: #2967ff21;
    width: 40%;
    text-align: center;
    border-radius: 6px;
    margin: 7px auto;
}

.data-title {
    font-size: 20px;
    font-weight: 700;
}

.icones{
	color: #000;
	font-size: 20px;
}

.left-border {
    border: 1px solid #dce7f9;
    border-radius: 12px;
    background: #fff;
}

.right-border {
    border: 1px solid #d2f4e2;
    border-radius: 12px;
    background: #fff;
}

.green-box {
    background-color: #e9fff1;
    border: 1px solid #c7efda;
    border-radius: 12px;
    padding: 20px;
    height: 100%;
    text-align: center;
}

.icons {
    font-size: 24px;
    
}

.blue-btn {
    background-color: #2967ff;
    color: white;
    border-radius: 8px;
    padding: 8px 16px;
    font-weight: 500;
    font-size: 14px;
    border: none;
}
.EU{
    font-size: 20px;
    font-weight: bold;
}
.card-box {
    background-color: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    text-align: center;
    height: 100%;
}
.card-box-h{
    font-size: 17px;
    color: #000;
    font-family: "Open Sans", sans-serif;
    font-weight: 500;
}

.expert-card {
    border-radius: 15px;
    padding: 20px;
    min-height: 115px;
    transition: 0.3s ease-in-out;
}
.card-kol {
    background-color: #eaf1fc;
    border: 1px solid #c5d8f5;
}
.card-payers {
    background-color: #edfdf4;
    border: 1px solid #c4f0d2;
}
.card-economists {
    background-color: #f6f0fe;
    border: 1px solid #e4d4fd;
}
.card-researchers {
    background-color: #fff4e5;
    border: 1px solid #ffd4a3;
}
.card-epidemiologists {
    background-color: #e8fafd;
    border: 1px solid #b8ecf6;
}
.card-industry {
    background-color: #fff0f0;
    border: 1px solid #ffc3c3;
}
.expert-icon {
    font-size: 30px;
    margin-right: 8px;
}
.expect-icons-text h6{
    font-size: 14px;
	
}

.specialties {
    display: none;
    margin-top: 10px;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.card-payers:hover .specialties, .card-economists:hover .specialties, .card-researchers:hover .specialties, .card-epidemiologists:hover .specialties, .card-industry:hover .specialties {
    display: flex;
    transition: 0.8s ease-in-out;
}
.card-kol:hover .specialties {
    display: flex;
    transition: 0.8s ease-in-out;                            
	
}
.badge-spec {
    border: 1px solid #d0d0d0;
    border-radius: 20px;
    padding: 5px 10px;
    font-size: 13px;
    font-family: "Open Sans", sans-serif;
}
.m-top{ margin-top: 20%}
.heading {
font-size: 17px;
font-weight: 600;
margin-bottom: 12px;
color: #0445b6;
}
@media (max-width: 576px) {
    .expert-card {
		min-height: auto;
		padding: 15px;
	}
	.heading {font-size: 13px;}
	.coverage-card{padding: 0px 19px 19px;}
}

.feature-card {
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
    height: 100%;
	
}
.feature-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    
}
.feature-card h5 {
    font-weight: 600;
	
}
.feature-card ul {
    list-style: none;
	
    padding: 0;
    margin: 0;
}
.feature-card ul li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}
.text-pink{
    color: #ff2f92;                            
}
.feature-card ul li svg {                    
    margin-right: 10px;                         
}
.section-header {
    font-weight: 700;
    text-align: center;                   
    margin-bottom: 40px;                        
}
.top-buttons .btn {
    border-radius: 10px;               
    font-weight: 600;
    padding: 12px 25px;                       
}
.trial-section {
	background: linear-gradient(135deg, #0062ff, #5f27cd);
	color: #fff;
	border-radius: 16px;
	padding: 50px 20px;
	text-align: center;
	box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.15);
}

.trial-section h2 {
	font-size: 2.4rem;
	font-weight: 700;
}

.trial-section p {
	font-size: 1.5rem;
	margin-bottom: 30px;
}

.stats {
	font-size: 1.5rem;
	font-weight: 700;
	color: #0445b6;
}

.stats-desc {
	font-size: 1rem;
	color: #dbeafe;
}

.btn-trial {
	background: #fff;
	color: #0062ff;
	font-weight: 600;
	border-radius: 8px;
	padding: 10px 20px;
	margin: 10px auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.btn-trial i {
	color: #0062ff;
}

.note {
	margin-top: 20px;
	font-size: 1.2rem;
	color: #ddd;
}
.center_logo {
    width: clamp(180px, 20vw, 260px); /* responsive + controlled */
    max-width: 100%;
    height: auto;
    object-fit: contain;
}
@media (max-width: 1380px) {
    .coverage-box {
		padding: 20px;
	}
	
    .badge-country {
		font-size: 0.75rem;
		padding: 5px 10px;
	}
	
    .coverage-footer h2 {
		font-size: 2rem;
	}
    .m-top{ margin-top: 20%}
    
} 
@media (max-width: 1280px) {
    .coverage-box {
		padding: 20px;
	}
	
    .badge-country {
		font-size: 0.75rem;
		padding: 5px 10px;
	}
	
    .coverage-footer h2 {
		font-size: 2rem;
	}
    .m-top{ margin-top: 110px}
    
}
@media (max-width: 990px) {
    .coverage-box {
		padding: 20px;
	}
	
    .badge-country {
		font-size: 0.75rem;
		padding: 5px 10px;
	}
	
    .coverage-footer h2 {
		font-size: 2rem;
	}
    .m-top{ margin-top: 75px}
    .h2, h2 {
        font-size: calc(1rem + .9vw);
	}
    .text-muted{font-size: 14px;}
    .tag{font-size: 15px;height: 45px;}
    .stat-box .value{font-size: 20px;}
    .fa-2x {font-size: 1.5em;}
    .stat-box{padding: 20px 15px;}
}

@media (max-width: 770px) {
    .coverage-box {
		padding: 20px;
	}
	
    .badge-country {
		font-size: 0.75rem;
		padding: 5px 10px;
	}
	
    .coverage-footer h2 {
		font-size: 2rem;
	}
    .m-top{ margin-top: 75px}
    .h2, h2 {
        font-size: calc(1rem + .9vw);
	}
    .text-muted{font-size: 14px;}
    .tag{font-size: 15px;height: 45px;}
    .stat-box .value{font-size: 20px;}
    .fa-2x {font-size: 1.5em;}
    .stat-box{padding: 20px 15px;}
    .trial-section h2{font-size: 1.5rem;}
    .trial-section p{font-size: 1rem;}
    .fa-4x {font-size: 3em;}
    .stats{font-size: 2rem;}
    .note{font-size: 1rem;}
	.region_ctr_dvi {display: block;}
	.patient_journey .left-container{min-width: 100%;}
	.patient_journey .card{padding: 15px 15px;}

}
@media (max-width: 576px) {
    .coverage-box {
		padding: 20px;
	}
	
    .badge-country {
		font-size: 0.75rem;
		padding: 5px 10px;
	}
	.btn-custom{padding: 7px 20px;min-width: 100%;}
    .coverage-footer h2 {
		font-size: 1rem;
	}
    .m-top{ margin-top: 75px}
    .h2, h2 {
        font-size: calc(1rem + .9vw);
	}
    .text-muted{font-size: 14px;}
    .tag{font-size: 15px;height: 45px;}
    .stat-box .value{font-size: 20px;}
    .fa-2x {font-size: 1.5em;}
    .trial-section h2{font-size: 1.5rem;}
    .trial-section p{font-size: 1rem;}
    .fa-4x {font-size: 3em;}
    .stats{font-size: 1rem;}
    .note{font-size: 1rem;}
	.summary-box1 h2{font-size: 18px;}
	.region_ctr_dvi {display: block;}
	.patient_journey .left-container{min-width: 100%;}
	.patient_journey .card{padding: 15px 15px;}
}
@media (max-width: 400px) {
    .coverage-box {
		padding: 0px 20px 20px;
	}
	.btn-custom{padding: 7px 20px;min-width: 100%;}
    .badge-country {
		font-size: 0.75rem;
		padding: 5px 10px;
	}
	.data-title h5{font-size: 15px;}
	.coverage-box h4{font-size: 15px;}
    .coverage-footer h2 {
		font-size: 2rem;
	}
    .m-top{ margin-top: 75px}
    .h2, h2 {
        font-size: calc(.8rem + .9vw);
	}
    .text-muted{font-size: 14px;}
    .tag{font-size: 15px;height: 45px;}
    .stat-box .value{font-size: 20px;}
    .fa-2x {font-size: 1.5em;}
    
    .trial-section h2{font-size: 1.5rem;}
    .trial-section p{font-size: 1rem;}
    .fa-4x {font-size: 3em;}
    .stats{font-size: 2rem;}
    .note{font-size: 1rem;}
    
}

@media (max-width:880px){
	.incidence_graph .row{ gap:20px; }
	.chart-card{ flex-basis:100%; }
	.chart-area{ height:220px; }
}

.incidence_graph .note {
	margin-top:12px;
	color:#000;
	font-size:12px;
	text-align:left;
}
@media (max-width: 880px) {
	.disease .dashboard { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
	.cat_table th, .cat_table td {min-width: 80px;}
	.cat_table th:first-child,.cat_table td:first-child {min-width: 150px;}
}
/* Responsive */
@media (max-width: 768px) {
	ul.menu {
        flex-direction: column;
        align-items: center;
		gap: 10px;
	}
	ul.menu li a {
        width: 100%;
	}
}